Learning Adobe Dreamweaver Cs4 - Css Styles
This document was uploaded by user and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this DMCA report form. Report DMCA
Overview
Download & View Learning Adobe Dreamweaver Cs4 - Css Styles as PDF for free.
More details
- Words: 1,292
- Pages: 10
Learning Adobe DreamWeaver CS4 By Greg Bowden
Chapter 12
Cascading Style Sheets
Guided Computer Tutorials www.gct.com.au
PUBLISHED BY GUIDED COMPUTER TUTORIALS PO Box 311 Belmont, 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.
Chapter
Cascading Style Sheets
12
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 2009
12-1
Learning Adobe DreamWeaver CS4
3 Enter the following text: CASCADING STYLE SHEETS <enter> We will apply styles to the text in this page only.
B Creating the Main Heading Style The first style will format the main heading.
1 Highlight the first line of text.
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:
12-2
Style names must be one word. When you wish to use more than one word the _ character can be used to combine the words. © Guided Computer Tutorials 2009
Cascading Style Sheets
12
4 In the SIZE box of the PROPERTIES INSPECTOR enter: 150 and set the box next to it to %.
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.
5 Set the text to BOLD and DARK RED.
NOTE:
These changes have been stored in the MAIN_HEADING style.
© Guided Computer Tutorials 2009
12-3
Learning Adobe DreamWeaver CS4
C Creating the Body Text Style The paragraph text on the page can be given a different style.
1 Highlight the second line of text.
2 In the PROPERTIES INSPECTOR set the FONT to 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: Body_Text and select OK.
4 Set the FONT SIZE to 14 pixels.
12-4
© Guided Computer Tutorials 2009
Cascading Style Sheets
12
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. 1 Click on the SPLIT button in the DOCUMENT TOOLBAR to display both CODE and DESIGN views.
2 Scroll through the code and notice that each format step has been created.
3
Styles can be altered in CODE view.
4 In the BODY_TEXT style (line 16) highlight 14 px.
5 Enter 105% then click in the DESIGN pane and the text should be a little larger.
© Guided Computer Tutorials 2009
12-5
Learning Adobe DreamWeaver CS4
NOTE:
6
The text has been set to be slightly larger (5%) than the default font size (100%).
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. 1 Click on the second line of text and double click on the CSS STYLES panel label in the PANEL GROUP to expand it.
2 Click on the ALL button, expand the <style> rule and the two styles should be displayed.
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.
12-6
© Guided Computer Tutorials 2009
Cascading Style Sheets
12
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. 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.
4
Save the page as: Sample or Sample.html
© Guided Computer Tutorials 2009
12-7
Learning Adobe DreamWeaver CS4
Looking at the Styles You can look at all the styles that the page has.
1 Click on the ALL tab in the CSS STY:ES panel and, if necessary, expand the <style> rule to see the two styles.
2
In the FILES panel open the TIPS.HTML page (or another page in your site if you are not using the TravelWise site).
3 The styles you just created are not present in this or any of the other pages of the 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.
12-8
© Guided Computer Tutorials 2009
Chapter 12
Cascading Style Sheets
Guided Computer Tutorials www.gct.com.au
PUBLISHED BY GUIDED COMPUTER TUTORIALS PO Box 311 Belmont, 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.
Chapter
Cascading Style Sheets
12
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 2009
12-1
Learning Adobe DreamWeaver CS4
3 Enter the following text: CASCADING STYLE SHEETS <enter> We will apply styles to the text in this page only.
B Creating the Main Heading Style The first style will format the main heading.
1 Highlight the first line of text.
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:
12-2
Style names must be one word. When you wish to use more than one word the _ character can be used to combine the words. © Guided Computer Tutorials 2009
Cascading Style Sheets
12
4 In the SIZE box of the PROPERTIES INSPECTOR enter: 150 and set the box next to it to %.
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.
5 Set the text to BOLD and DARK RED.
NOTE:
These changes have been stored in the MAIN_HEADING style.
© Guided Computer Tutorials 2009
12-3
Learning Adobe DreamWeaver CS4
C Creating the Body Text Style The paragraph text on the page can be given a different style.
1 Highlight the second line of text.
2 In the PROPERTIES INSPECTOR set the FONT to 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: Body_Text and select OK.
4 Set the FONT SIZE to 14 pixels.
12-4
© Guided Computer Tutorials 2009
Cascading Style Sheets
12
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. 1 Click on the SPLIT button in the DOCUMENT TOOLBAR to display both CODE and DESIGN views.
2 Scroll through the code and notice that each format step has been created.
3
Styles can be altered in CODE view.
4 In the BODY_TEXT style (line 16) highlight 14 px.
5 Enter 105% then click in the DESIGN pane and the text should be a little larger.
© Guided Computer Tutorials 2009
12-5
Learning Adobe DreamWeaver CS4
NOTE:
6
The text has been set to be slightly larger (5%) than the default font size (100%).
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. 1 Click on the second line of text and double click on the CSS STYLES panel label in the PANEL GROUP to expand it.
2 Click on the ALL button, expand the <style> rule and the two styles should be displayed.
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.
12-6
© Guided Computer Tutorials 2009
Cascading Style Sheets
12
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. 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.
4
Save the page as: Sample or Sample.html
© Guided Computer Tutorials 2009
12-7
Learning Adobe DreamWeaver CS4
Looking at the Styles You can look at all the styles that the page has.
1 Click on the ALL tab in the CSS STY:ES panel and, if necessary, expand the <style> rule to see the two styles.
2
In the FILES panel open the TIPS.HTML page (or another page in your site if you are not using the TravelWise site).
3 The styles you just created are not present in this or any of the other pages of the 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.
12-8
© Guided Computer Tutorials 2009
Related Documents
Learning Adobe Dreamweaver Cs4 - Css Styles
May 2020 6
Learning Adobe Dreamweaver Cs4 - Introduction
May 2020 11
Learning Adobe Dreamweaver Cs4 - Templates
May 2020 9
Learning Asobe Dreamweaver Cs4 - Css Layouts
May 2020 6
Learning Adobe Dreamweaver Cs4 - Anchor Points
May 2020 20More Documents from "Guided Computer Tutorials"
Gct Product Catalogue
May 2020 24
Learning Microsoft Access 2007 - Forms
May 2020 18
Learning Microsoft Word 2007 - Tabs
May 2020 24
Learning Adobe Dreamweaver Cs4 - Anchor Points
May 2020 20
