Adobe Dreamweaver CS5 - Illustrated Unit D: Working with Text and Cascading Style Sheets.

Adobe Dreamweaver CS5 - Illustrated

Unit D: Working with Text and Cascading Style Sheets

Unit Objectives

• Import text• Set text properties• Create an unordered list• Understand Cascading Style Sheets• Create a style in a new Cascading

Style Sheet


Unit Objectives

• Apply and edit a style• Add styles to a Cascading Style

Sheet• Attach a Cascading Style Sheet to a

Page• Check for spelling errors


Importing Text

1. Start Dreamweaver, open The Striped Umbrella Web site

2. Open dwd_1.html from the drive and folder where you store your data files– Save it as spa.html in the

striped_umbrella root folder, overwriting the existing file and not updating links

– Close dwd_1.html


Importing Text

3. In Design view, click the gray broken image– Click the Browse for File icon next to

the Src text box on the Property inspector

– Navigate to the drive and folder where you store your data files, double-click sea_spa_logo.jpg in the assets folder, then click anywhere on the page


Importing Text

4. Expand the assets folder on the Files panel if necessary– If the newly copied file is not visible,

click the Refresh button on the Files panel


Importing Text

5. Click to the right of the logo to place insertion point on the page– (Win) Click File on the Application bar,

point to Import, click Word Document, then double-click spa.doc

– (Mac) Click File on the Menu bar, double-click spa.doc, click Edit, click Select All, click Copy, close spa.doc then paste the copied text on the spa page in Dreamweaver


Importing Text

6. Click Commands on the Application bar (Win) or Menu bar (Mac)– Click Clean Up Word HTML– In the Clean Up Word HTML dialog box,

click OK, then click OK again


Importing Text


Clues to Use

• Importing options– Use with Microsoft Office documents– Import:

• Text only• Text with structure• Text, structure, basic formatting• Text, structure, full formatting

– Option chosen depends on importance of original structure and formatting


Setting Text Properties

1. Click the HTML button on the Property inspector if necessary, then click anywhere within the words The Sea Spa Services

2. Click the Format list arrow, then click Heading 2

3. Click the Show Code and Design views button on the Document toolbar– HTML code is displayed

4. Click the Show Design view button


Setting Text Properties


Creating an Unordered List

1. Select the three service items and their descriptions under the Massages heading

2. Click the Unordered List button on the HTML Property inspector

3. Repeat steps 1 and 2 to create unordered lists of the items under the Facials and Body Treatments headings



4. Click to place the insertion point in any of the items in the first unordered list– Double-click the bottom-right corner of

the HTML Property inspector to expand the Property inspector if necessary, then click List Item

5. Click the Style list arrow, click Square, then click OK



6. Repeat steps 4 and 5 to format the other two unordered lists

7. Click to place insertion point before the first item in the first unordered list– Click Show Code view button on the

Document toolbar

8. Click the Show Design view button on the Document toolbar to return to Design View, then save your work


Clues to Use

• Ordered lists– Contain numbered or lettered items

• Must appear in a particular order

– Dreamweaver uses several options for number styles

• Roman• Arabic


Understanding Cascading Style Sheets• Advantages of using CSS

– Saves time– Provides continuity across a site

• CSS styles classified by location– External and internal

• CSS styles classified by function– Class, HTML, Advanced styles

• The CSS Styles panel


Understanding Cascading Style Sheets


Clues to Use

• Using the CSS and HTML Property inspector– Apply CSS styles using the CSS or

HTML Property inspector– First select the element– Apply a style– You can change back and forth

between the two Property inspectors


Creating a Style in a New Cascading Style Sheet1. Click Window on the Application bar

(Win) or Menu bar (Mac)– Click the Switch to All (Document)

Mode button under the CSS styles panel tab

2. Click the New CSS Rule button on the CSS Styles panel– Click the Selector Type list arrow,

select Class, then type bold_blue in the Selector Name text box


Creating a Style in a New Cascading Style Sheet3. Click the Rule Definition list arrow,

click (New Style Sheet File), click OK

