OVERVIEW

1
(No Transcript)
2
Chapter Lessons
OVERVIEW

• 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
INTRODUCTION

• 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
INTRODUCTION

• 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

5
START DREAMWEAVER

• Start menu, All Programs, Macromedia, Dreamweaver
  8

6
LESSON 1
Dreamweaver 8
FIGURE 3 Starting Dreamweaver 8 (Windows)
7
LESSON 1
FIGURE 1 Dreamweaver 8 workspace
Select tool
Hand tool
Title bar
Menu bar
Insert bar
Zoom tool
Document window
Status bar
Property inspector
8
Working with Dreamweaver Views
LESSON 1

• Design view
• Code view
• Code and Design view

9
Starting Dreamweaver (Windows)
LESSON 1

• Click the Start button on the taskbar
• Click (All) Programs ? Macromedia ? Macromedia
  Dreamweaver 8

10
Starting Dreamweaver (Macintosh)
LESSON 1

• 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)
11
Changing Views
LESSON 1

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

12
LESSON 1
FIGURE 5 Code view for new document
Show Code and Design View button
Show Code View button
Show Design View button
Coding toolbar
13
Viewing Panels
LESSON 1

• Expand the Application panel
• Click each panel tab
• Collapse the Application panel
• Study the CSS and Files panel groups
• Collapse the CSS panel group

14
Opening a Web Page
LESSON 2- Go to p. 1-10

• 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

15
Basic Web Page Elements
LESSON 2

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

16
LESSON 2
FIGURE 7 Common Web page elements
Navigation bar
Graphic
Form
17
Do p. 1-12 and 1-13

• Open files from P/Depts/Business Technology/BT
  1801 Web Design/Student Data Files

18
LESSON 2
FIGURE 8 Striped Umbrella Web page elements
Graphic
Text
Banner
Table
Flash button object
Text links
19
Getting Help
LESSON 2
Keywords
in results

• Contents
• Index
• Search
• Favorites

Topics found
FIGURE 9 Dreamweaver 8 Help window
20
Web Site Creation Process
LESSON 3
FIGURE 10 Phases of a Web site development
project
21
Planning a Web Site
LESSON 3

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

22
Creating Storyboards
LESSON 3
Parent pages
Child pages
FIGURE 11 The Striped Umbrella Web site
storyboard
23
Also Create Folder Hierarchy
LESSON 3
Parent pages
Child pages
FIGURE 11 The Striped Umbrella Web site
storyboard
24
Testing the Pages
LESSON 3

• Browsers and browser versions
• Screen sizes
• Speed on different connections
• Testing is a continuous process

25
Modifying the Pages
LESSON 3

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

26
Publishing the Site
LESSON 3

• 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

27
Publishing the Site
LESSON 3

• 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

28
Publishing the Site
LESSON 3

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

29
Complete p. 1-18 1-21
30
LESSON 3
Root folder
FIGURE 12 Creating a root folder using Windows
Explorer
31
LESSON 3
FIGURE 13 Creating a root folder using a
Macintosh
32
LESSON 3
Web site name
Links relative to options
Local root folder
Enable cache
Refresh local file list automatically
FIGURE 14 Site definition for The Striped
Umbrella dialog box
33
LESSON 3
Remote info category
Access list arrow
FIGURE 15 Setting the remote access for The
Striped Umbrella Web site
34
The Assets Folder
LESSON 4

• 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

35
Setting the Home Page

• Usually index.html (.htm), or default.html (.htm)
• Starting point for a site map
• Tell Dreamweaver which page you have designated
  to be your home page
• Add folders to the Web site
• Set the default images folder

36
Do p. 1-24 through 1-29
37
FIGURES 16 and 17 The Striped Umbrella site in
Files panel with assets folder created Windows
(left) and Macintosh (right)
38
Browse for file icon
Default images folder
FIGURE 18 Site definition for The Striped
Umbrella Web site with assets folder set as the
default images folder
39
Page title and path
Index.html
FIGURE 19 index.html placed in the
striped_umbrella root folder
40
Verifying Page Titles
LESSON 5

• See p. 130 shaded box
• Search engine keywords
• Title in browser window
• Bookmark in browser

41
The Site Map
LESSON 5

• Graphical representation of pages
• Displays folder structure
• Page link type/status
• Checked out pages
• Map view in the Files panel
• Tree structure

42
Uses of a Site Map
LESSON 5

• In the Web site as an informational tool
• PNG or JPEG
• Print for report or meeting
• BMP or PICT

43
Do p. 1-32 and 1-33
44
Site Map Layout category
Path for home page
Page titles option button
FIGURE 24 Options for the site map layout
45
Site list arrow
View list arrow
Click to hide all panels
FIGURE 25 Expanding the site map
46
Chapter 1 Tasks
SUMMARY

• 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

47
Looking Ahead

• Complete the Skills Review, p. 1-34 through 1-35
• Quiz next Wednesday on Chapters 1-4 of NDWB and
  Chapter 1 of WCR
• (hint read through Chapter 1!)
• Next timelab for Project Builders/Portfolio
  Project