Dw8 sdg us

Web Media with Dreamweaver 8
Building an Electronic Portfolio
Macromedia K–12 Staff Development Workshops

Notice of Rights
Copyright © 2005 by Macromedia, Inc. All rights reserved.
For educational instruction purposes only, Macromedia grants you the right to make as many copies
as you need of all or a portion of the Web Media with Dreamweaver 8 workshop, either by
photocopy or by printing files from the PDF document, providing that you always include the page(s)
containing copyright information and that you distribute such copies not for profit. It is the
responsibility of your organization to monitor the copying and use of this curriculum and to comply
with the terms of this notice. You agree that Macromedia reserves the right to audit your
organization’s compliance with these terms, upon reasonable notice.
All other copying, reproduction, and transmission is otherwise prohibited.
This notice does not cover the use of Macromedia software. You must comply with the terms of the End-
User License Agreement supplied with the software.
Notice of Liability
The information in these training materials is distributed on an “AS IS” basis, without warranty.
Although reasonable precaution has been taken in the preparation of these materials, neither
Macromedia, Inc., nor its licensors shall have any liability to any person or entity with respect to
liability, loss, or damage alleged to be caused directly or indirectly by the instructions contained in
these materials or by the computer software and hardware products described herein.
These materials contain links to third-party websites that are not under the control of Macromedia,
and Macromedia is not responsible for the content on any linked site. Macromedia provides these
links only as a convenience, and the inclusion of the link does not imply that Macromedia endorses
the content on those third-party sites.
Trademarks
Macromedia, the Macromedia logo, Authorware, ColdFusion, Macromedia Contribute, Director,
Dreamweaver, Fireworks, FreeHand, JRun, Macromedia Flash, and Shockwave are trademarks or
registered trademarks of Macromedia, Inc., in the United States and/or other countries.
Third-party products, services, company names, logos, design, titles, words, or phrases within these
materials may be trademarks of their respective owners.
Acknowledgements
Authors
Anuja Dharkar and Dale Underwood
Copy Editor
Malinda McCain
Dreamweaver 8 Revision
Andrew Strombeck
Art
Tanya Heins and Ann Gallenson
Editor
Kirsti Aho
Program Manager
Maryann Amado

Table of Contents
Introduction ................................................................................................................................................ 1
Workshop at a Glance ............................................................................................................................. 3
Activity 1 Overview of the Day ............................................................................................................ 7
Activity 2 Building a Basic Biography Web Page ............................................................................ 9
Activity 3 Planning an Electronic Portfolio ........................................................................................11
Activity 4 Building a Portfolio Home Page .......................................................................................13
Activity 5 Building Portfolio Pages ....................................................................................................15
Activity 6 Creating a Web Photo Album ...........................................................................................16
Activity 7 Testing Web Pages ............................................................................................................18
Activity 8 Reflecting ........................................................................................................................... 20
Presentation
Website Production Phases..........................................................................................................25
Guides
Outline for the Day ...........................................................................................................................31
The Dreamweaver 8 Interface.......................................................................................................33
How to Set Up a Local Root Folder and Site Structure............................................................37
Naming Conventions .......................................................................................................................41
How to Create a Basic Table.........................................................................................................43
How to Create Links...................................................................................................................... 49
Basic Project Plan............................................................................................................................51
Portfolio Flowchart .........................................................................................................................53
How to Lay Out a Web Page with Layers ...................................................................................55
How to Add Text from Another Document ................................................................................ 59
How to Create a Web Photo Album..............................................................................................61
How to Check Links .......................................................................................................................65
Project Rubric..................................................................................................................................67
Resources .........................................................................................................................................71
How to Use Templates...................................................................................................................75
How to Use Libraries ......................................................................................................................79
How to Import Spreadsheet Tables .............................................................................................83

Introduction
In the Web Media with Dreamweaver 8 workshop, participants create an electronic portfolio. The
workshop introduces conceptual skills around the design and uses of an electronic portfolio and
teaches the fundamentals of Dreamweaver 8. Participants learn to plan a simple portfolio, define a
site, create tables, insert images, create links, manipulate text properties, use Flash buttons, test
links, make a site accessible, and publish a website by using Dreamweaver. The workshop
culminates with a discussion about classroom applications, assessment, and methods for
supporting student learning. Participants leave the workshop with a completed sample electronic
portfolio.
Note: This workshop uses Flash buttons, which require the latest version of Flash Player. Download
the latest Flash Player from www.macromedia.com/downloads on each computer to be used for this
workshop.
Trainer Materials
Workshop at a Glance (a summary of workshop activities and list of materials)
Workshop Activity Plans
Activity 1: Overview of the Day
Activity 2: Building a Basic Biography Web Page
Activity 3: Planning an Electronic Portfolio
Activity 4: Building a Portfolio Home Page
Activity 5: Building Portfolio Pages
Activity 6: Creating a Web Photo Album
Activity 7: Testing Web Pages
Activity 8: Reflecting
Presentation
Website Production Phases
Electronic Files
You can download a completed sample, the presentation, and electronic files associated with
particular activities at www.macromedia.com/go/school_staff_development_2005/. In this
download, you will find sample completed projects to preview and other assets to use with the
participants.
Participant Materials
Outline for the Day
Guides
The Dreamweaver 8 Interface
How to Set Up a Local Root Folder and Site Structure
Naming Conventions
How to Create a Basic Table
© 2005 Macromedia, Inc. Web Media with Dreamweaver 8 1

How to Create Links
Basic Project Plan
Portfolio Flowchart
How to Lay Out a Web Page with Layers
How to Add Text from Another Document
How to Create a Web Photo Album
How to Check Links
Project Rubric
Resources
Bonus Guides for Quick Learners
How to Use Templates
How to Use Libraries
How to Import Spreadsheet Tables
System Requirements
Windows
Macromedia Dreamweaver 8
• 800MHz Intel Pentium® III processor or equivalent
• Windows 2000, Windows XP
• 256 MB RAM (1 GB recommended to run more than one Studio 8 product simultaneously)
• 1024 x 768, 16-bit display (32-bit recommended)
• 650 MB available disk space
• Netscape Navigator 5.0 or Internet Explorer 5.0 or later
Macintosh
Macromedia Dreamweaver 8
• 600 MHz PowerMac G3 processor
• Mac OS® X 10.3, 10.4
• 256 MB RAM (1 GB recommended to run more than one Studio 8 product simultaneously)
• 1024 x 768, thousands of colors display (millions of colors recommended)
• 300 MB available disk space
• Netscape Navigator 5.0 or Internet Explorer 5.0 or later
2 Web Media with Dreamweaver 8 © 2005 Macromedia, Inc.

Workshop at a Glance
Time Activity Materials Technical Skills
Participant
Products
15–20
minutes
Activity 1
Overview of the Day
• Become proficient in using Macromedia
Dreamweaver 8 to build an electronic
portfolio.
• Think about ways to use electronic portfolios
in the classroom.
• Gather ideas for supporting student
technology learning.
• Outline: Web Media with Dreamweaver 8:
None None
60–75
minutes
Activity 2
Building a Basic Biography Web Page
• Define a website.
• Use basic tools in Dreamweaver 8.
• Create a simple web page.
• Electronic file: sample_teacher_bio.htm
• Dreamweaver 8 Guide: The Dreamweaver 8
Interface
• Dreamweaver 8 Guide: How to Set Up a
Local Root Folder and Site Structure
• Guide: Naming Conventions
• Electronic files (folder of sample
photographs): likable_places
• Dreamweaver 8 Guide: How to Create a
Basic Table
• Dreamweaver 8 Guide: How to Create Links
• Define a site
• Set up local root
folder
• Create a table
• Type text
• Modify text
properties
• Insert an image
• Add alternative
text
• Create a link
Defined site
Biography
page
Break

Participant
Products
30–45
minutes
Activity 3
Planning an Electronic Portfolio
• Understand types and purposes of portfolios.
• Understand the website-project process.
• Create a flowchart for an electronic portfolio
website.
• Plan a navigation scheme for a portfolio
website.
• Presentation: Website Production Phases
• Guide: Basic Project Plan
• Worksheet: Portfolio Flowchart
Materials for Quick Learners (optional)
• Dreamweaver 8 Guide: How to Import
Spreadsheet Tables
• Dreamweaver 8 Guide: How to Use
Libraries
Templates
• Understand types
of portfolios
• Construct a
flowchart
• Design a
navigation scheme
Flowchart
Navigation
plan
30–45
minutes
Activity 4
Building a Portfolio Home Page
• Sketch a page layout.
• Develop a color scheme for an electronic
portfolio site.
• Use layers to create a home page for an
electronic portfolio site.
• Insert Macromedia Flash buttons in a
Dreamweaver document.
• Dreamweaver 8 Guide: How to Lay Out a
Web Page with Layers
Spreadsheet Tables
Libraries
Templates
• Design a page
layout
• Create layers
• Modify text and
background colors
• Create Flash
buttons
• Create links
Home page
for electronic
portfolio
Lunch

