Dreamweaver in a Nutshell | O'Reilly Media

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

Dreamweaver's rich feature set makes it an indispensable tool for professional web developers. Its visual interface offers easy access to standard HTML objects such as tables and frames, plus prebuilt scripts and behaviors, timeline-based activities, CSS support, and a JavaScript debugger. For webmasters, Dreamweaver includes site-management tools such as File Check In/Check Out and Design Notes.

This book covers Dreamweaver's practical usage, including its site management features. Reference material from O'Reilly & Associates covering HTML, Cascading Style Sheets (CSS), and JavaScript is also included within the Dreamweaver 4 (DW4) Reference panel (Window → Reference).

This chapter will familiarize you with Dreamweaver's Document window and some common elements you'll use within it. These topics will help orient those who are familiar with HTML or earlier versions of Dreamweaver, but may be new to Dreamweaver 4. Although you should plan your site before beginning serious production work, this chapter will help you perform quick edits on existing pages and get immediate hands-on experience. For those who prefer the "top-down" approach, refer to Part II, which covers site management.

Your use of Dreamweaver will rely heavily on the Dreamweaver user interface (UI) objects discussed in this chapter. Macromedia's documentation variously refers to Dreamweaver's UI components as panels , inspectors, editors, bars, windows, and palettes, and we follow those conventions when referring to them individually. For convenience, we use the term panels to refer to them collectively.

This chapter covers:

The Document window in its various views, plus its Toolbar and status bar
The Objects panel and its respective categories
The Property inspector and its selection of options
The Reference panel and its vast selection of HTML-, JavaScript-, and CSS-related information
The Launcher bar used to access other Dreamweaver panels, such as the Behaviors, CSS Styles, HTML Styles, and Timelines panels.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

Web pages are composed in the Dreamweaver Document window , which can be viewed in several modes:

Code view (View → Code) allows you to edit HTML source code directly.
Design view (View → Design) is Dreamweaver's WYSIWYG mode.
Code and Design view (View → Code and Design), shown in Figure 1-1, shows the Code and Design panes simultaneously. Resize the two panes by dragging the horizontal line that separates them. Use the View → Design View on Top option to reverse the location of the panes.

Figure 1-1: Code and Design view

You can switch view modes using the View → Switch Views command, Ctrl+Tab (Windows), or Opt+Tab (Macintosh). While in Code and Design view, the Switch Views command moves the cursor into the other pane; otherwise, it toggles between Code view and Design view.

Text can be typed directly into the Design pane. Dreamweaver automatically creates the necessary HTML when you insert objects using, say, the Objects panel. Edits performed in the Design pane are reflected immediately in the Code pane.

You can hand-edit the HTML code directly in the Code pane, but the visible results, if any, won't appear in the Design pane until it is refreshed. The Design pane refreshes automatically when switching from Code view to Design view, but not when switching from Code view to Code and Design view.

After hand-editing HTML, use View → Refresh Design View, F5, Ctrl+Space (Windows), or Cmd+Space (Mac) to reevaluate the HTML in the Code pane and refresh the Design pane.

You can configure the following Code pane options under View → Code View Options:

Word Wrap: Turn on this option to wrap long lines of HTML code (this option does not affect text in the Design pane).
Line Numbers: This option provides line numbers for easier debugging.
Highlight Invalid HTML: This option helps to avoid hand-coding errors by highlighting unsupported and unmatched tags in yellow. Reevaluate the HTML in the Code pane by using the shortcuts in the preceding tip. The Design pane always highlights errors.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

The Objects panel offers quick access to the primary objects, such as images and tables, that you typically place within your HTML document. To insert text, simply click in the Document window and start typing. Dreamweaver inserts <p> tags whenever you press the Enter key or Return key.

The Objects panel has seven different categories—Characters, Common, Forms, Frames, Head, Invisibles, and Special—each providing links to tools and objects specific to that category. The Objects panel, shown in its Common category mode in Figure 1-4, is accessed via Window → Objects, Ctrl+F2 (Windows), or Cmd+F2 (Macintosh). You can switch categories by using the panel category selector menu indicated in Figure 1-4. The Objects panel can be customized as discussed in Chapter 19.

