Macromedia Dreamweaver 8--Illustrated Introductory
1
Macromedia Dreamweaver 8 Macromedia Dreamweaver 8
Unit DUnit D
Formatting Text and Formatting Text and Using Cascading Style SheetsUsing Cascading Style Sheets
Macromedia Dreamweaver 8--Illustrated Introductory 2
U n i t O b j e c t i v e sU n i t O b j e c t i v e s
Import textImport text
Set text propertiesSet text properties
Create an unordered listCreate an unordered list
Change Preferences for Change Preferences for Cascading Style SheetsCascading Style Sheets
Create a Style in a new Create a Style in a new Cascading Style SheetCascading Style Sheet
Macromedia Dreamweaver 8--Illustrated Introductory 3
U n i t O b j e c t i v e sU n i t O b j e c t i v e s
Apply and edit a StyleApply and edit a Style
Add styles to a Cascading Style Add styles to a Cascading Style SheetSheet
Attach a Cascading Style Sheet Attach a Cascading Style Sheet to a Pageto a Page
Insert rollovers with Flash textInsert rollovers with Flash text
Macromedia Dreamweaver 8--Illustrated Introductory 4
Importing TextImporting Text
Start Dreamweaver, open Start Dreamweaver, open The Striped Umbrella The Striped Umbrella Web siteWeb site, open , open dwd_1.htmldwd_1.html from the drive and from the drive and folder where your Unit D Data Files are stored, folder where your Unit D Data Files are stored, then save it as then save it as spa.htmlspa.html in the striped_umbrella in the striped_umbrella root folder, overwriting the existing file and not root folder, overwriting the existing file and not updating linksupdating links
Click the Click the gray image boxgray image box, click the , click the Browse for Browse for File iconFile icon next to the Src text box on the Property next to the Src text box on the Property inspector, navigate to the Unit D Data Files assets inspector, navigate to the Unit D Data Files assets folder, double-click folder, double-click the_spa.jpgthe_spa.jpg, then click on the , then click on the page to deselect the imagepage to deselect the image
Expand the assets folder on the Files panel if Expand the assets folder on the Files panel if necessary, then if the newly copied file is not necessary, then if the newly copied file is not visible, click the visible, click the Refresh buttonRefresh button on the Files on the Files panelpanel
Macromedia Dreamweaver 8--Illustrated Introductory 5
Importing TextImporting Text
(Win) Click to the right of (Win) Click to the right of The SpaThe Spa, press , press [Enter][Enter], , click File on the menu bar, point to click File on the menu bar, point to ImportImport, click , click WordWord DocumentDocument, navigate to the drive and folder , navigate to the drive and folder where your Unit D Data Files are stored, then where your Unit D Data Files are stored, then double-click double-click spa.docspa.doc(Mac) Navigate to the Unit D Data Files folder, (Mac) Navigate to the Unit D Data Files folder, double-click double-click spa.docspa.doc, select all, copy, close , select all, copy, close spa.docspa.doc, then paste the copied text on the spa , then paste the copied text on the spa page in Dreamweaver.page in Dreamweaver.
Click Click CommandsCommands on the menu bar, then click on the menu bar, then click Clean up Word HTMLClean up Word HTML; in the Clean Up word ; in the Clean Up word HTML dialog box, click HTML dialog box, click OKOK, then click , then click OKOK again again
Click Click FileFile on the menu bar, then click on the menu bar, then click SaveSave
Macromedia Dreamweaver 8--Illustrated Introductory 6
Importing TextImporting Text
Macromedia Dreamweaver 8--Illustrated Introductory 7
Clues to UseClues to Use
Saving a Word file for Importing Saving a Word file for Importing into Dreamweaverinto 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 Apply styles for formatting once the text is imported into Dreamweaveris imported into Dreamweaver
Macromedia Dreamweaver 8--Illustrated Introductory 8
Importing TextImporting Text
Macromedia Dreamweaver 8--Illustrated Introductory 9
Setting Text PropertiesSetting Text Properties
Click to place the insertion point anywhere within Click to place the insertion point anywhere within the words the words Spa ServicesSpa Services
Click the Click the Format list arrowFormat list arrow on the Property on the Property inspector, then click inspector, then click Heading 4Heading 4
Select the Select the Spa ServicesSpa Services heading, click the heading, click the Font Font list arrowlist arrow on the Property inspector, click on the Property inspector, click Arial, Arial, Helvetica, sans-serifHelvetica, sans-serif, then deselect the text to , then deselect the text to see the new font appliedsee the new font applied
Select the heading again, click the Select the heading again, click the Text Color Text Color buttonbutton on the Property inspector, use the on the Property inspector, use the eyedropper to click eyedropper to click #000066#000066 from the Color from the Color Picker, then deselect the text to see the new color Picker, then deselect the text to see the new color appliedapplied
Macromedia Dreamweaver 8--Illustrated Introductory 10
Setting Text PropertiesSetting Text Properties
Click to place the insertion point before the Click to place the insertion point before the OO in in Our spa servicesOur spa services, scroll to the end of the text, , scroll to the end of the text, press and hold press and hold [Shift][Shift], click after the end of the , click after the end of the last sentence, then release last sentence, then release [Shift][Shift]
Click the Click the Font list arrowFont list arrow on the Property on the Property inspector, then click inspector, then click Arial, Helvetica, sans-serifArial, Helvetica, sans-serif
Click the Click the Size list arrowSize list arrow on the Property on the Property inspector, then click 3inspector, then click 3
Click anywhere on the page to deselect the text, Click anywhere on the page to deselect the text, save your work, click the save your work, click the Preview/Debug in Preview/Debug in Browser buttonBrowser button on the Document toolbar, click on the Document toolbar, click Preview in [your browser name]Preview in [your browser name], examine the , examine the page, then close the browserpage, then close the browser
Macromedia Dreamweaver 8--Illustrated Introductory 11
Setting Text PropertiesSetting Text Properties
Macromedia Dreamweaver 8--Illustrated Introductory 12
Clues to UseClues to Use
Font sizesFont sizes You may change the font to a size You may change the font to a size
between 1 and 7, or a size relative to between 1 and 7, or a size relative to the the default basefontdefault basefont (3) (3)
Macromedia Dreamweaver 8--Illustrated Introductory 13
Creating an Unordered ListCreating an Unordered List
Select the three items under the Skin Care Select the three items under the Skin Care Treatments headingTreatments heading
Click the Click the Unordered List buttonUnordered List button on the Property on the Property inspector to create an unordered listinspector to create an unordered list
Repeat the previous step to create unordered lists Repeat the previous step to create unordered lists of the items under the Body Treatments, of the items under the Body Treatments, Massages, and Spa Packages headingsMassages, and Spa Packages headings
Click to place the insertion point in any of the Click to place the insertion point in any of the items in the first unordered list, click the items in the first unordered list, click the expander expander arrowarrow in the lower-right corner of the Property in the lower-right corner of the Property inspector to expand the Property inspector if inspector to expand the Property inspector if necessary, then click necessary, then click List ItemList Item
Macromedia Dreamweaver 8--Illustrated Introductory 14
Creating an Unordered ListCreating an Unordered List
Click the Click the Style list arrowStyle list arrow, click , click SquareSquare, then click , then click OKOK
Repeat the previous step to format the other three Repeat the previous step to format the other three unordered listsunordered lists
Click to place the insertion point before the first Click to place the insertion point before the first item in the unordered list, click the item in the unordered list, click the Show Code Show Code View buttonView button on the Document toolbar to view the on the Document toolbar to view the code for the unordered list, click the code for the unordered list, click the View View Options list arrowOptions list arrow, then uncheck the , then uncheck the Hidden Hidden Characters optionCharacters option
Click the Click the Show Design View buttonShow Design View button on the on the Document toolbar to return to Design View, then Document toolbar to return to Design View, then save your worksave your work
Macromedia Dreamweaver 8--Illustrated Introductory 15
Creating an Unordered ListCreating an Unordered List
Macromedia Dreamweaver 8--Illustrated Introductory 16
Clues to UseClues 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 Dreamweaver uses several options for
number stylesnumber styles• RomanRoman• ArabicArabic
Macromedia Dreamweaver 8--Illustrated Introductory 17
Changing Preferences forChanging Preferences forCascading Style SheetsCascading Style Sheets
Click Click EditEdit (Win) or (Win) or DreamweaverDreamweaver (Mac) on the (Mac) on the menu bar, then click Preferencesmenu bar, then click Preferences
Click the Click the General categoryGeneral category if if necessary, click the check box necessary, click the check box Use CSS instead of HTML tagsUse CSS instead of HTML tags to select it, then click to select it, then click OKOK
Macromedia Dreamweaver 8--Illustrated Introductory 18
Changing Preferences forChanging Preferences forCascading Style SheetsCascading Style Sheets
Macromedia Dreamweaver 8--Illustrated Introductory 19
Clues to UseClues to Use
Understanding Cascading Style Understanding Cascading Style Sheet FilesSheet Files File that determines the formatting for File that determines the formatting for
various page objectsvarious page objects Single file can contain many individual Single file can contain many individual
stylesstyles Styles can be embedded in the code for Styles can be embedded in the code for
a single Web pagea single Web page Some styles can define HTML tagsSome styles can define HTML tags
Macromedia Dreamweaver 8--Illustrated Introductory 20
Clues to UseClues to Use
Using styles without a Cascading Using styles without a Cascading Style SheetStyle Sheet Dreamweaver can automatically create Dreamweaver can automatically create
styles for youstyles for you
Macromedia Dreamweaver 8--Illustrated Introductory 21
Clues to UseClues to Use
Using Cascading Style SheetsUsing Cascading Style Sheets Great timesaversGreat timesavers Can be exported to other Web sitesCan be exported to other Web sites Not all browsers can read Cascading Not all browsers can read Cascading
Style SheetsStyle Sheets
Macromedia Dreamweaver 8--Illustrated Introductory 22
Creating a Style in a NewCreating a Style in a NewCascading Style SheetCascading Style Sheet
Click Click WindowWindow on the menu bar, then click on the menu bar, then click CSS CSS StylesStyles, if necessary, if necessary
Click the Click the New CSS Rule buttonNew CSS Rule button on the CSS on the CSS Styles panel, then verify that the Class (can apply Styles panel, then verify that the Class (can apply to any tag) and the (New Style Sheet File) option to any tag) and the (New Style Sheet File) option buttons are both selectedbuttons are both selected
Type Type spa_namesspa_names in the Name text box, then click in the Name text box, then click OKOK
Type Type su_styles.csssu_styles.css in the File name text box in the File name text box (Win) or the Save As text box (Mac), then click (Win) or the Save As text box (Mac), then click SaveSave
Click the Click the Font list arrowFont list arrow, then click , then click Arial, Arial, Helvetica, sans-serifHelvetica, sans-serif
Macromedia Dreamweaver 8--Illustrated Introductory 23
Creating a Style in a NewCreating a Style in a NewCascading Style SheetCascading Style Sheet
Click the Click the Size list arrowSize list arrow, click , click 1414, leave the size , leave the size measurement unit as measurement unit as pixelspixels, click the , click the Style list Style list arrowarrow, click , click normalnormal, click the , click the Weight list arrowWeight list arrow, , then click then click boldbold
Click the Click the Color list buttonColor list button , click , click #000066#000066, as , as shown in Figure D-12, then click shown in Figure D-12, then click OKOK
Click the Click the Refresh buttonRefresh button on the Files panel if on the Files panel if necessary to view the su_styles CSS style filenecessary to view the su_styles CSS style file
Click the Click the Show Code View buttonShow Code View button on the on the Document toolbar to view the HTML code linking Document toolbar to view the HTML code linking to the su_styles.css file, click to the su_styles.css file, click FileFile on the menu on the menu bar, then click bar, then click Save AllSave All to save your changes to to save your changes to both the page and the style sheet fileboth the page and the style sheet file
Macromedia Dreamweaver 8--Illustrated Introductory 24
Creating a Style in a NewCreating a Style in a NewCascading Style SheetCascading Style Sheet
Macromedia Dreamweaver 8--Illustrated Introductory 25
Applying and Editing a StyleApplying and Editing a Style
Click the Click the Show Design View buttonShow Design View button on the Document toolbar to return to on the Document toolbar to return to Design ViewDesign View
Select Select Revitalizing facialRevitalizing facial, as shown , as shown in Figure D-15, click the in Figure D-15, click the Format list Format list arrowarrow in the Property inspector, click in the Property inspector, click NoneNone, click the , click the Font list arrowFont list arrow, click , click Default FontDefault Font, click the , click the Size list Size list arrowarrow, then click , then click NoneNone, click the , click the Style list arrowStyle list arrow on the Property on the Property inspector, then click inspector, then click spa_namesspa_names
Macromedia Dreamweaver 8--Illustrated Introductory 26
Applying and Editing a StyleApplying and Editing a Style
Repeat the previous step to remove Repeat the previous step to remove manual formatting and apply the manual formatting and apply the spa_names style to the names of each of spa_names style to the names of each of the remaining spa servicesthe remaining spa services
Click the Click the spa_names stylespa_names style in the CSS in the CSS Styles panel, then click the Styles panel, then click the Edit Style Edit Style buttonbutton on the CSS Styles panel on the CSS Styles panel
Click the Click the Size list arrowSize list arrow, click , click 1616, then , then click click OKOK
Save your work using the Save All Save your work using the Save All commandcommand
Macromedia Dreamweaver 8--Illustrated Introductory 27
Applying and Editing a StyleApplying and Editing a Style
Macromedia Dreamweaver 8--Illustrated Introductory 28
Clues to UseClues to Use
CSS Style Sheet settingsCSS Style Sheet settings Format page content other than textFormat page content other than text
• Background, borders, lists, and boxesBackground, borders, lists, and boxes
CSS Styles consist of a CSS Styles consist of a selectorselector and a and a declarationdeclaration
Macromedia Dreamweaver 8--Illustrated Introductory 29
Adding Styles to a Adding Styles to a Cascading Style SheetCascading Style Sheet
Click the Click the New CSS Rule buttonNew CSS Rule button on the CSS on the CSS Styles PanelStyles Panel
Type Type headingheading in the Name Text box, verify that in the Name Text box, verify that the Define In text box is set to the the Define In text box is set to the su_styles.csssu_styles.css file, then click file, then click OKOK
Click the Click the Font list arrowFont list arrow, then click , then click Arial, Arial, Helvetica, sans-serifHelvetica, sans-serif
Click the Click the Size list arrowSize list arrow, then click , then click 1818, click the , click the Weight list arrowWeight list arrow, then click , then click boldbold
Click the Click the Color list buttonColor list button, then select color , then select color #000066#000066
Macromedia Dreamweaver 8--Illustrated Introductory 30
Adding Styles to a Adding Styles to a Cascading Style SheetCascading Style Sheet
Click the Click the BlockBlock category in the Category list, click the category in the Category list, click the Text Text Align list arrowAlign list arrow, click , click centercenter, then click , then click OKOK
Select the heading Select the heading Spa ServicesSpa Services, click the , click the Format list Format list arrowarrow in the Property inspector, click in the Property inspector, click NoneNone, click the , click the Font Font list arrowlist arrow, click , click Default FontDefault Font, click the , click the Size list arrowSize list arrow, , then click then click NoneNone; if necessary, click the ; if necessary, click the Color list arrowColor list arrow, , then click the then click the Strikethrough buttonStrikethrough button
Click the Click the Style list arrowStyle list arrow on the Property inspector, then on the Property inspector, then click click headingheading
Repeat the first 5 steps to add another style called Repeat the first 5 steps to add another style called subheading with the Arial, Helvetica, sans-serif font, size subheading with the Arial, Helvetica, sans-serif font, size 16, normal style, color #00006616, normal style, color #000066
Apply the subheading style to each category of spa Apply the subheading style to each category of spa services, then save your work using the File, Save All services, then save your work using the File, Save All commandcommand
Macromedia Dreamweaver 8--Illustrated Introductory 31
Adding Styles to a Adding Styles to a Cascading Style SheetCascading Style Sheet
Macromedia Dreamweaver 8--Illustrated Introductory 32
Attaching a Cascading Style Sheet Attaching a Cascading Style Sheet to a Pageto a Page
Open the Open the index.html pageindex.html page
Click the Click the Attach Style Sheet buttonAttach Style Sheet button on the CSS on the CSS Styles panelStyles panel
Click Click BrowseBrowse next to the File/URL text box, click next to the File/URL text box, click su_styles.csssu_styles.css in the Select Style Sheet File in the Select Style Sheet File dialog box if necessary, click dialog box if necessary, click OKOK (PC) or (PC) or ChooseChoose (Mac), then click (Mac), then click OKOK to close the Attach External to close the Attach External Style Sheet dialog box.Style Sheet dialog box.
Click the Click the New CSS RuleNew CSS Rule button on the Styles button on the Styles panel, type panel, type body_textbody_text in the Name text box, then in the Name text box, then click click OKOK
Use the settings shown in Figure D-23 on page 93 Use the settings shown in Figure D-23 on page 93 to format the new body text style, then click to format the new body text style, then click OKOK
Macromedia Dreamweaver 8--Illustrated Introductory 33
Attaching a Cascading Style Sheet Attaching a Cascading Style Sheet to a Pageto a Page
Select the Select the paragraph of textparagraph of text, click the , click the Font list Font list arrowarrow on the Property inspector, click on the Property inspector, click Default Default fontfont, click the , click the Size list arrowSize list arrow, then click , then click NoneNone to to remove the manual formatting from the paragraphremove the manual formatting from the paragraph
Click the Click the Style list arrowStyle list arrow on the Property on the Property inspector, then click inspector, then click body_textbody_text to apply the to apply the body_text stylebody_text style
Switch to the spa file by clicking its page tab, clear Switch to the spa file by clicking its page tab, clear all prior formatting from the paragraphs of text all prior formatting from the paragraphs of text without an assigned style, then apply the without an assigned style, then apply the body_text style to thembody_text style to them
Compare your screen to the figure on the Compare your screen to the figure on the following slide, then use the File, Save All following slide, then use the File, Save All command to save all open filescommand to save all open files
Macromedia Dreamweaver 8--Illustrated Introductory 34
Attaching a Cascading Style Sheet Attaching a Cascading Style Sheet to a Pageto a Page
Macromedia Dreamweaver 8--Illustrated Introductory 35
Inserting Rollovers with Flash TextInserting Rollovers with Flash Text
Click the insertion point after the last word on the spa Click the insertion point after the last word on the spa page, then press page, then press [Enter][Enter] (Win) or (Win) or [return][return] (Mac) (Mac)
Change to the Change to the CommonCommon category on the Insert bar if category on the Insert bar if necessary, click the necessary, click the Media buttonMedia button on the Insert bar, on the Insert bar, then click then click Flash TextFlash Text
Click the Click the Font list arrowFont list arrow, click , click ArialArial if necessary, if necessary, leave the Size text box as leave the Size text box as 3030, then click the , then click the Bold Bold buttonbutton
Click the Click the Color list buttonColor list button , click , click #000066#000066, click the , click the Rollover Color list arrowRollover Color list arrow, then click , then click #66CCFF#66CCFF (the (the light blue color in the sixth row in the second column light blue color in the sixth row in the second column from the right)from the right)
Type Type HomeHome in the Text text box, click in the Text text box, click BrowseBrowse next to next to the Link text box, then double-click the Link text box, then double-click index.htmlindex.html
Macromedia Dreamweaver 8--Illustrated Introductory 36
Inserting Rollovers with Flash TextInserting Rollovers with Flash Text
Click the Click the Target list arrowTarget list arrow, click , click _self_self, if , if necessary, type necessary, type home.swfhome.swf in the Save As text in the Save As text box, then click box, then click OKOK
Type Type Link to home pageLink to home page in the Title text box in in the Title text box in the Flash Accessibilities dialog box, then click the Flash Accessibilities dialog box, then click OKOK
Save the file, then preview it in your browserSave the file, then preview it in your browser
Scroll to the bottom of the page, roll your mouse Scroll to the bottom of the page, roll your mouse pointer over pointer over HomeHome, click , click HomeHome, then close the , then close the browserbrowser
Close your files, then Close your files, then ExitExit (Win) or (Win) or QuitQuit (Mac) the (Mac) the Dreamweaver programDreamweaver program
Macromedia Dreamweaver 8--Illustrated Introductory 37
Inserting Rollovers with Flash TextInserting Rollovers with Flash Text
Macromedia Dreamweaver 8--Illustrated Introductory 38
U n i t S u m m a r yU n i t S u m m a r y
Import textImport text
Set text propertiesSet text properties
Create an unordered listCreate an unordered list
Change Preferences for Change Preferences for Cascading Style SheetsCascading Style Sheets
Create a Style in a new Create a Style in a new Cascading Style SheetCascading Style Sheet
Macromedia Dreamweaver 8--Illustrated Introductory 39
U n i t S u m m a r yU n i t S u m m a r y
Apply and edit a StyleApply and edit a Style
Add styles to a Cascading Style Add styles to a Cascading Style SheetSheet
Attach a Cascading Style Sheet Attach a Cascading Style Sheet to a Page Insert rollovers with to a Page Insert rollovers with Flash textFlash text