Adobe Getting Started With Dreamweaver 8 Dw8 Qsg

User Manual: adobe Dreamweaver - 8 - Getting Started Free User Guide for Adobe Dreamweaver Software, Manual

Open the PDF directly: View PDF .
Page Count: 326

Download
Open PDF In Browser	View PDF

Getting Started with Dreamweaver

Trademarks
1 Step RoboPDF, ActiveEdit, ActiveTest, Authorware, Blue Sky Software, Blue Sky, Breeze, Breezo, Captivate, Central,
ColdFusion, Contribute, Database Explorer, Director, Dreamweaver, Fireworks, Flash, FlashCast, FlashHelp, Flash Lite,
FlashPaper, Flex, Flex Builder, Fontographer, FreeHand, Generator, HomeSite, JRun, MacRecorder, Macromedia, MXML,
RoboEngine, RoboHelp, RoboInfo, RoboPDF, Roundtrip, Roundtrip HTML, Shockwave, SoundEdit, Studio MX, UltraDev,
and WebHelp are either registered trademarks or trademarks of Macromedia, Inc. and may be registered in the United States or
in other jurisdictions including internationally. Other product names, logos, designs, titles, words, or phrases mentioned within
this publication may be trademarks, service marks, or trade names of Macromedia, Inc. or other entities and may be registered in
certain jurisdictions including internationally.
Third-Party Information
This guide contains 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. If you access a third-party website mentioned in this guide, then you do so at your
own risk. Macromedia provides these links only as a convenience, and the inclusion of the link does not imply that Macromedia
endorses or accepts any responsibility for the content on those third-party sites.
Opera ® browser Copyright © 1995-2002 Opera Software ASA and its suppliers. All rights reserved.
Copyright © 1997-2005 Macromedia, Inc. All rights reserved. This manual may not be copied, photocopied, reproduced,
translated, or converted to any electronic or machine-readable form in whole or in part without written approval from
Macromedia, Inc. Notwithstanding the foregoing, the owner or authorized user of a valid copy of the software with which
this manual was provided may print out one copy of this manual from an electronic version of this manual for the sole
purpose of such owner or authorized user learning to use such software, provided that no part of this manual may be
printed out, reproduced, distributed, resold, or transmitted for any other purposes, including, without limitation,
commercial purposes, such as selling copies of this documentation or providing paid-for support services.
Part Number ZDW80M100
Acknowledgments
Management: Charles Nadeau
Writing: Jon Michael Varese
Editing: Rosana Francescato, Lisa Stanziano, Evelyn Eldridge, Mark Nigara
Production and Editing Management: Patrice O’Neill and Rosana Francescato
Media Design and Production: Adam Barnett, Aaron Begley, Paul Benkman, John Francis, Geeta Karmarkar, Paul Rangel,
Arena Reed, Mario Reynoso
Localization Management: Melissa Baerwald
Special thanks to Sheila McGinn, Jennifer Rowe, Jay Armstrong, Sally Sadosky, Jennifer Taylor, Paul Gubbay, Melissa Baerwald,
Masayo Noda, Kristin Conradi, Yuko Yagi, and the entire Dreamweaver engineering and QA teams.
First Edition: September 2005
Macromedia, Inc.
601 Townsend St.
San Francisco, CA 94103

Contents
PART 1: INTRODUCTION TO DREAMWEAVER
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .11
What you can do with Dreamweaver 8 . . . . . . . . . . . . . . . . . . . . . . . . . . . .11
What's new in Dreamweaver 8 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Installing Dreamweaver 8 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Registering Dreamweaver 8 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Typographical conventions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Chapter 1: Learning Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . 15
Where to start . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Getting the most from the Dreamweaver documentation . . . . . . . . . . . 19
Using the Dreamweaver help system. . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Chapter 2: Dreamweaver Basics . . . . . . . . . . . . . . . . . . . . . . . . . .27
Getting to know the Dreamweaver 8 workspace . . . . . . . . . . . . . . . . . .27
Customizing the Dreamweaver 8 workspace . . . . . . . . . . . . . . . . . . . . 39
Accomplishing basic tasks in Dreamweaver 8 . . . . . . . . . . . . . . . . . . . 42

PART 2: TUTORIALS
Chapter 3: Tutorial: Setting Up Your Site and Project Files . . . 49
Learn about Dreamweaver sites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
Set up your project files. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
Define a local folder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
Chapter 4: Tutorial: Creating a Table-based Page Layout . . . . 55
Examine the design comp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
Create and save a new page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .57
Insert tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
Set table properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
Insert an image placeholder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .67
Add color to the page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
3

Chapter 5: Tutorial: Adding Content to Pages . . . . . . . . . . . . . . . 73
Locate your files. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
Review your task . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
Insert images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
Insert and play a Flash file . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
Insert Flash Video . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
Insert text. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89
Create links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
Preview your page in a browser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
Chapter 6: Tutorial: Formatting Your Page with CSS . . . . . . . . .99
Locate your files. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100
Review your task . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .101
Learn about CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102
Create a new style sheet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104
Attach a style sheet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106
Explore the CSS Styles panel. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109
Create a new CSS rule . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
Apply a class style to text. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .113
Format the navigation bar text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .114
(Optional) Center the contents of the page . . . . . . . . . . . . . . . . . . . . . . 125
Chapter 7: Tutorial: Publishing Your Site. . . . . . . . . . . . . . . . . . . 129
Learn about remote sites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129
Define a remote folder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130
Upload your local files. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133
Troubleshoot the remote folder setup (optional) . . . . . . . . . . . . . . . . . 134

PART 3: ADVANCED TUTORIALS
Chapter 8: Tutorial: Working with Code. . . . . . . . . . . . . . . . . . . . 139
Look at the code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
Switch to the coding workspace (Windows only) . . . . . . . . . . . . . . . . 142
Add a tag with the Tag Chooser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142
Edit a tag . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145
Look up information about a tag . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147
Add an image with code hints . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148
Check your changes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .151
Print your code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152

4

Contents

Chapter 9: Tutorial: Creating a CSS-based Page Layout . . . . . 153
Learn about CSS-based page layout . . . . . . . . . . . . . . . . . . . . . . . . . . .153
Examine the design comp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .154
Create and save a new page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .156
Insert layers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157
Add color to the page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171
Chapter 10: Tutorial: Displaying XML Data . . . . . . . . . . . . . . . . . 173
Locate your files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174
Review your task. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175
Learn about using XML and XSL with web pages . . . . . . . . . . . . . . . . 176
Learn about XSLT pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178
Convert an HTML page to an XSLT page . . . . . . . . . . . . . . . . . . . . . . . 179
Attach an XML data source to the XSLT page . . . . . . . . . . . . . . . . . . .180
Alter the XSLT page layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181
Bind XML data to the XSLT page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .183
Apply styles to the XML data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .185
Create a dynamic link . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .186
Add a Repeat Region XSLT object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188
Attach the XSLT page to the XML page . . . . . . . . . . . . . . . . . . . . . . . . . 191
Learn about other deployment options . . . . . . . . . . . . . . . . . . . . . . . . . .194
Chapter 11: Tutorial: Developing a Web Application . . . . . . . . . . 197
Before you begin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .198
Review your task. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .198
Open a document to work in . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200
Define a recordset . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .201
Display the database records . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204
Add dynamic fields to the table . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206
Set a repeated region . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207
View your page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208
Create a record insert form. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208
Copy files to the server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .214
Further reading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .214

Contents

5

PART 4: APPENDICES
Appendix A: Understanding Web Applications . . . . . . . . . . . . . . 217
About web applications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217
How a web application works . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219
Authoring dynamic pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .224
Choosing a server technology . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .226
Web application terminology . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227
Appendix B: Installing a Web Server . . . . . . . . . . . . . . . . . . . . . . 231
Getting started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231
Installing Internet Information Server . . . . . . . . . . . . . . . . . . . . . . . . . . .232
Testing IIS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .233
Testing the Macintosh web server (PHP developers) . . . . . . . . . . . . .233
Web server basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .234
Appendix C: Setup for Sample ColdFusion Site . . . . . . . . . . . . .237
Setup checklists for ColdFusion developers . . . . . . . . . . . . . . . . . . . . . 237
Configuring your system (ColdFusion) . . . . . . . . . . . . . . . . . . . . . . . . . .238
Defining a Dreamweaver site (ColdFusion) . . . . . . . . . . . . . . . . . . . . . 244
Connecting to the sample database (ColdFusion) . . . . . . . . . . . . . . . 250
Appendix D: Setup for Sample ASP.NET Site . . . . . . . . . . . . . 255
Setup checklists for ASP.NET developers . . . . . . . . . . . . . . . . . . . . . .255
Configuring your system (ASP.NET) . . . . . . . . . . . . . . . . . . . . . . . . . . .256
Defining a Dreamweaver site (ASP.NET) . . . . . . . . . . . . . . . . . . . . . . 260
Connecting to the sample database (ASP.NET) . . . . . . . . . . . . . . . . .265
Appendix E: Setup for Sample ASP Site . . . . . . . . . . . . . . . . . . 269
Setup checklists for ASP developers . . . . . . . . . . . . . . . . . . . . . . . . . . .269
Configuring your system (ASP) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .270
Defining a Dreamweaver site (ASP) . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275
Connecting to the sample database (ASP) . . . . . . . . . . . . . . . . . . . . . 280
Appendix F: Setup for Sample JSP Site . . . . . . . . . . . . . . . . . . 285
Setup checklists for JSP developers . . . . . . . . . . . . . . . . . . . . . . . . . . .285
Configuring your system (JSP) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .286
Defining a Dreamweaver site (JSP) . . . . . . . . . . . . . . . . . . . . . . . . . . . 290
Connecting to the sample database (JSP) . . . . . . . . . . . . . . . . . . . . . 295

6

Contents

Appendix G: Setup for Sample PHP Site . . . . . . . . . . . . . . . . . . . 301
Setup checklists for PHP developers . . . . . . . . . . . . . . . . . . . . . . . . . . 302
Configuring your system (PHP). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 302
Defining a Dreamweaver site (PHP) . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311
Connecting to the sample database (PHP) . . . . . . . . . . . . . . . . . . . . . .315
Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 321

Contents

7

8

Contents

1

PART 1

Introduction to Dreamweaver
Part One of this book introduces you to Macromedia Dreamweaver 8, and
includes installation information and a workspace overview. It also
provides a list of available resources for learning Dreamweaver.
This part contains the following sections:
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
Learning Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Dreamweaver Basics. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

9

Introduction
Macromedia Dreamweaver 8 is a professional HTML editor for designing,
coding, and developing websites, web pages, and web applications.
Whether you enjoy the control of hand-coding HTML, or prefer to work
in a visual editing environment, Dreamweaver provides you with helpful
tools to enhance your web creation experience.
This guide introduces you to using Macromedia Dreamweaver 8 if you’re
unfamiliar with any major aspect of it.The tutorials in this guide lead you
through the process of creating a simple but functional website.
This chapter covers the following topics:
What you can do with Dreamweaver 8 . . . . . . . . . . . . . . . . . . . . . . . . 11
What's new in Dreamweaver 8 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Installing Dreamweaver 8. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Registering Dreamweaver 8 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Typographical conventions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

What you can do with
Dreamweaver 8
The visual editing features in Dreamweaver let you quickly create web
pages without writing a line of code. You can view all your site elements or
assets and drag them from an easy-to-use panel directly into a document.
You can streamline your development workflow by creating and editing
images in Macromedia Fireworks or another graphics application, and then
import them directly into Dreamweaver. Dreamweaver also provides tools
that make it easy to add Flash assets to web pages.

11

In addition to drag-and-drop features that help you build web pages,
Dreamweaver provides a full-featured coding environment that includes
code-editing tools (such as code coloring, tag completion, a coding toolbar,
and code collapse) and language reference material on Cascading Style
Sheets (CSS), JavaScript, ColdFusion Markup Language (CFML), and
other languages. Macromedia Roundtrip HTML technology imports your
hand-coded HTML documents without reformatting the code; you can
then reformat code with your preferred formatting style.
Dreamweaver also lets you build dynamic, database-driven web
applications using server technologies such as CFML, ASP.NET, ASP, JSP,
and PHP. If your preference is for working with XML data, Dreamweaver
provides tools that let you easily create XSLT pages, attach XML files, and
display XML data on your web pages.
Dreamweaver is fully customizable. You can create your own objects and
commands, modify keyboard shortcuts, and even write JavaScript code to
extend Dreamweaver capabilities with new behaviors, Property inspectors,
and site reports.
For more information on the resources available for learning Dreamweaver,
see Chapter 1, “Learning Dreamweaver,” on page 15.

