In the previous chapter of this Dreamweaver tutorial, we spruced up the two-column web page you had previously designed in chapter 1 by adding a logo for your website and inserting pictures into the main body.
In this chapter, you will continue to use Dreamweaver to augment your site and add functionality to it. In particular, you will learn how to
- add links or hyperlinks to your web page, allowing you to link to other pages on your website as well as on the Internet;
- change font faces, styles, sizes and colour;
- change the colour of the background.
If you have missed the earlier instalments of this tutorial, and wish to find out how you can create your own website from scratch, you can find the first chapter in Dreamweaver Tutorial: How to Create a Website with Dreamweaver CS3 (Part 1). This chapter assumes that you have completed all the steps mentioned in the earlier chapters.
Adding a Basic Navigation Menu to Your Sidebar
So far, all our modifications to the initial page have been to the header, where we added your site logo and site name, as well as to the main body, where we added information about your website and products. Up to this point, the leftmost column of your web page still contains the default placeholder text that Dreamweaver CS3 inserted when it created the page.
Dreamweaver refers to the leftmost column as the "sidebar". Most websites, like thesitewizard.com, insert a navigation menu into this space. A navigation menu typically links to the certain important pages on the website, such as the home page (the page you're currently designing), the site map, the "About Us" page, and the "Contact Us" page. If the site has a large number of pages, it will also link to the main sections.
In other words, a navigation menu, in its most basic form, is merely a series of links to certain other pages of your website. For this chapter, we will create a simple but fully-functional navigation menu. In the next chapter, you will modify that menu to use buttons somewhat like those you see on thesitewizard.com and other websites. However, for now, it is important for you to work through the process of adding links to pave the way for that advanced menu of chapter 4.
Start up Dreamweaver, if you have not already done so.
As before, open your index.html page. You can do this by doubleclicking the filename in the right column of your Dreamweaver window.
In the left column, you will see a bold subtitle with the words "sidebar1 Content". We do not need this header, so we will delete it. To remove it, use your mouse and drag it across the words "sidebar1 Content" selecting it. Notice that near the bottom of the Dreamweaver window, just above the "Properties" panel, the word "
" is highlighted.
For convenience, I shall refer to this bar, where you can see the highlighted "
", as the status bar. The status bar contains useful information about where your cursor is currently located in the raw HTML code that Dreamweaver generates behind the scenes for you.
Click the highlighted "
" word - that is, move your mouse over the "
" tag, and click the mouse button. A single click will do the trick. Then hit the DEL key. This will not only delete the words "sidebar1 Content", but it will also remove the code marking off that section as a subtitle.
Now delete the rest of the text in the side bar. Simply select all of it with your mouse, and hit the DEL key.
With your text cursor still in the side bar, click "Insert | Hyperlink". That is, click the "Insert" menu, and then click the "Hyperlink" item on the menu that appears. A dialog box appears, asking you for the details of the link.
Enter "Home" (without the quotes) into the box entitled "Text:". Then enter "index.html" (without the quotes) for the box entitled "Link:". Make sure you enter the "index.html" exactly as I specified, with no capital letters (no uppercase letters), no spaces and no quotes. Click OK.
You should see a link appear in your side bar. When your page is published onto your web server, and users click the link, they will be brought to the "index.html" page of your site. We have added the "Home" link even though you are already at index.html because it is good policy to have a standardized navigation menu on your site - that is, we want all the pages on the site to have exactly the same navigation menu. It reduces confusion in your visitors when they want to hunt for certain menu items.
At present, the link is highlighted. Move the mouse cursor to the end of the word "Home" and click in the empty space slightly to the right of the word. The word "Home" should no longer be selected. Look at the status bar. If the last item in the status bar is "
", you can proceed to the next step. If the last item is "", you need to click a little futher into the empty space to the right of "Home", but still within the side bar column.
Using the above procedure, create links to the following pages as well.
- Text: About Us, Link: aboutus.html
- Text: Contact Us, Link: feedback.html
- Text: Site Map, Link: sitemap.html
If your website is not a company website but a personal one, you can use "About Me" instead of "About Us" if you wish. However, in order to avoid confusion later, I recommend that you keep the filenames that I supplied. That is, don't change "aboutus.html", "feedback.html" or "sitemap.html". More importantly, your filenames should not include spaces or capital (uppercase) letters. Using spaces or capital letters in your filenames introduces a variety of needless complications down the road.
Notice that the side bar only extends as far as your last link. If you want the side bar to extend even further, keep adding blank lines till you're satisfied with the length of that column.
At this point, your main page is fully functional. That is, it contains a navigation menu with working links and a right column that has the information you want your visitors to read. At present, of course, those links lead to nowhere, since you have not created the pages for those links yet. (The pages will be created in a later chapter.)
It is also possible to add a link to a web page that is not on your own website. For example, to link to thesitewizard.com, simply follow the procedure above, but instead of typing a relative link like index.html or the like, you have to give a full URL. Enter into the "Link" box "http://www.thesitewizard.com/" (without the quotes), and type "thesitewizard.com" into the "Text" box.
How to Make an Image into a Clickable Link
On many websites, the logo of the site is actually a clickable link. For example, if you were to check my logo at the top of this page, you will see that it is actually a link to thesitewizard.com.
It's very easy to make your logo into a link. Simply select the logo by clicking it. In the Properties pane at the bottom of the window, look for the "Link" box. Enter the address of your website, for example, "http://www.example.com/" (without the quotes) into that box. Alternatively, you can enter a relative link, like "index.html". Next, look for the "Border" box. Enter "0" (zero, without the quotes) into that box. This prevents certain browsers from putting a blue border around your image.
How to Change Font Typefaces, Sizes, Style and Colours
Dreamweaver allows you to change a various aspects of the text that is displayed on your page, including the font typeface, size and colour.
Changing the Font Typeface
To change the font of a particular piece of text, first select the relevant text. With the text selected, look at the Properties panel at the bottom of the window. In the box labelled "Font", you should be able to see the default font selection, "Verdana, Arial, Helvetica, sans-serif". This means that when your visitor arrives at your site, your text will be displayed using the Verdana font if he has it available on his system. If his system does not have the Verdana font, the web browser will attempt to use the Arial font. In non-Windows systems, these fonts are unlikely to be available. In such a case, the browser will use the third font face specified on the list, Helvetica. If none of the named fonts are on the system, your page will be displayed in any sans-serif font the browser can find.
To change the font, simply click the down arrow in the drop down box and select any of the suggestions given. Dreamweaver lists the sets of fonts commonly used by webmasters. Each set contains a list of fonts that are somewhat similar to one another, so that if one is not available, the alternative will (hopefully) not make your website look too drastically different.
Important note: although Dreamweaver allows you to add to the list by clicking the "Edit Font List" item in the drop down menu, think carefully before you add some esoteric font and use it for your website. If you use a font that only you and a few people have on their system, and don't specify commonly available alternatives, the web browser will simply use its default font (which varies from browser to browser and system to system) to render your web page. This will result in your page looking less-than-ideal for the majority of your visitors.
Changing the Font Size
Beside the "Font" drop down box is the "Size" box. This allows you to change the font size of the currently selected text. By default, the font size is set to 100%, which means that the font will display in its normal system-dependant default size. If this size is not satisfactory to you, you can change the value, either by typing in the number you wish, or selecting one of the predefined sizes from the drop down box.
There are a variety of ways to specify the font size. You can specify in terms of percentage of the original size, pixels, points, etc. I recommend that you stick to using either "ems" or "%" unless you have specific requirements and know what you're doing.
Be careful about making your font sizes too small. You may have superb eyesight, but remember that your web page is viewed by people of varying ages and visual capability. Elderly visitors as well as users with poorer eyesight may not be able to read your page if the text is too small.
Changing the Style of the Text: Bold and Italics
To make a particular piece of text bold, select the text and click the "B" button in the Properties panel. Likewise, if you want to italicize your text, select it and click the "I" button instead.
Changing the Colour of the Text
Changing the colour of your text is equally easy. After you select the text, look at the Properties panel. You should be able to see a black square beside another box that reads "#000000". To change the colour of the text, click the black square and select the colour. Be careful to choose a colour that contrasts with your background colour.
How to Change the Background Colour
Changing the Background Colour of the Whole Page
If you want to change the background colour of the whole page, click the "Page Properties" button at the bottom of the Dreamweaver window. Click the "Background color" square, currently set to grey, and change it to whatever colour you wish. Note though that this only changes the parts of the window that are not covered by the header, the side bar, the main content section and the footer. If you don't know what I mean, just try it. You can undo the changes you make by clicking "Edit | Undo" (or more specifically, "Edit | Undo Set Page Properties") if you don't like the colour change.
Changing the Background Colour of the Side Bar, Main Content Section, Header and Footer
As far as I can tell, there is no easy way from the menus or buttons to change the background colour of the side bar, main content section, header and footer. For those who feel that the existing colour is not satisfactory, follow the guide below. Otherwise, feel free to skip this section.
Changing the Background Colour of the Side Bar
Click somewhere in the side bar. Look at the status bar and click "
Warning: unlike many other operations in Dreamweaver, there doesn't seem to be any way to undo the change with "Edit | Undo" except to set it back to its original colour manually.
Changing the Background Colour of the Header and Footer
To change the colour of the header, click somewhere in the header. Locate "
Repeat the same procedure for the footer if you wish to change its background colour too. In the case of the footer, though, you will have to locate "
Warning: again, there's no way to undo the change with "Edit | Undo".
Changing the Background Colour of the Main Content Section
The background colour of the main section of your web page, which contains the bulk of your text, cannot be modified in the same way as the other sections.
First, click somewhere in the main section of your web page and click "
On the CSS panel on the right side of Dreamweaver, look for the line saying 'Properties for ".twoColLiqLtHdr .mainContent"'. Move your mouse to the line immediately above the words and drag it upwards until you can see the "Add property" link below. Click "Add property". In the drop down box, select "background-color". Click the colour box beside it to set the colour.
Once again, changes you make here cannot be undone using the usual "Edit | Undo" method.
Publishing Your Web Page
Now that you have completed adding a basic navigation menu, changing the fonts, styles, sizes and colours of your text, your page is ready for publication. As before, upload (publish) it to your web server by using "Site | Put".
Test your pages in your web browser. At present, although you have a functional navigation menu, there is no point clicking any of the internal links on it since you have not yet created any of the pages they link to. On the other hand, if you have linked to an external site like thesitewizard.com, clicking on the link should work correctly.
No comments:
Post a Comment