1. Adobe Dreamweaver CS4 - Illustrated Formatting Text Using HTML and CSS Styles

2. 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 CS4 - Illustrated

3. 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 CS4 - Illustrated

4. Importing Text Start Dreamweaver, open The Striped Umbrella Web site, open dwd_1.html from the drive and folder where your Unit D Data Files are stored, then save it as spa.html in the striped_umbrella root folder, overwriting the existing file and not updating links, then close dwd_1.htmlStart Dreamweaver, open The Striped Umbrella Web site, open dwd_1.html from the drive and folder where your Unit D Data Files are stored, then save it as spa.html in the striped_umbrella root folder, overwriting the existing file and not updating links, then close dwd_1.html Adobe Dreamweaver CS4 - Illustrated

5. Importing Text In Design view, click the gray image box, click the Browse for File icon next to the Src text box on the Property inspector, navigate to the drive and folder where your Unit D Data Files are stored, double-click the_spa.jpg in the assets folder, then click on the page to deselect the imageIn Design view, click the gray image box, click the Browse for File icon next to the Src text box on the Property inspector, navigate to the drive and folder where your Unit D Data Files are stored, double-click the_spa.jpg in the assets folder, then click on the page to deselect the image Expand the assets folder on the Files panel if necessary, then if the newly copied file is not visible, click the Refresh button on the Files panelExpand the assets folder on the Files panel if necessary, then if the newly copied file is not visible, click the Refresh button on the Files panel Adobe Dreamweaver CS4 - Illustrated

6. Importing Text (Win) Click to the right of The Spa logo on the page, press [Enter], click File on the Application bar, point to Import, click Word Document, navigate to the drive and folder where your Unit D Data Files are stored, then double-click spa.doc(Win) Click to the right of The Spa logo on the page, press [Enter], click File on the Application bar, point to Import, click Word Document, navigate to the drive and folder where your Unit D Data Files are stored, then double-click spa.doc (Mac) Navigate to the Unit D Data Files folder, double-click spa.doc, click Edit, click Select All, click Edit, click Copy, close spa.doc, click to the right of The Spa logo, press [return], then paste the copied text on the spa page in Dreamweaver(Mac) Navigate to the Unit D Data Files folder, double-click spa.doc, click Edit, click Select All, click Edit, click Copy, close spa.doc, click to the right of The Spa logo, press [return], then paste the copied text on the spa page in Dreamweaver Adobe Dreamweaver CS4 - Illustrated

7. Importing Text (Win) Click Commands on the Application bar, then click Clean Up Word HTML; in the Clean Up Word HTML dialog box, click OK, then click OK again(Win) Click Commands on the Application bar, then click Clean Up Word HTML; in the Clean Up Word HTML dialog box, click OK, then click OK again Click File on the Application bar (Win) or Menu bar (Mac), then click SaveClick File on the Application bar (Win) or Menu bar (Mac), then click Save Adobe Dreamweaver CS4 - Illustrated

8. Importing Text Adobe Dreamweaver CS4 - Illustrated

9. Importing Text Adobe Dreamweaver CS4 - Illustrated

10. Clues to Use Saving a Word file for Importing into DreamweaverSaving a Word file for Importing into Dreamweaver Do not format the text in Microsoft WordDo not format the text in Microsoft Word Creating new paragraphs is okayCreating new paragraphs is okay Apply styles for formatting once the text is imported into DreamweaverApply styles for formatting once the text is imported into Dreamweaver Adobe Dreamweaver CS4 - Illustrated

11. Setting Text Properties Click to place the insertion point anywhere within the words Spa ServicesClick to place the insertion point anywhere within the words Spa Services Click the HTML button on the Property inspector if necessary, click the Format list arrow on the Property inspector, then click Headig 4Click the HTML button on the Property inspector if necessary, click the Format list arrow on the Property inspector, then click Headig 4 Click Format on the Application bar (Win) or Menu bar (Mac), point to Align, then click CenterClick Format on the Application bar (Win) or Menu bar (Mac), point to Align, then click Center Adobe Dreamweaver CS4 - Illustrated

12. Setting Text Properties Click the Show Code and Design views button to view the HTML codeClick the Show Code and Design views button to view the HTML code Click the Show Design view button to return to Design viewClick the Show Design view button to return to Design view Save your work, click the Preview/Debug in browser button on the Document toolbar, click Preview in [your browser name], examine the page, then close the browserSave your work, click the Preview/Debug in browser button on the Document toolbar, click Preview in [your browser name], examine the page, then close the browser Adobe Dreamweaver CS4 - Illustrated

