1. Start up

We are going to style the rugby.htm page we created last week.

Open up Internet Explorer and open up Moveable Type (http://www.earlham.edu/moveabletype/mt.cgi) in order to make a new entry in your Management blog. Give it the Title : Beginning to Style

For your convenience, all the question text and things to do are listed in the Blog Questions section at the end of this page. Select all of this text and copy it into the Blog entry you've just made. Complete the assignment as you do the styles with Dreamweaver.

Start up Dreamweaver in the normal way.
Notice that the site is now automatically set to h:\www.
Open rugby.htm that you created last week.
2. Create a style
  • Open Design : CSS styles pane.

    Click the New CSS Style button (with the + )
3. Style a HTML tag

Click the following:

Type : • Redefine HTML tag
Define in : • This document only
Tag : pull down to h1

OK
4. Define style attributes.

In Category : Type

Set
Font : Arial, Helvetica, sans-serif
Size : 2 ems Make sure you choose ems and not the default pixels. You'll see why later.
Weight : bold
Variant : Small Caps
Color : White {you'll see why soon}
Question 1: what hex code does this produce?

Category : Background
Background Color : choose black or other dark colour.
Category : Block
Text Align : Center

Save file and preview in Netscape.

Now take a look at the style codes produced.
Copy everything between the <style> ... </style> tags in the <head> section into the blog entry .

 

Question 2: Does the background stop where the text stops? Does the background stay a fixed width when you move the right side of the browser window in to the center?

5. Define styles for <h2> and <h3>

Repeat the process to redfine heading tags h2 and h3.

  • Use Font family : Arial, Helvetica, sans-serif
  • set <h2> to font size : 1.7 ems Choose a different combination of text color and backjground color.
  • set <h3> to to size 1.4 ems. No background.

Now notice how all the headings are set to the same style.
6. Padding & borders

OPTIONAL Now let's tart up the <h2> style.

In Design : CSS Styles, double-click on h2 to bring up the edit box. Now choose:

Category : box
Padding : 0.25 ems check Same for All
Category : border
Style:
Top: solid
Width : 5 pixels
Color : gray, #999999

Cool!
7. Style whole page - body
  • repeat stage 2 to create a New Style.
  • stage 3, redefine <body> tag.
  • Category : Type
    Font : Verdana, Arial, Helvetica, sans-serif
    Size : 12 pixels
    Line height : 1.6 ems

Q 3a: What has changed about the text?

Preview in Internet Exploder.
Select View —> Text Size : Medium
Select View —> Text Size : Large

Q 3b: What happens (if anything)?

Now Preview in Netscape:
Select View —> Text Zoom : 120%
Select View —> Text Zoom : 150%

Q 3c: What happens now?
8. Styling Image box

We can see that the text is rather cramped up next to the graphic images. Why don't we put some padding around each graphic?

  • repeat stage 2 to create a New Style.
  • stage 3, redefine img tag.
  • Category : Box
    Padding : Top : 5 pixels. Check Same for All.

The graphics now have a 5 pixel margin. But this is difficult to see. Let's draw a box border.

In Design : CSS Styles, double-click img

Category : Border
Style : Dashed
Width : 1 pixel
Color : Whatever

Q 4: Does anything show in the DW Design pane?
Preview with Netscape.
What do you see in the Netscape browser?
What do you conclude?

Now copy all the styles in the <style>...</style> section into the Extended Entry pane of your blog entry.
9. Styling Links

If you have time

  1. a:link - styling the text you click on.
    • repeat stage 2 to create a New Style.
    • stage 3, this time • Use CSS Selector and choose a:link from the pulldown
    • Category : Type
      Decoration : check none (get rid of those pesky underlines)
      Weight : bold
      Color : maroon #CC0000
      OK
  2. a:visited - what the link looks like after you have clicked on it.
    • repeat stage 2 to create a New Style.
    • stage 3, • Use CSS Selector and choose a:visited from the pulldown
    • Category : Type
      Decoration : check none
      Weight : bold
      Color : dark blue
      OK
  3. a: hover what the link looks like while the mouse hovers over it.
    • repeat stage 2 to create a New Style.
    • stage 3, • Use CSS Selector and choose a:hover from the pulldown
    • Category : Type
      Decoration : check none
      Weight : bold
      Color : White
    • Category : Background
      Background Color : maroon #CC0000
      OK

Now save, and Preview in Netscape.
Notice that there are no annoying underlines and the cool rollover effect on the links (including the superscripted link).
Questions for blog

Styling <h1>

Set text color to White:
Q 1: what hex code does this produce?
Answer:

Copy everything between the <style> ... </style> tags in the <head> section into the blog entry .

Question 2: Does the background stop where the text stops?
Does the background stay a fixed width when you move the right side of the browser window in to the center?
What does this tell you about a block level tag?

Answer:

Style whole page

Q 3a: What has changed about the text?

Ans:

Preview in I.E, View —> Text Size (change)
Q 3b: What happens (if anything)?

Ans:

Preview in Netscape, View —> Text Zoom (change)
Q 3c: What happens now?

Ans:

Styling Image box

Q 4a: Does anything show in the DW Design pane?

Preview with Netscape.
Q4b : What do you see in the Netscape browser?

Q4c : What do you conclude?

Now copy all the styles in the <style>...</style> section into the Extended Entry pane of your blog entry.