Uploaded by d10984968

cnet-dreamweaver8

advertisement

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

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

What's New in Dreamweaver 8

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.

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

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

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.

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.

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.

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

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?

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.

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.

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.

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

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.

Creating XHTML Pages in Dreamweaver

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.

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

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.

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

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.

Managing Sites in Dreamweaver

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.

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.

Download