Thomas Wallace: Lectures and Resources - A collection of website design lectures and resources

Creating Styles For Basic Page Elements

1. Open Dreamweaver
2. From the file menu select New > Basic Page > HTML
3. Save the document in the Personal Web site Folder as styles.html
4. From the Modify Menu select Page Properties
5. Set the style in each of the categories

Below are descriptions for each of the categories and the options for each. In this exercise we will focus on the first three categories.

Category: Appearance

• Page Font - Sets the default font for the entire page
• Size - Sets the default font size for the page
• Text Color - Sets the default text color for the site
• Background Color - Sets the background color for the page
• Background Image - Allows you to set the background image for your page
• Repeat - tells the page whether or not the background image should tile or repeat on a horizontal or vertical axis.
• Margins - Sets the margins along the outside edge of the page. Set all of these to zero.

Category: Links

• Link Font - The font for all links on the page. I recommend leaving this set to (Same as page font)
• Size - The default size of the link text
• Link Color - The color of links on the page before they are clicked.
• Visited Links - The color of links on a page once they have been visited
• Rollover Links - The color of links when the user hovers or rolls over the link
• Active Links - The color of a link when you are on the page to which it points.
• Underline Style - provides options regarding whether or not a link is underlined.

Category: Headings

• Heading Font - Allows you to set the default font for all headings
• Heading 1 - Heading 6 - Allows you to set point size and color for each of the six heading styles.

Exporting and Attaching These Styles to Web Page

1. After you have completed styling each of the categories, save the document
2. Click in the top right hand corner of the CSS panel to open the panel options menu

3. Select Export from the list options
4. Save the file as text.css in the
   Personal Web site/assets/style/ folder
5. Save and close the styles.html document

Attaching the New Style Sheet to Your Page

1. Open your index.html file from the files panel.
2. On the CSS Panel, click on attach new style sheet button from the bottom right corner of the panel (it looks like a chain link)

3. In the Attach External Style sheet dialog, Browse to the text.css file in the style folder.
4. Check Add as Link
5. Click OK
6. Save your index.html file