Step by step exercise. Unit 4. Creating the class style.



To practice the operations required to create a class style and apply it to a paragraph.


1 You need to open the Dreamweaver program in order to perform the exercise.

2 If the Files panel doesn't show up, open it through Window menu, and then select the Files option.

3 Select the Animals site in the Files panel.

4 Click on the cats.htm document, found in the Files panel. The file will be opened in Dreamweaver.

5 Select the word cats, which is at the beginning of the document.

In the Properties panel, introduce the following changes:

6 In Color - write #663300.

7 Click on the Bold button.

8 Click on the Italic button.

9 In Format choose Heading 1.

The Page doesn't have a definied style, so you will create the first in this way:

10 In Style - choose Manage Styles ...

11 In the dialog square Edit styles that appears, click on the New button.

12 In the new window, write Animalstitle in Name:.

13 Select Only this document, from the Define in option.

14 Click on OK.

15 Click on OK. We're not going to modify the styles properties.

16 Click on Done.

When the Page already has a defined style, it is easier to define a new style:

17 Select the phrase Press on the image to see the cat week, that is underneath the image.

In the Properties panel introduce the following changes:

18 In Color - choose the color you prefer.

You will see that in the Style field it's shown the name: Style1.

19 Unfold the Style list and choose Change name...

20 In the window that comes up, write Note as the new name and click OK .

If you want to verify that the new style has been added:

21 Select in Text menu, Styles CSS option, You will see the new style: Notes.

To re-establish the phrase without the style Notes:

22 Select the phrase Click on the image to see the cat week.

23 Unfold theStyle list and choose None.

The phrase will have been turned into its original color.

24 Click on the Save button on the tool bar.