What's new in Dreamweaver 8
Dreamweaver 8 includes many new features that help you build websites
and applications with a minimal amount of time and effort. Dreamweaver
makes complex technologies simple and accessible, helping you accomplish
more in less time.
Following are a few of the key new features in Dreamweaver 8:

12

Introduction

■

Zoom tool and guides

■

Visual XML data binding

■

New CSS Styles panel

■

CSS layout visualization

■

Code collapse

■

Coding toolbar

■

Background file transfer

■

Insert Flash Video command

For a complete list and description of new features in Dreamweaver 8, see
“What’s new in Dreamweaver 8” in Using Dreamweaver (Help > Using
Dreamweaver).

Installing Dreamweaver 8
This section explains how to install Dreamweaver.
Be sure to read the release notes on the Macromedia website at
www.macromedia.com/go/dw_documentation for late-breaking
information or instructions.
To install Dreamweaver:
1.

Insert the Dreamweaver CD into your computer’s CD-ROM drive.

2.

Do one of the following:
■

■

3.

In Windows, the Dreamweaver installation program starts
automatically.
In Macintosh, double-click the Dreamweaver installer icon that
appears on the desktop.

Follow the onscreen instructions.
The installation program prompts you to enter the required
information.

4.

If prompted to do so, restart your computer.

Registering Dreamweaver 8
To get additional Macromedia support, it’s a good idea to register your
copy of Macromedia Dreamweaver 8 electronically or by mail.
When you register, you can sign up to receive up-to-the-minute notices
about upgrades and new Macromedia products. You can also sign up for
timely e-mail notices about product updates and new content appearing on
both the www.macromedia.com and the www-euro.macromedia.com
websites.

Registering Dreamweaver 8

13

To register Macromedia Dreamweaver 8, do one of the
following:
■

Select Help > Online Registration and fill out the electronic form.

■

Select Help > Print Registration, print the form, and mail it to the
address shown on the form.

Typographical conventions
The following typographical conventions are used in this guide:

14

Introduction

■

Menu items are shown in this format: menu name > menu item name.
Items in submenus are shown in this format: menu name > submenu
name > menu item name.

■

Code font

■

Italic code font

■

Bold roman text indicates text that you enter verbatim.

indicates HTML tag and attribute names as well as literal
text used in examples.

indicates replaceable items (sometimes called
metasymbols) in code.

CHAPTER 1

Learning Dreamweaver

1

Macromedia Dreamweaver 8 includes a variety of resources to help you
learn the program quickly and become proficient in creating your own web
pages. All of the Dreamweaver documentation is available in both
electronic help and PDF format.
This chapter contains the following topics:
Where to start . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Getting the most from the Dreamweaver documentation. . . . . . . 19
Using the Dreamweaver help system . . . . . . . . . . . . . . . . . . . . . . . . 24

Where to start
The Dreamweaver documentation includes information for readers from a
variety of backgrounds. This section helps you understand how to
approach the documentation, depending on what your background is, and
what you want to accomplish with Dreamweaver.
This section covers the following topics:
■

“Web-design novices” on page 15

■

“Experienced web designers” on page 16

■

“Experienced hand-coders” on page 18

■

“Web application developers” on page 18

Web-design novices
If you are relatively new to web design, this section will point you to
sections of the Dreamweaver documentation that are most appropriate for
your background.

15

For web-design novices:
1.

Begin by reading Chapter 2, “Dreamweaver Basics,” on page 27. Then
continue by doing the tutorials in this book. The tutorials are divided
into two sections. The first five tutorials are for beginners, and take you
through the process of developing a small but functional website from
start to finish. The second section of tutorials introduces you to more
advanced concepts. You might want to wait to do the more advanced
tutorials until you’ve developed some experience building web pages.

2.

In Using Dreamweaver (Help > Using Dreamweaver), you get a more
comprehensive idea of what you learned in this Getting Started with
Dreamweaver guide by reading Chapter 1, “Exploring the Workspace,”
Chapter 2, “Setting Up a Dreamweaver Site,” Chapter 3, “Creating and
Opening Documents” and Chapter 4, “Managing Your Files,”.

3.

Learn about page layout by reading Chapter 7, “Laying Out Pages with
CSS,” and Chapter 8, “Presenting Content with Tables” in Using
Dreamweaver.

4.

To learn about formatting text and including images in your pages, read
Chapter 13, “Inserting and Formatting Text,” and Chapter 14,
“Inserting Images” in Using Dreamweaver.

5.

That’s all you really need to begin producing high-quality websites, but
when you’re ready to learn how to use more advanced tools, you can
proceed through the rest of the static-page chapters in Using
Dreamweaver. You might want to wait to read the dynamic-page
chapters until you’re more familiar with creating web pages.

Experienced web designers
If you are an experienced web designer, this section will point you to
sections of the Dreamweaver documentation that are most appropriate for
your background. There are two different approaches: one for designers
who are new to Dreamweaver and one for designers who are familiar with
Dreamweaver but would like to learn more about creating dynamic pages.

16

Learning Dreamweaver

For experienced web designers who are new to Dreamweaver:
1.

Begin by reading the tutorials in this Getting Started with Dreamweaver
guide.

2.

In Using Dreamweaver (Help > Using Dreamweaver), read Chapter 1,
“Exploring the Workspace” to learn more about the Dreamweaver user
interface.

3.

Although much of the material in Chapter 2, “Setting Up a
Dreamweaver Site” and Chapter 4, “Managing Your Files” is probably
familiar to you, skim those chapters to see how these familiar concepts
are implemented in Dreamweaver. Pay particular attention to the
sections about setting up a Dreamweaver site.

4.

For useful information on the details of using Dreamweaver to create
basic HTML pages, read Chapter 13, “Inserting and Formatting Text”
and Chapter 14, “Inserting Images”.

5.

For information about coding in Dreamweaver, see Chapter 19,
“Setting Up Your Coding Environment,” Chapter 20, “Coding in
Dreamweaver,” Chapter 21, “Optimizing and Debugging Your Code,”
and Chapter 22, “Editing Code in Design View”.

6.

Read the overview at the beginning of each of the other chapters in
Using Dreamweaver to determine whether its topics are of interest to
you.

For experienced web designers, familiar with Dreamweaver,
who want to learn about creating dynamic pages:
1.

Begin by reading Appendix A, “Understanding Web Applications,” on
page 217 and Chapter 11, “Tutorial: Developing a Web Application,”
on page 197.

2.

In Using Dreamweaver (Help > Using Dreamweaver), skim Chapter 1,
“Exploring the Workspace” to learn about new aspects of the
Dreamweaver user interface, and then read Chapter 30, “Optimizing
the Workspace for Visual Development”.

3.

Become familiar with the Dreamweaver workflow for dynamic pages by
reading Chapter 31, “The Workflow for Dynamic Page Design”.

4.

Set up a web server and application server. (See Chapter 23, “Setting Up
a Web Application”.)

Where to start

17

5.

Connect to a database. (See “Connecting to a database” in Chapter 23,
“Setting Up a Web Application”.)

6.

Read the overview at the beginning of each chapter in Using
Dreamweaver to determine whether its topics are of interest to you.

Experienced hand-coders
If you are an experienced hand-coder, this section will point you to sections
of the Dreamweaver documentation that are most appropriate for your
background.
For experienced hand-coders:
1.

Begin by reading Chapter 8, “Tutorial: Working with Code” in this
Getting Started with Dreamweaver guide.

2.

In Using Dreamweaver (Help > Using Dreamweaver), read Chapter 1,
“Exploring the Workspace” to learn more about the Dreamweaver user
interface.

3.

Although much of the material in Chapter 2, “Setting Up a
Dreamweaver Site” and Chapter 4, “Managing Your Files” is probably
familiar to you, skim those chapters to see how these familiar concepts
are implemented in Dreamweaver. Pay particular attention to the
sections on setting up a Dreamweaver site.

4.

Read more about coding with Dreamweaver in Chapter 19, “Setting Up
Your Coding Environment,” Chapter 20, “Coding in Dreamweaver,”
Chapter 21, “Optimizing and Debugging Your Code,” and Chapter 22,
“Editing Code in Design View”.

5.

Read the overview at the beginning of each chapter in Using
Dreamweaver to determine whether its topics are of interest to you.

Web application developers
If you are a web application developer, this section will point you to
sections of the Dreamweaver documentation that are most appropriate for
your background. There are two different approaches, depending on
whether you’ve used Dreamweaver before.

18

Learning Dreamweaver

For web application developers who have not used
Dreamweaver:
1.

Begin by quickly reading this Getting Started with Dreamweaver guide to
familiarize yourself with the basics of using Dreamweaver.

2.

In Using Dreamweaver (Help > Using Dreamweaver), read Chapter 1,
“Exploring the Workspace” to learn more about the Dreamweaver user
interface.

3.

Although much of the material in Chapter 2, “Setting Up a
Dreamweaver Site” and Chapter 4, “Managing Your Files” is probably
familiar to you, skim those chapters to see how these familiar concepts
are implemented in Dreamweaver. Pay particular attention to the
sections on setting up a Dreamweaver site.

4.

Set up a web server and application server using Dreamweaver. (See
Chapter 23, “Setting Up a Web Application”.)

5.

Connect to a database. (See “Connecting to a database” in Chapter 23,
“Setting Up a Web Application”.)

6.

Read the overview at the beginning of each of the chapter in Using
Dreamweaver to determine whether its topics are of interest to you.

For experienced web application developers who have used
Dreamweaver:
1.

Begin by reading “What’s new in Dreamweaver 8” in Using
Dreamweaver (Help > Using Dreamweaver). The “What’s new” section
is in “Introduction”.

2.

Skim Chapter 1, “Exploring the Workspace” to learn about new aspects
of the Dreamweaver user interface.

Getting the most from the
Dreamweaver documentation
Dreamweaver includes a variety of media to help you learn the program
quickly and become proficient in creating web pages. The Dreamweaver
help system includes several documents that help you learn about
Dreamweaver, Dreamweaver Extensibility, and ColdFusion. You can also
consult a number of additional online resources as you learn how to build
web pages.

Getting the most from the Dreamweaver documentation

19

Accessing the Dreamweaver
documentation
The following table summarizes the documentation included in the
Dreamweaver help system.
You can purchase printed versions of select titles. For more information,
see www.macromedia.com/go/buy_books.
Title

Description/
Audience

Where to Find It

Getting Started
Basic introduction • View in Dreamweaver: Select
Help > Getting Started with
with Dreamweaver to Dreamweaver
Dreamweaver
concepts and the
• View online: http://
interface, with
livedocs.macromedia.com/go/
detailed beginner
livedocs_dreamweaver/
tutorials. Intended
• Get the PDF:
for beginning
www.macromedia.com/go/
users, as well as
dw_documentation
intermediate and
advanced users
who want to learn
about new
features.
Using
Dreamweaver

20

Learning Dreamweaver

• View in Dreamweaver: Select
Comprehensive
Help > Dreamweaver Help, or
information about
Help > Using Dreamweaver
all Dreamweaver
features. Intended • View online: http://
livedocs.macromedia.com/go/
for all
livedocs_dreamweaver/
Dreamweaver
• Get the PDF:
users.
www.macromedia.com/go/
dw_documentation

Title

Description/
Audience

Where to Find It

Extending
Dreamweaver

Description of the • View in Dreamweaver: Select
Help > Extending Dreamweaver
Dreamweaver
• View online: http://
framework and
livedocs.macromedia.com/go/
application
livedocs_dreamweaver/
programming
•
Get the PDF:
interface (API).
www.macromedia.com/go/
Intended for
dw_documentation
advanced users
who want to build
extensions or
customize the
Dreamweaver
interface.

• View in Dreamweaver: Select
Dreamweaver API Descriptions of
Help > Dreamweaver API
Reference
the utility API and
Reference
the JavaScript
API, both of which • View online: http://
livedocs.macromedia.com/go/
let you perform
livedocs_dreamweaver/
various
• Get the PDF:
supporting tasks
www.macromedia.com/go/
when developing
dw_documentation
Dreamweaver
extensions.
Intended for
advanced users
who want to build
extensions or
customize the
Dreamweaver
interface.

Getting the most from the Dreamweaver documentation

21

Title

Description/
Audience

Where to Find It

