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

Unit Objectives Import textImport text Set text propertiesSet text properties Create an unordered listCreate an unordered list Understand Cascading Style SheetsUnderstand Cascading Style Sheets Create a style in a new Cascading Style SheetCreate a style in a new Cascading Style Sheet Adobe Dreamweaver CS5 - Illustrated

Unit Objectives Apply and edit a styleApply and edit a style Add styles to a Cascading Style SheetAdd styles to a Cascading Style Sheet Attach a Cascading Style Sheet to a PageAttach a Cascading Style Sheet to a Page Check for spelling errorsCheck for spelling errors Adobe Dreamweaver CS5 - Illustrated

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 Adobe Dreamweaver CS5 - Illustrated

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 Adobe Dreamweaver CS5 - Illustrated

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 Adobe Dreamweaver CS5 - Illustrated

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 Adobe Dreamweaver CS5 - Illustrated

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 Adobe Dreamweaver CS4 - Illustrated

Importing Text Adobe Dreamweaver CS5 - Illustrated

Importing Text Adobe Dreamweaver CS5 - Illustrated

Importing Text Adobe Dreamweaver CS5 - Illustrated

Clues to Use Importing optionsImporting options –Use with Microsoft Office documents –Import: Text onlyText only Text with structureText with structure Text, structure, basic formattingText, structure, basic formatting Text, structure, full formattingText, structure, full formatting –Option chosen depends on importance of original structure and formatting Adobe Dreamweaver CS5 - Illustrated

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 Adobe Dreamweaver CS5 - Illustrated

Setting Text Properties Adobe Dreamweaver CS5 - Illustrated

Setting Text Properties Adobe Dreamweaver CS5 - Illustrated

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 Adobe Dreamweaver CS5 - Illustrated

Creating an Unordered List 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 Adobe Dreamweaver CS5 - Illustrated

Creating an Unordered List 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 Adobe Dreamweaver CS5 - Illustrated

Creating an Unordered List Adobe Dreamweaver CS5 - Illustrated

Clues to Use Ordered listsOrdered lists –Contain numbered or lettered items Must appear in a particular orderMust appear in a particular order –Dreamweaver uses several options for number styles RomanRoman ArabicArabic Adobe Dreamweaver CS5 - Illustrated

Understanding Cascading Style Sheets Advantages of using CSSAdvantages of using CSS –Saves time –Provides continuity across a site CSS styles classified by locationCSS styles classified by location –External and internal CSS styles classified by functionCSS styles classified by function –Class, HTML, Advanced styles The CSS Styles panelThe CSS Styles panel Adobe Dreamweaver CS5 - Illustrated

Understanding Cascading Style Sheets Adobe Dreamweaver CS5 - Illustrated

Clues to Use Using the CSS and HTML Property inspectorUsing 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 Adobe Dreamweaver CS5 - Illustrated

Creating a Style in a New Cascading Style Sheet 1.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 Adobe Dreamweaver CS5 - Illustrated

Creating a Style in a New Cascading Style Sheet 3.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 Adobe Dreamweaver CS5 - Illustrated

Creating a Style in a New Cascading Style Sheet 5.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 Adobe Dreamweaver CS5 - Illustrated

Creating a Style in a New Cascading Style Sheet 7.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 Adobe Dreamweaver CS5 - Illustrated

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 Adobe Dreamweaver CS5 - Illustrated

Applying and Editing a Style 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 Adobe Dreamweaver CS5 - Illustrated

Applying and Editing a Style Adobe Dreamweaver CS5 - Illustrated

Clues to Use Understanding CSS CodeUnderstanding CSS Code –Format page content other than text Background, borders, lists, and imagesBackground, borders, lists, and images –CSS Styles consist of a selector and a declaration Adobe Dreamweaver CS5 - Illustrated

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 Adobe Dreamweaver CS5 - Illustrated

Adding Styles to a Cascading Style Sheet 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 Adobe Dreamweaver CS5 - Illustrated

Adding Styles to a Cascading Style Sheet 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 Adobe Dreamweaver CS5 - Illustrated

Adding Styles to a Cascading Style Sheet 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 Adobe Dreamweaver CS5 - Illustrated

Adding Styles to a Cascading Style Sheet Adobe Dreamweaver CS5 - Illustrated

Adding Styles to a Cascading Style Sheet Adobe Dreamweaver CS5 - Illustrated

Adding Styles to a Cascading Style Sheet Adobe Dreamweaver CS5 - Illustrated

Clues to Use Using font combinations in stylesUsing font combinations in styles –When setting rule properties for text: Apply font combinationsApply 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.Browser will first check the user’s system for Arial, then Helvetica, etc. Adobe Dreamweaver CS5 - Illustrated

Attaching a Cascading Style Sheet to a Page 1.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 Adobe Dreamweaver CS5 - Illustrated

Attaching a Cascading Style Sheet to a Page 4.Click the body_text style under in the CSS Styles panel in the internal style sheet –Click Delete CSS Rule icon 5.Click File, then Save All Adobe Dreamweaver CS5 - Illustrated

Attaching a Cascading Style Sheet to a Page Adobe Dreamweaver CS5 - Illustrated

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 Adobe Dreamweaver CS5 - Illustrated

Checking for Spelling Errors 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 Adobe Dreamweaver CS5 - Illustrated

Checking for Spelling Errors Adobe Dreamweaver CS5 - Illustrated

Clues to Use Using Find and ReplaceUsing 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 Adobe Dreamweaver CS5 - Illustrated

Unit Summary Import textImport text Set text propertiesSet text properties Create an unordered listCreate an unordered list Understand Cascading Style SheetsUnderstand Cascading Style Sheets Create a style in a new Cascading Style SheetCreate a style in a new Cascading Style Sheet Adobe Dreamweaver CS5 - Illustrated

Unit Summary Apply and edit a styleApply and edit a style Add styles to a Cascading Style SheetAdd styles to a Cascading Style Sheet Attach a Cascading Style Sheet to a PageAttach a Cascading Style Sheet to a Page Check for spelling errorsCheck for spelling errors Adobe Dreamweaver CS5 - Illustrated