13. Setting Text Properties Adobe Dreamweaver CS4 - Illustrated

14. Setting Text Properties Adobe Dreamweaver CS4 - Illustrated

15. Creating an Unordered List Select the three items and their descriptions under the Skin Care Treatments headingSelect the three items and their descriptions under the Skin Care Treatments heading Click the Unordered List button on the HTML Property inspector to create an unordered listClick the Unordered List button on the HTML Property inspector to create an unordered list Repeat steps 1 and 2 to create unordered lists of the items under the Body Treatments, Massages, and Spa Packages headingsRepeat steps 1 and 2 to create unordered lists of the items under the Body Treatments, Massages, and Spa Packages headings Adobe Dreamweaver CS4 - Illustrated

16. Creating an Unordered List 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 (Win) if necessary, then click List ItemClick 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 (Win) if necessary, then click List Item Click the Style list arrow, click Square, then click OKClick the Style list arrow, click Square, then click OK Repeat steps 4 and 5 to format the other three unordered listsRepeat steps 4 and 5 to format the other three unordered lists Adobe Dreamweaver CS4 - Illustrated

17. Creating an Unordered List Click to place the insertion point before the first item in the first unordered list, click the Show Code view button on the Document toolbar to view the code for the unordered list, click the View options button, on the Document toolbar, then uncheck the Hidden Characters option if necessaryClick to place the insertion point before the first item in the first unordered list, click the Show Code view button on the Document toolbar to view the code for the unordered list, click the View options button, on the Document toolbar, then uncheck the Hidden Characters option if necessary Click the Show Design view button on the Document toolbar to return to Design View, then save your workClick the Show Design view button on the Document toolbar to return to Design View, then save your work Adobe Dreamweaver CS4 - Illustrated

18. Creating an Unordered List Adobe Dreamweaver CS4 - Illustrated

19. Clues to Use Ordered listsOrdered lists Also called numbered listAlso called numbered list Contain numbered or lettered itemsContain numbered or lettered items Dreamweaver uses several options for number stylesDreamweaver uses several options for number styles RomanRoman ArabicArabic Adobe Dreamweaver CS4 - Illustrated

20. Understanding Cascading Style Sheets Advantages of using CSS stylesAdvantages of using CSS styles CSS styles classified by locationCSS styles classified by location CSS styles classified by functionCSS styles classified by function The CSS Styles panelThe CSS Styles panel Adobe Dreamweaver CS4 - Illustrated

21. Understanding Cascading Style Sheets Adobe Dreamweaver CS4 - Illustrated

22. 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 inspectorApply CSS styles using the CSS or HTML Property inspector First, select the elementFirst, select the element Apply a styleApply a style You can change back and forth between the two Property inspectorsYou can change back and forth between the two Property inspectors Adobe Dreamweaver CS4 - Illustrated

23. Creating a Style in a New Cascading Style Sheet Click Window on the Application bar (Win) or Menu bar (Mac), then click CSS Styles, if necessary, to open the CSS tab groupClick Window on the Application bar (Win) or Menu bar (Mac), then click CSS Styles, if necessary, to open the CSS tab group Click the New CSS Rule button on the CSS Styles panel, if necessary, click the Selector Type list arrow, click Class (can apply to any HTML element) then type bold_blue in the Selector Name text boxClick the New CSS Rule button on the CSS Styles panel, if necessary, click the Selector Type list arrow, click Class (can apply to any HTML element) then type bold_blue in the Selector Name text box Click the Rule Definition list arrow, click (New Style Sheet File), click OKClick the Rule Definition list arrow, click (New Style Sheet File), click OK Type su_styles.css in the File name text box (Win) or the Save As text box (Mac), then click SaveType su_styles.css in the File name text box (Win) or the Save As text box (Mac), then click Save Adobe Dreamweaver CS4 - Illustrated

24. Creating a Style in a New Cascading Style Sheet Click the Font-size list arrow, click 14, leave the size measurement unit as px, click the Font-style list arrow, click normal, click the Font- weight list arrow, then click boldClick the Font-size list arrow, click 14, leave the size measurement unit as px, click the Font-style list arrow, click normal, click the Font- weight list arrow, then click bold Click the Color box to open the color picker, click #006, then click OKClick the Color box to open the color picker, click #006, then click OK Adobe Dreamweaver CS4 - Illustrated