Using ColdFusion A selection of the • View in Dreamweaver: Select
Help > Using ColdFusion
most important
• View online: http://
books in the
livedocs.macromedia.com/go/
ColdFusion
livedocs_coldfusion/
documentation
•
Get the PDF:
set. (The full set is
www.macromedia.com/go/
available on
cf_documentation
LiveDocs.)
Intended for
anyone interested
in ColdFusion,
from beginners to
advanced
developers.
Reference

22

Learning Dreamweaver

• View in Dreamweaver: Select
HTML, server
Help > Reference. For a full list of
model, and other
manuals, click the Book pop-up
types of reference
menu in the Reference panel.
manuals, mainly
published by
O’Reilly. Intended
for anyone
needing more
information about
coding syntax,
concepts, and so
on.

Accessing additional online Dreamweaver
resources
The following table summarizes additional online resources for learning
Dreamweaver.
Resource

Description/
Audience

Where to Find It

Dreamweaver
Support Center

TechNotes, plus
support and
problem-solving
information for
Dreamweaver
users.

www.macromedia.com/go/
dreamweaver_support

Dreamweaver
Articles and
www.macromedia.com/go/
Developer Center tutorials to help
dreamweaver_devcenter
you improve your
skills and learn
new ones.
Dreamweaver
Documentation
Resource Center

Product manuals www.macromedia.com/go/
in PDF format,
dw_documentation
errata, tutorials,
and release notes.

Macromedia
Online Forums

Discussion and
problem-solving
information by
Dreamweaver
users, technical
support
representatives,
and the
Dreamweaver
development
team.

Macromedia
Training

Courses featuring www.macromedia.com/go/
hands-on tasks
dreamweaver_training
and real-world
scenarios.

www.macromedia.com/go/
dreamweaver_newsgroup

Getting the most from the Dreamweaver documentation

23

Using the Dreamweaver help
system
The online help system available in the Help menu provides detailed
information on all tasks you can perform with Dreamweaver. To see a list
of documents available in Help, see “Accessing the Dreamweaver
documentation” on page 20.
This section covers the following topics:
■

“Opening Help” on page 24

■

“Searching help” on page 24

■

“Using the index” on page 25

■

“Changing the font size” on page 25

■

“Using the Start Page” on page 25

■

“Printing the Dreamweaver Documentation” on page 26

■

“Discussing the Dreamweaver documentation with LiveDocs”
on page 26

Opening Help
You can access in-product help while you work in Dreamweaver.
To open Dreamweaver Help:
■

Select Help > Dreamweaver Help.

Searching help
You can do a full text search of Dreamweaver Help.
To search in-product help (Windows):

TIP
24

1.

In Dreamweaver Help, click the Search tab.

2.

Type a word or phrase in the text box, and then click List Topics.

3.

Double-click a topic in the list of results to display it.

To search in-product help (Macintosh):
To search for a
specific phrase,
enclose it in double
quotes.

Learning Dreamweaver

1.

In Dreamweaver Help, type a word or phrase in the Ask a Question text
box, and then press Enter.

2.

Double-click a topic in the list of results to display it.

Using the index
You can find information quickly with the index.
To use the index (Windows):
1.

In Dreamweaver Help, click the Index tab.

2.

Scroll to an index entry in the alphabetized list and double-click it to
display the indexed information.

1.

In Dreamweaver Help, click the Index link in the table of contents.

2.

Click a letter and scroll to an index entry in the list.

3.

Click a number beside the entry to display the indexed information.

TIP

To use the index (Macintosh):

You can start typing
a keyword in the text
box to quickly scroll
to an index entry.

Changing the font size
You can change the size of the font used by the help system.
To change the font size in the Windows help viewer:
1.

Open Internet Explorer.
The font size in the Windows help viewer is set in Internet Explorer.

2.

Select View > Text Size, and then select a size.

To change the font size in the Apple help viewer:
■

In help, select Edit > Decrease Font Size, or Edit > Increase Font Size.

Using the Start Page
When you start Dreamweaver without opening a document, the
Dreamweaver Start page appears in the work environment. The Start page
gives you quick access to Dreamweaver tutorials, recent files, and
Dreamweaver Exchange, where you can add new capabilities to some
Dreamweaver features. Use the Start page much like a web page. Click any
of the features you see to use them.
To disable the Start page:
1.

Run Dreamweaver without opening a document.
The Start page is displayed.

2.

Click Don’t Show Again.

Using the Dreamweaver help system

25

Printing the Dreamweaver Documentation
The following books are available in PDF format on the Macromedia
website at www.macromedia.com/go/dw_documentation:
■

Using Dreamweaver

■

Getting Started with Dreamweaver

■

Extending Dreamweaver

■

Dreamweaver API Reference

You can print all or part of the PDF on your own printer or you can bring
the PDF to a copy shop.

Discussing the Dreamweaver
documentation with LiveDocs
The Dreamweaver documentation is also available online in LiveDocs
format. The LiveDocs version of the Dreamweaver Help looks very similar
to the in-product help, but it allows you to comment on the contents of
individual help pages. You can add useful information on a specific
Dreamweaver topic based on your own experience, or solicit advice from
fellow Dreamweaver designers and developers.
The Dreamweaver LiveDocs are available at http://
livedocs.macromedia.com/go/livedocs_dreamweaver/

26

Learning Dreamweaver

CHAPTER 2

Dreamweaver Basics

2

To get the most out of your Macromedia Dreamweaver 8 experience, you
should understand the basic elements of the Dreamweaver workspace. This
chapter introduces you to the most important and commonly used
workspace elements, and tells you how to accomplish some basic tasks in
Dreamweaver.
This chapter contains the following sections:
Getting to know the Dreamweaver 8 workspace . . . . . . . . . . . . . . 27
Customizing the Dreamweaver 8 workspace . . . . . . . . . . . . . . . . . 39
Accomplishing basic tasks in Dreamweaver 8 . . . . . . . . . . . . . . . . 42

Getting to know the
Dreamweaver 8 workspace
The Dreamweaver workspace lets you view documents and object
properties. The workspace also places many of the most common
operations in toolbars so that you can quickly make changes to your
documents.
This section is designed to give you an overview of the Dreamweaver 8
workspace. For more comprehensive information about any of the
workspace elements introduced in this section, see Chapter 1, “Exploring
the Workspace” in Using Dreamweaver.
This section contains the following topics:
■

“The workspace layout” on page 28

■

“The Document window” on page 30

■

“The Document toolbar” on page 30

■

“The status bar” on page 32

■

“The Insert bar” on page 33

27

■

“The Coding toolbar” on page 35

■

“The Property inspector” on page 36

■

“The Files panel” on page 37

■

“The CSS Styles panel” on page 38

The workspace layout
In Windows, Dreamweaver provides an all-in-one-window integrated
layout. In the integrated workspace, all windows and panels are integrated
into a single larger application window.
Insert bar
Document toolbar

Tag selector
N OT E

28

Dreamweaver Basics

Document window

Property inspector

Panel groups

Files panel

The Windows workspace also has a Coder option, which docks the panel
groups on the left side and displays the Document window in Code view
by default. For more information, see “Using the coder-oriented
workspace (Windows only)” in Using Dreamweaver. To use this option,
see “Choosing the workspace layout (Windows only)” on page 39.

On the Macintosh, Dreamweaver can display multiple documents in a
single window with tabs that identify each document. Dreamweaver can
also appear as part of a floating workspace in which each document appears
in its own individual window. Panel groups are initially docked together,
but can be undocked into their own windows. Windows “snap”
automatically to each other, to the sides of the screen, and to the
Document window as you drag or resize them.
Document toolbar
Document window
Insert bar

Tag selector

Property inspector

Panel groups

Files panel

You can switch between different layouts in both Windows and Macintosh.
For more information, see “Choosing the workspace layout
(Windows only)” on page 39, and “Displaying tabbed documents
(Macintosh)” on page 40.

Getting to know the Dreamweaver 8 workspace

29

The Document window
The Document window shows the current document. You can select any of
the following views:
Design view

is a design environment for visual page layout, visual editing,
and rapid application development. In this view, Dreamweaver displays a
fully editable, visual representation of the document, similar to what you
would see viewing the page in a browser.
Code view is a hand-coding environment for writing and editing HTML,
JavaScript, server-language code—such as PHP or ColdFusion Markup
Language (CFML)—and any other kind of code. For more information,
see Chapter 20, “Coding in Dreamweaver” in Using Dreamweaver.
Code and Design view lets you view both Code view and Design view for
the same document in a single window.

When the Document window has a title bar, the title bar displays the page
title and, in parentheses, the file’s path and filename. After the filename,
Dreamweaver displays an asterisk if you’ve made changes that you haven’t
saved yet.
When the Document window is maximized in the integrated workspace
layout (Windows only), it has no title bar; in that case the page title and
the file’s path and filename appear in the title bar of the main workspace
window.
Additionally, when a Document window is maximized, tabs appear at the
top of the Document window area showing the filenames of all open
documents. To switch to a document, click its tab.
For more information about using the Document window, see Chapter 1,
“Exploring the Workspace” in Using Dreamweaver.

The Document toolbar
The Document toolbar contains buttons that let you toggle between
different views of your document quickly: Code, Design, and a split view
that shows both Code and Design view.

30

Dreamweaver Basics

The toolbar also contains some common commands and options related to
viewing the document and transferring it between the local and remote
sites.
Show Code View
Show Code and Design Views
Show Design View

Server Debug

No Browser/Check Errors
Validate Markup
File Management

Visual Aids
View Options
Refresh Design View

Document Title

Preview/Debug in Browser

The following options appear in the Document toolbar:
Show Code View

displays only the Code view in the Document window.

Show Code and Design Views displays Code view in part of the
Document window and Design view in another part. When you select this
combined view, the option Design View on Top becomes available in the
View Options menu. Use this option to specify which view appears at the
top of your Document window.
Show Design View

displays only the Design view in the Document

window.
Server Debug displays a report to help you debug the current ColdFusion

page. The report includes errors, if any, in your page.
Document Title allows you to enter a title for your document, to be
displayed in the browser’s title bar. If your document already has a title, it
appears in this field.
No Browser/Check Errors enables

you to check cross-browser

compatibility.
Validate Markup

lets you validate the current document or a selected tag.

File Management

displays the File Management pop-up menu.

Preview/Debug in Browser

allows you to preview or debug your
document in a browser. Select a browser from the pop-up menu.
Refresh Design View

refreshes the document’s Design view after you
make changes in Code view. Changes you make in Code view don’t
automatically appear in Design view until you perform certain actions,
such as saving the file or clicking this button.

Getting to know the Dreamweaver 8 workspace

31

View Options allows you to set options for Code view and Design view,
including which view should appear above the other. Options in the menu
are for the current view: Design view, Code view, or both.
Visual Aids lets

you use different visual aids to design your pages.

For more information about using the Document toolbar, see Chapter 1,
“Exploring the Workspace” in Using Dreamweaver.

The status bar
The status bar at the bottom of the Document window provides additional
information about the document you are creating.
Document size and
estimated download time

Tag selector

Window Size pop-up menu
Set magnification
Zoom tool
Hand tool
Select tool

The tag selector shows the hierarchy of tags surrounding the current
selection. Click any tag in the hierarchy to select that tag and all its
contents. Click  to select the entire body of the document. To set
the class or id attributes for a tag in the tag selector, right-click
(Windows) or Control-click (Macintosh) the tag and select a class or ID
from the context menu. The tag selector is the preferable method for
selecting tags because it ensures that you are always selecting the tag with
accuracy.
The Hand tool lets you click the document and drag it in the Document
window. Click the Select tool to disable the Hand tool.
The Zoom tool and Set Magnification pop-up menu let you set a
magnification level for your document. For more information, see
“Zooming in and out” in Using Dreamweaver.

32

Dreamweaver Basics

The Window Size pop-up menu (visible in Design view only) lets you
resize the Document window to predetermined or custom dimensions. For
more information, see “Resizing the Document window” in Using
Dreamweaver.
To the right of the Window Size pop-up menu are the estimated document
size and estimated download time for the page, including all dependent
files such as images and other media files. For more information, see
“Setting download time and size preferences” in Using Dreamweaver.
For more information about using the status bar, see Chapter 1, “Exploring
the Workspace” in Using Dreamweaver.

The Insert bar
The Insert bar contains buttons for creating and inserting objects such as
tables, layers, and images. When you roll the pointer over a button, a
tooltip appears with the name of the button.
The buttons are organized into several categories, which you can switch on
the left side of the Insert bar. Additional categories appear when the current
document contains server code, such as ASP or CFML documents. When
you start Dreamweaver, the category you were last working in opens.

