adobe dreamweaver cs4 - illustrated formatting text using html and css styles

Adobe Dreamweaver CS4 - IllustratedAdobe Dreamweaver CS4 - Illustrated

Formatting Text Formatting Text Using HTML and CSS StylesUsing HTML and CSS Styles

Unit ObjectivesUnit 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 Create a style in a new Cascading

Style SheetStyle Sheet

Adobe Dreamweaver CS4 - Illustrated

Unit ObjectivesUnit Objectives

• 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 to a Attach a Cascading Style Sheet to a PagePage

• Check for spelling errorsCheck for spelling errors


Importing TextImporting Text

• Start Dreamweaver, open Start Dreamweaver, open The The Striped Umbrella Web siteStriped Umbrella Web site, open , open dwd_1.htmldwd_1.html from the drive and folder from the drive and folder where your Unit D Data Files are where your Unit D Data Files are stored, then save it as stored, then save it as spa.htmlspa.html in in the striped_umbrella root folder, the striped_umbrella root folder, overwriting the existing file and not overwriting the existing file and not updating links, then close dwd_1.htmlupdating links, then close dwd_1.html



• In Design view, click the In Design view, click the gray image boxgray image box, , click the click the Browse for File iconBrowse for File icon next to the next to the Src text box on the Property inspector, Src text box on the Property inspector, navigate to the drive and folder where your navigate to the drive and folder where your Unit D Data Files are stored, double-click Unit D Data Files are stored, double-click the_spa.jpgthe_spa.jpg in the assets folder, then click in the assets folder, then click on the page to deselect the imageon the page to deselect the image

• Expand the assets folder on the Files Expand the assets folder on the Files panel if necessary, then if the newly panel if necessary, then if the newly copied file is not visible, click the copied file is not visible, click the Refresh Refresh buttonbutton on the Files panel on the Files panel



• (Win) Click to the right of (Win) Click to the right of The Spa The Spa logo on logo on the page, press the page, press [Enter][Enter], click , click FileFile on the on the Application bar, point to Application bar, point to ImportImport, click , click WordWord DocumentDocument, navigate to the drive , navigate to the drive and folder where your Unit D Data Files and folder where your Unit D Data Files are stored, then double-click are stored, then double-click spa.doc spa.doc

• (Mac) Navigate to the Unit D Data Files (Mac) Navigate to the Unit D Data Files folder, double-click folder, double-click spa.docspa.doc, click , click EditEdit, , click click Select AllSelect All, click , click EditEdit, click , click CopyCopy, , close close spa.docspa.doc, click to the right of The , click to the right of The Spa logo, press Spa logo, press [return][return], then paste the , then paste the copied text on the spa page in copied text on the spa page in DreamweaverDreamweaver



• (Win) Click (Win) Click CommandsCommands on the on the Application bar, then click Application bar, then click Clean Up Clean Up Word HTMLWord 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 Application bar on the Application bar (Win) or Menu bar (Mac), then click (Win) or Menu bar (Mac), then click SaveSave


Clues to UseClues to Use

• Saving a Word file for Importing into Saving a Word file for Importing into DreamweaverDreamweaver• 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 Click to place the insertion point anywhere within the words within the words Spa ServicesSpa Services

• Click the Click the HTML button HTML button on the Property on the Property inspector if necessary, click the inspector if necessary, click the Format Format list arrowlist arrow on the Property inspector, then on the Property inspector, then click click Headig 4Headig 4

• Click Click FormatFormat on the Application bar (Win) on the Application bar (Win) or Menu bar (Mac), point to or Menu bar (Mac), point to AlignAlign, then , then click click CenterCenter


Setting Text PropertiesSetting Text Properties• Click the Click the Show Code and Design views Show Code and Design views

buttonbutton to view the HTML code to view the HTML code• Click the Click the Show Design view button Show Design view button to to

return to Design viewreturn to Design view• Save your work, click the Save your work, click the Preview/Debug Preview/Debug

