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.

Lesson Description
In this lesson, you'll be introduced to Dreamweaver 8 and take a tour of its interface.
Macromedia Dreamweaver 8 is the latest version for powerful Web design and development. Dreamweaver has evolved from a basic WYSIWYG (What You See
Is What You Get) HTML (Hypertext Markup Language) editor to a full-fledged Web application.
You can use Dreamweaver's easy-to-use tools for:
●
Designing and laying out pages with HTML and/or XHTML (Extensible
Hypertext Markup Language) and CSS (Cascading Style Sheets)
●
Adding images and multimedia files to Web pages
●
Creating interactivity with built-in JavaScript behaviors
●
Building page templates for creating pages with the same design theme and elements
●
Checking browser compatibility as you create Web pages
●
Managing your Web site
●
Uploading and downloading Web site files from your computer to a Web server
●
Creating database connections and data-driven Web pages
Try It or Buy It?
You can get a 30-day-trial version of
Dreamweaver 8 from the Macromedia
Web site. Go to the Macromedia
Downloads page, and then click the
Try link in the listing for Dreamweaver
8. On the Macromedia Trial
Downloads page, type your e-mail address and password to sign in, or register for a free account. Then, follow the prompts to download your trial version of Dreamweaver 8.
For product reviews, user opinions, and the best deals from a wide variety of vendors, check out the Macromedia
Dreamweaver 8 page on CNET.com.
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).
New and improved features in Dreamweaver 8 include:
●
Visual tools that make it easier to include XML-based data. Simply point a Web page to an XML file or the URL (Uniform Resource Locator) of an XML feed, and then just drag and drop fields onto the Web page.
●
More support for CSS. With the new CSS panel, you have quick access to styles with its consolidated view and visual representation of the cascade. You can easily review Web page structure with the new CSS layout visualization. With the styles rendering toolbar, see how your
Web pages will work with different CSS media types.
●
Greater control over design. Use the Zoom feature to closely inspect an image or nested table. Accurately compare page layouts to mockups or measure distances with the new guides.
●
Toolbar with common coding features (in the gutter next to the Code view). You can expand and collapse pieces of code to easily focus on
Who Should Use Dreamweaver
Designers and developers at all levels of experience can benefit from the new features in Dreamweaver. Whether you're mainly interested in Web page layout and design or more experienced with scripting and databases, you can use
Dreamweaver tools to create Web pages and sites quickly and easily.
It's not necessary to know HTML, CSS, or
JavaScript to use Dreamweaver -- you can select viewing options for your work.
Code, Design, and Split views make it easy to focus on code, design, or both.
You'll learn more about these view options

particular sections.
●
Enhanced support for Flash video. You can add Flash videos in five mouse clicks or less by pointing Dreamweaver 8 to any Flash video file and selecting the playback controls you want displayed.
in the "Navigating the Document Window" section of this lesson.
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.

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.
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.
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.
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.
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.
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.
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.

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
Some panels have advanced features and aren't included in this course, but are summarized in the following sections.
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.
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.
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.

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 userresponsive 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.
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.

Lesson Description
In this lesson, you'll learn how to work with text using Dreamweaver's text formatting and page setting options.
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.
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.
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!
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.
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.
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.
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.
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.
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.
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.
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.

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.
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.

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.

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

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.
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-tofile 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.

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.
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.
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.

Lesson Description
In this lesson, you'll learn how you can use Dreamweaver's tools with two key W3C specifications: CSS and XHTML.
Styles are used to separate presentation (style) from content, and can be used for a single page or a whole site. If you have used a word processor program, you're probably familiar with text styles. Styles can be used with HTML pages not only for text formatting, 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.
With styles, you can control every aspect of page layout and display. You can make a 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.
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.
Working with Other Tool
Options
If you prefer, you can use an external CSS editor, such as
Top Style Pro , to create style sheets, and then attach them to your Dreamweaver pages.
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 dropdown 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 mediadependent 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.
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.
XHTML is a transition language between HTML 4.01 (the final version of HTML) and
XML.
HTML, XHTML, and XML are all languages derived from SGML
(Standardized Generalized Markup Language).
Using XHTML, you can create Web pages that are fully compliant with the W3C (World
Wide Web Consortium) standards. Why should you create Web pages that are standardscompliant? By following Web standards, your Web pages will be most likely to display correctly in browsers and to display similarly in different browsers.
Dreamweaver enables you to create XHTML documents as your default document type, and also lets you convert pre-existing HTML documents to XHTML documents.
In the following section, you'll learn how to create XHTML documents in
Dreamweaver, and how to convert HTML documents to XHTML documents.
XHTML is very similar to HTML but it uses the stricter syntax rules of XML -- XHTML is simply a reformulation of HTML using XML syntax. The basic rules of XHTML are the same as these rules for XML syntax:
●
An XHTML document must contain a root element that contains all the other elements in the document: The root element for an XHTML document is the
<html> tag. Links to other documents and comments are the only components 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.
What's XML?
XML is used to create custom markup languages (XML applications). You can design your own language by creating a set of tags that describe the content they contain. To learn more about XML, see the article " What the Hell is XML?
" and the W3C XML specification .
More on DOCTYPEs
A DOCTYPE specifies which
W3C standard you're using when you create a document.
The three types of XHTML
DOCTYPE are: strict, transitional, and frameset.
Dreamweaver automatically uses the transitional XHTML
DOCTYPE for any XHTML document that isn't in frames, in which case, it uses the frameset XHTML DOCTYPE.
The strict XHTML DOCTYPE isn't automatically available in
Dreamweaver, although you can always manually change the DOCTYPE to XHTML strict.

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.
Dreamweaver includes several options to help you create XHTML pages easily. You can select options in Dreamweaver preferences for all your pages to use XHTML rather than
HTML, or you can create XHTML pages only when you specifically choose to. You can also convert HTML pages to XHTML using Dreamweaver.
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.
More on XHTML
For more information on
XHTML, see the online articles
" What is XHTML?
" and
" XHTML: The Clean Code
Solution ."

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.
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.
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.

Lesson Description
In this lesson, you'll learn how to add images, rollovers, and media (audio and video) to your Web pages.
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 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 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 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.
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.

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

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

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.
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.
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.

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.
The first step in site management is setting up your Web site file and folder structure.
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.
Download.com
For a wide range of free Web development tools, visit the Web
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.

Now that you've set up your site files and folders, you're ready to explore Dreamweaver's site management features.
To create a Dreamweaver site, follow these steps:
1. From the Dreamweaver application menu, select Site > Manage Sites, and then select New > Site from the Manage Sites dialog box, as shown in Figure 6-1.
Understanding Document- and Site Root-Relative Links
A document-relative link specifies a path from the current document to another document. Such a link may be similar to support/contact.
html.
A site root-relative link 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.
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.
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.
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.
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.