Some categories have buttons with pop-up menus. When you select an
option from a pop-up menu, it becomes the default action for the button.
For example, if you select Image Placeholder from the Image button’s popup menu, the next time you click the Image button, Dreamweaver inserts
an image placeholder. Anytime you select a new option from the pop-up
menu, the default action for the button changes.
The Insert bar is organized in the following categories:
The Common category enables you to create and insert the most
commonly used objects, such as images and tables.
The Layout category enables

you to insert tables, div tags, layers, and
frames. You can also you choose among three views of tables: Standard
(default), Expanded Tables, and Layout. When Layout mode is selected,
you can use the Dreamweaver layout tools: Draw Layout Cell and Draw
Layout Table.

Getting to know the Dreamweaver 8 workspace

33

The Forms category contains

buttons for creating forms and inserting

form elements.
The Text category enables you to insert a variety of text- and listformatting tags, such as b, em, p, h1, and ul.
The HTML category enables

you to insert HTML tags for horizontal
rules, head content, tables, frames, and scripts.

Server-code categories are

available only for pages that use a particular
server language, including ASP, ASP.NET, CFML Basic, CFML Flow,
CFML Advanced, JSP, and PHP. Each of these categories provides servercode objects that you can insert in Code view.

The Application category enables

you to insert dynamic elements such as
recordsets, repeated regions, and record insertion and update forms.
The Flash elements category enables

you to insert Macromedia Flash

elements.
The Favorites category enables

you to group and organize the Insert bar
buttons you use the most in one common place.
For more information about using the Insert bar, see Chapter 1, “Exploring
the Workspace” in Using Dreamweaver.

34

Dreamweaver Basics

The Coding toolbar
The Coding toolbar contains buttons that let you perform many standard
coding operations, such as collapsing and expanding code selections,
highlighting invalid code, applying and removing comments, indenting
code, and inserting recently used code snippets. The Coding toolbar is
visible only in Code view and appears vertically on the left side of the
Document window.

You cannot undock or move the Coding toolbar, but you can hide it. For
more information, see “Displaying toolbars” in Using Dreamweaver.
For more information about using the Coding toolbar, see “Inserting code
quickly with the Coding toolbar” in Using Dreamweaver.

Getting to know the Dreamweaver 8 workspace

35

The Property inspector
The Property inspector lets you examine and edit the most common
properties for the currently selected page element, such as text or an
inserted object. The contents of the Property inspector vary depending on
the element selected. For example, if you select an image on your page, the
Property inspector changes to show properties for the image (such as the
file path to the image, the width and height of the image, the border
around the image, if any, and so on).

The Property inspector is at the bottom of the workspace by default, but
you can dock it at the top of the workspace if you want. Or, you can make
it a floating panel in the workspace. For more information about moving
the Property inspector, see “Docking and undocking panels and panel
groups” in Using Dreamweaver.
For more information about using the Property inspector, see “Using the
Property inspector” in Using Dreamweaver.

36

Dreamweaver Basics

The Files panel
You use the Files panel to view and manage the files in your Dreamweaver
site.

When you view sites, files, or folders in the Files panel, you can change the
size of the viewing area, as well as expand or collapse the Files panel. When
the Files panel is collapsed it displays the contents of the local site, the
remote site, or the testing server as a list of files. When expanded, it
displays the local site and either the remote site or testing server. The Files
panel can also display a visual site map of the local site.
For Dreamweaver sites, you can also customize the Files panel by changing
the view—either your local or remote site—that appears by default in the
collapsed panel.
For more information about using the Files panel to manage your site, see
Chapter 4, “Managing Your Files” in Using Dreamweaver.

Getting to know the Dreamweaver 8 workspace

37

The CSS Styles panel
The CSS Styles panel lets you track the CSS rules and properties affecting a
currently selected page element (Current mode), or the rules and properties
affecting an entire document (All mode). A toggle button at the top of the
CSS Styles panel lets you switch between the two modes. The CSS Styles
panel also lets you modify CSS properties in both All and Current mode.

You can resize any of the panes by dragging the borders between the panes.
In Current mode, the CSS Styles panel displays three panes: a Summary for
Selection pane that displays the CSS properties for the current selection in
the document, a Rules pane that displays the location of selected properties
(or a cascade of rules for the selected tag, depending on your selection), and
a Properties pane that lets you edit CSS properties for the rule defining the
selection.

38

Dreamweaver Basics

In All mode, the CSS Styles panel displays two panes: an All Rules pane
(on top), and a Properties pane (on bottom). The All Rules pane displays a
list of rules defined in the current document as well as all rules defined in
style sheets attached to the current document. The Properties pane lets you
edit CSS properties for any selected rule in the All Rules pane.
Any changes you make in the Properties pane are applied immediately,
letting you preview your work as you go.
For more information about the CSS Styles panel, see “About the CSS
Styles panel” in Using Dreamweaver.

Customizing the Dreamweaver 8
workspace
There are some basic techniques you can use to customize Dreamweaver to
suit your needs without knowing complex code or editing text files.
This section contains the following topics:
■

“Choosing the workspace layout (Windows only)” on page 39

■

“Displaying tabbed documents (Macintosh)” on page 40

■

“Hiding and displaying the Start page” on page 41

Choosing the workspace layout
(Windows only)
In Windows, you can choose between the Designer and Coder workspace
layouts. The first time you start Dreamweaver, a dialog box lets you choose
a workspace layout. You can switch to a different workspace at any time.

Customizing the Dreamweaver 8 workspace

39

To choose a workspace layout the first time you start
Dreamweaver:
1.

Select one of the following layouts:
Designer is an integrated workspace using MDI (Multiple Document
Interface), in which all Document windows and panels are integrated
into one larger application window, with the panel groups docked on
the right.
Coder

is the same integrated workspace, but with the panel groups
docked on the left, in a layout similar to that used by Macromedia
HomeSite and Macromedia ColdFusion Studio, and with the
Document window showing Code view by default.

N OT E

You can dock panel groups on either side of the workspace in either
layout.
2.

Click OK.

To switch to a different workspace after you’ve chosen one:
■

Select Window > Workspace Layout, and select the workspace layout
you prefer.

In addition to selecting Coder and Designer, you can select Dual Screen
Right or Dual Screen Left. If you have a secondary monitor to the right of
your primary monitor, Dual Screen Right puts all panels on the right
monitor, and keeps the Document window on the primary monitor. If you
have a secondary monitor to the left of your primary monitor, Dual Screen
Left puts all panels on the left monitor, and keeps the Document window
on the primary monitor.

Displaying tabbed documents (Macintosh)
On the Macintosh, Dreamweaver can display multiple documents in a
single Document window by using tabs to identify each document.
Dreamweaver can also display them as part of a floating workspace, in
which each document appears in its own window.
To open a tabbed document in a separate window:
■

40

Dreamweaver Basics

Right-click or Control-click the tab and select Move to New Window
from the context menu.

To combine separate documents into tabbed windows:
■

Select Window > Combine as Tabs.

To change the default tabbed document setting:
1.

Select Dreamweaver > Preferences, and then select the General category.

2.

Select or deselect Open Documents in Tabs, and click OK.

NO T E

Dreamweaver does not alter the display of documents that are currently
open when you change preferences. Documents opened after you select
a new preference, however, will display according to the preference you
selected.

Hiding and displaying the Start page
The Dreamweaver Start page appears when you start Dreamweaver and
anytime that you do not have any documents open. You can choose to hide
the Start page, and then later display it again. When the Start page is
hidden and there are no documents open, the Document window is blank.
To hide the Start page:
■

Select the Don’t Show Again checkbox on the Start page.
The Start page will not appear when you start Dreamweaver, or after
you open and close a document.

To display the Start page:
1.

Select Edit > Preferences (Windows) or Dreamweaver > Preferences
(Macintosh).
The Preferences dialog box appears displaying the General preferences
category.

2.

Select the Show Start Page checkbox.
The Start page appears when you start Dreamweaver, or after you open
and close a document.

Customizing the Dreamweaver 8 workspace

41

Accomplishing basic tasks in
Dreamweaver 8
This section describes how to accomplish basic tasks such as creating,
opening, and saving files. For more detailed information, see Chapter 3,
“Creating and Opening Documents” in Using Dreamweaver.
This section contains the following topics:
■

“About Dreamweaver files” on page 42

■

“Creating new files in Dreamweaver” on page 43

■

“Saving files in Dreamweaver” on page 44

■

“Opening files in Dreamweaver” on page 45

About Dreamweaver files
You can work with a variety of file types in Dreamweaver. The primary
kind of file you will work with is the HTML file. HTML files—or
Hypertext Markup Language files—contain the tag-based language
responsible for displaying a web page in a browser. You can save HTML
files with either the .html or .htm extension. Dreamweaver saves files using
the .html extension by default.
Following are some of the other common file types you might use when
working in Dreamweaver:
CSS, or Cascading Style Sheet files, have a .css extension. They are used to
format HTML content and control the positioning of various page
elements. For more information on working with these types of files, see
“Understanding Cascading Style Sheets” in Using Dreamweaver.
GIF,

or Graphics Interchange Format files, have a .gif extension. GIF
format is a popular web graphic format for cartoons, logos, graphics with
transparent areas, and animations. GIFs contain a maximum of 256 colors.

JPEG,

or Joint Photographic Experts Group files (named after the
organization that created the format), have a .jpg extension, and are usually
photographs or high-color images. The JPEG format is best for digital or
scanned photographs, images using textures, images with gradient color
transitions, and any images that require more than 256 colors.

42

Dreamweaver Basics

XML, or Extensible Markup Language files, have a .xml extension. They
contain data in a raw form that can be formatted using XSL (Extensible
Stylesheet Language). For more information on working with these types
of files, see Chapter 36, “Displaying XML Data in Web Pages” in Using
Dreamweaver.
XSL, or Extensible Stylesheet Language files, have a .xsl or .xslt extension.
They are used to style XML data that you want to display on a web page.
For more information on working with these types of files, see Chapter 36,
“Displaying XML Data in Web Pages” in Using Dreamweaver.
CFML, or ColdFusion Markup Language files, have a .cfm extension.
They are used to process dynamic pages. For more information on working
with these types of files, see Chapter 40, “Building ColdFusion
Applications Rapidly” in Using Dreamweaver.
ASPX,

or ASP.NET files, have a .aspx extension. They are used to process
dynamic pages. For more information on working with these types of files,
see Chapter 41, “Building ASP.NET Applications Rapidly” in Using
Dreamweaver.

PHP,

or PHP: Hypertext Preprocessor files, have a .php extension. They
are used to process dynamic pages. For more information on working with
these types of files, see Chapter 43, “Building PHP Applications Rapidly”
in Using Dreamweaver.

Creating new files in Dreamweaver
This section tells you how to create a new blank document in
Dreamweaver.
You can also create new documents in Dreamweaver that are based on a
Dreamweaver design file or on an existing template. For more information,
see “Creating new documents” in Using Dreamweaver.

Accomplishing basic tasks in Dreamweaver 8

43

To create a new blank document:
1.

Select File > New.
The New Document dialog box appears. The General tab is already
selected.

2.

From the Category list, select Basic Page, Dynamic Page, Template
Page, Other, or Framesets; then, from the list on the right, select the
type of document you want to create.
For example, select Basic Page to create an HTML document, or select
Dynamic page to create a ColdFusion or ASP document, and so on.
For more information about options in this dialog box, click the Help
button in the dialog box.

3.

Click the Create button.
The new document opens in the Document window.

4.

Save the document (see “Saving files in Dreamweaver” on page 44).

Saving files in Dreamweaver
When you create a new document, you need to save it.
To save a new document:

TIP

It’s a good idea to
save your file in a
Dreamweaver site.
For more
information, see
Chapter 3, “Tutorial:
Setting Up Your Site
and Project Files,”
on page 49.

1.

Select File > Save.

2.

In the dialog box that appears, navigate to the folder where you want to
save the file.

3.

In the File Name text box, type a name for the file.
Avoid using spaces and special characters in file and folder names and
do not begin a filename with a numeral. In particular, do not use
special characters (such as é, ç, or ¥) or punctuation (such as colons,
slashes, or periods) in the names of files you intend to put on a remote
server; many servers change these characters during upload, which will
cause any links to the files to break.

4.

44

Dreamweaver Basics

Click Save.

Opening files in Dreamweaver
In Dreamweaver, you can easily open and edit your documents.
To open a file:
1.

Select File > Open.

2.

In the Open dialog box, select the file and click Open.

Accomplishing basic tasks in Dreamweaver 8

