Adobe Dreamweaver CS3 Revealed

1
Adobe Dreamweaver CS3 Revealed

• CHAPTER ONE GETTING STARTED WITH DREAMWEAVER

2
Chapter 1 Lessons

• 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

3
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

4
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

5
Figure 1 Dreamweaver Workspace
Title bar
Hand tool
Select tool
Menu bar
Insert bar
Document toolbar
Zoom tool
Document window
Tag selector
Property inspector
Status bar
6
Working with Dreamweaver Views

• Design view
• Code view
• Code and Design view

7
Starting Dreamweaver Windows

• Click the Start button on the taskbar
• Point to All Programs, click Adobe Web Premium
  CS3, then click Adobe Dreamweaver CS3

8
Figure 3 Starting Dreamweaver CS3
Adobe Dreamweaver CS3
9
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

10
Changing Views

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

11
Figure 5 Code view for new document
Show Code View button
Show Code and Design View button
Show Design View button
Coding toolbar
12
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

13
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

14
Basic Web Page Elements

• Text
• Hyperlinks (links)
• Graphics
• Banners
• Navigation bars
• Image map
• Flash button objects

15
Figure 7 Common Web Page Elements
Small form for signing in and checking out
Images
Navigation structure includes several sets of
text links
Text
Form to fill out for free shipping
16
Figure 8 Striped Umbrella web page elements
Banner
Flash button objects that link to other pages in
the Web site
Text links to other pages in the Web site
Text
Image
17
Using Dreamweaver Help

• Contents
• Index
• Search
• Favorites

18
Web Site Development Process
FIGURE 10 Phases of a Web site development
project
19
Planning a Web Site

• Audience needs
• Site goals
• Gathering content
• Budget
• Schedule
• Team
• Updates

20
Creating Storyboards
FIGURE 11 The Striped Umbrella Web site
storyboard
21
Testing the Pages

• Browsers and browser versions
• Screen sizes
• Connection download time
• Testing is a continuous process

22
Modifying the Pages

• Changes are constantly needed
• Test page after each change
• Modifying and testing is an ongoing process

23
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

24
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

25
Publishing the Site

• Create a root folder
• Define the Web site
• Set up Web server access

26
Fig. 12 Creating a Root Folder(Windows)
Root folder
FIGURE 12 Creating a root folder using Windows
Explorer
27
Fig. 14 Site DefinitionStriped Umbrella Web Site
Web site name
Links relative to options
Local root folder
Enable cache
28
Fig. 15 Setting the Remote Access
Remote info category
Access list arrow
29
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

30
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)

31
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

32
Fig. 16 Striped Umbrella Assets Folder (Windows)
Site list arrow8
New assets folder
Root folder
33
Fig. 18 Site Definition with Assets Folder Set
as Default Images Folder
Default images folder text box
Browse for file icon
34
Fig. 19 Index.html Placed in Striped_Umbrella
Root Folder
Path for file
Broken link icon
Root folder
Index.html
35
Fig. 21 Adding New Pages to Striped Umbrella Web
Site
su_banner.gif in the assets folder
New pages added to root folder
36
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

37
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

38
Verifying Page Titles

• Search engine keywords
• Title in browser window
• Bookmark in browser

39
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

40
Fig. 24 Options for Site Map Layout
Path for home page
Site Map Layout option
Page titles option button
41
Fig. 25 Expanding the Site Map
Site list arrow
View list arrow
Expand to show local and remote sites
42
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