Dreamweaver 8

Quick Reference Card

Dreamweaver 8 Workspace
Title bar Menu bar Panel group Expander arrow
888.903.2432 | www.customguide.com

Keyboard Shortcuts

General
Insert Named Anchor Add to Library Duplicate Edit Style Sheet Replace
<Ctrl>+<Alt>+<A> <Ctrl>+<Shift>+<B>
Insert toolbar Document toolbar

<Ctrl> + <D>

<Ctrl>+<Shift>+<E>
<Ctrl> + <H> <Ctrl> + <G> <Ctrl>+<Shift>+<I> <Ctrl> + <Alt> + <I> <Ctrl> + <J> <Ctrl> + <L> <Ctrl>+<Shift>+<L>

Document window

Show/Hide Grids

Panels

Show Invisibles Insert Image Page Properties
Status bar Property Inspector

Create Link Remove Link

Insert Table Row <Ctrl> + <M> Delete Table Row <Ctrl>+<Alt>+<M> Quick Tag Editor Validate markup: Validate current document or tag. File Management: Access already-published files or upload files directly from the document window. Preview: Choose from a list of browsers installed on the computer to preview the page. Refresh: Click to update changes made to the page after working on the HTML code. View options: In Design view, apply a grid or ruler to the page. In Code view, change how the HTML code is displayed. Visual Aids: Choose from different aids to help you design your pages. View Head Content Show/Hide Link Switch Views <Ctrl> + <T>
<Ctrl>+<Shift>+<W>

Document Toolbar