in browser buttonin browser button on the Document on the Document toolbar, click toolbar, click Preview in [your browser Preview in [your browser name]name], examine the page, then close the , examine the page, then close the browserbrowser


Setting Text PropertiesSetting Text Properties


Creating an Unordered ListCreating an Unordered List

• Select the three items and their Select the three items and their descriptions under the Skin Care descriptions under the Skin Care Treatments headingTreatments heading

• Click the Click the Unordered List buttonUnordered List button on on the HTML Property inspector to the HTML Property inspector to create an unordered listcreate an unordered list

• Repeat steps 1 and 2 to create Repeat steps 1 and 2 to create unordered lists of the items under the unordered lists of the items under the Body Treatments, Massages, and Body Treatments, Massages, and Spa Packages headingsSpa Packages headings



• Click to place the insertion point in any of Click to place the insertion point in any of the items in the first unordered list, double-the items in the first unordered list, double-click the bottom-right corner of the HTML click the bottom-right corner of the HTML Property inspector to expand the Property Property inspector to expand the Property inspector (Win) if necessary, then click inspector (Win) if necessary, then click List ItemList Item

• Click the Click the Style list arrowStyle list arrow, click , click SquareSquare, , then click then click OKOK

• Repeat steps 4 and 5 to format the other Repeat steps 4 and 5 to format the other three unordered liststhree unordered lists



• Click to place the insertion point before Click to place the insertion point before the first item in the first unordered list, the first item in the first unordered list, click the click the Show Code view buttonShow Code view button on on the Document toolbar to view the code the Document toolbar to view the code for the unordered list, click the for the unordered list, click the View View options buttonoptions button, on the Document , on the Document toolbar, then uncheck the toolbar, then uncheck the Hidden Hidden Characters option Characters option if necessaryif necessary

• 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 View, then save your workDesign View, then save 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


Understanding Cascading Understanding Cascading Style SheetsStyle 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


Understanding Cascading Understanding Cascading Style SheetsStyle Sheets



• Using the CSS and HTML Property Using the CSS and HTML Property inspectorinspector• Apply CSS styles using the CSS or Apply CSS styles using the CSS or

HTML Property inspectorHTML Property inspector• First, select the elementFirst, select the element• Apply a styleApply a style• You can change back and forth You can change back and forth

between the two Property inspectorsbetween the two Property inspectors


Creating a Style in a New Creating a Style in a New Cascading Style SheetCascading Style Sheet• Click Click WindowWindow on the Application bar (Win) or Menu on the Application bar (Win) or Menu

bar (Mac), then click bar (Mac), then click CSS StylesCSS Styles, if necessary, to , if necessary, to open the CSS tab groupopen the CSS tab group

• Click the Click the New CSS Rule button New CSS Rule button on the CSS Styles on the CSS Styles panel, if necessary, click the panel, if necessary, click the Selector Type list Selector Type list arrowarrow, click , click ClassClass (can apply to any HTML (can apply to any HTML element) then type element) then type bold_bluebold_blue in the Selector Name in the Selector Name text box text box

• Click the Click the Rule Definition list arrowRule Definition list arrow, click , click (New (New Style Sheet File)Style Sheet File), click OK, click OK

• Type Type su_styles.csssu_styles.css in the File name text box (Win) in the File name text box (Win) or the Save As text box (Mac), then click or the Save As text box (Mac), then click SaveSave


Creating a Style in a New Creating a Style in a New Cascading Style SheetCascading Style Sheet• Click the Click the Font-size list arrowFont-size list arrow, click , click

1414, leave the size measurement unit , leave the size measurement unit as as pxpx, click the , click the Font-style list Font-style list arrowarrow, click , click normalnormal, click the , click the Font-Font-weight list arrowweight list arrow, then click , then click bold bold

• Click the Click the Color box Color box to open the color to open the color picker, click picker, click #006#006, then click , then click OKOK


