Adobe Dreamweaver CS3 Revealed

CHAPTER ONE: GETTING STARTED WITH DREAMWEAVER

Chapter 1 Lessons

1. Explore the Dreamweaver workspace

2. View a Web page and use Help

3. Plan and define a Web site

4. Add a folder and pages, and set the home page

5. Create and view a site map

Getting Started with Dreamweaver

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

Using Dreamweaver Tools

What does Dreamweaver CS3 offer?

Design tools that can create dynamic and interactive web page without writing HTML code

Organizational tools

Site management tools

Graphic site maps

Figure 1: Dreamweaver Workspace

Title bar

Menu bar

Insert bar

Document window

Tag selector

Status bar

Select tool Hand tool

Zoom tool

Document toolbar

Property inspector

Working with Dreamweaver Views

Design view

Code view

Code and Design view

Starting Dreamweaver: Windows

Click the Start button on the taskbar

Point to All Programs, click Adobe Web Premium CS3, then click Adobe Dreamweaver CS3

Figure 3: Starting Dreamweaver CS3

Adobe Dreamweaver CS3

Fig. 4: Starting Dreamweaver (Macintosh)

Click Finder in the Dock, then click Applications

Click the Adobe Dreamweaver CS3 folder, then double-click the Dreamweaver CS3 application

Changing Views

Click the Show Code View button

Click the Show Code and Design Views button

Click the Show Design View button

Figure 5: Code view for new document

Show Code View button

Show Code and Design View button Show Design

View button

Coding toolbar

Viewing Panels

Expand the Application panel

Click each panel tab

Collapse the Application panel

Study the CSS and Files panel groups

Collapse the CSS panel group

Opening a Web Page

Create new or open existing

Web site

Web page

Homepage

First Web page that appears when viewers go to a Web site

Sets the look and feel of the Web site and directs viewers to the rest of the pages in the Web site

Basic Web Page Elements

Text

Hyperlinks (links)

Graphics

Banners

Navigation bars

Image map

Flash button objects

Figure 7: Common Web Page Elements

Images

Text

Navigation structureincludes several sets of text links

Form to fill out for free shipping

Small form for signing

in and checking

out

Figure 8: Striped Umbrella web page elements

Banner

Flash buttonobjects thatlink to otherpages in theWeb site

Text links toother pagesin the Web site Text Image

Using Dreamweaver Help

Contents

Index

Search

Favorites

Web Site Development Process

FIGURE 10 Phases of a Web site development project

Planning a Web Site

Audience needs

Site goals

Gathering content

Budget

Schedule

Team

Updates

Creating Storyboards

FIGURE 11 The Striped Umbrella Web site storyboard

Testing the Pages

Browsers and browser versions

Screen sizes

Connection download time

Testing is a continuous process

Modifying the Pages

Changes are constantly needed

Test page after each change

Modifying and testing is an ongoing process

Publishing the Site

Transfer all the files to a Web server

Web server: a computer that is connected to the Internet with an IP address

A Web site must be published to the Web server before it can be viewed by others

Publishing the Site

IP: Internet Protocol

IP address

Example: 207.456.123.2

ISP: Internet Service Provider

Hosts Web site

FTP: File Transfer Protocol

Host, host directory, login, password

Publishing the Site

Create a root folder

Define the Web site

Set up Web server access

Fig. 12: Creating a Root Folder(Windows)

Root folder

FIGURE 12 Creating a root folder using Windows Explorer

Fig. 14: Site DefinitionStriped Umbrella Web Site

Links relative to options

Enable cache

Web site name

Local root folder

Fig. 15: Setting the Remote Access

Remote info category

Access list arrow

The Assets Folder

Stores all non-HTML (media) files:

Image files

Sound files

Video files

Set it as the default location to store the Web site images

You might want to create subfolders for each type of file

Setting the Home Page

Starting point for a site map

Tells Dreamweaver which page you have designated to be your home page

Usually index.html (.htm), or default.html (.htm)

Adding Pages to a Web Site

Once you add and name pages to your web site, you can add content to each page (text and graphics)

You have a choice of several default document types you can generate when you create new HTML pages

XHTML 1.0 Transitional is the default document type when you install Dreamweaver

The default document type is designated in the Preferences dialog box

Fig. 16: Striped Umbrella Assets Folder (Windows)

Root folder

New assets folder

Site list arrow8

Fig. 18: Site Definition with Assets Folder Set as Default Images Folder

Default images folder text box

Browse for file icon

Fig. 19: Index.html Placed in Striped_Umbrella Root Folder

Broken link icon

Path for file

Root folderIndex.html

Fig. 21: Adding New Pages to Striped Umbrella Web Site

New pages added to root

folder

su_banner.gif in the assets folder

Creating a Site Map

Keeps track of relationships between pages

Graphical representation of pages

Shows the folder structure

View visual clues to learn about details

Checked out pages

Viewing a Site Map

Map view in the Files panel

Show file names or page titles

Edit page titles in the site map

Uses a tree structure to visually represent the how pages are linked

Verifying Page Titles

Search engine keywords

Title in browser window

Bookmark in browser

Using Site Maps for Visitors

In the Web site as an informational tool PNG or JPEG

Print for report or meeting BMP or PICT

Create an XML site map, or a listing of the Web site links that can be made available to search engines

Site Map Layout option

Page titles option button

Path for home page

Fig. 24: Options for Site Map Layout

Fig. 25: Expanding the Site Map

Site list arrow

View list arrow

Expand to show local and

remote sites

Chapter 1 Tasks

Explore the Dreamweaver workspace

View a Web page and use Help

Plan and define a Web site

Add a Folder and Pages, and set the home page

Create and view a Site Map