Participant
Products
50–70
minutes
Activity 5
Building Portfolio Pages
• Create content pages for an electronic
portfolio website.
• Copy and paste text from one Dreamweaver
document to another.
• Import text from a word-processing
document into a Dreamweaver document.
• Electronic files: lesson-plan.doc, lesson-
plan.html
• Dreamweaver 8 Guide: How to Add Text
from Another Document
Spreadsheet Tables
Libraries
Templates
• Copy and paste
text
• Import Word
HTML
Two portfolio
pages
10–20
minutes
Activity 6
Creating a Web Photo Album
• Create a web photo album.
• Integrate the web photo album into the
portfolio website.
• Electronic files (folder):
martin_gutierrez_drawings,
web_photo_album
• Dreamweaver 8 Guide: How to Create a
Web Photo Album
• Create a web
photo album
First draft of
electronic
portfolio
Break
20–30
minutes
Activity 7
Testing Web Pages
• Test links in a portfolio website.
• Review words and images for spelling,
grammar, and layout.
• Dreamweaver 8 Guide: How to Check Links
Spreadsheet Tables
Libraries
Templates
• Test links Completed
electronic
portfolio

Participant
Products
20–30
minutes
Activity 8
Reflecting
• Reflect on general skills learned.
• Share new individual development skills
learned.
• Brainstorm possible projects involving
Dreamweaver.
• Discuss possible assessment of
Dreamweaver projects.
• Guide: Project Rubric
• Guide: Resources
None Suggestions
for classroom
projects

Activity 1
Overview of the Day
Overview 15–20 minutes
The trainer introduces the goals, projects, and activities for the day and gives participants the
opportunity to ask questions.
Activity Steps
1. Describe the goals for the day:
• Become proficient in using Macromedia Dreamweaver 8 to build an electronic portfolio.
• Think about ways to use electronic portfolios in the classroom.
• Gather ideas for supporting student technology learning.
Outline: Web Media with Dreamweaver 8: Building an Electronic Portfolio
2. Briefly describe the activities for the day:
• Activity 2: Building a Basic Biography Web Page
Explore the Dreamweaver interface and learn the basics of creating a web page by
creating a biography page.
• Activity 3: Planning an Electronic Portfolio
Discuss purposes and types of portfolios. Review the web-project process. Discuss the
portfolio pages teachers will build, and create a flowchart. Discuss navigation.
• Activity 4: Building a Portfolio Home Page
Brainstorm page layout for the portfolio site. Create a home page and build a navigation
system. Make copies of the home page to use for creating the other pages of the portfolio
website.
• Activity 5: Building Portfolio Pages
Use a variety of Dreamweaver tools to create other pages of the portfolio site.
• Activity 6: Creating a Web Photo Album
Use the Create Web Photo Album feature to create an interactive album of images.
• Activity 7: Testing Web Pages
Test links on the electronic portfolio site.
• Activity 8: Reflecting
Review skills learned during the day’s activities. Spend time brainstorming possible
projects that use Dreamweaver and ways to assess those projects.
3. Discuss the concept of an electronic portfolio and show participants some examples.
Student portfolios:
• ldt.stanford.edu/~taniac/
• www.mehs.educ.state.ak.us/portfolios/nicoler/nicoleross.html

Teacher portfolios:
• kml.carnegiefoundation.org/gallery/mhurley/index2.html
• kml.carnegiefoundation.org/gallery/hlyne/
4. Answer any questions from participants.

Activity 2
The trainer introduces the Dreamweaver 8 interface. Participants define a site and set up a
biography page. Participants create the content for their biography page.
Participant product: Basic teacher biography web page
Activity Steps
1. Introduce the goals of this activity:
• Define a website.
• Use basic tools in Dreamweaver 8.
• Create a simple web page.
2. Before beginning the activity, have participants create a folder for the workshop named
<participant last name>_dreamweaver_wkshp.
3. Show the sample teacher biography web page, and explain that participants will work
together to create a similar page for themselves.
Electronic file: sample_teacher_bio.htm (in sample_teacher_bio_web_page folder)
4. Have participants start Dreamweaver.
5. Discuss the basic elements of the Dreamweaver interface.
• Document Window and Panels
• Insert Bar
• Property Inspector
Dreamweaver 8 Guide: The Dreamweaver 8 Interface
6. Using the “I do – we do – you do” method, demonstrate the following. First show a step and
then complete the step again as a group.
Define a site.
• Define and name a new website.
• Create a local root folder named <participant last name>_teacher_site.
Set up the biography page.
• Save the page in the <participant last name>_teacher_site folder, using proper naming
conventions.
• Add a browser window title.
Dreamweaver 8 Guide: How to Set Up a Local Root Folder and Site Structure

Guide: Naming Conventions
7. Using the “I do – we do – you do” method, demonstrate the following:
Save and name the document and the page.
• File menu
• Page title field
Generate a basic layout.
• Draw a basic table.
• Split and merge cells to customize the layout of the table.
• Add background color to table cells.
Add content.
• Type text. (For example, type the title on the page.)
• Modify text properties. (For example, change properties of the title text so it appears
larger, in color, and in a different font.)
• Insert an image. (For example, insert one of the sample photographs under a heading such
as “A Place I Like.”)
• Make the image accessible: Add alternative (Alt) text for the image using the Property
inspector.
• Create a link. (For example, insert a link to the school website or an e-mail link.)
Electronic files (folder of sample photographs): likable_places
Dreamweaver 8 Guide: How to Create a Basic Table
Dreamweaver 8 Guide: How to Create Links
8. Wrap up the activity by having two or three participants show their completed biography
page to the group.
9. Review the goals of the activity and how you might use student biography pages in the
classroom (such as in electronic portfolios, personal websites, or class websites). Discuss
potential challenges in the classroom.
Independent Activities for Quick Learners
Challenge individuals who complete the activity early to complete one or more of the following
tasks independently:
• Assist other participants with their biography pages.
• Research the Dreamweaver Help system to learn how to create an e-mail link and a nested
table.

Activity 3
The trainer discusses types and purposes of electronic portfolios, reviews the phases in the
development of a web project, and describes the pages participants will build for their portfolios.
Participants create a flowchart and plan a navigation scheme.
Participant product: Flowchart
Activity Steps
• Understand types and purposes of portfolios.
• Understand the website-project process.
• Create a flowchart for an electronic portfolio website.
• Plan a navigation scheme for a portfolio website.
2. Discuss different types of portfolios, as well as the audience and goals for each type. Some
examples:
• Showcase portfolio: Highlights the owner’s experience and expertise by showing
examples of best work.
• Skill-growth portfolio: Shows multiple samples of work on the same project to
demonstrate increasing skill.
• Project-progress portfolio: Contains a more complete selection of work around a
particular project to reflect the span of work.
3. Present the phases of a website project. Talk about how you might track a project with a
project-plan document.
• Plan
• Design
• Build
• Test
Presentation: Website Production Phases
Guide: Basic Project Plan
4. Briefly describe the use of a storyboard as a means for planning the layout and structure of a
site in the design phase. Because of workshop time constraints, participants will not create
storyboards, but they will plan the layout and color scheme for their electronic portfolio
websites.
5. Describe the portfolio pages participants will build. For example a simple portfolio might
include the following pages:

• Home
• Biography
• Sample lesson plan
• A catalog of photographs
Note that each portfolio will be an abbreviated instance of a showcase portfolio. Decide how
to name each of the pages. (Participants will need this information when they implement their
navigation scheme.)
6. Using the “I do – we do – you do” method, demonstrate how to complete the flowchart for
the four main pages in the portfolio.
7. Discuss navigation in the context of the flowchart. Help participants plan a navigation
scheme. Ask participants to use drawn arrows to represent links between pages.
Note: Treat the web photo album as a single page at this point. After participants have
created the photo album, you can ask them to revise their flowchart to reflect the album pages
generated by Dreamweaver.
Worksheet: Portfolio Flowchart
8. Review the goals of the activity and how you might use the different types of portfolios in the
classroom. Discuss potential challenges in the classroom.
Challenge participants who complete the activity early to complete one or more of the following
• Import a spreadsheet into a table on an additional portfolio page by using “Dreamweaver 8
Guide: How to Import Spreadsheet Tables.”
• Learn how to create and insert library items on a web page by using “Dreamweaver 8 Guide:
How to Use Libraries.”
• Create a template from the home page by using “Dreamweaver 8 Guide: How to Use
Templates.”

Activity 4
Participants brainstorm a page layout for the portfolio pages and create a home page, including a
navigation bar with Macromedia Flash buttons and text links for accessibility. Participants make
copies of the home page to use as the basis for the other pages.
Participant product: Page layout and color scheme for portfolio pages and completed home page
Activity Steps
• Sketch a page layout.
• Develop a color scheme for an electronic portfolio site.
• Create a home page for an electronic portfolio site.
• Insert Macromedia Flash buttons in a Dreamweaver document.
2. Brainstorm with participants how you might lay out portfolio pages that include a consistent
navigation scheme. Plan a navigation scheme that will include both text links and a
navigation bar with buttons. Discuss the importance of accessibility provided by the text
links.
3. Ask participants to sketch their page layout (without any specific content). Include cells that
will contain text, images, and navigation elements.
4. Have participants use layers to lay out their home pages according to their page layout
sketches and save the file as index.htm in their <participant last name>_teacher_site folder.
Have them add home page text, make color choices for the background and text elements,
and type the names of the text links to other pages. Tell participants that they will create the
actual text links after the content pages are created.
Dreamweaver 8 Guide: How to Lay Out a Web Page with Layers
5. Using the “I do – we do – you do” method, demonstrate how to create a navigation bar with
Macromedia Flash buttons.
6. Have participants make two copies of their completed home pages to use as starting points for
the biography and lesson-plan pages of the portfolio. This technique assures a consistent
design across pages. (The layout of the web photo album is determined by Dreamweaver 8.)
7. Review the goals of the activity and how you might use planning and sketching to think
through ideas prior to creating an entire site. Discuss potential challenges in the classroom
and how best to support students in meeting these challenges.