4. Type su_styles in the File name text box (Win) or the Save As text box (Mac), then click Save


Creating a Style in a New Cascading Style Sheet5. Click the Font-family list arrow

– Click Arial, Helvetica, sans-serif– Click Font-size list arrow, click 14– Keep size measurement as px– Click Font-style list arrow, click

normal– Click Font-weight list arrow, click bold

6. Click the Color box to open the color picker, click #006, then click OK


Creating a Style in a New Cascading Style Sheet7. Click the Refresh button on the

Files panel

8. Click the Show Code view button on the Document toolbar

9. Click File on the Application bar (Win) or Menu bar (Mac), then click Save All


Applying and Editing a Style

1. Click the Show Design view button on the Document toolbar– Then click the CSS button

2. Select Massages, click the Targeted Rule list arrow in the CSS Property inspector, click bold_blue

3. Repeat Step 2 to apply the bold_blue style to the other unordered list headings



4. Click the bold_blue rule in the CSS Styles panel, then click the Edit Rule button on the CSS Styles panel

5. Click the Font-size arrow, click 16, click OK, then deselect the text

6. Save your work using the Save All command


Clues to Use

• Understanding CSS Code– Format page content other than text

• Background, borders, lists, and images

– CSS Styles consist of a selector and a declaration


Adding Styles to a Cascading Style Sheet

1. Click the New CSS Rule button on the CSS Styles Panel

2. Click the Selector Type list arrow, click Class (can apply to any HTML element)– Type body_text in the Selector Name

text box, click the Rule Definition list arrow

– Click su_styles.css, then click OK



3. Click the Font-family list arrow, then click Arial, Helvetica, sans-serif

4. Click the Font-size list arrow, click medium, click the Font-weight list arrow, click normal

5. Click the Color box, then select color #000



6. Click Block in the Category list, click the Text-align list arrow, click left, then click OK

7. Select the items and descriptions under the Massages heading– Click the HTML button– Click the Class list arrow in the HTML

Property inspector, click body_text– Click anywhere to deselect the text



8. Repeat Step 7 to apply the body_text style to the other two unordered lists and the last paragraph

9. Click File, then Save All


Clues to Use

• Using font combinations in styles– When setting rule properties for text:

• Apply font combinations

– Ensures similar font will be applied if primary one is unavailable

– Example: Arial, Helvetica, sans-serif• Browser will first check the user’s system

for Arial, then Helvetica, etc.


Attaching a Cascading Style Sheet to a Page1. Open the index.html page

2. Click the Attach Style Sheet button on the CSS Styles panel

3. Click Browse next to the File/URL text box– Click su_styles.css in the Select Style

Sheet File dialog box if necessary– Click OK (Win) or Choose (Mac), then

click OK


Attaching a Cascading Style Sheet to a Page4. Click the body_text style under

<style> in the CSS Styles panel in the internal style sheet– Click Delete CSS Rule icon

5. Click File, then Save All


Attaching a Cascading Style Sheet to a Page


Checking for Spelling Errors

1. Place the insertion point in front of The Sea Spa Services paragraph

2. Click Commands on the Application bar (Win) or Menu bar (Mac), then click Check Spelling

3. Choose the correct spelling of the misspelled word, then click Change



4. Click OK

5. Click File then Save

6. Click Preview/Debug in browser icon– Review the spa page in your browser

7. Close all open pages and exit Dreamweaver


Clues to Use

• Using Find and Replace– Located on the Edit menu– Search for text in Design or Code view– Similar to Find and Replace commands

in word processing programs– Useful to search for coding errors


Unit Summary

• Import text• Set text properties• Create an unordered list• Understand Cascading Style Sheets• Create a style in a new Cascading

Style Sheet


Unit Summary

• Apply and edit a style• Add styles to a Cascading Style

Sheet• Attach a Cascading Style Sheet to a

Page• Check for spelling errors


Adobe Dreamweaver CS5 - Illustrated Unit D: Working with Text and Cascading Style Sheets.

Documents

Transcript of Adobe Dreamweaver CS5 - Illustrated Unit D: Working with Text and Cascading Style Sheets.