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.

To switch views in the Document window, do one of the following:

Use the View menu:

Select View > Code. Select View > Design. Select View > Code and Design. Click the Show Code View button. Click the Show Code and Design Views button. Click the Show Design View button.
Use the Document toolbar:
To toggle between Code view and Design view:
Press Control+tilde (~) (Windows) or Command+backquote () (Macintosh).
If both views are showing in the Document window, this keyboard shortcut changes keyboard focus from one view to the other.

NO T E

Related topics The Document window on page 43
Cascading or tiling Document windows
If you have many documents open at once, you can cascade or tile them.
To cascade Document windows, do the following:
Select Window > Cascade.
To tile Documents windows, do one of the following:
In Windows, select Window > Tile Horizontally or Window > Tile Vertically. On the Macintosh, select Window > Tile.
Related topics Choosing the workspace layout (Windows only) on page 72
Displaying tabbed documents (Macintosh) on page 72 Saving custom workspace layouts on page 73
Resizing the Document window
The status bar displays the Document windows current dimensions (in pixels). To design a page that looks its best at a specific size, you can adjust the Document window to any of the predetermined sizes, edit those predetermined sizes, or create new sizes.
To resize the Document window to a predetermined size:
Select one of the sizes from the Window Size pop-up menu at the bottom of the Document window.
In Windows, you can maximize a Document window so that it fills the entire document area of the integrated window. You cant resize a Document window when it is maximized.
The window size shown reflects the inside dimensions of the browser window, without borders; the monitor size is listed in parentheses. For example, you would use the size 536 x 196 (640 x 480, Default) if your visitors are likely to be using Microsoft Internet Explorer or Netscape Navigator in their default configurations on a 640 x 480 monitor.
For less precise resizing, use your operating systems standard methods of resizing windows, such as dragging the lower-right corner of a window.

If you dont have any templates in your site, you can save a document in one of the design file categories of the New Document dialog box as a template, then create pages based on that template. For information about saving a design file as a template, see Creating a document based on a Dreamweaver design file on page 91.
To create a new document based on a template:
Select File > New. The New Document dialog box opens. Click the Templates tab. In the Templates For list, select the Dreamweaver site that contains the template you want use, then select a template from the list on the right. For more information about options in this dialog box, click the Help button in the dialog box.
Click Create. The new document opens in the Document window. Save the document (see Saving a new document on page 93).
To create a new document from a template in the Assets panel:
Open the Assets panel (Window > Assets), if it is not already open. In the Assets panel, click the Templates icon on the left to view the list of templates in your current site.
If you just created the template you want to apply, you might need to click the Refresh button to see it.
Right-click (Windows) or Control-click (Macintosh) the template you want to apply, then select New From Template. The document opens in the Document window.
Creating a document based on a Dreamweaver design file on page 91

Saving a new document

When you create a new document, you need to save it.

To save a new document:

Select File > Save. In the dialog box that appears, navigate to the folder where you want to save the file.
Its a good idea to save your file in a Dreamweaver site. For more information, see Setting up a new Dreamweaver site on page 80.
In the File Name text box, type a name for the file. Avoid using spaces and special characters in file and folder names and do not begin a filename with a numeral. 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.

Click Save.

Setting a default new document type
You can define which document type Dreamweaver uses as a default document for a site. For example, if most pages in your site will be a specific file type (such as Cold Fusion, HTML, or ASP documents), you can set document preferences that automatically create new documents of the specified file type.