Templates.”

Activity 5
Overview 50-70 minutes
Participants adapt their biography page to the portfolio page layout. Participants build a lesson
plan page by importing text from a word-processing document.
Participant product: Two portfolio web pages
Activity Steps
• Create content pages for an electronic portfolio website.
• Copy and paste text from one Dreamweaver document to another.
• Import text from a word-processing document into a Dreamweaver document.
2. Have participants create a portfolio biography page by copying and pasting the text from their
completed biography page from Activity 2 into the formatted portfolio biography page
(copied from the home page). Insert the same image as on the original biography page.
3. Ask participants to reformat the title and autobiography text to match the color, style, font
size, and font type choices in their page sketch.
4. Using the “I do – we do – you do” method, demonstrate how to import a Microsoft Word
document (Windows) or copy and paste from a Word document (Macintosh) to create the
content of the lesson plan page for their portfolio.
Electronic files: lesson-plan.doc, lesson-plan.html
Dreamweaver 8 Guide: How to Add Text from Another Document
5. Ask participants to reformat the text in the lesson plan to match the color, style, font size, and
font type choices in their page sketch.
Templates.”

Activity 6
Overview 10-20 minutes
Participants use the Create Web Photo Album command to build a page that displays sample
teacher work. Participants integrate the album into their portfolio.
Participant product: Completed draft of portfolio website
Activity Steps
1. Introduce the goal of this activity:
• Create a web photo album.
• Integrate the web photo album into the portfolio website.
2. Show a completed album and describe how it was made with Dreamweaver 8.
Electronic files (folder): web_photo_album
3. Using the “I do – we do – you do” method, demonstrate how to use the Create Web Photo
Album command. In the process, ask participants to select Create Navigation Page for Each
Photo.
Note: Macromedia Fireworks must be installed on each workstation for participants to create
a web photo album.
Electronic files (folder): martin_gutierrez_drawings
Dreamweaver 8 Guide: How to Create a Web Photo Album
4. After the album creation is complete, you might need to show participants how to tweak the
layout of the table so that the rows line up properly.
5. Show participants how they can change and add text to the album.
6. Have participants create alternative text for the images in the album to add accessibility.
Show how they can change and add text.
7. As a group, identify the folders and documents created in the album process. Have
participants add the new pages to their flowcharts.
8. Using the “I do – we do – you do” method, demonstrate different ways to add the actual page
links to the accessible text menu on the other pages.
Dreamweaver 8 Guide: How to Create Links
9. Review the goals of the activity and how you might use a web photo album in the classroom
(such as for cataloging and organizing graphics, scanned images, or photographs). Discuss
potential challenges in the classroom.

Independent Activity for Quick Learners
Challenge participants who complete the activity early to complete the following task
independently:
• Add text, links, and other graphics to individual pages in the album.

Activity 7
Testing Web Pages
Participants test the page links in their site and fix links as necessary.
Participant product: Completed portfolio website
Activity Steps
1. Introduce the goal of this activity:
• Test links in a portfolio website.
• Review words and images for spelling, grammar, and layout.
2. Using the “I do – we do – you do” method, demonstrate how to check the links in the
portfolio by using the Link Checker.
Dreamweaver 8 Guide: How to Check Links
3. Give participants time to fix any broken links and to check them again.
4. Have participants test their links in a browser.
5. Ask participants to switch seats with a neighbor so they can test the links and review the
layout and content of each other’s portfolios. Allow time for participants to give each other
feedback and make any necessary changes. Some questions to guide their feedback might
include:
• Do all the links work?
• How do the naming choices for navigation elements help you understand where you will
be directed?
• How well are you able to navigate through the site?
• How consistently is the design implemented between pages?
6. Review the goals of the activity and discuss the importance of having students test projects
and give peer feedback as they create with web tools. Discuss potential challenges in the
classroom.

Templates.”

Activity 8
Reflecting
The trainer summarizes the day. Participants discuss classroom applications of what they have
learned.
Participant product: Suggestions for classroom projects
Activity Steps
• Reflect on general skills learned.
• Share new individual development skills learned.
• Brainstorm possible projects involving Dreamweaver.
• Discuss possible assessment of Dreamweaver projects.
2. Briefly highlight the tasks participants completed during the day, tying tasks to technical
skills in Dreamweaver 8.
3. Review and discuss classroom applications of what participants have learned. What
classroom projects would they like to develop, based on their experience during the day?
Examples of projects include:
• An assessment portfolio for a one-semester course
• A student-project portfolio that contains a presentation, a final report, and any
supplementary information used in the project
• A portfolio for students to use as a resume after they graduate
4. How would they assess such projects?
Guide: Project Rubric
5. Discuss additional resources for learning about design, development, and assessment.
Guide: Resources
6. If participants are interested in curriculum for teaching about designing and building
electronic portfolios, the following books are recommended:
• Town Website Project for Dreamweaver 8 guides students as they build a basic
informational website about their town or city neighborhood. Project lessons enable
students to build web technology and citizenship skills as they produce a simple website.
You can find more information at www.macromedia.com/education.
• Digital Design (ISBN 1-932719-07-5) is a yearlong, project-based curriculum that
develops IT skills in web design and production using Macromedia web tools. Digital
Design can be used in career and technical education courses as well as general web

design classes. Its projects develop four key skills: design, communication, project
management, and web technology. You can find more information at
www.macromedia.com/education.
7. Wrap up the activity by asking participants to answer the following questions:
• What was the most challenging thing you learned today? Describe how you met the
challenge.
• How did you help each other?
• What surprised you about today? Why did it surprise you?

Presentation
• Website Production Phases
You can download the electronic file, dw_8.ppt, at
www.macromedia.com/go/school_staff_development_2005/.
© 2005 Macromedia, Inc. 23

Guides
• Outline for the Day
• The Dreamweaver 8 Interface
• How to Set Up a Local Root Folder and Site Structure
• Naming Conventions
• How to Create a Basic Table
• How to Create Links
• Basic Project Plan
• Portfolio Flowchart
• How to Lay Out a Web Page with Layers
• How to Add Text from Another Document
• How to Create a Web Photo Album
• How to Check Links
• Project Rubric
• Resources
©2005 Macromedia, Inc. 29

Outline
Web Media with Dreamweaver 8: Building an Electronic
Portfolio
Time Task
9:00–9:20 AM
Activity 1
Overview of the Day
Introduction to activities
Introduction to goals:
• To become proficient in using Macromedia Dreamweaver 8
• To think about ways to use Dreamweaver in the classroom
• To gather ideas for supporting student technology learning
9:20–10:30 AM
Activity 2
10:30–10:45 AM
Break
Leave biography web pages visible on computers so everyone can look at each other’s
designs at leisure.
10:45–11:25 AM
Activity 3
11:25–12:15 PM
Activity 4
12:15–1:15 PM
Lunch Break
Leave products from morning activities visible on computers for others to see.
1:15–2:25 PM
Activity 5
2:25–2:45 PM
Activity 6
2:45–3:00 PM
Break
Leave portfolio pages visible on computers.
3:00–3:30 PM
Activity 7
Testing Web Pages
3:30–4:00 PM
Activity 8
Reflecting
Final question-and-answer period
©2005 Macromedia, Inc. Web Media with Dreamweaver 8: Building an Electronic Portfolio 31

Dreamweaver 8 Guide
The Dreamweaver 8 Interface
You can access Macromedia Dreamweaver 8 tools, commands, and features by using menus or by selecting options
from one of the Insert bars or from Dreamweaver panels. The most commonly used areas of the Dreamweaver
interface (Figure 1) are the Document window, the Insert bar, the panels, and the Property inspector.
The Document window displays the current document as you create and edit it. The Insert bar contains buttons for
creating and inserting objects such as images, tables, layers, and frames you might want to add to your web pages.
The Property inspector displays properties for the selected object or text and lets you modify those properties. The
right side of the window, by default, displays panels you can expand or collapse as you need them.
One of the most frequently used panels is the Files panel. This panel displays the organization of your site and lets
you open files for editing, publish files to a server, or delete files.
Another frequently used panel is the Assets panel. This panel provides two ways to view site assets. Site assets are
elements used in a site, such as images, colors, or movies.
The Assets panel provides two ways to view assets:
• The Site list shows all of the assets in your site.
• The Favorites list shows only the assets you’ve chosen to include in the Favorites list.
The Document Window and Panels
You can add and manipulate text, images, menus, tables, and other elements in the Document window, and it will
display an approximate representation of your web page.
Insert bar
Document
window
Property inspector Panels
Assets
panel
Figure 1 Dreamweaver 8 interface
©2005 Macromedia, Inc. The Dreamweaver 8 Interface 33

