Course: Macromedia Dreamweaver 8

INSTRUCTIONS: Feel free to print these lessons in advance of the class. Note: you will
still need to log into our online course site (http://courses.help.com) to read assignments,
watch videos, take classes and interact with other class member and the instructor. SEE
YOU IN CLASS!

CNET Help.com Online Courses are free, instructor-led online classes on the latest
technology and digital living topics for registered CNET members.

Feel free to check out our Online Course Catalog at http://courses.help.com.

Macromedia Dreamweaver 8

Macromedia Dreamweaver 8 is a full-featured Web page design software application that enables you to create, edit, and
publish Web pages. In this course, you'll learn how to create aesthetically pleasing and sound Web pages using
Dreamweaver's host of tools. You'll also understand how to publish and manage a Web site.

Lessons

1. Getting to Know Dreamweaver 8

In this lesson, you'll be introduced to Dreamweaver 8 and take a tour of its interface.

2. Working with Text

In this lesson, you'll learn how to work with text using Dreamweaver's text formatting and page setting options.

3. Tables Made Easy

Many of today's complex Web page designs use tables to control layout. In this lesson, you'll learn how to work with
tables successfully.

4. Working with Style Sheets and XHTML

In this lesson, you'll learn how you can use Dreamweaver's tools with two key W3C specifications: CSS and XHTML.

5. Images, Rollovers, and Media

In this lesson, you'll learn how to add images, rollovers, and media (audio and video) to your Web pages.

6. Managing Your Web Site with Dreamweaver 8

In this lesson, you'll learn how to use Dreamweaver's site management features, and how to publish a Web site using
FTP in Dreamweaver.
Getting to Know Dreamweaver 8

Lesson Description

In this lesson, you'll be introduced to Dreamweaver 8 and take a tour of its interface.

Introducing Dreamweaver 8 Try It or Buy It?

You can get a 30-day-trial version of

Macromedia Dreamweaver 8 is the latest version for powerful Web design and
Dreamweaver 8 from the Macromedia
development. Dreamweaver has evolved from a basic WYSIWYG (What You See
Web site. Go to the Macromedia
Is What You Get) HTML (Hypertext Markup Language) editor to a full-fledged Web
Downloads page, and then click the
application.
Try link in the listing for Dreamweaver
8. On the Macromedia Trial
You can use Dreamweaver's easy-to-use tools for: Downloads page, type your e-mail
address and password to sign in, or
● Designing and laying out pages with HTML and/or XHTML (Extensible register for a free account. Then,
Hypertext Markup Language) and CSS (Cascading Style Sheets) follow the prompts to download your
● Adding images and multimedia files to Web pages trial version of Dreamweaver 8.
● Creating interactivity with built-in JavaScript behaviors
● Building page templates for creating pages with the same design theme For product reviews, user opinions,
and elements and the best deals from a wide variety
● Checking browser compatibility as you create Web pages of vendors, check out the Macromedia
● Managing your Web site
Dreamweaver 8 page on CNET.com.
● Uploading and downloading Web site files from your computer to a Web
server
● Creating database connections and data-driven Web pages

TIP
Customize Dreamweaver to meet your needs. You can select a
variety of options from its extensive Preferences menu. Also, you can
change Dreamweaver's appearance, available options, and other
basic features if you know JavaScript or XML (Extensible Markup
Language).

What's New in Dreamweaver 8 Who Should Use Dreamweaver

Designers and developers at all levels of

New and improved features in Dreamweaver 8 include:
experience can benefit from the new
features in Dreamweaver. Whether you're
● Visual tools that make it easier to include XML-based data. Simply point mainly interested in Web page layout and
a Web page to an XML file or the URL (Uniform Resource Locator) of design or more experienced with scripting
an XML feed, and then just drag and drop fields onto the Web page. and databases, you can use
● More support for CSS. With the new CSS panel, you have quick access Dreamweaver tools to create Web pages
to styles with its consolidated view and visual representation of the and sites quickly and easily.
cascade. You can easily review Web page structure with the new CSS
layout visualization. With the styles rendering toolbar, see how your
It's not necessary to know HTML, CSS, or
Web pages will work with different CSS media types.
JavaScript to use Dreamweaver -- you
● Greater control over design. Use the Zoom feature to closely inspect an
can select viewing options for your work.
image or nested table. Accurately compare page layouts to mockups or
Code, Design, and Split views make it
measure distances with the new guides.
easy to focus on code, design, or both.
● Toolbar with common coding features (in the gutter next to the Code
You'll learn more about these view options
view). You can expand and collapse pieces of code to easily focus on
 particular sections. in the "Navigating the Document Window"
● Enhanced support for Flash video. You can add Flash videos in five section of this lesson.
mouse clicks or less by pointing Dreamweaver 8 to any Flash video file
and selecting the playback controls you want displayed.

Exploring the Dreamweaver Workspace

To start Dreamweaver 8, select Start > All Programs > Macromedia > Macromedia
Dreamweaver 8. Each time you start Dreamweaver, the Start page appears, as shown in
Figure 1-1. You can use the options on this page to open recent documents, create new
documents, use the Dreamweaver sample files, find documentation and training
resources, and connect to the Dreamweaver Exchange on the Macromedia Web site.

Figure 1-1: Dreamweaver 8 trial version Start page.

TIP
The Start page automatically opens any time there's not a file open in the
Document window. To disable this feature, check the Don't show again box
on the Start page.

You can see the rest of the Dreamweaver interface when you open a new Web page. On
the Start page, select HTML in the Create New column.

The workspace includes the Dreamweaver menu bar, insert bars, a document window,
and an assortment of panels. You'll take a closer look at each of these in the following
sections of this lesson.
Using the Dreamweaver Menu Bar
The Dreamweaver menu bar, shown in Figure 1-2, includes the following menus:

Figure 1-2: Dreamweaver menu bar.

● File: Open and save files

● Edit: Copy and paste, find and replace, and set preferences
● View: Document view preferences, as well as visual aids and layout tools
● Insert: Images, media, layout objects, tables, forms, and links

Dreamweaver's Insert bars include all the options of the Insert menu in a
visual interface.

● Modify: Change properties of the page or any objects on the page

● Text: Text formatting options
● Commands: Additions to the basic Dreamweaver program, such as Web photo
albums
● Site: Site management and editing
● Window: Open and close panels
● Help: Tutorials and help documents

Many of these menu options are also available to you via the Insert bars.

Navigating the Document Window

Dreamweaver displays files in the Document window, directly below the main application
menu bar. You can quickly switch from one open document to another with the tabbed
interface in the maximized Document window, as shown in Figure 1-3.

Figure 1-3: Dreamweaver Document window with tabbed interface and Document
toolbar.

Notice the Document toolbar conveniently located at the top of the Document window.
With it, you can access the tools that you're likely to use most often. From left to right,
these tools include:

● View options: Code, Split, or Design. Figure 1-4 shows a page in Split view, with
Code view on the top and Design view on the bottom. You can make either
window larger by moving the divider bar in between the two windows.
Figure 1-4: You can select Code, Split, and Design views while you work.

● Document title: Title that appears in the browser title bar when the page is
viewed in a browser.
● No Browse Check Errors: Check the file for any incompatibilities in your selected
target browsers.
● Validate markup: Validate the tags and syntax used in the current file, selected
files, or all files in the site.
● File management: Upload or download files from a Web server.
● Preview/Debug in browser: Preview pages in selected browsers.
● Refresh Design View: Refresh the page after changes in Design view.
● View options: Select additional viewing choices for both Code and Design views.
● Visual Aids: Select additional tools to aid in the page design.

Working with Panels

You can access a variety of tools with Dreamweaver panels, as shown in Figure 1-5. You
can change the panel groups and make new combinations of panels to suit your work
patterns. To open a panel group, click the arrow to the left of the panel name. You can get
additional options for an open panel by clicking the drop-down options menu on the right
of the panel group to view the context menu.

Figure 1-5: Panels in the Dreamweaver workspace.

On a PC, most panel groups appear on the right side and along the bottom
of the Document window; on the Mac, they're in the floating workspace.
The various panel options are discussed in the following sections.

CSS Panel Group

You can access the CSS Styles and Layers panels from this group. With the CSS Styles
panel, you can view, create, edit, and remove CSS styles and attach external style sheets
to files. With the Layers panel, you can manage the layers in a file, nest and stack layers,
and change their visibility.

Tag Inspector Panel Group

The Attributes and Behaviors panels reside in the Tag Inspector panel group. The
Attributes panel displays any attributes in the current document. You can select whether
to view attributes in categories or in an alphabetical list by using the buttons at the top of
the panel. You can access Dreamweaver's built-in JavaScript behaviors via the Behaviors
panel. You'll explore behaviors in Lesson 5.

TIP
If you don't see the panel you need in the workspace, open the panel by
selecting it from Window menu.

Files Panel Group

The Files panel group includes the Files, Assets, and Snippets panels, as shown in Figure
1-6. You can access all the files for any Dreamweaver site via this panel. Its Files toolbar
includes additional files options. The Assets panel offers easy access to images, media
files, library items, and scripts for the site. You can take advantage of the Snippets panel
for HTML, JavaScript, CFML, ASP JSP, and other types of reusable content.

Figure 1-6: Files panel.

Properties Panel Group

The Properties panel, sometimes referred to as the Property inspector, is located at the
bottom of the Dreamweaver workspace, below the Document window. This is the
Dreamweaver panel you'll use most often because it shows all properties of the currently
selected item in a document, and enables you to add and change properties. The
appearance of this panel changes depending on the selected item. Figure 1-7 shows the
Property inspector.

Figure 1-7: Property inspector.

Results Panel Group
The Results panel group, shown in Figure 1-8, also opens at the bottom of the
Dreamweaver workspace. You can create and display reports on various site operations
from this panel group, which includes the following panels:

Figure 1-8: Results panel.

● Search: Displays results for Find and Replace operations

● Reference: Displays specific tags, objects, and styles being used in the Code
view, as well as sample code, that can be quickly inserted into a file
● Validation: Displays errors and warnings about validating the code in the current
document
● Target Browser Check: Displays incompatibilities in the current document for
your selected target browsers
● Link Checker: Displays any broken links in the current document or site
● Site Reports: Displays the site test results
● FTP Log: Displays exactly which files were transferred to and from the Web server
● Server Debug: Debugs ColdFusion files

Panels with Advanced Features

Some panels have advanced features and aren't included in this course, but are
summarized in the following sections.

Application Panel Group

This panel group includes the Databases, Bindings, Server Behaviors, and Components
panels. These panels include advanced features you can use for connecting to databases
and creating data-driven Web applications. If you're interested in these advanced
features, you can find out more about them in the Dreamweaver tutorials and Help
documents.

Frames Panel Group

For a visual representation of a frameset and its frames, you can use the Frames panel. If
you're interested these advanced features, you can find out more about them in the
Dreamweaver tutorials and Help documents.

Timelines Panel Group

The Timelines panel is located at the bottom of the Dreamweaver workspace, as shown in
Figure 1-9. You can use it to animate a Web page by changing the properties of layers
and images over time. If you're interested in these advanced features, you can find out
more about them in the Dreamweaver tutorials and Help documents.

Figure 1-9: Timelines panel.

Using the Insert Bars
Dreamweaver's collection of Insert bars gives you easy access to Dreamweaver tools via
a visual interface. The Insert bar displays right below the Dreamweaver menu bar. If the
Insert bar isn't visible, select Window > Insert to display it in your Dreamweaver
workspace.

To access the tools, just select the arrow and then select the category of tools you wish to
access, as shown in Figure 1-10. An arrow next to a button indicates that you can select
from a drop-down menu -- just click it to view the additional choices.

Figure 1-10: Insert bar categories.

Dreamweaver 8 includes the following categories in the Insert bar:

● Common: Includes the most common elements that you'll add to your pages,
including links, images, and media files. Figure 1-11 shows the Common Insert
bar.

Figure 1-11: Common Insert bar.

● Layout: Includes options for laying out your page with tables and/or layers. Tables
are covered in Lesson 3.
● Forms: Enables you to add forms and form elements to your pages. Forms are
covered in Lesson 5.
● Text: Used to format text and add special characters.
● HTML: Contains buttons for common HTML objects such as horizontal rules,
tables, and frames.
● Application: Includes options for any server objects used in the current
document. The objects change depending on the server technology you're using
in the current document.

Dreamweaver supports five server technologies: ASP, ASP.NET,

ColdFusion, JSP (Java Server Pages), and PHP (PHP Hypertext
Preprocessor).

● Flash elements: Includes prebuilt Flash components that you can add to your
Dreamweaver pages to create RIAs (Rich Internet Applications). RIAs are a new
type of Internet application that features more-interactive and more user-
responsive interfaces.
● Favorites: Allows you create your own group of favorite objects for easy insertion
into Dreamweaver pages. To add an item to the Favorites Insert bar, right-click
 (Ctrl+click Mac symbol) any button in an Insert bar and select Customize
Favorites. This opens the Customize Favorite Objects dialog box where you can
add and delete items from the Favorites Insert bar.

Moving On
Dreamweaver is a features-rich program with a wide variety of tools, and every new
version adds even more new items. In this lesson, you learned about the menus and tools
in the Dreamweaver 8 interface.

Before you move on to Lesson 2, complete the assignment and take the quiz for this
lesson. In addition, visit the Message Board to find out what your classmates and
instructor are up to.

In Lesson 2, you'll learn about working with text in Dreamweaver.

Working with Text

Lesson Description

In this lesson, you'll learn how to work with text using Dreamweaver's text formatting and page setting options.

Setting Page Properties

The Page Properties dialog box gives you easy access to the appearance of all text on
the page, including headings, links, and lists.

To set page properties, create a new HTML page (select File > New, and then click
Create; or select HTML from the Create New list on the Start page). Next, select Modify
> Page Properties from the main Dreamweaver menu bar. The Page Properties dialog
box appears. This dialog box includes options for five categories of properties, as shown
in the following sections.

Appearance
In the Appearance pane, shown in Figure 2-1, you can select all the basic text properties,
including:

Figure 2-1: Page Properties dialog box, Appearance pane.

● Page font: Select from Dreamweaver's families or select Edit Font List from the
drop-down menu to add additional font choices.
● Bold and/or Italic: Click B or I to apply bold or italic formatting to all of the page
text.
● Size: Select a text size in points, or select a relative value such as small. After you
select a value in the Size drop-down list, you can change the units to pixels,
centimeters, and so on, using the drop-down list to the right.
● Text color: Click the box to open Dreamweaver's color picker and select a color
for the text on the page.
● Background color: Click the box to select a background color for the page from
the color picker.
● Background image: Click Browse to browse to the location of the image file on
 your hard disk or enter the path and file name in the box.
● Repeat: When using a background image, specify if and how the image should be
tiled.
● Margins: Set page margins for left, right, top, and/or bottom margins by entering a
value and selecting a unit of measurement from the drop-down menu.

Links
From the Links pane, shown in Figure 2-2, specify how linked text should appear. This
includes type font, bold or italic style (optional), size, and colors.

Figure 2-2: Links pane.

Most browsers use blue for links and purple for visited links. You can select different
colors for the following types of links:

● Link color: Color before the link is clicked

● Rollover links: Color when the user moves over the link
● Visited links: Color after the link is clicked
● Active links: Color when the link is clicked (changes to visited link color afterward)

You can also choose whether links are underlined and whether the underlines are visible
when users move their pointers over the links.

TIP
If you decide not to underline links, make sure that it's obvious from the rest
of the page context that they're links -- most viewers expect to see those
underlines!

Headings
Use the Headings pane, shown in Figure 2-3, to select styles for the headings on your
page. Headings are bold formatted by default, and have default sizes that range from H1
(largest) to H6 (smallest).
Figure 2-3: Headings pane.

You can select a font, text size, and color for headings. Figure 2-4 shows an example of
the six heading sizes.

Figure 2-4: Heading types.

Title/Encoding
In the Title/Encoding pane, shown in Figure 2-5, you can enter a title for your page and
specify the DTD (Document Type Definition) and encoding. The DTD specifies that the
page will be a version of either HTML or XHTML. Once set, the resulting code will be
compliant with the DTD specified. The default encoding is Western European, but if you're
coding for an international audience, you can select another type of document encoding
from the drop-down menu.
Figure 2-5: Title/Encoding pane.

Dreamweaver also supports Unicode, so if your document needs to be in that format,

select Unicode from the Encoding menu; then the additional Unicode options display in
this pane.

TIP
See the Unicode home page for more information on Unicode documents.

Tracing Image
Use the Tracing Image pane, shown in Figure 2-6, to include a tracing image in your page
background. Click Browse to locate an image file on your hard disk and select an opacity
level with the slider bar. The tracing image displays when you're working on the page and
helps you arrange page elements in specific locations, but it doesn't display in the
browser. For additional tracing image options, select View > Tracing Image to display
these options.

Figure 2-6: Tracing Image pane.

After you've selected your page formatting options, click OK, and then save the page
(File > Save). When you enter text on the page, it automatically displays with your
choices for background and text formatting. If you open the CSS Styles panel, as shown
in Figure 2-7, you'll see that Dreamweaver has automatically created styles for your text
formatting choices. You'll learn more about CSS styles in Lesson 4.
Figure 2-7: Dreamweaver automatically creates CSS styles from your page property
choices.

Selecting Fonts and Inserting Lists

When you select a font family, make sure that you select from the standard font families
that are included on most computers, such as Times, Arial, Helvetica, or Verdana. If you
select a font that users may not have installed on their computers, your text will display in
the default font for their browsers.

You can select either a serif (type characters include additional small decorative lines)
font, such as Times, or a sans-serif font, such as Arial.

TIP
Verdana is a sans-serif font designed specifically for use on the screen, and
is installed on most computers.

Adding Lists
You can present information in list format on your page by using the Text menu (Text >
List) to select a list style. Dreamweaver enables you to select from the following:

● Unordered List: Display with a preceding bullet

● Ordered List: Display with a preceding number
● Definition List: Include a term and an indented definition

Figure 2-8 shows examples of each of these list formats.

Figure 2-8: List formats.

Using Microsoft Word and Excel Documents in

Dreamweaver
You can import a Word document directly into a Dreamweaver page, or copy and paste
from a Word document to your Dreamweaver file.

Figure 2-9 shows an original Word document that includes formatting for 11-point bold
Verdana for the header, a bulleted-list format, and regular 10-point Verdana for the list
items.
Figure 2-9: The original document in Word.

To import this document directly to Dreamweaver, open a new HTML page in

Dreamweaver, and then select File > Import > Word Document. Locate your Word
document in the file list, and then click Open. Dreamweaver pastes the page into your
open HTML document. Figure 2-10 shows the imported page in Dreamweaver. The
header is in bold, and Dreamweaver has inserted a bulleted list to display the list items. At
this point, you can reformat the text font in Dreamweaver to resemble the original
document.
Figure 2-10: Imported Word document.

Alternatively, you can also copy and paste Word text into a Dreamweaver document.
Open your Word document, select the text, and copy it. You have two options for pasting
the text in Dreamweaver: paste the text with no formatting (Edit > Paste) or with
formatting by selecting Edit > Paste Special and then selecting Text with structure plus
full formatting.

When you paste Word formatted text, Dreamweaver preserves Word formatting styles
and closely approximates the appearance of the original Word document. To make your
document even more closely resemble your original Word document select Commands >
Clean Up Word HTML, and then click OK.

TIP
Select Edit > Paste Special > Text with structure plus full formatting,
and then Commands > Clean Up Word HTML for the closest
approximation to the original look of your Word document.

Importing Microsoft Excel Documents

You can also import an Excel document into Dreamweaver. Dreamweaver creates a table
to approximate the appearance of the Excel document; however, most of the Excel
formatting will be lost. You can add additional formatting in Dreamweaver to make the
document appear closer to the original.

Moving On
In this lesson, you learned how to set page properties, select fonts, and insert lists in
Dreamweaver, and how to import Word and Excel documents.

Before you move on to Lesson 3, complete the assignment and take the quiz for this
lesson. In the assignment for this lesson, you'll create an HTML page using
Dreamweaver's page properties. In addition, visit the Message Board to find out what
your classmates and instructor are up to.

In Lesson 3, you'll learn how to create and use tables in Dreamweaver.

Tables Made Easy

Lesson Description

Many of today's complex Web page designs use tables to control layout. In this lesson, you'll learn how to work with tables
successfully.

Creating a Basic Table

Dreamweaver makes it easy to layout your Web pages with tables. Although HTML tables
were originally created to present tabular information, Web designers quickly realized that
tables are effective page layout tools. Page layout can also be done with layers, covered
later in this lesson, or with CSS, covered in Lesson 4.

To create a table in Dreamweaver, open a new HTML page (select File > New > Basic
Page > HTML or select HTML from the Start page). You can insert a table by selecting
Insert > Table or by clicking the Table button in the Common Insert bar, as shown in
Figure 3-1.

Figure 3-1: Table button in the Common Insert bar.

The Table dialog box, shown in Figure 3-2, appears. This dialog box gives you easy
access to the table options.
Figure 3-2: Table dialog box.

Follow these steps to create a table:

1. Basically, tables consist of rows and columns, so the first option is to enter a
number for rows and a number for columns. In this case, a simple table with three
rows and three columns.

TIP
When the Table dialog box appears, it displays whatever options you used
the last time you created a table.

2. Set a size for the table. You can set a fixed width for the table, such as 600 pixels,
or you can set the size as a percentage, for example, 75 percent. If you use a
relative measurement (percentage), the table changes size depending on the size
of the browser window on the user's computer.
3. Enter a number for the border thickness in pixels. Often, tables are displayed
without a border (0 pixels), but during the page design process it's useful to be
able to visualize the table borders. So for now, set the border thickness to 1.
4. Cell padding determines the amount of space between a table cell's content and
the inside edges of the cell. Set the cell padding to 5 to create five pixels of space
on all four sides of the cell's content. Cell padding is similar to margins, but it
applies to individual cells rather than a whole page.
5. Cell spacing sets the amount of space in between the individual cells of the table.
Set the cell spacing to 0.
6. If you want to display headers for the table rows or columns, select Left, Top, or
Both in the Header area of the dialog box. A header cell displays text in bold
format and left-aligned by default.
7. The Tables dialog box also offers options for accessibility features. You can add a
caption to the table, and display it on the top, bottom, left, or right of the table
display. You can also add a table summary that provides a description of the table
content for those visitors who use screen readers to access your page.

Accessibility options for tables are enabled by default. To enable

accessibility attributes for forms, frames, media files, or images, select Edit
> Preferences, select Accessibility in the left pane, and then check the
checkboxes for your selected options. The Accessibility dialog box appears
when you insert any of your selected options.

8. Click OK to insert the table in your page, as shown in Figure 3-3.

Figure 3-3: A three-row, three-column table with a one-pixel border.

Adding Column and Row Spans
Maybe you'd like to create a table that is less symmetrical as the three-row, three-column
table you created in the last section. For example, what if you want to insert an image on
the left side of a table, and then have three rows of information displaying next to the
image? No problem! You can use Dreamweaver to adjust the rows and columns. You use
column spans and row spans accessed from the Modify menu in the main Dreamweaver
menu bar, or the Table cell Property inspector.

1. Open a new Dreamweaver HTML page and insert a table with three rows and two
columns that's 400 pixels wide and has a border thickness of 2 pixels, as shown in
Figure 3-4.

Figure 3-4: A three-row, two-column table with a two-pixel border.

2. Insert the cursor in the first cell of the first row, and then select Modify > Table >
Increase Row Span. The first cell of the first row and the first cell of the second
row are joined into one cell.
3. Leave the cursor in this cell, and repeat Step 2 to add the first cell of the third row
into this cell. Your table should now resemble the table that's shown in Figure 3-5.

Figure 3-5: A two-column table with a row span of three in the first column.

You can accomplish the same effect using the Property inspector, as follows:

1. Insert another table on this page (or create a new page and insert a table) with
three rows and two columns.
2. Insert the cursor in the first cell of the first row, and then open the Property
inspector at the bottom of the Dreamweaver workspace. If the Property inspector
isn't expanded, open it by selecting Window > Properties.
3. If the Property inspector isn't in expanded view, click the downward arrow in the
lower-right corner of the Properties panel. The expanded view is shown in Figure
 3-6.

Figure 3-6: Table cell Properties panel in its expanded view.

4. Select the three cells in the first column by hovering your mouse near the top of
the column until the mouse pointer changes to a downward-facing arrow, and then
left-click.
5. Under the word Column on the left side of the Property inspector, there are two
buttons: one to merge cells and one to split cells. Click the Merge cells button and
join all three of the selected cells. (Notice that the word Column changes to Cell
when you select a single cell, or it changes to Row when you select a row.)

WARNING
When you select a group of cells to merge, the cells must form a rectangle --
you can't join the first three cells of one column with, for example, only the
first cell of the second column.

6. Now insert the cursor in the second cell of the first row.
7. To make this cell two separate cells, click the Split cells button.
8. The Split Cell dialog box appears, as shown in Figure 3-7. Select Columns, and
then leave the default value of 2 in the Number of columns box. Click OK.

Figure 3-7: Split Cell dialog box.

Your table should now resemble the one in Figure 3-8. This table has three
columns, with a row span of three in the first column, and a column span of
two in the second cell of the second and third rows. The column span for
the second and third rows was automatically created when you split the
cell to create an additional column.

Figure 3-8: Table with row spans and column spans.

TIP
You can use whichever mode you prefer -- modify tables using the Modify
menu, or make changes directly in the Property inspector. To split cells
using the Modify menu, select the cell, and then select Modify > Table >
Split Cell.
Nesting Tables Zoom and Guides

To support more complex page

In addition to modifying your table by spanning rows and columns, you can also nest
layouts, Dreamweaver 8 has
tables within other tables to meet your page layout needs.
added features so that you can
zoom in and out on the
Create a new HTML page and insert a table (or open a page that contains one of the Document window and use
tables you created earlier in this lesson). Put the cursor in any table cell, and then insert a guides when you work with
table in that cell (Insert > Table). A nested table is shown in Figure 3-9. tables. This gives you the
advantage to see nested
tables. To zoom in, select the
Zoom tool (it resembles a
magnifying glass) at the bottom
of the Document window and
then click the area you want to
magnify. To zoom out, select
the Zoom tool and then press
the Alt key as you click inside
the Document window. To
toggle guides on and off, select
Figure 3-9: Table with another table nested in a table cell. View > Guides > Show
Guides. To edit guides, select
The width of the nested table is limited to the width of the cell you insert it in, but you can View > Guides > Edit Guides.
also change the width of the cell in the original table if you need to make it bigger to In the Guides dialog box, you
accommodate the nested table. can change guide and distance
colors, turn snap features off
and on, and lock and unlock
Although you can nest as many layers of tables as you want -- tables within tables within the guides. When you're
tables, and so on -- it's not recommended. In general, your pages will display most finished, select the Select tool
reliably if you limit table nesting to one layer. The HTML markup for several layers of table at the bottom of the Document
nesting can get so complex that it increases the time it takes for the browser to interpret window.
the markup (and, therefore, for the page to display). It may also lead to unexpected errors
in page display.

Creating Tables in Layout Mode

In addition to inserting tables in Dreamweaver, you can also draw tables in Layout mode,
as follows:

1. Create a new HTML page, and then open the Layout mode (View > Table Mode
> Layout Mode). The Getting Started in Layout Mode dialog box appears if this is
your first time using it. Notice this message shows a Draw Layout Cell button and
a Layout Table button, as shown in Figure 3-10. You'll use these buttons to create
a table and draw a cell layout in the next steps. Click OK.
Figure 3-10: Getting Started in Layout Mode dialog box.

2. Open the Layout Insert bar.

3. Click the Layout Table button. The cursor changes to crosshairs. Drag the
crosshairs to create a table of any size you like. The table width is shown when
the table is selected.
4. Click the Draw Layout Cell button, and then draw a cell within this table. You'll
need to click the button again each time you want to add a cell. Add two additional
cells to your table -- anywhere in the table. The width of each cell displays at the
top of the cell. Save your table as table.html.

Figure 3-11 shows a table with three different size table cells drawn.
Notice that Dreamweaver is already creating additional columns and rows
to accommodate these three cells.

Figure 3-11: Table in Layout mode.

TIP
In the Layout Insert bar, note the additional buttons to the right of the Draw
Layout Cell button. These buttons display when you insert the cursor in a
table cell (in either Layout or Standard mode). They're useful to quickly add
rows and columns to your table.

5. Now switch back to Standard mode by clicking the Standard button in the Layout
Insert bar. Dreamweaver now displays all the cells of the table you created in
Layout mode plus additional columns and rows if needed, as shown in Figure 3-12.
Figure 3-12: View of table in Standard mode.

Dreamweaver has an additional mode for working with tables called

Expanded Tables mode. This mode adds padding and spacing to make it
simple to edit tables more easily and more precisely. You can access this
mode by clicking Expanded in the Layout Insert bar.

You can also use Layout mode to create tables that expand to fill an entire browser
window, regardless of the window size. One way to do this, of course, is to create a table
that has a width of 100 percent. This ensures that the table will fill the available page
space, and you can do this in either Standard or Layout mode. However, this stretches
each column proportionately to fill the space. A more elegant way to do this is to use
Dreamweaver's autostretch feature that's available in Layout mode.

Often, you only want one column to stretch when the browser page width increases.
Create a table in Layout mode by drawing the table and cells, and then selecting the
column you want to stretch. Click the column width, which may appear at the top or
bottom of a column, and then select Make Column Autostretch from the drop-down
menu next to the column width. You can also select one of the cells in the column you
want to stretch and then select the Autostretch option in the Property inspector. These
options are available only in Layout mode.

TIP
You must have rulers visible to see the column widths and the drop-down
menus. If the rules aren't visible, select View > Rulers > Show.

The column width changes to a squiggly line (~~), and your table width automatically
becomes 100 percent. This enables this column to stretch to fill the whole page width and
allows the other columns to remain a fixed size. You can convert the column back to a
fixed width by clicking the ~~ and then selecting Make Column Fixed Width. Figure 3-13
shows a Layout table with an autostretch column on the right.
Figure 3-13: Table in Layout mode with an autostretch column on the right.

Adding Color and Formatting to Tables

Now that you've covered the basics of creating tables in Dreamweaver, you'll use the
Property inspector to add more features to tables.

Create a new HTML page and insert a table (or open a page that contains one of the
tables you created earlier in this lesson). Select the table, and then open the Properties
panel (Window > Properties if it isn't already visible in the workspace). The Property
inspector for use with tables is shown in Figure 3-14.

Figure 3-14: Table Property inspector.

In addition to editing the table properties you previously set, such as number of rows and
columns, you can also use the Property inspector to select additional properties for your
table, such as the following:

● Bg color: Select a background color for your table from the Dreamweaver color
picker or enter a color name or code in the text box
● Brdr color: If your table has a border, select a color for the table borders from the
color picker or enter a color name or code in the text box
● Bg image: Enter the path to an image file, or click the folder to browse to an
image file on your hard drive

TIP
If your image file name is visible in the Files panel, you can drag the Point-to-
file cursor (circle with crosshairs) to the file name for the background image
to select that image.

The Table Property inspector also includes additional buttons on the left that can also be
used to modify additional properties, such as converting widths from percentages to pixels
or vice versa.
Using Layers in Your Page Layout
In addition to using tables for layout, you can use layers. You can then use Dreamweaver
to convert the layers to tables, or, conversely, you can convert tables to layers.

The advantage of using layers for layout is that layers can be positioned anywhere on the
page. You can add text, images, or any other page content to a layer.

Dreamweaver uses <div> tags to create layers, not <layer> tags.

To create a page using layers, follow these steps:

1. Create a new HTML page.

2. Select Insert > Layout Objects > Layer to insert a layer on the page, as shown in
Figure 3-15.

Figure 3-15: Inserting a layer on your page.

3. Type text of your choice inside the layer.

4. Select the square at the top upper-left corner of the layer, as shown in Figure 3-
15. Notice the four-directional arrow indicating that you can move the layer. Move
the layer to the location you want it to be on your page.
5. Select the layer, and then open the Property inspector to change layer properties
or add a background color or image.
6. To convert your layer to a table, select Modify > Convert > Layers to Table. The
Convert Layers to Table dialog box appears, as shown in Figure 3-16. Select the
options you prefer, and then click OK.

Dreamweaver prompts you to save the document if it's not already saved.
Figure 3-16: Convert Layers to Table dialog box.

Dreamweaver automatically creates the additional code to convert the layer to a table.

Using Tabular Data

And what about the original purpose of tables to display tabular data? Although you can
still use tables for this purpose by typing text and number content in table cells, you can
also use Dreamweaver’s tabular data feature to automatically create a table from tabular
data.

From the Layout Insert bar, click the Tabular Data button on the far right. The Import
Tabular Data dialog box appears, as shown in Figure 3-17. Browse to your tabular data
file, or enter a file path in the text box, and then select table formatting options. Click OK
to automatically insert a table that displays your tabular data.

Figure 3-17: Import Tabular Data dialog box.

Moving On
In this lesson, you learned how to use tables and layers for page layout. You also learned
how to modify table and layer properties and add additional features using the Property
inspector.

Before you move on to Lesson 4, complete the assignment and take the quiz for this
lesson. In addition, head over to the Message Board to post comments and questions for
your classmates and instructor.

In Lesson 4, you'll learn how to use styles for formatting your page display, and also learn
about using XHTML.
Working with Style Sheets and XHTML

Lesson Description

In this lesson, you'll learn how you can use Dreamweaver's tools with two key W3C specifications: CSS and XHTML.

What Are Styles? Working with Other Tool

Options

Styles are used to separate presentation (style) from content, and can be used for a
If you prefer, you can use an
single page or a whole site. If you have used a word processor program, you're probably
external CSS editor, such as
familiar with text styles. Styles can be used with HTML pages not only for text formatting,
Top Style Pro, to create style
but also to set the appearance of links, set background colors for different elements, add
borders of a certain width and color, or position an element in an exact place on the page. sheets, and then attach them
With styles, you can control every aspect of page layout and display. You can make a to your Dreamweaver pages.
change in one place and have it automatically apply to all the pages in your Web site
when you use styles in external style sheets, as covered in the following section of this
lesson.

Creating Styles and Style Sheets

Your first decision in using styles is to decide whether to make a style for one page
(embedded style) or to create external style sheets that can be used for as many pages
as you choose.

Dreamweaver 8 incorporates a new unified CSS panel in which all the

functionality is available in one place to make it easier to work with CSS
styles. Also, now you can use the new visual aids to help in laying out pages
using CSS styles.

Let's start by creating a style for one page, as follows:

1. Create a new HTML page in Dreamweaver (File > New or select HTML from the
Start page).
2. Type a sentence of text on the page. Select the text and then select Text >
Paragraph Format > Paragraph in the main Dreamweaver menu bar.
3. Open the CSS Styles panel, shown in Figure 4-1. Select Window > CSS Styles if
it isn't visible.
Figure 4-1: CSS Styles panel.

4. Click the New CSS Rule button (a small + symbol on a rectangle) at the bottom of
the panel to create a new style. The New CSS Rule dialog box appears, as shown
in Figure 4-2.

Figure 4-2: New CSS Rule dialog box.

5. Type .p1 in the Name box in the middle of the dialog box. Don't forget the period
before the name.
6. Class is selected by default as the Selector Type option. You're going to create a
 new class, so leave this option selected.

TIP
The New CSS Rule dialog box is dynamic: different options appear in the
drop-down menu depending on which option you select.

7. Select This document only in the Define in area, and then click OK.
8. The CSS Rule definition dialog box appears, as shown in Figure 4-3. This is
where you define your new style.

Figure 4-3: CSS Rule definition dialog box.

9. With the Type category selected, select a font, size, and color for your style.
10. Click OK to save your style.
11. You can now apply the new style to the selected text by opening the Property
inspector and selecting .p1 from the Style drop-down menu, or you can right-click
the style definition in the CSS Styles panel (make sure you select All at the top
first) and select Apply from the shortcut menu.

The Style drop-down menu in the Property inspector displays style names in
the format of the style, for example, the .p1 style name is displayed in small
purple Verdana text. This can be very useful when you have multiple styles
available from which to choose.

12. Your text should now display in the selected style.

As you can see in Figure 4-3 in the left pane, there are multiple categories for defining
styles. You can use one category for a given style or as many as you want. The
categories include:

● Type: These styles include all the text formatting covered in Lesson 2, plus some
additional options. You can select a font, font size, font weight, font style (normal,
italic, or oblique), font variant (small caps), line height (distance between lines of
text), text case, text color, and text decoration features such as underlining and
blinking.
● Background: These features include background color, background image,
whether and how the background image repeats, background image attachment,
and background image position.
● Block: This category includes additional text features such as word spacing, letter
spacing, alignment, indenting, white space formatting, and display options.
● Box: This category includes features for the placement and display of page
 elements such as width, height, margins, and padding.
● Border: These features include width, color, and specific border styles. You can
choose a border style for just one border, for example, the top border, or for all
four borders of an element.
● List: These options include specific styles for list item bullets and numbers and
also allow you to use an image for a list item indicator. You can also select the
positioning of the list item text.
● Positioning: This category includes options for absolute, fixed, relative, and static
positioning. Absolute positioning defines a specific spot on the page using
coordinates for an element's position. Fixed positioning defines a fixed spot in the
text. Relative positioning defines a position relative to the usual positioning of an
element. Static positioning places a layer at its location in the text flow.
● Extensions: These include options for printing styles, cursor styles, and filter
effects.

Now let's create a style and save it in a style sheet:

1. Open the HTML page you created earlier in this section.

2. Type a line of text.
3. Click the New CSS Rule button at the bottom of the CSS Styles panel to open the
New CSS Rule dialog box.
4. In the dialog box, select Tag from the Selector Type options, and then select h3 in
the Tag drop-down list.
5. Select the Define in option, and then select New Style Sheet File from the drop-
down list.
6. Click OK.
7. The Save Style Sheet As dialog box appears, as shown in Figure 4-4. Type a
name for your style sheet file in the File name text box, and then click Save. Style
sheet files are saved with a .css file extension.

Figure 4-4: Save Style Sheet File As dialog box.

8. The CSS Rule Definition dialog box appears. Select the options you want for the
Heading 3 style.
9. Click OK, and then select the line of text and select Text > Paragraph Format >
Heading 3. The h3 style is automatically applied to the text.

Because you used a tag selector, every h3 element on your page displays
with this style.

Now add one more style to your style sheet:

 1. Click the New CSS Rule button in the CSS Styles panel. The New CSS Rule
dialog box appears.
2. Select Advanced from the Selector Type options, and then select a:link from the
Selector drop-down list.
3. Select the name of the style sheet you created in the preceding steps from the
Define in drop-down list, and then click OK.
4. In the CSS Rule Definition dialog box, select the Type category in the left pane,
and then check the none checkbox under Decoration. Click OK.
5. Create a hyperlink on your page. This link displays without an underline.

WARNING
If you use links without an underline, be sure it's obvious to the user that
they're links. Most users expect to see those links.

6. Save the page and the style sheet.

Figure 4-5 shows an example of how these styles might appear on an HTML page in
Netscape Browser.

Figure 4-5: Three styles as displayed in Netscape Browser.

To attach this style sheet to another HTML page, open the page, and then click the Attach
Style Sheet button at the bottom of the CSS Styles panel. If you change any of the styles
included in this style sheet, the change automatically applies to any page linked to this
style sheet.

In Dreamweaver 8, new functionality has been added so that when you use media-
dependent style sheets, you can render the content for different CSS media types, such
as screen, print, and handheld.

To render the content for different media types, do the following:

1. Display the Style Rendering toolbar by selecting View > Toolbars > Style
Rendering.
2. The Style Rendering toolbar appears above the document window.
3. Click the appropriate button (screen, print, handheld, projection, TTY, or TV
media) to have the content rendered for that particular media type.

Using Dreamweaver's CSS Sample Pages

When you attach an external style sheet to a Dreamweaver page, you can choose sample
style sheets directly from the Attach External Style Sheet dialog box. This automatically
applies the selected style sheet sample to the current page and makes it easier than ever
to use CSS in your pages.
To attach an external style sheet, do the following:

1. Open an HTML page.

2. Select Attach Style Sheet from the drop-down menu in the upper-right corner of
the CSS panel.
3. In the Attach External Style Sheet dialog, select sample style sheets to open the
Sample Style Sheets dialog box.
4. Select a style sheet. You can click the Preview button to see how the selected
style will affect your page before making a final choice.
5. Click OK.

Understanding XHTML What's XML?

XML is used to create custom

XHTML is a transition language between HTML 4.01 (the final version of HTML) and
markup languages (XML
XML.
applications). You can design
your own language by creating
a set of tags that describe the
HTML, XHTML, and XML are all languages derived from SGML content they contain. To learn
(Standardized Generalized Markup Language). more about XML, see the
article "What the Hell is XML?"
and the W3C XML
Using XHTML, you can create Web pages that are fully compliant with the W3C (World specification.
Wide Web Consortium) standards. Why should you create Web pages that are standards-
compliant? By following Web standards, your Web pages will be most likely to display More on DOCTYPEs
correctly in browsers and to display similarly in different browsers.
A DOCTYPE specifies which
Dreamweaver enables you to create XHTML documents as your default document type, W3C standard you're using
and also lets you convert pre-existing HTML documents to XHTML documents. when you create a document.
The three types of XHTML
DOCTYPE are: strict,
In the following section, you'll learn how to create XHTML documents in transitional, and frameset.
Dreamweaver, and how to convert HTML documents to XHTML documents. Dreamweaver automatically
uses the transitional XHTML
DOCTYPE for any XHTML
document that isn't in frames,
XHTML is very similar to HTML but it uses the stricter syntax rules of XML -- XHTML is in which case, it uses the
simply a reformulation of HTML using XML syntax. The basic rules of XHTML are the frameset XHTML DOCTYPE.
same as these rules for XML syntax: The strict XHTML DOCTYPE
isn't automatically available in
● An XHTML document must contain a root element that contains all the other Dreamweaver, although you
elements in the document: The root element for an XHTML document is the can always manually change
<html> tag. Links to other documents and comments are the only components the DOCTYPE to XHTML strict.
that can be outside of the root element container.
● Every element must have a closing tag: If you create an XHTML document in
Dreamweaver, it automatically ensures that it has a closing tag. Empty elements
don't contain any content, so the tag is closed with a closing slash, for example,
<hr />.
● Elements must be properly nested: If you open one tag, and then open a
second tag before you close the first one, you must close the second tag before
you close the first one.

TIP
Dreamweaver automatically creates valid XHTML code when you make an
XHTML document. You can double-check by using Dreamweaver's page
validation tools, as described in a later section of this course.

● All XHTML elements and attributes must be in lowercase: For valid XHTML,
element and attribute names must be in lowercase. Dreamweaver automatically
uses lowercase for element and attribute names when you create XHTML pages.
 Even if you're not using XHTML, you'll find it much easier to read your code
if you use lowercase for your tags. You can set your preferences for the
case of your tags by selecting Edit > Preferences > Code Format, and
then selecting <lowercase> in the Default tag case drop-down list, as
shown in Figure 4-6.

Figure 4-6: The Code Format category of the Preferences dialog box.

● All attribute values must be in quotation marks: XHTML requires that all
attribute values be enclosed in quotation marks.

Dreamweaver also automatically applies these additional rules of XHTML syntax to the
XHTML files it creates:

● XHTML files are saved with an .html file extension.

● A DOCTYPE declaration precedes the root element.

TIP
The newer browsers (Microsoft Internet Explorer 6 and higher, and
Netscape Browser and higher) display pages differently according to
whether a DOCTYPE is included and which DOCTYPE is used.

Creating XHTML Pages in Dreamweaver More on XHTML

For more information on

Dreamweaver includes several options to help you create XHTML pages easily. You can
XHTML, see the online articles
select options in Dreamweaver preferences for all your pages to use XHTML rather than
"What is XHTML?" and
HTML, or you can create XHTML pages only when you specifically choose to. You can
also convert HTML pages to XHTML using Dreamweaver. "XHTML: The Clean Code
Solution."
To select XHTML as your default preference, follow these steps:

1. In Dreamweaver, select Edit > Preferences.

2. In the Preferences dialog box, select the New Document category.
3. Select XHTML 1.0 Transitional as the DTD, as shown in Figure 4-7.
Figure 4-7: Setting New Document options in the Preferences dialog box.

4. Click OK to save your selections, which are automatically applied the next time
you create a document.

To create an XHTML document without making it your default document type, do the
following:

1. Create a new document by selecting File > New from the main Dreamweaver
menu bar.
2. In the New Document dialog box, as shown in Figure 4-8, select Basic page from
the Category list and HTML from the Basic page list.

Figure 4-8: Selecting an XHTML page on the General tab of the New Document
dialog box.

3. Select XHTML 1.0 Transitional as the DTD.

4. Click Create to create the document.

To convert an HTML document to an XHTML document, do the following:

1. Open an HTML document in Dreamweaver.

 2. Select File > Convert > XHTML 1.0 Transitional from the main Dreamweaver
menu bar. Dreamweaver automatically adds the appropriate code to convert the
document to XHTML.
3. Save the document to preserve the changes.

You can also change the DTD in the Page Properties dialog box by clicking Page
Properties in the Properties panel.

Validating Files in Dreamweaver

You can validate your Dreamweaver documents to make sure that they comply with W3C
standards and that they won't generate errors when viewed in browsers.

Dreamweaver uses the DOCTYPE declaration to select the validation rules for your
document. Because all XHTML document are required to have a DOCTYPE,
Dreamweaver automatically knows which type of document to validate your page against.

TIP
If you aren't using a DOCTYPE for a page that you want to validate, just
select Edit > Preferences, select the Validator category, and then check
the checkboxes for any validation options you wish to use.

To validate an XHTML document, follow these steps:

1. Open or create an XHTML page in Dreamweaver.

2. Select File > Check Page > Validate Markup from the main Dreamweaver menu
bar.
3. View the results of the validation in the Validation panel of the Results panel
group. Figure 4-9 shows the validation message that displays if there are no
validation errors in your page. (If the Results panel isn't showing at the bottom of
the Dreamweaver workspace, select Window > Results.)

Figure 4-9: Results of validation.

4. If the Validation panel lists any errors, double-click the error message to highlight
the error in the document window and fix it.

Moving On
In this lesson, you learned how to use CSS and XHTML in Dreamweaver to create Web
standards-compliant pages. You also learned how to validate those pages.

Before you move on to Lesson 5, complete the assignment and take the quiz for this
lesson. After that, stop by the Message Board to discuss CSS and XHTML with your
classmates and instructor.

In Lesson 5, you'll learn how to add images, multimedia files, and Dreamweaver's built-in
JavaScript behaviors to your pages.
Images, Rollovers, and Media

Lesson Description

In this lesson, you'll learn how to add images, rollovers, and media (audio and video) to your Web pages.

Selecting Web Graphics Formats

The first Web pages were text-only pages, usually displayed with uniform grey
backgrounds. In 1993, Marc Andreessen added the <img> element to the Mosaic
browser, and changed the face of the Web forever. Images provide another way to
present information on Web pages, and help make pages visually interesting and inviting
to visitors.

Dreamweaver offers image-editing features; however, you need to create your original
images in a graphics software program, such as Adobe Photoshop, Fireworks, or Paint
Shop Pro. You can also use free clip art images -- just search for free clip art in your
favorite search engine.

Before you find out about the mechanics of inserting a graphic in to a Web page, you
should review the types of graphics that Web browsers can handle and when to use a
particular graphics format in your Web page.

Bitmap graphics are the most commonly used graphic format on the Web, and include
three file formats: GIF (Graphic Interchange Format), JPEG (Joint Photographic Experts
Group), and PNG (Portable Network Graphics). Bitmaps store information in pixels, short
for picture element -- a single point in a graphic image. The larger the bitmap image, the
larger the file size.

GIF Files
GIF files are bitmap graphics that use indexed color and lossless compression. This
means that if there are shades of different blues or different reds, saving a file to a GIF
format generalizes the colors so that there aren't so many different shades or variations.
This process cuts down on the amount of descriptive information contained in the file,
which in turn considerably reduces the file size. Lossless compression means that the
compression system doesn't lose any of the information; so image quality remains the
same, even if the image file is opened and saved multiple times.

GIFs use 8-bit (2^8) color depth. This means that GIFs can use, at most, 256 colors.
However, this doesn't mean that each GIF is limited to the same 256 colors -- the palette
of 256 colors for any individual GIF can be selected from a color space of millions of
colors. A GIF doesn't have to include 256 colors -- limiting the number of colors to a
smaller number helps decrease the overall file size.

Color depth is the number of bits used to represent color and determines
how many colors can be seen on the screen at any one time.

One major advantage of GIFs is support for transparency. You can specify one or more of
the colors in a GIF to display with transparency, which means that it'll be clear and show
whatever background it's placed on. This allows GIFs to blend into the background color
of a Web page.

You can save GIFs in interlaced format so they display gradually as they
download to a Web page, rather than all at once.

The general rule used by Web designers and graphic designers alike is to use only the
GIF format if you don't have gradients (where colors fade into one another or where there
are many tones, such as skin, grass, sky, and so on). Generally, if you stay away from
GIF files when you're posting photos, you'll be just fine. Figure 5-1 shows a GIF image.

Figure 5-1: A GIF image with text and solid blocks of color.

JPEG Files
JPEG files are bitmap graphics that are true color (24-bit) and use lossy compression. A
JPEG can contain any number of colors. JPEG's lossy compression scheme means
that you must decide between image quality and image size. When you compress a
JPEG image, you lose some of the information in the original image. Because monitor
resolution is low (72 to 96 pixels per inch), you can usually do substantial compression of
a JPEG without any loss in the quality of the display on a computer monitor.

Twenty-four-bit color depth means that JPEGs can display up to 2^24, or

16,777,216 colors. They don't, however, support transparency.

JPEGs work well for images with gradual transitions between different colors and different
shades of color, and are predominantly used for photographs. JPEG files have many
levels of quality (1 to 100), so you'll want to play with the different levels to make the
quality level as low as possible to reduce file size. The best way to do this is to save at a
general level, such as 40, drag and drop your image into a Web browser, and see how it
looks. If it looks good, leave it. If it looks jagged or pixelated, increase the quality level
until your image looks presentable.

JPEG images don't scale well. When you zoom in on a JPEG image and
increase its size, it becomes pixelated; in other words, it becomes possible
to distinguish individual pixels. Not pretty.

PNG Files
PNG files are bitmap graphics that use lossless compression and a variety of color
choices, including true color (24-bit), true grayscale, and index (8-bit) color. PNGs were
originally developed as a replacement for the GIF format and have several advantages
when compared to GIFs -- the PNG compression scheme produces more compression,
multiple color depths are available, the interlacing is more sophisticated, and the
transparency (alpha channel) is much more sophisticated.
The major block to more widespread use of the PNG format is a browser issue -- the lack
of support for alpha transparency in Microsoft Internet Explorer for Windows. Unlike GIF
transparency, alpha transparency enables you to use on brinkster.com e image over any
background, whether that background has a single solid color or not. Netscape 6+, Opera
5+, and Microsoft Internet Explorer 5 for Macintosh all support alpha channel
transparency, and display PNGs correctly. The next new version of Internet Explorer for
Windows -- version 7 -- is expected to feature alpha transparency support.

Using Images in Dreamweaver

Dreamweaver makes it easy to add images to your Web pages. The first step is to open a
Web page in Dreamweaver (or create a new Web page in Dreamweaver) and decide
where you want to place the image, then follow these steps:

1. Click the area on the page where you want to add an image.
2. Select Insert > Image from the Dreamweaver application window or click the
Images button in the Common Insert bar.
3. The Select Image Source dialog box appears, as shown in Figure 5-2. Browse to
the location of your image and click OK.

Figure 5-2: Select Image Source dialog box.

4. If you have Accessibility set to show attributes when inserting images, the Image
Tag Accessibility Attributes dialog box appears, allowing you to enter the
corresponding text and description for the image.
Working with Image Properties
You can use the Property inspector, shown in Figure 5-3, to set additional image
properties, such as the following:

Figure 5-3: Property inspector.

● W(idth): Sets the width of the image.

● H(eight): Sets the height of the image.
● Src: Specifies the location (source) of the image file.
● Link: Allows you to add a URL to make the image a hyperlink.
● Alt: Adds alternative text for viewers using speech-enabled browsers or those
viewers who browse with image turned off.
● Edit: Is a group of image-editing features. You can click these buttons to:

Edit the image in the graphics software program of your choice. Select a
program in the File Types / Editors category of the Preferences window
(Edit > Preferences).

Optimize the image in Fireworks. This requires that you have Fireworks
installed on your computer. You can also optimize images in other
graphics software programs.

Crop the image to reduce the area of the image and save only part of the
image.

Resample the image by adding or subtracting pixels to an image after

you've resized it. You can resize an image by selecting it and then
dragging the resize handles to make the image whatever size you choose.

Modify the brightness and contrast of the image.

Change the focus of the image by sharpening it.

● Class: Enables you to add or apply a style to the images

● Map: Allows you create a linked image map
● V Space: Adds the specified amount of space, in pixels, along the top and bottom
of the image
● H Space: Adds the specified amount of space, in pixels, along the sides of the
image
● Target: Specifies the frame or window in which the linked page should appear
● Low Src: Specifies the smaller image that should appear while the main image
(source) is loading
● Border: Adds a border, in pixels, around the image
● Align: Aligns an image with the text
● Justification buttons: Specifies the justification on the page for the image: left,
right, or centered
Using Behaviors to Create Rollover Images Rollovers and Section 508
Compliance

Dreamweaver includes a set of prewritten JavaScript called behaviors, which you can
In 1998, Congress amended
use to create interactive features on your pages. A popular feature on Web pages is
the Rehabilitation Act to
image rollovers -- when the user rolls the mouse pointer over an image, the image
include Section 508, which
changes to another image. Rollovers are often used in navigation bars.
legislates electronic and
information technology
Download the following images and save them to your hard drive: and . To create a accessibility for people with
rollover using these files, follow these steps: disabilities. The W3C
developed guidelines that Web
1. Create a new HTML page in Dreamweaver (File > New > Create). page designers can use to help
2. Click the area on the page where you want to add a rollover image. people with vision impairments
3. Select Insert > Image Objects > Rollover Image. The Insert Rollover Image to "read" Web pages. Part of
dialog box appears, as shown in Figure 5-4. the guidelines includes the use
of text labels or descriptors for
graphics that can be translated
into audible output. The
alternate text (Alt Text) for
graphics -- part of a rollover --
can provide the verbal
descriptor for graphics.

Figure 5-4: Insert Rollover Image dialog box.

4. Change the name of the rollover image, if you'd like. The default is Image1.
5. Save the draft page as rollover.html.

If you don't save the file in this step, Dreamweaver will prompt you to do so
after the next step.

6. Click Browse to locate the original image (purple.gif). This is the image that
displays when the mouse is not over the image. Select the file and click OK.
7. Click Browse to locate the rollover image (yellow.gif). This is the image that
displays when the mouse is over the image. Select the file and click OK.
8. Add alternate text in the appropriate text box.
9. Add a URL in the appropriate text box if you want the image to function as a link.
10. Click OK.
11. Once again, save the page as rollover.html.
12. Preview the page in the browser of your choice (File > Preview in Browser >
<browser>) to see the rollover in action.

Integrating Audio, Video, and Flash in Your Pages

Dreamweaver also makes it easy to add multimedia files to your pages. These files are
usually quite large and take a while to download, especially for viewers on dial-up
modems -- so make sure that they're really necessary items to add to your pages. To
access the multimedia content on your page, the viewer may need a multimedia player,
such as Microsoft Windows Media Player or RealPlayer. You can add various types of
multimedia to your Web page, but the two most common forms are audio and video, as
covered in the following sections.

Audio
Web audio files are available in several different audio formats, including:
 ● MIDI (Musical Interface Digital Interface)
● WAV (Waveform Extension)
● AIFF (Audio Interchange File Format)
● AU (Basic Audio)
● MP3 (MPEG Audio Layer 3)
● RA or RAM (RealAudio)

You can embed an audio file in your page or link to an audio file.

TIP
When you provide a link to an audio file, the user decides whether to listen
to the file. Also, by providing such a link, you can get around the issue of
browser support for embedding sound files.

When you embed an audio file, a sound player is inserted on your page. The user still
needs the appropriate plugin to play the sound file. To embed an audio file, follow these
steps:

1. From the Common Insert bar, click the Media button, and then select Plugin from
the drop-down menu (or select Insert > Media > Plugin).
2. In the Select File dialog box, shown in Figure 5-5, enter the URL of the audio file
or browse to the location of the audio file you want to insert, and then click OK.

Figure 5-5: Select File dialog box.

3. Open the Property inspector (Window > Properties). You can enter new width
and height values for the sound player display, if desired.

To link to an audio file, follow these steps:

1. Open a file that you created previously that includes text and graphics.
2. Select a block of text or a graphic from your page to use as the link to an audio file.
3. Open the Property inspector.
4. Click the Browse For Folder icon next to the right of the Link drop-down list box to
browse to the audio file to which you want to link, select the audio file, and then
click OK. You can also enter the URL in the Link box.

TIP
FindSounds.com is a search engine for finding sound effects and sample
sounds on the Web.
Video
Web video files are available in several different formats, including:

● AVI (Audio Video Interleave)

● MPEG (Moving Picture Experts Group)
● Streaming video formats, such as QuickTime, RealMedia, and Windows Media

Microsoft Internet Explorer 6 and Netscape Browser support a wide variety

of video files. If the video file format you want to play back isn't supported,
you'll need to add a plugin in the browser to support the media.

To add a video file to your page, follow these steps:

1. From the Common Insert bar, click the Media button (or select Insert > Media).
2. Select the type of media you want to insert (Flash, Shockwave, Applet, and so
on). Or click the Media : Plugin button on the Insert bar to add video file types.
3. Browse to select the video file in the Select File dialog box, and then click OK.

Flash
Dreamweaver 8 makes it easier than ever before to create Flash files directly in your
pages. From the Insert > Media menu, you can select Flash Button, Flash Text,
FlashPaper, or Flash Video.

To create Flash text, select Insert > Media > Flash Text. In the Insert Flash Text dialog
box, shown in Figure 5-6, enter the properties for your Flash text file and the name of the
Flash file in which you want to save the text, and then click OK.

Figure 5-6: Insert Flash Text dialog box.

To create a FlashPaper, which allows you to include an entire document that can be
browsed without loading additional Web pages, select Insert > Media > FlashPaper. In
the Insert FlashPaper dialog box, as shown in Figure 5-7, enter the source of your
document and the size you want it to appear on the page, and then click OK.
Figure 5-7: Insert FlashPaper dialog box.

To create a Flash button, do the following:

1. Select Insert > Media > Flash Button.

2. In the Insert Flash Button dialog box, as shown in Figure 5-8, select:

The style of button you want to create

The properties for the text that appears on the button, including the
wording, font, and size

The link and target file associated with the button

The background color of the button

The name of the Flash file in which you want to save the button

More styles (click the Get More Styles button), if you want to download
additional styles from the Macromedia Web site

3. Click OK.

Figure 5-8: Insert Flash Button dialog box.

To insert a Flash video, do the following:

1. Select Insert > Media > Flash Video.

2. In the Insert Flash Video dialog box, shown in Figure 5-9, select:
 The video type -- Progressive Download Video or Streaming Video

The location of the video file

The type of play controls (skin) you want to be used

The size of the video display

Whether you want the video to automatically play and/or rewind

Whether you want users to be prompted to download Flash Player, if

necessary, and what message you want to be displayed to recommend
that they do so

3. Click OK.

Figure 5-9: Insert Flash Video dialog box.

Moving on
In this lesson, you learned how to add images and multimedia files to your pages. You
also learned how to use Dreamweaver's built-in JavaScript behaviors to create rollovers.

Before you move on to Lesson 6, complete the assignment and take the quiz for this
lesson. In addition, visit the Message Board to post comments and questions about
images, rollovers, and media to your classmates and instructor.

In Lesson 6, you'll learn how to use Dreamweaver's site management features and how to
publish your Web site.
Managing Your Web Site with Dreamweaver 8

Lesson Description

In this lesson, you'll learn how to use Dreamweaver's site management features, and how to publish a Web site using FTP in
Dreamweaver.

Understanding File and Folder Structure Download.com

For a wide range of free Web

The first step in site management is setting up your Web site file and folder structure.
development tools, visit the Web
First, create a folder on your hard drive to hold all your Web site files. You use this
folder when you create Dreamweaver Web sites. Page Creation page at Download.
com.

The plural "Web sites" is used because you may have more than one
Web site that you create in Dreamweaver.

Within your main Web sites folder, create folders for each new Web site you make. In
an individual Web site folder, create at least one other folder that you'll use to hold the
images, and name it graphics or images.

Once your folder structure is in place, the next step is to create the files. There are a
few things to keep in mind when you name the files, as follows:

● Use meaningful filenames.

● Use all lowercase characters.
● Include the file extension (.html, .gif, and so on).
● Use an underscore (_) instead of a space. (Spaces cause problems on the
Internet.)
● Suffix working filenames with a two-digit number, as shown. This ensures
different versions of the same file are ordered numerically in a directory listing.
When you complete the file, remove the suffix to indicate the final version, for
example:

myfile_01.html
myfile_02.html
myfile_03.html
myfile.html

The myfile.html file is your final version.

To start your Web site, create three HTML pages and save them with these three
filenames: index.html, about.html, and contact.html. Add a background color to
each page, and then save the files in your site folder.

TIP
A Web site home page is usually named index.html, and is the default
page that displays when a user types your domain name in a browser.
Managing Sites in Dreamweaver Understanding Document-
and Site Root-Relative Links

Now that you've set up your site files and folders, you're ready to explore Dreamweaver's
A document-relative link
site management features.
specifies a path from the
current document to another
To create a Dreamweaver site, follow these steps: document. Such a link may be
similar to support/contact.
1. From the Dreamweaver application menu, select Site > Manage Sites, and then html. A site root-relative link
select New > Site from the Manage Sites dialog box, as shown in Figure 6-1. specifies a path from the site's
root folder to a document. This
type of link begins with a slash,
which represents the site root
folder, followed by the path to a
document, such as /
mycompany/images/logo.gif.
If your Web site is small and
easily manageable, you may
want to use document-relative
links. However, if your Web
site is large or spread over
multiple servers, or if you often
move HTML files between
folders, using site root-relative
links may be your best option.

Figure 6-1: Manage Sites dialog box.

2. The Site Definition dialog box appears. If you've never created a site before, the
Basic tab appears in the dialog box, and the Site Definition wizard starts. Instead
of adding a site using the wizard, click the Advanced tab and then select the
Local Info category in the left pane, as shown in Figure 6-2.

Figure 6-2: Site Definition dialog box, Advanced tab, Local Info category.
 3. Enter your site name in the Site name text box (for example, MyCompany). You
can enter any name you like -- it's for your reference only and doesn't appear in
the browser.
4. Click the folder icon to the right of the Local root folder text box and then browse
to the location of your Web site's folder. Select the folder, click Open, and then
click Select to select this folder. (On the Mac, click Choose to open and select a
folder.)
5. Click the folder icon to the right of the Default images folder and browse to the
location of the images folder inside your Web site folder. This enables
Dreamweaver to open this folder by default when you insert images on your
Dreamweaver pages. Select the folder, click Open, and then click Select to select
this folder (Mac: click Choose).
6. In the Links relative to options area, select Document or Site root.
7. If you have one, enter your domain address in the HTTP address text box. If you
don't, just leave it blank.
8. Leave the dialog box open. You'll use the Remote Info category in the next section.

Publishing Your Web Site with FTP

Now you can set up the Remote Info category of the Site Definition dialog box. This
enables you to FTP (File Transfer Protocol) your Web files from Dreamweaver to a Web
server. You must have space available on a Web server to upload your files and make
your site available online.

TIP
Low-cost and free Web servers are available, usually with banner
advertising. They're great for practicing your skills and posting example
sites. Three popular choices are Official Freedom, brinkster.com, and
netfirms.com.

You need to know these four things from your Web hosting company or ISP (Internet
service provider):

● FTP host name

● Host directory (if there is one)
● Login
● Password

In the Remote Info category, select FTP from the Access drop-down list. The Site
Definition dialog box appears. Follow these steps:

1. Enter the FTP host name.

2. Enter the host directory name, if there is one.
3. Enter your user name in the Login text box.
4. Enter your password. Click the Test button to make sure your user name and
password work. Example entries are shown in Figure 6-3.
Figure 6-3: Site Definition dialog box, Remote Info category, with example entries.

5. Enter any of the other settings you need to.

TIP
For assistance with FTP settings, see the Dreamweaver 8 Help page titled
"Setting Remote options for FTP access."

6. Click OK to close this dialog box, and then click Done in the Manage Sites dialog
box.

TIP
If you're connecting to an existing Web site, Dreamweaver scans all of the
files in the site. This could take a while if the existing Web site has a lot of
files.

Now you can upload your files from Dreamweaver to your domain on a Web server. Open
the Files panel in the right pane in your Dreamweaver workspace, as shown in Figure 6-4.
Figure 6-4: Files panel of the MyCompany site.

The toolbar at the top of the panel enables you to use FTP to upload and download files
from a remote Web server. From left to right, the tools are as follows:

● Connects to remote host: Opens a connection with your remote host.

● Refresh: Refreshes your files list after any changes.
● Get File(s): Downloads files from a remote Web server.
● Put File(s): Uploads files to a remote Web server.
● Check Out File(s): Marks a file as checked out to you (if you checked the Enable
file check in and check out checkbox in the Remote Info category).
● Check In: Checks the file back in.
● Expand/Collapse: Lets you view remote and local files in the same window.

If you have a Web host on a remote server and have set up the Remote Info panel, select
the site files, and then click the Put File(s) button to upload your files to the Web server.

In the drop-down menu to the right of the site name drop-down menu, select Map view. If
you specified a home page, Dreamweaver can create a map of your site. Click the
Expand/Collapse button in the panel toolbar to view the map, as shown in Figure 6-5.
Figure 6-5: Collapsed view of site map.

In the upper-right corner of the Files panel is a button that opens a drop-down menu
shown in Figure 6-6. You can use this menu to access basic file and site procedures.

Figure 6-6: Drop-down menu in the Files panel.

You use this menu in the next section to access the Synchronize command.

Dreamweaver allows you to FTP without creating a Dreamweaver Web site.

You won't be able to use Dreamweaver's site management features if you
don't create a Dreamweaver site, however. To FTP without creating a
Dreamweaver site, from the Files panel drop-down menu, select Site >
Manage Sites, select New > FTP & RDS Server, and then click OK. Enter
your FTP settings in the Configure Server dialog box, click OK, and then
click Done.

Synchronizing Local and Remote Files

From the Files panel drop-down menu on the right, select Site > Synchronize, as shown
in Figure 6-7. This option won't be available to you unless you've set up the Remote Info
category in the Site Definition dialog box. The Synchronize Files dialog box appears.

Figure 6-7: Synchronize command on the Site menu.

You can select Selected Local Files Only, as shown in Figure 6-8, or the entire site files.
You can get files from the remote server (download), put files on the remote server
(upload), or both. Make a selection from the Direction drop-down list.
Figure 6-8: Synchronize Files dialog box.

Click Preview to review the files before you copy and move them. Figure 6-9 shows the
Synchronize dialog box, which indicates which files will be uploaded to the FTP server
(assuming you chose that option). Click OK to complete the synchronization, or click
Cancel.

Figure 6-9: Synchronize dialog box.

Using Site Reports

Dreamweaver includes several built-in site reports in two main categories -- Workflow and
HTML Reports. The Workflow reports include Checked Out By, Design Notes, and
Recently Modified. The HTML reports include Combinable Nested Font Tags,
Accessibility, Missing Alt Text, and many others.

To check the HTML and accessibility features in your site, select Site > Reports from the
Files panel drop-down menu. The Reports dialog box appears. Select Entire Current
Local Site from the Report drop-down menu, as shown in Figure 6-10. Click the options
you want to check in the HTML Reports section of the dialog box, and then click Run.
Figure 6-10: Reports dialog box with Entire Current Local Site selected.

The results display in the Site Reports panel in the Results panel group at the bottom of
the Dreamweaver workspace, as shown in Figure 6-11.

Figure 6-11: Site Reports panel.

Open the Files panel drop-down menu, and then select Site > Check Links Sitewide to
generate a report of any broken links in your site files. The results display in the Link
Checker panel in the Results panel group.

Moving On
In this lesson, you learned how to create a Dreamweaver site, upload and download files
from a remote Web server, and synchronize files. This is the final lesson in this course.
You've learned all the basic features of Dreamweaver 8 and can now start creating files
and sites in Dreamweaver.

Before you move on and start building your own Web sites, complete the assignment and
take the quiz for this lesson. In addition, head over to the Message Board to post final
questions and comments for your classmates and instructor.