This tutorial shows you how you can add a CSS navigation menu, somewhat like what you see in the side panel of thesitewizard.com, into your website using Dreamweaver. The menu items will be text-based but look like buttons that change colour when your mouse hovers over them.
Some knowledge of how to use Dreamweaver is assumed here. If you are new to Dreamweaver, it may be better to use the tutorial How to Design a Website with Dreamweaver instead, since that tutorial assumes no knowledge and takes you through all the steps of creating a fully functional website with the web editor.
If you don't have a website at all, and are just gathering information on how you can create one, it's a good idea to take a look at How to Build Your Own Website. There's more to making a website than designing its visual appearance.
The first thing you should do is to get the code you want from the navigation menu wizard. Just follow the instructions to create a button menu for your site. The wizard lets you customize many things: you can set the colours used by the menu, decide on the text that goes on each button and the web address each button points to, as well as control the width of the buttons. When you're through customizing, the wizard will create all the code you need for the button menu.
Do not close the browser while working on the next few steps. The wizard creates a few sets of code that you'll need to insert into your site separately.
The first section of the results page supplies the CSS code for the menu. This is the part of the menu that controls the appearance of the buttons. Click your right mouse button somewhere in the text box under the section "Cascading Style Sheet (CSS) Code". A menu will pop up. Click the "Select All" item in that menu. The CSS code in the box should now be highlighted, showing that it has been selected.
Click your right mouse button in the same text box again. This time, when the menu appears, click the "Copy" item.
Start up Dreamweaver, if you have not already done so. Do NOT close your web browser -- leave it open. You'll need to go back to the browser again later to get more code.
Select "File | New": that is, click the "File" menu and select the "New" item on the menu that appears. (Note that I shall use the same convention of referring to menu items in the rest of this article.)
Dreamweaver's "New Document" dialog box should appear. Look under the "Page type" column of that dialog box for a line that says "CSS". Click it to select it. Then click the "Create" button.
You should now have a mostly blank document with two lines added by Dreamweaver at the top. There should be a text cursor blinking somewhere under those initial two or three lines.
Select "Edit | Paste" from the menu. (Remember, "Edit | Paste" means click the "Edit" menu followed by the "Paste" item on the menu that appears.) The code you selected earlier in the browser should appear in the window.
Look at the code that is pasted. You should see either the word "tswnavbar.css" or "tswtabs.css" (both without the quotation marks) somewhere near the top. That is the filename that you need to use when you save the file. The same filename is also given by the Wizard (which should still be open in your browser window). (For the curious, "tswnavbar.css" is used if you elected to use the vertical navigation menu, and "tswtabs.css" if you chose the horizontal tab bar.) Do not use any other name or the code will not work correctly.
Select "File | Save As" from the menu. A dialog box will open. Type in the name of the file which you noted earlier (that is, either "tswnavbar.css" or "tswtabs.css"). If you have already forgotten the name, switch to your web browser and look for the name you need to use in the "Cascading Style Sheet (CSS) Code" section. (Tip: an easy way to make sure you spell the filename correctly is to copy and paste the name, without the quotes, from the browser.)
Click the "Save" button.
You're now done with this file in Dreamweaver. Close it by selecting "File | Close" in Dreamweaver.
Now load the web page where you want to insert the menu. If you are using templates, you should load your template file instead. (If you don't know what Dreamweaver's template system is, see How to Use Templates to Manage Your Website in Dreamweaver. You're not fully exploiting the power of this editor if you're not using its template system.)
If this is a new document, make sure you save the page first before you proceed, otherwise Dreamweaver won't be able to create the correct web addresses ("URLs") needed for your menu to work properly.
Select "Text | CSS Styles | Attach Style Sheet" from the menu. A dialog box with the title "Attach External Style Sheet" should appear. Click the "Browse" button, select the "tswnavbar.css" or "tswtabs.css" file that you just saved in the previous step, and click the "OK" button. Make sure that the "Add as link" radio box is selected, and not the "Import" button. Then click the "OK" button to dismiss the dialog box.
Switch to your web browser again and scroll down to the section "HTML Menu Button Code". Just so you don't worry, I should probably mention that you're skipping the section labelled "HTML Code for the <HEAD> Section". You've already done that in the previous step using Dreamweaver's easy method of attaching a style sheet, so you don't need to do it manually.
In any case, the section "HTML Menu Button Code" contains the actual menu for your web page. Once again, click the right mouse button in the text box under that section and click "Select All" to highlight the code. Then click the right mouse button once more in that text box and select "Copy".
Switch back to Dreamweaver. You should now be looking at your web page or template in the editor (since you opened it earlier). Click a blank spot on the page where you want to insert the button menu. If necessary, hit the ENTER (or RETURN key on a Mac) key a few times to get a blank space. If you've done it correctly, you should be able to see a blinking text cursor in that place. This is the location where your menu will appear.
Select "View | Code" from the menu. This changes Dreamweaver from "Design" mode to "Code" mode. For those who have not followed my Dreamweaver tutorial, the Design mode lets you create your page using a visual interface. The Code mode shows you the underlying HTML code for your web page. You will need to use the "Code" mode to insert the menu.
Your web page will no longer have the familiar appearance you're accustomed to. However, your cursor should still be at the same spot you left it. Look for it.
If you created some blank space the way I suggested earlier, chances are that your blinking text cursor is somewhere in a piece of code that looks like the following.
In fact, it's probably between the <p> and the .
Using either your keyboard or the mouse, move your cursor to the spot just before the code shown. That is, the blinking text cursor should now be just before
the entire <p> </p> sequence.
Select "Edit | Paste" from the menu. The code that you selected and copied from your browser should appear here.
Select "View | Design" from the menu to return Dreamweaver to the Design mode. Your menu should now appear in your web page or template. Save your web page or template in your usual way.
Although not required, it will be nice if you can acknowledge your use of the navigation menu bar code by linking to thesitewizard.com somewhere on your site (perhaps on your "Acknowledgements" or "Links" page or something). One way is to use an ordinary text link like:
If you prefer graphical buttons, the Wizards results page has the code for one such button under the "Miscellaneous" section.
(Actually, feel free to link to me any way you wish. These are just suggestions.)
Congratulations. You've successfully added a professional-looking navigation menu to your website using Dreamweaver.
Copyright © 2008-2018 by Christopher Heng. All rights reserved.
Get more free tips and articles like this,
on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.
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 https://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 or distribute this article in whole or part, in any form.
It will appear on your page as:
How to Add a CSS Navigation Button Menu to Your Website with Dreamweaver