Dreamweaver 8 Guide
The Insert Bar
The Insert bar contains buttons for inserting various types of objects, such as images and tables, into a document.
The Insert bar contains several categories, such as Common and Layout. The Common Insert bar (Figure 2)
contains buttons for inserting the most commonly used objects.
Common Insert bar
Hyperlink
Named Anchor
Images Date
Email Link Table Media Comment
Templates
Tag Chooser
Figure 2 Common Insert bar
Hyperlink: Insert a hypertext link.
Email Link: Insert a link to an e-mail address.
Named Anchor: Insert a link to a specific location on a page.
Table: Insert a table.
Images: Insert an image.
Media: Insert media objects, such as Flash, Shockwave, Applets, and ActiveX.
Date: Insert the current date, with an option for automatic updating when you save the document.
Comment: Insert a comment, which will not be displayed on your web page.
Templates: Make a template based on the current document.
Tag Chooser: Insert an HTML tag.
34 The Dreamweaver 8 Interface ©2005 Macromedia, Inc.

Dreamweaver 8 Guide
Layout Insert bar
From the Layout Insert bar (Figure 3), you can insert tables and choose among three modes. Standard mode
displays tables as a grid of lines. Expanded Tables mode adds cell padding and spacing to tables and increases table
borders to make editing easier, and Layout mode displays tables as boxes you can draw, drag, and resize.
Table Draw Layer Tabular Data
Insert Div Tag Layout Table
Draw Layout Cell
Frames
Figure 3 Layout Insert bar
Table: Insert a table.
Insert Div Tag: Insert a div tag to create a content block.
Draw Layer: Insert a layer to hold content at any location on a page.
Layout Table: Draw a whole table with cells to hold information or objects.
Draw Layout Cell: Draw individual cells in a table.
Insert Row Above: Insert a row above the current row in a table.
Insert Row Below: Insert a row below the current row.
Insert Column to the Left: Insert a column to the left of the current column.
Insert Column to the Right: Insert a column to the right of the current column.
Frames: Insert a frame.
Tabular Data: Insert tabular data, such as from a spreadsheet.
The Property Inspector
In the Property inspector, you can view and change a variety of properties for the currently selected object or text.
Each kind of object has different properties. Figure 4 shows the Property inspector for a selected table. It displays
column and row attributes, cell colors, and border colors. You can change cell padding and cell spacing as well.
When you select text, you can alter font, size, color, and alignment in the Property inspector.
Figure 4 Property inspector
©2005 Macromedia, Inc. The Dreamweaver 8 Interface 35

Dreamweaver 8 Guide
How to Set Up a Local Root Folder and Site Structure
The first thing to do when creating a new website with Macromedia Dreamweaver 8 is to define a site and identify a
root folder where you will save all files, images, and other elements for the web pages.
Setting Up a Local Root Folder
1. Create a folder on your computer to serve as the main
folder for your website. Give the folder a name that
identifies the website. This folder is called the local root
folder.
Note: When creating a root folder for a site on your
computer, it is highly recommended that you place it at
the top level of your hard drive. For example, C:my-site
(Windows) or Macintosh HD: my-site (Macintosh).
2. Start Dreamweaver.
3. From the menu bar, select Site > Manage Sites.
The Manage Sites dialog box opens.
4. Click New and select Site from the pop-up menu that
appears.
The Site Definition dialog box opens (Figure 1). Make
sure the Basic tab is selected.
5. Delete the temporary name, Unnamed Site 1. Enter a
new name for the site and click Next.
Leave the URL field blank for now (or enter a URL
given by your instructor).
6. Make sure No, I do not want to use a server
technology, is selected (Figure 2), and click Next.
Figure 1 Site Definition dialog box (Basic)
Figure 2 Site Definition dialog box, page 2
©2005 Macromedia, Inc. How to Set Up a Local Root Folder and Site Structure 37

Dreamweaver 8 Guide
7. Make sure Edit local copies on my machine, then
upload to server when ready (recommended) is
selected (Figure 3).
8. Click the Folder icon to the right of Where on your
computer do you want to store your files?
The Choose Local Root Folder for Site dialog box opens
(Figure 4).
9. Locate and select the root folder you created for your
site. Click Open and then Select (Windows), or click
Choose (Macintosh).
10. Click Next.
11. Select None in the How do you connect to your remote
server? pop-up menu (Figure 5). Click Next.
Figure 4 Choose Local Root Folder for Site
dialog box
38 How to Set Up a Local Root Folder and Site Structure ©2005 Macromedia, Inc.

Dreamweaver 8 Guide
You are presented with a summary of your settings
(Figure 6).
12. Click Done.
Your local root folder is defined.
13. Click Done in the Manage Sites dialog box.
On the right side of the Dreamweaver window, the Files
panel displays the folders and files of your site
(Figure 7). In Windows, the Files panel is one of the
docked panels at the right side of the window. You can
leave this panel open as you work. On a Macintosh, the
left side of the Site panel shows a map of the site as you
create it. If the panel is not docked, you may want to
close it.
Figure 7 Files panel
Modifying Site Information
You can change settings for your site at any time.
1. Select Site > Manage Sites from the menu bar.
The Manage Sites dialog box opens (Figure 8).
2. Select the site name and click Edit.
The Site Definition dialog box opens.
3. Change any of your original settings as desired.
Figure 8 Manage Sites dialog box
©2005 Macromedia, Inc. How to Set Up a Local Root Folder and Site Structure 39

Guide
Naming Conventions
How you name your files is important. Good file and folder names make developing your site easier (especially
when you work with other people). They also help site visitors find your files. If you’re working with other people,
it’s a good idea to discuss how you will name your files.
The following tips apply to all files used on the web—HTML files, image files, Flash movies, and so on.
Tip Reason Example
Give files unique, meaningful
names.
Because you cannot put two files with the
same name in one folder, all filenames need to
be different. Use filenames that indicate the
contents of the files.
feedback_button.gif
instead of button3.gif
class-pet.jpg instead of
roo-roo.jpg
Use meaningful folder names. Folders help you organize content. If their
names are not meaningful, they will be less
helpful.
images
instead of
folder_2
Use lowercase letters instead of
uppercase (capital) letters.
Using a mix of uppercase and lowercase
letters increases the possibility of broken
links, because some web servers differentiate
between upper and lowercase.
class_home.htm
instead of
Class_Picture.htm
Use file extensions (.htm, .gif,
.jpg) consistently. Although you
can use either .htm or .html, you
should be consistent about using
one or the other.
Using a mix of file extensions also increases
the possibility of broken links.
index.htm and
directions.htm
instead of
index.html and
directions.htm
If you’re working on a Macintosh,
make sure you always include a
file extension.
Although Windows requires file extensions,
Macintosh does not. Web browsers need file
extensions in order to display files.
index.htm instead of index
Use a hyphen (-) or an underscore
(_) instead of a space.
Some web browsers do not recognize spaces. my-dog.gif or my_dog.gif
instead of
my dog.gif
Use letters and numbers. Many special symbols aren’t recognized by
web browsers.
my2friends.gif instead of
me&friends.gif
Keep filenames as short as
possible.
Not only does this help prevent broken links,
but some web servers will cut off names at 25
characters.
park_directions.htm
instead of
directions_to_the_fourth_
street_park_plus_a_map.
htm
©2005 Macromedia, Inc. Naming Conventions 41

Dreamweaver 8 Guide
How to Create a Basic Table
In Macromedia Dreamweaver 8, you can add text and images to table cells the same way you add text and images to
a page. After you create a table, you can easily modify both its appearance and its structure.
Inserting a Table on a Page
You can insert a table anywhere on a page, including within another table. You can quickly insert a standard table
with three rows and three columns, or you can modify options to insert a custom table.
When you insert a table, a good idea is to set a header property for a row or column if you will use that row or
column to provide labels for the information in the table. A header makes the table more accessible to people with
visual impairments, because screen readers can recognize that a header contains labels. (Note that you must set a
header row or column to provide such accessibility. It is not sufficient to use bold or centered text.)
To insert a table:
1. Open a document in Macromedia Dreamweaver 8.
2. Place the insertion point in your document where you
want the table to appear.
3. Select the Layout category on the Insert bar.
Make sure the Standard mode button is selected
(Figure 1).
4. Click the Insert Table button on the Layout Insert bar.
The Table dialog box opens (Figure 2).
5. Enter the number of rows and columns.
6. Make changes to any of the options in the dialog box.
For information about the options, click the Help button
in the dialog box.
Applying a column header or row header in particular
can improve the accessibility of a data table. Though not
visible on the page, such headers are read by screen
readers.
To set a header row or column:
7. Select one of the options in the Header section.
For example, if you create a table that lists a collection
of books, with columns labeled Author, Title, and Year,
you should set the top row as a header. By default,
header rows or columns are bolded and centered
(Figure 3). Screen readers can now read this header.
8. Click OK.
The table appears in your document.
Figure 1 Layout Insert bar with Standard mode
selected
Figure 2 Table dialog box
Figure 3 Table with top row set as header
©2005 Macromedia, Inc. How to Create a Basic Table 43

Dreamweaver 8 Guide
Selecting Table Elements
You can select an entire table, a row, or a column, or you can select a contiguous block of cells within a table. After
you’ve selected a table or cells, you can modify the appearance of the selection or of the text contained in the
selection.
To select an entire table:
Do one of the following:
• Click the upper left corner of the table or click
anywhere on the right or bottom edge.
• Click in a table cell, and then select
Modify > Table > Select Table.
Selection handles appear on the selected table’s lower
and right edges (Figure 4).
To select rows or columns:
1. Position the pointer to point at the left edge of a row or
the top edge of a column.
2. When the pointer changes to a selection arrow, click to
select the row or column, or drag to select multiple rows
or columns (Figure 5).
To select a single cell:
Do one of the following:
• Click in the cell. Then drag to select the cell.
• Click in the cell. Then select Edit > Select All.
Figure 4 Selection handles on a selected table
Figure 5 A selected column in a table
44 How to Create a Basic Table ©2005 Macromedia, Inc.

