Explore the Dreamweaver WorkspaceView a Web page and use HelpPlan and Define a Web siteAdd a Folder and Pages, and set the Home pageCreate and View a Site Map

Unit Lessons

What is Dreamweaver?– Web design software for creating a

Web page or a complex Web site

What is a Web site?– A group of related Web pages that are

linked together and share a common interface and design

Getting Started with Dreamweaver

What does Dreamweaver offer?– Design tools that don’t require coding– Organizational tools– Site management tools– Graphic site maps

Using Dreamweaver Tools

Understanding Platform Interfaces

Use Photoshop in two interfaces:– Windows and Macintosh

Differences are slight; for example:– Use [Ctrl] and [Alt] keys in Windows– Use [command] and [option] keys in

Macintosh

Explore the Dreamweaver workspace

Title bar

Menu bar

Insert bar

Document toolbar

Standard toolbar

Document window

Status bar

Tag selector

Property inspector

Working with Dreamweaver Views

Design viewCode viewCode and Design view

Start Dreamweaver (Windows)

Click the Start button on the taskbarPoint to Programs,then click Macromedia Dreamweaver MX

Start Button

Start Dreamweaver (Macintosh)

Double-click the hard drive icon, then double-click the Macromedia Dreamweaver MX folderDouble-click the Macromedia Dreamweaver MX program icon Program

icon

Change views….

Click the Show Code View buttonClick the Show Code and Design Views buttonClick the Show Design View button

…and view panelsExpand the Code panelClick each panel tabCollapse the Code panelRepeat for Design, Application, Files and Answers panels

Opening a Web page

Web siteWeb pageHome page

Basic Web page elements TextHyperlinksGraphicsNavigation barsFlash objectsTablesForms

Find the Web element

Page Title

Graphics

Navigation bar

Getting Help ContentsIndexSearchFavorites

Web Site Creation Process

Planning a Web SiteAudience needs?Site goalsGathering contentBudgetScheduleTeamUpdates

Storyboard

Testing Web Pages Browsers and Browser versionsPlatformsScreen sizesSpeed on different connectionsLinksClient review

Publish a Web SiteIP: Internet Protocol– IP address– Example: 207.456.123.2

ISP: Internet Service Provider– Hosts web site– Evaluate

FTP: File Transfer Protocol– User, password, path

Create a root folder

Define a Web site

Root folder

Default Image folder

Categories

Set up Web server accessFTP

Server address

Path

Login

PasswordRemote

Info

Assets folderAdd the folder in the Site panelDesignate as the “default image folder” in the Site Definition dialog boxStores all non-HTML (media) files:– Image files– Sound files– Video files…

Home pageIndex.htm or Index.html (usually)Designate home page in Site Definition dialog boxStarting point for a site map

Property inspectorDisplay/edit properties of selected objectSource: Path/filename of selected objectSelection handles

Site MapGraphical representation of pagesPage link type/statusChecked out pagesSite Map commandorMap View command

Page TitleSearch engine keywordsTitle in browser windowBookmark in browser

Site Map usesIn a Web site for information (PNG or JPEG)

Print for report or meeting (BMP or PICT)

Site Map optionsSite Definition dialog box

– Home page– Layout– Icon labels

Expand/Collapse

Unit TasksExamine the workspaceView a Web pageUse Help Plan and Define a Web siteAdd Folders and Pages to a siteDefine a Home pageCreate and View a Site Map