adobe dreamweaver cs4 - illustrated developing a web page

Adobe Dreamweaver CS4 - IllustratedAdobe Dreamweaver CS4 - Illustrated

Developing a Web PageDeveloping a Web Page

Unit ObjectivesUnit Objectives

• Plan the page layoutPlan the page layout

• Create the head contentCreate the head content

• Set Web page propertiesSet Web page properties

• Create and format textCreate and format text

Adobe Dreamweaver CS4 - Illustrated

Unit ObjectivesUnit Objectives

• Add links to Web pagesAdd links to Web pages

• Use the History panelUse the History panel

• View HTML codeView HTML code

• Test and modify Web pagesTest and modify Web pages


Planning the Page LayoutPlanning the Page Layout

• Use white space effectivelyUse white space effectively

• Limit media elementsLimit media elements

• Keep it simpleKeep it simple

• Use an intuitive navigation structureUse an intuitive navigation structure



• Apply a consistent theme using Apply a consistent theme using templatestemplates

• Use tables or CSS for page layoutUse tables or CSS for page layout

• Be conscious of accessibility issuesBe conscious of accessibility issues


Creating the Head ContentCreating the Head Content

• Start Dreamweaver, click the Start Dreamweaver, click the Site list Site list arrowarrow on the Files panel, then click on the Files panel, then click The Striped UmbrellaThe Striped Umbrella, if it isn’t , if it isn’t already selectedalready selected

• Double-click Double-click index.htmlindex.html in the Files in the Files panel, make sure the Document panel, make sure the Document window is maximized, click window is maximized, click ViewView on on the Application bar (Win) or Menu bar the Application bar (Win) or Menu bar (Mac), then click (Mac), then click Head ContentHead Content, if it , if it isn’t already checkedisn’t already checked



• Click the Click the Title iconTitle icon in the head in the head section, place the insertion point after section, place the insertion point after the current title in the Title text box in the current title in the Title text box in the Property inspector, press the Property inspector, press [spacebar],[spacebar], type type beach resort and beach resort and spa, Ft. Eugene, Floridaspa, Ft. Eugene, Florida, then press , then press [[Enter]Enter] (Win) or [ (Win) or [return]return] (Mac) (Mac)

• Click the Click the Common category Common category on the on the Insert panel(if necessary), click Insert panel(if necessary), click HTMLHTML, click the , click the Head list arrowHead list arrow, , then click then click KeywordsKeywords



• Type Type beach resort, spa, Ft. beach resort, spa, Ft. Eugene, Florida, Gulf of Mexico, Eugene, Florida, Gulf of Mexico, fishing, dolphin cruisesfishing, dolphin cruises (including (including the commas) in the Keywords text the commas) in the Keywords text box, then click box, then click OKOK

• Click the Click the Head list arrowHead list arrow on the on the Insert bar, click Insert bar, click DescriptionDescription, then , then type type The Striped Umbrella is a full-The Striped Umbrella is a full-service resort and spa just steps service resort and spa just steps from the Gulf of Mexico in Ft. from the Gulf of Mexico in Ft. Eugene, Florida.Eugene, Florida., then click , then click OKOK



• Click the Click the Show Code view buttonShow Code view button on the Document toolbar, click on the Document toolbar, click anywhere in the code, view the head anywhere in the code, view the head section code, click the section code, click the Show Design Show Design View buttonView button, then save your work, then save your work


Setting Web Page PropertiesSetting Web Page Properties

• Click Click ModifyModify on the Application bar (Win) on the Application bar (Win) or Menu bar (Mac), then click or Menu bar (Mac), then click Page Page PropertiesProperties

• Click the Click the Background color boxBackground color box• Click the Click the blue color swatchblue color swatch, #6CF, the , #6CF, the

next to the last color in the sixth rownext to the last color in the sixth row• Click Click ApplyApply in the Page Properties dialog in the Page Properties dialog

boxbox• Click the Click the Background color boxBackground color box, click the , click the

white color swatchwhite color swatch, the rightmost color in , the rightmost color in the bottom row, then click the bottom row, then click ApplyApply



• Click the Click the Text color boxText color box, then use the , then use the eyedropper tool to select a shade of blue eyedropper tool to select a shade of blue for the color of the text on the home page, for the color of the text on the home page, then click then click ApplyApply to see the change to see the change

• Click the Click the Text color boxText color box again, then click again, then click the the Default Color buttonDefault Color button at the top of the at the top of the color pickercolor picker

• Click Click OKOK to close the Page Properties to close the Page Properties dialog box, then save your workdialog box, then save your work


Creating and Formatting TextCreating and Formatting Text

• Position the insertion point to the left Position the insertion point to the left of A in About Us, then drag to select of A in About Us, then drag to select About Us – Spa – CaféAbout Us – Spa – Café

• Type Type Home - About Us - Spa - Cafe Home - About Us - Spa - Cafe - Activities- Activities, using spaces on either , using spaces on either side of the hyphensside of the hyphens

• Position the insertion point to the left Position the insertion point to the left of H in Home, then drag to select of H in Home, then drag to select Home - About Us - Spa - Cafe - Home - About Us - Spa - Cafe - ActivitiesActivities



• Click the Click the HTML button HTML button on the Property on the Property inspector to switch to the HTML Property inspector to switch to the HTML Property inspector if necessary, click the inspector if necessary, click the Format Format list arrowlist arrow in the HTML Property inspector, in the HTML Property inspector, then click then click Heading 4Heading 4

• Position the insertion point after the period Position the insertion point after the period following following …want to go home…want to go home, press , press [Enter][Enter] (Win) or (Win) or [return][return] (Mac), then type (Mac), then type The Striped UmbrellaThe Striped Umbrella



• Press and hold Press and hold [Shift][Shift], press , press [Enter][Enter] (Win) or (Win) or [return][return] (Mac) to create a line (Mac) to create a line break, then enter the following information, break, then enter the following information, using a line break at the end of each line:using a line break at the end of each line:25 Beachside Drive25 Beachside DriveFt. Eugene, Florida 33775Ft. Eugene, Florida 33775(555) 594-9458(555) 594-9458



• Position the pointer to the left of Position the pointer to the left of The The Striped UmbrellaStriped Umbrella, click and drag until , click and drag until the entire the entire address and telephone address and telephone numbernumber are selected, click the are selected, click the Italic Italic buttonbutton on the HTML Property inspector on the HTML Property inspector to italicize the text, click anywhere to to italicize the text, click anywhere to deselect the text, then save your workdeselect the text, then save your work


Adding Links to Web PagesAdding Links to Web Pages

• Double-click Double-click HomeHome to select it to select it• Click the Click the Browse for FileBrowse for File iconicon next next

to the to the Link text box Link text box in the in the HTML HTML Property inspectorProperty inspector, then navigate to , then navigate to the striped_umbrella root folder if the striped_umbrella root folder if necessarynecessary

• Click Click index.htmlindex.html, verify that , verify that DocumentDocument is selected next to is selected next to Relative toRelative to, then click , then click OKOK (Win) or (Win) or ChooseChoose (Mac) (Mac)



• Click anywhere on the home page to Click anywhere on the home page to deselect Homedeselect Home

• Repeat the first four steps to create Repeat the first four steps to create links for links for AboutAbout UsUs, , SpaSpa, , CafeCafe, and , and ActivitiesActivities, using about_us.html, , using about_us.html, spa.html, cafe.html, and spa.html, cafe.html, and activities.html as the corresponding activities.html as the corresponding files, then click anywhere on the files, then click anywhere on the pagepage



• Position the insertion point immediately after the Position the insertion point immediately after the last digit in the telephone number, press and hold last digit in the telephone number, press and hold [Shift][Shift], then press , then press [Enter][Enter] (Win) or (Win) or [return][return] (Mac) (Mac)

• Click the Click the Insert panel list Insert panel list arrow, click arrow, click Common Common if if it’s not already selected, then click the it’s not already selected, then click the Email Link Email Link button button on the Insert baron the Insert bar

• Type Type Club ManagerClub Manager in the Text text box, press in the Text text box, press [Tab][Tab], then type , then type [email protected]@thestripedumbrella.com in the in the E-E-Mail text boxMail text box, click , click OKOK, then italicize the Club , then italicize the Club Manager link text if necessaryManager link text if necessary


Using the History PanelUsing the History Panel

• Click Click WindowWindow on the on the Application bar (Win) or Application bar (Win) or Menu bar (Mac)Menu bar (Mac), then click , then click HistoryHistory to open to open the History panelthe History panel

• Click the Click the Options menu buttonOptions menu button on the on the History panel title bar, click History panel title bar, click Clear HistoryClear History, , then click Yes in the warning boxthen click Yes in the warning box

• Position the insertion point to the left of the Position the insertion point to the left of the words The Striped Umbrella in the first words The Striped Umbrella in the first address line, click address line, click Insert Insert on the on the Application bar (Win) or Menu bar (Mac), Application bar (Win) or Menu bar (Mac), point to point to HTMLHTML, then click , then click Horizontal RuleHorizontal Rule


Using the History PanelUsing the History Panel• Click the Click the list arrowlist arrow next to pixels in the next to pixels in the

Property inspector, click Property inspector, click %% if necessary, if necessary, type type 9090 in the W text box, then press in the W text box, then press [Enter][Enter] (Win) or (Win) or [return][return] (Mac) (Mac)

• Click the Click the Align list arrowAlign list arrow in the Property in the Property inspector, then click inspector, then click CenterCenter

• Using the Property inspector, change the Using the Property inspector, change the width of the rule to width of the rule to 80%80% and the alignment and the alignment to to LeftLeft

• Drag the Drag the sliderslider on the History panel up until on the History panel up until it is pointing to it is pointing to Set Alignment: centerSet Alignment: center, then , then release the mouse buttonrelease the mouse button

• Save your workSave your work


Using the History PanelUsing the History Panel


Clues to UseClues to Use

• Dreamweaver “remembers” the Dreamweaver “remembers” the screen arrangement from the last screen arrangement from the last session, so you must open, close, session, so you must open, close, collapse, or expand various panels, collapse, or expand various panels, toolbars, and inspectors to match toolbars, and inspectors to match your screen to the figures in the your screen to the figures in the book.book.



• The History panelThe History panel• Dragging the slider up and down in the History Dragging the slider up and down in the History

panel is a quick way to undo or redo stepspanel is a quick way to undo or redo steps• Memorizes certain stepsMemorizes certain steps• Some Dreamweaver features cannot be Some Dreamweaver features cannot be

recorded in the History panelrecorded in the History panel• The default number of steps recorded in the The default number of steps recorded in the

History panel is 50History panel is 50• Setting this number higher requires more Setting this number higher requires more

memory, and may affect the speed at which memory, and may affect the speed at which Dreamweaver functions.Dreamweaver functions.


Viewing HTML CodeViewing HTML Code

• Click Click WindowWindow on the Application bar (Win) on the Application bar (Win) or Menu bar (Mac), click or Menu bar (Mac), click HistoryHistory to close to close the History panel, then click the the History panel, then click the top top horizontal rule horizontal rule to select itto select it

• Click the Click the Show Code view buttonShow Code view button on the on the Document toolbarDocument toolbar

• Click the Click the View options buttonView options button on the on the Document toolbar, then click Document toolbar, then click Word WrapWord Wrap, , if necessary, to select itif necessary, to select it



• Click the Click the View options button View options button again again and check any options that are and check any options that are unchecked except Hidden unchecked except Hidden CharactersCharacters

• Click Click WindowWindow on the Application bar on the Application bar (Win) or Menu bar (Mac), point to (Win) or Menu bar (Mac), point to ResultsResults, click , click ReferenceReference, choose , choose the the O’REILLY HTML ReferenceO’REILLY HTML Reference in in the Book list if necessary, click the the Book list if necessary, click the Tag list arrowTag list arrow, then scroll to and , then scroll to and click click HRHR in the Tag text box in the Tag text box


Viewing HTML CodeViewing HTML Code• Click the Click the Options button Options button on the Results on the Results

panel toolbar, then clickpanel toolbar, then click Close Tab Group Close Tab Group to close the Results tab groupto close the Results tab group

• Highlight Highlight January 1, 2012January 1, 2012 at the bottom of at the bottom of the Code window, press the Code window, press [Delete][Delete], click the , click the Date buttonDate button in the Common category on in the Common category on the Insert panel, click the Insert panel, click March 7, 1974March 7, 1974, if , if necessary, in the Date Format options, necessary, in the Date Format options, click the click the Update automatically on save Update automatically on save check boxcheck box to select it, then click to select it, then click OKOK

• Click the Click the Show Design view buttonShow Design view button to to return to Design View, then save your return to Design View, then save your workwork



• Understanding XHTML vs. HTMLUnderstanding XHTML vs. HTML• You can save Dreamweaver files in You can save Dreamweaver files in

many different file formatsmany different file formats• XHTML (eXtensible HyperText Markup XHTML (eXtensible HyperText Markup

Language) is the current standard Language) is the current standard language used to create Web pageslanguage used to create Web pages

• Based on XMLBased on XML

• Dreamweaver can create files in HTML Dreamweaver can create files in HTML and XHTMLand XHTML


Testing and Modifying Testing and Modifying Web PagesWeb Pages• Restore down your Document Restore down your Document

window, click the window, click the Window Size list Window Size list arrowarrow on the Status bar, click on the Status bar, click 760 × 760 × 420 (800 × 600, Maximized)420 (800 × 600, Maximized), then , then view the page in the Document view the page in the Document windowwindow

• Click the Click the Preview/Debug in browser Preview/Debug in browser buttonbutton on the Document toolbar, on the Document toolbar, then click then click Preview in [your default Preview in [your default browser]browser]


Testing and Modifying Testing and Modifying Web PagesWeb Pages• Close your browser, highlight the Close your browser, highlight the

period after “period after “...go home...go home.” then type .” then type !! (an exclamation point)(an exclamation point)

• Click the Click the top horizontal ruletop horizontal rule to to select it, type select it, type 5555 in the W text box of in the W text box of the Property inspector, click the the Property inspector, click the Width list arrowWidth list arrow, then click , then click %%

• Select the Select the second horizontal rule second horizontal rule and set its width to and set its width to 100%100%


Testing and Modifying Testing and Modifying Web PagesWeb Pages• Save the file, then view the changes Save the file, then view the changes

in your browserin your browser• Click the Click the About Us linkAbout Us link on the on the

navigation bar to display the blank navigation bar to display the blank page you created earlier, click the page you created earlier, click the Back buttonBack button on the Address bar on the Address bar (Win) or the (Win) or the Back buttonBack button on the on the Navigation toolbar (Mac) to return to Navigation toolbar (Mac) to return to the home page, then click the the home page, then click the SpaSpa, , CafeCafe, and , and ActivitiesActivities linkslinks to test to test themthem


Testing and Modifying Testing and Modifying Web PagesWeb Pages• Click the Click the ClubClub ManagerManager link, then link, then

close the Untitled message window close the Untitled message window that appearsthat appears

• Close the browser, click Close the browser, click ViewView on the on the Application bar (Win) or Menu bar Application bar (Win) or Menu bar (Mac), then click (Mac), then click Head Content Head Content to to hide the head content icons, close hide the head content icons, close the file, then the file, then ExitExit (Win) or (Win) or QuitQuit (Mac) (Mac) the Dreamweaver programthe Dreamweaver program


Testing and Modifying Web Testing and Modifying Web PagesPages


Unit SummaryUnit Summary

• Plan the page layoutPlan the page layout

• Create the head contentCreate the head content

• Set Web page propertiesSet Web page properties

• Create and format textCreate and format text


Unit SummaryUnit Summary

• Add links to Web pagesAdd links to Web pages

• Use the History panelUse the History panel

• View HTML codeView HTML code

• Test and modify Web pagesTest and modify Web pages


adobe dreamweaver cs4 - illustrated developing a web page

Documents

head contentstart dreamweaver

head contentclick

head list arrow

head section code

page layoutcreate

page layoutapply

text color box

head contenttype beach