Figure 1-4: The Objects panel's Common category

Clicking an icon in the Objects panel places the chosen object at the current cursor location (or you can drag the icon to the desired location in the Document window). Some objects require additional information to be entered via a dialog box before the object can be inserted. To insert an empty placeholder object (and bypass the dialog box), disable the Edit → Preferences → General → Show Dialog When Inserting Objects option, or hold down the Ctrl key (Windows) or Option key (Macintosh) while inserting the object. Properties of existing objects can be modified using the Property inspector.

Use Ctrl-drag (Windows) or Opt-drag (Macintosh) to quickly duplicate an element on the page.

Table 1-1 lists the options available in each category of the Objects panel. See Chapter 19 for details on adding custom objects to the Objects panel. The Objects panel can also be configured to show icon labels using Edit → Preferences → General → Objects Panel → Icons and Text.

Table 1-1: Objects panel categories
Category	Inserts these objects

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

Use the Property inspector (PI) to display or edit properties of the currently selected element. There are several ways to open the Property inspector (if it is already open, most of the gestures close it):

Select Window → Properties or Modify → Selection Properties.
Press Ctrl+F3 (Windows) or Cmd+F3 (Macintosh).
Double-click on an HTML element (this gesture does not open the Property inspector for some element types, such as text, and opens the file selection dialog box for other element types, such as images).
Right-click (Windows) or Ctrl-click (Macintosh) and choose Properties from the contextual pop-up menu.

Figure 1-5 shows the Property inspector's appearance when a text object within a table is selected. The upper half of the Property inspector is the same for all text objects, but the lower half may differ. You can show or hide the lower half of the Property inspector using the Expand/Contract button indicated in Figure 1-5, or simply by double-clicking an unoccupied area within the Property inspector.

Table 1-3 lists the properties that are most commonly needed and available from the Property inspector at almost all times (and are also available via menu choices).

To create a hyperlink, highlight an item, such as a piece of text, in the Document window and specify the destination document in the Link field of the Property inspector. You can drag-and-drop a file into the Link field or select a file using the Browse icon in the Property inspector.

Figure 1-5: The Property inspector

We'll cover properties that modify images, layers, tables, and frames in later chapters. See Chapter 7 for coverage of the Quick Tag Editor (QTE), which is accessible from the Property inspector.

Table 1-3: Property inspector options
Menu option	Windows	Macintosh

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

The Reference panel , added in Dreamweaver 4 and shown in Figure 1-6, provides detailed documentation from O'Reilly & Associates. Open the Reference panel using Window → Reference. After choosing HTML, CSS, or JavaScript Reference from the Book pop-up menu in the panel, you can look up HTML tags and their attributes, CSS properties, or details on JavaScript objects, properties, and methods.

Figure 1-6: The Reference panel

For example, the O'Reilly HTML Reference provides a drop-down list of HTML tags. Selecting a tag displays its definition, compatibility, description, formatting requirements, and use within the Document Object Model (DOM) for both Microsoft Internet Explorer (IE) and Netscape Navigator (NN).

The arrow at the upper-right side of the Reference panel opens a pop-menu. The menu lets you change the font size of the text; it also includes a link to O'Reilly Books Online (the O'Reilly Safari subscription service).

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

The Launcher , accessible via Window → Launcher and shown in Figure 1-7, provides quick access to Dreamweaver's primary panels. The small icon in the Launcher bar's lower-right corner toggles its orientation between horizontal and vertical.

Figure 1-7: The Launcher bar

Table 1-4 lists additional ways to access all panels, not just those available on the Launcher. The Objects panel and Property inspector are not included in the Launcher bar by default but can be added using Edit → Preferences → Panels → Show in Launcher. The preferences also affect the Mini-launcher in the lower-right corner of the Document window, which is a more compact and convenient way to access the same options as the Launcher bar.

