Using Dreamweaver

Dreamweaver MX Tutorial

Created and designed by Vivienne Trulock for ilikecake, 2005

Style Sheets

Style sheets are a way of ensuring that all the elements of a page - header, paragraph etc. - are the same from one page to the next. Style sheets can also be used to layout a page. There are several different flavours of style sheets. The simplest type of style is to modify an existing HTML tag. Using the template that you worked on in the template page and these images, we will make a replica of this page. Save the images into your images folder before beginning.

Redefine the <P> HTML tag

Click on 'Window > CSS Styles' to open the CSS window.
window style sheet

Click the 'New Style Sheet' icon - the button at the bottom with the +.
create new style sheet

Click 'Redefine HTML tag''. In the 'Tag' dropdown menu select 'p'. We are going to define a style for 'paragraph'.
redefine p tag

Make sure that 'New Style Sheet File is selected'. Browse to your local folder and in the filename box type in 'my_style'. The style sheet file is saved as a .CSS file. Click 'Save'.
save style sheet

The next window allows you to change the font attributes for 'paragraph'.
settings for p

Use these paragraph settings

Type

This specifies the font, the size and the line spacing:

  1. font family: Verdana, Arial, Helvetica, sans-serif
  2. font size: xx-small
  3. line height: 150%

Block

This specifies how we want the text to layout - justified is the same as in word processing - the text is aligned both on the right and the left.

  1. text align: justify

To test the styles, type in some text, highlight it and in the 'Format' drop down menu in the properties window select 'Paragraph'.
format settings

Define More HTML Tags

Use the following settings to define more HTML tags which occur in the site

<body> - main document body

Type

This specifies the font, the size, the line spacing and the colour of the text:

  1. font family: Verdana, Arial, Helvetica, sans-serif
  2. font size: xx-small
  3. line height: 150%
  4. font color: #333333

Background

This specifies the background colour, the background image, how the image should repeat and its horizontal and vertical position on the page. The image in this case is the footer at the bottom of the page.

  1. background: #D6D6CD
  2. background image: design_dream2_r3_c2.jpg
  3. repeat: repeat-x
  4. horiz position: center
  5. vert position: bottom

Box

This specifies that there is no margin so the <body> takes up the entire space of the page.

  1. margin all: 0px

<h1 > - level 1 header

Type

  1. font family: Georgia, Times New Roman, Times, serif
  2. font size: large
  3. font color: #dddddd

<h2> - level 2 header

Type

  1. font family: Georgia, "Times New Roman", Times, serif
  2. font size: medium
  3. font color: #555555

<h3> - level 3 header

Type

  1. font family: Georgia, Times New Roman, Times, serif
  2. font size: small
  3. font weight: bold
  4. font style: italic
  5. font color: #333333

Block

  1. letter spacing: 1px

<h4> - level 4 header

Type

  1. font family: Verdana, Arial, Helvetica, sans-serif
  2. font size: xx-small
  3. font weight: bold
  4. case: uppercase
  5. font color: #333333

<li> - list item

Type

  1. font family: Verdana, Arial, Helvetica, sans-serif
  2. font size: xx-small
  3. line height: 150%

Block

  1. text align: justify

Define Class Attributes

You can also create a custom class. You do this if you just want to apply a certain font size or colour etc to a small amount of text.

Exercise - create a custom class stylesheet

Click on 'Window > CSS Styles' to open the CSS window, as above. Click the 'New Style Sheet' icon, as above. Click 'Make Custom Style (Class)'. In the Name drop down menu, type in the name of your custom class - example 'invisible'.

The invisible class attribute allows us to make content invisible by applying this class to a tag. In this case, it is applied to a skiplink which we want to only be 'visible' to blind users - it will be read out by screen readers but invisible in visual browsers.

Because we have already set up our style sheet name in a previous exercise, it comes up automatically selected. Click 'OK'. The next window allows you to change the font attributes for your tip, as in the previous exercise. To test the styles, type in some text, highlight it and click on the new styles 'invisible' in the CSS window. (Window > CSS)

.invisible - contains invisible text such as skip links

block

  1. display: none

Create Text Rollovers

The last type of style sheet deals specifically with links and rollovers. This type of style allows you to create rollovers without making images.

Click on 'Window > CSS Styles' to open the CSS window, as above. Click the 'New Style Sheet' icon, as above. Click 'Use CSS Selector'.
CSS selector

In the Selector drop down menu, there are four different options.

  1. a:active - when the browser is getting the linked page the link is active
  2. a:hover - the rollover itself
  3. a:link - the default link attributes
  4. a:visited - the visited link attributes

link options

Select one option at a time and assign attributes to each of the link states. If you don't want an underlined link, just select the 'None' checkbox in the 'Decoration' options.
decoration none

Use the settings below to create a link style

a:link - default link

Type

  1. font family: Verdana, Arial, Helvetica, sans-serif
  2. font size: xx-small
  3. font weight: bold
  4. line height: 150%
  5. font color: #313425
  6. text decoration: none

Border

  1. border bottom style: dashed
  2. border bottom width: 1px
  3. border bottom color: #333333

a:visited - visited link

Type

  1. font family: Verdana, Arial, Helvetica, sans-serif
  2. font size: xx-small
  3. font weight: bold
  4. line height: 150%
  5. color: #804000
  6. text decoration: none

Border

  1. border bottom style: dashed
  2. border bottom width: 1px
  3. border bottom color: #333333

a:active - selected link

Type

  1. font family: Verdana, Arial, Helvetica, sans-serif
  2. font size: xx-small
  3. line height: 150%
  4. font color: #FFFFFF

a:hover - hover link

Type

  1. font family: Verdana, Arial, Helvetica, sans-serif
  2. font size: xx-small
  3. line height: 150%
  4. font color: #FFFFFF

To test the styles you must have some linked text. View the page in the browser window to see the results.

What if you want to link a new page to an existing style sheet? No problem...

Link to Existing Style Sheet

Open a new page in Dreamweaver and open 'Window > CSS Styles', as above. Click the 'Attach Style Sheet' icon - the first button at the bottom.
attach style sheet

'Browse' and click on 'mystyle.CSS' and click 'Select'. Test the styles in the same way as before.