Introduction
The navigation shown at the left of this page is created out of a styled bulleted list. This kind of navigation loads very quickly, and if you need to create or edit a button, you just edit it in Dreamweaver.
Try following the steps below or view my video demonstrations:
- copy and paste code - example
- edit colors with CSS - example
- add a background - example
- add an accent image - example
Steps
- Launch http://css.maxdesign.com.au/listamatic/ and choose a vertical or horizontal list navigation scheme that you like.
- Create a new file in Dreamweaver. Use Page Properties to
set the background color and font face. Copy
and paste the listamatic HTML section within
the body of the code. Save and use F12 to test and note that this is just a bulleted list.
- Copy and paste the listamatic CSS section within the style tag of the code. Save and use F12 to test - now the links should show the styles.
- Add a new button. (Just use enter key after an existing link, enter some text, and make sure there is something in the link box of the property inspector - usually you enter # as a placeholder.)
- Use the CSS Panel to adjust colors and sizes. Try adding a background image for the link and hover rules.