Dreamweaver 8 Guide
Adding Rows and Columns
You can add a single row or column, or you can add multiple rows or columns at the same time.
To add a row:
1. Place the insertion point in a table cell, or select an
entire row.
2. Do one of the following:
• Click the Insert Row Above or the Insert Row
Below button (Figure 6).
• Select Insert > Table Objects >
Insert Row Above or Insert >
Table Objects > Insert Row Below.
A new row appears below the insertion point or the
selected row.
To add a column:
1. Place the insertion point in a table cell, or select an
entire column.
• Click the Insert Column to the Left or the Insert
Column to the Right button (Figure 5).
• Select Insert > Table Objects > Insert Column to
the Left or Insert > Table Objects > Insert
Column to the Right.
Insert
Row
Insert Column
buttons
Figure 6 Layout Insert bar
Deleting Rows and Columns
You can delete a single row or column, or you can delete multiple rows or columns at the same time.
To delete rows or columns from a table:
1. Select one or more rows or columns.
2. Press Delete or Backspace.
To remove cell contents, but leave the cells intact:
1. Select one or more cells.
2. Select Edit > Clear or press Delete.
Note: If you select an entire row or column, and then
select Edit > Clear or press Delete, Dreamweaver
removes the entire row or column—not just their
contents—from the table.

Dreamweaver 8 Guide
Resizing Tables, Rows, and Columns
You can resize an entire table or individual rows and columns. When you resize an entire table, all the cells in the
table resize proportionately.
To resize a table:
Select the table and do one of the following.
• To resize the table horizontally, drag the selection
handle in the right.
• To resize the table vertically, drag the selection
handle in the bottom.
• To resize in both dimensions, drag the selection
handle at the lower right corner.
To resize a column’s width:
Select the column and do one of the following:
• Drag the right border of the column.
• In the Property inspector (Figure 7), change the
number in the Column Width text box.
To resize a row’s height:
Select the row and do one of the following:
• Drag the lower border of the row.
• In the Property inspector (Figure 7), change the
number in the Row Height text box.
Figure 7 Table Property inspector
46 How to Create a Basic Table ©2005 Macromedia, Inc.

Dreamweaver 8 Guide
Modifying Table Properties
You can modify the properties of a table, its rows and columns, or its cells by using the Property inspector.
Attention to table borders and cell padding in particular can help you create effective table designs.
You can also set a row or column as a header by using the Property inspector. Headers help make tables more
accessible.
To modify table properties:
1. Select the table you want to modify.
Make sure the Property inspector is open (Figure 8). In
Windows, it is docked at the bottom of the screen. If the
Property inspector is not open, select
Window > Properties.
2. Make changes to any of the options in the Property
inspector (Figure 8).
To modify table row or column properties:
1. Select the row or column you want to modify.
inspector.
To modify table cell properties:
1. In your document, select the cell or cells you want to
modify.
inspector.
To set a row or a column as header:
1. Select a row or column.
2. In the Property inspector, check Header.
The words in the row or column will appear centered
and bolded (Figure 9).
Figure 8 Table Property inspector
Figure 9 Table with top row set as header

Dreamweaver 8 Guide
How to Create Links
There are several different types of links in Macromedia Dreamweaver 8:
• Internal link (document-relative pathname link or site-root-relative pathname link) goes to another page in
your site.
• External link (absolute pathname link) goes to another site.
• Named Anchor link goes to a specific position on a page in your site.
• E-mail link opens a blank e-mail message window instead of linking to a page.
Creating an Internal Link
1. Select an image, a word, or a phrase of text you want to
format as a link.
Make sure the Property inspector is open (Figure 1). In
2. Beside the Link text box in the Property inspector
(Figure 1), click the Browse for File (file folder) icon.
The Select File dialog box opens (Figure 2).
Note: If you have the Files panel open, you can also
click the Point to File icon beside the Link text box and
then click and drag to draw a link line to the target file
in the Files panel. The name of the file you point to will
be added to the Link text box automatically.
3. Browse to the file you want to link and click on it.
4. Click OK.
The Select File dialog box closes. The filename appears
in the Property inspector.
Figure 1 Text Property inspector
Figure 2 Select File dialog box
Point to
File
Browse for
File
Creating an External Link
1. Select an image or text you want to format as a link.
2. In the Link text box in the Property inspector, type or
paste the address (URL) of the site to which you want to
link (Figure 3).
Remember to include “http://” in the address.
Figure 3 URL in Link text box
©2005 Macromedia, Inc. How to Create Links 49

Dreamweaver 8 Guide
Creating a Link to a Named Anchor
To link to a specific location on a web page, first create a named anchor at that location, and then link to the named
anchor.
1. Position the insertion point at the location on the page
where you want to define an anchor.
2. Select Insert > Named Anchor.
The Named Anchor dialog box opens (Figure 4).
3. Enter a short anchor name without any spaces.
4. Click OK.
5. Select an image or text to link to the named anchor.
6. In the Link text box in the Property inspector, type “#”
and then type or paste the anchor name.
Figure 4 Named Anchor dialog box
Creating a Link to an E-mail Address
You can add a link to an e-mail address. When visitors click the link, their default mail applications will launch.
1. Click in the document where you want the link to
appear, or select the text or image you want to format as
the e-mail link.
2. Do one of the following to insert the link:
• Select Insert > Email Link.
• In the Common category of the Insert bar, click the
Insert Email Link button. Figure 5 Email link dialog box
The Email Link dialog box opens (Figure 5).
3. In the Text box, enter text for the link.
If you selected text to format as the link, that text
appears in the Text box.
4. In the E-Mail text box, type the e-mail address.
5. Click OK to close the Email Link dialog box.
50 How to Create Links ©2005 Macromedia, Inc.

Guide
Basic Project Plan
Student Name:___________________________________________ Date: ____________________
Project Name: ___________________________________________ Project Deadline: ___________
Project Audience: _____________________________________________________________________
Deliverables (what will be produced at the end of the project): __________________________________
___________________________________________________________________________________
Complete the following project plan schedule:
Phase 1: Plan
Task Deadline Date Completed
Define goals and audience
Specify delivery requirements
Gather or create content (photographs, graphics, text)
Phase 2: Design
Flowchart
Paper sketches of possible screen layouts
Online screen designs (at least two)
Sample web pages
Phase 3: Build
Create storyboards (for large sites)
Build pages
Phase 4: Test
Test pages for accuracy, accessibility, usability
Revise to fix errors and incorporate user feedback
©2005 Macromedia, Inc. Basic Project Plan 51

Guide
Portfolio Flowchart
Draw arrows to show links between pages. Update the flowchart to show any additional pages.
Biography Lesson Plan Sample Work
Home Page
©2005 Macromedia, Inc. Portfolio Flowchart 53

Dreamweaver 8 Guide
How to Lay Out a Web Page with Layers
You can use Dreamweaver’s table design features to create a simple page layout. However, a more powerful
technique is to use layers, which are based on Cascading Style Sheets (CSS). A layer is a rectangular HTML
element that you can position anywhere on a page. Layers can contain text, images, or any other content you can
ordinarily place in the body of an HTML document.
Many designers prefer CSS-based layouts because CSS gives greater control over the positioning of elements,
reduces the amount of code you need, and enables you to format layout blocks with margins, borders, and colors. In
addition, people using screen readers to view web pages have a much easier time browsing pages built with CSS
because the code is simpler and shorter.
Create a New Page
1. Start Macromedia Dreamweaver 8.
2. Make sure the Files panel is visible (Figure 1). In
Windows, it is docked at the right side of the screen. If
the Files panel is not open, select Window > Files.
3. Make sure your portfolio site is selected. If it is not,
click the site pop-up menu and select your portfolio site.
4. Select File > New.
The New Document dialog box opens (Figure 2).
Site menu
5. Under Basic page, click HTML. Figure 1 Files panel
Figure 2 The New Document dialog box
6. Click Create.
A new untitled HTML document opens.
7. To save the untitled document as your home page, select
File > Save As.
The Save As dialog box opens to the root folder of your
portfolio site automatically.
8. Name the new page index.html and click Save.
©2005 Macromedia, Inc. How to Lay Out a Web Page with Layers 55

Dreamweaver 8 Guide
The new file, index.html, is added to the root folder in
the Files panel (Figure 3).
Figure 3 Files panel showing index.html
Insert a Layer
1. Select the Layout category on the Insert bar.
Make sure the Standard mode button is selected
(Figure 4).
2. Click the Draw Layer button (Figure 4).
The mouse pointer changes to a cross when you move it
over the page.
3. Select one of the page areas on your storyboard. Drag a
layer in the Dreamweaver document that matches the
page area’s size on your storyboard, and release the
mouse button.
Make sure not to click on the page again. You want to
leave the new layer selected (Figure 5).
4. Make sure the Property inspector is open (Figure 1). In
5. In the Layer ID box, enter a name for the layer.
Choose a name that will help you remember the layer’s
contents, such as header or navigation.
6. Click the Bg color box and select a color in the color
picker.
The layer changes to the selected color.
7. Open the Layers panel (Window > Layers).
You’ll see that Dreamweaver has added the new layer to
the list of layers.
8. Click once outside the new layer to deselect it.
A thin black line appears around the layer. This line
does not appear in a browser. If you do not see the line,
select View > Visual Aids > Layer Outlines.
9. Continue adding layers for all the sections on your
storyboard. You can locate layers directly alongside one
another (Figure 7).
Draw Layer button
Figure 4 Insert bar, Layout category
Figure 5 Layer inserted and selected
Figure 6 Layer Property inspector
Figure 7 Multiple layers on page
Layers panel
56 How to Lay Out a Web Page with Layers ©2005 Macromedia, Inc.

