Download Print this page

MACROMEDIA DREAMWEAVER MX 2004-USING DREAMWEAVER Use Manual

Hide thumbs Also See for DREAMWEAVER MX 2004-USING DREAMWEAVER:

Use manual (976 pages)

,

Use manual (302 pages)

,

Use manual (344 pages)

Table of Contents

Advertisement

Quick Links

Download this manual See also: Using Manual

Using Dreamweaver

Table of Contents

Advertisement

Chapters

Table of Contents

Troubleshooting

Need help?

Need help?

Do you have a question about the DREAMWEAVER MX 2004-USING DREAMWEAVER and is the answer not in the manual?

Questions and answers

Summary of Contents for MACROMEDIA DREAMWEAVER MX 2004-USING DREAMWEAVER

Page 1 Using Dreamweaver...
Page 2 If you access a third-party website mentioned in this guide, then you do so at your own risk. Macromedia provides these links only as a convenience, and the inclusion of the link does not imply that Macromedia endorses or accepts any responsibility for the content on those third-party sites.
Page 3: Table Of Contents
CONTENTS PART I: Dreamweaver Basics INTRODUCTION: Welcome to Dreamweaver ......17 What’s new in Dreamweaver MX 2004 ....... . . 18 Where to start .
Page 4 CHAPTER 3: Creating and Opening Documents ......69 Creating new documents ..........70 Saving a new document.
Page 5 PART III: Laying Out Pages CHAPTER 7: Laying Out Pages with CSS ......145 About layers in Dreamweaver .
Page 6: Inserting
Viewing and setting frame properties and attributes ..... . 210 Viewing and setting frameset properties ....... 212 Controlling frame content with links.
Page 7: Insert
CHAPTER 14: Inserting Images ........303 About images .
Page 8 Inserting Netscape Navigator plug-in content ......367 Inserting an ActiveX control ........368 Inserting a Java applet .
Page 9 CHAPTER 22: Editing Code in Design View ......441 Editing code with the Property inspector....... 441 Changing attributes with the Tag inspector .
Page 10 CHAPTER 28: Database Connections for PHP Developers ....487 Connecting to a database......... . . 487 Editing or deleting a database connection .
Page 11 CHAPTER 34: Adding Dynamic Content to Web Pages ....545 About adding dynamic content ........546 Making text dynamic .
Page 12 CHAPTER 39: Creating Forms ........607 About forms .
Page 13 CHAPTER 43: Building PHP Applications Rapidly ..... . 719 Building master/detail pages (PHP)........719 Building search/results pages (PHP) .
Page 14 Contents...
Page 15 PART I Dreamweaver Basics Learn how to use Macromedia Dreamweaver MX 2004 documentation and other resources, and set up the Dreamweaver workspace to fit your preferred working style. Then plan and set up a site, and begin to create pages.
Page 17: Introduction: Welcome To Dreamweaver
INTRODUCTION Welcome to Dreamweaver Macromedia Dreamweaver MX 2004 is a professional HTML editor for designing, coding, and developing websites, web pages, and web applications. Whether you enjoy the control of hand-coding HTML or prefer to work in a visual editing environment, Dreamweaver provides you with helpful tools to enhance your web creation experience.
Page 18: What's New In Dreamweaver Mx 2004
What’s new in Dreamweaver MX 2004 Dreamweaver MX 2004 contains a new, streamlined interface, along with improved product performance. There’s also a wide variety of new features that improve usability and help you build pages whether you are working in the design environment or the coding environment. Streamlined design and development interface The Dreamweaver interface is more approachable to help you improve your productivity and quality of work.
Page 19: About
254. Integrated image-editing toolbar enables you to do basic image manipulation and editing from Dreamweaver using Macromedia Fireworks technology. You can crop, resize, resample, and so on, without leaving Dreamweaver. For more information, see “Editing images in Dreamweaver” on page 304.
Page 20: Where To Start
Improved support for ASP.NET form controls provides new and improved ways, including new Property inspectors, to build and manipulate ASP.NET web forms in Design view. For more information, see Chapter 42, “Building ASP and JSP Applications Rapidly,” on page 703. Code view context menu enables you to make quick formatting changes to selected code.
Page 21 If you’re interested in customizing Dreamweaver by hand, read Customizing Dreamweaver on the Macromedia Support Center at www.macromedia.com/go/customizing_dreamweaver. If you want to write extensions for Dreamweaver, read Extending Dreamweaver Help. Experienced hand-coders If you are an experienced hand-coder, this section will point you to sections of the Dreamweaver documentation that are most appropriate for your background.
Page 22: Dreamweaver Workflow For Creating Websites
Dreamweaver user interface. If you’re interested in customizing Dreamweaver by hand, read “Customizing Dreamweaver” on the Macromedia Support Center at www.macromedia.com/go/customizing_dreamweaver. If you want to write extensions for Dreamweaver, read Extending Dreamweaver Help. Dreamweaver workflow for creating websites There are many possible approaches to creating a website.
Page 23: From
Once you’ve organized your information and determined a structure, you can begin creating your site. • Use the Dreamweaver Files panel to set up your site’s organizational structure. In the Files panel, you can easily add, delete, and rename files and folders to change the organization as needed.
Page 24 Adding content to pages Using Dreamweaver, you can easily add a variety of content to web pages. Add assets and design elements, such as text, images, colors, movies, sound, and other forms of media. • Dreamweaver page creation features enable you to specify web page properties such, as page titles, background images and colors.
Page 25: Using Dreamweaver With Other Applications
You can specify preferred browsers for previewing your site. (See “Previewing and testing pages in browsers” on page 270.) • You can start an external image editor, such as Macromedia Fireworks or Adobe Photoshop, from within Dreamweaver. (See “Using an external image editor” on page 313.) •...
Page 26: Dreamweaver And Accessibility
363, “Downloading and installing Flash elements” on page 364. • To learn how to add animation to your site using Macromedia Shockwave movies, see “Inserting Shockwave movies” on page 365. • For information about using ColdFusion, see ColdFusion help in Dreamweaver (Help > Using ColdFusion).
Page 27: Guide To Dreamweaver Instructional Media
UsableNet is an industry leader in developing easy-to-use software to automate usability and accessibility testing and repair. For additional assistance with accessibility testing, try the UsableNet LIFT for Macromedia Dreamweaver, a complete solution for developing usable and accessible websites. UsableNet Lift for Macromedia Dreamweaver includes fix wizards for complex tables, forms, and images;...
Page 28 Macromedia Dreamweaver Training and Certification provides hands-on tasks and real-world scenarios. Choose between instructor-led and online training, or combine them to create a learning path that is most effective for you. Learn more on the Macromedia website at www.macromedia.com/go/dreamweaver_training. Dreamweaver PDFs are available on your product CD for the complete set of Dreamweaver documentation.
Page 29: Typographical Conventions
(www.bbsinc.com/iso8859.html) lists the entity names used in ISO 8859-1 (Latin-1). Macromedia ColdFusion product page (www.macromedia.com/go/coldfusion/) provides information about ColdFusion. Macromedia JRun Server product page (www.macromedia.com/go/jrun/) provides information about the JRun Java application server. IBM WebSphere page (www.ibm.com/software/webservers/appserv/) provides information about the WebSphere application server.
Page 30 Sun ONE product page (www.Chilisoft.com/products/) provides information about the Sun ONE ASP application server. Web Services Demystified (www.sitepoint.com/article/692) explains what web services are and how they work. JavaScript Bible , by Danny Goodman (IDG Books), comprehensively covers the JavaScript 1.2 language. JavaScript: The Definitive Guide , by David Flanagan (O’Reilly &...
Page 31: Chapter 1: Exploring The Workspace
CHAPTER 1 Exploring the Workspace To get the most out of your Macromedia Dreamweaver MX 2004 experience, you should understand the basic concepts behind the Dreamweaver workspace and how to select options, use inspectors and panels, and set preferences that fit your work style best.
Page 32: About The Dreamweaver Workspace
About the Dreamweaver workspace The Dreamweaver workspace enables you to view documents and object properties. The workspace also places many of the most common operations in toolbars so that you can quickly make changes to your documents. The workspace layout In Windows, Dreamweaver provides an all-in-one-window integrated layout.
Page 33 On the Macintosh, Dreamweaver provides a floating workspace layout, in which each document is in its own individual window. Panel groups are initially docked together, but can be undocked into their own windows. Windows “snap” automatically to each other, to the sides of the screen, and to the Document window as you drag or resize them.
Page 34 The Insert bar contains buttons for inserting various types of “objects,” such as images, tables, and layers, into a document. Each object is a piece of HTML code that enables you to set various attributes as you insert it. For example, you can insert a table by clicking the Table button in the Insert bar.
Page 35 When the Document window has a title bar, the title bar displays the page title and, in parentheses, the file’s path and filename. After the filename, Dreamweaver displays an asterisk if you’ve made changes that you haven’t saved yet. When the Document window is maximized in the integrated workspace layout (Windows only), it has no title bar;...
Page 36 Refresh Design View refreshes the document’s Design view after you make changes in Code view. Changes you make in Code view don’t automatically appear in Design view until you perform certain actions, such as saving the file or clicking this button. View Options allows you to set options for Code view and Design view, including which view should appear above the other.
Page 37 Insert bar buttons you use the most in one common place. You can modify any object in the Insert bar or create your own objects (see “Customizing Dreamweaver” on the Macromedia Support Center at www.macromedia.com/go/ customizing_dreamweaver).
Page 38: Checking
These user configuration files are stored in a folder belonging to you. For example, in Windows XP they’re stored in C:\Documents and Settings\username\Application Data\Macromedia\Dreamweaver MX\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/Macromedia/Dreamweaver MX/Configuration.
Page 39: Working In The Document Window
Working in the Document window The Document window shows the current document. You can view a document in Design view, Code view, or Code and Design views. The Document window’s status bar provides information about the current document. Related topics •...
Page 40 Resizing the Document window The status bar displays the Document window’s current dimensions (in pixels). To design a page that looks its best at a specific size, you can adjust the Document window to any of the predetermined sizes, edit those predetermined sizes, or create new sizes. To resize the Document window to a predetermined size: •...
Page 41: Using Toolbars, Inspectors, And Context Menus
Setting Status Bar preferences Set preferences for the status bar using the Preferences dialog box. To set preferences for the status bar: Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh). The Preferences dialog box appears. Select Status Bar from the Category list on the left. Set preference options.
Page 42 Using the Insert bar The Insert bar contains buttons for creating and inserting objects such as tables and images. The buttons are organized into categories. When you roll the pointer over a button, a tooltip appears with the name of the button. Related topics •...
Page 43 To show Insert bar categories as tabs: • Click the arrow beside the category name on the left end of the Insert bar, then select Show as Tabs. The Insert bar displays the categories as tabs across the top of the Insert bar. Note: You might need to click the Insert bar title bar to reopen the Insert bar.
Page 44 To modify preferences for the Insert bar: Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh). The Preferences dialog box displays the General preferences category. Deselect Show Dialog When Inserting Objects to suppress dialog boxes when you insert objects such as images, tables, scripts, and head elements or by holding down the Control key (Windows) or the Option key (Macintosh) while creating the object.
Page 45 Using the Property inspector The Property inspector lets you examine and edit the most common properties for the currently selected page element, such as text or an inserted object. The contents of the Property inspector vary depending on the element selected. Note: Use the Tag inspector to view and edit every attribute associated with a given tag properties (see “Changing attributes with the Tag inspector”...
Page 46: Using Panels And Panel Groups
Using context menus Dreamweaver makes extensive use of context menus, which provide convenient access to the most useful commands and properties related to the object or window you’re working with. Context menus list only those commands that pertain to the current selection. To use a context menu: Right-click (Windows) or Control-click (Macintosh) the object or window.
Page 47 To open a panel group or panel that isn’t visible on your screen: • Select the Window menu, then select a panel name from the menu. A check mark next to an item in the Window menu indicates that the named item is currently open (though it may be hidden behind other windows).
Page 48 To drag a floating (undocked) panel group without docking it: • Drag the panel group by the bar above its title bar. The panel group doesn’t dock as long as you don’t drag it by its gripper. Resizing and renaming panel groups You can change the size and name of panel groups depending on your needs.
Page 49: Using Dreamweaver Accessibility Features
Using Dreamweaver accessibility features Dreamweaver provides features that make it accessible to users with disabilities. Specifically, Dreamweaver supports screen readers, operating system accessibility features, and keyboard navigation. Related topics • “Dreamweaver and accessibility” on page 26 Using screen readers with Dreamweaver A screen reader recites text that appears on the computer screen.
Page 50 Using the keyboard to navigate Dreamweaver You can use the keyboard to navigate Dreamweaver panels, inspectors, dialog boxes, frames, and tables without a mouse. Related topics • “Using screen readers with Dreamweaver” on page 49 • “Support for operating system accessibility features (Windows only)” on page 49 Navigating panels You can use the keyboard to navigate the panels.
Page 51 Navigating the Property inspector You can use the keyboard to navigate the Property inspector and make changes to your document. Note: Tabbing and the use of arrow keys are supported for Windows only. To navigate the Property inspector: Press Control+F3 to display the Property inspector, if it is not visible. Press Control+Alt+Tab until you shift focus to the Property inspector.
Page 52 Navigating frames If your document contains frames, you can use the arrow keys to shift focus to a frame. Note: Tabbing and the use of arrow keys are supported for Windows only. To select a frame: Place the insertion point in the Document window. Press Alt+Up Arrow to select the frame that currently has focus.
Page 53: Optimizing The Workspace For Accessible Page Design
Optimizing the workspace for accessible page design When you create accessible pages, you need to associate information, such as labels and descriptions, with your page objects to make your content accessible to all users. To do this, activate the Accessibility dialog box for each object, so that Dreamweaver prompts you for accessibility information when you insert objects.
Page 54: Using Visual Guides In Dreamweaver
160.) • Use a tracing image as the page background to help you duplicate a design created in an illustration or image-editing application such as Macromedia Fireworks. (See “Using a tracing image” on page 161.) •...
Page 55 Coder is the same integrated workspace, but with the panel groups docked on the left, in a layout similar to that used by Macromedia HomeSite and Macromedia ColdFusion Studio, and with the Document window showing Code view by default. Note: You can dock panel groups on either side of the workspace in either layout.
Page 56 To display the Start page: Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh). The Preferences dialog box appears displaying the General preferences category. Select the Show Start Page checkbox. The Start page appears when you start Dreamweaver, or after you open and close a document. Setting General preferences for Dreamweaver The General preferences control the general appearance of Dreamweaver.
Page 57 “About customizing Dreamweaver in multiuser systems” on page To find the latest extensions for Dreamweaver, use the Macromedia Exchange website at www.macromedia.com/go/dreamweaver_exchange/. Once there, you can log in and download extensions (many of which are free), join discussion groups, view user ratings and reviews, and install and use the Extension Manager.
Page 58 To install and manage extensions: On the Macromedia Exchange website, click the download link for an extension. Your browser may let you choose to open and install it directly from the site or save it to disk. If you are opening the extension directly from the site, the Extension Manager handles the installation automatically.
Page 59: Chapter 2: Setting Up A Dreamweaver Site
A website is a set of linked documents and assets with shared attributes, such as related topics, a similar design, or a shared purpose. Macromedia Dreamweaver MX 2004 is a site creation and management tool, so you can use it to create complete websites, in addition to individual documents.
Page 60 All you need to do to define a Dreamweaver site is set up a local folder. To transfer files to a web server or to develop web applications, you need to also add information for a remote site and testing server. The remote folder is where you store your files, depending on your development environment, for testing, production, collaboration, and so on.
Page 61 For example, if your remote site’s root folder, named public_html, contains two folders, Project1 and Project2, and you want to work only on the HTML files in Project1, you don’t need to download the files in Project2, but you must map your local root folder to public_html, not to Project1.
Page 62: Setting Up A New Dreamweaver Site
Setting up a new Dreamweaver site After you plan your site structure, or if you already have an existing site, you should define a site in Dreamweaver before you start developing. Setting up a Dreamweaver site is a way to organize all of the documents associated with a website.
Page 63: Using The Advanced Settings To Set Up A Dreamweaver Site
Using the Advanced settings to set up a Dreamweaver site You can use the Advanced settings of the Site Definition dialog box to set up a Dreamweaver site. The Advanced settings enable you to set up local, remote, and testing (for processing dynamic pages) folders individually, as necessary.
Page 64 Click the Advanced button, if the Advanced settings aren’t showing. The Advanced tab of the Site Definition dialog box displays the Local Info category options. Enter the Local Info options. For more information, click the Help button in the dialog box. (Optional) If you are ready to set up your remote server now, skip the remaining step;...
Page 65 Setting up a remote folder After you set up a local folder for a Dreamweaver site (see “Setting up a local folder” on page 63), you can set up a remote folder. Depending on your development environment, the remote folder is where you store files for testing, collaboration, production, deployment, or so on.
Page 66 Troubleshooting the remote folder setup A web server can be configured in a wide variety of ways. The following list provides information on some common issues you may encounter in setting up a remote folder (see “Setting up a remote folder” on page 65), and how to resolve them: •...
Page 67: Editing Settings For A Dreamweaver Site
Editing settings for a Dreamweaver site Use the Site Definition Advanced settings to edit your Dreamweaver sites. To edit settings for a Dreamweaver site, do one of the following: • Select Site > Manage Sites, select a site in the Manage Sites dialog box, then click Edit. •...
Page 68 Editing an existing remote website in Dreamweaver You can use Dreamweaver to copy an existing remote site (or any branch of a remote site) to your local disk and edit it there, even if you didn’t use Dreamweaver to create the original site. Note: This section sets up a Dreamweaver site to edit an existing remote website.
Page 69: Chapter 3: Creating And Opening Documents
CHAPTER 3 Creating and Opening Documents Macromedia Dreamweaver MX 2004 offers a flexible environment for working with a variety of web design and development documents. In addition to HTML documents, you can create and open a variety of text-based documents, including CFML, ASP, JavaScript, and CSS.
Page 70: Creating New Documents
Creating new documents Dreamweaver provides you with several choices for selecting a new document to work in. You can create a new document in the following ways: • Start with a blank document (see “Creating a new blank document” on page 70).
Page 71 To create a new document from a Dreamweaver design file: Select File > New. The New Document dialog box appears. The General tab is already selected. In the Category list, select CSS Style Sheets, Table Based Layouts, Page Designs (CSS), Page Designs, or Page Designs (Accessible);...
Page 72: Saving A New Document
To create a new document from a template in the Assets panel: Open the Assets panel (Window > Assets), if it is not already open. In the Assets panel, click the Templates icon on the left to view the list of templates in your current site.
Page 73: Opening Existing Documents
Set or change preferences as necessary. For more information on options in the dialog box, click the Help button. Click OK. Dreamweaver saves your preferences. Opening existing documents In Dreamweaver, you can open an existing web page or text-based document, even if it wasn’t created in Dreamweaver.
Page 74: Importing A Microsoft Word Html File
Importing a Microsoft Word HTML file In Dreamweaver, you can import documents saved by Microsoft Word as HTML files, then use the Clean Up Word HTML command to remove the extraneous HTML code generated by Word. The Clean Up Word HTML command is available for documents saved as HTML files by Word 97 or later.
Page 75 PART II Working with Dreamweaver Sites Learn how to manage Macromedia Dreamweaver MX 2004 sites and site-specific assets. This part contains the following chapters: Chapter 4, “Managing Your Files,” on page 77 Chapter 5, “Managing Site Assets and Libraries,” on page 115...
Page 77: Chapter 4: Managing Your Files
CHAPTER 4 Managing Your Files Macromedia Dreamweaver MX 2004 helps you organize and manage your files. Dreamweaver includes a number of features for managing files and transferring files to and from a remote server. When you transfer files between local and remote sites, Dreamweaver maintains parallel file and folder structures between the sites.
Page 78: About Site Management
About site management Dreamweaver includes a number of features for managing a site and transferring files to and from a remote server. Dreamweaver also contains features to make collaborative work on a website easier, such as Check In/Check Out and Design Notes. The Check In/Check Out system If you’re working in a collaborative environment, you can check files in and out from local and remote servers.
Page 79 If you open a file in Macromedia Fireworks or Flash and export it to another format, Fireworks and Flash automatically save the name of the original source file in a Design Notes file. For example, if you open myhouse.png in Fireworks and export it to myhouse.gif, Fireworks creates a...
Page 80: Accessing Sites, A Server, And Local Drives
Accessing sites, a server, and local drives You can access, modify, and save files and folders in your Dreamweaver sites, as well as files and folders that are not part of a Dreamweaver site. In addition to Dreamweaver sites, you can access a server, a local drive, or your desktop.
Page 81 To access a local drive or your desktop: In the Files panel (Window > Files), select Desktop, Local Disk, or CD Drive from the pop-up menu (where the current site, server, or drive appears). Navigate to a file, then do any of the following: Open files in Dreamweaver or another application Rename files Copy files...
Page 82 Setting up Dreamweaver to work without defining a site Dreamweaver enables you to connect to an FTP or RDS server to work on your documents without creating a Dreamweaver site. Note: If you work on files without creating a Dreamweaver site, you will not be able to perform sitewide operations, such as link checking.
Page 83: Viewing Files And Folders
Complete the dialog box. For more information, click the Help button in the dialog box. Note: You only need to complete this dialog box once for each server you want to connect to. Click OK. The Files panel displays the contents of the remote server folder you connected to, and the server name appears in the pop-up menu at the top of the panel.
Page 84 To change the site view in Files panel, do one of the following (Dreamweaver sites only): • In the collapsed Files panel (Window > Files), select Local View, Remote View, Testing Server, or Map View from the Site View pop-up menu. Note: Local View appears in the pop-up menu by default.
Page 85 To sort by any detail column in the Files panel: • Click the heading for the column you want to sort. Tip: Click the heading again to reverse the order (ascending or descending) by which Dreamweaver sorts the column. To add, delete, or change detail columns: Select Site >...
Page 86: Managing Files And Folders In The Files Panel
Managing files and folders in the Files panel You can organize and manage your site files and folders whether they are part of a Dreamweaver site, on a server you’ve connected to, or on your local drive or desktop. Note: In previous versions of Dreamweaver, the Files panel was called the Site panel. Related topics •...
Page 87 Working with files in the Files panel You can open or rename files; add, move, or delete files; or refresh the Files panel after you make changes. For Dreamweaver sites, you can also determine which files (on either the local or remote site) have been updated since the last time they were transferred.
Page 88 To refresh the Files panel, do one of the following: • Right-click (Windows) or Control-click (Macintosh) any file or folder, then select Refresh. • (Dreamweaver sites only) Click the Refresh button in the Files panel toolbar (this option refreshes both panes). Note: Dreamweaver automatically refreshes the Files panel when you make changes in another application, then return to Dreamweaver.
Page 89: Working With A Visual Map Of Your Site
To locate and select files that are newer in the remote site than in the local site: • In the collapsed Files panel (Window > Files), click the Options menu in the upper right corner of the Files panel, then select Edit > Select Newer Remote. Dreamweaver selects the files in the Files panel.
Page 90: Related Topics "Viewing A Site Map
Viewing a site map You must define a home page for your site before you can display the site map. The site’s home page can be any page in your site; it does not have to be the main page for your site. In this case, the home page is simply the starting point of the map.
Page 91: Modifying The Site Map Layout
Notice the colors in the site map: Text displayed in red indicates a broken link. Text displayed in blue and marked with a globe icon indicates a file on another site or a special link (such as an e-mail or script link). A green check mark indicates a file checked out by you.
Page 92: Working With Pages In The Site Map
Select Site Map Layout from the Category list on the left. The Site Definition dialog box displays Site Map Layout options. Make changes as necessary. For more information, click the Help button in the dialog box. Click OK to close the Site Definition dialog box. Click Done to close the Manage Sites dialog box, if it is open.
Page 93 To add an existing file to the site, do one of the following: • Drag the file from the Windows Explorer or the Macintosh Finder to a file in the site map. The page is added to the site, and a link is created between it and the file you dragged it to. •...
Page 94 To update the site map display after making changes: Click anywhere in the site map to deselect any files. Click the Refresh button in the Files panel toolbar. Related topics • “Viewing a site map” on page 90 • “Modifying the site map layout” on page 91 •...
Page 95 To show dependent files in the site map: In the collapsed Files panel (Window > Files), click the Options menu in the upper right corner. Do one of the following: Select View > Show Dependent Files. Select View > Layout to open the Site Definition dialog box, then select the Display Dependent Files option.
Page 96: Importing And Exporting Sites
Saving the site map You can save the site map as an image, then view the image in (or print it from) an image editor. To create an image file of the current site map: In the collapsed Files panel (Window > Files), click the Options menu in the upper right corner, then select File >...
Page 97: Removing A Dreamweaver Site From Your List Of Sites
To import a site: Select Site > Manage sites. The Manage Sites dialog box appears. Click the Import button. The Import Site dialog box appears. Browse to and select a site (saved as an XML file) to import. Note: You must export the site from Dreamweaver, which saves the site as an XML file, before you can import the file.
Page 98 Setting up the Check In/Check Out system Before you can use the Check In/Check Out system, you must associate your local site with a remote server (see “Setting up a remote folder” on page 65). To set up the Check In/Check Out system: Select Site >...
Page 99 Checking files into and out of a remote folder After you set up the Check In/Check Out system (see “Setting up the Check In/Check Out system” on page 98), you can check in and check out files on a remote server using the Files panel or from the Document window.
Page 100 To check in or check out an open file from the Document window: Make sure the file you want to check in or out is active in the Document window. Note: You can check in only one open file at a time. Do one of the following: Select Site >...
Page 101: Getting And Putting Files To And From Your Server
Getting and putting files to and from your server If you’re working in a collaborative environment, use the Check In/Check Out system to transfer files between local and remote sites (see “Checking in and checking out files” on page 97). If you’re the only person working on the remote site, however, you can use the Get and Put commands to transfer files without checking them in or out.
Page 102 To get a file from a remote server using the Document window: Make sure the document is active in the Document window. Do one of the following to get the file: Select Site > Get. Click the File Management icon in the Document window toolbar, then select Get from the pop-up menu.
Page 103: Synchronizing The Files On Your Local And Remote Sites
If the file hasn’t been saved, a dialog box may appear (depending on your preference setting in the Site category of the Preferences dialog box) allowing you to save the file before putting it on the remote server. If a dialog box appears, click Yes to save the file or No to put the previously saved version on the remote server.
Page 104: Cloaking Folders And Files In Your Site
To see which files are newer on the local site or the remote site, without synchronizing, do one of the following: • In the Files panel, click the Options menu in the upper right corner of the Files panel, then select Select >...
Page 105 Enabling and disabling site cloaking Site cloaking is enabled by default. You can disable cloaking permanently or just temporarily to perform an operation on all files, including cloaked files. When you disable site cloaking, all cloaked files are uncloaked. When you enable site cloaking again, any previously cloaked files become cloaked again.
Page 106 Cloaking and uncloaking specific file types You can indicate specific file types to cloak, so that Dreamweaver cloaks all files ending with a specified pattern. For example, you can cloak all files ending with the .txt extension. The file types that you enter do not have to be file extensions;...
Page 107 To uncloak specific file types within a site: In the Files panel (Window > Files), select a select a site that has site cloaking enabled from the pop-up menu where the current site, server, or drive appears. Right-click (Windows) or Control-click (Macintosh), then select Cloaking > Settings. The Advanced Site Definition dialog box appears.
Page 108: Storing File Information In Design Notes
Storing file information in Design Notes Design Notes are notes associated with a file, but stored in a separate file. Use Design Notes to keep track of extra file information associated with your documents, such as image source- filenames and comments on file status. Related topics •...
Page 109 Associating Design Notes with files You can create a Design Notes file for each document or template in your site. You can also create Design Notes for applets, ActiveX controls, images, Flash content, Shockwave objects, and image fields in your documents. Note: If you add Design Notes to a template file, documents you create with the template do not inherit the Design Notes.
Page 110 Working with Design Notes After you associate a Design Note with a file (see “Associating Design Notes with files” on page 109), you can open the Design Note, change its status, or delete it. To open Design Notes associated with a file, do one of the following: •...
Page 111: Testing Your Site
Testing your site Dreamweaver provides several features to help you test your site, including previewing pages and checking for browser compatibility. You can also run various reports, such as a broken links report. Site testing guidelines Before uploading your site to a server and declaring it ready for viewing, it’s a good idea to test it locally.
Page 112 After you run a report, you can save it as an XML file, then import it into a template instance or a database or spreadsheet and print it, or display it on a website. Note: You can also add different report types to Dreamweaver through the Macromedia Dreamweaver Exchange website (see “Adding extensions to Dreamweaver”...
Page 113 To run reports to test a site: Select Site > Reports. Tip: If you want to run only an accessibility report for your site, you can select File > Check Page > Check Accessibility and the report appears in the Site Reports panel of the Results panel group. The Reports dialog box appears.
Page 114 To use and save a report: Run a report (see the previous procedure). In the Site Reports panel, do any of the following to view the report: Click the column heading you want to sort results by. You can sort by filename, line number, or description. You can also run several different reports and keep the different reports open.
Page 115: Chapter 5: Managing Site Assets And Libraries
You can use Macromedia Dreamweaver MX 2004 to manage your site assets. You can easily keep track of and preview several kinds of assets that you have stored in your site, such as images, movies, colors, scripts, and links.
Page 116: Working With Assets
Assets include a variety of elements that you store in a site, such as an image or movie file. You can obtain assets from various sources. For example, you might create assets in an application such as Macromedia Fireworks or Macromedia Flash, receive them from a co-worker, or copy them from a clip-art CD or graphics website.
Page 117 Viewing assets in the Assets panel You can view and manage assets in the current site using the Assets panel. The Assets panel displays assets for the site associated with the active document in the Document window. Note: You must define a local site before you can view assets in the Assets panel. For more information about setting up a site, see “Setting up a new Dreamweaver site”...
Page 118 To view the Favorites list: • In the Assets panel (Window > Assets), select the Favorites option at the top of the panel. The Favorites list is empty until you explicitly add assets to it. Note: In the Templates and Library categories (on the left side of the Assets panel), the Site and Favorites choices are unavailable.
Page 119 To manually refresh the Site list: In the Assets panel (Window > Assets), select the Site option at the top of the panel to see the Site list. Click the Refresh Site List button at the bottom of the Assets panel. Dreamweaver creates the site cache or updates it as necessary, and the Assets panel updates to show the site assets.
Page 120 Applying a color to text using the Assets panel The colors in the Assets panel represent colors you’ve applied to various elements in your site, such as text, table border, background color, and so on. You can use the color swatches in the Color category to consistently apply your color choices to objects on a page.
Page 121 Selecting and editing assets The Assets panel allows you to select multiple assets at once. It also provides a quick way to begin editing assets. To select multiple assets: In the Assets panel (Window > Assets), select one of the assets. Select the other assets in one of the following ways: Shift-click to select a consecutive series of assets.
Page 122 Reusing assets in another site The Assets panel shows all the assets (of recognized types) in your current site. To use an asset from the current site in another site, you must copy it to the other site. You can copy an individual asset, a set of individual assets, or an entire Favorites folder at once.
Page 123: Creating And Managing A List Of Favorite Assets
Creating and managing a list of favorite assets Because the Assets panel’s Site list always shows all of the recognized assets in the site, this list can become cumbersome for some large sites. You can add frequently used assets to a Favorites list, group related assets together, give them nicknames to remind you what they’re for, and find them easily in the Assets panel.
Page 124 To remove assets from your Favorites list: In the Assets panel (Window > Assets), select the Favorites option at the top of the panel. Select one or more assets (or a folder) in the Favorites list. Click the Remove From Favorites button at the bottom of the panel. The assets are removed from the Favorites list, but they still appear in the Site list.
Page 125: Working With Library Items
Grouping assets in a Favorites folder You can group assets in your Favorites list in folders in the Assets panel. For example, if you have a set of images that you use on numerous catalog pages in an e-commerce site, you could group them together in a folder called CatalogImages.
Page 126 To create a library item based on a selection: In the Document window, select a portion of a document to save as a library item. Do one of the following: Drag the selection into the Library category of the Assets pane (Window > Assets). Click the New Library Item button at the bottom of the Library category of the Assets panel (Window >...
Page 127 Editing a library item When you edit a library item, you can update all documents that use that item. If you choose not to update, the documents remain associated with the library item; you can update them later. Other kinds of changes to library items include renaming items to break their connection with documents or templates, deleting items from the site’s library, and recreating a missing library item.
Page 128 Make sure Library Items is selected in the Update option. Tip: To update templates at the same time, make sure Templates is also selected. For more information, see “Opening a template for editing” on page 242. Click Start. Dreamweaver updates the files as indicated. If you selected the Show Log option, Dreamweaver provides information about the files it attempts to update, including information on whether they were updated successfully.
Page 129 Setting library highlighting preferences You can customize the highlight color for library items and show or hide highlighting of library items by setting Highlighting preferences. To change the highlight color for library items: Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh). The Preferences dialog box appears.
Page 130 Making library items editable in a document If you’ve added a library item to your document and you want to edit the item specifically for that page, you must break the link between the item in the document and the library. Once you’ve made an instance of a library item editable, that instance cannot be updated when the library item changes.
Page 131: Update Pages
To update the library item in your site’s other documents, select Modify > Library > Update Pages. In the Update Pages dialog box, in the Look In pop-up menu, select Files That Use. In the adjacent pop-up menu, select the name of the library item you just created. In the Update option, make sure Library Items is selected, then click Start.
Page 132 Chapter 5: Managing Site Assets and Libraries...
Page 133: Chapter 6: Managing Contribute Sites With Dreamweaver
Contribute site administrators can limit what ordinary (non-administrator) users can do in a site. Note: Most Macromedia Dreamweaver MX 2004 users who connect to a Contribute site are site administrators; this chapter assumes that you are a site administrator.
Page 134: About Managing Contribute Sites
About managing Contribute sites You can use Dreamweaver to connect to a Contribute site and modify the files in the site just as you would in any Dreamweaver site. Most Dreamweaver capabilities work the same way with a Contribute site as with any other site. There are only a few aspects of working with files in a Contribute site that differ from working with files in other sites.
Page 135 • To prevent a CSS style from being available to Contribute users, change the name of the style so that the name starts with mmhide_. For example, if you use a style named RightJustified in a page but you don’t want Contribute users to be able to use that style, rename the style to mmhide_RightJustified.
Page 136 File transfer to or from a Contribute site Contribute uses a system much like the Dreamweaver Check In/Check Out system to ensure that only one user at a time can edit a given web page. When you enable Contribute compatibility in Dreamweaver, the Dreamweaver Check In/Check Out system is automatically enabled.
Page 137 When you set up a site, it’s a good idea to give users read access on the server to the /_mm folder (the _mm subfolder of the root folder), the /Templates folder, and all of the folders containing assets that they will need to use. If for some reason you can’t give users read access to the /Templates folder, see “Enabling Contribute users to access templates without root folder access”...
Page 138: Preparing A Site For Use With Contribute
Preparing a site for use with Contribute Before you can use Dreamweaver to administer a Contribute site, you must enable Contribute compatibility. Depending on the site you are connecting to, you might be automatically prompted to enable Contribute compatibility. Note: When you enable Contribute compatibility, Dreamweaver automatically enables Design Notes (including the Upload Design Notes for Sharing option) and the Check In/Check Out system.
Page 139 To administer a Contribute website in Dreamweaver: Select Site > Manage Sites. The Manage Sites dialog box appears. Select a site, then click Edit. The Site Definition dialog box appears. Click the Advanced tab. Select the Contribute category from the category list on the left. Click the Administer Site in Contribute button.
Page 140: Troubleshooting A Contribute Site
Troubleshooting a Contribute site If you encounter a problem with a Contribute site, see the following specific topics for information on how to resolve the problem: • For problems connecting to a Contribute site, see “Troubleshooting connection problems for a Contribute site”...
Page 141: Managing Contribute Files Using Dreamweaver
Managing Contribute files using Dreamweaver Most Dreamweaver capabilities work the same way with a Contribute site as with any other site. However, when you use Dreamweaver with a Contribute site, Dreamweaver automatically performs certain file-management operations, such as saving multiple revisions of a document. This section describes the aspects of working with files in a Contribute site that differ from working with files in other sites.
Page 142 Enabling Contribute users to access templates without root folder access In a Contribute site, you must manage underlying read and write permissions assigned to files and folders by the server directly on the server. For more information, see “Contribute file and folder permissions on the server”...
Page 143 PART III Laying Out Pages Use the visual design tools in Macromedia Dreamweaver MX 2004 to create sophisticated page layouts. This part contains the following chapters: Chapter 7, “Laying Out Pages with CSS,” on page 145 Chapter 8, “Presenting Content with Tables,” on page 163 Chapter 9, “Laying Out Pages in Layout Mode,”...
Page 145: Chapter 7: Laying Out Pages With Css
CHAPTER 7 Laying Out Pages with CSS In Macromedia Dreamweaver MX 2004, you can use CSS to add content blocks to your document for layout. You can either insert tags and apply CSS positioning styles to them, or you can use Dreamweaver layers to create your layout.
Page 146: About Layers In Dreamweaver
About layers in Dreamweaver A layer is an HTML page element that you can position anywhere on your page. Layers can contain text, images, or any other content that you can place in the body of an HTML document. Note: A layer in Dreamweaver is a div tag with absolute or relative position. Layers, as described in this chapter, refer to the Dreamweaver layout concept, not the layer tag.
Page 147: Inserting Content Blocks For Layout
The following is sample HTML code for a layer: <div id="Layer1" style="position:absolute; visibility:inherit; width:200px; height:115px; z-index:1"> </div> The following is sample HTML code for a layer nested inside another layer: <div id="Parent" style="position:absolute; left:56px; top:54px; width:124px; height:158px; z-index:1;"> Content inside the parent layer. <div id="Nested"...
Page 148: Changing Highlight Color For Content Blocks
Complete the dialog box. For more information, click the Help button in the dialog box. Click OK. tag appears as a box in your document with placeholder text. When you move the pointer over the box, Dreamweaver highlights it. If the tag is absolutely or relatively positioned, it acts like a Dreamweaver layer.
Page 149: Working With Content Blocks For Layout
Working with content blocks for layout After you insert a tag (see “Inserting content blocks for layout” on page 147), you can manipulate the content block or you can add content to it. Note: Content block tags that are absolutely or relatively positioned act like Dreamweaver layers. For information about working with these div tags, skip this section and see “Setting layer preferences and properties”...
Page 150: Inserting A Layer
Inserting a layer Dreamweaver lets you create layers on your page easily and position them precisely. You can also create nested layers. For more information, see “Nesting layers” on page 151. Note: You can use a Dreamweaver design file as a starting point for your CSS layout. Select a file from the Page Designs (CSS) category of the New Document dialog box (see “Creating a document based on a Dreamweaver design file”...
Page 151 Nesting layers A nested layer is a layer whose code is contained in another layer. Nesting is often used to group layers together. A nested layer moves with its parent layer and can be set to inherit visibility from its parent. You can turn the Nesting option on to automatically nest when you draw a layer starting inside another layer.
Page 152: Setting Layer Preferences And Properties
Setting layer preferences and properties You can specify default settings for your layers. You can also view and set various attributes of one or more layers using the Property inspector. Setting layer preferences Use the Layers category in the Preferences dialog box to specify the default settings for new layers you create.
Page 153: Managing Layers
Viewing and setting properties for multiple layers When you select two or more layers, the layer Property inspector displays text properties and a subset of the full layer properties, allowing you to modify several layers at once. To select multiple layers: •...
Page 154 To show or hide nested layers: • Click the Plus (+) or Minus (–) buttons (Windows) or the expander arrow (Macintosh) next to the layer name. Nested layers appear as names connected to parent layers. Related topics • “Inserting a layer” on page 150 •...
Page 155 To select multiple layers, do one of the following: • In the Layers panel (Window > Layers), Shift-click two or more layer names. • In the Document window, Shift-click inside or on the border of two or more layers. When multiple layers are selected, the handles of the last selected layer are highlighted in black. The resize handles of the other layers are highlighted in white.
Page 156 Changing layer visibility While working on your document, you can show and hide layers manually, using the Layers panel, to see how the page will appear under different conditions. Note: The currently selected layer always becomes visible and appears in front of other layers while it’s selected.
Page 157: Manipulating Layers
Manipulating layers As you work with your page layout, you can select, move, resize, and align layers. You must select a layer before you can move, resize, or align it. To prevent layers from overlapping each other as you move and resize them, use the Prevent Overlap option (see “Preventing layer overlaps”...
Page 158 Moving layers You can move layers in the Design view in much the same way that you move objects in most basic graphics applications. If the Prevent Overlaps option is on, you will not be able to move a layer so that it overlaps another layer.
Page 159: Converting Layers To Tables
Converting layers to tables Instead of using tables or Layout mode to create your layout, some web designers prefer to work with layers. Dreamweaver enables you to create your layout using layers, then (if you want) convert them into tables. For example, you might need to convert your layers to tables if you need to support browsers before version 4.0.
Page 160: Using Rulers And Grids To Lay Out Pages
Converting between layers and tables You can create your layout using layers, then convert the layers to tables so that your layout can be viewed in older browsers. Before you convert to tables, make sure layers do not overlap (see “Preventing layer overlaps”...
Page 161: Using A Tracing Image
You can use a tracing image as a guide to re-create a page design that was created in a graphics application such as Macromedia Freehand or Fireworks. A tracing image is a JPEG, GIF, or PNG image that is placed in the background of the Document window.
Page 162 To show or hide the tracing image: • Select View > Tracing Image > Show. The tracing image is visible only in Dreamweaver. It is never visible when you view the page in a browser. When the tracing image is visible, the page’s real background image and color are not visible in the Document window;...
Page 163: Chapter 8: Presenting Content With Tables
Tables are a powerful tool for presenting tabular data and for laying out text and graphics on a page. Many designers use tables to lay out web pages. Macromedia Dreamweaver MX 2004 provides two ways to view and manipulate tables: Standard mode, in which tables are presented as a grid of...
Page 164: About Tables
About tables Tables are a powerful tool for presenting tabular data and for laying out text and graphics on an HTML page. A table consists of one or more rows; each row consists of one or more cells. Although columns aren’t usually explicitly specified in HTML code, Dreamweaver enables you to manipulate columns as well as rows and cells.
Page 165: Inserting A Table And Adding Content
About splitting and merging table cells You can merge any number of adjacent cells—as long as the entire selection is a line or a rectangle of cells—to produce a single cell that spans several columns or rows. You can split a cell into any number of rows or columns, regardless of whether it was previously merged.
Page 166: Importing And Exporting Tabular Data
Complete the dialog box. For more information, click the Help button in the dialog box. Click OK. The table appears in the document. Related topics • “Viewing and setting table, cell, row, and column properties” on page 171 • “Editing accessibility attributes for a table” on page 171 Importing and exporting tabular data Tabular data that has been created in another application (such as Microsoft Excel) and saved in a delimited text format (with items separated by tabs, commas, colons, semicolons, or other...
Page 167: Selecting Table Elements
To export a table: Place the insertion point in any cell of the table. Select File > Export > Table. The Export Table dialog box appears. In the Export Table dialog box, specify options for exporting the table. For more information, click the Help button in the dialog box. Click Export.
Page 168 Related topics • “Formatting tables and cells” on page 170 • “Resizing tables, columns, and rows” on page 173 • “Copying, pasting, and deleting cells” on page 179 Selecting a table There are several ways you can select an entire table at once. To select an entire table, do one of the following: •...
Page 169 To select a single column: Click in the column. Click the column header menu, then select Select Column. Related topics • “Selecting a table” on page 168 Selecting cells You can select a single cell, a line or block of cells, or nonadjacent cells. To select entire rows or columns, see “Selecting rows or columns”...
Page 170: Using Expanded Tables Mode For Easier Table Editing
Using Expanded Tables mode for easier table editing Expanded Tables mode temporarily adds cell padding and spacing to all tables in a document and increases the tables’ borders to make editing easier. This mode enables you to select items in tables or precisely place the insertion point.
Page 171 Viewing and setting table, cell, row, and column properties When a table or cell is selected, the Property inspector lets you view and change its properties. Note: Before you change properties for table elements, it’s a good idea to understand which properties have precedence over the others (see “Table formatting precedence in HTML”...
Page 172 Using a design scheme to format a table Use the Format Table command to quickly apply a preset design to a table. You can then select options to further customize the design. Note: Only simple tables can be formatted using preset designs. You can’t use these designs to format tables that contain merged cells (colspan or rowspan) or column groups, or any other table that doesn’t consist of a simple rectangular grid of cells.
Page 173: Resizing Tables, Columns, And Rows
Resizing tables, columns, and rows You can resize an entire table or individual rows and columns. If you have trouble resizing, you can clear the column widths or row heights and start over. Sometimes the column widths set in the HTML code do not match their apparent widths on the screen.
Page 174 To change a column’s width and keep the overall table width: • Drag the right border of the column you want to change. The width of the adjacent column also changes, so you actually resize two columns. Visual feedback shows you how the columns will adjust; the overall table width does not change. Note: In tables with percentage-based widths (not pixels), if you drag the right border of the rightmost column, the whole table’s width changes, and all of the columns grow wider or narrow proportionately.
Page 175 Making column widths in code consistent with visual widths If you see two numbers for a column’s width, then the column width set in the HTML code does not match the column’s apparent width on the screen. You can make the width specified in the code match the visual width.
Page 176: Adding And Removing Rows And Columns
Related topics • “Resizing a table” on page 173 • “Resizing columns and rows” on page 173 • “Making column widths in code consistent with visual widths” on page 175 Displaying table and column widths and menus Dreamweaver displays table and column widths, along with arrows to access the table header menu and the column header menus, when a table is selected or when the insertion point is in the table.
Page 177 To add multiple rows or columns: Click in a cell. Select Modify > Table > Insert Rows or Columns. The Insert Rows or Columns dialog box appears. Select Rows or Columns, then complete the dialog box. For more information, click the Help button in the dialog box. Click OK.
Page 178: Splitting And Merging Cells
Splitting and merging cells Use the Property inspector or the commands in the Modify > Table submenu to split or merge cells. For more information, see “About splitting and merging table cells” on page 165. As an alternative approach to merging and splitting cells, Dreamweaver also provides tools for increasing and decreasing the number of rows or columns spanned by a cell.
Page 179: Copying, Pasting, And Deleting Cells
To increase or decrease the number of rows or columns spanned by a cell: Select a cell. Do one of the following: Select Modify > Table > Increase Row Span or Modify > Table > Increase Column Span. Select Modify > Table > Decrease Row Span or Modify > Table > Decrease Column Span. Copying, pasting, and deleting cells You can copy, paste, or delete a single table cell or multiple cells at once, preserving the cells’...
Page 180 To paste table cells: Select where you want to paste the cells: To replace existing cells with the cells you are pasting, select a set of existing cells with the same layout as the cells on the clipboard. For example, if you’ve copied or cut a 3 x 2 block of cells, you can select another 3 x 2 block of cells to replace by pasting.
Page 181: Nesting Tables
Nesting tables A nested table is a table inside a cell of another table. You can format a nested table as you would any other table; however, its width is limited by the width of the cell in which it appears. To nest a table within a table cell: Click in a cell of the existing table.
Page 182 Chapter 8: Presenting Content with Tables...
Page 183: Chapter 9: Laying Out Pages In Layout Mode
To streamline the process of using tables for page layout, Macromedia Dreamweaver MX 2004 provides Layout mode. In Layout mode, you can design your page using tables as the underlying structure, while avoiding some of the problems that often occur when creating table-based designs using traditional means.
Page 184: About Layout Mode
About Layout mode In Layout mode, you use layout cells and tables to lay out your page before adding content. For example, you could draw a cell along the top of your page to hold a header graphic, another cell on the left side of the page to hold a navigation bar, and a third cell on the right to hold content.
Page 185 About viewing table and cell widths in Layout mode The widths of layout tables and cells (in pixels, or as a percentage of the page width) appear at the top or bottom of the table when the table is selected or when the insertion point is in the table. Beside the widths are arrows for the table header menu and the column header menus.
Page 186 Layout table and cells grid lines When you draw a layout cell in a layout table, a light grid of lines appears, extending from the edges of any new layout cell out to the edges of the layout table that contains it. These lines help you align new cells with old cells, and help you visualize the underlying HTML table’s structure.
Page 187: Switching From Standard To Layout Mode
You can manually insert and remove spacer images in specific columns or remove all spacer images in the page. Related topics • “Using spacer images” on page 196 Switching from Standard to Layout mode Before you can draw layout tables or layout cells, you must switch from Standard mode into Layout mode.
Page 188 When you move the pointer over a layout cell, Dreamweaver highlights it. You can turn highlighting on or off or change the highlight color in preferences. To draw a layout cell: Make sure you are in Layout mode (see “Switching from Standard to Layout mode” on page 187).
Page 189 To change highlighting preferences for layout cells: Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh). The Preferences dialog box appears. Select Highlighting from the category list on the left. Make either of the following changes: To change the highlighting color, click the Mouse-over color box, then select a highlight color using the color picker (or enter the hexadecimal value for the highlight color in the text box).
Page 190: Adding Content To A Layout Cell
To draw a nested layout table: Make sure you are in Layout mode (see “Switching from Standard to Layout mode” on page 187). In the Layout category of the Insert bar, click the Draw Layout Table button. The pointer changes to a cross hair (+). Point to an empty (gray) area in an existing layout table, then drag to create the nested layout table.
Page 191 A layout cell expands automatically when you add content that is wider than the cell. As the cell expands, the column that the cell is in also expands, which might change the sizes of surrounding cells. The column width for that column changes to show the width that appears in the code, followed by the visual width of the column (the width as it appears on your screen) in parentheses.
Page 192: Clearing Automatically Set Cell Heights
Clearing automatically set cell heights When you create a layout cell, Dreamweaver automatically specifies a height for the cell, to make the cell display at the height you drew even though the cell is empty. After you insert content into the cell, you might no longer need the height to be specified, so you can remove the explicit cell heights from the table.
Page 193 To move a layout cell: Select a cell by clicking an edge of the cell or by Control-clicking (Windows) or Command-clicking (Macintosh) anywhere in the cell. Selection handles appear around the cell. Do one of the following: Drag the cell to another location within its layout table. Press the arrow keys to move the cell 1 pixel at a time.
Page 194: Formatting Layout Cells And Tables
Formatting layout cells and tables You can change the appearance of any layout cell or table by using the Property inspector. Formatting layout cells You can set various attributes of a layout cell in the Property inspector, including width and height, background color, and alignment of the cell’s contents.
Page 195: Setting Column Width
Setting column width You can set a column to a specific width or make it stretch to fill as much of a browser window as possible. You can also specify a minimum width for a column using a spacer image. Sometimes the column widths width set in the HTML code do not match their apparent widths on the screen.
Page 196 Using spacer images To require a column to be a certain minimum width, you can insert a spacer image into that column. For more information, see “Spacer images” on page 186. You can remove spacer images from a single column or from the entire table. The first time you insert a spacer image, you set up a spacer image for the site.
Page 197: Setting Preferences For Layout Mode
Making column widths in code consistent with visual widths If you see two numbers for a column’s width, then the column width set in the HTML code does not match the column’s apparent width on the screen. You can make the width specified in the code match the visual width.
Page 198 Chapter 9: Laying Out Pages in Layout Mode...
Page 199: Chapter 10: Using Frames
CHAPTER 10 Using Frames Frames provide a way to divide a browser window into multiple regions, each of which can display a different HTML document. In the most common use of frames, one frame displays a document containing navigation controls, while another frame displays a document with content. Note: A detailed discussion of all the ways to design and use frames, and the code required for hand- coding them, is beyond the scope of this chapter.
Page 200: About Frames And Framesets
About frames and framesets A frame is a region in a browser window that can display an HTML document independent of what’s being displayed in the rest of the browser window. A frameset is an HTML file that defines the layout and properties of a set of frames, including the number of frames, the size and placement of the frames, and the URL of the page that initially appears in each frame.
Page 201 Note that a frame is not a file. It’s easy to think of the document that currently appears in a frame as an integral part of the frame, but the document isn’t actually part of the frame. The frame is a container that holds the document—any frame can display any document.
Page 202 Not all browsers provide good frame support, and frames may be difficult for visitors with disabilities to navigate, so if you do use frames, always provide a section in your noframes frameset, for visitors who can’t view them (see “Handling browsers that can’t display frames” on page 214).
Page 203: Working With Framesets In The Document Window
Dreamweaver takes care of nesting framesets as needed; if you use the frame-splitting tools in Dreamweaver, you don’t need to worry about the details of which frames are nested and which aren’t. For more information about the frame-splitting tools, see “Designing a frameset”...
Page 204: Creating Frames And Framesets
Creating frames and framesets There are two ways to create a frameset in Dreamweaver: you can select from several predefined framesets or you can design it yourself. Choosing a predefined frameset automatically sets up all the framesets and frames needed to create the layout and is the easiest way to create a frames-based layout quickly.
Page 205 If the Frame Tag Accessibility Attributes dialog box appears, complete the dialog box for each frame, then click OK. For more information, click the Help button in the dialog box. Note: If you click Cancel, the frameset appears in the document, but Dreamweaver does not associate accessibility tags or attributes with it.
Page 206 To split a frame into smaller frames, do one of the following: • To split the frame where the insertion point is, select a splitting item from the Modify > Frameset submenu. • To split a frame or set of frames vertically or horizontally, drag a frame border from the edge of the Design view into the middle of the Design view.
Page 207: Selecting Frames And Framesets
Selecting frames and framesets To make changes to the properties of a frame or frameset, begin by selecting the frame or frameset you want to change. You can select a frame or frameset either in the Document window or by using the Frames panel.
Page 208 Selecting frames and framesets in the Document window In the Document window’s Design view, when a frame is selected, its borders are outlined with a dotted line; when a frameset is selected, all the borders of the frames within the frameset are outlined with a light dotted line.
Page 209: Opening A Document In A Frame
Opening a document in a frame You can specify the initial content of a frame by either inserting new content into an empty document in a frame, or opening an existing document in a frame. To open an existing document in a frame: Place the insertion point in a frame.
Page 210: Viewing And Setting Frame Properties And Attributes
To save all files associated with a set of frames: • Select File > Save All Frames. This saves all open documents in the frameset, including the frameset file and all framed documents. If the frameset file has not yet been saved, a heavy border appears around the frameset in the Design view, and a dialog box enables you to select a filename.
Page 211 To view or set frame properties: Select a frame by doing one of the following: Alt-click (Windows) or Shift-Option-click (Macintosh) a frame in the Document window’s Design view. Click a frame in the Frames panel (Window > Frames). In the Property inspector (Window > Properties), click the expander arrow in the lower right corner to see all of the frame properties.
Page 212: Viewing And Setting Frameset Properties
To change the background color of a document in a frame: Place the insertion point in the frame. Select Modify > Page Properties. The Page Properties dialog box appears. Click the Background color pop-up menu, then select a color. Click OK. Related topics •...
Page 213: Controlling Frame Content With Links
Controlling frame content with links To use a link in one frame to open a document in another frame, you must set a target for the link. The attribute of a link specifies the frame or window in which the linked target content opens.
Page 214: Handling Browsers That Can't Display Frames
Handling browsers that can’t display frames Dreamweaver lets you specify content to display in text-based browsers and in older graphical browsers that do not support frames. This content is stored in the frameset file, wrapped in a tag. When a browser that doesn’t support frames loads the frameset file, the browser noframes displays only the content enclosed by the tag.
Page 215: Chapter 11: Managing Templates
CHAPTER 11 Managing Templates A Macromedia Dreamweaver MX 2004 template is a special type of document that you use to design a “fixed” page layout; you can then create documents based on the template that inherit the page layout of the template. As you design a template, you specify which areas of documents based on that template users can edit.
Page 216: About Dreamweaver Templates
About Dreamweaver templates A template author designs a “fixed” page layout in a template. The author then creates regions in the template that are editable in documents based on that template; if the author does not define a region as editable, then template users cannot edit content in that area. Templates enable template authors to control which page elements template users—such as writers, graphic artists, or other web developers—can edit.
Page 217 An editable tag attribute lets you unlock a tag attribute in a template, so the attribute can be edited in a template-based page. For example, you can “lock” which image appears in the document but let the template user set the alignment to left, right, or center. For information about setting editable tag attributes, see “Specifying editable tag attributes in a template”...
Page 218: Setting Highlighting
Viewing templates in Code view In Code view, you can make changes to both editable and locked HTML source code in a template. Tip: You can use code color preferences to set your own color scheme so you can easily distinguish template regions when you view a document in Code view (see “Customizing code coloring preferences for a template”...
Page 219: Viewing Template-Based Documents In Code View
In addition to the editable-region outlines, the entire page is surrounded by a different-colored outline, with a tab at the upper right giving the name of the template that the document is based on. This highlighted rectangle is there to remind you that the document is based on a template and that you can’t change anything outside the editable regions.
Page 220 The default color for non-editable text is gray; you can select a different color for the editable and non-editable regions in the Preferences dialog box. For more information, see “Customizing code coloring preferences for a template” on page 228. Related topics •...
Page 221        (equivalent to @@...@@)   Related topics • “General syntax rules” on page 220 Instance tags Dreamweaver uses the following instance tags: <!-- InstanceBegin template="..."...
Page 222 For information about linking using the Point-to-File icon, see “Linking files and documents” on page 320. Note: In some cases, (such as file paths in event handlers in templates) you can’t use the folder icon or the Point-to-File icon; in those cases, you must enter the correct path name. Nested templates A nested template is a template whose design and editable regions are based on another template.
Page 223 To create a nested template, we created a new document based on the template, then saved the document as a template and named it TrioNested. In the nested template, we added two editable regions, with content, in the editable region named Body When you add a new editable region in an editable region passed through to the nested template, the highlighting color of the editable region changes to orange.
Page 224 Template parameters Template parameters indicate values for controlling content in documents based on a template. You can use template parameters with optional regions or editable tag attributes, or to set values you want to pass to an attached document. For each parameter, you select a name, a data type, and a default value.
Page 225 The template expression language The template expression language is a small subset of JavaScript, and uses JavaScript syntax and precedence rules. You can use JavaScript operators to write an expression like this: @@(firstName+lastName)@@ The following features and operators are supported: •...
Page 226: Creating A Dreamweaver Template
249). Creating a Dreamweaver template You can create a template from an existing document (such as an HTML, Macromedia ColdFusion, or Microsoft Active Server Pages document) or you can create a template from a new, blank document. After you create a template, you can insert template regions (see “Types of template regions”...
Page 227 To create a template: Open the document you want to save as a template: To open an existing document, select File > Open, then select the document. To open a new blank document, select File > New. In the dialog box that appears, select Basic Page or Dynamic Page, select the type of page you want to work with, then click Create.
Page 228 To use the Assets panel to create a new template In the Assets panel (Window > Assets), select the Templates category on the left side of the panel. The Templates category of the Assets panel appears. Click the New Template button at the bottom of the Assets panel. A new, untitled template is added to the list of templates in the Assets panel.
Page 229: Creating Templates For A Contribute Site
“Customizing code coloring preferences for a template” on page 228 Creating templates for a Contribute site Using Dreamweaver, you can create templates to help Macromedia Contribute users create new pages, to provide a consistent look and feel for your site, and to enable you to update the layout of many pages at once.
Page 230 Note: Make sure that the site root folder defined in each Contribute user’s site definition is the same as the site root folder defined in your site definition in Dreamweaver. If a user’s site root folder doesn’t match yours, that user won’t be able to use templates. In addition to Dreamweaver templates, you can create non-Dreamweaver templates using the Contribute administration tools.
Page 231 To create a non-Dreamweaver template: Select Site > Manage Sites. The Manage Sites dialog box appears. Select a site, then click Edit. The Site Definition dialog box appears. Click the Advanced tab. Select the Contribute category from the category list on the left. If you haven’t already done so, you need to enable Contribute compatibility.
Page 232: Creating Editable Regions
Creating editable regions Editable template regions control which areas of a template-based page a user can edit. Related topics • “Types of template regions” on page 216 Inserting an editable region Before you insert an editable region, you should save the document you are working in as a template (see “Creating a Dreamweaver template”...
Page 233 Related topics • “Removing an editable region” on page 233 • “Changing an editable region’s name” on page 234 Selecting editable regions You can easily identify and select template regions in both the template document and template- based documents. To select an editable region in the Document window: •...
Page 234: Creating Repeating Regions
Changing an editable region’s name After you insert an editable region, you can later change its name. To change the name of an editable region: Click the tab in the upper left corner of the editable region to select it. In the Property inspector (Window >...
Page 235 To insert a repeating region in a template: In the Document window, do one of the following: Select the text or content you want to set as a repeating region. Place the insertion point in the document where you want to insert the repeating region. Do one of the following, to create a repeating region: Select Insert >...
Page 236 Inserting a repeating table You can use a repeating table to create an editable region (in table format) with repeating rows. You can define table attributes and set which table cells are editable. To insert a repeating table: In the Document window, place the insertion point in the document where you want to insert the repeating table.
Page 237: Using Optional Regions
The following is a code example of a table that includes alternating background table row colors: <table width="75%" border="1" cellspacing="0" cellpadding="0"> <tr><th>Name</th><th>Phone Number</th><th>Email Address</th></tr>  <tr bgcolor="@@(_index & 1) ? '#FFFFFF' : '#CCCCCC' @@"> <td>  name ...
Page 238 To insert an optional region: In the Document window, select the element you want to set as an optional region. Do one of the following: Select Insert > Template Objects > Optional Region. Right-click (Windows) or Control-click (Macintosh) the selected content, then select Templates >...
Page 239: Defining Editable Tag Attributes
Modifying an optional region You can edit optional region settings after you’ve inserted the region in a template. For example, you can change whether the default for the content is set to show or not, link a parameter to an existing optional region, or modify a template expression.
Page 240 Specifying editable tag attributes in a template You can set multiple editable attributes in a page so that template users can modify the attributes in template-based documents. The following data types are supported: text, Boolean ( true ), color, and URL. false To define an editable tag attribute: In the Document window, select an item you want to set an editable tag attribute for.
Page 241: Creating A Nested Template
Creating a nested template Nested templates let you create variations of a base template. You create a nested template by saving a document based on a template, then saving that document as a new template. You can nest multiple templates to define increasingly specific layouts. For more information, see “Nested templates”...
Page 242: Editing And Updating Templates
Editing and updating templates When you make changes to and save a template, Dreamweaver automatically updates all documents attached to the template. You can also manually update documents based on a template, if necessary. Note: To edit a template for a Contribute site, you must use Dreamweaver; you cannot edit templates in Contribute.
Page 243 To open and modify the template attached to the current document: Open the template-based document in the Document window. Do one of the following: Select Modify > Templates > Open Attached Template. Right-click (Windows) or Control-click (Macintosh), then select Templates > Open Attached Template.
Page 244 Updating templates in a Contribute site Contribute users can’t make changes to a Dreamweaver template. You can, however, use Dreamweaver to change a template for a Contribute site The following are important factors to keep in mind when updating templates in a Contribute site: •...
Page 245: Managing Templates
Managing templates Use the Templates category of the Assets panel to manage existing templates, including renaming template files and deleting template files. Note: You can also use the Assets panel to apply a template to a document (see“Editing and updating templates” on page 242) or edit a template (see “Opening a template for editing”...
Page 246: Exporting And Importing Template Xml Content
Exporting and importing template XML content You can think of a document based on a template as containing data represented by name/value pairs. Each pair consists of the name of an editable region, and the contents of that region. Dreamweaver lets you export the name/value pairs into an XML file so that you can work with the data outside of Dreamweaver (for example, in an XML editor or a text editor, or a database application).
Page 247: Exporting A Site Without Template Markup
Exporting a site without template markup If you do not want to include template markup in the template-based documents you export to another site, use the Export Site Without Template Markup command. To export a site without template markup: Select Modify > Templates > Export Without Markup. The Export Site Without Template Markup dialog box appears.
Page 248: Editing Content In A Template-Based Document
To apply a template to an existing document from the Document window: Open the document you want to apply the template to. Select Modify > Templates > Apply Template to Page. The Select Template dialog box appears. Choose a template from the list, then click Select. If content exists in the document that can’t be automatically assigned to a template region, the Inconsistent Region Names dialog box appears.
Page 249 Modifying template properties When template authors create parameters in a template (see “Template parameters” on page 224), documents based on the template automatically inherit the parameters and their initial value settings. A template user can update editable tag attributes and other template parameters (such as optional region settings).
Page 250 Adding, deleting, and changing the order of a repeating region entry Use repeating region controls to add, delete, or change the order of entries in template-based documents. When you add a repeating region entry, a copy of the entire repeating region is added.
Page 251 PART IV Adding Content to Pages Use the visual tools in Macromedia Dreamweaver MX 2004 to add a variety of content to your web pages. Add and format elements such as text, images, colors, movies, sound, and other forms of media. Be sure to make your pages accessible to visitors with disabilities.
Page 253: Chapter 12: Working With
CHAPTER 12 Working with Pages Macromedia Dreamweaver MX 2004 provides many features to help you create new web pages. These page creation features can help you more easily specify web page properties such as page titles, background images and colors, and text and link colors. In addition, Dreamweaver MX 2004 provides tools to help you maximize website performance, and to create and test pages to ensure compatibility with different web browsers.
Page 254 About setting page properties For each page you create in Dreamweaver, you can specify layout and formatting properties using the Page Properties dialog box (Modify > Page Properties). The Page Properties dialog box lets you specify the default font family and font size, background color, margins, link styles, and many other aspects of page design.
Page 255 About the History panel The History panel shows a list of the steps you’ve performed in the active document since you created or opened that document, up to a specified number of steps. (The History panel doesn’t show steps you’ve performed in other frames, in other Document windows, or in the Site panel.) It allows you to undo one or more steps;...
Page 256 UNIX versions of Netscape Navigator use a different color palette than the Windows and Macintosh versions. If you are developing exclusively for UNIX browsers (or your target audience is Windows or Macintosh users with 24-bit monitors and UNIX users with 8-bit monitors), consider using hexadecimal values that combine the pairs 00, 40, 80, BF, or FF, which produce web-safe colors for SunOS.
Page 257: Saving Web Pages
Saving web pages You can save a document using its current name and location, or save a copy of a document using a different name and location. When naming files, avoid using spaces and special characters in file and folder names. In particular, do not use special characters (such as é, ç, or ¥) or punctuation (such as colons, slashes, or periods) in the names of files you intend to put on a remote server;...
Page 258: Specifying Html Instead Of Css
Specifying HTML instead of CSS By default, Dreamweaver uses CSS tags to assign page properties. If you want to use HTML tags instead, you must deselect the Use CSS Instead of HTML Tags option in the General category of the Preferences dialog box. To specify HTML instead of CSS tags for page properties: Select Edit >...
Page 259 Changing the document title The title of an HTML page helps site visitors keep track of what they’re viewing as they browse, and it identifies the page in the visitor’s history and bookmark lists. If you don’t title a page, the page will appear in the browser window, bookmark lists, and history lists as Untitled Document.
Page 260: Working With Colors
Setting a background image or background page color To define an image or color for the page background, use the Page Properties dialog box. If you use both a background image and a background color, the color appears while the image downloads, and then the image covers up the color.
Page 261 Use the eyedropper to pick up a color from anywhere on your screen—even outside the Dreamweaver windows. To pick up a color from the desktop or another application, press and hold the mouse button; this allows the eyedropper to retain focus, and select a color outside of Dreamweaver.
Page 262: Selecting Elements In The Document Window
Selecting elements in the Document window To select an element in the Design view of the Document window, you generally click the element. If an element is invisible, you must make it visible before you can select it. For more information about invisible elements, see “Showing and hiding invisible elements”...
Page 263: Using The History Panel
Showing and hiding invisible elements Some HTML code doesn’t have a visible representation in a browser. For example, tags comment don’t appear in browsers. However, it can be useful while you’re creating a page to be able to select such invisible elements, edit them, move them, and delete them. Dreamweaver enables you to specify whether it shows icons marking the location of invisible elements in the Design view of the Document window.
Page 264 To undo multiple steps at once, do one of the following: • Drag the slider to point to any step. • Click to the left of a step along the path of the slider; the slider scrolls automatically to that step, undoing steps as it scrolls.
Page 265: Automating Tasks
Automating tasks While creating your documents, you may want to perform the same task numerous times. To repeat a series of steps once or twice, replay them directly from the History panel, which records your steps as you work on a document. (For basic information about the History panel, “About the History panel”...
Page 266 To repeat a series of adjacent steps: Select steps in the History panel by doing one of the following: Drag from one step to another. (Don’t drag the slider; just drag from the text label of one step to the text label of another step.) Select the first step, then Shift-click the last step;...
Page 267 To set the vertical and horizontal spacing of a series of images: Start with a document in which each line consists of a small image (such as a graphical bullet or an icon) followed by text. The goal is to set the images off from the text and from the other images above and below them.
Page 268 Copying and pasting steps between documents Each open document has its own history of steps. You can copy steps from one document and paste them into another. Closing a document clears its history. If you know you will want to use steps from a document after that document is closed, copy the steps with Copy Steps (or save them as a command;...
Page 269 To create a command: Select a step or set of steps in the History panel. Click the Save As Command button, or select Save As Command from the History panel’s context menu. Enter a name for the command and click OK. The command appears in the Commands menu.
Page 270: Using Javascript Behaviors To Detect Browsers And Plug-Ins
“Check Plugin” on page 379). For example, you may want visitors to go to one page if they have Macromedia Shockwave and another page if they do not. Previewing and testing pages in browsers You can preview a document in your target browsers at any time; you don’t have to save the document first.
Page 271 Tip: To preview content linked with root-relative paths, put the file on a remote server, then select File > Preview in Browser to view it (see “Site root-relative paths” on page 318). Close the page in the browser when you finish testing. To set or change preferences for your primary and secondary browsers: Do one of the following to open the Preview in Browser options: Select Edit >...
Page 272: Setting Download Time And Size Preferences
Setting download time and size preferences Dreamweaver calculates size based on the entire contents of the page, including all linked objects, such as images and plug-ins. Dreamweaver estimates download time based on the connection speed entered in Status Bar preferences. Actual download time varies depending on general Internet conditions.
Page 273: Chapter 13: Inserting And Formatting Text
CHAPTER 13 Inserting and Formatting Text Macromedia Dreamweaver MX 2004 offers several ways for you to add and format text in a document. You can insert text, set font type, size, color, and alignment attributes, as well as create and apply your own custom styles using Cascading Style Sheet (CSS) styles.
Page 274 About formatting text Formatting text in Dreamweaver is similar to using a standard word processor. You can set default formatting styles (Paragraph, Heading 1, Heading 2, and so on) for a block of text, change the font, size, color, and alignment of selected text, or apply text styles such as bold, italic, code (monospace), and underline.
Page 275 CSS styles let you control many properties that cannot be controlled using HTML alone. For example, you can assign custom list bullets and specify different font sizes and units (pixels, points, and so on). By using CSS styles and setting font sizes in pixels, you can ensure a more consistent treatment of your page layout and appearance in multiple browsers.
Page 276 About conflicting CSS styles When you apply two or more CSS styles to the same text, the styles may conflict and produce unexpected results. Browsers apply style attributes according to the following rules: • If two styles are applied to the same text, the browser displays all attributes of both styles unless specific attributes conflict.
Page 277 If you have styles defined in more than one location (for example, both embedded in an HTML page and imported from an external style sheet) using both the short and long forms of CSS syntax, be aware that omitted properties may override (or cascade) properties that are explicitly set in another.
Page 278 The Style pop-up menu displays both the names of styles in your page, as well as a preview of the style’s properties. The properties shown in the preview are font family, font size, font weight, text color, and background color. Related topics •...
Page 279 You can also use the lower panel of the Relevant CSS tab to modify the properties of a selection. The editable grid lets you change the values for any of the displayed properties. Any changes you make to a selection are applied immediately, letting you preview your work as you go. Related topics •...
Page 280: Inserting Text
List View displays all of the Dreamweaver supported CSS properties in descending alphabetic order, with set properties sorted to the top of the list displayed in blue text (see the following illustration). Related topics: • “The Relevant CSS tab” on page 278 •...
Page 281 Importing tabular data documents You can import tabular data into your document by first saving the files (such as Microsoft Excel files or database files) as delimited text files. For information on importing and formatting table data, see “Importing and exporting tabular data”...
Page 282: Formatting Paragraphs And Document Structure
Inserting a link to a Word or Excel document You can insert a link to a Microsoft Word or Excel document in an existing page. To create a link to a Word or Excel document: Open the page where you want the link to appear. Drag the file from its current location to your Dreamweaver page where you want the link to appear.
Page 283 Formatting paragraphs Use the Format pop-up menu in the Property inspector or the Text > Paragraph Format submenu to apply the standard paragraph and heading tags. To apply a paragraph or heading tag: Place the insertion point in the paragraph, or select some of the text in the paragraph. Using the Text >...
Page 284 Adding paragraph spacing Dreamweaver works similarly to many word processing application: you press Enter (Windows) or Return (Macintosh) to create a new paragraph. Web browsers automatically insert a blank line of space between paragraphs. You can add a single line of space between paragraphs by inserting a line break.
Page 285: Formatting Text
To create a new list: In the Dreamweaver document, place the insertion point where you want to add a list, then do one of the following: Click either the Bulleted or Numbered List button in the Property inspector Select Text > List and select the type of list desired—Unordered (bulleted) List, Ordered (numbered) List, or Definition List.
Page 286 Setting and changing fonts and styles Use options in the Property inspector or the Text menu to set or change font characteristics for selected text. You can set the font type, style (such as bold or italic), and size. To set or change font characteristics: Select the text.
Page 287 Renaming a style As you format text, Dreamweaver keeps track of the styles you create in each page, and builds a library of styles that you can reuse. This makes applying the same formatting to a block of text much simpler, as well as letting you create a more consistent look for your pages. To rename a style: Select Rename from the text Property inspector Style pop-up menu.
Page 288 To add a new combination to the font list: Select Text > Font > Edit Font List. Select a font from the Available Fonts list and click the << button to move the font to the Chosen Fonts list. Repeat step 2 for each subsequent font in the combination. To add a font that is not installed on your system, type the font name in the text field below the Available Fonts list and click the <<...
Page 289 Inserting dates Dreamweaver provides a convenient Date object, which inserts the current date in whatever format you prefer (with or without the time) and provides the option of updating that date whenever you save the file. Note: The dates and times shown in the Insert Date dialog box are not the current date, nor do they reflect the dates/times that a visitor sees when they display your site.
Page 290: Using Cascading Style Sheets Styles
Adding space between characters HTML only allows for one space between characters; to add additional space in a document you must insert a non-breaking space. You can set a preference to automatically add non-breaking spaces in a document. To insert a non-breaking space, do one of the following: •...
Page 291 Using the CSS Styles panel You use the CSS Styles panel to create, edit, and remove CSS styles, as well as to attach external style sheets to documents. To open the CSS Styles panel: • Do one of the following: Select Window >...
Page 292: Delete
Delete CSS Style removes the selected style from the CSS Styles panel, and removes the formatting from any element to which it was applied. Note: Right-click (Windows) or Control-click (Macintosh) the CSS Styles panel to open a context menu of options for working with CSS Style Sheet commands. Related topics •...
Page 293: Related Topics
Using the CSS Properties tab The CSS Properties tab lets you directly edit the properties and values of a CSS rule. By default, the CSS properties are organized into categories. You can modify the properties of each CSS rule by entering values in text fields and selecting values from pop-up menus associated with each property.
Page 294: Creating A New Css Style
Creating a new CSS style You can create a CSS style to automate the formatting of HTML tags or a range of text identified by a attribute. class To create a new CSS style: Place the insertion point in the document, then do one of the following to open the New CSS Style dialog box: In the CSS Styles panel (Window >...
Page 295: Applying A Class Style
• Defining CSS Style Positioning properties • Defining CSS Style Extensions properties Related topics • “Using the CSS Styles panel” on page 291 • “Using the Relevant CSS tab” on page 292 • “Applying a Class style” on page 295 •...
Page 296: Linking To Or Importing An External Css Style Sheet
To remove a custom style from a selection: Select the object or text you want to remove the style from. Do one of the following: In the text Property inspector, select None from the Style pop-up menu. Right-click the applied rule you want to remove in the Relevant CSS tab and select Set Class >...
Page 297 To link to or import an external CSS style sheet: Open the CSS Styles panel by doing one of the following: Select Window > CSS Styles. Press Shift + F11. In the CSS Styles panel, click the Attach Style Sheet button. The Attach External Style Sheet dialog box appears.
Page 298: Editing A Css Style
Using the sample Dreamweaver 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. To apply Dreamweaver style sheets: Open the CSS Styles panel by doing one of the following: Select Window >...
Page 299: Editing A Css Style Sheet
Click the style you want to edit to select it, then do one of the following: Double-click the selected style in the CSS Styles panel. Right-click (Windows) or Control-click (Macintosh), then select Edit Rule from the content menu. Click the Edit Style button located at the bottom of the CSS panel. Select the style in the CSS panel, and edit its properties in the CSS Property inspector.
Page 300: Updating Css Style Sheets In A Contribute Site
Updating CSS style sheets in a Contribute site Contribute users can’t make changes to a CSS style sheet. To change a style sheet for a Contribute site, use Dreamweaver. The following are important factors to keep in mind when updating style sheets for a Contribute site: •...
Page 301: Checking Spelling
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.macromedia.com/support/dreamweaver. To check and correct spelling: Select Text > Check Spelling or press Shift+F7.
Page 302 Chapter 13: Inserting and Formatting Text...
Page 303: Chapter 14: Inserting Images
CHAPTER 14 Inserting Images In Macromedia Dreamweaver MX 2004, you can work in Design view or Code view to insert images in a document. As you add images in a Dreamweaver document, you can set or modify image properties and view the changes directly in the Document window.
Page 304 Note: You do not need to have Macromedia Fireworks installed on your computer to use the Dreamweaver image-editing features.
Page 305: Inserting An Image
Related topics • “Resizing an image” on page 309 • “Cropping an image” on page 310 • “Adjusting the brightness and contrast of an image” on page 311 • “Sharpening an image” on page 311 Inserting an image When you insert an image into a Dreamweaver document, Dreamweaver automatically generates a reference to the image file in the HTML source code.
Page 306 Click OK. The Image Tag Accessibility Attributes dialog box appears if you have activated the dialog box in Preferences (see “Optimizing the workspace for accessible page design” on page 53). Enter values in the Alternative Text and Long Description text boxes, then click OK. Note: You can enter information in one or both text boxes depending on your needs.
Page 307 Inserting an image placeholder An image placeholder is a graphic you use until final artwork is ready to be added to a web page. To insert an image placeholder: In the Document window, place the insertion point where you want to insert a placeholder graphic.
Page 308 Aligning an image You can align an image to text, another image, a plug-in, or other elements in the same line. You can also set the horizontal alignment of an image. To align an image: Select the image in Design view. Set the alignment attributes of the image in the Property inspector.
Page 309: Resizing An Image
If you do visually resize an image in Dreamweaver, but don’t use an image- editing application (such as Macromedia Fireworks) to scale the image file to the desired size, the user’s browser has to scale the image when the page is loaded. This may cause both a delay in page download time and the improper display of the image in the user’s browser.
Page 310: Cropping An Image
Cropping an image Dreamweaver lets you crop (or trim) bitmap file images. Note: When you crop an image using Dreamweaver, the source image file is changed on disk. for this reason, you may want to keep a backup copy of the image file in the event you need to revert to the original image.
Page 311: Adjusting The Brightness And Contrast Of An Image
• “Inserting an image” on page 305 • “Cropping an image” on page 310 • “Sharpening an image” on page 311 Adjusting the brightness and contrast of an image Brightness/Contrast modifies the contrast or brightness of pixels in an image. This affects the highlights, shadows, and midtones of an image.
Page 312: Creating A Rollover Image
To undo the effects of the sharpen command: • Select Edit > Undo Sharpen to revert to the original image. You can only undo the effect of the Sharpen command (and revert to the original image file) prior to saving the page containing the image. Once you save the page, the changes made to the image are permanently saved.
Page 313: Using An External Image Editor
Using an external image editor While in Dreamweaver, you can open a selected image in an external image editor; when you return to Dreamweaver after saving the edited image file, any changes you made to the image are visible in the Document window. You can set up Fireworks as your primary external editor.
Page 314 Chapter 14: Inserting Images...
Page 315: Chapter 15: Linking And Navigation
CHAPTER 15 Linking and Navigation After you’ve set up a Macromedia Dreamweaver MX 2004 site to store your website documents and have created HTML pages, you’ll want to create connections from your documents to other documents. Macromedia Dreamweaver MX 2004 provides several ways to create hypertext links to documents, images, multimedia files, or downloadable software.
Page 316: Understanding Document Locations And Paths
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.macromedia.com/support/ dreamweaver/contents.html is an absolute path. You must use an absolute path to link to a document on another server. While you can also use absolute-path links for local links (to documents in the same site), that approach is discouraged—...
Page 317 The basic idea of document-relative paths is to omit the part of the absolute URL that is the same for both the current document and the linked document, providing only the portion of the path that differs. For example, suppose you have a site with the following structure: You create links from contents.html to other files as follows: •...
Page 318: Jump Menus
Site root-relative paths Site root-relative paths provide the path from the site’s root folder to a document. You may want to use these types of paths if you are working on a large website that uses several servers, or one server that hosts several different sites.
Page 319: Navigation Bars
Navigation bars A navigation bar consists of an image (or set of images) whose display changes based on the actions of a user. Navigation bars often provide an easy way to move between pages and files on a site. A navigation bar element can have four states: •...
Page 320: About Image Maps
About image maps An image map is an image that has been divided into regions, or hotspots; when a user clicks a hotspot, an action occurs (for example, a new file opens). Client-side image maps store the hypertext link information in the HTML document—not in a separate map file as server-side image maps do.
Page 321 Linking to documents using the Property inspector You can use the Property inspector’s folder icon or Link text box to create links from an image, an object, or text to another document or file. To link documents using the Property inspector’s folder icon or Link text box: Select text or an image in the Document window’s Design view.
Page 322 Linking documents using the Point-to-File icon The Point-to-File icon lets you create links from an image, an object, or text to another document or file. To link documents using the Point-to-File icon: Select text or an image in the Document window’s Design view. Drag the Point-to-File icon at the right of the Link text box in the Property inspector and point to another open document, a visible anchor in an open document, or a document in the Files panel.
Page 323 To link documents in the site map, do one of the following: • Drag a page from the Windows Explorer or the Macintosh Finder onto a page in the site map. Note: Make sure the Files panel is docked, and then click the Expand arrow. Hold down the Site Map button, and then select Files and Map.
Page 324 Linking to a specific place in a document You can use the Property inspector to link to a particular section of a document by first creating named anchors. Named anchors let you set markers in a document, which are often placed at a specific topic or at the top of a document.
Page 325 To link to a named anchor using the point-to-file method: Open the document containing the named anchor you want. Note: If you don’t see the anchor, select View > Visual Aids > Invisible Elements to make it visible. In the Document window’s Design view, select text or an image you want to link from. (If this is another open document, you must switch to it.) Do one of the following: Click the Point-to-File icon to the right of the Link text box in the Property inspector and...
Page 326 Select text or an image in the Document window’s Design view. In the Link text box of the Property inspector, type mailto: followed by an e-mail address. Do not type any spaces between the colon and the e-mail address. For example, type mailto:jlydon@macromedia.com. Related topics •...
Page 327: Managing Links
Managing links To avoid broken links in your site, you can activate link management so that Dreamweaver updates links automatically when you make a change. You can also use a visual representation of your site to modify links or you can update all links to a particular file with one change. Updating links automatically Dreamweaver can update links to and from a document whenever you move or rename the document within a local site.
Page 328 To create a cache file for your site: Select Site > Manage Sites. The Edit Sites dialog box appears. Select a site, and then click Edit. The Site Definition dialog box appears. Click the Advanced tab to display the Advanced category of the Site Definition dialog box. Select Local Info from the category list on the left.
Page 329 To remove a link: Select the page in the site map. Do one of the following: Select Site > Remove Link (Windows) or Site > Site Map View > Remove Link (Macintosh). Note: Use the Files panel’s Site menu. Right-click (Windows) or Control-click (Macintosh), and select Remove Link from the context menu.
Page 330 To change a link sitewide: Select a file in the Local view of the Files panel. Note: If you are changing an e-mail, FTP, null, or script link, you do not need to select a file. Select Site > Change Link Sitewide. The Change Link Sitewide dialog box appears.
Page 331: Inserting Jump Menus
Inserting jump menus Jump menus let you associate URLs with options in a pop-up menu list. By choosing an item from the list, the user is redirected (or “jumps”) to the specified URL. Jump menus are inserted within the Jump Menu form object. To insert a jump menu: Open a document, and then place the insertion point in the Document window.
Page 332 Editing jump menu items To edit jump menu items, you can change the list order or the file an item links to, or you can add, delete, or rename an item. To change the location in which a linked file opens, or to add or change a menu selection prompt, you must use the Behaviors panel (see “Jump Menu”...
Page 333: Using Navigation Bars
Using navigation bars A navigation bar consists of an image (or set of images) whose display changes based on the actions of a user. Before using the Insert Navigation Bar command, you must create a set of images for the display states of each navigation element.
Page 334 Related topics • “Navigation bars” on page 319 Modifying a navigation bar Once you create a navigation bar for a document, you can add images to or remove them from the navigation bar by using the Modify Navigation Bar command. To modify a navigation bar: Select the navigation bar in the active page.
Page 335: Using Image Maps
Using image maps An image map is an image that has been divided into regions, or “hotspots”; when a user clicks a hotspot, an action occurs (for example, a new file opens). Related topics • “About image maps” on page 320 Inserting client-side image maps When you insert a client-side image map, you create a hotspot area, and then define a link that opens when a user clicks the hotspot area.
Page 336: Attaching Javascript Behaviors To Links
To select multiple hotspots in an image map: Use the pointer hotspot tool to select a hotspot. Do one of the following: Shift-click the other hotspots you want to select. Press Control+A (Windows) or Command+A (Macintosh) to select all of the hotspots. To move a hotspot: Use the pointer hotspot tool to select the hotspot you want to move.
Page 337 The only links that Dreamweaver verifies are links to documents within the site; Dreamweaver compiles a list of external links that appear in the selected document or documents, but does not verify them. To check links within the current document: Save the file to a location within your local Dreamweaver site.
Page 338: Fixing Broken Links
Fixing broken links After you run a links reports, you can fix broken links and image references directly in the Link Checker panel, or you can open files from the list and fix links in the Property inspector. To fix links in the Link Checker panel: Run a link check report (see “Checking for broken, external, and orphaned links”...
Page 339: Opening Linked Documents In Dreamweaver
Opening linked documents in Dreamweaver Links are not active within Dreamweaver; that is, you cannot open a linked document by clicking the link in the Document window. To open linked documents in Dreamweaver, do one of the following: • Select the link and select Modify > Open Linked Page. •...
Page 340 Chapter 15: Linking and Navigation...
Page 341: Chapter 16: Working With Other Applications
Macromedia Fireworks MX 2004, Macromedia Flash MX 2004, and Macromedia Flash MX Professional 2004 are powerful web-development tools designed to create graphics and SWF movies for viewing in web pages. You can tightly integrate Macromedia Dreamweaver MX 2004 with these tools to simplify your web design workflow.
Page 342: Optimizing Your Work Environment For Fireworks And Flash
Optimizing your work environment for Fireworks and Flash The key to developing a smoothly integrated workflow with Fireworks or Flash is to optimize your work environment. To optimize your work environment for Fireworks and Flash: Make sure Design Notes are enabled for your Dreamweaver site. Design Notes are automatically enabled unless you alter your default site settings.
Page 343 Editing a Fireworks image or table from Dreamweaver You can start Fireworks from Dreamweaver to edit images inserted in a Dreamweaver document. When you open and edit an image or an image slice that is part of a Fireworks table, Dreamweaver starts Fireworks, which opens the PNG file from which the image or table was exported.
Page 344 Optimizing a Fireworks image from Dreamweaver You can start Fireworks from Dreamweaver to make quick export changes, such as resizing an image or changing the file type, to placed Fireworks images and animations. Fireworks lets you make changes to optimization settings, animation settings, and the size and area of the exported image.
Page 345 Fireworks starts, in Editing from Dreamweaver mode. Use Fireworks options to design the image. Fireworks recognizes the following image placeholder settings you may have set while working with the image placeholder in Dreamweaver: image size (which correlates to the Fireworks canvas size), image ID (which Fireworks uses as the default document name for the source file and export file you create), text alignment, and behaviors that are recognized by Fireworks (such as swap image, pop-up menu, navigation bar, and set text).
Page 346 Opening a Fireworks pop-up menu in Dreamweaver Fireworks supports image-based pop-up menus and HTML-based pop-up menus. Dreamweaver only supports HTML-based pop-up menus. In Dreamweaver, you can open a Fireworks pop-up menu and make edits to all menu item properties except for the background images of image- based pop-up menus.
Page 347 Ask When Launching lets you specify each time whether or not to open the source PNG file. When you edit or optimize a placed image, Fireworks displays a message prompting you to make a launch-and-edit decision. You can also specify global launch-and-edit preferences from this message.
Page 348: Updating Fireworks Html Placed In Dreamweaver
To export and paste Fireworks HTML into Dreamweaver: In Fireworks, select File > Export. In the Export dialog box, specify your Dreamweaver site folder as the destination for the exported images. In the Save As pop-up menu, select HTML and Images. In the HTML pop-up menu, select Copy to Clipboard;...
Page 349 To create a web photo album: In Dreamweaver, select Commands > Create Web Photo Album. In the Photo Album Title text box, enter a title. The title will be displayed in a gray rectangle at the top of the page containing the thumbnails. If desired, you can enter up to two lines of additional text to appear directly beneath the title, in the Subheading Info and Other Info text boxes.
Page 350 Click OK to create the HTML and image files for the web photo album. Fireworks starts (if it’s not already running), and creates the thumbnails and large-size images. This may take several minutes if you’ve included a large number of image files. When the processing is complete, Dreamweaver becomes active again, and creates the page containing the thumbnails.
Page 351: Working With Flash
You can use Dreamweaver to set playback and display options for a Flash file in a web page, or update the links in the movie. If Macromedia Flash MX 2004 is installed, you can also select a SWF file in a Dreamweaver document and start Flash to edit it.
Page 352 In Flash, edit the movie. The Document window indicates that you are modifying a movie from within Dreamweaver. When you are finished making edits, click Done. Flash updates the Flash authoring document (FLA file), re-exports the movie file (SWF file), closes, and then returns the focus to the Dreamweaver document.
Page 353 Updating links in a SWF file You can use Dreamweaver to update a link in a Flash file (SWF file), then update the change in the Flash authoring document (FLA file). To update a URL link in a SWF file: Set up a home page for the site, if you haven’t already done so.
Page 354 Chapter 16: Working with Other Applications...
Page 355: Chapter 17: Adding Audio, Video, And Interactive Elements
CHAPTER 17 Adding Audio, Video, and Interactive Elements Macromedia Dreamweaver MX 2004 lets you add sound and movies to your website quickly and easily. You can attach Design Notes to these objects, which let you communicate with your team. You can also insert Macromedia Flash MX 2004 button and text objects from within Dreamweaver itself.
Page 356: About Media Files
Dreamweaver/Configuration/Flash Objects/Flash Buttons and Flash Text folders. You can download new button templates from the Macromedia Exchange for Dreamweaver website (www.macromedia.com/exchange/dreamweaver/) and place them in your Flash Button folder. For more information on creating new button templates, see the article on that topic found on the Macromedia website at www.macromedia.com/go/flash_buttons.
Page 357 Audio file formats The following list describes the more common audio file formats along with some of the advantages and disadvantages of each for web design. .midi or .mid (Musical Instrument Digital Interface) format is for instrumental music. MIDI files are supported by many browsers and don’t require a plug-in. Although their sound quality is very good, it can vary depending on a visitor’s sound card.
Page 358: Inserting And Editing Media Objects
Inserting and editing media objects You can insert a Flash movie or object, QuickTime or Shockwave movie, Java applet, ActiveX control, or other audio or video objects in a Dreamweaver document. To insert a media object in a page: Place the insertion point in the Document window where you want to insert the object. Insert the object by doing one of the following: In the Common category of the Insert bar, click the Media button and select the button for the type of object you want to insert.
Page 359: Starting An External Editor For Media Files
If you double-click an image file, for example, Dreamweaver opens the file in the primary external image editor such as Macromedia Fireworks. If you don’t want to use the primary external editor to edit the file, you can use another editor...
Page 360: Using Design Notes With Media Objects
Specifying the editor to start from Dreamweaver You can specify the editor you want Dreamweaver to use for editing a file type, and add or delete file types that Dreamweaver recognizes. To explicitly specify which external editors should be started for a given file type: Select Edit >...
Page 361: Inserting And Modifying A Flash Button Object
You can create, insert, and modify Flash buttons in your documents while working in Dreamweaver; Macromedia Flash is not required. The Flash button object is an updateable button based on a Flash template. You can customize a Flash button object, adding text, background color, and links to other files.
Page 362 Modifying a Flash button object You can modify the properties and content of a Flash button object. To modify a Flash button object: In the Document window, click the Flash button object to select it. Open the Property inspector, if it is not already open. The Property inspector displays the Flash button properties.
Page 363: Inserting A Flash Text Object
Inserting a Flash text object The Flash text object lets you create and insert a Flash movie that contains just text. This allows you to create a small, vector-graphic movie with the designer fonts and text of your choice. To insert a Flash text object: In the Document window, place the insertion point where you want to insert the Flash text.
Page 364: Downloading And Installing Flash Elements
Macromedia applications. Start the Extension Manager from Dreamweaver by selecting Commands > Manage Extensions. To find the latest Flash elements for Dreamweaver, use the Macromedia Exchange website at www.macromedia.com/exchange/dreamweaver/. Once there, you can log in and download Flash elements and other Dreamweaver extensions (many of which are free), join discussion groups, view user ratings and reviews, and install and use the Extension Manager.
Page 365: Editing Flash Element Attributes
You can use Dreamweaver to insert Shockwave movies into your documents. Shockwave, the Macromedia standard for interactive multimedia on the web, is a compressed format that allows media files created in Macromedia Director to be downloaded quickly and played by most popular browsers.
Page 366: Adding Sound To A Page
Adding sound to a page You can add sound to a web page. There are several different types of sound files and formats, including .wav, .midi, and .mp3. For more information, see “Audio file formats” on page 357. Some factors to consider before deciding on a format and method for adding sound are its purpose, your audience, file size, sound quality, and differences in browsers.
Page 367: Inserting Netscape Navigator Plug-In Content
Inserting Netscape Navigator plug-in content You can create content such as a QuickTime movie for a Netscape Navigator plug-in, and then use Dreamweaver to insert that content into an HTML document. Typical plug-ins include RealPlayer and QuickTime, while some content files include MP3s and QuickTime movies. Inserting plug-in content in your page Your page can include content that will run in a plug-in in the user’s browser.
Page 368: Inserting An Activex Control
Troubleshooting Netscape Navigator plug-ins If you have followed the steps to play plug-in content in the Document window, but some of the plug-in content does not play, try the following: • Make sure the associated plug-in is installed on your computer, and that the content is compatible with the version of the plug-in you have.
Page 369: Using Behaviors To Control Media
Using behaviors to control media You can add behaviors to your page to start and stop various media objects. Control Shockwave or Flash lets you play, stop, rewind, or go to a frame in a Shockwave or Flash movie (see “Control Shockwave or Flash”...
Page 370 Chapter 17: Adding Audio, Video, and Interactive Elements...
Page 371: Chapter 18: Using Javascript Behaviors
An action consists of pre-written JavaScript code that performs a specific task, such as opening a browser window, showing or hiding a layer, playing a sound, or stopping a Macromedia Shockwave movie. The actions provided with Dreamweaver MX are carefully written by Dreamweaver engineers to provide maximum cross-browser compatibility.
Page 372: Using The Behaviors Panel
For names and descriptions of the events provided by each browser, see the Dreamweaver Support Center at www.macromedia.com/support/dreamweaver/. Different events appear in the Events pop-up menu depending on the selected object and on the browsers specified in the Show Events For submenu.
Page 373: Applying A Behavior
For example, the Control Shockwave or Flash action is dimmed if the document contains no Shockwave or Macromedia Flash SWF files. If no events are available for the selected object, all actions are dimmed.
Page 374: Attaching A Behavior To Text
Attaching a behavior to text You can’t attach a behavior to plain text. Tags like don’t generate events in browsers, so span there’s no way to trigger an action from those tags. However, you can attach a behavior to a link. Therefore, to attach a behavior to text, the easiest approach is to add a null link (that doesn’t point to anything) to the text, then attach the behavior to the link.
Page 375: Changing A Behavior
Changing a behavior After attaching a behavior, you can change the event that triggers the action, add or remove actions, and change parameters for actions. To change a behavior: Select an object with a behavior attached. Select Window > Behaviors to open the Behaviors panel. Behaviors appear in the panel alphabetically by event.
Page 376: Downloading And Installing Third-Party Behaviors
Macromedia Exchange for Dreamweaver website (www.macromedia.com/exchange/dreamweaver/). To download and install new behaviors from the Macromedia Exchange website: Open the Behaviors panel and select Get More Behaviors from the Actions (+) pop-up menu. Your primary browser opens, and the Exchange site appears. (You must be connected to the web to download behaviors.)
Page 377 Call JavaScript The Call JavaScript action lets you use the Behaviors panel to specify that a custom function or line of JavaScript code should be executed when an event occurs. (You can write the JavaScript yourself, or you can use code provided by various freely available JavaScript libraries on the web.) To use the Call JavaScript action: Select an object and open the Behaviors panel.
Page 378 Check Browser Use the Check Browser action to send visitors to different pages depending on their browser brands and versions. For example, you might want visitors to go to one page if they have Netscape Navigator 4.0 or later, to go to another page if they have Internet Explorer 4.0 or later, and to stay on the current page if they have any other kind of browser.
Page 379 Check Plugin Use the Check Plugin action to send visitors to different pages depending on whether they have the specified plug-in installed. For example, you might want visitors to go to one page if they have Shockwave and another page if they do not. Note: You cannot detect specific plug-ins in Internet Explorer using JavaScript.
Page 380 Control Shockwave or Flash Use the Control Shockwave or Flash action to play, stop, rewind, or go to a frame in a Macromedia Shockwave or Macromedia Flash SWF files. To use the Control Shockwave or Flash action: Select Insert > Media > Shockwave or Insert > Media > Flash to insert a Shockwave or Flash SWF file, respectively.
Page 381 Click the Plus (+) button and select Drag Layer from the Actions pop-up menu. If Drag Layer is unavailable, you probably have a layer selected. Because layers do not accept events in both 4.0 browsers, you must select a different object—such as the tag or a link body tag)—or change the target browser to Internet Explorer 4.0 in the Show Events For...
Page 382 Click OK. Check that the default event is the one you want. If it isn’t, select another event from the pop-up menu. If the events you want are not listed, change the target browser in the Show Events For pop-up menu. Remember that layers are not supported by 3.0 browsers.
Page 383 To prevent re-registration of snapped layers: Make a backup copy of your document before making any changes to the code. (You can do this in the Site panel in Dreamweaver, or in Windows Explorer (Windows) or the Finder (Macintosh).) Select Edit > Find. Select HTML Source from the Find What pop-up menu.
Page 384 Jump Menu When you create a jump menu by using Insert > Form Objects > Jump Menu, Dreamweaver creates a menu object and attaches the Jump Menu (or Jump Menu Go) behavior to it. There is usually no need to attach the Jump Menu action to an object by hand. For information about jump menus and how to create them, see “Jump menus”...
Page 385: Status Bar
If you specify no attributes for the window, it opens at the size and with the attributes of the window that opened it. Specifying any attribute for the window automatically turns off all other attributes that are not explicitly turned on. For example, if you set no attributes for the window, it might open at 640 x 480 pixels and have a navigation bar, location toolbar, status bar, and menu bar.
Page 386 Play Sound Use the Play Sound action to play a sound. For example, you might want to play a sound effect whenever the mouse pointer rolls over a link, or you might want to play a music clip when the page loads.
Page 387 Preload Images The Preload Images action loads images that do not appear on the page right away (such as those that will be swapped in with behaviors or JavaScript) into the browser cache. This prevents delays caused by downloading when it is time for the images to appear. Note: The Swap Image action automatically preloads all highlight images when you select the Preload Images option in the Swap Image dialog box, so you do not need to manually add Preload Images when using Swap Image.
Page 388 To set multiple images for a navigation bar button: Select an image in the navigation bar to edit, and open the Behaviors panel. In the Behaviors panel, in the Actions column, double-click the Set Nav Bar Image action associated with the event you’re altering. Click the Advanced tab of the Set Nav Bar Image dialog box.
Page 389 To use the Set Text of Frame action: Select an object and open the Behaviors panel. Click the Plus (+) button and select Set Text > Set Text of Frame from the Actions pop-up menu. In the Set Text of Frame dialog box, select the target frame from the Frame pop-up menu. Click the Get Current HTML button to copy the current contents of the target frame’s section.
Page 390 Set Text of Status Bar The Set Text of Status Bar action shows a message in the status bar at the bottom left of the browser window. For example, you can use this action to describe the destination of a link in the status bar instead of showing the URL associated with it.
Page 391 To use the Set Text of Text Field action: Select a text field and open the Behaviors panel. Click the Plus (+) button and select Set Text > Set Text of Text Field from the Actions pop-up menu. In the Set Text of Text Field dialog box, select the target text field from the Text Field pop-up menu.
Page 392 To create a preload layer: Click the Draw Layer button in the Common category of the Insert bar and draw a large layer in the Document window’s Design view. Be sure the layer covers all the content on the page. In the Layers panel, drag the layer name to the top of the list of layers to specify that the layer should be at the front of the stacking order.
Page 393 Show Pop-Up Menu You use the Show Pop-Up Menu behavior to create or edit a Dreamweaver pop-up menu or to open and modify a Fireworks pop-up menu you’ve inserted in a Dreamweaver document. You set options in the Show Pop-Up Menu dialog box to create a horizontal or vertical pop-up menu.
Page 394 To create a submenu item: In the Show Pop-Up Menu list, select the item you want to make into a submenu item, then do one of the following: • To indent an item in the menu list, click the Indent Item button. •...
Page 395 Setting advanced appearance options Use options in the Advanced tab to specify additional attributes of the menu cells. For example, you can set the width, height, cell spacing or padding of the menu button, indent text, and set border attributes. To set advanced formatting attributes for a pop-up menu: Click the Advanced tab, then set the options you want to apply to the menu items: Cell Width...
Page 396 Modifying a pop-up menu The Show Pop-Up Menu behavior allows you to edit or update the contents of a pop-up menu. You can add, delete, or change menu items, rearrange them, and set where a menu is positioned relative to the triggering image or link. To open an existing HTML-based pop-up menu: In the Dreamweaver document, select the link or image that triggers the pop-up menu.
Page 397 Click OK. Check that the default event is the one you want. If it isn’t, select another event from the pop-up menu. If the events you want are not listed, change the target browser in the Show Events For pop-up menu. Swap Image Restore The Swap Image Restore action restores the last set of swapped images to their previous source files.
Page 398 Click OK. If you are validating multiple fields when the user submits the form, the event onSubmit automatically appears in the Events pop-up menu. If you are validating individual fields, check that the default event is onBlur onChange If it isn’t, select from the pop-up menu.
Page 399 PART V Working with Page Code Use the advanced coding tools in Macromedia Dreamweaver MX 2004 to create or modify pages. This part contains the following chapters: Chapter 19, “Setting Up Your Coding Environment,” on page 401 Chapter 20, “Coding in Dreamweaver,” on page 415 Chapter 21, “Optimizing and Debugging Your Code,”...
Page 401: Chapter 19: Setting Up Your Coding Environment
CHAPTER 19 Setting Up Your Coding Environment You can adapt the coding environment in Macromedia Dreamweaver MX 2004 so it fits the way you work. For example, you can change the way you view code, set up different keyboard shortcuts, or import and use your favorite tag library.
Page 402: Using The Coder-Oriented Workspace (Windows Only)
Select Window > Others > Code Inspector. Using the coder-oriented workspace (Windows only) In Windows, you can use a workspace that looks similar to the workspace in Macromedia HomeSite, with the panel groups docked on the left side of the main window instead of on the right side.
Page 403: Setting Viewing Preferences
Setting viewing preferences You can set word wrapping, display line numbers for the code, highlight invalid HTML code, set syntax coloring for code elements, and set indenting from the View > Code View Options menu. To set options for Code view and the Code inspector: View a document in Code view or the Code inspector.
Page 404 Setting code hints preferences Code hints let you quickly insert tag names, attributes, and values as you type code. For more information, see “Using code hints” on page 423. Tip: Even if code hints are disabled, you can display a pop-up hint in Code view by pressing Control+Spacebar.
Page 405: Customizing Keyboard Shortcuts
Setting code coloring preferences Use the code coloring preferences to specify colors for general categories of tags and code elements, such as form-related tags or JavaScript identifiers. To set color preferences for a specific tag, edit the tag definition in the Tag Library editor. For more information, see “Editing libraries, tags, and attributes”...
Page 406: Managing Tag Libraries
To set preferences for the Validator: Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh). Select Validator from the Category list on the left. The Validator preferences appear. Select tag libraries to validate against, and set options for those libraries. For more information, click the Help button in the dialog box.
Page 407 To close the Tag Library editor and save changes: • Click OK. To close the Tag Library editor without saving changes: • Click Cancel. Note: When you click Cancel, all changes you’ve made in the Tag Library editor are discarded. If you deleted a tag or tag library, it’s restored.
Page 408 Editing libraries, tags, and attributes You can use the Tag Library editor to set properties for a tag library and edit tags and attributes in a library—whether it be their attributes and attribute values, or their format (for easy identification in the code). To set properties for a tag library: In the Tag Library editor (Edit >...
Page 409 To edit an attribute for a tag: In the Tag Library editor (Edit > Tag Libraries), expand a tag library in the Tags box, expand a tag, and select a tag attribute. In the Attribute Case pop-up menu, select Default, Lowercase, Uppercase, or Mixed Case. If you select Mixed Case, the Attribute Name Mixed Case dialog box appears.
Page 410: Importing Custom Tags Into Dreamweaver
Importing custom tags into Dreamweaver You can import custom tags into Dreamweaver so that they become an integral part of the authoring environment. For example, when you start typing an imported custom tag in Code view, a code hints menu appears, listing the tag’s attributes and letting you select one. Importing tags from XML files You can import tags from an XML Document Type Definition (DTD) file or a schema.
Page 411 For more information, click the Help button in the dialog box. Click OK. Importing JRun tags If you use Macromedia JRun, you can import your JRun tags into Dreamweaver. To import JRun tags into Dreamweaver: Open a JSP page in Dreamweaver.
Page 412: Using An External Html Editor With Dreamweaver
Dreamweaver detects any changes that have been saved to the document externally and prompts you to reload the document upon returning. You can use the following integrated HTML editors: Macromedia HomeSite (Windows only) or BBEdit (Macintosh only). You can also use any other text editor, such as Notepad, WordPad, TextPad, TextEdit, SimpleText, vi, or emacs.
Page 413 To disable BBEdit integration: Select Edit > Preferences or Dreamweaver > Preferences (Mac OS X), and select File Types/ Editors. Deselect Enable BBEdit Integration and click OK. Setting file type and external editor preferences You can specify which external application to use for editing each of a variety of filename extensions.
Page 414 Chapter 19: Setting Up Your Coding Environment...
Page 415: Chapter 20: Coding In Dreamweaver
CHAPTER 20 Coding in Dreamweaver Macromedia Dreamweaver MX 2004 offers a full-featured coding environment designed for any type of web development, from writing simple HTML pages to designing, testing, and deploying complex web applications. Note: For information on migrating from Macromedia HomeSite to Dreamweaver, visit the Dreamweaver Support Center at www.macromedia.com/go/migrate_from_homesite.
Page 416: About Coding In Dreamweaver
About coding in Dreamweaver The coding environment in Dreamweaver allows you to write, edit, and test code (in a variety of languages) in your pages. Dreamweaver doesn’t change your hand-written code unless you enable specific options to rewrite certain kinds of invalid code. Related topics •...
Page 417 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, Dreamweaver never rewrites your code unless the code rewriting options are enabled or you perform an action that changes the code. For example, Dreamweaver does not alter your white space or change the case of attributes unless you use the Apply Source Formatting command.
Page 418 The following table describes the XHTML requirements that Dreamweaver meets automatically. XHTML requirement Actions Dreamweaver performs to meet this requirement When the character encoding of a document is Adds an XML declaration to an XHTML other than the default UTF-8, the document must document and specifies the encoding;...
Page 419 XHTML requirement Actions Dreamweaver performs to meet this requirement All attribute values must be surrounded by Places quotation marks around attribute values in quotation marks. the code that it generates, and when cleaning up XHTML. The following elements must have an attribute Sets the attributes to the same value,...
Page 420 You cannot edit the included file directly in a document. To edit the contents of a server-side include, you must directly edit the file that you’re including. Note that any changes to the external file are automatically reflected in every document that includes it. There are two types of server-side includes: Virtual and File.
Page 421 The following table lists the special characters in regular expressions, their meanings, and usage examples. To search for text containing one of the special characters in the table, “escape” the special character by preceding it with a backslash. For example, to search for the actual asterisk in the phrase , your search pattern might look like this: apply\*.
Page 422 Character Matches Example Form feed. Line feed. Carriage return. Any single white-space matches ”book” in “blue book” \sbook character, including space, tab, but nothing in “notebook” form feed, or line feed. Any single non-white-space character. matches “book” in “notebook” \Sbook but nothing in “blue book”...
Page 423: Writing And Editing Code
About server behavior code When you develop a dynamic page and select a server behavior from the Server Behaviors panel, Dreamweaver inserts one or more code blocks into your page to make the server behavior work. If you manually change the code within a code block, you can no longer use panels such as the Bindings and Server Behaviors panels to edit the server behavior.
Page 424 To edit a tag using code hints, do either of the following: • To replace an attribute with a different attribute, first delete the attribute and its value, then add a new attribute and its value as described in the previous procedure. •...
Page 425 Inserting tags with the Tag Chooser You can use the Tag Chooser to insert in your page any tag in the Dreamweaver tag libraries (which include Macromedia ColdFusion and ASP.NET tag libraries). For more information on the tag libraries, see “Managing tag libraries”...
Page 426 Editing tags with Tag editors Tag editors let you view, specify, and edit the attributes of a tag. To edit a tag with a Tag editor: Right-click (Windows) or Control-click (Macintosh) a tag in Code view or an object in Design view, and select Edit Tag from the pop-up menu.
Page 427 Copying and pasting code You can copy and paste code from another application or from Code view itself. You can copy and paste the code as text (so that it appears on the page when viewed in a browser) or as code (so that browsers interpret it as, for example, HTML tags).
Page 428: Searching And Replacing Tags And Attributes
Viewing JavaScript and VBScript functions in your document You can view a list of all of the JavaScript or VBScript functions in your document, and you can jump to any function. To view the names of the script functions in a document: View the document in Code view.
Page 429 To search again without displaying the Find and Replace dialog box: • Press F3 (Windows) or Command+G (Macintosh). Related topics • “Regular expressions” on page 420 Saving search patterns You can save a search pattern and reuse it later. To save a search pattern: In the Find and Replace dialog box (Edit >...
Page 430: Making Quick Changes To A Code Selection
Making quick changes to a code selection You can select code and then make quick changes to it using a context menu. To make quick changes to selected code: In Code view, select some code and right-click (Windows) or Control-click (Macintosh). In the context menu, select the Selection submenu.
Page 431: Using Language-Reference Material
Using language-reference material The Reference panel provides you with a quick reference tool for markup languages, programming languages, and CSS styles; it provides information on the specific tags, objects, or styles that you are working with in Code view (or the Code inspector). To open the Reference panel: Do one of the following in Code view: Right-click (Windows) or Control-click (Macintosh) a tag, attribute, or keyword and select...
Page 432: Printing Your Code
Printing your code You can print your code to edit it offline, archive it, or distribute it. To print code: Open a page in Code view. Select File > Print Code. Specify printing options, then click OK (Windows) or Print (Macintosh). Chapter 20: Coding in Dreamweaver...
Page 433: Chapter 21: Optimizing And Debugging Your Code
CHAPTER 21 Optimizing and Debugging Your Code You can use Macromedia Dreamweaver MX 2004 to optimize and debug your code. For example, you can validate your tags, make your document XHTML-compliant, or debug your ColdFusion code. This chapter covers the following topics: •...
Page 434: Verifying That Tags And Braces Are Balanced
Related topics • “Setting code formatting preferences” on page 403 • “Setting code coloring preferences” on page 405 Verifying that tags and braces are balanced You can check to make sure the tags, parentheses (( )), braces ({ }), and square brackets ([ ]) in your page are balanced.
Page 435 3.0 and later, for Microsoft Internet Explorer version 3.0 and later, and Opera version 2.1 and later. For information on how to modify the existing profiles or to create new ones, see the “Customizing Dreamweaver” article at www.macromedia.com/support/dreamweaver/. To select browsers for Dreamweaver to check against: Select Settings from the Target Browser Check menu in the Document toolbar.
Page 436 To view the Check Target Browser report for the entire document: • In the Target Browser Check menu in the Document toolbar, select Show All Errors. The Results panel group appears, with the Target Browser Check panel selected. Errors are marked with a red exclamation mark icon, warnings are marked with a yellow exclamation mark icon, and informational messages are marked with a word-balloon icon.
Page 437: Validating Your Tags
To view a target browser check report in a browser: • Click the Browse Report button in the Target Browser Check panel. To fix an error: • Remove the unsupported code, or change it to other code that’s supported by your target browsers.
Page 438: Making Pages Xhtml-Compliant
Making pages XHTML-compliant When you create a new page, you can make it XHTML-compliant. You can also make an existing HTML document XHTML-compliant. To create a new, XHTML-compliant document: Select File > New. The New Document dialog box appears. Select a document type. Select the Make Document XHTML Compliant option.
Page 439: Using The Coldfusion Debugger (Windows Only)
Using the ColdFusion debugger (Windows only) If you’re a ColdFusion developer using Macromedia ColdFusion MX as your Dreamweaver testing server, you can view ColdFusion debugging information without leaving Dreamweaver. Note: This feature is not supported on the Macintosh. Macintosh developers can use Preview in Browser (F12) to open a ColdFusion page in a separate browser.
Page 440 Chapter 21: Optimizing and Debugging Your Code...
Page 441: Chapter 22: Editing Code In Design View
CHAPTER 22 Editing Code in Design View Macromedia Dreamweaver MX 2004 lets you visually create and edit web pages without worrying about the underlying source code, but there are times when you might need to edit the code for greater control or to troubleshoot your web page. Dreamweaver lets you edit some code while working in Design view.
Page 442: Changing Attributes With The Tag Inspector
To use the Property inspector: Click in text or select an object on the page. The Property inspector for the text or object appears below the Document window. If the Property inspector is not visible, select Window > Properties. Make changes to the attributes in the Property inspector. Related topics •...
Page 443: Editing Code With The Quick Tag Editor
To edit or add an attribute value, do one of the following: • Type a new value for the attribute in the attribute-value column, to the right of the attribute name. • If the attribute takes pre-defined values, select a value from the pop-up menu (or the color picker) to the right of the attribute-value column.
Page 444 Editing an HTML tag with the Quick Tag Editor You can use the Quick Tag Editor to edit an HTML tag in your document. To edit an HTML tag with the Quick Tag Editor: Select an object in Design view. You can also select the tag you want to edit from the tag selector at the bottom of the Document window.
Page 445 Using the hints menu While in the Quick Tag Editor, you can access an attributes hint menu that lists all the valid attributes of the tag you are editing or inserting. You can also disable the hints menu or adjust the delay before the menu pops up in the Quick Tag Editor.
Page 446: Editing Code With The Tag Selector
Editing code with the tag selector You can use the tag selector to select, edit, or remove tags without leaving Design view. The tag selector is located in the status bar at the bottom of the Document window and shows a series of tags, as follows: To edit a tag: Click in the document.
Page 447 To insert a client-side script in Design view: Place the insertion point where you want the script. Select Insert > Script Objects > Script. The Script dialog box appears. Complete the dialog box and click OK. For more information, click the Help button in the dialog box. Linking to an external script file You can create a link in your document to an external script file without leaving Design view.
Page 448: Working With Server-Side Includes
Working with server-side includes Server-side includes are instructions to the web server to include a specified file in a web page before serving the page to the browser. For more information, see “Server-side includes” on page 419. You can use Dreamweaver to insert server-side includes in your pages, edit the includes, or preview pages containing includes.
Page 449: Using Javascript Behaviors
Using JavaScript behaviors The Behaviors tab of the Tag inspector allows you to easily attach JavaScript (client-side) behaviors to page elements. For more information, see “Using the behavior actions that come with Dreamweaver” on page 376. Viewing and editing head content You can view the elements in the section of a document using the View menu, the head...
Page 450 Chapter 22: Editing Code in Design View...
Page 451 PART VI Preparing to Build Dynamic Sites If you’re building a dynamic web application, start by setting up an application server and connecting to a database. This part contains the following chapters: Chapter 23, “Setting Up a Web Application,” on page 453 Chapter 24, “Database Connections for ColdFusion Developers,”...
Page 453: Chapter 23: Setting Up A Web Application
CHAPTER 23 Setting Up a Web Application This chapter describes how to configure your system to build web applications in Macromedia Dreamweaver MX 2004. What you need to build web applications To build web applications in Dreamweaver, you need the following software: •...
Page 454: Setting Up A Web Server
Others vendors provide easier, more cost-effective solutions (examples include Macromedia ColdFusion and JRun servers). Some application servers are built into web servers (such as Microsoft IIS) and others can be downloaded for free from the Internet (such as Jakarta Tomcat and PHP).
Page 455 It is not licensed for deployment. It supports requests from the local host and one remote IP address and includes every feature of the Enterprise Edition except Macromedia ClusterCATS and 10K Verity document search. After 30 days, it will only support requests from one IP address, but you can still use it for development and testing as long as you want.
Page 456: Sun One Active Server Pages
Installing an ASP.NET application server To run ASP.NET pages, you need the following software: • A Windows 2000 or Windows XP Professional computer running IIS 5 or later • The Microsoft .NET Framework, which you can download from the Microsoft website Download the .NET Framework from the Microsoft website at http://asp.net/download.aspx follow the installation instructions on the website.
Page 457 To run JSP pages, you need an application server that supports JavaServer Pages. Here are some popular choices: • Macromedia JRun for Windows, Mac OS X, Linux, Solaris, or UNIX. You can download a trial version of JRun from the Macromedia website at www.macromedia.com/go/jrun/. •...
Page 458: Creating A Root Folder For The Application
Creating a root folder for the application After signing up with a web hosting company or setting up the server software yourself, create a root folder for your web application on the computer running the web server. Make sure the folder is published by the web server—in other words, the web server can serve any file in this folder or in any of its subfolders in response to an HTTP request from a web browser.
Page 459: Defining A Dreamweaver Site
Defining a Dreamweaver site After configuring your system to develop web applications, define a Dreamweaver site to manage your files. Before you start, make sure you meet the following requirements: • You have access to a web server. The web server can be running on your local computer, on a remote computer such as a development server, or on a server maintained by a web hosting company.
Page 460 Defining a remote folder After defining a local folder, you can define a remote folder for your Dreamweaver site. The remote folder is the folder you created for your web application on the web server (see “Creating a root folder for the application” on page 458).
Page 461: Connecting To A Database
Specifying where dynamic pages can be processed After defining the remote folder in Dreamweaver, specify a folder where dynamic pages can be processed. Dreamweaver uses this folder to generate dynamic content and connect to databases while you work. Typically, you specify the root folder you created on the web server (see “Creating a root folder for the application”...
Page 462 Chapter 23: Setting Up a Web Application...
Page 463: Chapter 24: Database Connections For Coldfusion Developers
CHAPTER 24 Database Connections for ColdFusion Developers You can connect to databases when developing Macromedia ColdFusion applications with Macromedia Dreamweaver MX 2004. The chapter assumes you have set up a ColdFusion web application (see Chapter 23, “Setting Up a Web Application,” on page 453).
Page 464: Editing Or Deleting A Database Connection
Creating a ColdFusion data source Before you can connect to a database, you must create a ColdFusion data source in ColdFusion Administrator, the server’s management console. Note: If you’re running ColdFusion 4 or 5 on a Windows computer, you can also set up a DSN on the computer.
Page 465: Chapter 25: Database Connections For Asp.net Developers
Database Connections for ASP.NET Developers To use a database with an ASP.NET application, you need to create a database connection in Macromedia Dreamweaver MX 2004. This chapter describes how to create the database connection. Note: If you’re developing Microsoft Active Server Pages (ASP) applications, see Chapter 26, “Database Connections for ASP Developers,”...
Page 466 If you want to connect to a Microsoft SQL Server database, you can use the Managed Data Provider for SQL Server that comes with the .NET Framework. This provider, which is optimized for SQL Server and is very fast, is installed when you install the .NET Framework. If you want to connect to a database other than SQL Server, make sure an OLE DB provider for your database is installed on the computer running the .NET Framework.
Page 467 To create a database connection using Data Link Properties: Open an ASP.NET page in Dreamweaver, then open the Databases panel (Window > Databases). The panel displays the connections defined for the site. Click the Plus (+) button on the panel and select OLE DB Connection from the pop-up menu. The OLE DB Connection dialog box appears.
Page 468: Editing Or Deleting A Database Connection
Case 2: You use the .NET Framework on a remote development server and you want to connect to a Microsoft Access database called mtnSchool.mdb located on the server in the following folder: d:\users\tara\projects\MtnDrivingSchool\data\mtnSchool.mdb. Here are the parameters to create the connection string: Provider=Microsoft.Jet.OLEDB.4.0;...
Page 469: Chapter 26: Database Connections For Asp Developers
Database Connections for ASP Developers To use a database with a Microsoft Active Server Pages (ASP) application, you need to create a database connection in Macromedia Dreamweaver MX 2004. This chapter describes how to create the database connection. Note: If you’re developing ASP.NET applications, see Chapter 25, “Database Connections for...
Page 470 You can use a data source name (DSN) or a connection string to connect to the database. A DSN is a one-word identifier, such as myConnection, that points to the database and contains all the information needed to connect to it. You define a DSN in Windows. You can use a DSN if you’re connecting through an ODBC driver installed on a Windows system.
Page 471: Creating A Dsn Connection
For the parameter value of your OLE DB provider, see your provider vendor’s documentation, or consult your system administrator. Related topics • “Creating a DSN-less connection” on page 474 Creating a DSN connection You can use a DSN to create an ODBC connection between your web application and your database.
Page 472 Click the Plus (+) button on the panel and select Data Source Name (DSN) from the pop-up menu. The Data Source Name (DSN) dialog box appears. Enter a name for the new connection. Note: Do not use any spaces or special characters in the name. Select the Using Local DSN option at the bottom of the dialog box.
Page 473 To create a database connection with a remotely defined DSN: 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 98, see Microsoft Knowledge Base Article 300595 at http://support.microsoft.com/default.aspx?scid=kb;en-us;300595 If the remote computer runs Windows 2000, see Microsoft Knowledge Base Article 300596 http://support.microsoft.com/default.aspx?scid=kb;en-us;300596...
Page 474: Creating A Dsn-Less Connection
Creating a DSN-less connection You can use a DSN-less connection to create an ODBC or OLE DB connection between your web application and your database. You use a connection string to create this kind of connection. A connection string combines all the information your web application needs to connect to a database.
Page 475: Connecting To A Database On An Isp
Connecting to a database on an ISP If you’re an ASP developer working with a commercial Internet service provider (ISP), you often don’t know the physical path of the files you upload, including your database file or files. If your ISP doesn’t define a DSN for you or is slow to do so, you must find another way to create the connections to your database files.
Page 476 You can experiment with the method as follows. MapPath Open an ASP page in Dreamweaver and switch to Code view (View > Code). Enter the following expression in the page’s HTML code. <%Response.Write(stringvariable)%> Use the method to obtain a value for the argument.
Page 477 Enter the connection string and use the method to supply the DBQ parameter. MapPath Suppose the virtual path to your Microsoft Access database is /jsmith/data/statistics.mdb. The connection string can be expressed as follows if you use VBScript as your scripting language: “Driver={Microsoft Access Driver (*.mdb)};DBQ=”...
Page 478: Editing Or Deleting A Database Connection
Editing or deleting a database connection When you create a database connection, Dreamweaver stores the connection information in an include file in the Connections subfolder in the site’s local root folder. You can edit or delete the connection information in the file manually or as follows. To update a connection: Open an ASP page in Dreamweaver, then open the Databases panel (Window >...
Page 479: Chapter 27: Database Connections For Jsp Developers
Database Connections for JSP Developers To use a database with a JavaServer Pages (JSP) application, you need to create a database connection in Macromedia Dreamweaver MX 2004. This chapter describes how to create the connection. The chapter assumes you have set up a JSP application (see Chapter 23, “Setting Up a Web...
Page 480 This section shows how to define connection parameters in Dreamweaver using the Oracle Thin JDBC driver as an example. For the connection parameters of other drivers, consult the driver vendor’s documentation. The Oracle Thin JDBC driver supports Oracle databases. If you want to use this driver to connect to your Oracle database, click the Plus (+) button on the Databases panel and select the Oracle Thin Driver (Oracle) driver from the pop-up menu.
Page 481: Connecting To A Database
Connecting to a database This section describes how to connect to a database when developing a JSP application in Dreamweaver. The section assumes a JSP application server is running on a local or remote computer. For more information, see “Setting Up a Web Application” on page 453.
Page 482: Connecting Through An Odbc Driver
Specify the location of the JDBC driver you want to use. If your JDBC driver is installed on the same computer as Dreamweaver, select the Using Driver On This Machine option. If your JDBC driver is not installed on the same computer as Dreamweaver, select the Using Driver On Testing Server option.
Page 483 JSP page connect to the database at a time (it does not support concurrent use by multiple threads). For more information on the driver’s limitations, see article 12409 on the Macromedia support center at www.macromedia.com/go/jdbc-odbc_problems. After you install the bridge driver, you can create the database connection next.
Page 484: Sun Jdbc-Odbc Bridge Driver
Creating an ODBC connection Before connecting through an ODBC driver, make sure the appropriate ODBC driver and the Sun JDBC-ODBC Bridge driver are installed on the Windows computer running the JSP application server . To connect through an ODBC driver in JSP: Define a DSN on the Windows system hosting your application server.
Page 485: Editing Or Deleting A Database Connection
Click Test. Dreamweaver attempts to connect to the database. If the connection fails, double-check the DSN and the other connection parameters. If the connection still fails, check the settings for the folder Dreamweaver uses to process dynamic pages (see “Specifying where dynamic pages can be processed”...
Page 486 Chapter 27: Database Connections for JSP Developers...
Page 487: Chapter 28: Database Connections For Php Developers
Database Connections for PHP Developers To use a database with a PHP application, you need to create a database connection in Macromedia Dreamweaver MX 2004. This chapter describes how to create the database connection. For PHP development, Dreamweaver only supports the MySQL database system. Other database systems such as Microsoft Access or Oracle are not supported.
Page 488: Editing Or Deleting A Database Connection
Editing or deleting a database connection When you create a database connection, Dreamweaver stores the connection information in an include file in the Connections subfolder in the site’s local root folder. You can edit or delete the connection information in the file manually or as follows. To update a connection: Open a PHP page in Dreamweaver, then open the Databases panel (Window >...
Page 489: Chapter 29: Troubleshooting Database Connections
CHAPTER 29 Troubleshooting Database Connections This chapter describes some common problems you might encounter after creating a database connection, and describes ways to fix them. Troubleshooting permissions problems One of the most common problems is insufficient folder or file permissions. If your database is located on a Windows 2000 or Windows XP computer and you receive an error message when you try to view a dynamic page in a web browser or in Live Data mode, the error may be due to a permissions problem.
Page 490 Browsing the folder won’t be permitted, but web pages will still be able to access the database. For more information about the IUSR account and web server permissions, see the following TechNotes on the Macromedia Support Center: • Understanding anonymous authentication and the IUSR account at www.macromedia.com/...
Page 491: Troubleshooting Microsoft Error Messages
Access or SQL Server. These errors normally occur when you request a dynamic page from the server. Note: Macromedia does not provide technical support for third-party software such as Microsoft Windows, and IIS. If this section does not fix your problem, please contact Microsoft technical support or visit the Microsoft support website at http://support.microsoft.com/.
Page 492 • In Windows 2000, the time-out value may need to be changed for the Access database DSN. To change the time-out value, select Start > Settings > Control Panel > Administrative Tools > Data Sources (ODBC). Click the System tab, highlight the correct DSN, and click the Configure button.
Page 493 For more information on this error, see “PRB: ASP ‘Error The Query Is Not Updateable’ When You Update Table Record,” in the Microsoft Knowledge Base at http://support.microsoft.com/ default.aspx?scid=kb;en-us;Q174640. 80040e07—Data type mismatch in criteria expression This error occurs when the server tries to process a page containing an Insert Record or Update Record server behavior, and the server behavior attempts to set the value of a Date/Time column in a Microsoft Access database to an empty string ("").
Page 494 See the following web pages for lists of reserved words for common database systems: • Microsoft Access at http://support.microsoft.com/default.aspx?scid=kb;en-us;Q209187 • Microsoft SQL Server at http://msdn.microsoft.com/library/default.asp?url=/library/en-us/ tsqlref/ts_ra-rz_9oj7.asp • Oracle at http://technet.oracle.com/doc/server.804/a58234/vol2_wor.htm#421705 (registration required) • MySQL at www.mysql.com/doc/R/e/Reserved_words.html 80040e21—ODBC error on Insert or Update This error occurs when the server tries to process a page containing an Update Record or Insert Record server behavior.
Page 495 PART VII Making Pages Dynamic Use the web application development tools in Dreamweaver to add dynamic content to your pages. This part contains the following chapters: Chapter 30, “Optimizing the Workspace for Visual Development,” on page 497 Chapter 31, “The Workflow for Dynamic Page Design,” on page 507 Chapter 32, “Obtaining Data for Your Page,”...
Page 497: Chapter 30: Optimizing The Workspace For Visual Development
CHAPTER 30 Optimizing the Workspace for Visual Development You can optimize the Macromedia Dreamweaver MX 2004 workspace to develop web applications visually. For example, you can use panels to rapidly build dynamic pages and you can view data live on your pages while you work.
Page 498 To find out what each button on the Insert bar does, move your mouse over an icon. A tooltip appears: If you want to define sources of dynamic content for your page and add the content to the page, select Window > Bindings. The Bindings panel appears. For more information, select Help from the panel group’s pop-up menu.
Page 499: Viewing Your Database Within Dreamweaver
If you want to inspect, add, or modify code for JavaBeans, Macromedia ColdFusion components, or web services, select Window > Components. The Components panel appears. Note: The Components panel is enabled only if you open a ColdFusion, a JSP, or an ASP.NET page.
Page 500: Viewing Live Data In Design View
Viewing live data in Design view Dreamweaver can display the dynamic content of a page while you work on the page in Design view. For more information on Design view, see “Switching between views in the Document window” on page To view dynamic content in Design view: Make sure Dreamweaver is properly configured to display live data.
Page 501 The following illustration shows the same page with Live Data turned on: Related topics • “Copying dependent files” on page 502 • “Providing the page with expected parameters” on page 503 • “Refreshing the page” on page 504 • “Troubleshooting Live Data view” on page 504 •...
Page 502 Related topics • “Viewing live data in Design view” on page 500 • “Working in Design view without live data” on page 505 Copying dependent files Some dynamic pages rely on other files to work properly. You must upload all related files, including server-side includes and dependent files such as image files and JSP class files, to the folder you defined for processing dynamic pages (see “Specifying where dynamic pages can be...
Page 503 Providing the page with expected parameters To generate dynamic content, some pages require parameters from the user—for example, a page needs the ID number of a record to find and display that record. Without that data, Dreamweaver cannot generate dynamic content to display in Design view. If a page expects parameters from the user, you must provide the parameters as follows.
Page 504 Refreshing the page To refresh a page: • With Live Data turned on, click the Refresh button (the circle-arrow icon) on the document toolbar if you want to refresh the page after making a change that affects dynamic content. You can also select the Auto Refresh option in the toolbar. With this option turned on, the page refreshes whenever you make a change affecting dynamic content.
Page 505: Working In Design View Without Live Data
Working in Design view without live data If Live Data is turned off or if you’re temporarily disconnected from your application server, you can still work on your dynamic pages in Design view. Dreamweaver uses placeholders to visually represent dynamic content on the page. For example, the placeholder for dynamic text extracted from a database uses the syntax , where is the name...
Page 506: Restricting Database Information Displayed In Dreamweaver
Restricting database information displayed in Dreamweaver Advanced users of large database systems like Oracle should restrict the number of database items retrieved and displayed by Dreamweaver at design time. An Oracle database may contain items that Dreamweaver cannot process at design time. You can create a schema in Oracle and use it in Dreamweaver to filter out unnecessary items at design time.
Page 507: Chapter 31: The Workflow For Dynamic
CHAPTER 31 The Workflow for Dynamic Page Design A key benefit provided by Macromedia Dreamweaver MX 2004 is the ability to create dynamic websites without having to be experienced in programming languages. The Dreamweaver visual tools let you develop dynamic websites without having to hand code the complex programmatic logic required to create a site that displays dynamic content stored in a database.
Page 508: Designing The Page
Designing the page A key step in designing any website—whether static or dynamic—is the visual design of the page. When adding dynamic elements to a web page, the design of the page becomes crucial to its usability. You should carefully consider how users will interact with both individual pages and the website as a whole.
Page 509 To use a content source in Dreamweaver, you use the Bindings panel to create the data source. The Bindings panel, shown below, lets you create data sources for databases and different variable types. When you create a data source, it is stored in the Bindings panel where it can be selected and inserted into the current page.
Page 510: Adding Dynamic Content To A Web Page
Adding dynamic content to a web page After you define a recordset or other data source, and add it to the Bindings panel, you can insert the dynamic content the recordset represents into the page. The Dreamweaver menu-driven interface makes adding dynamic content elements as easy as selecting a dynamic content source from the Bindings panel, and inserting it into an appropriate text, image, or form object within the current page.
Page 511: Testing And Debugging The Page
Dreamweaver provides a point-and-click interface that makes applying dynamic content and complex behaviors to a page as easy as inserting textual and design elements. The following server behaviors are available: • Define a recordset from an existing database. The recordset you define is then stored in the Bindings panel.
Page 512 Testing dynamic content Dreamweaver allows you to preview and edit dynamic content using the Live Data window. Note: Links don’t work in the Live Data window. To test your links, use the Dreamweaver Preview in Browser feature. (See “Checking for browser compatibility” on page 434.) While dynamic content is displayed, you can perform the following tasks: •...
Page 513 Editing dynamic content on a page You can modify or remove dynamic content from a page by changing the server behavior that provides the content, or deleting the behavior altogether. For example, you can edit a recordset server behavior to return more records to the page. Dynamic content on a page is listed in the Server Behaviors panel.
Page 514 Chapter 31: The Workflow for Dynamic Page Design...
Page 515: Chapter 32: Obtaining Data For Your Page
MySQL, Microsoft SQL Server, and Oracle. Whatever database you use to support your website, you can use Macromedia Dreamweaver MX 2004 to design web forms to insert, update, or delete data from the database.
Page 516: Collecting Data Submitted By Users
. A query is a search statement designed to find and extract specific information from a database. Macromedia Dreamweaver 2004 uses the Structured Query Language (SQL) to build queries. Although you do not need to learn SQL (pronounced “sequel”) to be able to create simple queries using Dreamweaver, a basic knowledge...
Page 517 Form parameters Form parameters are sent to the server using an HTML form using either the POST method. When using the method, parameters are sent in the body of the message. In POST contrast, the method appends parameters to the requested URL. You can use Dreamweaver to quickly design HTML forms that send form parameters to the server.
Page 518 URL parameters A URL parameter is a name/value pair appended to a URL. The parameter begins with a question mark (?) and takes the form . If more than one URL parameter exists, each parameter name=value is separated by an ampersand (&). The following example shows a URL parameter with two name/value pairs: http://server/path/document?name1=value1&name2=value2 URL parameters let you pass user-supplied information from the browser to the server.
Page 519 Typical uses of URL parameters include personalizing websites based on a user’s preferences. For example, a URL parameter consisting of a user name and password can be used to authenticate a user, displaying only information that user has subscribed to. Common examples of this include financial websites that display individual stock prices based on stock market symbols the user has previously chosen.
Page 520: Accessing Data Stored In Session Variables
Retrieving form and URL parameters After a form or URL parameter is created, Dreamweaver can retrieve the value and use it in a web application. For more information, see “Defining URL parameters” on page 534. After defining the form or URL parameter in Dreamweaver, you can insert its value within a page. For more information, see Chapter 34, “Adding Dynamic Content to Web Pages,”...
Page 521 To allow for the creation of complex web applications, and the storage of user-supplied data across all of a site’s pages, most application server technologies include support for session management. Session management allows web applications to maintain state across multiple HTTP requests, allowing a user’s requests for web pages during a given time period to be viewed as part of the same interactive session.
Page 522 Storing URL parameters in session variables A typical example of storing URL parameters in session variables is a product catalog that uses hard-coded URL parameters created using a hypertext link to send product information back to the server to be stored in a session variable. When a user clicks the “Add to shopping cart” link, the product ID is stored in a session variable while the user continues to shop.
Page 523 Each link has a URL parameter called that submits the user’s text preference to the fontsize server, as the following Macromedia ColdFusion example shows: <a href="resort.cfm?fontsize=large">Larger Text</a><br> <a href="resort.cfm?fontsize=small">Normal Text</a> You decide to store the user’s text preference in a session variable and use it to set the font size on each page the user requests.
Page 524 Related topics • “Understanding session variables” on page 520 • “Collecting information to store in session variables” on page 521 • “Storing information in session variables” on page 522 • “Retrieving data from session variables” on page 524 Retrieving data from session variables Once you store a value in a session variable, you can use Dreamweaver to retrieve the value from session variables and use it in a web application.
Page 525: Chapter 33: Defining Sources Of Dynamic Content
Defining Sources of Dynamic Content Dynamic websites require a data source from which to retrieve and display dynamic content. Macromedia Dreamweaver MX 2004 lets you use databases, request variables, URL variables, server variables, form variables, stored procedures, and other sources of dynamic content.
Page 526: About Dynamic Content Sources
About dynamic content sources A dynamic content source is a store of information from which you can retrieve and display dynamic content for use in a web page. Sources of dynamic content include not only information stored in a database, but values submitted by HTML forms, values contained in server objects, values of JavaBeans properties, and other content sources.
Page 527 Note: Microsoft ASP.NET refers to a recordset as a DataSet. If you are working with ASP.NET document types, the dialog boxes and menu choices specific to ASP.NET use the label DataSet. The Dreamweaver documentation generically refers to both types as recordsets, but uses DataSet when specifically describing ASP.NET features.
Page 528 Inserting code within SQL statements When inserting code within SQL statements written for ASP.NET, you must enclose all strings in quotes ( ), and enclose the code in parentheses ( ). " " SELECT * FROM Employees WHERE HireDate > "+ (Request.queryString("hireDate")) Related topics: •...
Page 529 ASP and ColdFusion application variables In ASP and ColdFusion, you can use application variables to store and display information that is maintained for the lifetime of the application and persists from user to user. The application’s lifetime lasts from the time the first user requests a page in the application to the time the web server is stopped.
Page 530: Defining A Recordset
JavaBeans and JSP JavaBeans components are architectural elements of multitier JSP applications. JavaBeans are typically used as part of a middle “business-logic” layer meant to separate the presentation logic from data-access logic. In these applications, the JavaBeans, (also referred to as “beans”) not the JSP pages, contain the logic that directly accesses the database.
Page 531 In the Bindings panel, click the Plus (+) button and select Recordset (Query) from the pop-up menu. The simple Recordset dialog box appears. If you are developing a Macromedia ColdFusion MX or ASP.NET site, the Recordset dialog box is slightly different from the example shown below.
Page 532 Creating an advanced recordset by writing SQL The advanced Recordset dialog box allows you to write your own SQL statements, or use the graphical Database Items tree to create a SQL statement Note: If you are writing SQL statements for ASP.NET document types, refer to “Creating SQL queries using the Database Items tree”...
Page 533 Creating SQL queries using the Database Items tree Instead of manually typing SQL statements into the SQL text box, you can use the Database Item’s point-and-click interface to create complex SQL queries. The Database Items tree lets you select database objects and link them using the SQL SELECT, WHERE, and ORDER BY clauses.
Page 534: Defining Url Parameters
Defining URL parameters URL parameters store retrieved information input by users. Before you begin, make sure you pass a form or URL parameter to the server. For more information, see “URL parameters” on page 518 “Understanding URL and form parameters” on page 528.“Understanding URL and form parameters”...
Page 535: Defining Form Parameters
Defining form parameters Form parameters store retrieved information that is included in the HTTP request for a web page. If you create a form that uses the method, the data submitted by the form is passed to POST the server. Before you begin, make sure you pass a form parameter to the server. For more information, see Chapter 32, “Obtaining Data for Your Page,”...
Page 536: Defining Session Variables
Defining session variables You can use session variables to store and display information maintained for the duration of a user’s visit (or session). The server creates a different session object for each user and maintains it for a set period of time or until the object is explicitly terminated. For more information, see “Understanding session variables”...
Page 537: Defining Application Variables For Asp And Coldfusion
Defining application variables for ASP and ColdFusion In ASP and ColdFusion, you can use application variables to store and display information that is maintained for the lifetime of the application and persists from user to user. Note: There are no application variable objects in JSP or PHP. To define an application variable for a page: Open a dynamic document type in the Document window.
Page 538: Using A Variable As A Data Source For A Coldfusion Recordset
Using a variable as a data source for a ColdFusion recordset When you define a recordset for a page in the Bindings panel, Dreamweaver enters the name of the ColdFusion data source in the tag on the page. For more flexibility, you can store a cfquery data source name in a variable and use the variable in the tag.
Page 539 To define a server variable for an ASP page: Open the Bindings panel (Window > Bindings). Click the Plus (+) button and select Request Variable from the pop-up menu. The Request Variable dialog box is displayed. Select one of the request collections from the Type pop-up menu.
Page 540 Defining PHP server variables You can define a PHP server variable as a source of dynamic content for PHP document types. To define a server variable for a PHP page: Open the Bindings panel (Window > Bindings). Click the Plus (+) button and select the variable from the pop-up menu. Enter the name of the variable.
Page 541 • On the system running the JSP application server, the bean class must reside in the application server’s class path. (Your application server uses this copy of the class at runtime.) The application server’s class path varies from application server to application server, but generally the class path is to a WEB-INF folder with a classes/bean subfolder.
Page 542: Caching Content Sources
To define a JavaBean collection for a JSP page: Select Window > Bindings to display the Bindings panel. Click the Plus (+) button and select JavaBean collection from the pop-up menu. The JavaBean Collection dialog box appears. Complete the dialog box and click OK. For instructions on completing the JavaBean dialog box click the dialog box’s Help button.
Page 543: Changing Or Deleting Content Sources
Changing or deleting content sources You can change or delete any existing source of dynamic content—that is, any content source listed in the Bindings panel. Changing or deleting a content source in the Bindings panel does not change or delete any instance of that content on the page.
Page 544 Chapter 33: Defining Sources of Dynamic Content...
Page 545: Chapter 34: Adding Dynamic Content To Web
Chapter 33, “Defining Sources of Dynamic Content,” on page 525. In Macromedia Dreamweaver MX 2004, you can place dynamic content almost anywhere in a web page or its HTML source code. You can place dynamic content at the insertion point, replace a text string, or insert it as an HTML attribute.
Page 546: About Adding Dynamic Content
About adding dynamic content You can add dynamic content to a page by selecting a content source in the Bindings panel. Dreamweaver inserts a server-side script in the page’s code instructing the server to transfer the data from the content source to the page’s HTML code when the page is requested by a browser. There is often more than one way to make a given page element dynamic.
Page 547: Making Text Dynamic
Making text dynamic You can replace existing text with dynamic text, or you can place dynamic text at a given insertion point on the page. To add dynamic text: Open the Bindings panel by choosing Window > Bindings. Make sure the Bindings panel lists the content source you want to use. The content source should contain plain text (ASCII text).
Page 548: Making Images Dynamic
Related topics • “About adding dynamic content” on page 546 • “Dynamic text” on page 546 Making images dynamic You can make images on your page dynamic. For example, suppose you design a page to display items for sale at a charity auction. Each page would include descriptive text and a photo of one item.
Page 549: Making Html Attributes Dynamic
Making HTML attributes dynamic You can dynamically change the appearance of a page by binding HTML attributes to data. For example, you can change the background image of a table by binding the table’s background attribute to a field in a recordset. You can bind HTML attributes with the Bindings panel or with the Property inspector.
Page 550 To make the attribute’s value dynamic, click the attribute; then click the lightning-bolt icon or folder icon at the end of the attribute’s row. If you clicked the lightning bolt icon, a list of data sources appears. Here’s an example: If you clicked the folder icon, a file selection dialog box appears.
Page 551: Making Activex, Flash, And Other Object Parameters Dynamic
You can make the parameters of Java applets and plug-ins dynamic, as well as the parameters of ActiveX, Macromedia Flash, Shockwave, Director, and Generator objects. Before starting, make sure the fields in your recordset hold data that’s appropriate for the object parameters you want to bind.
Page 552: Editing Dynamic Content
Editing dynamic content To edit a server behavior providing dynamic content, double-click the server behavior in the Server Behaviors panel. The same dialog box you used to define the original data source appears. Make your changes in the dialog box and click OK. You can also use the Property inspector to edit the recordsets on your page.
Page 553: Creating Dynamic Pages In A Contribute Site
Select the Editing category and deselect the option to protect scripts and forms. For more information, see “Creating templates for a Contribute site” on page 229, and Administering Macromedia Contribute. Click OK to close the Permission Group dialog box. Click OK to close the Administer Website dialog box. Related topics •...
Page 554 Chapter 34: Adding Dynamic Content to Web Pages...
Page 555: Chapter 35: Displaying Database Records
Displaying Database Records Displaying database records involves retrieving information stored in a database or other source of content, and rendering that information to a web page. Macromedia Dreamweaver MX 2004 provides many methods of displaying dynamic content, and provides several built-in server behaviors that let you both enhance the presentation of dynamic content, and allow users to more easily search through and navigate information returned from a database.
Page 556 Server behaviors and formatting elements Dreamweaver provides the following server behaviors and formatting elements to let you enhance the display of dynamic data: Formats let you apply different types of numerical, monetary, date/time, and percentage values to dynamic text. For example, if the price of an item in a recordset reads 10.989, you can display the price on the page as $10.99 by selecting the Dreamweaver “Currency - 2 Decimal Places”...
Page 557 Recordset navigation links require the following dynamic elements: • A recordset to navigate • Dynamic content on the page to display the record or records • Text or images on the page to serve as a clickable navigation bar • A “Move To Record”...
Page 558 After you have added a recordset to a page, and have created a navigation bar, you must apply individual server behaviors to each navigation element. For example, a typical recordset navigation bar contains representations of the following links matched to the appropriate behavior: Navigation link Server behavior...
Page 559 The following example illustrates how the Repeat Region server behavior is applied to a table row, and specifies that nine records are displayed per page. The row itself displays four different records: city, state, street address, and zip code. To create a table such as the one shown above, you must create a table containing dynamic content, and apply the Repeat Region server behavior to the table row containing the dynamic content.
Page 560 Simple record counters You can create a simple record counter using the Recordset Navigation Status server object. This server object inserts a complete record counter that you can apply text formatting to using Dreamweaver page-design tools. To learn more about this record counter, see “Creating a record counter using the Recordset Navigation Status object”...
Page 561 The ASP.NET DataGrid web control The Dreamweaver DataGrid allows you to insert an ASP.NET DataGrid web control. The DataGrid control renders tables as multi-column grids, and can include different column types (heterogeneous columns) for defining the layout of cell contents. These include bound, button, and template columns, among others.
Page 562: Using Predefined Data Formats
Using predefined data formats Dreamweaver comes with several predefined data formats that you can apply to dynamic data elements. The data format styles include date and time, currency, numerical, and percentage formats. To apply data formats to dynamic content: Select the dynamic content in either the Live Data window or its placeholder in the Document window.
Page 563: Creating Recordset Navigation Links
Creating new data formats You can create new data formats to suit any type of dynamic data you want to display. To create a new data format: Open a page containing dynamic data in Design view. Select the dynamic data you want to create a custom format for. Select Window >...
Page 564 The image version of the Recordset Navigation Bar looks like this: Before placing the navigation bar on the page, make sure the page contains a recordset to navigate and a page layout in which to display the records. After placing the navigation bar on the page, you can use the Dreamweaver design tools to customize the bar to your liking.
Page 565 Creating a custom recordset navigation bar You can create a custom recordset navigation bar that uses more complex layout and formatting styles than that offered by the simple table used by the Recordset Navigation Bar server object. To create your own recordset navigation bar, you must: •...
Page 566: Showing And Hiding Regions Based On Recordset Results
Showing and hiding regions based on recordset results Dreamweaver includes a set of server behaviors that let you show or hide a region based on the results returned by a recordset. To learn more about the Show Region server behaviors, and how they can be used to show or hide recordset results, see “Displaying and hiding regions based on recordset results”...
Page 567: Creating A Table With A Repeat Region Server Behavior
Select the number of records to display per page. Click OK. In the Document window, a thin, tabbed, gray outline appears around the repeated region. In the Live Data window (View > Live Data), the gray outline disappears and the selection expands to display the number of records you specified.
Page 568 Input values for the table border, cell padding, and cell spacing if desired. The Dynamic Table dialog box retains the values you enter for table borders, cell padding, and cell spacing. If you are working on a project that will need several dynamic tables requiring the same look, you may want to enter the table layout values, as this will further simplify page development.
Page 569: Creating A Record Counter
Creating a record counter Record counters let users know where they are within a given set of records relative to the total number of records returned. For this reason record counters are a useful behavior that can significantly add to the usability of a web page. To learn more about record counters, see “Record counters”...
Page 570: Creating Asp.net Datagrid And Datalist Web Controls
To create a custom record counter: In Design view, enter the counter’s text on the page. The text can be anything you want. For example: Displaying records thru of . Place the insertion point at the end of the text string. Open the Server Behaviors panel (Window >...
Page 571 To add a DataGrid object to a page: Open the Server Behaviors panel (Window > Server Behaviors), click the Plus (+) button and select DataGrid. The DataGrid dialog box appears. Complete the DataGrid dialog box and click OK. For more information, click the Help button in the dialog box. In the Document window, the DataGrid is displayed with a tabbed, gray outline surrounding it.
Page 572 To add a DataList object to your page: Open the Server Behaviors panel (Window > Server Behaviors), click the Plus (+) button, and select DataList. The DataList dialog box appears. Complete the DataList dialog box and click OK. For more information, click the Help button in the dialog box. In the Document window, the DataList object is displayed with a tabbed, gray outline surrounding it.
Page 573: Chapter 36: Using Coldfusion Components
CFCs also provide a fast, easy way to create web services. You can use Macromedia Dreamweaver MX 2004 to create and modify CFCs. You can also use Dreamweaver to build web pages that use CFCs.
Page 574: Visually Creating A Component In Dreamweaver
Suppose an online store calculates shipping charges based on the price of orders. For orders under $20, the shipping charge is $4; for orders between $20 and $40, the shipping charge is $6, and so on. You could insert the logic for calculating the shipping charge in both the shopping cart page and the checkout page, but that would mix HTML presentation code and CFML logic code and generally make the code difficult to maintain and reuse.
Page 575: Viewing Coldfusion Components In Dreamweaver
Viewing ColdFusion components in Dreamweaver Dreamweaver provides a way to visually examine the ColdFusion components defined for your site. Dreamweaver reads the .cfc files located on the server and displays information about them in an easy-to-navigate tree view in the Components panel. Note: Dreamweaver looks for the components on your testing server (see “Specifying where dynamic pages can be processed”...
Page 576: Editing Coldfusion Components In Dreamweaver
Editing ColdFusion components in Dreamweaver Dreamweaver provides a streamlined way of editing the code of the ColdFusion components defined for your site. For example, you can add, change, or delete any component function without leaving Dreamweaver. To use this feature, your development environment must be set up as follows: •...
Page 577: Building Web Pages That Use Coldfusion Components
Building web pages that use ColdFusion components One way to use a component function in your web pages is to write code in the page that invokes the function when the page is requested. You can use Dreamweaver to help you write this code. Note: For other ways to use components, see the ColdFusion documentation from within Dreamweaver (Help >...
Page 578 Chapter 36: Using ColdFusion Components...
Page 579: Chapter 37: Using Web Services
The web page that connects to the web service is commonly known as a consumer, and the service itself is known as a publisher. Macromedia Dreamweaver MX 2004 lets you create pages and sites that are consumers of web services. Dreamweaver currently supports the creation of web service consumers using Macromedia ColdFusion MX, ASP.NET, and Java Server Pages (JSP)
Page 580: About Web Services
About web services Web services allow applications to communicate and share information across the Internet, regardless of operating system or programming language. Examples of web services, and the information and functionality they provide, include the following: • User authentication and authorization •...
Page 581 After locating and selecting a web service that provides the functionality you need, enter the URL of the WSDL in the Adding a Web Service dialog box. Generate a proxy for the web service from the WSDL description of the service publisher. To embed a web service into a web page, you must create a proxy.
Page 582 Communication between the web page requesting the service and the web service itself uses the Simple Object Access Protocol (SOAP). SOAP is an XML-based protocol that lets a web client access and invoke the web service’s methods and parameters. Related topics •...
Page 583: Configuring Proxy Generators For Use With Dreamweaver
Configuring proxy generators for use with Dreamweaver When you install a web service proxy generator, you must configure it to work with Dreamweaver. To learn more about proxy generators, see “About proxy generators” on page 582. To configure a proxy generator to work with Dreamweaver: Select Window >...
Page 584 Click New, select the proxy generator from the pop-up menu, and click Done. If the proxy generator you want to use does not appear in the list, select Default Proxy Generator to display the Default Proxy Generator dialog box. The Default Proxy Generator dialog box lets you configure the selected proxy generator, or you can configure a new proxy generator.
Page 585: Adding A Web Service Proxy Using The Wsdl Description
Adding a web service proxy using the WSDL description After you have specified a proxy generator (see “About proxy generators” on page 582) and configured the web service server models you want to support, you need to find a web service that provides the desired functionality and generate a proxy for that service.
Page 586: Adding A Web Service To A Page
ColdFusion. To learn more HelloWorld about creating a web services, and to see additional examples using .NET and JSP, visit the Macromedia Support Center at: www.macromedia.com/go/creating_web_services. To add a web service to a page: In the Document window, in Code view, drag the method into the page’s HTML.
Page 587 If you want to bind a return value to a visual element, switch to Design view and place a visual element on the page that can accept data binding. Then switch back to Code view and enter the appropriate code to bind the returned value to the visual element. When creating web services, refer to the technology provider’s documentation for the proper syntax with which to both instantiate the service and display the returned values to the page.
Page 588: Editing The Uddi Web Service Site List
Editing the UDDI web service site list The Web Service Chooser provides a list of UDDI-based web service directories from which you can select web services. You can edit this list to add or delete web service directories. For more information, see “Finding web service publishers”...
Page 589: Chapter 38: Adding Custom Server Behaviors
CHAPTER 38 Adding Custom Server Behaviors Macromedia Dreamweaver MX 2004 comes with a set of built-in server behaviors that lets you easily add dynamic capabilities to a site. If you want to extend Dreamweaver’s functionality, you can create new server behaviors to suit your development needs, or obtain server behaviors from the Macromedia Exchange website.
Page 590 Server behaviors If you are a developer proficient in Macromedia ColdFusion, ASP.NET, JavaScript, VBScript, PHP, or Java, you can write your own server behaviors. The steps to create a server behavior include the following tasks: • Writing one or more code blocks that perform the required action.
Page 591 Conditions and repeating elements in code blocks If you want the code block, or a portion of a code block, to be executed only if a certain condition or conditions apply, use the following syntax: <@ if (expression1) @> code block1 [<@ elseif (expression2) @>...
Page 592 The code block insert options, and the relative positioning options available for each, are shown in the table below. Insert Code options Relative position options Above the <html> Tag • At the beginning of the file • Just before the recordsets •...
Page 593 To create a parameter that lets the user supply the necessary value: Enclose the string in parameter markers: formParam <% Session(“lang_pref”) = Request.Form(“@@formParam@@”); %> Create a dialog box that prompts the designer to supply the name of the form object. For more information, see “Creating a dialog box for a custom server behavior”...
Page 594 If the server behavior uses a recordset from a callable object, it uses the following code instead. @@callableName@@.execute(); @@rsName@@ = @@callableName@@.getResultSet(); If the server behavior is added for a callable object, the user would enter a value for the parameter in the server behavior’s Parameter dialog box. Otherwise, the @@callableName@@ parameter would be empty.
Page 595 The following example shows how such repeating code blocks can be used to create server behaviors (the example is a ColdFusion behavior used to access a stored procedure): <CFSTOREDPROC procedure="AddNewBook" datasource=#MM_connection_DSN# username=#MM_connection_USERNAME# password=#MM_connection_PASSWORD#> <CFPROCPARAM type="IN" dbvarname="@CategoryId" value="#Form.CategoryID#" cfsqltype="CF_SQL_INTEGER"> <CFPROCPARAM type="IN" dbvarname="@ISBN" value="#Form.ISBN#" cfsqltype="CF_SQL_VARCHAR">...
Page 596 One convention is to use your initials. Never use the prefix, as it is reserved for Macromedia use only. Macromedia precedes all functions and global variables with the prefix to prevent them from conflicting with any code that you write.
Page 597 • “Server behaviors” on page 590 Testing server behaviors The Macromedia Exchange recommends performing the following tests on each server behavior you create: • Apply the behavior from the Server Behaviors panel. If it has a dialog box, enter valid data in each field and click OK.
Page 598: Installing Third-Party Server Behaviors
Your browser opens the Macromedia Exchange for Dreamweaver web page. Log on to the Exchange using your Macromedia ID, or, if you have not yet created a Macromedia Exchange ID for yourself, follow the instructions to open a Macromedia account.
Page 599 Click OK. The Server Behavior Builder dialog box is displayed. To add a new code block, click the Plus (+) button. The Create a New Code Block dialog box is displayed. Using the Server Behavior Builder...
Page 600 Enter a name for the code block you want to create and click OK. The name you entered in the dialog box appears in the Server Behavior Builder, with the appropriate scripting tags visible in the Code block text box. In the Code Block text box, enter the code necessary to implement the server behavior.
Page 601: Using Parameters In Server Behaviors
You can specify additional information about the server you are creating by using the Advanced options panel. Click the Advanced button to display more options. If you need to create more code blocks, repeat steps 7 through 13 as needed. If the server behavior requires that parameters be supplied to it, you will need to create a dialog box that accepts parameters from the person applying the behavior.
Page 602: Positioning Code Blocks
Positioning code blocks When you create code blocks using the Server Behavior Builder (see “Using the Server Behavior Builder” for more information), you must specify where to insert them in the page’s HTML code. The Insert Code and Relative Position pop-up menus let you choose where to insert the code block in the document, and then specify a position relative to another tag in the page.
Page 603: Creating A Dialog Box For A Custom Server Behavior
Related topics • “About custom server behaviors” on page 589 • “Code block positioning within web pages” on page 591 • “Using the Server Behavior Builder” on page 598 Creating a dialog box for a custom server behavior Server behaviors often require that the page designer supply a parameter value. This value must be inserted before the server behavior’s code is inserted into the page.
Page 604 To create a dialog box for a server behavior: In the Server Behavior Builder, click Next. A dialog box appears listing all of the designer-supplied parameters you defined in your code. (Optional) You can change the display order of the dialog box controls by selecting a parameter and clicking the up and down arrows.
Page 605: Editing And Modifying Server Behaviors
Editing and modifying server behaviors You can edit any server behavior created with the Server Behavior Builder, including server behaviors you download from the Macromedia Exchange website, and other third-party developers. If you apply a server behavior to a page and then edit the behavior in Dreamweaver, instances of the old behavior will no longer appear in the Server Behaviors panel.
Page 606 (Optional) If you want, change where the code block is inserted in the page’s HTML code by choosing another option in the Insert Code pop-up menu. For instructions, see “Positioning code blocks” on page 602. If the modified code does not contain any designer-supplied parameters, click OK. Dreamweaver regenerates the server behavior without a dialog box.
Page 607: Chapter 39 Creating Forms
CHAPTER 39 Creating Forms You can use Macromedia Dreamweaver MX 2004 to create forms with text fields, password fields, radio buttons, checkboxes, pop-up menus, clickable buttons, and other form objects. Dreamweaver can also write code that validates the information a visitor provides. For example, you can check that an e-mail address a user enters contains an “@”...
Page 608 Common server-side technologies used for processing form data include Macromedia ColdFusion, Microsoft Active Server Pages (ASP), and PHP. The server responds by sending requested information back to the user (or client), or performing some action based on the form’s contents.
Page 609 Note: Passwords and other information sent to a server using a password field are not encrypted. The transferred data can be intercepted and read as alphanumeric text. For this reason, you should always provide encryption for data you want to keep secure. Hidden fields store information entered by a user, such as a name, e-mail address, or viewing preference, and then use that data when the user next visits the site.
Page 610 Jump menus are navigational lists or pop-up menus that let you insert a menu in which each option links to a document or file. File fields let users browse to a file on their computer and upload the file as form data. Image fields let you insert an image in a form.
Page 611: Creating Html Forms
Creating HTML forms This section describes how to create HTML forms in Dreamweaver. You can also use Dreamweaver to create ASP.NET web forms. For more information, see “Creating ASP.NET forms” on page 623. To create an HTML form: Open a page and place the insertion point where you want the form to appear. Select Insert >...
Page 612 Insert form objects. Place the insertion point where you want the form object to appear in the form, and then select the object in the Insert > Form menu, or in the Forms category of the Insert bar. For more information, see “Inserting HTML form objects”...
Page 613: Inserting Html Form Objects
Inserting HTML form objects You can use Dreamweaver to quickly insert HTML form objects into your forms. If you’re working on an ASP.NET web application, you can use Dreamweaver to quickly insert ASP.NET form controls. For more information, see “Adding ASP.NET form controls to a page” on page 623.
Page 614 Inserting HTML radio buttons Use HTML radio buttons when you want users to select only one choice from a set of options. Radio buttons are typically used in groups. All radio buttons in a group must have the same name. Note: Use checkboxes when you want let users select more than one option.
Page 615 Related topics • “Creating a dynamic HTML form menu” on page 617 • “Making existing HTML form menus dynamic” on page 618 Inserting standard buttons Buttons control form operations. Use a button to submit form data to the server or to reset the form.
Page 616 Inserting hidden fields You can use hidden fields to store and submit information not entered by the user. The information is hidden from the user. To create a hidden field: In Design view, place the insertion point inside the form outline. Select Insert >...
Page 617: Inserting Dynamic Html Form Objects
Inserting dynamic HTML form objects You can insert HTML form objects whose initial state is determined by the server when the page is requested from the server, not by the form designer at design time. Related topics • “Dynamic form objects” on page 610 •...
Page 618 Making existing HTML form menus dynamic You can make an existing HTML form menu or list menu dynamic. This section deals with HTML form objects. For ASP.NET menu objects such as DropDownList or ListBox controls, see “Making an existing ASP.NET menu dynamic” on page 624.
Page 619 To dynamically preselect an HTML checkbox: Select a checkbox form object on your page. In the Property inspector, click the Dynamic button. The Dynamic CheckBox dialog box appears. Complete the dialog box and click OK. For instructions, click the Help button in the dialog box. The checkbox will appear selected or not selected, depending on the data when the form is viewed in a browser.
Page 620: Validating Html Form Data
Validating HTML form data Dreamweaver can add JavaScript code that checks the contents of specified text fields to ensure that the user has entered the correct type of data. Note: This feature only works with HTML forms. For ASP.NET forms, you can insert ASP.NET validation controls in Code view.
Page 621: Attaching Custom Scripts To Html Form Buttons
Attaching custom scripts to HTML form buttons Some forms use JavaScript or VBScript to perform form processing or some other action on the client as opposed to sending the form data to the server for processing. You can use Dreamweaver to configure a form button to run a specific client-side script when the user clicks the button.
Page 622: Creating Accessible Html Forms
Creating accessible HTML forms When you insert an HTML form object and you’ve selected the Form Object option in Accessibility preferences, Dreamweaver prompts you to enter information to make the form object accessible. You can also change accessibility attributes after inserting the object. To add an accessible form object: The first time you add accessible form objects, activate the Accessibility dialog box for form objects (see...
Page 623: Creating Asp.net Forms
Creating ASP.NET forms You can create ASP.NET forms in the Dreamweaver design environment and then modify the properties of the form controls without hand-coding them. Adding 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.
Page 624 Creating a dynamic ASP.NET menu You can dynamically populate an ASP.NET menu control such as DropDownList or ListBox with entries from a database. Before you begin, you must define a DataSet or other source of dynamic content for the menu. For more information, see “Defining a recordset”...
Page 625 Displaying dynamic content in an ASP.NET TextBox control You can display dynamic content in ASP.NET TextBox form controls. Before you begin, you must define a DataSet or other source of dynamic content for the TextBox. For more information, see “Defining a recordset” on page 530.
Page 626 Dynamically preselecting an item in an ASP.NET RadioButtonList You can let the server decide whether to select a radio button in a RadioButtonList control when the page is loaded in a browser. Before you begin, you must insert at least one ASP.NET RadioButtonList control in your page. You must also define a DataSet or other source of dynamic content for the radio buttons.
Page 627: Part Viii: Developing Applications Rapidly
Web applications often feature pages that let users search a database; pages that let users insert, update, or delete data in a database; and pages that restrict access to a website. You can quickly build any of these pages with Macromedia Dreamweaver MX. This part contains the following chapters: Chapter 40, “Building ColdFusion Applications Rapidly,”...
Page 629: Chapter 40: Building Coldfusion Applications Rapidly
CHAPTER 40 Building ColdFusion Applications Rapidly You can use the tools in Macromedia Dreamweaver MX 2004 to build a ColdFusion web application rapidly and with little or no coding. About rapid application development (all servers) Rapid application development (RAD) is a software development process designed to make building applications easier and faster.
Page 630 About master/detail pages A master page is a page that lists records and corresponding links for each record. When the user clicks a link, a detail page opens displaying more information about the record. For example, here’s a master page from a fictional company. Chapter 40: Building ColdFusion Applications Rapidly...
Page 631 When a user clicks one of the linked location names, a detail page opens: A results page is a common type of master page. However, unlike the master page described in this section, the list of records on a results page is determined not by you, the designer, but by the user.
Page 632: Stored Procedures
Optionally, you can add a detail page. A detail page gives users more information about a particular record on the results page. If you use ASP.NET, you can combine both the search page and the results page into one page. If you have only one search parameter, Dreamweaver lets you add search capabilities to your web application without using SQL queries and variables.
Page 633 ASP command objects An ASP command object is a server object that performs some operation on a database. The object can contain any valid SQL statement, including one that returns a recordset, or one that inserts, updates, or deletes records in a database. A command object can alter the structure of a database if the SQL statement adds or deletes a column in a table.
Page 634: Building Master/Detail Pages (Coldfusion)
method assigns the value to the variable and takes two arguments. The first setString argument specifies the affected variable by its position (here, the first position in the SQL statement). The second argument specifies the variable’s value. In this example, the value is provided by a URL parameter passed to the page.
Page 635 Open the master page in Design view and select Insert > Application Objects > Master Detail Page Set. The Master Detail Page Set dialog box appears. Complete the dialog box. For more information, click the Help button in the dialog box. Click OK.
Page 636 You can also add the building blocks all at once using the Master/Detail Page Set application object. For more information, see “Building master/detail pages in one operation (ColdFusion, ASP, JSP, PHP)” on page 634. This section covers the steps to building master/detail pages with server behaviors: •...
Page 637 Typically, the recordset on the master page extracts a few columns from a database table while the recordset on the detail page extracts more columns from the same table to provide the extra detail. The recordset can be defined by the user at runtime. For more information, see “Building search/results pages (ColdFusion, ASP, JSP, PHP)”...
Page 638 Creating the links to the detail page (ColdFusion) After adding the dynamic table to the master page , you must create links that open the detail page. This section describes how to create the links. The next section describes how to modify the link so that it also passes the ID of the record that the user selects.
Page 639 The expression after the equal sign is the value of the parameter. In this case, the value is generated by a ColdFusion expression that returns a record ID from the recordset. A different ID is generated for each row in the dynamic table. In the ColdFusion expression, replace recordsetName with the name of your recordset, and replace fieldName with the name of the field in your recordset that uniquely identifies each record.
Page 640 Complete the Filter section as follows to find and display the record specified in the URL parameter passed by the master page: From the first pop-up menu in the Filter area, select the column in the recordset containing values that match the value of the URL parameter passed by the master page. For example, if the URL parameter contains a record ID number, select the column containing record ID numbers.
Page 641: Building Search/Results Pages (Coldfusion, Asp, Jsp, Php)
Building search/results pages (ColdFusion, ASP, JSP, PHP) You can use Dreamweaver to build a set of pages to let users search your database. The method you use is identical for ColdFusion, ASP, JSP, and PHP pages. For information on building ASP.NET search/results pages, see “Building a database search page (ASP.NET)”...
Page 642 Building the results page When the user clicks the form’s Search button, the search parameters are sent to a results page on the server. The results page on the server, not the search page on the browser, is responsible for retrieving records from the database.
Page 643 In the Table pop-up menu, select the table to be searched in the database. Note: In a single-parameter search, you can search for records in only a single table. To search more than one table at a time, you must use the advanced Recordset dialog box and define a SQL query.
Page 644 Searching with multiple search parameters If the search page submits more than one search parameter to the server, then you must write a SQL query for the results page and use the search parameters in SQL variables. Note: If you have only one search condition, you can use the simple Recordset dialog box to define your recordset (see “Searching with only one search parameter”...
Page 645 If you want, click Test to create an instance of the recordset using the default variable values. The default values simulate the values that would otherwise have been returned from the search page. Click OK to close the test recordset. If you’re satisfied with the recordset, click OK.
Page 646: Building A Record Insert Page (All Servers)
Creating a detail page for a results page Your set of search/results pages can include a detail page to display more information about specific records on the results page. In this situation, your results page also doubles as the master page in a master/detail page set.
Page 647 Building the insert page in one operation You can add the basic building blocks of an insert page in a single operation using the Record Insertion Form application object. The application object adds both an HTML form and an Insert Record server behavior to the page. You can also add the building blocks separately using the form tools and the Server Behaviors panel.
Page 648 Building an insert page block by block You can add the basic building blocks of an insert page separately using the form tools and the Server Behaviors panel. You can also add the building blocks all at once using the Record Insertion Form application object.
Page 649: Building Pages To Update A Record (Coldfusion)
Building pages to update a record (ColdFusion) Your application can contain a set of pages that lets users update existing records in a database table. The pages normally consist of a search page, a results page, and an update page. The search and results page let users retrieve the record and the update page lets users modify the record.
Page 650 Creating the links to open the update page (ColdFusion) After creating the search/results pages, you must create links on the results page to open the update page and display the selected record in an HTML form. This section describes how to create the links.
Page 651 Creating a URL parameter for update links (ColdFusion) The links on the results page not only have to open the update page, they must pass the ID of the record the user selected. The update page will use this ID to find the requested record in the database and display it.
Page 652 Retrieving the record to update (ColdFusion) After the results page passes a URL parameter to the update page identifying the record to update, the update page must read the parameter, retrieve the record from the database table, and store it temporarily in a recordset.
Page 653 After the application object places the building blocks on the page, you can use the Dreamweaver design tools to customize the form to your liking, or the Server Behaviors panel to edit the Update Record server behavior. Note: The update page can contain only one record-editing server behavior at a time. For example, you cannot add an Insert Record or a Delete Record server behavior to the update page.
Page 654 To add an HTML form to an update page: Create a new Coldfusion page (File > New). Lay out your page using the Dreamweaver design tools. Add an HTML form by placing the insertion point where you want the form to appear and selecting Insert >...
Page 655: Building Pages To Delete A Record (Coldfusion)
To add a server behavior to update the database table: In the Server Behaviors panel (Window > Server Behaviors), click the Plus (+) button and select Update Record from the pop-up menu. The Update Record dialog box appears. Complete the dialog box. For instructions, click the Help button in the dialog box.
Page 656 Creating links to a confirmation page (ColdFusion) After creating the results page, you must create links that the user can click to confirm the deletion of the associated record from the database. This section describes how to create the links. The next section describes how to modify the link so that it also passes the ID of the record that the user wants to delete.
Page 657 After clicking outside the Link text box, the string appears linked in the table. If you turn Delete on Live Data view (View > Live Data), you can see that the link is applied to the same text in every table row. If Live Data view is already turned on, click the Refresh icon to apply the links to each row.
Page 658 Creating a URL parameter to pass to the confirmation page (ColdFusion) The links on the results page not only have to open the confirmation page, they must pass the ID of the record the user wants to delete. The confirmation page will use this ID to find the record in the database and display it.
Page 659 Displaying the record on the confirmation page (ColdFusion) After completing the page listing the records, switch to the confirmation page. The confirmation page shows the record and asks the user if they're sure they want to delete it. When the user confirms the operation by clicking the form button, the web application deletes the record from the database.
Page 660 Complete the Filter section as follows to find and display the record specified in the URL parameter passed by the results page: From the first pop-up menu in the Filter area, select the column in the recordset containing values that match the value of the URL parameter passed by the page with the Delete links. For example, if the URL parameter contains a record ID number, select the column containing record ID numbers.
Page 661 To display the record the user wants to delete: Select the recordset columns in the Bindings panel and drag them to the confirmation page. Make sure you insert this read-only dynamic content within the form boundaries. For more information on insert dynamic content in a page, see “Making text dynamic”...
Page 662 Click OK and save the page. The completed confirmation page should look similar to the following. After displaying the record on the confirmation page, the next step is to add logic to delete the record. Chapter 40: Building ColdFusion Applications Rapidly...
Page 663 Adding logic to delete the record (ColdFusion) After displaying the selected record on the confirmation page, you must add logic to the page that deletes the record from the database when the user clicks the Confirm Deletion button. You can add this logic quickly and easily in Dreamweaver with the Delete Record server behavior.
Page 664 In the After Deleting, Go To text box, specify a page to open after the record has been deleted from the database table. 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.
Page 665: Using Stored Procedures To Modify Databases (Coldfusion)
Using stored procedures to modify databases (ColdFusion) You can use a stored procedure to modify a database. A stored procedure is a reusable database item that performs some operation on the database. Note: mySQL and Microsoft Access databases do not support stored procedures. Before you use a stored procedure to modify a database, make sure the stored procedure contains SQL that modifies the database in some way.
Page 666: Building Pages That Restrict Access To Your Site (Coldfusion, Asp, Jsp, Php)
Building pages that restrict access to your site (ColdFusion, ASP, JSP, PHP) You can use Dreamweaver to build the following pages to restrict access to your site: • A page that requires users to register the first time they visit the site (see “Building a registration page”...
Page 667 Storing login information about users A registration page requires a database table to store the login information entered by users. Make sure your database table contains a user name and a password column. If you want logged-in users to have different access privileges, include an access privilege column (see “Storing access privileges in the user database”...
Page 668 The next step in creating a registration page is to add the Insert Record server behavior to insert records in the table of users in the database. Related topics • “Building a registration page” on page 666 Updating the table of users in the database You must add an Insert Record server behavior to the registration page to update the table of users in the database.
Page 669 Related topics • “Building a registration page” on page 666 Building a login page Your web application can contain a page that lets registered users log in to the site. For example, the following page asks registered users to log in: A login page is made up of the following building blocks: •...
Page 670 Letting users log in You add an HTML form to the page to let users log in by entering a user name and password. To let users log in: Create a new page (File > New) and lay out your login page using the Dreamweaver design tools. Add an HTML form by placing the insertion point where you want the form to appear and choosing Form from the Insert menu.
Page 671 When a user clicks the Submit button on the login page, the Log In User server behavior compares the values entered by the user against the values for registered users. If the values match, the server behavior opens one page (usually the site’s start page). If the values do not match, the server behavior opens another page (usually a page alerting the user that the login attempt failed).
Page 672 Redirecting unauthorized users to another page To prevent unauthorized users from accessing a page, add a Restrict Access To Page server behavior to it. The server behavior redirects the user to another page if the user attempts to bypass the login page by typing the protected page’s URL in a browser, or if the user is logged in but attempts to access the protected page without the proper access privileges.
Page 673 In most database applications, you can set a column to a default value each time a new record is created. Set the default value to the most common access privilege on your site (for example, Guest); then manually change the exceptions (for example, changing Guest to Administrator). The user now has access to all administrator pages.
Page 674 Chapter 40: Building ColdFusion Applications Rapidly...
Page 675: Chapter 41: Building Asp.net Applications Rapidly
CHAPTER 41 Building ASP.NET Applications Rapidly You can use the tools in Macromedia Dreamweaver MX 2004 to build an ASP.NET web application rapidly and with little or no coding. Related topics • “About rapid application development (all servers)” on page 629 Building master/detail pages (ASP.NET)
Page 676 To create a master page: Create a new ASP.NET page. Select File > New > Dynamic, select an ASP.NET page format, and click Create. A blank .aspx page opens in Dreamweaver. Define a DataSet for the page. In the Bindings panel (Window > Bindings), click the Plus (+) button, select DataSet (Query), and complete the dialog box.
Page 677 Opening a detail page and passing a record ID (ASP.NET) After adding a DataGrid to the master page, you must create links that open the detail page and pass the ID of the record that the user selected. The detail page will use this ID to find the requested record in the database and display it.
Page 678 In the Hyperlink Text area, specify the text to be displayed in the hyperlink column. If you want to create a generic link such as Details for each row in the DataGrid, select the Static Text option and enter the text for the link. Each row in the DataGrid will display the same text (such as Details) in the hyperlink column.
Page 679 element is a placeholder corresponding to the data field’s value. When the page runs, the values of the DataSet’s CODE field are inserted in the corresponding rows in the DataGrid. For example, if the Canberra, Australia, rental location has the code CBR, then the following URL will be used in the Canberra row in the DataGrid: locationDetail.aspx?recordID=CBR Click OK to close the Hyperlink dialog box;...
Page 680 Complete the Filter section as follows to find and display the record specified in the URL parameter passed by the master page: From the first pop-up menu in the Filter area, select the column in the DataSet containing values that match the value of the URL parameter passed by the master page. For example, if the URL parameter contains a record ID number, select the column containing record ID numbers.
Page 681: Building A Database Search Page (Asp.net)
Building 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. This section describes the steps to build a database search page: • “Adding the search controls (ASP.NET)” on page 681 •...
Page 682 Searching with only one search parameter (ASP.NET) When the user clicks the page’s Search button, the search parameter is sent to the server. The server processes the request, builds a filtered DataSet based on the parameter, populates a DataGrid, and sends the page back to the browser. Before adding the DataGrid, you must define a DataSet that finds and stores all the records that meet the search criteria.
Page 683 Searching with multiple search parameters (ASP.NET) If the search page submits more than one search parameter to the server, then you must write a SQL query and use the search parameters in SQL variables. Note: If you have only one search condition, you can use the simple DataSet dialog box to define your DataSet (see “Searching with only one search parameter (ASP.NET)”...
Page 684 If you want to, click Test to create an instance of the DataSet using the default variable values. The default values simulate the values that would otherwise have been returned from the search page. Click OK to close the test DataSet. If you’re satisfied with the DataSet, click OK.
Page 685: Building A Record Insert Page (Asp.net)
Hiding the DataGrid the first time the page loads When the search page first loads, you can hide the DataGrid that will be used to display the search results. To hide the DataGrid the first time the page loads: Open the search page in Code view (View > Code). Immediately after the Register directive at the top of the page, enter the following code block if the page language is Visual Basic: <script runat="server">...
Page 686: Building Pages To Update A Record (Asp.net)
Building pages to update a record (ASP.NET) Your application can contain a set of pages that lets users update existing records in a database table. The pages normally consist of a search page, a results page, and an update page. The search and results page let users retrieve the record and the update page lets users modify the record.
Page 687 To create links on the search page to open the update page and pass the record ID: Open the search page in Dreamweaver. Double-click the DataGrid object listed in the Server Behaviors panel (Window > Server Behaviors). The DataGrid dialog box opens. In the Columns box, select the column you want to apply links to.
Page 688 In the Linked Page area, build the URL to apply to the text in the hyperlink column. The URL not only has to open the update page, it must uniquely identify the record to display on that page. To identify the record to display on the update page, select the Data Field option and select a field in your DataSet that uniquely identifies each record.
Page 689 Retrieving the record to update (ASP.NET) After the search page passes a URL parameter to the update page, the update page must read the parameter, retrieve the record from the database table, and store it temporarily in a DataSet. To retrieve the record to update: Create a new ASP.NET page in Dreamweaver and save it.
Page 690 After modifying the update page to retrieve a record from the database and store it in a DataSet, you must add a form to let users modify the record data. You must also add the logic needed to update the database. You can accomplish these tasks in one operation or block by block. See “Completing the update page in one operation (ASP.NET)”...
Page 691 Completing the update page block by block (ASP.NET) An update page has three building blocks: • A filtered DataSet to retrieve the record from a database table (see “Retrieving the record to update (ASP.NET)” on page 689) • An HTML form to let users modify the record’s data •...
Page 692: Building Pages To Delete A Record (Asp.net)
To display the record in the form: Make sure you defined a DataSet to hold the record the user wants to update. For more information, see “Retrieving the record to update (ASP.NET)” on page 689. Bind each form object to data in the recordset. For more information, see the following sections: “Displaying dynamic content in HTML text fields”...
Page 693 For instructions on creating a page to search for the record to delete, see “Building a database search page (ASP.NET)” on page 681. After creating the search page, the next step is to add delete buttons or hyperlinks to the DataGrid on the search page.
Page 694 In the Format String text box in the Linked Page area, click the Browse button then locate and select your confirmation page. Dreamweaver creates a URL to the confirmation page that includes a URL parameter identifying the record the confirmation page should display. Make a note of the name of the URL parameter because you’ll use it for the confirmation page later.
Page 695 Displaying the record on the confirmation page (ASP.NET) After completing the page listing the records, switch to the delete confirmation page. The confirmation page shows the record and asks the user if they’re sure they want to delete it. When the user confirms the operation by clicking the form button, the web application deletes the record from the database.
Page 696 Complete the Filter section as follows to find and display the record specified in the URL parameter passed by the search page: From the first pop-up menu in the Filter area, select the column in the DataSet containing values that match the value of the URL parameter passed by the page with the Delete links. For example, if the URL parameter contains a record ID number, select the column containing record ID numbers.
Page 697 To display the record the user wants to delete: Select the DataSet columns (record fields) in the Bindings panel and drag them to the confirmation page. Make sure you insert this read-only dynamic content within the form boundaries. For more information on inserting dynamic content in pages, see “Making text dynamic”...
Page 698 After creating a confirmation page, the next step is to add logic to delete the record. Adding logic to delete the record (ASP.NET) After creating the confirmation page, the next step is to add logic to the page that deletes the record from the database when the user clicks the Confirm button.
Page 699 In the On Success, Go To text box, specify a page to open after the record has been deleted from the database table. 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.
Page 700: Using Stored Procedures To Modify Databases (Asp.net)
Using stored procedures to modify databases (ASP.NET) You can use a stored procedure to modify a database. A stored procedure is a reusable database item that performs some operation on the database. Note: Microsoft Access and MySQL databases do not support stored procedures. Before you use a stored procedure to modify a database, make sure the stored procedure contains SQL that modifies the database in some way.
Page 701: Building Pages That Restrict Access To Your Site (Asp.net)
Building pages that restrict access to your site (ASP.NET) You can use Dreamweaver to build a set of pages that restrict access to your site. Dreamweaver does not have authentication server behaviors for ASP.NET pages. However, since ASP and ASP.NET pages can run on the same site, you can use the ASP authentication server behaviors. The method you use to build these pages is identical to the one for ColdFusion.
Page 702 Chapter 41: Building ASP.NET Applications Rapidly...
Page 703: Chapter 42: Building Asp And Jsp Applications Rapidly
CHAPTER 42 Building ASP and JSP Applications Rapidly You can use the tools in Macromedia Dreamweaver MX 2004 to build an ASP or JSP web application rapidly and with little or no coding. Related topics • “About rapid application development (all servers)” on page 629...
Page 704 Creating a master page and defining a recordset for it (ASP and JSP) The first step in building master/detail pages is to create a blank master page and add a recordset to it. You can define a recordset at design time (see “Defining a recordset”...
Page 705 The first part of the URL, http://www.mysite.com/customerdetail.asp, opens the detail page. The second part, ?id=43, is the URL parameter. It tells the detail page what record to find and display. The term id is the name of the URL parameter and 43 is its value. In this example, the URL parameter contains the record’s ID number, 43.
Page 706: Building Search/Results Pages (Asp And Jsp)
Complete the Filter section as follows to find and display the record specified in the URL parameter passed by the results page: From the first pop-up menu in the Filter area, select the column in the database table containing values that match the value of the URL parameter passed by the master page. For example, if the URL parameter contains a record ID number, select the column containing record ID numbers.
Page 707: Building Pages To Update A Record (Asp And Jsp)
Building pages to update a record (ASP and JSP) Your application can contain a set of pages that lets users update existing records in a database table. The pages normally consist of a search page, a results page, and an update page. The search and results page let users retrieve the record and the update page lets users modify the record.
Page 708 Dreamweaver inserts a special link in the page. When the user clicks the link, a URL parameter containing the record ID is passed to the update page. The next step in creating a record update page is to retrieve the record to update. . Retrieving the record to update (ASP and JSP) After the results page passes a URL parameter to the update page identifying the record to update, the update page must read the parameter, retrieve the record from the database table, and store it...
Page 709 Completing the update page in one operation (ASP and JSP) An update page has three building blocks: • A filtered recordset to retrieve the record from a database table (see “Retrieving the record to update (ASP and JSP)” on page 708) •...
Page 710 Before you can add the building blocks, your web application must be able to identify the record to update, and your update page must be able to retrieve it. See “Searching for the record to update (ASP and JSP)” on page 707, “Opening the update page and passing the record ID (ASP and JSP)”...
Page 711: Building Pages To Delete A Record (Asp And Jsp)
To display the record in the form: Make sure you defined a recordset to hold the record the user wants to update. For more information, see “Retrieving the record to update (ASP and JSP)” on page 708. Bind each form object to data in the recordset, as described in the following sections: “Displaying dynamic content in HTML text fields”...
Page 712 Related topics • “Building a record insert page (ASP and JSP)” on page 706 • “Building pages to update a record (ASP and JSP)” on page 707 Identifying the record to delete (ASP and JSP) When users want to delete a record, they must first find that record in the database. Accordingly, you need a search and a results page to work with the delete page.
Page 713 Displaying the data to be deleted (ASP and JSP) After retrieving the record to delete, it’s good practice to display the record before the user deletes it to confirm that the user wants to delete it. To add a read-only display of the record to be deleted: Make sure you defined a recordset to hold the record the user wants to delete.
Page 714: Building Pages With Advanced Data Manipulation Objects (Asp And Jsp)
Deleting the record from the database table (ASP and JSP) After adding a button the user can click to delete the record , the final step is to add the Delete Record server behavior to update the database table after the user clicks the Submit button. To add a server behavior to delete the database table: In the Server Behaviors panel (Window >...
Page 715 Running 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 “ASP command objects” on page 633. To add a stored procedure to an ASP page: In Dreamweaver, open the page that will run the stored procedure.
Page 716 After you close the Callable (Stored Procedure) dialog box, Dreamweaver inserts JSP code in your page that, when run on the server, calls a stored procedure in the database. The stored procedure in turn performs a database operation, such as inserting a record. If the stored procedure takes parameters, you can create a page that gathers the parameter values and submits them to the page with the stored procedure.
Page 717 Complete the SQL statement. For information on writing SQL statements that modify databases, consult a Transact-SQL manual. Use the Variables area to define any SQL variables. For example, below is an Insert statement that contains three SQL variables. The values of these variables are provided by URL parameters passed to the page, as defined in the Run-time Value column of the Variables area.
Page 718: Building Pages That Restrict Access To Your Site (Asp And Jsp)
Using JSP prepared statements to modify a database You can use Dreamweaver to create JSP prepared statements that insert, update, or delete records in a database. A JSP prepared statement is a reusable server object that contains a SQL statement. You supply the prepared statement with the SQL that performs the operation on the database.
Page 719: Chapter 43: Building Php Applications Rapidly
CHAPTER 43 Building PHP Applications Rapidly You can use the tools in Macromedia Dreamweaver MX 2004 to build a PHP web application rapidly and with little or no coding. Related topics • “About rapid application development (all servers)” on page 629...
Page 720 Creating the master page (PHP) This section describes how to create a master page that lists database records. You can use a dynamic table to list the records on a PHP page. Before you start, make sure you define a database connection for the site. For more information, Chapter 28, “Database Connections for PHP Developers,”...
Page 721 Insert a dynamic table to display the records on the page. Place the insertion point where you want the dynamic table to appear on the page, and select Insert > Application Objects > Dynamic Data > Dynamic Table. The Dynamic Table dialog box appears. Complete the Dynamic Table dialog box and click OK.
Page 722 Creating the links to the detail page (PHP) After creating the dynamic table, you must create links that open the detail page. This section describes how to create the links. The next section describes how to modify the link so that it also passes the ID of the record the user selects.
Page 723 Creating a URL parameter for the links (PHP) The links in the dynamic table on the master page not only have to open the detail page, they must pass the ID of the record the user selected. The detail page will use this ID to find the requested record in the database and display it.
Page 724 Finding and displaying the requested record on the detail page (PHP) After completing the master page, switch to the detail page. You must find the requested record in the database and display it on the page. The procedure consists of defining a recordset to hold a single record—the record requested by the master page—and binding the recordset columns to the page.
Page 725: Building Search/Results Pages (Php)
The Recordset dialog box should look as follows: Click OK. The recordset appears in the Bindings panel. Bind the recordset columns to the detail page by selecting the columns in the Bindings panel (Window > Bindings) and dragging them onto the page. For more information, see “Making text dynamic”...
Page 726: Building Pages To Update A Record (Php)
Building pages to update a record (PHP) Your application can contain a set of pages that lets users update existing records in a database table. The pages normally consist of a search page, a results page, and an update page. The search and results page let users retrieve the record and the update page lets users modify the record.
Page 727 Creating the links to open the update page (PHP) After creating the search/results pages, you must create links on the results page to open the update page and display the selected record in an HTML form. This section describes how to create the links.
Page 728 Creating a URL parameter for update links (PHP) The links on the results page not only have to open the update page, they must pass the ID of the record the user selected. The update page will use this ID to find the requested record in the database and display it.
Page 729 Configure the Filter area so that the value of your key column equals the value of the corresponding URL parameter passed by the results page. This kind of filter creates a recordset that contains only the record specified by the results page. For example, if your key column contains record ID information and is called PRID, and if the results page passes the corresponding record ID information in the URL parameter called then here’s how your Filter area should look:...
Page 730 To build the update page with the Record Update Form application object: Open the update page in Design view, then select Insert > Application Objects > Update Record > Record Update Form Wizard. The Record Update Form dialog box appears. Complete the dialog box.
Page 731 Name the HTML form by clicking the tag at the bottom of the Document window to <form> select the form, opening the Property inspector (Window > Properties), and entering a name in the Form Name box. You don’t have to specify an attribute for the form to tell it where and how action method...
Page 732: Building Pages To Delete A Record (Php)
Building pages to delete a record (PHP) Your application can contain a set of pages that lets users delete records in a database. The pages normally consist of a search page, a results page, and a delete page. The search and results page let users retrieve the record and the delete page lets users delete the record.
Page 733 In the newly created table column, enter the string in the row containing the dynamic content placeholders. Make sure you enter the string inside the tabbed repeat region. You can also insert an image with a word or symbol for delete. If Live Data is turned on, enter the string in the first row of records and click the Refresh icon.
Page 734 Displaying the record on the confirmation page (PHP) After completing the page listing the records, switch to the confirmation page. The confirmation page shows the record and asks the user if they're sure they want to delete it. When the user confirms the operation by clicking the form button, the web application deletes the record from the database.
Page 735 Complete the Filter section as follows to find and display the record specified in the URL parameter passed by the results page: From the first pop-up menu in the Filter area, select the column in the recordset containing values that match the value of the URL parameter passed by the page with the Delete links. For example, if the URL parameter contains a record ID number, select the column containing record ID numbers.
Page 736 In the Dynamic Data dialog box, select the record ID column in the recordset and click OK. In the following example, the record ID column selected is CODE. Save the page. The completed confirmation page should look as follows: After creating a confirmation page, the next step in creating a record delete page is to add logic to delete the record.
Page 737 Adding logic to delete the record (PHP) After creating a confirmation page, the next step in building a record delete page is to add logic to the confirmation page that deletes the record from the database when the user clicks the Confirm button.
Page 738: Building Pages That Restrict Access To Your Site (Php)
In the After Deleting, Go To text box, specify a page to open after the record has been deleted from the database table. 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.
Page 739 PART IX Appendixes Get more help to develop your web applications or to use Flash elements. This part contains the following chapters: Appendix A, “Beginner’s Guide to Databases,” on page 741 Appendix B, “SQL Primer,” on page 753...
Page 741: Appendix A: Beginner's Guide To Databases
APPENDIX A Beginner’s Guide to Databases This appendix is intended for Macromedia Dreamweaver MX 2004 users who have little or no experience working with databases or database connections. It explains general concepts, not specific procedures. To see how these concepts apply in practice, see the rest of this guide.
Page 742: Database Design Basics
A subset of data extracted from one or more tables is called a recordset (or a DataSet in ASP.NET). A recordset is also a table because it’s a collection of records that share the same columns. For example, a hockey team roster listing the names and positions of the players could be called a recordset: it consists of a subset of all the possible information about the players, including goals, assists, penalty minutes, and so on.
Page 743 The fractional owners, or shareholders, pay Arrow Aircraft the following fees: • A monthly management fee proportional to the owner’s share of the aircraft to cover pilot, insurance, and hangaring costs • An “occupied” hourly fee covering all direct costs such as maintenance, engine reserves and catering In exchange, a shareholder tells Arrow Aircraft when and where they want to go and Arrow Aircraft takes care of the rest, including obtaining flight and ground crews and catering the flight.
Page 744 • How many passengers will accompany the shareholders? • How much luggage will they bring—light (carry-on), normal (one suitcase per passenger), or heavy (more than one suitcase)? • What are the shareholder’s catering needs? • What is the occupied hourly fee for the plane? •...
Page 745 After some thought, you choose the following properties and primary keys for the tables in the Arrow Aircraft database: Defining relationships between the tables After defining the basic columns and primary keys in your tables, you can start defining relationships between the tables. Once the relationships are defined, you can write SQL statements in Dreamweaver to combine data from two tables (see “Joining tables”...
Page 746 With your knowledge of the client’s feature request and of the company’s business rules and policies, you decide to define the following one-to-many relationships in your database: • Each aircraft can have many shareholders • Each aircraft has many bookings •...
Page 747: Understanding Database Connections
Creating the database The final design step is creating the database using a database system like Microsoft Access, SQL Server, Oracle9i, or MySQL. Consult your database system’s documentation for more information. Understanding database connections If you plan to use a database with your web application, you need to create at least one database connection.
Page 748 Here’s what the same database looks like in Notepad: Your web application faces the same problem as Notepad or any other application trying to access data in an unknown format: the application can’t decipher the data. A software interface is needed between your web application and the database allowing the application and the database to talk to each other.
Page 749 Note: Install MDAC 2.5 first, then install MDAC 2.7. To find out which ODBC drivers are installed on your Windows system, see “Viewing the ODBC drivers installed on a Windows system” on page 749. Some common JDBC drivers include the i-net JDBC drivers for Microsoft SQL Server databases, the Oracle Thin driver for Oracle databases, and the JDBC Driver for DB2 for IBM DB2 databases.
Page 750 Invoking database drivers An application must invoke a database driver to establish two-way communications with a database. A web application invokes a driver by using a connection string. A connection string consists of all the information (or parameters) required to establish a connection to a database. In its simplest form, a connection string specifies a driver and a database, as in this example: Driver={Microsoft Access Driver (*.mdb)};...
Page 751 Using a DSN You can specify data source names (DSNs) in some connections. A DSN is a type of shortcut you create in Windows to represent a connection string. For example, suppose you have a Microsoft SQL Server database called Precinct located on a server called Kojak.
Page 752 Appendix A: Beginner’s Guide to Databases...
Page 753: Appendix Bsql Primer
“Database design basics” on page 742 • “Understanding recordsets” on page 526 Note: Macromedia does not provide technical support for third-party technologies such as SQL. Syntax basics One of the most frequently used SQL statements is the statement, which extracts SELECT specified columns from one or more database tables to build a recordset.
Page 754: Group By
The following keywords are used to refine SQL statements: Keyword Description FROM Names the data source for an operation WHERE Sets one or more conditions for the operation ORDER BY Sorts the recordset rows in a specified order GROUP BY Groups the recordset by the specified select list items The following operators specify conditions and perform logical and numeric functions: Operator...
Page 755: Defining The Columns Of A Recordset
Defining the columns of a recordset You can use SQL to define recordsets for your pages. A recordset is a subset of records extracted from a database. For more information, see “About databases” on page 741. Here’s the basic SQL syntax to define the columns of a recordset: SELECT ColumnName1, ColumnName2, ColumnNameX FROM TableName If you want to include all the columns of a table in the recordset, you can use the wildcard character *, as follows:...
Page 756 You can express this logic with the following clause: WHERE WHERE ColumnName = ParameterValue is a SQL variable containing a search parameter. In a web application, the user ParameterValue typically supplies this parameter using an HTML form. This database query could be expressed fully in SQL as follows: SELECT FIRSTNAME, LASTNAME, DEPARTMENT, EMAIL FROM EMPLOYEES WHERE DEPARTMENT = 'varDept'...
Page 757 If you want to give users the ability to perform partial-word searches, combine the variable with a wildcard character. The SQL wildcard character to use in this case is the percentage sign (%). Here’s an example: ...WHERE LASTNAME LIKE 'varLastName%' For example, if the user types s as the search parameter, all records with last names starting with the letter s are included in the recordset, as in the following example: If the user specifies sm as the search parameter, then only those records with last names that start...
Page 758: Sorting The Records In A Recordset
Filtering records based on a combination of search conditions This section describe how to include records in the search results recordset based on a combination of search conditions. You combine search conditions in SQL using the , and logical operators. If you want all the conditions to be true for a record to be included in the recordset, use the operator as follows: ...WHERE LASTNAME LIKE 'varLastName' AND DEPARTMENT LIKE 'varDept'...
Page 759: Joining Tables
Joining tables You can use a single statement to retrieve data from more than one table in the database. SELECT The statement joins the tables and returns a single recordset containing selected data from each table. For example, a company database might contain one table with personal data about employees and another table with data about the company’s departments.
Page 760 Appendix B: SQL Primer...
Page 761: Index
INDEX Symbols ActiveX controls inserting 368 ? in field names 493 overview 368 @import 297 ActiveX objects, making dynamic 551 Add Object to Library command 126 adding Absolute Bottom alignment 308 ASP.NET form controls 623 Absolute Middle alignment 308 dynamic content 545 absolute paths 316 extensions to Dreamweaver 57 access privileges...
Page 762 applying assets behaviors to images 313 categories 118 colors to text 120 colors, applying to text 120 CSS styles 295 colors, creating 123 custom styles 295 editing 121 Favorites folder, creating 125 application servers 456 Favorites list 117, 118, 123 command objects 716 inserting 119 command objects, defined 633...
Page 763 JavaScript 371–398 CGI reference material 29 library items and 130 Change Link Sitewide command 330 links and 336 Change Property action 377 media and 369 changing third-party 376 Files panel column order 84 triggering 373 Files panel viewing area 83 Behaviors panel 372 site views in Files panel 84 Bindings panel...
Page 764 line numbers 403 code, inserting navigation 428 in Design view 446 printing 432 with the Insert bar 425 reference 431 with the Quick Tag Editor 443 rewriting automatically 417 with the Tag Chooser 425 rewriting preferences 404 coding guidelines 596 searching 428 ColdFusion selecting in Contribute 553...
Page 765 Insert Column Left 176 special files, working with 137 Insert Column Right 176 templates 229, 244 Make Column Autostretch 195 troubleshooting 140 Make Column Fixed Width 195 Control Shockwave or Flash action 380 Remove Spacer Image 196 conventions 29 Select Column 169 Convert Layers to Tables command 160 combining floating panels 46 copying...
Page 766 permissions, changing 490 providers 747 data formats records 741 applying 562 relational 745 creating 563 results pages 641, 681 editing 562 schemas and catalogs 506 Data Link Properties 466 search pages 641, 681 Data Source Name. See DSN SQL 753 data sources stored procedures 665, 700, 714 about 526...
Page 767 refreshing 402 creating, based on design file 70 toggling to Code view 39 creating, based on template 71 VBScript, inserting 446 Design Notes, using with 108 viewing template-based documents 218 detaching a template 248 viewing templates 217 download size, time 272 Design-Time style sheets, using 300 importing Microsoft Word 74 desktop, accessing files on 81...
Page 768 dynamic content Dreamweaver site settings 67 about 526 files in a Dreamweaver site 80 adding to pages 545 files on a server 80, 82 advanced recordset, creating 532 Flash button objects 362 attributes 549 keyboard shortcuts 57 deleting from a page 513 library items 127 form checkboxes 618 recordsets 543...
Page 769 media 359 Files panel text 412 changing column display 84 external links 336 changing the display 84 external style sheets changing the site view 84 creating 296 changing view area size 83 editing 298 collapsing 83 linking to 296 creating files and folders 87 eyedropper 260 deleting files and folders 87 expanding 83...
Page 770 searching 301 deleting 206 searching text 301 editing accessibility attributes 210 font characteristics, changing 286 Frames panel 207 fonts nested 202 changing characteristics 286 overview 200 changing combinations 287 planning 201 encodings, setting fonts for 56 properties 210 Fonts/Encoding preferences 56 resizing 206 form controls, ASP.NET 623 saving 209...
Page 771 Grayscale color palette 261 source code, tag styles 290 grid tag styles 290 as guide 54 See also code showing 160 HTML forms. See forms snapping layers to 160 HTTP server 454 Hyperlink dialog box 323 hypertext links 320 head section, viewing and editing 449 Help 27 hidden fields 616 IBM WebSphere 457...
Page 772 sites 96 ISP 475 tabular data 166, 281 italics 286 text from other documents 281 includes, server-side 419 indenting code 403, 408, 426, 430 Jakarta Tomcat 457 Insert bar jar files 411 about 34 Java applets categories 37 inserting 358, 368 docking 46 making dynamic 551 inserting code 425...
Page 773 jump menus layout cells about 609 about 184 adding menu items 331 alignment 194 changing menu items 332 bg color 194 creating a selection prompt for 331 clearing heights 192 editing 384 drawing 187 Go buttons 331, 384 formatting 194 highlighting preference 189 No Wrap option 194 preferences 197...
Page 774 Microsoft Word or Microsoft Excel documents 281 to named anchor using Point-to-File icon 325 navigation and 315 Mac OS color palette 261 links Macromedia Director, creating Shockwave movies with to anchors 324 applying to selection 120 Macromedia Exchange 57, 598 broken 336...
Page 775 Master/Detail Page Set application object 634, 675, nested layers 703, 719 drawing 151 master/detail pages inserting 151 ASP 634, 703 nested templates ASP.NET 675 controlling editable regions 241 ColdFusion 634, 635 creating 241 JSP 634, 703 overview 222 PHP 634, 719 nesting MDAC (Microsoft Data Access Components) 466 frames 202...
Page 776 linked documents 339 Parameters dialog box 551 non-HTML files 405 passwords text files 73 checking during login 670 operating systems, multiuser 38 Contribute administrator 139 Optimize Image in Fireworks command 344 fields 613 optional regions (templates) incorrect 492 defined 216 letting users choose 667 inserting 237 storing 667...
Page 777 preferences Property inspector changing highlighting 148 about 34 code coloring 405 displaying 45 code formatting 403 editing a recordset 513, 552 code hints 404 editing code 441 code rewriting 404 expanding 45 Code view 403 fixing broken links 338 dictionary for spell checking 301 making HTML attributes dynamic 549 external editors 360 Standard mode 549...
Page 778 recordsets repeating tables (templates) about 526 alternating colors 236 caching 542 inserting 236 columns, defining (SQL) 755 replacing an image placeholder 307 copying and pasting 543 Replay button 265 Database Items tree 533 reports defining without SQL 531 saving 114 editing or deleting 543 for sites 112 empty, troubleshooting 494...
Page 779 selecting frames and framesets 207 Save All command 257 layers 154 Save All Frames command 210 layout cells and tables 192 Save command 72 multiple assets 121 Save Frame As command 209 objects in the Document window 262 Save Frame command 209 table elements 167 Save Frameset As command 209 tags 446...
Page 780 Set Text of Layer action 389 cache file 328 Set Text of Status Bar action 390 Check In/Check Out, using 97 Set Text of Text Field action 390 cloaking 78, 104 setting creating new 62 code coloring 228 creating new, Advanced settings 63 default new document type 72 creating new, Site Definition Wizard 62 document properties 258...
Page 781 selecting in the Document window 262 stored procedures tag styles 290 ASP 715 updating Fireworks HTML placed in Dreamweaver ASP.NET 700 ColdFusion 665 See also code defined 632 source control 78, 97 JSP 715 spaces modifying databases 665, 700, 714 converting to tabs 430 Strikethrough (Default Color) button 261 inserting non-breaking 290...
Page 782 cells, splitting 178 nested, combining 433 column widths 164 overlapping 417 column widths, making consistent 197 removing 430, 446 columns, clearing widths 175 searching for 428 columns, making widths consistent 175, 197 selecting 262, 446 content, adding to 165 See also code creating 165 Target Browser Check panel 434 data, exporting 166...
Page 783 nested 241 toolbar, changing document titles 259 nesting 222 Top alignment 308 optional region 216, 237, 239 tracing images 161 overview 216 transferring files 101 parameters 224 transferring files to and from Contribute sites 136 preferences 228, 229 transparent pixels in background 260 renaming 245 troubleshooting repeating region 216, 234, 250...
Page 784 JSP 707 PHP 726 Update Pages command 243 design, levels of experience in 20 Update Record behavior 655, 692, 711, 731 hosting services 475 updating photo albums, creating 349 links 327 server, setting up 454 records 649 web applications templates 243 creating a root folder 458 uploading database connections 461...
Page 785 XHTML code 417 converting from HTML to XHTML 438 creating pages 438 DTD files 410 in templates 246 Z-Index option (for layers), changing stacking order Index...
Page 786 Index...

This manual is also suitable for:

Dreamweaver mx 2004