Macromedia Dreamweaver 8 Revealed WEB PAGE DEVELOPING A

Macromedia Dreamweaver 8 Revealed

WEB PAGEDEVELOPING A

2Macromedia Dreamweaver 8 Revealed Chapter 2

Create head content and set page properties

Create, import, and format text

Add links to Web pages

Use the History panel and edit code

Modify and test Web pages

Chapter Lessons


Use white space effectively

Limit multimedia elements

Keep it simple

Use an intuitive navigation structure

Apply a consistent theme

Understanding Page Layout


Create Head ContentA Web page is composed of two sections:– Head

• Includes the page title and meta tags which are not visible to the Web browser

– Body• Contains text, graphics, and links


Create Head Content

Title– Browser title bar

Keywords– Search

Description– Search results


Web Page PropertiesBackground color

Font color

Link colors (unvisited, visited)– Default:

• Unvisited blue• Visited purple


Web-Safe Colors

Two palettes– Color Cubes– Continuous Tone

216 colors

FIGURE 1 Color picker showing color palettes


FIGURE 2 Viewing the head content

Title text box on Document toolbar

Title icon

Meta icon

Head content section


FIGURE 7 Head content displayed in Code view

Opening HTML tag

Head tag

Description tags

Description

Keyword tags


FIGURE 8 Page Properties dialog box

Background color box

Strikethrough button

Hexadecimal number for

white

White


Create, Import and Format Text

To add text to a Dreamweaver page– Type in Dreamweaver

– Copy/paste [Ctrl][C] and [Ctrl][V] (Windows) [C] and [V] (Macintosh)

– Import Word document


Web Fonts

Browsers use visitor’s fonts

Font combinations

Serif and sans-serif

k K k KGraphic text for unusual fonts


FIGURE 10 Formatting the address on The Striped Umbrella home page

Selected address text

Font list arrow

Size list arrow

Italic button


Changing Font Sizes

Default base font: 3

Select font in Property inspector– Choose between 1 and 7 – Change font size relative to the default

base size


Formatting ParagraphsFormat– As text– As different sizes of headings

Headings– Heading 1 is the largest– Heading 6 is the smallest– <h1>This is a big heading</h1>


Using HTML Tags or Using CSS

Cascading Style Sheets (CSS)– Standard practice to handle formatting

and placement of objects

More on this later…

Disable this preference temporarily


Web FilenamesDo not use– Spaces– Special characters– Punctuation– Uppercase letters


Importing Microsoft Office Documents

File Import Word Document

Select file to be imported into Dreamweaver

Commands Clean Up Word HTML


FIGURE 12 Clean Up Word HTML dialog box

Clean up HTML from list arrow

Settings


Add Links to Web Pages

FIGURE 14 Coca-Cola Web site

Links


Link PropertiesLink names should be informativePoint of contact – mailto: linkTwo types– Hypertext– Graphic

Formatting properties should be consistent Address or path: relative or absolute


Broken Links

Typos

Pages move

Sites move

Sites expire


Navigation Bars

Contain links to the main pages

Usually located at top of side of page

Backbone of the site’s navigation structure


FIGURE 15 Viewing the navigation bar

Navigation bar


FIGURE 17 Selecting the Home link Selected text

Browse for file icon

Link text box


E-mail Link (mailto:)

FIGURE 20 Email Link dialog box

Link information

Text for e-mail link on the page


FIGURE 22 The Striped Umbrella site map

Collapse to show onlylocal or remote site button

E-mail linkFour pages linked

to home page


Use the History panel

History panel properties:– Each task is called a step– 50 steps– Preferences adds more– Be careful…

• Increasing steps uses memory


History Panel Functions

Undo

Redo

Replay

FIGURE 23 The History panel

Slider

Click in the gray barnext to a step to undo

to that step


FIGURE 28 Viewing the View Options menu in the Code Inspector

View options list arrow

Code for horizontal rule

View options menu


FIGURE 30 Viewing the Reference panel

Information on HR tag


FIGURE 31 Insert Date dialog box

Update automaticallyon save check box

Date formats


FIGURE 32 Viewing the date object in Code view

Code for date object


Modify and Test Web Pages

Proofread

Choose window size

Verify links


FIGURE 33 Window screen sizes


Default Window Screen Sizes


Testing Pages

Monitors– Size and resolution

Platforms– UNIX, Mac, PC

Browsers– Explorer, Netscape, Firefox


“Under Construction”

Don’t do it!

Only causes frustration to the end user


Chapter 2 TasksCreate head content and set page properties

Create, import, and format text

Add links to Web pages

Use the History panel and edit code

Modify and test Web pages