Most websites consist of more than one web page. And they typically link to other websites on the Internet, leading to the name World Wide Web (the "www" in web addresses) to collectively refer to all the websites in the world, since they are, directly or indirectly, linked together like the threads of a spider's web. In this chapter, you will use NetObjects Fusion to add new pages to your site, as well as to link to them and to other sites, thus making your site take its place in this world wide web.
If you are new to NetObjects Fusion 11, and are new to creating websites, I recommend that you start at the beginning instead of this middle chapter, since I assume prior knowledge of those earlier chapters. Start by reading How to Make / Create Your Own Website: The Beginner's A-Z Guide and then go on to chapter 1 of the NetObjects Fusion 11 tutorial.
By the end of this chapter, you will have:
added new pages to your website, including a Site Map, an optional About Us page, and other pages that you may want on your site;
added buttons to your navigation menu to link to those new pages; and
learnt ("learned" in US English) to link to other websites as well as to pages on your own site.
Although there are no rules specifying what pages a website should have, most websites have something known as a "Site Map". A Site Map is usually an exhaustive list of all the pages on a website, with links to all of them. It's like a cross between an index at the back of a (physical) book and a map of a city. It allows your visitors to get to any part of your website from that page. You can see an example of a site map by looking at thesitewizard.com's own site map. You will be creating such a site map here.
If you are running a commercial website, that is, you plan to sell things on your site, you may also want to create an "About Us" page. Such a page tells your visitors about your company, displays your business address and telephone number, and perhaps even provide a map of your shop's physical location so that your customers can get to you. Note that you don't have to be a business to have your own "About Us" page. You can have one even if yours is a personal site or a hobby site. For example, some people put their CV (curriculum vitae, or résumé) on their "About Me" page for prospective employers.
You can of course add other pages to your website. After you use the procedure below to create your site map, go ahead and create any other pages you want. Don't create your feedback form (or contact form) page though. We will be doing it in the next chapter. There's more to creating a feedback form than its visual design.
Start up NetObjects Fusion and load your website, if you have not already done so. If you are already in NetObjects Fusion, click the "Site" button on the toolbar to return to the Site view window that you saw in chapter 1.
Right click the Home icon. That is to say, click the right mouse button on the Home icon.
Click the "New Page" item in the menu that pops up.
NetObjects Fusion will draw a new icon, labelled "Untitled", below the Home icon. Click the yellow part of that icon (that is not on the word "Untitled" but in the yellow portion surrounding it) to select it.
In the Page Properties panel on the right side of the page, change the "Page name" field of "Untitled" to "Site Map" (without the quotes). If you click the next field, the "Page title" field, you will find that its contents automatically change to "Site Map" as well. If you want, you can change this Page title field to "Site Map - example.com" where "example.com" is the name of your site. This is optional; you can leave the title set to "Site Map" if you like.
Click the "Custom Names" button. The button is located directly underneath the "Page title" field.
The same Custom Names dialog box that you encountered in chapter 1 will appear. If you want to, you can change the name that appears on your banner by changing the text in the "Banner" field, otherwise, leave it as it is.
Click the down arrow for the "File extension" field and select ".html" as you did in chapter 1.
Click the "OK" button to save the changes and dismiss the dialog box.
Now doubleclick the Site Map icon to open the page. Notice that the site map page now has 2 buttons in the navigation menu, the "Home" button and the "Site Map" button. NetObjects Fusion 11 automatically creates a navigation menu button for every new page you create.
At this point, your new web page is ready for you to customise. Since a site map is basically just a list of links to other pages on your website, probably with one link per line, you'll first need to learn how to create links (or "hyperlinks") to other pages. This brings us to the topic of the next section.
If you don't already have a text block on your web page, put one there. (See chapter 1 if you've forgotten how to do that.)
Type "Home" (without the quotes) followed by the ENTER key. In the next line, type "Site Map" (again, without the quotes). If you plan to create an "About Us" page, type "About Us" on yet another line. The order of the lines doesn't matter. You can put them in any order that seems sensible to you.
(Don't worry. I know that those lines aren't links yet. Just type the text first, and we'll convert them into links in the next step.)
Select the word "Home" with your mouse. That is, drag your mouse across that word (which you just typed in the step above) so as to highlight it.
Move your mouse over the toolbar buttons until you get one with a tooltip of "Link". For the impatient, the button looks like a globe with a chain on its lower portion, and it's on the same toolbar as the "Text" object button.
A dialog box with the title "Link" will appear. Click the down arrow for the "Link type" field (near the top of the dialog box) and select the "Internal Link" line. (Don't worry if it's already selected; doing it again will do no harm.)
Since this is a link to the Home page, look at the list of pages in the big window below the "Link type" field. There should be two items in that window, "Home" and "Site Map". Click the "Home" item.
Click the "Link" button. This button is at the bottom of the dialog box. The dialog box should disappear, and the "Home" word on your page should now appear as a hyperlink.
Now do the same for the "Site Map" word. In this case, however, in the "Link" window that appears later, click the "Site Map" item instead of "Home". (Yes, I know it's obvious, but I want to state it for the sake of completeness.)
You can't link to your About Us page at the moment, or any other pages on your site, since you haven't created them yet. However, once you have created those pages, remember to return to your Site Map to add links to them as well. Once those pages appear in your Site view, they will also become available for you to link to using the "Link" button.
If you ever need to make a picture into a clickable link, simply follow the same procedure as above. However, instead of selecting the text to modify, just click the picture once to select it. Then click the "Link" button on the toolbar as before, and do the same as you would with a text link.
Linking to other websites on the internet follows basically the same procedure. For example, let's say that you want to link to thesitewizard.com. Type whatever words you want to say first, such as "Our thanks to thesitewizard.com". Then select the relevant word(s) that you wish to make into a link, like "thesitewizard.com", and click the "Link" button on the toolbar.
In the "Link" dialog box that appears, click the drop down arrow for "Link type" field and select "External link".
The window below will change. Click the blank field next to "New link" and "http://" to put your text cursor there,
and type "
www.thesitewizard.com". Then click the "Link" button at the bottom of the dialog box.
To create other pages for your website, such as your About Us page, or any other page, return to the Site view again. Right click the "Home" icon (representing your home page) as before and select "New Page" in the menu that appears. This will create another new page on the same level as your Site Map page.
You will find that it's also possible to right click an icon in the second level, such as your Site Map icon, and create a new page from there. This will create a web page that NetObjects Fusion will regard as a sub-page of the original page you right-clicked. It's useful if you want to create different sections or categories for your website, with its own set of pages. If this paragraph confuses you, just stick to the instructions in the paragraph above. The facility is there if you want to use it, but you can ignore it if you don't need it (or don't understand its purpose).
If you ever find that you've created a web page that you want to remove, simply right click the icon for that page in Site view and select the "Delete Page (s) Delete" item on the menu that appears. NetObjects Fusion 11 will remove that page as well as its corresponding button in the navigation menu.
Some of you may be tempted to use bullet points for your list of links on your Site Map page, the way I do it on my Site Map. For example, you may realise that you can make a bullet point list by simply clicking the button with the tooltip "Bullets: Unordered" on the toolbar.
Unfortunately, when I tried that in preparation for writing this tutorial, and made the text of every bullet point into a link (in the same manner I did for my real Site Map), I found that NetObjects Fusion 11 generates invalid HTML code for such an operation. The result is a web page that does not work properly in modern web browsers like Internet Explorer 8, Firefox, Opera and probably others. (It looks fine from within NetObjects Fusion 11, but the links will not work correctly in a real browser.)
For the technically inclined who can read HTML, the problem is that NetObjects Fusion 11 creates bullet points with code like the following:
<li style="><a href="../index.html">Home</a></li>
Notice the open quotation mark after
style= but the absence of a corresponding closing quotation mark.
Don't worry if you don't understand the contents of this box. It's just a technical explanation for those who are curious.
Of course it's possible that this bug will have been fixed in NetObjects Fusion 11 by the time you read this. If so, you can of course use the facility. For your reference, the exact version of NetObjects Fusion that I used for this tutorial series is 11.00.0000.5016. You can find out the full version number by clicking the "Help" item on the menu bar, followed by the "About NetObjects Fusion" item on the drop down menu. If you have the same version number as I do, then it's quite likely that you will face the same bug as I did.
Once you've finished adding all the pages you want to your website, publish it to the Internet and test your new pages and buttons in a real web browser. Remember to go to your Site Map page as well and click the links there, to make sure that you've linked to the correct pages on your site.
At this point, you have not only finished most of the pages of your website (except for the feedback form), but you also have the necessary knowledge and skill to create other pages any time you want.
In the next chapter, we will design the final page of your site: a feedback form which your visitors can use to drop you comments or feedback.
You are here:
Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at http://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce this article in whole or part, in any form, without obtaining my written permission.
It will appear on your page as: