macromedia dreamweaver 8-- illustrated introductory 1 macromedia dreamweaver 8 unit c developing a...

Macromedia Dreamweaver 8--Illustrated Introductory

1

Macromedia Dreamweaver 8 Macromedia Dreamweaver 8

Unit CUnit C

Developing a Web PageDeveloping a Web Page

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

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


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

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 multimedia elementsLimit multimedia elements

Keep it simpleKeep it simple

Use an intuitive navigation Use an intuitive navigation structurestructure



Apply a consistent theme using Apply a consistent theme using templatestemplates

Use tables for page layoutUse tables for page layout

Be conscious of accessibility Be conscious of accessibility issuesissues


Creating the Head ContentCreating the Head Content

Start Dreamweaver, click the Start Dreamweaver, click the Site list arrowSite list arrow on the on the Files panel, then click 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 panel, make sure in the Files panel, make sure the Document window is maximized, click the Document window is maximized, click ViewView on the on the menu bar, then click menu bar, then click Head ContentHead Content, if it isn’t already , if it isn’t already checkedchecked

Click the Click the Title iconTitle icon in the head section, place the in the head section, place the insertion point after the current title in the Title text box insertion point after the current title in the Title text box on the Property inspector, press the spacebar, type on the Property inspector, press the spacebar, type beach resort and spa, Ft. Eugene, Floridabeach resort and spa, Ft. Eugene, Florida, then , then press press EnterEnter (Win) or (Win) or returnreturn (Mac) (Mac)

Click the Click the Insert bar list arrowInsert bar list arrow, click , click HTMLHTML, click the , click the Head list arrowHead list arrow, then click , then click KeywordsKeywords



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

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

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


Clues to UseClues to Use

Checking your screen against Checking your screen against book figuresbook figures Hiding the Standard toolbar will allow Hiding the Standard toolbar will allow

you to show as much of the Document you to show as much of the Document window as possiblewindow as possible

You should learn to open, close, You should learn to open, close, collapse, or expand the various panels, collapse, or expand the various panels, toolbars, and inspectorstoolbars, and inspectors


Setting Web Page PropertiesSetting Web Page Properties

Click Click ModifyModify on the menu bar, then click on the menu bar, then click Page PropertiesPage Properties

Click the Click the Background color boxBackground color box

Click the Click the blue color swatchblue color swatch, #66CCFF, , #66CCFF, the next to the last color in the sixth rowthe next 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 Links color boxLinks color box, then use , then use to select a shade of red for the color to select a shade of red for the color of the links on the home pageof the links on the home page

Click the Click the Links color boxLinks color box again, again, then click the then click the Strikethrough buttonStrikethrough button at the top of the color pickerat the top of the color picker

Click Click OKOK to close the Page to close the Page Properties dialog boxProperties dialog box

Save your workSave your work


Creating and Formatting TextCreating and Formatting Text

Click Click EditEdit (Win) or (Win) or DreamweaverDreamweaver (Mac) on the menu bar, (Mac) on the menu bar, click click PreferencesPreferences, click the , click the GeneralGeneral category if necessary; category if necessary; under editing options, uncheck the option under editing options, uncheck the option Use CSS instead Use CSS instead of HTML tagsof HTML tags, then click , then click OKOK

Position the insertion point to the left of A in About Us, then Position the insertion point to the left of A in About Us, then drag to select drag to select About Us – Spa – CafeAbout Us – Spa – Cafe

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

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

Click the Click the Format list arrowFormat list arrow on the Property inspector,click on the Property inspector,click Heading 4Heading 4, click the , click the Font list arrowFont list arrow, click , click Arial, Helvetica, Arial, Helvetica, sans-serifsans-serif, click the , click the Size list arrowSize list arrow, then click , then click NoneNone



Position the insertion point after the period following Position the insertion point after the period following …want to go …want to go homehome, as shown in Figure C-12, press , as shown in Figure C-12, 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 (Mac) to create a line break, then enter the following information, using a create a line break, then enter the following information, using a line break at the end of each line:line break at the end of each line:

25 Beachside Drive25 Beachside Drive

Ft. 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 Striped UmbrellaThe Striped Umbrella, click and , click and drag until the entire drag until the entire address and telephone numberaddress and telephone number are are selected, click the selected, click the Italic buttonItalic button on the Property inspector to on the Property inspector to italicize the text, click the italicize the text, click the Font list arrowFont list arrow, click , click Arial, Helvetica, Arial, Helvetica, sans-serifsans-serif, click the , click the Size list arrowSize list arrow, click , click Size 2Size 2, then click , then click anywhere to deselect the textanywhere to deselect the text



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 icon next to the Link icon next to the Link text box on the Property inspector, then navigate text box on the Property inspector, then navigate to the striped_umbrella root folder if necessaryto the striped_umbrella root folder if necessary

Click Click index.htmlindex.html, as shown in Figure C-15, verify , as shown in Figure C-15, verify that that DocumentDocument is selected next to Relative to, is selected next to Relative to, then click then click OKOK (Win) or (Win) or ChooseChoose (Mac) (Mac)

Click anywhere on the home page to deselect Click anywhere on the home page to deselect HomeHome

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