25. Creating a Style in a New Cascading Style Sheet Click the Refresh button on the Files panel if necessary to view the su_styles CSS fileClick the Refresh button on the Files panel if necessary to view the su_styles CSS file Click the Show Code view button on the Document toolbar to view the HTML code linking to the su_styles.css file, click File on the Application bar (Win) or Menu bar (Mac), then click Save All to save your changes to both the page and the style sheet fileClick the Show Code view button on the Document toolbar to view the HTML code linking to the su_styles.css file, click File on the Application bar (Win) or Menu bar (Mac), then click Save All to save your changes to both the page and the style sheet file Adobe Dreamweaver CS4 - Illustrated

26. Creating a Style in a New Cascading Style Sheet Adobe Dreamweaver CS4 - Illustrated

27. Creating a Style in a New Cascading Style Sheet Adobe Dreamweaver CS4 - Illustrated

28. Applying and Editing a Style Click the Show Design view button on the Document toolbar to return to Design ViewClick the Show Design view button on the Document toolbar to return to Design View Select Revitalizing facial, click the Targeted Rule list arrow in the CSS Property inspector, click bold_blueSelect Revitalizing facial, click the Targeted Rule list arrow in the CSS Property inspector, click bold_blue Repeat Step 2 to apply the bold_blue style to the names of each of the remaining spa servicesRepeat Step 2 to apply the bold_blue style to the names of each of the remaining spa services Adobe Dreamweaver CS4 - Illustrated

29. Applying and Editing a Style Click the bold_blue style in the CSS Styles panel, then click the Edit Rule button on the CSS Styles panelClick the bold_blue style in the CSS Styles panel, then click the Edit Rule button on the CSS Styles panel Click the Font-size arrow, click 16, click OK, then deselect the textClick the Font-size arrow, click 16, click OK, then deselect the text Save your work using the Save All commandSave your work using the Save All command Adobe Dreamweaver CS4 - Illustrated

30. Applying and Editing a Style Adobe Dreamweaver CS4 - Illustrated

31. Applying and Editing a Style Adobe Dreamweaver CS4 - Illustrated

32. Clues to Use Understanding CSS Style Sheet CodeUnderstanding CSS Style Sheet Code Format page content other than textFormat page content other than text Background, borders, lists, and imagesBackground, borders, lists, and images CSS Styles consist of a selector and a declarationCSS Styles consist of a selector and a declaration Adobe Dreamweaver CS4 - Illustrated

33. Adding Styles to a Cascading Style Sheet Click the New CSS Rule button on the CSS Styles PanelClick the New CSS Rule button on the CSS Styles Panel Click the Selector Type list arrow, click Class (can apply to any HTML element), type heading in the Selector Name text box, click the Rule Definition list arrow, click su_styles.css, then click OKClick the Selector Type list arrow, click Class (can apply to any HTML element), type heading in the Selector Name text box, click the Rule Definition list arrow, click su_styles.css, then click OK Click the Font-family list arrow, then click Arial, Helvetica, sans-serifClick the Font-family list arrow, then click Arial, Helvetica, sans-serif Click the Font-size list arrow, then click 18, click the Font-weight list arrow, then click boldClick the Font-size list arrow, then click 18, click the Font-weight list arrow, then click bold Click the Color picker, then select color #006Click the Color picker, then select color #006 Adobe Dreamweaver CS4 - Illustrated

34. Adding Styles to a Cascading Style Sheet Click the Block category in the Category list, click the Text-align list arrow, click center, then click OKClick the Block category in the Category list, click the Text-align list arrow, click center, then click OK Select the heading Spa Services, click the Format list arrow in the HTML Property inspector, click ParagraphSelect the heading Spa Services, click the Format list arrow in the HTML Property inspector, click Paragraph Click the Class list arrow on the Property inspector, click heading, then click once inside the heading to deselect itClick the Class list arrow on the Property inspector, click heading, then click once inside the heading to deselect it Adobe Dreamweaver CS4 - Illustrated