45

46

Dreamweaver Basics

2

PART 2

Tutorials
Part Two of this book contains five basic tutorials that take you through
the steps of building a web page. The web page you’ll create is the home
page for Cafe Townsend, a fictional restaurant.
This part contains the following sections:
Tutorial: Setting Up Your Site and Project Files . . . . . . . . . . . . . . .49
Tutorial: Creating a Table-based Page Layout . . . . . . . . . . . . . . . .55
Tutorial: Adding Content to Pages . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
Tutorial: Formatting Your Page with CSS. . . . . . . . . . . . . . . . . . . . .99
Tutorial: Publishing Your Site. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129

47

CHAPTER 3

Tutorial: Setting Up Your
Site and Project Files

3

This tutorial introduces you to the concept of a Macromedia Dreamweaver
8 site and shows you how to set up the project files for the Cafe Townsend
sample website. In Dreamweaver, a site generally consists of two parts: a
collection of files on a local computer (the local site), and a location on a
remote web server that you upload the files to when you’re ready to make
them publicly available (the remote site). You use the Dreamweaver Files
panel to manage the files for your site.
The most common approach to creating a website with Dreamweaver is to
create and edit pages on your local disk, and then upload copies of those
pages to a remote web server for viewing on the web. In this tutorial you’ll
only learn how to set up the local site so that you can begin building web
pages right away. Later, after you’ve completed the website, you’ll learn how
to create a remote site so that you can upload your files to a web server.
In this tutorial, you will complete the following tasks:
Learn about Dreamweaver sites. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
Set up your project files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
Define a local folder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52

Learn about Dreamweaver sites
In Dreamweaver, the term “site” can refer either to a website or to a local
storage location for the documents that belong to a website. The latter is
what you need to establish before you begin building your website. A
Dreamweaver site organizes all of the documents associated with your
website and lets you track and maintain links, manage files, share files, and
transfer your site files to a web server.
NO T E

Macromedia HomeSite and ColdFusion Studio users can think of a
Dreamweaver site as being like a HomeSite or Studio project.

49

A Dreamweaver site consists of as many as three parts, depending on your
computing environment and the type of website you are developing:
Local folder is your working directory. Dreamweaver refers to this folder as

your local site. The local folder is usually a folder on your hard disk.
Remote folder

is where you store your files, depending on your
environment, for testing, production, collaboration, and publication.
Dreamweaver refers to this folder as your remote site. The remote folder is a
folder on the computer that’s running your web server. The computer
running the web server is often (but not always) the computer that makes
your site publicly available on the web.
Folder for dynamic pages (Testing Server folder) is

the folder where
Dreamweaver processes dynamic pages. This folder is often the same folder
as the remote folder. You do not need to worry about this folder unless you
are developing a web application. For more information about the Testing
Server folder, see “Specifying where dynamic pages can be processed” in
Using Dreamweaver.
You can set up a Dreamweaver site by using the Site Definition Wizard,
which guides you through the setup process, or by using the Site
Definition Advanced settings, which let you set up local, remote, and
testing folders individually, as necessary. In this tutorial you’ll use the Site
Definition Advanced settings to set up a local folder for your project files.
Later in this book, you’ll learn how to set up a remote folder so that you
can publish your pages to a web server and make them publicly available.

For more information about how to use the Site Definition Wizard to set
up a Dreamweaver site, see “Setting up a new Dreamweaver site” in Using
Dreamweaver.
For more information about how to set up a remote site, see Chapter 7,
“Tutorial: Publishing Your Site”.
For more information about Dreamweaver sites in general, see “Setting Up
a Dreamweaver Site” in Using Dreamweaver.

Set up your project files
When you create a local site, you can place any existing assets (images or
other pieces of content) in the local site’s root folder (the main folder for
the site). Then when you’re ready to add content to your pages, the assets
are there and ready for you to use.

50

Tutorial: Setting Up Your Site and Project Files

The sample files included with Dreamweaver contain assets for the sample
website you’ll build using these Getting Started with Dreamweaver tutorials.
The first step in creating the site is to copy the sample files from the
Dreamweaver application folder to an appropriate folder on your hard
disk.
1.

Create a new folder called local_sites on your hard disk.
For example, create a folder called local_sites in either of the following
two locations:
■

■

In Windows: C:\Documents and Settings\your_user_name\My
Documents\local_sites
On the Macintosh: Macintosh HD/Users/your_user_name/
Documents/local_sites

NO TE

On the Macintosh, there’s a folder called Sites already in your user folder.
Don’t use that Sites folder as your local folder; the Sites folder is where
you place your pages to make them publicly accessible when you’re using
the Macintosh as a web server.
2.

Locate the cafe_townsend folder in the Dreamweaver application folder
on your hard disk.
If you installed Dreamweaver to its default location, the path to the
folder is as follows:
■

■

In Windows: C:\Program Files\Macromedia\Dreamweaver
8\Tutorial_assets\cafe_townsend\.
On the Macintosh: Macintosh HD/Applications/Macromedia
Dreamweaver 8/Tutorial_assets/cafe_townsend.

A B O U T .. .

About local and remote “root” folders The local “root” folder of your Dreamweaver site is often the
main or top-level folder for your website. It usually corresponds to an identical folder on the remote site
(web server). The root folder also usually defines the first part of your website’s URL, following the
domain name. For example, if your local root folder is called mywebsite, and you have an identical root
folder defined on the remote site, the URL for your website would be something like http://
www.yahoo.com/mywebsite.
In some cases, the local root folder may not have an exact name equivalent on the remote site. For
example, if you own the domain name www.mywebsite.com, with a remote root directory of public_html,
your local root folder could still be called mywebsite. The files in both the local and remote root directories
would be identical; only the folder names (public_html on the remote site, and mywebsite on the local
computer) would be different.

Set up your project files

51

3.

Copy the cafe_townsend folder into the local_sites folder.
The cafe_townsend folder is the folder that you will use as the root
folder (main folder) for your Dreamweaver site.

Define a local folder
You must define a Dreamweaver local folder for each new website you
create. The local folder is the folder that you use to store working copies of
site files on your hard disk. If you don’t define a local folder, certain
features in Dreamweaver cannot work properly.
Defining a local folder also allows you to manage your files and to transfer
files to and from your web server by using a number of file-transfer
methods.
Now you’ll define the cafe_townsend folder that you copied into the
local_sites folder as your local folder.
1.

Start Dreamweaver and select Site > Manage Sites.
The Manage Sites dialog box appears.

2.

Click the New button and select Site.
The Site Definition dialog box appears.

3.

If the wizard (Basic tab) appears, click the Advanced tab and select Local
Info from the Category list (it should be the default).

4.

In the Site Name text box, enter Cafe Townsend as the name of the site.

5.

In the Local Root Folder text box, specify the cafe_townsend folder that
you copied to the local_sites folder in the previous section.
You can click the folder icon to browse to and select the folder, or enter
a path in the Local Root Folder text box.

52

Tutorial: Setting Up Your Site and Project Files

6.

In the Default Images Folder text box, specify the images folder that
already exists in the cafe_townsend folder.
You can click the folder icon to browse to and select the folder, or enter
a path in the Default Images Folder text box.
The Site Definition dialog box should now look as follows:

7.

Click OK.
The Manage Sites dialog box appears, showing your new site.

8.

Click Done to close the Manage Sites dialog box.

Define a local folder

53

The Files panel now shows the new local root folder for your current site.
The file list in the Files panel acts as a file manager, allowing you to copy,
paste, delete, move, and open files just as you would on a computer
desktop.

For more information about how the Files panel works, see “The Files
panel” on page 37.
You’ve now defined a local root folder for your site. The local root folder is
the place on your local computer where you keep the working copies of
your web pages. Later, if you want to publish your pages and make them
publicly available, you’ll need to define a remote folder—a place on a
remote computer, running a web server, that will hold published copies of
your local files.
You can follow the rest of the tutorials in this guide to create the Cafe
Townsend sample site, or you can work on your own web pages. When
you’re finished creating and editing pages, proceed to define a remote
folder on a server and publish your pages. For more information, see
Chapter 7, “Tutorial: Publishing Your Site”.

54

Tutorial: Setting Up Your Site and Project Files

CHAPTER 4

Tutorial: Creating a Table-based
Page Layout

4

This tutorial explains how to create a table-based page layout in
Macromedia Dreamweaver 8. A page layout determines how your page will
appear in the browser, showing, for example, the placement of menus,
images, and Macromedia Flash content.
Tables are a powerful tool for presenting tabular data and for laying out
text and graphics on an HTML page. You can use tables to create your
layout quickly and easily. In this tutorial you’ll create a number of tables in
a new Dreamweaver document. The rows and cells of the tables effectively
act as container boxes for the content you’ll add later.
In this tutorial, you will complete the following tasks:
Examine the design comp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
Create and save a new page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
Insert tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
Set table properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
Insert an image placeholder. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
Add color to the page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69

Examine the design comp
Typically, you don’t begin building a website by opening Dreamweaver and
laying out pages right away. The first steps to creating a website begin on a
piece of paper, or in a graphics-editing application like Macromedia
Fireworks. Graphic designers usually sketch out a piece of comprehensive
artwork (also known as a “comp”) for the website in order to show it to the
client and make sure that the initial ideas for the site meet with their
client’s approval.

55

A comp consists of any number of page elements that the client has
requested for their website. For example, the client might say, “I want to
have a logo at the top of the page, a navigation that links to these other
pages, a section for an online store, and a place where I can insert video
clips.” Based on that discussion, the designer begins planning the layout of
the site, and makes sketches of sample pages that fulfill the client’s
requirements.
This tutorial provides you with the completed and approved comp for Cafe
Townsend, a fictional restaurant that has requested a website. As the web
designer, it’s your job to transform the comp into a working web page
(most likely with the help of other graphics designers and Flash
developers).

56

Tutorial: Creating a Table-based Page Layout

You’ll notice that the graphic designer has provided you with a web page
comp that includes a number of content areas, as well as some graphic
ideas. In the next sections, you’ll use Dreamweaver to lay out this design.
You can also open the original comp file if you want to see it on the
computer screen. You can find the comp, homepage-mockup.jpg, in the
fireworks_assets folder of the cafe_townsend folder that you copied to your
hard drive in Chapter 3, “Tutorial: Setting Up Your Site and Project Files.”
You might even want to print out the comp so that you can have it in front
of you as you build your page.

Create and save a new page
After you set up a site and examine any comps, you are ready to begin
building web pages. You’ll start by creating a new page, and saving it in the
cafe_townsend local root folder of your website. The page eventually
becomes the home page for Cafe Townsend, a fictional restaurant.
If you haven’t created the cafe_townsend local root folder, you must do so
before you proceed. For instructions, see Chapter 3, “Tutorial: Setting Up
Your Site and Project Files.”
1.

In Dreamweaver, select File > New.

2.

On the General tab of the New Document dialog box, select Basic Page
from the Category list, select HTML from the Basic Page list, and click
Create.

3.

Select File > Save As.

4.

In the Save As dialog box, browse to and open the cafe_townsend folder
that you defined as the site’s local root folder.
In Chapter 3, “Tutorial: Setting Up Your Site and Project Files”, you
created this folder within a folder called local_sites.

5.

Enter index.html in the File Name text box and click Save.
The filename now appears in the title bar at the top of the application
window.

Create and save a new page

57

6.

In the Document Title text box at the top of your new document, type
Cafe Townsend.

This is the title of your page (different from the filename). Your site
visitors will see this title in the browser window title bar when they
view the page in a web browser.
7.

Select File > Save to save your page.

Insert tables
Next you’ll add a table that will hold text, graphics, and Macromedia Flash
assets.

58

1.

Click once on the page to place the insertion point in the upper-left
corner of the page.

2.

Select Insert > Table.

3.

In the Insert Table dialog box, do the following:
■

Enter 3 in the Rows text box.

■

Enter 1 in the Columns text box.

■

Enter 700 in the Table Width text box.

■

Select Pixels from the Table Width pop-up menu.

■

Enter 0 in the Border Thickness text box.

■

Enter 0 in the Cell Padding text box.

■

Enter 0 in the Cell Spacing text box.

Tutorial: Creating a Table-based Page Layout

4.

Click OK.
A table with three rows and one column appears in your document.
The table is 700 pixels wide with no border, cell padding, or cell
spacing.

Insert tables

59

A B O U T .. .