Position the insertion point immediately after the last digit in Position the insertion point immediately after the last digit in the telephone number, press and hold 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 bar list arrowInsert bar list arrow, click , click CommonCommon if it’s not if it’s not already selected, then click the already selected, then click the Email Link buttonEmail Link button on the on the Insert barInsert bar

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

Click the Click the View list arrowView list arrow in the Files panel, click in the Files panel, click Map viewMap view, , click the click the Expand to show local and remote sites buttonExpand to show local and remote sites button on the Files panel toolbar, click the on the Files panel toolbar, click the Site list arrowSite list arrow, then , then click click Map and FilesMap and Files

Click the Click the Collapse to show only local or remote site Collapse to show only local or remote site buttonbutton, click the , click the View list arrowView list arrow, then click , then click Local viewLocal view


Using the History PanelUsing the History Panel

Click Click WindowWindow on the menu bar, then click on the menu bar, then click HistoryHistory to open the History panel to open the History panel

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

Position the insertion point to the left of the words Position the insertion point to the left of the words The Striped Umbrella in the first address line, click The Striped Umbrella in the first address line, click the the Insert bar list arrowInsert bar list arrow, click , click HTMLHTML, then click , then click the the Horizontal Rule buttonHorizontal Rule button on the Insert bar on the Insert bar

Click the Click the list arrowlist arrow next to pixels on the Property next to pixels on the Property inspector, click inspector, click %% if necessary, type if necessary, type 9090 in the W in the W text box, then press text box, then press [Enter][Enter] (Win) or (Win) or [return][return] (Mac)(Mac)



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

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

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




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

History panel is a quick way to undo or History panel is a quick way to undo or redo stepsredo 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


Viewing HTML CodeViewing HTML Code

Click the Click the collapse arrowcollapse arrow on the History panel to on the History panel to collapse it, then click the top horizontal rule to collapse it, then click the top horizontal rule to select itselect 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 Document on the Document toolbar, then click toolbar, then click Word WrapWord Wrap, if necessary, to , if necessary, to select itselect it

Click again and check any options that are Click again and check any options that are uncheckedunchecked

Click Click WindowWindow on the menu bar, click on the menu bar, click ReferenceReference, , choose the choose the O’REILLY HTML ReferenceO’REILLY HTML Reference in the in the Book list if necessary, click the Book list if necessary, click the Tag list arrowTag list arrow, , then scroll to and click then scroll to and click HRHR in the Tag text box in the Tag text box



Click the Click the collapse arrowcollapse arrow to collapse the Results to collapse the Results panel grouppanel group

Highlight Highlight January 1, 2008January 1, 2008 at the bottom of the at the bottom of the Code window, press Code window, press [Delete][Delete], click the , click the Insert Bar Insert Bar list arrowlist arrow, click , click CommonCommon, click the , click the Date buttonDate button on the Insert bar, click on the Insert bar, click March 7, 1974March 7, 1974, if , if necessary, in the Date Format text box, click the necessary, in the Date Format text box, click the Update automatically on save check boxUpdate automatically on save check box to to select it, then click select it, then click OKOK

Click the Click the Show Design View buttonShow Design View button to return to to return to Design ViewDesign View




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 Web PagesTesting and Modifying Web Pages

Restore down your Document window, click the Restore down your Document window, click the Window Size list arrowWindow Size list arrow on the Status bar, click on the Status bar, click 760 × 760 × 420 (800 × 600, Maximized)420 (800 × 600, Maximized), then view the page in , then view the page in the Document windowthe Document window

Click the Click the Preview/Debug in Browser buttonPreview/Debug in Browser button on the on the Document toolbar, then click Document toolbar, then click Preview in [your default Preview in [your default browser]browser]

Close your browser, highlight the period after “Close your browser, highlight the period after “...go ...go homehome.” then type ! (an exclamation point).” then type ! (an exclamation point)

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

Repeat the previous step to resize the second Repeat the previous step to resize the second horizontal rule to horizontal rule to 100%100%



Save the file, then view the changes in your Save the file, then view the changes in your browserbrowser

Click the Click the About Us linkAbout Us link on the navigation bar to on the navigation bar to display the blank page you created earlier, click display the blank page you created earlier, click the the Back buttonBack button on the Standard toolbar (Win) or on the Standard toolbar (Win) or the the Back buttonBack button on the Navigation toolbar (Mac) on the Navigation toolbar (Mac) to return to the home page, then click the to return to the home page, then click the SpaSpa, , CafeCafe, and , and ActivitiesActivities linkslinks to test them to test them

Click the Click the ClubClub ManagerManager link, then close the link, then close the Untitled message window that appearsUntitled message window that appears

Close the browser, close the file, then Close the browser, close the file, then ExitExit (Win) (Win) or or QuitQuit (Mac) the Dreamweaver program (Mac) the Dreamweaver program


U n i t S u m m a r yU n i t S u m m a r y

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


U n i t S u m m a r yU n i t S u m m a r y

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

macromedia dreamweaver 8-- illustrated introductory 1 macromedia dreamweaver 8 unit c developing a...

Documents

head contentstart dreamweaver

keywordsmacromedia dreamweaver

workmacromedia dreamweaver

applymacromedia dreamweaver

web pagemacromedia dreamweaver

links color box

page layoutcreate

page layoutapply