Download DW Unit C

Macromedia Dreamweaver 8
Unit C
Developing a Web Page
Macromedia Dreamweaver 8-Illustrated Introductory
1
Unit Objectives
Plan the page layout
Create the head content
Set Web page properties
Create and format text
Macromedia Dreamweaver 8--Illustrated Introductory
2
Unit Objectives
Add links to Web pages
Use the History panel
View HTML code
Test and modify Web pages
Macromedia Dreamweaver 8--Illustrated Introductory
3
Planning the Page Layout
Use white space effectively
Limit multimedia elements
Keep it simple
Use an intuitive navigation
structure
Macromedia Dreamweaver 8--Illustrated Introductory
4
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
5
Planning the Page Layout
Macromedia Dreamweaver 8--Illustrated Introductory
6
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
7
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
8
Creating the Head Content
Macromedia Dreamweaver 8--Illustrated Introductory
9
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
10
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
11
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
12
Setting Web Page Properties
Macromedia Dreamweaver 8--Illustrated Introductory
13
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
14
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
(555) 594-9458
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
15
Creating and Formatting Text
Macromedia Dreamweaver 8--Illustrated Introductory
16
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
17
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 Email Link button on the
Insert bar
Type Club Manager in the Text text box, press [Tab], then
type [email protected] 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
Macromedia Dreamweaver 8--Illustrated Introductory
18
Adding Links to Web Pages
Macromedia Dreamweaver 8--Illustrated Introductory
19
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
20
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
21
Using the History Panel
Macromedia Dreamweaver 8--Illustrated Introductory
22
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
23
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
24
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
25
Viewing HTML Code
Macromedia Dreamweaver 8--Illustrated Introductory
26
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
Macromedia Dreamweaver 8--Illustrated Introductory
27
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
28
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
29
Testing and Modifying Web Pages
Macromedia Dreamweaver 8--Illustrated Introductory
30
Unit Summary
Plan the page layout
Create the head content
Set Web page properties
Create and format text
Macromedia Dreamweaver 8--Illustrated Introductory
31
Unit Summary
Add links to Web pages
Use the History panel
View HTML code
Test and modify Web pages
Macromedia Dreamweaver 8--Illustrated Introductory
32