If an external editor doesnt open for an asset that needs to use an editor, select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh), select the File Types/Editors category, and make sure you have an external editor defined for the assets file type. (See Starting an external editor for media files on page 474.)
Change the asset as desired. When youre done editing the asset, do one of the following:
If the asset is a file-based asset (anything other than a color or URL), save it (using whatever editor you used to edit it) and close it. If the asset is a URL, click OK when youre finished editing in the Edit URL dialog box.
If the asset is a color, the Dreamweaver color picker is dismissed automatically when you pick a color.
To dismiss the color picker without picking a color, press Escape.
Related topics Viewing assets in the Assets panel on page 161
Refreshing the Assets panel on page 163
Reusing assets in another site
The Assets panel shows all the assets (of recognized types) in your current site. To use an asset from the current site in another site, you must copy it to the other site. You can copy an individual asset, a set of individual assets, or an entire Favorites folder at once. You might need to locate the file in the Files panel that corresponds to an asset in the Assets panel before you transfer the asset to or from your remote site.
The Files panel might show a different site from the one that the Assets panel shows. This is because the Assets panel is associated with the active document.
To locate an assets file in the Files panel:
In the Assets panel (Window > Assets), select the category on the left side of the panel for the type of asset you want to find. Right-click (Windows) or Control-click (Macintosh) the assets name or icon in the Assets panel, then select Locate in Site from the context menu.
Locate in Site is unavailable for colors and URLs, which do not correspond to files in the site.
The Files panel opens, with the asset file selected. The Locate in Site command locates the file corresponding to the asset itself; it does not locate a file that uses that asset.
To copy assets from the Asset panels Site list or Favorites list to another site:
In the Assets panel (Window > Assets), select the category on the left side of the panel for the type of asset you want to copy. Right-click (Windows) or Control-click (Macintosh) the asset or assets to copy, select Copy to Site, then select the target site name from the submenu. (The submenu lists all the sites youve defined.)
In the Favorites list, you can copy a Favorites folder as well as individual assets. For information about Favorites folders, see Grouping assets in a Favorites folder on page 171.
The assets are copied to the specified site, into locations corresponding to their locations in the current site. Dreamweaver creates new folders in the target sites hierarchy as needed. The assets are also added to the specified sites Favorites list. When you open a document in the target site, the Assets panel switches to that site, and shows the copied asset.

Select Modify > Timeline > Record Path of Layer. Drag the layer around the page to create a path. Release the layer at the point where the animation should stop. Dreamweaver adds an animation bar to the timeline, containing the appropriate number of keyframes.
In the Timelines panel, click the Rewind button; then hold down the Play button to preview your animation.

Modifying timelines

After defining a timelines basic components, you can make changes such as adding and removing frames, changing the start time of the animation, and so on.
To modify a timeline, do any of the following:
To make the animation play longer, drag the end frame marker to the right. All the keyframes in the animation shift so that their relative positions remain constant. To prevent the other keyframes from moving, Control-drag the end frame marker. To make the layer reach a keyframe position earlier or later, move the keyframe marker left or right in the bar. To change the start time of an animation, select one or more of the bars associated with the animation (press Shift to select more than one bar at a time) and drag left or right. To shift the location of an entire animation path, select the entire bar and then drag the object on the page. Dreamweaver adjusts the position of all keyframes. Making any type of change with an entire bar selected changes all the keyframes. To add or remove frames in the timeline, select Modify > Timeline > Add Frame or Modify > Timeline > Remove Frame.
To make the timeline play automatically when the page opens in a browser, click Autoplay. Autoplay attaches a behavior to the page that executes the Play Timeline action when the page loads. To make the timeline loop continuously, click Loop. Loop inserts the Go To Timeline Frame action in the Behaviors channel after the last frame of the animation. You can edit the parameters for this behavior to define the number of loops.
Changing image and layer properties with timelines
In addition to moving layers with timelines, you can change the visibility, size, and stacking order of a layer; you can also change the source file of an image.
To change image and layer properties with a timeline:
In the Timelines panel, do one of the following:
Select an existing keyframe in the bar controlling the object you want to change. (The start and end frames are always keyframes.) Create a new keyframe by clicking a frame in the middle of the animation bar and choosing Modify > Timeline > Add Keyframe. You can instead create a new keyframe by Control-clicking (Windows) or Command-clicking (Macintosh) a frame in the animation bar. To change the source file of an image, click the folder icon next to the Src text box in the Property inspector, then browse to and select a new image. To change the visibility of a layer, select inherit, visible, or hidden from the pop-up menu in the Vis text box of the Property inspector. Alternatively, use the eye icons in the Layers panel. See Changing layer visibility on page 207. To change the size of a layer, drag the layers resize handles or enter new values in the Width and Height text boxes in the Property inspector. Not all browsers can dynamically change the size of a layer. To change the stacking order of a layer, enter a new value in the Z-Index text box or use the Layers panel to change the stacking order of the current layer (see Changing the stacking order of layers on page 206).

