Macromedia Dreamweaver 8-- Illustrated Introductory 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 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, 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 okayCreating 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 # 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 RomanRoman ArabicArabic

Macromedia Dreamweaver 8--Illustrated Introductory 17 Changing Preferences for Cascading 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 for Cascading 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 New Cascading 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 New Cascading 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 New Cascading 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 boxesBackground, 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 # 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