Creating a Style in a New Creating a Style in a New Cascading Style SheetCascading Style Sheet• Click the Click the Refresh buttonRefresh button on the Files on the Files

panel if necessary to view the su_styles panel if necessary to view the su_styles CSS fileCSS file

• Click the Click the Show Code view buttonShow Code view button on the on the Document toolbar to view the HTML code Document toolbar to view the HTML code linking to the su_styles.css file, click linking to the su_styles.css file, click FileFile on the Application bar (Win) or Menu bar on the Application bar (Win) or Menu bar (Mac), then click (Mac), then click Save AllSave All to save your to save your changes to both the page and the style changes to both the page and the style sheet filesheet file


Creating a Style in a New Cascading Style SheetCreating a Style in a New Cascading Style Sheet


Creating a Style in a New Creating a Style in a New Cascading Style SheetCascading Style Sheet


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, click the , click the Targeted Rule list arrowTargeted Rule list arrow in the CSS in the CSS Property inspector, click Property inspector, click bold_bluebold_blue

• Repeat Step 2 to apply the bold_blue Repeat Step 2 to apply the bold_blue style to the names of each of the style to the names of each of the remaining spa servicesremaining spa services



• Click the Click the bold_blue stylebold_blue style in the CSS in the CSS Styles panel, then click the Styles panel, then click the Edit Rule Edit Rule buttonbutton on the CSS Styles panel on the CSS Styles panel

• Click the Click the Font-size arrowFont-size arrow, click , click 1616, , click click OKOK, then deselect the text, then deselect the text

• Save your work using the Save All Save your work using the Save All commandcommand



• Understanding CSS Style Sheet Understanding CSS Style Sheet CodeCode• 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 CSS Styles consist of a selectorselector and a and a declarationdeclaration


Adding Styles to a Cascading Adding Styles to a Cascading Style SheetStyle Sheet• Click the Click the New CSS Rule buttonNew CSS Rule button on the CSS on the CSS

Styles PanelStyles Panel• Click the Click the Selector Type list arrowSelector Type list arrow, click , click Class Class

(can apply to any HTML element)(can apply to any HTML element), type , type headingheading in the Selector Name text box, click the in the Selector Name text box, click the Rule Definition list arrowRule Definition list arrow, click , click su_styles.csssu_styles.css, , then click then click OKOK

• Click the Click the Font-family list arrowFont-family list arrow, then click , then click Arial, Arial, Helvetica, sans-serifHelvetica, sans-serif

• Click the Click the Font-size list arrowFont-size list arrow, then click , then click 1818, click , click the the Font-weight list arrowFont-weight list arrow, then click , then click boldbold

• Click the Click the Color pickerColor picker, then select color , then select color #006#006


Adding Styles to a Cascading Adding Styles to a Cascading Style SheetStyle Sheet• Click the Click the BlockBlock category in the category in the

Category list, click the Category list, click the Text-align list Text-align list arrowarrow, click , click centercenter, then click , then click OKOK

• Select the heading Select the heading Spa ServicesSpa Services, , click the click the Format list arrowFormat list arrow in the in the HTML Property inspector, click HTML Property inspector, click ParagraphParagraph

• Click the Click the Class list arrow Class list arrow on the on the Property inspector, click Property inspector, click headingheading, , then click once inside the heading to then click once inside the heading to deselect itdeselect it


Adding Styles to a Cascading Adding Styles to a Cascading Style SheetStyle Sheet• Repeat Steps 1–5 to add another class Repeat Steps 1–5 to add another class

style called style called subheadingsubheading in the in the su_styles.css style sheet with the following su_styles.css style sheet with the following settings: Font-family, settings: Font-family, Arial, Helvetica, Arial, Helvetica, sans-serifsans-serif; Font-size, ; Font-size, 16 px16 px, Font-style, , Font-style, normalnormal; and Color, ; and Color, #006#006

