slide1 n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Chapter Lessons PowerPoint Presentation
Download Presentation
Chapter Lessons

Loading in 2 Seconds...

play fullscreen
1 / 40

Chapter Lessons - PowerPoint PPT Presentation


  • 73 Views
  • Uploaded on

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?

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Chapter Lessons' - kirby-frazier


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
chapter lessons

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
getting started with dreamweaver

INTRODUCTION

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

INTRODUCTION

Using Dreamweaver Tools
  • 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
slide5

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

working with dreamweaver views

LESSON 1

Working with Dreamweaver Views
  • Design view
  • Code view
  • Code and Design view
starting dreamweaver windows

LESSON 1

Starting Dreamweaver (Windows)
  • Click the Start button on the taskbar
  • Click (All) Programs Macromedia  Macromedia Dreamweaver 8
slide8

LESSON 1

Dreamweaver 8

FIGURE 3 Starting Dreamweaver 8 (Windows)

starting dreamweaver macintosh

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

changing views

LESSON 1

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

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

viewing panels

LESSON 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
opening a web page

LESSON 2

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

LESSON 2

Basic Web Page Elements
  • Text
  • Hyperlinks (links)
  • Graphics
    • Banners
  • Navigation bars
    • Image map
  • Flash button objects
slide15

LESSON 2

FIGURE 7 Common Web page elements

Navigation bar

Graphic

Form

slide16

LESSON 2

FIGURE 8 Striped UmbrellaWeb page elements

Graphic

Text

Banner

Table

Flash button object

Text links

getting help

LESSON 2

Getting Help
  • Contents
  • Index
  • Search
  • Favorites

Keywords …

… in results

Topics found

FIGURE 9 Dreamweaver 8 Help window

web site creation process

LESSON 3

Web Site Creation Process

FIGURE 10 Phases of a Web site development project

planning a web site

LESSON 3

Planning a Web Site
  • Audience needs
  • Site goals
  • Gathering content
  • Budget
  • Schedule
  • Team
  • Updates
creating storyboards

LESSON 3

Creating Storyboards

FIGURE 11 The Striped Umbrella Web site storyboard

testing the pages

LESSON 3

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

LESSON 3

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

LESSON 3

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 site1

LESSON 3

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 site2

LESSON 3

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

LESSON 3

Root folder

FIGURE 12 Creating a root folder using Windows Explorer

slide27

LESSON 3

FIGURE 13 Creating a root folder using a Macintosh

slide28

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

slide29

LESSON 3

Remote info category

Access list arrow

FIGURE 15 Setting the remote access for The Striped Umbrella Web site

the assets folder

LESSON 4

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

LESSON 4

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
slide32

LESSON 4

FIGURES 16 and 17 The Striped Umbrella site in Files panel with assets folder created Windows (left) and Macintosh (right)

slide33

LESSON 4

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

slide34

LESSON 4

Page title and path

Index.html

FIGURE 19 index.html placed in the striped_umbrella root folder

the site map

LESSON 5

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
verifying page titles

LESSON 5

Verifying Page Titles
  • Search engine keywords
  • Title in browser window
  • Bookmark in browser
uses of a site map

LESSON 5

Uses of a Site Map
  • In the Web site as an informational tool
    • PNG or JPEG
  • Print for report or meeting
    • BMP or PICT
slide38

LESSON 5

Site Map Layout category

Path for home page

Page titles option button

FIGURE 24 Options for the site map layout

slide39

LESSON 5

Site list arrow

View list arrow

Click to hide all panels

FIGURE 25 Expanding the site map

chapter 1 tasks

SUMMARY

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