More about tables Tables are a powerful tool for presenting tabular data and for laying out text and
graphics on an HTML page. A table consists of one or more rows; each row consists of one or more cells.
When you create multiple rows with multiple cells, the cells form columns. Technically, a cell is a division
within a horizontal row, and a column is the vertical accumulation of those cell divisions.
Dreamweaver displays the table width and the width for each table column in the Table selector
(indicated by green lines) when the table is selected or when the insertion point is in the table.

Next to the widths are arrows for the table header menu and the column header menus. You can use the
menus for quick access to common table-related commands. You can also enable or disable the display
of the widths and menus by selecting View > Visual Aids > Table Widths.
Tables can have borders, and the cells of a table can have padding, spacing, or both. Cell padding refers
to the number of pixels between the cell’s content and the cell’s boundaries. Cell spacing refers to the
number of pixels between adjacent table cells.
If you don’t explicitly assign values for cell padding and cell spacing, most browsers display the table as if
cell padding were set to 1 and cell spacing were set to 2. If you want to ensure that browsers display the
table with no padding or spacing, set cell padding and cell spacing to 0.
For more information about tables, see Chapter 8, “Presenting Content with Tables” in Using
Dreamweaver.

60

5.

Click once to the right of the table to deselect it.

6.

Select Insert > Table to insert another table.

7.

In the Insert Table dialog box, do the following for the second table:
■

Enter 1 in the Rows text box.

■

Enter 3 in the Columns text box.

■

Enter 700 in the Table Width text box.

■

Select Pixels from the Table Width pop-up menu.

■

Enter 0 in the Border Thickness text box.

■

Enter 0 in the Cell Padding text box.

■

Enter 0 in the Cell Spacing text box.

Tutorial: Creating a Table-based Page Layout

8.

Click OK.
A second table with one row and three columns appears below your
first table.

9.

Click to the right of the table to deselect it.

10. Insert a third table by selecting Insert > Table and entering the following

values in the Insert Table dialog box:

11.

■

Enter 1 in the Rows text box.

■

Enter 1 in the Columns text box.

■

Enter 700 in the Table Width text box.

■

Select Pixels from the Table Width pop-up menu.

■

Enter 0 in the Border Thickness text box.

■

Enter 0 in the Cell Padding text box.

■

Enter 0 in the Cell Spacing text box.

Click OK.
A third table, with one row and one column, appears below your
second table.

Click to the right of the table to deselect it. Your page should now look
as follows:

Insert tables

61

N O TE

You may see the Table selector (indicated by green lines) after you insert a
table. You can always make the Table selector disappear by clicking
outside the table. You can also disable the Table selector by selecting
View > Visual Aids > Table Widths.

Set table properties
Now you’ll set precise table properties, using Expanded Tables mode, a
feature that temporarily adds cell padding and spacing to tables and
increases the borders of the tables to simplify editing. Specifically, it lets
you position the insertion point precisely without accidentally selecting the
wrong table or other table content.
NO T E

After you finish setting table properties in Expanded Tables mode, always
return to Standard mode. Expanded Tables mode is not a WYSIWYG
(what you see is what you get) environment, so some operations, such as
resizing, do not display the expected results
1.

N OT E

62

Select View > Table Mode > Expanded Table Mode.

If you see the Getting Started with Expanded Tables Mode dialog box,
click OK.

Tutorial: Creating a Table-based Page Layout

2.

Click once inside the first row of the first table.

3.

In the Property inspector (Window > Properties), enter 90 in the Cell
Height (H) text box and press Enter (Windows) or Return (Macintosh).

NO TE

If you cannot see the Cell Height text box, click the expander arrow in the
lower-right corner of the Property inspector.
4.

Click once inside the second row of the first table.

5.

In the Property inspector, enter 166 in the Cell Height text box and
press Enter (Windows) or Return (Macintosh).

6.

Click once inside the third row of the first table.

Set table properties

63

7.

In the Property inspector, enter 24 in the Cell Height text box and press
Enter (Windows) or Return (Macintosh).
You should now have three rows of differing heights in the first table.

Next you’ll set properties for the second table (the table that contains
three columns).
8.

64

Click once inside the first column of the second table.

Tutorial: Creating a Table-based Page Layout

9.

In the Property inspector, enter 140 in the Cell Width (W) text box and
press Enter (Windows) or Return (Macintosh).

10. Click
11.

once inside the second column of the second table.

In the Property inspector, enter 230 in the Cell Width text box and
press Enter (Windows) or Return (Macintosh)

12. Set

the width of the third column to 330 pixels.

If you have the Table selector enabled (View > Visual Aids > Table
Widths), you’ll see all three of the pixel values you just entered above
the respective table columns.
You won’t enter any height values for the cells in this table because the
height of those cells will vary depending on the content you add later.
13.

Finally, click once inside the last table (the table with one row and one
column).

Set table properties

65

14. In the Property inspector, enter 24 in the Cell Height text box and press

Enter (Windows) or Return (Macintosh).
Your layout should now look as follows:

66

15.

Click the Exit Expanded Tables Mode link at the top of the Document
window to return to Standard mode.

16.

Save your page.

Tutorial: Creating a Table-based Page Layout

Insert an image placeholder
An image placeholder is a graphic that you use until final artwork is ready
to be added to a web page. An image placeholder is useful when you lay out
web pages because it allows you to position an image on a page before you
actually create the image.
1.

In the Document window, click once inside the first row of the first
table.

2.

Select Insert > Image Objects > Image Placeholder.

3.

In the Image Placeholder dialog box, do the following:
■

Type banner_graphic in the Name text box.

■

Enter 700 in the Width text box.

■

Enter 90 in the Height text box.

■

■

