Adobe 38040334 User Guide
Adobe 38040334 - Dreamweaver CS3 - PC Manual
 |
UPC - 883919090467
View all Adobe 38040334 manuals
Add to My Manuals
Save this manual to your list of manuals |
Adobe 38040334 manual content summary:
- Adobe 38040334 | User Guide - Page 1
ADOBE® DREAMWEAVER® CS3 USER GUIDE September 4, 2007 - Adobe 38040334 | User Guide - Page 2
, Creative Suite, Director, Dreamweaver, Fireworks, Flash, FlashPaper, HomeSite, JRun, Photoshop, Shockwave, and Version Cue are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries. ActiveX, Microsoft, and Windows are either registered - Adobe 38040334 | User Guide - Page 3
1: Getting started Installation 1 Adobe Help 2 Resources 5 What's new 11 Chapter 2: Workspace Dreamweaver workflow and workspace 13 Working in the Document window 24 Using toolbars, inspectors, context menus, and panels 27 Customizing the Dreamweaver CS3 workspace 34 Chapter 3: Working - Adobe 38040334 | User Guide - Page 4
menus 290 Navigation bars 291 Image maps 293 Troubleshooting links 295 Chapter 10: Previewing pages Previewing pages in browsers 298 Previewing pages in mobile devices 300 Chapter 11: Working with page code About coding in Dreamweaver 301 Setting up your coding environment 307 Customizing - Adobe 38040334 | User Guide - Page 5
v Working with Flash 382 Working with Bridge 383 Working with Device Central 385 Chapter 14: Creating and managing templates About Dreamweaver templates 387 Recognizing templates and template-based documents 392 Creating a Dreamweaver template 395 Creating editable regions 398 Creating - Adobe 38040334 | User Guide - Page 6
.NET developers 518 Database connections for JSP developers 521 Troubleshooting database connections 525 Removing connection scripts 530 Chapter 18: 567 Displaying database records 570 Viewing live data 579 Using web services 583 Adding custom server behaviors 589 Creating forms 600 Chapter - Adobe 38040334 | User Guide - Page 7
vii Chapter 23: Accessibility Dreamweaver and accessibility 704 Dreamweaver accessibility features 705 Designing pages for accessibility 707 Chapter 24: Shortcuts and extensions Keyboard shortcuts 708 Extensions 710 Index 711 September 4, 2007 - Adobe 38040334 | User Guide - Page 8
moments to read an overview of Adobe Help and of the many resources available to users. You have access to instructional videos, plug-ins, templates, receive complimentary installation support, notifications of updates, and other services. ❖ To register, follow the on-screen instructions in the - Adobe 38040334 | User Guide - Page 9
DREAMWEAVER CS3 2 User Guide Adobe Help Adobe Help resources Documentation for your Adobe software is available in a variety of formats. In-product and LiveDocs Help In-product Help provides access to all documentation and instructional content available at the time the software ships. It is - Adobe 38040334 | User Guide - Page 10
DREAMWEAVER CS3 3 User Guide A printed workflow guide is included with all Adobe Creative Suite® 3 products, and stand-alone Adobe products may include a printed getting started guide. Using Help in the product In-product Help is available through the Help menu. After you start the Adobe Help Viewer - Adobe 38040334 | User Guide - Page 11
DREAMWEAVER CS3 4 User Guide • Content supports (Windows) Adobe documentation set (the full set is available on LiveDocs). These Help documents are intended for both beginners and advanced developers interested in ColdFusion. • Reference gives access to HTML, server model, and other reference manuals - Adobe 38040334 | User Guide - Page 12
DREAMWEAVER CS3 5 User Guide Resources Adobe Video Workshop 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 - Adobe 38040334 | User Guide - Page 13
, so check in to see what's new. Dreamweaver CS3 videos Adobe Video Workshop covers a wide range of subjects for Adobe Dreamweaver® CS3, including these: • Using and customizing CSS-based layouts • Using Spry widgets • Styling forms with CSS • Troubleshooting publishing problems September 4, 2007 - Adobe 38040334 | User Guide - Page 14
DREAMWEAVER CS3 7 User Guide • Creating rollovers Videos also show you how to use Dreamweaver CS3 with other Adobe software: • Designing websites with Dreamweaver and Photoshop • Using Dreamweaver templates with Contribute® • Importing, copying and pasting between web applications To access Adobe - Adobe 38040334 | User Guide - Page 15
DREAMWEAVER CS3 8 User Guide and websites PDF version of the Help, technical information, and other documents such as specimen sheets, reference guides, and specialized feature information. Adobe Exchange For more free content, visit www.adobe.com/go/exchange, an online community where users download - Adobe 38040334 | User Guide - Page 16
Note: Bridge Home may not be available in all languages. DREAMWEAVER CS3 9 User Guide 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 - Adobe 38040334 | User Guide - Page 17
DREAMWEAVER CS3 10 User Guide New ideas are the heart of Think Tank, Dialog Box, and guides, and other technical resources. Visit Adobe Developer Center at www.adobe.com/go/developer. Customer support Visit the Adobe Support website, at www.adobe.com/support, to find troubleshooting information - Adobe 38040334 | User Guide - Page 18
DREAMWEAVER CS3 11 User Guide Adobe Labs Adobe Labs gives you the opportunity to experience and evaluate new and emerging technologies and products from Adobe. At Adobe Labs, you have access to resources such as these: • Prerelease software and technologies • Code samples and best practices to - Adobe 38040334 | User Guide - Page 19
DREAMWEAVER CS3 12 User Guide Advanced Photoshop CS3 integration Dreamweaver includes enhanced integration with Photoshop CS3. Now, designers can simply select any portion of a design in Photoshop-even across multiple layers-and paste it directly into a Dreamweaver page. Dreamweaver presents a - Adobe 38040334 | User Guide - Page 20
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 window when the main page is finished loading. Finally, Dreamweaver - Adobe 38040334 | User Guide - Page 21
DREAMWEAVER CS3 14 User Guide Create pages by hand coding Coding web pages by hand is another approach to creating pages. Dreamweaver ® ColdFusion® from Adobe® and web services. If you need Windows®, Dreamweaver provides an all-in-one-window integrated layout. In the integrated workspace, all windows - Adobe 38040334 | User Guide - Page 22
B C DREAMWEAVER CS3 15 User Guide D E F G A. Insert bar B. Document toolbar C. Document window D. Panel groups E. Tag selector F. Property inspector G. Files panel On Mac OS®, Dreamweaver can display multiple documents in a single window with tabs that identify each document. Dreamweaver can - Adobe 38040334 | User Guide - Page 23
DREAMWEAVER CS3 16 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 - Adobe 38040334 | User Guide - Page 24
DREAMWEAVER CS3 17 User Guide 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: - Adobe 38040334 | User Guide - Page 25
DREAMWEAVER CS3 18 User Guide Show Design View Displays only the Design view in the Document window. 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 - Adobe 38040334 | User Guide - Page 26
DREAMWEAVER CS3 19 User Guide A B CD E F G 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 Tag selector Shows the hierarchy of tags surrounding the current selection. Click any tag in the - Adobe 38040334 | User Guide - Page 27
DREAMWEAVER CS3 20 User Guide The Layout category Lets you insert tables, div tags, frames, and Spry widgets. You can also is visible only in Code view and appears vertically on the left side of the Document window. You cannot undock or move the Coding toolbar, but you can hide it. September 4, 2007 - Adobe 38040334 | User Guide - Page 28
DREAMWEAVER CS3 21 User Guide You can also edit the Coding toolbar to display more buttons (such as Word Wrap, Show other 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 September 4, 2007 - Adobe 38040334 | User Guide - Page 29
DREAMWEAVER CS3 22 User Guide Property inspector overview The Property inspector lets you examine and " on page 30 Files panel overview Use the Files panel to view and manage the files in your Dreamweaver site. When you view sites, files, or folders in the Files panel, you can change the size - Adobe 38040334 | User Guide - Page 30
DREAMWEAVER CS3 23 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 - Adobe 38040334 | User Guide - Page 31
Document window to a desired window size to see how the elements fit on the page. • 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 - Adobe 38040334 | User Guide - Page 32
DREAMWEAVER CS3 25 User Guide Show both Code and Design views windows ❖ Select Window > Cascade. Tile Document windows • (Windows) Select Window > Tile Horizontally or Window > Tile Vertically. • (Macintosh) Select Window > Tile. Resize the Document window The status bar displays the Document window - Adobe 38040334 | User Guide - Page 33
is selected in the Document window, the image's download size is displayed in the Property inspector. See also "Status bar overview" on page 18 "Resize the Document window" on page 25 Reports in Dreamweaver You can run reports in Dreamweaver to find content, troubleshoot, or test content. You can - Adobe 38040334 | User Guide - Page 34
DREAMWEAVER CS3 27 User Guide Lets you view information to debug a Macromedia® ColdFusion® from Adobe® application. See also "Search for tags, attributes, or text To display or hide the Coding toolbar in the Code inspector (Window > Code Inspector), select Coding Toolbar from the View Options pop - Adobe 38040334 | User Guide - Page 35
DREAMWEAVER CS3 28 User Guide Use the Insert bar The Insert bar contains buttons ❖ Click the down arrow beside the button's icon. Show Insert bar categories as a menu: ❖ Right-click (Windows) or Control-click (Macintosh) a category tab in the Insert bar, and then select Show as Menus. Show Insert - Adobe 38040334 | User Guide - Page 36
boxes. Many objects, including navigation bars, AP elements, Flash buttons, and framesets, do not insert placeholders or default-valued objects. Modify preferences for the Insert bar 1 Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh). 2 In the General category of the - Adobe 38040334 | User Guide - Page 37
DREAMWEAVER CS3 30 User Guide Insert objects using buttons in the Favorites category ❖ Select inspector. View and change properties for a page element 1 Select the page element in the Document window. You might have to expand the Property inspector to view all the properties for the selected element. - Adobe 38040334 | User Guide - Page 38
2 Select a command from the context menu. DREAMWEAVER CS3 31 User Guide 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 - Adobe 38040334 | User Guide - Page 39
DREAMWEAVER CS3 32 User Guide 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). If you can't find - Adobe 38040334 | User Guide - Page 40
DREAMWEAVER CS3 33 User Guide Dock a panel group to other panel groups (floating workspace) or to the integrated window (Windows only) ❖ Drag the panel resize the set of panel groups just as you would drag to resize any window in your operating system. For example, you can drag the resize area at - Adobe 38040334 | User Guide - Page 41
window, and the position and size of the Document window. See also "Save custom workspace layouts" on page 35 Customizing the Dreamweaver CS3 workspace Choose the workspace layout (Windows to that used by Adobe® HomeSite® and ColdFusion, and with the Document window showing Code view by default - Adobe 38040334 | User Guide - Page 42
DREAMWEAVER CS3 35 User Guide Change the default tabbed document setting 1 Select Dreamweaver > Preferences, and then select the General category. 2 Select or deselect Open Documents in Tabs, and click OK. Dreamweaver there are no documents open, the Document window is blank. Hide the Welcome screen - Adobe 38040334 | User Guide - Page 43
folder). In Windows Vista, they're stored in C:\Users\username\Application Data\Adobe\Dreamweaver 9\Configuration (which may be inside a hidden folder). In Mac OS X, they're stored inside your Home folder; specifically, in Users/username/Library/Application Support/Adobe/Dreamweaver 9/Configuration - Adobe 38040334 | User Guide - Page 44
DREAMWEAVER CS3 37 User Guide Switch To Plain Paragraph After Heading Specifies that pressing Enter (Windows) or Return (Macintosh) at the end of up menu. The only exceptions are for bold and italic fonts, for which Dreamweaver uses HTML tags instead of CSS. Even if the document links to an external - Adobe 38040334 | User Guide - Page 45
DREAMWEAVER CS3 38 User Guide Spelling Dictionary lists the available spelling dictionaries. The font Dreamweaver uses to display text within pre, code, and tt tags. The default depends on your system's installed fonts. For most U.S. systems, the default is Courier New 10 pt. (Small) on Windows and - Adobe 38040334 | User Guide - Page 46
DREAMWEAVER CS3 39 User Guide See also "Use the color picker" on page 223 "Change the highlight color of div tags" on page 164 Change a highlighting color 1 Select Edit > Preferences - Adobe 38040334 | User Guide - Page 47
40 Chapter 3: Working with Dreamweaver sites 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 - Adobe 38040334 | User Guide - Page 48
DREAMWEAVER CS3 41 User Guide Understanding local and remote folder structure When you want to use Dreamweaver to connect to a illustrates one local root folder on the local machine, and one top-level remote folder on the remote web server. If, however, you are maintaining a number of Dreamweaver - Adobe 38040334 | User Guide - Page 49
DREAMWEAVER CS3 42 User Guide Remove Deletes the selected site; you cannot undo this action. Export them), set up only a local folder, and then add remote and testing information later. You can use Dreamweaver to edit an existing website on your local disk or to edit a remote site (or a branch of a - Adobe 38040334 | User Guide - Page 50
DREAMWEAVER CS3 43 User Guide Dreamweaver resolves rootrelative links, it Dreamweaver manually Dreamweaver Dreamweaver Dreamweaver to verify links within the site that use absolute URLs or site root-relative paths. Dreamweaver Dreamweaver option, Dreamweaver asks you the Dreamweaver Files - Adobe 38040334 | User Guide - Page 51
DREAMWEAVER CS3 44 User Guide For a tutorial on setting up a remote folder, see www.adobe.com/go/vid0162. Note: Dreamweaver supports connections to IPv6-enabled servers. Supported testing server on your local computer. RDS (Remote Development Services) Use this setting if you connect to your web - Adobe 38040334 | User Guide - Page 52
DREAMWEAVER CS3 45 User Guide Note: If you do not know your FTP host, contact your web , check with your system administrator. For more information, see TechNote 15220 on the Adobe website at www.adobe.com/go/15220. 10 Select Use Extended Data Connection Type (IPv6) if you are using an IPv6-enabled - Adobe 38040334 | User Guide - Page 53
DREAMWEAVER CS3 46 User Guide 5 Select Maintain Synchronization Information if you want to automatically synchronize your local and remote files. (This option is selected by default.) 6 Select Automatically Upload Files To Server On Save if you want Dreamweaver to upload your file to your remote - Adobe 38040334 | User Guide - Page 54
Check Out Files When Opening if you do not want Dreamweaver to download your files from the server automatically when you open the local file. Troubleshoot the remote folder setup The following list provides information on common problems you may encounter in setting up a remote folder, and how - Adobe 38040334 | User Guide - Page 55
DREAMWEAVER CS3 48 User Guide • 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 - Adobe 38040334 | User Guide - Page 56
DREAMWEAVER CS3 49 User Guide URL is www.adobe.com/mycoolapp/start.jsp, you would enter the following URL prefix: www.adobe.com/mycoolapp/. If Dreamweaver runs on the so Dreamweaver can use the services of a testing server to display data and to connect to databases while you work. Dreamweaver uses - Adobe 38040334 | User Guide - Page 57
DREAMWEAVER CS3 50 User Guide http://www.mystartup.com/warehouse/ Localhost Refers to the home directory in your URLs when the client (usually a browser, but in this case Dreamweaver) runs on the same system as your web server. Suppose Dreamweaver is running on the same Windows to download the - Adobe 38040334 | User Guide - Page 58
DREAMWEAVER CS3 51 User Guide Remove a Dreamweaver site from your list of sites Removing a Dreamweaver site and all of you want to export and click Export: • To select more than one site, Control-click (Windows) or Command-click (Macintosh) each site. • To select a range of sites, Shift-click - Adobe 38040334 | User Guide - Page 59
DREAMWEAVER CS3 52 User Guide 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 the Files panel (Window > Files), do one of the following: - Adobe 38040334 | User Guide - Page 60
DREAMWEAVER CS3 53 User Guide • 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 window. - Adobe 38040334 | User Guide - Page 61
DREAMWEAVER CS3 54 User Guide The site map is redrawn in the window as if the specified page were at the > Rename. 3 Type the new name and press Enter (Windows) or Return (Macintosh). Note: When you work in the Files panel, Dreamweaver updates all links to files whose names have changed. Update the - Adobe 38040334 | User Guide - Page 62
DREAMWEAVER CS3 55 User Guide To hide a file using the site map, you must mark the corner, then select View > Site Map Options > Show Files Marked As Hidden. • In the collapsed Files panel (Window > Files), click the options menu in the upper-right corner, then select View > Site Map Options > Show/ - Adobe 38040334 | User Guide - Page 63
on page 52 Managing Contribute sites with Dreamweaver Managing Contribute sites Adobe® Contribute® CS3 combines a web browser with a web-page service-for example, Lightweight Directory Access Protocol (LDAP) or Active Directory. When you enable your Dreamweaver site as a Contribute site, Dreamweaver - Adobe 38040334 | User Guide - Page 64
DREAMWEAVER CS3 57 User Guide 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 - Adobe 38040334 | User Guide - Page 65
DREAMWEAVER CS3 58 User Guide When you check a file in to a Contribute site, Dreamweaver the contents of the dependent file don't appear in the Contribute window. For example, if a user doesn't have read access Help. Occasionally you might need to manually delete Contribute special files. For example - Adobe 38040334 | User Guide - Page 66
DREAMWEAVER CS3 59 User Guide 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 - Adobe 38040334 | User Guide - Page 67
DREAMWEAVER CS3 60 User Guide 9 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 administration tasks. Note: - Adobe 38040334 | User Guide - Page 68
DREAMWEAVER CS3 61 User Guide 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 - Adobe 38040334 | User Guide - Page 69
DREAMWEAVER CS3 62 User Guide Yes to confirm. The file is unlocked on the server. Troubleshoot connection problems for a Contribute site 1 Check the Site Root URL in CSI extension. 3 If it doesn't, use the Connection Wizard (Windows) or Connection Assistant (Macintosh) to create a connection to the - Adobe 38040334 | User Guide - Page 70
DREAMWEAVER CS3 63 User Guide sure whether you use passive FTP, check with your system administrator. 10 Select Use Firewall if you connect to the remote server from behind this case, you would enter the following URL prefix: www.adobe.com/mycoolapp/. 6 Click the Settings button to complete the access - Adobe 38040334 | User Guide - Page 71
DREAMWEAVER CS3 64 User Guide 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 - Adobe 38040334 | User Guide - Page 72
DREAMWEAVER CS3 65 User Guide 2 Enter a location to store your files or click the folder icon to browse to the folder. This is your working directory for your Dreamweaver site-it is the place where you store your "in progress" files for a Dreamweaver site. In the Dreamweaver Files panel, this folder - Adobe 38040334 | User Guide - Page 73
DREAMWEAVER CS3 66 User Guide For this access method, you must have a server that supports testing server on your local computer. RDS (Remote Development Services) Use if you connect to your web server using RDS Visual SourceSafe. Support for this method is only available for Windows; to use - Adobe 38040334 | User Guide - Page 74
DREAMWEAVER CS3 67 User Guide See also "Set up a remote folder" on page 43 Set Basic alert yourself that you may have left a more recent version of a file on another machine. 2 Select Dreamweaver Should Check It Out if you want to automatically check out files when you open them from the Files panel - Adobe 38040334 | User Guide - Page 75
(CFML), ASP, JavaScript, and Cascading Style Sheets (CSS). Source code files, such as Visual Basic, .NET, C#, and Java, are also supported. Dreamweaver provides several options for creating a new document. You can create any of the following: • A new blank document or template • A document based - Adobe 38040334 | User Guide - Page 76
DREAMWEAVER CS3 69 User Guide XSL Extensible Stylesheet Language files have a .xsl or .xslt extension site visitor changes the text settings, but does not change based on the size of the browser window. Liquid Column width is specified as a percentage of the site visitor's browser width. The design - Adobe 38040334 | User Guide - Page 77
DREAMWEAVER CS3 70 User Guide Note: For more information about XHTML, see the World Wide extension. 8 Click Get More Content if you want to open Dreamweaver Exchange where you can download more page design content. 9 Click the Create button. 10 Save the new document (File > Save). 11 In the dialog - Adobe 38040334 | User Guide - Page 78
DREAMWEAVER CS3 71 User Guide 3 settings, but does not change based on the size of the browser window. Liquid Column width is specified as a percentage of the site visitor's to open Dreamweaver Exchange where you can download more page design content. 10 Click the Create button. September 4, 2007 - Adobe 38040334 | User Guide - Page 79
DREAMWEAVER CS3 72 User Guide 11 Save the new document (File > Save). If you haven't added editable regions to the document type, encoding, and a file extension. 6 Click Get More Content if you want to open Dreamweaver Exchange where you can download more page design content. September 4, 2007 - Adobe 38040334 | User Guide - Page 80
DREAMWEAVER CS3 73 User Guide 7 Click Create and save the document (File > Save). Create a document from a template in the Assets panel 1 Open the Assets panel (Window > Assets), if it is not already open. 2 In the Assets panel, click the Templates icon on the left to view the list of templates in - Adobe 38040334 | User Guide - Page 81
DREAMWEAVER CS3 74 User Guide Create other kinds of pages The Other category of the New Document dialog box lets you create various types of pages that you might want to use in Dreamweaver (Windows) or Dreamweaver > Adobe provides the other three Unicode Normalization Forms for completeness. - Adobe 38040334 | User Guide - Page 82
DREAMWEAVER CS3 75 User Guide Show New Document Dialog Box on Control+N Deselect this option 4 In the Default Extension box, specify the file extension you want for new HTML documents created in Dreamweaver. For Windows, you can specify the following extensions: .html, .htm, .shtml, .shtm, .stm, .tpl - Adobe 38040334 | User Guide - Page 83
DREAMWEAVER CS3 76 User Guide You can also use the Files panel to open files. 2 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. 3 - Adobe 38040334 | User Guide - Page 84
DREAMWEAVER CS3 77 User Guide Clean Up CSS Removes all Word-specific CSS, including up code" on page 326 "Import Microsoft Office documents (Windows only)" on page 234 Managing files and folders About managing files and folders Dreamweaver includes a Files panel that helps you manage and transfer - Adobe 38040334 | User Guide - Page 85
or transfer files: DREAMWEAVER CS3 78 User Guide A BC D local disk, much like Windows Explorer (Windows) or the Finder ( Dreamweaver > Preferences (Macintosh), then select Site from the category list on the left. Refresh Refreshes the local and remote directory lists. Use this button to manually - Adobe 38040334 | User Guide - Page 86
DREAMWEAVER CS3 79 User Guide Check In File(s) Transfers a copy of the local file to the remote /Collapse button to expand the panel while it is not docked, you can still work in the Document window. Before you can dock the panel again, you must first collapse it. When the Files panel is collapsed - Adobe 38040334 | User Guide - Page 87
DREAMWEAVER CS3 80 User Guide 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 - Adobe 38040334 | User Guide - Page 88
DREAMWEAVER CS3 81 User Guide Open a file 1 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). 2 Navigate to the file you want - Adobe 38040334 | User Guide - Page 89
DREAMWEAVER CS3 82 User Guide 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 - Adobe 38040334 | User Guide - Page 90
DREAMWEAVER CS3 83 User Guide Find recently modified files in your site 1 In the collapsed Files panel (Window > Files), click the enter a path in the text box. 5 Click OK to save your settings. Dreamweaver highlights the files that were modified within the selected time frame in the Files panel - Adobe 38040334 | User Guide - Page 91
DREAMWEAVER CS3 84 User Guide 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 - Adobe 38040334 | User Guide - Page 92
DREAMWEAVER CS3 85 User Guide 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 a good idea to download dependent files when checking - Adobe 38040334 | User Guide - Page 93
DREAMWEAVER CS3 86 User Guide 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 columns • Add new columns (for a maximum of 10 columns) • Hide columns (except the filename column) - Adobe 38040334 | User Guide - Page 94
DREAMWEAVER CS3 87 User Guide Click the heading again to reverse the order (ascending or descending) by which Dreamweaver disk, there's no need to download them again. This is also true transfer protocols supported by Dreamweaver: FTP, Insert a web service • Delete remote files or folders • - Adobe 38040334 | User Guide - Page 95
DREAMWEAVER CS3 88 User Guide • Save a file to a remote server • Insert Window > Files), select the desired files to download. Usually you select these files in the Remote view, but you can select the corresponding files in the Local view if you prefer. If the Remote view is active, then Dreamweaver - Adobe 38040334 | User Guide - 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 - Adobe 38040334 | User Guide - Page 97
DREAMWEAVER CS3 90 User Guide Note: You can put only those files for which the local version is more recent than the remote version. 2 Do one of the following to put the file on the remote server: • Click the Put button in the Files panel toolbar. • Right-click (Windows) or Control-click (Macintosh) - Adobe 38040334 | User Guide - Page 98
DREAMWEAVER CS3 91 User Guide Hide the Background 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 - Adobe 38040334 | User Guide - Page 99
DREAMWEAVER CS3 92 User Guide 2 Select a site and click Edit. 3 In the Advanced tab, select also "Set up a remote folder" on page 43 Use WebDAV to check in and check out files Dreamweaver can connect to a server that uses WebDAV (Web-based Distributed Authoring and Versioning), which is a set of - Adobe 38040334 | User Guide - Page 100
DREAMWEAVER CS3 93 User Guide 7 Click OK. Dreamweaver configures the site for WebDAV access. When toolbar. • Right-click (Windows) or Control-click (Macintosh), then select Check Out from the context menu. 3 In the Dependent Files dialog box, click Yes to download dependent files along with the - Adobe 38040334 | User Guide - Page 101
DREAMWEAVER CS3 94 User Guide A lock symbol appears beside the local file's icon one of the following: • Open the file in the Document window, then select Site > Undo Check Out. • In the Files panel (Window > Files), right-click (Windows) or Control-click (Macintosh), then select Undo Check Out. - Adobe 38040334 | User Guide - Page 102
DREAMWEAVER CS3 95 User Guide feature to be available. Synchronize your files 1 In the Files panel (Window > Files), select a site from the menu where the current site, Newer Files From Remote Downloads all the remote files that don't exist locally or have changed since the last download. Get And Put - Adobe 38040334 | User Guide - Page 103
DREAMWEAVER CS3 96 User Guide 8 Verify the action that will be performed for each file. 9 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. Compare The Compare action works only if you installed and specified a - Adobe 38040334 | User Guide - Page 104
DREAMWEAVER CS3 97 User Guide If you use FileMerge BBEdit TextWrangler Select the following file usr/bin/opendiff usr/bin/bbdiff usr/bin/twdiff 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 - Adobe 38040334 | User Guide - Page 105
DREAMWEAVER CS3 98 User Guide 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 - Adobe 38040334 | User Guide - Page 106
DREAMWEAVER CS3 99 User Guide 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. - Adobe 38040334 | User Guide - Page 107
DREAMWEAVER CS3 100 User Guide Note: Dreamweaver excludes cloaked templates and library items from Get and Put operations only. Dreamweaver , you can cloak multiple folders at the same time. 1 In the Files panel (Window > Files), select a select a site that has site cloaking enabled from the pop- - Adobe 38040334 | User Guide - Page 108
DREAMWEAVER CS3 101 User Guide 2 Right-click (Windows) or Control-click (Macintosh), then select Cloaking > file or folder overrides cloaking. Uncloak specific file types within a site 1 In the Files panel (Window > Files), select a site that has site cloaking enabled from the pop-up menu where the - Adobe 38040334 | User Guide - Page 109
DREAMWEAVER CS3 102 User Guide Storing file information in Design a design decision. 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 you'll need to delete them manually). September 4, 2007 - Adobe 38040334 | User Guide - Page 110
DREAMWEAVER CS3 103 User Guide 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 Flash window and select File > Design Notes. • In the Files panel, right-click (Windows - Adobe 38040334 | User Guide - Page 111
DREAMWEAVER CS3 104 User Guide 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 - Adobe 38040334 | User Guide - Page 112
DREAMWEAVER CS3 105 User Guide You should make sure that your pages look and work as expected in the browsers you're targeting, that there are no broken links, and that the pages don't take too long to download. You can also test and troubleshoot your entire site by running a site report. The - Adobe 38040334 | User Guide - Page 113
DREAMWEAVER CS3 106 User Guide "Apply the Check Browser behavior" on page 351 "Validate report types to Dreamweaver through the Adobe Dreamweaver Exchange website. See also "Reports in Dreamweaver" on page 26 "Test links in Dreamweaver" on page 289 "Add and manage extensions in Dreamweaver" on page - Adobe 38040334 | User Guide - Page 114
DREAMWEAVER CS3 107 User Guide or for browsers that have been set to download images manually. Screen readers read alternate text, and some browsers display in the Document window. Note: If you are in Design view, Dreamweaver changes the display to split view to show the reported problem in code. 3 - Adobe 38040334 | User Guide - Page 115
called library items. 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 Adobe® Fireworks® or Adobe® Flash®, receive them from a co-worker, or copy them from a clip-art CD or graphics website. Dreamweaver also - Adobe 38040334 | User Guide - Page 116
DREAMWEAVER CS3 109 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 Assets panel overview Use the Assets panel (Window > Assets) to manage assets in the - Adobe 38040334 | User Guide - Page 117
DREAMWEAVER CS3 110 User Guide The Assets panel provides two ways to view assets: Site ://) links. Flash Files in any version of Adobe Flash. The Assets panel displays only SWF files (compressed Flash files), but not FLA (Flash source) files. Shockwave Files in any version of Adobe Shockwave. Movies - Adobe 38040334 | User Guide - Page 118
DREAMWEAVER CS3 111 User Guide Sort assets ❖ Click a column heading. For example, to Site list manually, click the Refresh Site List button . Dreamweaver creates the site cache or updates it as necessary. • To refresh the Site list and manually rebuild the site cache, right-click (Windows) or - Adobe 38040334 | User Guide - Page 119
DREAMWEAVER CS3 112 User Guide Apply a color to text using the Assets panel The Assets one of the following ways: • Shift-click to select a consecutive series of assets. • Control-click (Windows) or Command-click (Macintosh) to add an individual asset to the selection (whether or not it's adjacent - Adobe 38040334 | User Guide - Page 120
DREAMWEAVER CS3 113 User Guide Edit an asset When you edit an asset in the Assets panel panel 1 In the Assets panel, select the category of the asset you want to find. 2 Right-click (Windows) or Control-click (Macintosh) the asset's name or icon in the Assets panel, then select Locate In Site from - Adobe 38040334 | User Guide - Page 121
DREAMWEAVER CS3 114 User Guide The assets are copied to their corresponding locations in the target site. Dreamweaver creates new Dreamweaver ignores files that don't correspond to a category in the Assets panel. • Right-click (Windows) or Control-click (Macintosh) an element in the Document window - Adobe 38040334 | User Guide - Page 122
DREAMWEAVER CS3 115 User Guide 2 Select the Favorites option at the top of the panel. 3 retains their real filenames (or values, in the case of colors and URLs). 1 In the Assets panel (Window > Assets), select the category that contains your asset. 2 Select the Favorites option at the top of the - Adobe 38040334 | User Guide - Page 123
DREAMWEAVER CS3 116 User Guide 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 1 In the Document window, select a - Adobe 38040334 | User Guide - Page 124
DREAMWEAVER CS3 117 User Guide Edit library items and update documents When you edit a library . 3 Either Click the Edit button or double-click the library item. Dreamweaver opens a new window, similar to the Document window, for editing the library item. The gray background indicates that you're - Adobe 38040334 | User Guide - Page 125
DREAMWEAVER CS3 118 User Guide 4 Click elsewhere, or press Enter (Windows) or Return (Macintosh). 5 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 - Adobe 38040334 | User Guide - Page 126
DREAMWEAVER CS3 119 User Guide it, then click the Delete button. 8 In the Document window, select all the elements that make up the library item. Be name as the item you deleted, using the same spelling and capitalization. 10 To update the library item in your site's other documents, select Modify - Adobe 38040334 | User Guide - Page 127
120 Chapter 6: Creating pages with CSS Adobe® Dreamweaver® CS3 includes many features that help you use Cascading and simplifies navigation for people with accessibility issues (for example, those using screen readers). CSS gives you great flexibility and control over the exact appearance of your - Adobe 38040334 | User Guide - Page 128
DREAMWEAVER CS3 121 User Guide h1 { font-size: 16 pixels; font- window, however, gives you the most accurate "live" rendering of the page.) Some CSS styles are rendered differently in Microsoft Internet Explorer, Netscape, Opera, Apple Safari, or other browsers, and some are not currently supported - Adobe 38040334 | User Guide - Page 129
DREAMWEAVER CS3 122 User Guide To display the O'Reilly CSS reference guide included with Dreamweaver, select Help > Reference and web page in an optimal way. A common tag-the paragraph tag, or tag-illustrates the concept. By default, browsers come with style sheets that define the font and font - Adobe 38040334 | User Guide - Page 130
DREAMWEAVER CS3 123 User Guide body { font-family: Arial; font-style: italic; } p { font-family: Courier 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 - Adobe 38040334 | User Guide - Page 131
DREAMWEAVER CS3 124 User Guide . For this reason, Dreamweaver uses the long form of CSS notation by default. This prevents possible problems caused by a shorthand category of the Preferences dialog box (Edit > Preferences in Windows; Dreamweaver > Preferences on the Macintosh). Note: The CSS Styles - Adobe 38040334 | User Guide - Page 132
DREAMWEAVER CS3 125 User Guide The CSS Styles panel in Current mode In Current font-size: 12px; } When you select paragraph text with a class style of .foo in the Document window, the Summary for Selection pane displays the relevant properties for both rules, because both rules apply to the selection - Adobe 38040334 | User Guide - Page 133
DREAMWEAVER CS3 126 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 - Adobe 38040334 | User Guide - Page 134
DREAMWEAVER CS3 127 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 - Adobe 38040334 | User Guide - Page 135
DREAMWEAVER CS3 128 User Guide ABC A. Category View B. List View C. Set Properties View Category View Divides the Dreamweaver-supported CSS can also detach (or "unlink") an attached CSS style sheet. Right-click (Windows) or Control-click (Macintosh) the CSS Styles panel to open a context menu - Adobe 38040334 | User Guide - Page 136
DREAMWEAVER CS3 129 User Guide 2 Set the CSS style options you want to apply: When Creating CSS Rules Use Shorthand For Lets you select which CSS style properties Dreamweaver writes in shorthand. When Editing CSS Rules Use Shorthand Controls whether Dreamweaver CSS Styles panel (Window > CSS Styles), - Adobe 38040334 | User Guide - Page 137
DREAMWEAVER CS3 130 User Guide Define CSS type properties You use the Type category in attribute is supported by both browsers. Variant Sets the small caps variant on text. Dreamweaver does not display this attribute in the Document window. The variant attribute is supported by Internet Explorer - Adobe 38040334 | User Guide - Page 138
DREAMWEAVER CS3 131 User Guide Background Image Sets the background image for the element.The background image attribute is supported by both browsers. Repeat Determines whether and how the background image is repeated. The Repeat attribute is supported by both browsers. • No Repeat displays the - Adobe 38040334 | User Guide - Page 139
DREAMWEAVER CS3 132 User Guide returns, is respected); Nowrap specifies that the text only wraps when a br tag is encountered. Dreamweaver does not display this attribute in the Document window. The Whitespace attribute is supported by Netscape Navigator and Internet Explorer 5.5. Display Specifies - Adobe 38040334 | User Guide - Page 140
DREAMWEAVER CS3 133 User Guide 3 In the CSS Rule Definition dialog box, select Border, Type Sets the appearance of bullets or numbers. Type is supported by both browsers. Bullet Image Lets you specify a custom image for bullets. Click Browse (Windows) or Choose (Macintosh) to browse to an image, or - Adobe 38040334 | User Guide - Page 141
DREAMWEAVER CS3 134 User Guide • Relative places the content block using the coordinates entered in of scroll bars in a dynamic environment. This option is not displayed in the Document window. • Auto makes scroll bars appear only when the container's contents exceed its boundaries. This - Adobe 38040334 | User Guide - Page 142
DREAMWEAVER CS3 135 User Guide 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 > CSS Styles), - Adobe 38040334 | User Guide - Page 143
DREAMWEAVER CS3 136 User Guide 3 Do one of the following: • Double-click a rule in to change. 2 Click the selector again to make the name editable. 3 Make your changes and press Enter (Windows) or Return (Macintosh). Add a property to a rule You can use the CSS Styles panel to add properties to - Adobe 38040334 | User Guide - Page 144
DREAMWEAVER CS3 137 User Guide Place the insertion point in a paragraph to apply the style select the class style you want to apply from the Style pop-up menu. • In the Document window, right-click (Windows) or Control-click (Macintosh) the selected text, and in the context menu, select CSS Styles - Adobe 38040334 | User Guide - Page 145
DREAMWEAVER CS3 138 User Guide Move CSS rules to a new style sheet 1 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 - Adobe 38040334 | User Guide - Page 146
DREAMWEAVER CS3 139 User Guide Open the CSS Styles panel by doing one of the following: • Select Window > CSS Styles. • Press Shift + F11. 2 In the CSS Styles where the published style sheet is located. This method is supported by both Microsoft Internet Explorer and Netscape Navigator. • You cannot - Adobe 38040334 | User Guide - Page 147
DREAMWEAVER CS3 140 User Guide See also "Create a page based on a Dreamweaver directly in the CSS style sheet. 1 In the CSS Styles panel (Window > CSS Styles), select All mode. 2 In the All rules You can, however, also apply these preferences manually to individual documents. This might be useful if - Adobe 38040334 | User Guide - Page 148
DREAMWEAVER CS3 141 User Guide 2 Select Commands > Apply Source Formatting. The formatting options you set in CSS code formatting preferences are applied to the entire document. You cannot format individual selections. Format embedded CSS code manually 1 Open an HTML page that contains CSS embedded - Adobe 38040334 | User Guide - Page 149
CS3 142 User Guide 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 - Adobe 38040334 | User Guide - Page 150
DREAMWEAVER CS3 143 User Guide Note: Reports are not saved automatically; if you want to Hover over buttons in the Results panel to see button tool tips. Open the Adobe CSS Advisor website 1 In the Results panel (Window > Results), select the Browser Compatibility Check tab. 2 Click the link text - Adobe 38040334 | User Guide - Page 151
DREAMWEAVER CS3 144 User Guide Use Dreamweaver sample style sheets Dreamweaver provides sample style sheets that you can apply to your pages or that you can use as starting points to develop your own styles. 1 Open the CSS Styles panel by doing one of the following: • Select Window > CSS Styles. • - Adobe 38040334 | User Guide - Page 152
DREAMWEAVER CS3 145 User Guide Laying out pages with CSS About CSS Dreamweaver AP elements, however, is that since they are absolutely positioned, their positions never adjust on the page according to the size of the browser window. If you are an advanced user, you can also insert div tags manually - Adobe 38040334 | User Guide - Page 153
DREAMWEAVER CS3 146 User Guide B A C A. Container div B. Sidebar div C. Main Content div Following is the code for all three div tags in the HTML: - Adobe 38040334 | User Guide - Page 154
DREAMWEAVER CS3 147 User Guide A B C Container div tag, 780 pixels, no margin A. Text aligned 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. Additionally, the rule positions the sidebar div tag with float: - Adobe 38040334 | User Guide - Page 155
DREAMWEAVER CS3 148 User Guide 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 - Adobe 38040334 | User Guide - Page 156
DREAMWEAVER CS3 149 User Guide - Adobe 38040334 | User Guide - Page 157
DREAMWEAVER CS3 150 User Guide 4 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: Fixed - Adobe 38040334 | User Guide - Page 158
DREAMWEAVER CS3 151 User Guide To make your custom CSS layout consistent with the other layouts that come with Dreamweaver, you should save your HTML file with the .htm extension. 2 Add the HTML page to the Adobe Dreamweaver CS3\Configuration\BuiltIn\Layouts folder. 3 (Optional) Add a preview image - Adobe 38040334 | User Guide - Page 159
DREAMWEAVER CS3 152 User Guide - Adobe 38040334 | User Guide - Page 160
DREAMWEAVER CS3 153 User Guide 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 - Adobe 38040334 | User Guide - Page 161
DREAMWEAVER CS3 154 User Guide 2 In the Layout category of the Insert bar, click the Draw AP Div button . 3 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 - Adobe 38040334 | User Guide - Page 162
DREAMWEAVER CS3 155 User Guide View or set properties for a single AP element When you select an AP element, the Property inspector displays AP element properties. 1 Select an AP element. 2 In the Property inspector (Window > Properties), click the expander arrow in the lower-right corner, if it isn - Adobe 38040334 | User Guide - Page 163
DREAMWEAVER CS3 156 User Guide contents exceed its boundaries.) Note: The overflow option has uneven support across browsers. Clip Defines the visible area of an AP 1 Select multiple AP elements. 2 In the Property inspector (Window > Properties), click the expander arrow in the lower-right corner - Adobe 38040334 | User Guide - Page 164
DREAMWEAVER CS3 157 User Guide The default unit for position and size is pixels (px). You can the AP elements panel ❖ In the AP elements panel (Window > AP elements), click the name of the AP element. Select an AP element in the Document window ❖ Do one of the following: • Click an AP element - Adobe 38040334 | User Guide - Page 165
DREAMWEAVER CS3 158 User Guide • Control-Shift-click (Windows) or Command-Shift-click (Macintosh) inside an AP element. • Click inside an AP element and press Control+A (Windows working on your document, you can show and hide AP elements manually, using the AP Elements panel, to see how the page will - Adobe 38040334 | User Guide - Page 166
DREAMWEAVER CS3 159 User Guide • A closed eye means the AP element is invisible. • If there is as Default visibility). Change the visibility of all AP elements at once ❖ In the AP Elements panel (Window > AP Elements), click the header eye icon at the top of the column. Note: This procedure can - Adobe 38040334 | User Guide - Page 167
DREAMWEAVER CS3 160 User Guide Move AP elements You can move AP elements in the into tables. For example, you might need to convert your AP elements to tables if you need to support browsers before version 4.0. Converting AP elements to tables, however, is highly discouraged because it can result in - Adobe 38040334 | User Guide - Page 168
DREAMWEAVER CS3 161 User Guide Convert between AP elements and tables You can create your of tables are also placed in AP Divs. Prevent AP element overlaps Because table cells cannot overlap, Dreamweaver cannot create a table from overlapping AP elements. If you plan to convert the AP elements in a - Adobe 38040334 | User Guide - Page 169
DREAMWEAVER CS3 162 User Guide When this option is on, an AP element can't be created option. • In the Document window, select Modify > Arrange > Prevent AP Element Overlaps. Working with div tags About working with div tags You can create page layouts by manually inserting div tags and applying CSS - Adobe 38040334 | User Guide - Page 170
DREAMWEAVER CS3 163 User Guide 3 Set any of the following options: Insert Lets you selected by default in the View > Visual Aids menu.) When you move the pointer over a div tag, Dreamweaver highlights the tag. You can change the highlight color or disable highlighting. When you select a div tag, - Adobe 38040334 | User Guide - Page 171
DREAMWEAVER CS3 164 User Guide Look for the highlighting to see the border. • Click inside the div tag, and press Control+A (Windows) or Command+A (Macintosh) twice. • Click inside the div tag, then select the div tag from the tag selector at the bottom of the Document window. 2 Select Window > CSS - Adobe 38040334 | User Guide - Page 172
DREAMWEAVER CS3 165 User Guide Dreamweaver provides a number of visual aids for viewing CSS layout blocks. over the layout block. The following list of CSS layout block visual aids describes what Dreamweaver renders as visible for each: CSS Layout Outlines Displays the outlines of all CSS layout - Adobe 38040334 | User Guide - Page 173
DREAMWEAVER CS3 166 User Guide 4 In Design view, open the page to which you want to attach appear in the page over time. To see the JavaScript code generated by a timeline, open the Document window's Code view. The timeline code is in the MM_initTimelines() function, inside a script tag in the head - Adobe 38040334 | User Guide - Page 174
DREAMWEAVER CS3 167 User Guide F G A. Keyframes B. Timelines pop-up menu C. Frame numbers D. Behaviors channel E. Animation channel F. Animation bars G. Playback head Keyframes Define frames in a bar where you have specified properties (such as position) for the object. Dreamweaver window. - Adobe 38040334 | User Guide - Page 175
DREAMWEAVER CS3 168 User Guide element to where it should be when the animation begins. 2 Select Window > Timelines. 3 Select the AP element you want to animate. Make selected, handles appear around it as shown in the following illustration. A B A. Click the AP element selection handle to select - Adobe 38040334 | User Guide - Page 176
DREAMWEAVER CS3 169 User Guide 2 Move the AP element to where it should be when location of an entire animation path, select the entire bar and then drag the object on the page. Dreamweaver adjusts the position of all keyframes. Making any type of change with an entire bar selected changes all the - Adobe 38040334 | User Guide - Page 177
DREAMWEAVER CS3 170 User Guide • 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. 2 Define new - Adobe 38040334 | User Guide - Page 178
DREAMWEAVER CS3 171 User Guide • the sequence (Edit > Paste) at that frame. 4 Right-click (Windows) or Control-click (Macintosh) the pasted animation sequence and select Change image must be downloaded. There will be no noticeable pauses or missing images if all images are downloaded at once in - Adobe 38040334 | User Guide - Page 179
DREAMWEAVER CS3 172 User Guide • 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 - Adobe 38040334 | User Guide - Page 180
Adobe® Dreamweaver® CS3 provides layout tools that let you create web pages using HTML tables or frames. The application also includes rulers, guides -origin icon (at the upper-left corner of the Design view of the Document window) anywhere on the page. • To reset the origin to its default position, - Adobe 38040334 | User Guide - Page 181
DREAMWEAVER CS3 174 User Guide 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 1 Hold the mouse - Adobe 38040334 | User Guide - Page 182
DREAMWEAVER CS3 175 User Guide See also "Align AP elements" on page 160 "Move AP elements" on page 160 Use the layout grid The grid displays a system of horizontal and vertical lines in the Document window guide to re-create a page design that was created in a graphics application such as Adobe - Adobe 38040334 | User Guide - Page 183
DREAMWEAVER CS3 176 User Guide Place a tracing image in the Document window 1 Do one of the following: • Select View > Tracing Image > Load. • Select Modify > Page Properties, then click Browse (next to the Tracing Image text box). 2 Select an image file, then click Select (Windows) or Choose ( - Adobe 38040334 | User Guide - Page 184
DREAMWEAVER CS3 177 User Guide If you do not see a width for the table or for a since cell formatting takes precedence over table formatting. Note: When you set properties on a column, Dreamweaver changes the attributes of the td tag corresponding to each cell in the column. About splitting and - Adobe 38040334 | User Guide - Page 185
DREAMWEAVER CS3 178 User Guide 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. 1 In the Design view of the Document window, place the insertion point - Adobe 38040334 | User Guide - Page 186
DREAMWEAVER CS3 179 User Guide You can also export table data from Dreamweaver into a text file, with the contents of Select Set to specify a fixed table width in pixels or as a percentage of the browser window's width. Border Specifies the width, in pixels, of the tables borders. Cell Padding The - Adobe 38040334 | User Guide - Page 187
DREAMWEAVER CS3 180 User Guide 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 then hold the Control key (Windows) or Command key (Macintosh), - Adobe 38040334 | User Guide - Page 188
DREAMWEAVER CS3 181 User Guide • Click in the cell and select Edit > Select All. Select can use the Property inspector to edit tables. 1 Select a table. 2 In the Property inspector (Window > Properties), click the expander arrow in the lower-right corner and change properties as necessary. Table Id - Adobe 38040334 | User Guide - Page 189
DREAMWEAVER CS3 182 User Guide If you don't explicitly assign values for the border, cell Bg Image The table's background image. If you entered a value in a text box, press Tab or Enter (Windows) or Return (Macintosh) to apply the value. Set cell, row, or column properties You can use the Property - Adobe 38040334 | User Guide - Page 190
DREAMWEAVER CS3 183 User Guide By default, a browser chooses a row height and column width to the format to the tr tag produces cleaner, more concise HTML code. 3 Press Tab or Enter (Windows) or Return (Macintosh) to apply the value. Use Expanded Tables mode for easier table editing Expanded Tables - Adobe 38040334 | User Guide - Page 191
DREAMWEAVER CS3 184 User Guide 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 - Adobe 38040334 | User Guide - Page 192
DREAMWEAVER CS3 185 User Guide window but does not change the specified widths and heights of the cells. You can resize a table by dragging one of its selection handles. Dreamweaver dragging the borders of the column or row. If you have trouble resizing, you can clear the column widths or row heights - Adobe 38040334 | User Guide - Page 193
DREAMWEAVER CS3 186 User Guide Change a column's width and maintain the size of the Table > Clear Cell Widths, or Modify > Table > Clear Cell Heights. • In the Property inspector, (Window > Properties), click the Clear Row Heights button Widths button . • Click the table header menu, then select - Adobe 38040334 | User Guide - Page 194
DREAMWEAVER CS3 187 User Guide Add and remove rows and columns To add and remove . Add or delete rows or columns using the Property inspector 1 Select the table. 2 In the Property inspector (Windows > Properties), do one of the following: • To add or delete rows, increase or decrease the Rows value - Adobe 38040334 | User Guide - Page 195
so the cells can be merged. DREAMWEAVER CS3 188 User Guide In the following illustration, the selection is not a rectangle, so the cells can't be merged. 2 Do one of the following: • Select Modify > Table > Merge Cells. • In the expanded Property inspector (Window > Properties), click Merge Cells - Adobe 38040334 | User Guide - Page 196
DREAMWEAVER CS3 189 User Guide Copy, paste, and delete cells You can copy, paste, and in the shape of a rectangle. In the following illustration, the selection is a rectangle of cells, so the cells can be cut or copied. In the following illustration, the selection is not a rectangle, so the cells - Adobe 38040334 | User Guide - Page 197
DREAMWEAVER CS3 190 User Guide If you are pasting entire rows or columns into an existing as if they were words (resulting in ordering such as 1, 10, 2, 20, 3, 30) rather than being sorted as numbers (resulting in ordering such as 1, 2, 3, 10, 20, 30). Then By/Order Determines the sorting order for - Adobe 38040334 | User Guide - Page 198
DREAMWEAVER CS3 191 User Guide Sort Footer Rows Specifies to sort all the rows in position elements. Tables were originally created for displaying tabular data, not for laying out web pages; Dreamweaver provides Layout mode to streamline the process of using tables for page layout. In Layout mode, - Adobe 38040334 | User Guide - Page 199
DREAMWEAVER CS3 192 User Guide You can lay out your page using several layout cells within one change based on the placement of cells, so you can use it to lay out your page. Dreamweaver automatically snaps the edges of new cells into alignment with nearby edges of existing cells. (Layout cells - Adobe 38040334 | User Guide - Page 200
DREAMWEAVER CS3 193 User Guide 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 . You can manually insert and remove - Adobe 38040334 | User Guide - Page 201
DREAMWEAVER CS3 194 User Guide 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 - Adobe 38040334 | User Guide - Page 202
DREAMWEAVER CS3 195 User Guide To draw more than one layout cell without having to repeatedly select the menu item, Control-drag (Windows) highlighting preferences for layout cells 1 Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh). 2 Select Highlighting from the category - Adobe 38040334 | User Guide - Page 203
DREAMWEAVER CS3 196 User Guide Draw a layout table around existing layout cells or tables 1 Make sure top of the table, and then click Clear Row Heights in the Property inspector (Window > Properties) . Dreamweaver clears all the heights specified in the table. Some of the table cells might shrink - Adobe 38040334 | User Guide - Page 204
DREAMWEAVER CS3 197 User Guide cell by clicking an edge of the cell or by Control-clicking (Windows) or Command-clicking (Macintosh) anywhere in the cell. 2 Drag time. Hold down Shift while pressing an arrow key to move the cell 10 pixels at a time. Resize a layout table 1 Select a table by - Adobe 38040334 | User Guide - Page 205
an arrow key to move the table 10 pixels at a time. DREAMWEAVER CS3 198 User Guide Format layout cells and tables You can set a new line. 3 If you entered a value in a text box, press Tab or Enter (Windows) or Return (Macintosh) to apply the value. Set layout table properties 1 Select a table by - Adobe 38040334 | User Guide - Page 206
DREAMWEAVER CS3 199 User Guide Make Widths Consistent Resets the width specified in width You can set a column to a specific width or make it stretch to fill as much of a browser window as possible (autostretch). You can also specify a minimum width for a column using a spacer image. The first time - Adobe 38040334 | User Guide - Page 207
DREAMWEAVER CS3 200 User Guide Set a column to a fixed width columns to prevent them from collapsing, or if you have already added spacer images manually. Remove a spacer image from a single column ❖ Click the column header menu in the Property inspector (Window > Properties) . September 4, 2007 - Adobe 38040334 | User Guide - Page 208
DREAMWEAVER CS3 201 User Guide Note: The layout of your table might shift. If there is Consistent. • Select the table and click Remove All Spacers in the Property inspector (Window > Properties) . Dreamweaver resets the width specified in the code to match the visual width. Set preferences for - Adobe 38040334 | User Guide - Page 209
DREAMWEAVER CS3 202 User Guide A frameset is an HTML file that defines the layout and document. Note: A "page" refers either to a single HTML document or to the entire contents of a browser window at a given moment, even if several HTML documents appear at once. The phrase "a page that uses frames," - Adobe 38040334 | User Guide - Page 210
DREAMWEAVER CS3 203 User Guide useful for a site. Not all browsers provide good frame support, and frames may be difficult for visitors with disabilities to own scroll bar (if the content is too large to fit in a window), so a visitor can scroll the frames independently. For example, a visitor - Adobe 38040334 | User Guide - Page 211
to open a frameset file inside a frame; doing this may result in problems with setting targets for links. It's generally simplest to keep all framesets defined in a single file. Work with framesets in the Document window Dreamweaver enables you to view and edit all of the documents associated with - Adobe 38040334 | User Guide - Page 212
DREAMWEAVER CS3 205 User Guide 2 Save every file that's going to appear in a frame. Remember a predefined frameset only in the Document window's Design view. You can also design your own frameset in Dreamweaver by adding "splitters" to the Document window. Before creating a frameset or working with - Adobe 38040334 | User Guide - Page 213
DREAMWEAVER CS3 206 User Guide 2 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 view, Alt-drag (Windows) or Option-drag (Macintosh - Adobe 38040334 | User Guide - Page 214
DREAMWEAVER CS3 207 User Guide 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 - Adobe 38040334 | User Guide - Page 215
DREAMWEAVER CS3 208 User Guide Note: It's generally easier to select framesets in the Frames panel than in the Document window. For more documents appearing in frames at once. Note: When you use visual tools in Dreamweaver to create a set of frames, each new document that appears in a frame - Adobe 38040334 | User Guide - Page 216
DREAMWEAVER CS3 209 User Guide This saves all open documents in the frameset, including the default to Auto, meaning that scroll bars appear only when there is not enough room in a browser window to display the full contents of the current frame. No Resize Prevents visitors from dragging the frame - Adobe 38040334 | User Guide - Page 217
DREAMWEAVER CS3 210 User Guide Border options are Yes (show borders), No (hide borders), the document in the frame in page properties. Set accessibility values for a frame 1 In the Frames panel (Window > Frames), select a frame by placing the insertion point in one of the frames. 2 Select Modify > - Adobe 38040334 | User Guide - Page 218
the Document toolbar, type a name for the frameset document. DREAMWEAVER CS3 211 User Guide When a visitor views the frameset in a browser, the Document window's Design view. • Click the border that surrounds a frameset in the Frames panel (Window > Frames). 2 In the Property inspector (Window > - Adobe 38040334 | User Guide - Page 219
DREAMWEAVER CS3 212 User Guide a document within a frameset. When you edit a document in its own Document window, frame names do not appear in the Target pop-up menu. If you're content for browsers without frame support Dreamweaver lets you specify content to display in text-based browsers and - Adobe 38040334 | User Guide - Page 220
DREAMWEAVER CS3 213 User Guide • Select Window > Code Inspector, place the insertion point between the to dynamically display information in a frame. Go To URL Opens a new page in the current window or in the specified frame. This action is particularly useful for changing the contents of two or - Adobe 38040334 | User Guide - Page 221
Flash Video, sound, and other media objects to your web pages, as well as set page properties. Working with pages About working with pages Adobe® Dreamweaver® CS3 your web page, and what languages you may need to support. With Dreamweaver, you can select colors that are displayed correctly in - Adobe 38040334 | User Guide - Page 222
DREAMWEAVER CS3 215 User Guide Converting active content 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 38040334 | User Guide - Page 223
DREAMWEAVER CS3 216 User Guide Converting custom content Dreamweaver only converts param and embed tags that are contained within the 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 - Adobe 38040334 | User Guide - Page 224
DREAMWEAVER CS3 217 User Guide If you use both a background image and a background color, the color appears while the image downloads, and then the common form used in the Character Model for the World Wide Web. Adobe provides the other three Unicode Normalization Forms for completeness. In Unicode, - Adobe 38040334 | User Guide - Page 225
CS3 218 User Guide Background Image Sets a background image. Click the Browse button, then browse to and select the image. Alternatively, enter the path to the background image in the Background Image box. Dreamweaver tiles (repeats) the background image if it does not fill the entire window - Adobe 38040334 | User Guide - Page 226
DREAMWEAVER CS3 219 User Guide Set title and encoding page properties You can define the default font, options. Title Specifies the page title that appears in the title bar of the Document window and most browser windows. Document Type (DTD) Specifies a document type definition. For example, you can - Adobe 38040334 | User Guide - Page 227
DREAMWEAVER CS3 220 User Guide 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 - Adobe 38040334 | User Guide - Page 228
DREAMWEAVER CS3 221 User Guide Note: A check mark next to the name of the element in the If CSS styles are placed in the head section of a document, they do not appear in the Document window. Hidden Form Fields Displays an icon that marks the location of form fields that have the type attribute set - Adobe 38040334 | User Guide - Page 229
DREAMWEAVER CS3 222 User Guide Set the HTML Appearance page properties The HTML websafe color is one that appears the same in Netscape Navigator and Microsoft Internet Explorer on both Windows and Macintosh systems when running in 256-color mode. The conventional wisdom is that there are 216 - Adobe 38040334 | User Guide - Page 230
DREAMWEAVER CS3 223 User Guide 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 - Adobe 38040334 | User Guide - Page 231
DREAMWEAVER CS3 224 User Guide • 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). 3 To zoom out (reduce magnification), select the Zoom tool, press Alt (Windows) or Option (Macintosh) and click - Adobe 38040334 | User Guide - Page 232
DREAMWEAVER CS3 225 User Guide 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. - Adobe 38040334 | User Guide - Page 233
DREAMWEAVER CS3 226 User Guide Save a document 1 Do one of the following: • To overwrite the current Microsoft Office documents. Add text to a document To add text to a Dreamweaver document, you can type text directly in the Document window, or you can cut and paste text. You can also import text - Adobe 38040334 | User Guide - Page 234
DREAMWEAVER CS3 227 User Guide 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 - Adobe 38040334 | User Guide - Page 235
DREAMWEAVER CS3 228 User Guide • 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 1 Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh). 2 In the General category make sure - Adobe 38040334 | User Guide - Page 236
DREAMWEAVER CS3 229 User Guide 2 With the insertion point in the list item's text, select Text a numbered list. 4 Click OK to set the choices. Set list properties for a list item 1 In the Document window, place the insertion point in the text of a list item you want to affect 2 Select Text > List > - Adobe 38040334 | User Guide - Page 237
DREAMWEAVER CS3 230 User Guide Entire Current Local Site Expands the search to all the HTML such as all td tags with valign set to top. Note: Pressing Control+Enter or Shift+Enter (Windows), or Control+Return, Shift+Return, or Command+Return (Macintosh), adds line breaks within the text search - Adobe 38040334 | User Guide - Page 238
DREAMWEAVER CS3 231 User Guide 8 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 1 Select Window > Results to display the Search panel. 2 Double-click a line - Adobe 38040334 | User Guide - Page 239
DREAMWEAVER CS3 232 User Guide 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 - Adobe 38040334 | User Guide - 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 - Adobe 38040334 | User Guide - Page 241
DREAMWEAVER CS3 234 User Guide Import tabular data You can import tabular data edit existing documents" on page 75 "Import and export tabular data" on page 178 Import Microsoft Office documents (Windows only) You can insert the full contents of a Microsoft Word or Excel document in a new or existing - Adobe 38040334 | User Guide - Page 242
DREAMWEAVER CS3 235 User Guide Clean Up Word Paragraph Spacing Eliminates extra space between having to resort to image maps, font tags, tables, and spacer GIFs-allows for faster downloads, streamlined site maintenance, and a central point from which to control design attributes across multiple web - Adobe 38040334 | User Guide - Page 243
DREAMWEAVER CS3 236 User Guide You can store styles created with CSS directly in the document ( you make to the style sheet. To access all CSS rules for a page, use the CSS Styles panel (Window > CSS Styles). Note: You can combine CSS and HTML 3.2 formatting within the same page. Formatting is - Adobe 38040334 | User Guide - Page 244
DREAMWEAVER CS3 237 User Guide adobe.com/go/vid0147. See also "Creating and managing CSS" on page 124 "Create a new CSS rule" on page 129 "Set General preferences for Dreamweaver inspector 1 Open the Property inspector (Window > Properties), if it isn't already open. 2 Select the text you want - Adobe 38040334 | User Guide - Page 245
DREAMWEAVER CS3 238 User Guide 3 Set the CSS options you want to apply to the General category of the Preferences dialog box. Set HTML formatting in the Property inspector 1 Open the Property inspector (Window > Properties), if it isn't already open. 2 Select the text you want to format. 3 Set - Adobe 38040334 | User Guide - Page 246
DREAMWEAVER CS3 239 User Guide • _top loads the linked file in the full browser window, thereby removing all frames. Unordered creates a nested list and removing the indentation unnests the list. Format paragraphs Dreamweaver supports all of the web standards used in page- and object-formatting. Use - Adobe 38040334 | User Guide - Page 247
DREAMWEAVER CS3 240 User Guide Change the color of selected text ❖ Select the text and do one further from both sides of the document. Add paragraph spacing Dreamweaver works similarly to many word processing application: you press Enter (Windows) or Return (Macintosh) to create a new paragraph. Web - Adobe 38040334 | User Guide - Page 248
DREAMWEAVER CS3 241 User Guide Add a line break ❖ Do one of the following: • Press Shift+Enter (Windows) or Shift+Return (Macintosh). • . Note: When you use the Property inspector to apply bold or italic style, Dreamweaver applies the or tag, respectively. If you are designing pages - Adobe 38040334 | User Guide - Page 249
DREAMWEAVER CS3 242 User Guide One way to ensure consistency with font size is to it to the combination. Adding a font not installed on your system is useful, for example, for specifying a Windows-only font when you are developing pages on a Macintosh. • To move the font combination up or down in - Adobe 38040334 | User Guide - Page 250
DREAMWEAVER CS3 243 User Guide Add a new combination to the are examples only of the way you want to display this information. 1 In the Document window, place the insertion point where you want the date to be inserted. 2 Do one best supported and can be viewed by most browsers. September 4, 2007 - Adobe 38040334 | User Guide - Page 251
DREAMWEAVER CS3 244 User Guide PNG files are best suited for almost any type of web graphic due to their flexibility and small file size; however, the display of PNG images is only partially supported in Microsoft Internet Explorer (4.0 and later browsers) and Netscape Navigator (4.04 and later - Adobe 38040334 | User Guide - Page 252
depending on your needs. The screen reader reads the Alt attribute for the image. Note: If you click Cancel, the image appears in the document, but Dreamweaver does not associate accessibility tags or attributes with it. 6 In the Property inspector (Window > Properties), set properties for the image - Adobe 38040334 | User Guide - Page 253
DREAMWEAVER CS3 246 User Guide 3 Set any of the image options. W and H The width and height of the image, in pixels. Dreamweaver that have been set to download images manually. For visually impaired users who an image. Target Specifies the frame or window in which the linked page should load. - Adobe 38040334 | User Guide - Page 254
DREAMWEAVER CS3 247 User Guide Edit image accessibility attributes in code If you inserted accessibility attributes for an image, you can edit those values in the HTML code. 1 In the Document window file size and improves download performance. When you resize an image in Dreamweaver, you can resample - Adobe 38040334 | User Guide - Page 255
DREAMWEAVER CS3 248 User Guide 4 For Width and Height (Required), type a number for an image placeholder, select the placeholder in the Document window; then select Window > Properties to display the Property inspector. To see all properties on your site, or manually type the URL. September 4, 2007 - Adobe 38040334 | User Guide - Page 256
DREAMWEAVER CS3 249 User Guide Alt 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 can edit the image, then replace it in Dreamweaver. 1 In the Document window, do one of the following: • Double-click - Adobe 38040334 | User Guide - Page 257
DREAMWEAVER CS3 250 User Guide or Flash files, applets, and ActiveX controls in Dreamweaver. Visually improves download performance. See also "Edit images in Dreamweaver" on page 247 Visually resize an element 1 Select the element (for example, an image or SWF file) in the Document window - Adobe 38040334 | User Guide - Page 258
DREAMWEAVER CS3 251 User Guide Revert an image to its original size ❖ Click the Reset 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. Note: When you crop an image, the source - Adobe 38040334 | User Guide - Page 259
DREAMWEAVER CS3 252 User Guide • of sharpening Dreamweaver applies to the image by dragging the slider control, or entering a value between 0 and 10 in the text For a tutorial on creating rollovers, see www.adobe.com/go/vid0159. 1 In the Document window, place the insertion point where you want the - Adobe 38040334 | User Guide - Page 260
DREAMWEAVER CS3 253 User Guide you want to edit a JPG or JPEG. See also "Working with Photoshop" on page 374 "Working with Fireworks" on page 367 "Start an : • Double-click the image you want to edit. • Right-click (Windows) or Control-click (Macintosh) the image you want to edit, then select - Adobe 38040334 | User Guide - Page 261
DREAMWEAVER CS3 254 User Guide Set an external image editor for an existing file type You can select an image editor for opening and editing graphic files. 1 Open the File Types/Editors Preferences dialog box by doing one of the following: • Select Edit > Preferences (Windows) or Dreamweaver > - Adobe 38040334 | User Guide - Page 262
files can be found in the Dreamweaver/Configuration/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 - Adobe 38040334 | User Guide - Page 263
, see www.adobe.com/go/vid0150. See also "Working with Flash" on page 382 "Edit a SWF file from Dreamweaver in Flash" on page 382 "Insert Shockwave movies" on page 273 "Adding Flash Video content" on page 264 Insert a SWF file (Flash content) 1 In the Design view of the Document window, place the - Adobe 38040334 | User Guide - Page 264
DREAMWEAVER CS3 257 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 object and embed tags. (The object tag is defined by Microsoft for ActiveX controls; - Adobe 38040334 | User Guide - Page 265
DREAMWEAVER CS3 258 User Guide 2 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. 3 Complete the Insert Flash Button dialog box, and click Apply or - Adobe 38040334 | User Guide - Page 266
DREAMWEAVER CS3 259 User Guide appearance, whereas High favors appearance over speed. Auto Low emphasizes on the page. Bg Specifies a background color for the object. Play/Stop Previews the Flash object in the Document window. Click the green Play button to see the object in Play mode; click the red - Adobe 38040334 | User Guide - Page 267
DREAMWEAVER CS3 260 User Guide 9 In the Save As box, enter a filename to save the new SWF document-relative links. 10 Click Get More Styles to go the Adobe Exchange site and download more button styles. 11 Click Apply or OK to insert the Flash button in the Document window. Select Apply to see - Adobe 38040334 | User Guide - Page 268
DREAMWEAVER CS3 261 User Guide 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 inspector (Window > Tag inspector). 3 Edit the Flash element - Adobe 38040334 | User Guide - Page 269
DREAMWEAVER CS3 262 User Guide Windows) or Return (Macintosh), or click elsewhere in the Tag inspector, to update the tag in your document. See also "Defining sources of dynamic content" on page 547 Use the Image Viewer Flash element Adobe Dreamweaver CS3 contains a Flash must have Flash® Player 7 or - Adobe 38040334 | User Guide - Page 270
DREAMWEAVER CS3 263 User Guide progressive JPEG or SWF files can be used. Specifies the browser window in which to load the URLs specified in linkURLs. This Indicates whether the Image Viewer controls appear when the user plays the Flash Element. Determines whether to play the images in a slide show. - Adobe 38040334 | User Guide - Page 271
DREAMWEAVER CS3 264 User Guide more information on FlashPaper, see the Adobe website at www.adobe.com/go/flashpaper. 1 In the Document window, place the insertion point where you in the page. Because a FlashPaper document is a Flash object, a Flash placeholder appears on the page. 5 To preview the - Adobe 38040334 | User Guide - Page 272
in Dreamweaver. You can insert video files created with two kinds of codecs (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 - Adobe 38040334 | User Guide - Page 273
DREAMWEAVER CS3 266 User Guide 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. 1 Select Insert > Media > Flash Video (or click the Flash Video icon in the Common - Adobe 38040334 | User Guide - Page 274
DREAMWEAVER CS3 267 User Guide 2 Select Streaming Video from the Video Type pop-up menu. connectivity problems. For example, if you want to send 15 seconds of video to the web page before the web page starts to play the video, set the buffer time to 15. Prompt Users to Download Flash Player if - Adobe 38040334 | User Guide - Page 275
that detects the Flash Player version ❖ Select Commands > Remove Flash Video Detection. Edit or delete a Flash Video component To change the settings for the Flash Video content in your web page, you must either select the Flash Video component placeholder in the Dreamweaver Document window and use - Adobe 38040334 | User Guide - Page 276
DREAMWEAVER CS3 269 User Guide Delete the Flash Video component ❖ Select the Flash Video component placeholder in the Dreamweaver Document window have good sound quality, are supported by many browsers, and download and install a helper application or plug-in, such as QuickTime, Windows Media Player - Adobe 38040334 | User Guide - Page 277
DREAMWEAVER CS3 270 User Guide the volume, the way the player looks on the page, or plug-in placeholder in the Document window. These values determine the size Flash SWF files or objects, QuickTime or Shockwave movies, Java applets, ActiveX controls, or other audio or video objects in a Dreamweaver - Adobe 38040334 | User Guide - Page 278
DREAMWEAVER CS3 271 User Guide > Media > Shockwave.) 3 Complete the Select File or Insert Flash dialog box, and click OK. Note: The Accessibility Attributes dialog browser. This lets a visitor to the site use the Control key (Windows) with the Access Key to access the object. For example, if you - Adobe 38040334 | User Guide - Page 279
DREAMWEAVER CS3 272 User Guide To find out what editor is associated with the file type, select Edit > Preferences in Dreamweaver and select File Types/Editors from the Category list. Click the file's extension in the Extensions column to view the associated editor or editors in - Adobe 38040334 | User Guide - Page 280
DREAMWEAVER CS3 273 User Guide Use Design Notes with media objects As with other objects in Dreamweaver, you can add Design Notes created in Macromedia® Director® from Adobe to be downloaded quickly and played by most popular browsers. 1 In the Document window, place the insertion point where you - Adobe 38040334 | User Guide - Page 281
DREAMWEAVER CS3 274 User Guide Note: The user must download a helper application (a plug-in) to view common streaming formats like Real Media, QuickTime, and Windows plug-in. Many plug-ins respond to special parameters. The Flash plug-in, for example, includes parameters for bgcolor, salign, and - Adobe 38040334 | User Guide - Page 282
DREAMWEAVER CS3 275 User Guide Play plug-in content in the Document window 1 Insert one or more media elements by selecting Insert > Media > Shockwave, Insert > Media > Flash . Troubleshooting Netscape Navigator plug-ins If you have followed the steps to play plug-in content in the Document window, - Adobe 38040334 | User Guide - Page 283
DREAMWEAVER CS3 276 User Guide URL containing the ActiveX control. Internet Explorer downloads the ActiveX control from this location if it displayed if the browser doesn't support the object tag. This option select a Java applet. 1 In the Document window, place the insertion point where you want to - Adobe 38040334 | User Guide - Page 284
DREAMWEAVER CS3 277 User Guide doesn't support Java applets or has Java disabled. If you enter text, Dreamweaver inserts the textbased browser), select an image and then manually add an alt attribute to the img tag See also "Apply the Control Shockwave Or Flash behavior" on page 352 "Apply the - Adobe 38040334 | User Guide - Page 285
DREAMWEAVER CS3 278 User Guide Note: There is no widely accepted standard for identifying Navigator plug-in, or a Java applet) in the Document window. 2 Open the dialog box using one of the following methods: • Right-click (Windows) or Control-click (Macintosh) the object, and select Parameters - Adobe 38040334 | User Guide - Page 286
of link paths: • Absolute paths (such as http://www.adobe.com/support/dreamweaver/contents.html). • Document-relative paths (such as dreamweaver/contents.html). • Site root-relative paths (such as /support/dreamweaver/contents.html). Using Dreamweaver, you can easily select the type of document path - Adobe 38040334 | User Guide - Page 287
DREAMWEAVER CS3 280 User Guide 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 - Adobe 38040334 | User Guide - Page 288
DREAMWEAVER CS3 281 User Guide site. For example, /support/tips.html is a site root-relative path to a file (tips.html) in the support subfolder of the site's link to another document or to a file, such as a graphic, movie, PDF, or sound file. • A named anchor link, which jumps to a specific - Adobe 38040334 | User Guide - Page 289
DREAMWEAVER CS3 282 User Guide Dreamweaver creates the links to other pages in your site using document-relative paths. You can also tell Dreamweaver Dreamweaver converts the file:// path to a relative path. For a tutorial on creating links, see www.adobe left of the browser window. For example, you - Adobe 38040334 | User Guide - Page 290
DREAMWEAVER CS3 283 User Guide 3 From the Target pop-up menu, select a location in which to open the document: • _blank loads the linked document in a new, unnamed browser window. • _parent loads the linked document in the parent frame or parent window of the frame that contains the link. If the - Adobe 38040334 | User Guide - Page 291
DREAMWEAVER CS3 284 User Guide • Select an HTML page in the site map, and then select the pop-up list. If you specify a frame that doesn't exist, the linked page opens in a new window that has the name you specified. You can also select from the following reserved target names: • _blank loads the - Adobe 38040334 | User Guide - Page 292
DREAMWEAVER CS3 285 User Guide Note: Content linked with a site root-relative path does not anchor. 2 Do one of the following: • Select Insert > Named Anchor. • Press Control+Alt+A (Windows) or Command+Option+A (Macintosh). • In the Common category of the Insert bar, click the Named Anchor button - Adobe 38040334 | User Guide - Page 293
DREAMWEAVER CS3 286 User Guide 2 In the Link box of the Property inspector, type a number click OK. Create an e-mail link using the Property inspector 1 Select text or an image in the Document window's Design view. 2 In the Link box of the Property inspector, type mailto: followed by an e-mail - Adobe 38040334 | User Guide - Page 294
DREAMWEAVER CS3 287 User Guide Create null and script links A null link is an in the Link box. Create a script link 1 Select text, an image, or an object in the Document window's Design view. 2 In the Link box of the Property inspector, type javascript: followed by some JavaScript code or - Adobe 38040334 | User Guide - Page 295
DREAMWEAVER CS3 288 User Guide 2 Select a site, and then click Edit. 3 Click the Advanced type its URL. 3 Click OK. Remove a link 1 Select the page in the site map. 2 Right-click (Windows) or Control-click (Macintosh), and select Remove Link from the context menu. Removing a link does not delete the - Adobe 38040334 | User Guide - Page 296
DREAMWEAVER CS3 289 User Guide 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 - Adobe 38040334 | User Guide - Page 297
DREAMWEAVER CS3 290 User Guide prompt, such as a category description for the menu items, or instructions, such as "Choose one". • (Required) A list of linked menu 1 Open a document, and then place the insertion point in the Document window. 2 Do one of the following: • Select Insert > Form > Jump - Adobe 38040334 | User Guide - Page 298
DREAMWEAVER CS3 291 User Guide Edit jump menu items You can change the order box specifies a frame. There are two ways to work around this problem: • Use a menu selection prompt, such as a category, or a user instruction, such as "Choose one". The menu selection prompt is reselected automatically - Adobe 38040334 | User Guide - Page 299
DREAMWEAVER CS3 292 User Guide change which file opens when an element is clicked, to select a different window or frame in which to open a file, and to reorder the images in text-only browsers or in browsers that download images manually. Screen readers read alternate text, and some browsers display - Adobe 38040334 | User Guide - Page 300
DREAMWEAVER CS3 293 User Guide the page is first downloaded supported by Netscape Navigator 2.0 and later versions, NCSA Mosaic 2.1 and 3.0, and all versions of Internet Explorer. Dreamweaver part of the same image map. 1 In the Document window, select the image. 2 In the Property inspector, click - Adobe 38040334 | User Guide - Page 301
DREAMWEAVER CS3 294 User Guide , the linked page loads into a new window that has the name you specified. You only browsers or browsers that download images manually. Some browsers display this text keys to move a hotspot by 10 pixels in the selected direction. • Use the arrow keys - Adobe 38040334 | User Guide - Page 302
DREAMWEAVER CS3 295 User Guide Resize a hotspot 1 Use the pointer hotspot tool to select the hotspot. 2 Drag a hotspot selector handle to change the size or shape of the hotspot. Troubleshooting by doing one of the following: • Right-click (Windows) or Control-click (Macintosh) one of the selected - Adobe 38040334 | User Guide - Page 303
DREAMWEAVER CS3 296 User Guide You can check for orphaned files when you check links across an and browse to the correct file, or type the correct path and filename. 4 Press Tab or Enter (Windows) or Return (Macintosh). If there are other broken references to this same file, you are prompted to - Adobe 38040334 | User Guide - Page 304
DREAMWEAVER CS3 297 User Guide If you are updating an image reference and the new image appears at the incorrect size, or filename in the Link Checker (or after you save changes in the Property inspector), Dreamweaver cannot find the new file and still considers the link broken. September 4, 2007 - Adobe 38040334 | User Guide - Page 305
or Dreamweaver > Preferences (Macintosh), and then select the Preview In Browser category on the left to select a browser. • Press F12 (Windows) or content in your page. If you use Internet Explorer on a Windows XP computer with Service Pack 2 installed, the browser may display a message that tells - Adobe 38040334 | User Guide - Page 306
DREAMWEAVER CS3 299 User Guide Preview active content in Internet Explorer (Windows) If you preview a document that contains active content in Internet Explorer after installing the Windows XP Service Pack 2 update, the browser does not show active content. You can fix this problem by inserting Mark - Adobe 38040334 | User Guide - Page 307
DREAMWEAVER CS3 300 User Guide 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 - Adobe 38040334 | User Guide - Page 308
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® Dreamweaver® CS3 provides various features, such as code hints, to help you code in the following languages - Adobe 38040334 | User Guide - Page 309
DREAMWEAVER CS3 302 User Guide 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 - Adobe 38040334 | User Guide - Page 310
code that it generates, and when cleaning up XHTML. Note: If an HTML browser does not support HTML 4, it might fail to interpret these Boolean attributes when they appear in their full form. the code that it generates, and when cleaning up XHTML. DREAMWEAVER CS3 303 User Guide September 4, 2007 - Adobe 38040334 | User Guide - Page 311
DREAMWEAVER CS3 304 User Guide XHTML requirement Actions Dreamweaver performs The following elements must have an id attribute as whenever the name attribute is set by a Property inspector, in the code that Dreamweaver generates, and when cleaning up XHTML. Introduction or - Adobe 38040334 | User Guide - Page 312
, including space, "notebook" tab, form feed, or line feed. Any single non-whitespace character. \Sbook matches "book" in "notebook" but nothing in "blue book" A tab. DREAMWEAVER CS3 305 User Guide September 4, 2007 - Adobe 38040334 | User Guide - Page 313
DREAMWEAVER CS3 306 User Guide Character Matches Make sure or Shift+Enter that you deselect the (Windows), or Ignore Whitespace Differ- Control+ ences option when panel, Dreamweaver inserts one or more code blocks into your page to make the server behavior work. If you manually change the - Adobe 38040334 | User Guide - Page 314
DREAMWEAVER CS3 307 User Guide Setting up your coding environment Changing your coding environment You can adapt the coding environment in Dreamweaver to view, you must manually update the document in Design view by clicking in Design view or pressing F5. View code in a separate window with the Code - Adobe 38040334 | User Guide - Page 315
DREAMWEAVER CS3 308 User Guide To use the Coding toolbar along the left side of the window, see "Insert code with the Coding toolbar" on page 316. Using the coder-oriented workspace (Windows only) In Windows add them to Dreamweaver using the Keyboard Shortcut Editor. For instructions, see "Customize - Adobe 38040334 | User Guide - Page 316
DREAMWEAVER CS3 309 User Guide 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 - Adobe 38040334 | User Guide - Page 317
CR LF (Windows) if Notepad is your external editor, and use CR (Macintosh) if SimpleText is your external editor. Note: For servers that you connect to using FTP, this option applies only to binary transfer mode; the ASCII transfer mode in Dreamweaver ignores this option. If you download files using - Adobe 38040334 | User Guide - Page 318
DREAMWEAVER CS3 311 User Guide you select this option, Dreamweaver does not write line breaks after a or -markup items are displayed in the Document window for HTML that it would have rewritten. 1 Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh). 2 Select Code - Adobe 38040334 | User Guide - Page 319
DREAMWEAVER CS3 312 User Guide that Dreamweaver attempted to correct. The summary notes the location of the problem (using default, Dreamweaver only uses browsersafe scripts for Flash and Shockwave editor. 1 Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh). 2 Select Code - Adobe 38040334 | User Guide - Page 320
DREAMWEAVER CS3 313 User Guide 4 Select a document type, and click Edit Coloring Scheme. 5 Select an example, you can start a text editor such as BBEdit, Notepad, or TextEdit from Dreamweaver to edit JavaScript (JS) files. You can assign different external editors for different filename extensions - Adobe 38040334 | User Guide - Page 321
DREAMWEAVER CS3 314 User Guide Code hints are available for a variety of kinds of code. An Arrow keys. 3 To insert an item from the list, double-click it, or select it and press Enter (Windows) or Return (Macintosh). If a recently created CSS style doesn't appear in a code hints list of CSS styles, - Adobe 38040334 | User Guide - Page 322
DREAMWEAVER CS3 315 User Guide See also "Setting up a web application" on page 501 insert after the current selection. To set default spacing for the blocks, use line breaks; press Enter (Windows) or Return (Macintosh) inside the text boxes. Note: Because snippets can be created as start and end - Adobe 38040334 | User Guide - Page 323
DREAMWEAVER CS3 316 User Guide Create code snippet folders and manage code snippets 1 In the Documents Lists the documents that are open. When you select one, it is displayed in the Document window. Collapse Full Tag Collapses the content between a set of opening and closing tags (for example, - Adobe 38040334 | User Guide - Page 324
DREAMWEAVER CS3 317 User Guide Select Parent Tag Selects the content and surrounding opening and closing tags of the line in which you've placed the insertion point. If you repeatedly click this button, and your tags are balanced, Dreamweaver eventually selects the outermost html and /html tags. - Adobe 38040334 | User Guide - Page 325
DREAMWEAVER CS3 318 User Guide See also "Verify tags and braces are balanced" on page 327 point in the code, right-click (Windows) or Control-click (Macintosh), and select Insert Tag. The Tag Chooser appears. The left pane contains a list of supported tag libraries, and the right pane shows - Adobe 38040334 | User Guide - Page 326
DREAMWEAVER CS3 319 User Guide 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. 1 Right-click (Windows) or Control-click (Macintosh) a tag in Code view or an object in Design view, and select Edit Tag - Adobe 38040334 | User Guide - Page 327
DREAMWEAVER CS3 320 User Guide Display comment markers in Design view ❖ Select View > Visual select the Comment marker, edit the comment's text in the Property inspector, and then click in the Document window. Go to a JavaScript or VBScript function In Code view and the Code inspector, you can view a - Adobe 38040334 | User Guide - Page 328
DREAMWEAVER CS3 321 User Guide See also "About regular expressions" on page 304 "Search for to initiate the search. Change code selections 1 In Code view, select some code and right-click (Windows) or Control-click (Macintosh). 2 Select the Selection submenu, and select any of the following options - Adobe 38040334 | User Guide - Page 329
DREAMWEAVER CS3 322 User Guide Apply /* */ Comment Wraps the selected CSS or JavaScript code with NET, JSP, PHP, or ColdFusion file and you select the Apply Server Comment option, Dreamweaver automatically detects the correct comment tag and applies it to your selection. Apply Backslash-comment Hack - Adobe 38040334 | User Guide - Page 330
DREAMWEAVER CS3 323 User Guide Use language-reference material The Reference panel provides you documents. Open the Reference panel 1 Do one of the following in Code view: • Right-click (Windows) or Control-click (Macintosh) a tag, attribute, or keyword, and then select Reference from the context - Adobe 38040334 | User Guide - Page 331
DREAMWEAVER CS3 324 User Guide Collapsing code About collapsing code You can collapse and expand select code, a set of collapse buttons is displayed next to the selection (Minus symbols in Windows; vertical triangles on the Macintosh). Click the buttons to collapse and expand the selection. When the - Adobe 38040334 | User Guide - Page 332
DREAMWEAVER CS3 325 User Guide Note: When you make a selection in Design view that is part of a Collapse Outside Selection Expand Selection Collapse Full Tag Collapse Outside Full Tag Expand All Windows Control+Shift+C Control+Alt+C Control+Shift+E Control+Shift+J Control+Alt+J Control+Alt - Adobe 38040334 | User Guide - Page 333
DREAMWEAVER CS3 326 User Guide 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 - Adobe 38040334 | User Guide - Page 334
DREAMWEAVER CS3 327 User Guide Note: Depending on the size of your document and the your code. If you keep selecting Edit > Select Parent Tag, and your tags are balanced, eventually Dreamweaver will select the outermost html and /html tags. Check for balanced parentheses, braces, or square brackets - Adobe 38040334 | User Guide - Page 335
DREAMWEAVER CS3 328 User Guide 3 Select Edit > Balance Braces. All of the code between the , such as specifying the tag-based languages against which the Validator should check, the specific problems that the Validator should check for, and the types of errors that the Validator should report - Adobe 38040334 | User Guide - Page 336
DREAMWEAVER CS3 329 User Guide 3 Select one of the XHTML document type definitions (DTD) Windows only) If you're a ColdFusion developer using ColdFusion as your Dreamweaver testing server, you can view ColdFusion debugging information without leaving Dreamweaver. Note: This feature is not supported - Adobe 38040334 | User Guide - Page 337
DREAMWEAVER CS3 330 User Guide icon again. Dreamweaver renders the page in the internal browser again and updates the Server Debug panel. If there are no more problems with the to edit the code for greater control or to troubleshoot your web page. Dreamweaver lets you edit some code while working in - Adobe 38040334 | User Guide - Page 338
DREAMWEAVER CS3 331 User Guide Edit code with the Property inspector You can use similar to the ones found in other integrated development environments (IDEs). 1 Do one of the following in the Document window: • In Code view (or the Code inspector), click anywhere in a tag's name or in its contents. - Adobe 38040334 | User Guide - Page 339
DREAMWEAVER CS3 332 User Guide • 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 - Adobe 38040334 | User Guide - Page 340
DREAMWEAVER CS3 333 User Guide See also "Write and edit scripts in Design view" on page 335 Insert an HTML tag 1 In Design view, click in the page to place the insertion point where you want to insert code. 2 Press Control+T (Windows) or Command+T (Macintosh). The Quick Tag Editor opens in Insert - Adobe 38040334 | User Guide - Page 341
DREAMWEAVER CS3 334 User Guide Use the hints menu in the Quick Tag Editor The Quick remove tags without leaving Design view. The tag selector is located in the status bar at the bottom of the Document window and shows a series of tags, as follows: Edit or delete a tag 1 Click in the document. The - Adobe 38040334 | User Guide - Page 342
DREAMWEAVER CS3 335 User Guide HTML code into the No Script box. Browsers that don't support the chosen scripting language display this code instead of running the script . 4 Select the script marker in Design view of the Document window. 5 In the Property inspector, click the folder icon and browse - Adobe 38040334 | User Guide - Page 343
DREAMWEAVER CS3 336 User Guide 2 In the Property inspector, click the Edit button. The script by using the Behaviors tab of the Tag inspector. For more information, see "Applying built-in Dreamweaver behaviors" on page 350. Working with head content for pages Pages contain elements that describe the - Adobe 38040334 | User Guide - Page 344
DREAMWEAVER CS3 337 User Guide View and edit head content You can view the elements in the head section of a document by using the View menu, the Document window's Code view, or the Code inspector. View elements in the head section of a document ❖ Select View > Head Content. For each element of the - Adobe 38040334 | User Guide - Page 345
DREAMWEAVER CS3 338 User Guide 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 - Adobe 38040334 | User Guide - Page 346
DREAMWEAVER CS3 339 User Guide 3 In the Property inspector, view, modify, or delete the descriptive to browse to and select a file, or type a path in the box. Target Specifies the frame or window in which all linked documents should open. Select one of the frames in the current frameset, or one of - Adobe 38040334 | User Guide - Page 347
DREAMWEAVER CS3 340 User Guide • _parent loads the linked document into the parent frameset or window of the frame that contains the link. If the frame containing the link is not nested, then this is equivalent to _top; the linked document loads into the full browser window. • _self loads the linked - Adobe 38040334 | User Guide - Page 348
DREAMWEAVER CS3 341 User Guide 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 - Adobe 38040334 | User Guide - Page 349
DREAMWEAVER CS3 342 User Guide Insert server-side includes You can use Dreamweaver to insert server-side includes in your which file is included 1 Select the server-side include in the Document window. 2 Open the Property inspector (Window > Properties). 3 Do one of the following: • Click the folder - Adobe 38040334 | User Guide - Page 350
DREAMWEAVER CS3 343 User Guide 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 - Adobe 38040334 | User Guide - Page 351
DREAMWEAVER CS3 344 User Guide Add attributes to a tag 1 In the Tag Library editor (Edit > you select Mixed Case, the Tag Name Mixed Case dialog box appears. Type the tag with the case Dreamweaver should use when inserting it (for example, getProperty) and click OK. Set Default Sets the default case - Adobe 38040334 | User Guide - Page 352
DREAMWEAVER CS3 345 User Guide Edit an attribute for a tag 1 In the Tag Library editor (Edit > Tag Mixed Case, the Attribute Name Mixed Case dialog box appears. Type the attribute with the case Dreamweaver should use when inserting it (for example, onClick), and click OK. Click the Set Default link - Adobe 38040334 | User Guide - Page 353
DREAMWEAVER CS3 346 User Guide Import custom ASP.NET tags You can import custom ASP.NET tags into Dreamweaver. Before you JRun tags If you use Macromedia® JRun™ from Adobe, you can import your JRun tags into Dreamweaver. 1 Open a JSP page in Dreamweaver. 2 Open the Tag Library editor (Edit > Tag - Adobe 38040334 | User Guide - Page 354
know JavaScript. Using JavaScript behaviors About JavaScript behaviors Adobe® Dreamweaver® CS3 behaviors place JavaScript code in documents so that visitors browser window, showing or hiding an AP element, playing a sound, or stopping an Adobe Shockwave movie. The actions provided with Dreamweaver - Adobe 38040334 | User Guide - Page 355
DREAMWEAVER CS3 348 User Guide use the tag selector at the lower-left corner of the Document window.) Also make sure that you selected the correct browser or browsers in provided by each browser, see the Dreamweaver Support Center at www.adobe.com/go/dreamweaver_support. Different events appear in - Adobe 38040334 | User Guide - Page 356
dimmed if the document contains no Shockwave or Flash SWF files. When you select an action, a dialog box appears, displaying parameters and instructions for the action. 4 Enter parameters for the action, and click OK. All actions provided in Dreamweaver work in modern browsers. Some actions do not - Adobe 38040334 | User Guide - Page 357
DREAMWEAVER CS3 350 User Guide • To change the order of actions for a given event, select them page by page. Download and install third-party behaviors Many extensions are available on the Exchange for Dreamweaver website (www.adobe.com/go/dreamweaver_exchange). 1 Choose Window > Behaviors and select - Adobe 38040334 | User Guide - Page 358
DREAMWEAVER CS3 351 User Guide 2 Type the exact JavaScript to be executed, or type the name of a function. For browsers other than Netscape Navigator and Internet Explorer because most do not support JavaScript-and if they cannot read this behavior, they will stay on the page anyway. September 4, - Adobe 38040334 | User Guide - Page 359
DREAMWEAVER CS3 352 User Guide 7 Enter the paths and filenames of the URL and the alternate of movie clips. 1 Select Insert > Media > Shockwave or Insert > Media > Flash to insert a Shockwave or Flash SWF file. 2 Select Window > Properties and enter a name for the movie in the upper-left box next - Adobe 38040334 | User Guide - Page 360
DREAMWEAVER CS3 353 User Guide 4 Choose ~Deprecated > Control Shockwave Or Flash from the Actions menu of the Behaviors panel. 5 Select a movie from the Movie menu. Dreamweaver automatically lists the names of all Shockwave and Flash SWF files in the current document. (Specifically, Dreamweaver - Adobe 38040334 | User Guide - Page 361
DREAMWEAVER CS3 354 User Guide Larger values make it easier for the visitor to find the drop target. it is being dragged, and trigger an action when the AP element is dropped, click the Advanced tab. 10 To specify that the visitor must click a particular area of the AP element to drag the AP element, - Adobe 38040334 | User Guide - Page 362
DREAMWEAVER CS3 355 User Guide Instead of displaying the values of MM_UPDOWN or MM_LEFTRIGHT in a form . Apply the Go To URL behavior The Go To URL behavior opens a new page in the current window or in the specified frame. This behavior is useful for changing the contents of two or more frames with - Adobe 38040334 | User Guide - Page 363
DREAMWEAVER CS3 356 User Guide turned on. For example, if you set no attributes for the window, it might open at 1024 x 768 pixels and have a navigation the page loads, and so on. Note: Browsers may require additional audio support (such as an audio plug-in) to play sounds. Because different browsers - Adobe 38040334 | User Guide - Page 364
DREAMWEAVER CS3 357 User Guide 3 in the Swap Image dialog box, so you do not need to manually add Preload Images when using Swap Image. 1 Select an object and the user clicks a button in the navigation bar, and to select a different window in which to display a URL. Use the Advanced tab of the Set Nav - Adobe 38040334 | User Guide - Page 365
DREAMWEAVER CS3 358 User Guide See also "Navigation bars" on page 291 Edit a Set Nav Bar Image behavior 1 Select an image in the navigation bar, and choose Window > Behaviors. 2 In the Actions menu, select the Set Nav Bar Image behavior associated with the event you're altering. 3 In the Basic tab - Adobe 38040334 | User Guide - Page 366
DREAMWEAVER CS3 359 User Guide in the status bar at the lower-left corner of the browser window. For example, you can use this behavior to describe the destination overlook messages in the status bar (and not all browsers provide full support for setting the text of the status bar); if your message - Adobe 38040334 | User Guide - Page 367
DREAMWEAVER CS3 360 User Guide Apply the Set Text Of Text Field behavior The Set backslash (\{). Example: The URL for this page is {window.location}, and today is {new Date()}. Create a named text field 1 Select Insert > Form > Text Field. If Dreamweaver prompts you to add a form tag, click Yes. 2 - Adobe 38040334 | User Guide - Page 368
DREAMWEAVER CS3 361 User Guide Apply the Show Pop-Up Menu behavior Note: This behavior is deprecated as of Dreamweaver 9 in favor of document. • To set a location in which the document opens, for example in a new window or in a specific frame, select the location from the Target menu. Note: If the - Adobe 38040334 | User Guide - Page 369
DREAMWEAVER CS3 362 User Guide 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 - Adobe 38040334 | User Guide - Page 370
DREAMWEAVER CS3 363 User Guide Position a pop-up menu in a document Use position the Restore option selected while attaching Swap Image, you should never need to select the Swap Image Restore behavior manually. 1 Select Insert > Image or click the Image button on the Insert bar to insert an image. - Adobe 38040334 | User Guide - Page 371
DREAMWEAVER CS3 364 User Guide to cache the new images when the page is loaded. This prevents downloading delays when it is time for the images to appear. 9 the tag selector at the lower- left corner of the Document window and choose Window > Behaviors. 4 Select Validate Form from the Actions menu. - Adobe 38040334 | User Guide - Page 372
DREAMWEAVER CS3 365 User Guide If you are validating multiple fields when the user submits the form, the onSubmit event automatically appears in the Events menu. 10 If you are validating individual fields, check that the default event is onBlur or onChange. If not, select one of those events. Both - Adobe 38040334 | User Guide - Page 373
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 About Photoshop, Flash - Adobe 38040334 | User Guide - Page 374
Fireworks exported file, and click OK (Windows) or Open (Macintosh). Note: If the Fireworks file is not in the current Dreamweaver site, a message appears asking whether you want to copy the file to the root folder. Click Yes. See also "About Photoshop, Flash, and Fireworks integration" on page 366 - Adobe 38040334 | User Guide - Page 375
DREAMWEAVER CS3 368 User Guide • Hold down Control (Windows) or Command (Macintosh) and double-click the selected image. • Right-click (Windows) focus to Dreamweaver. In Dreamweaver, the updated image or table appears. For a tutorial about Dreamweaver and Fireworks integration, see www.adobe.com/go/ - Adobe 38040334 | User Guide - Page 376
DREAMWEAVER CS3 369 User Guide Fireworks recognizes the following image placeholder settings you may have set while working with the image placeholder in Dreamweaver 10 Click Save to save the exported file. The file is saved, and focus returns to Dreamweaver. In the Dreamweaver to download, readers, - Adobe 38040334 | User Guide - Page 377
DREAMWEAVER CS3 370 User Guide 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 - Adobe 38040334 | User Guide - Page 378
DREAMWEAVER CS3 371 User Guide Note: Dreamweaver recognizes the Fireworks launch-and-edit preferences only PNG file. 1 In Fireworks, select Edit > Preferences (Windows) or Fireworks > Preferences (Macintosh) and then click the Launch And Edit tab (Windows) or select Launch And Edit from the pop-up - Adobe 38040334 | User Guide - Page 379
DREAMWEAVER CS3 372 User Guide 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 1 In Fireworks, select File > Export. 2 Specify your - Adobe 38040334 | User Guide - Page 380
DREAMWEAVER CS3 373 User Guide Fill in the Subheading Info and Other Info text boxes minutes if you have many image files. When the processing is complete, Dreamweaver becomes active again and creates the page containing the thumbnails. 10 When you see the "Album Created" message, click OK. You may - Adobe 38040334 | User Guide - Page 381
DREAMWEAVER CS3 374 User Guide Working with Photoshop About Photoshop integration You can insert Photoshop image files (PSD format) into web pages in Dreamweaver and let Dreamweaver a tutorial about working with Dreamweaver and Photoshop, see www.adobe.com/go/vid0200. See also "Cloak and uncloak - Adobe 38040334 | User Guide - Page 382
DREAMWEAVER CS3 375 User Guide 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 1 In Dreamweaver (Design or Code view), place - Adobe 38040334 | User Guide - Page 383
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 - Adobe 38040334 | User Guide - Page 384
DREAMWEAVER CS3 377 User Guide Edit the original PSD source file in Photoshop 1 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) - Adobe 38040334 | User Guide - Page 385
DREAMWEAVER CS3 378 User Guide 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 zoom in or to Alt-click (Windows) or Option-click (Macintosh) - Adobe 38040334 | User Guide - Page 386
DREAMWEAVER CS3 379 User Guide 4 Change the shape of the placed image by choosing the is displayed. Optimization settings When you insert an image file or copy part of an image from Photoshop, Dreamweaver displays the Image Preview dialog box to allow you to define and preview settings for a web- - Adobe 38040334 | User Guide - Page 387
DREAMWEAVER CS3 380 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 and progressively increases the resolution during download. Not selected by default. Sharpen - Adobe 38040334 | User Guide - Page 388
DREAMWEAVER CS3 381 User Guide Matte Allows you to set the image's background. You can Display Displays an interlaced image initially at low resolution and progressively increases to full resolution during download. Not selected by default. Optimize To Size Lets you specify a size, in kilobytes, - Adobe 38040334 | User Guide - Page 389
DREAMWEAVER CS3 382 User Guide Saved settings Dreamweaver provides several option settings for file in Dreamweaver. 3 In Flash, edit the FLA file. The Flash Document window indicates that you are modifying the file from within Dreamweaver. 4 When you finish making edits, click Done. Flash updates the - Adobe 38040334 | User Guide - Page 390
DREAMWEAVER CS3 383 User Guide Note: To update the SWF file and keep Flash open, in Flash select File > Update for Dreamweaver. 5 To view the updated file in the document, click Play in the Dreamweaver Property inspector or press F12 to preview your page in a browser window. Update links in a SWF - Adobe 38040334 | User Guide - Page 391
DREAMWEAVER CS3 384 User Guide • Manage your photos: Import and edit photos from your digital camera card, group related photos in stacks, and open or import camera raw files and edit their settings without starting Photoshop. You can also search leading stock libraries and download royalty-free - Adobe 38040334 | User Guide - Page 392
DREAMWEAVER CS3 385 User Guide Place a Bridge file in your page 1 In Dreamweaver (Design view), place the insertion point on your page where you want the file inserted. 2 In Bridge, select the file and choose File > Place In Dreamweaver. 3 If the file is not in your site's root folder, you are - Adobe 38040334 | User Guide - Page 393
DREAMWEAVER CS3 386 User Guide Tips for creating Dreamweaver web content for mobile devices Device Central previews web pages created in Dreamweaver created in Dreamweaver display well on mobile devices. • If you use the Adobe® Spry Small-Screen Rendering does not support frames, pop-ups, underlining - Adobe 38040334 | User Guide - Page 394
, 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. About Dreamweaver templates Understanding Dreamweaver templates A template is a special type of document that you use to design a "fixed" page - Adobe 38040334 | User Guide - Page 395
DREAMWEAVER CS3 388 User Guide A repeating region A section of the document layout that is pages. For example, if you are using Dreamweaver MX 2004, and have a site with different folders for different applications- Dreamweaver, Flash, and Photoshop. Each product folder contains a template-based - Adobe 38040334 | User Guide - Page 396
-updated) href="main.css" links refer to the main.css files that reside in the Dreamweaver, Flash, and Photoshop folders, not to the main.css file that resides in the Templates folder. In Dreamweaver 8, however, this behavior was changed so that all document-relative links are updated when creating - Adobe 38040334 | User Guide - Page 397
DREAMWEAVER CS3 390 User Guide useful article is available online at http://www.adobe.com/devnet/dreamweaver/articles/template_parameters.html. See also "Using optional @@(firstName+lastName)@@ The following features and operators are supported: • numeric literals, string literals (double-quote - Adobe 38040334 | User Guide - Page 398
DREAMWEAVER CS3 391 User Guide • 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. Dreamweaver templates do not support the use of JavaScript - Adobe 38040334 | User Guide - Page 399
DREAMWEAVER CS3 392 User Guide - Adobe 38040334 | User Guide - Page 400
DREAMWEAVER CS3 393 User Guide Recognizing templates in Code view In Code view, editable content regions document based on a template (a template-based document), editable regions appear in the Document window surrounded by rectangular outlines in a preset highlight color. A small tab appears at the - Adobe 38040334 | User Guide - Page 401
DREAMWEAVER CS3 394 User Guide In addition to the editable-region outlines, the entire page is type in locked regions. Editable content is marked in HTML with the following Dreamweaver comments: Everything between these comments is editable - Adobe 38040334 | User Guide - Page 402
DREAMWEAVER CS3 395 User Guide - Adobe 38040334 | User Guide - Page 403
DREAMWEAVER CS3 396 User Guide the Assets panel to create a new template 1 In the Assets panel (Window > Assets), select the Templates category on the left side of the panel templates for Contribute sites Using Dreamweaver, you can create templates to help Adobe® Contribute® users create new pages - Adobe 38040334 | User Guide - Page 404
DREAMWEAVER CS3 397 User Guide In addition to Dreamweaver templates, you can create non-Dreamweaver templates using the Contribute administration tools. A non-Dreamweaver template is an existing page that Contribute users can use to create new pages; it's similar to a Dreamweaver template, except - Adobe 38040334 | User Guide - Page 405
DREAMWEAVER CS3 398 User Guide 8 In the Users And Roles category, select a role, and then click contents editable lets you change only the content of the AP element, not its position. 1 In the Document window, do one of the following to select the region: • Select the text or content that you want to - Adobe 38040334 | User Guide - Page 406
DREAMWEAVER CS3 399 User Guide See also "Creating a Dreamweaver template" on page 395 "Set highlighting appear in the menu. You must locate these regions by looking for tabbed borders in the Document window. The editable region is selected in the document. Remove an editable region If you've marked - Adobe 38040334 | User Guide - Page 407
DREAMWEAVER CS3 400 User Guide There are two repeating region template objects you can cell in a templatebased document), you must insert an editable region in the repeating region. 1 In the Document window, do one of the following: • Select the text or content you want to set as a repeating region - Adobe 38040334 | User Guide - Page 408
DREAMWEAVER CS3 401 User Guide Cell Spacing Determines the number of pixels between adjacent Spacing to 0. Width Specifies the width of the table in pixels, or as a percentage of the browser window's width. Border Specifies the width, in pixels, of the table's borders. If you don't explicitly assign - Adobe 38040334 | User Guide - Page 409
DREAMWEAVER CS3 402 User Guide Using optional regions About template optional regions An optional region is also "Modify template properties" on page 415 Insert a non-editable optional region 1 In the Document window, select the element you want to set as an optional region. 2 Do one of the following - Adobe 38040334 | User Guide - Page 410
DREAMWEAVER CS3 403 User Guide 3 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 1 In the Document window, place the insertion point where you want to insert the optional region. You - Adobe 38040334 | User Guide - Page 411
DREAMWEAVER CS3 404 User Guide • 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 types are supported: text, . 1 In the Document window, select an item you - Adobe 38040334 | User Guide - Page 412
DREAMWEAVER CS3 405 User Guide 5 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 - Adobe 38040334 | User Guide - Page 413
DREAMWEAVER CS3 406 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 - Adobe 38040334 | User Guide - Page 414
DREAMWEAVER CS3 407 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 - Adobe 38040334 | User Guide - Page 415
DREAMWEAVER CS3 408 User Guide category, right-click (Windows) or Control-click ( 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 - Adobe 38040334 | User Guide - Page 416
CS3 409 User Guide 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 - Adobe 38040334 | User Guide - Page 417
DREAMWEAVER CS3 410 User Guide • Right-click (Windows) or Control-click (Macintosh), then select Templates > Open . See also "Creating a Dreamweaver template" on page 395 Manually update documents based on templates When you make a change to a template, Dreamweaver prompts you to update the documents - Adobe 38040334 | User Guide - Page 418
DREAMWEAVER CS3 411 User Guide Apply template changes to the current template-based document 1 Open the document in the Document window. 2 Select Modify > Templates > Update Current Page. Dreamweaver the Contribute template in Dreamweaver, edit it, and then save it. For instructions, see "Open a - Adobe 38040334 | User Guide - Page 419
DREAMWEAVER CS3 412 User Guide 413 "Creating a Dreamweaver template" on page 395 work with the data outside of Dreamweaver (for example, in an XML based on a Dreamweaver template. Export a select Use Standard Dreamweaver XML Tag. • XML file and click Open. Dreamweaver creates a new document based on - Adobe 38040334 | User Guide - Page 420
DREAMWEAVER CS3 413 User Guide 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 to. 2 In the Assets panel (Window > Assets), select the Templates category on - Adobe 38040334 | User Guide - Page 421
DREAMWEAVER CS3 414 User Guide • Select Nowhere to remove the content from the document. 5 To move contents before applying a template to it. Apply a template to an existing document from the Document window 1 Open the document you want to apply the template to. 2 Select Modify > Templates > Apply - Adobe 38040334 | User Guide - Page 422
DREAMWEAVER CS3 415 User Guide In pages based on templates, template users can edit content in documents. See also "Create a page based on an existing template" on page 72 "About Dreamweaver templates" on page 387 "Select editable regions" on page 399 Modify template properties When template authors - Adobe 38040334 | User Guide - Page 423
DREAMWEAVER CS3 416 User Guide 3 In the Name list, select a property. The dialog box updates to show the selected property's label and its assigned value. 4 Select Show to display the - Adobe 38040334 | User Guide - Page 424
entry, select Edit > Paste. Note: Pasting inserts a new entry; it does not replace an existing entry. DREAMWEAVER CS3 417 User Guide Template syntax General syntax rules Dreamweaver uses HTML comment tags to specify regions in templates and template-based documents, so template-based documents are - Adobe 38040334 | User Guide - Page 425
DREAMWEAVER CS3 418 User Guide - Adobe 38040334 | User Guide - Page 426
DREAMWEAVER CS3 419 User Guide 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\Configuration\CodeColoring\Colors.xml. On Windows Vista, - Adobe 38040334 | User Guide - Page 427
420 Chapter 15: Displaying XML data Adobe® Dreamweaver® CS3 includes tools that let you display Extensible Markup > 03/01/2004 Displaying XML Data with Adobe Dreamweaver Charles Brown 04/08/ - Adobe 38040334 | User Guide - Page 428
DREAMWEAVER CS3 421 User Guide Extensible Stylesheet Language Transformations (XSLT) is a subset language of XSL that actually lets you display XML data on a web page, and "transform" it, along with XSL styles, into readable, styled information in the form of HTML. You can use Dreamweaver to create - Adobe 38040334 | User Guide - Page 429
DREAMWEAVER CS3 422 User Guide The first step in creating these types of pages is to create requests the dynamic page containing the reference to the fragment, the server processes the included instruction and creates a new document in which the formatted contents of the fragment appear instead of - Adobe 38040334 | User Guide - Page 430
DREAMWEAVER CS3 423 User Guide You can also use Dreamweaver to 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 - Adobe 38040334 | User Guide - Page 431
DREAMWEAVER CS3 424 User Guide The relationship between the linked XSLT and XML pages more complicated. To perform client-side transformations using XML data from an external source, you must first download the XML source file to the same directory where your XSLT page resides. When the XML page is - Adobe 38040334 | User Guide - Page 432
DREAMWEAVER CS3 425 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. - Adobe 38040334 | User Guide - Page 433
DREAMWEAVER CS3 426 User Guide When you apply a Repeating Region XSLT object to an element in the Document window, a thin, illustration. When you add the Repeating Region XSLT object to the page, the length of the XML data placeholder in the Document window is truncated. This is because Dreamweaver - Adobe 38040334 | User Guide - Page 434
DREAMWEAVER CS3 427 User Guide 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 Data transformation performed by Application server Dreamweaver Browser The following topics provide guidelines for - Adobe 38040334 | User Guide - Page 435
DREAMWEAVER CS3 428 User Guide Note: Your server must be correctly configured to perform server-side transformations. For more information, contact your server administrator, or visit www.adobe local XML file, you will need to post that as well. 10. View the dynamic page in a browser. When you do so - Adobe 38040334 | User Guide - Page 436
DREAMWEAVER CS3 429 User Guide 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 - Adobe 38040334 | User Guide - Page 437
DREAMWEAVER CS3 430 User Guide Element + Represents Optional XML element Element node in want to convert. 2 Select File > Convert > XSLT 1.0. A copy of the page opens in the Document window. The new page is an XSL style sheet, saved with the .xsl extension. Attach XML data sources If you - Adobe 38040334 | User Guide - Page 438
DREAMWEAVER CS3 431 User Guide Display XML data in XSLT pages After you've created an XSLT page (File > Preview in Browser). Note: When you preview your work using Preview in Browser, Dreamweaver performs an internal XSL transformation without the use of an application server. September 4, 2007 - Adobe 38040334 | User Guide - Page 439
DREAMWEAVER CS3 432 User Guide descriptions from a news feed, and that news feed contains between 10 and 20 articles, each title and description in the XML file can use the tag selector in the lower-left corner of the Document window. For example, if the region is a table, click inside the table - Adobe 38040334 | User Guide - Page 440
DREAMWEAVER CS3 433 User Guide 3 In the XPath Expression Builder, select the repeating element, indicated by a small plus sign. 4 Click OK. In the Document window, a thin, tabbed, gray outline appears around the repeated region. When you preview your work in a browser (File > Preview in Browser), - Adobe 38040334 | User Guide - Page 441
DREAMWEAVER CS3 434 User Guide that displays the XML data from the selected XSLT fragment. Dreamweaver supports XSL transformations for ColdFusion, ASP, ASP.NET, or PHP point where you want it. 3 In the Server Behaviors panel (Window > Server Behaviors), click the Plus (+) button and select XSL - Adobe 38040334 | User Guide - Page 442
DREAMWEAVER CS3 435 User Guide server behaviors in this fashion. Manually deleting the generated code only time. 1 In the Server Behaviors panel (Window > Server Behaviors), double-click the XSL XML data. For full instructions, see the Dreamweaver errata at www.adobe.com/go/dw_documentation. Applying - Adobe 38040334 | User Guide - Page 443
DREAMWEAVER CS3 436 User Guide For 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" on page in the Server Behaviors panel (Window > Server Behaviors), or by adding a new XSL Transformation server behavior - Adobe 38040334 | User Guide - Page 444
click the Plus (+) button next to XSLT Parameters. DREAMWEAVER CS3 437 User Guide 3 In the Add Parameters dialog box, enter a name double-clicking an XSL Transformation server behavior in the Server Behaviors panel (Window > Server Behaviors), or by adding a new XSL Transformation server behavior. - Adobe 38040334 | User Guide - Page 445
DREAMWEAVER CS3 438 User Guide 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. Dreamweaver the supported XSLT - Adobe 38040334 | User Guide - Page 446
DREAMWEAVER CS3 439 User Guide For more information and examples on writing conditional expressions, see the section in the Reference panel (Help > Reference). Apply multiple conditional XSLT regions - Adobe 38040334 | User Guide - Page 447
DREAMWEAVER CS3 440 User Guide Set conditional (When) properties The purpose of the Set Conditional on the W3C website at www.w3.org/TR/xpath. The XPath Expression Builder is a Dreamweaver feature that lets you build simple XPath expressions for identifying specific nodes of data and for repeating - Adobe 38040334 | User Guide - Page 448
DREAMWEAVER CS3 441 User Guide Note: If you select a different node in the XML schema tree up menu. Formatting a selection is useful when the value of your node returns a number. Dreamweaver provides a predefined list of formatting functions. For a complete list of available formatting functions and - Adobe 38040334 | User Guide - Page 449
DREAMWEAVER CS3 442 User Guide These options would insert the following code in your XSLT page: 4 Click OK. 5 - Adobe 38040334 | User Guide - Page 450
DREAMWEAVER CS3 443 User Guide Filter the data to be repeated Use a filter to identify repeating nodes that have specific attribute values. 1 In the XML schema tree, select a node to - Adobe 38040334 | User Guide - Page 451
DREAMWEAVER CS3 444 User Guide Note: You need to surround string values such as true in quotes. Dreamweaver encodes the quotes for you (') 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 - Adobe 38040334 | User Guide - Page 452
DREAMWEAVER CS3 445 User Guide 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. • - Adobe 38040334 | User Guide - Page 453
DREAMWEAVER CS3 446 User Guide 1. Create the XSLT page. 2. Display data in the XSLT page. 3. Display repeating elements in the XSLT page. 4. Troubleshoot any problems. See also "Create an XSLT page" on page 429 "Display XML data in XSLT pages" on page 431 "Display repeating XML elements" on page 432 - Adobe 38040334 | User Guide - Page 454
DREAMWEAVER CS3 447 User Guide XSLT has the following five predefined entities: Character < (less-than) & (ampersand) > the error in your page, you must add the entity definition to your page manually. Specify a missing entity definition 1 Look up the missing character in the character entity - Adobe 38040334 | User Guide - Page 455
DREAMWEAVER CS3 448 User Guide Add entity definitions to the XSL files Dreamweaver creates by default 1 Locate the following configuration file in the Dreamweaver application folder and open it in any text editor: Configuration/DocumentTypes/MMDocumentTypeDeclarations.xml 2 Locate the declaration - Adobe 38040334 | User Guide - Page 456
.adobe.com/go/learn_dw_spryframework. For a tutorial about using Spry to build web pages, see www.adobe. the appearance of the widget. The Spry framework supports a set of reusable widgets written in standard widget by using the Dreamweaver interface, Dreamweaver automatically links these files to - Adobe 38040334 | User Guide - Page 457
DREAMWEAVER CS3 450 User Guide that location. For a tutorial on using Spry widgets, see www.adobe.com/go/vid0167. See also "Understanding Cascading Style Sheets" on widget to edit and make your changes in the Property inspector (Window > Properties). For details on making changes to specific widgets, - Adobe 38040334 | User Guide - Page 458
effects overview" on page 486 DREAMWEAVER CS3 451 User Guide Working with the Accordion widget the Accordion widget's code, see www.adobe.com/go/learn_dw_spryaccordion. Insert the Accordion in the Document window. 2 Click the Panels Plus (+) button in the Property inspector (Window > Properties). - Adobe 38040334 | User Guide - Page 459
DREAMWEAVER CS3 452 User Guide Delete a panel from an Accordion widget 1 Select an Accordion widget in the Document window. 2 In the Panels menu of the Property inspector (Window > Properties), select the name of the panel to delete, and click the Minus (-) button. Open a panel for editing ❖ Do one - Adobe 38040334 | User Guide - Page 460
DREAMWEAVER CS3 453 User Guide Text to change Relevant CSS rule Text in the entire accordion widget. You can also locate the rule by selecting the Accordion widget, and looking in the CSS Styles panel (Window > CSS). Make sure the panel is set to Current mode. 2 Add a width property and value to - Adobe 38040334 | User Guide - Page 461
DREAMWEAVER CS3 454 User Guide A B Menu Bar widget (consists of , , and tags) A. the parameters for the Flash movie to use wmode="transparent". For more information, see www.adobe.com/go/15523. Add or delete menus and submenus Use the Property inspector (Window > Properties) to add - Adobe 38040334 | User Guide - Page 462
DREAMWEAVER CS3 455 User Guide 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 window. 2 In the Property inspector (Window - Adobe 38040334 | User Guide - Page 463
DREAMWEAVER CS3 456 User Guide _self Loads the linked page in the same browser window. This is the default option. If the page is in a frame or frameset, the page loads within that frame. _parent Loads the linked document in - Adobe 38040334 | User Guide - Page 464
DREAMWEAVER CS3 457 User Guide Customize the Menu Bar widget Although the Property inspector enables you to make simple edits to a Menu Bar widget, it does not support customized styling tasks. You can alter the CSS rules for the Menu Bar widget and create a menu bar that is styled to your liking. - Adobe 38040334 | User Guide - Page 465
DREAMWEAVER CS3 458 User Guide Color to change Default background Background color when mouse pointer moves over it Background color when in focus Menu Bar item color when mouse pointer - Adobe 38040334 | User Guide - Page 466
DREAMWEAVER CS3 459 User Guide A of the Collapsible Panel widget's code, see www.adobe.com/go/learn_dw_sprycollapsiblepanel. Insert the Collapsible Panel widget Select a Collapsible Panel widget in the Document window. 2 In the Property inspector (Window > Properties), select Open or Closed from the - Adobe 38040334 | User Guide - Page 467
DREAMWEAVER CS3 460 User Guide Customize the Collapsible Panel widget Although the Property inspector enables you to make simple edits to a Collapsible Panel widget, it does not support customized styling tasks. You can alter the CSS for the Collapsible Panel widget and create a collapsible panel - Adobe 38040334 | User Guide - Page 468
DREAMWEAVER CS3 461 User Guide selecting the Collapsible Panel widget, and looking in the CSS Styles panel (Window > CSS Styles). Make sure the panel is set to Current mode. a full anatomy of the widget's code, see www.adobe.com/go/learn_dw_sprytabbedpanels. Insert the Tabbed Panels widget ❖ Select - Adobe 38040334 | User Guide - Page 469
DREAMWEAVER CS3 462 User Guide Delete a panel from a Tabbed Panels widget 1 Select a Tabbed Panels widget in the Document window. 2 In the Panels menu of the Property inspector (Window > Properties), select the name of the panel you want to delete and click the minus button. Open a panel for editing - Adobe 38040334 | User Guide - Page 470
DREAMWEAVER CS3 463 User Guide Style Tabbed Panels widget text You can style the text of . You can also locate the rule by selecting the Tabbed Panels widget, and looking in the CSS Styles panel (Window > CSS Styles). Make sure the panel is set to Current mode. 2 Add a width property and value to - Adobe 38040334 | User Guide - Page 471
DREAMWEAVER CS3 464 User Guide 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 - Adobe 38040334 | User Guide - Page 472
DREAMWEAVER CS3 465 User Guide the Validation Text Field widget's code, see www.adobe.com/go/learn_dw_sprytextfield. Insert the Validation Text Field Select a Validation Text Field widget in the Document window. 2 In the Property inspector (Window > Properties), select a validation type from the - Adobe 38040334 | User Guide - Page 473
DREAMWEAVER CS3 466 User Guide 212e+12, 1.221e-12 where e is used as a power of 10). Formats vary. Make your selection from the Format popup menu of the 1 Select a Validation Text Field widget in the Document window. 2 In the Property inspector (Window > Properties), enter a number in the Min Chars - Adobe 38040334 | User Guide - Page 474
DREAMWEAVER CS3 467 User Guide Specify minimum and maximum values This option is only available for Integer, Time, Currency, and Real Number/Scientific Notation validation types. 1 Select a Validation Text Field widget in the Document window. 2 In the Property inspector (Window > Properties), enter - Adobe 38040334 | User Guide - Page 475
DREAMWEAVER CS3 468 User Guide 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. - Adobe 38040334 | User Guide - Page 476
DREAMWEAVER CS3 469 User Guide 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 - Adobe 38040334 | User Guide - Page 477
DREAMWEAVER CS3 470 User Guide the Validation Text Area widget's code, see www.adobe.com/go/learn_dw_sprytextarea. Insert the Validation Text Area Select a Validation Text Area widget in the Document window. 2 In the Property inspector (Window > Properties), select the Validate On option that - Adobe 38040334 | User Guide - Page 478
DREAMWEAVER CS3 471 User Guide 2 In the Property inspector (Window > Properties), select support customized styling tasks. 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 - Adobe 38040334 | User Guide - Page 479
DREAMWEAVER CS3 472 User Guide 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 - Adobe 38040334 | User Guide - Page 480
DREAMWEAVER CS3 473 User Guide B C D A A. Validation Select widget in focus B. Select widget, valid state C. 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 1 Select Insert > Spry > - Adobe 38040334 | User Guide - Page 481
DREAMWEAVER CS3 474 User Guide Specify when validation occurs You can set the point at which validation occurs-when the user clicks outside the widget, as the user types, or when the user tries to submit the form. 1 Select a Validation Select widget in the Document window. 2 In the Property - Adobe 38040334 | User Guide - Page 482
DREAMWEAVER CS3 475 User Guide 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 - Adobe 38040334 | User Guide - Page 483
DREAMWEAVER CS3 476 User Guide A B A. Validation checkbox widget group, minimum number of selections state B. Validation , including a full anatomy of the Validation Checkbox widget's code, see www.adobe.com/go/learn_dw_sprycheckbox. Insert the Validation Checkbox widget 1 Select Insert > Spry - Adobe 38040334 | User Guide - Page 484
DREAMWEAVER CS3 477 User Guide Specify when validation occurs You can set the point at which validation occurs-when the user clicks outside the widget, as the user makes selections, or when the user tries to submit the form. 1 Select a Validation Checkbox widget in the Document window. 2 In the - Adobe 38040334 | User Guide - Page 485
DREAMWEAVER CS3 478 User Guide quickly and dynamically from a browser window. For example, you can insert Adobe Photoshop CS2 software, the professional image-editing ... Adobe Illustrator CS2 Print Publishing images/illustrator - Adobe 38040334 | User Guide - Page 486
DREAMWEAVER CS3 479 User Guide You can insert objects that display this data in a variety of ways. The following example shows how you can create a table on a web page that includes only three elements: Name Adobe Photoshop CS2 Adobe Illustrator CS2 Category Descheader Digital Imaging The - Adobe 38040334 | User Guide - Page 487
DREAMWEAVER CS3 480 User Guide These are referred to as master and detail dynamic regions. 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 includes several sample data sets. 1 Select Insert > Spry > Spry XML Data Set. - Adobe 38040334 | User Guide - Page 488
DREAMWEAVER CS3 481 User Guide 6 In the Row Elements panel, select the element that contains the data you want to display. Typically this is a repeating node, such as , with - Adobe 38040334 | User Guide - Page 489
DREAMWEAVER CS3 482 User Guide 10 If you want your data to sort automatically as it Spry Detail Region that is used in conjunction with a master table object to allow dynamic updating of data on a Dreamweaver page. All Spry data objects must be enclosed in a Spry Region. (If you try to add a Spry - Adobe 38040334 | User Guide - Page 490
DREAMWEAVER CS3 483 User Guide 3 Choose one of the following options: • To create a Spry Region, select an object. Replace Selection Replaces an existing region for an object. 6 When you click OK, Dreamweaver puts a region placeholder into your page with the text "Content for Spry Region Goes Here." - Adobe 38040334 | User Guide - Page 491
DREAMWEAVER CS3 484 User Guide 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 - Adobe 38040334 | User Guide - Page 492
DREAMWEAVER CS3 485 User Guide 7 Click OK to see the table appear in Design view with a row 've created a Spry region on your page before inserting a repeat region. 7 When you click OK, Dreamweaver inserts a region placeholder into your page with the text "Content for Spry Region Goes Here." You can - Adobe 38040334 | User Guide - Page 493
DREAMWEAVER CS3 486 User Guide • In Code view, type the code for one or more navigational tool and show product names such as "Adobe Dreamweaver" and "Adobe Acrobat" to users, but send URLs such as "support/products/dreamweaver.html" and "support/products/acrobat.html" to the server. 3 Choose your - Adobe 38040334 | User Guide - Page 494
DREAMWEAVER CS3 487 User Guide Changes the background color of an element. Blind Up/Down Simulates a window blind that goes up or down to hide or reveal the element of the Spry effects available in the Spry framework, visit www.adobe.com/go/learn_dw_spryeffects. Apply an Appear/Fade effect Note: You - Adobe 38040334 | User Guide - Page 495
DREAMWEAVER CS3 488 User Guide object you want to apply the effect to. 2 In the Behaviors panel (Window > Behaviors), click the Plus (+) button and select Effects > Grow/Shrink from left corner of the page or into the page's center. 10 Select Toggle Effect if you want the effect to be reversible, - Adobe 38040334 | User Guide - Page 496
DREAMWEAVER CS3 489 User Guide Apply a Shake effect Note: You can use this effect with these ) Select the content or layout object you want to apply the effect to. 2 In the Behaviors panel (Window > Behaviors), click the Plus (+) button and select Effects > Squish from the menu. 3 Select the object - Adobe 38040334 | User Guide - Page 497
DREAMWEAVER CS3 490 User Guide Delete an effect You can remove one or more effect behaviors from an object. 1 (Optional) Select the content or layout object you want to apply the effect to. 2 In the Behaviors panel (Window > Behaviors), click the effect you want to delete from the list of behaviors. - Adobe 38040334 | User Guide - Page 498
ASP, ASP.NET, JSP, and PHP applications. Adobe® Dreamweaver® CS3 handles database connections differently depending on your server 1000 employees. One day, Chris from Human Resources comes to her with a problem. HR administers an employee fitness program that gives employees points for every mile - Adobe 38040334 | User Guide - Page 499
DREAMWEAVER CS3 492 User Guide Chris's problem is that the fitness program has grown too Note: Strictly speaking, a "static" page may not be static at all. For example, a rollover image or Flash content (a SWF file) can make a static page come alive. However, this documentation refers to a page as - Adobe 38040334 | User Guide - Page 500
DREAMWEAVER CS3 493 User Guide When the web server receives a request for a static page, the application server. The application server reads the code on the page, finishes the page according to the instructions in the code, and then removes the code from the page. The result is a static page that - Adobe 38040334 | User Guide - Page 501
DREAMWEAVER CS3 494 User Guide A E B D C 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 information, see www.adobe.com/go/learn_dw_dbguide. The instruction to extract data - Adobe 38040334 | User Guide - Page 502
DREAMWEAVER CS3 495 User Guide A I B H C D G E F 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. - Adobe 38040334 | User Guide - Page 503
DREAMWEAVER CS3 496 User Guide Trio Motors Information Page About Trio Motors Trio Motors is a leading automobile manufacturer. - Adobe 38040334 | User Guide - Page 504
DREAMWEAVER CS3 497 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 - Adobe 38040334 | User Guide - Page 505
DREAMWEAVER CS3 498 User Guide A relational database A database containing more than one table, to modify dynamic pages at runtime. The Dreamweaver development environment supports the following server technologies: • Macromedia® ColdFusion® from Adobe • Microsoft ASP.NET • Microsoft Active Server - Adobe 38040334 | User Guide - Page 506
DREAMWEAVER CS3 499 User Guide If you use Internet service of the Windows 2000 and Windows XP Professional operating systems, you can use these two versions of Windows to host ASP.NET applications. However, you can develop (as opposed to host) ASP.NET applications on any computer running Dreamweaver - Adobe 38040334 | User Guide - Page 507
DREAMWEAVER CS3 500 User Guide For the Mac OS, you can use a web hosting service or install the required software Remove Programs. 2 Select Add/Remove Windows Components. 3 Select Internet Information Services (IIS) and click Next. 4 Follow the installation instructions and test the web server. Test - Adobe 38040334 | User Guide - Page 508
DREAMWEAVER CS3 501 User Guide To build web applications in Adobe® Dreamweaver® CS3, you need the following software • A database driver that supports your database Several web hosting Dreamweaver for development purposes. You can also install the software on a network computer (typically a Windows - Adobe 38040334 | User Guide - Page 509
are built into web servers (such as Microsoft IIS) and others can be downloaded for free from the Internet (such as Jakarta Tomcat and PHP). Server technology Application servers use different technologies. Dreamweaver supports five server technologies: ColdFusion, ASP.NET, ASP, JSP, and PHP. The - Adobe 38040334 | User Guide - Page 510
DREAMWEAVER CS3 503 User Guide During installation, you can Windows system using the Administrator account. 2 Download the Windows PHP 5.x installer from the PHP website at www.php.net/downloads.php. 3 Double-click the installer file you downloaded and follow the onscreen installation instructions - Adobe 38040334 | User Guide - Page 511
DREAMWEAVER CS3 504 User Guide This code displays the time when the page was processed on the server. 3 Copy the file to the C:\Inetpub\wwwroot folder of the Windows gz file in your webapps folder. For example, if you downloaded entropy-php-5.2.0-3.tar.gz, enter the following command and press Enter - Adobe 38040334 | User Guide - Page 512
need an application server that supports Microsoft Active Server Pages 2.0., such as Microsoft IIS (Internet Information Services), which comes with Windows 2000 and Windows XP Professional. Windows XP Professional users can install and run IIS on their local computer. For instructions, see "Install - Adobe 38040334 | User Guide - Page 513
, you need an application server that supports JavaServer Pages. Here are some popular choices: • Macromedia JRun for Windows, Mac OS X, Linux, Solaris, or UNIX. You can download a trial version of JRun from the Adobe website at www.adobe.com/go/jrun/. • Tomcat for Windows and UNIX (including Mac OS - Adobe 38040334 | User Guide - Page 514
DREAMWEAVER CS3 507 User Guide Web server ColdFusion MX 7 IIS Apache (Windows) Apache (Macintosh) Jakarta Tomcat (Windows) Default root folder The web server is not started. Consult the web server's documentation for starting instructions. • The file does not have an .htm or .html extension. • You - Adobe 38040334 | User Guide - Page 515
DREAMWEAVER CS3 508 User Guide Before you start, make sure you meet the following created a root folder for your web application on the system running your web server. Defining a Dreamweaver site for your web application consists of three steps: 1. Define a local folder The local folder - Adobe 38040334 | User Guide - Page 516
or 6.0 1 Open any ColdFusion page in Dreamweaver. 2 In the Databases panel (Window > Databases) in Dreamweaver, click Modify Data Sources in the panel toolbar. 3 Log in to ColdFusion MX Administrator, and create or modify the data source. For instructions, see ColdFusion help (Help > ColdFusion Help - Adobe 38040334 | User Guide - Page 517
DREAMWEAVER CS3 510 User Guide Database connections for ASP developers About ASP database connections An and SQL Server by downloading and installing the Microsoft Data Access Components (MDAC) 2.5 and 2.7 packages on the Windows computer running IIS. You can download the MDAC packages for free - Adobe 38040334 | User Guide - Page 518
DREAMWEAVER CS3 511 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 - Adobe 38040334 | User Guide - Page 519
DREAMWEAVER CS3 512 User Guide Driver={Microsoft Access Dreamweaver. 1 Define a DSN on the Windows computer running Dreamweaver. For instructions, see the following articles on the Microsoft website: • If the computer runs Windows 2000, see Microsoft Knowledge Base Article 300596 at http://support - Adobe 38040334 | User Guide - Page 520
Define a DSN on the remote system running your application server. For instructions, see the following articles on the Microsoft website: • If the remote computer runs Windows 2000, see Microsoft Knowledge Base Article 300596 at http://support.microsoft.com/default.aspx?scid=kb;en-us;300596 • If the - Adobe 38040334 | User Guide - Page 521
DREAMWEAVER CS3 514 User Guide 2 Click the Plus (+) button on the panel, select Custom Connection String " on page 540 "Troubleshooting database connections" on page 525 Connecting to a database on an ISP If you're an ASP developer working with a commercial Internet service provider (ISP), you often - Adobe 38040334 | User Guide - Page 522
DREAMWEAVER CS3 515 User Guide The virtual path, /jsmith/index.htm, stands in for its virtual path-for example, /jsmith/data/statistics.mdb. 2 Open an ASP page in Dreamweaver, then open the Databases panel (Window > Databases). 3 Click the Plus (+) button on the panel and select Custom Connection - Adobe 38040334 | User Guide - Page 523
DREAMWEAVER CS3 516 User Guide Suppose that the virtual path to your Microsoft Access database is information in the file manually or as follows. Edit a connection 1 Open an ASP page in Dreamweaver and then open the Databases panel (Window > Databases). 2 Right-click (Windows) or Control-click ( - Adobe 38040334 | User Guide - Page 524
DREAMWEAVER CS3 517 User Guide 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 - Adobe 38040334 | User Guide - Page 525
CS3 518 User Guide 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 - Adobe 38040334 | User Guide - Page 526
DREAMWEAVER CS3 519 User Guide You can download OLE DB providers for Oracle databases from the Oracle website at www.oracle.com/technology/software/tech/windows OLE DB connection parameters for ASP.NET" on page 520 "Troubleshooting database connections" on page 525 Create a connection using data link - Adobe 38040334 | User Guide - Page 527
DREAMWEAVER CS3 520 User Guide 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 manually Dreamweaver, then open the Databases panel (Window > Databases). 2 Right-click (Windows - Adobe 38040334 | User Guide - Page 528
DREAMWEAVER CS3 521 User Guide 2 Right-click (Windows) or Control-click (Macintosh) the connection, and parameters of other drivers, consult the driver vendor's documentation. The Oracle Thin JDBC driver supports Oracle databases. If you want to use this driver to connect to your Oracle database - Adobe 38040334 | User Guide - Page 529
DREAMWEAVER CS3 522 User Guide For instance, if your server is called Aristotle, the database port is 1521, and you defined a database SID called patients on that server, you would enter the following parameter values in Dreamweaver: Obtaining a JDBC driver for your database Make sure you have a - Adobe 38040334 | User Guide - Page 530
DREAMWEAVER CS3 523 User Guide 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 - Adobe 38040334 | User Guide - Page 531
DREAMWEAVER CS3 524 User Guide Although it is adequate for development use with lower-end database systems such as Microsoft Access, the Sun JDBC-ODBC Bridge driver is not intended for production use. For example, it lets only one JSP page connect to the database at a time (it does not support - Adobe 38040334 | User Guide - Page 532
CS3 525 User Guide 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 - Adobe 38040334 | User Guide - Page 533
DREAMWEAVER CS3 526 User Guide Check or change the database file permissions (Windows XP) 1 Make sure that you have administrator privileges on the computer. 2 In Windows Explorer, locate the database file or the folder containing the database, right-click the file or folder, and select Properties. - Adobe 38040334 | User Guide - Page 534
DREAMWEAVER CS3 527 User Guide 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 - Adobe 38040334 | User Guide - Page 535
DREAMWEAVER CS3 528 User Guide • PRB: Error "Cannot Open File Unknown" Using Access at http://support.microsoft.com/default. SQL Server does not allow an underscore in SQL account names. If someone manually maps the Windows IUSR_machinename account to a SQL account of the same name, it will fail. - Adobe 38040334 | User Guide - Page 536
DREAMWEAVER CS3 529 User Guide , and the inserted data does not conform to the mask. To fix the problem, avoid using reserved words such as "date", "name", "select", "where," words for common database systems: • Microsoft Access at http://support.microsoft.com/default.aspx?scid=kb;en-us;Q209187 • - Adobe 38040334 | User Guide - Page 537
DREAMWEAVER CS3 530 User Guide The problem occurs when the page tries to display data from an empty recordset. To solve the problem, apply the Show Region server behavior to the dynamic content to be displayed on the page, as follows: 1 Highlight the dynamic content on the page. 2 - Adobe 38040334 | User Guide - Page 538
to the user. You can use Adobe® Dreamweaver® CS3 to design web forms to insert, throughout the website without having to manually edit each page. Databases come in store. A database commonly installed on Windows computers is Microsoft Access. If you and the ability to support large, concurrent user - Adobe 38040334 | User Guide - Page 539
DREAMWEAVER CS3 532 User Guide Collecting data submitted by users About collecting data You can the message. In contrast, the GET method appends parameters to the requested URL. You can use Dreamweaver to quickly design HTML forms that send form parameters to the server. Be aware of the method you - Adobe 38040334 | User Guide - Page 540
DREAMWEAVER CS3 533 User Guide 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 support - Adobe 38040334 | User Guide - Page 541
DREAMWEAVER CS3 534 User Guide 4 The server sends the report.cfm page to the browser Delete a record The Property inspector (Window > Properties) lets you create the same URL parameters by selecting the link and appending the URL - Adobe 38040334 | User Guide - Page 542
DREAMWEAVER CS3 535 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 - Adobe 38040334 | User Guide - Page 543
DREAMWEAVER CS3 536 User Guide A form-based survey is a typical example of a page that stores form value from session variables and use it in a web application. After you define the session variable in Dreamweaver, you can insert its value in a page. The HTML syntax for each appears as follows: - Adobe 38040334 | User Guide - Page 544
DREAMWEAVER CS3 537 User Guide Example of information stored in session variables You're working on a site with a large audience of senior citizens. In Dreamweaver to the server, as the following Macromedia ColdFusion® from Adobe example shows: Larger Text - Adobe 38040334 | User Guide - Page 545
Adobe® Dreamweaver® CS3 supports 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. For example, ColdFusion documents do not support JavaBeans. A server behavior is the set of instructions - Adobe 38040334 | User Guide - Page 546
DREAMWEAVER CS3 539 User Guide 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 Window - Adobe 38040334 | User Guide - Page 547
DREAMWEAVER CS3 540 User Guide 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 Dreamweaver; then open the Databases panel (Window > Databases). • If the database connection exists, right-click (Windows) - Adobe 38040334 | User Guide - Page 548
DREAMWEAVER CS3 541 User Guide If you change the field type in the Property inspector to a value that Dreamweaver recognizes-for or other server behavior into a page, Dreamweaver inserts a server-side script into the page's source code. This script instructs the server to retrieve data from the - Adobe 38040334 | User Guide - Page 549
DREAMWEAVER CS3 542 User Guide • Place to write the code yourself. The server behaviors supplied with Dreamweaver support ColdFusion, ASP, ASP.NET, JSP, and PHP document types . For a tutorial on creating dynanic pages, see www.adobe.com/go/learn_dw_webapp. See also "Presenting content with tables - Adobe 38040334 | User Guide - Page 550
DREAMWEAVER CS3 543 User Guide "Inserting Flash content" on page 255 "Data sources for web applications want to create complex SQL queries, you will need to learn SQL, and manually write SQL statements that you enter into Dreamweaver. Note: Microsoft ASP.NET refers to a recordset as a DataSet. If you - Adobe 38040334 | User Guide - Page 551
DREAMWEAVER CS3 544 User Guide 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 - Adobe 38040334 | User Guide - Page 552
DREAMWEAVER CS3 545 User Guide See also "URL parameters" on page 533 "Define form parameters the source code. After you create a session variable in the web application's source code, you can use Dreamweaver to retrieve its value and use it in a web page. See also "Define session variables" on page - Adobe 38040334 | User Guide - Page 553
DREAMWEAVER CS3 546 User Guide CGI variables Provide information about the server running ColdFusion, HTML attributes dynamic" on page 566 Server Behaviors panel Use the Server Behavior panel to add Dreamweaver server behaviors to a page, edit server behaviors, and create server behaviors. You can - Adobe 38040334 | User Guide - Page 554
DREAMWEAVER CS3 547 User Guide • "Building a database search page (ASP.NET)" on page 629 • "Building a services" on page 583 Defining sources of dynamic content Define a recordset without writing SQL You can create a recordset without manually entering SQL statements. 1 In the Document window, - Adobe 38040334 | User Guide - Page 555
DREAMWEAVER CS3 548 User Guide 2 Select Windows > Bindings to display the Bindings panel. 3 In the Bindings the simple Recordset dialog box.) 4 Complete the Recordset dialog box for your document type. For instructions, see the topics below. 5 Click the Test button to execute the query and ensure - Adobe 38040334 | User Guide - Page 556
DREAMWEAVER CS3 549 User Guide A table appears displaying the returned data. Each row contains a table's columns in the recordset, click Selected and choose the desired columns by Control-clicking (Windows) or Command-clicking (Macintosh) them in the list. 7 To further limit the records returned - Adobe 38040334 | User Guide - Page 557
DREAMWEAVER CS3 550 User Guide 9 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. 10 -clicking (Windows) or - Adobe 38040334 | User Guide - Page 558
DREAMWEAVER CS3 551 User Guide 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. 1 In the Document window, open the page that will use the recordset. 2 Select Windows dialog box. For instructions, see the - Adobe 38040334 | User Guide - Page 559
DREAMWEAVER CS3 552 User Guide For example, if you select a table column, the available buttons by selecting the stored procedure from the Database Items tree and clicking the Procedure button. Dreamweaver automatically fills in the SQL and Variable areas. 4 If the SQL statement contains variables, - Adobe 38040334 | User Guide - Page 560
DREAMWEAVER CS3 553 User Guide 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 - Adobe 38040334 | User Guide - Page 561
DREAMWEAVER CS3 554 User Guide If the SQL statement contains run-time references, make procedure by selecting the stored procedure from the Database Items tree and clicking the Procedure button. Dreamweaver automatically fills in the SQL and Parameters areas. 4 You can specify a page to redirect - Adobe 38040334 | User Guide - Page 562
DREAMWEAVER CS3 555 User Guide Name FormFieldName Default value 0001 The run-time value is Run-time Value box, and click OK. Create SQL queries using the Database Items tree Instead of manually typing SQL statements into the SQL box, you can use the Database Item's point-and-click interface to - Adobe 38040334 | User Guide - Page 563
DREAMWEAVER CS3 556 User Guide 4 Click OK to add the recordset to the Bindings panel. you can use its value in the currently selected page. 1 In the Document window, open the page that will use the variable. 2 Select Windows > Bindings to display the Bindings panel. 3 In the Bindings panel, click - Adobe 38040334 | User Guide - Page 564
DREAMWEAVER CS3 557 User Guide See also "About URL and form parameters" on page 544 " content source, you can use its value in your page. 1 In the Document window, open the page that will use the variable. 2 Select Windows > Bindings to display the Bindings panel. 3 In the Bindings panel, click the - Adobe 38040334 | User Guide - Page 565
DREAMWEAVER CS3 558 User Guide Define session variables You can use session variables to no application variable objects in JSP or PHP. 1 Open a dynamic document type in the Document window. 2 Select Window > Bindings to display the Bindings panel. 3 Click the Plus (+) button, and select Application - Adobe 38040334 | User Guide - Page 566
DREAMWEAVER CS3 559 User Guide 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 the Bindings panel (Window > Bindings). In - Adobe 38040334 | User Guide - Page 567
DREAMWEAVER CS3 560 User Guide The following table lists the built-in ColdFusion server variables: system running on the server (Windows XP, Windows 2000, Linux). Server.OS.AdditionalInforma- Additional information about installed operating system (service packs, tion updates). Server.OS - Adobe 38040334 | User Guide - Page 568
DREAMWEAVER CS3 561 User Guide The Cookies collection Retrieves the values of the cookies sent in an JSP pages. The PHP and JSP server variables appear in the Bindings panel. 1 Open the Bindings panel (Window > Bindings). 2 Click the Plus (+) button, and select the variable from the pop-up menu. The - Adobe 38040334 | User Guide - Page 569
DREAMWEAVER CS3 562 User Guide Define a ColdFusion cookie variable Cookie variables are created in the the user name they have authenticated as. (Also available as AUTH_USER.) If the HTTP server supports RFC 931 identification, this variable is set to the remote user name retrieved from the server. - Adobe 38040334 | User Guide - Page 570
DREAMWEAVER CS3 563 User Guide The following table lists the most common CGI variables source of content for the page. Change a content source in the Bindings panel 1 In the Bindings panel (Window > Bindings), double-click the name of the content source you want to edit. 2 Make your changes in - Adobe 38040334 | User Guide - Page 571
Change or delete content sources" on page 563 DREAMWEAVER CS3 564 User Guide Adding dynamic content to pages About adding dynamic selecting a content source in the Bindings panel. Dreamweaver inserts a server-side script in the page's code instructing the server to transfer the data from the - Adobe 38040334 | User Guide - Page 572
DREAMWEAVER CS3 565 User Guide See also "About recordsets" on page 543 "Use predefined data formats" on page 578 Add dynamic text 1 In Design view, select text on the page, or click where you want to add dynamic text. 2 In the Bindings panel (Window Document window. You can solve the problem by - Adobe 38040334 | User Guide - Page 573
DREAMWEAVER CS3 566 User Guide If no recordsets appear in the list, or if the available recordsets inside the table and click the tag in the tag selector on the bottom-left of the Document window. 2 How you bind a dynamic content source to the HTML attribute depends on where it is located. • - Adobe 38040334 | User Guide - Page 574
DREAMWEAVER CS3 567 User Guide will be assigned to the HTML attribute. Make ActiveX, Flash, and other object parameters dynamic You can make the parameters view, select an object on the page and open the Property inspector (Window > Properties). 2 Click the Parameters button. 3 If your parameter - Adobe 38040334 | User Guide - Page 575
DREAMWEAVER CS3 568 User Guide Edit dynamic content 1 Open the Server Behaviors panel (Window > Server Behaviors). 2 Click the Plus (+) button to display the server behaviors, and double-click the server behavior in the panel. The dialog box that you - Adobe 38040334 | User Guide - Page 576
DREAMWEAVER CS3 569 User Guide See also "Provide the page with expected parameters" on page 581 "View live data in Design view" on page 579 "HTML form parameters" on page 532 "URL parameters" on page 533 "How session variables work" on page 535 Let Adobe Contribute users edit dynamic content When a - Adobe 38040334 | User Guide - Page 577
DREAMWEAVER CS3 570 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 - Adobe 38040334 | User Guide - Page 578
DREAMWEAVER CS3 571 User Guide See also "Presenting content with tables" on page 176 " the Move To and Show Region server behaviors by double-clicking them in the Server Behaviors panel. Dreamweaver creates a table that contains text or image links that allow the user to navigate through the selected - Adobe 38040334 | User Guide - Page 579
DREAMWEAVER CS3 572 User Guide You can customize the layout of the navigation bar by using image on the page you want to use as a record navigation link. 2 Open the Server Behaviors panel (Window > Server Behaviors), and click the Plus (+) button. 3 Select Recordset Paging from the pop-up menu; then - Adobe 38040334 | User Guide - Page 580
DREAMWEAVER CS3 573 User Guide Similarly, you can display an error message if there is a problem connecting to a database, or if a user's user name and region on the page to show or hide. 2 In the Server Behaviors panel (Window > Server Behaviors), click the Plus (+) button. 3 Select Show Region from - Adobe 38040334 | User Guide - Page 581
DREAMWEAVER CS3 574 User Guide Display multiple recordset results The Repeating Region server behavior lets a region on the page precisely, you can use the tag selector on the left corner of the document window. For example, if the region is a table row, click inside the row on the page, then click - Adobe 38040334 | User Guide - Page 582
DREAMWEAVER CS3 575 User Guide 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 - Adobe 38040334 | User Guide - Page 583
DREAMWEAVER CS3 576 User Guide A table and placeholders for the dynamic content defined in its associated recordset are inserted that appears similar to the following example: When viewed in the Live Data window or a browser, the counter appears similar to the following example: September 4, 2007 - Adobe 38040334 | User Guide - Page 584
DREAMWEAVER CS3 577 User Guide Build and add the record counter to the page ❖ In the Insert . 2 Place the insertion point at the end of the text string. 3 Open the Server Behaviors panel (Window > Server Behaviors). 4 Click the Plus (+) button in the upper-left corner, and click Display Record Count - Adobe 38040334 | User Guide - Page 585
DREAMWEAVER CS3 578 User Guide 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 > - Adobe 38040334 | User Guide - Page 586
DREAMWEAVER CS3 579 User Guide create a custom format for. 3 Select Window > Bindings to display the Bindings panel, a format type. Note: Dreamweaver only supports creating data formats for ASP download formats that other developer created, and create server formats and post them to the Dreamweaver - Adobe 38040334 | User Guide - Page 587
The following example shows a dynamic page with Live Data disabled: DREAMWEAVER CS3 580 User Guide The following example shows the same page with Live Data turned provide. If you have difficulty getting Live Data view to work, see "Troubleshooting Live Data view" on page 582. September 4, 2007 - Adobe 38040334 | User Guide - Page 588
DREAMWEAVER CS3 581 User Guide Provide a page with live data in Design view 1 supports code in server-side includes and application files such as global.asa (ASP) and application.cfm (ColdFusion). Make sure to upload these files to the server before enabling Live Data. 1 Open the Site panel (Window - Adobe 38040334 | User Guide - Page 589
DREAMWEAVER CS3 582 User Guide If a page expects parameters from the user, you must provide the parameters as follows. 1 In the Document window, this option off when working in the Live Data window. Troubleshooting Live Data view Many problems with Live Data view can be traced back to missing - Adobe 38040334 | User Guide - Page 590
solve the problem by using empty curly braces as placeholders. 1 Select Edit > Preferences > Invisible Elements, or Dreamweaver > Preferences > Invisible Elements (Mac OS X). 2 In the Show Dynamic Text As pop-up menu, select {}, and click OK. Using web services About web services Web services are an - Adobe 38040334 | User Guide - Page 591
Guide 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 - Adobe 38040334 | User Guide - Page 592
DREAMWEAVER CS3 585 User Guide 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 - Adobe 38040334 | User Guide - Page 593
DREAMWEAVER CS3 586 User Guide 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 - Adobe 38040334 | User Guide - Page 594
DREAMWEAVER CS3 587 User Guide 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- - Adobe 38040334 | User Guide - Page 595
DREAMWEAVER CS3 588 User Guide 3 Complete the UDDI Sites dialog box, and click Done. • To following example instantiates the HelloWorld web service using ColdFusion. 1 In the Document window, in Code view, drag the sayHello method into the page's HTML. Dreamweaver adds the method and dummy parameters - Adobe 38040334 | User Guide - Page 596
DREAMWEAVER CS3 589 User Guide Web Service - Adobe 38040334 | User Guide - 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. 2 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 - Adobe 38040334 | User Guide - Page 598
DREAMWEAVER CS3 591 User Guide Note: When entering code in the Code Block box, you can only of the selected string in the code block is replaced with a parameter marker (for example, @@Session@@). 10 Select an option from the Insert Code pop-up menu specifying where to embed the code blocks. 11 - Adobe 38040334 | User Guide - Page 599
DREAMWEAVER CS3 592 User Guide When the page designer clicks the Plus (+) button on the select the behavior in the Server Behaviors panel, the designated block is selected in the Document window. By default, Dreamweaver selects the first code block that is not above the html tag. If all the code - Adobe 38040334 | User Guide - Page 600
DREAMWEAVER CS3 593 User Guide Effectively using conditional expressions When using if, else, and elseif directives between, server behavior parameters. For example, the following JSP code comes from a Dreamweaver server behavior that uses a conditional code block: @@rsName@@.close(); - Adobe 38040334 | User Guide - Page 601
DREAMWEAVER CS3 594 User Guide Insert Code options Above the Tag Below the code blocks" on page 592 "Testing server behaviors" on page 600 Position a code block (general instructions) 1 Using the Server Behavior Builder, write a code block. 2 In the Server Behavior Builder dialog - Adobe 38040334 | User Guide - Page 602
DREAMWEAVER CS3 595 User Guide The server behavior is listed in the Server Behaviors panel (Window > Server Behavior); click the Plus control to the dialog box that lets the page designer create parameter arrays. Dreamweaver includes a simple array control that you can use to create dialog boxes. - Adobe 38040334 | User Guide - Page 603
DREAMWEAVER CS3 596 User Guide - Adobe 38040334 | User Guide - Page 604
DREAMWEAVER CS3 597 User Guide Using the loop directive's _length and _index variables The loop the Insert Parameter In Code Block button. Enter a parameter name and click OK. Dreamweaver replaces every instance of the highlighted string with the specified parameter name enclosed in parameter - Adobe 38040334 | User Guide - Page 605
DREAMWEAVER CS3 598 User Guide 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 Server Behaviors panel (Window > Server Behaviors), download from the Dreamweaver - Adobe 38040334 | User Guide - Page 606
DREAMWEAVER CS3 599 User Guide 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 and any special instructions for including it - Adobe 38040334 | User Guide - Page 607
DREAMWEAVER CS3 600 User Guide var MM_ERROR_STRING = "..."; function MM_hideLayer() { Avoid similar code page 589 "Custom server behaviors workflow" on page 590 Testing server behaviors The Dreamweaver Exchange recommends performing the following tests on each server behavior you create: • Apply - Adobe 38040334 | User Guide - Page 608
DREAMWEAVER CS3 601 User Guide Client-side role of forms Forms support the client side of the client-server relationship You can also send form data directly to an e-mail recipient. Form objects In Dreamweaver, form input types are called form objects. Form objects are the mechanisms that allow - Adobe 38040334 | User Guide - Page 609
DREAMWEAVER CS3 602 User Guide Check boxes Allow multiple responses within a single group of options. A user can select as many options as apply. The following example shows three check box - Adobe 38040334 | User Guide - Page 610
DREAMWEAVER CS3 603 User Guide 2 Select Insert > Form, or select the Forms category in the Aids > Invisible Elements. 3 Set the properties of the HTML form in the Property inspector (Window >Properties): a In the Document window, click the form outline to select the form. b In the Form Name box, type - Adobe 38040334 | User Guide - Page 611
DREAMWEAVER CS3 604 User Guide b Select the object in the Insert > Form menu, or in the Forms between the form tags. 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 - Adobe 38040334 | User Guide - Page 612
DREAMWEAVER CS3 605 User Guide select the image, and then select the behavior in the Behaviors panel (Window > Behaviors). Insert file-upload fields You can create a file-upload use PHP, see "Handling files uploads" in the online PHP Manual at http://us2.php.net/features.file-upload.php. File fields - Adobe 38040334 | User Guide - Page 613
DREAMWEAVER CS3 606 User Guide 3 Set the form Method to POST. 4 From the Enctype pop-up menu, select field for single-line text fields. Use Max Chars to limit zip codes to 5 digits, limit passwords to 10 characters, and so on. If you leave the Max Chars box blank, users can enter any amount of text - Adobe 38040334 | User Guide - Page 614
DREAMWEAVER CS3 607 User Guide Init Value Assigns the value displayed in the field when the form first loads. For example, you might indicate that the user enters information in - Adobe 38040334 | User Guide - Page 615
DREAMWEAVER CS3 608 User Guide Height (List type only) Sets the number of items displayed in the menu. Selections (List type only) Indicates whether the user can select multiple items - Adobe 38040334 | User Guide - Page 616
DREAMWEAVER CS3 609 User Guide b Select Insert > Form > List/Menu to insert the form object. 2 Do one of the following: • Select the new or an existing HTML List/Menu form - Adobe 38040334 | User Guide - Page 617
DREAMWEAVER CS3 610 User Guide 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, - Adobe 38040334 | User Guide - Page 618
DREAMWEAVER CS3 611 User Guide 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). 4 Click OK. Set the Dynamic Radio Group dialog box - Adobe 38040334 | User Guide - Page 619
DREAMWEAVER CS3 612 User Guide Attach JavaScript behaviors to HTML form objects You can attach JavaScript behaviors stored in Dreamweaver forms. 1 Select a Submit button in a form. 2 In the Behaviors panel (Window > Behaviors), click the Plus (+) button, and select Call JavaScript from the list. - Adobe 38040334 | User Guide - Page 620
DREAMWEAVER CS3 613 User Guide Note: The screen reader reads the name you enter as the radiobutton" value="radiobutton"> RadioButton3 Access Key Uses a keyboard equivalent (one letter) and the Alt key (Windows) or the Control key (Macintosh) to select the form object in the browser. For example, if - Adobe 38040334 | User Guide - Page 621
614 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, - Adobe 38040334 | User Guide - Page 622
DREAMWEAVER CS3 615 User Guide Detail page You can build master and detail pages type, and click Create. This page becomes the master page. 2 Define a recordset. In the Bindings panel (Windows > Bindings), click the Plus (+) button, select Recordset (ColdFusion, PHP) or DataSet (ASP.NET), and choose - Adobe 38040334 | User Guide - Page 623
DREAMWEAVER CS3 616 User Guide 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 - Adobe 38040334 | User Guide - Page 624
DREAMWEAVER CS3 617 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 - Adobe 38040334 | User Guide - Page 625
DREAMWEAVER CS3 618 User Guide 2 In the Property inspector, click the folder icon beside the Link box. 3 Browse and select the detail page. The detail page appears in the Link - Adobe 38040334 | User Guide - Page 626
DREAMWEAVER CS3 619 User Guide 2 In the Server Behaviors panel (Window > Server Behaviors), click the Plus (+) and pass a record ID (ASP.NET) 1 Double-click your DataGrid in the Server Behaviors panel (Window > Server Behaviors). 2 In the Columns box, select the title of the column to apply links - Adobe 38040334 | User Guide - Page 627
DREAMWEAVER CS3 620 User Guide Dreamweaver creates a URL to the detail page that includes a you don't have a detail page yet, create a blank page (File > New). 2 In the Bindings panel (Window > Bindings), click the Plus (+) button and select Recordset (Query) or DataSet (Query) from the pop-up menu - Adobe 38040334 | User Guide - Page 628
DREAMWEAVER CS3 621 User Guide 5 Complete the Filter section as to find and display the panel. 7 Bind the recordset columns to the detail page by selecting the columns in the Bindings panel (Window > Bindings) and dragging them onto the page. After uploading both the master and detail pages to the - Adobe 38040334 | User Guide - Page 629
DREAMWEAVER CS3 622 User Guide server behavior extracts the record details from this recordset. For instructions, see "Define a recordset without writing SQL" on by clicking the Plus (+) button on the Server Behaviors panel (Window > Server Behaviors) and selecting Recordset Paging > Move to Specific - Adobe 38040334 | User Guide - Page 630
DREAMWEAVER CS3 623 User Guide selected by default; it does not appear for all server models. 10 Specify the number of records to display on the master page. 11 detail pages with the data object, use the Server Behaviors panel (Window > Server Behaviors) to modify the various building blocks the data - Adobe 38040334 | User Guide - Page 631
DREAMWEAVER CS3 624 User Guide Building search and results pages (ColdFusion, ASP, JSP, PHP) About search and results pages You can use Dreamweaver page into one page. If you have only one search parameter, Dreamweaver lets you add search capabilities to your web application without using SQL - Adobe 38040334 | User Guide - Page 632
DREAMWEAVER CS3 625 User Guide To add an HTML form to a search page, complete the following procedure. 1 Select the form by selecting the tag in the tag selector at the bottom of the Document window, as the following image shows: 6 In the Action box in the form's Property inspector, enter the - Adobe 38040334 | User Guide - Page 633
DREAMWEAVER CS3 626 User Guide See also "About search and results pages" on page 624 "Build table's columns in the recordset, click Selected and select the desired columns by Control-clicking (Windows) or Command-clicking (Macintosh) them in the list. You should include only the columns containing - Adobe 38040334 | User Guide - Page 634
DREAMWEAVER CS3 627 User Guide For example, if the value sent by the search page is a ASP, JSP, PHP)" on page 625). 1 Open the results page in Dreamweaver, and then create a recordset by opening the Bindings panel (Window > Bindings), clicking the Plus (+) button, and selecting Recordset from the pop - Adobe 38040334 | User Guide - Page 635
DREAMWEAVER CS3 628 User Guide 4 the bottom of the advanced Recordset dialog box. 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. 5 Give the SQL variables the values of the - Adobe 38040334 | User Guide - Page 636
DREAMWEAVER CS3 629 User Guide Create a detail page for a results page (ColdFusion, ASP, 625 Building a database search page (ASP.NET) About a database search page (ASP.NET) You can use Dreamweaver to build a page that searches a database and displays the results in a DataGrid. You can specify how - Adobe 38040334 | User Guide - Page 637
DREAMWEAVER CS3 630 User Guide Search with only one search parameter (ASP.NET) When the that meet the search criteria. Create a DataSet to hold the search results 1 In the Bindings panel (Window > Bindings), click the Plus (+) button and select DataSet (Query). If the advanced dialog box appears, - Adobe 38040334 | User Guide - Page 638
DREAMWEAVER CS3 631 User Guide Search with multiple search parameters (ASP.NET) If the parameter (ASP.NET)" on page 630). 1 Open the results page in Dreamweaver, and then create a DataSet by opening the Bindings panel (Window > Bindings), clicking the Plus (+) button, and selecting DataSet from the - Adobe 38040334 | User Guide - Page 639
DREAMWEAVER CS3 632 User Guide 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 - Adobe 38040334 | User Guide - Page 640
DREAMWEAVER CS3 633 User Guide Sub Page_Load() If Not IsPostBack Then dgName. 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: • An HTML form that lets - Adobe 38040334 | User Guide - Page 641
DREAMWEAVER CS3 634 User Guide Add an HTML form to an insert page 1 Create a dynamic page (File > New > Blank Page), and lay out your page using the Dreamweaver > tag at the bottom of the Document window to select the form, opening the Property inspector (Window > Properties), and entering a name in - Adobe 38040334 | User Guide - Page 642
DREAMWEAVER CS3 635 User Guide 3 In the Insert Into Table pop-up menu, select the HTML form and clicking the Submit button. To edit the server behavior, open the Server Behaviors panel (Window > Server Behaviors) and double-click the Insert Record behavior. Add a server behavior to insert records in - Adobe 38040334 | User Guide - Page 643
DREAMWEAVER CS3 636 User Guide 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) 1 In the Server Behaviors panel (Window > - Adobe 38040334 | User Guide - Page 644
DREAMWEAVER CS3 637 User Guide You can also change the order of the form objects on objects remain within the form's boundaries.) To edit the server behavior, open the Server Behaviors panel (Window > Server Behaviors) and double-click the Insert Record behavior. Building pages to update a record ( - Adobe 38040334 | User Guide - Page 645
DREAMWEAVER CS3 638 User Guide Create links to the update page After creating the search and it temporarily in a recordset. 1 Create a page in Dreamweaver and save it. The page will become your update page. 2 In the Bindings panel (Window > Bindings), click the Plus (+) button and select Recordset. - Adobe 38040334 | User Guide - Page 646
DREAMWEAVER CS3 639 User Guide You can add the final two basic building blocks of > Button). You can change the label of the Submit button by selecting the button, opening the Property inspector (Window > Properties), and entering a new value in the Label box. Display the record in the form 1 Make - Adobe 38040334 | User Guide - Page 647
DREAMWEAVER CS3 640 User Guide Add a server behavior to update the database table 1 In the Server Behaviors panel (Window > Server Behaviors), server behavior fails or click the Browse button to browse to the location. 10 (ASP.NET) Select the Display Debugging Information On Failure option if you - Adobe 38040334 | User Guide - Page 648
DREAMWEAVER CS3 641 User Guide • An Update Record server behavior to update the database table You use the On Failure, Go To option when your site is live. When you select the debugging option, Dreamweaver ignores the On Failure, Go To option. 8 In the Form Fields area, specify which columns in your - Adobe 38040334 | User Guide - Page 649
DREAMWEAVER CS3 642 User Guide , select the Checked or Unchecked option. 10 Set the properties of other form objects behavior, open the Server Behaviors panel (Window > Server Behaviors) and double-click update records in a database. 1 Select either Manually or From Database, depending on how you plan - Adobe 38040334 | User Guide - Page 650
DREAMWEAVER CS3 643 User Guide 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. - Adobe 38040334 | User Guide - Page 651
DREAMWEAVER CS3 644 User Guide After clicking outside the Link box, the Delete string appears linked in the table. If you enable Live Data view (View > Live Data), you can - Adobe 38040334 | User Guide - Page 652
DREAMWEAVER CS3 645 User Guide The expression after the equal sign is the value of the parameter. each record, the following URL is created: In this case, a URL parameter called CODE is created. Dreamweaver copies the name of the data field, but you don't have to use that name. You can change - Adobe 38040334 | User Guide - Page 653
DREAMWEAVER CS3 646 User Guide The {0} 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 - Adobe 38040334 | User Guide - Page 654
DREAMWEAVER CS3 647 User Guide The user will click the button to confirm and delete the any way you want and save it. Retrieve the record the user wants to delete 1 In the Bindings panel (Window > Bindings), click the Plus (+) button and select Recordset (Query) from the pop-up menu. The simple - Adobe 38040334 | User Guide - Page 655
DREAMWEAVER CS3 648 User Guide Display the record the user wants to delete 1 Select the recordset columns (record fields) in the Bindings panel, and drag them to the delete page. - Adobe 38040334 | User Guide - Page 656
DREAMWEAVER CS3 649 User Guide Completed delete page Add logic to delete the record (ColdFusion the Delete Record server behavior. 1 Make sure the delete page is open in Dreamweaver. 2 In the Server Behaviors panel (Window > Server Behaviors), click the Plus (+) button, and select Delete Record. 3 - Adobe 38040334 | User Guide - Page 657
DREAMWEAVER CS3 650 User Guide 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. 10 button. 1 In the Server Behaviors panel (Window > Server Behaviors), click the Plus (+) - Adobe 38040334 | User Guide - Page 658
DREAMWEAVER CS3 651 User Guide Dreamweaver efficient. Note: Not all database providers support prepared commands. If your database does not support it, it might return an error . 1 In Dreamweaver, open the ASP page that will run the command. 2 Open the Server Behaviors panel (Window > Server Behaviors - Adobe 38040334 | User Guide - Page 659
DREAMWEAVER CS3 652 User Guide 4 Complete the SQL statement. For information on writing SQL statements that modify databases, consult a Transact-SQL manual Databases panel in Dreamweaver. Find your Type in database Type in Dreamweaver Numeric (MS Access, MS fields that support large amounts of - Adobe 38040334 | User Guide - Page 660
DREAMWEAVER CS3 653 User Guide Dreamweaver inserts ASP code in your page that, when run on the server, . A prepared statement object is created by a Java scriptlet on a JSP page. However, Dreamweaver lets you create prepared statements without writing a single line of Java code. If you're interested - Adobe 38040334 | User Guide - Page 661
DREAMWEAVER CS3 654 User Guide 2 Open the Server Behaviors panel (Window writing SQL statements that modify databases, consult a Transact-SQL manual. 5 Use the Variables area to define any SQL variables MySQL and Microsoft Access databases do not support stored procedures. Add a stored procedure ( - Adobe 38040334 | User Guide - Page 662
DREAMWEAVER CS3 655 User Guide 3 In the Data Source pop-up menu, select a connection to the database containing the stored procedure. 4 Enter the ColdFusion Data Source user name and password. 5 Select a stored procedure from the Procedures pop-up menu. Dreamweaver the parameter. 10 Select the - Adobe 38040334 | User Guide - Page 663
DREAMWEAVER CS3 656 User Guide 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. 1 In Dreamweaver 10 - Adobe 38040334 | User Guide - Page 664
CS3 657 User Guide 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. 1 In Dreamweaver - Adobe 38040334 | User Guide - Page 665
DREAMWEAVER CS3 658 User Guide Dreamweaver automatically fills in the Callable Text and Variables boxes. 6 Select the Returns Recordset Named option, enter a name for the recordset, if the stored procedure returns a - Adobe 38040334 | User Guide - Page 666
DREAMWEAVER CS3 659 User Guide • If you want to set a common password for all users of Name the HTML form by clicking the tag at the bottom of the Document window to select the form, opening the Property inspector (Window > Properties), and entering a name in the Form Name box. You don't have - Adobe 38040334 | User Guide - Page 667
DREAMWEAVER CS3 660 User Guide The final step in creating a registration page is to a page alerting the user that the user name is already taken). 1 In the Server Behaviors panel (Window > Server Behaviors), click the Plus (+) button and select User Authentication > Check New Username from the pop - Adobe 38040334 | User Guide - Page 668
DREAMWEAVER CS3 661 User Guide Create a database table of registered users (ColdFusion, ASP, ). You can change the label of the Submit button by selecting the button, opening the Property inspector (Window > Properties), and entering a new value in the Label box. The next step in building a login - Adobe 38040334 | User Guide - Page 669
DREAMWEAVER CS3 662 User Guide 4 Specify the database table and columns that contain the pages Your web application can contain a protected page that only authorized users can access. Note: Dreamweaver does not have authentication server behaviors for ASP.NET pages. For example, if a user attempts - Adobe 38040334 | User Guide - Page 670
DREAMWEAVER CS3 663 User Guide If you do not plan to use authorization levels, you can users to another page 1 Open the page you want to protect. 2 In the Server Behaviors panel (Window > Server Behaviors), click the Plus (+) button and select User Authentication > Restrict Access To Page from the - Adobe 38040334 | User Guide - Page 671
DREAMWEAVER CS3 664 User Guide privilege on your site (for example, Guest); then manually change the exceptions (for example, changing Guest to a page to serve as the link. 2 In the Server Behaviors panel (Window > Behaviors), click the Plus (+) button and select User Authentication > Log - Adobe 38040334 | User Guide - Page 672
DREAMWEAVER CS3 665 User Guide The page is usually a goodbye or thank you page. 2 user name and password that each visitor must enter. • If you selected Windows NT authentication, specify the NT domain to validate against. • If you selected a fast, easy way to create web services. September 4, 2007 - Adobe 38040334 | User Guide - Page 673
DREAMWEAVER CS3 666 User Guide 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 panel overview (ColdFusion) Use the Components panel (Window > Components) to view and edit ColdFusion components - Adobe 38040334 | User Guide - Page 674
DREAMWEAVER CS3 667 User Guide Access menu, the function becomes available as a web service. c To define one or more arguments for a function manually from the server. See also "Build web pages that use CFCs" on page 669 "About ColdFusion components" on page 665 View CFCs in Dreamweaver Dreamweaver - Adobe 38040334 | User Guide - Page 675
DREAMWEAVER CS3 668 User Guide 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 in the panel toolbar. You can also right-click (Windows) or Control-click (Macintosh) the item and select Get - Adobe 38040334 | User Guide - Page 676
DREAMWEAVER CS3 669 User Guide • In the advanced Site Definition dialog box, the path the following procedure to edit a component. 1 Open any ColdFusion page in Dreamweaver and display the components in the Components panel (Window > Components). 2 Select CF Components from the panel's pop-up menu, - Adobe 38040334 | User Guide - Page 677
DREAMWEAVER CS3 670 User Guide For more information, see the ColdFusion documentation from within Dreamweaver (Help > Using ColdFusion). 6 Save the page (File > Save). Define a recordset in a CFC Dreamweaver an existing CFC file in Dreamweaver. 2 In the Bindings panel (Window > Bindings), click the - Adobe 38040334 | User Guide - Page 678
DREAMWEAVER CS3 671 User Guide 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. 1 In the Name box, enter a name for the CFC recordset. A common practice is to add the prefix rs - Adobe 38040334 | User Guide - Page 679
DREAMWEAVER CS3 672 User Guide as a source of dynamic content. However, Dreamweaver supports only repeating regions and dynamic bindings when using the class path or in the Dreamweaver Configuration/classes folder. Define a JavaBean for a JSP page 1 Select Window > Bindings to display the Bindings - Adobe 38040334 | User Guide - Page 680
DREAMWEAVER CS3 673 User Guide 5 Select the bean's class. To list the classes in newly defined JavaBean appears in the Bindings panel. Define a JavaBean collection for a JSP page 1 Select Window > Bindings to display the Bindings panel. 2 Click the Plus (+) button and select JavaBean Collection from - Adobe 38040334 | User Guide - Page 681
the ColdFusion enhancements Some of these enhancements require that you define a computer running ColdFusion MX 7 or later as a testing server for Dreamweaver. For example, the Property inspectors for form controls are available only if you specify the correct testing server. You define a testing - Adobe 38040334 | User Guide - Page 682
DREAMWEAVER CS3 675 User Guide 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 - Adobe 38040334 | User Guide - Page 683
DREAMWEAVER CS3 676 User Guide Archive Specifies the URL of downloadable Java classes for cfgrid, cfslider, and but you can include more than one ColdFusion form in a page. If you're creating a Flash-based form, use Cascading Style Sheets (CSS) styles to lay out your form. ColdFusion ignores any - Adobe 38040334 | User Guide - Page 684
DREAMWEAVER CS3 677 User Guide 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 - Adobe 38040334 | User Guide - Page 685
DREAMWEAVER CS3 678 User Guide Width Lets you specify the width of the control, in pixels. Size Lets you specify the size of the control. Required Lets you specify whether - Adobe 38040334 | User Guide - Page 686
DREAMWEAVER CS3 679 User Guide Note: This enhancement is available only if you have access to a computer running ColdFusion MX 7 or later. 1 Place the insertion point inside the form outline. 2 - Adobe 38040334 | User Guide - Page 687
DREAMWEAVER CS3 680 User Guide 3 Select the button on the page and set any of the following options in the Property inspector: Cfbutton Lets you specify a unique name for the - Adobe 38040334 | User Guide - Page 688
DREAMWEAVER CS3 681 User Guide 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 - Adobe 38040334 | User Guide - Page 689
DREAMWEAVER CS3 682 User Guide 2 In the CFForm category of the Insert bar, click the CF Select supply the value of each list element. Used with the Recordset property. Flash Label Lets you specify a label for the select box. Flash Height Lets you specify the height of the control, in pixels. This - Adobe 38040334 | User Guide - Page 690
DREAMWEAVER CS3 683 User Guide Note: If the image is outside the site root folder, you server. A ColdFusion file field looks like other text fields, except it also has a Browse button. Users can manually enter the path to the file they want to upload, or use the Browse button to locate and select the - Adobe 38040334 | User Guide - Page 691
DREAMWEAVER CS3 684 User Guide To quickly select the form, click anywhere in the form outline and click the tag in the tag selector at the bottom of the Document window. 2 In the Property inspector, set the form method to POST. 3 From the Enctype pop-up menu, select multipart/form-data. 4 - Adobe 38040334 | User Guide - Page 692
DREAMWEAVER CS3 685 User Guide 4 Switch to Design view, select the that appears. Validate ColdFusion form data You can build ColdFusion forms in Dreamweaver that check the contents of specified fields to ensure the user entered the correct data type. - Adobe 38040334 | User Guide - Page 693
DREAMWEAVER CS3 686 User Guide Note: This enhancement is available only if you have access to a computer ASP.NET forms Add ASP.NET form controls to a page You can use the visual design environment in Dreamweaver to add ASP.NET form controls to your page. 1 Open an ASP.NET page in Design view ( - Adobe 38040334 | User Guide - Page 694
DREAMWEAVER CS3 687 User Guide For more information on the properties of each control, see the documentation form control at the insertion point in your page. If you didn't insert a form, Dreamweaver inserts one that includes a runat="server" attribute. See also "Defining sources of dynamic content" - Adobe 38040334 | User Guide - Page 695
DREAMWEAVER CS3 688 User Guide DataSet Specifies the data source you want to use to In the Property inspector, click the List Items button. 3 Select Manually or From Database, depending on how you plan to populate the list. 4 If you select Manually, do the following: • To add a list item, click the - Adobe 38040334 | User Guide - Page 696
DREAMWEAVER CS3 689 User Guide Before you begin, you must define a DataSet or other source of dynamic content for the TextBox. 1 In Design view, select the TextBox on your page. 2 - Adobe 38040334 | User Guide - Page 697
DREAMWEAVER CS3 690 User Guide Auto Postback Indicates whether a postback to the server automatically occurs when the user changes the list selection. Select the option to allow postbacks. For more - Adobe 38040334 | User Guide - Page 698
DREAMWEAVER CS3 691 User Guide Preselect an ASP.NET RadioButton control You can let the server These include bound, button, and template columns, among others. In addition, the DataGrid supports interactive functionality such as column sorting, editing, and commands. The following table shows the - Adobe 38040334 | User Guide - Page 699
DREAMWEAVER CS3 692 User Guide DataGrid Column Type Description Hyperlink The Hyperlink column as a recordset by other document types) for the DataGrid. 1 Open the Server Behaviors panel (Window > Server Behaviors), click the Plus (+) button, and select DataGrid. 2 Select the ID attribute - Adobe 38040334 | User Guide - Page 700
DREAMWEAVER CS3 693 User Guide To change the DataGrid column type, click the Edit button and to as a recordset by other document types) for the DataList. 1 Open the Server Behaviors panel (Window > Server Behaviors), click the Plus (+) button, and select DataList. 2 (Optional) Change the default - Adobe 38040334 | User Guide - Page 701
DREAMWEAVER CS3 694 User Guide You can select an existing DataSet or enter an arbitrary dialog box and create the DataList. In the Document window, the DataList object is displayed with a tabbed, gray outline surrounding it. In the Live Data window (View > Live Data), the gray outline disappears - Adobe 38040334 | User Guide - Page 702
DREAMWEAVER CS3 695 User Guide • 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 - Adobe 38040334 | User Guide - Page 703
DREAMWEAVER CS3 696 User Guide 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 - Adobe 38040334 | User Guide - Page 704
DREAMWEAVER CS3 697 User Guide 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 - Adobe 38040334 | User Guide - Page 705
(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 > History) shows a list of the steps you've performed in the active - Adobe 38040334 | User Guide - Page 706
DREAMWEAVER CS3 699 User Guide Note: To scroll automatically to a particular step, you must click -click the last step. • To select nonadjacent steps, select a step, and then Control-click (Windows) or Command-click (Macintosh) to select or deselect other steps. The steps played are the selected - Adobe 38040334 | User Guide - Page 707
DREAMWEAVER CS3 700 User Guide 2 Click Replay. The steps are replayed in order, and a new Space and H Space boxes to set the image's spacing. 5 Click the image again to make the Document window active without moving the insertion point. 6 Press the Left Arrow key to move the insertion point to the - Adobe 38040334 | User Guide - Page 708
DREAMWEAVER CS3 701 User Guide 9 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. 10 Continue to click Replay until all the - Adobe 38040334 | User Guide - Page 709
DREAMWEAVER CS3 702 User Guide 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 (Windows) - Adobe 38040334 | User Guide - Page 710
3 Enter a name for the command, and click OK. The command appears in the Commands menu. DREAMWEAVER CS3 703 User Guide September 4, 2007 - Adobe 38040334 | User Guide - Page 711
disabilities. Examples of accessibility features for software products and websites include screen reader support, text equivalents for graphics, keyboard shortcuts, change of display colors to high contrast, and so on. Dreamweaver provides tools that make it accessible to use and tools that help - Adobe 38040334 | User Guide - Page 712
-left corner of the Document window. Dreamweaver supports JAWS for Windows, from Freedom Scientific (www.freedomscientific.com), and WindowEyes screen readers, from GW Micro (www.gwmicro.com). Support for operating system accessibility features Dreamweaver supports accessibility features in both the - Adobe 38040334 | User Guide - Page 713
DREAMWEAVER CS3 706 User Guide 5 Use the arrow keys as appropriate: • If an option the Tab key to move through the options in that panel. Navigate the Property inspector 1 Press Control+F3 (Windows only) to display the Property inspector, if it is not visible. 2 Press Control+Alt+Tab until you shift - Adobe 38040334 | User Guide - Page 714
DREAMWEAVER CS3 707 User Guide Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh). 2 panel, which makes it accessible to the screen reader. (If you don't select this option, the also "Insert an image" on page 244 "Inserting Flash content" on page 255 "Validate HTML form data" - Adobe 38040334 | User Guide - Page 715
information is stored in HTML table format. You can view the reference sheet in a web browser or print it. 1 Select Edit > Keyboard Shortcuts (Windows) or Dreamweaver > Keyboard Shortcuts (Macintosh). 2 Click the Export Set As HTML button, which is the third button in the set of four at the top of - Adobe 38040334 | User Guide - Page 716
DREAMWEAVER CS3 709 User Guide shortcut from a command 1 Select Edit > Keyboard Shortcuts (Windows) or Dreamweaver > Keyboard Shortcuts (Macintosh). 2 From the Commands pop appears in the Press Key. Note: If there is a problem with the key combination (for example, if the key combination is - Adobe 38040334 | User Guide - Page 717
operating system, you must be logged in as Administrator (Windows) or root (Mac OS X). To find the latest extensions for Dreamweaver, use the Adobe Exchange website at www.adobe.com/go/dreamweaver_exchange/. Once there, you can log in and download extensions (many of which are free), join discussion - Adobe 38040334 | User Guide - Page 718
features 705 screen readers 705 validation troubleshooting account Adobe Flash See also entries beginning with "Flash." integration with Dreamweaver 382 Adobe Flash Video editing and deleting 268 Flash Player detection 268 inserting 264, 266 options for delivery 265 options for progressive download - Adobe 38040334 | User Guide - Page 719
65, 66 applets. See Java applets application integration, with other Adobe software 366 application servers about 493 setting up 502 application variables authorization levels 662 automating tasks 698 auto-number fields, troubleshooting 529 Autoplay option (Timelines panel) 167 autostretch (Layout - Adobe 38040334 | User Guide - Page 720
313 in external files 335 formatting preferences 309 head section of a document 337 indenting 309, 319, 322, 344 invalid 301 languages, supported 301 line numbers 309 navigation 320 preferences, setting 309 printing 323 Reference panel 323 rewriting automatically 302 searching 320 selecting in - Adobe 38040334 | User Guide - Page 721
459 setting default state of 459 Color option (CSS Rule Definition) 130 color picker Continuous Tone option 223 Dreamweaver 223 Grayscale option 223 Mac OS 223 system 223 using 223 Windows OS option 223 colors adding to assets 114 as assets. See assets choosing 223 code, preferences 312 default - Adobe 38040334 | User Guide - Page 722
or Flash action 352 converting AP elements to tables 161 copying and pasting assets 113 code collapse 325 from Photoshop to Dreamweaver 375 building 637 using with web applications 491 dates inserting 243 troubleshooting 528 DBMS. See database management systems debugging ColdFusion pages 329 - Adobe 38040334 | User Guide - Page 723
Flash files 102 for Fireworks, Flash, and Photoshop files 366 for media objects 273 for Photoshop Flash Player for Flash Video 268 Device Central integration Dreamweaver 385 Device Central. See Adobe files 345 Document window basics 17, 24 magnification 224 page size and download time 19 playing - Adobe 38040334 | User Guide - Page 724
Dreamweaver site 84 files on a server 84 Flash button objects 258 font lists 242 keyboard shortcuts 708 library items 117 media object attributes 271 no-frames content 212 Photoshop 38 error messages See also troubleshooting file already in use 527 Microsoft, troubleshooting 526 event handlers. See - Adobe 38040334 | User Guide - Page 725
in 102 Flash objects, making dynamic 567 Flash SWF files See also Adobe Flash as assets. See assets controlling 352 inserting 256 properties 257 Flash text objects inserting and previewing 260 properties 258 Flash Video. See Adobe Flash Video Flash. See Adobe Flash FlashPaper documents, inserting - Adobe 38040334 | User Guide - Page 726
files 87 log 88, 89 preferences 85 troubleshooting 47 Use Passive FTP option 45 functions, 223 grids as visual guides 24 showing and hiding 175 snapping elements to 175 guides using layout 173 using with supported 243 image maps 293 inserting 244 inserting from Fireworks 367 inserting from Photoshop - Adobe 38040334 | User Guide - Page 727
322, 344 InDesign. See Adobe InDesign Insert bar about 16 286 Fireworks images 367 Flash SWF files 256 Flash text objects 260 HTML Services) 500 Internet Explorer active content 215 content restricted 299 Internet Information Services supported in Dreamweaver 301 layers copying from Photoshop - Adobe 38040334 | User Guide - Page 728
list menus 602 list properties 133, 228 ListBox control 687 lists creating 228 defining styles 133 Live Data Settings dialog box 582 Live Data window about 568 Auto Refresh 582 missing files 581 providing expected parameters 582 URL parameters on toolbar 568, 582 viewing 580 live objects recordset - Adobe 38040334 | User Guide - Page 729
571 navigation shortcuts, in Adobe Help 3 Nest When window 275 properties 274 troubleshooting 275 Dreamweaver site 84 existing documents 75 files 81 linked documents 289 non-HTML files 308 text files 76 operating systems, multiuser 36 optimizing images in Fireworks 368 in Photoshop 379 Photoshop - Adobe 38040334 | User Guide - Page 730
image 248 Placement option 133 planning frames 203 Play Sound action 356 playing Flash objects 260 plug-ins 7 checking 352 in Adobe Store 10 making dynamic 567 Netscape Navigator 274 playing in Document window 275 troubleshooting 275 PNG images as tracing image 175 uses for 243 pointer, changing - Adobe 38040334 | User Guide - Page 731
editing code 331 fixing broken links 296 Flash properties 257 image placeholder 248 Java applet Dreamweaver 376 Put command 89 putting and getting files dependent files 85 on a remote server 87, 89 putting files 89 PWS (Microsoft Personal Web Server) 498 Q queries database 494 troubleshooting - Adobe 38040334 | User Guide - Page 732
540 screen readers, Window-Eyes and JAWS for Windows 705 supported 496 servers See also web servers, application servers about 498 AppleTalk 44, 65, 66 application servers 493 HTTP 498 IP addresses 499 NFS 44, 65, 66 opening an existing connection 84 testing 500 troubleshooting 500 troubleshooting - Adobe 38040334 | User Guide - Page 733
folder, troubleshooting remote folder services 585 software activation 1 downloads 10 registration 1 sound adding to a page 269 embedding 270 linking to an audio file 270 playing 356 source code See also code copying and pasting from Fireworks to Dreamweaver 371 selecting in the Document window - Adobe 38040334 | User Guide - Page 734
, creating 519 SQL Server, troubleshooting dynamic pages 528 stacking order about 18 preferences 26 resizing the Document window 19 setting text (behavior) 359 supported languages 301 Swap Image action 363 Swap Image Restore action 363 swatches, color 223 SWF files editing in Flash from Dreamweaver - Adobe 38040334 | User Guide - Page 735
pre 38 removing 321, 334 searching for 320 selecting 219, 334 server-side 494 tt 38 targeting frames 212 links 283 technical support for servers 498 template expressions 390 template parameters modifying in template-based documents 415 overview 390 Template Properties dialog box 416 template-based - Adobe 38040334 | User Guide - Page 736
guides 175 showing 176 transferring files 87 transferring files to and from Contribute sites 57 transparent pixels in background 217 troubleshooting 525 PHP (Macintosh) 505 PHP (Windows) 504 servers 498, 500 syntax errors 529 updateable queries 528 tryouts 10 tt tag 38 U UDDI public directories - Adobe 38040334 | User Guide - Page 737
Basic 496 visual guides about 24 rulers 175 tracing images 175 W Warn When Opening Read-Only Files option 36 web hosting services 514 server, setting up 499 web applications common uses 491 creating a root folder 506 database connections 501 defined 498 defining a Dreamweaver site 507 requirements - Adobe 38040334 | User Guide - 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
-
1 -
2 -
3 -
4 -
5 -
6 -
7 -
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
-
18
-
19
-
20
-
21
-
22
-
23
-
24
-
25
-
26
-
27
-
28
-
29
-
30
-
31
-
32
-
33
-
34
-
35
-
36
-
37
-
38
-
39
-
40
-
41
-
42
-
43
-
44
-
45
-
46
-
47
-
48
-
49
-
50
-
51
-
52
-
53
-
54
-
55
-
56
-
57
-
58
-
59
-
60
-
61
-
62
-
63
-
64
-
65
-
66
-
67
-
68
-
69
-
70
-
71
-
72
-
73
-
74
-
75
-
76
-
77
-
78
-
79
-
80
-
81
-
82
-
83
-
84
-
85
-
86
-
87
-
88
-
89
-
90
-
91
-
92
-
93
-
94
-
95
-
96
-
97
-
98
-
99
-
100
-
101
-
102
-
103
-
104
-
105
-
106
-
107
-
108
-
109
-
110
-
111
-
112
-
113
-
114
-
115
-
116
-
117
-
118
-
119
-
120
-
121
-
122
-
123
-
124
-
125
-
126
-
127
-
128
-
129
-
130
-
131
-
132
-
133
-
134
-
135
-
136
-
137
-
138
-
139
-
140
-
141
-
142
-
143
-
144
-
145
-
146
-
147
-
148
-
149
-
150
-
151
-
152
-
153
-
154
-
155
-
156
-
157
-
158
-
159
-
160
-
161
-
162
-
163
-
164
-
165
-
166
-
167
-
168
-
169
-
170
-
171
-
172
-
173
-
174
-
175
-
176
-
177
-
178
-
179
-
180
-
181
-
182
-
183
-
184
-
185
-
186
-
187
-
188
-
189
-
190
-
191
-
192
-
193
-
194
-
195
-
196
-
197
-
198
-
199
-
200
-
201
-
202
-
203
-
204
-
205
-
206
-
207
-
208
-
209
-
210
-
211
-
212
-
213
-
214
-
215
-
216
-
217
-
218
-
219
-
220
-
221
-
222
-
223
-
224
-
225
-
226
-
227
-
228
-
229
-
230
-
231
-
232
-
233
-
234
-
235
-
236
-
237
-
238
-
239
-
240
-
241
-
242
-
243
-
244
-
245
-
246
-
247
-
248
-
249
-
250
-
251
-
252
-
253
-
254
-
255
-
256
-
257
-
258
-
259
-
260
-
261
-
262
-
263
-
264
-
265
-
266
-
267
-
268
-
269
-
270
-
271
-
272
-
273
-
274
-
275
-
276
-
277
-
278
-
279
-
280
-
281
-
282
-
283
-
284
-
285
-
286
-
287
-
288
-
289
-
290
-
291
-
292
-
293
-
294
-
295
-
296
-
297
-
298
-
299
-
300
-
301
-
302
-
303
-
304
-
305
-
306
-
307
-
308
-
309
-
310
-
311
-
312
-
313
-
314
-
315
-
316
-
317
-
318
-
319
-
320
-
321
-
322
-
323
-
324
-
325
-
326
-
327
-
328
-
329
-
330
-
331
-
332
-
333
-
334
-
335
-
336
-
337
-
338
-
339
-
340
-
341
-
342
-
343
-
344
-
345
-
346
-
347
-
348
-
349
-
350
-
351
-
352
-
353
-
354
-
355
-
356
-
357
-
358
-
359
-
360
-
361
-
362
-
363
-
364
-
365
-
366
-
367
-
368
-
369
-
370
-
371
-
372
-
373
-
374
-
375
-
376
-
377
-
378
-
379
-
380
-
381
-
382
-
383
-
384
-
385
-
386
-
387
-
388
-
389
-
390
-
391
-
392
-
393
-
394
-
395
-
396
-
397
-
398
-
399
-
400
-
401
-
402
-
403
-
404
-
405
-
406
-
407
-
408
-
409
-
410
-
411
-
412
-
413
-
414
-
415
-
416
-
417
-
418
-
419
-
420
-
421
-
422
-
423
-
424
-
425
-
426
-
427
-
428
-
429
-
430
-
431
-
432
-
433
-
434
-
435
-
436
-
437
-
438
-
439
-
440
-
441
-
442
-
443
-
444
-
445
-
446
-
447
-
448
-
449
-
450
-
451
-
452
-
453
-
454
-
455
-
456
-
457
-
458
-
459
-
460
-
461
-
462
-
463
-
464
-
465
-
466
-
467
-
468
-
469
-
470
-
471
-
472
-
473
-
474
-
475
-
476
-
477
-
478
-
479
-
480
-
481
-
482
-
483
-
484
-
485
-
486
-
487
-
488
-
489
-
490
-
491
-
492
-
493
-
494
-
495
-
496
-
497
-
498
-
499
-
500
-
501
-
502
-
503
-
504
-
505
-
506
-
507
-
508
-
509
-
510
-
511
-
512
-
513
-
514
-
515
-
516
-
517
-
518
-
519
-
520
-
521
-
522
-
523
-
524
-
525
-
526
-
527
-
528
-
529
-
530
-
531
-
532
-
533
-
534
-
535
-
536
-
537
-
538
-
539
-
540
-
541
-
542
-
543
-
544
-
545
-
546
-
547
-
548
-
549
-
550
-
551
-
552
-
553
-
554
-
555
-
556
-
557
-
558
-
559
-
560
-
561
-
562
-
563
-
564
-
565
-
566
-
567
-
568
-
569
-
570
-
571
-
572
-
573
-
574
-
575
-
576
-
577
-
578
-
579
-
580
-
581
-
582
-
583
-
584
-
585
-
586
-
587
-
588
-
589
-
590
-
591
-
592
-
593
-
594
-
595
-
596
-
597
-
598
-
599
-
600
-
601
-
602
-
603
-
604
-
605
-
606
-
607
-
608
-
609
-
610
-
611
-
612
-
613
-
614
-
615
-
616
-
617
-
618
-
619
-
620
-
621
-
622
-
623
-
624
-
625
-
626
-
627
-
628
-
629
-
630
-
631
-
632
-
633
-
634
-
635
-
636
-
637
-
638
-
639
-
640
-
641
-
642
-
643
-
644
-
645
-
646
-
647
-
648
-
649
-
650
-
651
-
652
-
653
-
654
-
655
-
656
-
657
-
658
-
659
-
660
-
661
-
662
-
663
-
664
-
665
-
666
-
667
-
668
-
669
-
670
-
671
-
672
-
673
-
674
-
675
-
676
-
677
-
678
-
679
-
680
-
681
-
682
-
683
-
684
-
685
-
686
-
687
-
688
-
689
-
690
-
691
-
692
-
693
-
694
-
695
-
696
-
697
-
698
-
699
-
700
-
701
-
702
-
703
-
704
-
705
-
706
-
707
-
708
-
709
-
710
-
711
-
712
-
713
-
714
-
715
-
716
-
717
-
718
-
719
-
720
-
721
-
722
-
723
-
724
-
725
-
726
-
727
-
728
-
729
-
730
-
731
-
732
-
733
-
734
-
735
-
736
-
737
-
738
 |
 |
USER GUIDE
ADOBE
®
DREAMWEAVER
®
CS
3
September 4, 2007