Dreamweaver 8 Guide
10. Save your page.
Resize Layers
You can resize an individual layer or simultaneously resize multiple layers to make them the same width and height.
Note: If the Prevent Overlaps option is checked in the Layers panel, you will not be able to resize a layer so it
overlaps with another layer.
1. Select a layer by clicking on its border or by clicking the
layer’s name in the Layers panel.
2. Do one of the following to resize the layer:
To resize by dragging, drag any of the layer’s resize
handles (Figure 7).
To resize one pixel at a time, hold down Control
(Windows) or Option (Macintosh) while pressing an
arrow key.
Note: The arrow keys move the right and bottom
borders of the layer; you can’t resize the top and left
borders with this technique.
In the Property inspector, type values for width (W) and
height (H).
Figure 8 Resize by dragging
Move Layers
You can move layers in Design view in much the same way you move objects in most basic graphics applications.
To move one or more selected layers:
1. Select one or more layers.
Layer resize handle
To move by dragging, drag the layer’s selection handle.
To move one pixel at a time, use the arrow keys.
Note: If the Prevent Overlaps option is checked in the
Layers panel, you will not be able to move a layer so
that it overlaps another layer.
Figure 9 Moving a layer
Selection
handle
©2005 Macromedia, Inc. How to Lay Out a Web Page with Layers 57

Dreamweaver 8 Guide
Add Content to Layers
You can images, text, and other content (such as Flash movies) to your layers just as you would elsewhere in a web
page.
1. To insert an image in a layer, click in the layer and
select Insert > Image on the menu bar.
Note: Make sure the layer is sized large enough to hold
the image or other content. If the layer is sized smaller
than the image, the layer may not display correctly in all
browsers.
2. In the Select Image Source dialog box, locate and select
an image to insert (such as your page banner). Then
click OK (Windows) or Choose (Macintosh).
The image appears on the layer (Figure 10).
3. To format the image on the layer, select the image and
select formatting elements in the Property inspector.
4. To add text to a layer, click in the layer and type text or
paste text copied from another document.
5. To format text, select the text and select formatting
elements in the Property inspector, such as font,
alignment, and size of the text.
Figure 10 Layer with image added
Preview a Page
To preview the page in a browser (Figure 12), select
File > Preview in Browser and then select a browser
from the submenu (or press F12).
Note: It is important to preview in a browser to make
sure your design fits in a standard browser window. Try
resizing the browser window to see the effect on your
page.
Figure 12 Web page in browser
58 How to Lay Out a Web Page with Layers ©2005 Macromedia, Inc.

Dreamweaver 8 Guide
How to Add Text from Another Document
Copy Text from Another Document
1. Open the document from which you want to copy text.
2. Select the text and select Edit > Copy.
3. Start Dreamweaver 8.
4. Open the Dreamweaver document in which you want to
paste the text.
5. Position the insertion point in the page where you want
to paste the copied text.
6. Select Edit > Paste.
The new text appears in the Dreamweaver document.
Note: Copied text may lose some of its original
formatting, including line breaks and paragraph breaks.
To insert a blank line after a section of text, position the
insertion point at the end of the last text line and press
Enter (Windows) or Return (Macintosh). To create a
line break at the insertion point, press Shift-Enter
(Windows) or Shift-Return (Macintosh).
7. To change the format of any new text in the document,
select the text and set options in the Property inspector.
Import Word HTML
HTML pages created in Microsoft Word have elements that need to be cleaned up before you can work with these
pages in Dreamweaver.
1. Select File > Open.
The Open dialog box opens.
2. Navigate to and select the HTML file you want to open,
and click Open.
The Word HTML file is opened in Dreamweaver.
3. Select Commands > Clean Up Word HTML.
The Clean Up Word HTML dialog box opens
(Figure 1).
4. Click OK.
You are presented with a summary of the cleanup
process.
5. Click OK.
Use the Property inspector to edit the text as necessary. Figure 1 Clean Up Word HTML dialog box
©2005 Macromedia, Inc. How to Add Text from Another Document 59

Dreamweaver 8 Guide
How to Create a Web Photo Album
You can create an interactive catalog of photographs or graphics by using the Create Web Photo Album command
in Dreamweaver 8. All you need is a folder of images.
1. Assemble all the images for your album in one folder
(preferably outside your local root folder).
2. Start Dreamweaver. Open your portfolio site if it isn’t
already open.
3. Open a new HTML page and then choose
Commands > Create Web Photo Album.
The Create Web Photo Album dialog box opens
(Figure 1).
In the dialog box, provide the following information:
• Photo Album Title: Title to display on the main page
of the photo album, which will display thumbnails for
the images in your album.
• Subheading Info: Subtitle to display on the main page.
• Other Info: Text to appear below subtitle on main
page.
• Source Images Folder: Folder for source images.
Click Browse and locate your folder of images.
• Destination Folder: Folder where the HTML and
image files for the photo album will be saved. Click
Browse and create a folder within the local root
folder.
• Thumbnail Size: The size of the thumbnail images on
the main page.
• Columns: Number of columns in the table that
displays the thumbnails. (If you have six to nine
images, three columns would work.)
• Thumbnail Format: GIF or JPEG format for the
thumbnail images.
• Photo Format: GIF or JPEG format for the large-size
images on the individual album pages. You can use
different formats for thumbnails and full-size images.
• Scale: Setting Scale to 100% creates large-size images
the same size as the originals. If your images are
large, you may need to scale them down.
• Create Navigation Path for Each Photo: Creates an
individual web page for each large-size image,
containing navigation links labeled Back, Home, and
Next. If you select this option, the thumbnails link to
the navigation pages. If you don’t select this option,
the thumbnails link directly to the large-size images.
Figure 1 Create Web Photo Album dialog box
©2005 Macromedia, Inc. How to Create a Web Photo Album 61

Dreamweaver 8 Guide
4. Click OK in the Create Web Photo Album dialog box.
Macromedia Fireworks 8 starts and creates all the
thumbnail and large-size images for the photo album. A
message window appears when the album is complete.
5. Click OK.
6. To preview the album in a browser (Figure 2), press
F12.
Note: If the images on the index page don’t line up,
return to the Document window and drag the outside
edges of the table to provide more space for the images
(Figure 3).
7. Replace the labels for each of the images on the home
page with brief descriptive labels (Figure 4).
8. Select each image in turn and add alternative text (Alt
tag) to make the page more accessible. Do this in the Alt
text box on the Property inspector (Figure 5).
Figure 2 Preview the album in a browser
Figure 3 Drag a table edge
Figure 4 Descriptive labels for images
Figure 5 Alternative text in the Alt text box
62 How to Create a Web Photo Album ©2005 Macromedia, Inc.

Dreamweaver 8 Guide
9. Using the Files panel (Window > Files), expand the
destination folder you chose for the HTML and image
files (Figure 6).
10. Open each HTML page (in the Pages folder) and replace
the filenames with descriptive labels (Figure 7).
Note: If you have a word-processing document with
description information about the images, you can copy
and paste that text into your image pages.
11. On the Files panel, replace each the filenames (in the
Pages folder) with more descriptive names. In the
Update Files dialog box, you will be asked if you want
to update the links to the file. Click Update to maintain
the links (Figure 8). Figure 6 Files panel
12. Save and close the index.htm page for your Web Photo
Album.
Add descriptive title
Figure 7 Replace filename with descriptive title
Figure 8 Update Files dialog box
©2005 Macromedia, Inc. How to Create a Web Photo Album 63

Dreamweaver 8 Guide
How to Check Links
A key technical testing task is to check all the links. Macromedia Dreamweaver 8 enables you to do this
automatically.
2. Make sure your site is open.
3. On the menu bar, select Site > Check Links Sitewide.
The Link Checker tab displays all the broken links in the site (Figure 1).
Figure 1 Link Checker tab
Note: Even though links are listed as broken, check them in the browser to confirm.
4. Fix the broken links and check the links again.
©2005 Macromedia, Inc. How to Check Links 65