Nested Region does not have a Show option; its display is controlled by the Editable Region option.
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 youve 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).
Make sure that the site root folder defined in each Contribute users site definition is the same as the site root folder defined in your site definition in Dreamweaver. If a users site root folder doesnt match yours, that user wont be able to use templates.

N OT E 312

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; its similar to a Dreamweaver template, except that pages that are based on it dont update when you change the template. Also, nonDreamweaver templates cant contain Dreamweaver template elements such as editable, locked, repeating, and optional regions.
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.

To use the Drag Layer action:
Select Insert > Layer or click the Draw Layer button on the Insert bar and draw a layer in the Document windows Design view. Select the body tag by clicking <body> in the tag selector at the bottom of the Document window. Open the Behaviors panel. Click the Plus (+) button and select Drag Layer from the Actions pop-up menu. If Drag Layer 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.
In the Layer pop-up menu, select the layer that you want to make draggable. Select either Constrained or Unconstrained from the Movement pop-up menu. Unconstrained movement is appropriate for puzzles and other drag-and-drop games. For slider controls and moveable scenery such as file drawers, curtains, and mini-blinds, select constrained movement.
For constrained movement, enter values (in pixels) in the Up, Down, Left, and Right text boxes. Values are relative to the starting position of the layer. To constrain movement within a rectangular region, enter positive values in all four text boxes. To allow only vertical movement, enter positive values for Up and Down and 0 for Left and Right. To allow only horizontal movement, enter positive values for Left and Right and 0 for Up and Down.
Enter values (in pixels) for the drop target in the Left and Top text boxes. The drop target is the spot to which you want the visitor to drag the layer. A layer is considered to have reached the drop target when its left and top coordinates match the values you enter in the Left and Top text boxes. Values are relative to the top left corner of the browser window. Click Get Current Position to automatically fill the text boxes with the current position of the layer.
Enter a value (in pixels) in the Snap if Within text box to determine how close the visitor must get to the drop target before the layer snaps to the target. Larger values make it easier for the visitor to find the drop target. drag handle for the layer, track the movement of the layer while it is being dragged, and trigger an action when the layer is dropped, click the Advanced tab. To specify that the visitor must click a particular area of the layer to drag the layer, select Area Within Layer from the Drag Handle pop-up menu; then enter the left and top coordinates and the width and height of the drag handle. This option is useful when the image inside the layer has an element that suggests dragging, such as a title bar or drawer handle. Do not set this option if you want the visitor to be able to click anywhere in the layer to drag it.

Importing JRun tags

If you use Macromedia JRun, you can import your JRun tags into Dreamweaver.
To import JRun tags into Dreamweaver:
Open a JSP page in Dreamweaver. Open the Tag Library editor (Edit > Tag Libraries). In the Tag Library editor, click the Plus (+) button and select JSP > Import JRun Server Tags from Folder. Enter a folder name, a URI, and a prefix. For more information, click the Help button in the dialog box. Click OK.
Using an external HTML editor with Dreamweaver
You can start an external HTML or text editor from Dreamweaver to edit the source code for the current document and then switch back to Dreamweaver to continue editing graphically. Dreamweaver detects any changes that have been saved to the document externally and prompts you to reload the document upon returning. You can use the following integrated HTML editors: Macromedia HomeSite (Windows only) or BBEdit (Macintosh only). You can also use any other text editor, such as Notepad, WordPad, TextPad, TextEdit, SimpleText, vi, or emacs.
Using an integrated HTML editor
When you install Dreamweaver, you can install HomeSite in Windows or a trial version of BBEdit on the Macintosh. Dreamweaver is tightly integrated with both of these products. Because of this integration, you can edit a document in both Dreamweaver and HomeSite/ BBEdit, switching from one application to the other, and the document is kept in sync automatically in both applications. In addition, both applications track the current selection; for example, if you select text in Dreamweaver and switch to BBEdit, the same element is selected in BBEdit.
You can open other external editors (besides HomeSite or BBEdit) from Dreamweaver, but the document is not kept in sync in both applications as it is with HomeSite or BBEdit. When you are finished making changes in an external editor other than HomeSite or BBEdit, you must manually refresh the document in Dreamweaver.
Using HomeSite (Windows only)
You dont need to enable integration for HomeSite; its integrated automatically when both applications are installed.

To use HomeSite:

