chapter lessons
DESCRIPTION
OVERVIEW. Chapter 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. INTRODUCTION. Getting Started with Dreamweaver. What is Dreamweaver? - PowerPoint PPT PresentationTRANSCRIPT
Macromedia Dreamweaver 8 Revealed
DREAMWEAVER GETTING STARTED WITH
2Chapter 1
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
Chapter Lessons
3Chapter 1
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
4Chapter 1
What does Dreamweaver offer?– Design tools that can create dynamic
and interactive web page without writing HTML code
– Organizational tools– Site management tools– Graphic site maps
Using Dreamweaver Tools
5Chapter 1
Title bar
Menu bar
Insert bar
Document window
Status bar
Property inspector
Select tool Hand tool
Zoom tool
FIGURE 1 Dreamweaver 8 workspace
6Chapter 1
Working with Dreamweaver Views
Design view
Code view
Code and Design view
7Chapter 1
Starting Dreamweaver (Windows)
Click the Start button on the taskbar
Click (All) Programs Macromedia Macromedia Dreamweaver 8
8Chapter 1
Dreamweaver 8
FIGURE 3 Starting Dreamweaver 8 (Windows)
9Chapter 1
Starting Dreamweaver (Macintosh)
Click Finder in the Dock, then click Applications
Click the Macromedia Dreamweaver 8 folder, then double-click the Dreamweaver 8 application
Dreamweaver 8
FIGURE 4 Starting Dreamweaver 8 (Macintosh)
10Chapter 1
Changing Views
Click the Show Code View button
Click the Show Code and Design Views button
Click the Show Design View button
11Chapter 1
Show Code View button
Show Code and Design View button
Show Design View button
Coding toolbar
FIGURE 5 Code view for new document
12Chapter 1
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
13Chapter 1
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
14Chapter 1
Basic Web Page Elements
Text
Hyperlinks (links)
Graphics– Banners
Navigation bars– Image map
Flash button objects
15Chapter 1
Graphic
Form
Navigation bar
FIGURE 7 Common Web page elements
16Chapter 1
Banner
Table
Flash button object
Text links
Text Graphic
FIGURE 8 Striped Umbrella Web page elements
17Chapter 1
Getting Help
Contents
Index
Search
Favorites
Keywords …
Topics found
… in results
FIGURE 9 Dreamweaver 8 Help
window
18Chapter 1
Web Site Creation Process
FIGURE 10 Phases of a Web site development project
19Chapter 1
Planning a Web Site
Audience needs
Site goals
Gathering content
Budget
Schedule
Team
Updates
20Chapter 1
Creating Storyboards
FIGURE 11 The Striped Umbrella Web site storyboard
21Chapter 1
Testing the Pages
Browsers and browser versions
Screen sizes
Speed on different connections
Testing is a continuous process
22Chapter 1
Modifying the Pages
Changes are constantly needed
Test page after each change
Modifying and testing is an ongoing process
23Chapter 1
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
24Chapter 1
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
25Chapter 1
Publishing the Site
Create a root folder
Define the Web site
Set up Web server access
26Chapter 1
Root folder
FIGURE 12 Creating a root folder using Windows Explorer
27Chapter 1
FIGURE 13 Creating a root folder using a Macintosh
28Chapter 1
Links relative to options
Enable cache
Refresh local file list
automatically
Web site name
Local root folder
FIGURE 14 Site definition for The Striped Umbrella dialog box
29Chapter 1
Remote info category
Access list arrow
FIGURE 15 Setting the remote access for The Striped Umbrella Web site
30Chapter 1
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
31Chapter 1
Setting the Home Page
Usually index.html (.htm), or default.html (.htm)Starting point for a site mapTell Dreamweaver which page you have designated to be your home pageAdd folders to the Web site– Set the default images folder
32Chapter 1
FIGURES 16 and 17 The Striped Umbrella site in Files panel with assets folder created Windows (left) and Macintosh (right)
33Chapter 1
Default images folder
Browse for file icon
FIGURE 18 Site definition for The Striped Umbrella Web site with assets folder set as the default images folder
34Chapter 1
Index.html
Page title and path
FIGURE 19 index.html placed in the striped_umbrella root folder
35Chapter 1
The Site Map
Graphical representation of pages
Displays folder structure
Page link type/status
Checked out pages
Map view in the Files panel
Tree structure
36Chapter 1
Verifying Page Titles
Search engine keywords
Title in browser window
Bookmark in browser
37Chapter 1
Uses of a Site Map
In the Web site as an informational tool – PNG or JPEG
Print for report or meeting– BMP or PICT
38Chapter 1
Site Map Layout category
Page titles option button
Path for home page
FIGURE 24 Options for the site map layout
39Chapter 1
Site list arrow
View list arrow
Click to hide all panels
FIGURE 25 Expanding the site map
40Chapter 1
Chapter 1 TasksExplore 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