Macromedia Dreamweaver 8-- Illustrated Introductory 1 Macromedia Dreamweaver 8 Unit C Developing a Web Page

Macromedia Dreamweaver 8--Illustrated Introductory 2 U n i t O b j e c t i v e s Plan the page layout Create the head content Set Web page properties Create and format text

Macromedia Dreamweaver 8--Illustrated Introductory 3 U n i t O b j e c t i v e s Add links to Web pages Use the History panel View HTML code Test and modify Web pages

Macromedia Dreamweaver 8--Illustrated Introductory 4 Planning the Page Layout Use white space effectively Limit multimedia elements Keep it simple Use an intuitive navigation structure

Macromedia Dreamweaver 8--Illustrated Introductory 5 Planning the Page Layout Apply a consistent theme using templates Use tables for page layout Be conscious of accessibility issues

Macromedia Dreamweaver 8--Illustrated Introductory 6 Planning the Page Layout

Macromedia Dreamweaver 8--Illustrated Introductory 7 Creating the Head Content Start Dreamweaver, click the Site list arrow on the Files panel, then click The Striped Umbrella, if it isn’t already selected Double-click index.html in the Files panel, make sure the Document window is maximized, click View on the menu bar, then click Head Content, if it isn’t already checked Click the Title icon in the head section, place the insertion point after the current title in the Title text box on the Property inspector, press the spacebar, type beach resort and spa, Ft. Eugene, Florida, then press Enter (Win) or return (Mac) Click the Insert bar list arrow, click HTML, click the Head list arrow, then click Keywords

Macromedia Dreamweaver 8--Illustrated Introductory 8 Creating the Head Content Type beach resort, spa, Ft. Eugene, Florida, Gulf of Mexico, fishing, dolphin cruises (including the commas) in the Keywords text box, then click OK Click the Head list arrow on the Insert bar, click Description, then type The Striped Umbrella is a full-service resort and spa just steps from the Gulf of Mexico in Ft. Eugene, Florida., then click OK Click the Show Code View button on the Document toolbar, click anywhere in the code, view the head section code, click the Show Design View button, then save your work

Macromedia Dreamweaver 8--Illustrated Introductory 9 Creating the Head Content

Macromedia Dreamweaver 8--Illustrated Introductory 10 Clues to Use Checking your screen against book figures  Hiding the Standard toolbar will allow you to show as much of the Document window as possible  You should learn to open, close, collapse, or expand the various panels, toolbars, and inspectors

Macromedia Dreamweaver 8--Illustrated Introductory 11 Setting Web Page Properties Click Modify on the menu bar, then click Page Properties Click the Background color box Click the blue color swatch, #66CCFF, the next to the last color in the sixth row Click Apply in the Page Properties dialog box Click the Background color box, click the white color swatch, the rightmost color in the bottom row, then click Apply

Macromedia Dreamweaver 8--Illustrated Introductory 12 Setting Web Page Properties Click the Links color box, then use to select a shade of red for the color of the links on the home page Click the Links color box again, then click the Strikethrough button at the top of the color picker Click OK to close the Page Properties dialog box Save your work

Macromedia Dreamweaver 8--Illustrated Introductory 13 Setting Web Page Properties

Macromedia Dreamweaver 8--Illustrated Introductory 14 Creating and Formatting Text Click Edit (Win) or Dreamweaver (Mac) on the menu bar, click Preferences, click the General category if necessary; under editing options, uncheck the option Use CSS instead of HTML tags, then click OK Position the insertion point to the left of A in About Us, then drag to select About Us – Spa – Cafe Type Home - About Us - Spa - Cafe - Activities, using spaces on either side of the hyphens Position the insertion point to the left of H in Home, then drag to select Home - About Us - Spa - Cafe - Activities Click the Format list arrow on the Property inspector,click Heading 4, click the Font list arrow, click Arial, Helvetica, sans-serif, click the Size list arrow, then click None

Macromedia Dreamweaver 8--Illustrated Introductory 15 Creating and Formatting Text Position the insertion point after the period following …want to go home, as shown in Figure C-12, press [Enter] (Win) or [return] (Mac), then type The Striped Umbrella Press and hold [Shift], press [Enter] (Win) or [return] (Mac) to create a line break, then enter the following information, using a line break at the end of each line: 25 Beachside Drive Ft. Eugene, Florida (555) Position the pointer to the left of The Striped Umbrella, click and drag until the entire address and telephone number are selected, click the Italic button on the Property inspector to italicize the text, click the Font list arrow, click Arial, Helvetica, sans-serif, click the Size list arrow, click Size 2, then click anywhere to deselect the text Save your work

Macromedia Dreamweaver 8--Illustrated Introductory 16 Creating and Formatting Text

Macromedia Dreamweaver 8--Illustrated Introductory 17 Adding Links to Web Pages Double-click Home to select it Click the Browse for File icon next to the Link text box on the Property inspector, then navigate to the striped_umbrella root folder if necessary Click index.html, as shown in Figure C-15, verify that Document is selected next to Relative to, then click OK (Win) or Choose (Mac) Click anywhere on the home page to deselect Home Repeat the first four steps to create links for About Us, Spa, Cafe, and Activities, using about_us.html, spa.html, cafe.html, and activities.html as the corresponding files, then click anywhere on the page