Code View: View or edit the page in HTML. Split View: View the page in HTML code and Design view (WYSIWYG) at the same time. Design View: View or edit the page in the WYSIWYG (What You See Is What You Get) editor. Server Debug: View a report to debug errors on the page. Title: Type the Web page title you want to appear in the title bar of the browser. Check Browser Compatibility: Check the compatibility of your document with different Web browsers.
<Ctrl>+<Shift>+<Y> <Ctrl> + < ` >

Function Key Shortcuts

Reference Reference Panel Layers Frames Object Panel Behaviors Panel <Shift> + <F1>
<Ctrl>+<Shift>+<F1>
<F2> <Ctrl> + <F2> <Ctrl> + <F2> <Shift> + <F3>
Property Inspector <Ctrl> + <F3> Hide/Show All <F4> Floating Windows Site Files <F5> <Shift> + <F5> <Ctrl> + <F6>
<Ctrl>+<Shift>+<F6>

Insert Toolbar

Click here to select a category
Email link Insert Table Images Date Comment Tag Chooser
Refresh Local Switch to Layout View

Hyperlink

Named Anchor

Insert Div Tag

Server-Side Include

Templates

Switch to Standard View Code Inspector History Panel Assets Panel Preview in Primary Browser
Categories: Click the arrow button on the left side of the Insert Toolbar and select a category: Common: Includes objects commonly inserted in a Web page (ex. tables, images) Layout: Insert layout tables and frames Forms: Insert elements often found in a Web form (ex. text fields, option buttons, check boxes) Text: Apply formatting to text (bold, italic, etc.)
HTML: Insert Spry data objects and other dynamic items like update forms Application: Insert Recordsets, dynamic tables, record forms Flash: Insert Flash elements Favorites: Allows you to group the buttons you use most often

<F10> <Shift> + <F10> <F11> <F12>
CSS Styles Panel <Shift> + <F11>
Preview in <Ctrl> + <F12> Secondary Browser 888.903.2432 | www.customguide.com 2010 CustomGuide
Customizable Business Training Online Learning Skills Assessments

Courseware

Property Inspector

General Commands

Select an item to view its properties. To Get Help: Click the Help button for more information on options. Format Text in HTML Code: Click the Quick Tag Editor button to apply an HTML tag to selected text or object. To Expand/Contract the Property Inspector: Click the Expander arrow in the lower right corner to view or hide all the options in the Property Inspector.

Image Properties

Image name Allotted space for the image
Location of the image Image hyperlink
Image editing Alternate text tools

Pointer

Polygon Oval Rectangular
Allotted space surrounding the image
Low resolution preview of the main image

Hyperlink target window

Image Border Width

Align text with image

Align Image

Text Properties

Text Format CSS Style
Open Italic Center Justify CSS Panel Bold Left Right Align Align

Hyperlink URL

Pointto-File Help
Text Indent Text Font Font Size Text Color Unordered List Text Outdent Ordered List Target Frame

Browse for File

Quick Tag Editor
To Add a Hyperlink to an Image: Select the text and type the URL in the Link textbox; or drag the Point-to-File icon to the file in the Site panel; or click the Folder icon to browse for a file in the Web site. To Create an Image Map: Select the Rectangular, Oval, or Polygon command, draw a shape and set the link location. To Edit an Image: Use the image editing buttons. To Align an Image: Click the Align button arrow and align the image relative to text nearby; or click the Left, Center or Right Align button in the Inspector. To Insert an Image: Press <Ctrl> + <Alt> + <I>, or select Insert Image from the menu.
To Format Text: Select the text and apply formatting from the Property Inspector. To Create a Hyperlink: Select the text and type the URL in the Link textbox; or drag the Point-to-File icon to the file in the Site panel; or click the Folder icon to browse for a file in the Web site. Specify Link Target Frame: Specify in which frame the hyperlink should appear.

Panel groups Panel tabs

Table Properties
Apply Button Table Name Number of Rows and Columns
Cell Row Width Spacing and Column Height Cell Padding

Align Table

Table Border Width
To View or Hide a Panel: Select Window from the menu bar and select the panel you want to view or hide. Or, click the panel group and select the panel tab you want to view.

Background Table Image Table Border Color Background color

Clear Heights or Widths

Convert Convert Table Table to to Pixels Percent
To View or Hide Panel Groups: Click the Panel group Expander arrow between the document window and the panel groups. There are four panel groups available in Dreamweaver: CSS CSS Styles: Apply CSS styles to the current selection AP Elements: Manage the AP (absolutely positioned) elements in your document Application Databases: Create and inspect database connections, insert database code Bindings: Locate and insert dynamic content Server Behaviors: Create, insert and edit server behaviors into the page Components: Create, inspect, and insert components or component code Tag Inspector Attributes: Edit or add attributes and their values Behaviors: Attach or modify behaviors to page elements such as tags Files File: Track local and remote files, and upload files on the Web Assets: View and insert site assets such as images, HTML colors, links, Flash movies, scripts, templates, and library items Snippets: Create, delete, edit, or insert code snippets in the document 888.903.2432 | www.customguide.com 2010 CustomGuide
To View Table Properties: Click a table border. To Add or Delete Rows or Columns: Type the number of rows or columns you want to add or delete in the Rows and Cols text boxes. To Change Table Width: Type a number in the W text box. To Display the Table in Pixels or Percent: Click the pixels or percent button arrow and select the display option. To Add Cell Padding or Cell Spacing: Enter the amount in the CellPad or CellSpace text boxes. To Add a Background Color: Click the Bg color list arrow and select a color from the palette. To Add a Border Color: Click the Brdr color list arrow and select a color from the palette. To Add a Background Image: Type the location in the Bg text box, or drag the Point-to-File icon to the file in the Site panel; or click the Folder icon to browse for a file. To Add a Table Border: Enter the width in the Border text box.

Chapter 10: Using Frames. 275 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 cant display frames.292 Using JavaScript behaviors with frames.293 Chapter 11: Managing Templates. 295 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
PART 4: ADDING CONTENT TO PAGES Chapter 12: Working with Pages. 341 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. Using JavaScript behaviors to detect browsers and plug-ins. Previewing and testing pages in browsers. Setting download time and size preferences.

363 366

Chapter 13: Inserting and Formatting Text. 369 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 Chapter 14: Inserting Images. 407 About images. 407 Inserting an image. 409 Resizing an image.414 Cropping an image.415 Optimizing an image using Fireworks.416 Adjusting the brightness and contrast of an image.416 Sharpening an image. 417 Creating a rollover image.418 Using an external image editor.419 Applying behaviors to images. 420 Chapter 15: Linking and Navigation. 421 Understanding document locations and paths. 422 Jump menus. 425 Navigation bars. 425 About image maps. 426 Creating links. 427 Managing links. 437 Inserting jump menus.441 Using navigation bars. 444 Using image maps. 446 Attaching JavaScript behaviors to links. 448 Checking for broken, external, and orphaned links. 449 Fixing broken links. 450 Opening linked documents in Dreamweaver. 452

Design view uses the background and text colors you set in Modify > Page Properties so that pages you design render colors as a browser will.
Related topics Using screen readers with Dreamweaver on page 64
Using the keyboard to navigate Dreamweaver
You can use the keyboard to navigate Dreamweaver panels, inspectors, dialog boxes, frames, and tables without a mouse. Related topics Using screen readers with Dreamweaver on page 64
Support for operating system accessibility features on page 65

Navigating panels

You can use the keyboard to navigate the panels.
Tabbing and the use of arrow keys are supported for Windows only.

N O TE

To navigate panels:
In the Document window, press Control+Alt+Tab to shift focus to a panel. A white outline around the panel title bar indicates that focus is on that panel. The screen reader reads the panel title bar that has focus.
Press Control+Alt+Tab again to shift focus to the next panel. Continue until you have focus on the panel you want to work in. Press Control+Alt+Shift+Tab to shift focus to the previous panel, if necessary. If the panel you want to work in is not open, use the keyboard shortcuts listed in the Windows menu to display the appropriate panel; then press Control+Alt+Tab to shift focus to that panel. If the panel you want to work in is open, but not expanded, place focus on the panel title bar, and then press the Spacebar. Press the Spacebar again to collapse the panel.
Press the Tab key to move through the options in the panel. A dotted outline around the option indicates that focus is on that option. Use the arrow keys as appropriate:
If an option has choices, use the arrow keys to scroll through the choices, and then press the Spacebar to make a selection. If there are tabs in the panel group to open other panels, place focus on the open tab, and then use the left or right arrow key to open another tabs. Once you open a new tab, press the Tab key to move through the options in that panel.
Related topics Navigating dialog boxes on page 67
Navigating frames on page 68 Navigating tables on page 68
Navigating the Property inspector
You can use the keyboard to navigate the Property inspector and make changes to your document.
The use of arrow keys is supported for Windows only.

NO T E 66

To navigate the Property inspector:

1. 2. 3. 4. 5.

Viewing assets in the Assets panel
You can view and manage assets in the current site using the Assets panel. The Assets panel displays assets for the site associated with the active document in the Document window.
You must define a local site before you can view assets in the Assets panel. For more information about setting up a site, see Setting up a new Dreamweaver site on page 82.

NO TE NO T E

The Assets panel provides two views:
The Site list shows all of the assets in your site, including colors and URLs that are used in any document in your site. The Favorites list
shows only the assets youve explicitly chosen.
In both lists, assets are divided into categories (along the left side of the Assets panel). The Site list and the Favorites list are both available for all categories of assets except templates and library items.
Most of the Assets panel operations work the same in the Site list and in the Favorites list. There are a few tasks, however, that you can perform only in the Favorites list (see Creating and managing a list of favorite assets on page 168).
By default, assets in a given category are listed in alphabetical order by name. You can instead list the assets by any of several other criteria or change the size of the columns. You can also preview assets in a category, and change the size of the preview area.
To open the Assets panel:
Select Window > Assets. The Assets panel appears. By default, the Images category is selected.

To view the Site list:

In the Assets panel (Window > Assets), select the Site option at the top of the panel.
In the Templates and Library categories (on the left side of the Assets panel), the Site and Favorites choices are unavailable.
To view the Favorites list:
In the Assets panel (Window > Assets), select the Favorites option at the top of the panel. The Favorites list is empty until you explicitly add assets to it.
To display assets in a particular category:
Click the appropriate icon on the left side of the Assets panel (Window > Assets).
To list assets in a different order:
Click one of the column headings. For example, to sort the list of images by type (so that all the GIF images are together, all the JPEG images are together, and so on), click the Type column heading.
To change the width of a column:
Drag the line that separates two column headings.

To preview an asset:

Select the asset in the Assets panel. The preview area at the top of the panel shows a visual preview of the asset. For example, when you select a movie asset, the preview area shows an icon. To view the movie, click the Play button (the green triangle) in the upper-right corner of the preview area.

File transfer to or from a Contribute site
Contribute uses a system much like the Dreamweaver Check In/Check Out system to ensure that only one user at a time can edit a given web page. When you enable Contribute compatibility in Dreamweaver, the Dreamweaver Check In/Check Out system is automatically enabled. To transfer files to and from a Contribute site using Dreamweaver, always use the Check In and Check Out commands. If you instead use the Put and Get commands to transfer files, you may overwrite the modifications that a Contribute user has recently made to a file.
If you do use the Put command in a Contribute site, Dreamweaver automatically checks the file in and then checks it out again, to reduce the chance that your changes will conflict with another users.
Checking a file out from a Contribute site works just as it does in any other site. When you check a file in to a Contribute site, Dreamweaver automatically makes a backup copy of the previously checked in version of the file in the _baks folder and adds your user name and a date stamp to a Design Notes file so others can see who checked in the file and when. For more information about automatic backup copies, see Enabling Contribute users to access templates without root folder access on page 190. Related topics Checking in and checking out files on page 134 Preparing a site for use with Contribute on page 186
Contribute file and folder permissions on the server
Contribute provides a way to manage file and folder permissions for each user role you define. For more information, see Administering Contribute. Dreamweaver users are not affected by these permissions, but Contribute enforces these permissions for Contribute users. However, Contribute doesnt provide a way to manage the underlying read and write permissions assigned to files and folders by the server. You can manage those permissions directly on the server. You can think of Contribute user roles as an overlay on the servers read and write permissions; for example, if a user doesnt have write permission to a folder on the server, then they cant save to that folder even if theyre a member of a role thats allowed (according to Contribute permissions) to write to that folder. If a Contribute user doesnt have read access on the server to a dependent file, such as an image displayed in a page, the contents of the dependent file dont appear in the Contribute window. For example, if a user doesnt have read access to an images folder, the images in that folder appear as broken image icons in Contribute. Similarly, Dreamweaver templates are stored in a subfolder of the sites root folder, so if a Contribute user doesnt have read access to the root folder, they cant use templates in that site unless you copy the templates to an appropriate folder. When you set up a site, you must give users read access on the server to the /_mm folder (the _mm subfolder of the root folder), the /Templates folder, and all of the folders containing assets that they will need to use. If for some reason you cant give users read access to the /Templates folder, see Enabling Contribute users to access templates without root folder access on page 190 to supply users with templates.

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:
Select Modify > Page Properties, or select Page Properties from the context menu in the Design view of the Document window. Select the Appearance category in the Page Properties dialog box. 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.)
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

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:
Click a color box in any dialog box or in the Property inspector. The color picker appears.
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 screeneven 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.

To set default options for copying and pasting:
Select Edit > Preferences (Windows) or Dreamweaver Preferences (Macintosh). Click the Copy/Paste category. Complete the dialog box and click OK. For more information, click the Help button.
Importing tabular data documents
You can import tabular data into your document by first saving the files (such as Microsoft Excel files or database files) as delimited text files. For information on importing and formatting table data, see Importing and exporting tabular data on page 237. For information about importing text from Microsoft Word HTML documents, see Opening existing documents on page 96. You can also add text from Microsoft Excel documents to a Dreamweaver document by importing the contents of the Excel file into a web page (see Importing Microsoft Office documents (Windows only) on page 383).

N OT E 382

To import tabular data:
Select File > Import > Import Tabular Data, or Insert > Table Objects > Import Tabular Data. The Import Table dialog box appears. Browse for the file you want or enter its name in the text box. Select the delimiter used when the file was saved as delimited text. Your options are Tab, Comma, Semicolon, Colon, and Other. If you select Other, a blank field appears next to the option. Enter the character that was used as a delimiter.
Use the remaining options to format or define the table into which the data will be imported. Click OK.
Importing Microsoft Office documents (Windows only)
You can insert the full contents of a Microsoft Word or Excel document in a new or existing web page. When you import a Word or Excel document, Dreamweaver receives the converted HTML and inserts it into your web page. The files size, after Dreamweaver receives the converted HTML, must be less than 300K.
Instead of importing the entire contents of a file, you can also paste portions of a Word document and preserve the formatting. For more information, see Adding text to a document on page 381. If you use Microsoft Office 97, you cannot import the contents of a Word or Excel document; you must insert a link to the document. For information, see Inserting a link to a Word or Excel document on page 384.

Creating links

You can create several types of links in a document:
A link to another document or to a file, such as a graphic, movie, PDF, or sound file. (See Linking files and documents on page 427.) A named anchor link, which jumps to a specific location within a document. (See Linking to a specific place in a document on page 433.) An e-mail link, which creates a new blank e-mail message with the recipients address already filled in. (See Creating an e-mail link on page 435.) Null and script links, which enable you to attach behaviors to an object or to create a link that executes JavaScript code. (See Creating null and script links on page 436.)
Before creating links, make sure you understand how document-relative paths, site root-relative paths, and absolute paths work. (See Understanding document locations and paths on page 422.)
Linking files and documents
You can use the Property inspector and the Point-to-File icon to create links from an image, an object, or text to another document or file. For more information about using the site map to create links, see Modifying links in the site map on page 439. Dreamweaver creates the links to other pages in your site using document-relative paths. You can also tell Dreamweaver to create new links using site root-relative paths.
Always save a new file before creating a document-relative path; a document-relative path is not valid without a definite starting point. If you create a document-relative path before saving the file, Dreamweaver temporarily uses an absolute path beginning with file:// until the file is saved; when you save the file, Dreamweaver converts the file:// path into a relative path.
This section covers the following topics:
Linking to documents using the Property inspector on page 428 Linking documents using the Point-to-File icon on page 429 Linking documents using the site map on page 430 Using the Hyperlink command on page 431 Setting the relative path of new links on page 432
Related topics Understanding document locations and paths on page 422
Linking to documents using the Property inspector
You can use the Property inspectors folder icon or Link text box to create links from an image, an object, or text to another document or file.
To link documents using the Property inspectors folder icon or Link text box:

Click the Plus (+) button and select Show-Hide Layers from the Actions pop-up menu. If Show-Hide Layers is unavailable, you probably have a layer selected. Because layers do not accept events in both 4.0 browsers, you must select a different objectsuch as the body tag or a link (a tag)or change the target browser to Internet Explorer 4.0 in the Show Events For pop-up menu.

4. 5. 6. 7. 8.

From the Named Layers list, select the layer whose visibility you want to change. Click Show to show the layer, Hide to hide the layer, or Default to restore the layers default visibility. Repeat steps 4 and 5 for all remaining layers whose visibility you want to change at this time. (You can change the visibility of multiple layers with a single behavior.) Click OK. Check that the default event is the one you want. If it isnt, select another event from the pop-up menu. If the events you want are not listed, change the target browser in the Show Events For pop-up menu.
When viewed in a Netscape Navigator browser window, layers may shrink to fit the content. To keep this from happening, add text or images to layers, or set layer clip values.
To create a preload layer:
Click the Draw Layer button in the Common category of the Insert bar and draw a large layer in the Document windows Design view. Be sure the layer covers all the content on the page. In the Layers panel, drag the layer name to the top of the list of layers to specify that the layer should be at the front of the stacking order. Select the layer if its not selected, and name it loading, using the leftmost text box in the layer Property inspector.
With the layer still selected, set the background color of the layer to the same color as the page background in the Property inspector.
Click inside the layer (which should now be obscuring the rest of the page contents) and type a message, if desired. For example, Please wait while the page loads or Loading. are messages that tell visitors what is happening so that they know the page contains content.

6. 7. 8. 9.

Click the <body> tag in the tag selector in the bottom left corner of the Document window. In the Behaviors panel, select Show-Hide Layers from the Actions pop-up menu. Select the layer called loading from the Named Layers list. Click Hide. OK. Make sure that the event listed next to the Show-Hide Layers action in the behaviors list is onLoad. (If it isnt, select the event and click the downward-pointing triangle that appears between the event and the action. Select onLoad from the list of events in the pop-up menu.)

Show Pop-Up Menu

You use the Show Pop-Up Menu behavior to create or edit a Dreamweaver pop-up menu or to open and modify a Fireworks pop-up menu youve inserted in a Dreamweaver document.
You set options in the Show Pop-Up Menu dialog box to create a horizontal or vertical pop-up menu. You can use this dialog box to set or modify the color, text, and position of a pop-up menu.
You must use the Edit button in the Dreamweaver Property inspector to edit images in a Fireworks image-based pop-up menu. You can, however, use the Show Pop-Up Menu command to change the text in an image-based pop-up menu. For information about editing images in Fireworks, see Chapter 16, Working with Other Applications, on page 453.
To view a pop-up menu in a document, you must open the document in a browser window, then roll the pointer over the triggering image or link.
To use the Show Pop-up Menu action:
Select an object to attach the behavior to and open the Behaviors panel (Shift+F4). Click the Plus (+) button and select Show Pop-Up Menu from the Actions pop-up menu. In the Show Pop-Up Menu dialog box that appears, use the following tabs to set options for the pop-up menu:
allows you to set the name, structure, URL, and target of individual menu

items.

Appearance enables you to set the appearance of the menus Up State and Over State and to set font choices for menu item text. Advanced allows you to set the properties of the menu cells. For example, you can set cell
width and height, cell color and border width, text indention, and the length of delay before the menu appears after the user moves the pointer over the trigger.

Position

lets you set where the menu is positioned relative to the triggering image or link.
Adding, removing, and changing the order of pop-up menu items
You use the Contents tab in the Show Pop-up Menu dialog box to create menu items. You can also use this tab to remove existing items, or to change the order in which they appear in a menu.
To add pop-up menu items:
In the Contents tab, create a pop-up menu item by doing the following: In the Text text box, select the default text (New Item), then enter the text you want to appear in the pop-up menu.
Set additional options, as desired: If you want the menu item to open another file when clicked, in the Link text box, type the file path or click the Folder icon and browse to the document you want to open. If you want to set a location in which the document opens, for example in a new window or in a specific frame, in the Target pop-up menu select the desired location.

With Dreamweaver 8, snippets containing <font> tags and other deprecated elements and attributes have been moved to the Legacy folder in the Snippets panel.
To insert a code snippet:
Place the insertion point where you want to insert the code snippet, or select code to wrap a snippet around. 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:
In the Snippets panel, click the New Snippet icon at the bottom of the panel. The Snippet dialog box appears. 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:
In the Snippets panel, click the New Snippet Folder button at the bottom of the panel. Drag snippets to the new folder or other folders, as desired.
To add or edit a keyboard shortcut for a snippet:
In the Snippets panel, right-click (Windows) or Control-click (Macintosh) and select Edit Keyboard Shortcuts. The Keyboard Shortcuts Editor appears. In the Commands pop-up menu, select Snippets. A list of snippets appears. 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:
Find the file corresponding to the snippet that you want to share in the Configuration/ Snippets folder in the Dreamweaver application folder. Copy the snippet file to a shared folder on your computer or a network computer. 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:

Make sure you are in Code view (View > Code). Position the insertion point in the code, or select a block of code. 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 Collapse Full Tag

To delete an XSLT parameter:
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. Select a parameter from the XSLT parameters list. 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:
Select Insert > XSLT Objects > Conditional Region, or Insert > XSLT Objects > Multiple Conditional Region. 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. Click OK.
Editing a Conditional Region XSLT object
After youve 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:
Select the object by clicking the gray tab that surrounds the conditional region. In the Property inspector (Window > Properties), edit your conditional expression in the Test text box.

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

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.

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. You can specify additional information about the server you are creating by using the Advanced options panel. the Advanced button to display more options.

12. Click

If you need to create more code blocks, repeat steps 7 through 13 as needed. 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.

14. If

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 behaviors 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 behaviors code into the page. To let the page designer supply parameter values, enter parameter markers within the code as shown:
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:

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 pages 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):

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 doesnt do any actual searching, it is referred to as the search page.
The second page you need is the results page, which performs most of the work. The results 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 pages 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