Select Edit > Edit with HomeSite. Edit the document in HomeSite and save your changes. To return to Dreamweaver, click Dreamweaver in the Editor toolbar.
Using BBEdit (Macintosh only)
You can disable BBEdit integration if you prefer not to use BBEdit. Selections are not tracked between Dreamweaver and BBEdit if BBEdit integration is disabled. However, editing in Dreamweaver may be faster if BBEdit integration is disabled.

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

ColdFusion MX 7 IIS Apache (Windows) Apache (Macintosh) Jakarta Tomcat (Windows)

Default root folder

\CFusionMX7\wwwroot \Inetpub\wwwroot \apache\htdocs Users:MyUserName:Sites \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 pages 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:

Localhost URL

http://localhost:8500/testpage.htm http://localhost/testpage.htm http://localhost:80/testpage.htm http://localhost/~MyUserName/testpage.htm (where MyUserName is your Macintosh user name) http://localhost:8080/testpage.htm
By default the ColdFusion MX 7 web server runs on port 8500 and the Jakarta Tomcat web server runs on port 8080.
If the page doesnt open as expected, check for the following errors:
The web server is not started. Consult the web servers documentation for starting instructions. The file does not have an.htm or.html extension. You entered the pages file path (for example, c:\CFusionMX7\wwwroot\testpage.htm), not its URL (for example, http://localhost:8500/testpage.htm), in the browsers 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/.

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:
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. Click the Application Server icon on the expanded Site panel toolbar (the second icon from the left). The application servers root folder appears under Remote Site. Under Local Folder, select the dependent files. 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.
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 userfor 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:
In the Document window, select Live Data Settings from the View menu. The Live Data Settings dialog box appears.
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

Building an insert page block by block
You can add the basic building blocks of an insert page separately using the form tools and the Server Behaviors panel. You can also add the building blocks all at once using the Record Insertion Form application object. For more information, see Building the insert page in one operation on page 854. The procedure to build the insert page consists of two steps:
Adding an HTML form to the page to let users enter data Adding the Insert Record server behavior to insert records in a database table
To add an HTML form to an insert page:
Create a new dynamic page (File > New) and lay out your page using the Dreamweaver design tools. Add an HTML form by placing the insertion point where you want the form to appear and selecting Insert > Form > Form. An empty form is created on the page. You may have to enable Invisible Elements (View > Visual Aids > Invisible Elements) to see the forms boundaries, which are represented by thin red lines.
Name the HTML form by clicking the <form> tag at the bottom of the Document window to select the form, opening the Property inspector (Window > Properties), and entering a name in the Form Name text box. You dont need to specify an action or method attribute for the form to tell it where and how to send the record data when the user clicks the Submit button. The Insert Record server behavior sets these attributes for you.
Add a form object such as a text field (Insert > Form > Text Field) for each column in the database table you want to insert records into. The form objects are for data entry. Text fields are common for this purpose, but you can also use menus, checkboxes, and radio buttons. For more information on form objects, see Inserting HTML form objects on page 805.
Add a Submit button to the form (Insert > Form > Button). You can 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.
To add a server behavior to insert records in a database table:
In the Server Behaviors panel (Window > Server Behaviors), click the Plus (+) button and select Insert Record from the pop-up menu. The Insert Record dialog box appears. Complete the dialog box. For instructions, click the Help button in the dialog box. Click OK.

Depending on the component, you may have to complete some code by hand.
To create a ColdFusion component visually:
Open a ColdFusion page in Dreamweaver. In the Components panel (Window > Components), select CF Components from the pop-up menu. On the Components panel, click the Plus (+) button. The Create Component dialog box opens. Complete the dialog box and click OK. For more information, click the Help button in the dialog box.
Dreamweaver writes a.cfc file and saves it in the folder you specified. The new component also appears in the Components panel (after clicking Refresh). To remove a component, you must delete the.cfc file manually from the server. Related topics About ColdFusion components on page 885
Editing ColdFusion components in Dreamweaver on page 888 Building web pages that use ColdFusion components on page 889
Viewing ColdFusion components in Dreamweaver
Dreamweaver provides a way to visually examine the ColdFusion components (CFCs) located in your site folder or on the server as a whole. Dreamweaver reads the.cfc files and displays information about them in an easy-to-navigate tree view in the Components panel. Dreamweaver looks for the components on your testing server (see Specifying where dynamic pages can be processed on page 608). If you create new CFCs or make changes to existing CFCs, make sure to upload the CFC files to the testing server so they are accurately reflected in the Components panel. If you want to view components located on another server, change the testing server settings.
You can view any of the following information about your CF components:
List all of the ColdFusion components defined on the server. If youre running ColdFusion MX 7 or later, filter the list to show only the CFCs located in your site folder. Explore the functions and arguments of each component. Inspect the properties of functions that serve as web services.
To view the ColdFusion components in Dreamweaver:
Open any ColdFusion page in Dreamweaver. In the Components panel (Window > Components), select CF Components from the pop-up menu. Click the Refresh button in the panel to retrieve the components. Dreamweaver displays the component packages on the server. A component package is a folder that contains CFC files. If existing component packages do not appear, click the Refresh button in the panel toolbar.
To display only the CFCs located in your site folder, click the Show Only Current Sites CFCs button in the Components panel toolbar. This feature is only available if youve defined a computer running ColdFusion MX 6 or later as a testing server for Dreamweaver. For more information, see Enabling the ColdFusion enhancements on page 828.

gathering data from users 847, 909 General preferences 75 Generator objects, making dynamic 714 Get command 140 Get More Behaviors command 499 getting and putting files 140, 142 GIF images as tracing image 230 uses for 407 Go button, associating with a jump menu 510 Go To URL action 509 graphics. See images Grayscale color palette 350
HTML attribute reports 156 attributes, making dynamic 711 converting to XHTML 581 formatting and inserting 370, 381 non-breaking space 393 Roundtrip 551 setting file extension 96 source code, searching 405 source code, tag styles 394 See also code HTML forms. See forms HTTP server 600 Hyperlink dialog box 431 hypertext links 427
illegal characters in account names 647 image buttons 808 image maps creating client-side 447 hotspots 447 overview 446 selecting multiple hotspots 447 images about 407 aligning 386 applying behaviors to 420 as assets. See assets brightness and contrast 416 changing source file with Timelines 217 cropping 415 editing with external editor 419 formats, supported 407 in forms 802 image maps 446 inserting 409 inserting in Layout mode 265 making dynamic 710 optimizing using Fireworks 416 preloading (behavior) 513 resampling 415 scalability 414 sharpening 417 swapping and restoring swapped (behavior) 525 Import Table command 237
importing ASP.NET tags 543 custom tags 543 external CSS style sheet 400 JRun tags 545 JSP tags 544 Microsoft Word files 97 sites 132 tabular data 237, 382 text from other documents 382 includes, server-side 554 indenting code 541, 568, 573 Insert bar about 42 categories 46 docking 61 inserting code 563 preferences 57 showing categories as tabs 56 using 55 Insert E-Mail Link dialog box 435 Insert Jump Menu dialog box 442 Insert Named Anchor dialog box 434 Insert Navigation Bar dialog box 444 Insert Record behavior 856 INSERT, SQL keyword 997 inserting ActiveX controls 491 assets 164 comments 569 dates 392 div tags 221 Fireworks images 455 Flash button objects 476 Flash SWF files 480 Flash text objects 479 FlashPaper 482 image placeholder 411 images 409 Java applets 492 library items 173 media elements 472 nested layers 202 pages 853 rollover images 418 server-side includes 593 Shockwave movies 487 special characters 393
inspectors Property inspector 59 Tag inspector 586 See also panels integrating Dreamweaver with other applications 29 Internet Explorer, active content restricted 366 invalid tags, displaying 551 invisible elements comments 569 scripts 591 selecting 351 showing and hiding 353 ISP 628 italics, setting text in 389
Jakarta Tomcat application server (JSP) 604 JAR files 544 Java applets inserting 472, 492 making dynamic 714 Java Server Pages. See JSP JavaScript actions 495 alerts 512 attaching to form objects 815 behaviors 493 executing 500 files 97 inserting code in Design view 591 pop-up menu 520 processing form data 815 JDBC connection parameters 634 drivers 635, 991 JPEG images as tracing image 230 uses for 407 JRun 604 JRun tags 545 JSP (Java Server Pages) application servers 604 Callable server behavior 951 database connections 633 delete pages, building 945 importing tags 544 insert pages, building 853 JavaBeans 953