Table 1-4: Panel shortcuts
Window	Menu access	Windows	Macintosh
Objects panel	Window → Objects	Ctrl+F2	Cmd+F2
Property inspector	Window → Properties	Ctrl+F3	Cmd+F3
Launcher bar	Window → Launcher	Alt-W, U	N/A
Site Files view	Window → Site Files or Site → Site Files

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

The number of panels in Dreamweaver can be overwhelming. Fortunately, two or more panels can be docked (combined) into a single panel with multiple tabs . For example the Reference and Assets panels are actually two separate tabs within a single floating panel. You can move a tab from one panel to another by dragging the tab (not the title bar of the panel), onto another panel. Figure 1-8 shows the outline of the Behaviors tab being dragged over another panel. When the mouse is released, the Behaviors tab is moved to the new panel. Drag and drop a tab outside of any existing panel to create a new, separate panel containing only that tab.

Figure 1-8: Moving the Behaviors tab from one panel to another

You can't dock the Property inspector and Launcher bar with other panels. However, you can drop other panels into the Objects panel to turn it into a dockable panel (try it!).

To arrange all of your panels neatly, select Window → Arrange Panels, which returns Dreamweaver's open panels to their original default positions.

This chapter covered the common UI elements you'll use within Dreamweaver. Chapter 2 focuses on how to create common HTML elements within a web page. It also covers issues related to the formatting, structure, meta information, and color schemes associated with documents.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

This chapter shows how to add common HTML elements to your web pages. The core objects included in almost every document are as follows:

Document <head> objects including <title>, <link>, <base>, and <meta> tags
Hyperlinks
Images and image maps
Text and page formatting options
Characters
Hidden comments, scripts, and line-break tags.

This section covers the tools that ensure proper usage of HTML elements within your document's <head> block. Dreamweaver 4 provides easy access to the <title> , description, and keywords elements (which provide information for search engines), and the <meta> , <base> , and <link> elements (which provide instructions to client and server software that interacts with your document).

Prior to Version 4, Dreamweaver showed <head> tags in Code view only. As of DW4, head content can be accessed using the Head Content bar, shown in Figure 2-1, in Design view or Code and Design view. The Head Content bar is opened using View → Head Content, Ctrl+Shift+W (Windows), or Cmd+Shift+W (Macintosh). In Code view, the Head Content bar isn't available, but you can still hand-edit the <head> tags.

Figure 2-1: The Head Content bar

To edit the attributes of a head element in the Property inspector, double-click the element's icon in the Head Content bar. To delete an extraneous head element, select its icon from the Head Content bar and press the Delete key (or hand-edit the HTML in Code view).

The <head> tags and their attributes are discussed in the following sections. Comment tags are discussed later in this chapter under Section 2.7.

The <title> element's text is displayed in a web browser's title bar and is used as the default filename when saving the document to disk. Search engines also use the title to index your page.

