Macromedia Dreamweaver 8

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


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


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



(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


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


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



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



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)


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



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



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


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


Changing Preferences forChanging Preferences forCascading Style SheetsCascading Style Sheets



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



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



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


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



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


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



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



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


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



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


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



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


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



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


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


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

Macromedia Dreamweaver 8

Documents

Transcript of Macromedia Dreamweaver 8