tag in the tag selector at the lower-left corner
of the Document window.
■
Click in a table cell, then select Modify > Table > Select Table.
■
Click in a table cell, click the table header menu, then select Select Table.
Selection handles appear on the selected table’s lower and right edges.
Selecting table elements
239
Related topics
■
“Selecting cells” on page 240
Selecting rows or columns
You can select an individual row or column or multiple rows or columns.
To select individual or multiple rows or columns:
1.
Position the pointer to point to the left edge of a row or the top edge of a column.
2.
When the pointer changes to a selection arrow, click to select a row or column, or drag to
select multiple rows or columns.
To select a single column:
1.
Click in the column.
2.
Click the column header menu, then select Select Column.
Related topics
■
“Selecting a table” on page 239
Selecting cells
You can select a single cell, a line or block of cells, or nonadjacent cells. To select entire rows or
columns, see “Selecting rows or columns” on page 240.
To select a single cell, do one of the following:
■
Click in the cell, then select the
tag in the tag selector at the lower-left corner of the
Document window.
■
Control-click (Windows) or Command-click (Macintosh) in the cell.
240
Chapter 8: Presenting Content with Tables
■
Click in the cell, then select Edit > Select All.
TI P
Select Edit > Select All again when a cell is selected to select the entire table.
To select a line or a rectangular block of cells, do one of the following:
■
Drag from a cell to another cell.
■
Click in one cell, Control-click (Windows) or Command-click (Macintosh) in the same
cell to select it, then Shift-click another cell.
All of the cells within the linear or rectangular region defined by the two cells are selected.
To select nonadjacent cells:
■
Control-click (Windows) or Command-click (Macintosh) the cells, rows, or columns you
want to select.
If each cell, row, or column you Control-click or Command-click isn’t already selected, it’s
added to the selection. If it is already selected, it’s removed from the selection.
Related topics
■
“Selecting a table” on page 239
Using Expanded Tables mode for easier
table editing
Expanded Tables mode temporarily adds cell padding and spacing to all tables in a document
and increases the tables’ borders to make editing easier. This mode enables you to select items
in tables or precisely place the insertion point.
Using Expanded Tables mode for easier table editing
241
For example, you might expand a table to place the insertion point to the left or right of an
image, without inadvertently selecting the image or table cell.
NO TE
Once you make your selection or place the insertion point, you should return to the
Standard mode of Design view to make your edits. Some visual operations, such as
resizing, will not give expected results in Expanded Tables mode.
To switch into Expanded Tables mode:
1.
If you are working in Code view, select View > Design or View > Code and Design.
You cannot switch to Expanded Tables mode in Code view.
2.
Do one of the following:
■
Select View > Table Mode > Expanded Tables Mode.
■
In the Layout category of the Insert bar, click the Expanded Tables Mode button.
A bar labeled Expanded Tables Mode appears across the top of the Document window.
Dreamweaver adds cell padding and spacing to all tables on the page and increases the tables’
borders.
To switch out of Expanded Tables mode, do one of the following:
■
Click Exit in the bar labeled Expanded Tables Mode at the top of the Document window.
■
Select View > Table Mode > Standard Mode.
■
In the Layout category of the Insert bar, click the Standard Mode button.
Dreamweaver returns to Standard mode.
242
Chapter 8: Presenting Content with Tables
Formatting tables and cells
You can change the appearance of tables by setting properties for the table and its cells or by
applying a preset design to the table. Before you set table and cell properties, it’s a good idea to
understand which properties have precedence over the others (see “Table formatting
precedence in HTML” on page 234).
TIP
To format the text inside a table cell, use the same procedures you would use to format
text outside of a table. For more information, see Chapter 13, “Inserting and Formatting
Text,” on page 369.
Related topics
■
“Resizing tables, columns, and rows” on page 245
Viewing and setting table, cell, row, and column
properties
When a table or cell is selected, the Property inspector lets you view and change its properties.
NO TE
Before you change properties for table elements, it’s a good idea to understand which
properties have precedence over the others (see “Table formatting precedence in
HTML” on page 234).
To view and set table or table element properties:
1.
Select a table, cell, row, or column (see “Selecting table elements” on page 238).
2.
In the Property inspector (Window > Properties), click the expander arrow in the lowerright corner to see all the properties.
3.
Change properties as necessary.
For more information, click the Help button in the Property inspector.
N OT E
When you set properties on a column, Dreamweaver changes the attributes of the td
tag corresponding to each cell in the column. When you set certain properties for a
row, however, Dreamweaver changes the attributes of the tr tag rather than
changing the attributes of each td tag in the row, When you’re applying the same
format to all the cells in a row, applying the format to the tr tag produces cleaner,
more concise HTML code.
Formatting tables and cells
243
Editing accessibility attributes for a table
If you did not add accessibility attributes for your table when you inserted it (see “Inserting a
table and adding content” on page 235) and need to add them later, or if you need to edit
accessibility attributes, you can do so in Code view or Design view.
To add or edit accessibility values for a table in Code view:
■
Edit the appropriate attributes in the code.
TIP
To quickly locate the tags in the code, click in the table, then select the
tag in
the tag selector at the bottom of the Document window.
To add or edit accessibility values for a table in Design view, do any of the
following:
■
To edit the table caption, highlight the caption, then type a new caption.
■
To edit the caption alignment, place the insertion point in the table caption, right-click
(Windows) or Control-click (Macintosh), then select Edit Tag Code.
■
To edit the table summary, select the table, right-click (Windows) or Control-click
(Macintosh), then select Edit Tag Code.
Related topics
■
“Viewing and setting table, cell, row, and column properties” on page 243
Using a design scheme to format a table
Use the Format Table command to quickly apply a preset design to a table. You can then
select options to further customize the design.
N OT E
Only simple tables can be formatted using preset designs. You can’t use these designs
to format tables that contain merged cells (colspan or rowspan) or column groups, or
any other table that doesn’t consist of a simple rectangular grid of cells.
To use a preset table design:
1.
Select a table (see “Selecting a table” on page 239).
2.
Select Commands > Format Table.
244
Chapter 8: Presenting Content with Tables
The Format Table dialog box appears.
3.
Customize options as desired.
For more information, click the Help button in the dialog box.
4.
Click Apply or OK to format your table with the selected design.
Resizing tables, columns, and rows
You can resize an entire table or individual rows and columns. If you have trouble resizing,
you can clear the column widths or row heights and start over.
Sometimes the column widths set in the HTML code do not match their apparent widths on
the screen. When this happens, you can make the widths consistent. Table and column widths
and header menus appear in Dreamweaver to help you lay out your tables; you can enable or
disable the widths and menus as necessary.
Resizing tables, columns, and rows
245
Resizing a table
You can resize a table by dragging one of its selection handles. Dreamweaver displays the table
width, along with a table header menu, at the top or bottom of the table when the table is
selected or the insertion point is in the table.
NO TE
You can disable the table width and table header menu if necessary (see “Displaying
table and column widths and menus” on page 249).
When you resize an entire table, all of the cells in the table change size proportionately. If a
table’s cells have explicit widths or heights specified, resizing the table changes the visual size
of the cells in the Document window but does not change the specified widths and heights of
the cells. To clear set widths or heights, see “Clearing set widths and heights” on page 249.
To resize a table:
1.
Select the table (see “Selecting a table” on page 239).
Selection handles appear on the table.
2.
Do one of the following:
■
To resize the table horizontally, drag the selection handle on the right.
■
To resize the table vertically, drag the selection handle on the bottom.
■
To resize the table in both dimensions, drag the selection handle at the lower-right
corner.
Resizing columns and rows
You can change the width of a column or the height of a row in the Property inspector or by
dragging the borders of the column or row. If you have trouble resizing, you can clear the
column widths or row heights and start over (see “Clearing set widths and heights”
on page 249).
N O TE
246
You can also change cell widths and heights directly in the HTML code using Code view.
For more information, see “Coding in Dreamweaver” on page 549.
Chapter 8: Presenting Content with Tables
Dreamweaver displays column widths, along with column header menus, at the tops or
bottoms of columns when the table is selected or the insertion point is in the table. For more
information, see “About tables” on page 234.
NO TE
You can disable the column widths and column header menus if necessary (see
“Displaying table and column widths and menus” on page 249).
To change a column’s width and keep the overall table width:
■
Drag the right border of the column you want to change.
The width of the adjacent column also changes, so you actually resize two columns. Visual
feedback shows you how the columns will adjust; the overall table width does not change.
N OT E
In tables with percentage-based widths (not pixels), if you drag the right border of the
rightmost column, the whole table’s width changes, and all of the columns grow
wider or narrow proportionately.
To change a column’s width and maintain the size of the other columns:
■
Hold the Shift key, then drag the column’s border.
The width of one column changes. Visual feedback shows you how the columns will
adjust; the overall table width changes to accommodate the column you are resizing.
To change a row’s height visually:
■
Drag the lower border of the row.
To set a column’s width or a row’s height using the Property inspector:
1.
Select the column or row (see “Selecting rows or columns” on page 240).
2.
In the Property inspector (Window > Properties), enter a value in the W text field for the
column’s width or in the H text field for the row’s height.
Resizing tables, columns, and rows
247
For more information, click the Help button in the Property inspector.
TI P
3.
You can specify widths and heights as either pixels or percentages, and you can
convert from pixels to percentages and back.
Press Tab or Enter (Windows) or Return (Macintosh) to apply the value.
Related topics
■
“Resizing a table” on page 246
■
“Clearing set widths and heights” on page 249
■
“Displaying table and column widths and menus” on page 249
Making column widths in code consistent with visual
widths
If you see two numbers for a column’s width, then the column width set in the HTML code
does not match the column’s apparent width on the screen. You can make the width specified
in the code match the visual width. For more information, see “About tables” on page 234.
To make widths consistent:
1.
Click in a cell.
2.
Click the table header menu, then select Make All Widths Consistent.
Dreamweaver resets the width specified in the code to match the visual width.
Related topics
■
“Resizing a table” on page 246
■
“Resizing columns and rows” on page 246
248
Chapter 8: Presenting Content with Tables
Clearing set widths and heights
You might want to clear set widths and heights before you resize a table, or if you have trouble
resizing a table or individual columns or rows and want to start over.
NO T E
When you resize a table by dragging one of its selection handles, you change the visual
size of the cells in the table, but you do not change any specified widths or heights of
cells. It’s a good idea to clear set widths and heights before resizing.
To clear all set widths or heights in a table:
1.
Select the table (see “Selecting a table” on page 239).
2.
Do one of the following:
■
■
■
Select Modify > Table > Clear Cell Widths or Modify > Table > Clear Cell Heights.
In the Property inspector (Window > Properties), click the Clear Row Heights button
or the Clear Column Widths button.
Click the table header menu, then select Clear All Heights or Clear All Widths.
To clear a column’s set width:
1.
Click in the column.
2.
Click the column header menu, then select Clear Column Width.
Related topics
■
“Resizing a table” on page 246
■
“Resizing columns and rows” on page 246
■
“Making column widths in code consistent with visual widths” on page 248
Displaying table and column widths and menus
Dreamweaver displays table and column widths, along with arrows to access the table header
menu and the column header menus, when a table is selected or when the insertion point is in
the table. (For more information, see “About tables” on page 234.) You can enable and disable
the widths and menus as necessary.
Resizing tables, columns, and rows
249
To enable or disable table and column widths and menus, do one of the
following:
■
Select View > Visual Aids > Table Widths.
■
Right-click (Windows) or Control-click (Macintosh) in the table, then select Table >
Table Widths.
Related topics
■
“Resizing a table” on page 246
■
“Resizing columns and rows” on page 246
Adding and removing rows and columns
To add and remove rows and columns, use the Modify > Table or column header menu.
TIP
Pressing Tab in the last cell of a table automatically adds another row to the table.
To add a single row or column:
1.
Click in a cell.
2.
Do one of the following:
■
Select Modify > Table > Insert Row or Modify > Table > Insert Column.
A row appears above the insertion point or a column appears to the left of the
insertion point.
■
Click the column header menu, and then select Insert Column Left or Insert Column
Right.
A column appears to the left or right of the insertion point.
To add multiple rows or columns:
1.
Click in a cell.
2.
Select Modify > Table > Insert Rows or Columns.
The Insert Rows or Columns dialog box appears.
250
Chapter 8: Presenting Content with Tables
3.
Select Rows or Columns, then complete the dialog box.
For more information, click the Help button in the dialog box.
4.
Click OK.
The rows or columns appear in the table.
To delete a row or column, do one of the following:
■
Click in a cell within the row or column you want to delete, then select Modify > Table >
Delete Row or Modify > Table > Delete Column.
■
Select a complete row or column (see “Selecting rows or columns” on page 240), then
select Edit > Clear or press the Delete key.
The entire row or column disappears from the table.
To add or delete rows or columns using the Property inspector:
1.
Select the table (see “Selecting a table” on page 239).
2.
In the Property inspector (Windows > Properties), do one of the following:
■
Increase or decrease the Rows value to add or delete rows.
Dreamweaver adds and removes rows at the bottom of the table.
■
Increase or decrease the Cols value to add or delete columns.
Dreamweaver adds and removes columns at the right side of the table.
N OT E
Dreamweaver does not warn you if you are deleting rows and columns that
contain data.
Related topics
■
“Inserting a repeating table” on page 319
■
“Displaying multiple recordset results” on page 729
Splitting and merging cells
Use the Property inspector or the commands in the Modify > Table submenu to split or
merge cells. For more information, see “About splitting and merging table cells” on page 235.
As an alternative approach to merging and splitting cells, Dreamweaver also provides tools for
increasing and decreasing the number of rows or columns spanned by a cell.
Splitting and merging cells
251
To merge two or more cells in a table:
1.
Select the cells in a contiguous line and in the shape of a rectangle.
In the following illustration, the selection is a rectangle of cells, so the cells can be merged.
In the following illustration, the selection is not a rectangle, so the cells can’t be merged.
2.
Do one of the following:
■
■
Select Modify > Table > Merge Cells.
In the expanded Property inspector (Window > Properties), click the Merge Cells
button.
N O TE
If you don’t see the button, click the arrow in the lower-right corner of the
Property inspector so that you see all the options.
The contents of the individual cells are placed in the resulting merged cell. The properties
of the first cell selected are applied to the merged cell.
To split a cell:
1.
Click in the cell.
2.
Do one of the following:
■
■
Select Modify > Table > Split Cell.
In the expanded Property inspector (Window > Properties), click the Split Cell
button.
N OT E
252
If you don’t see the button, click the arrow in the lower-right corner of the
Property inspector so that you see all the options.
Chapter 8: Presenting Content with Tables
3.
In the Split Cell dialog box, specify how to split the cell.
For more information, click the Help button in the dialog box.
To increase or decrease the number of rows or columns spanned by a cell:
1.
Select a cell.
2.
Do one of the following:
■
■
Select Modify > Table > Increase Row Span or Modify > Table > Increase Column
Span.
Select Modify > Table > Decrease Row Span or Modify > Table > Decrease Column
Span.
Copying, pasting, and deleting cells
You can copy, paste, or delete a single table cell or multiple cells at once, preserving the
cells’ formatting.
You can paste cells at the insertion point or in place of a selection in an existing table. To paste
multiple table cells, the contents of the Clipboard must be compatible with the structure of
the table or the selection in the table in which the cells will be pasted.
To cut or copy table cells:
1.
Select one cell or multiple cells in a contiguous line and in the shape of a rectangle.
In the following illustration, the selection is a rectangle of cells, so the cells can be cut
or copied.
Copying, pasting, and deleting cells
253
In the following illustration, the selection is not a rectangle, so the cells can’t be cut or
copied.
2.
Select Edit > Cut or Edit > Copy.
N OT E
If you selected an entire row or column and you select Edit > Cut, the entire row or
column is removed from the table (not just the contents of the cells).
To paste table cells:
1.
Select where you want to paste the cells:
■
To replace existing cells with the cells you are pasting, select a set of existing cells with
the same layout as the cells on the clipboard.
For example, if you’ve copied or cut a 3 x 2 block of cells, you can select another 3 x 2
block of cells to replace by pasting.
■
To paste a full row of cells above a particular cell, click in that cell.
■
To paste a full column of cells to the left of a particular cell, click in that cell.
N OT E
■
2.
If you have less than a full row or column of cells in the clipboard, and you click in
a cell and paste the cells from the clipboard, the cell you clicked in and its
neighbors may (depending on its location in the table) be replaced with the cells
you are pasting.
To create a new table with the pasted cells, place the insertion point outside of the
table.
Select Edit > Paste.
If you are pasting entire rows or columns into an existing table, the rows or columns are
added to the table. If you are pasting an individual cell, the contents of the selected cell are
replaced. If you are pasting outside a table, the rows, columns, or cells are used to define a
new table.
254
Chapter 8: Presenting Content with Tables
To remove cell content but leave the cells intact:
1.
Select one or more cells.
NO T E
2.
Make sure the selection does not consist entirely of complete rows or columns.
Select Edit > Clear or press Delete.
N OT E
If only complete rows or columns are selected when you select Edit > Clear or press
Delete, the entire rows or columns—not just their contents—are removed from the
table.
To delete rows or columns that contain merged cells:
1.
Select the row or column.
2.
Select Modify > Table > Delete Row or Modify > Table > Delete Column.
Nesting tables
A nested table is a table inside a cell of another table. You can format a nested table as you
would any other table; however, its width is limited by the width of the cell in which it
appears.
To nest a table within a table cell:
1.
Click in a cell of the existing table.
2.
Select Insert > Table.
The Insert Table dialog box appears.
3.
Complete the dialog box.
For more information, click the Help button in the dialog box.
4.
Click OK.
The table appears in the existing table.
Nesting tables
255
Sorting tables
You can sort the rows of a table based on the contents of a single column. You can also
perform a more complicated table sort based on the contents of two columns.
You cannot sort tables that contain colspan or rowspan attributes—that is, tables that
contain merged cells. For more information, see “Splitting and merging cells” on page 251.
To sort a table:
1.
Select the table (see “Selecting a table” on page 239) or click in any cell.
2.
Select Commands > Sort Table.
The Sort Table dialog box appears.
3.
Complete the dialog box.
For more information, click the Help button in the dialog box.
4.
Click OK.
256
Chapter 8: Presenting Content with Tables
CHAPTER 9
9
Laying Out Pages in
Layout Mode
One common method for creating a page layout is to use HTML tables to position elements.
Tables can be difficult to use for layout, however, because they were originally created for
displaying tabular data, not for laying out web pages. To streamline the process of using tables
for page layout, Macromedia Dreamweaver 8 provides Layout mode.
In Layout mode, you can design your page using tables as the underlying structure, while
avoiding some of the problems that often occur when creating table-based designs using
traditional means.
NO TE
For more information about working with tables in Standard mode, see Chapter 8,
“Presenting Content with Tables,” on page 233. Or, as an alternative to using tables in
Standard or Layout mode, you can use CSS positioning to lay out pages (see “Inserting
div tags for layout” on page 221).
This chapter contains these sections:
About Layout mode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .258
Switching from Standard to Layout mode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261
Drawing in Layout mode. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .262
Adding content to a layout cell . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .265
Clearing automatically set cell heights. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 267
Resizing and moving layout cells and tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 267
Formatting layout cells and tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .269
Setting column width. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .270
Setting preferences for Layout mode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273
257
About Layout mode
In Layout mode, you use layout cells and tables to lay out your page before adding content.
For example, you could draw a cell along the top of your page to hold a header graphic,
another cell on the left side of the page to hold a navigation bar, and a third cell on the right
to hold content. As you add content, you can move cells around as necessary to adjust your
layout.
TI P
For maximum flexibility, you can draw each cell only when you’re ready to put content
into it. This enables you to leave more blank space in the layout table for a longer time, so
that you can move or resize cells more easily.
Layout tables appear outlined in green on your page; layout cells appear outlined in blue on
your page. (To change the default outline colors, see “Setting preferences for Layout mode”
on page 273.) When you move the pointer over a table cell, Dreamweaver highlights the cell.
(To enable or disable highlighting or to change the highlight color, see “Drawing layout cells
and tables” on page 262.)
You can lay out your page using several layout cells within one layout table, which is the most
common approach to web-page layout, or you can use multiple, separate layout tables for
more complex layouts. Using multiple layout tables isolates sections of your layout, so that
they aren’t affected by changes in other sections.
You can also nest layout tables, by placing a new layout table inside an existing layout table
(see “Drawing a nested layout table” on page 264). This structure enables you to simplify the
table structure when the rows or column in one part of the layout don’t line up with the rows
or columns in another part of the layout. For example, using nested layout tables you could
easily create a two-column layout with four rows in the left column and three rows in the right
column.
258
Chapter 9: Laying Out Pages in Layout Mode
Related topics
■
“Switching from Standard to Layout mode” on page 261
■
“Drawing in Layout mode” on page 262
About viewing table and cell widths in Layout mode
The widths of layout tables and cells (in pixels, or as a percentage of the page width) appear at
the top or bottom of the table when the table is selected or when the insertion point is in the
table. Beside the widths are arrows for the table header menu and the column header menus.
Use the menus for quick access to some common commands.
NO T E
To disable column widths, along with table tabs and header menus, you must disable all
visual aids (View > Visual Aids > Hide All).
Sometimes, the width might not appear for a column; you might see any of the following:
■
No width. If you do not see a width for the table or for a column, then that table or
column does not have a specified width in the HTML code. To specify a fixed width, see
“Making a column autostretch or fixed-width” on page 270.
■
Two numbers. If two numbers appear, then the visual width as it appears in Design view
doesn’t match the width specified in the HTML code. This can happen when you resize a
table by dragging its lower-right corner or when you add content to a cell that’s larger than
its set width.
For example, if you set a column’s width to 200 pixels, then add content that stretches the
width to 250 pixels, two numbers appear at the top of that column: 200 (the width
specified in the code) and in parentheses (250) (the visual width of the column as it’s
rendered on your screen).
To reconcile the column widths, see “Making column widths in code consistent with
visual widths” on page 272.
■
Wavy line. A wavy line appears for columns that are set to autostretch. For information
about setting a column to autostretch, see “Making a column autostretch or fixed-width”
on page 270.
■
Double bars. Columns that contain spacer images have double bars around the column
width. For information about spacer images, see “Using spacer images” on page 271.
About Layout mode
259
Related topics
■
“Setting column width” on page 270
Layout table and cells grid lines
When you draw a layout cell in a layout table, a light grid of lines appears, extending from the
edges of any new layout cell out to the edges of the layout table that contains it. These lines
help you align new cells with old cells, and help you visualize the underlying HTML table’s
structure.
Dreamweaver automatically snaps the edges of new cells into alignment with nearby edges of
existing cells. (Layout cells cannot overlap.) Cell edges also automatically snap to the edges of
the containing layout table if you draw a cell close to the edge of a table.
You can also use the Dreamweaver grid, which is set and doesn’t change based on the
placement of cells, to help you lay out your page (see “Using a tracing image” on page 230).
Related topics
“About Layout mode” on page 258
■
Fixed column width and autostretch columns
A table column in Layout mode can have either a fixed width or a width that automatically
expands to fill as much of the browser window as possible (autostretch).
Fixed-width columns have a specific numeric width, such as 300 pixels. Dreamweaver
displays the column width for each fixed-width column at the top or bottom of the column.
Autostretch columns
change automatically depending on the browser window’s width. If
your layout includes an autostretch column, the layout always fills the entire width of the
visitor’s browser window. You can make only one column in a given layout table autostretch.
An autostretch column displays a wavy line in the column width area.
A common layout is to make the column containing the main content of the page autostretch,
which automatically sets all the other columns to fixed width. For example, suppose your
layout has a wide image on the left side of the page and a column of text on the right. You
might set the left column to a fixed width and make the sidebar area autostretch.
When you make a column autostretch, Dreamweaver inserts spacer images in the fixed width
columns to ensure that those columns stay as wide as they should be, unless you specify that
no spacer image should be used. A spacer image is a transparent image, used to control
spacing, that is not visible in the browser window.
260
Chapter 9: Laying Out Pages in Layout Mode
Related topics
■
“Making a column autostretch or fixed-width” on page 270
Spacer images
A spacer image (also known as a spacer GIF) is a transparent image that’s used to control
spacing in autostretch tables. A spacer image consists of a single-pixel transparent GIF image,
stretched out to be a specified number of pixels wide. A browser can’t draw a table column
narrower than the widest image contained in a cell in that column, so placing a spacer image
in a table column requires browsers to keep the column at least as wide as the image.
Dreamweaver automatically adds spacer images when you set a column to autostretch, unless
you specify that no spacer image should be used. You can manually insert and remove spacer
images in each column if you prefer. Columns that contain spacer images have a double bar
where the column width appears.
You can manually insert and remove spacer images in specific columns or remove all spacer
images in the page.
Related topics
■
“Using spacer images” on page 271
Switching from Standard to Layout mode
Before you can draw layout tables or layout cells, you must switch from Standard mode into
Layout mode. When you create tables for layout in Layout mode, but it’s a good idea to
switch back to Standard mode before you add content to or edit your tables.
NO T E
If you create a table in Standard mode, then switch into Layout mode, the resulting
layout table might contain empty layout cells. You might need to delete these empty
layout cells before you can create new layout cells or move layout cells around.
To switch into Layout mode:
1.
If you are working in Code view, select View > Design or View > Code and Design.
You cannot switch to Layout mode in Code view.
2.
Do one of the following:
■
Select View > Table Mode > Layout Mode.
■
In the Layout category of the Insert bar, click the Layout Mode button.
A bar labeled Layout Mode appears across the top of the Document window. If there are
tables on your page, they appear as layout tables.
Switching from Standard to Layout mode
261
To switch out of Layout mode, do one of the following:
■
Click Exit in the bar labeled Layout Mode at the top of the Document window.
■
Select View > Table Mode > Standard Mode.
■
In the Layout category of the Insert bar, click the Standard Mode button.
Dreamweaver returns to Standard mode.
Drawing in Layout mode
Layout mode allows you to draw cells and tables, including tables nested in other tables. The
snapping grid helps you to align cells (see “Using a tracing image” on page 230).
Drawing layout cells and tables
You can draw layout cells and tables on your page in Layout mode. When you draw a layout
cell that isn’t inside a layout table, Dreamweaver automatically creates a layout table as a
container for the cell. A layout cell cannot exist outside of a layout table.
N OT E
In Layout mode, you can’t use the Insert Table and Draw Layer tools that you can use in
Standard mode. To use those tools, you must first switch to Standard mode.
When Dreamweaver automatically creates a layout table, the table initially appears to fill the
entire Design view, even if you change the size of your Document window. This full-window
default layout table allows you to draw layout cells anywhere in Design view. You can set the
table to a specific size by clicking the table border, then dragging the table’s resize handles.
When you move the pointer over a layout cell, Dreamweaver highlights it. You can enable or
disable highlighting or change the highlight color in preferences.
To draw a layout cell:
1.
Make sure you are in Layout mode (see “Switching from Standard to Layout mode”
on page 261).
2.
In the Layout category of the Insert bar, click Draw Layout Cell button.
The pointer changes to a cross hair (+).
3.
Position the pointer where you want to start the cell on the page, and then drag to create
the layout cell.
T IP
262
To draw more than one layout cell without having to repeatedly select Draw Layout
Cell, Control-drag (Windows) or Command-drag (Macintosh) when you draw the
layout cell. As long as you continue to hold Control or Command, you can draw
layout cells one after the other.
Chapter 9: Laying Out Pages in Layout Mode
If you draw the cell close to the edge of the layout table, cell edges automatically snap to
the edges of the containing layout table. To temporarily disable snapping, hold down Alt
(Windows) or Option (Macintosh) while drawing the cell.
The cell appears outlined in blue on your page. To change the outline color, see “Setting
preferences for Layout mode” on page 273.
To draw a layout table:
1.
Make sure you are in Layout mode (see “Switching from Standard to Layout mode”
on page 261).
2.
In the Layout category of the Insert bar, click the Draw Layout Table button.
The pointer changes to a cross hair (+).
3.
Position the pointer on the page, then drag to create the layout table.
TIP
To draw more than one layout table without having to repeatedly select Draw Layout
Table, Control-drag (Windows) or Command-drag (Macintosh) when you draw the
layout table. As long as you continue to hold Control or Command, you can draw
layout tables one after the other.
You can create a layout table in an empty area of your page layout, around existing layout
cells and tables, or nested inside an existing layout table. If your page contains content,
and you want to add a layout table in an empty area of your page layout, you can draw a
new layout table only below the bottom of the existing content.
TIP
If you try to draw a layout table below existing content and the no-draw pointer
appears, try resizing the Document window to create more blank space between the
bottom of the existing content and the bottom of the window.
N OT E
Tables cannot overlap each other, but a table can be completely contained inside
another table. For more information, see “Drawing a nested layout table”
on page 264.
The Layout table appears outlined in green on your page. To change the outline color, see
“Setting preferences for Layout mode” on page 273.
To change highlighting preferences for layout cells:
1.
Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh).
The Preferences dialog box appears.
2.
Select Highlighting from the category list on the left.
Drawing in Layout mode
263
3.
Make either of the following changes:
■
To change the highlighting color, click the Mouse-over color box, then select a
highlight color using the color picker (or enter the hexadecimal value for the highlight
color in the text box).
For information about using the color picker, see “Working with colors” on page 350.
■
To enable or disable highlighting, select or deselect the Show checkbox for MouseOver.
N OT E
4.
These options affect all objects, such as tables and layers, that Dreamweaver
highlights when you move the pointer over them.
Click OK.
Drawing a nested layout table
You can draw a layout table inside another layout table, to create a nested table. The cells
inside a nested table are isolated from changes made to the outer table; for example, when you
change the size of a row or column in the outer table, the cells in the inner table don’t change
size.
You can insert multiple levels of nested tables. A nested layout table cannot be larger than the
table that contains it.
N OT E
264
If you draw a layout table in the middle of your page before drawing a layout cell, the
table you draw is automatically nested inside a larger table.
Chapter 9: Laying Out Pages in Layout Mode
To draw a nested layout table:
1.
Make sure you are in Layout mode (see “Switching from Standard to Layout mode”
on page 261).
2.
In the Layout category of the Insert bar, click the Draw Layout Table button.
The pointer changes to a cross hair (+).
3.
Point to an empty (gray) area in an existing layout table, and then drag to create the nested
layout table.
NO TE
You can’t create a layout table inside a layout cell. You can create a nested layout
table only in an empty area of an existing layout table, or around existing cells.
To draw a layout table around existing layout cells or tables:
1.
Make sure you are in Layout mode (see “Switching from Standard to Layout mode”
on page 261).
2.
In the Layout category of the Insert bar, click the Draw Layout Table button.
The pointer changes to a cross hair (+).
3.
Drag to draw a rectangle around a set of existing layout cells or tables.
A new nested layout table appears, enclosing the existing cells or tables.
TIP
To make an existing layout cell fit snugly into one corner of the new nested table,
start dragging near the corner of the cell; the new table’s corner snaps to the cell’s
corner. You can’t start dragging in the middle of a layout cell, because you can’t
create a layout table entirely inside a layout cell.
Adding content to a layout cell
You can add text, images, and other content to layout cells in Layout mode just as you would
add content to table cells in Standard mode. Click in the cell where you want to add content,
then type text or insert other content.
You can insert content only into a layout cell, not into an empty (gray) area of a layout table,
so before you can add content, you must first create layout cells (see “Drawing in Layout
mode” on page 262).
Adding content to a layout cell
265
To add text to a layout cell:
1.
Place the insertion point in the layout cell where you want to add text.
2.
Do one of the following:
■
Type text into the cell.
The cell automatically expands as you type, if necessary.
■
Paste text copied from another document.
For more information, see “Inserting text” on page 381.
A layout cell expands automatically when you add content that is wider than the cell. As the
cell expands, the column that the cell is in also expands, which might change the sizes of
surrounding cells. The column width for that column changes to show the width that appears
in the code, followed by the visual width of the column (the width as it appears on your
screen) in parentheses. For more information about column widths, see “Setting column
width” on page 270.
To add an image to a layout cell:
1.
Place the insertion point in the layout cell where you want to add the image.
2.
Do one of the following:
■
■
Select Insert > Image.
In the Common category of the Insert bar, click the arrow on the Images button, and
then select Image.
TI P
If the Image button is showing (as in the following example) in the Insert bar, you
can click the button instead of using the pop-up menu.
The Select Image Source dialog box appears.
3.
Select an image file.
For more information, see “Inserting an image” on page 409.
4.
Click OK.
The image appears in the layout cell.
266
Chapter 9: Laying Out Pages in Layout Mode
Clearing automatically set cell heights
When you create a layout cell, Dreamweaver automatically specifies a height for the cell, to
make the cell display at the height you drew even though the cell is empty. After you insert
content into the cell, you might no longer need the height to be specified, so you can remove
the explicit cell heights from the table.
To clear cell heights, do one of the following:
■
Click the table header menu, then select Clear All Heights.
■
Select a layout table by clicking the tab at the top of the table, then click the Clear Row
Heights button in the Property inspector (Window > Properties).
Dreamweaver clears all the heights specified in the table. Some of the table cells might
shrink vertically.
Resizing and moving layout cells and
tables
To adjust your page layout, you can move and resize layout cells and nested layout tables.
(The outermost layout table can only be resized.)
N OT E
To use the Dreamweaver grid as a guide while you move or resize your cells and tables,
see “Using a tracing image” on page 230.
Resizing and moving layout cells
You can resize or move layout cells, but they cannot overlap. You cannot move or resize a cell
to make it cross the boundaries of the layout table that contains it. A layout cell cannot be
made smaller than its contents.
For information on how to resize or move layout tables, see “Resizing and moving layout
tables” on page 268.
Resizing and moving layout cells and tables
267
To resize a layout cell:
1.
Select a cell by clicking an edge of the cell or by Control-clicking (Windows) or
Command-clicking (Macintosh) anywhere in the cell.
Selection handles appear around the cell.
2.
Drag a selection handle to resize the cell.
The cell edges automatically snap to align with other cells’ edges.
To move a layout cell:
1.
Select a cell by clicking an edge of the cell or by Control-clicking (Windows) or
Command-clicking (Macintosh) anywhere in the cell.
Selection handles appear around the cell.
2.
Do one of the following:
■
Drag the cell to another location within its layout table.
■
Press the arrow keys to move the cell 1 pixel at a time.
TIP
Hold down Shift while pressing an arrow key to move the cell 10 pixels at a time.
Resizing and moving layout tables
A layout table cannot be resized to be smaller than the smallest rectangle containing all of its
cells. A layout table also cannot be resized so that it overlaps other tables or cells.
To resize or move layout cells, see “Resizing and moving layout cells” on page 267.
To resize a layout table:
1.
Select a table by clicking the tab at the top of the table.
Selection handles appear around the table.
2.
Drag the selection handles to resize the table.
The table edges automatically snap to align with the edges of other cells and tables.
268
Chapter 9: Laying Out Pages in Layout Mode
To move a layout table:
1.
Select a table by clicking the tab at the top of the table.
Selection handles appear around the table.
NO T E
2.
You can move a layout table only if it’s nested inside another layout table.
Do one of the following:
■
Drag the table to another location on the page.
■
Press the arrow keys to move the table 1 pixel at a time.
TIP
Hold down Shift while pressing an arrow key to move the table 10 pixels at a time.
Formatting layout cells and tables
You can change the appearance of any layout cell or table by using the Property inspector.
Formatting layout cells
You can set various attributes of a layout cell in the Property inspector, including width and
height, background color, and alignment of the cell’s contents.
To format a layout cell in the Property inspector:
1.
Select a cell by clicking an edge of the cell or by Control-clicking (Windows) or
Command-clicking (Macintosh) anywhere in the cell.
2.
Open the Property inspector (Window > Properties) if it isn’t already open.
3.
Change the cell’s formatting by setting properties.
For more information, click the Help button in the Property inspector.
Formatting layout cells and tables
269
Formatting layout tables
You can set various attributes of a layout table in the Property inspector, including width,
height, padding, and spacing.
To format a layout table:
1.
Select a table by clicking the tab at the top of the table.
2.
Open the Property inspector (Window > Properties) if it isn’t already open.
3.
Change the table’s formatting by setting properties.
For more information, click the Help button in the Property inspector.
Setting column width
You can set a column to a specific width or make it stretch to fill as much of a browser
window as possible. You can also specify a minimum width for a column using a spacer image.
Sometimes the column widths width set in the HTML code do not match their apparent
widths on the screen. When this happens, you can make the widths consistent.
Making a column autostretch or fixed-width
A column in a table can be either fixed-width or autostretch. For more information, see
“Fixed column width and autostretch columns” on page 260.
Making a column autostretch before your layout is complete might have unexpected effects
on table layout. To prevent columns from growing unexpectedly wider or narrower, create
your complete layout before making a column autostretch, and use spacer images when
making a column autostretch. (However, if each column contains other content that will keep
the column at the desired width, you don’t need spacer images.)
To make a column autostretch:
1.
270
Do one of the following:
Chapter 9: Laying Out Pages in Layout Mode
■
■
Click the column header menu, then select Make Column Autostretch.
Select a cell in the column by clicking an edge of the cell, then click Autostretch in the
Property inspector.
N OT E
You can make only one column in a given table autostretch.
If you have not set a spacer image for this site, the Choose Spacer Image dialog box
appears.
2.
If the Choose Spacer Image dialog box appears, select an option, then click OK.
For more information, click the Help button in the dialog box.
A wavy line appears at the top or bottom of the autostretch column. Double bars appear at
the tops or bottoms of columns that contain spacer images.
To set a column to a fixed width, do one of the following:
■
Click the column header menu, and then select Make Column Fixed Width.
Make Column Fixed Width specifies a width for the column (in the code) that matches
the current visual width of the column.
■
Select a cell in the column by clicking an edge of the cell, then click Fixed and type a
numeric value in the Property inspector.
If you enter a numeric value that is less than the width of the column’s content,
Dreamweaver automatically sets the width to match the width of the content.
The width of the column appears at the top or bottom of the column.
Related topics
“Making column widths in code consistent with visual widths” on page 272
■
Using spacer images
To require a column to be a certain minimum width, you can insert a spacer image into that
column. For more information, see “Spacer images” on page 261. You can remove spacer
images from a single column or from the entire table.
The first time you insert a spacer image, you set up a spacer image for the site. You can set
preferences for spacer images (see “Setting preferences for Layout mode” on page 273).
Setting column width
271
To insert a spacer image into a column:
1.
Click the column header menu, then select Add Spacer Image.
If you have not set a spacer image for this site, the Choose Spacer Image dialog box
appears.
2.
If the Choose Spacer Image dialog box appears, select an option, then click OK.
For more information, click the Help button in the dialog box.
Dreamweaver inserts the spacer image into the column. The image is not visible, but the
column might shift slightly and a double bar appears at the top or bottom of the column to
indicate that it contains a spacer image.
To remove a spacer image from a single column:
■
Click the column header menu, then select Remove Spacer Image.
Dreamweaver removes the spacer image. The column might shift.
To remove all spacer images from a table, do one of the following:
■
Click the table header menu, then select Remove All Spacer Images.
■
Select the table, then click the Remove All Spacers button in the Property inspector
(Window > Properties).
The layout of your whole table might shift. If there is no content in some columns, the
columns might disappear completely from the Design view.
Making column widths in code consistent with visual
widths
If you see two numbers for a column’s width, then the column width set in the HTML code
does not match the column’s apparent width on the screen. You can make the width specified
in the code match the visual width. For more information, see “About viewing table and cell
widths in Layout mode” on page 259.
272
Chapter 9: Laying Out Pages in Layout Mode
To make widths consistent:
1.
Click in a cell.
2.
Do one of the following:
■
■
Click the table header menu, and then select Make All Widths Consistent.
Select the table, then click the Remove All Spacers button in the Property inspector
(Window > Properties).
Dreamweaver resets the width specified in the code to match the visual width.
Related topics
■
“Making a column autostretch or fixed-width” on page 270
■
“Using spacer images” on page 271
Setting preferences for Layout mode
You can specify preferences for spacer image files and for the colors that Dreamweaver uses to
draw layout tables and layout cells.
To set Layout mode preferences:
1.
Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh).
The Preferences dialog box appears.
2.
Select Layout Mode from the category list on the left.
3.
Make changes as necessary.
For more information, click the Help button in the dialog box.
4.
Click OK.
Setting preferences for Layout mode
273
274
Chapter 9: Laying Out Pages in Layout Mode
10
CHAPTER 10
Using Frames
Frames provide a way to divide a browser window into multiple regions, each of which can
display a different HTML document. In the most common use of frames, one frame displays
a document containing navigation controls, while another frame displays a document with
content.
N O TE
A detailed discussion of all the ways to design and use frames, and the code required for
hand-coding them, is beyond the scope of this chapter. If you need detailed information
about the code used in advanced frame layouts, see a book about frames and framesets.
This chapter contains the following sections:
About frames and framesets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276
Working with framesets in the Document window . . . . . . . . . . . . . . . . . . . . . . . . . . 280
Creating frames and framesets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 281
Selecting frames and framesets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .284
Opening a document in a frame . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287
Saving frame and frameset files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287
Viewing and setting frame properties and attributes . . . . . . . . . . . . . . . . . . . . . . . . .288
Viewing and setting frameset properties. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 290
Controlling frame content with links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291
Handling browsers that can’t display frames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .292
Using JavaScript behaviors with frames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .293
275
About frames and framesets
A frame is a region in a browser window that can display an HTML document independent of
what’s being displayed in the rest of the browser window.
A frameset is an HTML file that defines the layout and properties of a set of frames, including
the number of frames, the size and placement of the frames, and the URL of the page that
initially appears in each frame. The frameset file itself doesn’t contain HTML content that
displays in a browser, except in the noframes section (see “Handling browsers that can’t
display frames” on page 292); the frameset file simply provides information to the browser
about how a set of frames should look and what documents should appear in them.
Related topics
■
“Working with framesets in the Document window” on page 280
■
“Creating frames and framesets” on page 281
Understanding how frames and framesets work
A frame is a region in a browser window that can display an HTML document independent of
what’s being displayed in the rest of the browser window. A frameset is an HTML file that
defines the layout and properties of a set of frames.
To view a set of frames in a browser, enter the URL of the frameset file; the browser then
opens the relevant documents to display in the frames. The frameset file for a site is often
named index.html, so that it displays by default if a visitor doesn’t specify a filename.
276
Chapter 10: Using Frames
The following example shows a frame layout consisting of three frames: one narrow frame on
the side that contains a navigation bar, one frame that runs along the top, containing the logo
and title of the website, and one large frame that takes up the rest of the page and contains the
main content. Each of these frames displays a separate HTML document.
In this example, the document displayed in the top frame never changes as the visitor
navigates the site. The side frame navigation bar contains links; clicking one of these links
changes the content of the main content frame, but the contents of the side frame itself
remain static. The main content frame on the right displays the appropriate document for
whichever link the visitor clicks on the left.
Note that a frame is not a file. It’s easy to think of the document that currently appears in a
frame as an integral part of the frame, but the document isn’t actually part of the frame. The
frame is a container that holds the document—any frame can display any document.
NO T E
The word page can be used loosely to refer either to a single HTML document or to the
entire contents of a browser window at a given moment, even if several HTML
documents appear at once. The phrase “a page that uses frames,” for example, usually
refers to a set of frames and the documents that initially appear in those frames.
A site that appears in a browser as a single page comprising three frames actually consists of at
least four separate HTML documents: the frameset file, plus the three documents containing
the content that initially appears in the frames. When you design a page using framesets in
Dreamweaver, you must save each of these four files in order for the page to work properly in
the browser.
Related topics
■
“Understanding nested framesets” on page 279
About frames and framesets
277
Deciding whether to use frames
The most common use of frames is for navigation. A set of frames often includes one frame
containing a navigation bar and another frame to display the main content pages.
However, designing with frames can be confusing, and in many cases you can create a web
page without frames that accomplishes many of the same goals as a set of frames. For example,
if you want a navigation bar to appear on the left side of your page, you can either replace
your page with a set of frames, or just include the navigation bar on every page in your site.
(Dreamweaver helps you create multiple pages that use the same layout; see “About
Dreamweaver templates” on page 296.) The following image shows a page design with a
framelike layout that doesn’t use frames.
Many professional web designers prefer not to use frames, and many people who browse the
web dislike frames. In most cases this dislike is due to having encountered sites that use frames
poorly or unnecessarily (such as a frameset that reloads the contents of the navigation frames
every time the visitor clicks a navigation button). When frames are used well (such as when
they’re used to keep navigation controls static in one frame while allowing the contents of
another frame to change), they can be very useful for some sites.
Not all browsers provide good frame support, and frames may be difficult for visitors with
disabilities to navigate, so if you do use frames, always provide a noframes section in your
frameset, for visitors who can’t view them (see “Handling browsers that can’t display frames”
on page 292). You may also want to provide an explicit link to a frameless version of the site,
for visitors whose browsers support frames but who don’t like using frames.
Advantages to using frames include the following:
■
278
A visitor’s browser doesn’t need to reload the navigation-related graphics for every page.
Chapter 10: Using Frames
■
Each frame has its own scroll bar (if the content is too large to fit in a window), so a visitor
can scroll the frames independently.
For example, a visitor who scrolls down to the bottom of a long page of content in a frame
doesn’t need to scroll back up to the top to use the navigation bar if the navigation bar is
in a different frame.
Disadvantages to using frames include the following:
■
Precise graphical alignment of elements in different frames can be difficult.
■
Testing the navigation can be time-consuming.
■
The URLs of the individual framed pages don’t appear in browsers, so it can be difficult
for a visitor to bookmark a specific page (unless you provide server code that enables them
to load a framed version of a particular page).
Related topics
■
“Understanding how frames and framesets work” on page 276
■
“Handling browsers that can’t display frames” on page 292
Understanding nested framesets
A frameset inside another frameset is called a nested frameset. A single frameset file can
contain multiple nested framesets. Most web pages that use frames are actually using nested
frames, and most of the predefined framesets in Dreamweaver also use nesting. Any set of
frames in which there are different numbers of frames in different rows or columns requires a
nested frameset.
For example, the most common frame layout has one frame in the top row (where the
company’s logo appears) and two frames in the bottom row (a navigation frame and a content
frame). This layout requires a nested frameset: a two-row frameset, with a two-column
frameset nested in the second row.
Main frameset
Menu frame and
content frame
are nested within
the main
frameset.
About frames and framesets
279
Dreamweaver takes care of nesting framesets as needed; if you use the frame-splitting tools in
Dreamweaver, you don’t need to worry about the details of which frames are nested and
which aren’t. For more information about the frame-splitting tools, see “Designing a
frameset” on page 283.
There are two ways to nest framesets in HTML: the inner frameset can be defined either in
the same file as the outer frameset, or in a separate file of its own. Each predefined frameset in
Dreamweaver defines all of its framesets in the same file.
Both kinds of nesting produce the same visual results; it’s not easy to tell, without looking at
the code, which kind of nesting is being used. The most likely situation in which an external
frameset file would be used in Dreamweaver is when you use the Open in Frame command to
open a frameset file inside a frame; doing this may result in problems with setting targets for
links. It’s generally simplest to keep all framesets defined in a single file.
Related topics
■
“Understanding how frames and framesets work” on page 276
■
“Deciding whether to use frames” on page 278
Working with framesets in the Document
window
Dreamweaver enables you to view and edit all of the documents associated with a set of frames
in one Document window. This approach enables you to see approximately how the framed
pages will appear in a browser as you edit them. However, some aspects of this approach can
be confusing until you get used to them.
In particular, remember that each frame displays a separate HTML document. Even if the
documents are empty, you must save them all before you can preview them (because the
frameset can be accurately previewed only if it contains the URL of a document to display in
each frame).
To ensure that your frameset appears correctly in browsers:
1.
Create your frameset and specify a document to appear in each frame (see “Creating frames
and framesets” on page 281).
2.
Save every file that’s going to appear in a frame (see “Saving frame and frameset files”
on page 287).
Remember that each frame displays a separate HTML document, and you must save each
document, along with the frameset file.
280
Chapter 10: Using Frames
3.
Set the properties for each frame and for the frameset (see “Viewing and setting frame
properties and attributes” on page 288 and “Viewing and setting frameset properties”
on page 290).
4.
Make sure to set the Target property in the Property inspector for all your links so that the
linked content appears in the correct area (see “Controlling frame content with links”
on page 291).
This includes naming each frame, setting scrolling and non-scrolling options, and more.
Creating frames and framesets
There are two ways to create a frameset in Dreamweaver: You can select from several
predefined framesets or you can design it yourself.
Choosing a predefined frameset automatically sets up all the framesets and frames needed to
create the layout and is the easiest way to create a frames-based layout quickly. You can insert
a predefined frameset only in the Document window’s Design view.
Using a predefined frameset
Predefined framesets make it easy for you to select the type of frameset you want to create. If
you prefer to design your own frameset, see “Designing a frameset” on page 283.
There are two ways to create a predefined frameset:
■
The Insert bar enables you to create a frameset and display the current document in one of
the new frames.
■
The New Document dialog creates a new empty frameset.
To create a predefined frameset and display an existing document in a frame:
1.
Place the insertion point in a document.
2.
Do one of the following:
■
■
Select a predefined frameset from the Insert > HTML > Frames submenu.
In the Layout category of the Insert bar, click the drop down arrow on the Frames
button, then select a predefined frameset.
Creating frames and framesets
281
The frameset icons provide a visual representation of each frameset as applied to the
current document. The blue area of a frameset icon represents the current document, and
the white areas represent frames that will display other documents.
NO TE
When you apply a frameset, Dreamweaver automatically sets up the frameset to
display the current document (the document in which the insertion point is located) in
one of the frames.
The Frame Tag Accessibility Attributes dialog box appears, if you have set up
Dreamweaver to prompt you for frame accessibility attributes (see “Optimizing the
workspace for accessible page design” on page 69).
3.
If the Frame Tag Accessibility Attributes dialog box appears, complete the dialog box for
each frame, then click OK.
For more information, click the Help button in the dialog box.
NO T E
If you click Cancel, the frameset appears in the document, but Dreamweaver does
not associate accessibility tags or attributes with it.
To edit frame tag accessibility attributes, see “Viewing and setting frame properties and
attributes” on page 288.
To create a new empty predefined frameset:
1.
Select File > New.
2.
In the New Document dialog box, select the Framesets category.
3.
Select a frameset from the Framesets list.
282
Chapter 10: Using Frames
4.
Click Create.
The frameset appears in your document and the Frame Tag Accessibility Attributes dialog
box appears, if you have activated the dialog box in Preferences (see “Optimizing the
workspace for accessible page design” on page 69).
5.
If the Frame Tag Accessibility Attributes dialog box appears, complete the dialog box for
each frame, then click OK.
For more information, click the Help button in the dialog box.
NO T E
If you press Cancel, the frameset appears in the document, but Dreamweaver does
not associate accessibility tags or attributes with it.
To edit frame tag accessibility attributes, see “Viewing and setting frame properties and
attributes” on page 288.
Designing a frameset
You can design your own frameset in Dreamweaver by adding “splitters” to the window. If you
prefer to use a predefined frameset, see “Using a predefined frameset” on page 281.
TI P
Before creating a frameset or working with frames, make the frame borders visible in the
Document window’s Design view by selecting View >Visual Aids > Frame Borders.
To create a frameset:
■
Select Modify > Frameset, then select a splitting item (such as Split Frame Left or Split
Frame Right) from the submenu.
Dreamweaver splits the window into frames. If you had an existing document open, it
appears in one of the frames.
To split a frame into smaller frames, do one of the following:
■
To split the frame where the insertion point is, select a splitting item from the Modify >
Frameset submenu.
■
To split a frame or set of frames vertically or horizontally, drag a frame border from the
edge of the Design view into the middle of the Design view.
■
To split a frame using a frame border that isn’t at the edge of the Design view, Alt-drag
(Windows) or Option-drag (Macintosh) a frame border.
Creating frames and framesets
283
■
To divide a frame into four frames, drag a frame border from one of the corners of the
Design view into the middle of a frame.
TIP
To create three frames, start with two frames, then split one of them. It’s not easy to
merge two adjacent frames without editing the frameset code, so turning four frames
into three frames is harder than turning two frames into three frames.
To delete a frame:
■
Drag a frame border off the page or to a border of the parent frame.
If there’s unsaved content in a document in a frame that’s being removed, Dreamweaver
prompts you to save the document.
NO TE
You can’t remove a frameset entirely by dragging borders. To remove a frameset,
close the Document window that displays it. If the frameset file has been saved,
delete the file.
To resize a frame, do one of the following:
■
To set approximate sizes for frames, drag frame borders in the Document window’s
Design view.
■
To specify exact sizes, and to specify how much space the browser allocates to a row or
column of frames when the browser window size doesn’t allow the frames to display at full
size, use the Property inspector (see “Viewing and setting frameset properties”
on page 290).
Selecting frames and framesets
To make changes to the properties of a frame or frameset, begin by selecting the frame or
frameset you want to change. You can select a frame or frameset either in the Document
window or by using the Frames panel.
284
Chapter 10: Using Frames
Selecting frames and framesets in the Frames panel
The Frames panel provides a visual representation of the frames within a frameset. It shows
the hierarchy of the frameset structure in a way that may not be apparent in the Document
window. In the Frames panel, a very thick border surrounds each frameset; each frame is
surrounded by a thin gray line and is identified by a frame name.
To display the Frames panel:
■
Select Window > Frames.
To select a frame in the Frames panel:
■
Click the frame in the Frames panel.
A selection outline appears around the frame in both the Frames panel and the Document
window’s Design view.
To select a frameset in the Frames panel:
■
Click the border that surrounds the frameset in the Frames panel.
A selection outline appears around the frameset in both the Frames panel and the
Document window’s Design view.
Related topics
■
“Viewing and setting frame properties and attributes” on page 288
■
“Viewing and setting frameset properties” on page 290
Selecting frames and framesets
285
Selecting frames and framesets in the Document
window
In the Document window’s Design view, when a frame is selected, its borders are outlined
with a dotted line; when a frameset is selected, all the borders of the frames within the
frameset are outlined with a light dotted line.
NO T E
Placing the insertion point in a document that’s displayed in a frame is not the same as
selecting a frame. There are various operations (such as setting frame properties) for
which you must select a frame.
To select a frame in the Document window:
■
Alt-click (Windows) or Option-Shift-click (Macintosh) inside a frame in Design view.
A selection outline appears around the frame.
To select a frameset in the Document window:
■
Click one of the frameset’s internal frame borders in Design view. (Frame borders must be
visible to do this; select View >Visual Aids > Frame Borders to make frame borders visible
if they aren’t.)
A selection outline appears around the frameset.
N OT E
It’s generally easier to select framesets in the Frames panel than in the Document
window. For more information, see “Selecting frames and framesets in the Frames
panel” on page 285.
To select a different frame or frameset, do one of the following:
■
To select the next or previous frame or frameset at the same hierarchical level as the
current selection, press Alt+Left Arrow or Alt+Right Arrow (Windows) or
Command+Left Arrow or Command+Right Arrow (Macintosh). Using these keys, you
can cycle through frames and framesets in the order in which they’re defined in the
frameset file.
■
To select the parent frameset (the frameset that contains the current selection), press
Alt+Up Arrow (Windows) or Command+Up Arrow (Macintosh).
■
To select the first child frame or frameset of the currently selected frameset (that is, first in
the order in which they’re defined in the frameset file), press Alt+Down Arrow (Windows)
or Command+Down Arrow (Macintosh).
286
Chapter 10: Using Frames
Related topics
■
“Selecting frames and framesets in the Frames panel” on page 285
■
“Viewing and setting frame properties and attributes” on page 288
■
“Viewing and setting frameset properties” on page 290
Opening a document in a frame
You can specify the initial content of a frame by either inserting new content into an empty
document in a frame, or opening an existing document in a frame.
To open an existing document in a frame:
1.
Place the insertion point in a frame.
2.
Select File > Open in Frame.
3.
Select a document to open in the frame, then click OK (Windows) or Choose (Macintosh).
The document appears in the frame.
4.
(Optional) To make this document the default document to display in the frame when the
frameset is opened in a browser, save the frameset.
Saving frame and frameset files
Before you can preview a frameset in a browser, you must save the frameset file and all of
the documents that will display in the frames. You can save each frameset file and
framed document individually, or you can save the frameset file and all documents appearing
in frames at once.
N OT E
When you use visual tools in Dreamweaver to create a set of frames, each new
document that appears in a frame is given a default filename. For example, the first
frameset file is named UntitledFrameset-1, while the first document in a frame is named
UntitledFrame-1.
To save a frameset file:
1.
Select the frameset in the Frames panel or the Document window (see “Selecting frames
and framesets” on page 284).
2.
Do one of the following:
■
To save the frameset file, select File > Save Frameset.
■
To save the frameset file as a new file, select File > Save Frameset As.
If the frameset file has not previously been saved, these two commands are equivalent.
Saving frame and frameset files
287
To save a document that appears in a frame:
■
Click in the frame, then select File > Save Frame or File > Save Frame As.
To save all files associated with a set of frames:
■
Select File > Save All Frames.
This saves all open documents in the frameset, including the frameset file and all framed
documents. If the frameset file has not yet been saved, a heavy border appears around the
frameset in the Design view, and a dialog box enables you to select a filename. For each
frame that hasn’t yet been saved, a heavy border appears around the frame and a dialog box
enables you to select a filename.
N OT E
If you used File > Open in Frame to open a document in a frame, then when you save
the frameset, the document you opened in the frame becomes the default document
to be displayed in that frame. If you don’t want that document to be the default, don’t
save the frameset file.
Viewing and setting frame properties and
attributes
Use the Property inspector to view and set most frame properties.
You may also want to set some frame attributes, such as the title attribute (which is not the
same as the name attribute), to improve accessibility. You can enable the accessibility
authoring option for frames to set attributes when you create frames (see “Optimizing the
workspace for accessible page design” on page 69), or you can set attributes after you insert a
frame. To edit accessibility attributes for a frame, you can use the Tag inspector to edit the
HTML code directly.
288
Chapter 10: Using Frames
To set properties for a frameset, see “Viewing and setting frameset properties” on page 290.
To view or set frame properties:
1.
Select a frame by doing one of the following:
■
■
Alt-click (Windows) or Shift-Option-click (Macintosh) a frame in the Document
window’s Design view.
Click a frame in the Frames panel (Window > Frames).
2.
In the Property inspector (Window > Properties), click the expander arrow in the lowerright corner to see all of the frame properties.
3.
Make changes as necessary.
For more information, click the Help button in the Property inspector.
TIP
To change the background color of a frame, set the background color of the
document in the frame in page properties.
To set accessibility values for a frame:
1.
In the Frames panel (Window > Frames), select a frame by placing the insertion point in
one of the frames.
2.
Select Modify > Edit Tag.
The Tag editor appears.
3.
Select Style Sheet/Accessibility from the category list on the left.
4.
Enter values as desired.
5.
Click OK.
To edit accessibility values for a frame:
1.
Display Code view or Code and Design views for your document, if you’re currently in
Design view.
2.
In the Frames panel (Window > Frames), select a frame by placing the insertion point in
one of the frames.
Dreamweaver highlights the frame tag in the code.
3.
Right-click (Windows) or Control-click (Macintosh) in the code, then select Edit Tag.
The tag editor appears.
Viewing and setting frame properties and attributes
289
4.
Make changes as necessary.
5.
Click OK.
To change the background color of a document in a frame:
1.
Place the insertion point in the frame.
2.
Select Modify > Page Properties.
The Page Properties dialog box appears.
3.
Click the Background color pop-up menu, then select a color.
4.
Click OK.
Related topics
■
“Creating frames and framesets” on page 281
Viewing and setting frameset properties
Use the Property inspector to view and set most frameset properties. To set properties for a
frame, see “Viewing and setting frame properties and attributes” on page 288.
To view or set frameset properties:
1.
Select a frameset by doing one of the following:
■
■
Click a border between two frames in the frameset in the Document window’s Design
view.
Click the border that surrounds a frameset in the Frames panel (Window > Frames).
2.
In the Property inspector (Window > Properties), click the expander arrow in the lowerright corner to see all of the frameset properties.
3.
Make changes as necessary.
For more information, click the Help button in the Property inspector.
290
Chapter 10: Using Frames
To set a title for a frameset document:
1.
Select a frameset by doing one of the following:
■
■
2.
Click a border between two frames in the frameset in the Document window’s Design
view.
Click the border that surrounds a frameset in the Frames panel (Window > Frames).
In the Title field of the Document toolbar, type a name for the frameset document.
When a visitor views the frameset in a browser, the title appears in the browser’s title bar.
Related topics
■
“Creating frames and framesets” on page 281
Controlling frame content with links
To use a link in one frame to open a document in another frame, you must set a target for the
link. The target attribute of a link specifies the frame or window in which the linked
content opens.
For example, if your navigation bar is in the left frame, and you want the linked material to
appear in the main content frame on the right, you must specify the name of the main
content frame as the target for each of the navigation bar links. When a visitor clicks a
navigation link, the specified content opens in the main frame.
To target a frame:
1.
In Design view, select text or an object.
2.
In the Link field in the Property inspector (Window > Properties), do one of the following:
3.
■
Click the folder icon, then select the file to link to.
■
Drag the Point to File icon to the Files panel to select the file to link to.
In the Target pop-up menu in the Property inspector, select the frame or window in which
the linked document should appear:
■
■
_blank opens the linked document in a new browser window, leaving the current
window untouched.
_parent opens the linked document in the parent frameset of the frame the link
appears in, replacing the entire frameset.
■
_self
■
_top
opens the link in the current frame, replacing the content in that frame.
opens the linked document in the current browser window, replacing all frames.
Controlling frame content with links
291
Frame names also appear in this menu. Select a named frame to open the linked
document in that frame.
N OT E
Frame names appear only when you’re editing a document within a frameset. When
you edit a document in its own Document window, frame names do not appear in the
Target pop-up menu. If you’re editing a document outside of the frameset, you can
type the target frame’s name in the Target text box.
TIP
If you’re linking to a page outside of your site, always use target="_top" or
target="_blank" to ensure that the page doesn’t appear to be part of your site.
Handling browsers that can’t display
frames
Dreamweaver lets you specify content to display in text-based browsers and in older graphical
browsers that do not support frames. This content is stored in the frameset file, wrapped in a
noframes tag. When a browser that doesn’t support frames loads the frameset file, the browser
displays only the content enclosed by the noframes tag.
NO TE
Content in the noframes area should be more than just a note saying “You should
upgrade to a browser that can handle frames.” Some people have good reasons for
using a system that doesn’t allow them to view frames. Try to make your content as
accessible as possible to such visitors.
To provide content for browsers that don’t support frames:
1.
Select Modify > Frameset > Edit NoFrames Content.
Dreamweaver clears the Design view, and the words “NoFrames Content” appear at the
top of the Design view.
2.
To create the NoFrames content, do one of the following:
■
■
3.
In the Document window, type or insert the content just as you would for an
ordinary document.
Select Window > Code Inspector, place the insertion point between the body tags that
appear inside the noframes tags, then type the HTML code for the content.
Select Modify > Frameset > Edit NoFrames Content again to return to the normal view of
the frameset document.
292
Chapter 10: Using Frames
Using JavaScript behaviors with frames
There are several JavaScript behaviors and navigation-related commands that are particularly
appropriate for use with frames:
Set Text of Frame replaces the content and formatting of a given frame with the content you
specify. The content can include any valid HTML. Use this action to dynamically display
information in a frame. (See “Set Text of Frame” on page 515.)
Go to URL
opens a new page in the current window or in the specified frame. This action is
particularly useful for changing the contents of two or more frames with one click. (See “Go
to URL” on page 509.)
Insert Navigation Bar adds a navigation bar to a page; after inserting a navigation bar, you
can attach behaviors to its images and set which image displays based on a visitor’s actions. For
example, you may want to show a button image in its Up or Down state to let a visitor know
which page of a site is being viewed. (See “Inserting a navigation bar” on page 444.)
Insert Jump Menu
sets up a menu list of links that open files in a browser window when
clicked. You can also target a particular window or frame in which the document opens. (See
“Inserting jump menus” on page 441.)
Using JavaScript behaviors with frames
293
294
Chapter 10: Using Frames
11
CHAPTER 11
Managing Templates
A Macromedia Dreamweaver 8 template is a special type of document that you use to design a
“fixed” page layout; you can then create documents based on the template that inherit the
page layout of the template. As you design a template, you specify which areas of documents
based on that template users can edit.
N O TE
Templates enable you to control a large design area and reuse complete layouts. If you
want to reuse individual design elements, such as a site’s copyright information or a logo,
you can create library items. For more information, see Chapter 5, “Managing Site
Assets and Libraries,” on page 159.
The chapter contains the following sections:
About Dreamweaver templates. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .296
Creating a Dreamweaver template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 308
Creating templates for a Contribute site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 312
Creating editable regions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314
Creating repeating regions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 317
Using optional regions. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 320
Defining editable tag attributes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .323
Creating a nested template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .324
Editing and updating templates. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .326
Managing templates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .329
Exporting and importing template XML content . . . . . . . . . . . . . . . . . . . . . . . . . . . . 330
Exporting a site without template markup. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .332
Applying or removing a template from an existing document . . . . . . . . . . . . . . . . .332
Editing content in a template-based document. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .334
295
About Dreamweaver templates
A template author designs a “fixed” page layout in a template. The author then creates regions
in the template that are editable in documents based on that template; if the author does not
define a region as editable, then template users cannot edit content in that area. Templates
enable template authors to control which page elements template users—such as writers,
graphic artists, or other web developers—can edit. There are several types of template regions
the template author can include in a document.
One of the most powerful uses of templates is the ability to update multiple pages at once. A
document that is created from a template remains connected to that template (unless you
detach the document later). You can modify a template and immediately update the design in
all documents based on it.
Related topics
“Creating a Dreamweaver template” on page 308
■
Types of template regions
Dreamweaver automatically locks most regions of a document when you save the document
as a template. As a template author you specify which regions of a template-based document
will be editable by inserting editable regions or editable parameters in the template.
As you create the template, you can make changes to both editable and locked regions. In a
document based on the template, however, a template user can make changes only in the
editable regions; the locked regions can’t be modified.
There are four types of template regions:
An editable region is an unlocked region in a template-based document—a section a
template user can edit. A template author can specify any area of a template as editable. For a
template to be effective, it should contain at least one editable region; otherwise, pages based
on the template can’t be edited. For information about inserting an editable region, see
“Inserting an editable region” on page 315.
A repeating region is a section of the layout in a document that is set to repeat. For example,
you can set a table row to repeat. Usually repeating sections are editable so that the template
user can edit the content in the repeating element, while the design itself is under the control
of the template author. The template user uses repeat region control options to add or delete
copies of the repeated region in a document based on the template as necessary.
296
Chapter 11: Managing Templates
There are two types of repeating regions you can insert in a template: repeating region and
repeating table. For information about inserting a repeating region in a template, see
“Creating a repeating region in a template” on page 318. For information about creating a
repeating table, see “Inserting a repeating table” on page 319. For information about working
with a repeating region in a template-based page, see “Adding, deleting, and changing the
order of a repeating region entry” on page 336.
An optional region is
a section of a template that you specify as optional, to hold content
such as optional text or an image that may or may not appear in a document based on the
template. In the template-based page, the template user usually controls whether the content
is displayed. For information about setting optional regions in a template, see “Inserting an
optional region” on page 321. For information about editing optional regions in a templatebased page, see “Modifying template properties” on page 334.
An editable tag attribute lets you unlock a tag attribute in a template, so the attribute can be
edited in a template-based page. For example, you can “lock” which image appears in the
document but let the template user set the alignment to left, right, or center. For information
about setting editable tag attributes, see “Specifying editable tag attributes in a template”
on page 323. For information about editing the tags in a template-based page, see “Modifying
template properties” on page 334.
Related topics
“Creating editable regions” on page 314
■
■
“Creating repeating regions” on page 317
■
“Using optional regions” on page 320
■
“Defining editable tag attributes” on page 323
Templates and template-based documents in Design
and Code views
You can view templates and template-based documents in Design or Code view.
Viewing templates in Design view
In templates, editable regions appear in the Document window’s Design view surrounded by
rectangular outlines in a preset highlight color. A small tab appears at the upper-left corner of
each region, showing the name of the region.
NO T E
For information about setting highlighting color preferences, see “Setting highlighting
preferences for template regions” on page 311.
About Dreamweaver templates
297
You can identify a template file by looking at the title bar in the Document window. The title
bar for a template file contains the word <> in the title bar, and the filename
extension for the file is .dwt.
Related topics
■
“Viewing template-based documents in Design view” on page 299
■
“Viewing template-based documents in Code view” on page 300
Viewing templates in Code view
In Code view, you can make changes to both editable and locked HTML source code in
a template.
TIP
You can use code color preferences to set your own color scheme so you can easily
distinguish template regions when you view a document in Code view (see “Customizing
code coloring preferences for a template” on page 310).
Editable content regions are marked in HTML with the following comments:
Everything between these comments will be editable in documents based on the template.
The HTML source code for an editable region might look like this:
Name
Address
Telephone Number
298
Chapter 11: Managing Templates
Enter name
Enter Address
Enter Telephone
NO TE
Be careful when you edit template code in Code view that you don’t change any of the
template-related comment tags that Dreamweaver relies on.
Related topics
■
“Viewing templates in Design view” on page 297
■
“Viewing template-based documents in Code view” on page 300
Viewing template-based documents in Design view
In a document based on a template (a template-based document), editable regions appear in
the Document window’s Design view surrounded by rectangular outlines in a preset highlight
color. A small tab appears at the upper-left corner of each region, showing the name of the
region.
N OT E
For information about setting highlighting color preferences, see “Setting highlighting
preferences for template regions” on page 311.
In addition to the editable-region outlines, the entire page is surrounded by a differentcolored outline, with a tab at the upper right giving the name of the template that the
document is based on. This highlighted rectangle is there to remind you that the document is
based on a template and that you can’t change anything outside the editable regions.
About Dreamweaver templates
299
Related topics
■
“Viewing templates in Design view” on page 297
■
“Viewing templates in Code view” on page 298
Viewing template-based documents in Code view
In Code view, editable regions of a document derived from a template appear in a different
color than code in the non-editable regions. You can make changes only to code in the
editable regions or editable parameters; Dreamweaver prevents you from typing in locked
regions.
Editable content is marked in HTML with the following Dreamweaver comments:
Everything between these comments is editable in a template-based document. The HTML
source code for an editable region might look like this:
Name
Address
Telephone Number
Enter name
Enter Address
Enter Telephone
The default color for non-editable text is gray; you can select a different color for the editable
and non-editable regions in the Preferences dialog box. For more information, see
“Customizing code coloring preferences for a template” on page 310.
Related topics
■
“Viewing templates in Design view” on page 297
■
“Viewing templates in Code view” on page 298
■
“Viewing template-based documents in Design view” on page 299
300
Chapter 11: Managing Templates
Template tag syntax
This section describes the general syntax rules and lists the HTML comment tags
Dreamweaver uses to specify regions in templates and template-based documents.
Dreamweaver automatically inserts template tags in the code when you insert a template
object.
N OT E
Dreamweaver uses HTML comment tags to define template regions, so template-based
documents are still valid HTML files.
General syntax rules
Following are general syntax rules:
■
Wherever a space appears, you can substitute any amount of white space (spaces, tabs, line
breaks). The white space is mandatory except at the very beginning or end of a comment.
■
Attributes can be given in any order. For example, in a TemplateParam, you can specify
the type before the name.
■
Comment and attribute names are case sensitive.
■
All attributes must be in quotation marks. Single or double quotes can be used.
For information about checking your syntax, see “Checking template syntax” on page 329.
Related topics
■
“Instance tags” on page 302
Template tags
Dreamweaver uses the following template tags:
About Dreamweaver templates
301
(equivalent to @@...@@)
Related topics
■
“General syntax rules” on page 301
Instance tags
Dreamweaver uses the following instance tags:
InstanceEnd -->
InstanceBeginEditable name="..." -->
InstanceEndEditable -->
InstanceParam name="..." type="..." value="..." passthrough="..." -->
InstanceBeginRepeat name="..." -->
InstanceEndRepeat -->
InstanceBeginRepeatEntry -->
InstanceEndRepeatEntry -->
Related topics
■
“General syntax rules” on page 301
■
“Template tags” on page 301
Links in templates
To create a link in a template file, use the folder icon or the Point-to-File icon in the Property
inspector; don’t type in the name of the file to link to. If you type the name, the link might
not work. This section explains how Dreamweaver handles links in templates.
302
Chapter 11: Managing Templates
When you create a template file from an existing page, then save that page as a template,
Dreamweaver updates the links so they point to the same files as before. Because templates are
saved in the Templates folder, the path for a document-relative link changes when you save
the page as a template. In Dreamweaver, when you create a new document based on that
template and save the new document, all the document-relative links are updated to continue
to point to the correct files.
When you add a new document-relative link to a template file, however, if you type the path
into the link text box in the Property inspector, it’s easy to enter the wrong path name. The
correct path is the path from the Templates folder to the linked document, not the path from
the template-based document’s folder to the linked document.
For information about linking using the Point-to-File icon, see “Linking files and documents”
on page 427.
NO TE
In some cases, (such as file paths in event handlers in templates) you can’t use the folder
icon or the Point-to-File icon; in those cases, you must enter the correct path name.
Nested templates
A nested template is a template whose design and editable regions are based on another
template. To create a nested template, you must first save the original or base template, then
create a new document based on the template, and then save that document as a template. In
the new template, you can further define editable regions in areas originally defined as
editable from the base template.
Nested templates are useful for controlling content in pages of a site that share many design
elements, but have a few variations between pages. For example, a base template might
contain broader design areas and be usable by many content contributors for a site, while a
nested template might further define the editable regions in pages for a specific section in a
site.
Editable regions in a base template are passed through to the nested template, and remain
editable in pages created from a nested template unless new template regions are inserted in
these regions.
Changes to a base template are automatically updated in templates based on the base
template, and in all template-based documents that are based on the main and nested
templates.
About Dreamweaver templates
303
In the following example, the template contains three editable regions, named Body, Nav Bar,
and Footer:
To create a nested template, we created a new document based on the template, then saved the
document as a template and named it TrioNested. In the nested template, we added two
editable regions, with content, in the editable region named Body.
304
Chapter 11: Managing Templates
When you add a new editable region in an editable region passed through to the nested
template, the highlighting color of the editable region changes to orange. Content you add in
an editable region, such as the graphic in the editableColumn, is no longer editable in
documents based on the nested template. The blue highlighted editable areas, whether added
in the nested template or passed through from the base template, remain editable in
documents based on the nested template. Template regions you do not insert an editable
region in, pass through to template-based documents as editable regions.
Related topics
“Creating a nested template” on page 324
■
Server scripts in templates and template-based
documents
Some server scripts are inserted at the very beginning or end of the document (before the
tag or after the tag). Such scripts require special treatment in templates and
template-based documents. Normally, if you make changes to script code before the
tag or after the tag in a template, the changes are not copied to documents based on
that template. This can cause server errors if other server scripts, within the main body of the
template, depended on the scripts that are not copied. As a result, Dreamweaver warns you if
you change scripts before the tag or after the tag in a template.
To avoid this problem, you can insert the following code in the head section of the template:
When this code is in a template, changes to scripts before the tag or after the
tag are copied to documents based on that template. However, you will no longer be able to
edit those scripts in documents based on the template. Thus, you can choose to be able to edit
these scripts in the template, or in documents based on the template, but not both.
Template parameters
Template parameters indicate values for controlling content in documents based on a
template. You can use template parameters with optional regions or editable tag attributes, or
to set values you want to pass to an attached document. For each parameter, you select a
name, a data type, and a default value. Each parameter must have a unique name; each name
is case sensitive.
About Dreamweaver templates
305
Template parameters are passed to the document as instance parameters. In most cases, a
template user can edit the parameter’s default value to customize what appears in a templatebased document. In other cases, the template author might determine what appears in the
document, based on the value of a template expression.
Related topics
■
“Using optional regions” on page 320
■
“Defining editable tag attributes” on page 323
Template expressions
Template expressions are statements you use to compute or evaluate a value.
You can use an expression to store a value and display it in a document. For example, an
expression can be as simple as the value of a parameter, such as @@(Param)@@, or complex
enough to compute values which alternate the background color in a table row, such as
@@((_index & 1) ? red : blue)@@.
You can also define expressions for if and multiple-if conditions (for an example, see “The
Multiple If condition in template code” on page 308). When an expression is used in a
conditional statement, Dreamweaver evaluates it as true or false. If the condition is true,
the optional region appears in the template-based document; if it is false, it doesn’t appear.
You can define expressions in Code view or in the Optional Region dialog box when you
insert an optional region. For more information about writing template expressions, see “The
template expression language” on page 306.
In Code view, there are two ways to define template expressions: use the
The template expression language
The template expression language is a small subset of JavaScript, and uses JavaScript syntax
and precedence rules. You can use JavaScript operators to write an expression like this:
@@(firstName+lastName)@@
306
Chapter 11: Managing Templates
The following features and operators are supported:
■
numeric literals, string literals (double-quote syntax only), Boolean literals (true or
false)
■
variable reference (see the list of defined variables later in this section)
■
field reference (the “dot” operator)
■
unary operators: +, -, ~, !
■
binary operators: +, -, *, /, %, &, |, ^, &&, ||, <, <=, >, >=, ==, !=, <<, >>
■
conditional operator: ?:
■
parentheses: ()
The following data types are used: Boolean, IEEE 64-bit floating point, string, and object.
Dreamweaver templates do not support the use of JavaScript “null” or “undefined” types. Nor
do they allow scalar types to be implicitly converted into an object; thus, the expression
"abc".length would trigger an error, instead of yielding the value 3.
The only objects available are those defined by the expression object model. The following
variables are defined:
_document
Contains the document-level template data with a field for each parameter in the template.
_repeat
Only defined for expressions which appear inside a repeating region. Provides built-in
information about the region:
_index
The numerical index (from 0) of the current entry
_numRows
The total number of entries in this repeating region
_isFirst
True if the current entry is the first entry in its repeating region
_isLast
True if the current entry is the last entry in its repeating region
_prevRecord The _repeat object for the previous entry. It is an error to access this
property for the first entry in the region.
_nextRecord
The _repeat object for the next entry. It is an error to access this property for
the last entry in the region.
_parent In a nested repeated region, this gives the _repeat object for the enclosing (outer)
repeated region. It is an error to access this property outside of a nested repeated region.
During expression evaluation, all fields of the _document object and _repeat object are
implicitly available. For example, you can enter title instead of _document.title to access
the document’s title parameter.
About Dreamweaver templates
307
In cases where there is a field conflict, fields of the _repeat object take precedence over fields
of the _document object. Therefore, you shouldn’t need to explicitly reference _document or
_repeat except that _document might be needed inside a repeat region to reference document
parameters that are hidden by repeated region parameters.
When nested repeated regions are used, only fields of the innermost repeated regions are
available implicitly. Outer regions must be explicitly referenced using _parent.
The Multiple If condition in template code
You can define template expressions for if and multiple-if conditions (see “Template
expressions” on page 306). This example demonstrates defining a parameter named "Dept",
setting an initial value, and defining a Multiple If condition which determines which logo to
display.
The following is an example of the code you might enter in the head section of the template:
The following condition statement checks the value assigned to the Dept parameter. When
the condition is true or matches, the appropriate image is displayed.
When you create a template-based document, the template parameters are automatically
passed to it. The template user determines which image to display (see “Modifying template
properties” on page 334).
Creating a Dreamweaver template
You can create a template from an existing document (such as an HTML, Macromedia
ColdFusion, or Microsoft Active Server Pages document) or you can create a template from a
new, blank document.
308
Chapter 11: Managing Templates
After you create a template, you can insert template regions (see “Types of template regions”
on page 296). You can also set template preferences for code coloring and template region
highlight color (see “Customizing code coloring preferences for a template” on page 310 and
“Setting highlighting preferences for template regions” on page 311).
TIP
You can store additional information about a template (such as who created it, when it
was last changed, or why you made certain layout decisions) in a Design Notes file for
the template (see “Associating Design Notes with files” on page 152). Documents based
on a template do not inherit the template’s Design Notes.
To create a template:
1.
Open the document you want to save as a template:
■
■
To open an existing document, select File > Open, then select the document.
To open a new blank document, select File > New. In the dialog box that appears,
select Basic Page or Dynamic Page, select the type of page you want to work with, and
then click Create.
N OT E
2.
For more information about creating a new document, see “Creating a new blank
document” on page 92.
When the document opens, do one of the following:
■
■
Select File > Save as Template.
In the Common category of the Insert bar, click the arrow on the Templates button,
then select Make Template.
N OT E
Unless you selected Don’t Show This Dialog Again in the past, you’ll receive a
warning that says the document you’re saving has no editable regions. Click OK
to save the document as a template, or click Cancel to exit this dialog box without
creating a template.
The Save As Template dialog box appears.
Creating a Dreamweaver template
309
3.
Select a site to save the template in from the Site pop-up menu, then enter a unique name
for the template in the Save As text box.
4.
Click Save.
Dreamweaver saves the template file in the site’s Templates folder in the local root folder
of the site, with a .dwt filename extension. If the Templates folder does not already exist in
the site, Dreamweaver automatically creates it when you save a new template.
NO T E
Do not move your templates out of the Templates folder, or put any non-template
files in the Templates folder. Also, do not move the Templates folder out of your local
root folder. Doing so causes errors in paths in the templates.
To use the Assets panel to create a new template
1.
In the Assets panel (Window > Assets), select the Templates category on the left side of
the panel.
The Templates category of the Assets panel appears.
2.
Click the New Template button at the bottom of the Assets panel.
A new, untitled template is added to the list of templates in the Assets panel.
3.
While the template is still selected, enter a name for the template, then press Enter
(Windows) or Return (Macintosh).
Dreamweaver creates a new blank template in the Assets panel and in the Templates
folder.
Related topics
■
“Setting highlighting preferences for template regions” on page 311
■
“Creating templates for a Contribute site” on page 312
■
“Inserting an editable region” on page 315
Customizing code coloring preferences for a
template
Code color preferences control the text, background color, and style attributes of the text
displayed in Code view. You can set your own color scheme so you can easily distinguish
template regions when you view a document in Code view.
To set a Code view color scheme for templates:
1.
Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh).
The Preferences dialog box appears.
2.
310
Select Code Coloring from the category list on the left.
Chapter 11: Managing Templates
3.
Select HTML from the Document Type list, then click the Edit Coloring Scheme button.
The Edit Code Coloring Scheme dialog box appears.
4.
In the Styles For list select Template Tags.
5.
Set color, background color, and style attributes for the Code view text by doing the
following:
■
■
6.
If you want to change the text color, in the Text Color text box type the hexadecimal
value for the color you want to apply to the selected text, or use the color picker to
select a color to apply to the text. Do the same in the Background field to add or
change an existing background color for the selected text.
If you want to add a style attribute to the selected code, click the B (bold), I (italic), or
U (underline) buttons to set the desired style.
Click OK.
Setting highlighting preferences for template regions
You can use the Dreamweaver highlighting preferences to customize the highlight colors for
the outlines around the editable and locked regions of a template in Design view. The editable
region color appears in the template as well as in documents based on the template.
For more information about viewing templates and template-based documents in Design
view, see “Viewing templates in Design view” on page 297 and “Viewing template-based
documents in Design view” on page 299.
To change template highlight colors:
1.
Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh).
The Preferences dialog box appears.
2.
Select Highlighting from the category list on the left.
3.
Click the Editable Regions, Nested Regions, or Locked Regions color box, then select a
highlight color using the color picker (or enter the hexadecimal value for the highlight color
in the text box).
For information about using the color picker, see “Working with colors” on page 350.
4.
(Optional) Repeat the process for other template region types, as necessary.
5.
Click the Show option to enable or disable displaying colors in the Document window.
N O TE
6.
Nested Region does not have a Show option; its display is controlled by the Editable
Region option.
Click OK.
Creating a Dreamweaver template
311
To view highlight colors in the Document window:
■
Select View > Visual Aids > Invisible Elements.
Highlight colors appear in the document window only when View > Visual Aids >
Invisible Elements is enabled and the appropriate options are enabled in Highlighting
preferences.
NO TE
If invisible elements are showing but the highlight colors are not, select Edit >
Preferences (Windows) or Dreamweaver > Preferences (Macintosh), and then select
the Highlight category. Make sure that the Show option next to the appropriate
highlight color is selected. Also make sure that the desired color is visible against the
background color of your page.
Related topics
■
“Customizing code coloring preferences for a template” on page 310
Creating templates for a Contribute site
Using Dreamweaver, you can create templates to help Macromedia Contribute users create
new pages, to provide a consistent look and feel for your site, and to enable you to update the
layout of many pages at once.
When you create a template and upload it to the server, it becomes available to all Contribute
users who connect to your site, unless you’ve set restrictions on template use for certain
Contribute roles. If you have set restrictions on template use, you might need to add each new
template to the list of templates a Contribute user can use (see Administering Contribute).
N OT E
Make sure that the site root folder defined in each Contribute user’s site definition is the
same as the site root folder defined in your site definition in Dreamweaver. If a user’s site
root folder doesn’t match yours, that user won’t be able to use templates.
In addition to Dreamweaver templates, you can create non-Dreamweaver templates using
the Contribute administration tools. A non-Dreamweaver template is an existing page that
Contribute users can use to create new pages; it’s similar to a Dreamweaver template, except
that pages that are based on it don’t update when you change the template. Also, nonDreamweaver templates can’t contain Dreamweaver template elements such as editable,
locked, repeating, and optional regions.
312
Chapter 11: Managing Templates
When a Contribute user creates a new document within a site containing Dreamweaver
templates, Contribute lists the available templates (both Dreamweaver and non-Dreamweaver
templates) in the New Page dialog box.
To include pages that use encodings other than Latin-1 in your site, you might need to create
templates (either Dreamweaver templates or non-Dreamweaver templates). Contribute can
edit pages that use any encoding, but when a Contribute user creates a new blank page, it uses
the Latin-1 encoding. To create a page that uses a different encoding, a Contribute user can
create a copy of an existing page that uses a different encoding, or can use a template that uses
a different encoding. However, if there are no pages or templates in the site that use other
encodings, then you must first create a page or template in Dreamweaver that uses that other
encoding.
For information about creating, editing, and updating Dreamweaver templates, see “About
Dreamweaver templates” on page 296.
Creating templates for a Contribute site
313
To create a non-Dreamweaver template:
1.
Select Site > Manage Sites.
The Manage Sites dialog box appears.
2.
Select a site, then click Edit.
The Site Definition dialog box appears.
3.
Click the Advanced tab.
4.
Select the Contribute category from the category list on the left.
5.
If you haven’t already done so, you need to enable Contribute compatibility.
Select the Enable Contribute Compatibility option, and then enter a site root URL.
For more information, click the Help button.
6.
Click the Administer Site in Contribute button.
7.
If prompted, enter the administrator password, and then click OK.
The Administer Website dialog box appears.
8.
In the Users and Roles category, select a role, and then click the Edit Role Settings button.
9.
Select the New Pages category, and then add existing pages to the list under the Create a
New Page by Copying a Page from This List option.
For more information, see Administering Contribute.
10. Click
11.
OK to close the Edit Settings dialog box.
Click Close to close the Administer Website dialog box.
Related topics
■
“Creating a Dreamweaver template” on page 308
Creating editable regions
Editable template regions control which areas of a template-based page a user can edit.
Related topics
■
“Types of template regions” on page 296
314
Chapter 11: Managing Templates
Inserting an editable region
Before you insert an editable region, you should save the document you are working in as a
template (see “Creating a Dreamweaver template” on page 308).
NO T E
If you insert an editable region in a document rather than a template file, Dreamweaver
warns you that the document will automatically be saved as a template.
You can place an editable region anywhere in your page, but consider the following if you are
making a table or a layer editable:
■
You can mark an entire table or an individual table cell as editable, but you can’t mark
multiple table cells as a single editable region. If a
tag is selected, the editable region
includes the region around the cell; if not, the editable region affects only content inside
the cell.
■
Layers and layer content are separate elements; making a layer editable lets you change the
position of the layer as well as its contents, but making a layer’s contents editable lets you
change only the content of the layer, not its position.
To insert an editable template region:
1.
2.
In the Document window, do one of the following to select the region:
■
Select the text or content that you want to set as an editable region.
■
Place the insertion point where you want to insert an editable region.
Do one of the following to insert an editable region:
■
■
■
Select Insert > Template Objects > Editable Region.
Right-click (Windows) or Control-click (Macintosh), then select Templates > New
Editable Region.
In the Common category of the Insert bar, click the arrow on the Templates button,
then select Editable Region.
The Editable Region dialog box appears.
3.
In the Name text box, enter a unique name for the region. (You cannot use the same name
for more than one editable region in a particular template.)
N OT E
Do not use special characters in the Name text box.
Creating editable regions
315
4.
Click OK.
The editable region is enclosed in a highlighted rectangular outline in the template, using
the highlighting color that is set in preferences. A tab at the upper-left corner of the region
shows the name of the region. If you insert an empty editable region in the document, the
name of the region also appears inside the region.
N OT E
For information about setting template highlighting options, see “Setting highlighting
preferences for template regions” on page 311.
Related topics
■
“Removing an editable region” on page 317
■
“Changing an editable region’s name” on page 317
Selecting editable regions
You can easily identify and select template regions in both the template document and
template-based documents.
To select an editable region in the Document window:
■
Click the tab in the upper-left corner of the editable region.
To find an editable region and select it in the document:
■
Select Modify > Templates, then select the name of the region from the list at the bottom
of that submenu.
N OT E
Editable regions that are inside a repeated region do not appear in the menu. You
must locate these regions by looking for tabbed borders in the Document window.
The editable region is selected in the document.
Related topics
■
“Setting highlighting preferences for template regions” on page 311
■
“Inserting an editable region” on page 315
■
“Changing an editable region’s name” on page 317
316
Chapter 11: Managing Templates
Removing an editable region
If you’ve marked a region of your template file as editable and you want to lock it (make it
noneditable in template-based documents) again, use the Remove Template Markup
command.
To remove an editable region:
1.
Click the tab in the upper-left corner of the editable region to select it.
2.
Do one of the following:
■
■
Select Modify > Templates > Remove Template Markup.
Right-click (Windows) or Control-click (Macintosh), then select Templates > Remove
Template Markup.
The region is now no longer editable.
Related topics
■
“Inserting an editable region” on page 315
Changing an editable region’s name
After you insert an editable region, you can later change its name.
To change the name of an editable region:
1.
Click the tab in the upper-left corner of the editable region to select it.
2.
In the Property inspector (Window > Properties), enter a new name.
3.
Press Enter (Windows) or Return (Macintosh).
Dreamweaver applies the new name to the editable region.
Related topics
■
“Inserting an editable region” on page 315
Creating repeating regions
A repeating region is a section of a template that can be duplicated as often as desired in a
template-based page. You typically use repeating regions with tables; however, you can define
a repeating region for other page elements as well.
Repeating regions enable you to control your page layout by repeating certain items, such as a
catalog item and description layout, or a row for data such as a list of items.
Creating repeating regions
317
There are two repeating region template objects you can use: repeating region and repeating
table.
Related topics
■
“Types of template regions” on page 296
Creating a repeating region in a template
Repeating regions enable template users to duplicate a specified region in a template as often
as desired. A repeating region is not an editable region.
To make content in a repeating region editable (for example, to allow a user to enter text in a
table cell in a template-based document), you must insert an editable region in the repeating
region (see “Inserting an editable region” on page 315).
For information about creating an editable repeating table, see “Inserting a repeating table”
on page 319.
To insert a repeating region in a template:
1.
In the Document window, do one of the following:
Select the text or content you want to set as a repeating region.
■
Place the insertion point in the document where you want to insert the repeating
region.
■
2.
Do one of the following, to create a repeating region:
Select Insert > Template Objects > Repeating Region.
■
Right-click (Windows) or Control-click (Macintosh), then select Templates > New
Repeating Region.
■
In the Common category of the Insert bar, click the arrow on the Templates button,
then select Repeating Region.
■
The New Repeating Region dialog box appears.
3.
In the Name text box, enter a unique name for the template region. (You cannot use the
same name for more than one repeating region in a template.)
N OT E
318
When you name a region, do not use special characters.
Chapter 11: Managing Templates
4.
Click OK.
The repeating region is inserted in the template.
N OT E
A repeating region isn’t editable in the template-based document, unless it contains
an editable region. For information about inserting an editable region see “Inserting
an editable region” on page 315.
Inserting a repeating table
You can use a repeating table to create an editable region (in table format) with repeating
rows. You can define table attributes and set which table cells are editable.
To insert a repeating table:
1.
In the Document window, place the insertion point in the document where you want to
insert the repeating table.
2.
Do one of the following:
■
■
Select Insert > Template Objects > Repeating Table.
In the Common category of the Insert bar, click the arrow on the Templates button,
then select Repeating Table.
The Insert Repeating Table dialog box appears.
3.
Enter new values as desired.
For more information, click the Help button in the dialog box.
4.
Click OK.
The repeating table appears in the template.
Creating repeating regions
319
Setting alternating background colors in a repeating
table
After you insert a repeating table in a template (see “Inserting a repeating table” on page 319),
you can customize it by alternating the background color of the table rows.
To set alternating table row background colors:
1.
In the Document window, select a row in the repeating table.
2.
Click the Show Code view or Show Code and Design view button in the Document
toolbar so you can access the code for the selected table row.
3.
In Code view, edit the
tag to include the following code:
You can replace the #FFFFFF and #CCCCCC hexadecimal values with other color choices.
4.
Save the template.
The following is a code example of a table that includes alternating background table row
colors:
Name
Phone Number
Email Address
name
phone
email
Using optional regions
An optional region is a region in a template that users can set to show or to hide in a templatebased document. Use an optional region when you want to set conditions for displaying
content in a document.
320
Chapter 11: Managing Templates
When you insert an optional region, you can set specific values for a template parameter or
define conditional statements in a template; you can later modify the optional region if
necessary. Based on the conditions you define, template users can edit the parameters in
template-based documents they create and control whether the optional region displays or not
(see “Modifying template properties” on page 334).
Related topics
■
“Types of template regions” on page 296
Inserting an optional region
Use an optional region to control content which may or may not be shown in a templatebased document. There are two optional region objects:
■
An optional region enables template users to show and hide specially marked regions
without enabling them to edit the content.
The template tab of an optional region is preceded by the word if. Based on the condition
set in the template, a template user can define whether the region is viewable in pages they
create.
■
An editable optional region enables template users to set whether the region shows or
hides and enables them to edit content in the region.
For example, if the optional region includes an image or text, the template user can set
whether the content is displayed, as well as make edits to the content if desired. An
editable region is controlled by a conditional statement.
N OT E
To set optional regions to show or hide in template-based documents, see
“Modifying template properties” on page 334.
To insert an optional region:
1.
In the Document window, select the element you want to set as an optional region.
2.
Do one of the following:
■
■
■
Select Insert > Template Objects > Optional Region.
Right-click (Windows) or Control-click (Macintosh) the selected content, then select
Templates > New Optional Region.
In the Common category of the Insert bar, click the arrow on the Templates button,
then select Optional Region.
The Optional Region dialog box appears.
Using optional regions
321
3.
Specify options for the optional region.
For information about defining the optional region, click the Help button in the dialog
box.
4.
Click OK.
To insert an editable optional region:
1.
In the Document window, place the insertion point where you want to insert the optional
region.
TI P
2.
You cannot wrap a selection to create an editable optional region. Insert the region,
then insert the content in the region.
Do one of the following to open the Optional Region dialog box:
■
■
Select Insert > Template Objects > Editable Optional Region.
In the Common category of the Insert bar, click the arrow on the Templates button,
then select Editable Optional Region.
The Optional Region dialog box appears.
3.
Enter a name for the optional region, and then click the Advanced tab if you want to set
other options.
For information about defining the optional region, click the Help button in the dialog
box.
4.
Click OK.
Modifying an optional region
You can edit optional region settings after you’ve inserted the region in a template. For
example, you can change whether the default for the content is set to show or not, link a
parameter to an existing optional region, or modify a template expression.
N OT E
322
To set optional regions to show or hide in template-based documents, see “Modifying
template properties” on page 334.
Chapter 11: Managing Templates
To reopen the Optional Region dialog box:
1.
In the Document window, do one of the following:
■
■
■
2.
In Design view, click the template tab of the optional region you want to modify.
In Design view, place the insertion point in the template region; then in the tag
selector at the bottom of the Document window, select the template tag,
.
In Code view, click the comment tag of the template region you want to modify.
In the Property inspector (Window > Properties), click Edit.
The Optional Region dialog box appears.
3.
Make changes as necessary.
For information about option in the dialog box, click the Help button in the dialog box.
4.
Click OK.
Defining editable tag attributes
You can enable a template user to modify specified tag attributes in a document created from
a template.
For example, you can set a background color in the template document, yet enable template
users to set a different background color for pages they create. Users can update only the
attributes you specify as editable.
N OT E
To modify editable tag attributes in template-based documents, see “Modifying
template properties” on page 334.
Related topics
■
“Types of template regions” on page 296
Specifying editable tag attributes in a template
You can set multiple editable attributes in a page so that template users can modify the
attributes in template-based documents. The following data types are supported: text,
Boolean (true/false), color, and URL.
To define an editable tag attribute:
1.
In the Document window, select an item you want to set an editable tag attribute for.
2.
Select Modify > Templates > Make Attribute Editable.
The Editable Tag Attributes dialog box appears.
Defining editable tag attributes
323
3.
Complete the dialog box for each attribute you want to make editable.
For information about completing the dialog box, click the Help button in the dialog box.
4.
Click OK.
Creating an editable tag attribute inserts a template parameter in the code. An initial value
for the attribute is set in the template document; when a template-based document is
created, it inherits the parameter. A template user can then edit the parameter in the
template-based document (see “Modifying template properties” on page 334).
Making an editable tag attribute uneditable
A tag previously marked as editable can be marked as uneditable.
To reset an editable tag attribute:
1.
In the template document, click the element associated with the editable attribute or use
the tag selector to select the tag.
2.
Select Modify > Templates > Make Attribute Editable.
The Editable Tag Attributes dialog box appears.
3.
In the Attributes pop-up menu, select the attribute you want to affect.
4.
Deselect the Make Attribute Editable checkbox.
5.
Click OK.
6.
Update documents based on the template.
Related topics
■
“Specifying editable tag attributes in a template” on page 323
Creating a nested template
Nested templates let you create variations of a base template. You create a nested template by
saving a document based on a template, then saving that document as a new template. You
can nest multiple templates to define increasingly specific layouts. For more information, see
“Nested templates” on page 303.
By default, all editable template regions from the base template pass through the nested
template to the document based on the nested template. That means that if you create an
editable region in a base template, then create a nested template, the editable region appears in
documents based on the nested template (if you did not insert any new template regions in
that region in the nested template).
324
Chapter 11: Managing Templates
In nested templates, pass-through editable regions have a blue border. You can insert template
markup inside an editable region so that it won’t pass through as an editable region in
documents based on the nested template. Such regions have an orange border instead of a
blue border.
To create a nested template:
1.
Create a document from the template on which you want to base the nested template:
■
■
In the Assets panel’s Templates category, right-click (Windows) or Control-click
(Macintosh) the template you want to create a new document from, then select New
From Template from the context menu.
Select File > New. In the New Document dialog box, click the Templates tab, then
select the site that contains the template you want to use; in the document list,
double-click the template to create a new document.
A new document appears in the Document window.
2.
Do one of the following to save the new document as a nested template:
■
■
Select File > Save as Template.
In the Common category of the Insert bar, click the arrow on the Templates button,
then select Make Nested Template.
The Save As Template dialog box appears.
3.
Enter a name in the Save As text box, then click OK.
In documents based on the nested template, you can add or change content in editable
regions passed through from the base template, as well as editable regions created in the new
template.
To prevent an editable region from passing through to a nested template:
1.
In Code view, locate the editable region you want to prevent from passing through.
Editable regions are defined by template comment tags.
2.
Wrap the editable region (including the comment tags) with the following markers:
@@(" ")@@
For more information, see TechNote 16416 on the Macromedia website at
www.macromedia.com/go/16416.
Creating a nested template
325
Editing and updating templates
When you make changes to and save a template, Dreamweaver automatically updates all
documents attached to the template. You can also manually update documents based on a
template, if necessary.
N OT E
To edit a template for a Contribute site, you must use Dreamweaver; you cannot edit
templates in Contribute.
Dreamweaver automatically checks template syntax when you save a template. You might also
want to check template syntax when you edit a template.
N OT E
For information about editing template-based documents, see “Editing content in a
template-based document” on page 334.
Opening a template for editing
You can open a template file directly for editing, or you can open a template-based document,
then open the attached template for editing.
When you make a change to a template, Dreamweaver prompts you to update the documents
based on the template.
NO T E
You can also manually update the documents for template changes if necessary (see
“Manually updating documents that are based on templates” on page 327).
To open and edit a template file:
1.
In the Assets panel (Window > Assets), select the Templates category on the left side of
the panel.
The Assets panel lists all of the available templates for your site and displays a preview of
the selected template.
2.
In the list of available templates, do one of the following:
■
Double-click the name of the template you want to edit.
■
Select a template to edit, then click the Edit button at the bottom of the Assets panel.
The template opens in the Document window.
3.
Modify the content of the template as desired.
TIP
326
To modify the template’s page properties, select Modify > Page Properties.
(Documents based on a template inherit the template’s page properties.)
Chapter 11: Managing Templates
4.
Save the template.
Dreamweaver prompts you to update pages based on the template.
5.
Click Update to update all documents based on the modified template; click Don’t Update
if you don’t want to update documents based on the modified template.
Dreamweaver displays a log indicating the files that were updated.
To open and modify the template attached to the current document:
1.
Open the template-based document in the Document window.
2.
Do one of the following:
■
■
3.
Right-click (Windows) or Control-click (Macintosh), then select Templates > Open
Attached Template.
Modify the content of the template as desired.
TI P
4.
Select Modify > Templates > Open Attached Template.
To modify the template’s page properties, select Modify > Page Properties.
(Documents based on a template inherit the template’s page properties.)
Save the template.
Dreamweaver prompts you to update pages based on the template.
5.
Click Update to update all documents based on the modified template; click Don’t Update
if you don’t want to update documents based on the modified template.
Dreamweaver displays a log indicating the files that were updated.
Related topics
■
“Updating templates in a Contribute site” on page 328
■
“Checking template syntax” on page 329
Manually updating documents that are based on
templates
When you make a change to a template, Dreamweaver prompts you to update the documents
based on the template, but you can manually update the current document or the entire site if
necessary. Manually updating template-based documents is the same as reapplying the
template.
Editing and updating templates
327
To apply template changes to the current template-based document:
1.
Open the document in the Document window.
2.
Select Modify > Templates > Update Current Page.
Dreamweaver updates the document with any template changes.
To update the entire site or all documents that use a specified template:
1.
Select Modify > Templates > Update Pages.
The Update Pages dialog box appears.
2.
Complete the dialog box, then click Start.
For more information, click the Help button in the dialog box.
Dreamweaver updates the files as indicated. If you selected the Show Log option,
Dreamweaver provides information about the files it attempts to update, including
information on whether they were updated successfully.
3.
Click Close to close the dialog box.
Related topics
■
“Opening a template for editing” on page 326
■
“Checking template syntax” on page 329
Updating templates in a Contribute site
Contribute users can’t make changes to a Dreamweaver template. You can, however, use
Dreamweaver to change a template for a Contribute site
The following are important factors to keep in mind when updating templates in a
Contribute site:
■
Contribute retrieves new and changed templates from the site only when Contribute starts
up and when a Contribute user changes their connection information. If you make
changes to a template while a Contribute user is editing a file based on that template, the
user won’t see the changes to the template until they restart Contribute.
■
If you remove an editable region from a template, a Contribute user editing a page based
on that template might be confused about what to do with the content that was in that
editable region.
To edit a template in a Contribute site:
1.
Edit the template using Dreamweaver.
For more information, see “Opening a template for editing” on page 326.
2.
Tell all of the Contribute users who are working on the site to exit Contribute and restart it.
328
Chapter 11: Managing Templates
Checking template syntax
Dreamweaver automatically checks the template syntax when you save a template, but you
can manually check the template syntax prior to saving a template. For example, if you add a
template parameter or expression in Code view, you can check that the code follows correct
syntax.
To check for valid template syntax:
1.
Open the document you want to check in the Document window.
2.
Select Modify > Templates > Check Template Syntax.
An error message appears if the syntax is badly formed. The error message describes the error
and refers to the specific line in the code where the error exists.
Related topics
■
“Template tag syntax” on page 301
■
“Template expressions” on page 306
Managing templates
Use the Templates category of the Assets panel to manage existing templates, including
renaming template files and deleting template files.
N OT E
You can also use the Assets panel to apply a template to a document (see“Editing and
updating templates” on page 326) or edit a template (see “Opening a template for
editing” on page 326).
To rename a template in the Assets panel:
1.
In the Assets panel (Window > Assets), select the Templates category on the left side of
the panel.
2.
Click the name of the template to select it.
3.
Click the name again so that the text is selectable, then enter a new name.
This method of renaming works in the same way as renaming a file in Windows Explorer
(Windows) or the Finder (Macintosh). As with Windows Explorer and the Finder, be sure
to pause briefly between clicks. Do not double-click the name, because that opens the
template for editing.
4.
Click in another area of the Asset panel, or press Enter (Windows) or Return (Macintosh)
for the change to take effect.
Dreamweaver asks if you want to update documents that are based on this template.
Managing templates
329
5.
To update all documents in the site that are based on this template, click Update. To not
update any documents that are based on this template, click Don’t Update.
To delete a template file:
1.
In the Assets panel (Window > Assets), select the Templates category on the left side of
the panel.
2.
Click the name of the template to select it.
3.
Click the Delete button at the bottom of the panel, then confirm that you want to delete
the template.
CAUTION
Once you delete a template file, you can’t retrieve it. The template file is deleted from
your site.
Documents that are based on a deleted template are not detached from the template; they
retain the structure and editable regions that the template file had before it was deleted.
To turn such a document into a normal HTML file without editable or locked regions,
see “Detaching a document from a template” on page 333.
Related topics
■
“Creating a Dreamweaver template” on page 308
■
“Applying or removing a template from an existing document” on page 332
■
“Editing and updating templates” on page 326
Exporting and importing template XML
content
You can think of a document based on a template as containing data represented by name/
value pairs. Each pair consists of the name of an editable region, and the contents of that
region.
Dreamweaver lets you export the name/value pairs into an XML file so that you can work
with the data outside of Dreamweaver (for example, in an XML editor or a text editor, or a
database application). Conversely, if you have an XML document that’s structured
appropriately, you can import the data from it into a document based on a Dreamweaver
template.
330
Chapter 11: Managing Templates
To export a document’s editable regions as XML:
1.
Open a template-based document that contains editable regions.
2.
Select File > Export > Template Data as XML.
The Export Template Data as XML dialog box appears.
3.
Select one of the Notation options:
If the template contains repeating regions or template parameters, select Use Standard
Dreamweaver XML Tag.
■
If the template does not contain repeating regions or template parameters, select Use
Editable Region Names as XML Tags.
■
4.
Click OK.
A dialog box appears for you to save the XML file.
5.
Select a folder location, enter a name for the XML file, then click Save.
Dreamweaver generates an XML file that contains the material from the document’s
parameters and editable regions, including editable regions inside repeating regions or
optional regions. The XML file includes the name of the original template, as well as the
name and contents of each template region.
N OT E
Content in the non-editable regions is not exported to the XML file.
To import XML content:
1.
Select File > Import > Import XML into Template.
The Import XML dialog box appears.
2.
Select the XML file, then click Open.
Dreamweaver creates a new document based on the template specified in the XML file. It fills
in the contents of each editable region in that document using the data from the XML file.
The resulting document appears in a new Document window.
TIP
If your XML file isn’t set up exactly the way Dreamweaver expects, you might not be able
to import your data. One solution to this problem is to export a dummy XML file from
Dreamweaver, so that you’ll have an XML file with exactly the right structure. Then copy
the data from your original XML file into the exported XML file. The result is an XML file
with the correct structure that contains the appropriate data, all ready to be imported.
Exporting and importing template XML content
331
Exporting a site without template markup
If you do not want to include template markup in the template-based documents you export
to another site, use the Export Site Without Template Markup command.
To export a site without template markup:
1.
Select Modify > Templates > Export Without Markup.
The Export Site Without Template Markup dialog box appears.
2.
Select a folder to export the site to, then select additional export options as desired.
NO TE
You must select a folder outside of the current site.
For more information, click the Help button in the dialog box.
3.
Click OK.
Applying or removing a template from an
existing document
When you apply a template to an existing document, Dreamweaver matches the content to
regions of the template or asks you to resolve mismatches. You can later remove the template
if you need to make changes to locked regions.
Applying a template to an existing document
When you apply a template to a document which contains existing content, Dreamweaver
attempts to match the existing content to a region in the template. If you are applying a
revised version of one of your existing templates, the names are likely to match.
If you apply a template to a document that hasn’t had a template applied to it, there are no
editable regions to compare and a mismatch occurs. Dreamweaver tracks these mismatches so
you can select which region or regions to move the current page’s content to, or you can delete
the mismatched content.
You can apply a template to an existing document using the Assets panel or from the
Document window. You can undo a template application if necessary.
332
Chapter 11: Managing Templates
To apply a template to an existing document using the Assets panel:
1.
Open the document you want to apply the template to.
2.
In the Assets panel (Window > Assets), select the Templates category on the left side of
the panel.
3.
Do one of the following:
■
■
Drag the template you want to apply from the Assets panel to the Document window.
Select the template you want to apply, then click the Apply button at the bottom of
the Assets panel.
If content exists in the document that can’t be automatically assigned to a template region,
the Inconsistent Region Names dialog box appears.
4.
If you have unresolved content, select a destination for the content, then click OK.
For information about moving existing content to editable regions in the document, see
Resolving inconsistent region names in Using Dreamweaver.
To apply a template to an existing document from the Document window:
1.
Open the document you want to apply the template to.
2.
Select Modify > Templates > Apply Template to Page.
The Select Template dialog box appears.
3.
Choose a template from the list, then click Select.
If content exists in the document that can’t be automatically assigned to a template region,
the Inconsistent Region Names dialog box appears.
4.
If you have unresolved content, select a destination for the content, then click OK.
For information about moving existing content to editable regions in the document, see
Resolving inconsistent region names in Using Dreamweaver.
To undo the template changes:
■
Select Edit > Undo Apply Template.
The document reverts to its state before the template was applied.
Detaching a document from a template
To make changes to the locked regions of a document based on a template, you must detach
the document from the template. When the document is detached, the entire document
becomes editable.
Applying or removing a template from an existing document
333
To detach a document from a template:
1.
Open the template-based document you want to detach.
2.
Select Modify > Templates > Detach from Template.
The document is detached from the template and all template code is removed.
Related topics
■
“Applying a template to an existing document” on page 332
Editing content in a template-based
document
Dreamweaver templates specify regions that are locked (uneditable) and others that are
editable for template-based documents (see “About Dreamweaver templates” on page 296).
In pages based on templates (see “Creating a document based on an existing template”
on page 94), template users can edit content in editable regions only. You can easily identify
and select editable regions to edit content (see “Selecting editable regions” on page 316).
Template users cannot edit content in locked regions
N OT E
If you try to edit a locked region in a document based on a template when highlighting is
turned off, the mouse pointer changes to indicate that you can’t click in a locked region.
Template users can also modify properties and edit entries for a repeating region in templatebased documents.
Modifying template properties
When template authors create parameters in a template (see “Template parameters”
on page 305), documents based on the template automatically inherit the parameters and
their initial value settings. A template user can update editable tag attributes and other
template parameters (such as optional region settings).
To modify an editable tag attribute:
1.
Open the template-based document.
2.
Select Modify > Template Properties.
The Template Properties dialog box opens, showing a list of available properties. The
dialog box shows optional regions and editable tag attributes.
334
Chapter 11: Managing Templates
3.
In the Name list, select the property.
The bottom area of the dialog box updates to show the selected property’s label and its
assigned value.
4.
In the field to the right of the property label, edit the value to modify the property in
the document.
N OT E
5.
The field name and updateable values are defined in the template. Attributes that do
not appear in the Name list are not updateable in the template-based document.
Select the Allow Nested Templates to Control This checkbox, if you want to pass the
editable property along to a documents based on the nested template.
To modify optional region template parameters:
1.
Open the template-based document.
2.
Select Modify > Template Properties.
The Template Properties dialog box opens, showing a list of available properties. The
dialog box shows optional regions and editable tag attributes.
3.
In the Name list, select a property.
The dialog box updates to show the selected property’s label and its assigned value.
4.
Select the Show checkbox, to show the optional region in the document, or deselect the
checkbox to hide it.
N OT E
5.
The field name and default setting are defined in the template,.
Select the Allow Nested Templates to Control This checkbox, if you want to pass the
editable property along to a documents based on the nested template.
Related topics
“Defining editable tag attributes” on page 323
■
■
“Using optional regions” on page 320
Editing content in a template-based document
335
Adding, deleting, and changing the order of a
repeating region entry
Use repeating region controls to add, delete, or change the order of entries in template-based
documents. When you add a repeating region entry, a copy of the entire repeating region is
added. To update the content in the repeating regions, the original template must include an
editable region in the repeating region.
To add, delete, or change the order of a repeating region:
1.
Place the insertion point in the repeating region to select it.
2.
Do one of the following:
■
Click the Plus (+) button to add a repeating region entry below the currently selected
entry.
■
Click the Minus (–) button to delete the selected repeating region entry.
■
Click the Down Arrow button to move the selected entry down one position.
■
Click the Up Arrow button to move the selected entry up one position.
NO TE
Alternatively, you can select Modify > Template, then select one of the repeating
entry options near the bottom of the context menu. You can use this menu to
insert a new repeating entry or move the selected entry’s position.
To cut, copy, and delete entries:
1.
Place the insertion point in the repeating region to select it.
2.
Do one of the following:
■
To cut a repeating entry, select Edit > Repeating Entries > Cut Repeating Entries.
■
To copy a repeating entry, select Edit > Repeating Entries > Copy Repeating Entries.
336
Chapter 11: Managing Templates
■
■
To remove a repeating entry, select Edit > Repeating Entries > Delete Repeating
Entries.
To paste a repeating entry, select Edit > Paste.
N OT E
Pasting inserts a new entry; it does not replace an existing entry.
Related topics
■
“Creating repeating regions” on page 317
Editing content in a template-based document
337
338
Chapter 11: Managing Templates
4
PART 4
Adding Content to Pages
Use the visual tools in Macromedia Dreamweaver 8 to add a variety of
content to your web pages. Add and format elements such as text, images,
colors, movies, sound, and other forms of media. Be sure to make your
pages accessible to visitors with disabilities.
This part contains the following chapters:
Chapter 12: Working with Pages. . . . . . . . . . . . . . . . . . . . . . . . . . . . 341
Chapter 13: Inserting and Formatting Text . . . . . . . . . . . . . . . . . . 369
Chapter 14: Inserting Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 407
Chapter 15: Linking and Navigation . . . . . . . . . . . . . . . . . . . . . . . . . 421
Chapter 16: Working with Other Applications . . . . . . . . . . . . . . . 453
Chapter 17: Adding Audio, Video, and Interactive Elements. . . 469
Chapter 18: Using JavaScript Behaviors. . . . . . . . . . . . . . . . . . . . 493
339
12
CHAPTER 12
Working with Pages
Macromedia Dreamweaver 8 provides many features to help you create new web pages. These
page creation features can help you more easily specify web page properties such as page titles,
background images and colors, and text and link colors. In addition, Dreamweaver provides
tools to help you maximize website performance, and to create and test pages to ensure
compatibility with different web browsers.
This chapter contains the following sections:
About working with pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 341
Saving web pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .345
Specifying HTML instead of CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 347
Setting page properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .347
Working with colors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 350
Selecting elements in the Document window . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 351
Zooming in and out . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .354
Using the History panel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .355
Automating tasks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .356
Using JavaScript behaviors to detect browsers and plug-ins . . . . . . . . . . . . . . . . .363
Previewing and testing pages in browsers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .363
Setting download time and size preferences . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .366
About working with pages
When creating a web page, you must consider what browsers and operating system users will
view your web page with, and what language sets you may need to support. The following
sections will help you understand how to select colors that are displayed correctly in different
web browsers, the encoding of different characters (letter forms) for different languages, and
how to check that a web browser is compatible with your website.
341
About setting page properties
For each page you create in Dreamweaver, you can specify layout and formatting properties
using the Page Properties dialog box (Modify > Page Properties). The Page Properties dialog
box lets you specify the default font family and font size, background color, margins, link
styles, and many other aspects of page design. You can assign new page properties for each
new page you create, and modify those for existing pages
By default Dreamweaver formats text using CSS (Cascading Style Sheets). You can change the
page-formatting preferences to HTML formatting using the Preferences dialog box (Edit >
Preferences). When using CSS page properties, Dreamweaver uses CSS tags for all properties
defined in the Appearance, Links, and Headings categories of the Page Properties dialog box.
The CSS tags defining these attributes are embedded in the head section of the page.
N OT E
The page properties you choose apply only to the active document. If a page uses an
external CSS style sheet, Dreamweaver will not overwrite the tags set in the style sheet,
as this affects all other pages using that style sheet.
CSS versus HTML page properties
By default, Dreamweaver uses CSS to assign page properties. If you want to use HTML tags
instead, you must specify this in the Preferences dialog box (see “Specifying HTML instead of
CSS” on page 347 for more information).
342
Chapter 12: Working with Pages
If you choose to use HTML instead of CSS, the Property inspector still displays the Style popup menu. However, the font, size, color, and alignment controls will only show properties set
using HTML tags. The values of CSS properties applied to the current selection will no
longer be visible, and the Size pop-up menu will be disabled.
Related topics
■
“Specifying HTML instead of CSS” on page 347
■
“Setting page properties” on page 347
About the History panel
The History panel shows a list of the steps you’ve performed in the active document since you
created or opened that document, up to a specified number of steps. (The History panel
doesn’t show steps you’ve performed in other frames, in other Document windows, or in the
Site panel.) It allows you to undo one or more steps; it also allows you to replay steps and to
create new commands to automate repetitive tasks.
Steps
Slider (thumb)
Replay button
Save As Command button
Copy Steps button
The slider, or thumb, in the History panel initially points to the last step that you performed.
Related topics
■
“Using the History panel” on page 355
About web-safe colors
In HTML, colors are expressed either as hexadecimal values (for example, #FF0000) or as
color names (red). A web-safe color is one that appears the same in Netscape Navigator and
Microsoft Internet Explorer on both Windows and Macintosh systems when running in 256color mode. The conventional wisdom is that there are 216 common colors, and that any
hexadecimal value that combines the pairs 00, 33, 66, 99, CC, or FF (RGB values 0, 51, 102,
153, 204, and 255, respectively) represents a web-safe color.
About working with pages
343
Testing, however, reveals that there are only 212 web-safe colors rather than a full 216,
because Internet Explorer on Windows does not correctly render the colors #0033FF
(0,51,255), #3300FF (51,0,255), #00FF33 (0,255,51), and #33FF00 (51,255,0).
When web browsers first made their appearance, most computers displayed only 265 colors
(8-bit). Today, the majority of computers display thousands or millions of colors (16- and 32bit), so the justification for using the browser-safe palette is greatly diminished if you are
developing your site for users with current computer systems.
One reason to use the web-safe color palette is if you will be developing for alternative web
devices such as PDA and cell phone displays. Many of this devices offer only black and white
(1-bit) or 256 color (8-bit) displays.
The Color Cubes (default) and the Continuous Tone palettes in Dreamweaver use the 216color web-safe palette; selecting a color from these palettes displays the color’s hexadecimal
value.
To select a color outside the web-safe range, open the system color picker by clicking the
Color Wheel button in the upper-right corner of the Dreamweaver color picker. The system
color picker is not limited to web-safe colors.
UNIX versions of Netscape Navigator use a different color palette than the Windows and
Macintosh versions. If you are developing exclusively for UNIX browsers (or your target
audience is Windows or Macintosh users with 24-bit monitors and UNIX users with 8-bit
monitors), consider using hexadecimal values that combine the pairs 00, 40, 80, BF, or FF,
which produce web-safe colors for SunOS.
Related topics
■
“Working with colors” on page 350
Understanding document encoding
Document encoding specifies the encoding used for characters in the document. Document
encoding is specified in a meta tag in the head of the document; it tells the browser and
Dreamweaver how the document should be decoded and what fonts should be used to display
the decoded text.
For example, if you specify Western European (Latin1), this meta tag is inserted: .
Dreamweaver displays the document using the fonts you specify in Fonts Preferences for the
Western European (Latin1) encoding; a browser displays the document using the fonts the
browser user specifies for the Western European (Latin1) encoding.
344
Chapter 12: Working with Pages
If you specify Japanese (Shift JIS), this meta tag is inserted: .
To change document encoding for a page, see “Setting page properties” on page 347. To
change the default encoding that Dreamweaver uses to create new documents, see “Setting a
default new document type” on page 95. To change the fonts that Dreamweaver uses to
display each encoding, see “Setting Fonts preferences for Dreamweaver display” on page 75.
About using saved commands versus playing back
steps
Dreamweaver enables you to record a temporary command for short-term use, or you can
play back steps from the History panel.
When you record a temporary command:
■
The steps are recorded as you perform them, so you don’t have to select them in the
History panel before playing them back.
■
During recording, Dreamweaver prevents you from performing nonrecordable mouse
movements (such as clicking to select something in a window, or dragging a page element
to a new location).
■
If you switch to another document while recording, Dreamweaver doesn’t record the
changes you make in the other document. To determine whether you’re recording or not
at any given moment, look at the mouse pointer.
Related topics
■
“Automating tasks” on page 356
■
“Repeating steps” on page 357
■
“Recording commands” on page 362
Saving web pages
You can save a document using its current name and location, or save a copy of a document
using a different name and location.
Saving web pages
345
When naming files, avoid using spaces and special characters in file and folder names. In
particular, do not use special characters (such as é, ç, or ¥) or punctuation (such as colons,
slashes, or periods) in the names of files you intend to put on a remote server; many servers
change these characters during upload, which will cause any links to the files to break. Also,
do not begin a filename with a numeral.
To save a document:
1.
Do one of the following:
To overwrite the current version on the disk, and save any changes you have made,
select File > Save.
■
To save the file in a different folder or using a different name, select File > Save As.
■
2.
In the Save As dialog box that appears, navigate to the folder where you want to save the
file.
3.
In the File Name text box, type a name for the file.
4.
Click Save to save the file.
To save all open documents:
1.
Select File > Save All.
2.
If there are any unsaved documents open, the Save As dialog box is displayed for each
unsaved document.
In the dialog box that appears, navigate to the folder where you want to save the file.
3.
In the File Name text box, type a name for the file.
4.
Click Save to save the file.
To revert to the last saved version of a document:
1.
Select File > Revert.
A dialog box asks if you want to discard your changes, and revert to the previously saved
version.
2.
Click Yes to revert to the previous version; click No to keep your changes.
N O TE
If you save a document, and then exit Dreamweaver, you cannot revert to the
previous version of the document when you restart Dreamweaver.
Related topics
■
“Creating new documents” on page 92
■
“Saving a new document” on page 95
346
Chapter 12: Working with Pages
Specifying HTML instead of CSS
By default, Dreamweaver uses CSS tags to assign page properties. If you want to use HTML
tags instead, you must deselect the Use CSS Instead of HTML Tags option in the General
category of the Preferences dialog box.
To specify HTML instead of CSS tags for page properties:
1.
Select Edit > Preferences.
The Preferences dialog box is displayed.
2.
In the General category of the Page Properties dialog box, deselect the Use CSS Instead of
HTML Tags checkbox.
The checkbox is located in the Editing options section of the General Preferences panel.
3.
Click OK.
Related topics
■
“About setting page properties” on page 342
Setting page properties
Page titles, background images and colors, text and link colors, and margins are basic
properties of every web document. You can set or change page properties using the Page
Properties dialog box.
To set document properties:
1.
Select Modify > Page Properties, or click the Page Properties button in the text
Property inspector.
The Page Properties dialog box opens.
2.
Make changes to the page properties, as desired.
For more information, click the Help button in the dialog box.
3.
Click OK.
Related topics
■
“About setting page properties” on page 342
■
“Setting CSS link underline styles” on page 348
■
“Setting a background image or background page color” on page 349
Setting page properties
347
Changing the document title
The title of an HTML page helps site visitors keep track of what they’re viewing as they
browse, and it identifies the page in the visitor’s history and bookmark lists. If you don’t title a
page, the page will appear in the browser window, bookmark lists, and history lists as Untitled
Document.
N OT E
Giving the document a filename (by saving it) is not the same as giving the page a title.
To locate all untitled documents in your site, use the Site > Reports command. (See “Testing
your site” on page 154.)
To change the title of a page:
1.
With the document open, do one of the following:
■
Select Modify > Page Properties.
■
Select View > Toolbar > Document (if it isn’t already selected).
■
Right-click (Windows) or Control-click (Macintosh) in an empty area in the
document, then select Page Properties.
2.
In the Title text box, enter the title for the page, then press Enter (Windows) or
Return (Macintosh).
3.
If you’re editing the title in the Page Properties dialog box, click OK.
The title appears in the title bar of the Document window (and in the Document toolbar,
if it’s showing). The filename of the page and the folder the file is saved in appears in
parentheses next to the title in the title bar. An asterisk indicates the document contains
changes that have not yet been saved.
Related topics
■
“About setting page properties” on page 342
Setting CSS link underline styles
If you are using the default CSS Page Properties dialog box, Dreamweaver makes it easy to
specify special CSS link styles. Using the CSS link options, you can choose to never underline
links, underline links only when the pointer passes over the link, or disable links when the
pointer passes over them.
348
Chapter 12: Working with Pages
To set a CSS link style:
1.
Select Modify > Page Properties, or select Page Properties from the context menu in the
Design view of the Document window.
2.
Select the Links category in the CSS Page Properties dialog box.
3.
From the Underline Style pop-up menu, select the underline style you would like to use as
the default for your page.
4.
Click OK.
Related topics
■
“About setting page properties” on page 342
■
Chapter 15, “Linking and Navigation,” on page 421
Setting a background image or background page
color
To define an image or color for the page background, use the Page Properties dialog box.
If you use both a background image and a background color, the color appears while the
image downloads, and then the image covers up the color. If the background image contains
any transparent pixels, the background color shows through.
To define a background image or color:
1.
Select Modify > Page Properties, or select Page Properties from the context menu in the
Design view of the Document window.
2.
Select the Appearance category in the Page Properties dialog box.
3.
To set a background image, click the Browse button, then browse to and select the image.
Alternatively, enter the path to the background image in the Background Image box.
Dreamweaver tiles (repeats) the background image if it does not fill the entire window,
just as browsers do. (To prevent the background image from tiling, use Cascading Style
Sheets to disable image tiling. See “Defining CSS style background properties” in Using
Dreamweaver.)
4.
To set a background color, click the Background color box and select a color from the
color picker.
Related topics:
■
“About setting page properties” on page 342
Setting page properties
349
Working with colors
In Dreamweaver, many of the dialog boxes, as well as the Property inspector for many page
elements, contain a color box, which opens a color picker. Use the color picker to select a
color for a page element.
To select a color in Dreamweaver:
1.
Click a color box in any dialog box or in the Property inspector.
The color picker appears.
2.
Do one of the following:
■
■
■
Use the eyedropper to select a color swatch from the palette. All colors in the Color
Cubes (default) and Continuous Tone palettes are web-safe; other palettes are not. For
more information, see “About web-safe colors” on page 343.
Use the eyedropper to pick up a color from anywhere on your screen—even outside
the Dreamweaver windows. To pick up a color from the desktop or another
application, press and hold the mouse button; this allows the eyedropper to retain
focus, and select a color outside of Dreamweaver. If you click the desktop or another
application, Dreamweaver picks up the color where you clicked. However, if you
switch to another application, you may need to click a Dreamweaver window to
continue working in Dreamweaver.
To expand your color selection, use the pop-up menu at the upper-right corner of the
color picker. You can select Color Cubes, Continuous Tone, Windows OS, Mac OS,
Grayscale, and Snap to Web Safe.
N OT E
350
The Color Cubes and Continuous Tone palettes are web-safe, whereas Windows
OS, Mac OS and Grayscale are not. If you are using a palette that isn’t web-safe
and then select Snap to Web Safe, Dreamweaver replaces the selected color
with the closest web-safe color. In other words, you may not get the color
you see.
Chapter 12: Working with Pages
To clear the current color without choosing a different color, click the Default
Colorbutton.
To open the system color picker, click the Color Wheel button. For more information,
see “About web-safe colors” on page 343.
Defining default text colors
Define default colors for regular text, links, visited links, and active links in the Page
Properties dialog box, or select a preset color scheme to define the page background and text
colors. (See “Working with colors” on page 350.)
NO T E
The active link color is the color that a link changes to while it’s being clicked. Some web
browsers may not use the color you specify.
To define default text colors, do one of the following:
■
Select Modify > Page Properties and then select colors for the Text Color, Link Color,
Visited Links, and Active Links options.
■
Select Commands > Set Color Scheme and then select a background color and a color set
for text and links.
The sample box shows how the color scheme will look in the browser.
N OT E
If you define these settings using the Page Properties dialog box, using the default
CSS tags, the Color Scheme command will not affect your page’s appearance. This
is because CSS tags take priority over HTML tags.
Related topics
■
“About setting page properties” on page 342
Selecting elements in the
Document window
To select an element in the Design view of the Document window, you generally click the
element. If an element is invisible, you must make it visible before you can select it. For more
information about invisible elements, see “Showing and hiding invisible elements”
on page 353.
Selecting elements in the Document window
351
To select elements, use these techniques:
■
To select a visible element in the Document window, click the element or drag across
the element.
■
To select an invisible element, select View > Visual Aids > Invisible Elements (if that menu
item isn’t already selected) and then click the element’s marker in the Document window.
Some objects appear on the page in a place other than where their code is inserted. For
example, a layer can be anywhere on the page, but the code defining the layer is in a fixed
location. When invisible elements are showing, Dreamweaver displays markers in the
Document window to show the location of the code for such elements. Selecting a marker
selects the entire element; for example, selecting the marker for a layer selects the entire
layer. (See “Showing and hiding invisible elements” on page 353.)
■
To select a complete tag (including its contents, if any), click a tag in the tag selector at the
lower left of the Document window. (The tag selector appears in both Design view and
Code view.) The tag selector always shows the tags that contain the current selection or
insertion point. The leftmost tag is the outermost tag containing the current selection or
insertion point. The next tag is contained in that outermost tag, and so on; the rightmost
tag is the innermost one that contains the current selection or insertion point.
In the following example, the insertion point is in a paragraph tag,
. To select the table
containing the paragraph you want to select, select the
tag to the left of the
tag.
To see the HTML code associated with the selected text or object, do one of
the following:
■
In the Document toolbar, click the Show Code View button.
■
Select View > Code.
■
In the Document toolbar, click the Show Code and Design Views button.
■
Select View > Code and Design.
■
Select Window > Code Inspector.
For more information about Code view, see “Viewing your code” on page 531.
When you select something in either code editor (Code view or the Code inspector), it’s
generally also selected in the Document window. You may need to synchronize the two views
before the selection appears; see “Viewing your code” on page 531.
352
Chapter 12: Working with Pages
Showing and hiding invisible elements
Some HTML code doesn’t have a visible representation in a browser. For example, comment
tags don’t appear in browsers. However, it can be useful while you’re creating a page to be able
to select such invisible elements, edit them, move them, and delete them.
Dreamweaver enables you to specify whether it shows icons marking the location of invisible
elements in the Design view of the Document window. To indicate which element markers
appear when you select View > Visual Aids > Invisible Elements, you can set options in
Invisible Elements preferences. For example, you can specify that named anchors be visible,
but not line breaks.
You can create certain invisible elements (such as comments and named anchors) using
buttons in the Common category of the Insert bar (see “Using the Insert bar” on page 55).
You can then modify these elements using the Property inspector.
To show or hide marker icons for invisible elements:
■
Select View > Visual Aids > Invisible Elements.
NO TE
Showing invisible elements may slightly change the layout of a page, moving other
elements by a few pixels, so for precision layout, hide the invisible elements.
To change Invisible Elements preferences:
1.
Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh), then
click Invisible Elements.
2.
Select which elements should be made visible.
A check mark next to the name of the element in the dialog box means the element is
visible when View > Visual Aids > Invisible Elements is selected.
For an explanation of each Invisible Elements preference, see “Showing and hiding
invisible elements” in Using Dreamweaver.
3.
Click OK.
Selecting elements in the Document window
353
Zooming in and out
Dreamweaver lets you zoom in on or out from a document so that you can check the pixel
accuracy of graphics, select small items more easily, design pages with small text, design large
pages, and so on.
N OT E
The zooming tools are only available in Design view.
To zoom in on a page:
1.
Select the Zoom tool (the magnifying glass icon) in the lower-right corner of the
Document window.
2.
Do one of the following:
■
Click the spot on the page you want to magnify until you’ve achieved the desired
magnification.
■
Drag a box over the area on the page that you want to zoom in on and release the mouse
button.
■
Select a preset magnification level from the Zoom pop-up menu.
■
Type a magnification level in the Zoom text box.
TI P
You can also zoom in without using the Zoom tool by pressing Control+= (Windows)
or Command+= (Macintosh).
To zoom out:
1.
Select the Zoom tool.
2.
Press Alt (Windows) or Option (Macintosh) and click on the page.
TIP
You can also zoom out without using the Zoom tool by pressing Control+- (Windows)
or Command+- (Macintosh).
To edit a page after zooming:
■
Select the Pointer tool (the pointer icon) in the lower-right corner of the Document
window, and click inside the page.
To pan a page after zooming:
1.
Select the Hand tool (the hand icon) in the lower-right corner of the Document window.
2.
Drag the page.
354
Chapter 12: Working with Pages
To fill the Document window with a selection:
1.
Select an element on the page.
2.
Select View > Fit Selection.
To fill the Document window with an entire page:
■
Select View > Fit All.
To fill the Document window with the entire width of a page:
■
Select View > Fit Width.
Related topics
■
“The status bar” on page 45
Using the History panel
The History panel keeps track of every step of your work in Dreamweaver. You can use the
History panel to undo multiple steps at once.
To undo the last operation you performed in a document, select Edit > Undo, just as you
would do in any other application. (The name of the Undo command changes in the Edit
menu to reflect the last operation you performed.)
The History panel also lets you replay steps you’ve already performed and automate tasks by
creating new commands. For more information, see “Automating tasks” on page 356.
To open the History panel:
■
Select Window > History.
To undo the last step:
■
Drag the History panel slider up one step in the list. This has the same effect as choosing
Edit > Undo.
The undone step turns gray.
To undo multiple steps at once, do one of the following:
■
Drag the slider to point to any step.
■
Click to the left of a step along the path of the slider; the slider scrolls automatically to
that step, undoing steps as it scrolls.
NO T E
To scroll automatically to a particular step, you must click to the left of the step;
clicking the step itself selects the step. Selecting a step is different from going back
to that step in your undo history.
Using the History panel
355
As with undoing a single step, if you undo a series of steps and then do something new in the
document, you can no longer redo the undone steps; they disappear from the History panel.
To set the number of steps that the History panel retains and shows:
1.
Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh).
2.
Select General from the Category list on the left.
3.
Enter a number for Maximum Number of History Steps.
The default value should be sufficient for most users’ needs. The higher the number, the
more memory the History panel requires. This can affect performance and slow your
computer down significantly. When the History panel reaches this maximum number of
steps, the earliest steps are discarded.
NO TE
You can’t rearrange the order of steps in the History panel. Don’t think of the History
panel as an arbitrary collection of commands; think of it as a way to view the steps
you’ve performed, in the order in which you performed them.
To erase the history list for the current document:
■
In the History panel’s context menu, select Clear History.
This command also clears all undo information for the current document; after choosing
Clear History, you will be unable to undo the steps that are cleared. (Note that Clear
History does not undo steps; it merely removes the record of those steps from
Dreamweaver’s memory.)
Related topics
■
“About the History panel” on page 343
Automating tasks
While creating your documents, you may want to perform the same task numerous times.
To repeat a series of steps once or twice, replay them directly from the History panel, which
records your steps as you work on a document. (For basic information about the History
panel, see “About the History panel” on page 343.) To automate a task that you perform
often, you can create a new command that performs that task automatically.
356
Chapter 12: Working with Pages
Some mouse movements, such as selecting something in the Document window by clicking
or dragging, can’t be played back or saved as part of saved commands. When you make such a
movement, a black line appears in the History panel (although the line does not become
obvious until you perform another action). To avoid movements that can’t be played back, use
the arrow keys instead of the mouse to move the insertion point within the Document
window. To make or extend a selection, hold down the Shift key while pressing an arrow key.
TI P
If a black mouse-movement indicator line appears while you’re performing a task you
want to repeat later, you can undo back past that step and try another approach, perhaps
using the arrow keys.
Certain other steps also aren’t repeatable, such as dragging a page element to somewhere else
on the page. When you perform such a step, a menu-command icon with a small red X
appears in the History panel.
Related topics
■
“Applying steps to another object” on page 358
■
“Applying steps to multiple objects” on page 358
■
“Copying and pasting steps between documents” on page 360
■
“Creating new commands from history steps” on page 361
■
“Recording commands” on page 362
Repeating steps
You can use the History panel to repeat the last step you performed, repeat a series of adjacent
steps, or repeat a series of nonadjacent steps. (For basic information about the History panel,
see “About the History panel” on page 343.)
To repeat one step, do one of the following:
■
Select Edit > Redo.
The name of this command changes in the Edit menu to reflect the last step you
performed; for example, if you’ve just typed some text, the command name is Redo
Typing.
■
In the History panel, select a step and click the Replay button.
The step is replayed and a copy of it appears in the History panel.
Automating tasks
357
To repeat a series of adjacent steps:
1.
Select steps in the History panel by doing one of the following:
Drag from one step to another. (Don’t drag the slider; just drag from the text label of
one step to the text label of another step.)
■
Select the first step, then Shift-click the last step; or select the last step and then Shiftclick the first step.
■
The steps played are the steps that are selected (highlighted), not necessarily the step the
slider currently points to.
NO T E
2.
Although you can select a series of steps that includes a black mouse-movement
indicator line, that mouse movement is skipped when you replay the steps.
Click Replay.
The steps are replayed in order, and a new step, Replay Steps, appears in the History
panel.
To repeat nonadjacent steps:
1.
Select a step, then Control-click (Windows) or Command-click (Macintosh) other steps.
You can also Control-click or Command-click to deselect a selected step.
2.
Click Replay.
The selected steps are replayed in order, and a new step, labeled Replay Steps, appears in
the History panel.
Related topics
■
“Applying steps to multiple objects” on page 358
Applying steps to another object
You can apply a set of steps from the History panel to any object in the Document window.
To apply History panel steps to a new object:
1.
Select the object.
2.
Select the relevant steps in the History panel and click Replay.
Applying steps to multiple objects
If you select multiple objects in a document and then apply steps to them from the History
panel, the objects are treated as a single selection and Dreamweaver attempts to apply the
steps to that combined selection.
358
Chapter 12: Working with Pages
For example, you can’t select five images and apply the same size change to each of them all at
once; a size change is an operation that must be applied to each individual image, not to a
collective combination of images.
To apply a series of steps to each object in a set of objects, you must make the last step in the
series select the next object in the set. The following procedure demonstrates this principle in
a particular scenario: setting the vertical and horizontal spacing of a series of images.
To set the vertical and horizontal spacing of a series of images:
1.
Start with a document in which each line consists of a small image (such as a graphical
bullet or an icon) followed by text. The goal is to set the images off from the text and from
the other images above and below them.
2.
Open the Property inspector (Window > Properties), if it isn’t already open.
3.
Select the first image.
4.
In the Property inspector, enter numbers in the V Space and H Space text boxes to set the
image’s spacing.
5.
Click the image again to make the Document window active without moving the
insertion point.
6.
Press the Left Arrow key to move the insertion point to the left of the image. Then press
the Down Arrow key to move the insertion point down one line, leaving it just to the left
of the second image in the series. Then press Shift+Right Arrow to select that second image.
N OT E
Do not select the image by clicking it, or you won’t be able to replay all the steps.
Automating tasks
359
7.
In the History panel, select the steps that correspond to changing the image’s spacing and
selecting the next image. Click the Replay button to replay those steps.
The current image’s spacing changes, and the next image is selected.
8.
Continue to click Replay until all the images are spaced correctly.
To apply steps to an object in another document, use the Copy Steps button.
Copying and pasting steps between documents
Each open document has its own history of steps. You can copy steps from one document and
paste them into another.
Closing a document clears its history. If you know you will want to use steps from a document
after that document is closed, copy the steps with Copy Steps (or save them as a command;
see “Creating new commands from history steps” on page 361) before you close the
document.
To reuse steps from one document in another document:
1.
Start from the document containing the steps you want to reuse.
2.
Select the steps in the History panel.
3.
Click the History panel’s Copy Steps button to copy those steps.
N OT E
Copy Steps (a button in the History panel) is different from Copy (in the Edit menu).
You can’t use Edit > Copy to copy steps, though you do use Edit > Paste to paste
them.
Be careful when copying steps that include a Copy or a Paste command:
■
360
Don’t use Copy Steps if one of the steps is a Copy command; you may not be able to
paste such steps the way you want.
Chapter 12: Working with Pages
■
If your steps include a Paste command, you can’t paste those steps, unless the steps also
include a Copy command before the Paste command.
4.
Open the other document.
5.
Place the insertion point where you want it, or select an object to apply the steps to.
6.
Select Edit > Paste to paste the steps.
The steps are played back as they’re pasted into the document’s History panel. The
History panel shows them as only one step, called Paste Steps.
If you pasted steps into a text editor or into Code view or the Code inspector, they appear
as JavaScript code. This can be useful for learning to write your own scripts. For more
information on using JavaScript in Dreamweaver, see “Writing and editing code”
on page 558.
Creating new commands from history steps
You can save a set of history steps as a named command, which then becomes available in the
Commands menu.
Create and save a new command if there’s a chance you’ll use a given set of steps again in the
future, especially if you want to use those steps again the next time you start Dreamweaver;
saved commands are retained permanently (unless you delete them), while recorded
commands are discarded when you exit from Dreamweaver, and copied sequences of steps are
discarded when you copy something else.
You can edit the names of commands that you’ve placed in the Commands menu, and you
can delete them from the Commands menu. It’s more complicated to edit and delete
commands that are built into the Commands menu (that is, commands that you didn’t
explicitly add).
To create a command:
1.
Select a step or set of steps in the History panel.
2.
Click the Save As Command button, or select Save As Command from the History panel’s
context menu.
3.
Enter a name for the command and click OK.
The command appears in the Commands menu.
NO T E
The command is saved as a JavaScript file (or sometimes an HTML file) in your
Dreamweaver/Configuration/Commands folder. If you are using Dreamweaver on a
multiuser operating system, the file will be saved in the specific user’s Commands
folder.
Automating tasks
361
To use a saved command:
1.
Select an object to apply the command to, or place the insertion point where you want it.
2.
Select the command from the Commands menu.
To edit the names of commands in the Commands menu:
1.
Select Commands > Edit Command List.
2.
Select a command to rename and enter a new name for it.
3.
Click Close.
To delete a name from the Commands menu:
1.
Select Commands > Edit Command List.
2.
Select a command.
3.
Click Delete, then click Close.
Recording commands
You can record a temporary command for short-term use. Dreamweaver retains only one
recorded command at a time; as soon as you start recording a new command, the old one is
lost.
To save a new command without losing a recorded one, save the command from the History
panel. For more information on comparing using recorded commands to playing back steps
from the History panel, see “Using the History panel” on page 355.
To temporarily record a series of frequently used steps:
1.
Select Commands > Start Recording, or press Control+Shift+X (Windows) or
Command+Shift+X (Macintosh).
The pointer changes to indicate that you’re recording a command.
2.
When you finish recording, select Commands > Stop Recording, or press Control+Shift+X
(Windows) or Command+Shift+X (Macintosh).
To play back a recorded command:
■
Select Commands > Play Recorded Command, or press Control+Shift+R (Windows) or
Command+Shift+R (Macintosh).
362
Chapter 12: Working with Pages
To save a recorded command:
1.
Select Commands > Play Recorded Command to play the command back.
A step named Run Command appears in the History panel’s step list.
2.
Select the Run Command step and click the Save As Command button.
3.
Enter a name for the command and click OK.
The command appears in the Commands menu.
Using JavaScript behaviors to detect
browsers and plug-ins
You can use behaviors to determine which browser your visitors are using and whether they
have a particular plug-in installed. For more information on behaviors, see Chapter 18,
“Using JavaScript Behaviors,” on page 493.
Check Browser
sends visitors to different pages depending on their browser brands and
versions (see “Check Browser” on page 501). For example, you may want visitors to go to one
page if they have Netscape Navigator 4.0 or later, to go to another page if they have Microsoft
Internet Explorer 4.0 or later, and to stay on the current page if they have any other kind of
browser.
Check Plugin
sends visitors to different pages depending on whether they have the specified
plug-in installed (see “Check Plugin” on page 503). For example, you may want visitors to go
to one page if they have Macromedia Shockwave and another page if they do not.
Previewing and testing pages in browsers
You can preview a document in a browser at any time; you don’t have to save the document
first or upload it to a web server.
This section covers the following topics:
■
“Previewing in a browser” on page 364
■
“Setting previewing preferences” on page 365
■
“Previewing active content in Internet Explorer (Windows)” on page 366
Previewing and testing pages in browsers
363
Previewing in a browser
You can use Dreamweaver to preview and test your document in a browser.
To preview and test your document in a browser:
1.
Do one of the following to preview the page:
Select File > Preview in Browser, then select one of the listed browsers.
■
NO TE
Press F12 (Windows) or Option+F12 (Macintosh) to display the current document in
the primary browser.
■
Press Control+F12 (Windows) or Command+F12 (Macintosh) to display the current
document in the secondary browser.
■
2.
If you haven’t selected a browser yet, select Edit > Preferences or Dreamweaver >
Preferences (Macintosh), and then select the Preview in Browser category on
the left to select a browser.
Click links and test content in your page.
In most cases, all browser-related functions work, including JavaScript behaviors,
document-relative and absolute links, ActiveX controls, and Netscape Navigator plug-ins,
provided that you have installed the required plug-ins or ActiveX controls in your
browsers.
If you use Internet Explorer on a Windows XP computer with Service Pack 2 installed, the
browser may display a message that tells you it has restricted the file from showing active
content. You can fix this problem by including Mark of the Web code in the file. For more
information, see “Previewing active content in Internet Explorer (Windows)”
on page 366.
NO T E
TIP
3.
Content linked with a site root-relative path does not appear when you preview
documents in a local browser unless you specify a testing server, or select the
Preview Using Temporary File option in Edit > Preferences > Preview in Browser. This
is because browsers don’t recognize site roots—servers do.
To preview content linked with root-relative paths, put the file on a remote server,
and then select File > Preview in Browser to view it (see “Site root-relative paths”
on page 424).
Close the page in the browser when you finish testing.
364
Chapter 12: Working with Pages
Setting previewing preferences
You can define up to 20 browsers for previewing. It’s a good idea to preview in the following
browsers: Internet Explorer 6.0, Netscape Navigator 7.0, and the Macintosh-only Safari
browser. In addition to these more popular, graphical browsers, you may want to test your
pages using a text-only browser such as Lynx.
To set or change preferences for your primary and secondary browsers:
1.
Do one of the following to open the Preview in Browser options:
■
■
Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh), and
then select Preview in Browser from the category list on the left.
Select File > Preview in Browser > Edit Browser List.
The Preferences dialog box appears with the Preview in Browser options.
2.
Make changes as necessary.
For more information, click the Help button in the dialog box.
3.
Click OK.
Previewing and testing pages in browsers
365
Previewing active content in Internet Explorer
(Windows)
If you preview a document containing active content in Internet Explorer after installing the
Windows XP Service Pack 2 update, the browser may not display the document correctly. The
browser displays a message that tells you it has restricted the file from showing active content.
You can fix this problem by inserting Mark of the Web code in your document.
Internet Explorer blocks active content and scripting that tries to run in the Local Machine
zone. Because attackers try to take advantage of the Local Machine zone, Microsoft increased
the restrictions on what can run in this zone by default. Mark of the Web code tells the
browser to run active content in another zone, in this case the Internet zone.
To preview active content in Internet Explorer on Windows XP SP2:
■
With your document open in Dreamweaver, select Commands > Insert Mark of the Web.
Dreamweaver inserts the following line in your code:
The line tells the browser to bypass the Local Machine zone and run the active content in
the Internet zone.
You can also remove Mark of the Web code before pushing a file live.
To remove Mark of the Web code:
1.
In Dreamweaver, open the document containing the Mark of the Web code.
2.
Select Commands > Remove Mark of the Web.
For more information, see TechNote 19578 on the Macromedia website at
www.macromedia.com/go/19578.
Setting download time and size
preferences
Dreamweaver calculates size based on the entire contents of the page, including all linked
objects, such as images and plug-ins. Dreamweaver estimates download time based on the
connection speed entered in Status Bar preferences. Actual download time varies depending
on general Internet conditions.
TIP
366
A good guideline to use when checking download times for a particular web page is the
8-second rule. That is, most users will not wait longer than 8 seconds for a page to load.
Chapter 12: Working with Pages
To set download time and size preferences:
1.
Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh).
The Preferences dialog box appears.
2.
Select Status Bar from the Category list on the left.
The Status Bar preference options appear.
3.
Select a connection speed with which to calculate download time.
The average connection speed in the United States is 28.8. If you are designing for an
intranet, you may want to select 1500 (T1 speed).
For more information about status bar preferences, see “Setting Status Bar preferences”
on page 53.
4.
Click OK.
Setting download time and size preferences
367
368
Chapter 12: Working with Pages
13
CHAPTER 13
Inserting and Formatting Text
Macromedia Dreamweaver 8 offers several ways for you to add and format text in a
document. You can insert text, set font type, size, color, and alignment attributes, as well as
create and apply your own custom styles using Cascading Style Sheets (CSS).
This chapter covers the following topics:
About text formatting in Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .369
Inserting text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 381
Formatting paragraphs and document structure. . . . . . . . . . . . . . . . . . . . . . . . . . . . .385
Formatting text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .388
Using Cascading Style Sheets to format text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 394
Checking spelling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 404
Searching for and replacing text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 405
About text formatting in Dreamweaver
Dreamweaver provides several tools and commands that let you format text using either CSS
or HTML.
This section contains the following topics:
■
“About inserting text” on page 370
■
“About formatting text” on page 370
■
“Understanding Cascading Style Sheets” on page 371
■
“About conflicting CSS rules” on page 373
■
“Shorthand CSS properties” on page 374
■
“The Property inspector and text formatting” on page 375
■
“About the CSS Styles panel” on page 376
369
About inserting text
Dreamweaver lets you add text to web pages by typing the text directly into a page, copying
and pasting text from another document, or dragging text from another application. Typical
document types that web professionals receive with text content that needs incorporating into
web pages include ASCII text files, rich format text files, and Microsoft Office documents.
Dreamweaver lets you take text from any of these document types, and incorporate it into a
web page.
Related topics
■
“Inserting text” on page 381
■
“Adding text to a document” on page 381
■
“Importing tabular data documents” on page 382
■
“Importing Microsoft Office documents (Windows only)” on page 383
About formatting text
Formatting text in Dreamweaver is similar to using a standard word processor. You can set
default formatting styles (Paragraph, Heading 1, Heading 2, and so on) for a block of text,
change the font, size, color, and alignment of selected text, or apply text styles such as bold,
italic, code (monospace), and underline.
By default, Dreamweaver formats text using Cascading Style Sheets (CSS). CSS gives web
designers and developers greater control over web page design, while providing improved
features for accessibility and reduced file size. As you format and align text using
Dreamweaver formatting commands, CSS rules are embedded in the current document. This
lets you more easily reuse existing styles, as well as name the styles you create. CSS is
becoming the preferred method by which to format text and lay out web pages.
If you prefer, you can use HTML markup tags to format and align text in your web pages. If
you need to use HTML tags instead of CSS, you must change the Dreamweaver default text
formatting preferences. (For more information, see “Specifying HTML instead of CSS”
on page 347.)
Using CSS is a way to control the style of a web page without compromising its structure. By
separating visual design elements (fonts, colors, margins, and so on) from the structural logic
of a web page, CSS gives web designers visual and typographic control without sacrificing the
integrity of the content. In addition, defining typographic design and page layout from within
a single, distinct block of code—without having to resort to image maps, font tags, tables,
and spacer GIFs—allows for faster downloads, streamlined site maintenance, and a central
point from which to control design attributes across multiple web pages.
370
Chapter 13: Inserting and Formatting Text
CSS defines the formatting for all text in a particular class or redefines the formatting for a
particular HTML tag (such as h1, h2, p, or li).
You can store styles created with CSS directly in the document (the default when you format
text using the Property inspector), or for more power and flexibility, you can store styles in an
external style sheet. If you attach an external style sheet to several web pages, all the pages
automatically reflect any changes you make to the style sheet. To access all CSS rules for a
page, use the CSS Styles panel (Window > CSS Styles).
For more information about using the text Property inspector to apply HTML or CSS, see
Setting text property options. For more information about using the CSS panel to apply CSS,
see Using the CSS Styles panel.
N OT E
You can combine CSS and HTML 3.2 formatting within the same page. Formatting is
applied in a hierarchical manner: HTML 3.2 formatting overrides formatting applied by
external CSS style sheets, and CSS embedded in a document overrides external CSS.
For more information, see “Using Cascading Style Sheets to format text” on page 394.
Related topics
■
“Inserting text” on page 381
■
“Formatting text” on page 388
Understanding Cascading Style Sheets
Cascading Style Sheets (CSS) are a collection of formatting rules that control the appearance
of content in a web page. When you use CSS to format a page, you separate content from
presentation. The content of your page—the HTML code—resides in the HTML file itself,
while the CSS rules defining the presentation of the code reside in another file (an external
style sheet) or in another part of the HTML document (usually the head section). With CSS
you have great flexibility and control over the exact appearance of your page, from precise
positioning of layout to specific fonts and styles.
CSS lets you control many properties that HTML alone cannot control. For example, you can
specify different font sizes and units (pixels, points, and so on) for selected text. By using CSS
to set font sizes in pixels, you can also ensure a more consistent treatment of your page layout
and appearance in multiple browsers.
In addition to text formatting, you can use CSS to control the format and positioning of
block-level elements in a web page. For example, you can set margins and borders for blocklevel elements, float text around other text, and so on.
About text formatting in Dreamweaver
371
A CSS formatting rule consists of two parts—the selector and the declaration. The selector is
a term (such as P, H1, a class name, or an id) that identifies the formatted element, and the
declaration defines what the style elements are. In the following example, H1 is the selector,
and everything that falls between the braces ({}) is the declaration:
H1 {
font-size: 16 pixels;
font-family: Helvetica;
font-weight:bold;
}
The declaration consists of two parts, the property (such as font-family) and value (such as
Helvetica). In the previous CSS rule a particular style has been created for H1 tags: the text
for all H1 tags linked to this style will be 16 pixels in size, Helvetica font, and bold.
The term cascading refers to your ability to apply multiple styles to the same element. For
example, you can create one CSS rule to apply color and another to apply margins, and apply
them both to the same text on a page. The defined styles “cascade” down to the elements on
your web page, ultimately creating the design you want.
A major advantage of CSS is that it provides easy update capability; when you update a CSS
rule in one place, the formatting of all the documents that use the defined style are
automatically updated to the new style.
You can define the following types of styles in Dreamweaver:
■
Custom CSS rules, also called class styles, let you apply style attributes to any range or
block of text. (See “Applying a class style” on page 398.)
■
HTML tag styles redefine the formatting for a particular tag, such as h1. When you create
or change a CSS style for the h1 tag, all text formatted with the h1 tag is immediately
updated.
■
CSS selector styles (advanced styles) redefine the formatting for a particular combination
of elements, or for other selector forms as allowed by CSS (for example, the selector td h2
applies whenever an h2 header appears inside a table cell.) Advanced styles can also
redefine the formatting for tags that contain a specific id attribute (for example, the styles
defined by #myStyle apply to all tags that contain the attribute-value pair
id="myStyle").
CSS rules can reside in the following locations:
External CSS style sheets
are collections of CSS rules stored in a separate, external CSS
(.css) file (not an HTML file). This file is linked to one or more pages in a website using a link
in the head section of a document.
Internal (or embedded) CSS style sheets are
collections of CSS rules included in a style
tag in the head portion of an HTML document.
372
Chapter 13: Inserting and Formatting Text
Inline styles
are defined within specific instances of tags throughout an HTML document.
Dreamweaver recognizes styles defined in existing documents as long as they conform to CSS
style guidelines.
TI P
To display the O’Reilly CSS reference guide included with Dreamweaver, select Help >
Reference and select O’Reilly CSS Reference from the pop-up menu in the Reference
panel.
Manual HTML formatting might override formatting applied with CSS. For CSS rules to
control the formatting of a paragraph, you must remove all manual HTML formatting.
Dreamweaver renders most style attributes that you apply directly in the Document window.
You can also preview the document in a browser window to see styles applied. Some CSS style
attributes are rendered differently in Microsoft Internet Explorer, Netscape, Opera, and Apple
Safari, and some are not currently supported by any browser.
About conflicting CSS rules
When you apply two or more CSS rules to the same text, the rules might conflict and produce
unexpected results. Browsers apply CSS rules as follows:
■
If two rules are applied to the same text, the browser displays all attributes of both rules
unless specific attributes conflict. For example, one rule may specify blue as the text color
and the other rule may specify red as the text color.
■
If attributes from two rules applied to the same text conflict, the browser displays the
attribute of the innermost rule (the rule closest to the text itself ). Thus, if a text element
has both an external style sheet and an inline style affecting it, the inline style is applied.
■
If there is a direct conflict, the attributes from custom CSS rules (rules applied with the
class attribute) override attributes from HTML tag styles.
In the example that follows, the style defined for h1 might specify the font, size, and color for
all h1 paragraphs, but the custom CSS rule .Blue applied to this paragraph overrides the
color setting in the h1 style. The second custom CSS rule .Red overrides .Blue because it is
inside the .Blue style.
This paragraph is controlled by the .Blue custom
style and h1
HTML tag style.Except this sentence is controlled by the
.Red style.
Now we're back to the .Blue style.
All element and attribute names must be
lowercase.
Forces HTML element and attribute names to
be lowercase in the XHTML code that it
generates and when cleaning up XHTML,
regardless of your tag and attribute case
preferences.
Every element must have a closing tag, unless Inserts closing tags in the code that it
it is declared in the DTD as EMPTY.
generates, and when cleaning up XHTML.
Empty elements must have a closing tag, or
the opening tag must end with />. For
example, is not valid; the correct form is
or . Following are the empty
elements: area, base, basefont, br, col, frame,
hr, img, input, isindex, link, meta, and param.
And for backwards-compatibility with
browsers that are not XML-enabled, there
must be a space before the /> (for example,
, not ).
552
Chapter 20: Coding in Dreamweaver
Inserts empty elements with a space before
the closing slash in empty tags in the code
that it generates, and when cleaning up
XHTML.
XHTML requirement
Actions Dreamweaver performs to
meet this requirement
Attributes can’t be minimized; for example,
is not valid; the correct form is
.
This affects the following attributes: checked,
compact, declare, defer, disabled, ismap,
multiple, noresize, noshade, nowrap, readonly,
and selected.
Inserts full attribute-value pairs in the code
that it generates, and when cleaning up
XHTML.
Note: If an HTML browser does not support
HTML 4, it might fail to interpret these
Boolean attributes when they appear in their
full form.
All attribute values must be surrounded by
quotation marks.
Places quotation marks around attribute
values in the code that it generates, and when
cleaning up XHTML.
The following elements must have an id
attribute as well as a name attribute: a, applet,
form, frame, iframe, img, and map. For example,
Introduction is not
valid; the correct form is
Introduction or
Sets the name and id attributes to the same
value, whenever the name attribute is set by a
Property inspector, in the code that
Dreamweaver generates, and when cleaning
up XHTML.
Introduction.
For attributes with values of an enumerated
type, the values must be lowercase.
An enumerated type value is a value from a
specified list of allowed values; for example,
the align attribute has the following allowed
values: center, justify, left, and right.
All script and style elements must have a type
attribute.
(The type attribute of the script element has
been required since HTML 4, when the
language attribute was deprecated.)
All img and area elements must have an alt
attribute.
Forces enumerated type values to be
lowercase in the code that it generates, and
when cleaning up XHTML.
Sets the type and language attributes in
script elements, and the type attribute in
style elements, in the code that it generates
and when cleaning up XHTML.
Sets these attributes in the code that it
generates and, when cleaning up XHTML,
reports missing alt attributes.
About coding in Dreamweaver
553
Server-side includes
A server-side include is a file that the server incorporates into your document when a browser
requests your document from the server.
When a visitor’s browser requests the document containing the include instruction, your
server processes the include instruction and creates a new document in which the include
instruction is replaced by the contents of the included file. The server then sends this new
document to the visitor’s browser. When you open a local document directly in a browser,
however, there’s no server to process the include instructions in that document, so the browser
opens the document without processing those instructions, and the file that’s supposed to be
included doesn’t appear in the browser. It can thus be difficult, without using Dreamweaver,
to look at local files and see them as they’ll appear to visitors after you’ve put them on the
server.
With Dreamweaver you can preview documents just as they’ll appear after they’re on the
server, both in the Design view and when you preview in a browser.
Placing a server-side include in a document inserts a reference to an external file; it doesn’t
insert the contents of the specified file in the current document. Dreamweaver displays the
contents of the external file in Design view, making it easier to design pages.
You cannot edit the included file directly in a document. To edit the contents of a server-side
include, you must directly edit the file that you’re including. Note that any changes to the
external file are automatically reflected in every document that includes it.
There are two types of server-side includes: Virtual and File. Select the one that is appropriate
for the type of web server you use:
■
If your server is an Apache web server, select Virtual. In Apache, Virtual works in all cases,
while File works only in some cases.
■
If your server is a Microsoft Internet Information Server (IIS), select File. (Virtual works
with IIS only in certain specific circumstances.)
N OT E
■
Unfortunately, IIS won’t allow you to include a file in a folder above the current folder
in the folder hierarchy, unless special software has been installed on the server. If you
need to include a file from a folder higher in the folder hierarchy on an IIS server, ask
your system administrator if the necessary software is installed.
For other kinds of servers, or if you don’t know what kind of server you’re using, ask your
system administrator which option to use.
554
Chapter 20: Coding in Dreamweaver
Some servers are configured to examine all files to see if they contain server-side includes;
other servers are configured to examine only files with a particular file extension, such as
.shtml, .shtm, or .inc. If a server-side include isn’t working for you, ask your system
administrator if you need to use a special extension in the name of the file that uses the
include. (For example, if the file is named canoe.html, you may have to rename it to
canoe.shtml.) If you want your files to retain .html or .htm extensions, ask your system
administrator to configure the server to examine all files (not just files with a certain
extension) for server-side includes. Parsing a file for server-side includes takes a little extra
time, so pages that the server parses are served a little more slowly than other pages; therefore,
some system administrators won’t provide the option of parsing all files.
Related topics
■
“Inserting a server-side include” on page 593
■
“Editing the contents of a server-side include” on page 594
Regular expressions
Regular expressions are patterns that describe character combinations in text. Use them in
your code searches to help describe concepts such as “lines that begin with ‘var’” and
“attribute values that contain a number.” For more information on searching, see “Searching
and replacing tags and attributes” on page 570.
The following table lists the special characters in regular expressions, their meanings, and
usage examples. To search for text containing one of the special characters in the table,
“escape” the special character by preceding it with a backslash. For example, to search for the
actual asterisk in the phrase some conditions apply*, your search pattern might look like
this: apply\*. If you don’t escape the asterisk, you’ll find all the occurrences of “apply” (as well
as any of “appl”, “applyy”, and “applyyy”), not just the ones followed by an asterisk.
Character
Matches
Example
^
Beginning of input or line.
^T matches “T” in “This good earth”
but not in “Uncle Tom’s Cabin”
$
End of input or line.
h$ matches “h” in “teach” but not in
“teacher”
*
+
The preceding character 0 or
more times.
um* matches “um” in “rum”, “umm” in
The preceding character 1 or
more times.
um+ matches “um” in “rum” and
“yummy”, and “u” in “huge”
“umm” in “yummy” but nothing in
“huge”
About coding in Dreamweaver
555
Character
Matches
Example
?
The preceding character at most
once (that is, indicates that the
preceding character is optional).
st?on matches “son” in
“Johnson” and “ston” in “Johnston”
but nothing in “Appleton” or
“tension”
.
Any single character except newline. .an matches “ran” and “can” in the
phrase “bran muffins can be tasty”
x|y
Either x or y.
FF0000|0000FF matches “FF0000” in
bgcolor=”#FF0000” and “0000FF’” in
font color=”#0000FF”
{n}
Exactly n occurrences of the
preceding character.
o{2} matches “oo” in “loom” and the
first two o’s in “mooooo” but nothing
in “money”
{n,m}
At least n, and at most m,
occurrences of the
preceding character.
F{2,4} matches “FF” in “#FF0000”
and the first four F’s in #FFFFFF
[abc]
Any one of the characters enclosed
in the brackets. Specify a range of
characters with a hyphen (for
example, [a-f] is equivalent to
[abcdef]).
[e-g] matches “e” in “bed”, “f” in
“folly”, and ”g” in “guard”
[^abc]
Any character not enclosed in
the brackets. Specify a range of
characters with a hyphen (for
example, [^a-f] is equivalent
to [^abcdef]).
[^aeiou] initially matches “r”
in “orange”, “b” in “book”, and “k”
in “eek!”
\b
A word boundary (such as a space or \bb matches “b” in “book” but
nothing in “goober” or “snob”
carriage return).
\B
Anything other than a word
boundary.
\Bb matches “b” in “goober” but
nothing in “book”
\d
Any digit character. Equivalent to [0- \d matches “3” in “C3PO” and “2” in
“apartment 2G”
9].
\D
Any nondigit character. Equivalent to \D matches “S” in “900S” and “Q” in
“Q45”
[^0-9].
\f
Form feed.
\n
Line feed.
\r
Carriage return.
556
Chapter 20: Coding in Dreamweaver
Character
Matches
Example
\s
Any single white-space
character, including space, tab,
form feed, or line feed.
\sbook matches ”book” in “blue
book” but nothing in “notebook”
\S
Any single non-white-space
character.
\Sbook matches “book” in
“notebook” but nothing in
“blue book”
\t
A tab.
\w
Any alphanumeric character,
including underscore. Equivalent to
[A-Za-z0-9_].
b\w* matches “barking” in “the
barking dog” and both “big” and
“black” in “the big black dog”
\W
Any non-alphanumeric character.
Equivalent to [^A-Za-z0-9_].
\W matches “&” in “Jake&Mattie”
and “%” in “100%”
Control+Enter
or Shift+Enter
(Windows), or
Control+ Return
or Shift+Return
or Command+
Return
(Macintosh)
Return character. Make sure that you
deselect the Ignore Whitespace
Differences option when searching
for this, if not using regular
expressions. Note that this matches
a particular character, not the
general notion of a line break; for
instance, it doesn’t match a tag
or a
tag. Return characters
appear as spaces in Design view, not
as line breaks.
Use parentheses to set off groupings within the regular expression to be referred to later. Then
use $1, $2, $3, and so on in the Replace With field to refer to the first, second, third, and later
parenthetical groupings.
N OT E
In the Search For text box, to refer to a parenthetical grouping earlier in the regular
expression, use \1, \2, \3, and so on instead of $1, $2, $3.
For example, searching for (\d+)\/(\d+)\/(\d+) and replacing it with $2/$1/$3 swaps the day
and month in a date separated by slashes, thereby converting between American-style dates
and European-style dates.
Related topics
■
“Searching for tags, attributes, or text contained in specific tags” on page 571
■
“Saving search patterns” on page 571
About coding in Dreamweaver
557
About server behavior code
When you develop a dynamic page and select a server behavior from the Server Behaviors
panel, Dreamweaver inserts one or more code blocks into your page to make the server
behavior work.
If you manually change the code within a code block, you can no longer use panels such as the
Bindings and Server Behaviors panels to edit the server behavior. Dreamweaver looks for
specific patterns in the page code to detect server behaviors and display them in the Server
Behaviors panel. If you change a code block’s code in any way, Dreamweaver can no longer
detect the server behavior and display it in the Server Behaviors panel. However, the server
behavior still exists on the page, and you can edit it in the coding environment in
Dreamweaver.
Writing and editing code
Dreamweaver offers several features to help you write and edit code efficiently.
Using code hints
The code hints feature helps you insert and edit code quickly and without mistakes. When
you type certain characters in Code view, such as the first letters of a tag or attribute or CSS
property name, a list appears, suggesting options to complete your entry. You can use this
feature to insert or edit code, or just to see the available attributes for a tag, the available
parameters for a function, or the available methods for an object.
Code hints are available for a variety of kinds of code. An appropriate list of items appears
when you type a particular character that indicates the beginning of a piece of code; for
example, to display a code hints list of HTML tag names, type a start bracket (<).
TI P
For best results, especially when using code hints for functions and objects, set the
Delay option in the Code Hints preferences dialog box to a delay of 0 seconds. For more
information, see “Setting code hints preferences” on page 535.
The code hints list disappears when you press Backspace (Windows) or Delete (Macintosh).
To display a code hints menu if it doesn’t appear automatically:
■
Press Control+Spacebar (Windows) or Command+Spacebar (Macintosh).
558
Chapter 20: Coding in Dreamweaver
To insert markup or other code in Code view using code hints:
1.
Type the beginning of a piece of code. For example, to insert a tag, type a start bracket (<);
to insert an attribute, place the insertion point immediately after a tag name and press
Spacebar.
A list of items (such as tag names or attribute names) appears.
TIP
To close the list at any time, press Escape.
2.
Scroll through the list using the scroll bar or the Up Arrow and Down Arrow keys.
3.
To insert an item from the list, double-click it, or select it and press Enter (Windows) or
Return (Macintosh).
TIP
If a recently created CSS style doesn’t appear in a code hints list of CSS styles,
select Refresh Style List from the code hints list. If Design view is showing, some
invalid code might appear in Design view temporarily after you select Refresh Style
List; to remove that invalid code from Design view, after you finish inserting the style,
press F5 to refresh Design view again.
To insert a closing tag:
■
Type ) of the opening tag, or so that it inserts no closing tag at all.
Select Edit > Preferences > Code Hints, and then select one of the Close Tags options.
To edit a tag using code hints, do either of the following:
■
To replace an attribute with a different attribute, first delete the attribute and its value,
then add a new attribute and its value as described in the previous procedure.
■
To change a value, first delete the value, then add a new value as described in the
previous procedure.
Related topics
■
“Setting code hints preferences” on page 535
Writing and editing code
559
Working with code snippets
Code snippets let you store content for quick reuse. You can create and insert snippets of
HTML, JavaScript, CFML, ASP, JSP, and more. Dreamweaver also contains some predefined
snippets that you can use as a starting point.
This section describes how to insert, create, edit or delete code snippets. It also describes how
to manage your code snippets and share them with other members of your team.
NO T E
With Dreamweaver 8, snippets containing tags and other deprecated elements
and attributes have been moved to the Legacy folder in the Snippets panel.
To insert a code snippet:
1.
Place the insertion point where you want to insert the code snippet, or select code to wrap
a snippet around.
2.
In the Snippets panel (Window > Snippets), double-click the snippet.
You can also right-click (Windows) or Control-click (Macintosh) the snippet, then select
Insert from the pop-up menu.
To create a code snippet:
1.
In the Snippets panel, click the New Snippet icon at the bottom of the panel.
The Snippet dialog box appears.
2.
Complete the dialog box and click OK.
For more information, click the Help button in the dialog box.
To edit a code snippet:
■
In the Snippets panel, select a snippet and click the Edit Snippet button at the bottom of
the panel.
To delete a code snippet:
■
In the Snippets panel, select a snippet and click the Remove button at the bottom of the
panel.
To create code snippet folders and manage code snippets:
1.
In the Snippets panel, click the New Snippet Folder button at the bottom of the panel.
2.
Drag snippets to the new folder or other folders, as desired.
560
Chapter 20: Coding in Dreamweaver
To add or edit a keyboard shortcut for a snippet:
1.
In the Snippets panel, right-click (Windows) or Control-click (Macintosh) and select Edit
Keyboard Shortcuts.
2.
In the Commands pop-up menu, select Snippets.
The Keyboard Shortcuts Editor appears.
A list of snippets appears.
3.
Select a snippet and assign a keyboard shortcut to it.
For more information, see “Customizing keyboard shortcuts” on page 76.
To share a snippet with other members of your team:
1.
Find the file corresponding to the snippet that you want to share in the Configuration/
Snippets folder in the Dreamweaver application folder.
2.
Copy the snippet file to a shared folder on your computer or a network computer.
3.
Have the other members of the team copy the snippet file to their Configuration/
Snippets folder.
Inserting code quickly with the Coding toolbar
You can use the Coding toolbar to quickly add code to your page.
To insert code quickly:
1.
Make sure you are in Code view (View > Code).
2.
Position the insertion point in the code, or select a block of code.
3.
Click a button in the Coding toolbar, or select an item from a pop-up menu in the toolbar.
To find out what each button does, position the pointer over it until a tooltip appears. The
following buttons are displayed by default in the Coding toolbar.
Open Documents
lists the documents that are open. When you select one, it is displayed in
the Document window.
Collapse Full Tag
collapses the content between a set of opening and closing tags (for
example, the content between
and
). You must place the insertion point in
the opening or closing tag and then click the Collapse Full Tag button to collapse the tag.
TIP
You can also collapse the code outside a full tag by placing the insertion point in an
opening or closing tag and Alt-clicking (Windows) or Option-clicking (Macintosh) the
Collapse Full Tag button. Additionally, Control-clicking this button disables “smart
collapse” so that Dreamweaver doesn’t adjust the content it collapses outside full tags.
For more information, see “About collapsing code” on page 565.
Writing and editing code
561
Collapse Selection
collapses the selected code.
TIP
You can also collapse the code outside a selection by Alt-clicking (Windows) or Optionclicking (Macintosh) the Collapse Selection button. Additionally, Control-clicking this
button disables “smart collapse” so that you can collapse exactly what you selected
without any manipulation from Dreamweaver. For more information, see “About
collapsing code” on page 565.
Expand All
restores all collapsed code.
Select Parent Tag selects the content and surrounding opening and closing tags of the line in
which you’ve placed the insertion point. If you repeatedly click this button, and your tags are
balanced, Dreamweaver will eventually select the outermost html and /html tags.
Balance Braces
selects the content and surrounding parentheses, braces, or square brackets
of the line in which you’ve placed the insertion point. If you repeatedly click this button, and
your surrounding symbols are balanced, Dreamweaver will eventually select the outermost
braces, parentheses, or brackets in the document.
Show Line Numbers
lets you hide or show numbers at the beginning of each line of code.
Highlight Invalid Code
Apply Comment
highlights invalid code in yellow.
lets you wrap comment tags around selected code, or open new comment
tags.
■
Apply HTML Comment wraps the selected code with , or opens a new tag
if no code is selected.
■
Apply // Comment inserts // at the beginning of each line of selected CSS or JavaScript
code, or inserts a single // tag if no code is selected.
■
Apply /* */ wraps the selected CSS or JavaScript code with /* and */.
■
Apply ' Comment is for Visual Basic code. It inserts a single quotation mark at the
beginning of each line of a Visual Basic script, or inserts a single quotation mark at the
insertion point if no code is selected.
■
When you are working in a ASP, ASP.NET, JSP, PHP, or Macromedia ColdFusion file and
you select the Apply Server Comment option, Dreamweaver automatically detects the
correct comment tag and applies it to your selection.
Remove Comment
removes comment tags from the selected code. If a selection includes
nested comments, only the outer comment tags are removed.
Wrap Tag
wraps selected code with the selected tag from the Quick Tag Editor.
Recent Snippets
lets you insert a recently used code snippet from the Snippets panel. For
more information, see “Working with code snippets” on page 560.
Indent Code
562
shifts the selection to the right.
Chapter 20: Coding in Dreamweaver
Outdent Code shifts
the selection to the left.
Format Source Code
applies previously specified code formats to selected code, or to the
entire page if no code is selected. You can also quickly set code formatting preferences by
selecting Code Formatting Settings from the Format Source Code button, or edit tag libraries
by selecting Edit Tag Libraries.
The number of buttons available in the Coding toolbar varies depending on the size of the
Code view in the Document window. To see all of the available buttons, resize the Code view
window or click the expander arrow at the bottom of the Coding toolbar.
You can also edit the Coding toolbar to display more buttons (such as Word Wrap, Hidden
Characters, and Auto Indent) or hide buttons that you don’t want to use. To do this, however,
you must edit the XML file that generates the toolbar. For more information, see Extending
Dreamweaver.
NO TE
The option to view hidden characters, which is not a default button in the Coding toolbar,
is available from the View menu (View > Code View Options > Hidden Characters).
Related topics
“The Coding toolbar” on page 48
■
■
“Displaying toolbars” on page 54
■
“Verifying that tags and braces are balanced” on page 576
Inserting code quickly with the Insert bar
You can use the Insert bar to quickly add code to your page.
To insert code quickly:
1.
Position the insertion point in the code.
2.
Select an appropriate category in the Insert bar.
3.
Click a button in the Insert bar, or select an item from a pop-up menu in the Insert bar.
When you click an icon, the code may appear in your page immediately, or a dialog box
may appear requesting more information to complete the code.
To find out what each button does, point to the button with the mouse pointer and wait for a
tooltip to appear. The number and type of buttons available in the Insert bar varies depending
on the current document type. It also depends on whether you’re using Code view or Design
view.
Though the Insert bar provides a collection of frequently used tags, it is not comprehensive.
To choose from a more comprehensive selection of tags, use the Tag Chooser.
Writing and editing code
563
Related topics
■
“The Insert bar” on page 46
Inserting tags with the Tag Chooser
You can use the Tag Chooser to insert in your page any tag in the Dreamweaver tag libraries
(which include Macromedia ColdFusion and ASP.NET tag libraries). For more information
on the tag libraries, see “Managing tag libraries” on page 538.
To insert a tag using the Tag Chooser:
1.
Position the insertion point in the code, then right-click (Windows) or Control-click
(Macintosh) and select Insert Tag.
The Tag Chooser appears. The left pane contains a list of supported tag libraries, and the
right pane shows the individual tags in the selected tag library folder.
2.
Select and insert a tag.
For more information, click the Help button in the dialog box.
3.
To close the Tag Chooser, click the Close button.
Editing tags with Tag editors
Tag editors let you view, specify, and edit the attributes of a tag.
564
Chapter 20: Coding in Dreamweaver
To edit a tag with a Tag editor:
1.
Right-click (Windows) or Control-click (Macintosh) a tag in Code view or an object in
Design view, and select Edit Tag from the pop-up menu.
2.
Specify or edit attributes for the tag and click OK.
TIP
To get more information about the tag within the Tag editor, click Tag Info.
Collapsing code
You can optimize Code view to show as little or as much code as you like by collapsing or
expanding selected fragments of code. You can also cut, paste, or move collapsed sections of
code.
This section contains the following topics:
■
“About collapsing code” on page 565
■
“Collapsing and expanding code fragments” on page 566
■
“Pasting and moving collapsed code fragments” on page 568
About collapsing code
Dreamweaver lets you collapse and expand code fragments so that you can view different
sections of your document without having to use the scroll bar. For example, if you want to
see all of the CSS rules in the head tag that apply to a div tag farther down the page, you can
collapse everything between the head tag and the div tag so that you can see both sections of
code at once. Although you can select code fragments by making selections in Design view or
Code view, you can collapse code only in Code view.
When you select code, Dreamweaver adds a set of collapse buttons next to the selection
(Minus symbols in Windows; vertical triangles on the Macintosh). To collapse the selection,
click one of the buttons. When the code is collapsed, the collapse buttons change to an
expand button (a Plus button in Windows; a horizontal triangle on the Macintosh). To
expand the collapsed selection, click the expand button. For information about other ways of
working with collapsed code, see “Collapsing and expanding code fragments” on page 566.
At times, Dreamweaver may not collapse the exact fragment of code that you selected.
Dreamweaver uses “smart collapse” to collapse the most common and visually pleasing
selection. For example, if you selected an indented tag and then selected the indented spaces
before the tag as well, Dreamweaver would not collapse the indented spaces, because most
users would expect their indentations to be preserved. If you want to disable smart collapse,
and force Dreamweaver to collapse exactly what you selected, you can do so by holding down
the Control key before collapsing your code.
Writing and editing code
565
Additionally, Dreamweaver places a warning icon on collapsed code fragments if a fragment
contains errors or code that is unsupported by certain browsers.
NO T E
Files created from Dreamweaver templates display all code as fully expanded, even if the
template file (.dwt) contains collapsed code fragments.
Related topics
■
“Pasting and moving collapsed code fragments” on page 568
■
“Cleaning up your code” on page 575
■
“Inserting code quickly with the Coding toolbar” on page 561
Collapsing and expanding code fragments
To collapse code:
1.
Select some code.
2.
Select Edit > Code Collapse > Collapse Selection, or click one of the collapse buttons next
to the selection.
To collapse the code outside a selection:
1.
In Code view, select some code.
2.
Select Edit > Code Collapse > Collapse Outside Selection.
TIP
You can also collapse the code outside a selection by Alt-clicking (Windows) or
Option-clicking (Macintosh) one of the collapse buttons or the Collapse Selection
button in the Coding toolbar.
To collapse a tag and all the content it encloses:
1.
In Code view, place the insertion point inside an opening or closing tag (for example, inside
the
or
tag).
2.
Select Edit > Code Collapse > Collapse Full Tag.
TI P
You can also collapse a full tag by right-clicking the tag in the tag selector, and
selecting Collapse Full Tag.
To collapse the code outside a full tag:
1.
Do one of the following:
■
■
566
In Code view, place the insertion point inside an opening or closing tag (for example,
inside the
or
tag).
In Code view, select part of an opening or closing tag.
Chapter 20: Coding in Dreamweaver
2.
Select Edit > Code Collapse > Collapse Outside Full Tag.
TIP
You can also collapse the code outside a full tag by right-clicking the tag in the tag
selector and selecting Collapse Outside Full Tag, or by placing the insertion point
inside an opening or closing tag and Alt-clicking the Collapse Full Tag button in the
Coding toolbar.
To select a collapsed code fragment:
■
In Code view, click the collapsed code fragment.
N OT E
When you make a selection in Design view that is part of a collapsed code fragment,
Dreamweaver automatically expands the fragment in Code view. When you make a
selection in Design view that is a complete code fragment, the fragment remains
collapsed in Code view.
To expand a code fragment:
■
Do one of the following:
■
In Code view, double-click the code fragment.
■
Select Edit > Code Collapse > Expand Selection.
To view the code in a collapsed code fragment without expanding it:
■
Hold the mouse pointer over the collapsed code fragment.
To expand all collapsed code fragments:
■
Select Edit > Code Collapse > Expand All.
You can also use the following keyboard shortcuts to execute any of the previous commands:
Command
Windows
Macintosh
Collapse Selection
Control+Shift+C
Command+Shift+C
Collapse Outside Selection
Control+Alt+C
Command+Alt+C
Expand Selection
Control+Shift+E
Command+Shift+E
Collapse Full Tag
Control+Shift+J
Command+Shift+J
Collapse Outside Full Tag
Control+Alt+J
Command+Alt+J
Expand All
Control+Alt+E
Command+Alt+E
Related topics
■
“About collapsing code” on page 565
■
“Cleaning up your code” on page 575
■
“Inserting code quickly with the Coding toolbar” on page 561
Writing and editing code
567
Pasting and moving collapsed code fragments
To copy and paste a collapsed code fragment:
1.
Select the collapsed code fragment.
2.
Select Edit > Copy.
3.
Place the insertion point where you want to paste the code.
4.
Select Edit > Paste.
N OT E
You can paste into other applications, but the collapsed state of the code fragment is
not preserved.
To drag a collapsed code fragment:
1.
Select the collapsed code fragment.
2.
Drag the selection to the new location.
TI P
To drag a copy of the selection, Control-drag (Windows) or Alt-drag (Macintosh).
NO TE
You cannot drag to other documents.
Related topics
■
“About collapsing code” on page 565
■
“Collapsing and expanding code fragments” on page 566
■
“Cleaning up your code” on page 575
■
“Inserting code quickly with the Coding toolbar” on page 561
Indenting code blocks
As you write and edit code in Code view or the Code inspector, you can change the
indentation level of a selected block or line of code, shifting it right or left by one tab.
To indent the selected block of code, do one of the following:
■
Press Tab.
■
Select Edit > Indent Code.
To unindent the selected block of code, do one of the following:
■
Press Shift+Tab.
■
Select Edit > Outdent Code.
568
Chapter 20: Coding in Dreamweaver
Related topics
■
“Making quick changes to a code selection” on page 572
Copying and pasting code
You can copy and paste code from another application or from Code view itself.
To copy and paste code as text:
1.
Copy the code from Dreamweaver or from another application.
2.
Place the insertion point in Code view and select Edit > Paste.
Related topics
■
“Pasting and moving collapsed code fragments” on page 568
Inserting HTML comments
A comment is descriptive text that you insert in HTML code to explain the code or provide
other information. The text of the comment appears only in Code view and is not displayed
in a browser.
To insert a comment at the insertion point:
■
Select Insert > Comment.
In Code view, Dreamweaver inserts a comment tag and places the insertion point in the
middle of the tag. Type your comment.
In Design view, Dreamweaver displays the Comment dialog box. Type your comment
and click OK.
To display comment markers in Design view:
■
Select View > Visual Aids > Invisible Elements.
Make sure that the Comments option is selected in the Invisible Elements preferences or
the comment marker will not appear.
To edit an existing comment, do one of the following:
■
In Design view, select the Comment marker and edit the comment’s text in the
Property inspector.
■
In Code view, find the comment and edit its text.
Writing and editing code
569
Jumping to a JavaScript or VBScript function
In both Code view and the Code inspector, you can view a list of all of the JavaScript or
VBScript functions in your code and jump to any one of them.
To jump to a JavaScript or VBScript function in your code:
1.
View the document in Code view (View > Code) or the Code inspector (Window > Code
Inspector).
2.
Do one of the following:
■
If you’re using Code view, right-click (Windows) or Control-click (Macintosh)
anywhere in Code view, and then select the Functions submenu from the context
menu.
NO T E
The Functions submenu does not appear in Design view.
If your code contains JavaScript or VBScript functions, they appear in the submenu.
TI P
■
To see the functions listed in alphabetical order, Control-right-click (Windows) or
Option-Control-click (Macintosh) in Code view, and then select the Functions
submenu.
If you’re using the Code inspector, click the Code Navigation button on the toolbar.
The button consists of a pair of braces ({ }).
3.
From the submenu, select a function name to jump to the function in your code.
Searching and replacing tags and
attributes
You can use Dreamweaver to search for and replace tags and attributes in your code.
Related topics
■
“Regular expressions” on page 555
■
“Searching for and replacing text” on page 405
■
“Comparing files for differences” on page 113
570
Chapter 20: Coding in Dreamweaver
Searching for tags, attributes, or text contained in
specific tags
You can search for specific tags, attributes, and attribute values. For example, you can search
for all img tags that have no alt attribute.
You can also search for specific text strings that are either within or not within a set of
container tags. For example, you can search for the word Untitled contained in a title tag
to find all the untitled pages on your site.
To search for tags, attributes, or text in code:
1.
Open the document to search in, or select documents or a folder in the Files panel.
2.
Select Edit > Find and Replace.
The Find and Replace dialog box appears.
3.
Specify which files to search in, then specify the kind of search you want to perform, and
text or tags to search for. Optionally, specify replacement text as well. Then click one of the
Find buttons or one of the Replace buttons.
For more information, click the Help button.
4.
When you’re done, click the Close button to dismiss the dialog box.
To search again without displaying the Find and Replace dialog box:
■
Press F3 (Windows) or Command+G (Macintosh).
Related topics
■
“Regular expressions” on page 555
Saving search patterns
You can save a search pattern and reuse it later.
To save a search pattern:
1.
In the Find and Replace dialog box (Edit > Find and Replace), set the parameters for the
search.
If you are performing a tag or advanced text search, see “Searching for tags, attributes, or
text contained in specific tags” on page 571 for information about setting additional
search parameters.
2.
Click the Save Query button (the disk icon).
Searching and replacing tags and attributes
571
3.
In the dialog box that appears, navigate to the folder where you want to save queries. Then
type a filename to identify the query by and click Save.
For example, if the search pattern involves looking for img tags with no alt attribute, you
might name the query img_no_alt.dwr.
NO TE
Saved queries have the filename extension .dwr. Some saved queries from older
versions of Dreamweaver may have the extension .dwq.
To recall a search pattern:
1.
Select Edit > Find and Replace.
2.
Click the Load Query button (the folder icon).
3.
Navigate to the folder where your queries are saved. Then select a query file and click Open.
4.
Click Find Next, Find All, Replace, or Replace All to initiate the search.
Related topics
“Searching for tags, attributes, or text contained in specific tags” on page 571
■
■
“Regular expressions” on page 555
Making quick changes to a code
selection
You can select code and then make quick changes to it using a context menu.
To make quick changes to selected code:
1.
In Code view, select some code and right-click (Windows) or Control-click (Macintosh).
In the context menu, select the Selection submenu.
2.
Select one of the following options from the submenu:
Comment Out Lines
adds comment tags around selected lines. If a line is partially
selected, the entire line is commented out. You can use this tool to comment out
potentially incorrect code when debugging a page.
Uncomment Lines removes comment marks from the beginning and end of any lines
within the commented out selection. It works on entire lines only, not on comments
within lines.
Convert Tabs to Spaces converts each tab in the selection to a number of spaces equal to
the Tab Size value set in Code Format preferences. For more information, see “Setting
code formatting preferences” on page 535.
572
Chapter 20: Coding in Dreamweaver
Convert Spaces to Tabs converts runs of spaces in the selection to tabs. Each run of
spaces that has a number of spaces equal to the tab size is converted to one tab.
Indent
indents the selection, shifting it to the right. For more information about
indenting and outdenting, see “Indenting code blocks” on page 568.
Outdent
shifts the selection to the left.
Remove All Tags
removes all the tags in the selection.
Convert Lines to Table
Add Line Breaks
wraps the selection in a table tag with no attributes.
adds a br tag at the end of each line of the selection.
Convert to Uppercase
converts all letters in the selection (including tag and attribute
names and values) to uppercase.
Convert to Lowercase
converts all letters in the selection (including tag and attribute
names and values) to lowercase.
Convert Tags to Uppercase
converts all tag and attribute names and attribute values in
the selection to uppercase.
Convert Tags to Lowercase
converts all tag and attribute names and attribute values in
the selection to lowercase.
Using language-reference material
The Reference panel provides you with a quick reference tool for markup languages,
programming languages, and CSS styles. It provides information on the specific tags, objects,
and styles that you are working with in Code view (or the Code inspector). The Reference
panel also provides example code that you can paste into your documents.
To open the Reference panel:
1.
Do one of the following in Code view:
■
■
Right-click (Windows) or Control-click (Macintosh) a tag, attribute, or keyword, and
then select Reference from the context menu.
Place the insertion point in a tag, attribute, or keyword, and then press Shift+F1.
The Reference panel opens and displays information about the tag, attribute, or keyword
you clicked.
Using language-reference material
573
2.
To adjust the text size in the Reference panel, select Large Font, Medium Font, or Small
Font from the options menu (the small arrow at the upper right of the panel).
To paste example code into your document:
1.
Click anywhere in example code in the reference content.
Dreamweaver highlights the entire code example.
2.
Select Edit > Copy, and then paste the example code into your document in Code view.
To browse the reference content:
1.
To display tags, objects, or styles from another book, select a different book from the Book
pop-up menu.
2.
To view information about a specific item, select it from the Tag, Object, Style, or CFML
pop-up menu (depending on which book you selected).
3.
To view information about an attribute of the selected item, select the attribute from the
pop-up menu next to the Tag, Object, Style, or CFML pop-up menu.
This menu contains the list of attributes for the item you select. The default selection is
Description, which displays a description of the chosen item.
Printing your code
You can print your code to edit it offline, archive it, or distribute it.
To print code:
1.
Open a page in Code view.
2.
Select File > Print Code.
3.
Specify printing options, then click OK (Windows) or Print (Macintosh).
574
Chapter 20: Coding in Dreamweaver
CHAPTER 21
21
Optimizing and Debugging
Your Code
You can use Macromedia Dreamweaver 8 to optimize and debug your code. For example, you
can validate your tags, make your document XHTML-compliant, or debug your Macromedia
ColdFusion code.
This chapter covers the following topics:
Cleaning up your code. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .575
Verifying that tags and braces are balanced . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 576
Checking for browser compatibility . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 577
Validating your tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 580
Making pages XHTML-compliant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 581
Using the ColdFusion debugger (Windows only) . . . . . . . . . . . . . . . . . . . . . . . . . . . .582
Cleaning up your code
Dreamweaver can automatically remove empty tags, combine nested font tags, and otherwise
improve messy or unreadable HTML or XHTML code.
For information on how to clean up HTML generated from a Microsoft Word document, see
“Opening existing documents” on page 94.
To clean up the code:
1.
Open a document:
■
If the document is in HTML, select Commands > Clean Up HTML.
■
If the document is in XHTML, select Commands > Clean Up XHTML.
For an XHTML document, the Clean Up XHTML command fixes XHTML syntax
errors, sets the case of tag attributes to lowercase, and adds or reports the missing
required attributes for a tag in addition to performing the HTML cleanup operations.
575
2.
In the dialog box that appears, select any of the options.
For more information, click the Help button in the dialog box.
3.
Click OK.
Depending on the size of your document and the number of options selected, it may take
several seconds to complete the cleanup.
Related topics
■
“Setting code formatting preferences” on page 533
■
“Setting code coloring preferences” on page 534
Verifying that tags and braces are
balanced
You can check to make sure the tags, parentheses (( )), braces ({ }), and square brackets ([ ]) in
your page are balanced. Balanced means that every opening tag, parenthesis, brace, or bracket
has a corresponding closing one, and vice versa.
To check for balanced tags:
1.
Open the document in Code view.
2.
Place the insertion point in the nested code you want to check.
3.
Select Edit > Select Parent Tag.
The enclosing matching tags (and their contents) are selected in your code. If you keep
selecting Edit > Select Parent Tag, and your tags are balanced, eventually Dreamweaver
will select the outermost html and /html tags.
To check for balanced parentheses, braces, or square brackets:
1.
Open the document in Code view.
2.
Place the insertion point in the code you want to check.
3.
Select Edit > Balance Braces.
All of the code between the enclosing parentheses, braces, or square brackets is selected.
Choosing Edit > Balance Braces again selects all of the code inside the parentheses, braces,
or square brackets that enclose the new selection.
576
Chapter 21: Optimizing and Debugging Your Code
Checking for browser compatibility
Dreamweaver enables you to create web pages with elements that are supported by all major
graphical browsers (such as images and text), as well as with elements that are supported only
by newer browsers (such as CSS styles).
You should determine who the audience for your site is likely to be, and what browsers they’re
likely to use. If most of your users will be using Netscape 4 (as is still true in some academic
intranet environments, for example), you should avoid using tags that aren’t supported in
that browser.
The Check Target Browsers feature tests the code in your documents to see if any of the tags,
attributes, CSS properties, or CSS values are unsupported by your target browsers. The check
does not alter the document in any way.
The target browser check gives information about three levels of potential problems: errors,
warnings, and informational messages. The following descriptions explain the differences
between those levels:
■
An error indicates code that may cause a serious visible problem in a particular browser,
such as causing parts of a page to disappear. (In some cases, code with an unknown effect
is also marked as an error.)
■
A warning indicates a piece of code that won’t be displayed correctly in a particular
browser, but that won’t cause any serious display problems.
■
An informational message indicates code that isn’t supported in a particular browser, but
that has no visible effect; for example, the img tag’s galleryimg attribute isn’t supported
in some browsers, but those browsers ignore that attribute, so it has no visible effect.
By default, Dreamweaver automatically performs a target browser check whenever you open a
document. You can also run a target browser check manually on a document, on a folder, or
on an entire site.
N OT E
The target browser check is not updated continually. After you make changes to code,
run the target browser check manually to confirm that you’ve eliminated code that
doesn’t work with your target browsers.
The target browser check does not check scripts in your site. Also, the target browser check is
not a syntax validator; it detects only markup that isn’t supported in your target browsers.
NO T E
The Check Target Browsers feature uses text files called browser profiles to determine
which tags particular browsers support. For information on how to modify the existing
profiles or to create new ones, see “Customizing Dreamweaver” at
www.macromedia.com/go/dreamweaver_support.
Checking for browser compatibility
577
To select browsers for Dreamweaver to check against:
1.
Select Settings from the Target Browser Check menu in the Document toolbar.
The Check Target Browsers dialog box appears.
2.
Select the checkbox next to each browser you want to check.
3.
For each selected browser, select a minimum version to check against from the
corresponding pop-up menu.
For example, to verify that all of the document’s markup is supported in Microsoft
Internet Explorer 3.0 and later and Netscape Navigator 4.0 and later, select the
checkboxes next to those browser names, and select 3.0 from the Microsoft Internet
Explorer pop-up menu and 4.0 from the Netscape Navigator pop-up menu.
To view the results of an automatic target browser check, do one of the
following:
■
Open a file and view the file in Code view (View > Code or View > Code and Design).
■
After making a change in Code view, click the Refresh button in the Property inspector or
press F5.
A wavy red underline appears under the name of every item that’s considered an error in one
of your target browsers. (Warnings and informational messages are not marked in Code view;
to view warnings and informational messages, view the report for the entire document.) If
Dreamweaver finds no unsupported markup, then nothing is underlined, and the Target
Browser Check menu icon in the Document toolbar changes to indicate that there are no
errors.
TIP
To easily use various commands related to target browser checks, select a command
from the context menu by right-clicking (Windows) or Control-clicking (Macintosh) any
red-underlined item.
To see which browsers don’t support a specific red-underlined item:
■
Position the pointer to point to the red-underlined text.
A tooltip appears, indicating which browsers don’t support that item.
To view the Check Target Browser report for the entire document:
■
In the Target Browser Check menu in the Document toolbar, select Show All Errors.
The Results panel group appears, with the Target Browser Check panel selected. Errors are
marked with a red exclamation mark icon, warnings are marked with a yellow exclamation
mark icon, and informational messages are marked with a word-balloon icon.
578
Chapter 21: Optimizing and Debugging Your Code
To view a long error message in the Target Browser Check panel:
1.
Open the Target Browser Check panel.
2.
Select an error message that’s too long to read in the panel.
3.
Click the More Info button.
A Description dialog box appears, displaying the full text of the selected error message.
To disable the automatic target browser check:
■
Deselect Auto-Check On Open from the Target Browser Check menu in the
Document toolbar.
To jump to the next or previous error in the code:
■
Select Next Error or Previous Error from the Target Browser Check menu in the
Document toolbar.
To jump to a specific error from the Target Browser Check panel:
■
Double-click the error message.
The unsupported markup is selected in Code view.
To run a target browser check manually on the current file:
■
Select File > Check Page > Check Target Browsers.
The report appears in the Target Browser Check panel (in the Results panel group).
To run a target browser check manually on a site or a set of selected files:
1.
In the Local view of the Files panel, select a set of files, or select the folder that contains the
entire site.
2.
Select File > Check Page > Check Target Browsers.
The report appears in the Target Browser Check panel (in the Results panel group).
3.
To cancel the report while it’s running, click the Stop button in the Target Browser
Check panel.
To switch between viewing the current document report and viewing the full
site report:
■
In the Target Browser Check panel, select Current Document or Site Report from the
pop-up menu.
Checking for browser compatibility
579
To save a target browser check report:
■
Click the Save Report button in the Target Browser Check panel.
N OT E
The target browser check report is not saved automatically; if you want to keep a
copy for future reference, save it.
To view a target browser check report in a browser:
■
Click the Browse Report button in the Target Browser Check panel.
To fix an error:
■
Remove the unsupported code, or change it to other code that’s supported by your
target browsers.
To specify that Dreamweaver should ignore a particular type of error:
■
Right-click (Windows) or Control-click (Macintosh) red-underlined code, and select
Ignore Error from the context menu.
That type of error is changed to a warning, and Dreamweaver stops underlining that type of
error in all documents.
Validating your tags
You can use Dreamweaver to find out if your code has tag or syntax errors. Dreamweaver can
validate documents in many languages, including HTML, XHTML, ColdFusion Markup
Language (CFML), JavaServer Pages (JSP), Wireless Markup Language (WML), and XML.
N OT E
To validate your document for accessibility, see “Testing your site” on page 152.
You can validate the current document or a selected tag.
To validate your tags:
1.
Do one of the following:
■
For an XML (or XHTML) file, select File > Check Page > Validate as XML.
■
Otherwise, select File > Check Page > Validate Markup.
The Validation tab of the Results panel either displays a “No errors or warnings” message
or lists the syntax errors it found.
2.
Double-click an error message to highlight the error in the document.
3.
To save the report as an XML file, click the Save Report button.
580
Chapter 21: Optimizing and Debugging Your Code
4.
To view the report in your primary browser (which lets you print the report), click the
Browse Report button.
You can set preferences for the Validator, such as specifying the tag-based languages against
which the Validator should check, the specific problems that the Validator should check for,
and the types of errors that the Validator should report. For more information, see “Setting
Validator preferences” on page 536.
Related topics
■
“Checking for browser compatibility” on page 577
Making pages XHTML-compliant
When you create a new page, you can make it XHTML-compliant. You can also make an
existing HTML document XHTML-compliant.
To create a new, XHTML-compliant document:
1.
Select File > New.
The New Document dialog box appears.
2.
Select a category and type of page to create.
3.
Select one of the XHTML document type definitions (DTD) from the Document Type
(DTD) pop-up menu.
For example, you can make an HTML document XHTML-compliant by selecting
XHTML 1.0 Transitional or XHTML 1.0 Strict from the pop-up menu.
N OT E
4.
Not all document types can be made XHTML-compliant.
Click OK.
To create XHTML-compliant documents by default:
1.
Select Edit > Preferences or Dreamweaver > Preferences (Mac OS X) and select the New
Document category.
2.
In the New Document category, select a default document and select one of the XHTML
document type definitions (DTD) from the Default Document Type (DTD) pop-up
menu.
For example, you can make an HTML document XHTML-compliant by selecting
XHTML 1.0 Transitional or XHTML 1.0 Strict from the pop-up menu.
3.
Click OK.
Making pages XHTML-compliant
581
To make an existing HTML document XHTML-compliant:
■
Open a document, then do one of the following:
■
For a document without frames, select File > Convert, and then select one of the
XHTML document type definitions.
For example, you can make an HTML document XHTML-compliant by selecting
XHTML 1.0 Transitional or XHTML 1.0 Strict from the pop-up menu.
■
For a document with frames, select a frame and select File > Convert, and then select
one of the XHTML document type definitions.
To convert the whole document, repeat this step for every frame and the frameset
document.
NO T E
You can’t convert an instance of a template, because it must be in the same
language as the template on which it’s based. For example, a document based
on an XHTML template will always be in XHTML, and a document based on a
non-XHTML-compliant HTML template will always be HTML and can’t be
converted to XHTML or any other language.
Related topics
■
“About the XHTML code generated by Dreamweaver” on page 549
Using the ColdFusion debugger
(Windows only)
If you’re a ColdFusion developer using Macromedia ColdFusion as your Dreamweaver testing
server, you can view ColdFusion debugging information without leaving Dreamweaver.
NO T E
This feature is not supported on the Macintosh. Macintosh developers can use Preview
in Browser (F12) to open a ColdFusion page in a separate browser. If the page contains
errors, information about the possible causes for the errors appears at the bottom of the
page.
If you’re running ColdFusion MX 6.1 or earlier, make sure debugging settings are enabled in
ColdFusion Administrator before you begin debugging. For more information, see the
ColdFusion documentation in Using Dreamweaver (Help > Using ColdFusion). If you’re
running ColdFusion MX 7 or later, Dreamweaver enables the settings for you.
582
Chapter 21: Optimizing and Debugging Your Code
Also, make sure your Dreamweaver testing server is running ColdFusion. For more
information on the Dreamweaver testing server, see “Specifying where dynamic pages can be
processed” on page 606.
TI P
To ensure the debug information is refreshed every time a page is displayed in the
internal browser, make sure Internet Explorer checks for newer versions of the file every
time the file is requested. In Internet Explorer, select Tools > Internet Options, select the
General tab, and click the Settings button in the Temporary Internet Files area. In the
Settings dialog box, select the Every Visit to Page option.
To debug a ColdFusion page:
1.
Open the ColdFusion page in Dreamweaver.
2.
Click the Server Debug icon on the Document toolbar.
Dreamweaver requests the page from the ColdFusion server and displays it in an internal
Internet Explorer browser window. If the page contains errors, possible causes for the
errors appear at the bottom of the page.
At the same time, a Server Debug panel opens. The panel provides a large amount of
useful information, such as all the pages the server processed to render the page, all the
SQL queries executed on the page, and all the server variables and their values, if any. The
panel also provides a summary of execution times.
3.
If an Exceptions category appears in the Server Debug panel, click the Plus (+) icon to
expand the category.
The Exceptions category appears if the server encountered a problem or problems with the
page. Expand the category to find out more about the problem.
4.
In the Location column of the Server Debug panel, click the page’s URL to open the page
in Code view and fix it.
If Dreamweaver can locate the page, the page opens with the problem line or lines
highlighted. If Dreamweaver cannot locate the page, it asks you for the location.
5.
Fix the error, save the file to the server, and click browse.
Dreamweaver renders the page in the internal browser again and updates the Server
Debug panel. If there are no more problems with the page, the Exceptions category does
not reappear in the panel.
6.
To leave debug mode, switch to Code view (View > Code) or Design view (View >
Design).
Using the ColdFusion debugger (Windows only)
583
584
Chapter 21: Optimizing and Debugging Your Code
22
CHAPTER 22
Editing Code in Design View
Macromedia Dreamweaver 8 lets you visually create and edit web pages without worrying
about the underlying source code, but there are times when you might need to edit the code
for greater control or to troubleshoot your web page. Dreamweaver lets you edit some code
while working in Design view.
This chapter is designed for people who prefer to work in Design view, but who also want
quick access to the code.
The chapter contains the following topics:
Editing code with the Property inspector . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .585
Changing attributes with the Tag inspector . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .586
Editing code with the Quick Tag Editor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 587
Editing code with the tag selector. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 590
Editing scripts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 591
Working with server-side includes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 593
Using JavaScript behaviors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 594
Viewing and editing head content. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 595
Editing code with the Property inspector
You can use the Property inspector to inspect and edit the attributes of text or of objects on
your page. The properties shown in the Property inspector generally correspond to attributes
of tags; changing a property in the Property inspector generally has the same effect as
changing the corresponding attribute in Code view.
NO TE
The Tag inspector and the Property inspector both allow you to view and edit a tag’s
attributes. The Tag inspector allows you to view and edit every attribute associated with
a given tag. The Property inspector shows only the most common attributes, but
provides a richer set of controls for changing those attributes’ values, and allows you to
edit certain objects (such as table columns) that don’t correspond to specific tags.
585
To use the Property inspector:
1.
Click in text or select an object on the page.
The Property inspector for the text or object appears below the Document window. If the
Property inspector is not visible, select Window > Properties.
2.
Make changes to the attributes in the Property inspector.
Related topics
■
“Using the Property inspector” on page 59
Changing attributes with the Tag
inspector
You can use the Tag inspector to edit tags and objects using a property sheet similar to the
ones found in other integrated development environments (IDEs).
N OT E
The Tag inspector and the Property inspector both allow you to view and edit a tag’s
attributes. The Tag inspector enables you to view and edit every attribute associated
with a given tag. The Property inspector shows only the most common attributes, but
provides a richer set of controls for changing those attributes’ values, and allows you to
edit certain objects (such as table columns) that don’t correspond to specific tags.
To edit attributes using the Tag inspector:
1.
Do one of the following in the Document window:
■
■
2.
In Code view (or the Code inspector), click anywhere in a tag’s name or in its
contents.
In Design view, select an object, or select a tag in the Tag Selector.
Open the Tag inspector (Window > Tag Inspector), and select the Attributes tab.
The selection’s attributes and their current values appear in the Tag inspector.
3.
Do any of the following in the Tag inspector:
■
To view the attributes organized by category, click the Show Category View button.
■
To view the attributes in an alphabetical list, click the Show List View button.
■
To change an attribute value, select the value and edit it (see the procedure below).
■
■
586
To add a value for an attribute with no value, click in the attribute-value column to
the right of the attribute and add a value (see the procedure below).
To delete an attribute value, select the value and press Backspace (Windows) or Delete
(Macintosh).
Chapter 22: Editing Code in Design View
■
To change the name of an attribute, select the attribute name and edit it.
NO TE
■
4.
If you change the name of a standard attribute and then add a value for that
attribute, the attribute and its new value move to the appropriate category.
To add a new attribute not already listed, click in the empty space below the last listed
attribute name and type a new attribute name.
Press Enter (Windows) or Return (Macintosh), or click elsewhere in the Tag inspector, to
update the tag in your document.
To edit or add an attribute value, do one of the following:
■
Type a new value for the attribute in the attribute-value column, to the right of the
attribute name.
■
If the attribute takes pre-defined values, select a value from the pop-up menu (or the color
picker) to the right of the attribute-value column.
■
If the attribute takes a URL value, click the Browse button or use the Point-to-File icon to
select a file, or type the URL in the text box.
■
If the attribute takes a value from a source of dynamic content (such as a database), click
the Dynamic Data button to the right of the attribute-value column. Then select a source.
For information on defining sources of dynamic content, see “Defining Sources of
Dynamic Content” on page 685.
Related topics
■
“Editing code with the Property inspector” on page 585
■
“Using JavaScript Behaviors” on page 493
■
“Using Cascading Style Sheets to format text” on page 394
Editing code with the Quick Tag Editor
You can use the Quick Tag Editor to quickly inspect and edit HTML tags without leaving
Design view. To open the Quick Tag Editor, press Control+T (Windows) or Command+T
(Macintosh). For more information, see Using Dreamweaver.
Inserting an HTML tag with the Quick Tag Editor
You can use the Quick Tag Editor to insert an HTML tag in your document.
Editing code with the Quick Tag Editor
587
To insert an HTML tag with the Quick Tag Editor:
1.
In Design view, click in the page to place the insertion point where you want to insert code.
2.
Press Control+T (Windows) or Command+T (Macintosh).
The Quick Tag Editor opens in Insert HTML mode.
3.
Enter the HTML tag and press Enter.
The tag is inserted into your code, along with a matching closing tag if applicable.
4.
Press Escape to exit without making any changes.
Related topics
■
“Applying HTML to a selection with the Quick Tag Editor” on page 589
■
“Using the hints menu in the Quick Tag Editor” on page 589
Editing an HTML tag with the Quick Tag Editor
You can use the Quick Tag Editor to edit an HTML tag in your document.
To edit an HTML tag with the Quick Tag Editor:
1.
Select an object in Design view.
You can also select the tag you want to edit from the tag selector at the bottom of the
Document window. For more information, see “Editing code with the tag selector”
on page 590.
2.
Press Control+T (Windows) or Command+T (Macintosh).
The Quick Tag Editor opens in Edit Tag mode.
3.
Enter new attributes, edit existing attributes, or edit the tag’s name.
4.
Press Tab to move forward from one attribute to the next; press Shift+Tab to move back.
By default, changes are applied to the document when you press Tab or Shift+Tab. To
disable the automatic updates, select Edit > Preferences > Quick Tag Editor or
Dreamweaver > Preferences > Quick Tag Editor (Mac OS X). The Quick Tag Editor
Preferences dialog box appears. Deselect the Apply Changes Immediately While Editing
option and click OK.
For more information, click the Help button in the dialog box.
5.
To close the Quick Tag Editor and apply all the changes, press Enter.
6.
To exit without making any further changes, press Escape.
588
Chapter 22: Editing Code in Design View
Related topics
■
“Inserting an HTML tag with the Quick Tag Editor” on page 587
■
“Using the hints menu in the Quick Tag Editor” on page 589
Applying HTML to a selection with the Quick Tag
Editor
You can use the Quick Tag Editor to wrap the current selection with opening and closing
HTML tags.
To apply HTML to a selection with the Quick Tag Editor:
1.
Select unformatted text or an object in Design view.
N OT E
2.
If you select text or an object that includes an opening or closing HTML tag, the
Quick Tag Editor opens in Edit Tag mode instead of Wrap Tag mode.
Press Control+T (Windows) or Command+T (Macintosh), or click the Quick Tag Editor
button in the Property inspector.
The Quick Tag Editor opens in Wrap Tag mode.
3.
Enter a single opening tag, such as strong, and press Enter (Windows) or Return
(Macintosh).
The tag is inserted at the beginning of the current selection, and a matching closing tag is
inserted at the end.
4.
To exit without making any changes, instead of pressing Enter, press Escape.
Using the hints menu in the Quick Tag Editor
While in the Quick Tag Editor, you can access an attributes hint menu that lists all the valid
attributes of the tag you are editing or inserting.
You can also disable the hints menu or adjust the delay before the menu pops up in the Quick
Tag Editor.
To see a hints menu listing valid attributes for a tag, pause briefly while editing an attribute
name in the Quick Tag Editor. A hints menu appears, listing all the valid attributes for the tag
you’re editing.
Editing code with the Quick Tag Editor
589
Similarly, to see a hints menu listing valid tag names, pause briefly while entering or editing a
tag name in the Quick Tag Editor.
NO T E
The Quick Tag Editor code hints preferences are controlled by the normal code hints
preferences. For more information, see “Setting code hints preferences” on page 535.
To use a hints menu:
1.
Do one of the following:
■
Begin to type a tag or attribute name. The selection in the Code Hints menu jumps to
the first item that starts with the letters you typed.
■
Use the Up and Down Arrow keys to select an item.
■
Use the scroll bar to find an item.
2.
Press Enter to insert the selected item, or double-click an item to insert it.
3.
To dismiss the hints menu without inserting an item, press Escape or simply continue
typing.
To disable the hints menu or change the delay before it appears:
1.
Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh) and select
Quick Tag Editor.
2.
To disable the hints menu, deselect the Enable Tag Hints option.
3.
To change the delay before the menu appears, adjust the Delay slider.
The Quick Tag Editor Preferences dialog box appears.
For more information, click the Help button in the dialog box.
4.
Click OK.
Related topics
■
“Editing an HTML tag with the Quick Tag Editor” on page 588
Editing code with the tag selector
You can use the tag selector to select, edit, or remove tags without leaving Design view. The
tag selector is located in the status bar at the bottom of the Document window and shows a
series of tags, as follows:
590
Chapter 22: Editing Code in Design View
To edit a tag:
1.
Click in the document.
The tags that apply at the insertion point appear in the tag selector.
2.
Right-click (Windows) or Control-click (Macintosh) a tag in the tag selector.
A pop-up menu appears.
3.
Select Edit Tag from the menu.
The Quick Tag Editor appears. For more information, see “Editing an HTML tag with the
Quick Tag Editor” on page 588.
To remove a tag:
1.
Click in the document.
The tags that apply at the insertion point appear in the tag selector.
2.
Right-click (Windows) or Control-click (Macintosh) a tag in the tag selector.
A pop-up menu appears.
3.
Select Remove Tag from the menu.
To select an object corresponding to a tag:
1.
Click in the document.
The tags that apply at the insertion point appear in the tag selector.
2.
Click a tag in the tag selector.
The object represented by the tag is selected on the page.
TIP
Use this technique to select individual table rows (tr tags) or cells (td tags).
Editing scripts
You can work with client-side JavaScripts and VBScripts in both Code and Design view.
Writing a client-side script in Design view
You can write a JavaScript or VBScript for your page without leaving Design view.
Before starting, select View > Visual Aids > Invisible Elements to ensure that script markers
will appear on the page.
Editing scripts
591
To insert a client-side script in Design view:
1.
Place the insertion point where you want the script.
2.
Select Insert > Script Objects > Script.
The Script dialog box appears.
3.
Complete the dialog box and click OK.
For more information, click the Help button in the dialog box.
Linking to an external script file
You can create a link in your document to an external script file without leaving Design view.
Before starting, select View > Visual Aids > Invisible Elements to ensure that script markers
will appear on the page.
To link to an external script file:
1.
Place the insertion point where you want the script.
2.
Select Insert > Script Objects > Script.
The Script dialog box appears.
3.
Click OK without typing anything in the Content box.
4.
Select the script marker in Design view of the Document window.
5.
In the Property inspector, click the folder icon and browse to and select the external script
file, or type the filename in the Source box.
Editing a script in Design view
You can edit a script without leaving Design view.
Before starting, select View > Visual Aids > Invisible Elements to ensure that script markers
will appear on the page.
To edit the script in Design view:
1.
Select the script marker.
2.
In the Property inspector, click the Edit button.
The script appears in the Script Properties dialog box.
592
Chapter 22: Editing Code in Design View
If you linked to an external script file, the file opens in Code view, where you can make
your edits.
N OT E
3.
If there is code between the script tags, the Script Properties dialog box opens even
if there is also a link to an external script file.
Edit the script and click OK.
For more information, click the Help button in the dialog box.
Working with server-side includes
Server-side includes are instructions to the web server to include a specified file in a web page
before serving the page to the browser. For more information, see “Server-side includes”
on page 554.
You can use Dreamweaver to insert server-side includes in your pages, edit the includes, or
preview pages containing includes.
Inserting a server-side include
You can use Dreamweaver to insert server-side includes in your page.
To insert a server-side include:
1.
Select Insert > Server-Side Include.
2.
In the dialog box that appears, browse to and select a file.
By default, Dreamweaver inserts a File type of include.
3.
To change the type of the include, select the server-side include in the Document window
and change the type in the Property inspector (Window > Properties), as follows:
■
■
If your server is an Apache web server, select Virtual. In Apache, Virtual works in all
cases, while File works only in some cases.
If your server is a Microsoft Internet Information Server (IIS), select File. (Virtual
works with IIS only in certain specific circumstances.)
N OT E
■
Unfortunately, IIS won’t allow you to include a file in a folder above the current
folder in the folder hierarchy, unless special software has been installed on the
server. If you need to include a file from a folder higher in the folder hierarchy on
an IIS server, ask your system administrator if the necessary software is installed.
For other kinds of servers, or if you don’t know what kind of server you’re using, ask
your system administrator which option to use.
Working with server-side includes
593
To change which file is included:
1.
Select the server-side include in the Document window.
2.
Open the Property inspector (Window > Properties).
3.
Do one of the following:
■
Click the folder icon and browse to and select a new file to include.
■
In the text box, type the path and filename of the new file to include.
Related topics
■
“Server-side includes” on page 554
Editing the contents of a server-side include
You can use Dreamweaver to edit server-side includes. To edit the content associated with the
included file, you must open the file.
To edit a server-side include:
1.
Select the server-side include in either Design view or Code view, and click Edit in the
Property inspector.
The included file opens in a new Document window.
2.
Edit the file, then save it.
The changes are immediately reflected in the current document and in any subsequent
document you open that includes the file.
3.
Upload the include file to the remote site if necessary.
Related topics
■
“Server-side includes” on page 554
Using JavaScript behaviors
The Behaviors tab of the Tag inspector allows you to easily attach JavaScript (client-side)
behaviors to page elements. For more information, see “Using the behavior actions that come
with Dreamweaver” on page 499.
594
Chapter 22: Editing Code in Design View
Viewing and editing head content
You can view the elements in the head section of a document using the View menu, the
Document window’s Code view, or the Code inspector.
To view elements in the head section of a document:
■
Select View > Head Content. For each element of the head content, a marker appears at
the top of the Document window in Design view.
NO T E
If your Document window is set to show only Code view, View > Head Content
is dimmed.
To insert an element into the head section of a document:
1.
2.
Do one of the following:
■
In the Insert bar’s Head category, select click one of the object buttons.
■
Select an item from the Insert > Head Tags submenu.
Enter options for the element in the dialog box that appears, or in the Property inspector.
To edit an element in the head section of a document:
1.
Select View > Head Content.
2.
Click one of the icons in the head section to select it.
3.
Set or modify the properties of the element in the Property inspector.
For information about the properties of specific head elements, see Using Dreamweaver.
Viewing and editing head content
595
596
Chapter 22: Editing Code in Design View
PART 6
6
Preparing to Build Dynamic
Sites
If you’re building a dynamic web application, start by setting up an
application server and connecting to a database.
This part contains the following chapters:
Chapter 23: Setting Up a Web Application . . . . . . . . . . . . . . . . . 599
Chapter 24: Database Connections for ColdFusion Developers 611
Chapter 25: Database Connections for ASP.NET Developers . 615
Chapter 26: Database Connections for ASP Developers. . . . . . 621
Chapter 27: Database Connections for JSP Developers . . . . . 633
Chapter 28: Database Connections for PHP Developers. . . . . . 641
Chapter 29: Troubleshooting Database Connections . . . . . . . . 643
597
CHAPTER 23
23
Setting Up a Web
Application
This chapter describes how to configure your system to build web applications in
Macromedia Dreamweaver 8.
What you need to build web applications
To build web applications in Dreamweaver, you need the following software:
■
A web server (see “Setting up a web server” on page 600)
■
An application server that works with your web server (see “Setting up an application
server” on page 601)
N OT E
In the context of web applications, the terms web server and application server refer
to software, not hardware.
If you want to use a database with your application, you need the following additional
software:
■
A database system
■
A database driver that supports your database
For information on setting up a database for your web application, see “Connecting to a
database” on page 609.
Several web hosting companies offer plans that let you use their software to test and deploy
web applications. In some cases, you can install the required software on the same computer as
Dreamweaver for development purposes. You can also install the software on a network
computer (typically a Windows 2000 or XP computer) so that other developers on your team
can work on a project.
599
Setting up a web server
To run web applications, you need a web server. A web server is software that serves files in
response to requests from web browsers. A web server is sometimes called an HTTP server.
Common web servers include Microsoft Internet Information Server (IIS), Netscape
Enterprise Server, Sun ONE Web Server, and Apache HTTP Server.
If you’re not using a web hosting service, choose a web server and install it on your local
computer or on a remote computer. Windows users who want to develop ColdFusion web
applications can use the web server included in the developer edition of the ColdFusion MX 7
application server, which you can install and use for free. For more information, see
“Installing a ColdFusion application server” on page 602.
Other Windows users can run a web server on their local computer by installing IIS. This web
server may already be installed on your system. Check your folder structure to see if it
contains a C:\Inetpub or D:\Inetpub folder. IIS creates this folder during installation. If you
want to install IIS, see “Installing a Web Server” in Getting Started with Dreamweaver.
ASP.NET pages only work with one web server: Microsoft IIS 5 or higher. Because IIS 5 is a
service of the Windows 2000 and Windows XP Professional operating systems, you can use
these two versions of Windows to host ASP.NET applications. However, you can develop (as
opposed to host) ASP.NET applications on any computer running Dreamweaver, including
the Macintosh.
If you’re a Macintosh user, you can use a web hosting service or install the required software
on a remote computer. You can also develop PHP sites locally using the Apache web server
and PHP application server installed with your operating system. For more information, see
“Installing a PHP application server” on page 604.
For information on installing and configuring other web servers, see the server vendor’s
documentation or your system administrator.
600
Chapter 23: Setting Up a Web Application
Setting up an application server
To run web applications, your web server needs to work with an application server. An
application server is software that helps a web server process dynamic pages.
Choosing your application server
The application server you choose depends on several factors, including your budget, the
server technology you want to use (ColdFusion, ASP.NET, ASP, JSP, or PHP), and your
choice of web server.
Budget Some vendors sell high-end application servers that are expensive to buy and
administer. Others vendors provide easier, more cost-effective solutions (examples include
Macromedia ColdFusion and JRun servers). Some application servers are built into web
servers (such as Microsoft IIS) and others can be downloaded for free from the Internet (such
as Jakarta Tomcat and PHP).
Server technology Application servers use different technologies. Dreamweaver supports
five server technologies: ColdFusion, ASP.NET, ASP, JSP, and PHP. For more information,
see “Choosing a server technology” in Getting Started with Dreamweaver. The following table
shows common application servers available for the five server technologies supported by
Dreamweaver:
Server technology
Application server
ColdFusion
Macromedia ColdFusion MX 7
ASP.NET
Microsoft IIS 6 with .NET Framework
ASP
Microsoft IIS
Sun ONE Active Server Pages
JSP
Macromedia JRun
Sun ONE Application Server
IBM WebSphere
Apache Tomcat
BEA WebLogic
PHP
PHP server
Web server
Your choice of application server can also depend on the web server you want
to use. Make sure the application works with your web server. For example, the .NET
Framework only works with IIS 5 or higher.
Setting up an application server
601
Installing a ColdFusion application server
To run ColdFusion pages, you need the ColdFusion application server. This server is available
for Windows, Linux, Solaris, and HP-UX systems.
Windows users can download and install a fully functional, developer edition of ColdFusion
MX 7 from the Macromedia website at www.macromedia.com/go/coldfusion/. A copy of
ColdFusion MX 7 Developer Edition is also available on the Dreamweaver CD (Windows
version only).
NO TE
The Developer Edition is for non-commercial use for developing and testing web
applications. It is not licensed for deployment. It supports requests from the local host
and two remote IP addresses. You can use it to develop and test your web applications
as long as you want; the software does not expire. For more information, see
“ColdFusion MX 7 product editions” in Using ColdFusion (Help > Using ColdFusion).
During installation, you can configure ColdFusion to use the web server built into
ColdFusion or another web server installed on your system. Generally, it’s best to match your
development environment to your production environment as closely as possible. Therefore,
if you have an existing web server such as Microsoft IIS on your development computer, you
may want to select it instead of the built-in ColdFusion web server.
Macintosh users can use a web hosting service with a ColdFusion plan or install ColdFusion
on a remote Windows, Linux, Solaris, or HP-UX computer running a web server. You can
also install ColdFusion on a Mac OS X computer running a J2EE server such as JRun or
Tomcat. For more information, see the Macromedia website at www.macromedia.com/go/
cfmx7_mac.
After installing the application server, create a root folder for your web application. See
“Creating a root folder for the application” on page 605.
Installing an ASP.NET application server
To develop and run ASP.NET pages, you need the following software:
■
A Windows 2000 or Windows XP Professional computer running IIS 5 or later
■
The Microsoft .NET Framework 1.1, which you can download from the Microsoft
website
■
The Microsoft .NET Framework 1.1 Software Development Kit (SDK), which you can
download from the Microsoft website
Make sure both the Framework and the SDK is installed and running on a Windows 2000 or
Windows XP Professional system running IIS 5 or higher
602
Chapter 23: Setting Up a Web Application
To install the .NET Framework and SDK:
1.
Check to see if the .NET Framework is installed on your system by reviewing the list of
applications in the Add or Remove Programs dialog box (Start > Control Panel > Add or
Remove Programs).
If Microsoft .NET Framework 1.1 listed, the Framework is already installed and you do
not need to install it again. Skip to step 3.
2.
If the .NET Framework is not installed on your system, install the Microsoft .NET
Framework 1.1 Redistributable package from the Microsoft website at http://
msdn.microsoft.com/netframework/downloads/framework1_1/ and follow the
installation instructions on the website.
You install the Framework as a Windows update.
3.
Download the Microsoft .NET Framework 1.1 Software Development Kit (SDK) from
the same website and follow the installation instructions.
It is highly recommended that you also install the Microsoft Data Access Components
(MDAC) 2.7 package after installing the .NET Framework and SDK. You can download and
install the MDAC 2.7 package for free from the Microsoft website at http://
msdn.microsoft.com/data/mdac/downloads/.
Macintosh users can use a web hosting service with an ASP.NET plan or install the .NET
Framework and SDK on a remote Windows 2000 or Windows XP Professional computer
running IIS 5 or later.
After installing the .NET Framework and SDK, create a root folder for your web application.
See “Creating a root folder for the application” on page 605.
Installing an ASP application server
To run ASP pages, you need an application server that supports Microsoft Active Server Pages
2.0., such as Microsoft IIS, which comes with Windows 2000 and Windows XP Professional.
Windows users can install and run IIS on their local computer. For instructions, see
“Installing a Web Server” in Getting Started with Dreamweaver.
Macintosh users can use a web hosting service with an ASP plan or install IIS on a
remote computer.
After installing IIS, create a root folder for your web application. See “Creating a root folder
for the application” on page 605.
Setting up an application server
603
Installing a JSP application server
To run JSP pages, you need an application server that supports JavaServer Pages. Here are
some popular choices:
■
Macromedia JRun for Windows, Mac OS X, Linux, Solaris, or UNIX. You can download
a trial version of JRun from the Macromedia website at www.macromedia.com/go/jrun/.
■
Tomcat for Windows and UNIX (including Mac OS X). You can download a copy of
Tomcat from the Jakarta Project website at http://jakarta.apache.org/tomcat/. For more
information on installing Tomcat on a Macintosh, see the Apple website at http://
developer.apple.com/internet/java/tomcat1.html.
After installing a JSP application server, create a root folder for your web application. See
“Creating a root folder for the application” on page 605.
Installing a PHP application server
To run PHP pages, you need the PHP application server, which is open-source software
available on the web. Editions of the application server exist for Windows, Linux, UNIX, HPUX, Solaris, and Mac OS X systems. The application server works with the following web
servers: Apache, Microsoft IIS, Netscape and Sun ONE servers, and almost all web servers
that support the CGI interface.
You can download the PHP application server from the PHP website at www.php.net/
downloads.php. With PHP 5, the MySQL extension that allows PHP to work with a MySQL
database server is not installed or enabled by default by the Windows installer. You must
install and enable it separately. For instructions, see “Installing a PHP application server
(Windows)” in Getting Started with Dreamweaver. For more information on the MySQL
extension, see the PHP website at www.php.net/manual/en/ref.mysql.php.
If you’re a Macintosh user, you can use the PHP application server installed with your
operating system. For more information, see the following websites:
■
www.macromedia.com/go/php_macintosh/
■
http://developer.apple.com/internet/opensource/php.html
For more information on the application server, see the PHP documentation, which you can
also download from the PHP website at www.php.net/download-docs.php.
After installing the PHP application server, create a root folder for your web application.
604
Chapter 23: Setting Up a Web Application
Creating a root folder for the application
After signing up with a web hosting company or setting up the server software yourself, create
a root folder for your web application on the computer running the web server.
Make sure the folder is published by the web server—in other words, the web server can serve
any file in this folder or in any of its subfolders in response to an HTTP request from a web
browser. For example, on a computer running ColdFusion MX 7, any file in the
\CFusionMX7\wwwroot folder or any of its subfolders can be served to a web browser.
The following are the default root folders of selected web servers:
Web server
Default root folder
ColdFusion MX 7
\CFusionMX7\wwwroot
IIS
\Inetpub\wwwroot
Apache (Windows)
\apache\htdocs
Apache (Macintosh)
Users:MyUserName:Sites
Jakarta Tomcat (Windows)
\jakarta-tomcat-4.x.x\webapps\ROOT\
To test the web server, place a test HTML page in the default root folder and attempt to open
it by entering the page’s URL in a browser. The URL comprises the domain name, such as
www.mysite.com, and the filename of the HTML page, as follows:
www.mysite.com/testpage.htm
If the web server is running on your local computer, you can use localhost instead of a domain
name. Using the previous example, enter the following localhost URL depending on your
web server:
Web server
Localhost URL
ColdFusion MX 7
http://localhost:8500/testpage.htm
IIS
http://localhost/testpage.htm
Apache (Windows)
http://localhost:80/testpage.htm
Apache (Macintosh)
http://localhost/~MyUserName/testpage.htm
(where MyUserName is your Macintosh user name)
Jakarta Tomcat (Windows)
http://localhost:8080/testpage.htm
NO T E
By default the ColdFusion MX 7 web server runs on port 8500 and the Jakarta Tomcat
web server runs on port 8080.
Creating a root folder for the application
605
If the page doesn’t open as expected, check for the following errors:
■
The web server is not started. Consult the web server’s documentation for starting
instructions.
■
The file does not have an .htm or .html extension.
■
You entered the page’s file path (for example, c:\CFusionMX7\wwwroot\testpage.htm),
not its URL (for example, http://localhost:8500/testpage.htm), in the browser’s Address
text box.
■
The URL contains a typing mistake. Check for errors and make sure the filename is not
followed by a slash, such as http://localhost:8080/testpage.htm/.
After creating a root folder for your application, define a Dreamweaver site to manage your
files.
Defining a Dreamweaver site
After configuring your system to develop web applications, define a Dreamweaver site to
manage your files.
Before you start, make sure you meet the following requirements:
■
You have access to a web server. The web server can be running on your local computer,
on a remote computer such as a development server, or on a server maintained by a web
hosting company. See “Setting up a web server” on page 600.
■
An application server is installed and running on the system running your web server. See
“Setting up an application server” on page 601.
■
You created a root folder for your web application on the system running your web server.
For more information, see “Creating a root folder for the application” on page 605.
Defining a Dreamweaver site for your web application consists of three steps:
1.
Define a folder located on your hard disk as a Dreamweaver local folder to store working
copies of your site files (see “Defining a local folder” on page 607).
2.
Define a folder located on the computer running your web server as a Dreamweaver remote
folder (see “Defining a remote folder” on page 607).
3.
Specify where Dreamweaver should send dynamic pages to be processed while you work
(see “Specifying where dynamic pages can be processed” on page 608).
After the Dreamweaver site is defined, you can start building your web application.
606
Chapter 23: Setting Up a Web Application
Defining a local folder
You can define a Dreamweaver local folder for each new web application you create. The local
folder is the folder you use to store working copies of site files on your hard disk. Defining a
local folder also gives you the ability to manage your files and to transfer files to and from
your web server at the click of a button.
To define a Dreamweaver local folder:
1.
Create a folder on your local disk to store working copies of your files.
You may want to create subfolders to store image files and other assets.
2.
In Dreamweaver, select Site > Manage Sites, click the New button on the Manage Sites
dialog box, and select Site from the context menu.
The Site Definition dialog box appears.
3.
If the wizard is showing, click Advanced; then select Local Info from the Category list
(it should be the default).
4.
In the Site Name text box, enter a descriptive name for your Dreamweaver site.
5.
In the Local Root Folder text box, specify the folder you created in Step 1.
You can enter a path, or click the folder icon to browse to and select the folder.
6.
If you want, complete the other options in the Local Info category (they are not required
to make the site work).
For more information on these options, click the Help button in the dialog box.
Leave the Site Definition dialog box open. You must specify a remote folder next.
Defining a remote folder
After defining a local folder, you can define a remote folder for your Dreamweaver site. The
remote folder is the folder you created for your web application on the web server (see
“Creating a root folder for the application” on page 605).
You don’t need to define a remote folder if the folder you defined in “Defining a local folder”
on page 607 can double as the root folder for your web application. (This implies that the
web server is running on your local computer.)
To define a Dreamweaver remote folder:
1.
If the Site Definition dialog box is not open, open it by selecting Site > Manage Sites,
selecting your site from the list in the Manage Sites dialog box, and clicking Edit.
The Site Definition dialog box appears.
Defining a Dreamweaver site
607
2.
If the wizard is showing, click Advanced and select Remote Info from the Category list.
The Remote Info dialog box appears.
3.
In the Access pop-up menu, select one of the following options: Local/Network, FTP, or
RDS.
Your choice tells Dreamweaver how you want to transfer files between your local folder
and remote folder.
N OT E
To use RDS, the remote folder must be on a computer running ColdFusion.
You can also send your files to a Microsoft Visual SourceSafe application by selecting
Microsoft Visual SourceSafe. (Microsoft Visual SourceSafe is used by developers for file
version control.) If you select this option, you need to define a separate folder. For
instructions, see “Specifying where dynamic pages can be processed” on page 608.
4.
After selecting an access method, set the access options as appropriate.
For more information on these options, click the Help button in the dialog box.
Leave the Site Definition dialog box open. You need to define a folder to process dynamic
pages next.
Specifying where dynamic pages can be processed
After defining the remote folder in Dreamweaver, specify a folder where dynamic pages can be
processed. Dreamweaver uses this folder to generate dynamic content and connect to
databases while you work.
Typically, you specify the root folder you created on the web server (see “Creating a root folder
for the application” on page 605) because the server probably also runs an application server
that can handle the dynamic pages.
N OT E
The root folder can be local or remote, depending on where your web server is running.
To specify where Dreamweaver can get dynamic pages processed:
1.
If the Site Definition dialog box is not open, open it by selecting Site > Manage Sites,
selecting your site from the list in the Manage Sites dialog box, and clicking Edit.
The Site Definition dialog box appears.
608
Chapter 23: Setting Up a Web Application
2.
If the wizard is showing, click Advanced and select Testing Server from the Category list.
The Testing Server dialog box appears. Dreamweaver needs the services of a testing server
to generate and display dynamic content while you work. The testing server can be your
local computer, a development server, a staging server, or a production server. As long as it
can process the kind of dynamic pages you plan to develop, the choice doesn’t matter.
3.
Complete the dialog box and click OK.
For more information, click the Help button in the dialog box.
After defining a Dreamweaver site, you can connect to a database.
Connecting to a database
If you want to use a database with your web application, you must first connect to it. For a
general discussion of database connections, see “Understanding database connections”
on page 991.
Dreamweaver handles database connections differently depending on your choice of server
technology. See the following chapters:
■
Chapter 24, “Database Connections for ColdFusion Developers,” on page 611
■
Chapter 25, “Database Connections for ASP.NET Developers,” on page 615
■
Chapter 26, “Database Connections for ASP Developers,” on page 621
■
Chapter 27, “Database Connections for JSP Developers,” on page 633
■
Chapter 28, “Database Connections for PHP Developers,” on page 641
Connecting to a database
609
610
Chapter 23: Setting Up a Web Application
CHAPTER 24
24
Database Connections for
ColdFusion Developers
You can connect to databases when developing Macromedia ColdFusion applications with
Macromedia Dreamweaver 8.
The chapter assumes you have set up a ColdFusion web application (see Chapter 23, “Setting
Up a Web Application,” on page 599). It also assumes a database is set up on your local
computer or on a system to which you have network or FTP access.
To connect to the sample database provided by Dreamweaver, see “Setup for Sample
ColdFusion Site” in Getting Started with Dreamweaver. To learn more about databases and
database connections, see Appendix A, “Beginner’s Guide to Databases,” on page 983.
Connecting to a database
When developing a ColdFusion web application in Dreamweaver, you connect to a database
by selecting a ColdFusion data source defined in Dreamweaver or in ColdFusion
Administrator, the server’s management console.
Before you can connect to a database, make sure Dreamweaver knows where to find the
ColdFusion data sources. To retrieve the ColdFusion data sources at design time,
Dreamweaver places scripts in a folder on the computer running ColdFusion. You must
specify this folder in the Testing Server category of the Site Definition dialog box. For more
information, see “Specifying where dynamic pages can be processed” on page 608.
Next, you must create a ColdFusion data source in Dreamweaver or in ColdFusion
Administrator (if one doesn’t already exist). For more information, see “Creating or modifying
a ColdFusion data source” on page 612.
After creating a ColdFusion data source, you can use it in Dreamweaver to connect to the
database. For more information, see “Connecting to the database in Dreamweaver”
on page 613.
611
Creating or modifying a ColdFusion data source
Before you can use database information in your page, you must create a ColdFusion data
source. If you’re running ColdFusion MX 7 or later you can create or modify the data source
directly in Dreamweaver. If you’re running ColdFusion MX, you must use the server’s
management console, ColdFusion MX Administrator, to create or modify the data source.
You can still use Dreamweaver to open ColdFusion MX Administrator in that case.
To create or modify a ColdFusion data source if running ColdFusion MX 7 or
later:
1.
Make sure a computer running ColdFusion MX 7 or later is defined as a testing server for
your site.
For more information, see “Enabling the ColdFusion enhancements” on page 828.
2.
Open any ColdFusion page in Dreamweaver.
3.
To create a new data source, click the Plus (+) button in the Databases panel (Windows >
Databases) and enter the parameter values specific to the database driver in the dialog box
that appears.
N OT E
Dreamweaver displays the Plus button only if you’re running ColdFusion MX 7 or
later.
For more information, see the driver vendor’s documentation or consult your system
administrator.
4.
To modify a data source, double-click the database connection in the Databases panel and
make your changes in the connection dialog box that appears.
You can edit any parameter except the name of the data source. For more information, see
the driver vendor’s documentation or consult your system administrator.
To create or modify a ColdFusion data source if running ColdFusion MX 6.1 or
6.0:
1.
Open any ColdFusion page in Dreamweaver.
2.
In the Databases panel (Window > Databases) in Dreamweaver, click the Modify Data
Sources icon in the panel toolbar.
ColdFusion MX Administrator opens in a browser.
612
Chapter 24: Database Connections for ColdFusion Developers
3.
Log in to ColdFusion MX Administrator and create or modify the data source.
For instructions, see Using ColdFusion (Help > Using ColdFusion).
You must provide certain parameter values to create the ColdFusion data source. For the
parameter values specific to your database driver, see the driver vendor’s documentation or
consult your system administrator.
Once you create a ColdFusion data source, you can use it in Dreamweaver.
Connecting to the database in Dreamweaver
After creating a ColdFusion data source , you can use it to connect to the database in
Dreamweaver.
Open any ColdFusion page in Dreamweaver, then open the Databases panel (Window >
Databases). Your ColdFusion data sources should appear in the panel.
If the data sources do not appear, make sure you complete the checklist in the panel. Also
make sure Dreamweaver knows where to find the ColdFusion data sources. In the Testing
Server category of the Site Definition dialog box, specify the site’s root folder on the computer
running ColdFusion. For more information, see “Specifying where dynamic pages can be
processed” on page 608.
Related topics
■
Chapter 29, “Troubleshooting Database Connections,” on page 643
Editing or deleting a database connection
You edit or delete ColdFusion data sources in ColdFusion Administrator. In the Databases
panel (Window > Databases) in Dreamweaver, click the Modify Data Sources icon on the
panel toolbar. ColdFusion Administrator opens in a browser. Log in and modify the data
source. For instructions, see Using ColdFusion.
To avoid getting errors after deleting or renaming a ColdFusion data source, you should
update every recordset that uses the old data source in Dreamweaver by double-clicking the
name of the recordset in the Bindings panel and choosing a new data source.
Editing or deleting a database connection
613
614
Chapter 24: Database Connections for ColdFusion Developers
CHAPTER 25
25
Database Connections for
ASP.NET Developers
To use a database with an ASP.NET application, you need to create a database connection
in Macromedia Dreamweaver 8. This chapter describes how to create the
database connection.
NO T E
If you’re developing Microsoft Active Server Pages (ASP) applications, see Chapter 26,
“Database Connections for ASP Developers,” on page 621.
The chapter assumes you have set up an ASP.NET application (see Chapter 23, “Setting Up a
Web Application,” on page 599). It also assumes a database is set up on your local computer
or on a system to which you have network or FTP access.
To connect to the sample database provided by Dreamweaver, see “Setup for Sample
ASP.NET Site” in Getting Started with Dreamweaver. To learn more about databases and
database connections, see Appendix A, “Beginner’s Guide to Databases,” on page 983.
Connecting to a database
This section describes how to connect to a database when developing an ASP.NET application
in Dreamweaver.
Before you can connect to a database, you must obtain an OLE DB provider for your
database. If you want to connect to a Microsoft SQL Server database, you can use the
Managed Data Provider for SQL Server that is supplied by the .NET Framework Software
Development Kit (SDK). For more information, see “Obtaining an OLE DB provider for
your database” on page 616.
Once the database provider is installed, you can use it to connect to the database. For
instructions, see the following sections:
■
“Creating an ASP.NET database connection in Dreamweaver” on page 616
■
“Creating a connection using Data Link Properties” on page 617
615
Obtaining an OLE DB provider for your database
An ASP.NET application must connect to a database through an OLE DB provider. The
provider acts as an interpreter that lets an ASP.NET application communicate with a database.
For more information on OLE DB and the role of database providers, see “Communicating
with the database” on page 991.
If you want to connect to a Microsoft SQL Server database, you can use the Managed Data
Provider for SQL Server that comes with the .NET Framework 1.1 SDK. This provider,
which is optimized for SQL Server and is very fast, is installed when you install the SDK.
If you want to connect to a database other than SQL Server, make sure an OLE DB provider
for your database is installed on the computer running the .NET Framework. You can obtain
an OLE DB provider for Microsoft Access by downloading and installing the Microsoft Data
Access Components (MDAC) 2.7 package from the Microsoft website at http://
msdn.microsoft.com/data/mdac/downloads/.
You can download OLE DB providers for Oracle databases from the Oracle website at
www.oracle.com/technology/software/tech/windows/ole_db/index.html. You can also
purchase OLE DB providers from third-party vendors.
Once you have a provider for your database, you can use it to create database connections
in Dreamweaver.
Creating an ASP.NET database connection in
Dreamweaver
After obtaining an OLE DB provider for your database, you can use it to create a database
connection in Dreamweaver.
Another option is to use the Microsoft Data Link Properties dialog box to help you create the
connection. For instructions, see “Creating a connection using Data Link Properties”
on page 617.
To create a database connection for ASP.NET:
1.
Open an ASP.NET page in Dreamweaver, and then open the Databases panel
(Window > Databases).
The panel displays the connections defined for the site.
616
Chapter 25: Database Connections for ASP.NET Developers
2.
Click the Plus (+) button on the panel and select OLE DB Connection or SQL Server
Connection from the pop-up menu.
NO T E
Select SQL Server Connection only if you want to connect to a Microsoft SQL
Server database.
The OLE DB Connection or SQL Server Connection dialog box appears.
3.
Complete the dialog box and click OK.
For more information, click the Help button in the dialog box.
The new connection appears in the Databases panel.
Related topics
■
Chapter 29, “Troubleshooting Database Connections,” on page 643
Creating a connection using Data Link Properties
After obtaining an OLE DB provider for your database (see “Obtaining an OLE DB provider
for your database” on page 616), you can create a database connection by using the Data Link
Properties dialog box in Windows.
Important: You can use this method only if the OLE DB provider you want to use is installed
on the same Windows computer as Dreamweaver.
To create a database connection using Data Link Properties:
1.
Open an ASP.NET page in Dreamweaver, and then open the Databases panel
(Window > Databases).
The panel displays the connections defined for the site.
2.
Click the Plus (+) button on the panel and select OLE DB Connection from the pop-up
menu.
The OLE DB Connection dialog box appears.
3.
Click the Build button.
The Data Link Properties dialog box appears. This Windows dialog box displays the OLE
DB providers currently on the Windows computer running Dreamweaver.
4.
Complete the Data Link Properties dialog box and click OK.
Dreamweaver inserts a connection string in the OLE DB Connection dialog box.
Connecting to a database
617
5.
Click Test.
Dreamweaver attempts to connect to the database. If the connection fails, double-check
the connection string. If the connection still fails, check the settings for the folder
Dreamweaver uses to process dynamic pages (see “Specifying where dynamic pages can be
processed” on page 608).
6.
Click OK.
The new connection appears in the Databases panel.
Related topics
■
Chapter 29, “Troubleshooting Database Connections,” on page 643
Sample OLE DB connection parameters for
ASP.NET
An OLE DB connection string combines all the information your ASP.NET application
needs to connect to a database. Dreamweaver inserts this string in your page’s server-side
scripts for later processing by your application server.
Dreamweaver provides you with string templates to create OLE DB connection strings for
ASP.NET applications (see “Creating an ASP.NET database connection in Dreamweaver”
on page 616). To create a connection string, you replace placeholders in the template with the
requested parameter values. This section gives sample parameters for Microsoft Access and
SQL Server databases.
N OT E
For the parameter values specific to other databases, see the database vendor’s
documentation or consult your system administrator.
Case 1: You have the .NET Framework on your local computer and you want to connect to a
Microsoft Access database called sdSchool.mdb located in the following folder on your hard
disk: c:\Inetpub\wwwroot\SkyDiveSchool\data\sdSchool.mdb. Here are the parameters to
create this connection string:
Provider=Microsoft.Jet.OLEDB.4.0;
Data Source=c:\Inetpub\wwwroot\SkyDiveSchool\data\sdSchool.mdb;
Case 2: You use the .NET Framework on a remote development server and you want to
connect to a Microsoft Access database called mtnSchool.mdb located on the server in the
following folder: d:\users\tara\projects\MtnDrivingSchool\data\mtnSchool.mdb. Here are the
parameters to create the connection string:
Provider=Microsoft.Jet.OLEDB.4.0;
Data Source=d:\users\tara\projects\MtnDrivingSchool\data\mtnSchool.mdb;
618
Chapter 25: Database Connections for ASP.NET Developers
Case 3: You use the .NET Framework on a networked development server called Savant and
you want to connect to a Microsoft SQL Server database called pubs on the server. Your SQL
Server user name is “sa” and there is no password. If you use the Managed Data Provider for
SQL Server (that is, if you chose SQL Connection in the Databases panel), here are the
parameters to create the connection string:
Data Source=Savant;
Initial Catalog=pubs;
User ID=sa;
Password=;
Editing or deleting a database connection
When you create a database connection, Dreamweaver stores the connection information in
an include file in the Connections subfolder in the site’s local root folder. You can edit or
delete the connection information in the file manually or as follows.
To update a connection:
1.
Open an ASP.NET page in Dreamweaver, then open the Databases panel
(Window > Databases).
A list of connections appears in the panel.
2.
Right-click (Windows) or Control-click (Macintosh) the connection and select Edit
Connection from the pop-up menu.
The dialog box you used to create the connection appears.
3.
Make the changes and click OK.
Dreamweaver automatically updates the include file, which automatically updates all the
pages in the site that use the connection.
If you rename a connection, update every DataSet that uses the old connection name by
double-clicking the recordset in the Bindings panel and selecting the new connection name in
the DataSet dialog box.
Editing or deleting a database connection
619
To delete a connection:
1.
Open an ASP.NET page in Dreamweaver, and then open the Databases panel
(Window > Databases).
A list of connections appears in the panel.
2.
Right-click (Windows) or Control-click (Macintosh) the connection and select Delete
Connection from the pop-up menu.
The dialog box you used to create the connection appears.
3.
Confirm that you want to delete the connection.
NO TE
620
To avoid getting errors after deleting a connection, update every DataSet that uses
the old connection by double-clicking the name of the DataSet in the Bindings panel
and selecting a new connection in the DataSet dialog box.
Chapter 25: Database Connections for ASP.NET Developers
CHAPTER 26
26
Database Connections for
ASP Developers
To use a database with a Microsoft Active Server Pages (ASP) application, you need to create a
database connection in Macromedia Dreamweaver 8. This chapter describes how to create the
database connection.
NO T E
If you’re developing ASP.NET applications, see Chapter 25, “Database Connections for
ASP.NET Developers,” on page 615.
The chapter assumes you have set up an ASP application (see Chapter 23, “Setting Up a Web
Application,” on page 599). It also assumes a database is set up on your local computer or on
a system to which you have network or FTP access.
To connect to the sample database provided by Dreamweaver, see “Setup for Sample ASP
Site” in Getting Started with Dreamweaver. To learn more about databases and database
connections, see Appendix A, “Beginner’s Guide to Databases,” on page 983.
About database connections in ASP
An ASP application must connect to a database through an ODBC driver or an OLE DB
provider. Creating an OLE DB connection can improve the speed of your connection.
621
ASP database connections
An ASP application must connect to a database through an open database connectivity
(ODBC) driver or an object linking and embedding database (OLE DB) provider. The driver
or provider acts as an interpreter that lets the web application communicate with the database.
For more information on the role of database drivers, see “Communicating with the database”
on page 991. The following table shows some drivers you can use with Microsoft Access,
Microsoft SQL Server, and Oracle databases:
Database
Database driver
Microsoft Access
Microsoft Access Driver (ODBC)
Microsoft Jet Provider for Access (OLE DB)
Microsoft SQL
Server
Microsoft SQL Server Driver (ODBC)
Microsoft SQL Server Provider (OLE DB)
Oracle
Microsoft Oracle Driver (ODBC)
Oracle Provider for OLE DB
You can use a data source name (DSN) or a connection string to connect to the database.
A DSN is a one-word identifier, such as myConnection, that points to the database and
contains all the information needed to connect to it. You define a DSN in Windows. You can
use a DSN if you’re connecting through an ODBC driver installed on a Windows system. For
detailed instructions, see “Creating a DSN connection” on page 624.
A connection string is a hand-coded expression that identifies the database and lists the
information needed to connect to it. The following is an example:
Driver={SQL Server};Server=Socrates;Database=AcmeMktg;
UID=wiley;PWD=roadrunner
You must use a connection string if you’re connecting through one of the following:
■
An OLE DB provider
■
An ODBC driver not installed on a Windows system
For detailed instructions, see the following sections:
■
“Creating a DSN-less connection” on page 627
■
“Connecting to a database on an ISP” on page 628
N OT E
622
You can also use a connection string if you’re connecting through an ODBC driver
installed on a Windows system, but using a DSN is easier.
Chapter 26: Database Connections for ASP Developers
OLE DB connections
You can use an OLE DB provider to communicate with your database. Creating a direct
database-specific OLE DB connection can improve the speed of your connection by
eliminating the ODBC layer between your web application and the database.
If you don’t specify an OLE DB provider for your database, ASP uses the default OLE DB
provider for ODBC drivers to communicate with an ODBC driver, which in turn
communicates with the database.
OLE DB is available only on Windows NT, 2000, or XP.
Different OLE DB providers exist for different databases. You can obtain OLE DB providers
for Microsoft Access and SQL Server by downloading and installing the Microsoft Data
Access Components (MDAC) 2.5 and 2.7 packages on the Windows computer running IIS.
You can download the MDAC packages for free from the Microsoft website at http://
msdn.microsoft.com/data/mdac/downloads/.
NO TE
Make sure you install MDAC 2.5 before installing MDAC 2.7.
You can download OLE DB providers for Oracle databases from the Oracle website at
www.oracle.com/technology/software/tech/windows/ole_db/index.html (registration is
required).
In Dreamweaver, you create an OLE DB connection by including a Provider parameter in a
connection string (see “Creating a DSN-less connection” on page 627). For example, here are
parameters for common OLE DB providers for Access, SQL Server, and Oracle databases,
respectively:
Provider=Microsoft.Jet.OLEDB.4.0;...
Provider=SQLOLEDB;...
Provider=OraOLEDB;...
For the parameter value of your OLE DB provider, see your provider vendor’s documentation,
or consult your system administrator.
Related topics
■
“Creating a DSN-less connection” on page 627
About database connections in ASP
623
Creating a DSN connection
You can use a DSN to create an ODBC connection between your web application and your
database. A DSN is a name containing all the parameters needed to connect to a specific
database using an ODBC driver. For more information, see “Using a DSN” on page 995.
N OT E
Because you can only specify an ODBC driver in a DSN, you must use a connection
string if you want to use an OLE DB provider. For more information, see “OLE DB
connections” on page 623.
You can define the DSN on a local or remote Windows computer.
Related topics
“Creating a DSN-less connection” on page 627
■
Creating a connection using a local DSN
You can use a locally defined DSN to create a database connection in Dreamweaver. If you
want to use a local DSN, the DSN must be defined on the Windows computer running
Dreamweaver.
To create a database connection with a locally defined DSN:
1.
Define a DSN on the Windows computer running Dreamweaver.
For instructions, see the following articles on the Microsoft website:
■
■
2.
If the computer runs Windows 2000, see Microsoft Knowledge Base Article 300596 at
http://support.microsoft.com/default.aspx?scid=kb;en-us;300596
If the computer runs Windows XP, see Microsoft Knowledge Base Article 305599 at
http://support.microsoft.com/default.aspx?scid=kb;en-us;305599
Open an ASP page in Dreamweaver, then open the Databases panel (Window >
Databases).
Dreamweaver displays all the connections defined for the site.
624
Chapter 26: Database Connections for ASP Developers
3.
Click the Plus (+) button on the panel and select Data Source Name (DSN) from the
pop-up menu.
The Data Source Name (DSN) dialog box appears.
4.
Enter a name for the new connection.
N OT E
Do not use any spaces or special characters in the name.
5.
Select the Using Local DSN option at the bottom of the dialog box.
6.
Select the DSN you want to use from the Data Source Name (DSN) pop-up menu.
If you want to use a local DSN but haven’t defined one yet, click Define to open the
Windows ODBC Data Source Administrator. For instructions, see “Creating a DSN
connection” on page 624.
7.
If required, complete the User Name and Password text boxes.
8.
If you want, restrict the number of database items Dreamweaver retrieves at design time by
clicking Advanced, and entering a schema or catalog name.
For more information, see “Restricting database information displayed in Dreamweaver”
on page 664.
N O TE
9.
You cannot create a schema or catalog in Microsoft Access.
Click Test.
Dreamweaver attempts to connect to the database. If the connection fails, double-check
the DSN. If the connection still fails, check the settings for the folder Dreamweaver uses
to process dynamic pages (see “Specifying where dynamic pages can be processed”
on page 608).
10. Click
OK.
The new connection appears in the Databases panel.
Creating a DSN connection
625
Related topics
■
“Creating a DSN-less connection” on page 627
■
Chapter 29, “Troubleshooting Database Connections,” on page 643
Creating a connection using a remote DSN
You can use a DSN defined on a remote computer to create a database connection in
Dreamweaver. If you want to use a remote DSN, the DSN must be defined on the Windows
computer running your application server (probably IIS).
To create a database connection with a remotely defined DSN:
1.
Define a DSN on the remote system running your application server.
For instructions, see the following articles on the Microsoft website:
If the remote computer runs Windows 2000, see Microsoft Knowledge Base Article
300596 at http://support.microsoft.com/default.aspx?scid=kb;en-us;300596
■
If the remote computer runs Windows XP, see Microsoft Knowledge Base Article
305599 at http://support.microsoft.com/default.aspx?scid=kb;en-us;305599
■
2.
Open an ASP page in Dreamweaver, then open the Databases panel (Window >
Databases).
Dreamweaver displays all the connections defined for the site.
3.
Click the Plus (+) button on the panel and select Data Source Name (DSN) from the
pop-up menu.
The Data Source Name (DSN) dialog box appears.
4.
Enter a name for the new connection.
N OT E
5.
Do not use any spaces or special characters in the name.
Select the Using DSN on Testing Server option at the bottom of the dialog box.
Macintosh users can ignore this step because all database connections use DSNs on the
application server.
6.
Enter the DSN.
You can click the DSN button to connect to the server and select from the DSNs defined
on it.
7.
If required, complete the User Name and Password text boxes.
626
Chapter 26: Database Connections for ASP Developers
8.
If you want, restrict the number of database items Dreamweaver retrieves at design time by
clicking Advanced and entering a schema or catalog name.
For more information, see “Restricting database information displayed in Dreamweaver”
on page 664.
NO TE
9.
You cannot create a schema or catalog in Microsoft Access.
Click Test.
Dreamweaver attempts to connect to the database. If the connection fails, double-check
the DSN. If the connection still fails, check the settings for the folder Dreamweaver uses
to process dynamic pages (see “Specifying where dynamic pages can be processed”
on page 608).
10. Click
OK.
The new connection appears in the Databases panel.
Related topics
■
“Creating a connection using a local DSN” on page 624
■
Chapter 29, “Troubleshooting Database Connections,” on page 643
Creating a DSN-less connection
You can use a DSN-less connection to create an ODBC or OLE DB connection between your
web application and your database. You use a connection string to create this kind of
connection. A connection string combines all the information your web application needs to
connect to a database.
To create a DSN-less connection:
1.
Open an ASP page in Dreamweaver, then open the Databases panel (Window >
Databases).
Dreamweaver displays all the connections defined for that site, if any.
Creating a DSN-less connection
627
2.
Click the Plus (+) button on the panel and select Custom Connection String from the
pop-up menu.
The Custom Connection String dialog box appears.
3.
Complete the dialog box and click OK.
For more information, click the Help button in the dialog box.
Related topics
■
“OLE DB connections” on page 623
■
“Using a virtual path to connect to a database” on page 630
■
Chapter 29, “Troubleshooting Database Connections,” on page 643
Connecting to a database on an ISP
If you’re an ASP developer working with a commercial Internet service provider (ISP), you
often don’t know the physical path of the files you upload, including your database file or files.
If your ISP doesn’t define a DSN for you or is slow to do so, you must find another way to
create the connections to your database files. One alternative is to create a DSN-less
connection to a database file, but you can define such a connection only if you know the
physical path of the database file on the ISP’s server.
This section describes how you can obtain the physical path of a database file on a server by
using the MapPath method of the ASP server object.
N OT E
628
The techniques discussed in this chapter apply only if your database is file-based, such
as a Microsoft Access database where data is stored in an .mdb file.
Chapter 26: Database Connections for ASP Developers
Understanding physical and virtual paths
After using Dreamweaver to upload your files to a remote server, the files reside in a folder in
the server’s local directory tree. For example, on a server running Microsoft IIS, the path to
your home page could be as follows:
c:\Inetpub\wwwroot\accounts\users\jsmith\index.htm
This path is known as the physical path to your file.
The URL to open your file, however, does not use the physical path. It uses the name of the
server or domain followed by a virtual path, as in the following example:
www.plutoserve.com/jsmith/index.htm
The virtual path, /jsmith/index.htm, stands in for the physical path,
c:\Inetpub\wwwroot\accounts\users\jsmith\index.htm.
Related topics
■
“Using a virtual path to connect to a database” on page 630
Finding a file’s physical path with the virtual path
If you work with an ISP, you don’t always know the physical path to the files you upload. ISPs
typically provide you with an FTP host, possibly a host directory, and a login name and
password. ISPs also specify a URL to view your pages on the Internet, such as
www.plutoserve.com/jsmith/.
If you know the URL, then you can get the file’s virtual path—it’s the path that follows the
server or domain name in a URL. Once you know the virtual path, you can get the file’s
physical path on the server using the MapPath method.
Among other things, the MapPath method takes the virtual path as an argument and returns
the file’s physical path and filename. Here’s the method’s syntax:
Server.MapPath("/virtualpath")
Suppose a file’s virtual path is /jsmith/index.htm, then the following expression will return its
physical path:
Server.MapPath("/jsmith/index.htm")
You can experiment with the MapPath method as follows.
1.
Open an ASP page in Dreamweaver and switch to Code view (View > Code).
2.
Enter the following expression in the page’s HTML code.
<%Response.Write(stringvariable)%>
Connecting to a database on an ISP
629
3.
Use the MapPath method to obtain a value for the stringvariable argument.
Here’s an example:
<% Response.Write(Server.MapPath("/jsmith/index.htm")) %>
4.
Switch to Design view (View > Design) and enable Live Data (View > Live Data) to view
the page.
The page displays the physical path of the file on the application server. Using the example
discussed in this section, the page displays the following physical path:
c:\Inetpub\wwwroot\accounts\users\jsmith\index.htm
For more information on the MapPath method, consult the online documentation that comes
with Microsoft IIS.
Related topics
“Understanding physical and virtual paths” on page 629
■
Using a virtual path to connect to a database
To write a DSN-less connection string to a database file located on a remote server, you must
know the physical path to the file. For example, here is a typical DSN-less connection string
for a Microsoft Access database:
Driver={Microsoft Access Driver (*.mdb)};
DBQ=c:\Inetpub\wwwroot\accounts\users\jsmith\data\statistics.mdb
If you don’t know the physical path of your files on the remote server, you can get the path by
using the MapPath method in your connection string.
To create a DSN-less connection with the MapPath method:
1.
Upload the database file to the remote server.
Make a note of its virtual path—for example, /jsmith/data/statistics.mdb.
2.
Open an ASP page in Dreamweaver, then open the Databases panel (Window >
Databases).
Dreamweaver displays all the connections defined for the site.
3.
Click the Plus (+) button on the panel and select Custom Connection String from the
pop-up menu.
4.
Enter a name for the new connection.
N OT E
630
Do not use any spaces or special characters in the name.
Chapter 26: Database Connections for ASP Developers
5.
Enter the connection string and use the MapPath method to supply the DBQ parameter.
Suppose the virtual path to your Microsoft Access database is /jsmith/data/statistics.mdb.
The connection string can be expressed as follows if you use VBScript as your scripting
language:
“Driver={Microsoft Access Driver (*.mdb)};DBQ=” & Server.MapPath¬
("/jsmith/data/statistics.mdb")
The ampersand (&) is used to concatenate (combine) two strings. The first string is
enclosed in quotation marks and the second is returned by the Server.MapPath
expression. When the two strings are combined, the following string is created:
Driver={Microsoft Access Driver (*.mdb)};
DBQ=C:\Inetpub\wwwroot\accounts\users\jsmith\data\statistics.mdb
If you use JavaScript, the expression is identical except that you use a Plus (+) sign instead
of an ampersand (&) to concatenate the two strings:
“Driver={Microsoft Access Driver (*.mdb)};DBQ=” + Server.MapPath¬
("/jsmith/data/statistics.mdb")
6.
Select the Using Driver On Testing Server option.
Macintosh users can ignore this step because all database connections use the
application server.
7.
Click Test.
Dreamweaver attempts to connect to the database. If the connection fails, double-check
the connection string.
If the connection still fails, contact your ISP to make sure the database driver you specified
in the connection string is installed on the remote server. Also check that the ISP has the
most recent version of the driver. For example, a database created in Microsoft Access
2000 will not work with Microsoft Access Driver 3.5. You need Microsoft Access Driver
4.0 or later.
8.
Click OK.
The new connection appears in the Databases panel.
9.
Update the database connection of existing dynamic pages, and use the new connection
with any new page you build.
To update the connection of a dynamic page, open the page in Dreamweaver, double-click
the recordset name in the Bindings panel or Server Behaviors panel, and select the
connection you just created from the Connection pop-up menu.
Connecting to a database on an ISP
631
Related topics
■
“Understanding physical and virtual paths” on page 629
■
“Finding a file’s physical path with the virtual path” on page 629
■
“Creating a DSN-less connection” on page 627
Editing or deleting a database connection
When you create a database connection, Dreamweaver stores the connection information in
an include file in the Connections subfolder in the site’s local root folder. You can edit or
delete the connection information in the file manually or as follows.
To update a connection:
1.
Open an ASP page in Dreamweaver, then open the Databases panel (Window >
Databases).
A list of connections appears in the panel.
2.
Right-click (Windows) or Control-click (Macintosh) the connection and select Edit
Connection from the pop-up menu.
The dialog box you used to create the connection appears.
3.
Make the changes and click OK.
Dreamweaver automatically updates the include file, which updates all the pages in the site
that use the connection.
To delete a connection:
1.
Open an ASP page in Dreamweaver, then open the Databases panel (Window >
Databases).
A list of connections appears in the panel.
2.
Right-click (Windows) or Control-click (Macintosh) the connection and select Delete
Connection from the pop-up menu.
The dialog box you used to create the connection appears.
3.
Confirm that you want to delete the connection.
N OT E
632
To avoid getting errors after deleting a connection, update every recordset that uses
the old connection by double-clicking the name of the recordset in the Bindings
panel and choosing a new connection.
Chapter 26: Database Connections for ASP Developers
CHAPTER 27
27
Database Connections for
JSP Developers
To use a database with a JavaServer Pages (JSP) application, you need to create a database
connection in Macromedia Dreamweaver 8. This chapter describes how to create
the connection.
The chapter assumes you have set up a JSP application (see Chapter 23, “Setting Up a Web
Application,” on page 599). It also assumes you have a database set up on your local computer
or on a system to which you have network or FTP access.
To connect to the sample database provided by Dreamweaver, see “Setup for Sample JSP Site”
in Getting Started with Dreamweaver. To learn more about databases and database
connections, see Appendix A, “Beginner’s Guide to Databases,” on page 983.
About database connections in JSP
A JSP application must connect to a database through a JDBC driver. The driver acts as an
interpreter that lets a JSP application communicate with a database.
JSP connections
A JSP application must connect to a database through a JDBC driver. For more information
on JDBC and the role of database drivers, see “Communicating with the database”
on page 991.
You must specify certain parameter values to connect through your JDBC driver. For more
information, see “JDBC connection parameters” on page 634. For the parameter values
specific to your driver, see the driver vendor’s documentation or consult your system
administrator.
You can also use an ODBC driver (and so a Windows DSN) if you have a JDBC-ODBC
Bridge driver. For more information, see “Connecting through an ODBC driver”
on page 637.
633
JDBC connection parameters
When you create a JSP database connection in Dreamweaver, you usually need to enter JDBC
connection parameters (see “Creating a database connection for JSP” on page 636). JDBC
connections usually consist of four parameters: the driver, user name, password, and URL
(which specifies the location of the database). Generally, the values of the driver parameter
and the URL parameter depend on the driver.
This section shows how to define connection parameters in Dreamweaver using the Oracle
Thin JDBC driver as an example. For the connection parameters of other drivers, consult the
driver vendor’s documentation.
The Oracle Thin JDBC driver supports Oracle databases. If you want to use this driver
to connect to your Oracle database, click the Plus (+) button on the Databases panel and
select the Oracle Thin Driver (Oracle) driver from the pop-up menu. The following,
partially-complete dialog box appears:
Enter a connection name and replace the placeholders (in square brackets) with valid
connection parameters. For the [hostname] placeholder, enter the IP address or the name
assigned to the database server by the system administrator. For the [sid] placeholder, enter
the database system identifier. If you have more than one Oracle database running on the
same system, you use the SID to tell them apart.
634
Chapter 27: Database Connections for JSP Developers
For example, if your server is called Aristotle, the database port is 1521, and you defined a
database SID called patients on that server, you would enter the following parameter values
in Dreamweaver:
Connecting to a database
This section describes how to connect to a database when developing a JSP application
in Dreamweaver.
The section assumes a JSP application server is running on a local or remote computer. For
more information, see “Setting Up a Web Application” on page 599.
Before you can connect to a database, you must obtain a JDBC driver for your database. For
more information, see “Obtaining a JDBC driver for your database” on page 635.
After you install the database driver, you can connect to the database through it. For
instructions, see “Creating a database connection for JSP” on page 636.
Obtaining a JDBC driver for your database
Make sure you have a JDBC driver for your database before you try to create a database
connection. Some common JDBC drivers include the Oracle Thin JDBC driver, the Oracle
Java Driver, and the i-net JDBC drivers for Microsoft SQL Server.
Database system vendors such as Oracle often include drivers with their systems. You can also
purchase drivers from third-party vendors. For example, you can obtain a JDBC driver for
Microsoft SQL Server from i-net software at www.inetsoftware.de/products/jdbc/.
Sun also provides a searchable database of JDBC drivers and their vendors on its website at
http://developers.sun.com/product/jdbc/drivers.
Once you have a JDBC driver for your database, you can create a database connection.
Connecting to a database
635
Related topics
■
“Installing the Sun JDBC-ODBC Bridge driver” on page 638
■
“Communicating with the database” on page 991
Creating a database connection for JSP
After you install an appropriate JDBC driver for your database on the computer running your
application server, you can create a database connection in Dreamweaver.
To create a database connection for JSP:
1.
Open a JSP page in Dreamweaver, then open the Databases panel (Window > Databases).
Dreamweaver displays the connections defined for the site.
2.
Click the Plus (+) button and select your driver from the pop-up menu.
If your driver is not listed, select Custom JDBC Connection.
A connection dialog box appears.
3.
Enter the connection parameters in the connection dialog box.
For more information, see “JDBC connection parameters” on page 634.
4.
Specify the location of the JDBC driver you want to use.
■
■
If your JDBC driver is installed on the same computer as Dreamweaver, select the
Using Driver On This Machine option.
If your JDBC driver is not installed on the same computer as Dreamweaver, select the
Using Driver On Testing Server option.
Macintosh users can ignore this step because all database connections use the
application server.
5.
Click Test.
Dreamweaver attempts to connect to the database. If the connection fails, double-check
the the connection parameters. If the connection still fails, check the settings for the folder
Dreamweaver uses to process dynamic pages (see “Specifying where dynamic pages can be
processed” on page 608).
6.
Click OK.
The new connection appears in the Databases panel.
Related topics
■
Chapter 29, “Troubleshooting Database Connections,” on page 643
636
Chapter 27: Database Connections for JSP Developers
Connecting through an ODBC driver
Although JSP applications must communicate with databases through JDBC drivers, they can
communicate through ODBC drivers if you have a JDBC-ODBC bridge driver. The bridge
driver acts as an interpreter between your JSP application, which “speaks” JDBC, and your
ODBC driver, which “speaks” ODBC. This channel of communication lets your JSP
application communicate with the database.
This kind of connection offers two advantages for Windows users. First, you can use the free
ODBC drivers from Microsoft. Second, you can use a DSN to simplify the task of creating
the connection.
You must meet the following requirements to connect through an ODBC driver:
■
Your JSP application server must be running on a Windows computer.
■
An ODBC driver for your database must be installed on the Windows computer running
the application server. For more information, see “Checking for the ODBC driver”
on page 637.
■
A JDBC-ODBC bridge driver must be installed on the Windows computer running the
application server. For more information, see “Installing the Sun JDBC-ODBC Bridge
driver” on page 638.
If you meet these requirements, you can connect through an ODBC driver. For instructions,
see “Creating an ODBC connection” on page 638.
Checking for the ODBC driver
Make sure an ODBC driver for your database is installed on the Windows computer running
the JSP application server. To find out whether an ODBC driver is installed, see “Viewing the
ODBC drivers installed on a Windows system” on page 994. If an appropriate driver is not
installed, you can download and install the Microsoft Data Access Components (MDAC) 2.5
and 2.7 packages on the computer running the JSP application server. You can download
MDAC for free from the Microsoft website at http://msdn.microsoft.com/data/mdac/
downloads/. These packages contain the latest ODBC drivers from Microsoft.
N OT E
Install the MDAC 2.5 package before installing MDAC 2.7.
If you have an ODBC driver for your database, you can install a JDBC-ODBC driver next.
Connecting through an ODBC driver
637
Installing the Sun JDBC-ODBC Bridge driver
To connect through an ODBC driver, you must install the Sun JDBC-ODBC Bridge driver
on the Windows computer running the JSP application server. The driver comes with the Sun
Java 2 SDK, Standard Edition, for Windows.
To find out if you already have the Java 2 SDK with the driver, check your hard disk for any of
the following folders: jdk1.2, jdk1.3, or j2sdk1.4.
If you don’t have the SDK, you can download it from the Sun website at http://java.sun.com/
j2se/ and install it. The driver installs automatically when you install the SDK.
Although it is adequate for development use with lower-end database systems such as
Microsoft Access, the Sun JDBC-ODBC Bridge driver is not intended for production use.
For example, it lets only one JSP page connect to the database at a time (it does not support
concurrent use by multiple threads). For more information on the driver’s limitations, see
TechNote 17392 on the Macromedia support center at www.macromedia.com/go/17392.
After you install the bridge driver, you can create the database connection next.
Creating an ODBC connection
Before connecting through an ODBC driver, make sure the appropriate ODBC driver and
the Sun JDBC-ODBC Bridge driver are installed on the Windows computer running the JSP
application server .
To connect through an ODBC driver in JSP:
1.
Define a DSN on the Windows system hosting your application server.
For instructions, see the following articles on the Microsoft website:
■
■
2.
Windows 2000 users, see Microsoft Knowledge Base Article 300596 at http://
support.microsoft.com/default.aspx?scid=kb;en-us;300596
Windows XP users, see Microsoft Knowledge Base Article 305599 at http://
support.microsoft.com/default.aspx?scid=kb;en-us;305599
Open a JSP page in Dreamweaver, then open the Databases panel (Window > Databases).
The panel displays the connections defined for that site.
3.
Click the Plus (+) button on the panel and select Sun JDBC-ODBC Driver (ODBC
Database) from the pop-up menu.
The Sun JDBC-ODBC Driver (ODBC Database) dialog box appears.
638
Chapter 27: Database Connections for JSP Developers
4.
Enter a name for the new connection.
N OT E
5.
Do not use any spaces or special characters in the name.
Replace the [odbc dsn] placeholder in the URL box with the DSN you defined in step 1.
The URL box should look like this:
jdbc:odbc:myDSN
6.
Specify the user name and password to access the database.
If you don’t need a user name or password, leave the boxes blank. For example, if your
DSN is called Acme and you don’t need a user name or password to access the database,
enter the following parameter values:
Driver: sun.jdbc.odbc.JdbcOdbcDriver
URL: jdbc:odbc:Acme
Username:
Password:
7.
Specify the location of the JDBC-ODBC Bridge driver.
■
■
If the driver is installed on the same computer as Dreamweaver, select the Using
Driver On This Machine option.
If the driver is not installed on the same computer as Dreamweaver, select the Using
Driver On Testing Server option.
Macintosh users can ignore this step because all database connections use the
application server.
8.
Click Test.
Dreamweaver attempts to connect to the database. If the connection fails, double-check
the DSN and the other connection parameters. If the connection still fails, check the
settings for the folder Dreamweaver uses to process dynamic pages (see “Specifying where
dynamic pages can be processed” on page 608).
9.
Click OK.
The new connection appears in the Databases panel.
Related topics
■
Chapter 29, “Troubleshooting Database Connections,” on page 643
Connecting through an ODBC driver
639
Editing or deleting a database connection
When you create a database connection, Dreamweaver stores the connection information in
an include file in the Connections subfolder in the site’s local root folder. You can edit or
delete the connection information in the file manually or as follows.
To update a connection:
1.
Open a JSP page in Dreamweaver, then open the Databases panel (Window > Databases).
A list of connections appears in the panel.
2.
Right-click (Windows) or Control-click (Macintosh) the connection and select Edit
Connection from the pop-up menu.
The dialog box you used to create the connection appears.
3.
Make the changes and click OK.
Dreamweaver automatically updates the include file, which updates all the pages in the site
that use the connection.
If you rename a connection, you should update every recordset that uses the old connection
name by double-clicking the recordset in the Bindings panel and choosing the new
connection name in the Recordset dialog box.
To delete a connection:
1.
Open a JSP page in Dreamweaver, then open the Databases panel (Window > Databases).
A list of connections appears in the panel.
2.
Right-click (Windows) or Control-click (Macintosh) the connection and select Delete
Connection from the pop-up menu.
The dialog box you used to create the connection appears.
3.
Confirm that you want to delete the connection.
To avoid getting errors after deleting a connection, update every recordset that uses the old
connection by double-clicking the name of the recordset in the Bindings panel and choosing a
new connection in the Recordset dialog box.
640
Chapter 27: Database Connections for JSP Developers
CHAPTER 28
28
Database Connections for
PHP Developers
To use a database with a PHP application, you need to create a database connection
in Macromedia Dreamweaver 8. This chapter describes how to create the
database connection.
For PHP development, Dreamweaver only supports the MySQL database system. Other
database systems such as Microsoft Access or Oracle are not supported. MySQL is opensource software you can download for free from the Internet for non-commercial use. For
more information, see the MySQL website at http://dev.mysql.com/downloads/.
The chapter assumes you have set up a PHP application (see Chapter 23, “Setting Up a Web
Application,” on page 599). It also assumes a MySQL database is set up on your local
computer or on a system to which you have network or FTP access.
TI P
For development purposes, download and install the Windows Essentials version of the
MySQL database server.
To connect to the sample database provided by Dreamweaver, see “Setup for Sample PHP
Site” in Getting Started with Dreamweaver. To learn more about databases and database
connections, see Appendix A, “Beginner’s Guide to Databases,” on page 983.
Connecting to a database
This section describes how to connect to a database when developing a PHP application in
Dreamweaver. It assumes you have one or more MySQL databases and that the MySQL
server is started.
To create a database connection to your MySQL database:
1.
Open a PHP page in Dreamweaver, then open the Databases panel (Window > Databases).
2.
Click the Plus (+) button on the panel and select MySQL Connection from the pop-up
menu.
The MySQL Connection dialog box appears.
641
3.
Complete the dialog box and click OK.
For more information, click the Help button in the dialog box.
The new connection appears in the Databases panel.
NO TE
If you encounter the error message “Client does not support authentication protocol
requested. Consider upgrading MySQL client” when testing a PHP database
connection to MySQL 4.1, see “Troubleshooting MySQL error messages” on page 650.
Editing or deleting a database connection
When you create a database connection, Dreamweaver stores the connection information in
an include file in the Connections subfolder in the site’s local root folder. You can edit or
delete the connection information in the file manually or as follows.
To update a connection:
1.
Open a PHP page in Dreamweaver, then open the Databases panel (Window > Databases).
A list of connections appears in the panel.
2.
Right-click (Windows) or Control-click (Macintosh) the connection and select Edit
Connection from the pop-up menu.
The dialog box you used to create the connection appears.
3.
Make the changes and click OK.
Dreamweaver automatically updates the include file, which updates all the pages in the site
that use the connection.
To delete a connection:
1.
Open a PHP page in Dreamweaver, then open the Databases panel (Window > Databases).
A list of connections appears in the panel.
2.
Right-click (Windows) or Control-click (Macintosh) the connection and select Delete
Connection from the pop-up menu.
The dialog box you used to create the connection appears.
3.
Confirm that you want to delete the connection.
To avoid getting errors after deleting a connection, update every recordset that uses the old
connection by double-clicking the name of the recordset in the Bindings panel and selecting a
new connection in the Recordset dialog box.
642
Chapter 28: Database Connections for PHP Developers
CHAPTER 29
29
Troubleshooting Database
Connections
This chapter describes some common problems you might encounter after creating a database
connection, and describes ways to fix them.
Troubleshooting permissions problems
One of the most common problems is insufficient folder or file permissions. If your database
is located on a Windows 2000 or Windows XP computer and you receive an error message
when you try to view a dynamic page in a web browser or in Live Data mode, the error may
be due to a permissions problem.
The Windows account attempting to access the database doesn’t have sufficient permissions.
The account might be either the anonymous Windows account (by default,
IUSR_computername) or a specific user account, if the page has been secured for
authenticated access.
You must change the permissions to give the IUSR_computername account the correct
permissions so the web server can access the database file. In addition, the folder containing
the database file must also have certain permissions set to write to that database.
If the page is meant to be accessed anonymously, give the IUSR_computername account full
control to the folder and database file, as described in the procedure below.
Additionally, if the path to the database is being referenced using UNC (\\Server\Share), make
sure the Share Permissions give the IUSR_computername account full access. This step applies
even if the share is on the local web server.
If you copy the database from another location, it might not automatically inherit the
permissions from its destination folder. You might have to change the permissions for the
database.
643
To check or change the database file permissions (Windows XP):
1.
Make sure you have administrator privileges on the computer.
2.
In Windows Explorer, locate the database file or the folder containing the database, rightclick the file or folder, and select Properties.
3.
Select the Security tab.
NO T E
This step applies only if you have an NTFS file system. If you have an FAT file
system, the dialog box won't have a Security tab.
4.
If the IUSR_computername account is not listed in the Group or User Names list, click the
Add button to add it.
5.
In the Select Users or Groups dialog box, click the Advanced button.
The dialog box changes to show more options.
6.
Click the Locations button and select the computer’s name.
7.
Click the Find Now button.
A list of account names associated with the computer appears.
8.
Select the IUSR_computername account and click OK; then click OK again to clear the
dialog box.
9.
To assign the IUSR account full permissions, select the Full Control checkbox and click
OK.
To check or change the database file permissions (Windows 2000):
1.
Make sure you have administrator privileges on the computer.
2.
In Windows Explorer, locate the database file or the folder containing the database, rightclick the file or folder, and select Properties.
3.
Select the Security tab.
N OT E
This step applies only if you have an NTFS file system. If you have an FAT file
system, the dialog box won't have a Security tab.
4.
If the IUSR_computername account is not listed among the Windows accounts in the File
Permissions dialog box, click the Add button to add it.
5.
In the Select Users, Computers, or Groups dialog box, select the computer name from the
Look In pop-up menu.
A list of account names associated with the computer appears.
6.
Select the IUSR_computername account and click Add.
644
Chapter 29: Troubleshooting Database Connections
7.
To assign the IUSR account full permissions, select Full Control from the Type of Access
pop-up menu and click OK.
For added security, permissions can be set so that Read permission is turned off for the web
folder containing the database. Browsing the folder won’t be permitted, but web pages will
still be able to access the database.
For more information about the IUSR account and web server permissions, see the following
TechNotes on the Macromedia Support Center:
■
Understanding anonymous authentication and the IUSR account at
www.macromedia.com/go/authentication
■
Setting IIS web server permissions at www.macromedia.com/go/server_permissions
Troubleshooting Microsoft error
messages
This section describes some common Microsoft error messages and ways to troubleshoot
them. These errors can occur if you use Internet Information Server (IIS) with a Microsoft
database system such as Access or SQL Server. These errors normally occur when you request
a dynamic page from the server.
NO T E
Macromedia does not provide technical support for third-party software such as
Microsoft Windows, and IIS. If this section does not fix your problem, please contact
Microsoft technical support or visit the Microsoft support website at http://
support.microsoft.com/.
For more information on 80004005 errors, see “INFO: Troubleshooting Guide for 80004005
Errors in Active Server Pages and Microsoft Data Access Components (Q306518),” on the
Microsoft website at http://support.microsoft.com/default.aspx?scid=kb;en-us;Q306518.
80004005—Data source name not found and no
default driver specified
This error occurs when you attempt to view a dynamic page in a web browser or in Live Data
mode. The error message may vary depending on your database and web server. Other
variations of the error message include:
■
80004005—Driver's SQLSetConnectAttr failed
■
80004005—General error Unable to open registry key 'DriverId'
Troubleshooting Microsoft error messages
645
Here are possible causes and solutions:
■
The page can’t find the DSN. Make sure a DSN has been created on both the web server
and on the local machine. For more information, see “Using a DSN” on page 995.
■
The DSN might have been set up as a user DSN, not as a system DSN. Delete the user
DSN and create a system DSN to replace it.
NO TE
■
If you don’t delete the user DSN, the duplicate DSN names produce a new ODBC
error.
If you use Microsoft Access, the database file (.mdb) might be locked. The lock might be
due to a DSN with a different name accessing the database. In Windows Explorer, search
for the lock file (.ldb) in the folder containing the database file (.mdb) and delete the .ldb
file. If another DSN is pointing to the same database file, you may want to delete the
DSN to prevent the error in the future. Be sure to reboot the computer after making these
changes.
80004005—Couldn’t use ‘(unknown)’; file already in
use
This error occurs when you use a Microsoft Access database and attempt to view a dynamic
page in a web browser or in Live Data mode. Another variation of this error message is
“80004005—Microsoft Jet database engine cannot open the file (unknown).”
The probable cause is a permissions problem. For more information, see “Troubleshooting
permissions problems” on page 643. Here are some specific causes and solutions:
■
The account being used by Internet Information Server (usually IUSR) might not have
the correct Windows permissions for a file-based database or for the folder containing the
file. Check the permissions on the IIS account (IUSR) in the user manager.
■
You might not have permission to create or destroy temporary files. Check the permissions
on the file and the folder. Make sure you have permission to create or destroy any
temporary files. Temporary files are usually created in the same folder as the database, but
the file may also be created in other folders such as /Winnt.
■
In Windows 2000, the time-out value may need to be changed for the Access database
DSN. To change the time-out value, select Start > Settings > Control Panel >
Administrative Tools > Data Sources (ODBC). Click the System tab, highlight the correct
DSN, and click the Configure button. Click the Options button and change the Page
Timeout value to 5000.
646
Chapter 29: Troubleshooting Database Connections
If you still have problems, see the following Microsoft Knowledge Base articles:
■
PRB: 80004005 “Couldn't Use ‘(unknown)’; File Already in Use” at http://
support.microsoft.com/default.aspx?scid=kb;en-us;Q174943.
■
PRB: Microsoft Access Database Connectivity Fails in Active Server Pages at http://
support.microsoft.com/default.aspx?scid=kb;en-us;Q253604.
■
PRB: Error “Cannot Open File Unknown” Using Access at http://support.microsoft.com/
default.aspx?scid=kb;en-us;Q166029.
80004005—Logon Failed()
This error occurs when you use Microsoft SQL Server and attempt to view a dynamic page in
a web browser or in Live Data mode.
This error is generated by SQL Server if it doesn’t accept or recognize the logon account or
password being submitted (if you’re using standard security), or if a Windows account does
not map to a SQL account (if you’re using integrated security).
Here are possible solutions:
■
If you use standard security, the account name and password might be incorrect. Try the
system Admin account and password (UID= “sa” and no password), which must be
defined in the connection string line. (DSNs do not store user names and passwords.)
■
If you use integrated security, check the Windows account calling the page and find its
mapped SQL account (if any).
■
SQL Server does not allow an underscore in SQL account names. If someone manually
maps the Windows IUSR_machinename account to a SQL account of the same name, it
will fail. Map any account that uses an underscore to an account name on SQL that does
not use an underscore.
80004005—Operation must use an updateable
query
This error occurs when an event is updating a recordset or inserting data in a recordset.
Here are possible causes and solutions:
■
The permissions set on the folder containing the database are too restrictive. IUSR
privileges must be set to read/write. (See “Troubleshooting permissions problems”
on page 643.)
■
The permissions on the database file itself does not have full read/write privileges in effect.
(See “Troubleshooting permissions problems” on page 643.)
Troubleshooting Microsoft error messages
647
■
The database might be located outside the Inetpub/wwwroot directory. Though you can
view and search the data, you might not be able to update it unless the database is located
in the wwwroot directory.
■
The recordset is based on a non-updateable query. Joins are good examples of nonupdateable queries within a database. Restructure your queries so they are updateable.
For more information on this error, see “PRB: ASP ‘Error The Query Is Not Updateable’
When You Update Table Record,” in the Microsoft Knowledge Base at http://
support.microsoft.com/default.aspx?scid=kb;en-us;Q174640.
80040e07—Data type mismatch in criteria
expression
This error occurs when the server tries to process a page containing an Insert Record or
Update Record server behavior, and the server behavior attempts to set the value of a Date/
Time column in a Microsoft Access database to an empty string ("").
Microsoft Access has strong data typing; it imposes a rigorous set of rules on given column
values. The empty string value in the SQL query cannot be stored in an Access Date/Time
column. Currently, the only known workaround is to avoid inserting or updating Date/Time
columns in Access with empty strings ("") or with any other value that does not correspond to
the range of values specified for the data type.
80040e10—Too few parameters
This error occurs when a column specified in your SQL query does not exist in the database
table. Check the column names in your database table against the SQL query. The cause of
this error is often a typographical error.
80040e10—COUNT field incorrect
This error occurs when you preview a page containing an Insert Record server behavior in a
web browser and try to use it to insert a record in a Microsoft Access database.
You might be trying to insert a record into a database field that has a question mark (?) in its
field name. The question mark is a special character for some database engines, including
Microsoft Access, and should not be used for database table names or field names.
Open your database system and delete the question mark (?) from the field names, and update
the server behaviors on your page that refer to this field.
648
Chapter 29: Troubleshooting Database Connections
80040e14—Syntax error in INSERT INTO statement
This error occurs when the server tries to process a page containing an Insert Record
server behavior.
This error typically results from one or more of the following problems with the name of a
field, object, or variable in the database:
■
Using a reserved word as a name. Most databases have a set of reserved words. For
example, “date” is a reserved word and cannot be used for column names in a database.
■
Using special characters in the name. Examples of special characters include:
./*:!#&-?
■
Using a space in the name.
The error can also occur when an input mask is defined for an object in the database, and the
inserted data does not conform to the mask.
To fix the problem, avoid using reserved words such as “date”, “name”, “select”, “where,”
and “level” when specifying column names in your database. Also, eliminate spaces and
special characters.
See the following web pages for lists of reserved words for common database systems:
■
Microsoft Access at http://support.microsoft.com/default.aspx?scid=kb;en-us;Q209187
■
Microsoft SQL Server at http://msdn.microsoft.com/library/default.asp?url=/library/enus/tsqlref/ts_ra-rz_9oj7.asp
■
MySQL at http://dev.mysql.com/doc/mysql/en/reserved-words.html
80040e21—ODBC error on Insert or Update
This error occurs when the server tries to process a page containing an Update Record or
Insert Record server behavior. The database cannot handle the update or insert operation the
server behavior is trying to perform.
Here are possible causes and solutions:
■
The server behavior is trying to update a database table’s auto-number field or to insert a
record into an auto-number field. Because auto-number fields are populated automatically
by the database system, any attempt to externally populate them with a value fails.
■
The data the server behavior is updating or inserting is the wrong type for the database
field, such as inserting a date into a Boolean (yes/no) field, inserting a string into a
numeric field, or inserting an improperly formatted string into Date/Time field.
Troubleshooting Microsoft error messages
649
800a0bcd—Either BOF or EOF is true
This error occurs when you attempt to view a dynamic page in a web browser or in Live
Data mode.
The problem occurs when the page tries to display data from an empty recordset. To solve the
problem, apply the Show Region server behavior to the dynamic content to be displayed on
the page, as follows:
1.
Highlight the dynamic content on the page.
2.
In the Server Behaviors panel, click the Plus (+) button and select Show Region >
Show Region If Recordset Is Not Empty.
3.
Select the recordset supplying the dynamic content and click OK.
4.
Repeat steps 1 to 3 for each element of dynamic content on the page.
Troubleshooting MySQL error messages
This section addresses one common error message that you might encounter when testing a
PHP database connection to MySQL 4.1: “Client does not support authentication protocol
requested. Consider upgrading MySQL client.”
You may have to revert to an earlier version of MySQL, or install PHP 5 and copy some
dynamic link libraries (DLLs). For detailed instructions, see “Installing a PHP application
server (Windows)” in Getting Started with Dreamweaver.
Also see the following TechNotes on the Macromedia website:
■
TechNote c45f8a29 at www.macromedia.com/go/c45f8a29.
■
TechNote 16515 at www.macromedia.com/go/16515.
650
Chapter 29: Troubleshooting Database Connections
7
PART 7
Making Pages Dynamic
Use the web application development tools in Macromedia Dreamweaver 8
to add dynamic content to your pages.
This part contains the following chapters:
Chapter 30: Optimizing the Workspace for Visual Development . .
653
Chapter 31: The Workflow for Dynamic Page Design . . . . . . . . 665
Chapter 32: Obtaining Data for Your Page . . . . . . . . . . . . . . . . . 673
Chapter 33: Defining Sources of Dynamic Content . . . . . . . . . . 685
Chapter 34: Adding Dynamic Content to Web Pages . . . . . . . . .707
Chapter 35: Displaying Database Records . . . . . . . . . . . . . . . . . . 717
Chapter 36: Displaying XML Data in Web Pages. . . . . . . . . . . . 735
Chapter 37: Using Web Services . . . . . . . . . . . . . . . . . . . . . . . . . . 765
Chapter 38: Adding Custom Server Behaviors . . . . . . . . . . . . . . . 777
Chapter 39: Creating Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 799
651
CHAPTER 30
30
Optimizing the Workspace
for Visual Development
You can optimize the Macromedia Dreamweaver 8 workspace to develop web applications
visually. For example, you can use panels to rapidly build dynamic pages and you can view
data live on your pages while you work.
This chapter contains the following sections:
Displaying web-application development panels . . . . . . . . . . . . . . . . . . . . . . . . . . . .653
Viewing your database within Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .656
Viewing live data in Design view . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .656
Working in Design view without live data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .662
Previewing dynamic pages in a browser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .663
Restricting database information displayed in Dreamweaver . . . . . . . . . . . . . . . . .664
Displaying web-application development
panels
Click the Application tab in the Insert bar to display a set of buttons that let you add dynamic
content and server behaviors to your page, as follows.
The number and type of buttons that appear vary depending upon the document type opened
in the Document window. The Insert bar includes buttons to add the following items to the
page:
■
Recordsets
■
Dynamic text or tables
■
Forms to insert or update records in a database
■
Record navigation bars
653
If you switch to Code view (View > Code), additional panels might appear in their own Insert
bar category, allowing you to insert code in the page. For example, if you view a ColdFusion
page in Code view, a CFML panel becomes available in the CFML category of the Insert bar:
To find out what each button on the Insert bar does, move your mouse over an icon. The
following tooltip appears:
If you want to define sources of dynamic content for your page and add the content to the
page, select Window > Bindings. The Bindings panel appears.
For more information, select Help from the panel group’s pop-up menu.
If you want to add server-side logic to your dynamic pages, select Window > Server Behaviors.
The Server Behaviors panel appears.
A server behavior is the set of instructions inserted in a dynamic page at design time and
executed on the server at runtime. For more information, select Help from the panel group’s
pop-up menu.
654
Chapter 30: Optimizing the Workspace for Visual Development
If you want to explore databases or create database connections, select Window > Databases.
The Databases panel appears.
For more information, select Help from the panel group’s pop-up menu.
If you want to inspect, add, or modify code for JavaBeans, Macromedia ColdFusion
components, or web services, select Window > Components. The Components panel appears.
N OT E
The Components panel is enabled only if you open a ColdFusion, a JSP, or an ASP.NET
page. Also, the document might not support certain components. For example,
ColdFusion documents do not support JavaBeans.
For more information, select Help from the panel group’s pop-up menu.
Displaying web-application development panels
655
Viewing your database within
Dreamweaver
After connecting to your database, you can view its structure and data within Dreamweaver.
To view the database:
1.
Open the Databases panel (Window > Databases).
Dreamweaver populates the Databases panel with all the databases for which connections
have been created. If you’re developing a ColdFusion site, Dreamweaver populates the
panel with all the databases for which data sources have been defined in ColdFusion
Administrator.
NO T E
Dreamweaver looks at the ColdFusion server you defined for the current site. (See
“Specifying where dynamic pages can be processed” on page 608.)
If no database appears in the panel, you must create a database connection. For more
information, see “Connecting to a database” on page 609.
2.
To display the tables, stored procedures, and views in the database, click the Plus (+) sign
beside a connection in the list.
3.
To display the columns in the table, click a table name.
The columns icons reflect the data type and also indicate the primary key.
4.
To view the data in a table, right-click (Windows) or Control-click (Macintosh) the table
name in the list and select View Data from the pop-up menu.
Dreamweaver also identifies the primary key of each table, and the data types of each
column.
Viewing live data in Design view
Dreamweaver can display the dynamic content of a page while you work on the page in
Design view. For more information on Design view, see “Switching between views in the
Document window” on page 51.
To view dynamic content in Design view:
1.
Make sure Dreamweaver is properly configured to display live data.
For more information, see “Requirements for displaying live data” on page 658.
2.
Select View > Live Data.
Dreamweaver displays the page in Design view complete with dynamic content.
656
Chapter 30: Optimizing the Workspace for Visual Development
When Live Data is turned on in Design view, you can do the following:
■
Adjust the page’s layout using the page-design tools
■
Add, edit, or delete dynamic content
■
Add, edit, or delete server behaviors
N OT E
Links don’t work in Design view. To test your links, use the Preview in Browser
feature. (See “Previewing dynamic pages in a browser” on page 663.)
When you make a change to the page that affects dynamic content, you can refresh the page
by clicking the Refresh button (the circle-arrow icon). Dreamweaver can also refresh the page
for you automatically.
The following illustration shows a dynamic page with Live Data turned off:
Viewing live data in Design view
657
The following illustration shows the same page with Live Data turned on:
Related topics
■
“Copying dependent files” on page 659
■
“Providing the page with expected parameters” on page 660
■
“Refreshing the page” on page 661
■
“Troubleshooting Live Data view” on page 661
■
“Working in Design view without live data” on page 662
Requirements for displaying live data
To view live data in Design view, you must do the following:
■
Define a folder to process dynamic pages. For instructions, see “Specifying where dynamic
pages can be processed” on page 608.
When you enable Live Data, a temporary copy of the open document is sent to the folder
for processing. The resulting page is returned and displayed in Design view, and the
temporary copy on the server is deleted.
If the page displays an error message when you enable Live Data, make sure the URL
prefix in the Site Definition dialog box is correct. For more information, see “Connecting
to a database” on page 609.
658
Chapter 30: Optimizing the Workspace for Visual Development
■
Copy related files (if any) to the folder. For more information, see “Copying dependent
files” on page 659.
■
Provide the page with any parameters a user would normally provide. For instructions, see
“Providing the page with expected parameters” on page 660.
If you have difficulty getting Live Data view to work, see “Troubleshooting Live Data view”
on page 661.
Related topics
■
“Viewing live data in Design view” on page 656
■
“Working in Design view without live data” on page 662
Copying dependent files
Some dynamic pages rely on other files to work properly. You must upload all related files,
including server-side includes and dependent files such as image files and JSP class files, to the
folder you defined for processing dynamic pages (see “Specifying where dynamic pages can be
processed” on page 608). Dreamweaver does not automatically copy dependent files to the
folder when you enable Live Data in Design view.
N OT E
Live Data supports code in server-side includes and application files such as global.asa
(ASP) and application.cfm (ColdFusion). Make sure to upload these files to the server
before turning on Live Data.
To copy dependent files to the application server:
1.
Open the Site panel (Window > Site Files) and click the Expand button (the last icon on
the panel toolbar).
The Site panel expands to full size.
2.
Click the Application Server icon on the expanded Site panel toolbar (the second icon
from the left).
The application server’s root folder appears under Remote Site.
3.
Under Local Folder, select the dependent files.
4.
Click the blue up arrow in the toolbar to copy the files to the application server, or drag the
files to the appropriate folder under Remote Site.
You need to do this only once for your site unless you add more dependent files, in which case
you must copy them to the folder too.
Viewing live data in Design view
659
Related topics
■
“Viewing live data in Design view” on page 656
■
“Requirements for displaying live data” on page 658
■
“Refreshing the page” on page 661
■
“Troubleshooting Live Data view” on page 661
Providing the page with expected parameters
To generate dynamic content, some pages require parameters from the user—for example, a
page needs the ID number of a record to find and display that record. Without that data,
Dreamweaver cannot generate dynamic content to display in Design view.
If a page expects parameters from the user, you must provide the parameters as follows.
To provide the page with data expected from users:
1.
In the Document window, select Live Data Settings from the View menu.
The Live Data Settings dialog box appears.
2.
Complete the dialog box and click OK.
For more information, click the Help button in the dialog box.
660
Chapter 30: Optimizing the Workspace for Visual Development
If you specified the GET method in the Live Data Settings dialog box, a text box appears on
the Design view toolbar. Use this text box to enter different URL parameters; then click the
Refresh button (the circle-arrow icon) to see how the parameters affect the page.
Enter each URL parameter in the following format:
name=value;
In this format, name is the URL parameter name expected by your page and value is the value
held by that parameter. For more information, see “URL parameters” on page 676.
Related topics
■
“Viewing live data in Design view” on page 656
■
“Requirements for displaying live data” on page 658
■
“Copying dependent files” on page 659
■
“Troubleshooting Live Data view” on page 661
Refreshing the page
To refresh a page:
■
With Live Data turned on, click the Refresh button (the circle-arrow icon) on the
document toolbar if you want to refresh the page after making a change that affects
dynamic content.
You can also select the Auto Refresh option in the toolbar. With this option turned on, the
page refreshes whenever you make a change affecting dynamic content. If you have a slow
database connection, you might want to leave this option off when working in the Live
Data window.
Related topics
■
“Viewing live data in Design view” on page 656
■
“Requirements for displaying live data” on page 658
■
“Copying dependent files” on page 659
■
“Providing the page with expected parameters” on page 660
Troubleshooting Live Data view
Many problems with Live Data view can be traced back to missing or incorrect values in the
Site Definition dialog box (Site > Edit Sites).
Viewing live data in Design view
661
Check the Testing Server category of the Site Definition dialog box. The Remote Folder text
box should specify a folder capable of processing dynamic pages (see “Specifying where
dynamic pages can be processed” on page 608). Here’s an example of a suitable remote folder
if you’re running IIS or PWS on your hard disk:
C:\Inetpub\wwwroot\myapp\
Verify that the URL Prefix box specifies a URL that corresponds (or “maps”) to the remote
folder. For example, if PWS or IIS is running on your local computer, then the following
remote folders have the following URL prefixes:
Remote folder
URL prefix
C:\Inetpub\wwwroot\
http://localhost/
C:\Inetpub\wwwroot\myapp\
http://localhost/myapp/
C:\Inetpub\wwwroot\fs\planes
http://localhost/fs/planes
For more information, see “Connecting to a database” on page 609.
Related topics
■
“Viewing live data in Design view” on page 656
■
“Requirements for displaying live data” on page 658
■
“Copying dependent files” on page 659
■
“Providing the page with expected parameters” on page 660
■
“Refreshing the page” on page 661
Working in Design view without live data
If Live Data is turned off or if you’re temporarily disconnected from your application server,
you can still work on your dynamic pages in Design view. Dreamweaver uses placeholders to
visually represent dynamic content on the page. For example, the placeholder for dynamic
text extracted from a database uses the syntax {RecordsetName.ColumnName}, where
Recordset is the name of the recordset and ColumnName is the name of the column you chose
from the recordset.
Sometimes, the length of the placeholders for dynamic text distorts the page’s layout in
Design view. You can solve the problem by using empty curly braces as placeholders.
662
Chapter 30: Optimizing the Workspace for Visual Development
To use empty curly braces as placeholders for dynamic text:
1.
Select Edit > Preferences > Invisible Elements or Dreamweaver > Preferences > Invisible
Elements (Mac OS X).
2.
In the Show Dynamic Text As pop-up menu, select {}.
3.
Click OK.
Related topics
■
“Viewing live data in Design view” on page 656
■
“Requirements for displaying live data” on page 658
Previewing dynamic pages in a browser
Web application developers often debug their pages by checking them often in a web browser.
Dreamweaver accommodates this work style with the Preview in Browser command (F12).
The command lets you quickly view dynamic pages in a browser without manually uploading
them to a server first.
TI P
You can also use Design view to quickly check your pages while working on them.
Design view displays a fully editable, visual representation of your page, including live
data. For more information, see “Viewing live data in Design view” on page 656.
You can specify that Dreamweaver use temporary files instead of the original files. With this
option, Dreamweaver runs a temporary copy of the page on a web server before displaying it
in your browser. (Dreamweaver then deletes the temporary file from the server.) To set this
option, select Edit > Preferences > Preview in Browser.
To preview dynamic pages, you must complete the Testing Server category of the Site
Definition dialog box. For more information, see “Specifying where dynamic pages can be
processed” on page 608.
Preview in Browser does not upload related pages such as a results or a detail page, dependent
files such as image files, or server-side includes. To upload a missing file, select Window > Site
to open the Site panel, select the file under Local Folder, and click the blue up arrow in the
toolbar to copy the file to the web server folder.
Previewing dynamic pages in a browser
663
Restricting database information
displayed in Dreamweaver
Advanced users of large database systems like Oracle should restrict the number of database
items retrieved and displayed by Dreamweaver at design time. An Oracle database may
contain items that Dreamweaver cannot process at design time. You can create a schema in
Oracle and use it in Dreamweaver to filter out unnecessary items at design time.
NO TE
You cannot create a schema or catalog in Microsoft Access.
Other users may benefit from restricting the amount of information Dreamweaver retrieves at
design time. Some databases contain dozens or even hundreds of tables, and you might not
want Dreamweaver to list them all while you work. A schema or catalog can restrict the
number of database items Dreamweaver gets at design time.
You must create a schema or catalog in your database system before you can apply it in
Dreamweaver. Consult your database system documentation or your system administrator.
You cannot apply a schema or catalog in Dreamweaver if you’re developing a
ColdFusion application.
To apply a schema or catalog in Dreamweaver to an application other than
ColdFusion:
1.
Open a dynamic page in Dreamweaver; then open the Databases panel (Window >
Databases).
If the database connection already exists, a list of connections appears in the panel.
2.
Right-click (Windows) or Control-click (Macintosh) the connection, and select Edit
Connection from the pop-up menu. The dialog box appropriate for the connection
appears.
If the connection does not exist, click the Plus (+) button at the top of the panel and create
it. For more information, see “Connecting to a database” on page 609.
3.
In the dialog box for the connection, click Advanced.
The Restrict dialog box appears.
4.
Specify your schema or catalog.
5.
Click OK.
664
Chapter 30: Optimizing the Workspace for Visual Development
CHAPTER 31
31
The Workflow for Dynamic
Page Design
A key benefit provided by Macromedia Dreamweaver 8 is the ability to create dynamic
websites without having to be experienced in programming languages. The Dreamweaver
visual tools let you develop dynamic websites without having to hand code the complex
programmatic logic required to create a site that displays dynamic content stored in a
database. Dreamweaver lets you create dynamic websites using any of several popular web
programming languages and server technologies. These include Macromedia ColdFusion,
ASP.NET, Microsoft Active Server Pages (ASP), JavaServer Pages (JSP), and PHP.
This chapter outlines the key steps you must follow to successfully design and create a
dynamic website. At the end of each section, you will find references to the specific procedures
necessary to develop a dynamic page. The five key steps to developing a dynamic web page are
as follows:
Designing the page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .665
Creating a source of dynamic content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .666
Adding dynamic content to a web page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .668
Enhancing the functionality of a dynamic page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .668
Testing and debugging the page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .670
Designing the page
A key step in designing any website—whether static or dynamic—is the visual design of the
page. When adding dynamic elements to a web page, the design of the page becomes crucial
to its usability. You should carefully consider how users will interact with both individual
pages and the website as a whole.
A common method of incorporating dynamic content into a web page is to create a table to
present content, and import dynamic content into one or more of the table’s cells. Using this
method you can present information of various types in a structured format.
665
For information on designing pages, see the following chapters:
■
Chapter 8, “Presenting Content with Tables,” on page 233
■
Chapter 9, “Laying Out Pages in Layout Mode,” on page 257
■
Chapter 12, “Working with Pages,” on page 341
■
Chapter 13, “Inserting and Formatting Text,” on page 369
■
Chapter 14, “Inserting Images,” on page 407
■
Chapter 15, “Linking and Navigation,” on page 421
■
Chapter 17, “Adding Audio, Video, and Interactive Elements,” on page 469
Creating a source of dynamic content
Dynamic websites require a content source from which to extract data before they can display
it on a web page. In Dreamweaver, these data sources can be databases, request variables,
server variables, form variables, or stored procedures.
Before you can use these content sources in a web page, you must do the following:
■
Create a connection to the dynamic content source (such as a database) and the
application server processing the page
■
Specify what information in the database you want to display, or what variables you want
to include in the page
■
Use Dreamweaver’s point-and-click interface to select and insert dynamic content
elements into the selected page
Dreamweaver allows you to easily connect to a database and create a recordset from which to
extract dynamic content. A recordset is the result of a database query. It extracts the specific
information you request and allows you to display that information within a specified page.
You define the recordset based on the information contained in the database and the content
you want to display.
Different technology vendors may use different terminology for a recordset. In ASP and
ColdFusion, a recordset is defined as a query. In JSP, a recordset is called a resultset. ASP.NET
refers to a recordset as a DataSet. If you are using other sources of data, such as user input or
server variables, the name of the data source that is defined in Dreamweaver is the same as the
data source name itself.
666
Chapter 31: The Workflow for Dynamic Page Design
To use a content source in Dreamweaver, you use the Bindings panel to create the data source.
The Bindings panel, shown below, lets you create data sources for databases and different
variable types. When you create a data source, it is stored in the Bindings panel where it can
be selected and inserted into the current page.
To create a recordset in Dreamweaver, you use the Recordset dialog box. You can open the
Recordset dialog box from either the Server pane of the Insert bar, or from the Bindings panel.
The Simple Recordset dialog box lets you select an existing database connection and create a
database query by selecting the table or tables whose data you want to include in the recordset.
You can even use the Filter section of the dialog box to create simple search and return criteria
for the query. You can test the query from within the Recordset dialog box, and make any
needed adjustments before adding it to the Bindings panel.
Once a database connection is established, and a recordset defined, the recordset appears in
the Bindings panel. From here you can import it into any web page within the defined site.
The illustration below shows the Bindings panel with the recordset for an employee database
open. You can insert any of the values shown into a web page by selecting the item, and
clicking the Insert button at the bottom of the panel. The selected item is inserted into the
specified placeholder within the page.
Creating a source of dynamic content
667
For information on databases, and the procedures needed to create a database connection, see
the following chapters:
■
Chapter 32, “Obtaining Data for Your Page,” on page 673
■
“Appendix A, “Beginner’s Guide to Databases,” on page 983,”
Adding dynamic content to a web page
After you define a recordset or other data source, and add it to the Bindings panel, you can
insert the dynamic content the recordset represents into the page. The Dreamweaver menudriven interface makes adding dynamic content elements as easy as selecting a dynamic
content source from the Bindings panel, and inserting it into an appropriate text, image, or
form object within the current page.
When you insert a dynamic content element or other server behavior into a page,
Dreamweaver inserts a server-side script into the page’s source code. This script instructs the
server to retrieve data from the defined data source and render it within the web page.
■
To place dynamic content within a web page, you can do one of the following:
■
Place it at the insertion point in either Code or Design view.
■
Replace a text string or other placeholder.
Insert it into an HTML attribute. For example, dynamic content can define the src attribute
of an image or the value attribute of a form field.
For detailed procedures on adding dynamic content to a page, see the following chapters:
■
Chapter 33, “Defining Sources of Dynamic Content,” on page 685
■
Chapter 39, “Creating Forms,” on page 799
Enhancing the functionality of a dynamic
page
In addition to adding dynamic content, Dreamweaver lets you easily incorporate complex
application logic into web pages by using Server behaviors. Server behaviors are predefined
pieces of server-side code that add application logic to web pages, providing greater
interaction and functionality. The Dreamweaver server behaviors allow you to add application
logic to a website without having to write the code yourself. The server behaviors supplied
with Dreamweaver support ColdFusion, ASP, ASP.NET, JSP and PHP document types.
668
Chapter 31: The Workflow for Dynamic Page Design
The server behaviors are written and tested to be fast, secure, and robust. Dreamweaver’s
built-in server behaviors have been designed to support cross-platform web pages for all
browsers.
Adding server behaviors to a page
To add server behaviors to a page, select them from either the Application category of the
Insert bar, or the Server Behaviors panel. To use the Server Behaviors panel, select Window >
Server Behaviors, click the Plus (+) button on the panel, and select a server behavior from the
pop-up menu. The illustration below shows the Server Behavior buttons available from the
Insert bar.
Dreamweaver provides a point-and-click interface that makes applying dynamic content and
complex behaviors to a page as easy as inserting textual and design elements. The following
server behaviors are available:
■
Define a recordset from an existing database. The recordset you define is then stored in
the Bindings panel.
■
Display multiple records on a single page. You select either an entire table or individual
cells or rows that contain dynamic content, and specify the number of records to display
on each page view.
■
Create and insert a dynamic table into a page, and associate the table with a recordset. You
can later modify both the tables appearance and the repeated region using the Property
inspector and Repeated Region Server Behavior respectively.
■
Insert a dynamic text object into a page. The text object you insert is an item from a
predefined recordset, to which you can apply any of the Dreamweaver data formats.
■
Create record navigation and status controls, master/detail pages, and forms for updating
information in a database.
■
Display more than one record from a database record.
■
Create recordset navigation links that allow users to view the previous or next records from
a database record.
■
Add a record counter to help users keep track of how many records where returned, and
where they are in the returned result.
You can also extend Dreamweaver server behaviors by writing your own, or installing server
behaviors written by third parties.
Enhancing the functionality of a dynamic page
669
For more information on enhancing the functionality of web pages using server behaviors, see
the following chapters:
■
Chapter 34, “Adding Dynamic Content to Web Pages,” on page 707
■
Chapter 35, “Displaying Database Records,” on page 717
■
Chapter 40, “Building ColdFusion Applications Rapidly,” on page 821
■
Chapter 41, “Building ASP.NET Applications Rapidly,” on page 893
■
Chapter 42, “Building ASP and JSP Applications Rapidly,” on page 935
■
Chapter 43, “Building PHP Applications Rapidly,” on page 957
Testing and debugging the page
Before making a dynamic page—or an entire website—available on the web, you will want to
test its functionality. For guidelines to help you test a website’s usability and cross-platform
compatibility, see “Site testing guidelines” on page 154. For more information about
designing websites for people with auditory, visual, and other disabilities, see “Using
Dreamweaver accessibility features” on page 64. You should become familiar with the issues
described in this section and consider how your application’s functionality might affect people
with disabilities.
This section covers the following topics:
■
“Testing dynamic content” on page 670
■
“Editing dynamic content on a page” on page 671
■
“Deleting dynamic content” on page 672
Testing dynamic content
Dreamweaver allows you to preview and edit dynamic content using the Live Data window.
N O TE
Links don’t work in the Live Data window. To test your links, use the Dreamweaver
Preview in Browser feature. (See “Checking for browser compatibility” on page 577.)
While dynamic content is displayed, you can perform the following tasks:
■
Adjust the page’s layout using the Dreamweaver page-design tools
■
Add, edit, or delete dynamic content
■
Add, edit, or delete server behaviors
670
Chapter 31: The Workflow for Dynamic Page Design
To achieve this effect, Dreamweaver runs the dynamic page on your server before displaying it
in the Live Data window. Whenever you switch to the Live Data window, a temporary copy
of the open document is sent to your application server for processing. The resulting page is
returned and displayed in the Live Data window, and the temporary copy on the server is
deleted.
You can toggle between the Document window and the Live Data window by selecting Live
Data from the View menu. If a page expects data from the user—for example, the ID number
of a record selected in a master page—you can provide the page with that data yourself in the
Live Data Settings dialog box.
To enter live data parameters:
1.
Make the necessary changes to the page.
2.
If your page expects URL parameters from an HTML form using the GET method,
enter the name/value pairs in the text box in the toolbar and click the Refresh button
(the circle-arrow icon).
Enter the test data in the following format:
name=value;
In this format, name is the URL parameters name expected by your page and value is the
value held by that parameter.
You can also define name/value pairs in the Live Data Settings dialog box (View > Live
Data Settings) and save them with the page.
3.
Click the Refresh button if your page needs refreshing.
Related topics
■
“Editing dynamic content on a page” on page 671
■
“Deleting dynamic content” on page 672
Editing dynamic content on a page
You can modify or remove dynamic content from a page by changing the server behavior that
provides the content, or deleting the behavior altogether. For example, you can edit a
recordset server behavior to return more records to the page.
Dynamic content on a page is listed in the Server Behaviors panel. For example, if you add a
recordset to your page, the Server Behaviors panel lists it as follows:
Recordset(myRecordset)
Testing and debugging the page
671
If you add another recordset to your page, the Server Behaviors panel lists both recordsets
as follows:
Recordset(mySecondRecordset)
Recordset(myRecordset)
To edit a server behavior providing dynamic content:
1.
Open the Server Behaviors panel (Window > Server Behaviors).
2.
Click the Plus (+) button to display the server behaviors, and double-click the server
behavior in the Server Behaviors panel.
The dialog box you used to define the original data source appears.
3.
Make your changes in the dialog box and click OK.
You can also use the Property inspector to edit the recordsets on the page. Open the Property
inspector (Window > Properties); then select the recordset in the Server Behaviors panel
(Window > Server Behavior).
Related topics
■
“Testing dynamic content” on page 670
■
“Deleting dynamic content” on page 672
Deleting dynamic content
After adding dynamic content to a page, you can delete it by selecting the dynamic content on
the page and pressing Delete. You can also delete it by selecting the dynamic content in the
Server Behaviors panel and clicking the Minus (-) button.
N OT E
This operation removes the server-side script in the page that retrieves the dynamic
content from the database. It does not delete the data in the database.
Related topics
■
“Testing dynamic content” on page 670
■
672
“Editing dynamic content on a page” on page 671
Chapter 31: The Workflow for Dynamic Page Design
32
CHAPTER 32
Obtaining Data for Your Page
Web-based applications and dynamic websites require a content source from which to retrieve
data. Both data and data sources can take many forms. Typically, data consists of text or
numerical information returned to a web page, and displayed in some form to the user.
This chapter contains the following sections:
Using a database to store content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 673
Collecting data submitted by users. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 674
Accessing data stored in session variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .679
Using a database to store content
Using a database to store content allows you to separate your website’s design from the
content you want to display to users of the site. Instead of writing individual HTML files for
every page, you only need to write a page—or template—for the different kinds of
information you want to present. Using a database, you can provide new content to a website
by simply uploading content into a database and then having the website retrieve that content
dynamically in response to a user’s request. A key advantage of storing content information in
a database is the ability to update information in a single source, and then populate that
change throughout the website without having to search through the pages that might contain
the information and manually edit each page.
Databases come in many forms depending upon the amount and the complexity of the data
they must store. A database commonly installed on Windows computers is Microsoft Access.
If you are new to databases, Access provides an easy-to-use interface that lets you work with
database tables. While you can use Access as a data source for most website applications, be
aware that Access has a file size limitation of 2 gigabytes (GB), and is limited to 255
concurrent users. For this reason, Access is a reasonable choice for website development and
corporate workgroups. However, if you anticipate a large user community accessing the site,
plan on using a database designed to support your site’s intended user base.
673
For websites requiring a greater degree of flexibility in their modeling of data, and the ability
to support large, concurrent user communities, server-based relational databases (typically
referred to as RDBMS) are commonly used. Common relational databases used to store
content for web-based applications and dynamic sites include MySQL, Microsoft SQL Server,
and Oracle.
Whatever database you use to support your website, you can use Macromedia Dreamweaver 8
to design web forms to insert, update, or delete data from the database.
To learn more about databases, see Appendix A, “Beginner’s Guide to Databases,” on
page 983.
Accessing data stored in a database
Web pages can’t directly access the data stored in a database. Instead, they interact with a
recordset. A recordset is a subset of the information, or records, extracted from the database.
This subset of information is extracted using a database query. A query is a search statement
designed to find and extract specific information from a database. Dreamweaver uses the
Structured Query Language (SQL) to build queries. Although you do not need to learn SQL
(pronounced “sequel”) to be able to create simple queries using Dreamweaver, a basic
knowledge of this easy-to-understand language lets you create more advanced queries, and
thus provides you with greater flexibility in designing dynamic pages. To learn the basics of
SQL, see Appendix B, “SQL Primer,” on page 997.
A SQL query can produce a recordset that includes only certain columns, only certain records,
or a combination of both. A recordset can also include all the records and columns of a
database table. However, because applications rarely need to use every piece of data in a
database, you should strive to make your recordsets as small as possible. Because the web
server temporarily holds the recordset in memory, using a smaller recordset uses less memory,
and can potentially improve server performance.
Collecting data submitted by users
You can use web pages to gather information from users, store that information in the server’s
memory, then use the information to create a dynamic response based on the user’s input. The
most common tools for gathering information are HTML forms and hypertext link
selections.
674
Chapter 32: Obtaining Data for Your Page
HTML forms
let you gather information from users and store it in the server’s memory. An
HTML form can send the information either as form parameters or as URL parameters. If
you set the form’s method attribute to POST, the browser includes the form’s values in the
body of the message sent to the server. If you set the form’s method attribute to GET, the
browser appends the form values to the URL specified in the action attribute and sends the
information to the server.
Hypertext links also let you gather information from users and store it in the server’s memory.
You specify a value (or values) to be submitted when a user clicks a link—a preference, for
example—by appending the value to the URL specified in the anchor tag. When a user clicks
the link, the browser sends the URL and the appended value to the server.
This section describes how to create form and URL parameters for use in web applications.
Form parameters
Form parameters are sent to the server using an HTML form using either the POST or GET
method. When using the POST method, parameters are sent in the body of the message. In
contrast, the GET method appends parameters to the requested URL.
You can use Dreamweaver to quickly design HTML forms that send form parameters to the
server. For instructions, see Chapter 39, “Creating Forms,” on page 799. Be aware of the
method you use to transmit information from the browser to the server.
Form parameters take the names of their corresponding form objects. For example, if your
form contains a text field named txtLastName, then the following form parameter is sent to
the server when the user clicks the Submit button:
txtLastName=enteredvalue
In cases where a web application expects a precise parameter value (for example, when it
performs an action based on one of several options), use a radio button, checkbox, or list/
menu form object to control the possible values the user can submit. This prevents users from
typing information incorrectly and causing an application error. The example below depicts a
pop-up menu form offering three choices:
Collecting data submitted by users
675
Each menu choice corresponds to a hard-coded value that is submitted as a form parameter to
the server. The List Values dialog box—shown below—matches each list item to a value (Add,
Update, or Delete):
Related topics
■
“URL parameters” on page 676
■
“Creating URL parameters using HTML links” on page 678
■
“Retrieving form and URL parameters” on page 678
URL parameters
A URL parameter is a name/value pair appended to a URL. The parameter begins with a
question mark (?) and takes the form name=value. If more than one URL parameter exists,
each parameter is separated by an ampersand (&). The following example shows a URL
parameter with two name/value pairs:
http://server/path/document?name1=value1&name2=value2
URL parameters let you pass user-supplied information from the browser to the server. When
a server receives a request, and parameters are appended to the URL of the request, the server
puts the parameters at the disposal of the requested page before serving that page to the
browser.
In this example, imagine that the application is a web-based storefront. Because the developers
of the site want to reach the widest possible audience, they have designed the site to support
foreign currencies. When users log in to the site, they can select the currency in which to view
the prices of the available items.
1.
The browser requests the page report.cfm from the server. The request includes the URL
parameter Currency="euro". The Currency="euro" variable specifies that all monetary
amounts retrieved be displayed as the European Union euro.
2.
The server temporarily stores the URL parameter in memory.
676
Chapter 32: Obtaining Data for Your Page
3.
The report.cfm page retrieves and uses the parameter to retrieve the cost of items in euros.
These monetary amounts can either be stored in a database table of different currencies, or
converted from a single currency associated with each item (any currency supported by the
application).
4.
The server sends the report.cfm page to the browser, and displays the value of items in the
requested currency. When this user terminates the session, the server destroys the value of
the URL parameter, freeing up server memory to hold the requests of new users logging in
to the site.
WEB SERVER
http://www.mysite.com/
report.cfm?Currency="¤"
Currency="¤"
Web browser
report.cfm
URL parameters are created when the HTTP’s GET method is used in conjunction with an
HTML form. The GET method specifies that the parameter value be appended to the URL
request when the form is submitted.
Typical uses of URL parameters include personalizing websites based on a user’s preferences.
For example, a URL parameter consisting of a user name and password can be used to
authenticate a user, displaying only information that user has subscribed to. Common
examples of this include financial websites that display individual stock prices based on stock
market symbols the user has previously chosen. Web application developers commonly use
URL parameters to pass values to variables within applications. For example, you could pass
search terms to SQL variables in a web application to generate search results.
Related topics
■
“Creating URL parameters using HTML links” on page 678
■
“Retrieving form and URL parameters” on page 678
Collecting data submitted by users
677
Creating URL parameters using HTML links
Creating URL parameters within an HTML link consists of using the href attribute of the
HTML anchor tag. You can enter the URL parameters directly in the attribute by switching
to Code view (View > Code), or by appending the URL parameters at the end of the link
URL in the Property inspector Link text box.
In the following example, three links create a single URL parameter (action) with three
possible values (Add, Update, and Delete). Depending on the link the user clicks, a different
parameter value is sent to the server, and the requested action performed.
Add a recordUpdate a recordDelete a record
The Property inspector (Window > Properties) lets you create the same URL parameters by
selecting the link, and appending the URL parameter values at the end of the link URL in the
Link text box.
Related topics
“Collecting data submitted by users” on page 674
■
■
“URL parameters” on page 676
■
“Retrieving form and URL parameters” on page 678
■
“Understanding URL and form parameters” on page 688
■
“Defining URL parameters” on page 695
■
“Defining form parameters” on page 696
Retrieving form and URL parameters
After a form or URL parameter is created, Dreamweaver can retrieve the value and use it in a
web application. For more information, see “Defining URL parameters” on page 695.
After defining the form or URL parameter in Dreamweaver, you can insert its value within a
page. For more information, see Chapter 34, “Adding Dynamic Content to Web Pages,” on
page 707.
678
Chapter 32: Obtaining Data for Your Page
Related topics
■
“Accessing data stored in a database” on page 674
■
“Form parameters” on page 675
■
“URL parameters” on page 676
■
“Creating URL parameters using HTML links” on page 678
Accessing data stored in session
variables
Session variables provide a mechanism through which user information can be stored and
accessed for use by web applications. Typically, session variables store information (usually
form or URL parameters submitted by users) and make that information available to all of the
application’s pages for the duration of the user’s visit. For example, when users log on to a web
portal that provides access to e-mail, stock quotes, weather reports, and daily news, the web
application stores the login information in a session variable that identifies the user
throughout the site’s pages. This allows the user to see only the types of content they have
selected as they navigate through the site. Session variables can also provide a safety
mechanism in the form of a time-out that terminates the user’s session if the account remains
inactive for too long a period of time. This also frees server memory and processing resources
if the user forgets to log off a website.
Session variables are commonly used to store user display preferences, answers to multipart
questionnaires, items chosen for purchase in so-called “shopping cart” applications, and
running score tallies for online games.
Understanding session variables
Web servers (or more specifically, the HTTP protocol) are stateless, meaning that they do not
keep track of the browsers connecting to them, or of the individual page requests by users.
Every time a web server receives a request for a web page and responds to it by delivering the
relevant page to the user’s browser, the web server “forgets” about both the browser making
the request and the web page it sent. When the same user requests a related page at a later
time, the web server sends the page without knowing the last page that it sent to that user.
Accessing data stored in session variables
679
While the stateless nature of HTTP makes for a simple, easy-to-implement protocol, it makes
more advanced web applications, such as personalized content generation, more difficult. For
example, in order to customize a site’s content for an individual user, the user must first be
identified. Most websites use some form of user name and password login to accomplish this.
If multiple customized pages will be displayed, a way to keep track of which users are logged
in is necessary, as most users would find it unacceptable to provide their user name and
password for each of the site’s pages.
To allow for the creation of complex web applications, and the storage of user-supplied data
across all of a site’s pages, most application server technologies include support for session
management. Session management allows web applications to maintain state across multiple
HTTP requests, allowing a user’s requests for web pages during a given time period to be
viewed as part of the same interactive session.
Session variables store information for the life of the user’s session. The user’s session begins
when he or she first opens a page within the application. The session ends when the user does
not open another page in the application for a certain period of time, or when the user
explicitly terminates the session (typically by clicking a “log-off ” link). While it exists, the
session is specific to an individual user, and every user has a separate session.
Use session variables to store information that every page in a web application can access. The
information can be as diverse as the user’s name, preferred font size, or a flag indicating
whether the user has successfully logged in. Another common use of session variables is to
keep a running tally, such as the number of questions the user answered correctly so far on an
online quiz, or the products the user selected so far from an online catalog.
Note that session variables can only function if the user’s browser is configured to accept
cookies. The server creates a session ID number that uniquely identifies the user when the
session is first initiated, then sends a cookie containing the ID number to the user’s browser.
When the user requests another page on the server, the server reads the cookie in the browser
to identify the user and to retrieve the user’s session variables stored in the server’s memory.
Related topics
■
“Collecting information to store in session variables” on page 681
■
“Storing information in session variables” on page 681
■
“Example of information stored in session variables” on page 683
■
“Retrieving data from session variables” on page 684
680
Chapter 32: Obtaining Data for Your Page
Collecting information to store in session variables
Before creating a session variable, you must first obtain the information you want to store,
then send it to the server for storage. This section describes how to gather and send
information to the server using HTML forms or hypertext links containing URL parameters.
You can also obtain information from cookies stored on the user’s computer, from the HTTP
headers sent by the user’s browser with a page request, or from a database.
Related topics
■
“Understanding session variables” on page 679
■
“Storing information in session variables” on page 681
■
“Example of information stored in session variables” on page 683
■
“Retrieving data from session variables” on page 684
Storing URL parameters in session variables
A typical example of storing URL parameters in session variables is a product catalog that uses
hard-coded URL parameters created using a hypertext link to send product information back
to the server to be stored in a session variable. When a user clicks the “Add to shopping cart”
link, the product ID is stored in a session variable while the user continues to shop. When the
user proceeds to the check-out page, the product ID stored in the session variable is retrieved.
Storing form parameters in session variables
A form-based survey is a typical example of a page that stores form parameters in session
variables. The form sends the selected information back to the server, where an application
page scores the survey and stores the responses in a session variable to be passed to an
application that might tally up the responses gathered from the survey population. Or the
information might be stored in a database for later use.
Storing information in session variables
After information is sent to the server, you store the information in session variables by adding
the appropriate code for your server model to the page specified by the URL or form
parameter. Referred to as the destination page, this page is specified in either the action
attribute of the HTML form or the href attribute of the hypertext link on the starting page.
The HTML syntax for each appears as follows:
Accessing data stored in session variables
681
Both the server technology used and the method you use to obtain the information
determines the code used to store the information in a session variable. The basic syntax for
each server technology is as follows:
ColdFusion
ASP and ASP.NET
<% Session("variable_name") = value %>
The value expression is usually a server expression such as Request.Form(“lastname”). For
example, if you use a URL parameter called product (or an HTML form with the GET
method and a text field called product) to gather information, the following statements store
the information in a session variable called prodID:
ColdFusion
ASP and ASP.NET
<% Session("prodID") = Request.QueryString("product") %>
If you use an HTML form with the post method and a text field called txtProduct to gather
the information, then the following statements store the information in the session variable:
ColdFusion
ASP and ASP.NET
<% Session("prodID") = Request.Form("txtProduct") %>
Related topics
■
“Understanding session variables” on page 679
■
“Collecting information to store in session variables” on page 681
■
“Example of information stored in session variables” on page 683
■
“Retrieving data from session variables” on page 684
682
Chapter 32: Obtaining Data for Your Page
Example of information stored in session variables
You’re working on a site with a large audience of senior citizens. In Dreamweaver, you add two
links to the start page that let users customize the size of the site’s text. For larger, easy-to-read
text, the user clicks one link, and for regular-size text, the user clicks another link.
Each link has a URL parameter called fontsize that submits the user’s text preference to the
server, as the following Macromedia ColdFusion example shows:
Larger Text Normal Text
You decide to store the user’s text preference in a session variable and use it to set the font size
on each page the user requests.
Near the top of the destination page, you enter the following code to create a session called
font_pref that stores the user’s font size preference.
ColdFusion
ASP and ASP.NET
<% Session("font_pref") = Request.QueryString("fontsize") %>
When the user clicks the hypertext link, the page sends the user’s text preference in a URL
parameter to the destination page. The code on the destination page stores the URL
parameter in the font_pref session variable. For the duration of the user’s session, all the
pages of the application retrieve this value and display the selected font size.
Accessing data stored in session variables
683
Related topics
■
“Understanding session variables” on page 679
■
“Collecting information to store in session variables” on page 681
■
“Storing information in session variables” on page 681
■
“Retrieving data from session variables” on page 684
Retrieving data from session variables
Once you store a value in a session variable, you can use Dreamweaver to retrieve the value
from session variables and use it in a web application. For more information, see “Defining
session variables” on page 698.
After you define the session variable in Dreamweaver, you can insert its value in a page. For
more information, see Chapter 34, “Adding Dynamic Content to Web Pages,” on page 707.
Related topics
■
“Understanding session variables” on page 679
■
“Collecting information to store in session variables” on page 681
■
“Storing information in session variables” on page 681
■
“Example of information stored in session variables” on page 683
684
Chapter 32: Obtaining Data for Your Page
CHAPTER 33
33
Defining Sources of
Dynamic Content
Dynamic websites require a data source from which to retrieve and display dynamic content.
Macromedia Dreamweaver 8 lets you use databases, request variables, URL variables, server
variables, form variables, stored procedures, and other sources of dynamic content.
Depending on the data source, you can either retrieve new content to satisfy a request, or
modify the page to meet the needs of users.
This chapter describes the procedures for defining both databases and variables as sources of
dynamic content. To learn more about the technologies discussed in this chapter, see “HTML
and web technologies resources” on page 36.
This chapter contains the following sections:
About dynamic content sources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .685
Defining a recordset. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 691
Defining URL parameters. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 695
Defining form parameters. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .696
Defining session variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .698
Defining application variables for ASP and ColdFusion . . . . . . . . . . . . . . . . . . . . . 699
Using a variable as a data source for a ColdFusion recordset . . . . . . . . . . . . . . . . .700
Defining server variables. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 701
Caching content sources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .703
Changing or deleting content sources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .704
Copying a recordset from one page to another page . . . . . . . . . . . . . . . . . . . . . . . . .705
About dynamic content sources
A dynamic content source is a store of information from which you can retrieve and display
dynamic content for use in a web page. Sources of dynamic content include not only
information stored in a database, but values submitted by HTML forms, values contained in
server objects, values of JavaBeans properties, and other content sources.
685
Any content source you define in Dreamweaver is added to the list of content sources in the
Bindings panel. After you create a content source and include it in the Bindings panel, you
can easily insert it into the currently selected page.
Related topics
■
“Understanding recordsets” on page 686
■
“Understanding URL and form parameters” on page 688
■
“About session variables” on page 689
■
“ASP and ColdFusion application variables” on page 689
■
“ASP server variables” on page 690
■
“ColdFusion server variables” on page 690
Understanding recordsets
When using a database as a content source for a dynamic web page, you must first create a
recordset in which to store the retrieved data. Recordsets serve as an intermediary between the
database storing the content and the application server generating the page. Recordsets consist
of the data returned by a database query, and are temporarily stored in the application server’s
memory for faster data retrieval. The server discards the recordset when it is no longer needed.
686
Chapter 33: Defining Sources of Dynamic Content
The recordset itself is a collection of data retrieved from a specified database. It can include an
entire database table, or a subset of the table’s rows and columns. These rows and columns are
retrieved by means of a database query that is defined in the recordset. Database queries are
written in Structured Query Language (SQL), a simple language that allows you to retrieve,
add, and delete data to and from a database. The SQL builder included with Dreamweaver
lets you create simple queries without having to understand SQL. However, if you want to
create complex SQL queries, you will need to learn SQL, and manually write SQL statements
that you enter into Dreamweaver.
NO T E
Microsoft ASP.NET refers to a recordset as a DataSet. If you are working with ASP.NET
document types, the dialog boxes and menu choices specific to ASP.NET use the label
DataSet. The Dreamweaver documentation generically refers to both types as
recordsets, but uses DataSet when specifically describing ASP.NET features.
For more information on using databases and SQL, see Appendix A, “Beginner’s Guide
to Databases,” on page 983 and Appendix B, “SQL Primer,” on page 997.
If you will be writing SQL for use with ASP.NET, there are some conditions specific to
ASP.NET that you should be aware of. To learn about these conditions, see “Writing SQL for
ASP.NET” on page 688.
Before you define a recordset for use with Dreamweaver, you must create a connection to a
database and—if no data exists yet—enter data into the database. If you have not yet defined
a database connection for your site, refer to the database connection chapter for the server
technology you are developing for, and follow the instructions on creating a database
connection.
Database connections for all Dreamweaver supported server technologies are described in the
following chapters:
■
Chapter 24, “Database Connections for ColdFusion Developers,” on page 611
■
Chapter 26, “Database Connections for ASP Developers,” on page 621
■
Chapter 25, “Database Connections for ASP.NET Developers,” on page 615
■
Chapter 27, “Database Connections for JSP Developers,” on page 633
■
Chapter 28, “Database Connections for PHP Developers,” on page 641
Related topics
■
“Defining a recordset” on page 691
About dynamic content sources
687
Writing SQL for ASP.NET
When writing SQL statements in the Advanced DataSet dialog box, there are conditions
specific to ASP.NET that you must be aware of. These conditions are described in the next
sections.
Parameters
The syntax you use to reference parameters varies depending on the database connection in
use (for example, OLE DB or Microsoft SQL Server).
OLE DB
When connecting to a database using OLE DB, parameters must be referenced using a
question mark (?). For example:
SELECT * FROM Employees WHERE HireDate > ?
Microsoft SQL Server
When connecting to Microsoft SQL Server using the Managed Data Provider for SQL Server
supplied with the .NET Framework, all parameters must be named. For example:
SELECT * FROM Employees WHERE HireDate > @hireDate
Inserting code within SQL statements
When inserting code within SQL statements written for ASP.NET, you must enclose all
strings in quotes (" "), and enclose the code in parentheses ( ).
SELECT * FROM Employees WHERE HireDate > "+
(Request.queryString("hireDate"))
Related topics:
■
Chapter 25, “Database Connections for ASP.NET Developers,” on page 615.
Understanding URL and form parameters
URL parameters store retrieved information input by users. To define a URL parameter you
create a form or hypertext link that uses the GET method to submit data. The information is
appended to the URL of the requested page and communicated to the server. When using
URL variables, the query string contains one or more name/value pairs that are associated
with the form fields. These name/value pairs are appended to the URL.
688
Chapter 33: Defining Sources of Dynamic Content
Form parameters store retrieved information that is included in the HTTP request for a web
page. If you create a form that uses the POST method, the data submitted by the form is passed
to the server. Before you begin, make sure you pass a form parameter to the server. For
instructions, see Chapter 32, “Obtaining Data for Your Page,” on page 673.
Related topics
“Defining URL parameters” on page 695
■
■
“Defining form parameters” on page 696
About session variables
Session variables let you store and display information maintained for the duration of a user’s
visit (or session). The server creates a different session object for each user and maintains it for
a set period of time or until the object is explicitly terminated. For more information, see
“Accessing data stored in session variables” on page 679.
Because session variables last throughout the user’s session and persist when the user moves
from page to page within the website, they’re ideal for storing user preferences. Session
variables can also be used for inserting a value in the page’s HTML code, assigning a value to
a local variable, or providing a value to evaluate a conditional expression.
Before defining session variables for a page, you must create them in the source code. For
instructions, see “Collecting data submitted by users” on page 674 and “Accessing data stored
in session variables” on page 679.
After you create a session variable in the web application’s source code, you can use
Dreamweaver to retrieve its value and use it in a web page.
Related topics
■
“ASP and ColdFusion application variables” on page 689
■
“Defining session variables” on page 698
ASP and ColdFusion application variables
In ASP and ColdFusion, you can use application variables to store and display information
that is maintained for the lifetime of the application and persists from user to user. The
application’s lifetime lasts from the time the first user requests a page in the application to the
time the web server is stopped. (An application is defined as all the files in a virtual directory
and its subdirectories.)
About dynamic content sources
689
Because application variables last for the lifetime of the application, and persist from user to
user, they’re ideal for storing information that must exist for all users, such as the current time
and date. The value of the application variable is defined in the application’s code.
For more information, see “Defining application variables for ASP and ColdFusion”
on page 699 and “Adding Dynamic Content to Web Pages” on page 707
ASP server variables
You can define the following ASP server variables as sources of dynamic content:
Request.Cookie, Request.QueryString, Request.Form, Request.ServerVariables, and
Request.ClientCertificates.
Related topics
■
“Defining ASP server variables” on page 701
ColdFusion server variables
You can define the following ColdFusion server variables:
Client variables
associate data with a specific client. Client variables maintain the
application’s state as the user moves from page to page in the application, as well as from
session to session. “Maintaining state” means to preserve information from one page (or
session) to the next so that the application “remembers” the user and the user’s previous
choices and preferences.
Cookie variables
access cookies passed to the server by the browser.
CGI variables
provide information about the server running ColdFusion, the browser
requesting a page, and other information about the processing environment.
Server variables can be accessed by all clients and applications on the server. They persist
until the server is stopped.
Local variables
are created with the CFSET tag or CFPARAM tag within a ColdFusion page.
Related topics
“Defining ColdFusion server variables” on page 702
■
■
“Defining JSP server variables” on page 703
■
“Defining PHP server variables” on page 702
690
Chapter 33: Defining Sources of Dynamic Content
Defining a recordset
You can define a recordset using either the Dreamweaver simple Recordset dialog box, which
lets you easily construct simple SQL statements, or you can use the advanced Recordset dialog
box, which lets you write your own SQL statements, or use the graphical Database Items tree
to create a SQL statement.
If you are not familiar with writing SQL statements to retrieve information from a database,
use the simple Recordset dialog box.
This section covers the following topics:
■
“Creating a recordset without writing SQL” on page 691
■
“Creating an advanced recordset by writing SQL” on page 692
■
“Creating SQL queries using the Database Items tree” on page 694
Related topics
■
“Defining a recordset in a ColdFusion component” on page 890
Creating a recordset without writing SQL
This section describes how to define a recordset using Dreamweaver’s Recordset dialog box,
which allows you to create a recordset without having to manually enter SQL statements.
Defining a recordset using this method can be as easy as selecting a database connection and
table from the Recordset dialog box’s pop-up menus.
If you want to write your own SQL statements, use the advanced Recordset dialog box.
(See “Creating an advanced recordset by writing SQL” on page 692.)
To define a recordset without writing SQL:
1.
In the Document window, open the page that will use the recordset.
2.
Select Windows > Bindings to display the Bindings panel.
3.
In the Bindings panel, click the Plus (+) button and select Recordset (Query) from the
pop-up menu.
Defining a recordset
691
The simple Recordset dialog box appears. If you are developing a ColdFusion or ASP.NET
site, the Recordset dialog box is slightly different from the example shown below. (If the
advanced Recordset dialog appears instead, switch to the simple Recordset dialog box by
clicking the Simple button.)
4.
Complete the dialog box.
For more information, click the Help button in the Recordset dialog box.
5.
Click the Test button to execute the query and ensure that it retrieves the information
you intended.
If you defined a filter that uses parameters input by users, the Test button displays the Test
Value dialog box. Enter a value in the Test Value text box and click OK. If an instance of
the recordset is successfully created, a table displaying data extracted from the recordset
appears.
6.
Click OK to add the recordset to the list of available content sources in the Bindings panel.
Creating an advanced recordset by writing SQL
The advanced Recordset dialog box allows you to write your own SQL statements, or use the
graphical Database Items tree to create a SQL statement
N OT E
If you are writing SQL statements for ASP.NET document types, refer to “Creating SQL
queries using the Database Items tree” on page 694 for rules specific to ASP.NET.
If you want to create a simple recordset without manually writing SQL, see “Creating SQL
queries using the Database Items tree” on page 694.
692
Chapter 33: Defining Sources of Dynamic Content
To define a recordset writing SQL:
1.
In the Document window, open the page that will use the recordset.
2.
Select Windows > Bindings to display the Bindings panel.
3.
In the Bindings panel, click the Plus (+) button and select Recordset (Query) from the
pop-up menu.
The advanced Recordset dialog box appears. If you are developing a ColdFusion or
ASP.NET site, the Recordset dialog box is slightly different from the example shown
below. (If the simple Recordset dialog appears instead, switch to the advanced Recordset
dialog box by clicking the Advanced button.)
4.
Complete the dialog box.
For instructions on completing the Recordset dialog box, click the Help button in the
Recordset dialog box.
5.
Click the Test button to execute the query and ensure that it retrieves the information
you intended.
If you defined a filter that uses parameters input by users, the Test button displays the Test
Value dialog box. Enter a value in the Test Value text box and click OK. If an instance of
the recordset is successfully created, a table displaying the data from the recordset appears.
6.
Click OK to add the recordset to the list of available content sources in the Bindings panel.
Defining a recordset
693
Creating SQL queries using the Database Items tree
Instead of manually typing SQL statements into the SQL text box, you can use the Database
Item’s point-and-click interface to create complex SQL queries. The Database Items tree lets
you select database objects and link them using the SQL SELECT, WHERE, and ORDER
BY clauses. After you create a SQL query, you can define any variables using the Variables
portion of the dialog box.
The following examples describe two SQL statements and the steps for creating them using
the advanced Recordset dialog box’s Database Items tree.
Selecting a table
This example selects the entire contents of the Employees table. The SQL statement defining
the query appears as follows:
SELECT * FROM Employees
To create this query:
1.
Expand the Tables branch to display all of the tables in the selected database.
2.
Select the Employees table.
3.
Click the Select button.
4.
Click OK to add the recordset to the Bindings panel.
Selecting specific rows from a table and ordering the results
The following example selects two rows from the Employees table, and selects the job type
using a variable that you must define. The results are then ordered by employee name.
SELECT emplNo, emplName
FROM Employees
WHERE emplJob = 'varJob'
ORDER BY emplName
To create this query:
1.
Expand the Tables branch to display all of the tables in the selected database; then expand
the Employees table to display the individual table rows.
2.
Build the SQL statement as follows:
■
Select emplNo and click the Select button.
■
Select emplName and click the Select button.
■
Select emplJob and click the Where button.
■
Select emplName and click the Order By button.
694
Chapter 33: Defining Sources of Dynamic Content
3.
Place the insertion point after WHERE emplJob in the SQL text area and type ='varJob'
(include the equal sign).
4.
Define the variable 'varJob' by clicking the Plus (+) button in the Variables area and
entering the following values in the Name, Default Value, and Run-Time Value columns:
varJob, CLERK, Request("job").
5.
Click OK to add the recordset to the Bindings panel.
Defining URL parameters
URL parameters store retrieved information input by users. Before you begin, make sure you
pass a form or URL parameter to the server. For more information, see “URL parameters”
on page 676 and “Understanding URL and form parameters” on page 688.
To define a URL parameter:
1.
In the Document window, open the page that will use the variable.
2.
Select Windows > Bindings to display the Bindings panel.
3.
In the Bindings panel click the Plus (+) button and select one of the following from the
pop-up menu:
Document
Types
Menu item in Bindings panel for URL variable
ASP
Request Variable > Request.QueryString
ColdFusion
URL Variable
JSP
Request Variable
PHP
URL Variable
The URL Variable dialog box is displayed.
4.
Enter the name of the URL variable in the text box and click OK.
The URL variable name is normally the name of the HTML form field or object used to
obtain its value.
Defining URL parameters
695
5.
The URL variable appears in the Bindings panel.
Once you define the URL variable, you can use its value in the currently selected page. For
more information, see Chapter 34, “Adding Dynamic Content to Web Pages,” on
page 707.
Related topics:
■
“Defining form parameters” on page 696
■
“Defining session variables” on page 698
Defining form parameters
Form parameters store retrieved information that is included in the HTTP request for a web
page. If you create a form that uses the POST method, the data submitted by the form is passed
to the server. Before you begin, make sure you pass a form parameter to the server. For more
information, see Chapter 32, “Obtaining Data for Your Page,” on page 673 and
To define a form parameter:
1.
In the Document window, open the page that will use the variable.
2.
Select Windows > Bindings to display the Bindings panel.
696
Chapter 33: Defining Sources of Dynamic Content
3.
In the Bindings panel click the Plus (+) button and select one of the following from the
pop-up menu:
Document
Types
Menu item in Bindings panel for form variable
ASP
Request Variable > Request.Form
ColdFusion
Form Variable
JSP
Request Variable
PHP
Form Variable
The Form Variable dialog box is displayed. Enter the name of the form variable in the
dialog box and click OK. The form parameter name is normally the name of the HTML
form field or object used to obtain its value.
4.
The form parameter appears in the Bindings panel.
After you define the form parameter as a content source, you can use its value in your page.
For more information, see Chapter 32, “Obtaining Data for Your Page,” on page 673.
Related topics
“About dynamic content sources” on page 685
■
■
“Understanding URL and form parameters” on page 688
■
“Defining URL parameters” on page 695
Defining form parameters
697
Defining session variables
You can use session variables to store and display information maintained for the duration of a
user’s visit (or session). The server creates a different session object for each user and maintains
it for a set period of time or until the object is explicitly terminated. For more information,
see “Understanding session variables” on page 679.
Before defining session variables for a page, you must create them in the source code. For
instructions, see the following topics:
■
“Collecting data submitted by users” on page 674
■
“Accessing data stored in session variables” on page 679
■
“Storing information in session variables” on page 681
After you create a session variable in the web application’s source code, you can use
Dreamweaver to retrieve its value and use it in a web page.
To define a predefined session variable:
1.
Create a session variable in the source code and assign a value to it.
For example, this ColdFusion example instantiates a session called username, and assigns
it the value Cornelius:
2.
Select Window > Bindings to display the Bindings panel.
3.
Click the Plus (+) button and select Session Variable from the pop-up menu.
4.
Enter the name of the variable you defined in the source code.
5.
Click OK.
The session variable appears in the Bindings panel.
Once you define the session variable, you can use its value in your page. For more
information, see Chapter 34, “Adding Dynamic Content to Web Pages,” on page 707.
698
Chapter 33: Defining Sources of Dynamic Content
Related topics
■
“Collecting data submitted by users” on page 674
■
“Accessing data stored in session variables” on page 679
■
“Understanding session variables” on page 679
■
“Storing information in session variables” on page 681
Defining application variables for ASP
and ColdFusion
In ASP and ColdFusion, you can use application variables to store and display information
that is maintained for the lifetime of the application and persists from user to user.
NO TE
There are no application variable objects in JSP or PHP.
To define an application variable for a page:
1.
Open a dynamic document type in the Document window.
2.
Select Window > Bindings to display the Bindings panel.
3.
Click the Plus (+) button and select Application Variable from the pop-up menu.
4.
Enter the name of the variable as defined in the application’s source code.
5.
Click OK.
The application variable appears in the Bindings panel under the Application icon.
Once you define the application variable, you can use its value in a page. For more
information, see Chapter 34, “Adding Dynamic Content to Web Pages,” on page 707.
Defining application variables for ASP and ColdFusion
699
Related topics:
■
“ASP and ColdFusion application variables” on page 689
Using a variable as a data source for a
ColdFusion recordset
When you define a recordset for a page in the Bindings panel, Dreamweaver enters the name
of the ColdFusion data source in the cfquery tag on the page. For more flexibility, you can
store a data source name in a variable and use the variable in the cfquery tag. Dreamweaver
provides a visual method of specifying such a variable in your recordsets.
To visually specify a variable as a data source for a recordset:
1.
Make sure a ColdFusion page is active in the Document window.
2.
In the Bindings panel, click the Plus (+) button and select Data Source Name Variable
from the pop-up menu.
The Data Source Name Variable dialog box appears.
3.
Define a variable and click OK.
4.
When defining the recordset, select the variable as the Data Source for the recordset.
In the Recordset dialog box, the variable appears in the Data Source pop-up menu along
with the ColdFusion data sources on the server.
5.
Complete the Recordset dialog box and click OK.
6.
Initialize the variable.
Dreamweaver does not initialize the variable for you so that you can initialize it how and
where you want. You can initialize the variable in the page code (before the cfquery tag),
in an include file, or in some other file as a session or application variable.
700
Chapter 33: Defining Sources of Dynamic Content
Defining server variables
You can define server variables as sources of dynamic content for use within a web application.
Server variables vary from document type to document type and include form variables, URL
variables, session variables, and application variables. For more information on these variable
types, see the following sections:
■
“Defining URL parameters” on page 695
■
“Defining form parameters” on page 696
■
“Defining session variables” on page 698
■
“Defining application variables for ASP and ColdFusion” on page 699
This section discusses server variables for different document types that you can define as
content sources. The document types and their related sections are:
■
“Defining ColdFusion server variables” on page 702
■
“Defining JSP server variables” on page 703
Defining ASP server variables
You can define the following ASP server variables as sources of dynamic content:
Request.Cookie, Request.QueryString, Request.Form, Request.ServerVariables, and
Request.ClientCertificates.
To define a server variable for an ASP page:
1.
Open the Bindings panel (Window > Bindings).
2.
Click the Plus (+) button and select Request Variable from the pop-up menu.
The Request Variable dialog box is displayed. Select one of the request collections from
the Type pop-up menu.
For example, if you want to access the information in the Request.ServerVariables
collection, select Server Variables. If you want to access the information in the
Request.Form collection, select Form.
For more information on the ASP server variables, click the Help button.
Defining server variables
701
3.
Specify the variable in the collection that you want to access.
For example, if you want to access the information in the
Request.ServerVariables("HTTP_USER_AGENT") variable, enter the argument
HTTP_USER_AGENT. If you want to access the information in the
Request.Form("lastname") variable, enter the argument lastname.
4.
Click OK.
The server variable appears in the Bindings panel.
Defining ColdFusion server variables
You can define the following ColdFusion server variables as sources of dynamic content:
client, cookie, CGI, server, and local variables. To learn more about these server variables, see
“ASP server variables” on page 690.
To define a server variable for a ColdFusion page:
1.
Open the Bindings panel (Window > Bindings).
2.
Click the Plus (+) button and select the server variable from the pop-up menu.
3.
Enter the name of the variable.
For more information on possible name entries, click the Help button.
4.
Click OK.
The ColdFusion server variable appears in the Bindings panel.
Related topics:
■
“Defining URL parameters” on page 695
■
“Defining session variables” on page 698
■
“Defining application variables for ASP and ColdFusion” on page 699
■
Chapter 34, “Adding Dynamic Content to Web Pages,” on page 707
Defining PHP server variables
You can define a PHP server variable as a source of dynamic content for PHP document
types.
To define a server variable for a PHP page:
1.
Open the Bindings panel (Window > Bindings).
2.
Click the Plus (+) button and select the variable from the pop-up menu.
702
Chapter 33: Defining Sources of Dynamic Content
3.
4.
Enter the name of the variable.
Click OK.
The PHP server variable appears in the Bindings panel.
Related topics:
■
Chapter 33, “Defining URL parameters,” on page 695
■
Chapter 34, “Adding Dynamic Content to Web Pages,” on page 707
Defining JSP server variables
You can define a request variable as a source of dynamic content for JSP pages.
To define a request variable for a JSP page:
1.
Open the Bindings panel (Window > Bindings).
2.
Click the Plus (+) button and select Request Variable from the pop-up menu.
3.
Enter the name of the variable.
4.
Click OK.
The JSP server variable appears in the Bindings panel.
Related topics:
■
Chapter 33, “Defining URL parameters,” on page 695
■
Chapter 34, “Adding Dynamic Content to Web Pages,” on page 707
Caching content sources
You can cache—or store—sources of dynamic content in a Design Note. This lets you work
on a site even if you don’t have access to the database or application server storing the sources
of dynamic content. Caching may also speed up development by eliminating repeated access
across a network to the database and application server.
To cache content sources:
■
Click the arrow button in the top right corner of the Bindings panel and toggle Cache in
the pop-up menu.
Caching content sources
703
If you make changes to one of the content sources, you can refresh the cache by clicking
the Refresh button (the circle-arrow icon) in the top right corner of the Bindings panel.
(Expand the panel if you don’t see the button.)
Changing or deleting content sources
You can change or delete any existing source of dynamic content—that is, any content source
listed in the Bindings panel.
Changing or deleting a content source in the Bindings panel does not change or delete any
instance of that content on the page. It merely changes or deletes it as a possible source of
content for the page. To edit or delete an instance of the content on the page, see “Editing
dynamic content” on page 715 and “Deleting dynamic content” on page 715.
To change a content source in the Bindings panel:
1.
In the Bindings panel (Window > Bindings), double-click the name of the content source
you want to edit.
2.
Make your changes in the dialog box that appears.
3.
If satisfied with your work, click OK.
To delete a content source from the Bindings panel:
1.
In the Bindings panel (Window > Bindings), select the content source from the list.
2.
Click the Minus (-) button.
Related topics
■
“About dynamic content sources” on page 685
704
Chapter 33: Defining Sources of Dynamic Content
Copying a recordset from one page to
another page
You can copy a recordset from one page to another within a defined site.
To copy a recordset to another page:
1.
Select the recordset in either the Bindings panel or the Server Behaviors panel.
2.
Right-click the recordset and select Copy from the pop-up menu.
3.
Open the page you want to copy the recordset to.
4.
Right-click the Bindings panel or the Server Behaviors toolbar, and select Paste from the
pop-up menu.
Related topics:
■
“About dynamic content sources” on page 685
■
“Changing or deleting content sources” on page 704
Copying a recordset from one page to another page
705
706
Chapter 33: Defining Sources of Dynamic Content
CHAPTER 34
34
Adding Dynamic Content to
Web Pages
This chapter describes the most efficient ways of making various page elements dynamic.
Once you define one or more sources of dynamic content, you can use the sources to add
dynamic content to the page. Content sources can include a column in a recordset, a value
submitted by an HTML form, the value contained in a server object, or other data. For more
information, see Chapter 33, “Defining Sources of Dynamic Content,” on page 685.
In Macromedia Dreamweaver 8, you can place dynamic content almost anywhere in a web
page or its HTML source code. You can place dynamic content at the insertion point, replace
a text string, or insert it as an HTML attribute. For example, dynamic content can define the
src attribute of an image, or the value attribute of a form field.
This chapter contains the following sections:
About adding dynamic content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 707
Making text dynamic . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .709
Making images dynamic . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 710
Making HTML attributes dynamic . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 711
Making ActiveX, Flash, and other object parameters dynamic . . . . . . . . . . . . . . . . 714
Editing dynamic content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 715
Deleting dynamic content. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 715
Creating dynamic pages in a Contribute site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 716
About adding dynamic content
You can add dynamic content to a page by selecting a content source in the Bindings panel.
Dreamweaver inserts a server-side script in the page’s code instructing the server to transfer the
data from the content source to the page’s HTML code when the page is requested by a
browser.
There is often more than one way to make a given page element dynamic. For example, to
make an image dynamic you can use the Bindings panel, the Property inspector, or the Image
command in the Insert menu.
707
By default, an HTML page can display only one record at a time. To display the other records
in the recordset, you can add a link to move through the records one at a time (see “Creating
recordset navigation links” on page 725), or you can create a repeated region to display more
than one record on a single page (see “Displaying multiple recordset results” on page 729).
Dynamic text
Dynamic text adopts any text formatting applied to the existing text or to the insertion point.
For example, if a Cascading Style Sheet (CSS) style affects the selected text, the dynamic
content replacing it is also affected by the style. You can add or change the text format of
dynamic content by using any of the Dreamweaver text formatting tools. (See “Applying
typographic and page layout elements to dynamic data” on page 718.)
You can also apply a data format to dynamic text. For example, if your data consists of dates,
you can specify a particular date format such as 04/17/00 for U.S. visitors, or 17/04/00 for
Canadian visitors. (See “Using predefined data formats” on page 723.)
You can replace regular text on your page with dynamic text, or you can add dynamic text at
the insertion point on the page.
Changing dynamic content
You can change the dynamic content on your page by editing the server behavior that
provides the content. For example, you can edit a recordset server behavior to provide more
records to your page.
Dynamic content on a page is listed in the Server Behaviors panel. For example, if you add a
recordset to your page, the Server Behaviors panel lists it as follows:
Recordset(myRecordset)
If you add another recordset to your page, the Server Behaviors panel lists both recordsets
as follows:
Recordset(mySecondRecordset)
Recordset(myRecordset)
Related topics:
■
“Editing dynamic content” on page 715
■
708
“Deleting dynamic content” on page 715
Chapter 34: Adding Dynamic Content to Web Pages
Making text dynamic
You can replace existing text with dynamic text, or you can place dynamic text at a given
insertion point on the page.
To add dynamic text:
1.
Open the Bindings panel by choosing Window > Bindings.
2.
Make sure the Bindings panel lists the content source you want to use.
The content source should contain plain text (ASCII text). Plain text includes HTML. If
no content sources appear in the list, or if the available content sources don’t meet your
needs, click the Plus (+) button to define a new content source. (See Chapter 33,
“Defining Sources of Dynamic Content,” on page 685.)
3.
In Design view, select text on the page, or click where you want to add dynamic text.
4.
In the Bindings panel, select a content source from the list. If you select a recordset, specify
the column you want in the recordset.
5.
Click Insert, or drag the content source onto the page.
The dynamic content appears on the page if you’re working in Design view with Live Data
turned on (View > Live Data).
If Live Data is turned off, a placeholder appears instead. (If you selected text on the page, the
placeholder replaces the text selection.) The placeholder for recordset content uses the syntax
{RecordsetName.ColumnName}, where Recordset is the name of the recordset and
ColumnName is the name of the column you chose from the recordset.
Sometimes, the length of the placeholders for dynamic text distorts the page’s layout in the
Document window. You can solve the problem by using empty curly braces as placeholders.
Making text dynamic
709
To create dynamic text placeholders:
1.
Select Edit > Preferences > Invisible Elements (Windows) or Dreamweaver > Preferences >
Invisible Elements (Macintosh).
2.
In the Show Dynamic Text As pop-up menu, select { }.
3.
Click OK.
Related topics
■
“About adding dynamic content” on page 707
■
“Dynamic text” on page 708
Making images dynamic
You can make images on your page dynamic. For example, suppose you design a page to
display items for sale at a charity auction. Each page would include descriptive text and a
photo of one item. The page’s general layout would remain the same for each item, but the
photo (and descriptive text) could change.
To make an image dynamic:
1.
With the page open in Design view (View > Design), place the insertion point where you
want the image to appear on the page.
2.
Select Insert > Image.
The Select Image Source dialog box appears.
3.
Click the Data Sources option (Windows) or the Data Source button (Macintosh).
A list of content sources appears.
710
Chapter 34: Adding Dynamic Content to Web Pages
4.
Select a content source from the list.
The content source should be a recordset containing the paths to your image
files. Depending on the file structure of your site, the paths can be absolute, document
relative, or root relative.
NO TE
Dreamweaver does not currently support binary images stored in a database.
If no recordsets appear in the list, or if the available recordsets don’t meet your needs,
define a new recordset. For instructions, see “Understanding recordsets” on page 686.
5.
Click OK.
Making HTML attributes dynamic
You can dynamically change the appearance of a page by binding HTML attributes to data.
For example, you can change the background image of a table by binding the table’s
background attribute to a field in a recordset.
You can bind HTML attributes with the Bindings panel or with the Property inspector.
To make HTML attributes dynamic with the Bindings panel:
1.
Open the Bindings panel by choosing Window > Bindings.
2.
Make sure the Bindings panel lists the data source you want to use.
The content source should contain data that’s appropriate for the HTML attribute you
want to bind. If no sources of content appear in the list, or if the available content sources
don’t meet your needs, click the Plus (+) button to define a new data source. For
instructions, see Chapter 33, “Defining Sources of Dynamic Content,” on page 685.
3.
In Design view, select an HTML object.
For example, to select an HTML table, click inside the table and click the
tag in
the the tag selector on the bottom-left of the Document window.
4.
In the Bindings panel, select a content source from your list.
5.
In the Bind To box, select an HTML attribute from the pop-up menu.
6.
Click Bind.
The next time the page runs on the application server, the value of the data source will be
assigned to the HTML attribute.
Making HTML attributes dynamic
711
To make HTML attributes dynamic with the Property inspector:
1.
In Design view, select an HTML object and open the Property inspector
(Window > Properties).
For example, to select an HTML table, click inside the table and click the
tag in
the tag selector on the bottom-left of the Document window.
2.
How you bind a dynamic content source to the HTML attribute depends on where it is
located:
■
■
If the attribute you want to bind has a folder icon next to it in the Property inspector.
Click the folder icon to open a file selection dialog box; then click the Data Sources
option to display a list of data sources.
If the attribute you want to bind does not have a folder icon next to it, click the List
tab (the lower of the two tabs) on the left side of the inspector.
The Property inspector’s List view appears.
■
3.
If the attribute you want to bind is not listed in the List view, click the Plus (+) button;
then enter the attribute’s name or click the small arrow button and select the attribute
from the pop-up menu.
To make the attribute’s value dynamic, click the attribute; then click the lightning-bolt
icon or folder icon at the end of the attribute’s row.
If you clicked the lightning bolt icon, a list of data sources appears.
712
Chapter 34: Adding Dynamic Content to Web Pages
Here’s an example:
If you clicked the folder icon, a file selection dialog box appears. Select the Data Sources
option to display a list of content sources.
4.
Select a source of content from the list of content sources.
The content source should hold data that’s appropriate for the HTML attribute you want
to bind. If no content sources appear in the list, or if the available content sources don’t
meet your needs, define a new content source. For instructions, see Chapter 32,
“Obtaining Data for Your Page,” on page 673.
5.
Click OK.
The next time the page runs on the application server, the value of the data source will be
assigned to the HTML attribute.
Making HTML attributes dynamic
713
Making ActiveX, Flash, and other object
parameters dynamic
You can make the parameters of Java applets and plug-ins dynamic, as well as the parameters
of ActiveX, Macromedia Flash, Shockwave, Director, and Generator objects.
Before starting, make sure the fields in your recordset hold data that’s appropriate for the
object parameters you want to bind.
To make object parameters dynamic:
1.
In Design view, select an object on the page and open the Property inspector (Window >
Properties).
2.
Click the Parameters button.
The Parameters dialog box appears.
3.
If your parameter does not appear in the list, click the Plus (+) button and enter a parameter
name in the Parameter column.
4.
Click the parameter’s Value column, and then click the lightning-bolt icon to specify a
dynamic value.
A list of data sources appears.
5.
Select a data source from the list.
The data source should hold data that’s appropriate for the object parameter you want to
bind. If no data sources appear in the list, or if the available data sources don’t meet your
needs, define a new data source. For instructions, see Chapter 33, “Defining Sources of
Dynamic Content,” on page 685.
6.
714
Click OK.
Chapter 34: Adding Dynamic Content to Web Pages
Editing dynamic content
To edit a server behavior providing dynamic content, double-click the server behavior in the
Server Behaviors panel. The same dialog box you used to define the original data source
appears. Make your changes in the dialog box and click OK.
You can also use the Property inspector to edit the recordsets on your page. Open the
Property inspector (Window > Properties); then select the recordset in the Server Behaviors
panel (Window > Server Behavior).
If you edit a recordset in the Live Data window when the Auto Refresh option is not selected,
you must refresh the page to see your changes. To refresh the page, click the Refresh button or
select View > Refresh Live Data.
Related topics
■
“Editing dynamic content” on page 715
Deleting dynamic content
After adding dynamic content to a page, you can delete it by selecting the dynamic content on
the page and pressing Delete. You can also delete it by selecting the dynamic content in the
Server Behaviors panel and clicking the Minus (-) button.
N OT E
This operation removes the server-side script in the page that retrieves the dynamic
content from the database. It does not delete the data in the database.
Related topics
■
“Editing dynamic content” on page 715
■
“Editing dynamic content” on page 715
Deleting dynamic content
715
Creating dynamic pages in a Contribute
site
When a Contribute user edits a page containing dynamic content or invisible elements (such
as scripts and comments), Contribute displays the dynamic content and invisible elements as
yellow markers. By default, Contribute users can’t select or delete these markers.
If you want Contribute users to be able to select and delete dynamic content and other
invisible elements from a page, you can change permission-group settings to allow them to do
so; Contribute users normally can never edit dynamic content, even when you allow them to
select it.
NO TE
Using some server technologies, you can display static text using a server tag or
function. To allow Contribute users to edit the static text in a dynamic page that uses
such a server technology, place the static text outside of the server tags.
To allow a group of Contribute users to delete code from pages:
1.
Select Site > Administer Contribute Site.
2.
If certain required options for Contribute compatibility aren’t enabled, a dialog box
appears, asking if you want to enable those options. Click OK to enable those options and
Contribute compatibility. For more information, see “Preparing a site for use with
Contribute” on page 186.
3.
If prompted, enter the sdministrator password, and then click OK.
The Administer Website dialog box appears.
4.
In the Users and Roles category, select a role, and then click the Edit Role Settings button.
5.
Select the Editing category and deselect the option to protect scripts and forms. For more
information, see “Creating templates for a Contribute site” on page 312, and Administering
Macromedia Contribute.
6.
Click OK to close the Edit Settings dialog box.
7.
Click Close to close the Administer Website dialog box.
Related topics
■
“Managing Contribute Sites with Dreamweaver” on page 181
■
716
“Creating templates for a Contribute site” on page 312
Chapter 34: Adding Dynamic Content to Web Pages
CHAPTER 35
35
Displaying Database
Records
Displaying database records involves retrieving information stored in a database or other
source of content, and rendering that information to a web page. Macromedia Dreamweaver
8 provides many methods of displaying dynamic content, and provides several built-in server
behaviors that let you both enhance the presentation of dynamic content, and allow users to
more easily search through and navigate information returned from a database.
This chapter contains the following sections:
About displaying database records . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 717
Using predefined data formats . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 723
Creating recordset navigation links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 725
Showing and hiding regions based on recordset results . . . . . . . . . . . . . . . . . . . . . . 728
Displaying multiple recordset results . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .729
Creating a table with a Repeat Region server behavior . . . . . . . . . . . . . . . . . . . . . . .730
Creating a record counter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 731
About displaying database records
Databases and other sources of dynamic content provide you with more power and flexibility
in searching, sorting, and viewing large stores of information. Using a database to store
content for web sites makes sense when you need to store large amounts of information, and
then retrieve and display that information in a meaningful way. Dreamweaver provides you
with several tools and prebuilt behaviors to help you effectively retrieve and display
information stored in a database. The following sections describe the Dreamweaver server
behaviors and formatting elements, and how you can use them to display dynamic content.
717
Server behaviors and formatting elements
Dreamweaver provides the following server behaviors and formatting elements to let you
enhance the display of dynamic data:
Formats
let you apply different types of numerical, monetary, date/time, and percentage
values to dynamic text.
For example, if the price of an item in a recordset reads 10.989, you can display the price on
the page as $10.99 by selecting the Dreamweaver “Currency - 2 Decimal Places” format. This
format displays a number using two decimal places. If the number has more than two decimal
places, the data format rounds the number to the closest decimal. If the number has no
decimal places, the data format adds a decimal point and two zeros.
Repeated Region server behaviors let you display multiple items returned from a database
query, and let you specify the number of records to display per page.
Recordset Navigation server behaviors let you insert navigation elements that allow users to
move to the next or previous set of records returned by the recordset. For example, if you
choose to display 10 records per page using the Repeated Region server object, and the
recordset returns 40 records, you can navigate through the records 10 at a time.
Recordset Status Bar server behaviors let you include a counter that shows users where they
are within a set of records relative to the total number of records returned.
Show Region server behaviors let you choose to show or hide items on the page based on the
relevance of the currently displayed records. For example, if a user has navigated to the last
record in a recordset, you can hide the “next” link, and display only the “previous” records
link.
Applying typographic and page layout elements to
dynamic data
A powerful feature of Dreamweaver is the ability to present dynamic data within a structured
page, and to apply typographic formatting using HTML and CSS. To apply formats to
dynamic data in Dreamweaver, format the tables and placeholders for the dynamic data using
the Dreamweaver formatting tools. When the data is inserted from its data source, it will
automatically adopt the font, paragraph, and table formatting you specified.
To learn about Dreamweaver formatting features, and how to apply them to dynamic data
elements, see Chapter 8, “Presenting Content with Tables,” on page 233 and Chapter 13,
“Inserting and Formatting Text,” on page 369.
718
Chapter 35: Displaying Database Records
Navigating database recordset results
Recordset navigation links let users move from one record to the next, or from one set of
records to the next. For example, after designing a page to display five records at a time, you
might want to add links such as “Next” or “Previous” that let users display the five next or
previous records.
Dreamweaver lets you create four types of navigation links to move through a recordset: First,
Previous, Next, and Last. A single page can contain any number of these links, provided they
all work on a single recordset. You can’t add links to move through a second recordset on the
same page.
NO T E
Microsoft ASP.NET refers to a recordset as a DataSet. If you are working with ASP.NET
document types, the dialog boxes and menu choices specific to ASP.NET use the label
DataSet. The Dreamweaver documentation generically refers to both types as
recordsets, but uses DataSet when specifically describing ASP.NET features.
Recordset navigation links require the following dynamic elements:
■
A recordset to navigate
■
Dynamic content on the page to display the record or records
■
Text or images on the page to serve as a clickable navigation bar
■
A “Move To Record” set of server behaviors to navigate the recordset
You can add the last two elements using the Record Navigation Bar server object, or you can
add them separately using the Dreamweaver design tools and the Server Behaviors panel.
Related topics
■
“Creating recordset navigation links” on page 725
Custom recordset navigation bars
If you want to create a recordset navigation bar that uses more complex layout and formatting
styles than the simple table created by the Recordset Navigation Bar server object, you might
prefer to create your own navigation bar. To do this, you must first create the necessary
navigation links in either text or images, place them within the page in Design view, and
assign individual server behaviors to each navigation link.
About displaying database records
719
You can assign the following individual server behaviors to navigation links:
■
Move to first page
■
Move to last page
■
Move to next page
■
Move to previous page
If you would prefer to use the Dreamweaver built-in Recordset Navigation Bar server object
to create a navigation bar, see “Creating a navigation bar using the Recordset Navigation Bar
server behavior” on page 726.
Navigation bar design tasks
When creating a custom navigation bar, begin by creating its visual representation using the
Dreamweaver page-design tools. You don’t have to create a link for the text string or image,
Dreamweaver will create one for you.
The page you create the navigation bar for must contain a recordset to navigate. For more
information, see “Understanding recordsets” on page 686.
A simple recordset navigation bar might look like this, with link buttons created out of
images, or other content elements:
After you have added a recordset to a page, and have created a navigation bar, you must apply
individual server behaviors to each navigation element. For example, a typical recordset
navigation bar contains representations of the following links matched to the appropriate
behavior:
Navigation link
Server behavior
Go to first page
Move to first page
Go to previous page
Move to previous page
Go to next page
Move to next page
Go to last page
Move to last page
Related topics
“Displaying multiple recordset results” on page 721
■
720
Chapter 35: Displaying Database Records
Displaying and hiding regions based on recordset
results
Dreamweaver includes a set of server behaviors that let you show or hide a region based on the
results returned by a recordset. For example, in a page using “Previous” and “Next” record
links to navigate a results page, you can specify that the “Previous” records link be shown on
all results pages except the first (which has no previous results), and that the “Next” records
link be shown on all pages except the last (which has no next results).
You can also specify that a region be displayed or hidden based on whether the recordset is
empty or not. If a recordset is empty (for example, no records were found matching the
query), you can display a message informing the user that no records were returned. This is
especially useful when creating search pages that rely on user input search terms to run queries
against. Similarly, you can display an error message if there is a problem connecting to a
database, or if a user’s user name and password do not match those recognized by the server.
The Show Region server behaviors are:
■
Show If Recordset Is Empty
■
Show If Recordset Is Not Empty
■
Show If First Page
■
Show If Not First Page
■
Show If Last Page
■
Show If Not Last Page
To learn how to apply the Show Region server behaviors, see “Showing and hiding regions
based on recordset results” on page 728.
Displaying multiple recordset results
The Repeat Region server behavior lets you display multiple records from a recordset within a
page. Any dynamic data selection can be turned into a repeated region. However, the most
common regions are a table, a table row, or a series of table rows.
About displaying database records
721
The following example illustrates how the Repeat Region server behavior is applied to a table
row, and specifies that nine records are displayed per page. The row itself displays four
different records: city, state, street address, and zip code.
To create a table such as the one shown above, you must create a table containing dynamic
content, and apply the Repeat Region server behavior to the table row containing the
dynamic content. When the page is processed by the application server, the row is repeated
the number of times specified in the Repeat Region server object, with a different record
inserted in each new row.
To learn how to apply the Repeat Region server behavior, see “Displaying multiple recordset
results” on page 729 and “Creating a table with a Repeat Region server behavior”
on page 730.
Record counters
Record counters give users a reference point when they are navigating through a set of records.
Typically, record counters display the total number of records returned, and the current
records being viewed. For example, if a recordset returns 40 individual records, and 8 records
are displayed per page, the record counter on the first page would indicate “Displaying records
1-8 of 40.”
722
Chapter 35: Displaying Database Records
To create a record counter for a page, you must first create a recordset for the page, an
appropriate page layout to contain the dynamic content, and a recordset navigation bar. To
learn more about creating these elements, and adding them to a page, see the following
sections:
■
“Understanding recordsets” on page 686
■
“Creating recordset navigation links” on page 725
■
“Displaying multiple recordset results” on page 729
■
“Creating a table with a Repeat Region server behavior” on page 730
Once you have the above elements in the page, you can create a record counter.
Simple record counters
You can create a simple record counter using the Recordset Navigation Status server object.
This server object inserts a complete record counter that you can apply text formatting to
using Dreamweaver page-design tools. To learn more about this record counter, see “Creating
a record counter using the Recordset Navigation Status object” on page 731.
Custom record counters
You can use individual record count behaviors to create custom record counters. Creating a
custom record counter allows you to create a record counter beyond the simple, single row
table inserted by the Recordset Navigation Status server object. You can arrange design
elements in a number of creative ways, and apply an appropriate server behavior to each
element.
The Record Count server behaviors are:
■
Display Starting Record Number
■
Display Ending Record Number
■
Display Total Records
“Creating custom record counters” on page 732 leads you through the steps to create a record
counter by applying the individual Record Counter server behaviors to a page’s design
elements.
Using predefined data formats
Dreamweaver comes with several predefined data formats that you can apply to dynamic data
elements. The data format styles include date and time, currency, numerical, and
percentage formats.
Using predefined data formats
723
To apply data formats to dynamic content:
1.
Select the dynamic content in either the Live Data window or its placeholder in the
Document window.
2.
Select Window > Bindings to display the Bindings panel.
3.
Click the down arrow button in the Format column.
If the down arrow is not visible, expand the panel.
4.
From the Format pop-up menu, select the data format category you want.
Ensure that the data format is appropriate for the type of data you are formatting. For
example, the Currency formats work only if the dynamic data consists of numerical data.
Note that you cannot apply more than one format to the same data.
5.
Verify that the format was applied correctly by previewing the page in either the Live Data
window or a browser.
Related topics
■
“Creating new data formats” on page 725
Customizing existing data formats
You can customize the Dreamweaver existing data formats or create your own.
To customize a data format:
1.
Open a page that contains dynamic data in Design view.
2.
Select the dynamic data whose format you want to customize.
3.
Select Window > Bindings to display the Bindings panel.
The bound data item whose dynamic text you selected will be highlighted.
4.
Click the down arrow in the Format column to expand the pop-up menu of available
data formats.
If the down arrow is not visible, expand the panel.
5.
Select Edit Format List from the pop-up menu.
The Edit Format List dialog box appears.
6.
Complete the dialog box and click OK.
For more information, click the Help button in the dialog box.
Related topics
■
“Using predefined data formats” on page 723
■
724
“Creating new data formats” on page 725
Chapter 35: Displaying Database Records
Creating new data formats
You can create new data formats to suit any type of dynamic data you want to display.
To create a new data format:
1.
Open a page containing dynamic data in Design view.
2.
Select the dynamic data you want to create a custom format for.
3.
Select Window > Bindings to display the Bindings panel, and click the down arrow in the
Format column.
If the down arrow is not visible, expand the panel.
4.
Select Edit Format List from the pop-up menu.
The Edit Format List dialog box appears.
5.
Click the Plus (+) button and select a format type.
6.
Define the format and click OK.
7.
Enter a name for the new format in the Name column.
8.
Click OK to close the Edit Format List dialog box.
Related topics
■
“Customizing existing data formats” on page 724
■
“Creating new data formats” on page 725
Creating recordset navigation links
Recordset navigation links let users move from one record to the next, or from one set of
records to the next. For example, after designing a page to display five records at a time, you
might want to add links such as Next or Previous that let users display the five next or previous
records.
You can create recordset navigation links either by using the Recordset Navigation Bar server
behavior or you can create a custom recordset navigation bar.
Related topics
■
“Navigating database recordset results” on page 719
■
“Custom recordset navigation bars” on page 719
■
“Creating a custom recordset navigation bar” on page 727
Creating recordset navigation links
725
Creating a navigation bar using the Recordset
Navigation Bar server behavior
You can create a recordset navigation bar in a single operation using the Recordset Navigation
Bar server behavior. The server object adds the following building blocks to the page:
■
An HTML table with either text or image links
■
A set of “Move to” server behaviors
■
A set of “Show Region” server behaviors
The text version of the Recordset Navigation Bar looks like this:
The image version of the Recordset Navigation Bar looks like this:
Before placing the navigation bar on the page, make sure the page contains a recordset to
navigate and a page layout in which to display the records.
After placing the navigation bar on the page, you can use the Dreamweaver design tools to
customize the bar to your liking. You can also edit the “Move to” and “Show Region” server
behaviors by double-clicking them in the Server Behaviors panel.
If you want to build the navigation bar block by block using the Dreamweaver design tools
and the Server Behaviors panel, see “Creating a custom recordset navigation bar”
on page 727.
To create the recordset navigation bar with the server object:
1.
In Design view, place the insertion point at the location on the page where you want the
navigation bar to appear.
2.
Display the Recordset Navigation Bar dialog box (Insert > Application Objects >
Recordset Navigation Bar).
The Insert Recordset Navigation Bar dialog box appears.
726
Chapter 35: Displaying Database Records
3.
Select the recordset you want to navigate from the Recordset pop-up menu.
4.
From the Display Using section, select the format to display the navigation links on the
page. The Text option places text links on the page, while the Images option lets you use
graphical images as links.
In the image version of the navigation bar, Dreamweaver uses its own image files. You can
replace these images with image files of your own after placing the bar on the page.
5.
Click OK.
Dreamweaver creates a table that contains text or image links that allow the user to
navigate through the selected recordset when clicked. When the first record in the
recordset is displayed, the First and Previous links or images are hidden. When the last
record in the recordset is displayed, the Next and Last links or images are hidden.
You can customize the layout of the navigation bar using the Dreamweaver design tools.
Related topics
■
“Creating a custom recordset navigation bar” on page 727
Creating a custom recordset navigation bar
You can create a custom recordset navigation bar that uses more complex layout and
formatting styles than that offered by the simple table used by the Recordset Navigation Bar
server object.
To create your own recordset navigation bar, you must:
■
Design navigation links using either text or images
■
Place the links in the page in Design view
■
Assign individual server behaviors to each navigation link
To learn more about designing a custom recordset navigation bar, see “Custom recordset
navigation bars” on page 719. If you prefer to use the Dreamweaver built-in Recordset
Navigation Bar server object to create a navigation bar, see “Creating a navigation bar using
the Recordset Navigation Bar server behavior” on page 726.
This procedure describes how to assign individual server behaviors to the navigation links.
To assign server behaviors to recordset navigation links:
1.
In Design view, select the text string or image on the page you want to use as a record
navigation link.
2.
Open the Server Behaviors panel (Window > Server Behaviors) and click the Plus (+)
button.
Creating recordset navigation links
727
3.
Select Recordset Paging from the pop-up menu; then select a server behavior appropriate
to that link from the listed server behaviors.
If the recordset contains a large number of records, the Move to Last Record server
behavior can take a long time to run when the user clicks the link.
4.
In the Recordset pop-up menu, select the recordset containing the records.
5.
Click OK.
The server behavior is assigned to the navigation link.
Related topics
■
“Navigating database recordset results” on page 719
■
“Custom recordset navigation bars” on page 719
Showing and hiding regions based on
recordset results
Dreamweaver includes a set of server behaviors that let you show or hide a region based on the
results returned by a recordset. To learn more about the Show Region server behaviors, and
how they can be used to show or hide recordset results, see “Displaying and hiding regions
based on recordset results” on page 721.
To show a region only when it’s needed:
1.
In Design view, select the region on the page to show or hide.
2.
In the Server Behaviors panel (Window > Server Behaviors), click the Plus (+) button.
3.
Select Show Region from the pop-up menu, and then select one of the listed server
behaviors.
4.
Click OK.
Related topics
■
“About displaying database records” on page 717
■
728
“Creating a table with a Repeat Region server behavior” on page 730
Chapter 35: Displaying Database Records
Displaying multiple recordset results
The Repeat Region server behavior lets you display multiple records from a recordset within a
page. Any dynamic data selection can be turned into a repeated region. However, the most
common regions are tables, table rows, or a series of table rows.
To learn more about using the Repeat Region server behavior, see “Displaying multiple
recordset results” on page 721 and “Creating a table with a Repeat Region server behavior”
on page 730.
To create a repeated region:
1.
In Design view, select a region that contains dynamic content.
The selection can be anything, including a table, a table row, or even a paragraph of text.
To select a region on the page precisely, you can use the tag selector on the left corner of
the document window. For example, if the region is a table row, click inside the row on
the page, then click the rightmost
tag in the tag selector to select the table row.
2.
Select Window > Server Behaviors to display the Server Behaviors panel.
3.
Click the Plus (+) button, and select Repeat Region.
The Repeat Region dialog box appears.
4.
Select the name of the recordset to use from the pop-up menu.
5.
Select the number of records to display per page.
6.
Click OK.
In the Document window, a thin, tabbed, gray outline appears around the repeated
region. In the Live Data window (View > Live Data), the gray outline disappears and the
selection expands to display the number of records you specified.
Related topics
■
“About displaying database records” on page 717
■
“Showing and hiding regions based on recordset results” on page 728
Displaying multiple recordset results
729
Creating a table with a Repeat Region
server behavior
The Dynamic Table server object lets you create a table containing dynamic content and
apply the Repeat Region behavior from a single dialog box. This server object is especially
useful as it simultaneously populates a table with dynamic content from a recordset and
applies the Repeat Region server behavior.
NO TE
The Dynamic Table server object is not available when using ASP.NET document types.
To create a table containing dynamic content and repeating regions, you must manually
insert the table, insert dynamic content from the Bindings panel, and apply a Repeat
Region server behavior if needed. For more information, see “Displaying multiple
recordset results” on page 729.
To create a dynamic table:
1.
To insert a dynamic table:
■
■
Select Insert > Application Objects > Dynamic Data > Dynamic Table to display the
Dynamic Table dialog box.
From the Application category of the Insert bar, select the Dynamic Table button in
the Dynamic Data menu.
The Dynamic Table dialog box appears.
2.
Select the recordset you want to use from the Recordset pop-up menu.
3.
Select the number of records to display per page.
730
Chapter 35: Displaying Database Records
4.
Input values for the table border, cell padding, and cell spacing if desired.
The Dynamic Table dialog box retains the values you enter for table borders, cell padding,
and cell spacing. If you are working on a project that will need several dynamic tables
requiring the same look, you may want to enter the table layout values, as this will further
simplify page development. Note that you can adjust these values after inserting the table
using the table Property inspector.
5.
Click OK.
A table and placeholders for the dynamic content defined in its associated recordset are
inserted into the page.
In this example, the recordset contains four records: FIRSTNAME, LASTNAME,
TITLE, and DEPARTMENT. The table’s Heading row is populated with the names of
each record item. You can edit the headings using any descriptive text you want, or replace
them with representative images.
Creating a record counter
Record counters let users know where they are within a given set of records relative to the total
number of records returned. For this reason record counters are a useful behavior that can
significantly add to the usability of a web page.
To learn more about record counters, see “Record counters” on page 722.
Creating a record counter using the Recordset
Navigation Status object
The Recordset Navigation Status object creates a text entry on the page to display the current
record status.
Creating a record counter
731
To use the Recordset Navigation Status server object:
1.
Place the insertion point where you want to insert the record counter.
2.
Select Insert > Application Objects > Recordset Navigation Status.
The Insert Recordset Navigation Status dialog box is displayed.
Select the recordset you want to use from the Recordset pop-up menu.
3.
Click OK.
The Recordset Navigation Status server object inserts a text record counter that appears
similar to the one shown below:
You can use the Dreamweaver page-design tools to customize the record counter.
When viewed in the Live Data window or a browser, the counter will appear similar to the
one shown below:
Creating custom record counters
To create a custom record counter for a page, you must first create a recordset for the page, an
appropriate page layout to contain the dynamic content, and a recordset navigation bar. To
learn more about creating these elements and adding them to a page, see “Record counters”
on page 722. After you have created the above elements in the page, you can create a custom
record counter.
This example creates a record counter that will appear similar to that created in the previous
section, “Creating a record counter using the Recordset Navigation Status object”
on page 731. The record counter in this example will appear as follows:
Displaying records StartRow thru EndRow of RecordSet.RecordCount.
In this example, the text in sans-serif font represents the record count placeholders that will be
inserted in the page.
732
Chapter 35: Displaying Database Records
To create a custom record counter:
1.
In Design view, enter the counter’s text on the page. The text can be anything you want.
For example:
Displaying records thru of .
2.
Place the insertion point at the end of the text string.
3.
Open the Server Behaviors panel (Window > Server Behaviors).
4.
Click the Plus (+) button in the upper-left corner, and click Display Record Count. Within
this submenu, select Display Total Records. The Display Total Records behavior is
inserted into the page, and a placeholder is inserted where the insertion point was. The text
string should now appear as:
Displaying records thru of {Recordset1.RecordCount}.
5.
Place the insertion point after the word records, and select the Display Starting Record
Count Number from the Server Behaviors > Plus (+) button > Record Count panel. The
text string should now appear as:
Displaying records {StartRow_Recordset1} thru of
{Recordset1.RecordCount}.
6.
Now place the insertion point between the words thru and of, and select the Display
Starting Record Count Number from the Server Behaviors > Plus (+) button > Record
Count panel. The text string should now appear as:
Displaying records {StartRow_Recordset1} thru {EndRow_Recordset1} of
{Recordset1.RecordCount}.
7.
Confirm that the counter functions correctly by viewing the page in the Live Data window
(View > Live Data); the counter should now look similar to the following example:
Displaying records 1 thru 8 of 40.
If the results page has a navigation link to move to the next set of records, clicking the link
would update the record counter to read as follows:
Showing records 9 thru 16 of 40.
Links don’t work in the Live Data window. To test them, you can use the Preview in
Browser feature in Dreamweaver. Make sure the Preview Using Live Data Server option is
selected in Preferences (Edit > Preferences > Preview in Browser (Windows) or
Dreamweaver > Preferences > Preview in Browser (Macintosh)); then select File > Preview
in Browser.
Creating a record counter
733
734
Chapter 35: Displaying Database Records
CHAPTER 36
36
Displaying XML Data in
Web Pages
You can use Macromedia Dreamweaver 8 to create web pages that display XML data.
Displaying XML data involves retrieving information stored in a local or remote XML file
and rendering that information in a web page. Dreamweaver provides methods for displaying
information from XML files, as well as built-in XSLT objects and design features that let you
enhance the presentation of your XML data.
This chapter contains the following sections:
About using XML and XSL with web pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 735
About server-side XSL transformations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 737
About client-side XSL transformations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .740
About XML data and repeating elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 743
About previewing XML data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .744
Performing XSL transformations on the server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 746
Performing XSL transformations on the client . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .760
Applying styles to XSLT fragments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 763
Troubleshooting XSL transformations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 764
About using XML and XSL with web
pages
Extensible Markup Language (XML) is a language that lets you structure information. Like
HTML, XML lets you structure your information using tags, but XML tags are not
predefined as HTML tags are. Instead, XML lets you create tags that best define your data
structure. Tags are nested within others to create a schema of parent and child tags. Like most
HTML tags, all tags in an XML schema have an opening and closing tag.
735
The following example illustrates the basic structure of an XML file:
03/01/2004Displaying XML Data with Macromedia DreamweaverCharles Brown04/08/2004Understanding XMLJohn Thompson
In this example, each parent tag contains three child tags: , , and
<author>. But each <book> tag is also a child tag of the <mybooks> tag, which is one level
higher in the schema. You can name and structure XML tags in any way you like, provided
that you nest tags accordingly within others, and assign each opening tag a corresponding
closing tag.
XML documents do not contain any formatting — they are simply containers of structured
information. Once you have an XML schema, you can use the Extensible Stylesheet Language
(XSL) to display the information. In the way that Cascading Style Sheets (CSS) let you format
HTML, XSL lets you format XML data. You can define styles, page elements, layout, and so
forth in an XSL file and attach it to an XML file so that when a user views the XML data in a
browser, the data is formatted according to whatever you’ve defined in the XSL file. The
content (the XML data) and presentation (defined by the XSL file) are entirely separate,
providing you with greater control over how your information appears on a web page. In
essence, XSL is a presentation technology for XML, where the primary output is an HTML
page.
Extensible Stylesheet Language Transformations (XSLT) is a subset language of XSL that
actually lets you display XML data on a web page, and “transform” it, along with XSL styles,
into readable, styled information in the form of HTML. You can use Dreamweaver to create
XSLT pages that let you perform XSL transformations using an application server or a
browser. When you perform a server-side XSL transformation, the server does the work of
transforming the XML and XSL, and displaying it on the page. When you perform a clientside transformation, a browser (such as Internet Explorer) does the work.
736
Chapter 36: Displaying XML Data in Web Pages
The approach you ultimately take (server-side transformations versus client-side
transformations) depends on what you are trying to achieve as an end result, the technologies
available to you, the level of access you have to XML source files, and other factors. Both
approaches have their own benefits and limitations. For example server-side transformations
work in all browsers while client-side transformations are restricted to modern browsers only
(Internet Explorer 6, Netscape 8, Mozilla 1.8, and Firefox 1.0.2). Server-side transformations
let you display XML data dynamically from your own server or from anywhere else on the
web, while client-side transformations must use XML data that is locally hosted on your own
web server. Lastly, server-side transformations require that you deploy your pages to a
configured application server, while client-side transformations only require access to a web
server.
For more information, see “About server-side XSL transformations” on page 737, and “About
client-side XSL transformations” on page 740.
About server-side XSL transformations
Dreamweaver provides methods for creating XSLT pages that let you perform server-side XSL
transformations. When an application server performs the XSL transformation, the file
containing the XML data can reside on your own server, or anywhere else on the web.
Additionally, any browser can display the transformed data. Deploying pages for server-side
transformations, however, is somewhat complex, and requires that you have access to an
application server.
When working with server-side XSL transformations, you can use Dreamweaver to create
XSLT pages that generate full HTML documents (entire XSLT pages), or XSLT fragments
that generate a portion of an HTML document. An entire XSLT page is similar to a regular
HTML page. It contains a <body> tag and a <head> tag, and lets you display a combination
of HTML and XML data on the page. An XSLT fragment is a piece of code, used by a
separate document, that displays formatted XML data. Unlike an entire XSLT page, it is an
independent file that contains no <body> or <head> tag. If you want to display XML data on
a page of its own, you would create an entire XSLT page, and bind your XML data to it. If, on
the other hand, you wanted to display XML data in a particular section of an existing
dynamic page—for example, a dynamic home page for a sporting goods store, with sports
scores from an RSS feed displayed on one side of the page—you would create an XSLT
fragment and insert a reference to it in the dynamic page. Creating XSLT fragments, and
using them in conjunction with other dynamic pages to display XML data, is the more
common scenario.
About server-side XSL transformations
737
The first step in creating these types of pages is to create the XSLT fragment: It is a separate
file that contains the layout, formatting, and so on of the XML data that you eventually want
to display in the dynamic page. Once you create the XSLT fragment, you insert a reference to
it in your dynamic page (for example, a PHP or Macromedia ColdFusion page). The inserted
reference to the fragment works much like an Server Side Include (SSI) — the formatted
XML data (the fragment) resides in a separate file, while in Design view, a placeholder for the
fragment appears on the dynamic page itself. When a browser requests the dynamic page
containing the reference to the fragment, the server processes the included instruction and
creates a new document in which the formatted contents of the fragment appear instead of the
placeholder.
738
Chapter 36: Displaying XML Data in Web Pages
You use the XSL Transformation server behavior to insert the reference to an XSLT fragment
in a dynamic page. When you insert the reference, Dreamweaver generates an includes/
MM_XSLTransform/ folder in the site’s root folder that contains a runtime library file. The
application server uses the functions defined in this file when transforming the specified XML
data. The file is responsible for fetching the XML data and XSLT fragments, performing the
XSL transformation, and outputting the results on the web page.
The file containing the XSLT fragment, the XML file containing your data, and the generated
run-time library file must all be on the server for your page to display correctly. (If you select a
remote XML file as your data source — one from an RSS feed, for example — that file must
of course reside somewhere else on the Internet.)
You can also use Dreamweaver to create entire XSLT pages for use with server-side
transformations. An entire XSLT page works in exactly the same way as an XSLT fragment,
only when you insert the reference to the entire XSLT page using the XSL Transformation
server behavior, you are inserting the full contents of an HTML page. Thus, the dynamic page
(the .cfm, .php, .asp, or .net page that acts as the container page) must be cleared of all
HTML before you insert the reference.
Dreamweaver supports XSL transformations for ColdFusion, ASP, ASP.NET, and PHP pages.
N OT E
Your server must be correctly configured to perform server-side transformations. For
more information, contact your server administrator, or visit www.macromedia.com/go/
dw_xsl.
For procedures on creating server-side XSL transformations, see “Performing XSL
transformations on the server” on page 746.
Related topics
“About previewing XML data” on page 744
■
■
“Applying styles to XSLT fragments” on page 763
About server-side XSL transformations
739
About client-side XSL transformations
You can also perform XSL transformations on the client without the use of an application
server. You can use Dreamweaver to create an entire XSLT page that will do this; however,
client-side transformations require manipulation of the XML file that contains the data you
want to display. Additionally, client-side transformations will only work in modern browsers
(Internet Explorer 6, Netscape 8, Mozilla 1.8, and Firefox 1.0.2). For more information on
browsers that do and don’t support XSL transformations, see www.w3schools.com/xsl/
xsl_browsers.asp.
You begin by creating an entire XSLT page and attaching an XML data source. (Dreamweaver
prompts you to attach the data source when you create the new page.) You can use
Dreamweaver to create an XSLT page from scratch, or you can convert an existing HTML
page to an XSLT page. When you convert an existing HTML page to an XSLT page you must
attach an XML data source using the Bindings panel (Window > Bindings).
Once you’ve created your XSLT page, you must link it to the XML file containing the XML
data by inserting a reference to the XSLT page in the XML file itself (much like you would
insert a reference to an external CSS style sheet in the <head> section of an HTML page).
Your site visitors must view the XML file (not the XSLT page) in a browser. When your site
visitors view the page, the browser performs the XSL transformation and displays the XML
data, formatted by the linked XSLT page.
740
Chapter 36: Displaying XML Data in Web Pages
The relationship between the linked XSLT and XML pages is conceptually similar, yet
different from the external CSS/HTML page model. When you have an HTML page that
contains content (such as text), you use an external style sheet to format that content. The
HTML page determines the content, and the external CSS code, which the user never sees,
determines the presentation. With XSLT and XML, the situation is reversed. The XML file
(which the user never sees in its raw form), determines the content while the XSLT page
determines the presentation. The XSLT page contains the tables, layout, graphics, and so
forth that the standard HTML usually contains. When a user views the XML file in a browser,
the XSLT page formats the content.
About client-side XSL transformations
741
When you use Dreamweaver to link an XSLT page to an XML page, Dreamweaver inserts the
appropriate code for you at the top of the XML page. If you own the XML page to which
you’re linking (that is, if the XML file exclusively lives on your web server), all you need to do
is use Dreamweaver to insert the appropriate code that links the two pages. When you own
the XML file, the XSL transformations performed by the client are fully dynamic. That is,
whenever you update the data in the XML file, any HTML output using the linked XSLT
page will be automatically updated with the new information.
N OT E
The XML and XSL files you use for client-side transformations must reside in the same
directory. If they don’t, the browser will read the XML file and find the XSLT page for the
transformation, but will fail to find assets (style sheets, images, and so on) defined by
relative links in the XSLT page.
If you don’t own the XML page to which you’re linking (for example, if you want to use XML
data from an RSS feed somewhere out on the web), the workflow is a bit more complicated.
To perform client-side transformations using XML data from an external source, you must
first download the XML source file to the same directory where your XSLT page resides. Once
the XML page is in your local site, you can use Dreamweaver to add the appropriate code that
links it to the XSLT page, and post both pages (the downloaded XML file and the linked
XSLT page) to your web server. When the user views the XML page in a browser, the XSLT
page formats the content, just like in the previous example.
The disadvantage to performing client-side XSL transformations on XML data that comes
from an external source is that the XML data is only partially “dynamic.” The XML file that
you download and alter is merely a “snapshot” of the file that lives elsewhere on the web. If the
original XML file out on the web changes, you must download the file again, link it to the
XSLT page, and repost the XML file to your web server. The browser only renders the data
that it receives from the XML file on your web server, not the data contained in the original
XML source file.
For procedures on creating client-side XSL transformations, see “Performing XSL
transformations on the client” on page 760.
Related topics
“About previewing XML data” on page 744
■
■
742
“Applying styles to XSLT fragments” on page 763
Chapter 36: Displaying XML Data in Web Pages
About XML data and repeating elements
The Repeat Region XSLT object lets you display repeating elements from an XML file within
a page. Any region containing an XML data placeholder can be turned into a repeated region.
However, the most common regions are a table, a table row, or a series of table rows.
The following example illustrates how the Repeat Region XSLT object is applied to a table
row that displays menu information for a restaurant. The initial row displays three different
elements from the XML schema: item, description, and price. When the Repeat Region XSLT
object is applied to the table row, and the page is processed by an application server or a
browser, the table is repeated with unique data inserted in each new table row.
When you apply a Repeat Region XSLT object in the Document window, a thin, tabbed, gray
outline appears around the repeated region. When you preview your work in a browser (File >
Preview in Browser), the gray outline disappears and the selection expands to display the
specified repeating elements in the XML file, as in the previous illustration.
You might also notice that when you add the Repeat Region XSLT object to the page,
Dreamweaver truncates the length of the XML data placeholder in the Document window.
This is because Dreamweaver updates the XPath for the XML data placeholder so that it is
relative to the path of the repeating element.
About XML data and repeating elements
743
For example, the following code is for a table that contains two dynamic placeholders,
without a Repeat Region XSLT object applied to the table:
<table width="500" border="1">
<tr>
<td><xsl:value-of select="rss/channel/item/title"/></td>
</tr>
<tr>
<td><xsl:value-of select="rss/channel/item/description"/></td>
</tr>
</table>
The following code is for the same table with the Repeat Region XSLT object applied to it:
<xsl:for-each select="rss/channel/item">
<table width="500" border="1">
<tr>
<td><xsl:value-of select="title"/></td>
</tr>
<tr>
<td><xsl:value-of select="description"/></td>
</tr>
</table>
</xsl:for-each>
In the previous example, Dreamweaver has automatically updated the XPath for the items
that fall within the Repeat Region (title & description) to be relative to the XPath in the
enclosing <xsl:for-each> tags, rather than the full document.
Dreamweaver generates context-relative XPath expressions in other cases as well. For example,
if you drag an XML data placeholder to a table that already has a Repeat Region XSLT object
applied to it, Dreamweaver automatically displays the XPath relative to the existing XPath in
the enclosing <xsl:for-each> tags.
To learn how to apply the Repeat Region XSLT object, see “Displaying repeating XML
elements” on page 753.
About previewing XML data
When you use Preview in Browser (File > Preview in Browser) to preview XML data that
you’ve inserted in an XSLT fragment or an entire XSLT page, the engine that performs the
XSL transformation differs from situation to situation. For dynamic pages containing XSLT
fragments, the application server always performs the transformation. At other times, either
Dreamweaver or the browser might be performing the transformation.
744
Chapter 36: Displaying XML Data in Web Pages
The following table summarizes the situations when using Preview in Browser, and the
engines that perform the respective transformations:
Type of page previewed in browser
Data transformation performed by
Dynamic page containing XSLT fragment
Application server
XSLT fragment or entire XSLT page
Dreamweaver
XML file with link to entire XSLT page
Browser
The following topics provide guidelines for helping you determine the appropriate previewing
methods, based on your needs:
■
“Previewing pages for server-side transformations” on page 745
■
“Previewing pages for client-side transformations” on page 745
■
“Previewing entire XSLT pages and XSLT fragments” on page 746
Previewing pages for server-side transformations
In the case of server-side transformations, the content the site visitor ultimately sees is
transformed by your application server. When building XSLT and dynamic pages for use with
server-side transformations, it is always preferable to preview the dynamic page that contains
the XSLT fragment instead of the XSLT fragment itself. In the former scenario, you make use
of the application server, which ensures that your preview is consistent with what your site
visitors will see when they visit your page. In the latter scenario, Dreamweaver performs the
transformation, and could provide slightly inconsistent results. You can use Dreamweaver to
preview your XSLT fragment while you are building it, but you’ll be able to see the most
accurate results of the data rendering if you use the application server to preview your
dynamic page after you’ve inserted the XSLT fragment.
Previewing pages for client-side transformations
In the case of client-side transformations, the content the site visitor ultimately sees is
transformed by a browser. You accomplish this by adding a link from the XML file to the
XSLT page. If you open the XML file in Dreamweaver and preview it in a browser, you force
the browser to load the XML file and perform the transformation. This provides you with the
same experience as that of your site visitor.
About previewing XML data
745
One disadvantage of this approach is that it makes it harder for you to debug your page
because the browser transforms the XML and generates the HTML internally. If you select
the browser’s View Source option to debug the generated HTML, you will only see the
original XML that the browser received, not the full HTML (tags, styles, and so forth)
responsible for the rendering of the page. To see the full HTML when viewing source code,
you must preview the XSLT page in a browser instead.
Previewing entire XSLT pages and XSLT fragments
When creating entire XSLT pages and XSLT fragments, you’ll want to preview your work to
make sure that your data is being displayed correctly. If you use Preview in Browser to display
an entire XSLT page or an XSLT fragment, Dreamweaver performs the transformation using a
built-in transformation engine. This method gives you quick results, and makes it easier for
you to incrementally build and debug your page. It also provides a way for you to view the full
HTML (tags, styles, and so forth) by selecting the View Source option in the browser.
N OT E
You will most likely use this method when you begin building XSLT pages, regardless of
whether you use the client or the server to transform your data.
Related topics
■
“About using XML and XSL with web pages” on page 735
■
“About server-side XSL transformations” on page 737
■
“About client-side XSL transformations” on page 740
■
“Applying styles to XSLT fragments” on page 763
Performing XSL transformations on the
server
You can use Dreamweaver to create entire XSLT pages or XSLT fragments for use in dynamic
web pages. An entire XSLT page is a page that, when transformed, generates a full HTML
page. An XSLT fragment is a piece of code, used by a separate document, that, when
transformed, displays XML data.
Macromedia recommends that you read “About server-side XSL transformations”
on page 737 before proceeding with any of the following procedures.
N OT E
746
Your server must be correctly configured to perform server-side transformations. For
more information, contact your server administrator, or visit www.macromedia.com/go/
dw_xsl.
Chapter 36: Displaying XML Data in Web Pages
This section contains the following topics:
■
“Workflow for performing server-side XSL transformations” on page 747
■
“Creating XSLT pages” on page 748
■
“Converting HTML pages to XSLT pages” on page 750
■
“Attaching XML data sources” on page 750
■
“Displaying XML data in XSLT pages” on page 751
■
“Displaying repeating XML elements” on page 753
■
“Editing a Repeat Region XSLT object” on page 755
■
“Inserting XSLT fragments in dynamic pages” on page 755
■
“Deleting XSLT fragments from dynamic pages” on page 757
■
“Editing XSL Transformation server behaviors” on page 757
■
“Using parameters with XSL transformations” on page 757
■
“Creating conditional XSLT regions” on page 759
■
“Editing a Conditional Region XSLT object” on page 759
■
“Inserting XSL comments” on page 760
Workflow for performing server-side XSL
transformations
This section provides a list of steps you need to follow to perform server-side XSL
transformations, and refers you to the sections in the documentation that elaborate on each
procedure.
Macromedia recommends that you read “About using XML and XSL with web pages”
on page 735, “About server-side XSL transformations” on page 737, and “About client-side
XSL transformations” on page 740 before building pages that display XML data.
To perform server-side XSL transformations, follow these steps:
■
Set up a Dreamweaver site. See Chapter 2, “Setting Up a Dreamweaver Site,” on page 79.
■
Choose a server technology and set up an application server. See “Setting up an
application server” on page 601.
■
Test the application server to make sure it is functioning correctly. For example, create a
page that requires processing, and make sure that the application server processes the page.
For a tutorial on how to do this, visit www.macromedia.com/go/dw_xsl.
Performing XSL transformations on the server
747
■
Do one of the following:
■
■
In your Dreamweaver site, create an XSLT fragment or an entire XSLT page. See
“Creating XSLT pages” on page 748.
Convert an existing HTML page to an entire XSLT page. See “Converting HTML
pages to XSLT pages” on page 750.
■
If you haven’t already done so, attach an XML data source to the page. See “Attaching
XML data sources” on page 750.
■
Bind your XML data to the XSLT fragment or to the entire XSLT page. See “Displaying
XML data in XSLT pages” on page 751.
■
If appropriate, add a Repeat Region XSLT object to the table or table row that contains
the XML data placeholder(s). See “Displaying repeating XML elements” on page 753.
■
Do one of the following:
■
■
Use the XSL Transformation server behavior to insert a reference to the XSLT
fragment in your dynamic page. See “Inserting XSLT fragments in dynamic pages”
on page 755.
Delete all of the HTML code from a dynamic page, and then use the XSL
Transformation server behavior to insert a reference to the entire XSLT page in the
dynamic page.
■
Post both the dynamic page and the XSLT fragment (or entire XSLT page) to your
application server. If you are using a local XML file, you will need to post that as well.
■
View the dynamic page in a browser. When you do so, the application server transforms
the XML data, inserts it in the dynamic page, and displays it in the browser.
Creating XSLT pages
You can create XSLT pages that let you display XML data on web pages. You can create either
an entire XSLT page — an XSLT page that contains a <body> tag and a <head> tag — or you
can create an XSLT fragment. When you create an XSLT fragment, you create an independent
file that contains no body or head tag — a simple piece of code that is later inserted in a
dynamic page.
N O TE
748
If you are starting with an existing XSLT page, and need to attach an XML data source to
it, see “Attaching XML data sources” on page 750.
Chapter 36: Displaying XML Data in Web Pages
To create an XSLT page:
1.
Select File > New
2.
On the General tab of the New Document dialog box, select Basic page from the Category
column and do one of the following:
■
Select XSLT (Entire page) from the Basics page column to create an entire XSLT page.
■
Select XSLT (Fragment) from the Basics page column to create an XSLT fragment.
3.
Click Create.
The Locate XML Source dialog box appears, asking you to attach an XML data source.
4.
Do one of the following:
■
■
Select Attach a local file, click the Browse button, browse to a local XML file on your
computer, and click OK.
Select Attach a remote file, enter the URL of an XML file on the Internet (such as one
coming from an RSS feed), and click OK.
N OT E
Clicking the Cancel button will generate a new XSLT page with no attached XML
data source. For information on attaching XML data sources, see “Attaching
XML data sources” on page 750.
Dreamweaver populates the Bindings panel with the schema of your XML data source.
Performing XSL transformations on the server
749
The following table provides an explanation of the various elements in the schema that
might appear:
5.
Element
Represents
Details
<>
Required nonrepeating XML An element that appears
element
exactly once within its parent
node
<>+
Repeating XML element
An element that appears one
or more times within its
parent node
<>?
Optional XML element
An element that appears
zero or more times within its
parent node
Element node in boldface
type
Current context element
Normally the repeating
element when the insertion
point is inside a repeat
region
@
XML attribute
Save your new page (File > Save) with the .xsl or .xslt extension (.xsl is the default).
Converting HTML pages to XSLT pages
You can also convert existing HTML pages to XSLT pages. For example, if you have a
predesigned static page to which you want to add XML data, you can convert the page to an
XSLT page, instead of creating an XSLT page and redesigning the page from scratch.
To convert an existing HTML page to an XSLT page:
1.
Open the HTML page that you want to convert.
2.
Select File > Convert > XSLT 1.0.
Dreamweaver opens a copy of the page in the Document window. The new page is an
XSL style sheet, saved with the .xsl extension.
Attaching XML data sources
If you are starting with an existing XSLT page, or if you don’t attach an XML data source
when creating a new XSLT page with Dreamweaver, you will need to attach an XML data
source using the Bindings panel.
750
Chapter 36: Displaying XML Data in Web Pages
To attach an XML data source:
1.
In the Bindings panel (Window > Bindings), click the XML link.
N OT E
2.
Do one of the following:
■
■
3.
You can also click the Source link at the upper-right corner of the Bindings panel to
add an XML data source.
Select Attach a Local File, click the Browse button, browse to a local XML file on your
computer, and click OK.
Select Attach a Remote File, enter the URL of an XML file on the Internet (such as
one coming from an RSS feed).
Click OK to close the Locate XML Source dialog box.
Dreamweaver populates the Bindings panel with the schema of your XML data source.
For a guide to the symbols in the schema, see “Creating XSLT pages” on page 748.
Displaying XML data in XSLT pages
Once you’ve created an XSLT page and attached an XML data source, you can bind data to
the page.
To display XML data:
1.
Open an XSLT page with an attached XML data source. For instructions, see “Creating
XSLT pages” on page 748.
2.
(Optional) Select Insert > Table to add a table to the page. A table helps you organize your
XML data. For more information, see Chapter 8, “Presenting Content with Tables,” on
page 233.
NO TE
In most cases, you will want to use the Repeat Region XSLT object to display
repeating XML elements on a page. If this is the case, you might want to create a
single-row table with one or more columns, or a two-rowed table if you want to
include a table header. For more information, see “Displaying repeating XML
elements” on page 753.
Performing XSL transformations on the server
751
3.
In the Bindings panel, select an XML element and drag it to the place on the page where
you want to insert data.
An XML data placeholder appears on the page. The placeholder is highlighted and in
curly brackets. It uses the XPath (XML Path language) syntax to describe the hierarchical
structure of the XML schema. For example, if you drag the child element “title” to the
page, and that element has the parent elements “rss,” “channel,” and “item,” then the
syntax for the dynamic content placeholder will be {rss/channel/item/title}.
Once an XML data placeholder is on the page, you can double-click it to open the XPath
Expression Builder. The XPath Expression builder lets you format selected data, or select
other items from the XML schema. For more information, click the Help button in the
XPath Expression builder.
4.
752
(Optional) Apply styles to your XML data by selecting an XML data placeholder and
applying styles to it like any other piece of content using the Property inspector or the CSS
Styles panel. Alternatively, you can use Design-time style sheets to apply styles to XSLT
fragments. Each of these methods has its own set of benefits and limitations. For more
information, see “Applying styles to XSLT fragments” on page 763.
Chapter 36: Displaying XML Data in Web Pages
5.
Preview your work in a browser (File > Preview in Browser)
N OT E
When you preview your work using Preview in Browser, Dreamweaver performs an
internal XSL transformation without the use of an application server. For more
information, see “About previewing XML data” on page 744.
Displaying repeating XML elements
The Repeat Region XSLT object lets you display repeating elements from an XML data source
in a web page. For example, if you are displaying article titles and descriptions from a news
feed, and that news feed contains between 10 and 20 articles, each title and description in the
XML file would probably be a child element of a repeating element.
Any region in Design view containing an XML data placeholder can be turned into a repeated
region. However, the most common regions are tables, table rows, or a series of table rows.
To learn more about how the Repeat Region XSLT object works with XML data, see “About
XML data and repeating elements” on page 743.
To display repeating XML elements:
1.
In Design view, select a region that contains an XML data placeholder or placeholders.
The selection can be anything, including a table, a table row, or even a paragraph of text.
TIP
2.
To select a region on the page precisely, you can use the tag selector in the lower-left
corner of the Document window. For example, if the region is a table, click inside the
table on the page, and then click the <table> tag in the tag selector.
Do one of the following
■
Select Insert > XSLT Objects > Repeat Region.
■
In the XSLT category of the Insert bar, click the Repeat Region button.
Performing XSL transformations on the server
753
3.
In the XPath Expression Builder, select the repeating element, indicated by a small plus
sign.
For more information, click the Help button in the dialog box.
4.
Click OK.
In the Document window, a thin, tabbed, gray outline appears around the repeated
region. When you preview your work in a browser (File > Preview in Browser), the gray
outline disappears and the selection expands to display the specified repeating elements in
the XML file.
You’ll also notice that when you add the Repeat Region XSLT object to the page,
Dreamweaver truncates the length of the XML data placeholder in the Document
window. This is because Dreamweaver updates the XPath for the XML data placeholder
so that it is relative to the path of the repeating element.
For more information, see “About XML data and repeating elements” on page 743.
754
Chapter 36: Displaying XML Data in Web Pages
Editing a Repeat Region XSLT object
After you’ve added a Repeat Region XSLT object to a region, you can make changes to it using
the Property inspector.
To edit a Repeat Region XSLT object:
1.
Select the object by clicking the gray tab that surrounds the repeated region.
2.
In the Property inspector (Window > Properties), click the dynamic icon next to the Select
text field.
3.
In the XPath Expression Builder, make your changes and click OK.
Inserting XSLT fragments in dynamic pages
Once you have created an XSLT fragment, you can insert it in a dynamic web page using the
XSL Transformation server behavior. When you add the server behavior to your page and
view the page in a browser, an application server performs a transformation that displays the
XML data from the selected XSLT fragment. Dreamweaver supports XSL transformations for
ColdFusion, ASP, ASP.NET, or PHP pages.
N OT E
If you want to insert the contents of an entire XSLT page in a dynamic page, the
procedure is exactly the same. Before using the XSL Transformation server behavior to
insert the entire XSLT page, delete all HTML code from the dynamic page. For more
information, see “About server-side XSL transformations” on page 737.
To insert an XSLT fragment in a web page:
1.
Open an existing ColdFusion, ASP, ASP.NET, or PHP page.
2.
In Design view, place the insertion point in the location where you want to insert the XSLT
fragment.
N OT E
When inserting XSLT fragments, you should always click the Show Code and
Design view button after placing the insertion point on the page so that you can
ensure that the insertion point is in the correct location. If it isn’t, you might need to
click somewhere else in Code view to place the insertion point where you want it.
Performing XSL transformations on the server
755
3.
In the Server Behaviors panel (Window > Server Behaviors), click the Plus (+) button and
select XSL Transformation.
4.
In the XSL Transformation dialog box, click the Browse button and browse to an XSLT
fragment or an entire XSLT page. For more information, see “Creating XSLT pages”
on page 748.
Dreamweaver automatically populates the next text field with the file path or URL of the
XML file that is attached to the specified fragment. To change it, click the Browse button
and browse to another file.
5.
(Optional) Click the Plus (+) button to add an XSLT parameter. For more information,
see “Using parameters with XSL transformations” on page 757.
6.
Click OK.
Dreamweaver inserts a reference to the XSLT fragment in the page. The fragment is not
editable. You can double-click the fragment to open the fragment’s source file and edit it.
Dreamweaver also creates an includes/MM_XSLTransform/ folder in the site’s root folder
that contains a runtime library file. The application server uses the functions defined in
this file to perform the transformation. For more information, see “About server-side XSL
transformations” on page 737.
756
Chapter 36: Displaying XML Data in Web Pages
7.
Upload the dynamic page to your server (Site > Put). When Dreamweaver gives you the
option of including dependent files, click Yes. The file containing the XSLT fragment, the
XML file containing your data, and the generated run-time library file must all be on the
server for your page to display correctly. (If you selected a remote XML file as your data
source, that file must of course reside somewhere else on the Internet.)
Deleting XSLT fragments from dynamic pages
You can remove an XSLT fragment from a page by deleting the XSL Transformation server
behavior used to insert the fragment. Deleting the server behavior deletes the XSLT fragment
only — it does not delete the associated XML, XSLT, or run-time library files.
To delete an XSLT fragment from a dynamic page:
1.
In the Server Behaviors panel (Window > Server Behaviors), select the XSL Transformation
server behavior that you want to delete.
2.
Click the minus (-) button.
N OT E
Macromedia recommends that you always remove server behaviors in this fashion.
Manually deleting the generated code only partially removes the server behavior,
even though the server behavior may disappear from the Server Behaviors panel.
Editing XSL Transformation server behaviors
Once you’ve added an XSLT fragment to a dynamic web page, you can edit the XSL
Transformation server behavior at any time.
To edit an XSL Transformation server behavior:
1.
In the Server Behaviors panel (Window > Server Behaviors), double-click the XSL
Transformation server behavior that you want to edit.
2.
Make your changes and click OK.
Using parameters with XSL transformations
You can define parameters for your XSL transformation when adding the XSL
Transformation server behavior to a web page. A parameter controls how XML data is
processed and displayed. For example, you might use a parameter to identify and list a specific
article from a news feed. When the page loads in a browser, only the article you specified with
the parameter appears.
Performing XSL transformations on the server
757
To add an XSLT parameter to an XSL transformation:
1.
Open the XSL Transformation dialog box. You can do this by double-clicking an XSL
Transformation server behavior in the Server Behaviors panel (Window > Server
Behaviors), or by adding a new XSL Transformation server behavior. For instructions, see
“Inserting XSLT fragments in dynamic pages” on page 755.
2.
In the XSL Transformation dialog box, click the Plus (+) button next to XSLT Parameters.
3.
In the Add Parameters dialog box, enter a name for the parameter in the Name text box.
The name can only contain alphanumeric characters. It cannot contain spaces.
4.
Do one of the following:
■
If you want to use a static value, enter it in the Value text box.
■
If you want to use a dynamic value, click the dynamic icon next to the Value text box,
complete the Dynamic Data dialog box, and click OK. For more information, click the
Help button in the Dynamic Data dialog box.
5.
In the Default Value text box, enter the value you want the parameter to use if the page
receives no run-time value.
6.
Click OK.
To edit an XSLT parameter:
1.
Open the XSL Transformation dialog box. You can do this by double-clicking an XSL
Transformation server behavior in the Server Behaviors panel (Window > Server
Behaviors), or by adding a new XSL Transformation server behavior. For instructions, see
“Inserting XSLT fragments in dynamic pages” on page 755.
2.
Select a parameter from the XSLT parameters list.
3.
Click the Edit button.
4.
Make your changes and click OK.
758
Chapter 36: Displaying XML Data in Web Pages
To delete an XSLT parameter:
1.
Open the XSL Transformation dialog box. You can do this by double-clicking an XSL
Transformation server behavior in the Server Behaviors panel (Window > Server
Behaviors), or by adding a new XSL Transformation server behavior. For instructions, see
“Inserting XSLT fragments in dynamic pages” on page 755.
2.
Select a parameter from the XSLT parameters list.
3.
Click the minus (-)button.
Creating conditional XSLT regions
You can use Dreamweaver to create simple conditional regions or multiple conditional regions
on an XSLT page. You can make a selection in Design view and apply a conditional region to
the selection, or you can just insert a conditional region wherever the insertion point is in the
document.
For example, if you wanted to display the word “Unavailable” next to the price of an item
when the item is unavailable, you could type the word “Unavailable” on the page, select it,
and then apply a conditional region to the selected text. Dreamweaver surrounds the selection
with <xsl:if> tags, and only displays the word on the page when the data match the
conditions of the conditional expression.
To create a conditional XSLT region:
1.
Select Insert > XSLT Objects > Conditional Region, or Insert > XSLT Objects > Multiple
Conditional Region.
2.
In the Conditional Region or Multiple Conditional Region dialog box, enter the
conditional expression you want to use for the region.
For more information, click the Help button in the dialog box.
3.
Click OK.
Editing a Conditional Region XSLT object
After you’ve added a conditional XSLT region to your page, you can make changes to it using
the Property inspector.
To edit a Conditional Region XSLT object:
1.
Select the object by clicking the gray tab that surrounds the conditional region.
2.
In the Property inspector (Window > Properties), edit your conditional expression in the
Test text box.
Performing XSL transformations on the server
759
Inserting XSL comments
You can add XSL comment tags to a document, or you can wrap a selection in XSL comment
tags.
To add XSL comment tags to a document:
■
Do one of the following:
■
■
In Design view, select Insert > XSLT Objects > XSL Comment, type the contents of
the comment (or leave the text box blank), and click OK.
In Code view, select Insert > XSLT Objects > XSL Comment.
To wrap a selection in XSL comment tags:
1.
Switch to Code view (View > Code)
2.
Select the code you want to comment.
3.
On the Coding toolbar, click the Apply Comment button and select Apply
<xsl:comment></xsl:comment> Comment.
Performing XSL transformations on the
client
You can perform XSL transformations on the client without the use of an application server.
When you do so, a browser does the work of transforming the XML data, instead of an
application server. You can use Dreamweaver to create such a page, however, client-side
transformations require manipulation of the XML file containing the data you want to
display. Additionally, client-side transformations will only work in modern browsers.
Macromedia recommends that you read “About client-side XSL transformations” on page 740
before proceeding with any of the following procedures.
This section contains the following topics:
■
“Workflow for performing client-side XSL transformations” on page 761
■
“Creating entire XSLT pages” on page 762
■
“Linking XSLT and XML files” on page 762
Related topics
■
“About server-side XSL transformations” on page 737
760
Chapter 36: Displaying XML Data in Web Pages
Workflow for performing client-side XSL
transformations
This section provides a list of steps you need to follow to perform client-side XSL
transformations, and refers you to the sections in the documentation that elaborate on each
procedure.
Macromedia recommends that you read “About using XML and XSL with web pages”
on page 735, “About server-side XSL transformations” on page 737, and “About client-side
XSL transformations” on page 740 before building pages that display XML data.
To perform client-side XSL transformations, follow these steps:
■
Set up a Dreamweaver site. See Chapter 2, “Setting Up a Dreamweaver Site,” on page 79.
■
Do one of the following:
■
■
In your Dreamweaver site, create an entire XSLT page. See “Creating entire XSLT
pages” on page 762.
Convert an existing HTML page to an entire XSLT page. See “Converting HTML
pages to XSLT pages” on page 750
■
If you haven’t already done so, attach an XML data source to the page. See “Attaching
XML data sources” on page 750. The XML file that you attach must reside in the same
directory as the XSLT page.
■
Bind your XML data to the XSLT page. See “Displaying XML data in XSLT pages”
on page 751.
■
If appropriate, add a Repeat Region XSLT object to the table or table row that contains
the XML data placeholder(s). See “Displaying repeating XML elements” on page 753.
■
Attach the XSLT page to the XML page. See “Linking XSLT and XML files” on page 762.
■
Post both the XML page and the linked XSLT page to your web server.
■
View the XML page in a browser. When you do so, the browser transforms the XML data,
formats it with the XSLT page, and displays the styled page in the browser.
Performing XSL transformations on the client
761
Creating entire XSLT pages
You must use an entire XSLT page for client-side transformations. (XSLT fragments don’t
work for this type of transformation.) For instructions on creating, binding XML data to, and
formatting XSLT pages, see the following topics:
■
“Creating XSLT pages” on page 748
■
“Displaying XML data in XSLT pages” on page 751
■
“Displaying repeating XML elements” on page 753
■
“Applying styles to XSLT fragments” on page 763
Linking XSLT and XML files
Once you have an entire XSLT page with dynamic content placeholders for your XML data,
you must insert a reference to the XSLT page in the XML page.
N OT E
The XML and XSL files you use for client-side transformations must reside in the same
directory. If they don’t, the browser will read the XML file and find the XSLT page for the
transformation, but will fail to find assets (style sheets, images, and so on) defined by
relative links in the XSLT page.
To link an XSLT page to an XML page:
1.
Open the XML file that you want to link to your XSLT page.
2.
Select Commands > Attach an XSLT Stylesheet.
3.
In the Attach an XSLT Stylesheet dialog box, click the Browse button, browse to the XSLT
page you want to link to, select it, and click OK.
4.
Click OK to close the Attach an XSLT Stylesheet dialog box.
Dreamweaver inserts the reference to the XSLT page at the top of the XML document.
762
Chapter 36: Displaying XML Data in Web Pages
Applying styles to XSLT fragments
When you create an entire XSLT page (that is, an XSLT page that contains <body> and
<head> tags), you can display XML data on the page and then format the data like any other
piece of content using the Property inspector or the CSS Styles panel. When you create an
XSLT fragment for insertion in a dynamic page, however (for example, a fragment for
insertion in an ASP, PHP, or Cold Fusion page), the rendering of styles in the fragment and in
the dynamic page becomes more complicated. Although you work on an XSLT fragment
separately from the dynamic page, it is important to remember that the fragment is intended
for use within the dynamic page, and that the output from the XSLT fragment ultimately
resides somewhere within the <body> tags of the dynamic page. Given this workflow, it is
important to make sure that you do not include <head> elements (such as style definitions or
links to external style sheets) in XSLT fragments. Doing so will cause the application server to
place these elements into the <body> of the dynamic page, thereby generating invalid markup.
For example, let’s say you’re creating an XSLT fragment for insertion in a dynamic page, and
you want to format the fragment using the same external style sheet as the dynamic page. If
you attach the same style sheet to the fragment, the resulting HTML page will contain a
duplicate link to the style sheet (one in the <head> section of the dynamic page, and another
in the <body> section of the page, where the content of the XSLT fragment appears). Instead
of this approach, you should use Design-time style sheets to reference the external style sheet.
When formatting the content of XSLT fragments, Macromedia recommends that you use the
following workflow:
■
First, attach an external style sheet to the dynamic page. (This procedure follows best
practices for applying styles to the content of any web page).
■
Next, attach the same external style sheet to the XSLT fragment as a Design-time style
sheet. As the name implies, Design-time style sheets only work in the Dreamweaver
Design view. For more information, see “Using Design-Time style sheets” on page 403.
Once you have completed the previous steps you can apply existing styles or create new styles
in your XSLT fragment using the same style sheet that you’ve attached to your dynamic page.
You will have cleaner HTML output (because the reference to the style sheet is only valid
while working in Dreamweaver), and the fragment will still display the appropriate styles in
Design view. Additionally, all of your styles will be applied to both the fragment and the
dynamic page when you view the dynamic page in Design view, or preview the dynamic page
in a browser.
NO T E
If you preview the XSLT fragment in a browser, the browser does not display the styles.
Instead you should preview the dynamic page in the browser to see the XSLT fragment
within the context of the dynamic page.
Applying styles to XSLT fragments
763
For more information on using CSS to format XSLT fragments, see www.macromedia.com/
go/dw_xsl_styles.
Troubleshooting XSL transformations
If you are having trouble getting your XSL transformations to work, a troubleshooting guide
with the answers to many frequently asked questions is available at www.macromedia.com/go/
dw_xsl_faq.
764
Chapter 36: Displaying XML Data in Web Pages
37
CHAPTER 37
Using Web Services
Web services are an emerging technology that allow web pages to access distributed
applications. By offering both access to information and application functionality as a service,
web services can be delivered and paid for as streams of services that allow ubiquitous access
from any platform. The web page that connects to the web service is commonly known as a
consumer, and the service itself is known as a publisher. Macromedia Dreamweaver 8 lets you
create pages and sites that are consumers of web services. Dreamweaver currently supports the
creation of web-service consumers using Macromedia ColdFusion MX, ASP.NET, and Java
Server Pages (JSP) document types. Specifically, Dreamweaver allows you to perform the
following web service development tasks:
■
Select web services available on the Internet.
■
Generate a web service proxy that allows the web page to communicate with the web
service publisher.
The proxy (also known as an abstraction class) contains the fields, methods, and
properties of the web service, and makes them available to the locally hosted page. When
you generate a proxy for your page, Dreamweaver lets you view them in the Components
panel.
■
Drag methods and data types into the page’s code.
Before you create a web page that uses a web service, you must be familiar with the underlying
server technology of the application you want to use and the programming constructs that the
application requires.
Dreamweaver allows you to author web pages that can access web services and make use of the
functionality the services provide. In addition, you can create and publish web services for
deployment using Macromedia ColdFusion MX.
765
This chapter contains the following sections:
About web services . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 766
About proxy generators. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .769
Adding a web service proxy using the WSDL description . . . . . . . . . . . . . . . . . . . . 773
Adding a web service to a page. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 774
Editing the UDDI web service site list . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 776
About web services
Web services allow applications to communicate and share information across the Internet,
regardless of operating system or programming language. Examples of web services, and the
information and functionality they provide, include the following:
■
User authentication and authorization
■
Credit card validation
■
Financial markets services that return stock prices associated with specified ticker symbols
■
Purchasing services that allow users to order products online
■
Information services that provide news or other information types based on a selected
interest, location, or other personal information
By providing functionality as a service that a web page connects to and uses as needed, web
services give developers and service providers greater flexibility in designing and deploying
powerful, distributed applications.
Web services consist of the following basic components:
■
Service publishers
■
Service brokers
■
Service consumers
766
provide hosted applications and make them available for use. Web
services can be provided either for free, or as a fee-based service.
maintain a registry of service providers with descriptions of service
offerings and links to their applications.
are the web pages that access and use the remote web service.
Chapter 37: Using Web Services
The Dreamweaver web service workflow
To create a page or site that is a consumer of a web service using Dreamweaver, you must
perform the following tasks:
1.
Install and configure a proxy generator.
Proxy generators generate a web service proxy, a software component that a web page uses
to communicate with the web service publisher. The web service proxy is generated from
the Web Service Description Language (WSDL) that describes the web service.
Depending on the server technology you want to develop web service consumers for, you
may need to install and configure a proxy generator that supports that technology.
Dreamweaver comes pre-configured with AXIS, the Apache SOAP proxy generator that
supports JSP web service development. If you are developing ColdFusion 6 pages, the web
service proxy generator is included in the ColdFusion server. Establishing a connection to
the ColdFusion server gives you access to the proxy generator.
If you are developing web service pages for use with ASP.NET, you must install the
ASP.NET SDK, which is available from Microsoft.
For information on installing and configuring a proxy generator not supplied with
Dreamweaver, see “About proxy generators” on page 769.
2.
Using a browser, view a web-based registry of web services.
There are several sources of web services, ranging from web service registry sites to simple
lists. The registries use UDDI, a standard that lets service providers and requestors find
and transact with one another. UDDI allows businesses to locate services on the web that
meet their needs. For example, using UDDI you can specify certain criteria such as the
lowest price for a certain service, or that specific information be returned.
3.
After locating and selecting a web service that provides the functionality you need, enter
the URL of the WSDL in the Adding a Web Service dialog box.
About web services
767
4.
Generate a proxy for the web service from the WSDL description of the service publisher.
To embed a web service into a web page, you must create a proxy. The proxy provides the
web page with the necessary information to communicate with the web service, and access
the methods the web service provides.
To create a proxy from the WSDL file, use a proxy generator. After you create the proxy,
you can install it on either of the following:
■
■
The local computer where you are developing the web service consumer.
The server computer running the application server. To deploy the web page and have
it communicate with the web service publisher you must install the proxy on the
server.
For more information, see “About proxy generators” on page 769.
5.
Using Dreamweaver, add the web service to a page and edit the necessary parameters and
methods to make use of the service’s functionality.
For more information, see “Adding a web service to a page” on page 774.
Finding web service publishers
Web services themselves are made available by service publishers. Typically, the service
publisher makes its web service available through a web-based registry that maintains a
directory of available services that you can access. A number of websites provide such a
directory, including:
■
X Methods at http://www.xmethods.net
■
IBM Business Registry at https://uddi.ibm.com/ubr/registry.html
■
Microsoft UDDI registry at http://uddi.microsoft.com/default.aspx
These registries use the Universal Description, Discovery and Integration (UDDI) service, an
open, e-commerce service registry that provides a forum for businesses to describe themselves
and the goods or services they can provide to other businesses. A group of companies, called
operators, maintain the registry. The operators have pledged to share all public information
about registrants among themselves and with users of the service, and to maintain interoperability among the multiple peer nodes of the UDDI service network. In addition to
public web services, there are also private UDDI registries available on a subscription basis.
The UDDI specification is based on existing Internet standards, ensuring that it is platform
and implementation neutral.
Related topics
■
“Editing the UDDI web service site list” on page 776
768
Chapter 37: Using Web Services
Web service software components
For a web page to access and use a web service, it must communicate with the service and have
a description of the functionality the service provides, the available methods that it can
invoke, and the parameters the service returns. The Web Service Description Language
(WSDL) is an XML-based description of the service. Each web service provides a WSDL that
describes how to bind to the service, the available methods that the web page can invoke, and
the data inputs and outputs. The WSDL can reside in a file, or it can be generated by the web
service at runtime.
Communication between the web page requesting the service and the web service itself uses
the Simple Object Access Protocol (SOAP). SOAP is an XML-based protocol that lets a web
client access and invoke the web service’s methods and parameters.
Related topics
“Adding a web service proxy using the WSDL description” on page 773
■
Web service references
To learn more about web services, and the underlying technologies that make them possible,
visit the following websites:
■
WSDL specification at http://www.w3.org/TR/wsdl
■
UDDI specification at http://www.uddi.org/specification.html
■
XML specification at http://www.w3.org/TR/REC-xml
■
SOAP specification at http://www.w3.org/TR/SOAP/
About proxy generators
Dreamweaver installs the AXIS proxy generator, which supports JSP web services. AXIS is an
open-source proxy generator distributed through the Apache SOAP project. In addition, you
can add proxy generators that support other vendor’s web service implementations, or new
web service technologies. This section describes how to obtain proxy generators and configure
them to work with Dreamweaver.
To learn more about AXIS, see the Apache AXIS website at http://ws.apache.org/axis/
index.html.
Related topics
■
“Configuring proxy generators for use with Dreamweaver” on page 770
About web services
769
Obtaining additional proxy generators
If you want to install a proxy generator that is not supplied with Dreamweaver, you must
obtain the proxy generator and any related software components from the vendor. You should
be able to download all the necessary files from the vendor’s website.
Some proxy generators create proxies that depend on other software libraries, which must be
appropriately installed so the proxy generator can access them. For example, the AXIS proxy
generator creates proxies that depend on the Apache SOAP library, which, in turn, depends
on other software libraries (note that all the necessary software needed to use AXIS is installed
by default with Dreamweaver). When selecting a proxy generator, consult the provided
documentation, and ensure that you have all the required software components and libraries,
so that you can properly install and configure them.
After you have properly installed and configured the proxy generator, you must configure it to
work with Dreamweaver.
NO TE
Currently, web services development with Dreamweaver is limited to the Windows
environment. To develop pages that access web services on the Macintosh, you must
use a separate application server running either Windows NT/2000/XP or UNIX on
which to run the web service proxy and its application environment.
Configuring proxy generators for use with
Dreamweaver
When you install a web-service proxy generator, you must configure it to work
with Dreamweaver.
To learn more about proxy generators, see “About proxy generators” on page 769.
To configure a proxy generator to work with Dreamweaver:
1.
Select Window > Components to open the Components panel.
2.
In the Components panel, select Web Services from the pop-up menu in the upper left of
the panel, then click the Plus (+) button and select Add Using WSDL.
770
Chapter 37: Using Web Services
The Add Using WSDL dialog box appears.
3.
In the Add Using WSDL dialog box, select Edit Proxy Generator List from the Proxy
Generator pop-up menu.
The Proxy Generator dialog box appears.
4.
Click New, select the proxy generator from the pop-up menu, and click Done.
If the proxy generator you want to use does not appear in the list, select Default Proxy
Generator to display the Default Proxy Generator dialog box.
The Default Proxy Generator dialog box lets you configure the selected proxy generator,
or you can configure a new proxy generator. The dialog box’s text boxes vary depending
on the proxy generator you chose.
NO TE
The ColdFusion MX proxy generator is not editable.
Configuring proxy generators for use with Dreamweaver
771
5.
Complete the dialog box and click OK.
For information on completing the dialog text box, click the Help button in the dialog
box.
6.
When you have completed setting the Default Proxy Generator settings, click OK.
When Dreamweaver reads a WSDL description of a web service, Dreamweaver carries out
the following actions relating to the fields of the Default Proxy Generator:
■
Reads the WSDL as input to find the web service.
■
Generates the web service web service proxy with the specified runtime environment.
■
Compiles the proxy with the specified compiler.
■
Returns the proxy source code and the compiled proxy in the specified destination
folder.
Related topics
■
“About proxy generators” on page 769
■
772
“Obtaining additional proxy generators” on page 770
Chapter 37: Using Web Services
Adding a web service proxy using the
WSDL description
After you have specified a proxy generator (see “About proxy generators” on page 769) and
configured the web service server models you want to support, you need to find a web service
that provides the desired functionality and generate a proxy for that service.
To select a web service and generate a proxy from its WSDL file:
1.
Open the page that you want to add the web service to.
2.
Select Window > Components to open the Components panel.
3.
In the Components panel, select Web Services from the pop-up menu in the upper left of
the panel, click the Plus (+) button, and select Add Using WSDL.
The Add Using WSDL dialog box appears.
4.
Specify the URL of the WSDL file you want to use.
If you know the URL of the WSDL file, enter it in the URL of the WSDL text box.
If you don’t know the URL of the WSDL file, you can browse a directory of web services.
When you find the web service you want, copy and paste the URL of the web service into
the WSDL edit box. To start a web browser, click the UDDI browse button and select one
of the listed web service registries. Dreamweaver will start the browser and open the
selected registry. Locate the web service you want to use, and copy the URL of its WSDL
file to the Clipboard (Control+C in Windows or Command+C on the Macintosh).
Return to the Web Services Chooser and paste the URL into the dialog box.
You can edit the list of web service registries to include additional web service directories
or specific web service providers. For more information, see “Editing the UDDI web
service site list” on page 776.
5.
Select a proxy generator that supports your desired web services server model from the
Proxy Generator pop-up menu.
Make sure the proxy generator is installed and configured on your system. For more
information, see “About proxy generators” on page 769.
Adding a web service proxy using the WSDL description
773
6.
Click OK.
The proxy generator creates a proxy for the web service and introspects it. Introspection is
the process where the proxy generator queries the internal structure of the web service
proxy, and makes its interfaces, methods, and properties available through Dreamweaver.
The web service is now available for use in the site, and appears in the Components panel.
You can now add the web service to a page.
Related topics
“Web service software components” on page 769
■
Adding a web service to a page
After selecting a web service, generating its proxy, and adding it to the Components panel,
you can insert it into a page.
The illustration below shows the Components panel with the web service proxy Helloworld
added. The Helloworld proxy provides one method, sayHello, which prints “Hello World.”
The following example instantiates the HelloWorld web service using ColdFusion. To learn
more about creating a web services, and to see additional examples using .NET and JSP, visit
the Macromedia Support Center at: www.macromedia.com/go/creating_web_services.
To add a web service to a page:
1.
In the Document window, in Code view, drag the sayHello method into the page’s
HTML.
Dreamweaver adds the method and dummy parameters to the page.
774
Chapter 37: Using Web Services
2.
Edit the inserted code with appropriate service instance names, data types, and parameter
values, as required by the web service. The web service should provide descriptions of the
data types and parameter values.
In the ColdFusion example shown below, the web service is enclosed by the <cfinvoke>
tags. When developing a web service in ColdFusion, use <cfinvoke> to instantiate the
web service and invoke its methods.
<html>
<head>
<title>Web Service
3.
If you want to bind a return value to a visual element, switch to Design view and place a
visual element on the page that can accept data binding. Then switch back to Code view
and enter the appropriate code to bind the returned value to the visual element. When
creating web services, refer to the technology provider’s documentation for the proper
syntax with which to both instantiate the service and display the returned values to the
page.
In this example, the value returned for the variable aString is output using the
ColdFusion tag. This will display the sentence “The web service says:
Hello world!” to the page.
Web Service
The web service says: #aString#
Adding a web service to a page
775
4.
When you deploy web pages to a production server, Dreamweaver automatically copies the
pages, the proxy, and any necessary libraries to the web server.
NO T E
If you develop the application with a proxy that is installed on a separate computer
from the one where you developed the pages, or if you use a site management tool
that does not copy all of the related files to the server, you must be sure to deploy
both the proxy and any dependent library files.Otherwise, your pages cannot
communicate with the web service application.
Editing the UDDI web service site list
The Web Service Chooser provides a list of UDDI-based web service directories from which
you can select web services. You can edit this list to add or delete web service directories. For
more information, see “Finding web service publishers” on page 768.
To edit the web service site list:
1.
In Dreamweaver, select Window > Components to open the Components panel.
2.
In the Components panel, select Web Services from the pop-up menu in the upper left of
the panel, and then click the Plus (+) button to add a web service.
The Add Using WSDL dialog box appears.
3.
In the Web Services Chooser, click the globe icon and select Edit UDDI Site List from the
pop-up menu.
The UDDI Sites dialog box appears.
4.
From the UDDI Sites dialog box you can add new web service sites, edit the name and
URL of existing sites, and remove unwanted sites.
■
■
776
To add a new site, or modify and existing one, click the New or Edit button and
complete the dialog box that displays.
To remove an existing site, select it in the list and click the Remove button.
Chapter 37: Using Web Services
CHAPTER 38
38
Adding Custom Server
Behaviors
Macromedia Dreamweaver 8 comes with a set of built-in server behaviors that lets you easily
add dynamic capabilities to a site. If you want to extend Dreamweaver’s functionality, you can
create new server behaviors to suit your development needs, or obtain server behaviors from
the Macromedia Exchange website.
This chapter contains the following sections:
About custom server behaviors. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 777
Installing third-party server behaviors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 787
Using the Server Behavior Builder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 788
Using parameters in server behaviors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 791
Positioning code blocks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .792
Creating a dialog box for a custom server behavior . . . . . . . . . . . . . . . . . . . . . . . . . .794
Editing and modifying server behaviors. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .796
About custom server behaviors
Before creating your own server behaviors, you should check the Macromedia Exchange
website to see if another party has already created a server behavior that supplies the
functionality you’d like to add to your website. Often, a third-party developer has created and
tested a server behavior that will address your needs.
The server behaviors and other extensions available through the Macromedia Exchange
website allow you to easily add new features to Dreamweaver. Each server behavior includes a
short description, user reviews, and a discussion group where you can post questions and get
support for the server behaviors you download.
If you are going to create your own server behavior, you should be familiar with the web
programming language used by your website. This chapter provides guidelines specific to
creating server behaviors using Dreamweaver. It does not instruct you in programming
languages or server behavior testing.
777
Server behaviors
If you are a developer proficient in Macromedia ColdFusion, ASP.NET, JavaScript, VBScript,
PHP, or Java, you can write your own server behaviors. The steps to create a server behavior
include the following tasks:
■
Writing one or more code blocks that perform the required action.
For information on creating server behaviors with the Dreamweaver Server Behavior
Builder see “Using the Server Behavior Builder” on page 788. For information on the
syntax supported by Dreamweaver server behaviors, see “Using parameters in server
behaviors” on page 791.
■
Specifying where the code block should be inserted within the page’s HTML code.
For information on positioning code blocks within a page see “Positioning code blocks”
on page 792.
■
If the server behavior requires that a value be specified for a parameter, creating a dialog
box that prompts the web developer applying the behavior to supply an appropriate value.
For information on supplying parameter values to a server behavior using a dialog box see
“Creating a dialog box for a custom server behavior” on page 794.
■
Testing the server behavior before making it available to others.
For guidelines on testing server behaviors see “Testing server behaviors” on page 787.
About code blocks
The code blocks you create in the Server Behavior Builder are encapsulated in a server
behavior that appears in the Server Behaviors panel. The code can be any valid runtime code
for the specified server model. For example, if you choose ColdFusion as the document type
for your custom server behavior, then the code you write must be valid ColdFusion code that
runs on a ColdFusion application server.
Related topics
■
“Coding guidelines” on page 786
Code blocks
You can create the code blocks either directly within the Server Behavior Builder, or you can
copy and paste the code from other sources. Each code block you create in the Server Behavior
Builder must be a single tag or script block. If you need to insert multiple tag blocks, split
them into separate code blocks.
For more information, see “Using the Server Behavior Builder” on page 788
778
Chapter 38: Adding Custom Server Behaviors
Runtime Parameters
You can include parameters in your runtime code and let the page designer supply the
parameter values. To do so, enter parameter markers in the code, as follows:
@@parameterName@@
For more information, see “Using parameters in server behaviors” on page 791.
Conditions and repeating elements in code blocks
If you want the code block, or a portion of a code block, to be executed only if a certain
condition or conditions apply, use the following syntax:
<@ if (expression1) @>
code block1
[<@ elseif (expression2) @>
code block2]*
[<@ else @>
code block3]
<@ endif @>
The square brackets ([ ]) denote optional code and the asterisk (*) denotes zero or more
instances. The condition expression is any valid JavaScript condition expression, and may
contain server behavior parameters.
If you want the code block, or a portion of a code block, to be repeated a number of times, use
the following syntax:
<@ loop (@@param1@@,@@param2@@) @>
code block
<@ endloop @>
The loop directive takes a comma-separated list of parameter arrays as arguments. The
repeating text will be duplicated n times, where n is the length of the parameter array
arguments. If more than one parameter array argument is specified, all the arrays must have
the same length. On the ith evaluation of the loop, the ith elements of the parameter arrays
replace the associated parameter instances in the code block.
For general information on coding, see “Coding guidelines” on page 786.
Related topics
■
“Making code blocks conditional” on page 782
■
“Repeating code blocks” on page 783
About custom server behaviors
779
Code block positioning within web pages
When you create code blocks using the Server Behavior Builder (see “Using the Server
Behavior Builder” for more information), you must specify where to insert them in the page’s
HTML code. You do this using the Server Behavior Builder dialog box’s Insert Code and
Relative Position pop-up menus, which let you select where to insert the code block within
the document, and then specify a position relative to another tag in the page.
For example, if you insert a code block above the opening tag, you must then specify
the code blocks position relative to other tags, scripts, and server behaviors in that section of
the page’s HTML code. Typical examples include positioning a behavior either before or after
any recordset queries that might also exist in the page code above the opening tag.
When you select a positioning option from the Insert Code pop-up menu, the options
available in the Relative Position pop-up menu change to provide relevant options for that
part of the page. For example, if you select Above the Tag in the Insert Code pop-up
menu, then the positioning options available in the Relative Position pop-up menu reflect
choices relevant for that part of the page.
The code block insert options, and the relative positioning options available for each, are
shown in the table below.
Insert Code options
Relative position options
Above the Tag
•
•
•
•
•
At the beginning of the file
Just before the recordsets
Just after the recordsets
Just above the tag
Custom position
Below the Tag
•
•
•
•
•
Before the end of the file
Before the recordset close
After the recordset close
After the tag
Custom position
Relative to a Specific Tag Select a tag from the Tag pop-up menu, and then choose from
the tag positioning options.
Relative to the Selection
780
Before the selection
After the selection
Replace the selection
Wrap the selection
Chapter 38: Adding Custom Server Behaviors
If you want to specify a custom position, you must assign a weight to the code block. Use the
Custom Position option when you need to insert more than one code block in a particular
order. For example, if you want to insert an ordered series of three code blocks after the code
blocks that open recordsets, you would enter a weight of 60 for the first block, 65 for the
second, and 70 for the third.
By default, Dreamweaver assigns a weight of 50 to all recordset-opening code blocks inserted
above the tag. If the weight of two or more blocks match, Dreamweaver randomly sets
the order among the blocks.
Related topics
■
“About code blocks” on page 778
■
“Positioning code blocks” on page 792
Parameters in server behaviors
You can include parameters in a server behavior’s code, and let the page designer supply the
necessary parameter values before inserting the server behavior’s code into the page. To let the
page designer supply parameter values, enter parameter markers within the code as shown:
@@parameterName@@
The example ASP server behavior below contains the parameter formParam, which requires
the person inserting the behavior to supply the name of a form object:
<% Session(“lang_pref”) = Request.Form(“formParam”); %>
To create a parameter that lets the user supply the necessary value:
1.
Enclose the formParam string in parameter markers:
<% Session(“lang_pref”) = Request.Form(“@@formParam@@”); %>
2.
Create a dialog box that prompts the designer to supply the name of the form object. For
more information, see “Creating a dialog box for a custom server behavior” on page 794.
About custom server behaviors
781
Making code blocks conditional
Dreamweaver lets you develop code blocks that incorporate control statements that execute
conditionally. The Server Behavior Builder uses if, elseif, and else statements, and may
also contain server behavior parameters. This enables you to insert alternate text blocks based
on the values of OR relationships among server behavior parameters. The if, elseif, and
else statements appear as shown below. Note that square brackets ([ ]) denote optional code,
and the asterisk (*) denotes zero or more instances:
<@ if (expression1) @>
conditional text1
[<@ elseif (expression2) @>
conditional text2]*
[<@ else @>
conditional text3]
<@ endif @>
Condition expressions can be any JavaScript expression that can be evaluated using the
JavaScript eval() function, and may include a server behavior parameter marked by @@'s.
(The @@'s are necessary to distinguish the parameter from JavaScript variables and
keywords.)
You can nest any number of conditionals or a loop directive (see “Repeating code blocks”
on page 783) within a conditional directive. For example, you can specify that if an expression
is true to execute a loop.
N OT E
New lines after each “@>” are ignored.
Related topics
“About code blocks” on page 778
■
Effectively using conditional expressions
When using if, else, and elseif directives within the insertText XML tag, the
participant text is preprocessed to resolve the if directives and to determine which text to
include in the result. The if and elseif directives take the expression as an argument. The
condition expression is the same as that for JavaScript condition expressions, and can also
contain server behavior parameters. Directives such as this allow you to choose between
alternative code blocks based on the values of, or relationships between, server behavior
parameters.
782
Chapter 38: Adding Custom Server Behaviors
For example, the following JSP code comes from a Dreamweaver server behavior that uses the
conditional code block:
@@rsName@@.close();
@@rsName@@_hasData = @@rsName@@.next();
If the server behavior uses a normal recordset, the placeholder is
replaced with:
@@rsName@@ = Statement@@rsName@@.executeQuery();
If the server behavior uses a recordset from a callable object, it uses the following code instead.
@@callableName@@.execute();
@@rsName@@ = @@callableName@@.getResultSet();
If the server behavior is added for a callable object, the user would enter a value for the
@@callableName@@ parameter in the server behavior’s Parameter dialog box. Otherwise, the
@@callableName@@ parameter would be empty. Thus, you can rewrite the previous insert text
using @@callableName@@ as the if argument. In this example, if the @@callableName@@
parameter is supplied with a value, and first conditional code block (containing the
getResultSet() method) is selected:
@@rsName@@.close();
<@ if (@@callableName@@ != '') @>
@@callableName@@.execute();
@@rsName@@ = @@callableName@@.getResultSet();@ else @>
@@rsName@@ = Statement@@rsName@@.executeQuery();
<@ endif @>
@@rsName@@_hasData = @@rsName@@.next();
Repeating code blocks
When creating server behaviors, you can use looping constructs to repeat a code block a
specified number of times. The loop syntax is:
<@ loop (@@param1@@,@@param2@@,@@param3@@,@@param_n@@) @>
code block
<@ endloop @>
The loop directive accepts a comma-separated list of parameter arrays as arguments. In this
case, parameter array arguments allow a user to supply multiple values for a single parameter.
The repeating text will be duplicated n times, where n is the length of the parameter array
arguments. If more than one parameter array argument is specified, all the arrays must have
the same length. On the ith evaluation of the loop, the ith elements of the parameter arrays
replace the associated parameter instances in the code block. For more information, see
“Using the loop directive’s _length and _index variables” on page 785.
About custom server behaviors
783
When you later create a dialog box for the server behavior (see “Creating a dialog box for a
custom server behavior” on page 794), you can add a control to the dialog box that allows the
page designer to create parameter arrays. Dreamweaver includes a simple array control that
you can use to create dialog boxes. This control, called Text Field Comma Separated List, is
available through the Server Behavior Builder. To create user interface elements of greater
complexity, see the API documentation to create a dialog box with a control to create arrays (a
grid control, for example).
Loop directives cannot be nested, but conditional directives (see “Positioning code blocks”
on page 792) can be nested within a loop directive.
The following example shows how such repeating code blocks can be used to create server
behaviors (the example is a ColdFusion behavior used to access a stored procedure):
In this example, the CFSTOREDPROC tag can include zero or more CFPROCPARAM tags. However,
without support for the loop directive, there is no way to include the CFPROCPARAM tags
within the inserted CFSTOREDPROC tag. If this were to be created as a server behavior without
the use of the loop directive, you would need to divide this example into two participants: a
main CFSTOREDPROC tag, and a CFPROCPARAM tag whose participant type is multiple.
Using the loop directive, the same procedure can be written as follows:
<@ loop (@@paramName@@,@@value@@,@@type@@) @>
<@ endloop @>
In the previous example, and in the case of conditional code blocks as well, newlines after @>
are ignored.
784
Chapter 38: Adding Custom Server Behaviors
If the user entered the following parameter values in the Server Behavior Builder dialog box:
procedure = "proc1"
conn = "connection1"
paramName = ["@CategoryId", "@Year", "@ISBN"]
value = ["#Form.CategoryId#", "#Form.Year#", "#Form.ISBN#"]
type = ["CF_SQL_INTEGER", "CF_SQL_INTEGER", "CF_SQL_VARCHAR"]
The server behavior would insert the following runtime code in the page:
N OT E
Parameter arrays cannot be used outside of a loop except as part of a conditional
directive expression.
Using the loop directive’s _length and _index variables
The loop directive includes two built-in variables that you can use for embedded if
conditions. The variables are: _length and _index. The _length variable evaluates to the
length of the arrays processed by the loop directive, while the _index variable evaluates to the
current index of the 'loop' directive. To ensure that the variables are only recognized as
directives, and not as actual parameters to be passed into the loop, do not enclose either
variable in @@’s.
An example of using built-in variables is to apply them to the import attribute of the page
directive. The import attribute requires comma separation of packages. If the loop directive
extends around the entire import attribute, you would only output the attribute name
import= on the first iteration of the loop—this includes the closing double quote (")—and
not output a comma on the last iteration of the loop. Using the built-in variable, you can
express this as follows:
<@loop (@@Import@@)@>
<@ if(_index == 0)@>import="
<@endif@>@@Import@@<@if (_index == _length-1)@>"<@else@>,
<@ endif @>
<@endloop@>
About custom server behaviors
785
Coding guidelines
In general, your server behavior’s code should be compact and robust. Web application
developers are very sensitive to the code added to their pages. Follow generally accepted
coding practices for the document type’s language (ColdFusion, ASP.NET, JavaScript,
VBScript, PHP, Visual Basic or Java). When writing comments, consider the different
technical audiences that might need to understand the code, such as web and interaction
designers, or other web application developers. Include comments that accurately describe the
purpose of the code, and any special instructions for including it within a page.
The following is a list of coding guidelines to keep in mind when creating server behaviors:
Error checking
is an important requirement. The server behavior’s code should handle error
cases gracefully. Try to foresee every possibility. For example, what if a parameter request fails?
What if no records are returned from a query?
Unique names
help to ensure that your code is clearly identifiable and avoids name collisions
with existing code. For example, if the page contains a function called hideLayer() and a
global variable called ERROR_STRING, and your server behavior inserts code that uses those
names too, the server behavior may conflict with the existing code.
Code prefixes allow you to identify your own runtime functions and global variables in a
page. One convention is to use your initials. Never use the MM_ prefix, as it is reserved for
Macromedia use only. Macromedia precedes all functions and global variables with the prefix
MM_ to prevent them from conflicting with any code that you write.
var MM_ERROR_STRING = "...";
function MM_hideLayer() {
Avoid similar code blocks
so that the code you write doesn’t resemble too closely the code in
other blocks. If a code block looks too much like another code block on the page, the Server
Behaviors panel might mistakenly identify the first code block as an instance of the second
code block (or conversely). A simple solution is to add a comment to a code block to make it
more unique.
Related topics
■
“About custom server behaviors” on page 777
■
786
“Server behaviors” on page 778
Chapter 38: Adding Custom Server Behaviors
Testing server behaviors
The Macromedia Exchange recommends performing the following tests on each server
behavior you create:
■
Apply the behavior from the Server Behaviors panel. If it has a dialog box, enter valid data
in each field and click OK. Verify that no error occurs when the behavior is applied. Verify
that the runtime code for the server behavior appears in the Code inspector.
■
Apply the server behavior again and enter invalid data in each field of the dialog box. Try
leaving the field blank, using large or negative numbers, using invalid characters (such as /
, ?, :, *, and so on), and using letters in numeric fields. You can write form validation
routines to handle invalid data (validation routines involve hand-coding, which is beyond
the scope of this book).
After successfully applying your server behavior to the page, verify the following:
■
Check the Server Behaviors panel to make sure the name of the server behavior appears in
the list of behaviors added to the page.
■
If applicable, verify that server-side script icons show up on the page. The generic serverside script icons are gold shields. To see the icons, enable Invisible Elements (View >
Visual Aids > Invisible Elements).
■
In Code view, (View > Code) verify that no invalid code is generated.
In addition, if your server behavior inserts code in the document establishing a connection to
a database, create a test database to test the code inserted in the document. Verify the
connection by defining queries that produce different sets of data, and different sizes of data
sets.
Finally, upload the page to the server and open it in a browser. View the page’s HTML source
code and verify that no invalid HTML has been generated by the server-side scripts.
Installing third-party server behaviors
You can download and install server behaviors created by independent developers from the
Macromedia Exchange website.
To access Macromedia Exchange:
1.
In Dreamweaver select Help > Dreamweaver Exchange.
Your browser opens the Macromedia Exchange for Dreamweaver web page.
Installing third-party server behaviors
787
2.
Log on to the Exchange using your Macromedia ID, or, if you have not yet created a
Macromedia Exchange ID for yourself, follow the instructions to open a Macromedia
account.
NO TE
You can also access the Macromedia Exchange from the Server Behaviors panel
(Window > Behaviors) by clicking the Plus (+) button and selecting Get More Server
Behaviors.
To install a server behavior or other extension in Dreamweaver:
1.
Start the Extension Manager by selecting Commands > Manage Extensions.
2.
Select File > Install Package in the Extension Manager.
For more information, see Using the Extension Manager.
Related topics
“About custom server behaviors” on page 777
■
■
“Server behaviors” on page 778
Using the Server Behavior Builder
The Server Behavior Builder lets you add the code block or blocks that the behavior inserts
into a page.
To write server behavior code blocks:
1.
In the Server Behaviors panel (Window > Server Behaviors), click the Plus (+) button and
select New Server Behavior from the pop-up menu.
The New Server Behavior dialog box appears.
2.
From the Document Type pop-up menu, select the document type that you are developing
the server behavior for.
3.
In the Name text box, enter a name for the server behavior.
788
Chapter 38: Adding Custom Server Behaviors
4.
If you want to copy an existing server behavior to add to the behavior you are creating,
select the Copy Existing Server Behavior checkbox.
When this checkbox is selected, a list of available server behaviors is displayed in the
Behavior to Copy pop-up menu.
5.
Click OK.
The Server Behavior Builder dialog box is displayed.
6.
To add a new code block, click the Plus (+) button.
The Create a New Code Block dialog box is displayed.
Using the Server Behavior Builder
789
7.
Enter a name for the code block you want to create and click OK.
The name you entered in the dialog box appears in the Server Behavior Builder, with the
appropriate scripting tags visible in the Code block text box.
8.
In the Code Block text box, enter the code necessary to implement the server behavior.
When entering code in the Code Block text box:
■
You can insert only a single tag or code block for each named code block (for example,
myBehavior_block1, myBehavior_block2, myBehavior_blockn, etc.). If you need
to enter multiple tags or code blocks, you must create an individual code block for
each using the Server Behavior Builder.
■
To include runtime parameters in a code block:
a.
Place the insertion point in the code block where you’d like to insert the parameter.
b.
Click the Insert Parameters in Code Block button.
The Insert Parameters in Code Block dialog box appears.
c.
Enter a name for the parameter in the Parameter Name text box.
d.
Click OK.
The parameter name is inserted in the code block.
■
9.
Repeat steps 6 through 8 for each new code block you want to create.
In the Parameter Name pop-up menu, enter a name for the parameters, and click OK.
The parameter is inserted into the code block at the location where you placed the
insertion point prior to defining the parameter.
790
Chapter 38: Adding Custom Server Behaviors
10. Select
an option from the Insert Code pop-up menu specifying the location in which to
embed the code blocks.
For more information see “Positioning code blocks” on page 792.
11.
You can specify additional information about the server you are creating by using the
Advanced options panel.
12. Click
13.
the Advanced button to display more options.
If you need to create more code blocks, repeat steps 7 through 13 as needed.
14. If
the server behavior requires that parameters be supplied to it, you will need to create a
dialog box that accepts parameters from the person applying the behavior.
To create a dialog box that accepts user input parameters, see “Creating a dialog box for a
custom server behavior” on page 794.
15.
After you have performed the above steps as required by the server behavior you are
creating, Click OK.
Once you create a server behavior, it is listed in the Server Behaviors panel. Test the server
behavior and ensure that it functions properly.
Related topics
■
“Positioning code blocks” on page 792
■
“Repeating code blocks” on page 783
■
“Coding guidelines” on page 786
■
“Positioning code blocks” on page 792
Using parameters in server behaviors
You can include parameters in a server behavior’s code (see “Parameters in server behaviors”
on page 781 for more information), and let the page designer supply the necessary parameter
values before inserting the server behavior’s code into the page. To let the page designer supply
parameter values, enter parameter markers within the code as shown:
@@parameterName@@
Using parameters in server behaviors
791
The ASP server behavior example below contains the parameter formParam, which requires
the person inserting the behavior to supply the name of a form object:
<% Session(“lang_pref”) = Request.Form(“formParam”); %>
To create a parameter that lets the user supply the necessary value:
1.
Enclose the formParam string in parameter markers:
<% Session(“lang_pref”) = Request.Form(“@@formParam@@”); %>
2.
Create a dialog box that prompts the designer to supply the name of the form object.
For more information, see “Creating a dialog box for a custom server behavior”
on page 794.
Positioning code blocks
When you create code blocks using the Server Behavior Builder (see “Using the Server
Behavior Builder” for more information), you must specify where to insert them in the page’s
HTML code. The Insert Code and Relative Position pop-up menus let you choose where to
insert the code block in the document, and then specify a position relative to another tag in
the page.
To learn more about the code block positioning options and how they affect your custom
server behavior, see “Code block positioning within web pages” on page 780.
To position a code block (general instructions):
1.
Using the Server Behavior Builder, write a code block according to the section “Using the
Server Behavior Builder” on page 788.
2.
In the Server Behavior Builder dialog box, select a position in which to insert the code block
from the Insert Code pop-up menu.
3.
In the Server Behavior Builder dialog box, select a position relative to that which you
selected in the Insert Code pop-up menu.
4.
If you have completed the authoring of the code block, click OK.
The server behavior is listed in the Server Behaviors panel (Window > Server Behavior),
and can be viewed by clicking the click the Plus (+) button.
5.
Test the server behavior and ensure that it functions properly.
See “Testing server behaviors” on page 787 for more information.
792
Chapter 38: Adding Custom Server Behaviors
To position a code block relative to another tag on the page:
1.
In the Insert Code pop-up menu, select Relative To a Specific Tag.
2.
In the Tag text box, enter the tag or select one from the pop-up menu.
If you enter a tag, don’t include the angled brackets (< >).
3.
Specify a location relative to the tag by choosing an option in the Relative Position
pop-up menu.
You can insert your code block just before or just after the opening or closing tags. You can
also replace the tag with the code, insert the code as the value of an attribute of the tag (a
box appears to let you select the attribute), or insert the code inside the opening tag.
To position a code block relative to a tag selected by the page designer:
1.
In the Insert Code pop-up menu, select Relative To the Selection.
2.
Specify a location relative to the selection by choosing an option in the Relative Position
pop-up menu.
You can insert your code block just before or just after the selection. You can also replace
the selection with your code block, or you can wrap the code block around the selection.
If you want to wrap the code block around a selection, the selection must consist of an
opening and closing tag with nothing in between, as follows:
The opening tag piece of the code block is inserted before the selection’s opening tag and
the closing tag piece of the code block is inserted after the selection’s closing tag.
Related topics
■
“About custom server behaviors” on page 777
■
“Code block positioning within web pages” on page 780
■
“Using the Server Behavior Builder” on page 788
Positioning code blocks
793
Creating a dialog box for a custom server
behavior
Server behaviors often require that the page designer supply a parameter value. This value
must be inserted before the server behavior’s code is inserted into the page. To do this, you can
create a dialog box that prompts the person implementing the server behavior for a parameter
value.
You create the dialog box by defining the designer-supplied parameters in the code. After
defining all the parameters, you can generate a dialog box for the server behavior.
NO T E
A parameter is added to your code block without your intervention if you specify that
your code should be inserted relative to a specific tag chosen by the page designer (that
is, you chose Relative to a Specific Tag in the Insert Code pop-up menu). The parameter
adds a tag menu to the behavior’s dialog box to let the page designer select a tag.
To create a parameter in the server behavior’s code:
■
Enter a parameter marker at the point in the code where you want to insert the supplied
parameter value. The syntax for the parameter is as follows:
@@parameterName@@
For example, if the server behavior contains the following code block:
<% Session(“lang_pref”) = Request.Form(“Form_Object_Name”); %>
To let the page designer supply the value of Form_Object_Name, enclose the string in
parameter markers (@@):
<% Session(“lang_pref”) = Request.Form(“@@Form_Object_Name@@”); %>
You can also highlight the string and click the Insert Parameter In Code Block button. Enter a
parameter name and click OK. Dreamweaver replaces every instance of the highlighted string
with the specified parameter name enclosed in parameter markers.
794
Chapter 38: Adding Custom Server Behaviors
Dreamweaver uses the strings you enclose in parameter markers to label the controls in the
dialog box it generates (see the following procedure). In the previous example, Dreamweaver
creates a dialog box with the following label:
N OT E
Parameter names in the server behavior code cannot have any spaces. Therefore, the
dialog box labels cannot have any spaces. If you want to include spaces in the label, you
can edit the generated HTML file.
To create a dialog box for a server behavior:
1.
In the Server Behavior Builder, click Next.
A dialog box appears listing all of the designer-supplied parameters you defined in your
code.
2.
(Optional) You can change the display order of the dialog box controls by selecting a
parameter and clicking the up and down arrows.
Creating a dialog box for a custom server behavior
795
3.
(Optional) If you want, change a parameter’s control by selecting the parameter and
choosing another control in the Display As column.
4.
Click OK.
Dreamweaver generates a dialog box with a labeled control for each designer-supplied
parameter you defined.
To view the dialog box:
■
Click the Plus (+) button in the Server Behaviors panel (Window > Server Behaviors), and
select your server behavior from the pop-up menu.
To edit the dialog box of a server behavior you created:
1.
In the Server Behaviors panel (Window > Server Behaviors), click the Plus (+) button and
select Edit Server Behaviors from the pop-up menu.
2.
Select your server behavior from the list, and click Open.
The Server Behavior Builder appears with your server behavior.
3.
Click Next.
A dialog box appears listing all the designer-supplied parameters you defined in your code.
4.
(Optional) You can change the display order of the dialog box controls by selecting a
parameter and clicking the up and down arrows.
5.
(Optional) If you want, change a parameter’s control by selecting the parameter and
choosing another control in the Display As column.
6.
Click OK.
Editing and modifying server behaviors
You can edit any server behavior created with the Server Behavior Builder, including
server behaviors you download from the Macromedia Exchange website, and other
third-party developers.
If you apply a server behavior to a page and then edit the behavior in Dreamweaver, instances
of the old behavior will no longer appear in the Server Behaviors panel. The Server Behaviors
panel searches the page for code that matches the code of known server behaviors. If the code
of a server behavior known to the panel changes, the panel will no longer recognize earlier
versions of the behavior on that page.
796
Chapter 38: Adding Custom Server Behaviors
If you want both the old and new versions of the behavior to appear in the
panel:
■
Click the Plus (+) button on the Server Behaviors panel (Window > Server Behaviors),
select New Server Behavior, and create a copy of the old server behavior.
To edit the code of a server behavior created with the Server Behavior Builder:
1.
In the Server Behaviors panel (Window > Server Behaviors), click the Plus (+) button and
select Edit Server Behaviors from the pop-up menu.
The Edit Server Behaviors dialog box appears, displaying all the behaviors for the current
server technology.
2.
Select the server behavior and click Edit.
The Server Behavior Builder dialog box appears.
3.
Select the appropriate code block and modify the code to be inserted in pages.
4.
(Optional) You can change or add parameter markers to the code.
For instructions, see “Creating a dialog box for a custom server behavior” on page 794.
5.
(Optional) If you want, change where the code block is inserted in the page’s HTML code
by choosing another option in the Insert Code pop-up menu.
For instructions, see “Positioning code blocks” on page 792.
Editing and modifying server behaviors
797
6.
If the modified code does not contain any designer-supplied parameters, click OK.
Dreamweaver regenerates the server behavior without a dialog box. The new server
behavior appears in the Plus (+) pop-up menu of the Server Behaviors panel.
7.
If the modified code does contain designer-supplied parameters, click Next.
Dreamweaver asks you whether you want to create a new dialog box, overwriting the old
one. Make your changes and click OK.
Dreamweaver saves all changes in the server behavior’s EDML file.
798
Chapter 38: Adding Custom Server Behaviors
39
CHAPTER 39
Creating Forms
You can use Macromedia Dreamweaver 8 to create forms with text fields, password fields,
radio buttons, checkboxes, pop-up menus, clickable buttons, and other form objects.
Dreamweaver can also write code that validates the information a visitor provides. For
example, you can check that an e-mail address a user enters contains an “@” symbol, or that a
required text field contains a value.
This chapter contains the following sections:
About forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .799
Creating HTML forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 803
Inserting HTML form objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 805
Inserting dynamic HTML form objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 810
Validating HTML form data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 814
Attaching JavaScript behaviors to HTML form objects . . . . . . . . . . . . . . . . . . . . . . 815
Attaching custom scripts to HTML form buttons . . . . . . . . . . . . . . . . . . . . . . . . . . . . 815
Creating accessible HTML forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 816
Related topics
■
“Building ColdFusion MX 7 forms” on page 827
■
“Building ASP.NET forms” on page 893
About forms
Forms let you obtain information from visitors to your website. Visitors enter information
using form objects such as text fields, list boxes, checkboxes, and radio buttons, and then click
a button to submit the information.
799
Client-side role of forms
Forms support the client side of the client-server relationship. When a visitor enters
information into a form displayed in a web browser (the client) and clicks the submit button,
the information is sent to the server where a server-side script or application processes it.
Common server-side technologies used for processing form data include Macromedia
ColdFusion, Microsoft Active Server Pages (ASP), and PHP. The server responds by sending
requested information back to the user (or client), or performing some action based on the
form’s contents.
3 A new HTML document is
created and sent to the visitor
2 CF script
processes
the form
1 Visitor completes form
and submits it to a Web
server for processing
N O TE
You can also send form data directly to an e-mail recipient.
Form objects
In Dreamweaver, form input types are called form objects. Form objects are the mechanisms
that allow users to input data. You can add the following form objects to a form:
800
Chapter 39: Creating Forms
Text fields
accept any type of alphanumeric text entry. The text can be displayed as a single
line, multiple lines, and as a password field where entered text is replaced by asterisks or
bullets to hide the text from onlookers.
NO TE
Passwords and other information sent to a server using a password field are not
encrypted. The transferred data can be intercepted and read as alphanumeric text. For
this reason, you should always provide encryption for data you want to keep secure.
Hidden fields
store information entered by a user, such as a name, e-mail address, or viewing
preference, and then use that data when the user next visits the site.
Buttons perform actions when clicked. Typically these actions include submitting or resetting
a form. You can add a custom name or label for a button, or use one of the predefined
“Submit” or “Reset” labels.
Checkboxes
allow multiple responses within a single group of options. A user can select as
many options as apply. The example below illustrates this by showing three checkbox items
selected: Surfing, Mountain Biking, and Rafting.
About forms
801
Radio buttons represent exclusive choices. Selecting a button within a radio button group
deselects all others in the group (a group consists of two or more buttons that share the same
name). In the example below, Rafting is the currently selected option. If the user clicks Surfing,
the Rafting button is automatically cleared.
List menus
display option values within a scrolling list that allows users to select multiple
options. The Menu option displays the option values in a menu that allows users to select
only a single item.
NO T E
A pop-up menu on an HTML form is not the same as a graphical pop-up menu. For
information on creating, editing, and showing and hiding a graphical pop-up menu, see
“Show Pop-Up Menu” on page 520.
Jump menus are navigational lists or pop-up menus that let you insert a menu in which each
option links to a document or file.
File fields
let users browse to a file on their computer and upload the file as form data.
Image fields let you insert an image in a form. Image fields can be used to make graphical
buttons such as Submit or Reset buttons.
Related topics
■
“Creating HTML forms” on page 803
■
“Inserting HTML form objects” on page 805
Dynamic form objects
A dynamic form object is a form object whose initial state is determined by the server when
the page is requested from the server, not by the form designer at design time. For example,
when a user requests a PHP page containing a form with a menu, a PHP script in the page
automatically populates the menu with values stored in a database. The server then sends the
completed page to the user’s browser.
802
Chapter 39: Creating Forms
Making form objects dynamic can simplify site maintenance. For example, many sites use
menus to present users with a set of options. If the menu is dynamic, you can add, remove, or
change menu items in a single place—the database table in which the items are stored—to
update all instances of the same menu on the site.
A menu is not the only type of dynamic form object. You can also create and use dynamic
radio buttons, checkboxes, text fields, and image fields.
Related topics
■
“Inserting HTML form objects” on page 805
■
“Inserting dynamic HTML form objects” on page 810
Creating HTML forms
This section describes how to create HTML forms in Dreamweaver.
You can also use Dreamweaver to create ASP.NET web forms. For more information, see
“Building ASP.NET forms” on page 893.
To create an HTML form:
1.
Open a page and place the insertion point where you want the form to appear.
2.
Select Insert > Form, or select the Forms category in the Insert bar and click the Form icon.
Dreamweaver inserts an empty form. With a page in Design view, forms are indicated by a
dotted red outline. If you don’t see this outline, check that View > Visual Aids > Invisible
Elements is selected.
Creating HTML forms
803
3.
Specify the page or script that will process the form data.
In the Document window, click the form outline to select the form. In the Property
inspector (Window > Properties), type the path in the Property inspector’s Action text
box, or click the folder icon to navigate to the appropriate page or script.
4.
Specify the method to use to transmit the form data to the server.
In the Property inspector, select one of the following options in the Method pop-up
menu:
Default uses the browser’s default setting to send the form data to the server. Typically the
default is the GET method.
GET
appends the value to the URL requesting the page.
POST
embeds the form data in the HTTP request.
For more information, click the Help icon in the Property inspector.
5.
Insert form objects.
Place the insertion point where you want the form object to appear in the form, and then
select the object in the Insert > Form menu, or in the Forms category of the Insert bar.
For more information, see “Inserting HTML form objects” on page 805 or “Inserting
dynamic HTML form objects” on page 810.
If desired, set the properties of the form object after inserting it in the page. For more
information, select the form object and click the Help icon in the Property inspector.
6.
Adjust the layout of the form as desired.
You can use line breaks, paragraph breaks, preformatted text, or tables to format your
forms. You cannot insert a form in another form (that is, you cannot overlap tags), but
you can include more than one form in a page.
When designing forms, remember to label the form fields with descriptive text to let users
know what they’re responding to—for example, “Type your name” to request
name information.
Use tables to provide structure for form objects and field labels. When using tables in
forms make sure all the table tags are included between the form tags.
804
Chapter 39: Creating Forms
Related topics
■
“Validating HTML form data” on page 814
■
“Attaching JavaScript behaviors to HTML form objects” on page 815
■
“Attaching custom scripts to HTML form buttons” on page 815
■
“Creating accessible HTML forms” on page 816
Inserting HTML form objects
You can use Dreamweaver to quickly insert HTML form objects into your forms.
If you’re working on an ASP.NET web application, you can use Dreamweaver to quickly
insert ASP.NET form controls. For more information, see “Adding ASP.NET form controls to
a page” on page 893.
You can create a blank HTML form (Insert > Form > Form) before inserting form objects in
it. For more information, see “Creating HTML forms” on page 803. If you don’t create a
blank form and attempt to insert a form object, Dreamweaver will ask you if you want to
create one.
Inserting HTML text fields
You can create a text field that consists of one line or multiple lines. You can also create a
password text field that hides the text the user enters.
To insert a text field:
1.
Place the insertion point inside the form outline.
2.
Select Insert > Form > Text Field.
A text field appears in the document.
3.
In the Property inspector, set the text field properties as desired.
For more information, click the Help icon in the Property inspector.
4.
To label the text field on the page, click beside the text field and type the label.
Related topics
■
“Validating HTML form data” on page 814
■
“Displaying dynamic content in HTML text fields” on page 812
■
“Form objects” on page 800
Inserting HTML form objects
805
Inserting HTML checkboxes
Use HTML checkboxes when you want to let users select more than one option from a set
of options.
NO T E
Use radio buttons when you want users to select only one choice from a set of options.
For more information, see “Inserting HTML radio buttons” on page 806.
To insert a checkbox:
1.
Place the insertion point inside the form outline.
2.
Select Insert > Form > Check Box.
A checkbox appears in the document.
3.
In the Property inspector, set the checkbox properties as desired.
For more information, click the Help icon in the Property inspector.
4.
To label the checkbox, click beside the checkbox on the page and type the label text.
Related topics
■
“Dynamically preselecting HTML checkboxes” on page 812
Inserting HTML radio buttons
Use HTML radio buttons when you want users to select only one choice from a set of
options. Radio buttons are typically used in groups. All radio buttons in a group must have
the same name.
N OT E
Use checkboxes when you want let users select more than one option. For more
information, see “Inserting HTML checkboxes” on page 806.
To insert a group of radio buttons:
1.
Place the insertion point inside the form outline.
2.
Select Insert > Form > Radio Group.
The Radio Group dialog box appears.
3.
Complete the Radio Group dialog box and click OK.
For instructions on completing the Radio Group dialog box, click the Radio Group dialog
box’s Help button.
806
Chapter 39: Creating Forms
Dreamweaver inserts the radio button group within the HTML form. If you haven’t inserted
a form on your page yet, Dreamweaver inserts one for you. If you want, you can change the
layout of the group. You can also edit the radio buttons using the Property inspector or
directly in Code view.
To insert radio buttons one at a time:
1.
Place the insertion point inside the form outline.
2.
Insert a radio button by selecting Insert > Form > Radio Button.
A radio button appears in the document.
3.
In the Property inspector, set the radio button properties as desired.
For more information, click the Help icon in the Property inspector.
4.
To label the radio button, click beside the radio button on the page and type the label text.
Related topics
■
“Dynamically preselecting HTML radio buttons” on page 813
Inserting HTML form menus
An HTML form menu lets a visitor select one or more items from a list. Menus are useful
when you have a limited amount of space, but need to display many items. They’re also useful
when you want to control the values returned to the server. Unlike text fields where users can
type anything they want, including invalid data, you set the exact values returned by a menu.
You can insert two types of menus in a form: a menu that drops down when the user clicks it
or a menu that displays a scrollable list of items that can be selected. This type is called a list
menu.
To insert a menu:
1.
Place the insertion point inside the form outline.
2.
Select Insert > Form > List/Menu.
A menu appears in the document.
3.
In the Property inspector, set the menu properties as desired.
For more information, click the Help icon in the Property inspector.
Related topics
■
“Creating a dynamic HTML form menu” on page 810
■
“Making existing HTML form menus dynamic” on page 811
Inserting HTML form objects
807
Inserting standard buttons
Buttons control form operations. Use a button to submit form data to the server or to reset
the form. Standard form buttons are typically labeled Submit, Reset, or Send. You can also
assign other processing tasks that you’ve defined in a script. For example, the button might
calculate the total cost of items selected based on assigned values.
To create a button:
1.
Place the insertion point inside the form outline.
2.
Select Insert > Form > Button.
A button appears in the form.
3.
In the Property inspector, set the button properties as desired.
For more information, click the Help icon in the Property inspector.
Inserting image buttons
You can use images as button icons. Using an image to perform tasks other than submitting
data requires attaching a behavior to the form object.
To create an image button:
1.
In the document, place the insertion point inside the form outline.
2.
Select Insert > Form > Image Field.
The Image Source dialog box appears.
3.
Select the image for the button in the Select Image Source dialog box and click OK.
A image field appears in the form.
4.
In the Property inspector, set the image field properties as desired.
To create a submit button, enter Submit in the Image Field text box in the Property
inspector.
For more information, click the Help icon in the Property inspector.
5.
To attach a JavaScript behavior to the button, select the image and then select the behavior
in the Behaviors panel (Window > Behaviors).
For more information, “Attaching JavaScript behaviors to HTML form objects”
on page 815 and “Attaching custom scripts to HTML form buttons” on page 815.
Related topics
■
“Inserting standard buttons” on page 808
808
Chapter 39: Creating Forms
Inserting hidden fields
You can use hidden fields to store and submit information not entered by the user. The
information is hidden from the user.
To create a hidden field:
1.
In Design view, place the insertion point inside the form outline.
2.
Select Insert > Form > Hidden Field.
A marker appears in the document. If you don’t see a marker, select View > Visual Aids >
Invisible Elements to see the marker.
3.
In the Property inspector’s HiddenField text box, type a unique name for the field.
4.
In the Value text box, type the value you want to assign to the field.
Inserting file-upload fields
You can create a file-upload field that lets users select a file on their computer—such as a word
processing document or graphics file—and upload the file to the server. A file field looks like
other text fields except it also contains a Browse button. The user either manually enters the
path to the file they want to upload, or uses the Browse button to locate and select the file.
Before you can use file-upload fields, you need a server-side script or a page capable of
handling file submissions. Consult the documentation of the server technology you use to
process form data. For example, if you use PHP, see “Handling files uploads” in the PHP
Manual at http://us2.php.net/manual/en/features.file-upload.php.
File fields require that you use the POST method to transmit files from the browser to the
server. The file is posted to the address you specify in the form’s Action text box.
N OT E
Contact your server’s administrator to confirm that anonymous file uploads are allowed
before using the file field.
To create a file field in a form:
1.
Insert a form in the page (Insert > Form).
2.
Select the form to display its Property inspector.
3.
Set the form Method to POST.
4.
From the Enctype pop-up menu, select multipart/form-data.
5.
In the Action text box, specify the server-side script or page capable of handling the
uploaded file.
Inserting HTML form objects
809
6.
Place the insertion point inside the form outline and select Insert > Form > File Field.
A file field is inserted within the form.
7.
In the Property inspector, set the file field properties as desired.
For more information, click the Help icon in the Property inspector.
Inserting dynamic HTML form objects
You can insert HTML form objects whose initial state is determined by the server when the
page is requested from the server, not by the form designer at design time.
Related topics
■
“Dynamic form objects” on page 802
■
“Building ASP.NET forms” on page 893
■
“Building ColdFusion MX 7 forms” on page 827
Creating a dynamic HTML form menu
You can dynamically populate an HTML form menu or list menu with entries from a
database.
For most pages, you can use an HTML menu object. For ASP.NET pages, you must use a
DropDownList or ListBox form control. For more information, see “Building ASP.NET
forms” on page 893.
Before you begin, you must insert an HTML form in a ColdFusion, PHP, ASP, or JSP page,
and you must define a recordset or other source of dynamic content for the menu. For more
information, see “Defining a recordset” on page 691.
To insert a dynamic HTML form menu:
1.
Click inside the HTML form on your page.
2.
Select Insert > Form > List/Menu.
Dreamweaver inserts a List/Menu form object into the page.
3.
Select the List/Menu form object.
The Property inspector displays the List/Menu properties.
810
Chapter 39: Creating Forms
4.
In the Property inspector, click the Dynamic button to display the Dynamic List/Menu
dialog box.
5.
Complete the dialog box and click OK.
For more information, click the Help button on the dialog box.
Making existing HTML form menus dynamic
You can make an existing HTML form menu or list menu dynamic.
This section deals with HTML form objects. For ASP.NET menu objects such as
DropDownList or ListBox controls, see “Making an existing ASP.NET menu dynamic”
on page 895.
Before you begin, you must create the form in a ColdFusion, PHP, ASP, or JSP page, and you
must define a recordset or other source of dynamic content for the menu. For more
information, see “Defining a recordset” on page 691.
To make an existing HTML form menu dynamic:
1.
In Design view, select the list/menu form object you want to make dynamic.
2.
In Property inspector, click the Dynamic button.
The Dynamic List/Menu dialog box appears.
3.
Complete the dialog box and click OK.
For instructions, click the Help button in the dialog box.
Inserting dynamic HTML form objects
811
Related topics
■
“Creating a dynamic HTML form menu” on page 810
Displaying dynamic content in HTML text fields
You can display dynamic content in HTML text fields.
For ASP.NET pages, you must use the ASP.NET TextBox control. For more information,
see “Displaying dynamic content in an ASP.NET TextBox control” on page 895.
Before you begin, you must create the form in a ColdFusion, PHP, ASP, or JSP page, and you
must define a recordset or other source of dynamic content for the text field. For more
information, see “Defining a recordset” on page 691.
To make HTML text fields dynamic:
1.
Select the text field in the HTML form on your page.
2.
In the Property inspector, click the lightning bolt icon beside the Init Val text box.
The Dynamic Data dialog box appears.
3.
Select the recordset column that will supply a value to the text field, then click OK.
The text field will display the dynamic content when the form is viewed in a browser.
Dynamically preselecting HTML checkboxes
You can let the server decide whether to select a checkbox when the form is displayed in
a browser.
For ASP.NET pages, you must use the ASP.NET CheckBox control. For more information,
see “Dynamically preselecting ASP.NET CheckBox controls” on page 896.
Before you begin, you must create the form in a ColdFusion, PHP, ASP, or JSP page, and you
must define a recordset or other source of dynamic content for the checkboxes. For more
information, see “Defining a recordset” on page 691. Ideally, the source of content should
contain Boolean data, such as Yes/No or true/false.
812
Chapter 39: Creating Forms
To dynamically preselect an HTML checkbox:
1.
Select a checkbox form object on your page.
2.
In the Property inspector, click the Dynamic button.
The Dynamic CheckBox dialog box appears.
3.
Complete the dialog box and click OK.
For instructions, click the Help button in the dialog box.
The checkbox will appear selected or not selected, depending on the data when the form is
viewed in a browser.
Dynamically preselecting HTML radio buttons
You can let the server decide whether to select an HTML radio button when the form is
displayed in a browser.
If you want to dynamic preselect ASP.NET radio button objects such as RadioButton or
RadioButtonList controls, see “Dynamically preselecting an item in an ASP.NET
RadioButtonList” on page 897.
Before you begin, you must create the form in a ColdFusion, PHP, ASP, or JSP page, and
insert at least one group of HTML radio buttons (see “Inserting HTML radio buttons”
on page 806). You must also define a recordset or other source of dynamic content for the
radio buttons. For more information, see “Defining a recordset” on page 691. Ideally, the
source of content should contain Boolean data, such as Yes/No or true/false.
To dynamically preselect an HTML radio button:
1.
In Design view, select a radio button in the group.
2.
In the Property inspector, click the Dynamic button.
The Dynamic Radio Group dialog box appears.
3.
Complete the dialog box and click OK.
For instructions, click the Help button in the dialog box.
Inserting dynamic HTML form objects
813
Validating HTML form data
Dreamweaver can add JavaScript code that checks the contents of specified text fields to
ensure that the user has entered the correct type of data.
This section applies to HTML forms. You can also build ColdFusion forms in Dreamweaver
that validate the contents of specified fields. For more information, see “Validating
ColdFusion form data” on page 838. For ASP.NET forms, you can insert ASP.NET validation
controls in Code view. For more information, consult the ASP.NET documentation.
To validate HTML form data:
1.
Create a HTML form that includes at least one text field and one Submit button.
Make sure every text field you want to validate has a unique name.
2.
Select the Submit button.
3.
In the Behaviors panel (Window > Behaviors), click the Plus (+) button and select the
Validate Form behavior from the list.
The Validate Form dialog box appears.
NO TE
4.
The Validate Form behavior is available only if a text field has been inserted into
the document.
Set the validation rules for each text field and click OK.
For example, you might specify that a text field for a person’s age accepts only numbers.
For more information, see “Validate Form” on page 526.
Related topics
■
Chapter 18, “Using JavaScript Behaviors,” on page 493
■
814
“Validating ColdFusion form data” on page 838
Chapter 39: Creating Forms
Attaching JavaScript behaviors to HTML
form objects
You can attach JavaScript behaviors stored in Dreamweaver to HTML form objects such as
buttons.
N OT E
This feature does not work with ASP.NET form controls because these controls are
processed on the server.
To attach a JavaScript behavior to an HTML form object:
1.
Select the HTML form object.
2.
In the Behaviors panel (Window > Behaviors), click the Plus (+) button and select a
behavior from the list.
For more information, see Chapter 18, “Using JavaScript Behaviors,” on page 493.
Attaching custom scripts to HTML form
buttons
Some forms use JavaScript or VBScript to perform form processing or some other action on
the client as opposed to sending the form data to the server for processing. You can use
Dreamweaver to configure a form button to run a specific client-side script when the user
clicks the button.
N OT E
This feature does not work with ASP.NET forms.
To run a script on the client:
1.
Select a Submit button in a form.
2.
In the Behaviors panel (Window > Behaviors), click the Plus (+) button and select Call
JavaScript from the list.
For more information on this behavior, see “Call JavaScript” on page 500.
3.
In the Call JavaScript text box that appears, enter the name of the JavaScript function you
want to run when the user clicks the button, and click OK.
For example, you can enter the name of a function that doesn’t exist yet, such as
processMyForm().
Attaching custom scripts to HTML form buttons
815
4.
If your JavaScript function doesn’t exist in the head section of the document yet, add it
now.
For example, you could define the following JavaScript function in the head section of the
document to display a message when the user clicks the Submit button.
function processMyForm(){
alert('Thanks for your order!');
}
Creating accessible HTML forms
When you insert an HTML form object and you’ve selected the Form Object option in
Accessibility preferences, Dreamweaver prompts you to enter information to make the form
object accessible. You can also change accessibility attributes after inserting the object.
To add an accessible form object:
1.
The first time you add accessible form objects, activate the Accessibility dialog box for form
objects (see “Optimizing the workspace for accessible page design” on page 69).
This is a one-time-only step.
2.
In the document, place the insertion point where you want the form object to appear.
3.
Select Insert > Form and select a form object to insert.
The Input Tag Accessibility Attributes dialog box appears.
816
Chapter 39: Creating Forms
4.
Complete the dialog box.
For more information, click the Help button in the dialog box.
5.
Click OK.
NO T E
6.
If you press Cancel, the form object appears in the document, but Dreamweaver
does not associate accessibility tags or attributes with it.
If Dreamweaver asks if you want to insert a form tag, click Yes.
The form object appears in the document.
To edit accessibility values for a form object:
1.
In the Document window, select the object.
2.
Do one of the following:
■
Edit the appropriate attributes in Code view.
■
Right-click (Windows) or Control-click (Macintosh), then select Edit Tag.
RadioButton3
Creating accessible HTML forms
817
818
Chapter 39: Creating Forms
PART 8
Developing Applications
Rapidly
8
Web applications often feature pages that let users search a database; pages
that let users insert, update, or delete data in a database; and pages that
restrict access to a website. You can quickly build any of these pages with
Macromedia Dreamweaver 8.
This part contains the following chapters:
Chapter 40: Building ColdFusion Applications Rapidly . . . . . . . 821
Chapter 41: Building ASP.NET Applications Rapidly. . . . . . . . . 893
Chapter 42: Building ASP and JSP Applications Rapidly . . . . 935
Chapter 43: Building PHP Applications Rapidly. . . . . . . . . . . . . 957
819
CHAPTER 40
40
Building ColdFusion
Applications Rapidly
You can use the tools in Macromedia Dreamweaver 8 to build a ColdFusion web application
rapidly, and with little or no coding.
About rapid application development (all
servers)
Rapid application development (RAD) is a software development process designed to make
building applications easier and faster. RAD tools typically handle the details of a software
project much like computer-assisted-design (CAD) tools take care of the details of drawing a
wall or inserting a window in a building plan.
Dreamweaver is a RAD tool for website designers as well as web application developers. You
can use Dreamweaver to build pages that search, insert, update, or delete records in a
database. Dreamweaver handles the details of creating the pages; little or no coding is required
from the developer. (Dreamweaver also provides a full-featured coding environment for
developers who like to code all or part of their pages.)
821
About master/detail pages
A master page is a page that lists records and corresponding links for each record. When the
user clicks a link, a detail page opens displaying more information about the record. For
example, here’s a master page from a fictional company.
822
Chapter 40: Building ColdFusion Applications Rapidly
When a user clicks one of the linked location names, a detail page opens:
A results page is a common type of master page. However, unlike the master page described in
this section, the list of records on a results page is determined not by you, the designer, but by
the user. (The user determines the list by conducting a database search.) For more information
on this type of master page, see “About search/results pages” on page 823.
A detail page can also be used to update or delete the record displayed.
Related topics
■
“Building master/detail pages (ColdFusion)” on page 838
■
“Building master/detail pages (ASP.NET)” on page 902
■
“Building master/detail pages (ASP and JSP)” on page 935
■
“Building master/detail pages (PHP)” on page 957
About search/results pages
In most cases, you need at least two pages to add this feature to your web application. The
first page is a page containing an HTML form in which users enter search parameters.
Although this page doesn’t do any actual searching, it is referred to as “the search page.”
About rapid application development (all servers)
823
The second page you need is the results page, which performs most of the work. The result’s
page does the following tasks:
■
Reads the search parameters submitted by the search page
■
Connects to the database and search for records
■
Builds a recordset with the records found
■
Displays the contents of the recordset
Optionally, you can add a detail page. A detail page gives users more information about a
particular record on the results page.
If you use ASP.NET, you can combine both the search page and the results page into one
page.
If you have only one search parameter, Dreamweaver lets you add search capabilities to your
web application without using SQL queries and variables. Simply design your pages and
complete a few dialog boxes. If you have more than one search parameter, you need to write a
SQL statement and define multiple variables for it.
Dreamweaver inserts the SQL query in your page. When the page runs on the server, each
record in the database table is checked. If the specified field in a record meets your SQL query
conditions, the record is included in a recordset. The SQL query in effect builds a recordset
containing only the search results.
For example, field sales staff might have information about customers in a certain area have
incomes above a certain level. In a form on a search page, the sales associate enters a
geographical area and a minimum income level, and then clicks the Submit button to send
the two values to a server. On the server, the values are passed to the results page’s SQL
statement, which then creates a recordset containing only customers in the specified area with
incomes above the specified level.
Related topics
“Building search/results pages (ColdFusion, ASP, JSP, PHP)” on page 847
■
■
“Building a database search page (ASP.NET)” on page 909
About advanced database manipulation objects
Though you can use server behaviors to build pages that modify databases, you can also use
database manipulation objects such as stored procedures, ASP command objects, or JSP
prepared statements to build the pages.
824
Chapter 40: Building ColdFusion Applications Rapidly
Stored procedures
A stored procedure is a reusable database item that performs some operation on the database.
A stored procedure contains SQL code that can, among other things, insert, update, or delete
records. Stored procedures can also alter the structure of the database itself. For example, you
can use a stored procedure to add a table column or even delete a table.
A stored procedure can also call another stored procedure, as well as accept input parameters
and return multiple values to the calling procedure in the form of output parameters.
A stored procedure is reusable in the sense that you can reuse a single compiled version of the
procedure to execute a database operation a number of times. If you know a database task will
be executed more than a few times—or the same task will be executed by different
applications—using a stored procedure to execute that task can make database operations
more efficient.
N OT E
MySQL and Microsoft Access databases do not support stored procedures.
Related topics
■
“Using stored procedures to modify databases (ColdFusion)” on page 872
■
“Using stored procedures to modify databases (ASP.NET)” on page 932
■
“Using stored procedures to modify databases (ASP and JSP)” on page 949
ASP command objects
An ASP command object is a server object that performs some operation on a database. The
object can contain any valid SQL statement, including one that returns a recordset, or one
that inserts, updates, or deletes records in a database. A command object can alter the
structure of a database if the SQL statement adds or deletes a column in a table. You can also
use a command object to run a stored procedure in a database.
A command object can be reusable, in the sense that the application server can reuse a single
compiled version of the object to execute the command a number of times. You make a
command reusable by setting the Prepared property of the Command object to true, as in the
following VBScript statement:
mycommand.Prepared = true
About rapid application development (all servers)
825
If you know the command will be executed more than a few times, having a single compiled
version of the object can make database operations more efficient.
NO T E
Not all database providers support prepared commands. If your database does not
support it, it might return an error when you set this property to true. It might even ignore
the request to prepare the command and set the Prepared property to false.
A command object is created by scripts on an ASP page, but Dreamweaver lets you create
command objects without writing a line of ASP code. For more information, see “Using ASP
commands to modify a database” on page 951.
JSP prepared statements
A JSP prepared statement is a reusable server object that contains a SQL statement. You can
place any valid SQL statement in a prepared statement. For example, a prepared statement
can contain a SQL statement that returns a recordset, or one that inserts, updates, or deletes
records in a database.
A prepared statement is reusable in the sense that the application server uses a single instance
of the prepared statement object to query the database a number of times. Unlike the JSP
statement object, a new instance of the prepared statement object is not created for each new
database query. If you know the statement will be executed more than a few times, having a
single instance of the object can make database operations more efficient and take up less
server memory.
A prepared statement object is created by a Java scriptlet on a JSP page. However,
Dreamweaver lets you create prepared statements without writing a single line of Java code.
If you’re interested in the code, the following scriptlet creates a prepared statement:
String myquery = “SELECT * FROM EMPLOYEES WHERE DEPARTMENT = ?”;
PreparedStatement mystatement = connection.prepareStatement(myquery);
The first line stores the SQL statement in a string variable called myquery, with a question
mark serving as a placeholder for the SQL variable value. The second line creates a prepared
statement object called mystatement.
Next, you assign a value to the SQL variable, as follows:
mystatement.setString(1, request.getParameter(“myURLparam”));
826
Chapter 40: Building ColdFusion Applications Rapidly
The setString method assigns the value to the variable and takes two arguments. The first
argument specifies the affected variable by its position (here, the first position in the SQL
statement). The second argument specifies the variable’s value. In this example, the value is
provided by a URL parameter passed to the page.
N OT E
You must use different methods to assign non-string values to SQL variables. For
example, to assign an integer to the variable, you would use the mystatement.setInt()
method.
Finally, you generate the recordset, as follows:
ResultSet myresults = mystatement.execute();
For more information on how to create JSP prepared statements using rapid application
development (RAD) tools in Dreamweaver, see “Using JSP prepared statements to modify a
database” on page 953.
Building ColdFusion MX 7 forms
Dreamweaver provides a number of enhancements for ColdFusion developers who use
ColdFusion MX 7 or later as their development server. These enhancements include more
Insert bar buttons, menu items, and Property inspectors so that you can rapidly build and set
the properties of ColdFusion forms. You can also use Dreamweaver to generate code that
validates the information provided by site visitors. For example, you can check that the e-mail
address provided by a user contains the @ symbol, or that a required text field contains a
certain type of value.
These enhancements are only available if you have access to a computer running ColdFusion
MX 7 or later.
This section covers the following topics:
■
“Enabling the ColdFusion enhancements” on page 828
■
“Creating ColdFusion forms” on page 829
■
“Inserting ColdFusion form controls” on page 830
■
“Setting the properties of ColdFusion form controls visually” on page 837
■
“Validating ColdFusion form data” on page 838
Building ColdFusion MX 7 forms
827
Enabling the ColdFusion enhancements
Dreamweaver provides a number of enhancements for ColdFusion developers. Some of these
enhancements require that you define a computer running ColdFusion MX 7 or later as a
testing server for Dreamweaver. For example, the new Property inspectors for form controls
are available only if you specify the correct testing server.
You need only define a testing server once. Dreamweaver then automatically detects the
testing server version and makes the enhancements available if it detects ColdFusion MX 7.
To enable the enhancements for ColdFusion developers:
1.
If you haven’t already done so, define a Dreamweaver site for your ColdFusion project.
For more information, see Chapter 2, “Setting Up a Dreamweaver Site,” on page 79.
2.
Open the Advanced Site Definition dialog box by selecting Site > Manage Sites, selecting
your site from the list, and clicking Edit.
If the Basic Site Definition dialog box appears, click the Advanced tab to switch to the
advanced version.
3.
Select the Testing Server category and specify a computer running ColdFusion MX 7 or
later as the testing server for your Dreamweaver site.
Make sure you specify a valid URL prefix.
For more information, see “Specifying where dynamic pages can be processed”
on page 608.
4.
Open any ColdFusion document.
You won’t see any visible changes to the Dreamweaver workspace until you open a
ColdFusion document.
Related topics
■
“Creating ColdFusion forms” on page 829
■
“Securing a folder in your application (ColdFusion)” on page 884
■
“Viewing ColdFusion components in Dreamweaver” on page 886
■
“Defining a recordset in a ColdFusion component” on page 890
■
“Using a CFC recordset as a source of dynamic content” on page 890
■
“Creating or modifying a ColdFusion data source” on page 612
828
Chapter 40: Building ColdFusion Applications Rapidly
Creating ColdFusion forms
You can use a number of Insert bar buttons, menu items, and Property inspectors to rapidly
create ColdFusion forms and set their properties in Dreamweaver.
These enhancements are only available if you have access to a computer running ColdFusion
MX 7 or later. For more information, see “Enabling the ColdFusion enhancements”
on page 828.
To create a ColdFusion form:
1.
Open a ColdFusion page and place the insertion point where you want the ColdFusion
form to appear.
2.
Select Insert > ColdFusion Objects > CFForm > CFForm, or select the CFForm category
from the Insert bar and click the CF Form icon.
Dreamweaver inserts an empty ColdFusion form. In Design view, the form is indicated by
a dotted red outline. If you don’t see this outline, make sure that View > Visual Aids >
Invisible Elements is selected.
3.
Make sure the form is still selected and then use the Property inspector to specify the page
or script that will process the form data.
In the Property inspector, type the path of the page or script in the Action text box, or
click the folder icon beside the text box and navigate to the page or script.
If you don’t see the Action text box in the Property inspector, click the form outline in the
Document window to select the form.
4.
In the Method pop-up menu, select the method you want to use to transmit the form data
to the server:
Default uses the browser’s default setting to send the form data to the server. Typically, the
default is the get method.
GET
appends the value to the URL requesting the page.
POST
embeds the form data in the HTTP request.
For more information, click the Help icon on the Property inspector.
5.
Insert ColdFusion form controls.
Place the insertion point where you want the ColdFusion form control to appear in the
ColdFusion form, and then select the control from the Insert menu (Insert > ColdFusion
Objects > CFForm), or from the CFForm category in the Insert bar.
For more information, see “Inserting ColdFusion form controls” on page 830.
Building ColdFusion MX 7 forms
829
6.
If required, set the properties of the control with the Property inspector.
Make sure the control is selected in Design view and then set the properties in the
Property inspector. For more information on the properties, click the Help icon in the
Property inspector.
7.
Adjust the layout of the ColdFusion form.
If you’re creating an HTML-based form, you can use line breaks, paragraph breaks,
preformatted text, or tables to format your forms. You cannot insert a ColdFusion form in
another ColdFusion form (that is, you cannot overlap tags), but you can include more
than one ColdFusion form in a page.
If you’re creating a Flash-based form, use CSS styles to lay out your form. ColdFusion
ignores any HTML in the form.
Remember to label the ColdFusion form fields with descriptive text to let users know
what they are responding to. For example, create a “Type your name label” to request
name information.
Related topics
■
“Validating ColdFusion form data” on page 838
Inserting ColdFusion form controls
You can use the Insert bar or Insert menu to quickly insert ColdFusion form controls into a
ColdFusion form.
These enhancements are only available if you have access to a computer running ColdFusion
MX 7 or later. For more information, see “Enabling the ColdFusion enhancements”
on page 828.
You should create a blank ColdFusion form before inserting controls in it. For more
information, see “Creating ColdFusion forms” on page 829. If you don’t create a blank form
and attempt to insert a control, Dreamweaver asks you if you want to create one.
This section contains the following topics:
■
“Inserting ColdFusion text fields” on page 831
■
“Inserting ColdFusion hidden fields” on page 831
■
“Inserting ColdFusion text areas” on page 832
■
“Inserting ColdFusion buttons” on page 833
■
“Inserting ColdFusion checkboxes” on page 833
830
Chapter 40: Building ColdFusion Applications Rapidly
■
“Inserting ColdFusion radio buttons” on page 834
■
“Inserting ColdFusion select boxes” on page 834
■
“Inserting ColdFusion image fields” on page 835
■
“Inserting ColdFusion file fields” on page 836
Inserting ColdFusion text fields
You can visually insert a ColdFusion text field or password field into your form and then set
its properties.
This Dreamweaver enhancement is only available if you have access to a computer running
ColdFusion MX 7 or later. For more information, see “Enabling the ColdFusion
enhancements” on page 828.
To visually insert a ColdFusion text field:
1.
In Design view, place the insertion point inside the form outline.
2.
In the CFForm category of the Insert bar, click the CF Text Field icon.
A text field appears in the form.
3.
In the Property inspector, set the text field properties.
For more information, click the Help icon in the Property inspector.
4.
To label the text field on the page, click beside it and enter text for the label.
To visually insert a password field:
1.
Repeat steps 1 and 2 in the previous procedure for inserting a text field.
2.
Select the inserted text field to display its Property inspector.
3.
Select the value Password from the Text Mode pop-up menu in the Property inspector.
Related topics
■
“Validating ColdFusion form data” on page 838
■
“Setting the properties of ColdFusion form controls visually” on page 837
Inserting ColdFusion hidden fields
You can visually insert a ColdFusion hidden field into your form and set its properties. Use
hidden fields to store and submit information that the user does not enter. The information is
hidden from the user.
This Dreamweaver enhancement is only available if you have access to a computer running
ColdFusion MX 7 or later. For more information, see “Enabling the ColdFusion
enhancements” on page 828.
Building ColdFusion MX 7 forms
831
To visually insert a ColdFusion hidden field:
1.
In Design view, place the insertion point inside the form outline.
2.
In the CFForm category of the Insert bar, click the CF Hidden Field icon.
A marker appears in the ColdFusion form. If you don’t see the marker, select View >
Visual Aids > Invisible Elements.
3.
In the Property inspector, set the hidden field properties.
For more information, click the Help icon in the Property inspector.
Related topics
■
“Setting the properties of ColdFusion form controls visually” on page 837
Inserting ColdFusion text areas
You can visually insert a ColdFusion text area into your form and set its properties. A text area
is an input element that consists of multiple lines of text.
This Dreamweaver enhancement is only available if you have access to a computer running
ColdFusion MX 7 or later. For more information, see “Enabling the ColdFusion
enhancements” on page 828.
To visually insert a ColdFusion text area:
1.
Place the insertion point inside the form outline.
2.
In the CFForm category of the Insert bar, click the CF Text Area icon.
A text area appears in the ColdFusion form.
3.
In the Property inspector, set the text area properties.
For more information, click the Help icon in the Property inspector.
4.
To label the text area, click beside it and enter text for the label.
Related topics
■
“Validating ColdFusion form data” on page 838
■
“Setting the properties of ColdFusion form controls visually” on page 837
832
Chapter 40: Building ColdFusion Applications Rapidly
Inserting ColdFusion buttons
You can visually insert a ColdFusion button into your form and set its properties. ColdFusion
buttons control ColdFusion form operations. Buttons can be used to submit ColdFusion
form data to the server or to reset the ColdFusion form. Standard ColdFusion buttons are
typically labeled Submit, Reset, or Send. You can also assign other processing tasks that you
defined in a script. For example, the button might calculate the total cost of selected items
based on assigned values.
This Dreamweaver enhancement is only available if you have access to a computer running
ColdFusion MX 7 or later. For more information, see “Enabling the ColdFusion
enhancements” on page 828.
To visually insert a ColdFusion button:
1.
Place the insertion point inside the ColdFusion form outline.
2.
In the CFForm category of the Insert bar, click the CF Button icon.
A button appears in the ColdFusion form.
3.
In the Property inspector, set the button properties.
For more information, click the Help icon in the Property inspector.
Related topics
■
“Setting the properties of ColdFusion form controls visually” on page 837
Inserting ColdFusion checkboxes
You can visually insert a ColdFusion checkbox into your form and set its properties. Use
checkboxes to let users select more than one option from a set of options.
This Dreamweaver enhancement is only available if you have access to a computer running
ColdFusion MX 7 or later. For more information, see “Enabling the ColdFusion
enhancements” on page 828.
To visually insert a ColdFusion checkbox:
1.
Place the insertion point inside the form outline.
2.
In the CFForm category of the Insert bar, click the CF Checkbox icon.
A checkbox appears in the ColdFusion form.
3.
In the Properties panel, set the checkbox properties.
For more information, click the Help icon in the Property inspector.
4.
To label the checkbox, click next to the checkbox on the page and enter text for the label.
Building ColdFusion MX 7 forms
833
Related topics
■
“Setting the properties of ColdFusion form controls visually” on page 837
Inserting ColdFusion radio buttons
You can visually insert a ColdFusion radio button into your form and set its properties. Use
radio buttons when you want users to select only one choice from a set of options. Radio
buttons are typically used in groups. All radio buttons in a group must have the same name.
This Dreamweaver enhancement is only available if you have access to a computer running
ColdFusion MX 7 or later. For more information, see “Enabling the ColdFusion
enhancements” on page 828.
To visually insert ColdFusion radio buttons:
1.
Place the insertion point inside the form outline.
2.
In the CFForm category of the Insert bar, click the CF Radio Button icon.
A radio button appears in the ColdFusion form.
3.
In the Property inspector, set the radio button properties.
For more information, click the Help icon in the Property inspector.
4.
To label the radio button, click beside it on the page and enter text for the label.
Related topics
■
“Setting the properties of ColdFusion form controls visually” on page 837
Inserting ColdFusion select boxes
You can visually insert a ColdFusion select box into your form and set its properties. A select
box lets a visitor select one or more items from a list. Select boxes are useful when you have a
limited amount of space, but need to display many items. They’re also useful when you want
to control the values returned to the server. Unlike text fields, where users can type anything
they want, including invalid data, with select boxes, you can set the exact values returned by a
menu.
You can insert two types of select boxes into a form: a menu that “drops down” when the user
clicks it, or a menu that displays a scrollable list of items that the user can select.
This Dreamweaver enhancement is only available if you have access to a computer running
ColdFusion MX 7 or later. For more information, see “Enabling the ColdFusion
enhancements” on page 828.
834
Chapter 40: Building ColdFusion Applications Rapidly
To visually insert a ColdFusion select box:
1.
Place the insertion point inside the form outline.
2.
In the CFForm category of the Insert bar, click the CF Select icon.
A select box appears in the ColdFusion form.
3.
In the Property inspector, set the select box properties.
For more information, click the Help icon in the Property inspector.
Related topics
■
“Setting the properties of ColdFusion form controls visually” on page 837
Inserting ColdFusion image fields
You can visually insert a ColdFusion image field into your form and set its properties. Use
image fields to make custom buttons.
This Dreamweaver enhancement is only available if you have access to a computer running
ColdFusion MX 7 or later. For more information, see “Enabling the ColdFusion
enhancements” on page 828.
To visually insert a ColdFusion image field:
1.
In Design view, place the insertion point inside the form outline.
2.
In the CFForm category of the Insert bar, click the CF Image Field icon.
A dialog box prompts you to browse to the desired image. Select the image to insert and
click the OK button.
If the image is outside the site root folder, Dreamweaver asks you if you want to copy the
image to the root folder. Images outside the root folder might not be accessible when you
publish the site.
You can also type the path of the image file that you want to display in the Src text box in
the Property inspector.
3.
In the Property inspector, set the image field properties.
For more information, click the Help icon in the Property inspector.
Related topics
■
“Setting the properties of ColdFusion form controls visually” on page 837
Building ColdFusion MX 7 forms
835
Inserting ColdFusion file fields
You can visually insert a ColdFusion file field into your form and set its properties. Use a file
field to let users select a file from their computer, such as a word processing document or a
graphics file, and upload it to the server. A ColdFusion file field looks like other text fields,
except it also has a Browse button. Users can manually enter the path to the file they want to
upload, or use the Browse button to locate and select the file.
File fields require that you use the POST method to transmit files from the browser to the
server. The file is posted to the address that you specify in the form’s Action text box. Contact
your server administrator to confirm that anonymous file uploads are allowed before using a
file field in your form.
File fields also require that the form encoding be set to multipart/form. Dreamweaver sets this
automatically when you insert a file field control.
This Dreamweaver enhancement is only available if you have access to a computer running
ColdFusion MX 7 or later. For more information, see “Enabling the ColdFusion
enhancements” on page 828.
To visually insert a ColdFusion file field:
1.
In Design view, select the CFForm to display its Property inspector.
To quickly select the form, click anywhere in the form outline and click the tag
in the tag selector at the bottom of the Document window.
2.
In the Property inspector, set the form method to POST.
3.
From the Enctype pop-up menu, select multipart/form-data.
4.
Position the insertion point inside the form outline where you want to file field to appear.
5.
In the CFForm category of the Insert bar, click the CF File Field icon.
A file field appears in the document.
6.
In the Property inspector, set the file field properties.
For more information, click the Help icon in the Property inspector.
Related topics
■
“Setting the properties of ColdFusion form controls visually” on page 837
836
Chapter 40: Building ColdFusion Applications Rapidly
Inserting ColdFusion date fields
Although you can’t visually insert a ColdFusion date field in Dreamweaver, you can visually
set its properties. A ColdFusion date field is a special type of text field that lets users select a
date from a pop-up calendar to insert it in the text field.
This Dreamweaver enhancement is only available if you have access to a computer running
ColdFusion MX 7 or later. For more information, see “Enabling the ColdFusion
enhancements” on page 828.
To insert a ColdFusion date field and set its properties:
1.
In Design view, select the CFForm to display its Property inspector.
To quickly select the form, click anywhere in the form outline and click the tag
in the tag selector at the bottom of the Document window.
2.
In the Property inspector, set the form’s Format property to Flash.
The date field control can only be rendered in Flash-based ColdFusion forms.
3.
Switch to Code view (View > Code) and enter the following tag anywhere between the
opening and closing CFForm tags:
4.
In the Property inspector, set the date field properties.
For more information, click the Help icon in the Property inspector.
Setting the properties of ColdFusion form controls
visually
You can visually change the properties of ColdFusion form controls whether you’re working in
Design view or Code view.
This Dreamweaver enhancement is only available if you have access to a computer running
ColdFusion MX 7 or later. For more information, see “Enabling the ColdFusion
enhancements” on page 828.
To visually change the properties of a ColdFusion form control:
1.
In Design view, select the form control on the page; in Code view, click anywhere inside
the control’s tag.
The Property inspector displays properties of the form control.
2.
Change the control’s properties in the Property inspector.
For more information, click the Help icon in the Property inspector.
Building ColdFusion MX 7 forms
837
3.
To set more properties, click the Display Tag Editor button in the Property inspector and
set the properties in the Tag editor that appears.
Validating ColdFusion form data
You can build ColdFusion forms in Dreamweaver that check the contents of specified fields to
ensure the user entered the correct data type.
This Dreamweaver enhancement is only available if you have access to a computer running
ColdFusion MX 7 or later. For more information, see “Enabling the ColdFusion
enhancements” on page 828.
To validate ColdFusion form data:
1.
Create a ColdFusion form that includes at least one input field and one Submit button.
2.
Select a field in the form that you want to validate.
3.
In the Property inspector, specify how you want to validate the field.
Make sure that every ColdFusion field that you want to validate has a unique name.
The lower part of each input Property inspector contains controls to help you define the
specific validation rule. For example, you might want to specify that a text field should
contain a telephone number. To do this, you select Telephone from the Value pop-up menu in
the Property inspector. You can also specify when to validate from the Validate At pop-up
menu.
Building master/detail pages
(ColdFusion)
With Dreamweaver, you can create sets of pages that present information in two levels of
detail: a master page that lists records and a detail page that displays more detail about each
record. This section describes how to build these kinds of master/detail pages.
838
Chapter 40: Building ColdFusion Applications Rapidly
Building master/detail pages in one operation
(ColdFusion, ASP, JSP, PHP)
When developing web applications, you can quickly build master/detail pages using the
Master/Detail Page Set application object. An application object lets you build a complete set
of dynamic pages by completing only one or two dialog boxes.
The method you use is identical for ColdFusion, ASP, JSP, and PHP pages. For information
on building ASP.NET master/detail pages, see “Building master/detail pages (ASP.NET)”
on page 902.
To complete the master/detail page set with an application object:
1.
In Dreamweaver, create a blank dynamic page by selecting File > New > Dynamic, selecting
a dynamic page, and clicking Create.
This page will become the master page.
2.
Define a recordset for the page.
You can define a recordset at design time (see “Defining a recordset” on page 691) or the
user can define one at runtime (see “Building search/results pages (ColdFusion, ASP, JSP,
PHP)” on page 847).
Make sure the recordset contains not only all the columns you’ll need for the master page,
but also all the columns you’ll need for the detail page. Typically, the recordset on the
master page extracts a few columns from a database table while the recordset on the detail
page extracts more columns from the same table to provide the extra detail.
3.
Open the master page in Design view and select Insert > Application Objects >
Master Detail Page Set.
Building master/detail pages (ColdFusion)
839
The Master Detail Page Set dialog box appears.
4.
Complete the dialog box.
For more information, click the Help button in the dialog box.
5.
Click OK.
The application object creates a detail page (if you didn’t already create one) and adds
dynamic content and server behaviors to both the master and detail pages.
6.
Customize the layout of the master and detail pages to suit your needs.
You can fully customize the layout of each page using the Dreamweaver page-design tools.
You can also edit the server behaviors by double-clicking them in the Server Behaviors
panel.
After creating master/detail pages with the application object, use the Server Behaviors panel
(Window > Server Behaviors) to modify the various building blocks the application object
inserts into the pages. For more information, see “Editing dynamic content on a page”
on page 671.
You can also build master/detail pages using individual server behaviors.
840
Chapter 40: Building ColdFusion Applications Rapidly
Building master/detail pages block by block
(ColdFusion)
You can add the basic building blocks of master/detail pages separately using the Server
Behaviors panel.
You can also add the building blocks all at once using the Master/Detail Page Set application
object. For more information, see “Building master/detail pages in one operation
(ColdFusion, ASP, JSP, PHP)” on page 839.
This section covers the steps to building master/detail pages with server behaviors:
■
“Creating the master page (ColdFusion)” on page 841
■
“Creating the links to the detail page (ColdFusion)” on page 843
■
“Creating a URL parameter for the links (ColdFusion)” on page 844
■
“Finding and displaying the requested record on the detail page (ColdFusion)”
on page 845
Creating the master page (ColdFusion)
This section describes how to create a master page that lists database records. You can use a
dynamic table to list the records on a ColdFusion page.
Before you start, make sure you define a ColdFusion data source for your database. For more
information, see Chapter 24, “Database Connections for ColdFusion Developers,” on
page 611.
To create a master page:
1.
In Dreamweaver, create a new ColdFusion page.
Select File > New > Dynamic, select ColdFusion, and click Create. A blank ColdFusion
page opens in Dreamweaver.
2.
Define a recordset for the page.
In the Bindings panel, click the Plus (+) button, select Recordset (Query), and complete
the Recordset dialog box. For more information, click the Help button in the dialog box.
If you want to write your own SQL statement, click the Advanced button to open the
advanced Recordset dialog box.
Building master/detail pages (ColdFusion)
841
Make sure the recordset contains all the table columns you need to create your dynamic
table. The recordset must also include the table column containing the unique key of each
record—that is, the record ID column. In the following example, the CODE column
contains information that uniquely identifies each record.
Typically, the recordset on the master page extracts a few columns from a database table
while the recordset on the detail page extracts more columns from the same table to
provide the extra detail.
The recordset can be defined by the user at runtime. For more information, see “Building
search/results pages (ColdFusion, ASP, JSP, PHP)” on page 847.
3.
Insert a dynamic table to display the records on the page.
Place the insertion point where you want the dynamic table to appear on the page, then
selection Insert > Application Objects > Dynamic Data > Dynamic Table.
The Dynamic Table dialog box appears.
842
Chapter 40: Building ColdFusion Applications Rapidly
4.
Complete the Dynamic Table dialog box and click OK.
Dreamweaver inserts a dynamic table on the page.
If you need help completing the dialog box, click the Help button in the dialog box.
5.
If you want, delete the dynamic table column containing the record IDs.
If you don’t want to show record IDs to users, you can delete the column from the
dynamic table. Click anywhere on the page to move the focus to the page. Move the
cursor near the top of the column in the dynamic table until the column cells are outlined
in red, and then click to select the column. Press Delete to delete the column from the
table.
The next step is to create the links to the detail page.
Creating the links to the detail page (ColdFusion)
After adding the dynamic table to the master page , you must create links that open the detail
page. This section describes how to create the links. The next section describes how to modify
the link so that it also passes the ID of the record that the user selects. The detail page will use
this ID to find the requested record in the database and display it.
To create links to the detail page:
1.
In the repeated row in the dynamic table, select the text or image that will serve as a link.
In the following example, the {rsLocations.LOCATION_NAME} placeholder is selected.
The links will be applied to the location names in the column.
2.
In the Property inspector, click the folder icon beside the Link text box.
3.
Browse and select the detail page.
The detail page appears in the Link text box in the Property inspector.
In the dynamic table, the selected text appears linked. When the page runs on the server,
the link is applied to the text in every table row.
The next step is to create a URL parameter that passes the record ID to the detail page.
Building master/detail pages (ColdFusion)
843
Creating a URL parameter for the links (ColdFusion)
The links in the dynamic table not only have to open the detail page, they must pass the ID of
the record the user selected. The detail page uses this ID to find the requested record in the
database and displays it.
The record ID is passed to the detail page in a URL parameter. For more information, see
“URL parameters” on page 676.
This section describes how to create a URL parameter that passes a record ID to the detail
page.
To create the URL parameter:
1.
On the master page, select the link in the dynamic table.
If Live Data view is turned on, select the link in the first row.
2.
In the Link text box in the Property inspector, add the following string at the end of the
URL:
?recordID=#recordsetName.fieldName#
The question mark tells the server that what follows is one or more URL parameters. The
word recordID is the name of the URL parameter (you can make up any name you like).
Make a note of the name of the URL parameter because you'll use it in the detail page
later.
The expression after the equal sign is the value of the parameter. In this case, the value is
generated by a ColdFusion expression that returns a record ID from the recordset. A
different ID is generated for each row in the dynamic table. In the ColdFusion expression,
replace recordsetName with the name of your recordset, and replace fieldName with the
name of the field in your recordset that uniquely identifies each record. In most cases, the
field will consist of a record ID number. In the following example, the field consists of
unique location codes.
locationDetail.cfm?recordID=#rsLocations.CODE#
When the page runs, the values of the recordset's CODE field are inserted in the
corresponding rows in the dynamic table. For example, if the Canberra, Australia, rental
location has the code CBR, then the following URL will be used in the Canberra row in
the dynamic table:
locationDetail.cfm?recordID=CBR
3.
Save the page.
The next step is to find and display the requested record on the detail page.
844
Chapter 40: Building ColdFusion Applications Rapidly
Finding and displaying the requested record on the detail page
(ColdFusion)
After completing the master page, switch to the detail page. You must find the requested
record in the database and display it on the page. The procedure consists of defining a
recordset to hold a single record—the record requested by the master page—and binding the
recordset columns to the page.
To find and display the requested record on the detail page:
1.
Switch to the detail page.
If you don’t have a detail page yet, create a blank ColdFusion page (File > New).
2.
In the Bindings panel (Window > Bindings), click the Plus (+) button and select Recordset
(Query) from the pop-up menu.
The simple Recordset dialog box appears. If the advanced Recordset dialog box appears
instead, click Simple to switch to the simple Recordset dialog box.
3.
Name the recordset, then select a ColdFusion data source and the database table that will
provide data to your recordset.
4.
In the Columns area, select the table columns to include in the recordset.
The recordset can be identical to or different from the recordset on the master page.
Usually a detail page recordset has more columns to display more detail.
If the recordsets are different, make sure the recordset on the detail page contains at least
one column in common with the recordset on the master page. The common column is
usually the record ID column, but it can also be the join field of related tables.
To include only some of the table’s columns in the recordset, click Selected and choose the
desired columns by Control-clicking (Windows) or Command-clicking (Macintosh)
them in the list.
5.
Complete the Filter section as follows to find and display the record specified in the URL
parameter passed by the master page:
■
■
From the first pop-up menu in the Filter area, select the column in the recordset
containing values that match the value of the URL parameter passed by the master
page. For example, if the URL parameter contains a record ID number, select the
column containing record ID numbers. In the example discussed in the previous
section, the recordset column called CODE contains the values that match the value
of the URL parameter passed by the master page.
From the pop-up menu beside the first menu, select the equal sign (it should already
be selected).
Building master/detail pages (ColdFusion)
845
■
From the third pop-up menu, select URL Parameter.
The master page uses a URL parameter to pass information to the detail page.
■
In the fourth text box, enter the name of the URL parameter passed by the master
page. For example, if the URL that the master page used to open the detail page
included the suffix locationDetail.cfm?recordID=CBR, then enter recordID.
The Recordset dialog box should look similar to the following:
6.
Click OK.
The recordset appears in the Bindings panel.
7.
Bind the recordset columns to the detail page by selecting the columns in the Bindings
panel (Window > Bindings) and dragging them onto the page.
For more information, see“Making text dynamic” on page 709.
After uploading both the master and detail pages to the server, you can open the master page
in a browser. After clicking a detail link on the master page, the detail page opens with more
information about the selected record.
846
Chapter 40: Building ColdFusion Applications Rapidly
Building search/results pages
(ColdFusion, ASP, JSP, PHP)
You can use Dreamweaver to build a set of pages to let users search your database. The
method you use is identical for ColdFusion, ASP, JSP, and PHP pages. For information on
building ASP.NET search/results pages, see “Building a database search page (ASP.NET)”
on page 909.
Building the search page
A search page on the web typically contains form fields in which the user enters search
parameters. At minimum, your search page must have an HTML form with a Submit button.
To add an HTML form to a search page:
1.
Open the search page or a new page, and select Insert > Form > Form.
An empty form is created on the page. You might need to enable Invisible Elements (View
> Visual Aids > Invisible Elements) to see the form’s boundaries, which are represented by
thin red lines.
2.
Add form objects for users to enter their search parameters by selecting Form from the
Insert menu.
Form objects include text fields, menus, checkboxes, and radio buttons. You can add as
many form objects as you want to help users refine their searches. However, keep in mind
that the greater the number of search parameters on the search page, the more complex
your SQL statement will be.
For more information on form objects, see “Inserting HTML form objects” on page 805.
3.
Add a Submit button to the form (Insert > Form > Button).
4.
If you want, change the label of the Submit button by selecting the button, opening the
Property inspector (Window > Properties), and entering a new value in the Label text box.
Next, you’ll tell the form where to send the search parameters when the user clicks the
Submit button.
5.
Select the form by selecting the
.
When you create a template-based document, the template parameters are automatically
passed to it. The template user determines which image to display (see “Modifying template
properties” on page 334).
Creating a Dreamweaver template
You can create a template from an existing document (such as an HTML, Macromedia
ColdFusion, or Microsoft Active Server Pages document) or you can create a template from a
new, blank document.
308
Chapter 11: Managing Templates
After you create a template, you can insert template regions (see “Types of template regions”
on page 296). You can also set template preferences for code coloring and template region
highlight color (see “Customizing code coloring preferences for a template” on page 310 and
“Setting highlighting preferences for template regions” on page 311).
TIP
You can store additional information about a template (such as who created it, when it
was last changed, or why you made certain layout decisions) in a Design Notes file for
the template (see “Associating Design Notes with files” on page 152). Documents based
on a template do not inherit the template’s Design Notes.
To create a template:
1.
Open the document you want to save as a template:
■
■
To open an existing document, select File > Open, then select the document.
To open a new blank document, select File > New. In the dialog box that appears,
select Basic Page or Dynamic Page, select the type of page you want to work with, and
then click Create.
N OT E
2.
For more information about creating a new document, see “Creating a new blank
document” on page 92.
When the document opens, do one of the following:
■
■
Select File > Save as Template.
In the Common category of the Insert bar, click the arrow on the Templates button,
then select Make Template.
N OT E
Unless you selected Don’t Show This Dialog Again in the past, you’ll receive a
warning that says the document you’re saving has no editable regions. Click OK
to save the document as a template, or click Cancel to exit this dialog box without
creating a template.
The Save As Template dialog box appears.
Creating a Dreamweaver template
309
3.
Select a site to save the template in from the Site pop-up menu, then enter a unique name
for the template in the Save As text box.
4.
Click Save.
Dreamweaver saves the template file in the site’s Templates folder in the local root folder
of the site, with a .dwt filename extension. If the Templates folder does not already exist in
the site, Dreamweaver automatically creates it when you save a new template.
NO T E
Do not move your templates out of the Templates folder, or put any non-template
files in the Templates folder. Also, do not move the Templates folder out of your local
root folder. Doing so causes errors in paths in the templates.
To use the Assets panel to create a new template
1.
In the Assets panel (Window > Assets), select the Templates category on the left side of
the panel.
The Templates category of the Assets panel appears.
2.
Click the New Template button at the bottom of the Assets panel.
A new, untitled template is added to the list of templates in the Assets panel.
3.
While the template is still selected, enter a name for the template, then press Enter
(Windows) or Return (Macintosh).
Dreamweaver creates a new blank template in the Assets panel and in the Templates
folder.
Related topics
■
“Setting highlighting preferences for template regions” on page 311
■
“Creating templates for a Contribute site” on page 312
■
“Inserting an editable region” on page 315
Customizing code coloring preferences for a
template
Code color preferences control the text, background color, and style attributes of the text
displayed in Code view. You can set your own color scheme so you can easily distinguish
template regions when you view a document in Code view.
To set a Code view color scheme for templates:
1.
Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh).
The Preferences dialog box appears.
2.
310
Select Code Coloring from the category list on the left.
Chapter 11: Managing Templates
3.
Select HTML from the Document Type list, then click the Edit Coloring Scheme button.
The Edit Code Coloring Scheme dialog box appears.
4.
In the Styles For list select Template Tags.
5.
Set color, background color, and style attributes for the Code view text by doing the
following:
■
■
6.
If you want to change the text color, in the Text Color text box type the hexadecimal
value for the color you want to apply to the selected text, or use the color picker to
select a color to apply to the text. Do the same in the Background field to add or
change an existing background color for the selected text.
If you want to add a style attribute to the selected code, click the B (bold), I (italic), or
U (underline) buttons to set the desired style.
Click OK.
Setting highlighting preferences for template regions
You can use the Dreamweaver highlighting preferences to customize the highlight colors for
the outlines around the editable and locked regions of a template in Design view. The editable
region color appears in the template as well as in documents based on the template.
For more information about viewing templates and template-based documents in Design
view, see “Viewing templates in Design view” on page 297 and “Viewing template-based
documents in Design view” on page 299.
To change template highlight colors:
1.
Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh).
The Preferences dialog box appears.
2.
Select Highlighting from the category list on the left.
3.
Click the Editable Regions, Nested Regions, or Locked Regions color box, then select a
highlight color using the color picker (or enter the hexadecimal value for the highlight color
in the text box).
For information about using the color picker, see “Working with colors” on page 350.
4.
(Optional) Repeat the process for other template region types, as necessary.
5.
Click the Show option to enable or disable displaying colors in the Document window.
N O TE
6.
Nested Region does not have a Show option; its display is controlled by the Editable
Region option.
Click OK.
Creating a Dreamweaver template
311
To view highlight colors in the Document window:
■
Select View > Visual Aids > Invisible Elements.
Highlight colors appear in the document window only when View > Visual Aids >
Invisible Elements is enabled and the appropriate options are enabled in Highlighting
preferences.
NO TE
If invisible elements are showing but the highlight colors are not, select Edit >
Preferences (Windows) or Dreamweaver > Preferences (Macintosh), and then select
the Highlight category. Make sure that the Show option next to the appropriate
highlight color is selected. Also make sure that the desired color is visible against the
background color of your page.
Related topics
■
“Customizing code coloring preferences for a template” on page 310
Creating templates for a Contribute site
Using Dreamweaver, you can create templates to help Macromedia Contribute users create
new pages, to provide a consistent look and feel for your site, and to enable you to update the
layout of many pages at once.
When you create a template and upload it to the server, it becomes available to all Contribute
users who connect to your site, unless you’ve set restrictions on template use for certain
Contribute roles. If you have set restrictions on template use, you might need to add each new
template to the list of templates a Contribute user can use (see Administering Contribute).
N OT E
Make sure that the site root folder defined in each Contribute user’s site definition is the
same as the site root folder defined in your site definition in Dreamweaver. If a user’s site
root folder doesn’t match yours, that user won’t be able to use templates.
In addition to Dreamweaver templates, you can create non-Dreamweaver templates using
the Contribute administration tools. A non-Dreamweaver template is an existing page that
Contribute users can use to create new pages; it’s similar to a Dreamweaver template, except
that pages that are based on it don’t update when you change the template. Also, nonDreamweaver templates can’t contain Dreamweaver template elements such as editable,
locked, repeating, and optional regions.
312
Chapter 11: Managing Templates
When a Contribute user creates a new document within a site containing Dreamweaver
templates, Contribute lists the available templates (both Dreamweaver and non-Dreamweaver
templates) in the New Page dialog box.
To include pages that use encodings other than Latin-1 in your site, you might need to create
templates (either Dreamweaver templates or non-Dreamweaver templates). Contribute can
edit pages that use any encoding, but when a Contribute user creates a new blank page, it uses
the Latin-1 encoding. To create a page that uses a different encoding, a Contribute user can
create a copy of an existing page that uses a different encoding, or can use a template that uses
a different encoding. However, if there are no pages or templates in the site that use other
encodings, then you must first create a page or template in Dreamweaver that uses that other
encoding.
For information about creating, editing, and updating Dreamweaver templates, see “About
Dreamweaver templates” on page 296.
Creating templates for a Contribute site
313
To create a non-Dreamweaver template:
1.
Select Site > Manage Sites.
The Manage Sites dialog box appears.
2.
Select a site, then click Edit.
The Site Definition dialog box appears.
3.
Click the Advanced tab.
4.
Select the Contribute category from the category list on the left.
5.
If you haven’t already done so, you need to enable Contribute compatibility.
Select the Enable Contribute Compatibility option, and then enter a site root URL.
For more information, click the Help button.
6.
Click the Administer Site in Contribute button.
7.
If prompted, enter the administrator password, and then click OK.
The Administer Website dialog box appears.
8.
In the Users and Roles category, select a role, and then click the Edit Role Settings button.
9.
Select the New Pages category, and then add existing pages to the list under the Create a
New Page by Copying a Page from This List option.
For more information, see Administering Contribute.
10. Click
11.
OK to close the Edit Settings dialog box.
Click Close to close the Administer Website dialog box.
Related topics
■
“Creating a Dreamweaver template” on page 308
Creating editable regions
Editable template regions control which areas of a template-based page a user can edit.
Related topics
■
“Types of template regions” on page 296
314
Chapter 11: Managing Templates
Inserting an editable region
Before you insert an editable region, you should save the document you are working in as a
template (see “Creating a Dreamweaver template” on page 308).
NO T E
If you insert an editable region in a document rather than a template file, Dreamweaver
warns you that the document will automatically be saved as a template.
You can place an editable region anywhere in your page, but consider the following if you are
making a table or a layer editable:
■
You can mark an entire table or an individual table cell as editable, but you can’t mark
multiple table cells as a single editable region. If a