Making Simple Styled Menus with CSS

This is a test tutorial... you can download the pages that are these actual instructions and load them into Dreamweaver... that way you'll have the instuctions infront of you instead of having to flip back and forth between Dreamweaver and a browser.

Right click this file, it'll download a file called cssmenu.zip...unzip the files and place them in your site folder...right click ---> ccsmenu.zip

Load simpmenu-01.html into dreamweaver

First set up Dreamweaver with the CSS STYLES palette and the Design screen side by side like the image below... You can bring the INSERT palette closer if you wish...

(note: in the image below the above text is missing)

This is what your SCREEN should look like!

A snap shot of the work space

 

1. Make a an unordered list of the web pages you want to connect to from your home page (use the HTML Properties panel at the bottom of the screen.) I have already made this list.. but if you want your own... go a head change it.

2. "Highlight an item in the list, then use the Insert panel "Common" & choose "Hyperlink" To make that item in your list a link. Repeat until all items are seperate links.

3. In the CSS STYLE palette click on <style> so it is highlighted. At the bottom of the CSS Style Palette click on the New CSS Rule gadget. new CSS Rule a CSS Rule Palette will pop up.

Go to page 2 or load simpmenu-02.html