1 / 39

Macromedia Dreamweaver 8

Macromedia Dreamweaver 8. Unit D Formatting Text and Using Cascading Style Sheets. U n i t O b j e c t i v e s. Import text Set text properties Create an unordered list Change Preferences for Cascading Style Sheets Create a Style in a new Cascading Style Sheet.

celine
Télécharger la présentation

Macromedia Dreamweaver 8

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Macromedia Dreamweaver 8 Unit D Formatting Text and Using Cascading Style Sheets Macromedia Dreamweaver 8--Illustrated Introductory

  2. U n i t O b j e c t i v e s • Import text • Set text properties • Create an unordered list • Change Preferences for Cascading Style Sheets • Create a Style in a new Cascading Style Sheet Macromedia Dreamweaver 8--Illustrated Introductory

  3. U n i t O b j e c t i v e s • Apply and edit a Style • Add styles to a Cascading Style Sheet • Attach a Cascading Style Sheet to a Page • Insert rollovers with Flash text Macromedia Dreamweaver 8--Illustrated Introductory

  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 • Click the gray image box, click the Browse for File icon next to the Src text box on the Property inspector, navigate to the Unit D Data Files assets folder, double-click the_spa.jpg, 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 panel Macromedia Dreamweaver 8--Illustrated Introductory

  5. Importing Text • (Win) Click to the right of The Spa, press [Enter], click File on the menu bar, point to Import, click WordDocument, 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, select all, copy, close spa.doc, then paste the copied text on the spa page in Dreamweaver. • Click Commands on the menu 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 menu bar, then click Save Macromedia Dreamweaver 8--Illustrated Introductory

  6. Importing Text Macromedia Dreamweaver 8--Illustrated Introductory

  7. Clues to Use • Saving a Word file for Importing into Dreamweaver • Do not format the text in Microsoft Word • Creating new paragraphs is okay • Apply styles for formatting once the text is imported into Dreamweaver Macromedia Dreamweaver 8--Illustrated Introductory

  8. Importing Text Macromedia Dreamweaver 8--Illustrated Introductory

  9. Setting Text Properties • Click to place the insertion point anywhere within the words Spa Services • Click the Format list arrow on the Property inspector, then click Heading 4 • Select the Spa Services heading, click the Font list arrow on the Property inspector, click Arial, Helvetica, sans-serif, then deselect the text to see the new font applied • Select the heading again, click the Text Color button on the Property inspector, use the eyedropper to click #000066 from the Color Picker, then deselect the text to see the new color applied Macromedia Dreamweaver 8--Illustrated Introductory

  10. Setting Text Properties • Click to place the insertion point before the O in Our spa services, scroll to the end of the text, press and hold [Shift], click after the end of the last sentence, then release [Shift] • Click the Font list arrow on the Property inspector, then click Arial, Helvetica, sans-serif • Click the Size list arrow on the Property inspector, then click 3 • Click anywhere on the page to deselect the text, 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 browser Macromedia Dreamweaver 8--Illustrated Introductory

  11. Setting Text Properties Macromedia Dreamweaver 8--Illustrated Introductory

  12. Clues to Use • Font sizes • You may change the font to a size between 1 and 7, or a size relative to the default basefont (3) Macromedia Dreamweaver 8--Illustrated Introductory

  13. Creating an Unordered List • Select the three items under the Skin Care Treatments heading • Click the Unordered List button on the Property inspector to create an unordered list • Repeat the previous step to create unordered lists of the items under the Body Treatments, Massages, and Spa Packages headings • Click to place the insertion point in any of the items in the first unordered list, click the expander arrow in the lower-right corner of the Property inspector to expand the Property inspector if necessary, then click List Item Macromedia Dreamweaver 8--Illustrated Introductory

  14. Creating an Unordered List • Click the Style list arrow, click Square, then click OK • Repeat the previous step to format the other three unordered lists • Click to place the insertion point before the first item in the unordered list, click the Show Code View button on the Document toolbar to view the code for the unordered list, click the View Options list arrow, then uncheck the Hidden Characters option • Click the Show Design View button on the Document toolbar to return to Design View, then save your work Macromedia Dreamweaver 8--Illustrated Introductory

  15. Creating an Unordered List Macromedia Dreamweaver 8--Illustrated Introductory

  16. Clues to Use • Ordered lists • Also called numbered list • Contain numbered or lettered items • Dreamweaver uses several options for number styles • Roman • Arabic Macromedia Dreamweaver 8--Illustrated Introductory

  17. Changing Preferences forCascading Style Sheets • Click Edit (Win) or Dreamweaver (Mac) on the menu bar, then click Preferences • Click the General category if necessary, click the check box Use CSS instead of HTML tags to select it, then click OK Macromedia Dreamweaver 8--Illustrated Introductory

  18. Changing Preferences forCascading Style Sheets Macromedia Dreamweaver 8--Illustrated Introductory

  19. Clues to Use • Understanding Cascading Style Sheet Files • File that determines the formatting for various page objects • Single file can contain many individual styles • Styles can be embedded in the code for a single Web page • Some styles can define HTML tags Macromedia Dreamweaver 8--Illustrated Introductory

  20. Clues to Use • Using styles without a Cascading Style Sheet • Dreamweaver can automatically create styles for you Macromedia Dreamweaver 8--Illustrated Introductory

  21. Clues to Use • Using Cascading Style Sheets • Great timesavers • Can be exported to other Web sites • Not all browsers can read Cascading Style Sheets Macromedia Dreamweaver 8--Illustrated Introductory

  22. Creating a Style in a NewCascading Style Sheet • Click Window on the menu bar, then click CSS Styles, if necessary • Click the New CSS Rule button on the CSS Styles panel, then verify that the Class (can apply to any tag) and the (New Style Sheet File) option buttons are both selected • Type spa_names in the Name text box, then click OK • Type su_styles.css in the File name text box (Win) or the Save As text box (Mac), then click Save • Click the Font list arrow, then click Arial, Helvetica, sans-serif Macromedia Dreamweaver 8--Illustrated Introductory

  23. Creating a Style in a NewCascading Style Sheet • Click the Size list arrow, click 14, leave the size measurement unit as pixels, click the Style list arrow, click normal, click the Weight list arrow, then click bold • Click the Color list button , click #000066, as shown in Figure D-12, then click OK • Click the Refresh button on the Files panel if necessary to view the su_styles CSS style 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 menu bar, then click Save All to save your changes to both the page and the style sheet file Macromedia Dreamweaver 8--Illustrated Introductory

  24. Creating a Style in a NewCascading Style Sheet Macromedia Dreamweaver 8--Illustrated Introductory

  25. Applying and Editing a Style • Click the Show Design View button on the Document toolbar to return to Design View • Select Revitalizing facial, as shown in Figure D-15, click the Format list arrow in the Property inspector, click None, click the Font list arrow, click Default Font, click the Size list arrow, then click None, click the Style list arrow on the Property inspector, then click spa_names Macromedia Dreamweaver 8--Illustrated Introductory

  26. Applying and Editing a Style • Repeat the previous step to remove manual formatting and apply the spa_names style to the names of each of the remaining spa services • Click the spa_names style in the CSS Styles panel, then click the Edit Style button on the CSS Styles panel • Click the Size list arrow, click 16, then click OK • Save your work using the Save All command Macromedia Dreamweaver 8--Illustrated Introductory

  27. Applying and Editing a Style Macromedia Dreamweaver 8--Illustrated Introductory

  28. Clues to Use • CSS Style Sheet settings • Format page content other than text • Background, borders, lists, and boxes • CSS Styles consist of a selector and a declaration Macromedia Dreamweaver 8--Illustrated Introductory

  29. Adding Styles to a Cascading Style Sheet • Click the New CSS Rule button on the CSS Styles Panel • Type heading in the Name Text box, verify that the Define In text box is set to the su_styles.css file, then click OK • Click the Font list arrow, then click Arial, Helvetica, sans-serif • Click the Size list arrow, then click 18, click the Weight list arrow, then click bold • Click the Color list button, then select color #000066 Macromedia Dreamweaver 8--Illustrated Introductory

  30. 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 OK • Select the heading Spa Services, click the Format list arrow in the Property inspector, click None, click the Font list arrow, click Default Font, click the Size list arrow, then click None; if necessary, click the Color list arrow, then click the Strikethrough button • Click the Style list arrow on the Property inspector, then click heading • Repeat the first 5 steps to add another style called subheading with the Arial, Helvetica, sans-serif font, size 16, normal style, color #000066 • Apply the subheading style to each category of spa services, then save your work using the File, Save All command Macromedia Dreamweaver 8--Illustrated Introductory

  31. Adding Styles to a Cascading Style Sheet Macromedia Dreamweaver 8--Illustrated Introductory

  32. Attaching a Cascading Style Sheet to a Page • Open the index.html page • Click 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 (PC) or Choose (Mac), then click OK to close the Attach External Style Sheet dialog box. • Click the New CSS Rule button on the Styles panel, type body_text in the Name text box, then click OK • Use the settings shown in Figure D-23 on page 93 to format the new body text style, then click OK Macromedia Dreamweaver 8--Illustrated Introductory

  33. Attaching a Cascading Style Sheet to a Page • Select the paragraph of text, click the Font list arrow on the Property inspector, click Default font, click the Size list arrow, then click None to remove the manual formatting from the paragraph • Click the Style list arrow on the Property inspector, then click body_text to apply the body_text style • Switch to the spa file by clicking its page tab, clear all prior formatting from the paragraphs of text without an assigned style, then apply the body_text style to them • Compare your screen to the figure on the following slide, then use the File, Save All command to save all open files Macromedia Dreamweaver 8--Illustrated Introductory

  34. Attaching a Cascading Style Sheet to a Page Macromedia Dreamweaver 8--Illustrated Introductory

  35. Inserting Rollovers with Flash Text • Click the insertion point after the last word on the spa page, then press [Enter] (Win) or [return] (Mac) • Change to the Common category on the Insert bar if necessary, click the Media button on the Insert bar, then click Flash Text • Click the Font list arrow, click Arial if necessary, leave the Size text box as 30, then click the Bold button • Click the Color list button , click #000066, click the Rollover Color list arrow, then click #66CCFF (the light blue color in the sixth row in the second column from the right) • Type Home in the Text text box, click Browse next to the Link text box, then double-click index.html Macromedia Dreamweaver 8--Illustrated Introductory

  36. Inserting Rollovers with Flash Text • Click the Target list arrow, click _self, if necessary, type home.swf in the Save As text box, then click OK • Type Link to home page in the Title text box in the Flash Accessibilities dialog box, then click OK • Save the file, then preview it in your browser • Scroll to the bottom of the page, roll your mouse pointer over Home, click Home, then close the browser • Close your files, then Exit (Win) or Quit (Mac) the Dreamweaver program Macromedia Dreamweaver 8--Illustrated Introductory

  37. Inserting Rollovers with Flash Text Macromedia Dreamweaver 8--Illustrated Introductory

  38. U n i t S u m m a r y • Import text • Set text properties • Create an unordered list • Change Preferences for Cascading Style Sheets • Create a Style in a new Cascading Style Sheet Macromedia Dreamweaver 8--Illustrated Introductory

  39. U n i t S u m m a r y • Apply and edit a Style • Add styles to a Cascading Style Sheet • Attach a Cascading Style Sheet to a Page Insert rollovers with Flash text Macromedia Dreamweaver 8--Illustrated Introductory

More Related