• Apply the subheading style to each Apply the subheading style to each category of spa services, then save category of spa services, then save your work using the File, Save All your work using the File, Save All commandcommand


Adding Styles to a Cascading Style SheetAdding Styles to a Cascading Style Sheet


Adding Styles to a Cascading Adding Styles to a Cascading Style SheetStyle Sheet



• Using font combinations in stylesUsing font combinations in styles• When you are setting rule properties for When you are setting rule properties for

text, you apply font combinationstext, you apply font combinations• Browser will first look on the viewer’s Browser will first look on the viewer’s

system for the first font, then the system for the first font, then the second font, then the third fontsecond font, then the third font


Attaching a Cascading Style Attaching a Cascading Style Sheet to a PageSheet to 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 Styles panelon the CSS Styles panel• Click Click BrowseBrowse next to the File/URL next to the File/URL

text box, click text box, click su_styles.csssu_styles.css in the in the Select Style Sheet File dialog box if Select Style Sheet File dialog box if necessary, click necessary, click OKOK (Win) or (Win) or ChooseChoose (Mac), then click (Mac), then click OKOK to close the to close the Attach External Style Sheet dialog Attach External Style Sheet dialog box.box.


Attaching a Cascading Style Attaching a Cascading Style Sheet to a PageSheet to a Page• Click the Click the New CSS RuleNew CSS Rule button on the CSS button on the CSS

Styles panel, verify that Class is the Styles panel, verify that Class is the Selector type, type Selector type, type body_textbody_text in the in the Selector Name text box, verify that Selector Name text box, verify that su_style.css is the location for the Rule su_style.css is the location for the Rule Definition, then click Definition, then click OKOK

• Use the settings shown in Figure D-21 to Use the settings shown in Figure D-21 to format the new body text style, then click format the new body text style, then click OKOK

• Select the Select the paragraph of textparagraph of text, click the , click the Class list arrowClass list arrow in the HTML Property in the HTML Property inspector, then click inspector, then click body_textbody_text to apply the to apply the body_text stylebody_text style


Attaching a Cascading Style Attaching a Cascading Style Sheet to a PageSheet to a Page• Switch to the spa file by clicking its Switch to the spa file by clicking its

page tab, then apply the body_text style page tab, then apply the body_text style to the first paragraph of text and the to the first paragraph of text and the unformatted text under each bullet unformatted text under each bullet item’s titleitem’s title

• Compare your screen to the figures on Compare your screen to the figures on the following slides, then use the File, the following slides, then use the File, Save All command to save all open filesSave All command to save all open files


Attaching a Cascading Style Attaching a Cascading Style Sheet to a PageSheet to a Page


Checking for Spelling ErrorsChecking for Spelling Errors

• Place the insertion point in front of Place the insertion point in front of the navigation barthe navigation bar

• Click Click CommandsCommands on the Application on the Application bar (Win) or Menu bar (Mac), then bar (Win) or Menu bar (Mac), then click click Check SpellingCheck Spelling

• Click Click massagedmassaged in the Suggestions in the Suggestions list if necessary, then click list if necessary, then click ChangeChange



• Click Click OKOK to close the Dreamweaver to close the Dreamweaver dialog box stating that the Spelling dialog box stating that the Spelling Check is completedCheck is completed

• Save your work, then preview the Save your work, then preview the spa page in your browserspa page in your browser

• Close all open pages and exit Close all open pages and exit DreamweaverDreamweaver



• 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 Similar to Find and Replace commands

in word processing programsin word processing programs• Useful to search for coding errorsUseful to search for coding errors


Unit SummaryUnit 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 Create a style in a new Cascading

Style SheetStyle Sheet


Unit SummaryUnit Summary

• 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 to a Attach a Cascading Style Sheet to a PagePage

• Check for spelling errorsCheck for spelling errors


adobe dreamweaver cs4 - illustrated formatting text using html and css styles

Documents

copied text

unit d data files folder

word file

assets folder

src text box

html button

application bar win

copied file