Guide
Project Rubric
This general rubric is a tool for assessing various aspects of major web and rich-media projects. Select the
items that apply to a particular project.
Design Skills
Score Category 3 – Superior 2 – Proficient 1 – Novice
Composition White space,
symmetry, and focal
point are used
effectively. Site pages
(and elements within
pages) fit within their
borders in a pleasing
manner.
There is some use of
white space, symmetry,
and focal point. Site
pages (and elements
within pages) usually
fit appropriately within
their borders.
There is no use of
white space, symmetry,
and focal point. Site
pages (and elements
within pages) are cut
off inappropriately at
their borders or are
surrounded by
excessive white space.
Color Colors work together,
reinforcing the theme
of the design.
Background color
enhances images and
text design. Colors
strongly support
readability.
Colors are somewhat
complementary.
Background color
coordinates with
images and text design.
Colors do not interfere
with readability.
Colors clash and do
little for the theme of
the design. Background
color interferes with
text and images. Colors
make text less readable.
Typography Text is readable. Type
sizes communicate
information and are
compatible with overall
site design. White
space around text
supports readability and
design. Fonts and text
effects are compatible
with the design and
readability.
Text is readable, and
selected fonts support
design goals. Type
sizes reflect desired
emphasis. White space
around text strongly
supports readability and
design. Fonts and text
effects add to mood and
tone. Fonts enhance
readability through
color, size, and
contrast.
Text is not easily
readable. White space
is not used effectively.
Fonts and text effects
interfere with the
design and readability.
Usability Consistent site
navigation appears on
all pages, and all links
function properly.
Navigation gives users
access to all main pages
in the site and is
intuitive to use. Site
pages load in a
reasonable time, and
any noticeable delays
are worth the wait.
Site navigation appears
on all pages, and all
links function properly.
Navigation gives users
access to most main
pages in the site and is
intuitive to use. Some
site pages take a
noticeable time to load,
but most delays are
worth the wait.
Site navigation appears
on some pages, and not
all links function
properly. Navigation
does not allow users
access to all main pages
in the site and is not
intuitive to use. Some
site pages take a
noticeable time to load,
and the delays are
caused by irrelevant
elements.
©2005 Macromedia, Inc. Project Rubric 67

Guide
Use of
Technical
Elements
(Dreamweaver
8, Fireworks
8, or Flash 8)
Use of technical
elements and effects
adds to the overall
design of the site by
enhancing the user’s
experience and
supporting the goals
and message of the site.
Use of such elements or
effects is not excessive
or distracting.
Use of technical
consistently supports
the overall goals and
message of the site but
does not enhance the
user’s experience. Use
of such elements or
effects is not excessive
or distracting.
Use of technical
does not enhance the
user’s experience or
consistently support the
overall goals and
message of the site.
Storyboard Storyboard is thorough,
complete, and very
clear.
Storyboard is complete
but somewhat difficult
to interpret.
Storyboard provides
incomplete or
contradictory
production information.
Technical Skills
Accessibility All graphical site
elements, such as
images and buttons,
have alternative text
tags.
Some graphical site
elements, such as
images and buttons,
tags.
Very few graphical site
elements, such as
images and buttons,
tags.
Drawing Illustrations and
buttons are cleanly and
clearly drawn,
effectively using the
full range of drawing
and effects tools.
Illustrations and
buttons are drawn in a
sufficient manner,
using a range of
drawing and effects
tools.
Illustrations and
buttons are poorly
drawn, not always
using appropriate
drawing and effects
tools.
Color Palettes Color is consistently
applied, and palettes
are configured for the
web.
Color is consistently
applied most of the
time, and palettes are
usually configured for
the web.
Color is not
consistently applied
and palettes are usually
not configured for the
web.
Optimization Images have an
excellent balance of
quality and file size.
Images have a
satisfactory balance of
quality and file size.
The quality of images
is not sufficient, or the
file size is too large.
Tool Use Student knows what
tool to use to create
desired elements and
effects or uses
resources effectively
and independently to
find out. Uses tools
efficiently.
Student usually knows
what tool to use to
create desired elements
and effects but
sometimes needs to be
reminded to use
available information
about the tools. Uses
most tools efficiently.
Student frequently has
to ask what tool to use
to create desired
elements and effects.
Does not independently
use available
information about the
tools. Does not use
tools efficiently.
68 Project Rubric ©2005 Macromedia, Inc.

Guide
Research and Communication Skills
Design
Process
The design process
does not include all
appropriate elements,
such as sketches,
flowchart, storyboard,
and review comments.
The final product does
not completely reflect
the storyboard and
feedback.
The design process
includes elements such
as sketches, flowchart,
storyboard, and review
comments. The final
product reflects the
storyboard, with some
revisions based on
feedback.
The design process
includes all appropriate
elements, such as
sketches, flowchart,
storyboard, and review
comments. The final
product accurately
reflects the storyboard,
including storyboard
revisions based on
feedback and
thoughtful design
decisions made during
production.
Reviews of other
students’ designs do
not adequately address
content and design.
Feedback does not use
informative vocabulary
and is often not
constructive.
Feedback Reviews of other
students’ designs
provide thorough and
insightful analysis of
content and design.
Feedback uses clear
and informative
vocabulary and
connects comments to
design and content.
Feedback is always
constructive.
Reviews of other
students’ designs
provide some analysis
of content and design.
Feedback uses some
informative vocabulary
and connects comments
to design and content.
Feedback is not always
constructive.
Design presentations
provide little
information on the
goals, design concepts,
and requirements of a
project.
Presentation Design presentations
clearly and completely
state the goals, design
concepts, and
requirements of a
project.
Design presentations
cover the goals, design
concepts, and
requirements of a
project.
Student does not
collaborate with other
students to provide
feedback or assistance.
Fulfills assigned team
roles but does not
contribute equally to
project work. Does not
consult with other team
members before
making major project
decisions. Does not
help others build skills.
Team
Collaboration
Student collaborates
freely with other
students to provide
roles and contributes
equally to project work.
Consults with other
team members on
major project decisions
and voluntarily helps
others build skills to
complete the project.
Student collaborates
with other students as
required to provide
roles and contributes
equally to project work.
Sometimes consults
with other team
members on major
project decisions but
makes minimal effort to
help others build skills.
©2005 Macromedia, Inc. Project Rubric 69

Guide
Project Management Skills
Progressive
Design
Student does not use a
storyboard or peer
feedback.
Student uses a
storyboard to guide the
design process.
Inconsistently uses peer
feedback to guide the
redesign process.
Student consistently
uses a storyboard to
guide the design and
development process.
Thoughtfully uses peer
feedback to guide the
redesign process.
File
Management
Student files and
folders are consistently
named and logically
organized on both local
and remote drives. File
organization is created
at the start of a project.
Most student files and
folders are named and
organized logically on
both local and remote
drives. File
organization evolves as
project work
progresses.
Student files and
folders are
inconsistently named
and not logically
organized. File
organization is not seen
as an important task.
Student does not
respond to feedback, or
student redesigns
without deciding
whether the feedback
improves the content
and design of the
project.
Student responds to
feedback, deciding
which feedback
improves the content
and design of the
project. Incorporates
some of this feedback
into redesign.
Task Review Student responds
thoughtfully and
completely to feedback,
deciding which
feedback most
effectively improves
the content and design
of the project.
Incorporates this
feedback into redesign
of a project.
Time
Management
Student thoughtfully
and effectively allots
time for each phase of
the design and
Completes all phases
on schedule.
Student allots time for
each phase of the
design and
Completes most phases
on schedule.
Student does not
effectively allot time
for the phases of the
design and
Completes few phases
on schedule.
70 Project Rubric ©2005 Macromedia, Inc.

Guide
Resources
Design References
• Tutorials on graphic design and examples of web page design
www.mundidesign.com
• Topics related to web page design
www.webstyleguide.com/index.html
• Articles related to design aspects of web development
www.webreference.com/dlab/
• Site-planning basics
www.efuse.com/Plan/site_planning_basics.html
• Sources for web-design information and style guides
webdesign.about.com/compute/webdesign/msubstyle.htm
Portfolio References
• Discussion of teachers’ professional portfolios
www.teachnet.com/how-to/employment/portfolios/index.html
• A lesson plan for career portfolios
www.sccis.org/main/educators/lessonplans2.htm
• Using Technology to Frame the Past: Electronic Scrapbooking
www.oz.net/~markhow/writing/scrap.htm
• International developments in the use of electronic portfolios
www.icponline.org/feature_articles/f2_00.htm
Assessment References
• Kathy Schrock’s Guide for Educators – Assessment Rubrics
school.discovery.com/schrockguide/assess.html
• Cooperative Learning Rubric
whyfiles.larc.nasa.gov/text/educators/tools/eval/coop_rubric.html
Participant-contributed References
Share any quality references you’ve discovered for learning about design, assessment, or technical skills.
©2005 Macromedia, Inc. Resources 71

Bonus Guides for Quick Learners
• How to Use Templates
• How to Use Libraries
• How to Import Spreadsheet Tables
©2005 Macromedia, Inc. 73

Dreamweaver 8 Guide
How to Use Templates
You can use a Macromedia Dreamweaver 8 template document to create multiple pages with the same layout. In a
template, you control which page elements should remain constant in documents based on that template and which
elements can be changed. Templates are helpful for building a website in which most pages have the same header,
navigation system, and other elements. Using templates helps you save time as well as create and maintain a
consistent look when more than one person is developing a site.
Create a Template
2. Build a page that contains elements designed to appear
on all content pages such as common graphics, a
navigation bar, and common layout structures such as
tables (Figure 1).
Note: You may want to create navigation elements in
Macromedia Fireworks 8 and export them as HTML
documents.
3. Select File > Save as Template.
Dreamweaver creates a Templates folder in your site
root folder and saves your template in that folder.
Template files have a .dwt file extension.
Create an editable region
Editable regions in a template are the parts of the page layout
that can be changed in files based on the template. Locked
(non-editable) regions are the parts of the page layout that
remain constant from page to page. All regions in a new
template are locked, so to make the template useful, you
must make some regions editable.
1. Position the insertion point where you want to insert an
editable region in the template.
For example, you might want to use a table cell for
content that is specific to each page—that is, content
that changes from one page to another.
2. Do one of the following to create an editable region:
Select Insert > Template Objects > Editable Region.
Right-click (Windows) or Control-click (Macintosh) the
region and select Templates > New Editable Region
from the context menu.
In the Common category of the Insert bar, click the
Templates button (Figure 2), and select
Editable Region from the pop-up menu.
The New Editable Region dialog box opens (Figure 3).
Figure 1 Common elements on a web page
Templates
Figure 2 Templates pop-up menu
Figure 3 New Editable Region dialog box
©2005 Macromedia, Inc. How to Use Templates 75