35. Adding Styles to a Cascading Style Sheet Repeat Steps 1–5 to add another class style called subheading in the su_styles.css style sheet with the following settings: Font-family, Arial, Helvetica, sans-serif; Font-size, 16 px, Font-style, normal; and Color, #006Repeat Steps 1–5 to add another class style called subheading in the su_styles.css style sheet with the following settings: Font-family, Arial, Helvetica, sans-serif; Font-size, 16 px, Font-style, normal; and Color, #006 Apply the subheading style to each category of spa services, then save your work using the File, Save All commandApply the subheading style to each category of spa services, then save your work using the File, Save All command Adobe Dreamweaver CS4 - Illustrated

36. Adding Styles to a Cascading Style Sheet Adobe Dreamweaver CS4 - Illustrated

37. Adding Styles to a Cascading Style Sheet Adobe Dreamweaver CS4 - Illustrated

38. Clues to Use Using font combinations in stylesUsing font combinations in styles When you are setting rule properties for text, you apply font combinationsWhen you are setting rule properties for text, you apply font combinations Browser will first look on the viewer’s system for the first font, then the second font, then the third fontBrowser will first look on the viewer’s system for the first font, then the second font, then the third font Adobe Dreamweaver CS4 - Illustrated

39. Attaching a Cascading Style Sheet to a Page Open the index.html pageOpen the index.html page Click the Attach Style Sheet button on the CSS Styles panelClick the Attach Style Sheet button on the CSS Styles panel 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 to close the Attach External Style Sheet dialog box.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 to close the Attach External Style Sheet dialog box. Adobe Dreamweaver CS4 - Illustrated

40. Attaching a Cascading Style Sheet to a Page Click the New CSS Rule button on the CSS Styles panel, verify that Class is the Selector type, type body_text in the Selector Name text box, verify that su_style.css is the location for the Rule Definition, then click OKClick the New CSS Rule button on the CSS Styles panel, verify that Class is the Selector type, type body_text in the Selector Name text box, verify that su_style.css is the location for the Rule Definition, then click OK Use the settings shown in Figure D-21 to format the new body text style, then click OKUse the settings shown in Figure D-21 to format the new body text style, then click OK Select the paragraph of text, click the Class list arrow in the HTML Property inspector, then click body_text to apply the body_text styleSelect the paragraph of text, click the Class list arrow in the HTML Property inspector, then click body_text to apply the body_text style Adobe Dreamweaver CS4 - Illustrated

41. Attaching a Cascading Style Sheet to a Page Switch to the spa file by clicking its page tab, then apply the body_text style to the first paragraph of text and the unformatted text under each bullet item’s titleSwitch to the spa file by clicking its page tab, then apply the body_text style to the first paragraph of text and the unformatted text under each bullet item’s title Compare your screen to the figures on the following slides, then use the File, Save All command to save all open filesCompare your screen to the figures on the following slides, then use the File, Save All command to save all open files Adobe Dreamweaver CS4 - Illustrated

42. Attaching a Cascading Style Sheet to a Page Adobe Dreamweaver CS4 - Illustrated

43. Attaching a Cascading Style Sheet to a Page Adobe Dreamweaver CS4 - Illustrated

44. Checking for Spelling Errors Place the insertion point in front of the navigation barPlace the insertion point in front of the navigation bar Click Commands on the Application bar (Win) or Menu bar (Mac), then click Check SpellingClick Commands on the Application bar (Win) or Menu bar (Mac), then click Check Spelling Click massaged in the Suggestions list if necessary, then click ChangeClick massaged in the Suggestions list if necessary, then click Change Adobe Dreamweaver CS4 - Illustrated

45. Checking for Spelling Errors Click OK to close the Dreamweaver dialog box stating that the Spelling Check is completedClick OK to close the Dreamweaver dialog box stating that the Spelling Check is completed Save your work, then preview the spa page in your browserSave your work, then preview the spa page in your browser Close all open pages and exit DreamweaverClose all open pages and exit Dreamweaver Adobe Dreamweaver CS4 - Illustrated

46. Checking for Spelling Errors Adobe Dreamweaver CS4 - Illustrated

47. Checking for Spelling Errors Adobe Dreamweaver CS4 - Illustrated

48. Clues to Use Using Find and ReplaceUsing Find and Replace Located on the Edit menuLocated on the Edit menu Search for text in Design or Code viewSearch for text in Design or Code view Similar to Find and Replace commands in word processing programsSimilar to Find and Replace commands in word processing programs Useful to search for coding errorsUseful to search for coding errors Adobe Dreamweaver CS4 - Illustrated

49. 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 CS4 - Illustrated

50. 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 CS4 - Illustrated