Editing Styles in Dreamweaver

This entry is part 9 of 20 in the series Dreamweaver CS5 Tutorial

Let us now create the footer menu and copyright information.

The footer menu will be made of text so we simply need to type in the menu items: ‘Home’, ‘About Us’, ‘Services’ and ‘Contact Us’.

The text is not visible because of the black background. Let us edit the #footer stylesheet and specify the yellow text color.

  • Select the footer style in the CSS styles panel
  • Right click on the #menu style and then select ‘Edit…’
  • Specify the following style details:
  • To center the text
  • Click the OK button
  • The footer now looks like this:

To add more than one space between the menu items you will need to add a non-breaking space [Insert > HTML > Special Characters > Non-Breaking Space]

  • Insert 2 – 3 non breaking spaces between the menu items
  • The footer menu now looks like this:

Now let’s add the copyright information below the footer menu:

  • Press the Shift and Enter keys to get on the next line
  • Insert the copyright symbol [Insert > HTML > Special Characters > Copyright]
  • Type in the text ’2010 Company Name’
  • The footer now looks like this:

Our webpage now looks like this in Dreamweaver:

Series Navigation Dreamweaver MenuEditable Regions in Dreamweaver Template

Posted in Dreamweaver | No Comments »