Dreamweaver 8 Guide
4. In the dialog box, enter a unique name for the region,
and click OK.
The editable region is enclosed in a blue rectangle on
the template.
Note: You cannot use the same name for more than one
editable region in a particular template. Use only letters
and numbers in the name.
5. Close the template.
Create a document based on a template
Once you create a template, you can use it to create new
documents.
1. Select File > New.
2. In the New Document dialog box, select the Templates
tab.
The name of the dialog box changes to New from
Template (Figure 4).
3. In the Templates For list, select the site that contains the
template you want to use.
4. Select the template you want to use.
5. Make sure the Update page when template changes
option is selected.
With this option selected, Dreamweaver can update all
template-based pages if you change the template later.
6. Click Create to create a new template-based page.
The document opens in the Document window.
Figure 4 Templates tab in the New from Template
dialog box
Edit a Template
You can edit a template at any time, even if you have created pages based on the template.
1. Select Window > Assets.
The Assets panel opens.
2. Click the Templates button on the left side of the panel
(Figure 5).
A list of the templates for your site appears in the lower
pane. The upper pane displays a preview of the selected
template. (You may need to scroll the preview pane to
see this.)
3. Select the template you wish to edit and do one of the
following:
Double-click the name of the template.
Figure 5 Templates button in Assets panel
Figure 6 Edit button in Assets panel
Edit
Click the Edit button at the bottom of the panel
(Figure 6).
76 How to Use Templates ©2005 Macromedia, Inc.

Dreamweaver 8 Guide
4. Edit the template in the Document window, changing
non-editable elements or creating editable regions in the
template as desired.
5. Save the edited template by choosing File > Save.
The Update Template Files dialog box opens, with a list
of the documents based on your template (Figure 7).
6. Click Update to update the documents based on the
changes you made in your template.
If you have renamed or deleted any editable regions, the
Inconsistent Region Names dialog box opens
(Figure 8). It lists the regions in the documents based
on the template that no longer exist in the template.
Note: If you have enabled check in/check out, and the
files to be updated are currently checked in,
Dreamweaver asks to check these out before it can
update them.
7. Select a region from the list.
8. From the Move content to new region menu, select a
new region in which you want to place the content from
the selected region (Figure 8).
9. Repeat steps 7 and 8 for the remaining regions in the
list.
10. Click OK.
The Update Pages dialog box displays a summary of the
updates performed (Figure 9).
11. Click Close.
Figure 7 Update Template Files dialog box
Figure 8 Inconsistent Region Names dialog box
with Move Content to New Region menu
Figure 9 Update Pages dialog box
Delete a Template
1. Select the template in the Assets panel.
2. Click the Delete button (trash can icon) at the bottom of
the panel and confirm that you want to delete the
template.
The template file is deleted from your site.
Documents that were based on a template you have
deleted retain the structure and editable regions the
template file had before you deleted it. To turn such a
document into a normal HTML file without editable or
locked regions, you must detach it from the template.
©2005 Macromedia, Inc. How to Use Templates 77

Dreamweaver 8 Guide
Detach from a Template
To remove the template structure and constraints from a document based on a template, you can detach the
document from the template. When a document is detached from its template, you can edit any element, including
the regions that were previously locked.
1. To detach a document from a template, open the
document.
2. Select Modify > Templates > Detach from Template.
78 How to Use Templates ©2005 Macromedia, Inc.

Dreamweaver 8 Guide
How to Use Libraries
You can use a Macromedia Dreamweaver 8 library to store page elements such as images, text, sounds, or tables
you want to reuse throughout your website. When you insert a library item, Dreamweaver actually inserts a link to
the library item. If you later need to make changes to a library item, such as changing some text or an image,
updating the library item automatically updates each instance of the item on every page into which you’ve inserted
it.
Create a Library Item
1. Select an element of a document (such as an image or
text) to save as a library item.
2. Select Window > Assets, click the Library button, and
then click the New Library Item button at the bottom
right of the Assets panel (Figure 1).
3. Enter a name for the new library item: Make sure
Untitled is selected, type a name, and press Enter
(Windows) or Return (Macintosh) (Figure 2).
Each library item is saved as a separate file (with the file
extension .lbi) in the Library folder of the site’s local
root folder. Figure 1 Library and New Library Item buttons
Figure 2 Naming a new library item
Insert a Library Item
1. Position the insertion point in the Document window
where you want to insert a library item.
2. Make sure the Library panel is open. If it is not, select
Window > Assets and click the Library button on the
left side of the Assets panel (Figure 3).
The Assets panel opens and shows the Library category.
3. Drag a library item from the Assets panel to the
Document window, or select an item and click the
Insert button at the bottom of the panel.
Figure 3 Library button
NewNew
©2005 Macromedia, Inc. How to Use Libraries 79

Dreamweaver 8 Guide
Edit a Library Item
1. Select Window > Assets and click the Library button
on the left side of the Assets panel.
The Library category of the Assets panel opens.
2. Select a library item.
3. Click the Edit button at the bottom of the Assets panel.
Dreamweaver opens a new window for editing the
library item (Figure 4). This window is much like a
Document window. You can tell it is a Library item by
the .lbi filename extension on the document’s tab. On a
Macintosh, the background is also gray.
4. Edit the library item and then save your changes.
The Update Library Items dialog box opens, with a list
of the files that use the library item (Figure 5).
5. Click Update to replace the original library item with
your edited version in the files that use the library item.
The Update Pages dialog box opens.
6. To see a report on the updating process, make sure
Show log is selected (Figure 6).
7. Click Close.
Figure 4 Library editing window
Figure 5 Update Library Items dialog box
Figure 6 Update report
80 How to Use Libraries ©2005 Macromedia, Inc.

Dreamweaver 8 Guide
Update All Documents to Use Current Library Items
If you do not choose to update documents that use library items as you edit individual library items, you can later
update all pages in the site with the current version of all library items.
1. Make sure the library item with which you want to
update documents is open.
2. Select Modify > Library > Update Pages.
The Update Pages dialog box opens (Figure 7).
3. From the Look In pop-up menu, select Entire Site, and
then select the site name from the adjacent pop-up
menu.
4. Make sure Library Items is selected in the Update
section.
5. Click Start.
Dreamweaver updates the documents and provides a
report on the updating process (Figure 8). If you have
updated documents at the time you edited library items,
this report confirms that no additional updating was
required.
6. Click Close.
Figure 7 Update Pages dialog box
Figure 8 Update Pages report
©2005 Macromedia, Inc. How to Use Libraries 81

Dreamweaver 8 Guide
How to Import Spreadsheet Tables
You can import a spreadsheet table created in a program such as Microsoft Excel into your Macromedia
Dreamweaver 8 page. Save the spreadsheet file in tab-delimited (txt) or comma-separated-values format (csv).
These tables are a quick way for setting up the layout for a catalog or directory of information.
Save the Spreadsheet in TXT or CSV Format
1. Open the spreadsheet file in the program in which you
created it, such as Microsoft Excel.
2. Select File > Save As.
3. For the file format, select either Text (Tab delimited)
or CSV (Comma delimited) from the Save as type
(Windows) or Format (Macintosh) pop-up menu to save
the spreadsheet as a data file.
4. Save and close the spreadsheet program.
Insert the Spreadsheet into a Dreamweaver Document
1. Start Dreamweaver and open the document into which
you want to insert the spreadsheet table.
2. Select the Layout category on the Insert bar and click
the Tabular Data button (Figure 1).
The Import Tabular Data dialog box opens (Figure 2).
3. In the dialog box, click Browse and select the
spreadsheet file. Click Open.
4. On the Delimiter pop-up menu (Figure 3), select Tab if
you saved the spreadsheet file in tab-delimited format or
select Comma if you saved the file in CSV format.
5. Click OK to close the Insert Tabular Data dialog box.
Figure 1 Tabular Data button on Insert bar
Figure 2 Import Tabular Data dialog box
Figure 3 Delimiter pop-up menu
©2005 Macromedia, Inc. How to Import Spreadsheet Tables 83

Dreamweaver 8 Guide
Format a Data Table
1. To format the imported table, select the table in the
Dreamweaver document (Figure 4) and use the
Property inspector to set formatting options, or select
either Format Table or Sort Table from the
Commands menu.
Figure 4 Table selected
84 How to Import Spreadsheet Tables ©2005 Macromedia, Inc.

Dw8 sdg us

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (8)

En vedette

En vedette (15)

Similaire à Dw8 sdg us

Similaire à Dw8 sdg us (20)

Dw8 sdg us