The <title> element can be set in the Page Properties dialog box (Modify → Page Properties) or in the Property inspector (accessed via the Head Content bar's Title icon).

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

This section covers the tools that ensure proper usage of HTML elements within your document's <head> block. Dreamweaver 4 provides easy access to the <title> , description, and keywords elements (which provide information for search engines), and the <meta> , <base> , and <link> elements (which provide instructions to client and server software that interacts with your document).

Prior to Version 4, Dreamweaver showed <head> tags in Code view only. As of DW4, head content can be accessed using the Head Content bar, shown in Figure 2-1, in Design view or Code and Design view. The Head Content bar is opened using View → Head Content, Ctrl+Shift+W (Windows), or Cmd+Shift+W (Macintosh). In Code view, the Head Content bar isn't available, but you can still hand-edit the <head> tags.

Figure 2-1: The Head Content bar

To edit the attributes of a head element in the Property inspector, double-click the element's icon in the Head Content bar. To delete an extraneous head element, select its icon from the Head Content bar and press the Delete key (or hand-edit the HTML in Code view).

The <head> tags and their attributes are discussed in the following sections. Comment tags are discussed later in this chapter under Section 2.7.

The <title> element's text is displayed in a web browser's title bar and is used as the default filename when saving the document to disk. Search engines also use the title to index your page.

The <title> element can be set in the Page Properties dialog box (Modify → Page Properties) or in the Property inspector (accessed via the Head Content bar's Title icon).

Use Edit → Find and Replace, Ctrl+F (Windows), or Cmd+F (Macintosh) to retitle documents that use the default title ("Untitled Document"). You can generate a list of untitled documents using Site → Reports → HTML Reports → Untitled Documents.

Dreamweaver can create four types of <meta> tags—content, keywords, description

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

Naturally, Dreamweaver lets you create hyperlinks (a.k.a. links) that lead to other documents. Links begin with a protocol, such as http, as shown in Table 2-2.

Dreamweaver allows you to create and set links in several ways:

You can insert a link using Modify → Make Link, Ctrl+L (Windows), or Cmd+L (Macintosh). This command opens the Select File dialog box in which you can select a local file or enter the link address in the URL field.
You can also select the text to act as the link, and then provide the full address, including the protocol such as http://, within the Link field of the Property inspector, as shown in Figure 2-5. You can drag-and-drop a file into the Link field, or select a file using the Browse button next to the Link field in the Property inspector.
You can right-click (Windows) or Ctrl-click (Macintosh) on a selection in the Document window and choose Make Link from the contextual menu.
If you select an item with an existing link, you can choose Change Link, Remove Link, or Open Linked Page from the Modify menu or the contextual menu.
Any link added to a document is automatically added to the Site list of the Assets panel's URLs category. Links can be applied to the selected item using the Apply button in the Assets panel (see Chapter 6).
Links can also be manipulated in the Site Map window (you can use the contextual menu to access the Link to New File, Link to Existing File, Change Link, and Remove Link commands.) See Section 6.3.2 in Chapter 6 for details.

Figure 2-5 shows a hyperlink in the Property inspector.

All links in a DW document will begin with the file:/// protocol until the document is saved. Save your document before testing links. Test links using File → Preview in Browser (F12). URLs and anchor names are case sensitive on most web servers even though they may be case insensitive when tested locally. Links that work when tested locally may fail when uploaded to a server. (The domain name portion of a URL is not case sensitive.) You can set target frame in which a linked document opens using the Target field in the Property inspector. See Section 4.1.3 in Chapter 4.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

Dreamweaver allows you to work with web-compatible images (GIFs, JPEGs, and PNGs) in a variety of ways, including:

Positioning and resizing images on a page
Client-side image maps
Rollover images and navigation bars
Web photo albums

Insert images using Insert → Image or by clicking the Insert Image icon in the Objects panel's Common category. In the Select Image Source dialog box, shown in Figure 2-8, select the file to link to, or enter the image's URL manually. Choose Relative To Document from the pop-up menu to create a URL relative to the current document. Choose Relative To Site Root to create a URL relative to the root folder of the site. To create an absolute URL, specify the entire path, including the server, such as http://www.macromedia.com/images/biplane.gif. Use the Preview Images checkbox to preview both local and remote files.

Figure 2-8: The Select Image Source dialog box

Once an image is inserted, use the Property inspector to set the <img> tag's options. Figure 2-9 shows the Property inspector when an image is selected. Double-clicking an image in the Design view opens the Property inspector and prompts you to reselect an image file for the src attribute of the <img> tag.

Figure 2-9: The Property inspector for images

Table 2-5 explains the Property inspector options for images.

Table 2-5: Image options
Option	Description
Name	A name for the image, which is required to reference the image in scripts or in Dreamweaver behaviors.
W (width)	The width of the image in pixels, which defaults to the image's original width, based on 72 pixels per inch (ppi) on a Macintosh and 96 ppi on Windows. An image formatted for a Windows machine appears smaller on a Macintosh.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

Dreamweaver supports the entire gamut of HTML page- and object-formatting elements. This section describes how to format paragraphs, fonts, and lists, plus how to create horizontal rules and set page properties. Chapter 10 discusses the augmentation of these elements with CSS properties. The HTML Styles panel, discussed in Chapter 11, can also be used to set text formatting properties.

Table 2-9 lists paragraph and text formatting options. These options also work on other objects, such as images, that are embedded within a paragraph. Many of these options can also be set via the Property inspector. See Table 2-11 for character formatting commands.

Table 2-9: Paragraph formatting and alignment options
HTML	Menu access	Windows	Macintosh
`<blockquote>`	Text → Indent	Ctrl+Alt+]	Cmd+Opt+]
Removes `<blockquote>`	Text → Outdent	Ctrl+Alt+[	Cmd+Opt+[
`<div>`	Text → Paragraph Format → None

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

Use the Page Properties dialog box, shown in Figure 2-21, to format your HTML documents. The dialog box includes options to set the margins, background images and colors, text and link colors, and options to control text encoding. It is accessed by using Modify → Page Properties, Ctrl+J (Windows), or Cmd+J (Macintosh).

The Page Properties dialog box sets formatting attributes using the <body> tag, which works with 3.0 browsers but does not conform to the latest HTML standards. Chapter 10 explains how to set similar properties using CSS, when supporting 4.0+ browsers.

Figure 2-21: The Page Properties dialog box

The Page Properties dialog box's options are detailed in Table 2-14.

Table 2-14: Page Properties options
Control	Description
Title	The title for the document—used in the browser window's title bar and used as the default name when bookmarking the page.
Background Image	If the background image is smaller than the page, it is tiled by default; otherwise it is cropped. It can also be controlled by CSS.
Background	Sets the document background color.
Text	Sets the default text color (excluding links).
Links	Sets the default color of links.
Visited Links	Sets the default color of visited links.
Active Links

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

Dreamweaver can insert character codes and predefined characters into a document. You can define your own characters to augment Dreamweaver's default set.

Ten special characters (copyright, trademark, etc.) are available in the Objects panel's Character category, shown in Figure 2-22, or via Insert → Special Characters. Use the Other Characters button (or Insert → Special Characters → Other) to open the Insert Other Character dialog box, also shown in Figure 2-22. This dialog box gives access to 99 characters (including the default 10).

Figure 2-22: Available preconfigured characters

Use the Insert field of the Insert Special Character dialog box to specify other characters. See Appendix B for information on special characters (so-called HTML character entities). Section 19.3.1.1 in Chapter 19 demonstrates how to add new character icons to the Objects panel's Characters category.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

Hidden objects (a.k.a. invisible objects ) are objects that are not seen when the document is viewed in a web browser. Dreamweaver provides access to the following hidden objects through its interface:

Comments
Line Breaks and Nonbreaking Spaces
Scripts
Anchors (discussed earlier in this chapter)

Figure 2-23 shows the icons that act as placeholders for these and other invisible objects within Dreamweaver.

Figure 2-23: Icons for invisible objects

To make placeholders for hidden objects visible, ensure that the View → Visual Aids → Invisible Elements option is checked. Use View → Visual Aids → Hide All, Ctrl+Shift+I (Windows), or Cmd+Shift+I (Macintosh) to hide all visual aids temporarily.

Comments can be used to provide development notes about the HTML code for the benefit of future developers or for yourself, should you need to revisit some old code. Add comments to explain scripts, add instructions for use, or include notes for future development.

Comments are inserted using the Comment button in the Objects panel's Invisibles category or by selecting Insert → Invisible Tags → Comments. You can type comments directly into the Code pane, in the form:

<!-- This is a comment -->

Web browsers ignore everything between the leading  characters, which delimit the comment. Multiline comments are allowed and take the form:

<!-- This is another comment that takes up multiple lines.
     It keeps going and going and going. -->

You should not nest comments. The following code is erroneous:

<!-- this is a <!-- nested --> comment -->

If you attempt to nest comments, the text following the first --> character combination will be displayed to the user.

Dreamweaver uses comments to track templates, library items, and Fireworks HTML, as discussed later. Use Dreamweaver's Design Notes, described in Chapter 6, to track design issues more efficiently.

Extra whitespace (spaces, tabs, and line breaks) within HTML source code is generally ignored unless the text is tagged with the

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

Dreamweaver's tools for manipulating tables, tabular data, and forms improve with each new version. Along with the standard table-editing tools available in Standard view, DW4 offers the powerful Layout view, which uses tables to simulate page layout functionality using HTML. Dreamweaver can also import tabular data from external sources. It supports a full complement of form objects, including automated jump menu creation.

We'll discuss forms at the end of this chapter, but first we'll cover Dreamweaver's table creation tools.

Although Standard tables and Layout tables serve different purposes, both use the same familiar HTML table tags (<table> , <tr> , and <td> ). Thankfully, Dreamweaver allows you to create tables visually in either mode, insulating you from the underlying complexity of the HTML. (You can switch between table modes using the View → Table View menu options or the View buttons at the bottom of the Objects panel. Don't confuse the table view modes with the unrelated Code and Design views discussed earlier.) If you're not sure whether to use tables, layers, or some other formatting element, see the preface.

In some cases, performing a table operation in one of the two modes is nearly, or even literally, impossible. You can switch between Standard view and Layout view when working with the same table, so use whichever mode you need. Dreamweaver creates or adjusts the HTML table tags for you automatically.

Because tables weren't originally intended for page layout, Standard view is best suited for creating simple data tables (like a spreadsheet of numbers).

Standard view and its row-and-column paradigm is ideal for displaying tabular data. Layout view merely uses tables as a means to align graphic elements on the page.

Although Layout view is better suited for complex layouts, Standard view is useful, and even mandatory, for several reasons:

It hides some of the visual guides present in Layout view, making it easier to view the page's contents.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

Although Standard tables and Layout tables serve different purposes, both use the same familiar HTML table tags (<table> , <tr> , and <td> ). Thankfully, Dreamweaver allows you to create tables visually in either mode, insulating you from the underlying complexity of the HTML. (You can switch between table modes using the View → Table View menu options or the View buttons at the bottom of the Objects panel. Don't confuse the table view modes with the unrelated Code and Design views discussed earlier.) If you're not sure whether to use tables, layers, or some other formatting element, see the preface.

In some cases, performing a table operation in one of the two modes is nearly, or even literally, impossible. You can switch between Standard view and Layout view when working with the same table, so use whichever mode you need. Dreamweaver creates or adjusts the HTML table tags for you automatically.

Because tables weren't originally intended for page layout, Standard view is best suited for creating simple data tables (like a spreadsheet of numbers).

Standard view and its row-and-column paradigm is ideal for displaying tabular data. Layout view merely uses tables as a means to align graphic elements on the page.

Although Layout view is better suited for complex layouts, Standard view is useful, and even mandatory, for several reasons:

It hides some of the visual guides present in Layout view, making it easier to view the page's contents.
It allows you to use the basic Table object and the Draw Layer tool, which are not available in Layout view.
You can insert a table in Standard view using the keyboard shortcut Ctrl+Alt+T (Windows) or Cmd+Opt+T (Macintosh). In Layout view, you must use the mouse to create tables.
It allows you to set the background image of a cell or table, add color to a row of cells, and sort and format tabular data (none of which can be done in Layout view).
It allows you to easily manipulate entire rows and columns. In Layout view, you typically manipulate individual cells. There is no way to set properties of a complete row or column using Layout view.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

In Dreamweaver's Standard view, you can create and manipulate tables using the well-known paradigm of rows and columns. Switch to Standard view using the Standard View button in the Objects panel or by choosing View → Table View → Standard View.

Entering Standard view simply sets the drawing mode; the next step is to insert a table using Insert → Table or the Table icon in the Objects panel's Common category (these options are inactive while the program is in Layout view). Inserting a table opens the Insert Table dialog box, shown in Figure 3-1, where you can set the rows, columns, cell padding (the margin between a cell's contents and its edges), cell spacing (the space between adjacent cells), table width, and border thickness. Both cell padding and cell spacing must be set explicitly to 0 to create a seamless layout within a table. If you leave these fields empty, most browsers default to 1 pixel for cell padding and 2 pixels for cell spacing.

Figure 3-1: The Insert Table dialog box

There are several ways to select tables, cells, rows, and columns in Standard view. The following discussion applies to Standard view only. See Section 3.3 later in this chapter for details on manipulating tables in Layout view.

Section 3.2.1.1: Selecting tables

To select an entire table in Standard view, click on the table's upper-left corner or one of its edges when the pointer changes to a "crossed arrows" cursor.

Other ways to select a table include clicking anywhere in the table, and then:

Selecting the <table> tag from the Tag Selector in the status bar.
Choosing Modify → Table → Select Table.
Choosing Table → Select Table from the contextual menu.
Pressing Ctrl+A (Windows) or Cmd+A (Macintosh) twice (the first time selects a cell and the second time selects the entire table).

Section 3.2.1.2: Selecting cells, columns, or rows

To select cells, rows, and columns in Standard view, use the following:

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

Dreamweaver 4 introduced a new Layout view for working with tables visually, but Layout view is largely unrelated to the traditional use of tables for displaying data in rows and columns. Instead, it uses legacy HTML support for tables to simulate modern page layout capabilities, even in older browsers.

Enter Layout view using the Layout View button in the Objects panel or by choosing View → Table View → Layout View. When you first enter Layout view, Dreamweaver displays a Getting Started in Layout View overview in a dialog box. Click the dialog box's Help button to access tutorial information, or use the "Don't Show Me This Message Again" checkbox provided to prevent the dialog box from appearing the next time you enter Layout view.

In Standard view, cells are part of a row or column; in Layout view, however, the individual cells act as arbitrary layout areas. In Standard view, cells are created when you create your table (in just one step, which is easy, but doesn't offer much control). In Layout view, you must create a table manually using the Draw Layout Table tool and then add cells using the Draw Layout Cell tool (requiring multiple steps, but offering more control). The Draw Layout Cell and Draw Layout Table tools in the Objects panel, which are active in Layout view only, are shown in Figure 3-8.

Figure 3-8: Layout table object buttons

Use the Draw Layout Table tool to create a rectangular table by clicking in the Document window and dragging the mouse cursor down and to the right. The table is placed in the upper-left corner of the page by default. To adjust the horizontal alignment of a table use the Property inspector as discussed earlier. A layout table can act as the container for subsequent (nested) tables. Additional layout tables can be added below existing tables. Each layout table is indicated by a green tab in its upper-left corner.

Use the Draw Layout Cell tool to create cells within a table.

Layout tables do not automatically include cells. Cells or nested tables must be added within the unoccupied gray areas using the Draw Layout Cell or Draw Layout Table tools before you can add text or graphics to these areas. To draw multiple layout tables or layout cells without having to reselect the tool each time, hold down the Ctrl key (Windows) or Cmd key (Macintosh) while using the tool.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

Dreamweaver 4 can import, export, sort, and format tabular data as described in the following sections.

Use File → Import → Import Tabular Data or the Insert Tabular Data icon on the Objects panel to import and format tabular data from a text file. Entries should be delimited by tabs, commas, semicolons, colons, or another delimiting character. The Import Table Data dialog box, shown in Figure 3-15, has the settings listed in Table 3-3.

Figure 3-15: The Import Table Data dialog box

Table 3-3: Import Table Data dialog box options
Option	Description
Data File	Selects any file from the local hard drive or network.
Delimiter	Identifies the column delimiter in the file to be imported: Tab (the default), Comma, Semicolon, Colon, or Other.
Table Width	Sets the width of the overall table. The Fit to Data option adjusts the size of the table to the information being imported; the Set option sets the width to a fixed pixel size or as a percentage of the browser window.
Cell Padding	Sets the margin, in pixels, between the border of the cell and the cell contents.
Cell Spacing	Sets the amount of space, in pixels, between adjacent cells.
Format Top Row	Specifies formatting for the top row of the table (i.e., column headings). The options are No Formatting, Bold, Italic, or Bold Italic.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

HTML forms provide a means of collecting information, such as customer data, to be submitted to a server.

A form has three attributes available through the Property inspector that control the interaction of the form with a processing program on your server.

Form Name: Any unique alphanumeric string. This attribute can be referenced by scripts, which may perform different actions based on the entries in the form.
Action: Action to be taken when the Submit button on the form is clicked. This attribute is usually the URL of a script written in Perl (.pl or.cgi), Active Server Pages (.asp), ColdFusion (.cfm), or JavaServer Pages (.jsp), such as one of the following examples:
/cgi-bin/formmail.pl
http://someserver.scriptresources.com/cgi-bin/whatever.asp
Method: The HTTP method—either GET or POST—used to submit the form data. GET appends the form fields to the URL specified by the Action attribute. GET is limited to ASCII data no larger than 8 KB (the maximum size varies by browser, but is usually at least 1 KB). The POST method sends the form data directly to the processing agent specified by the Action attribute. POST does not impose any size restriction and is required when using File Fields to upload files. Furthermore, GET is insecure, whereas POST can handle nontext data such as encrypted files.

To create a form:

Provide some introductory text to explain the purpose of the form and what will be done with the submitted data. Include a link to a privacy policy statement. Depending on the content, you might need to verify the user's age to comply with various laws.
Insert an HTML form into your document using Insert → Form. The DW form area is designated by a red dashed border, extending from the left to right margins; it expands as form elements are added to it. (Use View → Visual Aids → Invisible Elements to ensure visibility of the form boundary.)
Specify the form attributes, especially Action, as described earlier in this section.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

Frames and layers can be used to control web page formatting. Some developers consider frames and layers pure evil, whereas others accept them as an imperfect means to an end. To help decide whether you should use frames and layers, see the discussion under Section P.4 in the preface.

Frames can be used to split the browser window into multiple regions; each region can display a different HTML page. Frames are often used to display a table of contents or navigation bar alongside the main page. Frames are created by using one or more <frame> tags within a <frameset> tag, but as usual, Dreamweaver's visual tools handle the underlying HTML for you. (Dreamweaver does not implement the <iframe> tag in any of its frame configurations. The <iframe> tag is not supported in IE browsers prior to IE4 and is not supported in NN browsers prior to NN6.)

The Objects panel's Frames category, shown in Figure 4-1, offers an easy way to create framesets (and shows thumbnails of each configuration). You can download additional frame configurations from the Dreamweaver Exchange.

Figure 4-1: The Objects panel's Frames category

You can also insert frames by selecting Insert → Frames and choosing one of the frame configurations listed in Table 4-1 (which correspond to the icons shown in Figure 4-1, but with slightly different names).

Table 4-1 also lists commands from the Modify → Frameset menu (which split an existing frame or create a frameset if the document doesn't already contain one). No Macintosh keyboard shortcuts insert or split frames, but you can use the Alt+I, S and Alt+M, F shortcuts to access these menus under Windows. Furthermore, once a frameset is created, Dreamweaver automatically creates additional columns or rows of frames if you click and drag any edge of the frameset in the Document window.

Table 4-1: Preformatted frameset options
Menu option	Layout

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

Frames can be used to split the browser window into multiple regions; each region can display a different HTML page. Frames are often used to display a table of contents or navigation bar alongside the main page. Frames are created by using one or more <frame> tags within a <frameset> tag, but as usual, Dreamweaver's visual tools handle the underlying HTML for you. (Dreamweaver does not implement the <iframe> tag in any of its frame configurations. The <iframe> tag is not supported in IE browsers prior to IE4 and is not supported in NN browsers prior to NN6.)

The Objects panel's Frames category, shown in Figure 4-1, offers an easy way to create framesets (and shows thumbnails of each configuration). You can download additional frame configurations from the Dreamweaver Exchange.

Figure 4-1: The Objects panel's Frames category

You can also insert frames by selecting Insert → Frames and choosing one of the frame configurations listed in Table 4-1 (which correspond to the icons shown in Figure 4-1, but with slightly different names).

Table 4-1 also lists commands from the Modify → Frameset menu (which split an existing frame or create a frameset if the document doesn't already contain one). No Macintosh keyboard shortcuts insert or split frames, but you c

Table of Contents

Section 3.2.1.1: Selecting tables

Section 3.2.1.2: Selecting cells, columns, or rows