Macromedia Dreamweaver 8--Illustrated Introductory 18 Adding Links to Web Pages Position the insertion point immediately after the last digit in the telephone number, press and hold [Shift], then press [Enter] (Win) or [return] (Mac) Click the Insert bar list arrow, click Common if it’s not already selected, then click the Link button on the Insert bar Type Club Manager in the Text text box, press [Tab], then type in the text box, click OK, then italicize the Club Manager link text if necessary Click the View list arrow in the Files panel, click Map view, click the Expand to show local and remote sites button on the Files panel toolbar, click the Site list arrow, then click Map and Files Click the Collapse to show only local or remote site button, click the View list arrow, then click Local view

Macromedia Dreamweaver 8--Illustrated Introductory 19 Adding Links to Web Pages

Macromedia Dreamweaver 8--Illustrated Introductory 20 Using the History Panel Click Window on the menu bar, then click History to open the History panel Click the Options menu button on the History panel title bar, click Clear History, then click Yes in the warning box Position the insertion point to the left of the words The Striped Umbrella in the first address line, click the Insert bar list arrow, click HTML, then click the Horizontal Rule button on the Insert bar Click the list arrow next to pixels on the Property inspector, click % if necessary, type 90 in the W text box, then press [Enter] (Win) or [return] (Mac)

Macromedia Dreamweaver 8--Illustrated Introductory 21 Using the History Panel Click the Align list arrow on the Property inspector, then click Center Using the Property inspector, change the width of the rule to 80% and the alignment to Left Drag the slider on the History panel up until it is pointing to Set Alignment: center, then release the mouse button Save your work

Macromedia Dreamweaver 8--Illustrated Introductory 22 Using the History Panel

Macromedia Dreamweaver 8--Illustrated Introductory 23 Clues to Use The History panel  Dragging the slider up and down in the History panel is a quick way to undo or redo steps  Memorizes certain steps  Some Dreamweaver features cannot be recorded in the History panel

Macromedia Dreamweaver 8--Illustrated Introductory 24 Viewing HTML Code Click the collapse arrow on the History panel to collapse it, then click the top horizontal rule to select it Click the Show Code View button on the Document toolbar Click the View Options button on the Document toolbar, then click Word Wrap, if necessary, to select it Click again and check any options that are unchecked Click Window on the menu bar, click Reference, choose the O’REILLY HTML Reference in the Book list if necessary, click the Tag list arrow, then scroll to and click HR in the Tag text box

Macromedia Dreamweaver 8--Illustrated Introductory 25 Viewing HTML Code Click the collapse arrow to collapse the Results panel group Highlight January 1, 2008 at the bottom of the Code window, press [Delete], click the Insert Bar list arrow, click Common, click the Date button on the Insert bar, click March 7, 1974, if necessary, in the Date Format text box, click the Update automatically on save check box to select it, then click OK Click the Show Design View button to return to Design View Save your work

Macromedia Dreamweaver 8--Illustrated Introductory 26 Viewing HTML Code

Macromedia Dreamweaver 8--Illustrated Introductory 27 Clues to Use Understanding XHTML vs. HTML  You can save Dreamweaver files in many different file formats  XHTML (eXtensible HyperText Markup Language) is the current standard language used to create Web pages Based on XMLBased on XML  Dreamweaver can create files in HTML and XHTML

Macromedia Dreamweaver 8--Illustrated Introductory 28 Testing and Modifying Web Pages Restore down your Document window, click the Window Size list arrow on the Status bar, click 760 × 420 (800 × 600, Maximized), then view the page in the Document window Click the Preview/Debug in Browser button on the Document toolbar, then click Preview in [your default browser] Close your browser, highlight the period after “...go home.” then type ! (an exclamation point) Click the top horizontal rule to select it, type 55 in the W text box of the Property inspector, click the Width list arrow, then click % Repeat the previous step to resize the second horizontal rule to 100%

Macromedia Dreamweaver 8--Illustrated Introductory 29 Testing and Modifying Web Pages Save the file, then view the changes in your browser Click the About Us link on the navigation bar to display the blank page you created earlier, click the Back button on the Standard toolbar (Win) or the Back button on the Navigation toolbar (Mac) to return to the home page, then click the Spa, Cafe, and Activities links to test them Click the Club Manager link, then close the Untitled message window that appears Close the browser, close the file, then Exit (Win) or Quit (Mac) the Dreamweaver program

Macromedia Dreamweaver 8--Illustrated Introductory 30 Testing and Modifying Web Pages

Macromedia Dreamweaver 8--Illustrated Introductory 31 U n i t S u m m a r y Plan the page layout Create the head content Set Web page properties Create and format text

Macromedia Dreamweaver 8--Illustrated Introductory 32 U n i t S u m m a r y Add links to Web pages Use the History panel View HTML code Test and modify Web pages