Macromedia Dreamweaver MX 2004 Design Professional Web Page DEVELOPING A

MacromediaDreamweaver MX 2004 Design Professional

Web PageDEVELOPING A

2Developing a Web Page Web Collection: Dreamweaver MX 2004 Chapter B

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


Understanding Page Layout

Use White Space Effectively

Limit Multimedia Elements

Keep it Simple

Use an Intuitive Navigation Structure

Apply a Consistent Theme

Developing a Web page


Creating 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


Creating Head Content

Title - browser title bar

Keywords - search

Description - search results


Head ContentTitle text box on Document Toolbar

Meta icon

HeadContentsection

Title icon


Create Head Content…<html>

<head><title>TripSmart</title><meta name=“keywords” content=“…”><meta name=“description” content=“…”>

</head>

<body….>…..</body></html>


Web Page Properties

Background color

Font colorLink colors (unvisited, visited, active)


Web-Safe Colors

216 colors

RGB

Hexidecimalvalues


Background color

BackgroundColorbox

HexadecimalNumber forwhite

Strikethroughbutton

White


Create, Import and Format Text

Adding text to a Dreamweaver page…

Type in DreamweaverCopy/Paste [Ctrl+C] and [Ctrl+V] (Windows)[Cmd+C] and [Cmd+V] (Macintosh)

Import Word Document


Web fonts

Browsers use visitor’s fonts

Font combinations

Serif and Sans Serif

t TGraphic text for funky fonts


Text Property Inspector

Selectedaddresstext

Font List

Size listarrow

Style buttons


Font Size

“3” - Default browser size

“1” through “7”, or

“-7” through “+7”


Web filenames

Do not use: Spaces Special characters Punctuation Capital letters


Importing Microsoft Office Documents

File Menu and select Import

Select file to be imported into Dreamweaver

Command Menu and select Clean Up Word HTML

Select version of Word


Add Links to Web Pages

Links


Link properties

•Link names - informative

• Mail to links

•Hyper text - topic

•Graphic

•Formatting properties - consistent

•Address or path - relative vs absolute


Broken Links

Typos

Pages move

Sites move

Sites expire


Add a Link

Selectedtext

Link textbox

Browse for File Icon


E-Mail Link(mailto:)

LinkInformation

Text for e-mailLink


Site Map with linksExpand/Collapsebutton

E-mail link

For pagesLinked to Home page


History Panel…functions

Undo

Redo

Replay

Slider

Red X indicatesAction cannotBe undone


History Panel…properties

50 steps

Preferences adds more

Be careful - increasing steps uses memory


Code InspectorCode View in a floating window

Line numberOf the HTMLCode

Options


Reference PanelOpen from Code Inspector or Reference Panel

HTML Tag

TagDescription


Date Object

Will change the data each time you save the document


Comment and Date HTML

Comment Tag


Modify and Test Pages…in Preview

Proofreading

Window size

Links


Test window sizeswithin Dreamweaver

Default Screen sizes


Dreamweaver Default Screen Sizes


Test Pages…in field

Monitors size and resolution

Platforms unix, mac, pc

Browsers explorer, netscape, aol


Under Construction

Don’t do it!

Only causes frustration to the end user


Chapter B TasksCreate head content

Set page properties

Import and Format text

Add links

Use History Panel

Use Code Inspector

Test Web pages