How to Add Links, Change Fonts and Colour in Dreamweaver CS3

Hyperlinks, Fonts, Styles, Sizes and Background Colour


How to Add Links, Change Fonts and Change Colours in Dreamweaver CS3 (Part 3)

by Christopher Heng, thesitewizard.com

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 improve your site and add functionality to it. In particular, you will learn how to

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.

  1. Start up Dreamweaver, if you have not already done so.

  2. As before, open your index.html page. You can do this by doubleclicking the filename in the right column of your Dreamweaver window.

  3. 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 "<h3>" is highlighted.

    For convenience, I shall refer to this bar, where you can see the highlighted "<h3>", 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 "<h3>" word - that is, move your mouse over the "<h3>" 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.

  4. Now delete the rest of the text in the side bar. Simply select all of it with your mouse, and hit the DEL key.

  5. 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.

  6. 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.

  7. 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.

  8. 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 "<p>", you can proceed to the next step. If the last item is "<a>", you need to click a little futher into the empty space to the right of "Home", but still within the side bar column.

  9. Hit the ENTER (or RETURN) key to create a new line.

  10. 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.

  11. 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.

How to Change the Background Colour

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.

Next Chapter: Creating a More Sophisticated Navigation Menu

In the next chapter, we will use Dreamweaver to create a button-based navigation menu bar somewhat like what you see on the left column of thesitewizard.com.

Copyright © 2007-2014 by Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from http://www.thesitewizard.com/.

You are here:

Top » Getting Started with Your Website »

How to Create / Make Your Own Website: The Beginner's A-Z Guide » List of All Dreamweaver Tutorials »

thesitewizard™ News Feed (RSS Site Feed)  Subscribe to thesitewizard.com newsfeed

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.


Please Do Not Reprint This Article

This article is copyrighted. Please do not reproduce this article in whole or part, in any form, without obtaining my written permission.

Related Articles

New Articles

Popular Articles

How to Link to This Page

It will appear on your page as:

Dreamweaver Tutorial: How to Add Links, Change Fonts and Change Colours in Dreamweaver CS3





Home
Donate
Contact Us
Link to Us
Topics
Site Map

Getting Started
Web Design
Search Engines
Revenue Making
Domains
Web Hosting
Blogging
JavaScripts
PHP
Perl / CGI
HTML
CSS
.htaccess / Apache
Newsletters
General
Seasonal
Reviews
FAQs
Wizards

 

 
Free webmasters and programmers resources, scripts and tutorials
 
HowtoHaven.com: Free How-To Guides
 
Site Design Tips at thesitewizard.com
Find this site useful?
Please link to us.