learning adobe dreamweaver cs4 - css styles

Learning Adobe DreamWeaver CS4By Greg Bowden

Guided Computer Tutorialswww.gct.com.au

Cascading Style Sheets

Chapter 12

PUBLISHED BY

GUIDED COMPUTER TUTORIALSPO Box 311Belmont, Victoria, 3216, Australia

www.gct.com.au

© Greg Bowden

This product is available in Single or Multi User versions.

Single-user versions are for single student or teacher use at any particular time, just as a single text book would be used. If you intend to use the notes with multiple students the single user version should be upgraded to the multi-user version.

Multi-user versions allow the school or institution to print as many copies as required, or to place the PDF files on the school network, intranet and staff laptops. A certificate of authentication is provided with multi-user versions. Bookmarks provide links to all headings and sub-headings, and individual chapters are provided.

First published 2009

ISBN: 1 921217 74 X Module 1 1 921217 75 8 Module 2 PDF document on CD-ROM

Every effort has been made to ensure that images used in this publication are free of copyright, but there may be instances where this has not been possible. Guided Computer Tutorials would welcome any information that would redress this situation.

© Guided Computer Tutorials 2009 12-1

Chapter

12Cascading Style Sheets

Style sheets allow you to ensure that text is consistently formatted in all pages throughout a site. In DreamWeaver styles are called CASCADING STYLE SHEETS (CSS Styles for short). Cascading means to flow, so a CSS style created in DreamWeaver can flow from one set of text to another in any page. CSS Styles are a more recent web tool so they only work on later browser versions. They are very similar to styles that you may have used in other programs such as Microsoft Word and Adobe InDesign.

A major advantage of styles in DreamWeaver is that you can ensure that text looks the same on all browsers, platforms and pages. You may have noticed that on some web pages the same text looks different in Internet Explorer than it does in Firefox. Styles can be used to overcome this problem.

Cascading Style Sheets

There are two main types of CSS styles:

Internal Custom Styles: which apply only to the page that they were created on.External Custom Styles: which can apply to all linked pages in a site.

The difference between these two types of styles will be demonstrated in this chapter.

Internal Custom Styles

These are styles that you create from scratch and are only used in the page that they were created in. If you completed Module 1, you have created Internal Custom Styles.

A Starting a Blank Page

1 Load DreamWeaver or close the current files and start a create a new HTML page.

2 Set the FILES panel to your TRAVELWISE site and the screen to DESIGNER view.

NOTE: If you didn’t do Module 1, you can open a different site or create a new one. The activities will work with any site, although it will be an advantage if the site includes a template.

© Guided Computer Tutorials 200912-2

Learning Adobe DreamWeaver CS4

B Creating the Main Heading Style

The first style will format the main heading.

NOTE: Style names must be one word. When you wish to use more than one word the _ character can be used to combine the words.

1 Highlight the first line of text.

3 Enter the following text:

CASCADING STYLE SHEETS <enter>

We will apply styles to the text in this page only.

2 In the PROPERTIES INSPECTOR, turn on the CSS button and set the FONT to TREBUCHET, ARIAL, HELVETICA, SANS SERIF.

3 In the NEW CSS RULE dialogue box, set the SELECTOR TYPE box to CLASS, in the SELECTOR NAME box enter:

Main_Heading

and select OK.



NOTE: By setting the FONT SIZE to a percentage the text will be resized to one and a half times whatever the default font size is.

NOTE: These changes have been stored in the MAIN_HEADING style.

5 Set the text to BOLD and DARK RED.

4 In the SIZE box of the PROPERTIES INSPECTOR enter:

150

and set the box next to it to %.



C Creating the Body Text Style

The paragraph text on the page can be given a different style.

2 In the PROPERTIES INSPECTOR set the FONT to ARIAL, HELVETICA, SANS SERIF.

4 Set the FONT SIZE to 14 pixels.

1 Highlight the second line of text.

3 In the NEW CSS RULE dialogue box, set the SELECTOR TYPE box to CLASS, in the SELECTOR NAME box enter:

Body_Text

and select OK.



D Looking at the Code

To understand some of the differences between internal and external styles it is advantageous to look at the way the HTML code is being created.

3 Styles can be altered in CODE view.

1 Click on the SPLIT button in the DOCUMENT TOOLBAR to display both CODE and DESIGN views.

4 In the BODY_TEXT style (line 16) highlight 14 px.

2 Scroll through the code and notice that each format step has been created.

5 Enter 105% then click in the DESIGN pane and the text should be a little larger.



NOTE: The text has been set to be slightly larger (5%) than the default font size (100%).

6 Click on the DESIGN button in the DOCUMENT TOOLBAR to close the CODE view pane.

E The CSS STYLES Panel

The CSS STYLES panel displays the styles that you create and allows you to edit them.

2 Click on the ALL button, expand the <style> rule and the two styles should be displayed.

1 Click on the second line of text and double click on the CSS STYLES panel label in the PANEL GROUP to expand it.

3 Click on the MAIN HEADING text then click on the CURRENT button at the top of the CSS STYLES panel and its formats should be displayed.



F Editing Styles

1 Collapse the INSERT panel in the PANEL GROUP by double clicking on its label. This will provide more room for the CSS STYLES panel.

4 Save the page as: Sample or Sample.html

2 The properties for the MAIN_HEADING style should be displayed in blue.

3 Click on the COLOUR box in the properties, change it to DARK GREEN and the text should be adjusted.



Looking at the Styles

You can look at all the styles that the page has.

2 In the FILES panel open the TIPS.HTML page (or another page in your site if you are not using the TravelWise site).

External CSS Styles

It is much more efficient to store all the style details in a single file rather than ‘clogging’ the code on each page with style information. This can be achieved by creating an EXTERNAL STYLE SHEET that can be applied over many pages. To illustrate this we will apply the styles to a page that has been prepared for you.

A Loading the Sample Page

1 Close the files that ate open then display the FILE menu and select OPEN.

2 Access the DWcs4 SUPPORT FILES, open the CHAPTER 12 folder and open the TRAVELTIPS.HTM page.

1 Click on the ALL tab in the CSS STY:ES panel and, if necessary, expand the <style> rule to see the two styles.

3 The styles you just created are not present in this or any of the other pages of the site.

learning adobe dreamweaver cs4 - css styles

Documents