Macromedia Dreamweaver 8

1
Macromedia Dreamweaver 8

• Unit C
• Developing a Web Page

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

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

4
Planning the Page Layout

• Use white space effectively
• Limit multimedia elements
• Keep it simple
• Use an intuitive navigation structure

5
Planning the Page Layout

• Apply a consistent theme using templates
• Use tables for page layout
• Be conscious of accessibility issues

6
Planning the Page Layout
7
Creating the Head Content

• Start Dreamweaver, click the Site list arrow on
  the Files panel, then click The Striped Umbrella,
  if it isnt 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
  isnt 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

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

9
Creating the Head Content
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

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

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

13
Setting Web Page Properties
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

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 33775
• [phone]
• 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

16
Creating and Formatting Text
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

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
  its not already selected, then click the Email
  Link button on the Insert bar
• Type Club Manager in the Text text box, press
  Tab, then type manager_at_thestripedumbrella.com
  in the E-Mail 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

19
Adding Links to Web Pages
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)

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

22
Using the History Panel
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

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 OREILLY HTML Reference in the Book
  list if necessary, click the Tag list arrow, then
  scroll to and click HR in the Tag text box

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

26
Viewing HTML Code
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 XML
• Dreamweaver can create files in HTML and XHTML

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

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

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

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