Download Print this page

Adobe 38040334 - Dreamweaver CS3 User Manual

Pc

Hide thumbs Also See for 38040334 - Dreamweaver CS3:

User manual (497 pages)

,

User manual (385 pages)

Table Of Contents

Table of Contents

Advertisement

Quick Links

Download this manual

CS 3

ADOBE

DREAMWEAVER

®

®

USER GUIDE

September 4, 2007

Table of Contents

Advertisement

Table of Contents

Troubleshooting

Need help?

Need help?

Do you have a question about the 38040334 - Dreamweaver CS3 and is the answer not in the manual?

Questions and answers

Summary of Contents for Adobe 38040334 - Dreamweaver CS3

Page 1: User Guide
CS 3 ADOBE DREAMWEAVER ® ® USER GUIDE September 4, 2007...
Page 2 The content of this guide is furnished for informational use only, is subject to change without notice, and should not be construed as a commitment by Adobe Systems Incorpo- rated.
Page 3: Table Of Contents
Adobe Help ........
Page 4 Chapter 7: Laying out pages with HTML Using visual aids for layout ............. . 173 Presenting content with tables .
Page 5 Working with Flash ..............382 Working with Bridge .
Page 6 Database connections for ASP.NET developers Database connections for JSP developers Troubleshooting database connections ..........525 Removing connection scripts .
Page 7 Chapter 23: Accessibility Dreamweaver and accessibility ............704 Dreamweaver accessibility features .
Page 8: Installation
Note: For more information, see the Read Me file on the installation disc. Activate the software If you have a single-user retail license for your Adobe software, you will be asked to activate your software; this is a simple, anonymous process that you must complete within 30 days of starting the software.
Page 9: Adobe Help Resources
To see the PDF documentation included with your software, look in the Documents folder on the installation or content DVD. Printed documentation Printed editions of the in-product Help are available for purchase in the Adobe Store, at www.adobe.com/go/store. You can also find books published by Adobe publishing partners in the Adobe Store. September 4, 2007...
Page 10 Using Help in the product In-product Help is available through the Help menu. After you start the Adobe Help Viewer, click Browse to see Help for additional Adobe products installed on your computer.
Page 11 Spry topics, see Using Dreamweaver. • ColdFusion Help is a selection of books in the Macromedia® ColdFusion® from Adobe documentation set (the full set is available on LiveDocs). These Help documents are intended for both beginners and advanced developers interested in ColdFusion.
Page 12: Resources
The Adobe Creative Suite 3 Video Workshop offers over 200 training videos covering a wide range of subjects for print, web, and video professionals. You can use the Adobe Video Workshop to learn about any Creative Suite 3 product. Many videos show you how to use Adobe applications together.
Page 13 When you start the Adobe Video Workshop, you choose the products you want to learn and the subjects you want to view. You can see details about each video to focus and direct your learning. Community of presenters With this release, Adobe Systems invited the community of its users to share their expertise and insights. Adobe and lynda.com present tutorials, tips, and tricks from leading designers and developers such as Joseph Lowery, Katrin...
Page 14 Extras You have access to a wide variety of resources that will help you make the most of your Adobe software. Some of these resources are installed on your computer during the setup process; additional helpful samples and documents are included on the installation or content disc.
Page 15 Bridge Home, a new destination in Adobe Bridge CS3, provides up-to-date information on all your Adobe Creative Suite 3 software in one convenient location. Start Adobe Bridge, then click the Bridge Home icon at the top of the Favorites panel to access the latest tips, news, and resources for your Creative Suite tools.
Page 16: Adobe Design Center
Note: Bridge Home may not be available in all languages. Adobe Design Center Adobe Design Center offers articles, inspiration, and instruction from industry experts, top designers, and Adobe publishing partners. New content is added monthly. You can find hundreds of tutorials for design products and learn tips and techniques through videos, HTML tutorials, and sample book chapters.
Page 17: Adobe Developer Center
Visit the Adobe Support website, at www.adobe.com/support, to find troubleshooting information for your product and to learn about free and paid technical support options. Click the Training link for access to Adobe Press books, a variety of training resources, Adobe software certification programs, and more.
Page 18: What's New
Adobe Labs fosters a collaborative software development process. In this environment, customers quickly become productive with new products and technologies. Adobe Labs is also a forum for early feedback, which the Adobe development teams use to create software that meets the needs and expectations of the community.
Page 19 141. Adobe CSS Advisor The Adobe CSS Advisor website contains information on the latest CSS issues, and is accessible directly from the Dreamweaver user interface during the Browser Compatibility Check process. More than a forum, a wiki page, or a discussion group, CSS Advisor makes it easy for you to comment with suggestions and improvements to existing content, or to add new issues for the benefit of the entire community.
Page 20: Dreamweaver Workflow And Workspace
Chapter 2: Workspace The Adobe® Dreamweaver® CS3 workspace contains the toolbars, inspectors, and panels that you use to build web pages. You can customize the general appearance and behavior of the workspace. Dreamweaver workflow and workspace Dreamweaver workflow overview You can use several approaches to create a website; this is one approach: Plan and set up your site Determine where the files will go and examine site requirements, audience profiles, and site goals.
Page 21 You can encapsulate application or business logic using technologies such as Macromedia® ColdFusion® from Adobe® and web services. If you need more flexibility, you can create custom server behaviors and interactive forms. (See “Making pages dynamic” on page 538.) Test and publish Testing your pages is an ongoing process that happens throughout the development cycle.
Page 22 Windows “snap” automatically to each other, to the sides of the screen, and to the Document window as you drag or resize them. A. Insert bar B. Document toolbar C. Document window D. Panel groups E. Tag selector F. Property inspector G. Files panel For a tutorial on setting up the Dreamweaver workspace, see www.adobe.com/go/vid0143. September 4, 2007 DREAMWEAVER CS3...
Page 23 DREAMWEAVER CS3 User Guide See also “Using toolbars, inspectors, context menus, and panels” on page 27 “Choose the workspace layout (Windows)” on page 34 “Choose the workspace layout (Macintosh)” on page 34 “Display tabbed documents (Macintosh)” on page 34 Workspace elements overview The workspace includes the following elements.
Page 24 See also “Working in the Document window” on page 24 “Using toolbars, inspectors, context menus, and panels” on page 27 “About panel groups” on page 31 Document window overview The Document window shows the current document. You can select any of the following views: A design environment for visual page layout, visual editing, and rapid application development.
Page 25: Status Bar Overview
DREAMWEAVER CS3 User Guide Displays only the Design view in the Document window. Show Design View Note: If you are working with XML, JavaScript, CSS, or other code-based file types, you cannot view the files in Design view and the Design and Split buttons are dimmed out. Allows you to enter a title for your document, to be displayed in the browser’s title bar.
Page 26 DREAMWEAVER CS3 User Guide A. Tag selector B. Select tool C. Hand tool D. Zoom tool E. Set magnification F. Window Size pop-up menu G. Document size and estimated download time Shows the hierarchy of tags surrounding the current selection. Click any tag in the hierarchy to select Tag selector that tag and all its contents.
Page 27 DREAMWEAVER CS3 User Guide Lets you insert tables, tags, frames, and Spry widgets. You can also choose two views for The Layout category tables: Standard (default) and Expanded Tables. Contains buttons for creating forms and inserting form elements, including Spry validation The Forms category widgets.
Page 28 Lets you enable or disable CSS styles. This button works independently of the other Toggle Displaying Of CSS Styles media buttons. For a tutorial on designing style sheets for print and handheld devices, see www.adobe.com/go/vid0156. See also “Display toolbars” on page 27...
Page 29 DREAMWEAVER CS3 User Guide Property inspector overview The Property inspector lets you examine and edit the most common properties for the currently selected page element, such as text or an inserted object. The contents of the Property inspector vary depending on the element selected.
Page 30 DREAMWEAVER CS3 User Guide For Dreamweaver sites, you can also customize the Files panel by changing the view—either your local or remote site—that appears by default in the collapsed panel. See also “Work with files in the Files panel” on page 80 CSS Styles panel overview The CSS Styles panel lets you track the CSS rules and properties affecting a currently selected page element (Current mode), or the rules and properties affecting an entire document (All mode).
Page 31: Working In The Document Window
• Use a tracing image as the page background to help you duplicate a design created in an illustration or image- editing application such as Adobe® Photoshop® or Adobe® Fireworks®. • Use rulers and guides to provide a visual cue for precise positioning and resizing of page elements.
Page 32 Show both Code and Design views ❖ Do one of the following: • Select View > Code and Design. • In the Document toolbar, click the Show Code and Design Views button Toggle between Code view and Design view ❖ Press Control+backquote (`).
Page 33 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.
Page 34: Using Toolbars, Inspectors, Context Menus, And Panels
Alt text, redundant nested tags, removable empty tags, and untitled documents. Enables you to view all FTP file transfer activity. FTP Log Lets you view information to debug a Macromedia® ColdFusion® from Adobe® application. Server Debug See also “Search for tags, attributes, or text in code”...
Page 35 Use the Insert bar The Insert bar contains buttons for creating and inserting objects such as tables and images. The buttons are organized into categories. See also “Insert bar overview” on page 19 “Edit tags with Tag editors” on page 319 “Select and view elements in the Document window”...
Page 36 Depending on the object, a corresponding object-insertion dialog box may appear, prompting you to browse to a file or specify parameters for an object. Or, Dreamweaver may insert code into the document, or open a tag editor or a panel for you to specify information before the code is inserted. For some objects, no dialog box appears if you insert the object in Design view, but a tag editor appears if you insert the object in Code view.
Page 37 Insert objects using buttons in the Favorites category ❖ Select the Favorites category from the left side of the Insert bar, and then click the button for any Favorites object that you added. Use the Property inspector The Property inspector lets you examine and edit the most common properties for the currently selected page element, such as text or an inserted object.
Page 38 Select a command from the context menu. About panel groups Panels in Dreamweaver are grouped together into panel groups. The selected panel within a panel group appears as a tab. Each panel group can be expanded or collapsed, and can be docked or undocked with other panel groups. Panel groups can also be docked to the integrated application window (Windows only).
Page 39 Open a panel group or panel that isn’t visible on your screen ❖ From the Window menu, select a panel name. A check mark next to an item in the Window menu indicates that the named item is currently open (though it may be hidden behind other windows).
Page 40 Dock a panel group to other panel groups (floating workspace) or to the integrated window (Windows only) ❖ Drag the panel group by its gripper until its outline indicates that it’s docked. Undock a panel from a panel group ❖ Select Group With >...
Page 41: Customizing The Dreamweaver Cs3 Workspace
The same integrated workspace as Designer, but with the panel groups docked on the left, in a layout similar Coder to that used by Adobe® HomeSite® and ColdFusion, and with the Document window showing Code view by default. Note: You can dock panel groups on either side of the workspace in either layout.
Page 42 Change the default tabbed document setting Select Dreamweaver > Preferences, and then select the General category. Select or deselect Open Documents in Tabs, and click OK. Dreamweaver does not alter the display of documents that are currently open when you change preferences. Documents opened after you select a new preference, however, display according to the preference you selected.
Page 43 For example, in Windows XP, they’re stored in C:\Documents and Settings\username\Application Data\Adobe\Dreamweaver 9\Configuration (which may be inside a hidden folder). In Windows Vista, they’re stored in C:\Users\username\Application Data\Adobe\Dreamweaver 9\Configuration (which may be inside a hidden folder).
Page 44 Switch To Plain Paragraph After Heading of a heading paragraph in Design view creates a new paragraph tagged with a that’s tagged with a heading tag such as of a heading paragraph creates a new paragraph tagged with the same heading tag (allowing you to type multiple headings in a row and then go back and fill in details).
Page 45 lists the available spelling dictionaries. If a dictionary contains multiple dialects or spelling Spelling Dictionary conventions (such as American English and British English), the dialects are listed separately in the Dictionary pop-up menu. See also “Workspace layout overview” on page 14 “Update links automatically”...
Page 46 See also “Use the color picker” on page 223 “Change the highlight color of div tags” on page 164 Change a highlighting color Select Edit > Preferences and select the Highlighting category. Beside the object you want to change the highlighting color for, click the color box, and then use the color picker to select a new color, or enter a hexadecimal value.
Page 47: Setting Up A Dreamweaver Site
An Adobe® Dreamweaver® CS3 site is a collection of all of the files and assets in your website. You can create web pages on your computer, upload them to a web server, and maintain the site by transferring updated files whenever you save them.
Page 48 Understanding local and remote folder structure When you want to use Dreamweaver to connect to a remote folder, you specify the remote folder in the Remote Info category of the Site Definition dialog box. The remote folder that you specify (also referred to as the “host directory”) should correspond to the local root folder of your Dreamweaver site.
Page 49 Deletes the selected site; you cannot undo this action. Remove Enables you to export a site’s settings as an XML file (*.ste). Export Enables you to select a site’s settings file (*.ste) to import. Import See also “Import and export site settings” on page 51 Set up and edit a local root folder After you plan your site structure, you set up (define) a site in Dreamweaver.
Page 50 DREAMWEAVER CS3 User Guide Local root folder setup options If you choose to set the local root folder options directly instead of by using the Basic tab of the Site Definition dialog box, click the Advanced tab and enter the information. Note: Only the first two options are required to set up a working site on your computer.
Page 51 (Remote Development Services) Use this setting if you connect to your web server using RDS. For this access method, your remote folder must be on a computer running Macromedia® ColdFusion® from Adobe®. Use this setting if you connect to your web server using Microsoft Visual SourceSafe.
Page 52 If you’re not sure whether you use passive FTP, check with your system administrator. For more information, see TechNote 15220 on the Adobe website at www.adobe.com/go/15220. Select Use Extended Data Connection Type (IPv6) if you are using an IPv6-enabled FTP server.
Page 53 Select Maintain Synchronization Information if you want to automatically synchronize your local and remote files. (This option is selected by default.) Select Automatically Upload Files To Server On Save if you want Dreamweaver to upload your file to your remote site when you save the file.
Page 54 • Enter your RDS user name and password. Note: These options might not appear if you set your user name and password in the ColdFusion Administrator security settings. • Select Save if you want Dreamweaver to remember your settings. Click OK to close the Configure RDS Server dialog box. Select the Automatically Upload Files To Server On Save if you want Dreamweaver to upload your file to your remote site when you save the file.
Page 55 • If you encounter problems with long filenames, rename them with shorter names. On the Mac OS, filenames cannot be more than 31 characters long. • Many servers use symbolic links (UNIX), shortcuts (Windows), or aliases (Macintosh) to connect a folder on one part of the server’s disk with another folder elsewhere.
Page 56 The URL prefix comprises the domain name and any of your website’s home directory’s subdirectories or virtual directories, but not a filename. For example, if your application’s URL is www.adobe.com/mycoolapp/start.jsp, you would enter the following URL prefix: www.adobe.com/mycoolapp/.
Page 57 http://www.mystartup.com/warehouse/ Refers to the home directory in your URLs when the client (usually a browser, but in this case Localhost Dreamweaver) runs on the same system as your web server. Suppose Dreamweaver is running on the same Windows system as the web server, your home directory is c:\sites\company, and you defined a virtual directory called warehouse to refer to the folder you want to use to process dynamic pages.
Page 58 Remove a Dreamweaver site from your list of sites Removing a Dreamweaver site and all of its setup information from your list of sites does not remove the site files from your computer. Select Site > Manage Sites. Select a site name. Click Remove, click Yes to remove the site from the list or No to leave the site name, and then click Done.
Page 59: Working With A Visual Map Of Your Site
Working with a visual map of your site Using site maps You can view a local folder for a Dreamweaver site as a visual map of linked icons, called a site map. Use the site map to add new files to a Dreamweaver site, or to add, modify, or remove links. The site map shows the site structure two levels deep, starting from the home page.
Page 60 • In the expanded Files panel, click the Site Map button in the toolbar, and then select Map Only (the site map without the local file structure) or Map And Files (includes the local file structure). Note: If you have not defined a home page, or if Dreamweaver can’t find an index.html or index.htm page in the current site to use as the home page, Dreamweaver prompts you to select a home page.
Page 61 The site map is redrawn in the window as if the specified page were at the root of the site. The Site Navigation text box above the site map displays the path from the home page to the specified page. Select any item in the path to view the site map from that level by clicking once.
Page 62 To hide a file using the site map, you must mark the file as hidden. When you hide a file, its links are also hidden. When you display a file marked as hidden, the icon and its links are visible in the site map, but the names appear in italics.
Page 63: Managing Contribute Sites With Dreamweaver
Managing Contribute sites Adobe® Contribute® CS3 combines a web browser with a web-page editor. It enables your colleagues or clients to browse to a page in a site that you created, and to edit or update the page if they have permission to do so. Contribute users can add and update basic web content, including formatted text, images, tables, and links.
Page 64 You can use Dreamweaver to connect to and modify a file in a Contribute site. Most Dreamweaver capabilities work the same way with a Contribute site as they do with any other site. However, when you use Dreamweaver with a Contribute site, Dreamweaver automatically performs certain file-management operations, such as saving multiple revisions of a document, and logging certain events in the CPS Console.
Page 65 When you check a file in to a Contribute site, Dreamweaver makes a backup copy of the previous checked-in version of the file in the _baks folder and adds your user name and a date stamp to a Design Notes file. See also “Checking in and checking out files”...
Page 66 Similarly, under some circumstances an outdated lock file may be accidentally left on the server. If that happens, you must manually delete the lock file to allow others to edit the page. Prepare a site for use with Contribute If you’re preparing an existing Dreamweaver site for Contribute users, you need to explicitly enable Contribute compatibility to use Contribute-related features;...
Page 67 Click OK and then click Done. See also “Rolling back files (Contribute users)” on page 99 Administer a Contribute site using Dreamweaver After you enable Contribute compatibility, you can use Dreamweaver to start Contribute to perform site adminis- tration tasks. Note: Contribute must be installed on the same computer as Dreamweaver.
Page 68 Delete, move, or rename a remote file in a Contribute site Deleting a file from the remote server that hosts a Contribute site works much like deleting a file from the server for any Dreamweaver site. However, when you delete a file from a Contribute site, Dreamweaver asks whether to delete all older versions of the file.
Page 69: Working On Files Without Defining A Site
Unlock a file in a Contribute site Note: Before following this procedure, make sure that the file really isn’t checked out. If you unlock a file while a Contribute user is editing it, multiple users might edit the file simultaneously. Do one of the following: •...
Page 70 Enter the URL that users type in their browsers to open your web application, but do not include any filename. Suppose your application’s URL is www.macromedia.com/mycoolapp/start.jsp. In this case, you would enter the following URL prefix: www.adobe.com/mycoolapp/. Click the Settings button to complete the access information.
Page 71: Basic Tab Options
Basic tab options Set Basic tab Editing Files options The Site Definition wizard has three sections to help you set up a Dreamweaver site: Editing Files, Testing Files, and Sharing Files. Each section might have multiple screens depending on the settings you select. At the top of the dialog box, the bold section name indicates where you are in the setup process.
Page 72 Enter the URL that users type in their browsers to open your web application, but do not include any filename. Suppose your application’s URL is www.adobe.com/mycoolapp/start.jsp. In this case, you would enter the following URL prefix: www.adobe.com/mycoolapp/.
Page 73 For this access method, you must have a server that supports this protocol, such as Microsoft Internet Information Server (IIS) 5.0 or an appropriately configured installation of Apache web server. See also “Set up a remote folder” on page 43 Set Basic tab remote folder setup options The purpose of this dialog box is to decide whether to set up a remote server folder.
Page 74 See also “Set up a remote folder” on page 43 Set Basic tab Sharing Files options (check in/check out) The purpose of this dialog box is to set up the file Check In/Check Out system, if you’re working in a collaborative environment (or working alone, but on multiple machines).
Page 75: Creating And Opening Documents
Chapter 4: Creating and managing files In addition to creating web pages, you can easily organize all of the files and assets that belong to your website. You can create, manage, and synchronize files, check files in and out, and test how your site will work in different browsers.
Page 76 Extensible Stylesheet Language files have a .xsl or .xslt extension. They are used to style XML data that you want to display on a web page. ColdFusion Markup Language files have a .cfm extension. They are used to process dynamic pages. CFML ASP.NET files have a .aspx extension and are used to process dynamic pages.
Page 77 Note: For more information about XHTML, see the World Wide Web Consortium (W3C) website, which contains the specification for XHTML 1.1 - Module-Based XHTML (www.w3.org/TR/xhtml11/) and XHTML 1.0 (www.w3c.org/TR/xhtml1/), as well as XHTML validator sites for web-based files (http://validator.w3.org/) and local files (http://validator.w3.org/file-upload.html).
Page 78 Select the kind of page you want to create from the Page Type column. For example, select HTML template to create a plain HTML template, select ColdFusion to create a ColdFusion template, and so on. If you want your new page to contain a CSS layout, select a predesigned CSS layout from the Layout column; otherwise, select None.
Page 79 Save the new document (File > Save). If you haven’t added editable regions to the template yet, a dialog box appears telling you that there are no editable regions in the document. Click OK to close the dialog box. In the Save As Template dialog box, select a site in which to save the template, and add a description for the template in the Description box.
Page 80 Click Create and save the document (File > Save). Create a 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 If you just created the template you want to apply, you might need to click the Refresh button to see it.
Page 81 Unicode Normalization Form There are four Unicode Normalization Forms. The most important is Normalization Form C because it's the most common one used in the Character Model for the World Wide Web. Adobe provides the other three Unicode Normalization Forms for completeness.
Page 82 Show New Document Dialog Box on Control+N ically create a document of the default document type when you use the key command. In Unicode, there are characters that are visually similar but can be stored within the document in different ways. For example, “ë”...
Page 83 You can also use the Files panel to open files. Navigate to and select the file you want to open. Note: If you haven’t already done so, it’s a good idea to organize files you plan to open and edit in a Dreamweaver site, instead of opening them from another location.
Page 84: Managing Files And Folders
Removes all Word-specific CSS, including inline CSS styles when possible (where the parent style has Clean Up CSS the same style properties), style attributes beginning with “mso, ” non-CSS style declarations, CSS style attributes from tables, and all unused style definitions from the head. You can further customize this option using the Detailed tab. Removes HTML tags, converting the default body text to size 2 HTML text.
Page 85 DREAMWEAVER CS3 User Guide For Dreamweaver sites, use the following options to display or transfer files: A. Site Files view B. Testing Server view C. Site Map view D. Site pop-up menu E. Connect/Disconnect F. Refresh G. Put File(s) H. Get File(s) I.
Page 86 Transfers a copy of the local file to the remote server and makes the file available for editing by Check In File(s) others. The local file becomes read-only. This option is not available if the Enable File Check In and Check Out option in the Site Definitions dialog box is disabled for the current site.
Page 87 Change the size of the view area in the expanded Files panel ❖ In the Files panel (Window > Files), with the panel expanded, do one of the following: • Drag the bar that separates the two views to increase or decrease the view area of the right or left pane. •...
Page 88 Open a file In the Files panel (Window > Files), select a site, server, or drive from the pop-up menu (where the current site, server, or drive appears). Navigate to the file you want to open. Do one of the following: •...
Page 89 Note: Dreamweaver refreshes the Files panel when you make changes in another application, then return to Dreamweaver. Find files in your Dreamweaver site Dreamweaver makes it easy to find selected, open, checked out, or recently modified files in your site. You can also find files that are newer in your local or remote site.
Page 90 Find recently modified files in your site In the collapsed Files panel (Window > Files), click the Options menu in the upper-right corner of the Files panel, and then select Edit > Select Recently Modified. Do one of the following to indicate search dates for the report: •...
Page 91 Note: The best way to manage your files is to create a Dreamweaver site. See also “Set up and edit a local root folder” on page 42 Open an existing Dreamweaver site ❖ In the Files panel (Window > Files), select a site from the menu (where the current site, server, or drive appears). Open a folder on a remote FTP or RDS server In the Files panel (Window >...
Page 92 Note: To move a file that Dreamweaver copies by default, hold down the Shift key (Windows) or the Command key (Macintosh) while you drag. To copy a file that Dreamweaver moves by default, hold the Control key (Windows) or the Option key (Macintosh) while you drag.
Page 93 You can define whether the types of files that you transfer are transferred as ASCII (text) or binary, by customizing the FTPExtensionMap.txt file in the Dreamweaver/Configuration folder (on the Macintosh, FTPExtension- MapMac.txt). For more information see, Extending Dreamweaver. See also “Set up a remote folder”...
Page 94: Getting And Putting Files To And From Your Server
Click the heading again to reverse the order (ascending or descending) by which Dreamweaver sorts the column. Getting and putting files to and from your server File transfer and dependent files If you’re working in a collaborative environment, use the Check In/Check Out system to transfer files between local and remote sites.
Page 95 • Save a file to a remote server • Insert an image from a remote server • Open a file from a remote server • Auto put files upon saving • Drag files to the remote site • Cut, copy, or paste files on the remote site •...
Page 96 Dreamweaver also records all FTP file transfer activity. If an error occurs when you are transferring a file using FTP, the Site FTP log can help you determine the problem. For a tutorial on putting files on a remote server, see www.adobe.com/go/vid0163. For a tutorial on troubleshooting publishing problems, see www.adobe.com/go/vid0164.
Page 97 Note: You can put only those files for which the local version is more recent than the remote version. Do one of the following to put the file on the remote server: • Click the Put button in the Files panel toolbar. •...
Page 98: Checking In And Checking Out Files
Dreamweaver, the LCK file is visible next to the checked-out file in the file hierarchy to help prevent such accidents. For more information on LCK files and how the Check In/Check Out system works, see TechNote 15447 on the Adobe website at www.adobe.com/go/15447. See also “Getting and putting files to and from your server”...
Page 99 Select a site and click Edit. In the Advanced tab, select Remote Info from the category list on the left. Select Enable File Check In and Check Out if you are working in a team environment (or working alone but from several different machines).
Page 100 Click OK. Dreamweaver configures the site for WebDAV access. When you use the Check In or Check Out command on any site file, the file is transferred using WebDAV. Note: WebDAV may be unable to properly check out any files with dynamic content like PHP tags or SSIs because the HTTP GET rendered these as they are checked out.
Page 101: Synchronizing Files
A lock symbol appears beside the local file’s icon indicating that the file is now read-only. Important: If you check in the currently active file, the file may be automatically saved before it’s checked in, depending on the preference options you’ve set. Check in an open file from the Document window Make sure the file you want to check in is open in the Document window.
Page 102 Check which files are newer on the local or remote site, without synchronizing ❖ In the Files panel, do one of the following: • Click the Options menu in the upper-right corner, and then select Edit > Select Newer Local or Edit > Select Newer Remote.
Page 103: Comparing Files For Differences
Verify the action that will be performed for each file. To change the action for a particular file, select the file, and then click one of the action icons at the bottom of the preview window. The Compare action works only if you installed and specified a file comparison tool in Dreamweaver. If Compare the action icon is grayed out, the action cannot be performed.
Page 104 If you use FileMerge BBEdit TextWrangler Note: The usr folder is normally hidden in Finder. However, you can access it with the Browse button in Dreamweaver. Note: The actual results displayed depends on the diff tool you are using. Check the user manual for your tool to under- stand how to interpret the results.
Page 105 Note: If you have a one-button mouse, Control-click the file instead. Compare an open file to a remote file You can compare a file open in Dreamweaver to its counterpart on the remote server. ❖ In the Document window, select File > Compare with Remote. The file comparison tool starts and compares the two files.
Page 106: Cloaking Folders And Files In Your Site
Rolling back files (Contribute users) Roll back files (Contribute users) Dreamweaver automatically saves multiple versions of a document when you have Adobe Contribute compatibility enabled. Note: You must have Contribute installed on the same machine as Dreamweaver. File rollback must also be enabled in Contribute’s administrative settings. For more information, see Administering Contribute.
Page 107 Note: Dreamweaver excludes cloaked templates and library items from Get and Put operations only. Dreamweaver does not exclude these items from batch operations, because it might cause them to become out of sync with their instances. Enable and disable site cloaking Site cloaking enables you to exclude folders and file types in a site from sitewide operations such as Get or Put, and is enabled by default.
Page 108 Right-click (Windows) or Control-click (Macintosh), then select Cloaking > Settings. Select the Cloak Files Ending With option and enter the file types to cloak in the box. For example, you might enter to cloak all files with names ending in .jpg in your site. .jpg Separate multiple file types with one space;...
Page 109: Storing File Information In Design Notes
If you open a file in Adobe® Fireworks® or Flash, and export it to another format, Fireworks and Flash automatically save the name of the original source file in a Design Notes file. For example, if you open myhouse.png in Fireworks and export it to myhouse.gif, Fireworks creates a Design Notes file called myhouse.gif.mno.
Page 110 Note: The Clean Up Design Notes command only deletes MNO (Design Notes) files. It does not delete the _notes folder or the dwsync.xml file inside the _notes folder. Dreamweaver uses the dwsync.xml file to maintain information about site synchronization. Select Upload Design Notes For Sharing to upload Design Notes associated with your site with the rest of your documents and click OK.
Page 111: Testing Your Site
Open Design Notes associated with a file ❖ Do one of the following to open the Design Notes: • Open the file in the Document window, then select File > Design Notes. • In the Files panel, right-click (Windows) or Control-click (Macintosh) the file, then select Design Notes. •...
Page 112 Dreamweaver includes or through an external version-control application. 8. Use the discussion forums. The Dreamweaver discussion forums can be found on the Adobe website at www.adobe.com/go/dreamweaver_newsgroup. The forums are a great resource for getting information on different browsers, platforms, and so on. You can also discuss technical issues and share helpful hints with other Dreamweaver users.
Page 113 After you run a report, you can save it as an XML file, then import it into a template instance or a database or spread- sheet and print it, or display it on a website. Note: You can also add different report types to Dreamweaver through the Adobe Dreamweaver Exchange website. See also “Reports in Dreamweaver”...
Page 114 If you selected an HTML report, select from the following reports: Creates a report that lists all nested font tags that can be combined to clean up the Combinable Nested Font Tags code. For example, <font color="#FF0000"><font size="4">STOP!</font></font> Creates a report listing all the Missing Alt Text Alternate text appears in place of images for text-only browsers or for browsers that have been set to download images manually.
Page 115: About Assets And Libraries
About assets You can use Adobe® Dreamweaver® CS3 to keep track of and preview assets stored in your site, such as images, movies, colors, scripts, and links. You can also drag an asset directly to insert it in a page of the current document.
Page 116: Working With Assets
DREAMWEAVER CS3 User Guide Note: If the library item contains links, the links may not work in the new site. Also, images in a library item aren’t copied to the new site. When you use a library item, Dreamweaver inserts a link to it, rather than the item itself, in the web page. That is, Dreamweaver inserts a copy of the HTML source code for that item into the document and adds an HTML comment containing a reference to the original, external item.
Page 117 ), and local file ( ) links. mailto file:// Files in any version of Adobe Flash. The Assets panel displays only SWF files (compressed Flash files), but Flash not FLA (Flash source) files. Files in any version of Adobe Shockwave.
Page 118 Sort assets ❖ Click a column heading. 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. Resize a column ❖...
Page 119 Apply a color to text using the Assets panel The Assets panel shows the colors you’ve already applied to various elements, such as text, table borders, backgrounds, and so on. Select the text in the document. In the Assets panel, select the Colors category Select the desired color and click Apply.
Page 120 Edit an asset When you edit an asset in the Assets panel, the behavior varies according to the asset type. For some assets, such as images, you use an external editor, which opens automatically if you have defined an editor for that asset type. You can edit colors and URLs in the Favorites list only.
Page 121: Creating And Managing A List Of Favorite Assets
The assets are copied to their corresponding locations in the target site. Dreamweaver creates new folders in the target site’s hierarchy as needed. The assets are also added to the target site’s Favorites list. Note: If the asset you copied is a color or a URL, it appears only in the target site’s Favorites list. Because colors and URLs don’t correspond to files, there’s no file to copy into the other site.
Page 122 Select the Favorites option at the top of the panel. Click the New Color or New URL button Do one of the following: • Select a color using the color picker, then give the color a nickname if desired. To close the color picker without selecting a color, press Esc or click the gray bar at the top of the color picker. •...
Page 123: Working With Library Items
Working with library items Create a library item Library items are elements that you want to reuse or update frequently throughout your website. See also “About library items” on page 108 Create a library item based on a selection In the Document window, select a portion of a document to save as a library item. Do one of the following: •...
Page 124 Edit library items and update documents When you edit a library item, you can update all documents that use that item. If you choose not to update, the documents remain associated with the library item; you can update them later. You can rename items to break their connection with documents or templates, delete items from the site’s library, and recreate a missing library item.
Page 125 Click elsewhere, or press Enter (Windows) or Return (Macintosh). Specify whether to update documents that use the item by choosing either Update or Don’t Update. Delete a library item from a library When you delete a library item, Dreamweaver removes it from the library but doesn’t change the contents of any documents that use the item.
Page 126 Opens the library item’s source file for editing. This is equivalent to selecting the item in the Assets panel and Open clicking the Edit button. Breaks the link between the selected library item and its source file. You can edit the detached Detach From Original item in the document, but it’s no longer a library item and isn’t updated when you change the original.
Page 127: Understanding Cascading Style Sheets
Chapter 6: Creating pages with CSS Adobe® Dreamweaver® CS3 includes many features that help you use Cascading Style Sheets (CSS) to create styles and layouts for your web pages. Understanding Cascading Style Sheets About Cascading Style Sheets Cascading Style Sheets (CSS) is a collection of formatting rules that control the appearance of content in a web page.
Page 128 h1 { font-size: 16 pixels; font-family: Helvetica; font-weight:bold; An individual declaration consists of two parts, the property (such as In the previous CSS rule, a particular style has been created for be 16 pixels in size, Helvetica font, and bold. The style (which comes from a rule, or a collection of rules) resides in a place separate from the actual text it’s formatting—usually in an external style sheet, or in the head portion of an HTML document.
Page 129 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. See also “Apply, remove, or rename class styles” on page 136 About cascading styles The term cascading refers to the way a browser ultimately displays styles for specific elements on a web page.
Page 130 Property inspector, and displays all CSS rules defined for the current document, whether those rules are embedded in the head of the document or in an external style sheet. Adobe recommends that you use the CSS Styles panel (rather than the Property inspector) as the primary tool for creating and editing your CSS. As a result, your code will be cleaner and easier to maintain.
Page 131: Creating And Managing Css
For example, the rule shown below uses longhand CSS syntax. Note that the , and properties have been assigned their default values. font-size-adjust font-style h1 { font-weight: bold; font-size: 16pt; line-height: 18pt; font-family: Arial; font-variant: normal; font-style: normal; font-stretch: normal; font-size-adjust: none Rewritten as a single, shorthand property, the same rule might appear as follows: h1 { font: bold 16pt/18pt Arial }...
Page 132 DREAMWEAVER CS3 User Guide The CSS Styles panel in Current mode In Current mode, the CSS Styles panel displays three panes: a Summary for Selection pane that displays the CSS properties for the current selection in the document, a Rules pane that displays the location of selected properties (or a cascade of rules for the selected tag, depending on your selection), and a Properties pane that lets you edit CSS properties for the rule applied to the selection.
Page 133 DREAMWEAVER CS3 User Guide The Summary for Selection pane arranges properties in increasing order of specificity. In the above example, the tag style defines the font size and the class style defines the font family and the color. (The font family defined by the class style overrides the font family defined by the tag style because class selectors have higher specificity than tag selectors.
Page 134 DREAMWEAVER CS3 User Guide The CSS Styles panel in All mode In All mode, the CSS Styles panel displays two panes: an All Rules pane (on top), and a Properties pane (on bottom). The All Rules pane displays a list of rules defined in the current document as well as all rules defined in style sheets attached to the current document.
Page 135 A. Category View B. List View C. Set Properties View Divides the Dreamweaver-supported CSS properties into eight categories: font, background, block, Category View border, box, list, positioning, and extensions. Each category’s properties are contained in a list that you expand or collapse by clicking the Plus (+) button next to the category name.
Page 136: Create A New Css Rule
Set the CSS style options you want to apply: When Creating CSS Rules Use Shorthand For in shorthand. Controls whether Dreamweaver rewrites existing styles in shorthand. When Editing CSS Rules Use Shorthand Select If Original Used Shorthand to leave all styles as they are. Select According to Settings Above to rewrite styles in shorthand for the properties selected in Use Shorthand For.
Page 137 Define CSS type properties You use the Type category in the CSS Rule Definition dialog box to define basic font and type settings for a CSS style. Open the CSS Styles panel (Shift + F11), if it isn’t already open. Double-click an existing rule or property in the top pane of the CSS Styles panel.
Page 138 Sets the background image for the element.The background image attribute is supported by both Background Image browsers. Determines whether and how the background image is repeated. The Repeat attribute is supported by both Repeat browsers. • No Repeat displays the image once at the beginning of the element. •...
Page 139 returns, is respected); Nowrap specifies that the text only wraps when a not display this attribute in the Document window. The Whitespace attribute is supported by Netscape Navigator and Internet Explorer 5.5. Specifies whether an element is displayed and if so how it is displayed. None disables the display of an Display element to which it is assigned.
Page 140 In the CSS Rule Definition dialog box, select Border, and set any of the following style properties. (Leave the property blank if it is not important to the style.) Sets the style appearance of the border. The way the style appears depends on the browser. Deselect Same For Style All to set the border style for individual sides of the element.
Page 141 • Relative places the content block using the coordinates entered in the Placement boxes relative to block’s position in the text flow of the document. For example, giving an element a relative position and top and left coordinates of 20px each will shift the element 20px to the right and 20px down from its normal position in the flow. Elements can also be positioned relatively, with or without top, left, right, or bottom coordinates, to establish a context for absolutely-positioned children.
Page 142 Note: There are a number of other extension properties available in Dreamweaver, but to access them, you need to go through the CSS Styles panel. You can easily see a list of extension properties available by opening the CSS Styles panel (Windows >...
Page 143 Do one of the following: • Double-click a rule in the All Rules pane to display the CSS Rule Definition dialog box, and then make your changes. • Select a rule in the All Rules pane, and then edit the rule’s properties in the Properties pane below. •...
Page 144 Place the insertion point in a paragraph to apply the style to the entire paragraph. If you select a range of text within a single paragraph, the CSS style affects only the selected range. To specify the exact tag to which the CSS style should be applied, select the tag in the tag selector located at the lower left of the Document window.
Page 145 Move CSS rules to a new style sheet Do one of the following: • In the CSS Styles panel, select the rule or rules you want to move. Then right-click the selection and select Move CSS Rules from the context menu. To select multiple rules, Control-click (Windows) or Command-click (Macintosh) the rules you want to select.
Page 146 Right-click and select CSS Styles > Convert Inline CSS to Rule. In the Convert Inline CSS dialog box, enter a class name for the new rule, and then do one of the following: • Specify a style sheet where you want the new CSS rule to appear and click OK. •...
Page 147 See also “Create a page based on a Dreamweaver sample file” on page 73 Edit a CSS style sheet A CSS style sheet typically includes one or more rules. You can edit an individual rule in a CSS style sheet using the CSS Styles panel, or if you prefer, you can work directly in the CSS style sheet.
Page 148 For each potential bug that it finds, Dreamweaver also provides a direct link to documentation about the bug on Adobe CSS Advisor, a website that details commonly known browser rendering bugs, and offers solutions for fixing them.
Page 149 Select the element affected by a found issue ❖ Double-click the issue in the Results panel. Jump to the next or previous found issue in the code ❖ Select Next Issue or Previous Issue from the Browser Compatibility Check menu in the Document toolbar. Select browsers for Dreamweaver to check against In the Results panel (Window >...
Page 150 Click the Browse Report button on the left side of the Results panel. Hover over buttons in the Results panel to see button tool tips. Open the Adobe CSS Advisor website In the Results panel (Window > Results), select the Browser Compatibility Check tab.
Page 151 When you find a style sheet whose formatting rules meet your design criteria, click OK. Update CSS style sheets in a Contribute site Adobe Contribute users can’t make changes to a CSS style sheet. To change a style sheet for a Contribute site, use Dreamweaver.
Page 152: Laying Out Pages With Css
If you are an advanced user, you can also insert tags manually and apply CSS positioning styles to them to create page layouts. For a tutorial on creating CSS page layouts, see www.adobe.com/go/vid0155. See also “Working with div tags” on page 162 About CSS page layout structure Before proceeding with this section, you should be familiar with basic CSS concepts.
Page 153 A. Container div B. Sidebar div C. Main Content div Following is the code for all three div tags in the HTML:  <div id="container">  <div id="sidebar"> <h3>Sidebar Content</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> <p>Maecenas urna purus, fermentum id, molestie in, commodo </div>...
Page 154 Container div tag, 780 pixels, no margin A. Text aligned left B. White background C. 1-pixel solid black border The next CSS rule creates styling rules for the sidebar div tag: #sidebar { float: left; width: 200px; background: #EBEBEB; padding: 15px 10px 15px 20px; The #sidebar rule styles the sidebar div tag to have a width of 200 pixels, a gray background, a top and bottom padding of 15 pixels, a right padding of 10 pixels, and a left padding of 20 pixels.
Page 155 The #mainContent rule styles the main content div with a left margin of 250 pixels, which means that it places 250 pixels of space between the left side of the container div, and the left side of the main content div. Additionally, the rule provides for 20 pixels of spacing on the right, bottom, and left sides of the main content div.
Page 156 <div id="container">  <div id="sidebar"> <h3>Sidebar Content</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> <p>Maecenas urna purus, fermentum id, molestie in, commodo </div>  <div id="mainContent"> <h1> Main Content </h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, convallis luctus rutrum.</p>...
Page 157 For Layout, select the CSS layout you want to use. You can choose from over 30 different layouts. The Preview window shows the layout and gives a brief description of the selected layout. The predesigned CSS layouts provide the following types of columns: Column width is specified in pixels.
Page 158 Add the HTML page to the Adobe Dreamweaver CS3\Configuration\BuiltIn\Layouts folder. (Optional) Add a preview image of your layout (for example a .gif or .png file) to the Adobe Dreamweaver CS3\Configuration\BuiltIn\Layouts folder. The default images that come with Dreamweaver are 227 pixels wide x 193 pixels high PNG files.
Page 159 <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Sample AP Div Page</title> <style type="text/css">  </style> </head> <body> <div id="apDiv1"> </div> </body> </html> You can change properties for AP Divs (or any AP element) on your page, including x and y coordinates, z-index (also called the stacking order), and visibility.
Page 160 Insert an AP Div at a particular place in the document ❖ Place the insertion point in the Document window, and then select Insert > Layout Objects > AP Div. Note: This procedure places the tag for the AP Div wherever you clicked in the Document window. The visual rendering of the AP Div may thus affect other page elements (like text) that surround it.
Page 161 In the Layout category of the Insert bar, click the Draw AP Div button In the Document window’s Design view, drag to draw an AP Div inside an existing AP Div. If Nesting is disabled in AP Elements preferences, Alt-drag (Windows) or Option-drag (Macintosh) to nest an AP Div inside an existing AP Div.
Page 162 View or set properties for a single AP element When you select an AP element, the Property inspector displays AP element properties. Select an AP element. In the Property inspector (Window > Properties), click the expander arrow in the lower-right corner, if it isn’t already expanded, to see all properties.
Page 163 Specifies a background color for the AP element. Bg Color Leave this option blank to specify a transparent background. Specifies the CSS class used to style the AP element. Class Controls how AP elements appear in a browser when the content exceeds the AP element’s specified size. Overflow Visible indicates that the extra content appears in the AP element;...
Page 164 The default unit for position and size is pixels (px). You can instead specify the following units: pc (picas), pt (points), in (inches), mm (millimeters), cm (centimeters), or % (percentage of the parent AP element’s corresponding value). The abbreviations must follow the value without a space: for example, 3mm indicates 3 millimeters. Specifies whether the AP elements are initially visible or not.
Page 165 • Control-Shift-click (Windows) or Command-Shift-click (Macintosh) inside an AP element. • Click inside an AP element and press Control+A (Windows) or Command+A (Macintosh) to select the contents of the AP element. Press Control+A or Command+A again to select the AP element. •...
Page 166 • A closed eye means the AP element is invisible. • If there is no eye icon, usually the AP element inherits visibility from its parent. (When AP elements are not nested, the parent is the document body, which is always visible.) Also, no eye icon appears when no visibility is specified (which appears in the Property inspector as Default visibility).
Page 167 Move AP elements You can move AP elements in the Design view in much the same way that you move objects in most basic graphics applications. If the Prevent Overlaps option is on, you will not be able to move a AP element so that it overlaps another AP element.
Page 168 Convert between AP elements and tables You can create your layout using AP elements, then convert the AP elements to tables so that your layout can be viewed in older browsers. Before you convert to tables, make sure AP elements do not overlap. Also, make sure you’re in Standard Mode (View >...
Page 169: Working With Div Tags
When this option is on, an AP element can’t be created in front of, moved or resized over, or nested within an existing AP element. If you activate this option after creating overlapping AP elements, drag each overlapping AP element to move it away from other AP elements.
Page 170 Set any of the following options: Lets you select the location of the Insert after the start of the tag) and the tag name if it is not a new tag. Displays the class style currently applied to the tag. If you attached a style sheet, classes defined in that style Class sheet appear in the list.
Page 171 Look for the highlighting to see the border. • Click inside the tag, and press Control+A (Windows) or Command+A (Macintosh) twice. • Click inside the tag, then select the Select Window > CSS Styles to open the CSS Styles panel if it is not already open. Rules applied to the tag appear in the panel.
Page 172 Dreamweaver provides a number of visual aids for viewing CSS layout blocks. For example, you can enable outlines, backgrounds, and the box model for CSS layout blocks while you design. You can also view tooltips that display properties for a selected CSS layout block when you float the mouse pointer over the layout block. The following list of CSS layout block visual aids describes what Dreamweaver renders as visible for each: Displays the outlines of all CSS layout blocks on the page.
Page 173: Animating Ap Elements
In Design view, open the page to which you want to attach the new styles. Select Text > CSS Styles > Design-time. In the Design-time Style Sheets dialog box, click the plus (+) button above the Show Only at Design Time text box, select the style sheet you just created, and click OK.
Page 174: Playback Options
DREAMWEAVER CS3 User Guide A. Keyframes B. Timelines pop-up menu C. Frame numbers D. Behaviors channel E. Animation channel F. Animation bars G. Playback head Define frames in a bar where you have specified properties (such as position) for the object. Keyframes Dreamweaver calculates intermediate values for frames in between keyframes.
Page 175 Animate an AP element using the timeline The most common kind of timeline animation involves moving an AP element along a path. Timelines can move only AP elements. To make images or text move, create an AP element using the Draw AP Div button on the Insert bar and then insert images, text, or any other type of content in the AP Div.
Page 176 Move the AP element to where it should be when animation begins. Make sure you have selected the AP element; if the insertion point is in the AP element, the AP element is not selected. To select an AP element, click the AP element marker or the AP element selection handle, or use the AP Elements panel.
Page 177 • 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. Define new properties for the object by doing one of the following: •...
Page 178 • Open another document, or create a new one, and then click in the Timelines panel. Paste the selection into the timeline. Animation bars for the same object cannot overlap, because an AP element cannot be in two places at one time (nor can an image have two different sources at a time).
Page 179 • Extend animation bars to create smoother motion. If animation looks choppy and images jump between positions, drag the end frame of the AP element’s animation bar to extend the motion over more frames. Making the animation bar longer creates more data points between the start and end point of the movement and also makes the object move more slowly.
Page 180: Using Visual Aids For Layout
Chapter 7: Laying out pages with HTML Adobe® Dreamweaver® CS3 provides layout tools that let you create web pages using HTML tables or frames. The application also includes rulers, guides, and a grid that let you lay out pages and position elements precisely.
Page 181 Note: When you resize elements, such as absolutely-positioned elements (AP elements), tables, and images, the resized elements snap to guides. Lock or unlock all guides ❖ Select View > Guides > Lock Guides. View and move a guide to a specific position Hold the mouse pointer over the guide to view its position.
Page 182 You can use a tracing image as a guide to re-create a page design that was created in a graphics application such as Adobe Freehand or Fireworks. A tracing image is a JPEG, GIF, or PNG image that is placed in the background of the Document window. You can hide the image, set its opacity, and change its position.
Page 183: Presenting Content With Tables
Place a tracing image in the Document window Do one of the following: • Select View > Tracing Image > Load. • Select Modify > Page Properties, then click Browse (next to the Tracing Image text box). Select an image file, then click Select (Windows) or Choose (Macintosh). Specify the transparency for the image by dragging the Image Transparency slider, then click OK.
Page 184 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. If two numbers appear, then the visual width as it appears in Design view doesn’t match the width specified in the HTML code.
Page 185 Insert a table and add content Use the Insert bar or the Insert menu to create a new table. Then, add text and images to table cells the same way that you add text and images outside of a table. In the Design view of the Document window, place the insertion point where you want the table to appear.
Page 186 You can also export table data from Dreamweaver into a text file, with the contents of adjacent cells separated by a delimiter. You can use commas, colons, semicolons, or spaces as delimiters. When you export a table, the entire table is exported;...
Page 187 Select table elements You can select an entire table, row, or column at once. You can also select one or more individual cells. When you move your pointer over a table, row, column, or cell, Dreamweaver highlights all the cells in that selection so that you know which cells will be selected.
Page 188: Set Table Properties
• Click in the cell and select Edit > Select All. Select Edit > Select All again when a cell is selected to select the entire table. Select a line or a rectangular block of cells ❖ Do one of the following: •...
Page 189 If you don’t explicitly assign values for the border, cell spacing, and cell padding, most browsers display the table with the border and cell padding set to 1 and cell spacing set to 2. To ensure that browsers display the table with no padding or spacing, set Border to 0, Cell Padding and Cell Spacing to 0.
Page 190 By default, a browser chooses a row height and column width to accommodate and the widest image or the longest line in a column. This is why a column sometimes becomes much wider than the other columns in the table when you add content to it.
Page 191 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. Switch out of Expanded Tables mode ❖ Do one of the following: •...
Page 192: Resizing Tables, Columns, And Rows
Resizing tables, columns, and rows Resizing tables You can resize an entire table or individual rows and columns. 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.
Page 193 Change a column’s width and maintain the size of the other columns ❖ Hold the Shift key and 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.
Page 194 Add and remove rows and columns To add and remove rows and columns, use the Modify > Table or column header menu. Pressing Tab in the last cell of a table automatically adds another row to the table. Add a single row or column ❖...
Page 195 Merge two or more cells in a table 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. Do one of the following: •...
Page 196 Copy, paste, and delete 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.
Page 197 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.
Page 198: Laying Out Pages In Layout Mode
Specifies to sort all the rows in the table’s Sort Footer Rows rows. (Note that rows remain in the tfoot sorting.) For information about the tfoot Keep All Row Colors The Same After The Sort Has Been Completed should remain associated with the same content after the sort. If your table rows are formatted with two alternating colors, do not select this option to ensure that the sorted table still has alternating-colored rows.
Page 199 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.
Page 200 See also “Using visual aids for layout” on page 173 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). Have a specific numeric width, such as 300 pixels.
Page 201 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. 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 •...
Page 202 To draw more than one layout cell without having to repeatedly select the menu item, 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. 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.
Page 203 Draw a layout table around existing layout cells or tables Make sure you are in Design View (View > Design). Make sure you are in Layout mode, not Standard mode (View > Table Mode > Layout Mode). Select Insert > Layout Objects > Layout Table. Drag the cross hair (+) to draw a rectangle around a set of existing layout cells or tables.
Page 204 Resize and move 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.) When you move or resize layout cells, they cannot overlap. Furthermore, you cannot move or resize a cell to make it cross the boundaries of the layout table that contains it.
Page 205 Hold down Shift while pressing an arrow key to move the table 10 pixels at a time. Format layout cells and tables 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.
Page 206 Resets the width specified in the HTML for each cell in the table to match the width of the Make Widths Consistent content within that cell, if you have fixed-width cells in your layout. Removes spacer images (transparent images that are used to control the spacing in your layout) Remove All Spacers from your layout table.
Page 207 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. •...
Page 208: Using Frames
Note: The layout of your table might shift. If there is no content in some columns, the columns might disappear completely from the Design view. Make widths consistent ❖ Do one of the following: • Click the table header menu and select Make All Widths Consistent. •...
Page 209 DREAMWEAVER CS3 User Guide 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 section;...
Page 210 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. In many cases, you can create a web page without frames that accomplishes 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.
Page 211 DREAMWEAVER CS3 User Guide 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.
Page 212 Save every file that’s going to appear in a frame. Remember that each frame displays a separate HTML document, and you must save each document, along with the frameset file. Set the properties for each frame and for the frameset (including naming each frame, setting scrolling and non- scrolling options).
Page 213 If you have set up Dreamweaver to prompt you for frame accessibility attributes, select a frame from the pop-up menu, enter a name for the frame, and click OK. (For visitors who use screen readers, the screen reader will read this name when it encounters the frame in a page.) Note: If you click OK without entering a new name, Dreamweaver gives the frame a name that corresponds to its position (left frame, right frame, and so on) in the frameset.
Page 214 Note: 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. Resize a frame • To set approximate sizes for frames, drag frame borders in the Document window’s Design view. •...
Page 215 Note: It’s generally easier to select framesets in the Frames panel than in the Document window. For more information, see the above topics. Select a different frame or frameset • 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).
Page 216 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 (or the unsaved frame) in the Design view, and you can select a filename.
Page 217 Border options are Yes (show borders), No (hide borders), and Default; most browsers default to showing borders, unless the parent frameset has Borders set to No. A border is hidden only when all frames that share the border have Borders set to No, or when the parent frameset’s Borders property is set to No and the frames sharing the border have Borders set to Default.
Page 218 In the Title box 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. View or set frameset properties Select a frameset by doing one of the following: •...
Page 219 Note: When you select Relative from the Units menu, any number you’ve entered in the Value field disappears; if you want to specify a number, you must re-enter it. If there’s only one row or column set to Relative, though, there’s no need to enter a number, since that row or column receives all the remaining space after the other rows and columns have space allocated.
Page 220: Using Javascript Behaviors With Frames
• Select Window > Code Inspector, place the insertion point between the 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. Using JavaScript behaviors with frames There are several JavaScript behaviors and navigation-related commands that are particularly appropriate for use with frames:...
Page 221: Working With Pages
About working with pages Adobe® Dreamweaver® CS3 provides many features to help you easily create new web pages and specify web page properties, such as page titles, background images and colors, and text and link colors. In addition, tools are provided to help you maximize website performance, and to create and test pages to ensure compatibility with different web browsers.
Page 222 Dreamweaver repairs web pages that contain active content—content that requires users to click on it in order to interact with it in the latest versions of Internet Explorer. Active content can include: • Adobe® Flash®, Adobe® Flash® Video, or Adobe® FlashPaper™ content • Shockwave® or Authorware® content •...
Page 223 JavaScript function for the processing of different kinds of arguments. For more information on active content, visit www.adobe.com/devnet/activecontent/. See also “Search for and replace text” on page 229 Understanding document encoding Document encoding specifies the encoding used for characters in the document.
Page 224 Unicode Normalization Form Normalization Forms. The most important is Normalization Form C because it’s the most common form used in the Character Model for the World Wide Web. Adobe provides the other three Unicode Normalization Forms for completeness. In Unicode, some characters are visually similar but can be stored within the document in different ways. For example, “ë”...
Page 225 Sets a background image. Click the Browse button, then browse to and select the image. Alter- Background Image natively, 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.) Specifies how the background image will be displayed on the page: Repeat...
Page 226 Set title and encoding page properties You can define the default font, font size, and colors for links, visited links, and active links. The Title/Encoding Page Properties category lets you specify the document encoding type that is specific to the language used to author your web pages as well as specify which Unicode Normalization Form to use with that encoding type.
Page 227 See also “Viewing code” on page 307 “Use the Insert bar” on page 28 Select elements • 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.
Page 228 Note: 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. Displays an icon that marks the location of each named anchor ( Named Anchors Displays an icon that marks the location of JavaScript or VBScript code in the body of the document.
Page 229 DREAMWEAVER CS3 User Guide Set the HTML Appearance page properties The HTML Appearance Page Properties category lets you specify several basic page layout options for your web pages: Specify a background image and background color for the page. Background Image and Background Define default colors for text, links, visited links, and active links.
Page 230: Zoom In And Out
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-bpc monitors and UNIX users with 8-bpc monitors), consider using hexadecimal values that combine the pairs 00, 40, 80, BF, or FF, which produce web-safe colors for SunOS.
Page 231: Using Javascript Behaviors To Detect Browsers And Plug-Ins
• Type a magnification level in the Zoom text box. You can also zoom in without using the Zoom tool by pressing Control+= (Windows) or Command+= (Macintosh). To zoom out (reduce magnification), select the Zoom tool, press Alt (Windows) or Option (Macintosh) and click on the page.
Page 232 Set 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.
Page 233: Adding And Formatting Text
Save a document 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. In the Save As dialog box that appears, navigate to the folder where you want to save the file.
Page 234 Note: Control+V (Windows) and Command+V (Macintosh) always paste text only (no formatting) in Code view. ❖ Add text to your document by doing one of the following: • Type text directly into the Document window. • Copy text from another application, switch to Dreamweaver, position the insertion point in the Design view of the Document window, and select Edit >...
Page 235 • In the Text category of the Insert bar, click the Characters button and select the Non-Breaking Space icon. Set a preference to add non-breaking spaces Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh). In the General category make sure Allow Multiple Consecutive Spaces is checked. Create bulleted and numbered lists You can create numbered (ordered) lists, bulleted (unordered) lists, and definition lists from existing text or from new text as you type in the Document window.
Page 236 With the insertion point in the list item’s text, select Text > List > Properties to open the List Properties dialog box. Set the options you want to define the list: Specifies list properties while List Item specifies an individual item in a list. Use the pop-up menu to select List Type a bulleted, numbered, directory, or menu list.
Page 237 Expands the search to all the HTML documents, library files, and text documents in the Entire Current Local Site current site. Use the Search pop-up menu to specify the kind of search you want to perform: Searches for specific text strings in the HTML source code. You can search for specific tags using this Source Code option, but the Specific Tag search provides a more flexible approach to searching for tags.
Page 238 When you’re finished, click Close. Search again without displaying the Find And Replace dialog box ❖ Press F3 (Windows) or Command+G (Macintosh). View a particular search result in context Select Window > Results to display the Search panel. Double-click a line in the Search panel. If you’re searching the current file, the Document window displays the line containing that search result.
Page 239 Search for specific text (Advanced) Use the Find and Replace dialog box to search for text or tags in a document, and to replace the found material with other text or tags. Select Edit > Find and Replace. In the Search pop-up menu, select Text (Advanced). Enter text in the text field adjacent to the Search pop-up menu.
Page 240 Preferences > General (Windows) or Dreamweaver > Preferences > General (Macintosh), then in the Spelling Dictionary pop-up menu select the dictionary you want to use. Dictionaries for additional languages can be downloaded from the Dreamweaver Support Center at www.adobe.com/go/dreamweaver_support. Select Text > Check Spelling or press Shift+F7.
Page 241 Import tabular data 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. You can import and format tabular data and import text from Microsoft Word HTML documents. 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.
Page 242 Eliminates extra space between paragraphs when you paste your text if you Clean Up Word Paragraph Spacing selected Text With Structure or Basic Formatting. The contents of the Word or Excel document appear in your page. Create a link to a Word or Excel document You can insert a link to a Microsoft Word or Excel document in an existing page.
Page 243 DREAMWEAVER CS3 User Guide 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.
Page 244 If you are designing pages for viewers with 3.0 or older version browsers, you should change <em> this preference in the General category of the Preferences dialog box (Edit > Preferences). For a tutorial on formatting text with the Property inspector, see www.adobe.com/go/vid0147. See also “Creating and managing CSS” on page 124 “Create a new CSS rule”...
Page 245 Set the CSS options you want to apply to the selected text: Sets the paragraph style of the selected text. Paragraph applies the default format for a Format adds an tag, and so on. Displays the class style that is currently applied to the selected text. If no styles have been applied to the Style selection, the pop-up menu shows No CSS Style.
Page 246: Format Paragraphs
• loads the linked file in the full browser window, thereby removing all frames. _top Creates a bulleted list of the selected text. If no text is selected, a new bulleted list is started. Unordered List Creates a numbered list of the selected text. If no text is selected, a new numbered list is started. Ordered List Opens the List Properties dialog box.
Page 247 Change the color of selected text ❖ Select the text and do one of the following: • Select a color by clicking the color box in the Property inspector. • Select Text > Color, select a color from the system color picker, and then click OK. •...
Page 248 Add a line break ❖ Do one of the following: • Press Shift+Enter (Windows) or Shift+Return (Macintosh). • Select Insert > HTML > Special Characters > Line Break. • In the Text category of the Insert bar, click the Characters button and select the Line Break icon. Use horizontal rules Horizontal rules (lines) are useful for organizing information.
Page 249 One way to ensure consistency with font size is to use CSS styles with your font size set in pixels. • To increase or decrease the size of selected text, select a relative size (+ or –1 to + 4 or –3) from the Property inspector or from either the Text >...
Page 250: Adding And Modifying Images
Add a new combination to the font list Select Text > Font > Edit Font List. Select a font from the Available Fonts list and click the << button to move the font to the Chosen Fonts list. Repeat step 2 for each subsequent font in the combination. To add a font that is not installed on your system, type the font name in the text field below the Available Fonts list and click the <<...
Page 251 PNG is the native file format of Adobe® Fireworks®. PNG files retain all the original layer, vector, color, and effects information (such as drop shadows), and all elements are fully editable at all times. Files must have the .png file extension to be recognized as PNG files by Dreamweaver.
Page 252 • Click the Sites And Servers button to choose an image file in a remote folder of one of your Dreamweaver sites. Browse to select the image or content source you want to insert. If you are working in an unsaved document, Dreamweaver generates a file:// reference to the image file. When you save the document anywhere in the site, Dreamweaver converts the reference to a document-relative path.
Page 253 Set any of the image options. The width and height of the image, in pixels. Dreamweaver automatically updates these text boxes with the W and H image’s original dimensions when you insert an image in a page. If you set W and H values that do not correspond to the actual width and height of the image, the image may not display properly in a browser.
Page 254: Insert An Image Placeholder
Edit image accessibility attributes in code If you inserted accessibility attributes for an image, you can edit those values in the HTML code. In the Document window, select the image. Do one of the following: • Edit the appropriate image attributes in Code view. •...
Page 255 For Width and Height (Required), type a number to set the image size in pixels. For Color (Optional), do one of the following to apply a color: • Use the color picker to select a color. • Enter the color’s hexadecimal value (for example, #FF0000). •...
Page 256 Specifies alternative text that appears in place of the image for text-only browsers or for browsers that have been set to download images manually. For visually impaired users who use speech synthesizers with text-only browsers, the text is spoken out loud. In some browsers, this text also appears when the pointer is over the image. Starts Fireworks to create a replacement image.
Page 257 Aligns the top of the image with the top of the tallest character in the text line. Text Top Aligns the middle of the image with the middle of the text in the current line. Absolute Middle Aligns the bottom of the image with the bottom of the line of text (which includes descenders, as Absolute Bottom in the letter g).
Page 258 Revert an image to its original size ❖ Click the Reset size button in the image Property inspector. Resample a resized image Resize the image as described above. Click the Resample button in the image Property inspector. Note: You cannot resample image placeholders or elements other than bitmap images. Crop an image Dreamweaver lets you crop (or trim) bitmap file images.
Page 259 Rollover images are automatically set to respond to the different event (for example, a mouse click) or change a rollover image. For a tutorial on creating rollovers, see www.adobe.com/go/vid0159. In the Document window, place the insertion point where you want the rollover to appear.
Page 260 Preloads the images in the browser’s cache so no delay occurs when the user rolls the pointer Preload Rollover Image over the image. (Optional) Text to describe the image for viewers using a text-only browser. Alternate Text The file that you want to open when a user clicks the rollover image. Enter the path or click When Clicked Go to URL Browse and select the file.
Page 261 Set an external image editor for an existing file type You can select an image editor for opening and editing graphic files. Open the File Types/Editors Preferences dialog box by doing one of the following: • Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh), and select File Types/Editors in the Category list on the left.
Page 262: Inserting Flash Content
SWF to insert in your document. In Dreamweaver, these template files can be found in the Dreamweaver/Configu- ration/Flash Objects/Flash Buttons and Flash Text folders. You can download new button templates from the Adobe Exchange for Dreamweaver website (www.adobe.com/go/dreamweaver_exchange) and place them in your Flash Buttons folder. For more information on creating new button templates, see the article on that topic at www.adobe.com/go/flash_buttons.
Page 263 Use Dreamweaver to add Flash content (SWF files and Shockwave movies) in your pages, and then preview it in a document and a browser. You can also set properties for Flash content in the Property inspector. For a tutorial on adding Flash content to web pages, see www.adobe.com/go/vid0150. See also “Working with Flash”...
Page 264 DREAMWEAVER CS3 User Guide Set Flash and Shockwave movie properties To ensure the best results in both Internet Explorer and Netscape Navigator, Dreamweaver inserts Flash and Shockwave movies using both the tags. (The tag is defined by Microsoft for ActiveX object embed object...
Page 265 To open the Insert Flash Object dialog box, do one of the following: • In the Common category of the Insert bar, select Media and click the Flash Button icon • Select Insert > Media > Flash Button. Complete the Insert Flash Button dialog box, and click Apply or OK to insert the Flash button in the Document window.
Page 266 appearance, whereas High favors appearance over speed. Auto Low emphasizes speed at first, but improves appearance when possible. Auto High emphasizes both qualities at first, but sacrifices appearance for speed if necessary. Sets the parameter for the Scale scale object defines how the Flash content displays within the area defined for the SWF file by the choices are Default (Show All), No Border, and Exact Fit.
Page 267: Downloading And Installing Flash Elements
Downloading and installing Flash elements To use Flash elements in your web pages, you must first add the elements to Dreamweaver using the Adobe® Extension Manager. The Extension Manager is a separate application that lets you install and manage extensions in Adobe applications.
Page 268 To find the latest Flash elements for Dreamweaver, use the Adobe Exchange website at www.adobe.com/go/dreamweaver_exchange. Once there, you can log in and download Flash elements and other Dreamweaver extensions (many of which are free), join discussion groups, view user ratings and reviews, and install and use the Extension Manager.
Page 269 “Defining sources of dynamic content” on page 547 Use the Image Viewer Flash element Adobe Dreamweaver CS3 contains a Flash element you can use in your pages: a Flash image viewer that can double as a web photo album. The Image Viewer element is a resizable application for loading and viewing a series of JPEG or SWF images. You define a list of images, along with a link and caption for each image.
Page 270 With the Image Viewer placeholder selected, click the Play button in the expanded Property inspector to start the Image Viewer, and use the following Image Viewer controls to view images: • Click the Next or Previous button to view sequential images. •...
Page 271: Adding Flash Video Content
Insert FlashPaper documents You can insert Adobe® FlashPaper™ documents in your web pages. When a page containing the FlashPaper document is opened in a browser, the user can browse all the pages in the FlashPaper document without loading new web pages.
Page 272 (compression/decompression technologies): Sorenson Squeeze and On2. • If you created your video with the Sorenson Squeeze codec, site visitors will need Flash® Player 7 from Adobe or later to play progressive download video; they will need Flash Player 6.0.79 or later to play streaming video.
Page 273 Set options for progressive download video The Insert Flash Video dialog box lets you set options for progressive download delivery of a Flash Video (FLV) file inserted in a web page. Select Insert > Media > Flash Video (or click the Flash Video icon in the Common insert bar). In the Insert Flash Video dialog box, select Progressive Download Video from the Video Type menu.
Page 274 Select Streaming Video from the Video Type pop-up menu. Specifies the server name, application name, and instance name in the form Server URI rtmp://www.example.com/app_name/instance_name. Specifies the name of the FLV file that you want to play (for example, myvideo.flv). The .flv extension Stream Name is optional.
Page 275 Note: If you already have a main.asc file on your server, check with your server administrator before uploading the main.asc file generated by the Insert Flash Video command. You can easily upload all of the required media files by selecting the Flash Video component placeholder in the Dreamweaver Document window, and clicking the Upload Media button in the Property inspector (Window >...
Page 276: Adding Sound
DREAMWEAVER CS3 User Guide Delete the Flash Video component ❖ Select the Flash Video component placeholder in the Dreamweaver Document window and press Delete. Adding Sound Audio file formats You can add sound to a web page. There are several different types of sound files and formats, including .wav, .midi, and .mp3.
Page 277: Adding Other Media Objects
See also “Insert and edit media objects” on page 270 Link to an audio file Linking to an audio file is a simple and effective way to add sound to a web page. This method of incorporating sound files lets visitors choose whether they want to listen to the file, and makes the file available to the widest audience. Select the text or image you want to use as the link to the audio file.
Page 278 Insert the object by doing one of the following: • In the Common category of the Insert bar, click the Media button and select the icon for the type of object you want to insert. • Select the appropriate object from the Insert > Media submenu. •...
Page 279 The editor that starts when you double-click the file in the Files panel is called the primary editor. If you double-click an image file, for example, Dreamweaver opens the file in the primary external image editor such as Adobe Fireworks.
Page 280 “Storing file information in Design Notes” on page 102 Insert Shockwave movies You can use Dreamweaver to insert Shockwave movies into your documents. Adobe® Shockwave®, a standard for interactive multimedia on the web, is a compressed format that allows media files created in Macromedia® Director®...
Page 281 Note: The user must download a helper application (a plug-in) to view common streaming formats like Real Media, QuickTime, and Windows Media. Insert Netscape Navigator plug-in content You can create content such as a QuickTime movie for a Netscape Navigator plug-in, and then use Dreamweaver to insert that content into an HTML document.
Page 282 Play plug-in content in the Document window Insert one or more media elements by selecting Insert > Media > Shockwave, Insert > Media > Flash, or Insert > Media > Plugin. Do one of the following: • Select one of the media elements you have inserted, and select View > Plugins > Play or click the Play button in the Property inspector.
Page 283 ActiveX properties The Property inspector initially displays the most commonly used properties. Click the expander arrow in the lower-right corner to see all properties. Specifies a name to identify the ActiveX object for scripting. Enter a name in the unlabeled text box on the Name far left side of the Property inspector.
Page 284: Using Behaviors To Control Media
DREAMWEAVER CS3 User Guide Java applet properties The Property inspector initially displays the most commonly used properties. Click the expander arrow in the lower-right corner to see all properties. Specifies a name to identify the applet for scripting. Enter a name in the unlabeled text box on the far left side Name of the Property inspector.
Page 285 Note: There is no widely accepted standard for identifying data files for ActiveX controls. Consult the documentation for the ActiveX control you’re using to find out which parameters to use. Enter a name and value for a parameter Select an object that can have parameters (such as a Shockwave movie, an ActiveX control, a Netscape Navigator plug-in, or a Java applet) in the Document window.
Page 286: About Linking And Navigation
There are three types of link paths: • Absolute paths (such as http://www.adobe.com/support/dreamweaver/contents.html). • Document-relative paths (such as dreamweaver/contents.html). •...
Page 287: Absolute Paths
Absolute paths provide the complete URL of the linked document, including the protocol to use (usually http:// for web pages), for example, http://www.adobe.com/support/dreamweaver/contents.html. You must use an absolute path to link to a document on another server. You can also use absolute paths for local links (to documents in the same site), but that approach is discouraged—if you move the site to another domain, all of...
Page 288: Linking
When you move files as a group—for example, when you move an entire folder, so that all the files inside that folder retain the same relative paths to each other—you don’t need to update document-relative links between those files. However, when you move an individual file that contains document-relative links, or an individual file targeted by a document-relative link, you do need to update those links.
Page 289: Attaching Javascript Behaviors To Links
Dreamweaver converts the file:// path to a relative path. For a tutorial on creating links, see www.adobe.com/go/vid0149. See also “Document locations and paths” on page 279 Attaching JavaScript behaviors to links You can attach a behavior to any link in a document.
Page 290 From the Target pop-up menu, select a location in which to open the document: • loads the linked document in a new, unnamed browser window. _blank • loads the linked document in the parent frame or parent window of the frame that contains the link. If _parent the frame containing the link is not nested, then the linked document loads in the full browser window.
Page 291 • Select an HTML page in the site map, and then select Link To New File from the context menu. Add a link using the Hyperlink command The Hyperlink command lets you create a text link to an image, an object, or to another document or file. Place the insertion point in the document where you want the link to appear.
Page 292 Note: 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.
Page 293 In the Link box of the Property inspector, type a number sign (#) and the name of the anchor. For example, to link to an anchor named “top” in the current document, type document in the same folder, type filename.html#top Note: Anchor names are case-sensitive.
Page 294 Create null and script links A null link is an undesignated link. Use null links to attach behaviors to objects or text on a page. For instance, you can attach a behavior to a null link so that it swaps an image or displays an absolutely-positioned element (AP element) when the pointer moves over the link.
Page 295 Select a site, and then click Edit. Click the Advanced tab to display the Advanced category of the Site Definition dialog box. Select Local Info from the category list on the left. In the Local Info category, select Enable Cache. The first time you change or delete links to files in your local folder after starting Dreamweaver, Dreamweaver prompts you to load the cache.
Page 296 Change a link sitewide In addition to having Dreamweaver update links automatically whenever you move or rename a file, you can manually change all links (including e-mail, FTP, null, and script links) so that they point somewhere else. This option is most useful when you want to delete a file that other files link to, but you can use it for other purposes. For example, suppose you link the words “this month’s movies”...
Page 297: Jump Menus
Jump menus About jump menus A jump menu is a pop-up menu in a document, visible to your site visitors, listing links to documents or files. You can create links to documents in your website, links to documents on other websites, e-mail links, links to graphics, or links to any file type that can be opened in a browser.
Page 298: Navigation Bars
Edit jump menu items You can change the order of items in the menu or the file an item links to, and you can add, delete, or rename an item. To change the location in which a linked file opens, or to add or change a menu selection prompt, you must apply the Jump Menu behavior from the Behaviors panel.
Page 299 • Over: the image that appears when the user moves the pointer over the Up image. The element’s appearance changes (for example, it may get lighter) to let users know they can interact with it. • Down: the image that appears after the user clicks the element. For example, when a user clicks an element, a new page loads and the navigation bar is still displayed, but the clicked element may be darkened to show that it’s been selected.
Page 300: Image Maps
the page is first downloaded. When you apply this option to an element, an asterisk appears after its name in the Nav Bar Elements list. Specify whether to insert elements vertically or horizontally. Insert Select to insert elements as a table. Use Tables See also “View and set frame properties and attributes”...
Page 301 • Select the rectangle tool and drag the pointer over the image to create a rectangular hotspot. • Select the polygon tool and define an irregularly shaped hotspot by clicking once for each corner point. Click the arrow tool to close the shape. After you create the hotspot, the hotspot Property inspector appears.
Page 302: Troubleshooting Links
Resize a hotspot Use the pointer hotspot tool to select the hotspot. Drag a hotspot selector handle to change the size or shape of the hotspot. Troubleshooting links Find broken, external, and orphaned links Use the Check Links feature to search for broken links and orphaned files (files that still exist in the site but that aren’t linked to by any other files in the site).
Page 303 You can check for orphaned files when you check links across an entire site. To save a report, click the Save Report button in the Link Checker panel. Check links across the entire site In the Files panel, select a site from the Current Sites pop-up menu. Select Site >...
Page 304 DREAMWEAVER CS3 User Guide If you are updating an image reference and the new image appears at the incorrect size, click the W and H labels in the Property inspector or click the Refresh button to reset the height and width values. Save the file.
Page 305: Previewing Pages In Browsers
Chapter 10: Previewing pages Design view gives you an idea of how your page will look on the web but does not render pages exactly as browsers do. The Preview in Browser feature lets you see how your pages will look in specific browsers as you create your design.
Page 306 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. For more information, see TechNote 19578 on the Adobe website at www.adobe.com/go/19578. Insert Mark of the Web code ❖...
Page 307: Previewing Pages In Mobile Devices
Previewing pages in mobile devices Preview mobile content with Adobe Device Central and Dreamweaver To preview pages created in Dreamweaver on various mobile devices, use Device Central with its built-in Opera Small-Screen Rendering feature. Different devices have different browsers installed, but the preview can give a good impression of how content will look and behave on a selected device.
Page 308: About Coding In Dreamweaver
Chapter 11: Working with page code Adobe® Dreamweaver® CS3 is a visual design tool as well as a robust code editor, which provides code hinting, code collapsing, code debugging, and other code editing features. About coding in Dreamweaver Supported languages In addition to text-editing capabilities, Adobe®...
Page 309 Automatic code modification in Dreamweaver You can set options that instruct Dreamweaver to automatically clean up your hand-written code according to criteria that you specify. However, your code is never rewritten unless the code rewriting options are enabled or you perform an action that changes the code.
Page 310 XHTML requirement Actions Dreamweaver performs There must be a DOCTYPE declaration in the Adds an XHTML DOCTYPE to an XHTML document: document prior to the root element, and the <!DOCTYPE html PUBLIC "-//W3C//DTD declaration must reference one of the three XHTML 1.0 Transitional//EN"...
Page 311: About Regular Expressions
XHTML requirement The following elements must have an attribute as well as a attribute: name applet form frame iframe , and . For example, <a name="intro">Introduction</ a> is not valid; the correct form is <a id="intro">Introduction</a> <a id="section1" name="intro"> Introduction</a> For attributes with values of an enumerated type, the values must be lowercase.
Page 312 Character Matches Example The preceding character at st?on most once (that is, indicates but nothing in “Appleton” or “tension” that the preceding char- acter is optional). Any single character except newline. be tasty” Either x or y. FF0000|0000FF bgcolor=”#FF0000” color=”#0000FF” Exactly n occurrences of the o{2} preceding character.
Page 313 Character Matches Example Any alphanumeric char- b\w* matches “barking” in “the barking dog” and both “big” acter, including underscore. and “black” in “the big black dog” Equivalent to [A-Za-z0-9_]. Any non-alphanumeric \W matches “&” in “Jake&Mattie” and “%” in “100%” character.
Page 314: Setting Up Your Coding Environment
Setting up your coding environment Changing your coding environment You can adapt the coding environment in Dreamweaver to fit the way you work. For example, you can change the way you view code, set up different keyboard shortcuts, or import and use your favorite tag library. Viewing code You can view the source code for the current document in several ways: you can display it in the Document window by enabling Code view, you can split the Document window to display both the page and its associated code, or you...
Page 315: Customizing The Coding Environment
Using the coder-oriented workspace (Windows only) In Windows, you can use a workspace that looks similar to the workspace in Macromedia® HomeSite® from Adobe, with the panel groups docked on the left side of the main window instead of on the right side. In this workspace layout, the Property inspector is collapsed by default, and the Document window appears in Code view by default.
Page 316 Set the code appearance You can set word wrapping, display line numbers for the code, highlight invalid code, set syntax coloring for code elements, set indenting, and show hidden characters from the View > Code View Options menu. View a document in Code view or the Code inspector. Do one of the following: •...
Page 317 DREAMWEAVER CS3 User Guide Note: Most of the indentation options in this dialog box apply only to code generated by Dreamweaver, not to code that you type. To make each new line of code that you type indent to the same level as the previous line, select View > Code View Options Auto-Indent option.
Page 318 you select this option, Dreamweaver does not write line breaks after a <td> or before a </td> tag, even if the formatting in the Tag Library indicates that the line break should be there. Lets you set formatting options for Cascading Style Sheets (CSS) code and for individual tags Advanced Formatting and attributes in the Tag Library Editor.
Page 319 Set any of the following options: Rewrites overlapping tags. For example, Fix Invalidly Nested and Unclosed Tags This option also inserts closing quotation marks and closing brackets if they are missing. <b><i>text</i></b>. Ensures you don’t have duplicate names for form objects. This option is enabled Rename Form Items When Pasting by default.
Page 320: Writing And Editing Code
Select a document type, and click Edit Coloring Scheme. Select an item and set its text color, background color, and (optional) style (bold, italic, or underline), and click OK. The sample code in the Preview pane changes to match the new colors and styles. Click OK.
Page 321 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 (<).
Page 322 See also “Setting up a web application” on page 501 Work with code snippets Code snippets let you store content for quick reuse. You can create, insert, edit, or delete snippets of HTML, JavaScript, CFML, ASP, JSP, and more. You can also manage and share your code snippets with team members. Some predefined snippets that you can use as a starting point are available.
Page 323 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. 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.
Page 324 Selects the content and surrounding opening and closing tags of the line in which you’ve placed Select Parent Tag the insertion point. If you repeatedly click this button, and your tags are balanced, Dreamweaver eventually selects the outermost tags. html /html Selects the content and surrounding parentheses, braces, or square brackets of the line in which you Balance Braces...
Page 325 See also “Verify tags and braces are balanced” on page 327 “Coding toolbar overview” on page 20 “Display toolbars” on page 27 Insert code with the Insert bar Position the insertion point in the code. Select an appropriate category in the Insert bar. Click a button in the Insert bar or select an item from a pop-up menu in the Insert bar.
Page 326 See also “About Dreamweaver tag libraries” on page 343 Edit tags with Tag editors Use Tag editors to view, specify, and edit the attributes of tags. 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.
Page 327 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 does not appear. Edit an existing comment • In Code view, find the comment and edit its text.
Page 328 See also “About regular expressions” on page 304 “Search for and replace text” on page 229 Save and recall search patterns You can save search patterns and reuse them later. See also “About regular expressions” on page 304 “Search for and replace text” on page 229 Save a search pattern In the Find And Replace dialog box (Edit >...
Page 329 Wraps the selected CSS or JavaScript code with Apply /* */ Comment Inserts at the beginning of each line of selected CSS or JavaScript code, or inserts a single Apply // Comment tag if no code is selected. Inserts a single quotation mark at the beginning of each line of a Visual Basic script, or inserts a Apply ' Comment single quotation mark at the insertion point if no code is selected.
Page 330 Use 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. Open the Reference panel Do one of the following in Code view: •...
Page 331: Collapsing Code
Collapsing code About collapsing code You can collapse and expand code fragments so that you can view different sections of your document without having to use the scroll bar. For example, to see all of the CSS rules in the down the page, you can collapse everything between the of code at once.
Page 332 Note: When you make a selection in Design view that is part of a collapsed code fragment, the fragment is automatically expanded in Code view. When you make a selection in Design view that is a complete code fragment, the fragment remains collapsed in Code view.
Page 333: Optimizing And Debugging Code
Optimizing and debugging code Find coding errors with the Validator You can use the Validator in Dreamweaver to quickly locate tag or syntax errors in your code. You can specify the tag-based languages against which the Validator should check, the specific problems that the Validator should check, and the types of errors that the Validator should report.
Page 334 Note: Depending on the size of your document and the number of options selected, it may take several seconds to complete the cleanup. Removes any tags that have no content between them. For example, Remove Empty Container Tags are empty tags, but the <font color="#FF0000"></font>...
Page 335 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. Check for browser compatibility The Browser Compatibility Check (BCC) feature helps you locate combinations of HTML and CSS that can trigger browser rendering bugs.
Page 336 Select one of the XHTML document type definitions (DTD) from the DocType pop-up menu on the far right of the dialog box, and click Create. 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.
Page 337: Editing Code In Design View
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.
Page 338 Edit 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.
Page 339 • 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. • To delete the attribute’s value, select the value and press Backspace (Windows) or Delete (Macintosh). •...
Page 340 See also “Write and edit scripts in Design view” on page 335 Insert an HTML tag In Design view, click in the page to place the insertion point where you want to insert code. Press Control+T (Windows) or Command+T (Macintosh). The Quick Tag Editor opens in Insert HTML mode.
Page 341 Use the hints menu in the Quick Tag Editor The Quick Tag Editor includes 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 that lists valid attributes for a tag, pause briefly while editing an attribute name in the Quick Tag Editor.
Page 342 To edit a tag, select Edit Tag from the menu. Make your changes in the Quick Tag Editor. For more information, see “Edit code with the Quick Tag Editor” on page 332. To delete a tag, select Remove Tag from the menu. Select an object corresponding to a tag Click in the document.
Page 343: Working With Head Content For
In the Property inspector, click the Edit button. The script appears in the Script Properties dialog box. If you linked to an external script file, the file opens in Code view, where you can make your edits. Note: 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.
Page 344 View and edit head content You can view the elements in the section of a document by using the View menu, the Document window’s Code head view, or the Code inspector. View elements in the head section of a document ❖...
Page 345 Set the page title There is only one title property: the title of the page. The title appears in the title bar of the Document window in Dreamweaver as well as in the browser’s title bar when you view the page in most browsers. The title also appears in the Document window toolbar.
Page 346 In the Property inspector, view, modify, or delete the descriptive text. Set the refresh properties of the page Use the Refresh element to specify that the browser should automatically refresh your page—by reloading the current page or going to a different one—after a certain amount of time. This element is often used to redirect users from one URL to another, often after displaying a text message that the URL has changed.
Page 347: Working With Server-Side Includes
• loads the linked document into the parent frameset or window of the frame that contains the link. If the _parent frame containing the link is not nested, then this is equivalent to browser window. • loads the linked document in the same frame or window as the link. This target is the default, so you usually _self don’t have to specify it.
Page 348 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 that contains 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.
Page 349 Insert server-side includes You can use Dreamweaver to insert server-side includes in your page. Insert a server-side include Select Insert > Server-Side Include. In the dialog box that appears, browse to and select a file. By default, a File type of include is inserted. 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 >...
Page 350: Managing Tag Libraries
Managing tag libraries About Dreamweaver tag libraries A tag library, in Dreamweaver, is a collection of tags of a particular type, along with information about how Dreamweaver should format the tags. Tag libraries provide the information about tags that Dreamweaver uses for code hints, target browser checks, the Tag Chooser, and other coding capabilities.
Page 351 Add attributes to a tag In the Tag Library editor (Edit > Tag Libraries), click the Plus (+) button and select New Attributes. In the Tag Library pop-up menu, select a tag library. In the Tag pop-up menu, select a tag. Type the name of the new attribute.
Page 352: Importing Custom Tags Into Dreamweaver
Edit an attribute for a tag In the Tag Library editor (Edit > Tag Libraries), expand a tag library in the Tags box, expand a tag, and select a tag attribute. In the Attribute Case pop-up menu, select the Default, Lowercase, Uppercase, or Mixed Case option. If you select Mixed Case, the Attribute Name Mixed Case dialog box appears.
Page 353 Click OK. Import JRun tags If you use Macromedia® JRun™ from Adobe, you can import your JRun tags into Dreamweaver. Open a JSP page in Dreamweaver. Open the Tag Library editor (Edit > Tag Libraries).
Page 354: Using Javascript Behaviors
About JavaScript behaviors Adobe® Dreamweaver® CS3 behaviors place JavaScript code in documents so that visitors can change a web page in various ways or initiate certain tasks. A behavior is a combination of an event and an action triggered by that event.
Page 355: About Events
For names and descriptions of the events provided by each browser, see the Dreamweaver Support Center at www.adobe.com/go/dreamweaver_support. Different events appear in the Events menu depending on the selected object and on the browsers specified in the Show Events For submenu.
Page 356 If you’re attaching a behavior to an image, some events (such as are available only for links. When you select one of them, Dreamweaver wraps an a null link. The null link is represented by link value if you want to turn it into a real link to another page, but if you delete the JavaScript link without replacing it with another link, you will remove the behavior.
Page 357: Applying Built-In Dreamweaver Behaviors
Download and install third-party behaviors Many extensions are available on the Exchange for Dreamweaver website (www.adobe.com/go/dreamweaver_exchange). Choose Window > Behaviors and select Get More Behaviors from the Actions menu. Your primary browser opens, and the Exchange site appears.
Page 358 Type the exact JavaScript to be executed, or type the name of a function. For example, to create a Back button, you might type encapsulated your code in a function, type only the function name (for example, Click OK and verify that the default event is correct. If not, select another event or change the target browser in the Show Events For submenu.
Page 359 Enter the paths and filenames of the URL and the alternate URL in the boxes at the bottom of the dialog box. If you enter a remote URL, you must enter the http:// prefix in addition to the www address. Click OK and verify that the default event is correct.
Page 360 Show Events For submenu. If you’re having trouble getting the behavior to work in a browser, consult this tech note: http://www.adobe.com/go/tn_15431. Apply the Drag AP Element behavior The Drag AP Element behavior lets the visitor drag an absolutely positioned (AP) element. Use this behavior to create puzzles, slider controls, and other movable interface elements.
Page 361 Larger values make it easier for the visitor to find the drop target. For simple puzzles and scenery manipulation, you can stop here. To define the drag handle for the AP element, track the movement of the AP element while it is being dragged, and trigger an action when the AP element is dropped, click the Advanced tab.
Page 362 Instead of displaying the values of MM_UPDOWN variety of other ways. For example, you could write a function that displays a message in the form field depending on how close the value is to the drop zone, or you could call another function to show or hide an AP element depending on the value.
Page 363 Apply the Jump Menu Go behavior The Jump Menu Go behavior is closely associated with the Jump Menu behavior; Jump Menu Go lets you associate a Go button with a jump menu. (Before you use this behavior, a jump menu must already exist in the document.) Clicking the Go button opens the link that’s selected in the jump menu.
Page 364 Click OK and verify that the default event is correct. If not, select another event or change the target browser in the Show Events For submenu. Apply the Popup Message behavior The Popup Message behavior displays a JavaScript alert with the message you specify. Because JavaScript alerts have only one button (OK), use this behavior to give the user information rather than to present a choice.
Page 365 See also “Navigation bars” on page 291 Edit a Set Nav Bar Image behavior Select an image in the navigation bar, and choose Window > Behaviors. In the Actions menu, select the Set Nav Bar Image behavior associated with the event you’re altering. In the Basic tab of the Set Nav Bar Image dialog box, select editing options.
Page 366 See also “Create frames and framesets” on page 205 Apply the Set Text Of Container behavior The Set Text Of Container behavior replaces the content and formatting of an existing container (that is, any element that can contain text or other elements) on a page with the content you specify. The content can include any valid HTML source code.
Page 367 Apply the Set Text Of Text Field behavior The Set Text Of Text Field behavior replaces the content of a form’s text field with the content you specify. You can embed any valid JavaScript function call, property, global variable, or other expression in the text. To embed a JavaScript expression, place it inside braces ( Example: The URL for this page is {window.location}, and today is {new Date()}.
Page 368 Apply the Show Pop-Up Menu behavior Note: This behavior is deprecated as of Dreamweaver 9 in favor of the Spry Menu Bar widget. To access the old Show Pop-Up Menu behavior, you must select the ~Deprecated menu item from the Actions menu of the Behaviors panel. You cannot use the Show Pop-Up Menu behavior to create new pop-up menus;...
Page 369 When you finish, click OK to accept the default settings or select another Show Pop-Up Menu tab to set additional options. Create a submenu item by indenting ❖ In the Show Pop-Up Menu list, select the item and click Indent Item. (To remove the indent, click Outdent Item.) Note: You cannot indent the first item in the list.
Page 370 Position a pop-up menu in a document Use position options to specify where the pop-up menu appears relative to the triggering image or link. You can also specify whether the menu disappears when the user moves the pointer away from the trigger. In the Show Pop-Up Menu dialog box, click the Position tab.
Page 371 Repeat steps 1 and 2 to insert additional images. Select an object (generally the image you’re going to swap) and choose Swap Image from the Actions menu of the Behaviors panel. From the Images list, select the image whose source you want to change. Click Browse to select the new image file, or enter the path and filename of the new image in the Set Source To box.
Page 372 If you are validating multiple fields when the user submits the form, the the Events menu. If you are validating individual fields, check that the default event is those events. Both events trigger the Validate Form behavior when the user moves away from the field. The difference is that occurs whether or not the user has typed in the field, and onBlur contents of the field.
Page 373: Cross-Application Integration
Chapter 13: Working with other applications Adobe® Dreamweaver® CS3 integrates with many Adobe applications, including Flash, Fireworks, Adobe® Photoshop®, and Adobe® Bridge. You can use other Adobe applications, such as Adobe® Device Central, directly from the Dreamweaver workspace. Cross-application integration...
Page 374: Working With Fireworks
See also “About Design Notes” on page 102 “Enable and disable Design Notes for a site” on page 102 Working with Fireworks Insert a Fireworks image Dreamweaver and Fireworks recognize and share many of the same file-editing procedures, including changes to links, image maps, table slices, and more.
Page 375 Fireworks saves the changes in the PNG file, exports the updated image (or HTML and images), and returns focus to Dreamweaver. In Dreamweaver, the updated image or table appears. For a tutorial about Dreamweaver and Fireworks integration, see www.adobe.com/go/vid0188. See also “Use an external image editor”...
Page 376 Fireworks recognizes the following image placeholder settings you may have set while working with the image place- holder in Dreamweaver: image size (which correlates to Fireworks canvas size), image ID (which Fireworks uses as the default document name for the source file and export file you create), and text alignment. Fireworks also recog- nizes links and certain behaviors (such as swap image, pop-up menu, navigation bar, and set text) you attached to the image placeholder while working in Dreamweaver.
Page 377 See also “Edit Fireworks pop-up menus in Dreamweaver” on page 370 Edit Fireworks pop-up menus in Dreamweaver You can create a pop-up menu in Fireworks 8 or later and then edit it with Dreamweaver or with Fireworks (using roundtrip editing), but with not both. If you edit your menus in Dreamweaver and then edit them in Fireworks, you will lose all your previous edits except for the text content.
Page 378 Note: Dreamweaver recognizes the Fireworks launch-and-edit preferences only in certain cases. Specifically, you must be opening and optimizing an image that is not part of a Fireworks table and contains a correct Design Notes path to a source PNG file. In Fireworks, select Edit >...
Page 379 All HTML and JavaScript code associated with the Fireworks files you exported is copied into the Dreamweaver document, and all links to images are updated. Export and paste Fireworks HTML code into Dreamweaver In Fireworks, select File > Export. Specify your Dreamweaver site folder as the destination for the exported images. In the Export pop-up menu, select HTML And Images.
Page 380 Fill in the Subheading Info and Other Info text boxes to enter up to two lines of additional text below the title. Select the folder containing source images by clicking the Browse button next to the Source Images Folder text box.
Page 381: Working With Photoshop
In Dreamweaver, paste the image over the web image in the page. Dreamweaver optimizes the source file using the original optimization settings, and then replaces the image on the Clipboard with the updated version. For a video tutorial on working with Photoshop and Dreamweaver, see www.adobe.com/go/vid0200. September 4, 2007...
Page 382 See also “Insert a Photoshop image into your page” on page 375 “Copy a Photoshop selection into your page” on page 375 “Use Photoshop to edit images in Dreamweaver pages” on page 376 Insert a Photoshop image into your page In Dreamweaver (Design or Code view), place the insertion point on your page where you want the image inserted.
Page 383 Design Note, regardless of whether you have enabled Design Notes for your site. The Design Note allows you to return to edit the original Photoshop file from Dreamweaver. For a tutorial on copying and pasting between different applications, including Dreamweaver and Photoshop, see www.adobe.com/go/vid0193. See also “Dreamweaver and accessibility” on page 704 “Choose image optimization settings”...
Page 384 Edit the original PSD source file in Photoshop In Dreamweaver, select a web-ready image that was originally created in Photoshop and do one of the following: • Click the Edit button in the image’s Property inspector. • Press Control (Windows) or Command (Macintosh) as you double-click the file. •...
Page 385 Recopy a Photoshop image selection If you replace a Photoshop-derived image in your Dreamweaver page with a copied selection from a PSD file, the Image Preview dialog box does not appear. Instead Dreamweaver reuses the optimization settings you set for that image in your page.
Page 386: Optimization Settings
Change the shape of the placed image by choosing the Export Area option and doing one of the following: • Drag the dotted border around the previewed image as needed. You can drag the image within the borders to move hidden areas into view.
Page 387 DREAMWEAVER CS3 User Guide A web-ready image is one that can be displayed by all modern web browsers and looks the same no matter what system or browser the viewer is using. When you insert a Photoshop image, the Image Preview dialog box allows you to adjust various settings for optimal web publication.
Page 388 Allows you to set the image’s background. You can maintain the transparency of a 32-bpc (bits per channel) Matte PNG by clicking the transparency icon in the Matte dialog box. You can also use Matte to anti-alias soft-edged objects that lie directly above the canvas by matching the matte color to the target background. Specifies the image size, in kilobytes.
Page 389: Working With Flash
Saved settings Dreamweaver provides several option settings for your convenience. Depending on the saved settings you choose, the file-type-specific image options described above may change. Forces all colors to web-safe colors. The color palette contains up to 216 colors. GIF Web 216 Converts web-unsafe colors to their closest web-safe color.
Page 390: Working With Bridge
You can start Bridge from any Creative Suite component (except Acrobat 8), and use it to access both Adobe and non-Adobe asset types. From Adobe Bridge, you can: •...
Page 391 • Synchronize color settings across color-managed Creative Suite components. For a tutorial on Adobe Bridge and the web development workflow, see www.adobe.com/go/vid0192. Start Bridge from Dreamweaver You can start Bridge from Dreamweaver to view your files before placing them or dragging them in your page layout.
Page 392: Working With Device Central
Select File > Open With > Adobe Dreamweaver. • Right-click (Control-click on Macintosh) and then choose Open With > Adobe Dreamweaver from the context menu. Note: If Dreamweaver is already open, this action makes the program active. If Dreamweaver is not open, Bridge starts it, bypassing the Welcome Screen.
Page 393 Use the tips below to ensure that web pages created in Dreamweaver display well on mobile devices. • If you use the Adobe® Spry framework to develop content, add the following line of HTML to your pages so they can render CSS and execute JavaScript™ correctly in Device Central: <link href="SpryAccordion.css"...
Page 394: About Dreamweaver Templates
A template is useful when you want to create many pages based on a single design, or when you want to create specified areas of a page that users can edit. Adobe® Dreamweaver® CS3 provides many tools for creating and managing templates.
Page 395 A section of the document layout that is set so that the template user can add or delete copies of A repeating region the repeating region in a document based on the template as necessary. For example, you can set a table row to repeat. 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.
Page 396 To have Dreamweaver update document-relative paths to non-template files in the Templates folder, select the Templates category on the Advanced tab of the Site Definition dialog box, and deselect the Don’t Rewrite Document Relative Paths option. For more information, see the Dreamweaver TechNote on the Adobe website at www.adobe.com/go/f55d8739 See also “Link to documents using the Point-To-File icon”...
Page 397: Template Parameters
In other cases, the template author might determine what appears in the document, based on the value of a template expression. Note: A related useful article is available online at http://www.adobe.com/devnet/dream- weaver/articles/template_parameters.html.
Page 398 • field reference (the “dot” operator) • unary operators: +, -, ~, ! • binary operators: +, -, *, /, %, &, |, ^, &&, ||, <, <=, >, >=, ==, !=, <<, >> • conditional operator: ?: • parentheses: () The following data types are used: Boolean, IEEE 64-bpc floating point, string, and object.
Page 399: Recognizing Templates And Template-Based Documents
DREAMWEAVER CS3 User Guide    <img src=".../sales.gif">   <img src=".../support.gif">   <img src=".../hr.gif"> ...
Page 400 Recognizing templates in Code view In Code view, editable content regions are marked in HTML with the following comments:  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.
Page 401 DREAMWEAVER CS3 User Guide In addition to the editable-region outlines, the entire page is surrounded by a different-colored outline, with a tab in the upper-right corner giving the name of the template that the document is based on. This highlighted rectangle reminds you that the document is based on a template and that you can’t change content outside the editable regions.
Page 402: Creating A Dreamweaver Template
Design Notes file for the template. Documents based on a template do not inherit the template’s Design Notes. Note: Templates in Adobe Dreamweaver differ from templates in some other Adobe Creative Suite products in that page sections of Dreamweaver templates are fixed (or uneditable) by default.
Page 403 About creating templates for Contribute sites Using Dreamweaver, you can create templates to help Adobe® 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.
Page 404 In addition to Dreamweaver templates, you can create non-Dreamweaver templates using the Contribute adminis- tration 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, non-Dreamweaver templates can’t contain Dreamweaver template elements such as editable, locked, repeating, and optional regions.
Page 405: Creating Editable Regions
In the Users And Roles category, select a role, and then click the Edit Role Settings button. Select the New Pages category, and then add existing pages to the list under Create A New Page By Copying A Page From This List. For more information, see Administering Contribute.
Page 406: Creating Repeating Regions
See also “Creating a Dreamweaver template” on page 395 “Set highlighting preferences for template regions” on page 419 Select editable regions You can easily identify and select template regions in both, the template document and template-based documents. Select an editable region in the Document window ❖...
Page 407 There are two repeating region template objects you can use: repeating region and repeating table. See also “Types of template regions” on page 387 Create 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 necessarily an editable region.
Page 408 Determines the number of pixels between adjacent table cells. Cell Spacing If you don’t explicitly assign values for cell padding and cell spacing, most browsers display the table as if cell padding were set to 1 and cell spacing were set to 2. To ensure that browsers display the table with no padding or spacing, set Cell Padding and Cell Spacing to 0.
Page 409: Using Optional Regions
Using optional regions About template optional regions An optional region is a region in a template that users can set to show or to hide in a template-based document. Use an optional region when you want to set conditions for displaying content in a document. When you insert an optional region, you can either set specific values for a template parameter or define conditional statements (If...else statements) for template regions.
Page 410 Enter a name for the optional region, click the Advanced tab if you want to set values for the optional region, and then click OK. Insert an editable optional region In the Document window, place the insertion point where you want to insert the optional region. You cannot wrap a selection to create an editable optional region.
Page 411: Defining Editable Tag Attributes
• If you want to write a template expression to control the display of an optional region, click the Advanced tab, select Enter Expression, then enter the expression in the box. Note: Dreamweaver inserts double-quotation marks around the text you enter. Click OK.
Page 412: Creating A Nested Template
In the Label box, enter a unique name for the attribute. To make it easier to identify a specific editable tag attribute later, use a label that identifies the element and the attribute. For example, you might label an image whose source is editable logoSrc or label the editable background color of a body tag bodyBgcolor.
Page 413 DREAMWEAVER CS3 User Guide 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.
Page 414 DREAMWEAVER CS3 User Guide To create a nested template, a new document based on the template was created and then saved as a template and named TrioNested. In the nested template, two editable regions have been added in the editable region named Body 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.
Page 415: Editing, Updating, And Deleting Templates
 <p>@@("")@@ Editable 1 </p>  For more information, see TechNote 16416 on the Adobe website at www.adobe.com/go/16416. Editing, updating, and deleting templates About editing and updating templates When you make changes to and save a template, all the documents based on the template are updated. You can also manually update a template-based document or the entire site if necessary.
Page 416 You can perform the following template management tasks with the Assets panel: • Create a template • Edit and update templates • Apply or remove a template from an existing document Dreamweaver checks template syntax when you save a template but it’s a good idea to manually check the template syntax while you’re editing a template.
Page 417 • Right-click (Windows) or Control-click (Macintosh), then select Templates > Open Attached Template. Modify the contents of the 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.
Page 418 Apply template changes to the current template-based document Open the document in the Document window. Select Modify > Templates > Update Current Page. Dreamweaver updates the document with any template changes. Update the entire site or all documents that use a specified template You can update all the pages in the site, or only update pages for a specific template.
Page 419: Exporting And Importing Template Content
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. You can convert such a document into an HTML file without editable or locked regions.
Page 420: Applying Or Removing A Template From An Existing Document
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.
Page 421: Editing Content In A Template-Based Document
• Select Nowhere to remove the content from the document. To move all unresolved content to the selected region, click Use For All. Click OK to apply the template or click Cancel to cancel the application of the template to the document. Important: When you apply a template to an existing document, the template replaces the document’s contents with the template’s boilerplate content.
Page 422 In pages based on templates, template users can edit content in editable regions only. You can easily identify and select editable regions to edit content. Template users cannot edit content in locked regions Note: 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.
Page 423 In the Name list, select a property. The dialog box updates to show the selected property’s label and its assigned value. Select Show to display the optional region in the document, or deselect Show to hide the optional region. Note: The field name and default setting are defined in the template,. Select Allow Nested Templates To Control This if you want to pass the editable property along to a documents based on the nested template.
Page 424: Template Syntax
• To paste a repeating entry, select Edit > Paste. Note: Pasting inserts a new entry; it does not replace an existing entry. Template syntax General syntax rules Dreamweaver uses HTML comment tags to specify regions in templates and template-based documents, so template-based documents are still valid HTML files.
Page 425: Setting Authoring Preferences For Templates
         Check template syntax Dreamweaver checks the template syntax when you save a template, but you can manually check the template syntax prior to saving a template.
Page 426 Note: If you want to make global changes, you can edit the source file that stores your preferences. On Windows XP, this is located at C:\Documents and Settings\%username%\Application Data\Adobe\Dreamweaver 9\Configu- ration\CodeColoring\Colors.xml. On Windows Vista, this is located at C:\Users\%username%\Application Data\Adobe\Dreamweaver 9\Configuration\CodeColoring\Colors.xml...
Page 427: About Xml And Xslt
Chapter 15: Displaying XML data Adobe® Dreamweaver® CS3 includes tools that let you display Extensible Markup Language (XML) data on your web page and create pages that perform Extensible Stylesheet Language Transformations (XSLT) on either the client or the server.
Page 428 For a tutorial about understanding XML, see www.adobe.com/go/vid0165. Server-side XSL transformations Dreamweaver provides methods for creating XSLT pages that let you perform server-side XSL transformations.
Page 429 DREAMWEAVER CS3 User Guide 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 ColdFusion page).
Page 430 Dreamweaver supports XSL transformations for ColdFusion, ASP, ASP.NET, and PHP pages. Note: Your server must be correctly configured to perform server-side transformations. For more information, contact your server administrator, or visit www.adobe.com/go/dw_xsl. See also “Performing XSL transformations on the server” on page 427 Client-side XSL transformations You can perform XSL transformations on the client without the use of an application server.
Page 431 DREAMWEAVER CS3 User Guide 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.
Page 432 DREAMWEAVER CS3 User Guide The disadvantage of 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.
Page 433 When you apply a Repeating Region XSLT object to an element 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.
Page 434: Performing Xsl Transformations On The Server
Type of page previewed in browser Dynamic page containing XSLT fragment XSLT fragment or entire XSLT page XML file with link to entire XSLT page The following topics provide guidelines for helping you determine the appropriate previewing methods, based on your needs.
Page 435 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.adobe.com/go/dw_xsl. 4. Create an XSLT fragment or page, or convert an HTML page to an XSLT page.
Page 436 Create an XSLT page 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 tag and a <body> 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.
Page 437 Element Represents <>+ Optional XML element Element node in boldface type Current context element XML attribute Save your new page (File > Save) with the .xsl or .xslt extension (.xsl is the default). Convert 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.
Page 438 Display XML data in XSLT pages After you’ve created an XSLT page and attached an XML data source, you can bind data to the page. To do this, you add an XML data placeholder to your page and then use the XPath Expression Builder or the Property inspector to format selected data that will be displayed on the page.
Page 439 See also “Previewing XML data” on page 426 “Presenting content with tables” on page 176 Display repeating XML elements The Repeating 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.
Page 440 In the XPath Expression Builder, select the repeating element, indicated by a small plus sign. 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.
Page 441 Insert XSLT fragments in dynamic pages After 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.
Page 442: Create A Dynamic Link
You can create a dynamic link on your XSLT page that links to a specific URL when the user clicks a specified word or group of words from your XML data. For full instructions, see the Dreamweaver errata at www.adobe.com/go/dw_documentation. Applying styles to XSLT fragments...
Page 443 Note: 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. For more information on using CSS to format XSLT fragments, see www.adobe.com/go/dw_xsl_styles. See also “Use Design-Time style sheets”...
Page 444 In the XSL Transformation dialog box, click the Plus (+) button next to XSLT Parameters. In the Add Parameters dialog box, enter a name for the parameter in the Name box. The name can only contain alphanumeric characters. It cannot contain spaces. Do one of the following: •...
Page 445 For example, if you wanted to display the word “Unavailable” next to the price of an item when the item is unavailable, you type the text “Unavailable” on the page, select it, and then apply a conditional region to the selected text.
Page 446 For more information and examples on writing conditional expressions, see the panel (Help > Reference). Apply multiple conditional XSLT regions You can write a simple conditional expression to insert into your XSLT page. If content is selected when you open the Conditional Region dialog box, the content is wrapped in an block is added at the insertion point on the page.
Page 447 Set conditional (When) properties The purpose of the Set Conditional Region Property inspector is to change the condition used in a multiple condi- tional region in your XSL page. The multiple conditional region tests the condition and takes a course of action based on the result.
Page 448 DREAMWEAVER CS3 User Guide Note: If you select a different node in the XML schema tree, the expression changes to reflect your choice. In the following example, you want to display the subelement of the node: price item This selection would insert the following code in your XSLT page: <xsl:value-of select="price"/>...
Page 449 These options would insert the following code in your XSLT page: <xsl:value-of select="format-number(provider/store/items/item/price,'$#.00')"/> Click OK. To display the value of each node in the XML file, apply a repeating region to the element containing the dynamic text (for example, an HTML table row or a paragraph). For more information and examples on selecting nodes to return a value, see the Reference panel.
Page 450 Filter the data to be repeated Use a filter to identify repeating nodes that have specific attribute values. In the XML schema tree, select a node to repeat. Click the Build Filter expander button. Click the Plus (+) button to create an empty filter. Enter the filter criteria in the following fields: Specifies the repeating node that contains the data you want to filter by.
Page 451: Performing Xsl Transformations On The Client
Troubleshooting XSL transformations If you can’t get your XSL transformations to work, look at the troubleshooting guide available at www.adobe.com/go/dw_xsl_faq. It provides answers to many frequently asked questions. Performing XSL transformations on the client Workflow for performing client-side XSL transformations You can perform client-side XSL transformations.
Page 452 The general workflow for performing client-side XSL transformations is as follows (each step is described in other topics): 1. Set up a Dreamweaver site. 2. Create an XSLT page or convert an HTML page to XSLT. • In your Dreamweaver site, create an entire XSLT page. •...
Page 453: Missing Character Entities
Click OK to close the dialog box and insert the reference to the XSLT page at the top of the XML document. Troubleshooting XSL transformations If you can’t get your XSL transformations to work, look at the troubleshooting guide available at www.adobe.com/go/dw_xsl_faq. It provides answers to many frequently asked questions. Missing character entities Specify a missing character entity In XSLT, some characters are not allowed in certain contexts.
Page 454 XSLT has the following five predefined entities: Character < (less-than) & (ampersand) > (greater-than) " (quote) ‘ (apostrophe) If you use other character entities in an XSL file, you need to define them in the DTD section of the XSL file. Dreamweaver provides several default entity definitions that you can see at the top of an XSL file created in Dreamweaver.
Page 455 Add entity definitions to the XSL files Dreamweaver creates by default Locate the following configuration file in the Dreamweaver application folder and open it in any text editor: Configuration/DocumentTypes/MMDocumentTypeDeclarations.xml Locate the declaration called mm_xslt_1: <documenttypedeclaration id="mm_xslt_1"> Enter the new entity tag or tags in the list of entity tags, as follows: <!ENTITY entityname "entitycode;">...
Page 456: About The Spry Framework
It is not intended as a full web application framework for enterprise-level web development (though it can be used in conjunction with other enterprise-level pages). For more information on the Spry framework, see www.adobe.com/go/learn_dw_spryframework. For a tutorial about using Spry to build web pages, see www.adobe.com/go/vid0166. Adding Spry widgets About Spry widgets A Spry widget is a page element that provides a richer user experience by enabling user interaction.
Page 457 SpryAccordion.css and SpryAccordion.js). When you insert a widget in a saved page, Dreamweaver creates a SpryAssets directory in your site, and saves the corresponding JavaScript and CSS files to that location. For a tutorial on using Spry widgets, see www.adobe.com/go/vid0167. See also “Understanding Cascading Style Sheets”...
Page 458: Working With The Accordion Widget
The HTML for the Accordion widget also includes document and after the accordion’s HTML markup. For a more comprehensive explanation of how the Accordion widget works, including a full anatomy of the Accordion widget’s code, see www.adobe.com/go/learn_dw_spryaccordion. Insert the Accordion widget ❖...
Page 459 You can alter the CSS rules for the Accordion widget and create an accordion that is styled to your liking. For a more advanced list of styling tasks, see www.adobe.com/go/learn_dw_spryaccordion_custom. All CSS rules in the following topics refer to the default rules located in the SpryAccordion.css file. Dreamweaver saves the SpryAccordion.css file in the SpryAssets folder of your site whenever you create a Spry Accordion widget.
Page 460: Working With The Menu Bar Widget
Text to change Relevant CSS rule Text in the entire accordion (includes .Accordion or .AccordionPanel both tab and content panel) Text in accordion panel tabs only .AccordionPanelTab Text in accordion content panels .AccordionPanelContent only Change Accordion widget background colors ❖ To change the background colors of different parts of an Accordion widget, use the following table to locate the appropriate CSS rule, and then add or change background color properties and values: Part of widget to change...
Page 461 For a more comprehensive explanation of how the Menu Bar widget works, including a full anatomy of the Menu Bar widget’s code, see www.adobe.com/go/learn_dw_sprymenubar. For a tutorial on creating a Spry Menu Bar, see www.adobe.com/go/vid0168. Insert the Menu Bar widget Select Insert >...
Page 462 To add a submenu to a submenu, select the name of the submenu item to which you want to add another submenu item, and click the plus button above the third column in the Property inspector. Note: Dreamweaver only supports two levels of submenus in Design view, but you can add as many submenus as you want in Code view.
Page 463 Loads the linked page in the same browser window. This is the default option. If the page is in a frame or _self frameset, the page loads within that frame. Loads the linked document in the immediate frameset parent of the document. _parent Loads the linked page in the topmost window of a frameset.
Page 464 You can alter the CSS rules for the Menu Bar widget and create a menu bar that is styled to your liking. For a more advanced list of styling tasks, see www.adobe.com/go/learn_dw_sprymenubar_custom. All CSS rules in the topics below refer to the default rules located in the SpryMenuBarHorizontal.css or SpryMenuBarVertical.css file (depending on your selection).
Page 465: Working With The Collapsible Panel Widget
Color to change CSS rule for vertical or horizontal menu bar Default background ul.MenuBarVertical a, ul.MenuBarHo- rizontal a Background color when mouse ul.MenuBarVertical a:hover, pointer moves over it ul.MenuBarHorizontal a:hover Background color when in focus ul.MenuBarVertical a:focus, ul.MenuBarHorizontal a:focus Menu Bar item color when mouse ul.MenuBarVertical a.MenuBarItem- pointer moves over it Hover, ul.MenuBarHorizontal...
Page 466 The HTML for the Collapsible Panel widget also includes script tags in the head of the document and after the Collapsible Panel’s HTML markup. For a more comprehensive explanation of how the Collapsible Panel widget works, including a full anatomy of the Collapsible Panel widget’s code, see www.adobe.com/go/learn_dw_sprycollapsiblepanel. Insert the Collapsible Panel widget ❖...
Page 467 You can alter the CSS for the Collapsible Panel widget and create a collapsible panel that is styled to your liking. For a more advanced list of styling tasks, see www.adobe.com/go/learn_dw_sprycollapsiblepanel_custom. All CSS rules in the topics below refer to the default rules located in the SpryCollapsiblePanel.css file. Dreamweaver saves the SpryCollapsiblePanel.css file in the SpryAssets folder of your site whenever you create a Spry Collapsible...
Page 468: Working With The Tabbed Panels Widget
Tabbed Panel widget’s HTML markup. For a more comprehensive explanation of how the Tabbed Panels widget works, including a full anatomy of the widget’s code, see www.adobe.com/go/learn_dw_sprytabbedpanels. Insert the Tabbed Panels widget ❖...
Page 469 You can alter the CSS rules for the Tabbed Panels widget and create a widget that is styled to your liking. For a more advanced list of styling tasks, see www.adobe.com/go/learn_dw_sprytabbedpanels_custom. All CSS rules in the topics below refer to the default rules located in the SpryTabbedPanels.css file. Dreamweaver saves the SpryTabbedPanels.css file in the SpryAssets folder of your site whenever you create a Spry Tabbed Panels...
Page 470 Style Tabbed Panels widget text You can style the text of a Tabbed Panels widget by setting properties for the entire Tabbed Panels widget container, or by setting properties for the components of the widget individually. ❖ To change the text styling of a Tabbed Panels widget, use the following table to locate the appropriate CSS rule, and then add your own text styling properties and values: Text to change Relevant CSS rule...
Page 471: Working With The Validation Text Field Widget
Working with the Validation Text Field widget About the Validation Text Field widget A Spry Validation Text Field widget is a text field that displays valid or invalid states when the site visitor enters text. For example, you can add a Validation Text Field widget to a form in which visitors type their e-mail addresses. If they fail to type the “@”...
Page 472 HTML markup. For a more comprehensive explanation of how the Validation Text Field widget works, including a full anatomy of the Validation Text Field widget’s code, see www.adobe.com/go/learn_dw_sprytextfield. Insert the Validation Text Field widget Select Insert >...
Page 473 Validation type Zip Code Phone Number Social Security Number Currency Real Number/Scientific Notation IP Address Custom Specify when validation occurs You can set the point at which validation occurs—when the site visitor clicks outside the widget, as the visitor types, or when the visitor tries to submit the form.
Page 474 You can alter the CSS for the Validation Text Field widget so that you can create a widget that is styled to your liking. For a more advanced list of styling tasks, see www.adobe.com/go/learn_dw_sprytextfield_custom. September 4, 2007...
Page 475 All CSS rules in the topics below refer to the default rules located in the SpryValidationTextField.css file. Dreamweaver saves the SpryValidationTextField.css file in the SpryAssets folder of your site whenever you create a Spry Validation Text Field widget. Consulting this file is helpful because it contains commented information about various styles that apply to the widget.
Page 476: Working With The Validation Text Area Widget
Working with the Validation Text Area widget About the Validation Text Area widget A Spry Validation Text Area widget is a text area that displays valid or invalid states when the user enters a few sentences of text. If the text area is a required field and the user fails to enter any text, the widget returns a message stating that a value is required.
Page 477 HTML markup. For a more comprehensive explanation of how the Validation Text Area widget works, including a full anatomy of the Validation Text Area widget’s code, see www.adobe.com/go/learn_dw_sprytextarea. Insert the Validation Text Area widget Select Insert >...
Page 478 You can alter the CSS for the Validation Text Area widget so that you can create a widget that is styled to your liking. For a more advanced list of styling tasks, see www.adobe.com/go/learn_dw_sprytextarea_custom. All CSS rules in the topics below refer to the default rules located in the SpryValidationTextArea.css file.
Page 479: Working With The Validation Select Widget
Style Validation Text Area widget error message text By default, error messages for the Validation Text Area widget appear in red with a 1-pixel border surrounding the text. ❖ To change the text styling of Validation Text Area widget error messages, use the following table to locate the appropriate CSS rule, and then change the default properties, or add your own text styling properties and values: Text to change Relevant CSS rule...
Page 480 HTML markup. For a more comprehensive explanation of how the Validation Select widget works, including a full anatomy of the Validation Select widget’s code, see www.adobe.com/go/learn_dw_spryselect. Insert the Validation Select widget Select Insert >...
Page 481 You can alter the CSS for the Validation Select widget so that you can create a widget that is styled to your liking. For a more advanced list of styling tasks, see www.adobe.com/go/learn_dw_spryselect_custom. All CSS rules in the topics below refer to the default rules located in the SpryValidationSelect.css file. Dreamweaver saves the SpryValidationSelect.css file in the SpryAssets folder of your site whenever you create a Spry Validation...
Page 482: Working With The Validation Checkbox Widget
Although you can easily edit rules for the Validation Select widget directly in the accompanying CSS file, you can also use the CSS Styles panel to edit the widget’s CSS. The CSS Styles panel is helpful for locating the CSS classes assigned to different parts of the widget, especially if you use the panel’s Current mode.
Page 483 HTML markup. For a more comprehensive explanation of how the Validation Checkbox widget works, including a full anatomy of the Validation Checkbox widget’s code, see www.adobe.com/go/learn_dw_sprycheckbox. Insert the Validation Checkbox widget Select Insert >...
Page 484 By default, error messages for the Validation Checkbox widget appear in red with a 1-pixel border surrounding the text. You can alter the CSS for the Validation Checkbox widget so that you can create a widget that is styled to your liking. For a more advanced list of styling tasks, see www.adobe.com/go/learn_dw_sprycheckbox_custom. Open the SpryValidationCheckbox.css file.
Page 485: Displaying Data With Spry
<category>Print Publishing</category> <boximage>images/illustrator.gif</boximage> <descheader>Vector graphics reinvented</descheader> <desc>Adobe Illustrator CS2 software gives you new creative freedom ...</desc> </product> </products> If you select <product> as a repeating element, the flattened array of XML data results in a column of data for each product element, such as <name>, in the data set:...
Page 486 You can incorporate Spry data objects into your Dreamweaver pages in many ways, some of which require a deeper knowledge of the Spry framework. For more information about the framework, visit www.adobe.com/go/learn_dw_spryframework. For more information on Spry Data Sets in particular, visit www.adobe.com/go/learn_dw_sprydataset.
Page 487 Note: If you don’t already have an XML data set to use for testing, the Spry assets available at www.adobe.com/go/learn_dw_spryframework Select Insert > Spry > Spry XML Data Set. You can also click the Spry XML Data Set button in the Spry category in the Insert bar.
Page 488 In the Row Elements panel, select the element that contains the data you want to display. Typically this is a repeating node, such as <product>, with several subordinate fields, such as <name>, <category>, and <descheader>. The XPath text box displays an expression that shows where the chosen node is located in the XML source file. For example, if you use a data set with a schema like the one in the graphic above and then select the <product>...
Page 489 If you want your data to sort automatically as it loads, select an element from the Sort menu. If you later insert a sortable Spry table with a different sort order, that sort order takes precedence. Select Ascending or Descending from the Direction menu to indicate the type of sort to perform. To ensure that there are no duplicate columns, select the Distinct On Load option.
Page 490 Choose one of the following options: • To create a Spry Region, select Region (the default) as the type of region to insert. • To create a Spry Detail Region, select the Detail Region option. You would only use a detail region if you want to bind dynamic data that updates as data in another Spry region changes.
Page 491 Create a Spry table There are two types of Spry tables: a simple table and a dynamic master table that binds a detail region to it in order to allow dynamic updating of data on a Dreamweaver page. If you are creating a simple table, you can set one or more columns as sortable and define CSS styles for various table elements.
Page 492 Click OK to see the table appear in Design view with a row of headers and a row of data references, enclosed in curly brackets ({}), for each of the included elements. In Code view, HTML table tags are inserted into your file, along with code that identifies the sortable name and category columns.
Page 493: Adding Spry Effects
For example, you can create a list of states and show users Alabama and Alaska, but send AL or AL to the server. You can also use the SELECT as a navigational tool and show product names such as “Adobe Dreamweaver” and “Adobe Acrobat”...
Page 494 SpryEffects.js file, which is necessary to include the effects. Do not remove this line from your code or the effects will not work. For a comprehensive overview of the Spry effects available in the Spry framework, visit www.adobe.com/go/learn_dw_spryeffects. Apply an Appear/Fade effect Note: You can use this effect with any HTML objects except applet, body, iframe, object, tr, tbody, or th.
Page 495 In the Blind Up From/Blind Down From box, define the blind-scrolling starting point as a percentage or as a pixel number. These values are calculated from the top of the object. In the Blind Up To/Blind Down To field, define the blind-scrolling end point as a percentage or as a pixel number. These values are calculated from the top of the object.
Page 496 Apply a Shake effect Note: You can use this effect with these HTML objects: address, blockquote, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, iframe, img, object, p, ol, ul, li, applet, dir, hr, menu, pre, or table. (Optional) Select the content or layout object you want to apply the effect to.
Page 497 Delete an effect You can remove one or more effect behaviors from an object. (Optional) Select the content or layout object you want to apply the effect to. In the Behaviors panel (Window > Behaviors), click the effect you want to delete from the list of behaviors. Do one of the following: •...
Page 498: Understanding Web Applications
Before you begin building dynamic web pages, there are a few preparations that must be done, including setting up a web application server and connecting to a database for Coldfusion, ASP, ASP.NET, JSP, and PHP applications. Adobe® Dreamweaver® CS3 handles database connections differently depending on your server technology. Understanding web applications About web applications A web application is a website that contains pages with partly or entirely undetermined content.
Page 499: How A Web Application Works
Chris’s problem is that the fitness program has grown too successful. So many employees now participate that Chris is inundated with e-mails at the end of each month. Chris asks Janet if a web-based solution exists. Janet proposes an intranet-based web application that performs the following tasks: •...
Page 500 When the web server receives a request for a static page, the server reads the request, finds the page, and sends it to the requesting browser, as the following example shows: A. Step 1 - Web browser requests static page. B. Step 2 - Web server finds page. C. Step 3 - Web server sends page to requesting browser. In the case of web applications, certain lines of code are undetermined when the visitor requests the page.
Page 501 This statement creates a three-column recordset and fills it with rows containing the last name, first name, and fitness points of all employees in the database. For more information, see www.adobe.com/go/learn_dw_sqlprimer. The following example shows the process of querying a database and returning data to the browser:...
Page 502: Authoring Dynamic Pages
A. Step 1 - Web browser requests dynamic page. B. Step 2 - Web server finds page and passes it to application server. C. Step 3 - Application server scans page for instructions. D. Step 4 - Application server sends query to database driver. E. Step 5 - Driver executes the query against the database.
Page 503 <html> <head> <title>Trio Motors Information Page</title> </head> <body> <h1>About Trio Motors</h1> <p>Trio Motors is a leading automobile manufacturer.</p>  <cfset department="Sales"> <cfoutput> <p>Be sure to visit our #department# page.</p> </cfoutput>  </body>...
Page 504: Web Application Terminology
DREAMWEAVER CS3 User Guide Dreamweaver can create the server-side scripts or tags necessary to make your pages work, or you can write them by hand in the Dreamweaver coding environment. See also “Choosing your application server” on page 502 Web application terminology This section defines frequently used terms relating to web applications.
Page 505: Installing A Local Web Server
If you’re a Macintosh user, you can use the Apache web server already installed on your Macintosh. Note: Adobe does not provide technical support for third-party software such as Microsoft Internet Information Server. If you need assistance with a Microsoft product, please contact Microsoft technical support.
Page 506 DREAMWEAVER CS3 User Guide If you use Internet Information Server (IIS) to develop web applications, the default name of your web server is the name of your computer. You can change the server name by changing the name of your computer. If your computer has no name, the server uses the word localhost.
Page 507 For the Mac OS, 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.
Page 508: Setting Up A Web Application
See also “Install a PHP application server” on page 503 Setting up a web application What you need to build web applications To build web applications in Adobe® Dreamweaver® CS3, you need the following software: • A web server •...
Page 509 Both Windows and Macintosh users can download and install a fully functional, developer edition of ColdFusion MX 7 from the Adobe website at www.adobe.com/go/coldfusion/. Note: The Developer Edition is for non-commercial use for developing and testing web applications. It is not licensed for deployment.
Page 510 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. Therefore, if you have an existing web server such as Microsoft IIS on your development computer, you may want to use it instead of the built-in ColdFusion web server.
Page 511 This code displays the time when the page was processed on the server. Copy the file to the C:\Inetpub\wwwroot folder of the Windows computer running IIS. In your web browser, enter the URL of your test page, and then press Enter. If you installed PHP on your local computer, you can enter the following URL: http://localhost/timetest.php The test page should open and display the time of day.
Page 512 Double-click the installer package entropy-php.mpkg and follow the onscreen instructions. After installing PHP, you can test the server to make sure it works properly. See the next section. Test the PHP installation on the Macintosh In Dreamweaver or any text editor, create a plain text file and name it timetest.php. In the file, enter the following code: <p>This page was created at <b>...
Page 513: Creating A Root Folder For The Application
• Macromedia JRun for Windows, Mac OS X, Linux, Solaris, or UNIX. You can download a trial version of JRun from the Adobe website at www.adobe.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://tomcat.apache.org/.
Page 514 Web server Default root folder ColdFusion MX 7 \CFusionMX7\wwwroot \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.
Page 515: Database Connections For Coldfusion Developers
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. •...
Page 516 Create or modify 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.
Page 517: Database Connections For Asp Developers
Database connections for ASP developers About 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.
Page 518 DREAMWEAVER CS3 User Guide Note: 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 parameter in a connection string.
Page 519 Driver={Microsoft Access Driver (*.mdb)}; DBQ=C:\Inetpub\wwwroot\Research\trees.mdb Here’s an example of a connection string that will create an OLE DB connection to a SQL Server database called Mothra located on a server called Gojira: Provider=SQLOLEDB;Server=Gojira;Database=Mothra;UID=jsmith; PWD=orlando8 Create a connection using a local DSN Note: This section assumes you have set up an ASP application.
Page 520 Create a connection using a remote DSN Note: This section assumes you have set up an ASP application. It also assumes a database is set up on your local computer or on a system to which you have network or FTP access. Note: Dreamweaver can retrieve only server DSNs created with the Windows ODBC Data Source Administrator.
Page 521 Click the Plus (+) button on the panel, select Custom Connection String from the menu, complete the options, and click OK. Enter a name for the new connection without spaces or special characters. Enter a connection string to the database. If you do not specify an OLE DB provider in the connection string— that is, if you don’t include a parameter—ASP will automatically use the OLE DB provider for ODBC Provider...
Page 522 The virtual path, /jsmith/index.htm, stands in for the physical path, c:\Inetpub\wwwroot\accounts\users\jsmith\index.htm. Find 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.
Page 523 Suppose that 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 is created:...
Page 524: Database Connections For Php Developers
Database connections for PHP developers About PHP database connections For PHP development, Dreamweaver only supports the MySQL database system. Other database systems such as Microsoft Access or Oracle are not supported. MySQL is open-source software you can download for free from the Internet for non-commercial use.
Page 525: Database Connections For Asp.net Developers
Edit or delete 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.
Page 526 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. See also “Accessing a database” on page 494 Create an ASP.NET database connection in Dreamweaver After obtaining an OLE DB provider for your database, use it to create a database connection in Dreamweaver.
Page 527 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.
Page 528: Database Connections For Jsp Developers
Right-click (Windows) or Control-click (Macintosh) the connection, and select Delete Connection from the menu. In the dialog box that appears, confirm that you want to delete the connection. Database connections for JSP developers About JSP database connections A JSP application must connect to a database through a JDBC driver. After you install the database driver, you can connect to the database through it.You must specify certain parameter values to connect through your JDBC driver.
Page 529 For instance, if your server is called Aristotle, the database port is 1521, and you defined a database SID called on that server, you would enter the following parameter values in Dreamweaver: patients 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.
Page 530: Connecting Through An Odbc Driver
Dreamweaver attempts to connect to the database. If the connection fails, double-check the connection parameters. If the connection still fails, check the settings for the testing folder Dreamweaver uses to process dynamic pages. See also “Restrict database information displayed in Dreamweaver” on page 540 “Obtaining a JDBC driver for your database”...
Page 531 (it does not support concurrent use by multiple threads). For more information on the driver’s limitations, see TechNote 17392 on the Adobe support center at www.adobe.com/go/17392. After you install the bridge driver, you can create the database connection.
Page 532: Troubleshooting Database Connections
Edit or delete 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.
Page 533: Troubleshooting Microsoft Error Messages
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 Adobe Support Center: • Understanding anonymous authentication and the IUSR account at •...
Page 534 Note: Adobe does not provide technical support for third-party software such as Microsoft Windows, and IIS. If this information 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), ”...
Page 535 • PRB: Error “Cannot Open File Unknown” Using Access at us;Q166029. [Reference]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).
Page 536 [Reference]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.
Page 537: Removing Connection Scripts
If you’ve uploaded the MMHTTPDB scripts file to a production server, you should delete the MMHTTPDB scripts file. The Remove Connection Scripts command automatically removes the script files for you. For more information, see TechNote 19214 on the Adobe website at www.adobe.com/go/19214. September 4, 2007...
Page 538: Using A Database To Store Content
You can use Adobe® Dreamweaver® CS3 to design web forms to insert, update, or delete data from the database. Using a database to store content allows you to separate your website’s design from the content you want to display to site users.
Page 539: Collecting Data Submitted By Users
Collecting data submitted by users About collecting data You can use web pages to gather information from users, store that information in the server’s memory, and then use the information to create a dynamic response based on the user’s input. The most common tools for gathering user information are HTML forms and hypertext links.
Page 540: Url Parameters
Each menu choice corresponds to a hard-coded value that is submitted as a form parameter to the server. The List Values dialog box in the following example matches each list item to a value (Add, Update, or Delete): After a form parameter is created, Dreamweaver can retrieve the value and use it in a web application. After defining the form parameter in Dreamweaver, you can insert its value within a page.
Page 541 DREAMWEAVER CS3 User Guide The server sends the report.cfm page to the browser and displays the value of items in the requested currency. When this user ends the session, the server clears the value of the URL parameter, freeing server memory to hold new user requests.
Page 542: Accessing Data Stored In Session Variables
DREAMWEAVER CS3 User Guide See also “About URL and form parameters” on page 544 “Define form parameters” on page 557 “Adding dynamic content to pages” on page 564 “Accessing data stored in a database” on page 531 Accessing data stored in session variables How session variables work Session variables store information (usually form or URL parameters submitted by users) and make it available to all of a web application’s pages for the duration of the user’s visit.
Page 543 DREAMWEAVER CS3 User Guide 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.
Page 544 Each link has a URL parameter called that submits the user’s text preference to the server, as the following fontsize Macromedia ColdFusion® from Adobe example shows: <a href="resort.cfm?fontsize=large">Larger Text</a><br> <a href="resort.cfm?fontsize=small">Normal Text</a> Store the user’s text preference in a session variable and use it to set the font size on each page the user requests.
Page 545: Optimizing The Workspace For Visual Development
Select the Databases panel (Window >Databases) to explore databases or create database connections. • Select the Components panel (Window > Components) to inspect, add, or modify code for JavaBeans, Adobe ColdFusion components, or web services. Note: 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.
Page 546: Previewing Dynamic Pages In A Browser
See also “Bindings panel” on page 546 “Server Behaviors panel” on page 546 “Databases panel” on page 547 “Components panel” on page 547 View your database within Dreamweaver After connecting to your database, you can view its structure and data within Dreamweaver. Open the Databases panel (Window >...
Page 547 See also “Set up a testing server” on page 48 “View live data in Design view” on page 579 Restrict 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.
Page 548: Designing Dynamic
If you change the field type in the Property inspector to a value that Dreamweaver recognizes—for example, if you correct the spelling error—the Property inspector updates to show the properties for the recognized type. Set any of the following options in the Property inspector: Assigns a name to the field.
Page 549 Before making a dynamic page—or an entire website—available on the web, you should test its functionality. You should also consider how your application’s functionality might affect people with disabilities. For a tutorial on creating dynanic pages, see www.adobe.com/go/learn_dw_webapp. See also “Presenting content with tables”...
Page 550: Dynamic Content Sources Overview
DREAMWEAVER CS3 User Guide “Inserting Flash content” on page 255 “Data sources for web applications” on page 531 Dynamic content sources overview 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.
Page 551 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.
Page 552 DREAMWEAVER CS3 User Guide See also “URL parameters” on page 533 “Define form parameters” on page 557 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.
Page 553: Dynamic Content Panels
Provide information about the server running ColdFusion, the browser requesting a page, and other CGI variables information about the processing environment. Can be accessed by all clients and applications on the server. They persist until the server is stopped. Server variables Created with the tag or Local variables...
Page 554: Defining Sources Of Dynamic Content
• “Building a database search page (ASP.NET)” on page 629 • “Building a record insert page (all servers)” on page 633 • “Building pages to update a record (all servers)” on page 637 • “Building pages to delete a record (all servers)” on page 643 •...
Page 555 Select Windows > Bindings to display the Bindings panel. In the Bindings panel, click the Plus (+) button and select Recordset (Query) from the pop-up menu. The simple Recordset dialog box appears. If you are developing a ColdFusion or ASP.NET site, the Recordset dialog box is slightly different.
Page 556 A table appears displaying the returned data. Each row contains a record and each column represents a field in that record. Click OK. The newly defined recordset appears in the Bindings panel. Options for the simple Recordset dialog box (ColdFusion) Define a recordset for ColdFusion document types as a source of dynamic content without you having to hand code SQL statements.
Page 557 Click Test to connect to the database and create an instance of the data source. A table appears displaying the returned data. Each row contains a record and each column represents a field in that record. Click OK to close the test recordset. Click OK.
Page 558 Note: If you are writing SQL statements for ASP.NET document types, see “Writing SQL for ASP.NET” on page 544 for rules specific to ASP.NET. In the Document window, open the page that will use the recordset. Select Windows > Bindings to display the Bindings panel. In the Bindings panel, click the Plus (+) button and select Recordset (Query) from the pop-up menu.
Page 559 For example, if you select a table column, the available buttons are SELECT, WHERE, and ORDER BY. Click one of the buttons to add the associated clause to your SQL statement. You can also use a predefined SQL statement in a stored procedure by selecting the stored procedure from the Database Items tree and clicking the Procedure button.
Page 560 Recordset names can only contain letters, numbers, and the underscore character (_). You cannot use special characters or spaces. If you’re defining a recordset for a ColdFusion component (that is, if a CFC file is currently open in Dreamweaver), select an existing CFC function from the Function pop-up menu, or click the New Function button to create a new function.
Page 561 If the SQL statement contains run-time references, make sure the Default Value column of the Page Parameters field contains valid test values before clicking Test. If successful, a table appears displaying the data in your recordset. Each row contains a record and each column represents a field in that record.
Page 562 Name FormFieldName The run-time value is usually a URL or form parameter entered by a user in an HTML form field. Click Test to connect to the database and create an instance of the recordset. If the SQL statement contains run-time references, make sure the Default Value column of the Page Parameters field contains valid test values before clicking Test.
Page 563 Click OK to add the recordset to the Bindings panel. Example: 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.
Page 564 See also “About URL and form parameters” on page 544 “Adding dynamic content to pages” on page 564 “URL parameters” on page 533 “ColdFusion server variables” on page 545 “URL parameters” on page 533 Define 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 method, the data submitted by the form is passed to the server.
Page 565 Define 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.
Page 566 See also “About adding dynamic content” on page 564 “Define server variables” on page 559 Use 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 tag on the page.
Page 567 The following table lists the built-in ColdFusion server variables: Variable Description Server.ColdFusion.Product- ColdFusion product name. Name Server.ColdFusion.Product- ColdFusion version number. Version Server.ColdFusion.ProductLev ColdFusion edition (Enterprise, Professional). Server.ColdFusion.Serial- Serial number of currently installed version of ColdFusion. Number Server.OS.Name Name of operating system running on the server (Windows XP, Windows 2000, Linux).
Page 568 Retrieves the values of the cookies sent in an HTTP request. For example, suppose the page The Cookies collection reads a cookie called "readMe" on the user’s system. On the server, the values of the cookie are stored in the variable Request.Cookies("readMe") Retrieves the certification fields from the HTTP request sent by the browser.
Page 569 Define a ColdFusion cookie variable Cookie variables are created in the code, and access information contained in cookies passed to the server by a browser. The defined cookie variable appears in the Bindings panel. ❖ In the Cookie Variable dialog box, enter the name of the cookie variable, and click OK. Define a ColdFusion CGI variable The defined CGI variable appears in the Bindings panel.
Page 570 The following table lists the most common CGI variables created by the browser and passed to the server: Variable Description HTTP_REFERER The referring document. This is the document that linked to or submitted form data. HTTP_USER_AGENT The browser the client is currently using to send the request. Format: soft- ware/version library/version.
Page 571: Adding Dynamic Content To
DREAMWEAVER CS3 User Guide See also “About dynamic content sources” on page 543 “Change or delete content sources” on page 563 Adding dynamic content to pages About adding dynamic content After you define one or more sources of dynamic content, you can use the sources to add dynamic content on the page.
Page 572 See also “About recordsets” on page 543 “Use predefined data formats” on page 578 Add dynamic text In Design view, select text on the page, or click where you want to add dynamic text. In the Bindings panel (Window > Bindings), select a content source from the list. If you select a recordset, specify the column you want in the recordset.
Page 573 If no recordsets appear in the list, or if the available recordsets don’t meet your needs, define a new recordset. See also “Define a recordset without writing SQL” on page 547 Make 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 You can bind HTML attributes with the Bindings panel or with the Property inspector.
Page 574: Changing Dynamic Content
If you clicked the folder icon, a file selection dialog box appears. Select the Data Sources option to display a list of content sources. Select a source of content from the list of content sources, and click OK. 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.
Page 575 Edit dynamic content Open the Server Behaviors panel (Window > Server Behaviors). Click the Plus (+) button to display the server behaviors, and double-click the server behavior in the panel. The dialog box that you used to define the original data source appears. Make your changes in the dialog box, and click OK.
Page 576 “URL parameters” on page 533 “How session variables work” on page 535 Let Adobe Contribute users edit dynamic content 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.
Page 577: Displaying Database Records
DREAMWEAVER CS3 User Guide See also “Edit dynamic content” on page 568 Displaying database records About 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. Dreamweaver 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.
Page 578 See also “Presenting content with tables” on page 176 “Adding and formatting text” on page 226 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.
Page 579 You can customize the layout of the navigation bar by using the design tools and the Server Behaviors panel. In Design view, place the insertion point at the location on the page where you want the navigation bar to appear. Display the Recordset Navigation Bar dialog box (Insert >...
Page 580 The page you create the navigation bar for must contain a recordset to navigate. 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.
Page 581 Display multiple recordset results The Repeating Region server behavior lets you display multiple records from a recordset within a page. Any dynamic data selection can be turned into a repeating region. However, the most common regions are a table, a table row, or a series of table rows.
Page 582 Create a dynamic table The following example illustrates how the Repeating 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.
Page 583 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 columns: AUTHORID, FIRSTNAME, LASTNAME, and BIO. The table’s heading row is populated with the names of each column. You can edit the headings using any descriptive text, or replace them with representative images.
Page 584 Build and add the record counter to the page ❖ In the Insert Recordset Navigation Status dialog box, select the recordset to track, and click OK. Create custom record counters You use individual record count behaviors to create custom record counters. Creating a custom record counter lets you create a record counter beyond the simple, single row table inserted by the Recordset Navigation Status server object.
Page 585 Links don’t work in the Live Data window. To test them, you can use the Preview in Browser feature. Ensure that you select the Preview Using Live Data Server option is selected in Preferences (Edit > Preferences > Preview In Browser (Windows) or Dreamweaver >...
Page 586: Viewing Live Data
Change any of the following parameters in the Currency, Number, or Percent dialog boxes, and click OK. • The number of digits to display after the decimal point • Whether to place a leading zero in front of fractions • Whether to use parentheses or a minus sign for negative values •...
Page 587 The following example shows a dynamic page with Live Data disabled: The following example shows the same page with Live Data turned on: Requirements for displaying live data To view live data in Design view, you must do the following: •...
Page 588 Provide a page with live data in Design view Open the Live Data Settings dialog box (View > Live Data Settings). In the URL Request area, click the Plus (+) button and enter a parameter your page expects. Specify a name and a test value for each parameter. In the Method pop-up menu, select the HTML form method your page expects: In the Initialization Script text area, include any source code you want to insert at the top of the page before it runs.
Page 589 If a page expects parameters from the user, you must provide the parameters as follows. In the Document window, select Live Data Settings from the View menu. Complete the dialog box and click OK. If you specify the method in the Live Data Settings dialog box, a text box appears on the Design view toolbar. Use this box to enter different URL parameters;...
Page 590: Using Web Services
Work in Design view without live data If Live Data is disabled 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 , where setName.ColumnName}...
Page 591 The Dreamweaver web service workflow To create a page or site that is a consumer of a web service that uses Dreamweaver, you must perform the following tasks: 1. Install and configure a proxy generator. Dreamweaver comes preconfigured with Axis, the Apache SOAP proxy generator that supports JSP web service development.
Page 592 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 inter-operability among the multiple peer nodes of the UDDI service network.
Page 593 Obtaining additional proxy generators 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.
Page 594 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 proxy with the specified run-time environment. •...
Page 595 Complete the UDDI Sites dialog box, and click Done. • To add a new site, or modify an existing one, click the New or Edit button. Enter the name and URL of a UDDI website, and click OK. • To remove an existing site, select it from the list, and click the Remove button. Add a web service to a page After selecting a web service, generating its proxy, and adding it to the Components panel, you insert it in a page.
Page 596: Adding Custom Server Behaviors
<html> <head> <title>Web Service</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <cfinvoke webservice="http://www.mysite.com:8500/helloworld/HelloWorld.cfc?wsdl" method="sayHello" returnvariable="aString"> </cfinvoke> The web service says: <cfoutput>#aString#</cfoutput> </body> </html> When you deploy web pages to a production server, Dreamweaver automatically copies the pages, the proxy, and any necessary libraries to the web server. Note: 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 ensure that you deploy both the proxy and any dependent library files.
Page 597 Select Window > Server Behaviors, click the Plus (+) button, and select Get More Server Behaviors. The Dreamweaver Exchange web page opens in your browser. Log on to the Exchange using your Adobe ID, or, if you have not yet created a Dreamweaver Exchange ID for yourself, follow the instructions to open an Adobe account.
Page 598: Advanced Options
Note: When entering code in the Code Block box, you can only insert a single tag or code block for each named code block (for example, myBehavior_block1 multiple tags or code blocks, create an individual code block for each one. You can also copy and paste code from other pages.
Page 599 DREAMWEAVER CS3 User Guide When the page designer clicks the Plus (+) button on the Server Behaviors panel, the new server behavior’s title will appear in the pop-up menu. When a designer applies an instance of a server behavior to a document, the behavior appears in the list of applied behaviors in the Server Behaviors panel.
Page 600 Effectively using conditional expressions When using , and directives within the else elseif to resolve the directives and to determine which text to include in the result. The the expression as an argument. The condition expression is the same as that for JavaScript condition expressions, and can also contain server behavior parameters.
Page 601 Insert Code options Relative position options • Above the <html> Tag At the beginning of the file • Just before the recordsets • Just after the recordsets • Just above the • Custom position • Below the </html> Tag Before the end of the file •...
Page 602 The server behavior is listed in the Server Behaviors panel (Window > Server Behavior); click the Plus (+) button to view the server behavior. Test the server behavior and ensure that it functions properly. Position a code block relative to another tag on the page In the Insert Code pop-up menu, select Relative To A Specific Tag.
Page 603 <CFSTOREDPROC procedure="AddNewBook" datasource=#MM_connection_DSN# username=#MM_connection_USERNAME# password=#MM_connection_PASSWORD#> <CFPROCPARAM type="IN" dbvarname="@CategoryId" value="#Form.CategoryID#" cfsqltype="CF_SQL_INTEGER"> <CFPROCPARAM type="IN" dbvarname="@ISBN" value="#Form.ISBN#" cfsqltype="CF_SQL_VARCHAR"> </CFSTOREDPROC> In this example, the tag can include zero or more CFSTOREDPROC the loop directive, there is no way to include the 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 Using the loop directive, you can write the same procedure as follows:...
Page 604 Using the loop directive’s _length and _index variables The loop directive includes two built-in variables that you can use for embedded . The variable evaluates to the length of the arrays processed by the loop directive, _length _index _length while the variable evaluates to the current index of the loop directive.
Page 605 Dreamweaver uses the strings that 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: Note: Parameter names in the server behavior code cannot have any spaces. Therefore, the dialog box labels cannot have any spaces.
Page 606: Coding Guidelines
See also “Use the Server Behavior Builder” on page 590 “Positioning a code block” on page 593 Retain the old and new versions of the behavior 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.
Page 607: Creating Forms
var MM_ERROR_STRING = "..."; function MM_hideLayer() { so that the code you write doesn’t resemble too closely the code in other blocks. If a code Avoid similar code blocks 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).
Page 608 DREAMWEAVER CS3 User Guide 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.
Page 609 DREAMWEAVER CS3 User Guide Allow multiple responses within a single group of options. A user can select as many options as apply. Check boxes The following example shows three check box items selected: Surfing, Mountain Biking, and Rafting. Represent exclusive choices. Selecting a button within a radio button group deselects all others in the Radio buttons group (a group consists of two or more buttons that share the same name).
Page 610 Select Insert > Form, or select the Forms category in the Insert bar and click the Form icon. In Design view, forms are indicated by a dotted red outline. If you don’t see this outline, select View > Visual Aids > Invisible Elements.
Page 611 For a tutorial on creating forms, see www.adobe.com/go/vid0160. For a tutorial on styling forms with CSS, see www.adobe.com/go/vid0161. See also “Building ASP.NET forms” on page 686 “Building ColdFusion MX 7 forms” on page 674 “About dynamic form objects”...
Page 612 Enter a static value or specify a dynamic one by clicking the lightning bolt icon beside the box and selecting a recordset that contains possible checked values. In either case, the value you specify should match the checked value of one of the radio buttons in the group. To view the checked values of the radio buttons, select each radio button and open its Property inspector (Window >...
Page 613 Set the form Method to POST From the Enctype pop-up menu, select In the Action box, specify the server-side script or page capable of handling the uploaded file. Place the insertion point inside the form outline, and select Insert > Form > File Field. Set any of the following options in the Property inspector: Specifies the name for the file field object.
Page 614 Assigns the value displayed in the field when the form first loads. For example, you might indicate that Init Value the user enters information in the field by including a note or example value. Lets you apply CSS rules to the object. Class Button object options Assigns a name to the button.
Page 615 (List type only) Sets the number of items displayed in the menu. Height (List type only) Indicates whether the user can select multiple items from the list. Selections Opens a dialog box that lets you add the items to a form menu: List Values Use the Plus (+) and Minus (–) buttons to add and remove items in the list.
Page 616 Select Insert > Form > List/Menu to insert the form object. Do one of the following: • Select the new or an existing HTML List/Menu form object, and then click the Dynamic button in the Property inspector. • Select Insert > Data Objects > Dynamic Data > Dynamic Select List. Complete the Dynamic List/Menu dialog box, and click OK.
Page 617 The data source should contain textual information. If no data sources appear in the list, or if the available data sources don’t meet your needs, click the Plus (+) button to define a new data source. See also “Data sources for web applications” on page 531 Dynamically preselect an HTML check box You can let the server decide whether to select a check box when the form is displayed in a browser.
Page 618 The recordset you select contains values that match the radio buttons’ checked values. To view the checked values of the radio buttons, select each radio button and open its Property inspector (Window > Properties). Click OK. Set the Dynamic Radio Group dialog box options (ColdFusion, ASP.NET) Select a radio group and form from the Radio Group pop-up menu.
Page 619 Attach JavaScript behaviors to HTML form objects You can attach JavaScript behaviors stored in Dreamweaver to HTML form objects such as buttons. Note: This feature does not work with ASP.NET form controls because these controls are processed on the server. Select the HTML form object.
Page 620 Note: The screen reader reads the name you enter as the Label attribute for the object. assigns an ID to the form field. This value can be used to refer to the field from JavaScript; it's also used as the value of the attribute if you choose the Attach Label Tag Using For option under the Style options.
Page 621: Building Master And Detail Pages (All Servers)
Chapter 20: Building applications visually In Adobe® Dreamweaver® CS3, you can use Adobe ColdFusion, PHP, JSP, ASP, or ASP. NET to build pages that let you search, insert, delete, and update database records, display master and detail information, and restrict access to certain users.
Page 622 Detail page You can build master and detail pages by inserting a data object to create a master page and detail page in one operation or by using server behaviors to build the master and detail pages in a more customized way. When using server behaviors to build master and detail pages, you first create a master page to list the records and then add links from the list to the detail pages.
Page 623 Recordset columns selected for a master page Typically, the recordset on the master page extracts a few columns from a database table while 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 run time.
Page 624 DREAMWEAVER CS3 User Guide In the Server Behaviors panel (Window > Server Behaviors), click the Plus (+) button, and select DataGrid. Accept the default column type of Simple Data Field for each column in your DataGrid. The following example shows three columns defined for a DataGrid: See also “Define a recordset without writing SQL”...
Page 625 In the Property inspector, click the folder icon beside the Link box. Browse and select the detail page. The detail page appears in the Link 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.
Page 626 In the Server Behaviors panel (Window > Server Behaviors), click the Plus (+) button, and select Go to Detail Page from the pop-up menu. In the Detail Page box, click Browse and locate the page. Specify the value you want to pass to the detail page by selecting a recordset and a column from the Recordset and Column pop-up menus.
Page 627 Dreamweaver creates a URL to the detail page that includes a URL parameter identifying the record the detail page should display. Make a note of the name of the URL parameter because you’ll use it in the detail page later. For example, if you select locationDetail.aspx as your detail page, the following URL is created: In this case, the URL parameter is called CODE...
Page 628 Complete the Filter section as 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.
Page 629 Find a specific record and display it on a page (ASP, JSP) You can add a server behavior that finds a specific record in a recordset so that you can display the record data on the page. The server behavior is only available when using the ASP or JSP server models. Create a page that has the following prerequisites: •...
Page 630 To change the order in which the columns appear on the master page, select a column in the list and click the up or down arrow. On the master page, the recordset columns will be arranged horizontally in a table. Clicking the up arrow moves the column to the left;...
Page 631: Building Search And Results Pages (Coldfusion, Asp, Jsp, Php)
Building search and results pages (ColdFusion, ASP, JSP, PHP) About search and results pages You can use Dreamweaver to build a set of pages to let users search your database and view the search results. The method you use is identical for ColdFusion, ASP, JSP, and PHP pages. In most cases, you need at least two pages to add this feature to your web application.
Page 632 To add an HTML form to a search page, complete the following procedure. 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.
Page 633 See also “About search and results pages” on page 624 “Build the search page (ColdFusion, ASP, JSP, PHP)” on page 624 “Create a detail page for a results page (ColdFusion, ASP, JSP, PHP)” on page 629 Create the recordset to hold the search results Open your results page in the Document window.
Page 634 For example, if the value sent by the search page is a city name, select the column in your table that contains city names. From the pop-up menu beside the first menu, select the equal sign (it should be the default). From the third pop-up menu, select Form Variable if the form on your search page uses the Parameter if it uses the method.
Page 635 For instructions, see “Define an advanced recordset by writing SQL” on page 550. For help on SQL syntax, see the SQL primer at www.adobe.com/go/learn_dw_sqlprimer. Give the SQL variables the values of the search parameters by clicking the Plus (+) button in the Variables area and entering the variable’s name, default value (the value the variable should take if no run-time value is returned),...
Page 636: Building A Database Search Page (Asp.net)
Create a detail page for a results page (ColdFusion, ASP, JSP, PHP) Your set of search and results pages can include a detail page to display more information about specific records on the results page. In this situation, your results page also doubles as the master page in a master-detail page set. See also “Build master and detail pages in one operation (ColdFusion, ASP, JSP, PHP)”...
Page 637 Search with only one search parameter (ASP.NET) When the user clicks the page’s Search button, the search parameter is sent to the server. The server processes the request, builds a filtered DataSet based on the parameter, populates a DataGrid, and sends the page back to the browser.
Page 638 Search with multiple search parameters (ASP.NET) If the search page submits more than one search parameter to the server, you must write a SQL query and use the search parameters in SQL variables. Note: If you have only one search condition, you can use the simple DataSet dialog box to define your DataSet (see “Search with only one search parameter (ASP.NET)”...
Page 639 Display the results in a DataGrid (ASP.NET) After creating a DataSet to hold the search results, you can use a DataGrid to display the information on the page. On the search page, place the insertion point where you want the DataGrid to appear. In the Server Behaviors panel (Window >...
Page 640: Building A Record Insert Page (All Servers)
About building record insert pages Your application can contain a page that lets users insert new records in a database. For a tutorial on creating a record insert page, see www.adobe.com/go/learn_dw_webapp. An insert page consists of two building blocks: •...
Page 641 Add an HTML form to an insert page Create a dynamic page (File > New > Blank Page), 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 >...
Page 642 In the Insert Into Table pop-up menu, select the database table into which the record should be inserted. In the After Inserting, Go To box, enter the page to open after the record is inserted into the table or click Browse to browse to the file.
Page 643 Dreamweaver adds a server behavior to the page that lets users insert records in a database table by filling out the HTML form and clicking the Submit button. Add a server behavior to insert records in a database table (PHP) In the Server Behaviors panel (Window >...
Page 644: Building Pages To Update A Record (All Servers)
You can also change the order of the form objects on the HTML form by selecting a form object in the list and clicking the up or down arrow on the right side of the dialog box. Specify how each data-entry field should be displayed on the HTML form by clicking a row in the Form Fields table and entering the following information in the boxes below the table: •...
Page 645 Create links to the update page After creating the search and results pages, you create links on the results page to open the update page. You then modify the links to pass the IDS of the records the user selects. The update page uses this ID to find the requested record in the database and display it.
Page 646 You can add the final two basic building blocks of an update page separately using the form tools and the Server Behaviors panel. See also “Retrieve the record to update” on page 638 “Creating forms” on page 600 Add an HTML form to an update page Create a page (File >...
Page 647 Add a server behavior to update the database table In the Server Behaviors panel (Window > Server Behaviors), click the Plus (+) button and select Update Record from the pop-up menu. The Update Record dialog box appears. Select a form from the Submit Values From pop-up menu. In the Data Source or Connection pop-up menu, select a connection to the database.
Page 648 • An Update Record server behavior to update the database table You can add the final two building blocks of an update page in a single operation using the Record Update Form data object. The data object adds both an HTML form and an Update Record server behavior to the page. Before you can use the data object, your web application must be able to identify the record to update, and your update page must be able to retrieve it.
Page 649 • In the Submit As pop-up menu, select the data format expected by your database table. For example, if the table column only accepts numeric data, select Numeric. • Set the form object’s properties. You have different options depending on the form object you select as your data- entry field.
Page 650: Building Pages To Delete A Record (All Servers)
Building pages to delete a record (all servers) About record delete pages Your application can contain a set of pages that lets users delete records in a database. The pages normally consist of a search page, a results page, and a delete page. A delete page is usually a detail page working in tandem with a results page.
Page 651 After clicking outside the Link box, the Delete (View > Live Data), you can see that the link is applied to the same text in every table row. If Live Data view is already enabled, click the Refresh icon to apply the links to each row. Select the Delete link on the results page.
Page 652 The expression after the equal sign is the value of the parameter. In this case, the value is generated by a PHP expression that returns a record ID from the recordset. A different ID is generated for each row in the dynamic table. In the PHP expression, replace recordsetName name of the field in your recordset that uniquely identifies each record.
Page 653 element is a placeholder corresponding to the data field’s value. When the page runs, the values of the DataSet’s CODE field are inserted in the corresponding rows in the DataGrid. For example, if the Canberra, Australia, rental location has the code CBR, the following URL is used in the Canberra row in the DataGrid: locationDelete.aspx?recordID=CBR Click OK to close the Hyperlink dialog box;...
Page 654 The user will click the button to confirm and delete the displayed record. To add a button, place the insertion point in the form and select Insert > Form > Button. Enhance the design of the page any way you want and save it. Retrieve the record the user wants to delete In the Bindings panel (Window >...
Page 655 Display the record the user wants to delete Select the recordset columns (record fields) in the Bindings panel, and drag them to the delete page. Make sure you insert this read-only dynamic content within the form boundaries. For more information on insert dynamic content in a page, see “Make text dynamic”...
Page 656 Completed delete page Add logic to delete the record (ColdFusion, PHP, ASP.NET) After displaying the selected record on the delete page, you must add logic to the page that deletes the record from the database when the user clicks the Confirm Deletion button. You can add this logic quickly and easily by using the Delete Record server behavior.
Page 657 You can specify a page that contains a brief success message to the user, or a page listing the remaining records so that the user can verify that the record has been deleted. (ASP.NET)(Optional) Select the Display Debugging Information On Failure option. The debugging information is generated by the server.
Page 658: Building Pages With Advanced Data Manipulation Objects (Coldfusion, Asp, Asp.net, Jsp)
Dreamweaver adds a server behavior to the page that lets users delete records in a database table by clicking the Submit button on the form. Building pages with advanced data manipulation objects (ColdFusion, ASP, ASP.NET, JSP) About ASP command objects An ASP command object is a server object that performs some operation on a database.
Page 659 Memo (MS Access), ntext (MS SQL LongVarWChar Server), or fields that support large amounts of text For more information on the type and size of SQL variables, see www.adobe.com/go/4e6b330a. Close the dialog box. Size check database table check database table...
Page 660 Dreamweaver inserts ASP code in your page that, when run on the server, creates a command that inserts, updates, or deletes records in the database. By default, the code sets the Prepared property of the Command object to reuse a single compiled version of the object every time the command is run. To change this setting, switch to Code view and change the Prepared property to Create a page with an HTML form so users can enter record data.
Page 661 Open the Server Behaviors panel (Window > Server Behaviors), click the Plus (+) button and select Prepared (Insert, Update, Delete). The Prepared (Insert, Update, Delete) dialog box appears. Enter a name for the prepared statement, select a connection to the database containing the records you want to edit, and select the editing operation you want the prepared statement to perform—Insert, Update, or Delete.
Page 662 In the Data Source pop-up menu, select a connection to the database containing the stored procedure. Enter the ColdFusion Data Source user name and password. Select a stored procedure from the Procedures pop-up menu. Dreamweaver automatically fills in any parameters. Select a parameter, and click Edit if you have to make changes.
Page 663 Before you use a stored procedure to modify a database, make sure the stored procedure contains SQL that modifies the database in some way. To create and store one in your database, consult your database documentation and a good Transact-SQL manual. In Dreamweaver, open the page that will run the stored procedure.
Page 664 See also “Define an advanced recordset by writing SQL” on page 550 Run a stored procedure (ASP) With ASP pages, you must add a command object to a page to run a stored procedure. For more information on command objects, see “About ASP command objects” on page 651. In Dreamweaver, open the page that will run the stored procedure.
Page 665: Building A Registration Page (Coldfusion, Asp, Jsp, Php)
Dreamweaver automatically fills in the Callable Text and Variables boxes. Select the Returns Recordset Named option, enter a name for the recordset, if the stored procedure returns a recordset, and then click the Test button to see the recordset that the stored procedure returns. Dreamweaver runs the stored procedure and displays the recordset, if any.
Page 666 • If you want to set a common password for all users of the site, configure your database application (Microsoft Access, Microsoft SQL Server, Oracle, and so on) to enter the password in each new user record by default. In most database applications, you can set a column to a default value each time a new record is created.
Page 667: Building A Login Page (Coldfusion, Asp, Jsp, Php)
The final step in creating a registration page is to make sure the user name is not used by another registered user. See also “Build an insert page block by block” on page 633 Add a server behavior to ensure a unique user name (ColdFusion, ASP, JSP, PHP) You can add a server behavior to a user registration page that verifies that the user name is unique before adding that user to your database of registered users.
Page 668 Create a database table of registered users (ColdFusion, ASP, JSP, PHP) You need a database table of registered users to verify that the user name and password entered in the login page are valid. ❖ Use your database application and a registration page to create the table. The next step in building a login page is to add an HTML form to the page to let users log in.
Page 669: Building A Page Only Authorized Users Can Access (Coldfusion, Asp, Jsp, Php)
Specify the database table and columns that contain the user names and passwords of all the registered users. The server behavior compares the user name and password a visitor enters on the login page against the values in these columns. Specify a page to open if the login process succeeds.
Page 670 If you do not plan to use authorization levels, you can protect any page on your site simply by adding a Restrict Access To Page server behavior to the page. The server behavior redirects to another page any user who has not successfully logged in.
Page 671 Ensure that the page you choose is not protected. Click OK. Copy and paste a page’s access rights to other pages on the site Open the protected page and select the Restrict Access To Page server behavior listed in the Server Behaviors panel (not the one in the Plus (+) pop-up menu).
Page 672: Securing A Folder In Your Application (Coldfusion)
The page is usually a goodbye or thank you page. In the Server Behaviors panel, click the Plus (+) button and select User Authentication > Log Out User. Select the Log Out When Page Loads option, and click OK. Securing a folder in your application (ColdFusion) Secure a folder or site on the server (ColdFusion) You can use Dreamweaver to password-protect a specific folder in your ColdFusion application, including the appli- cation’s root folder.
Page 673 A CFC is a reusable software unit written in ColdFusion markup language (CFML), which makes it easy to reuse and maintain your code. You can use Dreamweaver to work with CFCs. For information on CFC tags and syntax, see the ColdFusion documentation from within Dreamweaver (Help >...
Page 674 Click the Plus (+) button, and complete the Create Components dialog box, and click OK. In the Components section, enter the details about the component. Here is a partial list: Specifies the filename of the component. The name must contain only alphanumeric characters and under- Name scores (_).
Page 675 To use Dreamweaver to inspect CFCs residing in the server root while also managing your site files in a different website root, you can define two Dreamweaver sites. Set the first site to point to the server root and the second to point to the website root.
Page 676 • In the advanced Site Definition dialog box, the path of your local root folder must be the same as the path of the testing server folder (for example, c:\Inetpub\wwwroot\cf_projects\myNewApp\). You can examine and change these paths by selecting Site > Edit Sites. •...
Page 677 For more information, see the ColdFusion documentation from within Dreamweaver (Help > Using ColdFusion). Save the page (File > Save). Define a recordset in a CFC Dreamweaver can help you define a recordset (also known as a ColdFusion query) in a ColdFusion component (CFC).
Page 678 Define dynamic content by using a CFC You can define a recordset as a source of dynamic content in Dreamweaver by using a CFC that contains a recordset definition. In the Name box, enter a name for the CFC recordset. A common practice is to add the prefix rs to recordset names to distinguish them from other object names in the code, for example: rsPressRelease.
Page 679: Using Javabeans (Jsp)
If the SQL statement contains page parameters, ensure that the Default Value column of the Parameters box contains valid test values before clicking Test. If the query was executed successfully, a table displays the recordset. Each row contains a record and each column represents a field in that record.
Page 680 Select the bean’s class. To list the classes in a ZIP or JAR file, click Browse and select the file. The class is expressed in the following format: packagename.classname To assign a default value to one of the JavaBean’s properties, select the property from the list, and enter a value in the Default Value box below the list.
Page 681: Building Coldfusion Mx 7 Forms
Chapter 21: Building ASP.NET and ColdFusion forms You can build pages that let you search, insert, delete, and update database records, display master/detail infor- mation, and restrict access to certain users. You can create these kinds of pages for ASP.NET and ColdFusion server models.
Page 682 Create 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. Note: These enhancements are available only if you have access to a computer running ColdFusion MX 7 or later. Open a ColdFusion page and place the insertion point where you want the ColdFusion form to appear.
Page 683 Specifies the URL of downloadable Java classes for cfgrid, cfslider, and cftree applet controls. The default Archive location is /CFIDE/classes/cfapplets.jar. Specifies the height of the form. Height Specifies the width of the form. Width Lets you edit properties not listed in the Property inspector. Display Tag Editor Insert ColdFusion form controls.
Page 684 Insert ColdFusion text fields You can visually insert a ColdFusion text field or password field into your form, and then set its options. Note: This enhancement is available only if you have access to a computer running ColdFusion MX 7 or later. Visually insert a ColdFusion text field In Design view, place the insertion point inside the form outline.
Page 685 Lets you specify the width of the control, in pixels. Width Lets you specify the size of the control. Size Lets you specify whether the text field must contain data before the form is submitted to the server. Required Lets you edit properties not listed in the Property inspector. Display Tag Editor Insert ColdFusion hidden fields You can visually insert a ColdFusion hidden field into your form and set its properties.
Page 686 Note: This enhancement is available only if you have access to a computer running ColdFusion MX 7 or later. Place the insertion point inside the form outline. In the CFForm category of the Insert bar, click the CF Text Area icon. A text area appears in the ColdFusion form.
Page 687 Select the button on the page and set any of the following options in the Property inspector: Lets you specify a unique name for the control. Cfbutton Lets you specify the type of button to create. Action Lets you edit properties not listed in the Property inspector. Display Tag Editor The other properties are ignored by the ColdFusion server at run time.
Page 688 Insert 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.
Page 689 In the CFForm category of the Insert bar, click the CF Select icon. A select box appears in the ColdFusion form. Select the select box on the page and set any of the following options in the Property inspector: lets you specify a unique name for the control. Cfselect Lets you choose between a pop-up menu or a list.
Page 690 Note: If the image is outside the site root folder, you should copy the image to the root folder. Images outside the root folder might not be accessible when you publish the site. Select the image field on the page and set any of the following options in the Property inspector: Lets you specify a unique name for the control.
Page 691 To quickly select the form, click anywhere in the form outline and click the bottom of the Document window. In the Property inspector, set the form method to POST. From the Enctype pop-up menu, select multipart/form-data. Position the insertion point inside the form outline where you want to file field to appear. Select Insert >...
Page 692 <cfinput name="datefield" type="datefield"> Switch to Design view, select the date field on the page, and then set any of the following options in the Property inspector: Lets you specify a unique name for the control. Cfdatefield Lets you specify a date to be displayed in the field when the page first opens in a browser. The date can either Value be static or dynamic.
Page 693: Building Asp.net Forms
Note: This enhancement is available only if you have access to a computer running ColdFusion MX 7 or later. Create a ColdFusion form that includes at least one input field and one Submit button. Ensure that every ColdFusion field that you want to validate has a unique name. Select a field in the form that you want to validate.
Page 694 For more information on the properties of each control, see the documentation on the Microsoft website at http://msdn.microsoft.com/library/en-us/cpgenref/html/cpconaspsyntaxforwebcontrols.asp. To set more properties or events, click the Tag Editor button in the Property inspector, and set the properties in the tag editor. Create a dynamic ASP.NET menu You can dynamically populate an ASP.NET menu control such as DropDownList or ListBox with entries from a database.
Page 695 Specifies the data source you want to use to populate the items of the list control. If you don’t specify a DataSet DataSet, you can specify one later or set the list items statically by clicking the List Items button in the Property inspector.
Page 696 Before you begin, you must define a DataSet or other source of dynamic content for the TextBox. In Design view, select the TextBox on your page. In the Property inspector, click the lightning bolt icon beside the Text box. The Dynamic Data dialog box appears. Select the recordset column that will supply a value to the TextBox object, and click OK.
Page 697 Indicates whether a postback to the server automatically occurs when the user changes the list Auto Postback selection. Select the option to allow postbacks. For more information on ASP.NET CheckBoxList properties, see the documentation on the Microsoft website at http://msdn.microsoft.com/library/en-us/cpgenref/html/cpconcheckboxlistwebservercontrol.asp. Insert an ASP.NET RadioButtonList control Select Insert >...
Page 698: Creating Asp.net Datagrid And Datalist Web Controls
Preselect an ASP.NET RadioButton control You can let the server determine which RadioButton in a group is selected. At run time, the server compares each checked value you specified to a value in a DataSet. If the values match, the server checks the RadioButton. For more information on ASP.NET RadioButton properties, see the documentation on the Microsoft website at http://msdn.microsoft.com/library/en-us/cpgenref/html/cpconradiobuttonwebservercontrol.asp.
Page 699 DataGrid Column Type Description Hyperlink The Hyperlink column displays information as hypertext links. A typical use is to display data (such as a customer number or product name) as a hyper- link that users can click to navigate to a separate page that provides details about that item.
Page 700 To change the DataGrid column type, click the Edit button and select a column type from the pop-up menu. A dialog box specific to the chosen column type appears. Specify the content and formatting of the selected DataGrid column. The following table lists the column types: DataGrid column type Description Simple Data Field...
Page 701 You can select an existing DataSet or enter an arbitrary value. By default, the first DataSet in the list is selected. Specify the data to be displayed in the DataList by doing the following in order: Select the Item template for the Templates list. The Item template represents all the rows in the list other than the header and footer rows.
Page 702 • In Design view, select the control and use the Property inspector to change any of the options. • Double-click the object in the Server Behaviors panel and change its properties in the dialog box that opens. • In Code view, select the DataGrid or DataList on the page, and use its tag dialog box to change its attributes. Specify and format a data source field in a DataGrid When creating or editing a DataGrid, use the Simple Data Field column (called a bound column in ASP.NET) to specify which data source field to display, and the data format the field uses with a .NET formatting expression.
Page 703 Display data as a hyperlink in a DataGrid When creating or editing a DataGrid, use the Hyperlink Column to display information as hyperlinks. A typical use is to display data (such as a customer number or product name) as a hyperlink that users can click to navigate to a separate page that provides details about that item.
Page 704 Allow users to delete a row in a DataGrid When creating or editing a DataGrid, use the Delete Button (called aButton Columnin ASP.NET) to let a user delete a particular row by clicking a button. In the DataGrid dialog box, select the Delete Button column in the Columns box. In the Delete Button dialog box, enter a name for the column.
Page 705: Chapter 22: Automating Tasks
X appears in the History panel. Saved commands are retained permanently (unless you delete them), while recorded commands are discarded when you exit from Adobe® Dreamweaver® CS3, and copied sequences of steps are discarded when you copy something else Use the History panel The History panel (Window >...
Page 706 Note: 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. Undo multiple steps at once ❖...
Page 707 Click Replay. The steps are replayed in order, and a new step, Replay Steps, appears in the History panel. Make or extend a selection ❖ Hold down the Shift key while pressing an arrow key. If a black mouse-movement indicator line appears while you’re performing a task you want to repeat later, you can undo back to before that step and try another approach, perhaps using the arrow keys.
Page 708 In the History panel, select the steps that correspond to changing the image’s spacing and selecting the next image. Click Replay to replay those steps. The current image’s spacing changes, and the next image is selected. Continue to click Replay until all the images are spaced correctly. Copy and paste steps between documents Each open document has its own history of steps.
Page 709 Create and use commands from history steps 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 you might use a set of steps again, especially the next time you start Dreamweaver. Create a command Select a step or set of steps in the History panel.
Page 710 DREAMWEAVER CS3 User Guide Enter a name for the command, and click OK. The command appears in the Commands menu. September 4, 2007...
Page 711: Dreamweaver And Accessibility
Chapter 23: Accessibility Adobe® Dreamweaver® CS3 includes a number of features that let you design and develop accessible web pages. Additionally, the application itself is accessible to people with disabilities. Dreamweaver and accessibility Accessible content Accessibility refers to making websites and web products usable for people with visual, auditory, motor, and other disabilities.
Page 712: Dreamweaver Accessibility Features
Dreamweaver accessibility features Using screen readers with Dreamweaver A screen reader recites text that appears on the computer screen. It also reads non-textual information, such as button labels or image descriptions in the application, provided in accessibility tags or attributes during authoring. As a Dreamweaver designer, you can use a screen reader to assist you in creating your web pages.
Page 713 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.
Page 714: Designing Pages For Accessibility
To exit the table, press Control+A three times if the insertion point is in a cell, twice if the cell is selected, or once if the table is selected, and then press the Up, Left, or Right Arrow key. Designing pages for accessibility Optimize the work space for accessible page design When you create accessible pages, you need to associate information, such as labels and descriptions, with your page objects to make your content accessible to all users.
Page 715: Customize Keyboard Shortcuts
Chapter 24: Shortcuts and extensions You can customize keyboard shortcuts (including shortcuts for code snippets) and define shortcut sets to use for different projects. You can also add and manage new features (extensions) that let you reformat tables, connect to back-end databases, or help you write scripts for browsers.
Page 716 Displays all shortcuts assigned to the selected command. Shortcuts Adds a new shortcut to the current command. Click this button to add a new blank line to the Add Item (+) Shortcuts. Enter a new key combination and click Change to add a new keyboard shortcut for this command. You can assign two different keyboard shortcuts for each command;...
Page 717 Extension Manager. You must install the Extension Manager before you can install extensions. The Extension Manager is a separate application that lets you install and manage extensions in Adobe applications. Start the Extension Manager from Dreamweaver by choosing Commands > Manage Extensions.
Page 718: Index
Flash Player detection 268 inserting 264, 266 options for delivery 265 options for progressive download 266 options for streaming video 266 Adobe Flash Video detection, adding and removing 268 Adobe FlashPaper documents, inserting 264 Adobe Help 2 Adobe InDesign integration 366...
Page 719 AppleTalk servers 44, 65, 66 applets. See Java applets text 240 tracing images 176 application integration, with other Adobe software 366 All Info tab (Design Notes) 103 application servers alternative (Alt) text 245 about 493 Anchor object (Insert bar) 285...
Page 720 Bullet Image option 133 Base properties 339 buttons baseline alignment 249 Basic Info tab (Design Notes) 103 Go buttons 356 behaviors inserting 601 about 347 compatibility with browsers 350 forms, attaching behaviors to 612 C# language 496 frames, using with 213 caching data sources 563 images 255 Call JavaScript action 350...
Page 721 coding workflow 14 server behaviors 306 ColdFusion snippets 315 tag editors 319 buttons 679 tag libraries 343 check boxes 680 tag, closing 314 client variables 545 components 665 validation preferences, setting 326 viewing options 309 Components panel 669 viewing source 307 components, defining a recordset 670 word wrap 309...
Page 722 custom tags, importing 345 connection parameters, JDBC 521 customizing, coding connection scripts, removing 530 environment 307 Connection Speed option 26 connection strings OLE DB 520 data formats setting 511 predefined 578 connections to Contribute sites, troubleshooting 61 using preset styles 578 content, adding to tables 178 Data Link Properties 519 data objects...
Page 723 70 Device Central integration creating, based on a design file 74 Dreamweaver 385 creating, based on a template 72 Device Central. See Adobe Device Design Notes, using with 102 Central detaching a template 414 diff tools 96...
Page 724 empty tags, removing 326 editable regions (templates) enabling changing the name of 399 cloaking 100 controlling in nested templates 407 Design Notes 102 creating 398 encoding working with 399 entity encoding 74, 219 editable tag attributes (templates) types 38 making uneditable 405 error messages modifying in template-based See also troubleshooting...
Page 725 Flash text objects unused, finding 83 inserting and previewing 260 uploading 89 properties 258 working during transfer 87 Flash Video. See Adobe Flash Video Files panel Flash. See Adobe Flash changing column display and FlashPaper documents, inserting 264 order 86...
Page 726 hiding and showing saving 208 selecting 207 invisible elements 219 targeting links in 281 pop-up menus 363 Highlighting preferences getting and putting files 87 content blocks 164 layout cells 195 log 88, 89 preferences 85 library items 118 troubleshooting 47 tables 181 Use Passive FTP option 45 template regions 419...
Page 727 219 includes, server-side 341 IP addresses and number (127.0.0.1) 499 indenting code 309, 319, 322, 344 ISP 514 InDesign. See Adobe InDesign italics, setting text in 241 Insert bar about 16 categories 19 Jakarta Tomcat application server...
Page 728 to named anchor using Point-to- column header menu 199 File icon 286 fixed width 193 navigation and 279 make cell widths consistent 198 to external style sheets 139 nested layout tables 194 to Microsoft Word or Excel preferences 201 documents 235 removing nesting 198 links removing spacer images 198...
Page 729 293 Microsoft error messages, navigation links for records, troubleshooting 526 setting 571 Microsoft Excel files, importing 179 navigation shortcuts, in Adobe Microsoft IIS 505 Help 3 Microsoft Knowledge Base Nest When Created Within an AP Div option 162...
Page 730 58 restricting access to 662 photo albums, creating for web 372 static 492 photographs 243 update record, building 637 Photoshop. See Adobe Photoshop user registration 658 XHTML, creating 328 database connections 517 palettes, color 223 insert pages 633...
Page 731 question marks, in database printing code 323 fields 529 properties Quick Tag Editor ActiveX control 275 hints menus 334 changing with behaviors 351 opening 332 displaying 30 QuickTime movies document, setting 216 as assets. See assets Flash 257 inserting 274, 275 frame and frameset 209, 210 image 245 image placeholder 248...
Page 732 searches 321 validating code 328 viewing 107 site maps 55 requirements, system 1 saving and reverting web pages 226 requirements, web applications 501 schemas 345, 540 Reset Origin command 175 screen readers, Window-Eyes and JAWS for Windows 705 resizing Script dialog box options 335 AP elements 159 script links elements, using handles 250...
Page 733 site maps session variables adding files to a site 54 about 535 data, retrieving 536 changing links in 288 data, storing 536 defined 52 defining 558 hiding files 54 Link to New File command 54 form parameters and URL parameters 536 links, working with 288 Set as Home Page command 52 modifying layout of 53...
Page 734 static pages 492 spelling, checking with Check Spelling command 128, 233 See also pages Spry status bar children regions 485 about 18 data sets, about 478 preferences 26 data sets, defining 480 resizing the Document window 19 design-time feeds 480, 482 setting text (behavior) 359 detail regions, about 479, 482 stored procedures...
Page 735 server-side 494 elements, selecting 180 tt 38 Expanded Tables mode 183 formatting 181, 184 targeting highlighting preference 181 frames 212 importing 179 links 283 technical support for servers 498 nesting 190 preset designs for 181, 184 template expressions 390 properties 181, 184 template parameters resizing 185 modifying in template-based...
Page 736 Netscape Navigator plug-ins 275 timelines ODBC errors 529 adding and removing frames 169 adding objects to 168 pages not displaying 504 animation tips 171 parameters, too few 528 changing AP element permissions 525 properties 169 PHP (Macintosh) 505 changing image source file 169 PHP (Windows) 504 complex paths 168 servers 498, 500...
Page 737 Visibility option 133 displaying states in Design view 470 Visited Links color option 239 inserting 470 Visual Basic 496 specifying minimum and visual guides maximum number of about 24 characters 470 rulers 175 specifying validation tracing images 175 occurrence 470 Validation Text Field widget See also Spry Warn When Opening Read-Only...
Page 738 XSLT (Extensible Stylesheet Language Transformations) about 421 and client-side transformations 423, 444 and server-side transformations 421 creating conditional regions with 437 dynamic links 435 fragments 421, 434, 435 page, linking to XML files 446 pages 421, 423, 429, 430, 435 Repeat Region XSLT object 425, 432, 433 using with dynamic pages 422...

This manual is also suitable for:

Dreamweaver cs3