Click the color box and select a color from the color picker. For this
tutorial, select a reddish brown (#993300).
Leave the Alternate Text text box blank.

A BO UT . ..

A note on alternative text Alternative text is a textual description of an image on a web page. It is part
of the HTML code and does not appear on the page. It’s important to provide alternative text for most of
your images so that people who use screen readers or text-only browsers can receive the information
provided by the image. In the case of a banner graphic, which merely displays a logo for a website, it is not
essential to provide alternative text. When you leave the Alternate Text text box blank in the Image
Placeholder dialog box, Dreamweaver adds an alt="" attribute to the img tag. Later, if you want to add
alternative text to an image, you can select the image and enter the alternative text in the Property
inspector. For example, if you later change the logo to include a phone number or address, you would
want to provide that information as alternative text.

Insert an image placeholder

67

A BO UT . ..

About image placeholders An image placeholder is a graphic you use until final artwork is ready to be
added to a web page; it is not a graphic image that displays in a browser. Before you publish your site,
replace any image placeholders you’ve added with web-friendly graphic files such as GIFs or JPEGs.
If you have Macromedia Fireworks, you can create a new graphic from a Dreamweaver image
placeholder. When you select the image placeholder and click the Create button in the Property
inspector, Fireworks opens and presents you with a new canvas. The new image dimensions are set to
the same size as the placeholder image. You can then create and edit the image as you like, and replace
the placeholder image in Dreamweaver. For information about creating an image in Fireworks from an
image placeholder, see “Using Fireworks to modify Dreamweaver image placeholders” in Using
Dreamweaver.

4.

Click OK.
The image placeholder appears inside the first table. The image
placeholder displays a label and the size attributes of the image that
you’ll eventually place there.

N OT E

When viewed in a browser the label and size text for an image placeholder
do not appear.
5.

68

Save your page.

Tutorial: Creating a Table-based Page Layout

Add color to the page
Now you’ll add more color to the page by setting colors for some of the
table cells and for the background of the page.
1.

Click once inside the first cell of the three-columned table.

2.

Click the  tag (cell tag) in the tag selector to select the cell.

3.

In the Property inspector (Window > Properties), click once inside the
Background Color text box.
The text box is located directly next to the Background Color (Bg)
color box.

N O TE

If you cannot see the Background Color text box, click the expander arrow
in the lower-right corner of the Property inspector.

Add color to the page

69

4.

In the Background Color text box, enter the hexadecimal value
#993300 and press Enter (Windows) or Return (Macintosh).

The color of the table cell turns to reddish-brown.
5.

Click once inside the second cell of the three-columned table.

6.

Click the  tag (cell tag) in the tag selector to select the cell.

7.

In the Property inspector, click once inside the Background Color text
box, enter the hexadecimal value #F7EEDF, and press Enter (Windows)
or Return (Macintosh).
The color of the table cell turns to light tan.

8.

Repeat steps 5 through 7 to change the color of the third table cell to
light tan as well.

9.

After you have all three cell colors set, click once outside the table to
deselect it.

Next you’ll change the background color for the entire page by modifying
page properties. The Page Properties dialog box lets you set a number of
page properties, including the size and color of page fonts, the colors of
visited links, page margins, and much more.

70

Tutorial: Creating a Table-based Page Layout

1.

Select Modify > Page Properties.

2.

In the Appearance category of the Page Properties dialog box, click the
Background Color color box and select black (#000000) from the color
picker.

A B OU T. . .

Picking colors In HTML, colors are expressed either as hexadecimal values (for example, #FF0000) or
as color names (red). A web-safe color is one that appears the same in Netscape Navigator and Microsoft
Internet Explorer on both Windows and Macintosh systems when using 256-color mode. There are 216
common colors, and that any hexadecimal value that combines the pairs 00, 33, 66, 99, CC, or FF (RGB
values 0, 51, 102, 153, 204, and 255, respectively) represents a web-safe color.
You can select colors in Dreamweaver by entering hexadecimal values in the appropriate text boxes, or
by selecting a color from the color picker. The color picker uses the 216-color web-safe palette; selecting
a color from this palette displays the color’s hexadecimal value. To use the color picker, click on the color
box and use the eyedropper to select a color.
You can also use the color picker to match colors. For example, if an image on your page contains a
certain shade of blue and you want the background color of a table cell to match it, you can select the
table cell, click on the color box to open the color picker, move the eyedropper over the blue in the image,
and click the mouse button. The color picker fills the selected area with the closest match possible to the
color you clicked with the eyedropper. If you select colors by this method, however, the color that the
color picker chooses for you may not be a web-safe color.

Add color to the page

71

3.

Click OK.
Your page background turns to black.

4.

Save your work.

Your page layout is now complete. The layout contains a number of tables
that can hold assets such as images, text, and Flash Video (FLV) files. In the
next tutorial, Chapter 5, “Tutorial: Adding Content to Pages,” you’ll learn
how to add assets to the page using the various insertion features that
Dreamweaver provides.

72

Tutorial: Creating a Table-based Page Layout

CHAPTER 5

Tutorial: Adding Content
to Pages

5

This tutorial shows you how to add content to web pages in Macromedia
Dreamweaver 8. You can add many different kinds of content to web
pages, including graphics, Macromedia Flash files, Macromedia Flash
Video files, and text, to name a few. After you’ve added content to your
pages, you can preview your work in a browser so that you can see what it
will look like on the web.
In this tutorial, you will complete the following tasks:
Locate your files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
Review your task . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
Insert images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
Insert and play a Flash file . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
Insert Flash Video . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
Insert text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89
Create links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
Preview your page in a browser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96

Locate your files
In this tutorial, you’ll begin with the table-based page layout (index.html)
that you created in Chapter 4, “Tutorial: Creating a Table-based Page
Layout.” If you did not complete that tutorial, you can either complete it
before proceeding, or you can open the finished version of the tutorial and
begin with that.

73

The finished version of the tutorial, table_layout.html, is located in the
completed_files/dreamweaver folder, within the cafe_townsend folder that
you copied to your hard disk in Chapter 3, “Tutorial: Setting Up Your Site
and Project Files.”
N OT E

74

If you begin this tutorial with the completed table_layout.html file, instead
of the index.html file from Chapter 4, “Tutorial: Creating a Table-based
Page Layout,” some steps and illustrations in the tutorial will not match
what you see on your screen.

Tutorial: Adding Content to Pages

Review your task
In this tutorial you’ll add assets to the home page for Cafe Townsend, a
fictional restaurant. You’ll learn how to add images, a Macromedia Flash
file, a Macromedia Flash Video file, and text. When you’re finished, the
page will look like this:

You’ll notice that the text on the page is not yet formatted. That’s because
you’ll learn how to format the text by using Cascading Style Sheets (CSS)
in the next tutorial.

Review your task

75

You can find the required assets for this tutorial in the cafe_townsend root
folder that you copied to your hard drive in Chapter 3, “Tutorial: Setting
Up Your Site and Project Files.” If you didn’t complete that tutorial, you
must do so before you proceed. The tutorial lets you know exactly where to
find the assets as you go along.

Insert images
After you create your page layout, you are ready to add assets to the page.
You’ll start by adding images. You can use several methods to add images to
a web page in Dreamweaver. In this section, you’ll add four different
images to the index page for Cafe Townsend, using various methods.

Replace the image placeholder
1.

N OT E

76

In Dreamweaver, open the index.html file that you created in Chapter
4, “Tutorial: Creating a Table-based Page Layout.”

If you did not complete Chapter 4, “Tutorial: Creating a Table-based Page
Layout,” see “Locate your files” on page 73 for how to proceed.
2.

Double-click the image placeholder, banner_graphic, at the top of the
page.

3.

In the Select Image Source dialog box, navigate to the images folder
inside the cafe_townsend folder that you defined as your site root folder.

Tutorial: Adding Content to Pages

4.

Select the banner_graphic.jpg file and click OK.

Dreamweaver replaces the image placeholder with the banner graphic
for Cafe Townsend.

5.

Click once outside the table to deselect the image.

6.

Save the page (File > Save).

Insert images

77

Insert an image by using the Insert menu
1.

Click once inside the third row of the first table (two rows below the
banner graphic you just inserted, just above the colored table cells).

2.

Select Insert > Image.

3.

In the Select Image Source dialog box, navigate to the images folder
inside the cafe_townsend folder, select the body_main_header.gif file,
and click OK.

NO TE

If the Image Tag Accessibility Attributes dialog box appears, click OK.

A long colored graphic appears in the table row. This might look more
like background color for the table cell than a graphic, but if you look
closely, you’ll see that the graphic has rounded corners. The rounded
corner effect gives the lower portion of your page an interesting
appearance after you’ve finished adding all of the assets.

78

Tutorial: Adding Content to Pages

Insert an image by dragging
1.

Click once inside the last row of the last table on the page (just below
the colored table cells).

2.

In the Files panel (Window > Files), locate the body_main_footer.gif
file (it’s inside the images folder), and drag it to the insertion point in
the last table.

NO TE

If the Image Tag Accessibility Attributes dialog box appears, click OK.

3.

Click once outside the table and save the page (File > Save).

Insert images

79

Insert an image from the Assets panel
1.

Click once inside the center column of the three-columned table (the
first table cell that is colored light tan).

2.

In the Property inspector (Window > Properties), select Center from the
Horz pop-up menu, and select Top from the Vert pop-up menu. This
aligns the contents of the table cell in the middle of the cell, and pushes
the cell’s contents to the top of the cell.

N OT E

If you cannot see the Vert or Horz pop-up menus, click the expander arrow
in the lower-right corner of the Property inspector.
3.

80

Tutorial: Adding Content to Pages

Press Enter (Windows) or Return (Macintosh) once to create more
space.

A BO UT . ..

The Assets panel You can use the Assets panel to view and manage assets in your current site. The
Assets panel displays assets for the site associated with the active document in the Document window.
You must define a local site before you can view assets in the Assets panel. For more information, see
Chapter 3, “Tutorial: Setting Up Your Site and Project Files,” or Using Dreamweaver.
The Assets panel provides two views:
The Site list shows all of the assets in your site, including colors and URLs that are used in any document
in your site.
The Favorites list shows only the assets you’ve explicitly chosen. To add an asset to the Favorites list,
select the asset in the Site list, and then select Add to Favorites from the Options menu in the upper-right
corner of the Files panel.
When you click an asset in the Assets panel, the preview area displays the asset you selected. To change
the size of the preview area, drag the line that separates the preview area from the asset column
headings.
For more information, see “Working with assets” in Using Dreamweaver.

4.

Click the Assets tab in the Files panel, or select Window > Assets.
Your site assets appear.

Images button

5.

If Images view isn’t selected, click Images to view your image assets.

6.

In the Assets panel, select the street_sign.jpg file.

Insert images

81

7.

Do one of the following:
■

■

Drag the street_sign.jpg file to the insertion point in the center
table cell.
Click Insert at the bottom of the Assets panel.

NO T E

If the Image Tag Accessibility Attributes dialog box appears, click OK.

The street_sign.jpg graphic appears on the page.

82

8.

Click once outside the table to deselect the image.

9.

Save the page.

Tutorial: Adding Content to Pages

Insert and play a Flash file
Next, you’ll insert a Flash file that plays a photographic slide show of Cafe
Townsend’s featured food items. The Flash file you’ll insert is a flexible
messaging area—or FMA—file. An FMA is a common type of Flash
application that displays an informational message to the audience. The
message can change based on the needs of the business. For example, if
Cafe Townsend is holding a special event, the FMA could easily change
(without affecting the rest of the web page) to display information about
the event, instead of featured food items.
To insert the Flash FMA file, you need to insert HTML code that embeds
the file in the Dreamweaver page. The easiest way to do this is to insert the
SWF file (the exported Flash Movie file) into the page. When you insert a
SWF file in Dreamweaver, Dreamweaver writes all of the necessary Flash
HTML code for you.
1.

With the index.html page open in the Dreamweaver Document
window, click once inside the second row of the first table.
This is the table row immediately below the banner graphic you
inserted in the previous section.

2.

In the Property inspector (Window > Properties), select Center from the
Horz pop-up menu, and select Middle from the Vert pop-up menu.
This places the contents of the table cell in the middle of the cell.

N OT E

If you cannot see the Vert or Horz pop-up menus, click the expander arrow
in the lower-right corner of the Property inspector.

Insert and play a Flash file

83

A BO UT . ..

About Flash files When you build assets in Macromedia Flash, you work in FLA files, the default file
type for the Flash application. FLA files are designated by a .fla extension. For example, if you are working
on an animated logo for a website, the filename of the Flash file might be animated_logo.fla.
When you’ve finished working on a FLA file in Flash, you must export the file to a format that can be
played on the web in Flash Player. When you export FLA files in Flash, they are converted to SWF files
and designated by a .swf extension. SWF files (not FLA files) play Flash content in a web browser and are
the file type you must insert into a web page that you are building with Dreamweaver.

3.

Select Insert > Media > Flash.
In the Select File dialog box, browse to the flash_fma.swf file (it’s in the
cafe_townsend root folder of your site), select the file, and click OK.
If the Object Tag Accessibility Attributes dialog box appears, click OK.

A Flash content placeholder, rather than a scene from the FMA itself,
appears in the Document window. This is because the HTML code is
“pointing” to the SWF file flash_fma.swf. When a user loads the
index.html page, the browser plays the SWF file.
4.

The Flash content placeholder should remain selected after you insert
the SWF file, as long as you don’t click anywhere else on the page.
If it’s not selected, select the Flash content placeholder by clicking it.

84

Tutorial: Adding Content to Pages

5.

In the Property inspector (Window > Properties), click Play.

N OT E

If you cannot see the Flash Play button, click the expander arrow in the
lower-right corner of the Property inspector.

Dreamweaver plays the Flash file in the Document window, showing
you what site visitors will see when they view the page in a browser.

6.

In the Property inspector, click Stop to stop playing the Flash file.

7.

Save the page.

Insert and play a Flash file

85

Insert Flash Video
Next you’ll insert a Flash Video file, using the asset provided.
1.

With the index.html page open in the Dreamweaver Document
window, click once above the graphic that you placed in the center
column of the three-columned table.
In the previous section, you created some space before you inserted the
graphic—this is where you should click.

2.

Select Insert > Media > Flash Video.

3.

In the Insert Flash Video dialog box, select Progressive Download Video
from the Video type pop-up menu.

A B OU T .. .

About Flash Video The Insert Flash Video command in Dreamweaver lets you insert Flash Video
content in your web pages without using the Flash authoring tool. The command inserts a Flash
component, which displays the Flash Video content you select, as well as a set of playback controls,
when viewed in a browser.
The Insert Flash Video command gives you the following options for delivering video content to your site
visitors:
Progressive Download Video downloads the Flash Video (FLV) file to the site visitor’s hard disk and
then plays it. Unlike traditional “download and play” methods of video delivery, however, progressive
download allows the video file to start playing before the download is complete.
Streaming Video streams the Flash Video content and plays it on a web page immediately. To enable
streaming video on your web pages, however, you must have access to Macromedia Flash
Communication Server, the only server that can stream Flash Video content.
For more information about using Flash Video, see “Inserting Flash Video content” in Using
Dreamweaver.

86

Tutorial: Adding Content to Pages

4.

In the URL text box, specify a relative path to the
cafe_townsend_home.flv file by clicking Browse, navigating to the
cafe_townsend_home.flv file (located in cafe_townsend root folder of
your site), and selecting the FLV file.

5.

Select Halo Skin 2 from the Skin pop-up menu.
A preview of the selected skin appears below the Skin pop-up menu.
The Skin option specifies the look and feel for the Flash Video
component that will contain the Flash Video content.
For more information on how to select different skins for Flash Video
components, see www.macromedia.com/go/flv_tutorial.

Insert Flash Video

87

6.

In the Width and Height text boxes, do the following:
■
■

TIP

In the Height text box, type 135 and press Enter (Windows) or
Return (Macintosh).

The value in the Width and Height text boxes specifies the width and
height in pixels of the FLV file. You can adjust these values arbitrarily to
change the size of the Flash Video on your web page. When you
increase the dimensions of a video, the picture quality of the video
usually decreases.
NO T E

You can click Detect
Size to determine
the exact width and
height of the FLV
file. Sometimes,
however,
Dreamweaver
cannot determine
the dimensions of
the FLV file. In such
cases, you must
manually enter the
width and height
values.

In the Width text box, type 180.

“Total with skin” is the width and height of the FLV file plus the width and
height of the selected skin.
7.

Leave the default selections for the remaining options:
Constrain

maintains the same aspect ratio between the width and
height of the Flash Video component. This option is selected by
default.
Auto play specifies

whether to play the video when the web page is
opened. This option is deselected by default.

Auto rewind specifies

whether the playback control returns to starting
position after the video finishes playing. This option is deselected by
default.

88

Tutorial: Adding Content to Pages

8.

Click OK to close the dialog box and add the Flash Video content to
your web page.
The Insert Flash Video command generates a video player SWF file
and a skin SWF file that are used to display your Flash Video content
on a web page. (You may need to click the Refresh button in the Files
panel to see the new files.) These files are stored in the same directory
as the HTML file to which you’re adding Flash Video content (in this
case, the cafe_townsend root folder). When you upload the HTML
page containing the Flash Video content, Dreamweaver uploads these
files as dependent files (as long as you click Yes in the Put Dependent
Files dialog box).

9.

Save the page.

Insert text
Now you’ll add some text to the page. You can type text directly in the
Dreamweaver Document window, or you can copy and paste text from
other sources (such as Microsoft Word or plain text files). Later, you’ll use
Cascading Style Sheets (CSS) to format the text.

Insert text

89

Insert body text
1.

In the Files panel, locate the sample_text.txt file (in the cafe_townsend
root folder) and double-click the file’s icon to open it in Dreamweaver.
You’ll notice that this window is in Code view, and cannot be switched
to Design view (the view you’ve been working in until now) because
the file is not an HTML file.

2.

In the sample_text.txt Document window, press Control+A (Windows)
or Command+A (Macintosh) to select all of the text, and then select
Edit > Copy to copy the text.

3.

Close the sample_text.txt file by clicking the X in the top-right corner
of the document.

4.

In the index.html Document window, click once inside the third table
cell of the three-columned table (the cell to the right of the column that
contains the graphic and the Flash video).

5.

Select Edit > Paste.
The text from the text file appears in the selected table cell.

90

Tutorial: Adding Content to Pages

Depending on your monitor resolution, the three-columned table
widens to accommodate the text. Don’t worry about how this looks
right now. In the next tutorial, you’ll learn how to use CSS to format
the text so that everything fits in the table appropriately.
6.

Make sure the insertion point is still inside the table cell where you just
pasted the text. If it isn’t, click inside the table cell.

7.

In the Property inspector (Window > Properties), select Top from the
Vert pop-up menu. This aligns the text you just pasted to the top of the
table cell. If you cannot see the Vert pop-up menu, click the expander
arrow in the lower-right corner of the Property inspector.

8.

Save the page.

Insert text

91

Insert text for a navigation bar
Next you’ll insert text for a navigation bar. However, the text won’t look
like a navigation bar until you format it in the next tutorial.

92

1.

Click once in the first column of the three-columned table (the column
that is colored reddish-brown).

2.

Type the word Cuisine.

3.

Press the Spacebar and type Chef Ipsum.

Tutorial: Adding Content to Pages

4.

Repeat the previous step until you’ve entered the following words with
a space between each one: Articles, Special Events, Location, Menu,
Contact Us.
Do not press Enter (Windows) or Return (Macintosh) when you type.
Use only the Spacebar to separate words, and let the words wrap
naturally. The fixed width of the table cell determines how many words
fit on a line.

5.

With the insertion point still in the first cell of the three-columned
table, click the  tag in the tag selector.

Insert text

93

6.

In the Property inspector (Window > Properties), select Top from the
Vert pop-up menu.
This aligns the text you just typed to the top of the table cell.

N OT E

If you cannot see the Vert pop-up menu, click the expander arrow in the
lower-right corner of the Property inspector.
7.

Save your page.

Create links
A link is a reference, inserted in a web page, that points to another
document. You can turn almost any kind of asset into a link, but the most
common kind of link is a text link.
You can create links at any stage of the site-creation process. In this section,
you’ll create links for the navigation bar, even though you haven’t
formatted the text into the form of a navigation bar yet.
The cafe_townsend site root folder contains a finished HTML page that
you can link to (a menu page for Cafe Townsend). You’ll use this page for
all of the links in the navigation, even though you would have distinct
pages for each of these links if you were building a real site.

94

Tutorial: Adding Content to Pages

1.

With the index.html page open in the Document window, select the
word Cuisine that you typed in the first cell of the three-columned table.
Be careful to select the word Cuisine only, and not the space after it.

2.

In the Property inspector (Window > Properties), click the folder icon
next to the Link text box.

3.

In the Select File dialog box, browse to the menu.html file (which is in
the same folder as the index.html file), and click OK (Windows) or
Choose (Macintosh).

4.

Click once on the page to deselect the word Cuisine. The Cuisine text
is underlined and blue, indicating that it’s now a link.

Create links

95

5.

Repeat the previous steps to link each word or set of words that you
typed for the navigation. You want to create six more links: one for Chef
Ipsum, Articles, Special Events, Location, Menu, and Contact Us.
Link each word or set of words to the menu.html page, and be careful
to avoid the space before and after the words or set of words when you
create your links. This is only a set of dummy links; in a real-world site,
you would link each word in the navigation to its own distinct page.

NO TE

Links don’t work when you click them in the Document window in
Dreamweaver; links work only in a browser. To make sure your links work
correctly, preview your page in a browser. For instructions about how to
do this, continue to “Preview your page in a browser” on page 96.
6.

Save your page.

Preview your page in a browser
The Design view gives you a rough idea of what your page will look like on
the web, but you must preview the page in a browser to see the definitive
end result. Though browsers in general produce the same results, each
browser version can display HTML pages somewhat differently.
Dreamweaver attempts to produce HTML that will look as similar as
possible from one browser to another; but sometimes differences can’t be
avoided. Thus, previewing your work in a browser is the only way for you
to see what your site visitors will see after you publish your pages.

96

Tutorial: Adding Content to Pages

1.

Make sure the index.html file is open in the Document window.

2.

Press the F12 key (Windows) or Option+F12 (Macintosh).
Your primary browser starts if it’s not running already and displays the
index page.

N O TE

Dreamweaver automatically detects your primary browser and uses that
for previewing. If the preview doesn’t appear, or if it doesn’t appear in the
browser you expect, switch back to Dreamweaver (if necessary) and
select File > Preview in Browser > Edit Browser List. When the Preview in
Browser Preferences dialog box appears, add the correct browser to the
list. For more information, click the Help button in the Preferences dialog
box.
3.

(Optional) Switch back to Dreamweaver to make any necessary
changes.
Then save your work and press the F12 key again to make sure your
changes took effect.

Preview your page in a browser

97

You now have a web page full of content. The next step is to format some
of the content to make it more appealing. In the next tutorial, you’ll learn
how to use CSS to format the text that you added.

98

Tutorial: Adding Content to Pages

CHAPTER 6

Tutorial: Formatting
Your Page with CSS

6

This tutorial shows you how to format text on your page using Cascading
Style Sheets (CSS) in Dreamweaver. CSS provides you with greater control
over the appearance of your page by letting you format and position text in
ways that HTML cannot.
In this tutorial, you will complete the following tasks:
Locate your files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100
Review your task . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .101
Learn about CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102
Create a new style sheet. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104
Explore the CSS Styles panel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109
Attach a style sheet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106
Create a new CSS rule . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
Apply a class style to text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .113
Format the navigation bar text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .114
(Optional) Center the contents of the page . . . . . . . . . . . . . . . . . . 125

99

Locate your files
In this tutorial, you’ll begin with the Cafe Townsend index page to which
you added content in Chapter 5, “Tutorial: Adding Content to Pages.” If
you did not complete that tutorial, you can either complete it before
proceeding, or you can open the finished version of the tutorial and begin
with that. The finished version of the tutorial, add_content.html, is located
in the completed_files/dreamweaver folder, within the cafe_townsend
folder that you copied to your hard drive in Chapter 3, “Tutorial: Setting
Up Your Site and Project Files.”
NO TE

If you begin this tutorial with the completed add_content.html file, instead
of the index.html file from Chapter 5, “Tutorial: Adding Content to Pages,”
certain steps and illustrations in the tutorial will not match what you see on
your screen.

100 Tutorial: Formatting Your Page with CSS

Review your task
In this tutorial, you’ll use Cascading Style Sheets (CSS) to format the text
on the home page for Cafe Townsend, a fictional restaurant. You’ll create
different kinds of CSS rules to format the body text. You’ll also format the
link text on the left side of the page to create a navigation bar. When you’re
finished, your page will look like the following example:

Review your task

101

For more information about CSS, proceed to the next section. To start
creating CSS right away, proceed to “Create a new style sheet”
on page 104.

Learn about CSS
Cascading Style Sheets (CSS) are a collection of formatting rules that
control the appearance of content on a web page. When you use CSS to
format a page, you separate content from presentation. The content of
your page—the HTML code—resides in the HTML file itself, while the
CSS rules that define the presentation of the code reside in another file (an
external style sheet) or in another part of the HTML document (usually
the  section). With CSS you have flexibility and control over the
exact appearance of your page, from precise positioning of layout to
specific fonts and styles.
CSS lets you control many properties that cannot be controlled with
HTML alone. For example, you can specify different font sizes and units
(pixels, points, and so on) for selected text. By using CSS to set font sizes in
pixels, you can also ensure a more consistent treatment of your page layout
and appearance in multiple browsers.
A CSS formatting rule consists of two parts—the selector and the
declaration. The selector is a term (such as P, H1, a class name, or an id)
that identifies the formatted element, and the declaration defines what the
style elements are. In the following example, H1 is the selector, and
everything that falls between the braces ({}) is the declaration:
H1 {
font-size: 16 pixels;
font-family: Helvetica;
font-weight: bold;
}

The declaration consists of two parts, the property (such as font-family),
and the value (such as Helvetica). The preceding example creates a style
for H1 tags: The text for all H1 tags linked to this style is 16 pixels in size,
and uses Helvetica font and bold.

102 Tutorial: Formatting Your Page with CSS

The term cascading refers to your ability to apply multiple styles to the
same element or web page. For example, you can create one CSS rule to
apply color and another rule to apply margins, and apply them both to the
same text on a page. The defined styles “cascade” to the elements on your
web page, ultimately creating the design you want.
A major advantage of CSS is that it can be updated easily; when you
update a CSS rule in one place, the formatting of all of the documents that
use the defined style are automatically updated to the new style.
You can define the following types of rules in Dreamweaver:
■

Custom CSS rules, also called class styles, let you apply style attributes
to any range or block of text. All class styles begin with a period (.). For
example, you could create a class style called .red, set the color
property of the rule to red, and apply the style to a portion of alreadystyled paragraph text.

■

HTML tag rules redefine the formatting for a particular tag, such as p
or h1. When you create or change a CSS rule for the h1 tag, all text
formatted with the h1 tag is immediately updated.

■

CSS selector rules (advanced styles) redefine the formatting for a
particular combination of elements, or for other selector forms as
allowed by CSS (for example, the selector td h2 applies whenever an
h2 header appears inside a table cell.) Advanced styles can also redefine
the formatting for tags that contain a specific id attribute (for example,
the styles defined by #myStyle apply to all tags that contain the
attribute-value pair id="myStyle").

For more information, see “About text formatting in Dreamweaver” in
Using Dreamweaver.

Learn about CSS 103

Create a new style sheet
First, you’ll create an external style sheet that contains a CSS rule that
defines a style for paragraph text. When you create styles in an external
style sheet, you can control the appearance of multiple web pages from a
central location, instead of setting styles on each individual web page.
1.

Select File > New.

2.

In the New Document dialog box, select Basic page in the Category
column, select CSS in the Basic Page column, and click Create.

A blank style sheet appears in the Document window. The Design view
and Code view buttons are disabled. CSS style sheets are text-only
files—their contents are not meant to be viewed in a browser.

104 Tutorial: Formatting Your Page with CSS

A BO UT . ..

More about CSS rules
CSS rules can reside in the following locations:
External CSS style sheets are collections of CSS rules stored in a separate, external .css file (not an
HTML file). The .css file is linked to one or more pages in a website by using a link in the head section of a
document.
Internal (or embedded) CSS style sheets are collections of CSS rules that are included in a style tag in
the head portion of an HTML document. For example, the following example defines the font size for all
text in the document formatted with the paragraph tag:



Inline styles are defined within specific instances of tags throughout an HTML document. For example,
 defines the font size for only the paragraph formatted with the tag that
contains the inline style.
Dreamweaver renders most style attributes that you apply and displays them in the Document window.
You can also preview the document in a browser window to see styles applied. Some CSS style attributes
render differently in Microsoft Internet Explorer, Netscape Navigator, Opera, and Apple Safari.

3.

Save the page (File > Save) as cafe_townsend.css.
When you save the style sheet, make sure you save it in the
cafe_townsend folder (the root folder of your website).

4.

Type the following code in the style sheet:
p{
font-family: Verdana, sans-serif;
font-size: 11px;
color: #000000;
line-height: 18px;
padding: 3px;
}

As you type, Dreamweaver uses code hints to suggest options for
completing your entry. Press Enter (Windows) or Return (Macintosh)
when you see the code you want to let Dreamweaver finish the typing
for you.

Create a new style sheet 105

Don’t forget to include a semicolon at the end of each line, after the
property values.
When you’re finished, the code should look like following example:

TI P

For more information
about any CSS
property, check the
O’Reilly reference
guide included with
Dreamweaver. To
display the guide,
select Help >
Reference and
select O’Reilly CSS
Reference from
the pop-up menu in
the Reference panel.

5.

Save the style sheet.

Next you’ll attach the style sheet to the index.html page.

Attach a style sheet
When you attach a style sheet to a web page, the rules defined in the style
sheet are applied to the corresponding elements on the page. For example,
when you attach the cafe_townsend.css style sheet to the index.html page,
all paragraph text (text formatted with the 
 tag in the HTML code) is
formatted according to the CSS rule you defined.

106 Tutorial: Formatting Your Page with CSS

1.

In the Document window, open the Cafe Townsend index.html file.
(You can click its tab if it’s already open.)

2.

Select the text of the first paragraph that you pasted into the page in
Chapter 5, “Tutorial: Adding Content to Pages”.

3.

Look in the Property inspector and make sure that the paragraph is
formatted with the paragraph tag.
If the Format pop-up menu in the Property inspector says “Paragraph,”
the paragraph is formatted with the paragraph tag. If the Format popup menu in the Property inspector says “None,” or something else,
select Paragraph to format the paragraph.

4.

Repeat step 3 for the second paragraph.

Attach a style sheet 107

5.

In the CSS Styles panel (Window > CSS Styles), click the Attach Style
Sheet button in the lower-right corner of the panel.

6.

In the Attach External Style Sheet dialog box, click Browse and browse
to the cafe_townsend.css file that you created in the previous section.

7.

Click OK.
The text in the Document window is formatted according to the CSS
rule in the external style sheet.

108 Tutorial: Formatting Your Page with CSS

Explore the CSS Styles panel
The CSS Styles panel lets you track the CSS rules and properties that affect
a currently selected page element, or the rules and properties that affect an
entire document. It also lets you modify CSS properties without opening
an external style sheet.
1.

Make sure the index.html page is open in the Document window.

2.

In the CSS Styles panel (Window > CSS Styles), click All at the top of
the panel and examine your CSS rules.
In All mode, the CSS panel shows you all of the CSS rules that apply to
the current document, whether those rules are in an external style
sheet, or in the document itself. You should see two main categories in
the All Rules pane: a