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
![Page 1: Chapter Lessons](https://reader030.vdocument.in/reader030/viewer/2022020219/56812b82550346895d8f9fc3/html5/thumbnails/1.jpg)
Macromedia Dreamweaver 8 Revealed
DREAMWEAVER GETTING STARTED WITH
![Page 2: Chapter Lessons](https://reader030.vdocument.in/reader030/viewer/2022020219/56812b82550346895d8f9fc3/html5/thumbnails/2.jpg)
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
![Page 3: Chapter Lessons](https://reader030.vdocument.in/reader030/viewer/2022020219/56812b82550346895d8f9fc3/html5/thumbnails/3.jpg)
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
![Page 4: Chapter Lessons](https://reader030.vdocument.in/reader030/viewer/2022020219/56812b82550346895d8f9fc3/html5/thumbnails/4.jpg)
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
![Page 5: Chapter Lessons](https://reader030.vdocument.in/reader030/viewer/2022020219/56812b82550346895d8f9fc3/html5/thumbnails/5.jpg)
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
![Page 6: Chapter Lessons](https://reader030.vdocument.in/reader030/viewer/2022020219/56812b82550346895d8f9fc3/html5/thumbnails/6.jpg)
6Chapter 1
Working with Dreamweaver Views
Design view
Code view
Code and Design view
![Page 7: Chapter Lessons](https://reader030.vdocument.in/reader030/viewer/2022020219/56812b82550346895d8f9fc3/html5/thumbnails/7.jpg)
7Chapter 1
Starting Dreamweaver (Windows)
Click the Start button on the taskbar
Click (All) Programs Macromedia Macromedia Dreamweaver 8
![Page 8: Chapter Lessons](https://reader030.vdocument.in/reader030/viewer/2022020219/56812b82550346895d8f9fc3/html5/thumbnails/8.jpg)
8Chapter 1
Dreamweaver 8
FIGURE 3 Starting Dreamweaver 8 (Windows)
![Page 9: Chapter Lessons](https://reader030.vdocument.in/reader030/viewer/2022020219/56812b82550346895d8f9fc3/html5/thumbnails/9.jpg)
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)
![Page 10: Chapter Lessons](https://reader030.vdocument.in/reader030/viewer/2022020219/56812b82550346895d8f9fc3/html5/thumbnails/10.jpg)
10Chapter 1
Changing Views
Click the Show Code View button
Click the Show Code and Design Views button
Click the Show Design View button
![Page 11: Chapter Lessons](https://reader030.vdocument.in/reader030/viewer/2022020219/56812b82550346895d8f9fc3/html5/thumbnails/11.jpg)
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
![Page 12: Chapter Lessons](https://reader030.vdocument.in/reader030/viewer/2022020219/56812b82550346895d8f9fc3/html5/thumbnails/12.jpg)
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
![Page 13: Chapter Lessons](https://reader030.vdocument.in/reader030/viewer/2022020219/56812b82550346895d8f9fc3/html5/thumbnails/13.jpg)
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
![Page 14: Chapter Lessons](https://reader030.vdocument.in/reader030/viewer/2022020219/56812b82550346895d8f9fc3/html5/thumbnails/14.jpg)
14Chapter 1
Basic Web Page Elements
Text
Hyperlinks (links)
Graphics– Banners
Navigation bars– Image map
Flash button objects
![Page 15: Chapter Lessons](https://reader030.vdocument.in/reader030/viewer/2022020219/56812b82550346895d8f9fc3/html5/thumbnails/15.jpg)
15Chapter 1
Graphic
Form
Navigation bar
FIGURE 7 Common Web page elements
![Page 16: Chapter Lessons](https://reader030.vdocument.in/reader030/viewer/2022020219/56812b82550346895d8f9fc3/html5/thumbnails/16.jpg)
16Chapter 1
Banner
Table
Flash button object
Text links
Text Graphic
FIGURE 8 Striped Umbrella Web page elements
![Page 17: Chapter Lessons](https://reader030.vdocument.in/reader030/viewer/2022020219/56812b82550346895d8f9fc3/html5/thumbnails/17.jpg)
17Chapter 1
Getting Help
Contents
Index
Search
Favorites
Keywords …
Topics found
… in results
FIGURE 9 Dreamweaver 8 Help
window
![Page 18: Chapter Lessons](https://reader030.vdocument.in/reader030/viewer/2022020219/56812b82550346895d8f9fc3/html5/thumbnails/18.jpg)
18Chapter 1
Web Site Creation Process
FIGURE 10 Phases of a Web site development project
![Page 19: Chapter Lessons](https://reader030.vdocument.in/reader030/viewer/2022020219/56812b82550346895d8f9fc3/html5/thumbnails/19.jpg)
19Chapter 1
Planning a Web Site
Audience needs
Site goals
Gathering content
Budget
Schedule
Team
Updates
![Page 20: Chapter Lessons](https://reader030.vdocument.in/reader030/viewer/2022020219/56812b82550346895d8f9fc3/html5/thumbnails/20.jpg)
20Chapter 1
Creating Storyboards
FIGURE 11 The Striped Umbrella Web site storyboard
![Page 21: Chapter Lessons](https://reader030.vdocument.in/reader030/viewer/2022020219/56812b82550346895d8f9fc3/html5/thumbnails/21.jpg)
21Chapter 1
Testing the Pages
Browsers and browser versions
Screen sizes
Speed on different connections
Testing is a continuous process
![Page 22: Chapter Lessons](https://reader030.vdocument.in/reader030/viewer/2022020219/56812b82550346895d8f9fc3/html5/thumbnails/22.jpg)
22Chapter 1
Modifying the Pages
Changes are constantly needed
Test page after each change
Modifying and testing is an ongoing process
![Page 23: Chapter Lessons](https://reader030.vdocument.in/reader030/viewer/2022020219/56812b82550346895d8f9fc3/html5/thumbnails/23.jpg)
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
![Page 24: Chapter Lessons](https://reader030.vdocument.in/reader030/viewer/2022020219/56812b82550346895d8f9fc3/html5/thumbnails/24.jpg)
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
![Page 25: Chapter Lessons](https://reader030.vdocument.in/reader030/viewer/2022020219/56812b82550346895d8f9fc3/html5/thumbnails/25.jpg)
25Chapter 1
Publishing the Site
Create a root folder
Define the Web site
Set up Web server access
![Page 26: Chapter Lessons](https://reader030.vdocument.in/reader030/viewer/2022020219/56812b82550346895d8f9fc3/html5/thumbnails/26.jpg)
26Chapter 1
Root folder
FIGURE 12 Creating a root folder using Windows Explorer
![Page 27: Chapter Lessons](https://reader030.vdocument.in/reader030/viewer/2022020219/56812b82550346895d8f9fc3/html5/thumbnails/27.jpg)
27Chapter 1
FIGURE 13 Creating a root folder using a Macintosh
![Page 28: Chapter Lessons](https://reader030.vdocument.in/reader030/viewer/2022020219/56812b82550346895d8f9fc3/html5/thumbnails/28.jpg)
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
![Page 29: Chapter Lessons](https://reader030.vdocument.in/reader030/viewer/2022020219/56812b82550346895d8f9fc3/html5/thumbnails/29.jpg)
29Chapter 1
Remote info category
Access list arrow
FIGURE 15 Setting the remote access for The Striped Umbrella Web site
![Page 30: Chapter Lessons](https://reader030.vdocument.in/reader030/viewer/2022020219/56812b82550346895d8f9fc3/html5/thumbnails/30.jpg)
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
![Page 31: Chapter Lessons](https://reader030.vdocument.in/reader030/viewer/2022020219/56812b82550346895d8f9fc3/html5/thumbnails/31.jpg)
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
![Page 32: Chapter Lessons](https://reader030.vdocument.in/reader030/viewer/2022020219/56812b82550346895d8f9fc3/html5/thumbnails/32.jpg)
32Chapter 1
FIGURES 16 and 17 The Striped Umbrella site in Files panel with assets folder created Windows (left) and Macintosh (right)
![Page 33: Chapter Lessons](https://reader030.vdocument.in/reader030/viewer/2022020219/56812b82550346895d8f9fc3/html5/thumbnails/33.jpg)
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
![Page 34: Chapter Lessons](https://reader030.vdocument.in/reader030/viewer/2022020219/56812b82550346895d8f9fc3/html5/thumbnails/34.jpg)
34Chapter 1
Index.html
Page title and path
FIGURE 19 index.html placed in the striped_umbrella root folder
![Page 35: Chapter Lessons](https://reader030.vdocument.in/reader030/viewer/2022020219/56812b82550346895d8f9fc3/html5/thumbnails/35.jpg)
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
![Page 36: Chapter Lessons](https://reader030.vdocument.in/reader030/viewer/2022020219/56812b82550346895d8f9fc3/html5/thumbnails/36.jpg)
36Chapter 1
Verifying Page Titles
Search engine keywords
Title in browser window
Bookmark in browser
![Page 37: Chapter Lessons](https://reader030.vdocument.in/reader030/viewer/2022020219/56812b82550346895d8f9fc3/html5/thumbnails/37.jpg)
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
![Page 38: Chapter Lessons](https://reader030.vdocument.in/reader030/viewer/2022020219/56812b82550346895d8f9fc3/html5/thumbnails/38.jpg)
38Chapter 1
Site Map Layout category
Page titles option button
Path for home page
FIGURE 24 Options for the site map layout
![Page 39: Chapter Lessons](https://reader030.vdocument.in/reader030/viewer/2022020219/56812b82550346895d8f9fc3/html5/thumbnails/39.jpg)
39Chapter 1
Site list arrow
View list arrow
Click to hide all panels
FIGURE 25 Expanding the site map
![Page 40: Chapter Lessons](https://reader030.vdocument.in/reader030/viewer/2022020219/56812b82550346895d8f9fc3/html5/thumbnails/40.jpg)
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