Manualshelf

Operation Manual

Manuals Brands Adobe Manuals Software Dreamweaver CC - 2013
1 2 3 4 5 6 7 8 9 10
Help and tutorials
ADOBE
®
DREAMWEAVER
®
January 2014

Summary of content (732 pages)

Main Content

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum.

Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.

  • PAGE 162

    Sidebar div, float left A. Width 200 pixels B. Top and bottom padding, 15 pixels Lastly, the CSS rule for the main container div tag finishes the layout: #mainContent { margin: 0 0 0 250px; padding: 0 20px 20px 20px; } The #mainContent rule styles the main content div with a left margin of 250 pixels, which means that it places 250 pixels of space between the left side of the container div, and the left side of the main content div.

  • PAGE 163

    Main Content

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum.

  • PAGE 164

    Liquid Column width is specified as a percentage of the site visitor’s browser width. The design adapts if the site visitor makes the browser wider or narrower, but does not change based on the site visitor’s text settings. 5. Select a document type from the DocType pop-up menu. 6. Select a location for the layout’s CSS from the Layout CSS in pop-up menu. Add To Head Adds CSS for the layout to the head of the page you’re creating.

  • PAGE 165

    called myCustomLayout.htm, call your preview image myCustomLayout.png. 4. (Optional) Create a notes file for your custom layout by opening the Adobe Dreamweaver CS5\Configuration\BuiltIn\Layouts\_notes folder, copying and pasting any of the existing notes files in the same folder, and renaming the copy for your custom layout. For example, you could copy the oneColElsCtr.htm.mno file, and rename it myCustomLayout.htm.mno. 5.

  • PAGE 166

    Understanding Cascading Style Sheets About About About About About Cascading Style Sheets CSS rules cascading styles text formatting and CSS Shorthand CSS properties To the top About Cascading Style Sheets Cascading Style Sheets (CSS) is a collection of formatting rules that control the appearance of content in a web page. Using CSS styles to format a page separates content from presentation.

  • PAGE 167

    You can define the following types of styles in Dreamweaver: Class styles let you apply style properties to any element or elements on the page. HTML tag styles redefine the formatting for a particular tag, such as h1. When you create or change a CSS style for the h1 tag, all text formatted with the h1 tag is immediately updated.

  • PAGE 168

    font-family: Arial; font-size: small; } When a user loads the page, the paragraph font and font size settings set by you as the author override the default paragraph text settings of the browser. Users can make selections to customize the browser display in an optimal way for their own use. In Internet Explorer, for example, the user can select View > Text Size > Largest to expand the page font to a more readable size if they think the font is too small.

  • PAGE 169

    values of several properties using a single declaration. For example, the font property lets you set font-style, font-variant, fontweight, font-size, line-height, and font-family properties on a single line. A key issue to note when using shorthand CSS, is that values omitted from a shorthand CSS property are assigned their default value. This may cause pages to be incorrectly displayed when two or more CSS rules are assigned to the same tag. For example, the h1 rule shown below uses longhand CSS syntax.

  • PAGE 170

    CSS3 transition effects You can create, modify, and delete CSS3 transitions using the CSS Transitions panel. To create a CSS3 transition, create a transition class by specifying values for the transition properties of the element. If you select an element before creating a transition class, the transition class is automatically applied to the selected element. You can choose to add the generated CSS code to the current document or specify an external CSS file.

  • PAGE 171

    End Value The end value for the transition effect. For example, if you want the font-size to increase to 40px at the end of the transition effect, specify 40px for the font-size property. Choose Where To Create The Transition To embed the style in the current document, select This Document Only. If you want to create an external style sheet for the CSS3 code, select New Style Sheet File. When you click Create Transition, you are prompted for a location to save the new CSS file.

  • PAGE 172

    Add a property to a CSS rule Note: In Dreamweaver CC and later, CSS Styles panel is replaced with CSS Designer. For more information, see CSS Designer. You can use the CSS Styles panel to add properties to rules. 1. In the CSS Styles panel (Window > CSS), select a rule in the All Rules pane (All mode), or select a property in the Summary for Selection pane (Current mode). 2.

  • PAGE 173

    Apply, remove, or rename CSS class styles Apply a CSS class style Remove a class style from a selection Rename a class style Note: In Dreamweaver CC and later, CSS Styles panel is replaced with CSS Designer. For more information, see CSS Designer. Class styles are the only type of CSS style that can be applied to any text in a document, regardless of which tags control the text. All class styles associated with the current document are displayed in the CSS Styles panel (with a period [.

  • PAGE 174

    Check for cross-browser CSS rendering issues Run a browser compatibility check Select the element affected by a found issue Jump to the next or previous found issue in the code Select browsers for Dreamweaver to check against Exclude an issue from the browser compatibility check Edit the Ignored Issues list Save a browser compatibility check report View a browser compatibility check report in a browser Open the Adobe CSS Advisor website Note: In Dreamweaver CC and later, CSS Styles panel is replaced with CS

  • PAGE 175

    1. Run a browser compatibility check. 2. In the Results panel, Right-click (Windows) or Control-click (Macintosh) the issue that you want to exclude from future checking. 3. Select Ignore Issue from the context menu. To the top Edit the Ignored Issues list 1. In the Results panel (Window > Results), select the Browser Compatibility Check tab. 2. Click the green arrow in the upper-left corner of the Results panel and select Edit Ignored Issues List. 3. In the Exceptions.

  • PAGE 176

    Convert inline CSS to a CSS rule Note: In Dreamweaver CC and later, CSS Styles panel is replaced with CSS Designer. For more information, see CSS Designer. In-line styles are not recommended best practices. To make your CSS cleaner and more organized, you can convert inline styles to CSS rules that reside in the head of the document or in an external style sheet. 1. In Code view (View > Code), select the entire style attribute that contains the inline CSS you want to convert 2.

  • PAGE 177

    Disable/Enable CSS Note: In Dreamweaver CC and later, CSS Styles panel is replaced with CSS Designer. For more information, see CSS Designer. The Disable/Enable CSS Property feature lets you comment out portions of CSS from the CSS Styles panel, without having to make changes directly in the code. When you comment out portions of the CSS, you can see what kinds of effects particular properties and values have on your page.

  • PAGE 178

    Edit a CSS rule Edit a rule in the CSS Styles panel (Current mode) Edit a rule in the CSS Styles panel (All mode) Change the name of a CSS selector Note: In Dreamweaver CC and later, CSS Styles panel is replaced with CSS Designer. For more information, see CSS Designer. You can easily edit both internal and external rules that you have applied to a document. When you edit a CSS style sheet that controls the text in your document, you instantly reformat all of the text controlled by that CSS style sheet.

  • PAGE 179

    Edit a CSS style sheet Note: In Dreamweaver CC and later, CSS Styles panel is replaced with CSS Designer. For more information, see CSS Designer. A CSS style sheet typically includes one or more rules. You can edit an individual rule in a CSS style sheet using the CSS Styles panel, or if you prefer, you can work directly in the CSS style sheet. 1. In the CSS Styles panel (Window > CSS Styles), select All mode. 2. In the All rules pane, double-click the name of the style sheet you want to edit. 3.

  • PAGE 180

    Enhancements to CSS3 support in the CSS styles panel (CS5.5) Apply CSS3 properties using the pop-up panel Specifying multiple value-sets Locate properties in the Category view Ensuring compliance with browsers Preview changes in Live view A pop-up panel has been introduced in the CSS panel for the following properties: text-shadow box-shadow border-radius border-image The options in the pop-up panel ensure that you apply the property correctly even if you are unfamiliar with their W3C syntax.

  • PAGE 181

    Changes made to CSS properties are not displayed in the Design view. Switch to Live view to preview changes. You can also make quick edits to CSS3 properties in the Live view, and the changes are immediately reflected in this view. The following CSS3 properties are supported in Live View: text-shadow border-radius -webkit-box-shadow -webkit-border-image Adobe recommends Have a tutorial you would like to share? Enhanced support for CSS3 in DW CS5.

  • PAGE 182

    Format CSS code Set CSS code formatting preferences Format CSS code in a CSS style sheet manually Format embedded CSS code manually Note: In Dreamweaver CC and later, CSS Styles panel is replaced with CSS Designer. For more information, see CSS Designer. You can set preferences that control the format of your CSS code whenever you create or edit a CSS rule using the Dreamweaver interface.

  • PAGE 183

    Inspect CSS in Live view Note: In Dreamweaver CC and later, CSS Styles panel is replaced with CSS Designer. For more information, see CSS Designer. Inspect mode works together with Live View to help you quickly identify HTML elements and their associated CSS styles. With Inspect mode turned on, you can hover over elements on your page to see the CSS box model attributes for any block-level element. Note: For more information on the CSS box model, see the CSS 2.1 specification.

  • PAGE 184

    Link to an external CSS style sheet Note: In Dreamweaver CC and later, CSS Styles panel is replaced with CSS Designer. For more information, see CSS Designer. When you edit an external CSS style sheet, all documents linked to that CSS style sheet are updated to reflect those edits. You can export the CSS styles found in a document to create a new CSS style sheet, and attach or link to an external style sheet to apply the styles found there.

  • PAGE 185

    Move/export CSS rules Move/export CSS rules to a new style sheet Move/export CSS rules to an existing style sheet Rearrange or move CSS rules by dragging Select multiple rules before moving them Note: In Dreamweaver CC and later, CSS Styles panel is replaced with CSS Designer. For more information, see CSS Designer. The CSS management features in Dreamweaver make it easy for you to move or export CSS rules to different locations.

  • PAGE 186

    Legal Notices | Online Privacy Policy 179

  • PAGE 187

    Set CSS Styles preferences Note: In Dreamweaver CC and later, CSS Styles panel is replaced with CSS Designer. For more information, see CSS Designer. CSS style preferences control how Dreamweaver writes the code that defines CSS styles. CSS styles can be written in a shorthand form that some people find easier to work with. Some older versions of browsers, however, do not correctly interpret the shorthand. 1.

  • PAGE 188

    Set CSS heading properties for an entire page Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article. You can specify fonts, font sizes, and colors for your page headings. By default, Dreamweaver creates CSS rules for your headings and applies them to all headings you use on the page. (The rules are embedded in the head section of the page.

  • PAGE 189

    Set CSS link properties for an entire page Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article. You can specify fonts, font sizes, colors, and other items for your links. By default, Dreamweaver creates CSS rules for your links and applies them to all links you use on the page. (The rules are embedded in the head section of the page.

  • PAGE 190

    The CSS Styles panel The CSS Styles panel in Current mode The CSS Styles panel in All mode CSS Styles panel buttons and views Open the CSS Styles panel Note: In Dreamweaver CC and later, CSS Styles panel is replaced with CSS Designer. For more information, see CSS Designer. The CSS Styles panel lets you track the CSS rules and properties affecting a currently selected page element (Current mode), or all of the rules and properties that are available to the document (All mode).

  • PAGE 191

    font-size: 12px font-family: 'Arial' color: green The Summary for Selection pane arranges properties in increasing order of specificity. In the above example, the tag style defines the font size and the class style defines the font family and the color. (The font family defined by the class style overrides the font family defined by the tag style because class selectors have higher specificity than tag selectors. For more information on CSS specificity, see www.w3.org/TR/CSS2/cascade.html.

  • PAGE 192

    Block, Border, and so on, with set properties at the top of each category. List view displays an alphabetical list of all available properties, and likewise sorts set properties to the top. To switch between views, click the Show Category View, Show List View, or Show Only Set Properties button, located at the lower-left corner of the Properties pane. In all views, set properties are displayed in blue.

  • PAGE 193

    Update CSS style sheets in a Contribute site Note: In Dreamweaver CC and later, CSS Styles panel is replaced with CSS Designer. For more information, see CSS Designer. Adobe Contribute users can’t make changes to a CSS style sheet. To change a style sheet for a Contribute site, use Dreamweaver. 1. Edit the style sheet using the Dreamweaver style-sheet-editing tools. 2.

  • PAGE 194

    Use Design-Time style sheets Note: In Dreamweaver CC and later, CSS Styles panel is replaced with CSS Designer. For more information, see CSS Designer. Design-Time style sheets allow you to show or hide design applied by a CSS style sheet as you work in a Dreamweaver document. For example, you can use this option to include or exclude the effect of a Macintosh-only or a Windows-only style sheet as you design a page.

  • PAGE 195

    Use Dreamweaver sample style sheets Note: In Dreamweaver CC and later, CSS Styles panel is replaced with CSS Designer. For more information, see CSS Designer. Dreamweaver provides sample style sheets that you can apply to your pages or that you can use as starting points to develop your own styles. 1. Open the CSS Styles panel by doing one of the following: Select Window > CSS Styles. Press Shift+F11. 2. In the CSS Styles panel, click the Attach External Style Sheet button.

  • PAGE 196

    Working with div tags Insert and edit div tags CSS layout blocks Working with AP elements Note: In Dreamweaver CC and later, CSS Styles panel is replaced with CSS Designer. For more information, see CSS Designer. (Creative Cloud users only): Seven new semantic tags are available when you select Insert > Layout. The new tags are : Article, Aside, HGroup, Navigation, Section, Header, and Footer. For more information, see Insert HTML5 semantic elements from the Insert panel.

  • PAGE 197

    Click the border of the div tag. Look for the highlighting to see the border. Click inside the div tag, and press Control+A (Windows) or Command+A (Macintosh) twice. Click inside the div tag, then select the div tag from the tag selector at the bottom of the Document window. 2. Select Window > CSS Styles to open the CSS Styles panel if it is not already open. Rules applied to the div tag appear in the panel. 3. Make edits as necessary.

  • PAGE 198

    View CSS layout block outlines Select View > Visual Aids > CSS Layout Outlines. View CSS layout block backgrounds Select View > Visual Aids > CSS Layout Backgrounds. View CSS layout block box models Select View > Visual Aids > CSS Layout Box Model. You can also access CSS layout block visual aid options by clicking the Visual Aids button on the Document toolbar.

  • PAGE 199

    You can change properties for AP Divs (or any AP element) on your page, including x and y coordinates, z-index (also called the stacking order), and visibility. Insert an AP Div Dreamweaver lets you easily create and position AP Divs on your page. You can also create nested AP Divs.

  • PAGE 200

    • The graphical depiction for either set of AP Divs might look as follows: In the first set of div tags, one div is sitting on top of the other on the page. In the second set, the apDiv4 div is actually inside of the apDiv3 div. (You can change AP Div stacking order in the AP Elements panel.) Nesting is often used to group AP Divs together. A nested AP Div moves with its parent AP Div and can be set to inherit visibility from its parent.

  • PAGE 201

    3. Set any of the following options: CSS-P Element Specifies an ID for the selected AP element. The ID identifies the AP element in the AP Elements panel and in JavaScript code. Use only standard alphanumeric characters; do not use special characters such as spaces, hyphens, slashes, or periods. Every AP element must have its own unique ID. Note: The CSS-P Property inspector presents the same options for relatively-positioned elements.

  • PAGE 202

    Hold down Shift while selecting AP elements. View and set properties for multiple AP elements 1. Select multiple AP elements. 2. In the Property inspector (Window > Properties), click the expander arrow in the lower-right corner, if it isn’t already expanded, to see all properties. 3.

  • PAGE 203

    Click inside an AP element and press Control+A (Windows) or Command+A (Macintosh) to select the contents of the AP element. Press Control+A or Command+A again to select the AP element. Click inside an AP element and select its tag in the tag selector. Select multiple AP elements Do one of the following: In the AP Elements panel (Window > AP Elements), Shift-click two or more AP element names. In the Document window, Shift-click inside or on the border of two or more AP elements.

  • PAGE 204

    1. In Design view, select an AP element. 2. Do one of the following to resize the AP element: To resize by dragging, drag any of the AP element’s resize handles. To resize one pixel at a time, hold down Control (Windows) or Option (Macintosh) while pressing an arrow key. The arrow keys move the right and bottom borders of the AP element; you can’t resize using the top and left borders with this technique.

  • PAGE 205

    Convert AP elements to a table 1. Select Modify > Convert > AP Divs To Table. 2. Specify any of the following options and click OK: Most Accurate Creates a cell for every AP element, plus any additional cells that are necessary to preserve the space between AP elements. Smallest: Collapse Empty Cells Specifies that the AP elements’ edges should be aligned if they are positioned within the specified number of pixels.

  • PAGE 206

    Layout and design 199

  • PAGE 207

    Laying out pages with CSS About CSS page layout About CSS page layout structure Create a page with a CSS layout To the top About CSS page layout A CSS page layout uses the Cascading Style Sheets format, rather than traditional HTML tables or frames, to organize the content on a web page. The basic building block of the CSS layout is the div tag—an HTML tag that in most cases acts as a container for text, images, and other page elements.

  • PAGE 208

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis.

    Main Content

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum.

    Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.

  • PAGE 209

    Sidebar div, float left A. Width 200 pixels B. Top and bottom padding, 15 pixels Lastly, the CSS rule for the main container div tag finishes the layout: #mainContent { margin: 0 0 0 250px; padding: 0 20px 20px 20px; } The #mainContent rule styles the main content div with a left margin of 250 pixels, which means that it places 250 pixels of space between the left side of the container div, and the left side of the main content div.

  • PAGE 210

    Main Content

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum.

  • PAGE 211

    Liquid Column width is specified as a percentage of the site visitor’s browser width. The design adapts if the site visitor makes the browser wider or narrower, but does not change based on the site visitor’s text settings. 5. Select a document type from the DocType pop-up menu. 6. Select a location for the layout’s CSS from the Layout CSS in pop-up menu. Add To Head Adds CSS for the layout to the head of the page you’re creating.

  • PAGE 212

    called myCustomLayout.htm, call your preview image myCustomLayout.png. 4. (Optional) Create a notes file for your custom layout by opening the Adobe Dreamweaver CS5\Configuration\BuiltIn\Layouts\_notes folder, copying and pasting any of the existing notes files in the same folder, and renaming the copy for your custom layout. For example, you could copy the oneColElsCtr.htm.mno file, and rename it myCustomLayout.htm.mno. 5.

  • PAGE 213

    CSS Designer panel (CC, 13.1) In Dreamweaver CC and later, CSS Styles panel is replaced with CSS Designer. Create and attach style sheets Define media queries Define Selectors Set properties Identify page elements associated with a CSS Selector (13.1) CSS Designer (Windows > CSS Designer) is an integrated panel that lets you 'visually' create CSS files, rules, and set properties, along with media queries.

  • PAGE 214

    selectors for that media query. If no CSS or media queries are selected, this pane displays all the selectors in the document. When you select Global in the @Media pane, all the selectors that are not included in a media query of the selected source are displayed. Properties Displays properties that you can set for the specified selector. For more information, see Set properties. CSS Designer is context-sensitive.

  • PAGE 215

    1. In the Sources pane of the CSS Designer panel, click , and then click one of the following options: Create a New CSS File: To create and attach a new CSS file to the document Attach Existing CSS File: To attach an existing CSS file to the document Define in Page: To define a CSS within the document Based on the option you choose, Create A New CSS File or Attach Existing CSS File dialog boxes appear. 2.

  • PAGE 216

    To search for a specific selector, use the search box at the top of the pane. To rename a selector, click the selector, and type the required name. To reorganize the selectors, drag the selectors to the required position. To move a selector from one source to another, drag the selector to the required source in the Source pane. To duplicate a selector in the selected source, right-click the selector, and click Duplicate.

  • PAGE 217

    Only set properties To set a property, such as, width or border-collapse, click the required options displayed adjacent to the property in the Properties pane. For information on setting gradient background or box controls such as margins, padding, and position, see the following links: Set margins, padding, and position Apply gradients to background Use Flexible Box layouts Overridden properties are indicated using a strikethrough format.

  • PAGE 218

    'padding' property 'position' property Click the values and type the required value. If you want all the four values to be the same and changed simultaneously, click the link icon ( the center. )at At any point in time, you can disable ( ) or delete ( ) specific values, for example, left margin value while retaining the right, top, and bottom values. Disable, delete, and link icons for margins Disable or delete properties The CSS Designer panel lets you disable or delete each property.

  • PAGE 219

    To identify the page elements associated with a CSS Selector, hover your mouse over the Selector in Live View (with Live Code 'off'). Dreamweaver highlights the associated elements with dotted lines. To lock-in the highlight for the elements, click the Selector. The elements now are highlighted with a blue border. To remove the blue highlight around the elements, the Selector again. Note: The following table summarizes the scenarios where Live Highlight is not available.

  • PAGE 220

    Fluid grid layouts (CC) Using Fluid Grid layouts Tutorials on Fluid Grid layouts Create a fluid grid layout Insert Fluid Grid elements Nesting elements The layout of a website has to respond and adapt to the dimensions of the device on which it is displayed. Fluid grid layouts provide a visual way to create different layouts corresponding to devices on which the website is displayed. For example, your website is going to be viewed on desktops, tablets, and mobile phones.

  • PAGE 221

    panel to create your layout. To switch to designing the layout for other devices, click the corresponding icon in the options below the Design view. 6. Save the file. When you save the HTML file, you are prompted to save the dependent files such as boilerplate.css and respond.min.js to a location on your computer. Specify a location, and click Copy. The boilerplate.css is based on the HTML5 boilerplate.

  • PAGE 222

    C Move up a row Moves the element up by a row D Duplicate Duplicates the currently selected element. CSS linked to element is also duplicated. E Delete For ID selectors, deletes both the HTML as well as CSS. To delete HTML only, press Delete. For class selectors, only HTML is deleted. F Lock Converts the element to an absolutely positioned element. Align For class selectors, the Align option acts as a zero margin button. For ID selectors, the align button aligns the element to the grid.

  • PAGE 223

    Using jQuery UI widgets in Dreamweaver (CC) Spry widgets are replaced with jQuery widgets in Dreamweaver CC and later. While you can still modify existing spry widgets on your page, you cannot add new spry widgets. Widgets are small web applications written in languages such as DHTML and JavaScript that can be inserted and executed within a web page. Among other things, web widgets help provide a way to replicate desktop experiences on a web page.

  • PAGE 224

    Using jQuery effects in Dreamweaver (CC) Spry effects are replaced with jQuery effects in Dreamweaver CC. While you can still modify existing spry effects on your page, you cannot add new spry effects. Add jQuery effects Event-based jQuery effects Remove jQuery effects To the top Add jQuery effects 1. In the Design or Code view of your Dreamweaver document, select the element to which you want to apply a jQuery effect. 2. Select Windows > Behaviors to open the Behaviors panel. 3.

  • PAGE 225

    Event-based jQuery effects When you apply a jQuery effect, it is assigned to the onClick event by default. You can change the trigger event for the effect using the Behaviors panel. 1. Select the required page element. 2. In the Windows > Behaviors panel, click the Show Set Events icon. 3. Click the row that corresponds to the effect that is currently applied. Note that the first column changes to a drop-down list providing a list of events that you can choose from. 4. Click the required event.

  • PAGE 226

    Colors Web-safe colors Use the color picker Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article. To the top Web-safe colors In HTML, colors are expressed either as hexadecimal values (for example, #FF0000) or as color names (red).

  • PAGE 227

    Creating media queries (CS5.5 and later) Overview Create a media query Use an existing media queries file Choose a different site-wide media queries file Viewing web pages based on media query You can use media queries to specify CSS files based on the reported characteristics of a device. The browser on a device checks the media query and uses the corresponding CSS file to display the web page. For example, the following media query specifies the phone.css file for devices that are 300-320 pixels wide.

  • PAGE 228

    6. Do one of the following: Click "+" to define the properties for the media query file. Click Default Presets if you want to begin with standard presets. 7. Select rows in the table, and edit their properties using the options under Properties. Description The description of the device for which the CSS file must be used. For example, phone, TV, tablet, and so on.

  • PAGE 229

    following changes are seen: The view size changes to reflect the specified dimensions. The document frame size is unaltered. The CSS file specified in the media query is used to display the page.

  • PAGE 230

    Designing dynamic pages Dreamweaver and dynamic page design Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article. To the top Dreamweaver and dynamic page design Follow these general steps to successfully design and create a dynamic website. 1. Design the page.

  • PAGE 231

    the data formats. Create record navigation and status controls, master/detail pages, and forms for updating information in a database. Display more than one record from a database record. Create recordset navigation links that allow users to view the previous or next records from a database record. Add a record counter to help users keep track of how many records were returned, and where they are in the returned result.

  • PAGE 232

    Displaying data with Spry About Spry data sets Create a Spry data set Create a Spry region Create a Spry repeat region Create a Spry repeat list region Note: Spry widgets are replaced with jQuery widgets in Dreamweaver CC and later. While you can still modify existing spry widgets on your page, you cannot add new spry widgets. To the top About Spry data sets A Spry data set is fundamentally a JavaScript object that holds a collection of data that you specify.

  • PAGE 233

    Selecting the element for the HTML data set data container. For lengthy files, you can click the Expand/Collapse arrow at the bottom of the Data Selection window to see more of the data. Once you select the container element for the data set, Dreamweaver displays a preview of the data set in the Data Preview window. (Optional) Select Advanced Data Selection if you want to specify CSS data selectors for the data set. For example, if you specified .product in the Row Selectors text box, and .

  • PAGE 234

    6. Click Done. Dreamweaver creates the data set and, if you selected a layout option, displays the layout and data placeholders on your page. If you look in Code view, you’ll see that Dreamweaver has added references in the header to the SpryData.js file and the SpryHTMLDataSet.js file. These files are important Spry assets that work in conjunction with the page. Be sure not to remove this code from your page or the data set will not function.

  • PAGE 235

    (Optional) Specify how you want to sort the data by selecting the column you want to sort by from the Sort Column pop-up menu. Once you’ve selected the column, you can specify whether to sort it in ascending or descending order. (Optional) Select Filter Out Duplicate rows to exclude duplicate rows of data from the data set. (Optional) Select Disable Data Caching if you always want to have access to the most recent data in the data set.

  • PAGE 236

    Master/Detail layout Select this option if you want to display your data using a master/detail layout. Master/detail layouts let users click an item in the master (left) region that updates the information in the detail (right) region. Typically the master region contains a long list of names, for example a list of available products. When the user clicks one of the product names, the detail region displays much more detailed information about the selection.

  • PAGE 237

    Do Not Insert HTML Select this option if you want to create a data set, but do not want Dreamweaver to insert an HTML layout for the data set. The data set becomes available from the Bindings panel (Window > Bindings), and you can manually drag pieces of the data set to the page. Even if you create a data set without inserting a layout, you can still insert one of the available HTML layouts at any time.

  • PAGE 238

    add them automatically when you insert a table or repeat list, or you can wrap them around existing tables or repeat list objects. If you are adding a detail region, typically you add the master table object first and select the Update Detail Regions option (see Dynamic Table layout). The only value that is different and specific for a detail region is the Type option in the Insert Spry Region dialog box. 1. Select Insert > Spry > Spry Region.

  • PAGE 239

    child level. For instance, if you have a

      list, the data is checked at the
    • level. If you choose the Repeat option, the data is checked at the
        level. The Repeat Children option may be especially useful if you use conditional expressions in your code. 4. Choose your Spry data set from the menu. 5. If you already have text or elements selected, you can wrap or replace them. 6. Click OK to display a repeat region on your page.

      • PAGE 240

        Legal Notices | Online Privacy Policy 233

      • PAGE 241

        Displaying database records About database records Server behaviors and formatting elements Applying typographic and page layout elements to dynamic data Navigating database recordset results Create a recordset navigation bar Custom recordset navigation bars Navigation bar design tasks Display and hide regions based on recordset results Display multiple recordset results Create a dynamic table Create record counters Use predefined data formats Note: The user interface has been simplified in Dreamweaver CC a

      • PAGE 242

        to display five records at a time, you might want to add links such as Next or Previous that let users display the five next or previous records. You can create four types of navigation links to move through a recordset: First, Previous, Next, and Last. A single page can contain any number of these links, provided they all work on a single recordset. You can’t add links to move through a second recordset on the same page.

      • PAGE 243

        Create and assign server behaviors to a navigation link 1. In Design view, select the text string or image on the page you want to use as a record navigation link. 2. Open the Server Behaviors panel (Window > Server Behaviors), and click the Plus (+) button. 3. Select Recordset Paging from the pop-up menu; then select a server behavior appropriate to that link from the listed server behaviors.

      • PAGE 244

        To the top Display multiple recordset results The Repeating Region server behavior lets you display multiple records from a recordset within a page. Any dynamic data selection can be turned into a repeating region. However, the most common regions are a table, a table row, or a series of table rows. 1. In Design view, select a region that contains dynamic content. The selection can be anything, including a table, a table row, or even a paragraph of text.

      • PAGE 245

        2. Select the recordset from the Recordset pop-up menu. 3. Select the number of records to display per page. 4. (Optional) Input values for the table border, cell padding, and cell spacing. The Dynamic Table dialog box retains the values you enter for table borders, cell padding, and cell spacing. Note: If you are working on a project that requires several dynamic tables with the same appearance, enter the table layout values, which further simplifies page development.

      • PAGE 246

        This example creates a record counter that appears similar to the example in “Simple record counters.” In this example, the text in sans-serif font represents the record count placeholders that will be inserted in the page. The record counter in this example appears as follows: Displaying records StartRow through EndRow of RecordSet.RecordCount. 1. In Design view, enter the counter’s text on the page. The text can be anything you want, for example: Displaying records thru of . 2.

      • PAGE 247

        The number of digits to display after the decimal point Whether to place a leading zero in front of fractions Whether to use parentheses or a minus sign for negative values Whether to group digits c. To delete a data format, click the format in the list, and click the Minus (-) button. Create a data format (ASP only) 1. Open a page containing dynamic data in Design view. 2. Select the dynamic data you want to create a custom format for. 3.

      • PAGE 248

        Presenting content with tables About tables Table formatting precedence in HTML About splitting and merging table cells Insert a table and add content Import and export tabular data Select table elements Set table properties Set cell, row, or column properties Use Expanded Tables mode for easier table editing Format tables and cells Resizing tables, columns, and rows Resize tables, columns, and rows Add and remove rows and columns Split and merge cells Copy, paste, and delete cells Nest tables Sort tables N

      • PAGE 249

        several columns or rows. You can split a cell into any number of rows or columns, regardless of whether it was previously merged. Dreamweaver automatically restructures the table (adding any necessary colspan or rowspan attributes) to create the specified arrangement. In the following example, the cells in the middle of the first two rows have been merged into a single cell that spans two rows. To the top Insert a table and add content Use the Insert panel or the Insert menu to create a new table.

      • PAGE 250

        Select Insert > Table Objects > Import Tabular Data. 2. Specify the options for the tabular data and click OK. Data File The name of the file to import. Click the Browse button to select a file. Delimiter The delimiter used in the file you’re importing. If you select Other, a text box appears to the right of the pop-up menu. Enter the delimiter used in your file. Note: Specify the delimiter that was used when the data file was saved.

      • PAGE 251

        Select a single column 1. Click in the column. 2. Click the column header menu and choose Select Column. Select a single cell Do one of the following: Click in the cell, then select the tag in the tag selector at the lower-left corner of the Document window. Control-click (Windows) or Command-click (Macintosh) in the cell. Click in the cell and select Edit >Select All. Select Edit > Select All again when a cell is selected to select the entire table.

      • PAGE 252

        Table Id An ID for the table. Rows and Cols The number of rows and columns in the table. W The width of the table in pixels, or as a percentage of the browser window’s width. Note: You usually don’t need to set the height of a table. CellPad The number of pixels between a cell’s content and the cell boundaries. CellSpace The number of pixels between adjacent table cells. Align Determines where the table appears, relative to other elements in the same paragraph, such as text or images.

      • PAGE 253

        When you set certain properties for a row, however, Dreamweaver changes the attributes of the tr tag rather than changing the attributes of each td tag in the row. When you’re applying the same format to all the cells in a row, applying the format to the tr tag produces cleaner, more concise HTML code. 3. Press Tab or Enter (Windows) or Return (Macintosh) to apply the value.

      • PAGE 254

        Add or edit accessibility values for a table in Design view To edit the table caption, highlight the caption and type a new caption. To edit the caption alignment, place the insertion point in the table caption, right-click (Windows) or Control-click (Macintosh), then select Edit Tag Code. To edit the table summary, select the table, right-click (Windows) or Control-click (Macintosh), then select Edit Tag Code.

      • PAGE 255

        Change a row’s height visually Drag the lower border of the row. Make column widths in code consistent with visual widths 1. Click in a cell. 2. Click the table header menu, then select Make All Widths Consistent. Dreamweaver resets the width specified in the code to match the visual width. Clear all set widths or heights in a table 1. Select the table. 2. Do one of the following: Select Modify > Table > Clear Cell Widths, or Modify > Table > Clear Cell Heights.

      • PAGE 256

        Add multiple rows or columns 1. Click in a cell. 2. Select Modify > Table > Insert Rows Or Columns, complete the dialog box, and click OK. Insert Indicates whether to insert rows or columns. Number of Rows or Number of Columns The number of rows or columns to insert. Where Specifies whether the new rows or columns should appear before or after the row or column of the selected cell.

      • PAGE 257

        options. The contents of the individual cells are placed in the resulting merged cell. The properties of the first cell selected are applied to the merged cell. Split a cell 1. Click in the cell and do one of the following: Select Modify > Table > Split Cell. In the expanded HTML Property inspector (Window > Properties), click Split Cell . Note: If you don’t see the button, click the expander arrow in the lower-right corner of the Property inspector so that you see all the options. 2.

      • PAGE 258

        To paste a full column of cells to the left of a particular cell, click in that cell. Note: If you have less than a full row or column of cells in the clipboard, and you click in a cell and paste the cells from the clipboard, the cell you clicked in and its neighbors may (depending on its location in the table) be replaced with the cells you are pasting. To create a new table with the pasted cells, place the insertion point outside of the table. 2. Select Edit > Paste.

      • PAGE 259

        [print]Laying out pages with CSS Legal Notices | Online Privacy Policy 252

      • PAGE 260

        Set CSS heading properties for an entire page Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article. You can specify fonts, font sizes, and colors for your page headings. By default, Dreamweaver creates CSS rules for your headings and applies them to all headings you use on the page. (The rules are embedded in the head section of the page.

      • PAGE 261

        Set title and encoding properties for a page Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article. The Title/Encoding Page Properties options let you specify the document encoding type that is specific to the language used to author your web pages as well as specify which Unicode Normalization Form to use with that encoding type. 1.

      • PAGE 262

        Understanding document encoding Document encoding specifies the encoding used for characters in the document. Document encoding is specified in a meta tag in the head of the document; it tells the browser and Dreamweaver how the document should be decoded and what fonts should be used to display the decoded text. For example, if you specify Western European (Latin1), this meta tag is inserted: .

      • PAGE 263

        Update CSS style sheets in a Contribute site Note: In Dreamweaver CC and later, CSS Styles panel is replaced with CSS Designer. For more information, see CSS Designer. Adobe Contribute users can’t make changes to a CSS style sheet. To change a style sheet for a Contribute site, use Dreamweaver. 1. Edit the style sheet using the Dreamweaver style-sheet-editing tools. 2.

      • PAGE 264

        Use Design-Time style sheets Note: In Dreamweaver CC and later, CSS Styles panel is replaced with CSS Designer. For more information, see CSS Designer. Design-Time style sheets allow you to show or hide design applied by a CSS style sheet as you work in a Dreamweaver document. For example, you can use this option to include or exclude the effect of a Macintosh-only or a Windows-only style sheet as you design a page.

      • PAGE 265

        Use Dreamweaver sample style sheets Note: In Dreamweaver CC and later, CSS Styles panel is replaced with CSS Designer. For more information, see CSS Designer. Dreamweaver provides sample style sheets that you can apply to your pages or that you can use as starting points to develop your own styles. 1. Open the CSS Styles panel by doing one of the following: Select Window > CSS Styles. Press Shift+F11. 2. In the CSS Styles panel, click the Attach External Style Sheet button.

      • PAGE 266

        Use a tracing image to design a page Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article. You can insert an image file to use as a guide in designing your page. The image appears as a background image, which you can “design over” as you lay out your page. 1.

      • PAGE 267

        Using Frames How frames and framesets work Deciding whether to use frames Nested framesets Work with framesets in the Document window Create frames and framesets Select frames and framesets Open a document in a frame Save frame and frameset files View and set frame properties and attributes View and set frameset properties Control frame content with links Provide content for browsers without frame support Using JavaScript behaviors with frames Note: The user interface has been simplified in Dreamweaver CC a

      • PAGE 268

        content frame on the right displays the appropriate document for the link the visitor clicks on the left. 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. Note: A “page” refers either to a single HTML document or to the entire contents of a browser window at a given moment, even if several HTML documents appear at once.

      • PAGE 269

        To the top Nested framesets A frameset inside another frameset is called a nested frameset. A single frameset file can contain multiple nested framesets. Most web pages that use frames are actually using nested frames, and most of the predefined framesets in Dreamweaver also use nesting. Any set of frames in which there are different numbers of frames in different rows or columns requires a nested frameset.

      • PAGE 270

        Create a predefined frameset and display an existing document in a frame 1. Place the insertion point in a document and do one of the following: Choose Insert > HTML > Frames and select a predefined frameset. In the Layout category of the Insert panel, click the drop-down arrow on the Frames button and select a predefined frameset. The frameset icons provide a visual representation of each frameset as applied to the current document.

      • PAGE 271

        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. Note: Placing the insertion point in a document that’s displayed in a frame is not the same as selecting a frame. There are various operations (such as setting frame properties) for which you must select a frame. Select a frame or frameset in the Frames panel 1.

      • PAGE 272

        3. Select a document to open in the frame, and click OK (Windows) or Choose (Macintosh). 4. (Optional) To make this document the default document to display in the frame when the frameset is opened in a browser, save the frameset. To the top Save frame and frameset files Before you can preview a frameset in a browser, you must save the frameset file and all of the documents that will display in the frames.

      • PAGE 273

        frameset’s Borders property is set to No and the frames sharing the border have Borders set to Default. Border Color Sets a border color for all of the frame’s borders. This color applies to all borders that touch the frame, and overrides the specified border color of the frameset. Margin Width Sets the width in pixels of the left and right margins (the space between the frame borders and the content).

      • PAGE 274

        3. To specify how much space the browser allocates to each frame, select from the following choices in the Units menu: Pixels Sets the size of the selected column or row to an absolute value. Choose this option for a frame that should always be the same size, such as a navigation bar. Frames with sizes specified in pixels are allocated space before frames with sizes specified as percent or relative.

      • PAGE 275

        To the top Using JavaScript behaviors with frames There are several JavaScript behaviors and navigation-related commands that are particularly appropriate for use with frames: Set Text Of Frame Replaces the content and formatting of a given frame with the content you specify. The content can include any valid HTML. Use this action to dynamically display information in a frame. Go To URL Opens a new page in the current window or in the specified frame.

      • PAGE 276

        Using visual aids for layout Set rulers Set layout guides Using guides with templates Use the layout grid Use a tracing image Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article. To the top Set rulers Rulers help you measure, organize, and plan your layout.

      • PAGE 277

        Emulate the fold (visible area) of a web browser Select View > Guides, and then select a preset browser size from the menu. Remove a guide Drag the guide off the document. Change guide settings Select View > Guides > Edit Guides, set the following options, and click OK. Guide color Specifies the color of the guide lines. Click the color swatch and select a color from the color picker, or type a hexadecimal number in the text box.

      • PAGE 278

        Place a tracing image in the Document window 1. Do one of the following: Select View > Tracing Image > Load. Select Modify > Page Properties, then click Browse (next to the Tracing Image text box). 2. In the Select Image Source dialog box, select an image file and click OK. 3. In the Page Properties dialog box, specify the transparency for the image by dragging the Image Transparency slider, then click OK.

      • PAGE 279

        Working with Spry widgets (general instructions) About Spry widgets Spry widgets resources and tutorials Insert a Spry widget Select a Spry widget Edit a Spry widget Style a Spry widget Get more widgets Change the default Spry assets folder Note: Spry widgets are replaced with jQuery widgets in Dreamweaver CC and later. While you can still modify existing spry widgets on your page, you cannot add new spry widgets.

      • PAGE 280

        To the top Style a Spry widget Locate the appropriate CSS file for the widget in the SpryAssets folder of your site, and edit the CSS according to your preferences. For details on styling specific widgets, see the appropriate customization sections for each widget. You can also format a Spry widget by editing styles in the CSS panel, just as you would for any other styled element on the page.

      • PAGE 281

        Working with div tags Insert and edit div tags CSS layout blocks Working with AP elements Note: In Dreamweaver CC and later, CSS Styles panel is replaced with CSS Designer. For more information, see CSS Designer. (Creative Cloud users only): Seven new semantic tags are available when you select Insert > Layout. The new tags are : Article, Aside, HGroup, Navigation, Section, Header, and Footer. For more information, see Insert HTML5 semantic elements from the Insert panel.

      • PAGE 282

        Click the border of the div tag. Look for the highlighting to see the border. Click inside the div tag, and press Control+A (Windows) or Command+A (Macintosh) twice. Click inside the div tag, then select the div tag from the tag selector at the bottom of the Document window. 2. Select Window > CSS Styles to open the CSS Styles panel if it is not already open. Rules applied to the div tag appear in the panel. 3. Make edits as necessary.

      • PAGE 283

        View CSS layout block outlines Select View > Visual Aids > CSS Layout Outlines. View CSS layout block backgrounds Select View > Visual Aids > CSS Layout Backgrounds. View CSS layout block box models Select View > Visual Aids > CSS Layout Box Model. You can also access CSS layout block visual aid options by clicking the Visual Aids button on the Document toolbar.

      • PAGE 284

        You can change properties for AP Divs (or any AP element) on your page, including x and y coordinates, z-index (also called the stacking order), and visibility. Insert an AP Div Dreamweaver lets you easily create and position AP Divs on your page. You can also create nested AP Divs.

      • PAGE 285

        The graphical depiction for either set of AP Divs might look as follows: In the first set of div tags, one div is sitting on top of the other on the page. In the second set, the apDiv4 div is actually inside of the apDiv3 div. (You can change AP Div stacking order in the AP Elements panel.) Nesting is often used to group AP Divs together. A nested AP Div moves with its parent AP Div and can be set to inherit visibility from its parent.

      • PAGE 286

        3. Set any of the following options: CSS-P Element Specifies an ID for the selected AP element. The ID identifies the AP element in the AP Elements panel and in JavaScript code. Use only standard alphanumeric characters; do not use special characters such as spaces, hyphens, slashes, or periods. Every AP element must have its own unique ID. Note: The CSS-P Property inspector presents the same options for relatively-positioned elements.

      • PAGE 287

        Hold down Shift while selecting AP elements. View and set properties for multiple AP elements 1. Select multiple AP elements. 2. In the Property inspector (Window > Properties), click the expander arrow in the lower-right corner, if it isn’t already expanded, to see all properties. 3.

      • PAGE 288

        Click inside an AP element and press Control+A (Windows) or Command+A (Macintosh) to select the contents of the AP element. Press Control+A or Command+A again to select the AP element. Click inside an AP element and select its tag in the tag selector. Select multiple AP elements Do one of the following: In the AP Elements panel (Window > AP Elements), Shift-click two or more AP element names. In the Document window, Shift-click inside or on the border of two or more AP elements.

      • PAGE 289

        1. In Design view, select an AP element. 2. Do one of the following to resize the AP element: To resize by dragging, drag any of the AP element’s resize handles. To resize one pixel at a time, hold down Control (Windows) or Option (Macintosh) while pressing an arrow key. The arrow keys move the right and bottom borders of the AP element; you can’t resize using the top and left borders with this technique.

      • PAGE 290

        Convert AP elements to a table 1. Select Modify > Convert > AP Divs To Table. 2. Specify any of the following options and click OK: Most Accurate Creates a cell for every AP element, plus any additional cells that are necessary to preserve the space between AP elements. Smallest: Collapse Empty Cells Specifies that the AP elements’ edges should be aligned if they are positioned within the specified number of pixels.

      • PAGE 291

        Working with head content for pages View and edit head content Set the meta properties for the page Set the page title Specify keywords for the page Specify descriptions for the page Set the refresh properties of the page Set the base URL properties of the page Set the link properties of the page Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later.

      • PAGE 292

        Content. To the top Set the page title There is only one title property: the title of the page. The title appears in the title bar of the Document window in Dreamweaver as well as in the browser’s title bar when you view the page in most browsers. The title also appears in the Document window toolbar. Specify the title in the Document window Enter the title in the Title text box in the Document window toolbar. Specify the title in the head content 1. Select View > Head Content. 2.

      • PAGE 293

        Edit a Refresh meta tag 1. Select View > Head Content. 2. Select the Refresh marker that appears at the top of the Document window. 3. In the Property inspector, set the Refresh meta tag properties. Set the Refresh meta tag properties Specify the Refresh meta tag properties as follows: Delay The time in seconds to wait before the browser refreshes the page. To make the browser refresh the page immediately after it finishes loading, enter 0 in this box.

      • PAGE 294

        section of the HTML 4.0 specification on the World Wide Web Consortium website at www.w3.org/TR/REC-html40/present/styles.html#styleexternal. Rel Specifies the relationship between the current document and the document in the Href box. Possible values include Alternate, Stylesheet, Start, Next, Prev, Contents, Index, Glossary, Copyright, Chapter, Section, Subsection, Appendix, Help, and Bookmark. To specify more than one relationship, separate values with a space.

      • PAGE 295

        Working with the Spry Accordion widget About the Accordion widget Insert and edit the Accordion widget Customize the Accordion widget Note: Spry widgets are replaced with jQuery widgets in Dreamweaver CC and later. While you can still modify existing spry widgets on your page, you cannot add new spry widgets. To the top About the Accordion widget An Accordion widget is a set of collapsible panels that can store a large amount of content in a compact space.

      • PAGE 296

        Open a panel for editing Do one of the following: Move the mouse pointer over the tab of the panel to open it in Design view, and click the eye icon that appears at the right of the tab. Select an Accordion widget in the Document window, and then click the name of the panel to edit it in the Panels menu of the Property inspector (Window > Properties). Change the order of panels 1. Select an Accordion widget in the Document window. 2.

      • PAGE 297

        Background color of panel tabs on hover Background color of open panel tab on hover .AccordionPanelTabHover .AccordionPanelOpen .AccordionPanelTabHover color: #555555; (This is the default value.) color: #555555; (This is the default value.) Constrain the width of an accordion By default, the Accordion widget expands to fill available space. You can constrain the width of an Accordion widget, however, by setting a width property for the accordion container. 1. Locate the .

      • PAGE 298

        Working with the Spry Collapsible Panel widget About the Collapsible Panel widget Insert and edit the Collapsible Panel widget Customize the Collapsible Panel widget Note: Spry widgets are replaced with jQuery widgets in Dreamweaver CC and later. While you can still modify existing spry widgets on your page, you cannot add new spry widgets. To the top About the Collapsible Panel widget A Collapsible Panel widget is a panel that can store content in a compact space.

      • PAGE 299

        Customize the Collapsible Panel widget Although the Property inspector enables you to make simple edits to a Collapsible Panel widget, it does not support customized styling tasks. You can alter the CSS for the Collapsible Panel widget and create a collapsible panel that is styled to your liking. For a quick reference on changing the colors of the Collapsible Panel widget, see David Powers’s Quick guide to styling Spry tabbed panels, accordions, and collapsible panels.

      • PAGE 300

        2. Add a width property and value to the rule, for example width: 300px;.

      • PAGE 301

        Working with the Spry Tabbed Panels widget About the Tabbed Panels widget Insert and edit the Tabbed Panels widget Customize the Tabbed Panels widget Note: Spry widgets are replaced with jQuery widgets in Dreamweaver CC and later. While you can still modify existing spry widgets on your page, you cannot add new spry widgets. To the top About the Tabbed Panels widget A Tabbed Panels widget is a set of panels that can store content in a compact space.

      • PAGE 302

        inspector (Window > Properties). Change the order of panels 1. Select a Tabbed Panels widget in the Document window. 2. In the Panels menu of the Property inspector (Window > Properties), select the name of the panel you want to move. 3. Click the up or down arrows to move the panel up or down. Set the default open panel You can set which panel of the Tabbed Panels widget opens by default when the page opens in a browser. 1. Select a Tabbed Panels widget in the Document window. 2.

      • PAGE 303

        Background color of selected tab Background color of panel tabs when the mouse pointer moves over them .TabbedPanelsTabSelected background-color: #EEE; (This is the default value.) .TabbedPanelsTabHover background-color: #CCC; (This is the default value.) Constrain the width of tabbed panels By default, the Tabbed Panels widget expands to fill available space. You can constrain the width of a Tabbed Panels widget, however, by setting a width property for the accordion container. 1. Locate the .

      • PAGE 304

        Working with the Spry Tooltip widget About the Tooltip widget Insert the Tooltip widget Edit Tooltip widget options Note: Spry widgets are replaced with jQuery widgets in Dreamweaver CC and later. While you can still modify existing spry widgets on your page, you cannot add new spry widgets. To the top About the Tooltip widget The Spry tooltip widget displays additional information when a user hovers over a particular element on a web page. The additional content disappears when the user stops hovering.

      • PAGE 305

        3. Set options in the Tooltip widget Property inspector as desired. Name The name of the tooltip container. The container holds the content of the tooltip. By default Dreamweaver uses a div tag as the container. Trigger The element on the page that activates the tooltip. By default Dreamweaver inserts a placeholder sentence, surrounded by span tags, as the trigger, but you can select any element on the page that has a unique ID.

      • PAGE 306

        Working with the Spry Validation Checkbox widget About the Validation Checkbox widget Insert and edit the Validation Checkbox widget Customize Validation Checkbox widget error messages Note: Spry widgets are replaced with jQuery widgets in Dreamweaver CC and later. While you can still modify existing spry widgets on your page, you cannot add new spry widgets.

      • PAGE 307

        Specify when validation occurs You can set the point at which validation occurs—when the user clicks outside the widget, as the user makes selections, or when the user tries to submit the form. 1. Select a Validation Checkbox widget in the Document window. 2. In the Property inspector (Window > Properties), select the option that indicates when you want validation to occur. You can select all of the options or Submit only. Blur Validates whenever the user clicks outside the check box.

      • PAGE 308

        Working with the Spry Validation Confirm widget About the Validation Confirm widget Insert and edit the Validation Confirm widget Customize the Confirm widget Note: Spry widgets are replaced with jQuery widgets in Dreamweaver CC and later. While you can still modify existing spry widgets on your page, you cannot add new spry widgets.

      • PAGE 309

        1. Select a Validation Confirm widget in the Document window by clicking its blue tab. 2. In the Property inspector (Window > Properties), select the text field you want to validate against by selecting a text field from the Validate Against pop-up menu. All text fields with unique IDs assigned to them appear as options in the pop-up menu. Display widget states in Design view 1. Select a Validation Confirm widget in the Document window by clicking its blue tab. 2.

      • PAGE 310

        Color to change Background color of widget in valid state Background color of widget in invalid state Background color of widget in focus Relevant CSS rule Relevant property to change .confirmValidState input, input.confirmValidState input.confirmRequiredState, .confirmRequiredState input, input.confirmInvalidState, .confirmInvalidState input .confirmFocusState input, input.

      • PAGE 311

        Working with the Spry Validation Password widget About the Validation Password widget Insert and edit the Validation Password widget Customize the Validation Password widget Note: Spry widgets are replaced with jQuery widgets in Dreamweaver CC and later. While you can still modify existing spry widgets on your page, you cannot add new spry widgets.

      • PAGE 312

        2. In the Property inspector (Window > Properties), select or deselect the Required option, depending on your preference. Display widget states in Design view 1. Select a Validation Password widget in the Document window by clicking its blue tab. 2. In the Property inspector (Window > Properties), select the state you want to see from the Preview States pop-up menu. For example, if you want to see the widget in its valid state, select Valid.

      • PAGE 313

        Style Validation Password widget error message text By default, error messages for the Validation Password widget appear in red with a 1-pixel solid border surrounding the text. To change the text styling of Validation Password widget error messages, use the following table to locate the appropriate CSS rule, and then change the default properties, or add your own text-styling properties and values. Text to change Error message text Relevant CSS rule Relevant properties to change .passwordRequiredState .

      • PAGE 314

        Working with the Spry Validation Radio Group widget About the Validation Radio Group widget Insert and edit the Validation Radio Group widget Customize the Radio Group widget Note: Spry widgets are replaced with jQuery widgets in Dreamweaver CC and later. While you can still modify existing spry widgets on your page, you cannot add new spry widgets. To the top About the Validation Radio Group widget The Validation Radio Group widget is a group of radio buttons with validation support for the selection.

      • PAGE 315

        6. (Optional) Click a radio button or its value to select a specific row, and then click the up and down arrows to move the row up or down. 7. Select a layout type for the radio group. Line breaks Places each radio button on a separate line using line breaks (br tags). Table Places each radio button on a separate line using individual table rows (tr tags). 8. Click OK. Note: You can also insert a Radio Group widget by using the Spry category in the Insert panel.

      • PAGE 316

        especially if you use the panel’s Current mode. Style a Validation Radio Group widget (general instructions) 1. Open the SpryValidationRadio.css file. 2. Locate the CSS rule for the part of the widget to change. For example, to change the background color of the Radio Group widget’s required state, edit the radioRequiredState rule in the SpryValidationRadio.css file. 3. Make your changes to the CSS rule and save the file. The SpryValidationRadio.

      • PAGE 317

        Page content and assets 310

      • PAGE 318

        Set text properties in the Property inspector About formatting text (CSS versus HTML) Edit CSS rules in the Property inspector Set HTML formatting in the Property inspector Rename a class from the HTML Property inspector You can use the text Property inspector to apply HTML formatting or Cascading Style Sheet (CSS) formatting. When you apply HTML formatting, Dreamweaver adds properties to the HTML code in the body of your page.

      • PAGE 319

        3. Make changes to the rule by using the various options in the CSS Property inspector. Targeted Rule Is the rule you are editing in the CSS Property inspector. When you have an existing style applied to text, the rule affecting the text’s format appears when you click inside the text on the page. You can also use the Targeted Rule pop-up menu to create new CSS rules, new in-line styles, or apply existing classes to selected text.

      • PAGE 320

        Select None to remove the currently selected style. Select Rename to rename the style. Select Attach Style Sheet to open a dialog box that lets you attach an external style sheet to the page. Bold Applies either or to the selected text according to the style preference set in the General category of the Preferences dialog box. Italic Applies either or to the selected text according to the style preference set in the General category of the Preferences dialog box.

      • PAGE 321

        Set page properties Set CSS page font, background color, and background image properties Set HTML 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 322

        Left Margin and Right Margin Specify the size of the left and right page margins. Top Margin and Bottom Margin Specify the size of the top and bottom page margins. To the top Set HTML page properties Setting properties in this category of the Page Properties dialog box results in HTML rather than CSS formatting of your page. 1. Select Modify > Page Properties, or click the Page Properties button in the text Property inspector. 2. Select the Appearance (HTML) category and set the options.

      • PAGE 323

        Working with Photoshop and Dreamweaver About Photoshop integration About Smart Objects and Photoshop-Dreamweaver workflows Create a Smart Object Update a Smart Object Update multiple Smart Objects Resize a Smart Object Edit a Smart Object’s original Photoshop file Smart Object states Copy and paste a selection from Photoshop Edit pasted images Setting Image Optimization dialog box options To the top About Photoshop integration You can insert Photoshop image files (PSD format) into web pages in Dreamweaver

      • PAGE 324

        Smart Object When the web image (that is, the image on the Dreamweaver page) is out of sync with the original Photoshop file, Dreamweaver detects that the original file has been updated, and displays one of the Smart Object icon’s arrows in red. When you select the web image in Design view and click the Update from Original button in the Property inspector, the image updates automatically, reflecting any changes that you made to the original Photoshop file.

      • PAGE 325

        1. In Dreamweaver (Design or Code view), place the insertion point on your page where you want the image inserted. 2. Select Insert > Image. You can also drag the PSD file to the page from the Files panel if you’re storing your Photoshop files in your website. If you do so, you’ll skip the next step. 3. Locate your Photoshop PSD image file in the Select Image Source dialog box by clicking the Browse button and navigating to it. 4.

      • PAGE 326

        Note: You do not need Photoshop installed to make the update from Dreamweaver. To the top Resize a Smart Object You can resize a Smart Object in the Document window just as you would any other image. 1. Select the Smart Object in the Document window and drag the resize handles to resize the image. You can maintain the width and height proportions by holding down the Shift key as you drag. 2. Click the Update from Original button in the Property inspector.

      • PAGE 327

        Dimensions of web image are different from selected HTML width and height The width and height attributes in the HTML code are different from the width and height dimensions of the web image that Dreamweaver created upon insertion. If the web image’s dimensions are smaller than the selected HTML width and height values, the web image can appear pixelated. Use the Update From Original button in the Property inspector to re-create the web image from the original Photoshop file.

      • PAGE 328

        about the image, such as the location of the original PSD source file, is saved in a Design Note, regardless of whether you have enabled Design Notes for your site. The Design Note allows you to return to edit the original Photoshop file from Dreamweaver. For a tutorial on copying and pasting between different applications, including Dreamweaver and Photoshop, see www.adobe.com/go/vid0193.

      • PAGE 329

        Creating and opening documents The user interface in Dreamweaver CC and later has been simplified. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article.

      • PAGE 330

        GIF Graphics Interchange Format files have a .gif extension. GIF format is a popular web graphic format for cartoons, logos, graphics with transparent areas, and animations. GIFs contain a maximum of 256 colors. JPEG Joint Photographic Experts Group files (named after the organization that created the format) have a .jpg extension, and are usually photographs or high-color images.

      • PAGE 331

        Add To Head Adds CSS for the layout to the head of the page you’re creating. Create New File Adds CSS for the layout to a new external CSS file and attaches the new style sheet to the page you’re creating. Link To Existing File Lets you specify an existing CSS file that already contains the CSS rules needed for the layout. To do this, click the Attach Style Sheet icon above the Attach CSS file pane and select an existing CSS style sheet.

      • PAGE 332

        2. In the New Document dialog box, select the Blank Template category. 3. Select the kind of page you want to create from the Template Type column. For example, select HTML template to create a plain HTML template, select ColdFusion template to create a ColdFusion template, and so on. 4. If you want your new page to contain a CSS layout, select a predesigned CSS layout from the Layout column; otherwise, select None.

      • PAGE 333

        10. Click Get More Content if you want to open Dreamweaver Exchange where you can download more page design content. 11. Click the Create button. 12. Save the new document (File > Save). If you haven’t added editable regions to the template yet, a dialog box appears telling you that there are no editable regions in the document. Click OK to close the dialog box. 13. In the Save As dialog box, select a site in which to save the template. 14. In the File Name box, type a name for the new template.

      • PAGE 334

        2. In the Assets panel, click the Templates icon on the left to view the list of templates in your current site. If you just created the template you want to apply, you might need to click the Refresh button to see it. 3. Right-click (Windows) or Control-click (Macintosh) the template you want to apply, then select New From Template. The document opens in the Document window. 4. Save the document.

      • PAGE 335

        1. Select File > New. 2. In the New Document dialog box, select the Other category. Note: Other category is removed in Dreamweaver CC and later. 3. Select the kind of document you want to create from the Page Type column and click the Create button. 4. Save the document (File > Save). To the top Save and revert documents You can save a document using its current name and location, or save a copy of a document using a different name and location.

      • PAGE 336

        1. Select File > Revert. A dialog box asks if you want to discard your changes, and revert to the previously saved version. 2. Click Yes to revert to the previous version; click No to keep your changes. Note: If you save a document, and then exit Dreamweaver, you cannot revert to the previous version of the document when you restart Dreamweaver. To the top Set default document type and encoding You can define which document type is used as a default document for a site.

      • PAGE 337

        In Unicode, there are characters that are visually similar but can be stored within the document in different ways. For example, “ë” (e-umlaut) can be represented as a single character, “e-umlaut,” or as two characters, “regular Latin e” + “combining umlaut.” A Unicode combining character is one that gets used with the previous character, so the umlaut would appear above the “Latin e.” Both forms result in the same visual typography, but what is saved in the file is different for each form.

      • PAGE 338

        1. Select File > Open. You can also use the Files panel to open files. 2. Navigate to and select the file you want to open. Note: If you haven’t already done so, it’s a good idea to organize files you plan to open and edit in a Dreamweaver site, instead of opening them from another location. 3. Click Open. The document opens in the Document window. JavaScript, text, and CSS Style Sheets open in Code view by default.

      • PAGE 339

        1. Place the insertion point on a line or in an area that you know is affected by a related file. 2. Wait for the Code Navigator indicator to appear, and then click it to open the Code Navigator. 3. Hover over the items in the Code Navigator to see more information about them. For example, if you want to change a particular CSS color property, but don’t know which rule it resides in, you can find the property by hovering over the available rules in the Code Navigator. 4.

      • PAGE 340

        Joomla!. One common approach for testing pages is to set up a localhost PHP application server, and test the pages locally. Before you test pages, you’ll need to perform the following steps: Set up a Dreamweaver site and make sure that you have filled out the Web URL text box the Site Setup dialog box. Set up a PHP application server. Note: The server must be running before you attempt to work with Dynamically-Related Files in Dreamweaver. Install WordPress, Drupal, or Joomla! on the application server.

      • PAGE 341

        Because Related Files and Dynamically-Related Files can often be numerous, Dreamweaver lets you filter Related Files so that you can precisely locate the files you want to work with. 1. Open a page that has Related Files associated with it. 2. Discover Dynamically-Related Files if necessary. 3. Click the Filter Related Files icon at the right side of the Related Files toolbar. 4. Select the types of files you want to see in the Related Files toolbar. By default, Dreamweaver selects all Related Files.

      • PAGE 342

        Clean Up CSS Removes all Word-specific CSS, including inline CSS styles when possible (where the parent style has the same style properties), style attributes beginning with “mso,” non-CSS style declarations, CSS style attributes from tables, and all unused style definitions from the head. You can further customize this option using the Detailed tab. Clean Up Tags Removes HTML tags, converting the default body text to size 2 HTML text.

      • PAGE 343

        Arabic and Hebrew text Bi-directional text flow Tag editor Text direction and Unicode-bidi in CSS Rules Table properties Div properties New and improved features for working in Arabic and Hebrew are available in the Middle East and North African edition of this software. To the top Bi-directional text flow Text in Middle Eastern languages is mostly written from right to left (RTL).

      • PAGE 344

        Tag Editor To the top Text direction and Unicode-bidi in CSS Rules You can specify the Text direction as a CSS rule. In the CSS Rule definition dialog box, specify Direction and Unicode-bidi options. Language options in CSS Rules To the top Table properties Right-to-left tables are right aligned, and columns are ordered from right to left. The resizing handles appear on the left side. On tabbing, the cursor moves in RTL direction.. Specify the table direction using the Properties panel.

      • PAGE 345

        Div direction Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

      • PAGE 346

        About assets and libraries About assets About library items Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article. To the top About assets You can use Adobe® Dreamweaver® to keep track of and preview assets stored in your site, such as images, movies, colors, scripts, and links.

      • PAGE 347

        About the Spry framework Note: Spry widgets are replaced with jQuery widgets in Dreamweaver CC and later. While you can still modify existing spry widgets on your page, you cannot add new spry widgets. The Spry framework is a JavaScript library that provides web designers with the ability to build web pages that offer richer experiences to their site visitors.

      • PAGE 348

        Adding Sound Audio file formats Link to an audio file Embed a sound file Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article. To the top Audio file formats You can add sound to a web page. There are several different types of sound files and formats, including .wav, .midi, and .mp3.

      • PAGE 349

        listen to the audio content. 1. In Design view, place the insertion point where you want to embed the file and do one of the following: In the Common category of the Insert panel, click the Media button and select the Plugin icon from the pop-up menu. Select Insert > Media > Plugin. 2. Browse for the audio file and click OK. 3. Enter the width and height by entering the values in the appropriate text boxes in the Property inspector or by resizing the plug-in placeholder in the Document window.

      • PAGE 350

        Adding media objects Insert and edit media objects Start an external editor for media files Specify the editor to start from Dreamweaver Use Design Notes with media objects Insert Shockwave movies Add video (non-FLV) Insert plug-in content Troubleshooting plug-ins Insert an ActiveX control Insert a Java applet Using behaviors to control media Use parameters to control media objects Note: The user interface has been simplified in Dreamweaver CC and later.

      • PAGE 351

        To the top Start an external editor for media files You can start an external editor from Dreamweaver to edit most media files. You can also specify the editor you want Dreamweaver to start to edit the file. 1. Make sure the media file type is associated to an editor on your system. To find out what editor is associated with the file type, select Edit > Preferences in Dreamweaver and select File Types/Editors from the Category list.

      • PAGE 352

        To the top Insert Shockwave movies You can use Dreamweaver to insert Shockwave movies into your documents. Adobe® Shockwave®, a standard for interactive multimedia on the web, is a compressed format that allows media files created in Adobe® Director® to be downloaded quickly and played by most popular browsers. 1.

      • PAGE 353

        such as width and height in this dialog box. Play plug-in content in the Document window 1. Insert one or more media elements using one of the methods described in the previous section. 2. Do one of the following: Select one of the media elements you have inserted, and select View > Plugins > Play or click the Play button in the Property inspector. Select View > Plugins > Play All to play all of the media elements on the selected page that rely on plug-ins.

      • PAGE 354

        installed in the visitor’s system. If you don’t specify a Base parameter and if your visitor doesn’t already have the relevant ActiveX control installed, the browser can’t display the ActiveX object. Alt Img Specifies an image to be displayed if the browser doesn’t support the object tag. This option is available only when the Embed option is deselected. Data Specifies a data file for the ActiveX control to load. Many ActiveX controls, such as Shockwave and RealPlayer, do not use this parameter.

      • PAGE 355

        Remove a parameter Select a parameter and press the minus (–) button. Reorder parameters Select a parameter, and use the up and down arrow buttons.

      • PAGE 356

        Adding video Embed videos in web pages (HTML5) Inserting FLV files Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article. To the top Embed videos in web pages (HTML5) HTML5 supports video and audio tags that allow users to play video and audio files in a browser, without an external plug-in or player.

      • PAGE 357

        For more information about working with video, visit the Video Technology Center at www.adobe.com/go/flv_devcenter. Insert an FLV file 1. Select Insert > Media > FLV. 2. In the Insert FLV dialog box, select Progressive Download or Streaming Video from the Video Type pop-up menu. 3. Complete the rest of the dialog box options and click OK. Note: Microsoft Internet Information Server (IIS) does not process nested object tags.

      • PAGE 358

        made with the server.) You might want to set a buffer time if you are delivering video that has a higher bit rate than the site visitor’s connection speed, or when Internet traffic might cause bandwidth or connectivity problems. For example, if you want to send 15 seconds of video to the web page before the web page starts to play the video, set the buffer time to 15. 3. Click OK to close the dialog box and add the FLV file to your web page.

      • PAGE 359

        development). If you are building websites that use only HTML, and haven't defined a testing server, pressing F12 (Windows) Opt+F12 (Macintosh) produces a jumble of skin controls onscreen. The workaround is either to define the testing server and use the testing server to preview your page, or upload your files to a remote server and view them there. Note: It’s possible that security settings may also be responsible for an inability to preview local FLV content, but Adobe has not been able to confirm this.

      • PAGE 360

        Adding web widgets Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article. A web widget is a web page component comprised of HTML, CSS, and JavaScript. Examples of web widgets include accordions, tabbed panels, and calendars.

      • PAGE 361

        Automating tasks Task automation Use the History panel Repeat steps Apply steps in the History panel to objects Copy and paste steps between documents Create and use commands from history steps Record and save commands Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article.

      • PAGE 362

        Undo multiple steps at once Drag the slider to point to any step, or 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. Note: As with undoing a single step, if you undo a series of steps and then do something new in the document, you can no longer redo the undone steps; they disappear from the History panel.

      • PAGE 363

        1. Select the object. 2. Select the relevant steps in the History panel, and click Replay. Apply steps to multiple objects 1. 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. 2. Open the Property inspector (Window > Properties), if it isn’t already open. 3. Select the first image. 4.

      • PAGE 364

        If you pasted steps into a text editor or into Code view or the Code inspector, they appear as JavaScript code. This can be useful for learning to write your own scripts. To the top Create and use commands from history steps Save a set of history steps as a named command, which then becomes available in the Commands menu. Create and save a new command if you might use a set of steps again, especially the next time you start Dreamweaver. Create a command 1.

      • PAGE 365

        Create a link to a Word or Excel document Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article. You can insert a link to a Microsoft Word or Excel document in an existing page. 1. Open the page where you want the link to appear. 2. Drag the file from its current location to your Dreamweaver page, positioning the link wherever you want. 3.

      • PAGE 366

        Creating and managing a list of favorite assets Managing favorite assets Add or remove favorite assets Create a nickname for a favorite asset Group assets in a Favorites folder Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article.

      • PAGE 367

        The assets are removed from the Favorites list, but not from the Site list. If you remove a Favorites folder, the folder and all its contents are removed. To the top Create a nickname for a favorite asset You can give nicknames (for instance, PageBackgroundColor rather than #999900) to assets only in the Favorites list. The Site list retains their real filenames (or values, in the case of colors and URLs). 1. In the Assets panel (Window > Assets), select the category that contains your asset. 2.

      • PAGE 368

        Displaying data with Spry About Spry data sets Create a Spry data set Create a Spry region Create a Spry repeat region Create a Spry repeat list region Note: Spry widgets are replaced with jQuery widgets in Dreamweaver CC and later. While you can still modify existing spry widgets on your page, you cannot add new spry widgets. To the top About Spry data sets A Spry data set is fundamentally a JavaScript object that holds a collection of data that you specify.

      • PAGE 369

        Selecting the element for the HTML data set data container. For lengthy files, you can click the Expand/Collapse arrow at the bottom of the Data Selection window to see more of the data. Once you select the container element for the data set, Dreamweaver displays a preview of the data set in the Data Preview window. (Optional) Select Advanced Data Selection if you want to specify CSS data selectors for the data set. For example, if you specified .product in the Row Selectors text box, and .

      • PAGE 370

        6. Click Done. Dreamweaver creates the data set and, if you selected a layout option, displays the layout and data placeholders on your page. If you look in Code view, you’ll see that Dreamweaver has added references in the header to the SpryData.js file and the SpryHTMLDataSet.js file. These files are important Spry assets that work in conjunction with the page. Be sure not to remove this code from your page or the data set will not function.

      • PAGE 371

        (Optional) Specify how you want to sort the data by selecting the column you want to sort by from the Sort Column pop-up menu. Once you’ve selected the column, you can specify whether to sort it in ascending or descending order. (Optional) Select Filter Out Duplicate rows to exclude duplicate rows of data from the data set. (Optional) Select Disable Data Caching if you always want to have access to the most recent data in the data set.

      • PAGE 372

        Master/Detail layout Select this option if you want to display your data using a master/detail layout. Master/detail layouts let users click an item in the master (left) region that updates the information in the detail (right) region. Typically the master region contains a long list of names, for example a list of available products. When the user clicks one of the product names, the detail region displays much more detailed information about the selection.

      • PAGE 373

        Do Not Insert HTML Select this option if you want to create a data set, but do not want Dreamweaver to insert an HTML layout for the data set. The data set becomes available from the Bindings panel (Window > Bindings), and you can manually drag pieces of the data set to the page. Even if you create a data set without inserting a layout, you can still insert one of the available HTML layouts at any time.

      • PAGE 374

        add them automatically when you insert a table or repeat list, or you can wrap them around existing tables or repeat list objects. If you are adding a detail region, typically you add the master table object first and select the Update Detail Regions option (see Dynamic Table layout). The only value that is different and specific for a detail region is the Type option in the Insert Spry Region dialog box. 1. Select Insert > Spry > Spry Region.

      • PAGE 375

        child level. For instance, if you have a

          list, the data is checked at the
        • level. If you choose the Repeat option, the data is checked at the
            level. The Repeat Children option may be especially useful if you use conditional expressions in your code. 4. Choose your Spry data set from the menu. 5. If you already have text or elements selected, you can wrap or replace them. 6. Click OK to display a repeat region on your page.

          • PAGE 376

            Legal Notices | Online Privacy Policy 369

          • PAGE 377

            Editing content in a template-based document About editing content in template-based documents Modify template properties Add, delete, and change the order of a repeating region entry Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article.

          • PAGE 378

            a copy of the entire repeating region is added. To update the content in the repeating regions, the original template must include an editable region in the repeating region. Add, delete, or change the order of a repeating region 1. Open the template-based document. 2. Place the insertion point in the repeating region to select it. 3. Do one of the following: Click the Plus (+) button to add a repeating region entry below the currently selected entry.

          • PAGE 379

            Import Microsoft Office documents (Windows only) Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article. You can insert the full contents of a Microsoft Word or Excel document in a new or existing web page. When you import a Word or Excel document, Dreamweaver receives the converted HTML and inserts it into your web page.

          • PAGE 380

            Import tabular data Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article. You can import tabular data into your document by first saving the files (such as Microsoft Excel files or database files) as delimited text files. You can import and format tabular data and import text from Microsoft Word HTML documents.

          • PAGE 381

            Importing custom tags into Dreamweaver About importing custom tags into Dreamweaver Import tags from XML files Import custom ASP.NET tags Import JSP tags from a file or server (web.xml) Import JRun tags Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article.

          • PAGE 382

            7. Click OK. To the top Import JRun tags If you use Adobe® JRun™, you can import your JRun tags into Dreamweaver. 1. Open a JSP page in Dreamweaver. 2. Open the Tag Library editor (Edit > Tag Libraries). 3. Click the Plus (+) button and select JSP > Import JRun Server Tags From Folder. 4. Enter a folder name for the folder that contains the JRun tags. 5. Enter a URI to identify the tag library.

          • PAGE 383

            Insert dates Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article. 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.

          • PAGE 384

            Inserting SWF files About FLA, SWF, and FLV file types Insert and preview SWF files Insert FlashPaper documents Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article.

          • PAGE 385

            This procedure also applies to FLV files. Note: If a user does not have the required version but does have Flash Player 6.0 r65 or later, the browser displays a Flash Player express installer. If the user declines the express install, the page then displays the alternative content. 1. In the Design view of the Document window, select the SWF file or FLV file. 2. Click the eye icon in the tab of the SWF file or FLV file. You can also press Control + ] to switch to alternative content view.

          • PAGE 386

            Managing tag libraries About Dreamweaver tag libraries Open and close the Tag Library editor Add libraries, tags, and attributes Edit libraries, tags, and attributes Delete libraries, tags, and attributes Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article.

          • PAGE 387

            To the top Edit libraries, tags, and attributes Use the Tag Library editor to set properties for a tag library and edit tags and attributes in a library. Set properties for a tag library 1. In the Tag Library editor (Edit > Tag Libraries), select a tag library (not a tag) in the Tags list. Note: The properties for tag libraries appear only when a tag library is selected.

          • PAGE 388

            Modify font combinations Modify font combinations Add a new combination to the font list Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article. Use the Edit Font List command to set the font combinations that appear in the Property inspector and the Format > Font submenu. Font combinations determine how a browser displays text in your web page.

          • PAGE 389

            Set title and encoding properties for a page Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article. The Title/Encoding Page Properties options let you specify the document encoding type that is specific to the language used to author your web pages as well as specify which Unicode Normalization Form to use with that encoding type. 1.

          • PAGE 390

            Spell check a web page Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article. Use the Check Spelling command to check the spelling in the current document. The document must be a web page (for example, an HTML, ColdFusion, or PHP page). The Check Spelling command does not work on text files or XML files.

          • PAGE 391

            Use HTML Formatting Format paragraphs Change the color of text Align text Indent text Apply font styles Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article. While CSS is the preferred method for formatting text, Dreamweaver still lets you format text with HTML.

          • PAGE 392

            1. Place the insertion point in the paragraph you want to indent. 2. Select Format > Indent or Outdent, or select List > Indent or Outdent from the context menu. Note: You can apply multiple indents to a paragraph. Each time you select this command, the text indents further from both sides of the document. To the top Apply font styles You can use HTML to apply text formatting to one letter, or to entire paragraphs and blocks of text in a site.

          • PAGE 393

            Use horizontal rules Create a horizontal rule Modify a horizontal rule Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article. Horizontal rules (lines) are useful for organizing information. On a page, you can visually separate text and objects with one or more rules. To the top Create a horizontal rule 1.

          • PAGE 394

            Use the Insert panel Hide or show the Insert panel Show the buttons in a particular category Display the pop-up menu for a button Insert an object Bypass the object-insertion dialog box and insert an empty placeholder object Modify preferences for the Insert panel Add, delete, or manage items in the Favorites category of the Insert panel Insert objects using buttons in the Favorites category Display the Insert panel as a horizontal Insert bar Return the horizontal Insert bar to a panel group Show horizontal

          • PAGE 395

            Insert panel in Dreamweaver CC To the top Insert an object 1. Select the appropriate category from the Category pop-up menu of the Insert panel. 2. Do one of the following: Click an object button or drag the button’s icon into the Document window. Click the arrow on a button, then select an option from the menu. Depending on the object, a corresponding object-insertion dialog box may appear, prompting you to browse to a file or specify parameters for an object.

          • PAGE 396

            To add an object, select an object in the Available Objects pane on the left, and then click the arrow between the two panes or doubleclick the object in the Available Objects pane. Note: You can add one object at a time. You cannot select a category name, such as Common, to add an entire category to your favorites list. To delete an object or separator, select an object in the Favorite Objects pane on the right, and then click the Remove Selected Object in Favorite Objects List button above the pane.

          • PAGE 397

            2. Position the Insert panel and drop it. A blue line indicates where you can drop the panel. To the top Show horizontal Insert bar categories as tabs Click the arrow beside the category name on the left end of the horizontal Insert bar, and then select Show as Tabs. To the top Show horizontal Insert bar categories as a menu Right-click (Windows) or Control-click (Macintosh) a category tab in the horizontal Insert bar, and then select Show as Menus.

          • PAGE 398

            Working with Spry widgets (general instructions) About Spry widgets Spry widgets resources and tutorials Insert a Spry widget Select a Spry widget Edit a Spry widget Style a Spry widget Get more widgets Change the default Spry assets folder Note: Spry widgets are replaced with jQuery widgets in Dreamweaver CC and later. While you can still modify existing spry widgets on your page, you cannot add new spry widgets.

          • PAGE 399

            To the top Style a Spry widget Locate the appropriate CSS file for the widget in the SpryAssets folder of your site, and edit the CSS according to your preferences. For details on styling specific widgets, see the appropriate customization sections for each widget. You can also format a Spry widget by editing styles in the CSS panel, just as you would for any other styled element on the page.

          • PAGE 400

            Working with assets Assets panel overview Add an asset to a document Apply a color to text using the Assets panel Apply a URL to an image or text using the Assets panel Select and edit assets Reuse assets in another site Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article.

          • PAGE 401

            By default, assets in a category are listed alphabetically by name, but you can sort them by type and several other criteria. You can also preview assets and resize the columns and the preview area. View an asset in the preview area Select the asset in the Assets panel. For example, when you select a movie asset, the preview area shows an icon. To view the movie, click the Play button (the green triangle) in the upper-right corner of the preview area.

          • PAGE 402

            Apply a URL to an image or text using the Assets panel To the top 1. Select the text or image. in either the Sites or Favorites view, depending on where the URL is stored. 2. In the Assets panel, select the URLs category Note: URLs for your site’s files are stored in the Sites view by default. The Favorites view holds URLs that you have added yourself. 3. Select the URL. 4. Do one of the following: Drag the URL from the panel to the selection in the Design view. Select the URL, then click Insert.

          • PAGE 403

            Copy assets from the Asset panel to another site 1. In the Assets panel, select the category of the asset you want to copy. 2. Right-click (Windows) or Control-click (Macintosh) one or more assets in either the Site list or Favorites list, select Copy To Site, and select the target site name from the submenu listing all the sites you’ve defined. Note: In the Favorites list, you can copy a Favorites folder as well as individual assets.

          • PAGE 404

            File management 397

          • PAGE 405

            Checking in and checking out files About the Check In/Check Out system Set up the Check In/Check Out system Check files into and out of a remote folder Use WebDAV to check in and check out files Use Subversion (SVN) to get and check in files To the top About 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 406

            Document window. Check out files using the Files panel 1. In the Files panel (Window > Files), select files to check out from the remote server. Note: You can select files in the Local or Remote view, not the Testing Server view. A red check mark indicates that another team member has the file checked out and a lock symbol indicates that the file is read-only (Windows) or locked (Macintosh). 2. Do one of the following to check out the file(s): Click the Check Out button in the Files panel toolbar.

          • PAGE 407

            Dreamweaver can connect to a server that uses WebDAV (Web-based Distributed Authoring and Versioning), which is a set of extensions to the HTTP protocol that allow users to collaboratively edit and manage files on remote web servers. For more information, see www.webdav.org. 1. If you have not already done so, define a Dreamweaver site that specifies the local folder you use to store your project files. 2. Select Site > Manage Sites, and then double-click your site in the list. 3.

          • PAGE 408

            Select a protocol from the Protocol pop-up menu. The available protocols are HTTP, HTTPS, SVN, and SVN+SSH. Note: Using the SVN+SSH protocol requires special configuration. For more information, see www.adobe.com/go/learn_dw_svn_ssh_en. Enter the address for the SVN server in the Server address text box (typically in the form of servername.domain.com). Enter the path to your repository on the SVN server in the Repository path text box (typically something like /svn/your_root_directory.

          • PAGE 409

            Update status of local file or folders You can update the SVN status of a single file or folder. The update does not refresh the entire display. 1. Make sure that you’ve successfully set up an SVN connection. 2. Display the local version of your SVN files in the Files panel by selecting Local view from the View pop-up menu. (If you are working in the expanded Files panel, the Local view is automatically displayed.) 3.

          • PAGE 410

            To delete a file, select the file and press delete. Dreamweaver gives you the option of whether you want to delete the local version of the file only, or both the local version and the version on the SVN server. If you select to delete the local version only, the file on the SVN server is not affected. If you select to delete the version on the SVN server as well, the local version is marked with a Delete sign, and you must commit the file for the deletion to take place.

          • PAGE 411

            Cloaking files and folders in your Dreamweaver site About site cloaking Enable and disable site cloaking Cloak and uncloak site files and folders Cloak and uncloak specific file types Uncloak all files and folders To the top About site cloaking Site cloaking enables you to exclude files and folders from operations such as Get or Put. You can also cloak all files of a particular type (JPEG, FLV, XML, and so on) from site operations.

          • PAGE 412

            Note: You can still perform an operation on a specific cloaked file or folder by selecting the item in the Files panel and performing an operation on it. Performing an operation directly on a file or folder overrides cloaking. To the top Cloak and uncloak 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.

          • PAGE 413

            Comparing files for differences Compare local and remote files for differences Compare before putting files Compare files when synchronizing To the top Compare local and remote files for differences Dreamweaver can work with file comparison tools (also known as “diff tools”) to compare the code of local and remote versions of the same file, two different remote files, or two different local files.

          • PAGE 414

            1. In the Files panel, display the files on the remote server by selecting Remote View from the right pop-up menu. 2. Control-click (Windows) or Command-click (Macintosh) the two files to select them 3. Right-click one of the selected files and select Compare Remote Files from the context menu. Note: If you have a one-button mouse, Control-click one of the selected files instead. The file comparison tool starts and compares the two files.

          • PAGE 415

            Getting and putting files to and from your server File transfer and dependent files About background file transfers Get files from a remote server Put files on a remote server Manage file transfers To the top File transfer and dependent files If you’re working in a collaborative environment, use the Check In/Check Out system to transfer files between local and remote sites.

          • PAGE 416

            Use the Get command to copy files from the remote site to your local site. You can use the Files panel or the Document window to get files. Dreamweaver creates a log of file activity during the transfer that you can view and save. Note: You cannot turn background file transfer off. If you have the detail log open in the Background File Activity dialog box, you can close that to improve performance. Dreamweaver also records all FTP file transfer activity.

          • PAGE 417

            Dreamweaver also records all FTP file transfer activity. If an error occurs when you are transferring a file using FTP, the Site FTP log can help you determine the problem. For a tutorial on putting files on a remote server, see www.adobe.com/go/vid0163. For a tutorial on troubleshooting publishing problems, see www.adobe.com/go/vid0164. Put files on a remote or testing server using the Files panel 1. In the Files panel (Window > Files), select the files to upload.

          • PAGE 418

            1. Click the Log button at the bottom of the Files panel to open the Background File Activity dialog box. 2. Click the Save Log button and save the information as a text file. You can review the file activity by opening the log file in Dreamweaver or in any text editor.

          • PAGE 419

            Managing files and folders About managing files and folders Using the Files panel View files and folders Work with files in the Files panel Find files in your Dreamweaver site Identify and delete unused files Access sites, a server, and local drives Customize the file and folder details displayed in the expanded Files panel To the top About managing files and folders Dreamweaver includes a Files panel that helps you manage and transfer files to and from a remote server.

          • PAGE 420

            Put File(s) Copies the selected files from the local site to the remote site. Note: The files Dreamweaver copies are the files you select in the active pane of the Files panel. If the Local pane is active, the selected local files are copied to the remote site or testing server; if the Remote pane is active, Dreamweaver copies the local versions of the selected remote server files to the remote site.

          • PAGE 421

            A. Site Files B. Testing Server C. Repository Files Note: Before you can view a remote site, testing server or repository, you must set up a remote site, testing server, or SVN repository. View files outside of a Dreamweaver site Navigate your computer using the Site pop-up menu, much as you would if you were using Windows Explorer(Windows) or the Finder (Macintosh).

          • PAGE 422

            (Dreamweaver sites only) Click the Refresh button in the Files panel toolbar (this option refreshes both panes). Note: Dreamweaver refreshes the Files panel when you make changes in another application, then return to Dreamweaver. To the top Find files in your Dreamweaver site Dreamweaver makes it easy to find selected, open, checked out, or recently modified files in your site. You can also find files that are newer in your local or remote site. Find an open file in your site 1.

          • PAGE 423

            Dreamweaver highlights the files that were modified within the selected time frame in the Files panel. To the top Identify and delete unused files You can identify and delete files that are no longer used by other files in your site. 1. Select Site > Check Links Sitewide. Dreamweaver checks all the links in your site and displays the broken ones in the Results panel. 2. Select Orphaned Files from the menu on the Link Checker panel. Dreamweaver displays all the files with no incoming links.

          • PAGE 424

            Delete files Drag files When you drag a file from one Dreamweaver site to another or to a folder that is not part of a Dreamweaver site, Dreamweavercopies the file to the location where you drop it. If you drag a file within the same Dreamweaver site, Dreamweavermoves the file to the location where you drop it. If you drag a file that is not part of a Dreamweaver site to a folder that is not part of a Dreamweaver site, Dreamweaver moves the file to the location where you drop it.

          • PAGE 425

            Rolling back files (Contribute users) Roll back files (Contribute users) To the top Roll back files (Contribute users) Dreamweaver automatically saves multiple versions of a document when you have Adobe Contribute compatibility enabled. Note: You must have Contribute installed on the same machine as Dreamweaver. File rollback must also be enabled in Contribute’s administrative settings. For more information, see Administering Contribute. 1.

          • PAGE 426

            Set download time and size preferences Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article. 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.

          • PAGE 427

            Storing file information in Design Notes About Design Notes Enable and disable Design Notes for a site Associate Design Notes with files Work with Design Notes To the top About Design Notes Design Notes are notes that you create for a file. Design Notes are associated with the file they describe, but stored in a separate file. You can see which files have Design Notes attached in the expanded Files panel: A Design Notes icon appears in the Notes column.

          • PAGE 428

            Associate 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. 1. Do one of the following: Open the file in the Document window and select File > Design Notes.

          • PAGE 429

            Legal Notices | Online Privacy Policy 422

          • PAGE 430

            Synchronizing files Synchronize the files on your local and remote sites Synchronize the files on your local and remote sites To the top After you’ve created files in your local and remote sites, you can synchronize the files between the two sites. Note: If your remote site is an FTP server (rather than a networked server), then synchronizing your files uses FTP. Before you synchronize your sites, you can verify which files you want to put, get, delete, or ignore.

          • PAGE 431

            Compare The Compare action works only if you installed and specified a file comparison tool in Dreamweaver. If the action icon is grayed out, the action cannot be performed. Mark Selected Files As Already Synched This option lets you specify that the selected file or files are already synchronized. 10. Click OK to synchronize the files. You can view or save the details of the synchronization to a local file.

          • PAGE 432

            Understanding document encoding Document encoding specifies the encoding used for characters in the document. Document encoding is specified in a meta tag in the head of the document; it tells the browser and Dreamweaver how the document should be decoded and what fonts should be used to display the decoded text. For example, if you specify Western European (Latin1), this meta tag is inserted: .

          • PAGE 433

            Linking and navigation 426

          • PAGE 434

            About linking and navigation About links Absolute, document-relative, and site root-relative paths Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article.

          • PAGE 435

            To link from contents.html to hours.html (both in the same folder), use the relative path hours.html. To link from contents.html to tips.html (in the resources subfolder), use the relative path resources/tips.html. At each slash (/), you move down one level in the folder hierarchy. To link from contents.html to index.html (in the parent folder, one level above contents.html), use the relative path ../index.html. Two dots and a slash (../) moves you up one level in the folder hierarchy.

          • PAGE 436

            Image maps About image maps Insert client-side image maps Modify image map hotspots Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article. To the top About image maps An image map is an image that has been divided into regions called hotspots; when a user clicks a hotspot, an action occurs (for example, a new file opens).

          • PAGE 437

            To the top Modify image map hotspots You can easily edit the hotspots you create in an image map. You can move a hotspot area, resize hotspots, or move a hotspot forward or back in an absolutely-positioned element (AP element). You can also copy an image with hotspots from one document to another, or copy one or more hotspots from an image and paste them on another image; hotspots associated with the image are also copied to the new document. Select multiple hotspots in an image map 1.

          • PAGE 438

            Jump menus About jump menus Insert a jump menu Edit jump menu items Troubleshooting jump menus Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article. To the top About jump menus A jump menu is a pop-up menu in a document, visible to your site visitors, listing links to documents or files.

          • PAGE 439

            Troubleshooting jump menus After a user selects a jump menu item, there is no way to reselect that menu item if the user navigates back to that page, or if the Open URL In box specifies a frame. There are two ways to work around this problem: Use a menu selection prompt, such as a category, or a user instruction, such as “Choose one”. The menu selection prompt is reselected automatically after each menu selection. Use a Go button, which allows a user to revisit the currently chosen link.

          • PAGE 440

            Link to an external CSS style sheet Note: In Dreamweaver CC and later, CSS Styles panel is replaced with CSS Designer. For more information, see CSS Designer. When you edit an external CSS style sheet, all documents linked to that CSS style sheet are updated to reflect those edits. You can export the CSS styles found in a document to create a new CSS style sheet, and attach or link to an external style sheet to apply the styles found there.

          • PAGE 441

            Navigation bars About navigation bars Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article. To the top About navigation bars The navigation bar feature has been deprecated as of Dreamweaver CS5. Adobe recommends using the Spry Menu Bar widget if you want to create a navigation bar.

          • PAGE 442

            Set CSS link properties for an entire page Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article. You can specify fonts, font sizes, colors, and other items for your links. By default, Dreamweaver creates CSS rules for your links and applies them to all links you use on the page. (The rules are embedded in the head section of the page.

          • PAGE 443

            Troubleshooting links Find broken, external, and orphaned links Fix broken links Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article.

          • PAGE 444

            To the top Fix 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. Fix links in the Link Checker panel 1. Run a link check report. 2. In the Broken Links column (not the Files column) of the Link Checker panel (in the Results panel group), select the broken link. A folder icon appears next to the broken link. 3.

          • PAGE 445

            Coding 438

          • PAGE 446

            Collapsing code About collapsing code Collapse and expand code fragments Paste and move collapsed code fragments Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article. To the top About collapsing code You can collapse and expand code fragments so that you can view different sections of your document without having to use the scroll bar.

          • PAGE 447

            To the top Paste and move collapsed code fragments You can copy and paste collapsed code fragments, or move collapsed code fragments by dragging. Copy and paste a collapsed code fragment 1. Select the collapsed code fragment. 2. Select Edit > Copy. 3. Place the insertion point where you want to paste the code. 4. Select Edit > Paste. Note: You can paste into other applications, but the collapsed state of the code fragment is not preserved. Drag a collapsed code fragment 1.

          • PAGE 448

            Editing code in Design view About editing code in Design view Selecting child tags in Design view Edit code with the Property inspector Edit CFML with the Property inspector Change attributes with the Tag inspector Quick Tag Editor overview Edit code with the Quick Tag Editor Use the hints menu in the Quick Tag Editor Edit code with the tag selector Write and edit scripts in Design view Edit scripts on the page by using the Property inspector Using JavaScript behaviors Note: The user interface has been simp

          • PAGE 449

            To the top Change attributes with the Tag inspector Use the Tag inspector to edit or add attributes and attributes’ values. The Tag inspector lets you edit tags and objects by using a property sheet similar to the ones found in other integrated development environments (IDEs). 1. Do one of the following in the Document window: In Code view (or the Code inspector), click anywhere in a tag’s name or in its contents. In Design view, select an object, or select a tag in the Tag Selector. 2.

          • PAGE 450

            3. Enter the HTML tag and press Enter. The tag is inserted into your code, along with a matching closing tag if applicable. 4. Press Escape to exit without making any changes. Edit an HTML tag 1. 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. For more information, see Edit code with the tag selector. 2. Press Control+T (Windows) or Command+T (Macintosh). The Quick Tag Editor opens in Edit Tag mode. 3.

          • PAGE 451

            3. To change the delay before the menu appears, adjust the Delay slider, and click OK. To the top Edit 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: Edit or delete a tag 1. Click in the document. The tags that apply at the insertion point appear in the tag selector. 2.

          • PAGE 452

            The script appears in the Script Properties dialog box. If you linked to an external script file, the file opens in Code view, where you can make your edits. Note: If there is code between the script tags, the Script Properties dialog box opens even if there is also a link to an external script file. 3. In the Language box, specify either JavaScript or VBScript as the language of the script. 4. In the Type pop-up menu, specify the type of script, either client-side or server-side. 5.

          • PAGE 453

            Format CSS code Set CSS code formatting preferences Format CSS code in a CSS style sheet manually Format embedded CSS code manually Note: In Dreamweaver CC and later, CSS Styles panel is replaced with CSS Designer. For more information, see CSS Designer. You can set preferences that control the format of your CSS code whenever you create or edit a CSS rule using the Dreamweaver interface.

          • PAGE 454

            General information about coding in Dreamweaver Supported languages Invalid markup Automatic code modification XHTML code Regular expressions Server behavior code Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article.

          • PAGE 455

            Optionally, you can set Dreamweaver to highlight invalid code in Code view (in yellow). When you select a highlighted section, the Property inspector displays information on how to correct the error. To the top XHTML code Dreamweaver generates new XHTML code and cleans up existing XHTML code in a way that meets most of the XHTML requirements. The tools that you need to meet the few XHTML requirements that remain are also provided.

          • PAGE 456

            For attributes with values of an enumerated type, the values must be lowercase. Forces enumerated type values to be lowercase in the code that it generates, and when cleaning up XHTML. An enumerated type value is a value from a specified list of allowed values; for example, the align attribute has the following allowed values: center, justify, left, and right. All script and style elements must have a type attribute.

          • PAGE 457

            \B Anything other than a word boundary. \Bb matches “b” in “goober” but nothing in “book” \d Any digit character. Equivalent to [0-9]. \d matches “3” in “C3PO” and “2” in “apartment 2G” \D Any nondigit character. Equivalent to [^09]. \D matches “S” in “900S” and “Q” in “Q45” \f Form feed. \n Line feed. \r Carriage return. \s Any single white-space character, including space, tab, form feed, or line feed.

          • PAGE 458

            Managing tag libraries About Dreamweaver tag libraries Open and close the Tag Library editor Add libraries, tags, and attributes Edit libraries, tags, and attributes Delete libraries, tags, and attributes Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article.

          • PAGE 459

            To the top Edit libraries, tags, and attributes Use the Tag Library editor to set properties for a tag library and edit tags and attributes in a library. Set properties for a tag library 1. In the Tag Library editor (Edit > Tag Libraries), select a tag library (not a tag) in the Tags list. Note: The properties for tag libraries appear only when a tag library is selected.

          • PAGE 460

            Optimizing and debugging code Clean up code Verify tags and braces are balanced Check for browser compatibility Validate XML documents Validate documents using W3C validator (CS5.5) Set Validator preferences Make pages XHTML-compliant Use the ColdFusion debugger (Windows only) Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article.

          • PAGE 461

            are balanced, eventually Dreamweaver will select the outermost html and /html tags. Check for balanced parentheses, braces, or square brackets 1. Open the document in Code view. 2. Place the insertion point in the code you want to check. 3. Select Edit > Balance Braces. All of the code between the enclosing parentheses, braces, or square brackets is selected. Choosing Edit > Balance Braces again selects all of the code inside the parentheses, braces, or square brackets that enclose the new selection.

          • PAGE 462

            2. In the W3C Validation panel, click the W3C Validation (Play) icon. Select Settings. 3. Select a DOCTYPE for validation if a DOCTYPE has not been explicitly specified for the document. 4. If you do not want errors and warnings displayed, clear the options. 5. Click Manage if you want to delete any warnings or errors that you have hidden using the W3C Validation panel. When you remove warnings and errors, they are not displayed when you select Show All in the W3C validation panel. 6.

          • PAGE 463

            Create XHTML-compliant documents by default 1. Select Edit > Preferences or Dreamweaver > Preferences (Mac OS X), and select the New Document category. 2. Select a default document and select one of the XHTML document type definitions from the Default Document Type (DTD) pop-up menu, and click OK. For example, you can make an HTML document XHTML-compliant by selecting XHTML 1.0 Transitional or XHTML 1.0 Strict from the pop-up menu. Make an existing HTML document XHTML-compliant 1.

          • PAGE 464

            Setting coding preferences About coding preferences Set the code appearance Change the code format Set the code rewriting preferences Set the code colors Use an external editor Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article.

          • PAGE 465

            more information, see Set the code appearance. With (Text box and pop-up menu) Specifies how many spaces or tabs Dreamweaver should use to indent code that it generates. For example, if you type 3 in the box and select Tabs in the pop-up menu, then code generated by Dreamweaver is indented using three tab characters for every level of indentation. Tab Size Determines how many characters wide each tab character appears in Code view.

          • PAGE 466

            Never Rewrite Code: In Files With Extensions Allows you to prevent Dreamweaver from rewriting code in files with the specified filename extensions. This option is particularly useful for files that contain third-party tags. Encode <, >, &, And " In Attribute Values Using & Ensures that attribute values that you enter or edit using Dreamweaver tools such as the Property inspector contain only legal characters. This option is enabled by default.

          • PAGE 467

            Legal Notices | Online Privacy Policy 460

          • PAGE 468

            Setting up your coding environment Using coder-oriented workspaces Viewing code Customizing keyboard shortcuts Open files in Code view by default Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article. To the top Using coder-oriented workspaces You can adapt the coding environment in Dreamweaver to fit the way you work.

          • PAGE 469

            You can use your favorite keyboard shortcuts in Dreamweaver. If you’re accustomed to using specific keyboard shortcuts—for example, Shift+Enter to add a line break, or Control+G to go to a specific position in the code—you can add them to Dreamweaver using the Keyboard Shortcut Editor. For instructions, see Customize keyboard shortcuts.

          • PAGE 470

            Template syntax General syntax rules Template tags Instance tags Check template syntax Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article. To the top General syntax rules Dreamweaver uses HTML comment tags to specify regions in templates and template-based documents, so template-based documents are still valid HTML files.

          • PAGE 471

            InstanceEndRepeat --> InstanceBeginRepeatEntry --> InstanceEndRepeatEntry --> To the top Check template syntax Dreamweaver checks the template syntax when you save a template, but you can manually check the template syntax prior to saving a template. For example, if you add a template parameter or expression in Code view, you can check that the code follows correct syntax. 1. Open the document you want to check in the Document window. 2.

          • PAGE 472

            Writing and editing code Code hints Site-specific code hints Insert code with the Coding toolbar Insert code with the Insert panel Insert tags with the Tag Chooser Insert HTML comments Copy and paste code Edit tags with Tag editors Edit code with the Coding context menu Edit a server-language tag with the Property inspector Indent code blocks Navigate to related code Go to a JavaScript or VBScript function Extract JavaScript Work with code snippets Search for tags, attributes, or text in code Save and recal

          • PAGE 473

            HTML4 and HTML5 jQuery (CS5.5 and later) JavaScript (includes custom class hinting) JSP PHP MySQL Spry Display a code hints menu The code hints menu appears automatically as you type in Code view. But you can also display the code hints menu manually, without typing. 1. In Code view (Window > Code), place the insertion point inside a tag. 2. Press Control+Spacebar. Insert code in Code view by using code hints 1. Type the beginning of a piece of code.

          • PAGE 474

            2. Select Code Hints from the Category list on the left. 3. Set any of the following options: Close Tags Specifies how you want Dreamweaver to insert closing tags. By default, Dreamweaver inserts the closing tag automatically after you type the characters ) of the opening tag, or so that no closing tag is inserted at all.

          • PAGE 475

            When renaming your site structure, keep in mind that you cannot use the names of any of the three default site framework structures, or the word “custom”. 1. Display the structure that you want to rename. 2. Click the Rename Structure icon button in the upper right-hand corner of the dialog box. 3. Specify a new name for the structure and click Rename.

          • PAGE 476

            Dreamweaver detects a syntax error, the Syntax Error Information Bar specifies the line in the code where the error occurs. Additionally, Dreamweaver highlights the error’s line number on the left side of the document in Code view. The info bar is enabled by default, but only appears when Dreamweaver detects syntax errors in the page. Apply Comment Lets you wrap comment tags around selected code, or open new comment tags.

          • PAGE 477

            appears. 5. To view the same information about the tag in the Reference panel, click the icon. If available, information about the tag appears. 6. To insert the selected tag into your code, click Insert. If the tag appears in the right pane with angle brackets (for example, ), it doesn’t require additional information, and it’s immediately inserted into the document at the insertion point. If the tag does require additional information, a tag editor appears. 7.

          • PAGE 478

            Apply /* */ Comment Wraps the selected CSS or JavaScript code with /* and */. Apply // Comment Inserts // at the beginning of each line of selected CSS or JavaScript code, or inserts a single // tag if no code is selected. Apply ' Comment Inserts a single quotation mark at the beginning of each line of a Visual Basic script, or inserts a single quotation mark at the insertion point if no code is selected. Apply Server Comment Wraps the selected code. When you are working in a ASP, ASP.

          • PAGE 479

            Navigate to related code The Code Navigator displays a list of code sources related to a particular selection on your page. Use it to navigate to related code sources, such as internal and external CSS rules, server-side includes, external JavaScript files, parent template files, library files, and iframe source files. When you click a link in the Code Navigator, Dreamweaver opens the file containing the relevant piece of code. The file appears in the related files area, if it is enabled.

          • PAGE 480

            attach the JavaScript associated with those handlers to your document. You should be aware of the following limitations of the JavaScript Extractor before using it: The JSE does not extract script tags in the body of the document (except in the case of Spry widgets). There is a chance that externalizing these scripts could cause unexpected results. By default, Dreamweaver lists these scripts in the Externalize JavaScript dialog box, but does not select them for extraction.

          • PAGE 481

            Create a code snippet 1. In the Snippets panel, click the New Snippet icon at the bottom of the panel. 2. Enter a name for the snippet. Note: Snippet names can’t contain characters that are invalid in filenames, such as slashes(/ or \), special characters, or double quotes (“). 3. (Optional) Enter a text description of the snippet. This makes it easier for other team members to use the snippet. 4. For Snippet Type, select Wrap Selection or Insert Block. a.

          • PAGE 482

            Save a search pattern 1. In the Find And Replace dialog box (Edit > Find And Replace), set the parameters for the search. 2. Click the Save Query button (the disk icon). 3. In the dialog box that appears, navigate to the folder where you want to save queries. Then type a filename that identifies the query, and click Save. For example, if the search pattern involves looking for img tags with no alt attribute, you might name the query img_no_alt.dwr. Note: Saved queries have the filename extension .dwr.

          • PAGE 483

            3. Specify printing options, and then click OK (Windows) or Print (Macintosh).

          • PAGE 484

            Mobile and multiscreen Building Mobile Pages with Dreamweaver CS5.5 David Karlins (Aug. 3, 2011) tutorial David Karlins, author of "Adobe Creative Suite 5 Web Premium How-Tos: 100 Essential Techniques," takes you through Dreamweaver techniques to build mobile-friendly web pages based on jQuery JavaScript.

          • PAGE 485

            Packaging web applications as native mobile applications with PhoneGap Build About PhoneGap Build and Dreamweaver Create a PhoneGap Build service account Set up the development environment Package mobile applications with PhoneGap Build To the top About PhoneGap Build and Dreamweaver PhoneGap Build is a cloud-based service that lets you package your web applications as native mobile applications.

          • PAGE 486

            reader". To the top Package mobile applications with PhoneGap Build 1. Make sure that you've created a Dreamweaver site with an index.html page (usually the start page of your application). Note: PhoneGap Build supports the use of HTML, CSS and JavaScipt files only. Your site cannot contain server pages such as PHP, CFM, or other kinds of server-based pages. 2. Choose Site > PhoneGap Build Service > PhoneGap Build Service. 3. Provide your login information and log in to PhoneGap Build.

          • PAGE 487

            Customize the identity of your application by editing the contents of this file. If you don't, all of your applications will have the same default application name. For more information on working with the config.xml file, see the PhoneGap Build documentation. 7. Save the edited config.xml file, close it, and click Rebuild in the PhoneGap Service panel. As PhoneGap finishes packaging your application for each platform, you'll see messages indicating that the build is complete.

          • PAGE 488

            Scan a QR code to transfer an application to a device You need to have a QR code reader on your device before proceeding. For more information, see Set up the Development Environment. Note: QR codes are not available for iOS applications without a signing key. For more information, see the PhoneGap Build documentation. 1. In the PhoneGap Build Service panel, click the QR code for the application you want to download. 2. Start the QR code reader on your mobile device and scan the QR code. 3.

          • PAGE 489

            Creating web applications for mobile devices About creating a web application using jQuery Mobile Use starter pages to create an application for mobile devices Create a web application for mobile devices from a new page Dreamweaver’s integration with jQuery Mobile helps you quickly design a web application that works on most mobile devices while adapting itself to the dimensions of the device.

          • PAGE 490

            Dreamweaver provides you with the following starter pages to create your web application: jQuery Mobile (CDN) (CS5.5 and later versions) Use this starter page if you plan to host the jQuery Mobile library on a CDN. jQuery Mobile (Local) (CS5.5 and later versions) Use this starter page if you plan to host the assets yourself, or if your application doesn’t rely on an Internet connection. jQuery Mobile (PhoneGap) (CS5.

          • PAGE 491

            3. In the Insert panel (Window > Insert), select jQuery Mobile from the menu. The jQuery Mobile components appear in the panel. 4. From the Insert panel, drag the Page component to Design view. 5. In the jQuery Mobile Files dialog, select one of the following: Remote (CDN) If you want to connect to a remote CDN server hosting the jQuery Mobile files. Use the default option for the jQuery site if you have not configured a site containing jQuery Mobile files. You can also choose to use other CDN servers.

          • PAGE 492

            Change page orientation for mobile devices (CS5.5 and later) Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article. Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article.

          • PAGE 493

            Creating media queries (CS5.5 and later) Overview Create a media query Use an existing media queries file Choose a different site-wide media queries file Viewing web pages based on media query You can use media queries to specify CSS files based on the reported characteristics of a device. The browser on a device checks the media query and uses the corresponding CSS file to display the web page. For example, the following media query specifies the phone.css file for devices that are 300-320 pixels wide.

          • PAGE 494

            6. Do one of the following: Click "+" to define the properties for the media query file. Click Default Presets if you want to begin with standard presets. 7. Select rows in the table, and edit their properties using the options under Properties. Description The description of the device for which the CSS file must be used. For example, phone, TV, tablet, and so on.

          • PAGE 495

            following changes are seen: The view size changes to reflect the specified dimensions. The document frame size is unaltered. The CSS file specified in the media query is used to display the page.

          • PAGE 496

            Packaging web applications Packaging web applications as native mobile applications (CS5.5) Packaging web applications as native mobile applications (CS5.5) To the top Dreamweaver’s integration with jQuery Mobile and PhoneGap helps you create and package web applications for deployment on Android™ and iOS-based devices. Dreamweaver uses PhoneGap SDKs to create the package (.apk file for Android/.

          • PAGE 497

            1. Open the web application that you want to convert to a mobile application. Ensure that your web application is set up as a site in Dreamweaver, and the size of your site is smaller than 25 MB. Note: Ensure that the application contains only HTML5, CSS, and JavaScript files. 2. Select Site > Mobile Applications > Configure Application Framework. 3. Click Easy Install to install the Android SDK. Note: If the Easy Install fails, please see tech note 90408. 4.

          • PAGE 498

            If you are directly deploying your application to a device, select Site > Mobile Applications > Build. Select a platform/device for the build. If you want to see how the build looks like on an emulator before you build it, select Site > Mobile Applications > Emulate and Build. Adobe recommends Have a tutorial you would like to share? Packaging web applications as mobile apps using Dreamweaver CS5.5 Jon Michael Varese Step-by-step tutorial on packaging your web app More Help topics http://www.phonegap.

          • PAGE 499

            Preview pages using the Multiscreen Preview panel Change the Viewport sizes Add media queries Navigate links Multiscreen preview in Dreamweaver provides a preview of the page that you are currently editing as it would appear on devices supporting different screen resolutions. To open the Multiscreen Preview panel,select File > Multiscreen preview.

          • PAGE 500

            Previewing 493

          • PAGE 501

            Check for cross-browser CSS rendering issues Run a browser compatibility check Select the element affected by a found issue Jump to the next or previous found issue in the code Select browsers for Dreamweaver to check against Exclude an issue from the browser compatibility check Edit the Ignored Issues list Save a browser compatibility check report View a browser compatibility check report in a browser Open the Adobe CSS Advisor website Note: In Dreamweaver CC and later, CSS Styles panel is replaced with CS

          • PAGE 502

            1. Run a browser compatibility check. 2. In the Results panel, Right-click (Windows) or Control-click (Macintosh) the issue that you want to exclude from future checking. 3. Select Ignore Issue from the context menu. To the top Edit the Ignored Issues list 1. In the Results panel (Window > Results), select the Browser Compatibility Check tab. 2. Click the green arrow in the upper-left corner of the Results panel and select Edit Ignored Issues List. 3. In the Exceptions.

          • PAGE 503

            Preview pages using the Multiscreen Preview panel Change the Viewport sizes Add media queries Navigate links Multiscreen preview in Dreamweaver provides a preview of the page that you are currently editing as it would appear on devices supporting different screen resolutions. To open the Multiscreen Preview panel,select File > Multiscreen preview.

          • PAGE 504

            Previewing pages Previewing pages in Dreamweaver Previewing pages in browsers Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article. Design view gives you an idea of how your page will look on the web but does not render pages exactly as browsers do.

          • PAGE 505

            2. Click the Live Code button. Dreamweaver displays the live code that the browser would use to execute the page. The code is highlighted in yellow and is uneditable. When you interact with interactive elements on the page, Live Code highlights the dynamic changes in the code. 3. To turn off highlighting for changes in Live Code view, choose View > Live View Options > Highlight Changes in Live Code. 4. To return to the editable Code view, click the Live Code button again.

          • PAGE 506

            don’t recognize site roots—servers do. To preview content linked with root-relative paths, put the file on a remote server, and then select File > Preview In Browser to view it. 3. Close the page in the browser when you finish testing. Set browser preview preferences You can set preferences for the browser to use when previewing a site and define default primary and secondary browsers. 1. Select File > Preview In Browser > Edit Browser List. 2.

          • PAGE 507

            Select and view elements in the Document window Select elements View the HTML code associated with the selected text or object Show or hide marker icons for invisible elements Set invisible elements preferences Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article. To select an element in the Design view of the Document window, click the element.

          • PAGE 508

            the invisible elements. To the top Set invisible elements preferences Use Invisible Elements preferences to specify which kinds of elements will be visible when you select View > Visual Aids > Invisible Elements. 1. Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh), then click Invisible Elements. 2. Select which elements should be made visible and click OK.

          • PAGE 509

            Viewing live data Provide the page with live data in Live view Troubleshooting live data in Live view Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article. The View Live Data feature has been deprecated as of Dreamweaver CS5. It has been replaced by the more streamlined Live view feature.

          • PAGE 510

            Templates 503

          • PAGE 511

            About Dreamweaver templates Understanding Dreamweaver templates Types of template regions Links in templates Server scripts in templates and template-based documents Template parameters Template expressions Template expression language Multiple If condition in template code Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article.

          • PAGE 512

            Dreamweaver 8.01 link update preference Previous to Dreamweaver 8 (that is, Dreamweaver MX 2004 and earlier), Dreamweaver did not update links to files that resided in the Templates folder. (For example, if you had a file called main.css in the Templates folder, and had written href="main.css" as a link in the template file, Dreamweaver would not update this link when creating a template-based page.

          • PAGE 513

            You can also define expressions for if and multiple-if conditions. When an expression is used in a conditional statement, Dreamweaver evaluates it as true or false. If the condition is true, the optional region appears in the template-based document; if it is false, it doesn’t appear. You can define expressions in Code view or in the Optional Region dialog box when you insert an optional region.

          • PAGE 514

            is displayed. checks value of Dept and shows appropriate TemplateBeginIfClause cond="Dept == 1" --> TemplateBeginIfClause cond="Dept == 2" --> TemplateBeginIfClause cond="Dept == 3" --> TemplateBeginIfClause cond="Dept != 3" --> TemplateEndMultipleIf --> image--> PAGE 515

            Applying or removing a template from an existing document Apply a template to an existing document Detach a document from a template Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article.

          • PAGE 516

            Undo the template changes Select Edit > Undo Apply Template. The document reverts to its state before the template was applied. To the top Detach a document from a template To make changes to the locked regions of a document based on a template, you must detach the document from the template. When the document is detached, the entire document becomes editable. Note: You cannot convert a template file (.dwt) to a normal file by simply resaving the template file as an HTML (.html) file.

          • PAGE 517

            Creating a Dreamweaver template About creating Dreamweaver templates Create a template from an existing document Use the Assets panel to create a new template About creating templates for Contribute sites Create a template for a Contribute site Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article.

          • PAGE 518

            When you create a template and upload it to the server, it becomes available to all Contribute users who connect to your site, unless you’ve set restrictions on template use for certain Contribute roles. If you have set restrictions on template use, you might need to add each new template to the list of templates a Contribute user can use (see Administering Contribute).

          • PAGE 519

            Legal Notices | Online Privacy Policy 512

          • PAGE 520

            Creating a nested template About nested templates Create a nested template Prevent an editable region from passing through to a nested template Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article. To the top About nested templates A nested template is a template whose design and editable regions are based on another template.

          • PAGE 521

            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. Content you add outside the editable region, such as the graphic in the editableColumn, is no longer editable in documents based on the nested template. The blue highlighted editable areas, whether added in the nested template or passed through from the base template, remain editable in documents that are based on the nested template.

          • PAGE 522

            @@("")@@ Editable 1

            More Help topics Nested Templates Legal Notices | Online Privacy Policy 515

          • PAGE 523

            Creating editable regions in templates Insert an editable region Select editable regions Remove an editable region Change an editable region’s name Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article. To the top Insert an editable region Editable template regions control which areas of a template-based page a user can edit.

          • PAGE 524

            the Remove Template Markup command. 1. Click the tab in the upper-left corner of the editable region to select it. 2. Do one of the following: Select Modify > Templates > Remove Template Markup. Right-click (Windows) or Control-click (Macintosh), then select Templates > Remove Template Markup. The region is no longer editable. To the top Change an editable region’s name After you insert an editable region, you can later change its name. 1.

          • PAGE 525

            Creating repeating regions in templates About template repeating regions Create a repeating region in a template Insert a repeating table Set alternating background colors in a repeating table Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article.

          • PAGE 526

            If you don’t explicitly assign values for cell padding and cell spacing, most browsers display the table as if cell padding were set to 1 and cell spacing were set to 2. To ensure that browsers display the table with no padding or spacing, set Cell Padding and Cell Spacing to 0. Width Specifies the width of the table in pixels, or as a percentage of the browser window’s width. Border Specifies the width, in pixels, of the table’s borders.

          • PAGE 527

            Defining editable tag attributes in templates Specify editable tag attributes in a template Make an editable tag attribute uneditable Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article.

          • PAGE 528

            5. Update documents based on the template.

          • PAGE 529

            Editing content in a template-based document About editing content in template-based documents Modify template properties Add, delete, and change the order of a repeating region entry Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article.

          • PAGE 530

            a copy of the entire repeating region is added. To update the content in the repeating regions, the original template must include an editable region in the repeating region. Add, delete, or change the order of a repeating region 1. Open the template-based document. 2. Place the insertion point in the repeating region to select it. 3. Do one of the following: Click the Plus (+) button to add a repeating region entry below the currently selected entry.

          • PAGE 531

            Editing, updating, and deleting templates About editing and updating templates Open a template for editing Rename a template Change a template description Manually update documents based on templates Update templates in a Contribute site Delete a template file Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article.

          • PAGE 532

            Right-click (Windows) or Control-click (Macintosh), then select Templates > Open Attached Template. 3. Modify the contents of the template. To modify the template’s page properties, select Modify > Page Properties. (Documents based on a template inherit the template’s page properties.) 4. Save the template. Dreamweaver prompts you to update pages based on the template. 5.

          • PAGE 533

            Keep these factors in mind when updating templates in a Contribute site: Contribute retrieves new and changed templates from the site only when Contribute starts up and when a Contribute user changes their connection information. If you make changes to a template while a Contribute user is editing a file based on that template, the user won’t see the changes to the template until they restart Contribute.

          • PAGE 534

            Exporting and importing template content About template XML content Export a document’s editable regions as XML Import XML content Export a site without template markup Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article.

          • PAGE 535

            Legal Notices | Online Privacy Policy 528

          • PAGE 536

            Recognizing templates and template-based documents Recognizing Recognizing Recognizing Recognizing templates in Design view templates in Code view template-based documents in Design view template-based documents in Code view Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article.

          • PAGE 537

            Note: When you edit template code in Code view, be careful not to change any of the template-related comment tags that Dreamweaver relies on. Recognizing template-based documents in Design view To the top In a document based on a template (a template-based document), editable regions appear in the Design view of the Document window surrounded by rectangular outlines in a preset highlight color.

          • PAGE 538

            Legal Notices | Online Privacy Policy 531

          • PAGE 539

            Setting authoring preferences for templates Customize code coloring preferences for a template Set highlighting preferences for template regions Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article.

          • PAGE 540

            Template syntax General syntax rules Template tags Instance tags Check template syntax Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article. To the top General syntax rules Dreamweaver uses HTML comment tags to specify regions in templates and template-based documents, so template-based documents are still valid HTML files.

          • PAGE 541

            InstanceEndRepeat --> InstanceBeginRepeatEntry --> InstanceEndRepeatEntry --> To the top Check template syntax Dreamweaver checks the template syntax when you save a template, but you can manually check the template syntax prior to saving a template. For example, if you add a template parameter or expression in Code view, you can check that the code follows correct syntax. 1. Open the document you want to check in the Document window. 2.

          • PAGE 542

            Using optional regions in templates About template optional regions Insert an optional region Set values for an optional region Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article. To the top About template optional regions An optional region is a region in a template that users can set to show or to hide in a template-based document.

          • PAGE 543

            You can edit optional region settings after you’ve inserted the region in a template. For example, you can change whether the default setting for the content is to be displayed or not, to link a parameter to an existing optional region, or to modify a template expression. Create template parameters and define conditional statements (If...else statements) for template regions. You can use simple true/false operations, or define more complex conditional statements and expressions.

          • PAGE 544

            Web applications and forms Enabling PHP and Apache in Leopard David Powers (Jan.

          • PAGE 545

            Set up a testing server Set up a testing server About the Web URL for the testing server If you plan to develop dynamic pages, Dreamweaver needs the services of a testing server to generate and display dynamic content while you work. The testing server can be your local computer, a development server, a staging server, or a production server.

          • PAGE 546

            The home directory The folder on the server mapped to your site’s domain name. Suppose the folder you want to use to process dynamic pages is c:\sites\company\, and this folder is your home directory (that is, this folder is mapped to your site’s domain name—for example, www.mystartup.com). In that case, the URL prefix is http://www.mystartup.com/. If the folder you want to use to process dynamic pages is a subfolder of your home directory, simply add the subfolder to the URL.

          • PAGE 547

            Adding custom server behaviors About custom server behaviors Custom server behaviors workflow Use the Server Behavior Builder Creating code blocks Positioning a code block Repeating code blocks with the loop directive Request a parameter for the server behavior Edit and modify server behaviors Coding guidelines Testing server behaviors Note: The user interface has been simplified in Dreamweaver CC and later.

          • PAGE 548

            2. From the Document Type pop-up menu, select the document type that you are developing the server behavior for. 3. In the Name box, enter a name for the server behavior. 4. (Optional) To copy an existing server behavior to add to the behavior you are creating, select the Copy Existing Server Behavior option, and then select the server behavior in the Behavior to Copy pop-up menu. Click OK. The Server Behavior Builder dialog box is displayed. 5.

          • PAGE 549

            server behavior, the code you write must be valid ColdFusion code that runs on a ColdFusion application server. You can create the code blocks either directly in the Server Behavior Builder, or you can copy and paste the code from other sources. Each code block you create in the Server Behavior Builder must be a single tag or script block. If you must insert multiple tag blocks, split them into separate code blocks.

          • PAGE 550

            Just after the recordsets Just above the tag Custom position Below the Tag Before the end of the file Before the recordset close After the recordset close After the tag Custom position Relative to a Specific Tag Select a tag from the Tag pop-up menu, and then choose from the tag positioning options. Relative to the Selection Before the selection After the selection Replace the selection Wrap the selection To specify a custom position, you must assign a weight to the code block.

          • PAGE 551

            <@ loop (@@param1@@,@@param2@@) @> block<@ endloop @> code When creating server behaviors, you can use looping constructs to repeat a code block a specified number of times. <@ loop (@@param1@@,@@param2@@,@@param3@@,@@param_n@@) @> <@ endloop @> code block The loop directive accepts a comma-separated list of parameter arrays as arguments. In this case, parameter array arguments allow a user to supply multiple values for a single parameter.

          • PAGE 552

            Note: Parameter arrays cannot be used outside of a loop except as part of a conditional directive expression. Using the loop directive’s _length and _index variables The loop directive includes two built-in variables that you can use for embedded if conditions. The variables are: _length and _index.

          • PAGE 553

            want to include spaces in the label, you can edit the generated HTML file. Create a dialog box for your server behavior to request the parameter value 1. In the Server Behavior Builder, click Next. 2. To change the display order of the dialog box controls, select a parameter and click the up and down arrows. 3. To change a parameter’s control, select the parameter and select another control in the Display As column. 4. Click OK.

          • PAGE 554

            Error checking An important requirement. The server behavior’s code should handle error cases gracefully. Try to foresee every possibility. For example, what if a parameter request fails? What if no records are returned from a query? Unique names Help to ensure that your code is clearly identifiable and avoids name collisions with existing code.

          • PAGE 555

            Adding dynamic content to pages About adding dynamic content About dynamic text Make text dynamic Make images dynamic Make HTML attributes dynamic Make ActiveX, Flash, and other object parameters dynamic Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article.

          • PAGE 556

            1. Select Edit > Preferences > Invisible Elements (Windows) or Dreamweaver > Preferences > Invisible Elements (Macintosh). 2. In the Show Dynamic Text As pop-up menu, select { }, and click OK. To the top Make 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 557

            If you clicked the lightning bolt icon, a list of data sources appears. If you clicked the folder icon, a file selection dialog box appears. Select the Data Sources option to display a list of content sources. 4. Select a source of content from the list of content sources, and click OK. The content source should hold data that’s appropriate for the HTML attribute you want to bind.

          • PAGE 558

            Building ColdFusion forms About ColdFusion forms Enable the ColdFusion enhancements Create ColdFusion forms Insert ColdFusion form controls Insert ColdFusion text fields Insert ColdFusion hidden fields Insert ColdFusion text areas Insert ColdFusion buttons Insert ColdFusion check boxes Insert ColdFusion radio buttons Insert ColdFusion select boxes Insert ColdFusion image fields Insert ColdFusion file fields Insert ColdFusion date fields Modify ColdFusion form controls Validate ColdFusion form data Note: Sup

          • PAGE 559

            CFForm Sets the name of the form. Action Lets you specify the name of the ColdFusion page to be processed when the form is submitted. Method Lets you define the method that the browser uses to send the form data to the server: POST Sends the data using the HTTP post method; this method sends the data in a separate message to the server. GET Sends the data using the HTTP get method, placing the form field contents in the URL query string.

          • PAGE 560

            3. Click the control on the page to select it and then set its properties in the Property inspector. For information on the properties of specific controls, see the topics about the controls. To the top Insert ColdFusion text fields You can visually insert a ColdFusion text field or password field into your form, and then set its options. Note: This enhancement is available only if you have access to a computer running ColdFusion MX 7 or later. Visually insert a ColdFusion text field 1.

          • PAGE 561

            The recordset column supplies a value to the text field when you view the form in a browser. Validate Specifies the type of validation for the current field. Validate At Specifies when the field is validated: onSubmit, onBlur or onServer. Label Lets you specify a label for the control. This property is ignored by the ColdFusion server at run time. Pattern Lets you specify a JavaScript regular expression pattern to validate input. Omit leading and trailing slashes.

          • PAGE 562

            Display Tag Editor Lets you edit properties not listed in the Property inspector. The other properties are ignored by the ColdFusion server at run time. To the top Insert ColdFusion check boxes You can visually insert a ColdFusion check box into your form and set its properties. Use check boxes to let users select more than one option from a set of options. Note: This enhancement is available only if you have access to a computer running ColdFusion MX 7 or later. 1.

          • PAGE 563

            4. To label the radio button, click beside it on the page and enter text for the label. To the top Insert ColdFusion select boxes You can visually insert a ColdFusion select box into your form and set its properties. A select box lets a visitor select one or more items from a list. Select boxes are useful when you have a limited amount of space, but need to display many items. They’re also useful when you want to control the values returned to the server.

          • PAGE 564

            To define a default image editor, select Edit > Preferences > File Types / Editors. Otherwise, the Edit Image button does not perform any action. Validate Specifies the type of validation for the image field. Validate At Specifies when the field is validated: onSubmit, onBlur, or onServer. Label Lets you specify a label for the radio button. Pattern Lets you specify a JavaScript regular expression pattern to validate input. Omit leading and trailing slashes.

          • PAGE 565

            To quickly select the form, click anywhere in the form outline and click the tag in the tag selector at the bottom of the Document window. 2. In the Property inspector, set the form’s Format property to Flash. The date field control can only be rendered in Flash-based ColdFusion forms. 3. Switch to Code view (View > Code) and enter the following tag anywhere between the opening and closing CFForm tags: 4.

          • PAGE 566

            Building a delete record page About record delete pages Search for the record to delete Create links to a delete page Build the delete page Add logic to delete the record Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article.

          • PAGE 567

            confirmDelete.cfm?recordID=#rsLocations.CODE# When the page runs, the values of the recordset's CODE field are inserted in the corresponding rows in the dynamic table. For example, if the Canberra, Australia, rental location has the code CBR, the following URL is used in the Canberra row in the dynamic table: confirmDelete.cfm?recordID=CBR 8.

          • PAGE 568

            9. Select the URL Parameters option. 10. Click OK. A special link surrounds the selected text. When the user clicks the link, the Go To Detail Page server behavior passes a URL parameter containing the record ID to the specified delete page. For example, if the URL parameter is called recordID and the delete page is called confirmdelete.asp, the URL looks something like the following when the user clicks on the link: http://www.mysite.com/confirmdelete.asp?recordID=43 The first part of the URL, http://www.

          • PAGE 569

            5. Click OK. The recordset appears in the Bindings panel. Display the record the user wants to delete 1. Select the recordset columns (record fields) in the Bindings panel, and drag them to the delete page. Make sure you insert this read-only dynamic content within the form boundaries. For more information on inserting dynamic content in a page, see Make text dynamic. Next, you must bind the record ID column to the hidden form field. 2.

          • PAGE 570

            Completed delete page To the top Add logic to delete the record After displaying the selected record on the delete page, you must add logic to the page that deletes the record from the database when the user clicks the Confirm Deletion button. You can add this logic quickly and easily by using the Delete Record server behavior. To add a server behavior to delete the record (ColdFusion, PHP) 1. Make sure the ColdFusion or PHP delete page is open in Dreamweaver. 2.

          • PAGE 571

            9. Click OK, and save your work. To add a server behavior to delete the record (ASP) 1. Make sure the ASP delete page is open in Dreamweaver. 2. In the Server Behaviors panel (Window > Server Behaviors), click the Plus (+) button, and select Delete Record. 3. In the Connection pop-up menu, select a connection to the database so that the server behavior can connect to the affected database. Click the Define button if you need to define a connection. 4.

          • PAGE 572

            Building a login page About login pages Create a database table of registered users Add an HTML form to let users log in Verify the user name and password Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article. To the top About login pages Your web application can contain a page that lets registered users log in to the site.

          • PAGE 573

            1. In the Server Behaviors panel (Window > Server Behaviors), click the Plus (+) button and select User Authentication > Log In User from the pop-up menu. 2. Specify the form and the form objects that visitors use to enter their user name and password. 3. (ColdFusion) Enter your user name and password if applicable. 4. Specify the database table and columns that contain the user names and passwords of all the registered users.

          • PAGE 574

            Building a page that only authorized users can access About protected pages Redirect unauthorized users Store access privileges in the user database Log out users Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article. To the top About protected pages Your web application can contain a protected page that only authorized users can access.

          • PAGE 575

            6. Specify the page to open if an unauthorized user attempts to open the protected page. Ensure that the page you choose is not protected. 7. Click OK. Copy and paste a page’s access rights to other pages on the site 1. Open the protected page and select the Restrict Access To Page server behavior listed in the Server Behaviors panel (not the one in the Plus (+) pop-up menu). 2. Click the arrow button in the upper-right corner of the panel, and select Copy from the pop-up menu.

          • PAGE 576

            Building a record insert page (CS6) About building record insert pages Build an insert page block by block Build the insert page in one operation Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article. To the top About building record insert pages Your application can contain a page that lets users insert new records in a database.

          • PAGE 577

            Repeat the procedure for each form object in your form. 7. In the After Inserting, Go To box, enter the page to open after the record is inserted in the table or click the Browse button to browse to the file. 8. Click OK. Dreamweaver adds a server behavior to the page that lets users insert records in a database table by filling out the HTML form and clicking the Submit button. Add a server behavior to insert records in a database table (ASP) 1.

          • PAGE 578

            on the right side of the dialog box. 7. Specify how each data-entry field should be displayed on the HTML form by clicking a row in the Form Fields table and entering the following information in the boxes below the table: In the Label box, enter a descriptive label to display beside the data-entry field. By default, Dreamweaver displays the table column’s name in the label. In the Display As pop-up menu, select a form object to serve as the data-entry field.

          • PAGE 579

            Building a registration page About registration pages Storing login information about users Add an HTML form for selecting a user name and password Update the database table of users Add a server behavior to ensure a unique user name Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article.

          • PAGE 580

            You can change the label of the Submit button by selecting the button, opening the Property inspector (Window > Properties), and entering a new value in the Value box. 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. To the top Update the database table of users You must add an Insert Record server behavior to the registration page to update the table of users in the database. 1.

          • PAGE 581

            Building pages with advanced data manipulation objects (ColdFusion, ASP) (CS6) About ASP command objects Use ASP commands to modify a database About stored procedures Add a stored procedure (ColdFusion) (CS6) Run a stored procedure (ASP) (CS6) Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article.

          • PAGE 582

            parameters passed to the page, as defined in the Run-Time Value column of the Variables area. To get the Size value, use the Databases panel in Dreamweaver. Find your database in the Databases panel and expand it. Next, find the table you’re working with and expand it. The table lists the sizes for your fields. For example, it might say ADDRESS (WChar 50). In this example, 50 is the size. You can also find the size in your database application.

          • PAGE 583

            among other things, insert, update, or delete records. Stored procedures can also alter the structure of the database itself. For example, you can use a stored procedure to add a table column or even delete a table. A stored procedure can also call another stored procedure, as well as accept input parameters and return multiple values to the calling procedure in the form of output parameters.

          • PAGE 584

            3. Enter a name for the command, select a connection to the database containing the stored procedure, and then select Stored Procedure from the Type pop-up menu. 4. Select your stored procedure by expanding the Stored Procedures branch in the Database Items box, selecting the stored procedure from the list, and clicking the Procedure button. 5. Enter any required parameters in the Variables table. You don’t need to enter any parameters for any RETURN_VALUE variable. 6. Click OK.

          • PAGE 585

            Building search and results pages About search and results pages Build the search page Build a basic results page Build an advanced results page Display the search results Create a detail page for a results page Create a link to open a related page (ASP) Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article.

          • PAGE 586

            5. Select the form by selecting the

            tag in the tag selector at the bottom of the Document window, as the following image shows: 6. In the Action box in the form’s Property inspector, enter the filename of the results page that will conduct the database search. 7. In the Method pop-up menu, select one of the following methods to determine how the form sends data to the server: GET sends the form data by appending it to the URL as a query string.

          • PAGE 587

            Create the recordset filter 1. From the first pop-up menu in the Filter area, select a column in the database table in which to search for a match. For example, if the value sent by the search page is a city name, select the column in your table that contains city names. 2. From the pop-up menu beside the first menu, select the equal sign (it should be the default). 3.

          • PAGE 588

            In ColdFusion, the run-time values would be #LastName# and #Department#. In PHP, the run-time values would be $_REQUEST["LastName"] and $_REQUEST["Department"]. 6. (Optional) 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. 7. If you’re satisfied with the recordset, click OK. The SQL query is inserted in your page.

          • PAGE 589

            Changing dynamic content About dynamic content Edit dynamic content Delete dynamic content Test dynamic content Let Adobe Contribute users edit dynamic content Modify recordsets with the Property inspector Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article.

          • PAGE 590

            To the top Let Adobe Contribute users edit dynamic content When a Contribute user edits a page containing dynamic content or invisible elements (such as scripts and comments), Contribute displays the dynamic content and invisible elements as yellow markers. By default, Contribute users can’t select or delete these markers.

          • PAGE 591

            Creating web forms About web forms Form objects Create an HTML form About dynamic form objects Insert or change a dynamic HTML form menu Make existing HTML form menus dynamic Display dynamic content in HTML text fields Set the Dynamic Text Field dialog box options Dynamically preselect an HTML check box Dynamically preselect an HTML radio button Validate HTML form data Attach JavaScript behaviors to HTML form objects Attach custom scripts to HTML form buttons Create accessible HTML forms Note: Support for H

          • PAGE 592

            next visits the site. Buttons Perform actions when clicked. You can add a custom name or label for a button, or use one of the predefined “Submit” or “Reset” labels. Use a button to submit form data to the server or to reset the form. You can also assign other processing tasks that you define in a script. For example, the button might calculate the total cost of items selected based on assigned values. Check boxes Allow multiple responses within a single group of options.

          • PAGE 593

            c. In the Action box, specify the page or script that will process the form data by typing the path, or clicking the folder icon to navigate to the appropriate page or script. Example: processorder.php. d. In the Method pop-up menu, specify the method to transmit the form data to the server. Set any of the following options: Default Uses the browser’s default setting to send the form data to the server. Typically, the default value is the GET method. GET Appends the value to the URL requesting the page.

          • PAGE 594

            user enters 100 characters, only 20 of those characters will be viewable in the text field. Although you cannot view the characters in the field, they are recognized by the field object and are sent to the server for processing. Max Chars Specifies the maximum number of characters that the user can enter in the field for single-line text fields. Use Max Chars to limit zip codes to 5 digits, limit passwords to 10 characters, and so on. If you leave the Max Chars box blank, users can enter any amount of text.

          • PAGE 595

            2. Enter label text and an optional value for each menu item. Each item in the list has a label (the text that appears in the list) and a value (the value that is sent to the processing application if the item is selected). If no value is specified, the label is sent to the processing application instead. 3. Use the up and down arrow buttons to rearrange items in the list. Items appear in the menu in the same order as they appear in the List Values dialog box.

          • PAGE 596

            Insert a group of radio buttons 1. Place the insertion point inside the form outline. 2. Select Insert > Form > Radio Group. 3. Complete the dialog box and click OK. a. In the Name box, enter a name for the radio button group. If you set the radio buttons to pass parameters back to the server, the parameters are associated with the name.

          • PAGE 597

            1. Insert an HTML List/Menu form object in your page: a. Click inside the HTML form on the page (Insert > Form > Form). b. Select Insert > Form > List/Menu to insert the form object. 2. Do one of the following: Select the new or an existing HTML List/Menu form object, and then click the Dynamic button in the Property inspector. Select Insert > Data Objects > Dynamic Data > Dynamic Select List. 3. Complete the Dynamic List/Menu dialog box, and click OK. a.

          • PAGE 598

            In the Equal To box, enter the value the field must have for the check box to appear selected. For example, for the check box to appear selected when a specific field in a record has a value of Yes, enter Yes in the Equal To box. Note: This value is also returned to the server if the user clicks the form’s Submit button. To the top Dynamically preselect an HTML radio button Dynamically preselect an HTML radio button when a record is displayed in the HTML form in a browser.

          • PAGE 599

            1. Select the HTML form object. 2. In the Behaviors panel (Window > Behaviors), click the Plus (+) button, and select a behavior from the list. To the top Attach 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. 1.

          • PAGE 600

            Setting a tab order is useful when you have other links and form objects on the page and need the user to tab through them in a specific order. 5. Click Yes to insert a form tag. The form object appears in the document. Note: If you press Cancel, the form object appears in the document, but Dreamweaver does not associate accessibility tags or attributes with it. Edit accessibility values for a form object 1. In the Document window, select the object. 2.

          • PAGE 601

            Database connections for ASP developers (CS6) About ASP database connections About OLE DB connections About connection strings Create a connection using a local DSN Create a connection using a remote DSN Create a connection using a connection string Edit or delete a database connection Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article.

          • PAGE 602

            In Dreamweaver, you create an OLE DB connection by including a Provider parameter in a connection string. For example, here are parameters for common OLE DB providers for Access, SQL Server, and Oracle databases, respectively: Provider=Microsoft.Jet.OLEDB.4.0;... Provider=SQLOLEDB;... Provider=OraOLEDB;... For the parameter value of your OLE DB provider, see your provider vendor’s documentation, or consult your system administrator.

          • PAGE 603

            scid=kb;en-us;305599 2. Open an ASP page in Dreamweaver, and then open the Databases panel (Window > Databases). 3. Click the Plus (+) button on the panel and select Data Source Name (DSN) from the menu. 4. Enter a name for the new connection, without spaces or special characters. 5. Select the Using Local DSN option and choose the DSN you want to use from the Data Source Name (DSN) menu.

          • PAGE 604

            6. You can restrict the number of database items Dreamweaver retrieves at design time by clicking Advanced and entering a schema or catalog name. Note: You cannot create a schema or catalog in Microsoft Access. 7. Click Test to connect to the database, and then click OK. If the connection fails, double-check the connection string or check the settings for the testing folder Dreamweaver uses to process dynamic pages.

          • PAGE 605

            Use a virtual path to connect to a database To write a DSN-less connection string to a database file located on a remote server, you must know the physical path to the file. The following example is a typical DSN-less connection string for a Microsoft Access database: Driver={Microsoft Access Driver (*.mdb)}; DBQ=c:\Inetpub\wwwroot\accounts\users\jsmith\data\statistics.

          • PAGE 606

            Legal Notices | Online Privacy Policy 599

          • PAGE 607

            Database connections for ColdFusion developers (CS6) Connecting to a ColdFusion database Create or modify a ColdFusion data source Connecting to the database in Dreamweaver Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article.

          • PAGE 608

            If the data sources do not appear, complete the checklist in the panel. Make sure that Dreamweaver knows where to find the ColdFusion data sources. In the Testing Server category of the Site Definition dialog box, specify the site’s root folder on the computer running ColdFusion.

          • PAGE 609

            Database connections for PHP developers About PHP database connections Connect to a database Edit or delete a database connection Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article. To the top About PHP database connections For PHP development, Dreamweaver only supports the MySQL database system.

          • PAGE 610

            1. Open a PHP page in Dreamweaver, and then open the Databases panel (Window > Databases). 2. Right-click (Windows) or Control-click (Macintosh) the connection and select Delete Connection from the menu. 3. In the dialog box that appears, confirm that you want to delete the connection.

          • PAGE 611

            Defining sources of dynamic content Define a recordset without writing SQL Define an advanced recordset by writing SQL Create SQL queries using the Database Items tree Define URL parameters Define form parameters Define session variables Define application variables for ASP and ColdFusion Use a variable as a data source for a ColdFusion recordset Define server variables Cache content sources Change or delete content sources Copy a recordset from one page to another page Note: The user interface has been sim

          • PAGE 612

            If the specified value in a record meets your filtering condition, the record is included the recordset. 6. (Optional) To sort the records, select a column to sort by, and then specify whether the records should be sorted in ascending order (1, 2, 3... or A, B, C...) or descending order. 7. Click Test to connect to the database and create an instance of the data source, and click OK to close the data source. A table appears displaying the returned data.

          • PAGE 613

            For instructions, see the topics below. 5. Click the Test button to execute the query and ensure that it retrieves the information you intended. If you defined a filter that uses parameters input by users, the Test button displays the Test Value dialog box. Enter a value in the Test Value box and click OK. If an instance of the recordset is successfully created, a table displaying the data from the recordset appears. 6.

          • PAGE 614

            If successful, a table appears displaying the data in your recordset. Each row contains a record and each column represents a field in that record. Click OK to clear the recordset. 6. If satisfied with your work, click OK. Options for the advanced Recordset dialog box (ColdFusion) Use the advanced Recordset dialog box to write custom SQL queries, or use the Database Items tree to author SQL queries using a point-andclick interface. 1. In the Name box, enter a name for the recordset.

          • PAGE 615

            Define parameters in a SQL statement (ColdFusion) Define parameters in a SQL statement; the default value is the value that the parameter should use if no run-time value is returned. 1. Select a parameter name from the Name pop-up menu. 2. Enter a default value for the parameter in the Default Parameter box, and click OK. Define parameters in a SQL statement (PHP) Define parameters in a SQL statement; the default value is the value that the parameter should use if no run-time value is returned. 1.

          • PAGE 616

            1. In the Document window, open the page that will use the variable. 2. Select Windows > Bindings to display the Bindings panel. 3. In the Bindings panel, click the Plus (+) button and select one of the following from the pop-up menu: Document Types Menu item in Bindings panel for URL variable ASP Request Variable > Request.QueryString ColdFusion URL Variable PHP URL Variable 4. In the URL Variable dialog box, enter the name of the URL variable in the box, and click OK.

          • PAGE 617

            For example, this ColdFusion example instantiates a session called username, and assigns it the value Cornelius: 2. Select Window > Bindings to display the Bindings panel. 3. Click the Plus (+) button, and select Session Variable from the pop-up menu. 4. Enter the name of the variable you defined in the application’s source code, and click OK.

          • PAGE 618

            Define ColdFusion server variables 1. Open the Bindings panel (Window > Bindings). In the Server Variable dialog box, enter the name of the server variable, and click OK. 2. Click the Plus (+) button and select the server variable from the pop-up menu. 3. Enter the name of the variable, and click OK. The ColdFusion server variable appears in the Bindings panel. The following table lists the built-in ColdFusion server variables: Variable Description Server.ColdFusion.ProductName ColdFusion product name.

          • PAGE 619

            Define PHP server variables Define server variables as a source of dynamic content for PHP pages. The PHP server variables appear in the Bindings panel. 1. Open the Bindings panel (Window > Bindings). 2. Click the Plus (+) button, and select the variable from the pop-up menu. 3. In the Request Variable dialog box, enter the name of the variable (for example, REQUEST_METHOD), and click OK. For more information, search for the keyword $_SERVER in the PHP documentation.

          • PAGE 620

            SERVER_PORT The port number to which the request was sent. REQUEST_METHOD The method with which the request was made. For HTTP, this is Get, Head, Post, and so on. PATH_INFO The extra path information, as given by the client. Scripts can be accessed by their virtual pathname, followed by extra information at the end of this path. The extra information is sent as PATH_INFO.

          • PAGE 621

            To the top Change or delete 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. It merely changes or deletes it as a possible source of content for the page. Change a content source in the Bindings panel 1.

          • PAGE 622

            Designing dynamic pages Dreamweaver and dynamic page design Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article. To the top Dreamweaver and dynamic page design Follow these general steps to successfully design and create a dynamic website. 1. Design the page.

          • PAGE 623

            the data formats. Create record navigation and status controls, master/detail pages, and forms for updating information in a database. Display more than one record from a database record. Create recordset navigation links that allow users to view the previous or next records from a database record. Add a record counter to help users keep track of how many records were returned, and where they are in the returned result.

          • PAGE 624

            Displaying database records About database records Server behaviors and formatting elements Applying typographic and page layout elements to dynamic data Navigating database recordset results Create a recordset navigation bar Custom recordset navigation bars Navigation bar design tasks Display and hide regions based on recordset results Display multiple recordset results Create a dynamic table Create record counters Use predefined data formats Note: The user interface has been simplified in Dreamweaver CC a

          • PAGE 625

            to display five records at a time, you might want to add links such as Next or Previous that let users display the five next or previous records. You can create four types of navigation links to move through a recordset: First, Previous, Next, and Last. A single page can contain any number of these links, provided they all work on a single recordset. You can’t add links to move through a second recordset on the same page.

          • PAGE 626

            Create and assign server behaviors to a navigation link 1. In Design view, select the text string or image on the page you want to use as a record navigation link. 2. Open the Server Behaviors panel (Window > Server Behaviors), and click the Plus (+) button. 3. Select Recordset Paging from the pop-up menu; then select a server behavior appropriate to that link from the listed server behaviors.

          • PAGE 627

            To the top Display multiple recordset results The Repeating Region server behavior lets you display multiple records from a recordset within a page. Any dynamic data selection can be turned into a repeating region. However, the most common regions are a table, a table row, or a series of table rows. 1. In Design view, select a region that contains dynamic content. The selection can be anything, including a table, a table row, or even a paragraph of text.

          • PAGE 628

            2. Select the recordset from the Recordset pop-up menu. 3. Select the number of records to display per page. 4. (Optional) Input values for the table border, cell padding, and cell spacing. The Dynamic Table dialog box retains the values you enter for table borders, cell padding, and cell spacing. Note: If you are working on a project that requires several dynamic tables with the same appearance, enter the table layout values, which further simplifies page development.

          • PAGE 629

            This example creates a record counter that appears similar to the example in “Simple record counters.” In this example, the text in sans-serif font represents the record count placeholders that will be inserted in the page. The record counter in this example appears as follows: Displaying records StartRow through EndRow of RecordSet.RecordCount. 1. In Design view, enter the counter’s text on the page. The text can be anything you want, for example: Displaying records thru of . 2.

          • PAGE 630

            The number of digits to display after the decimal point Whether to place a leading zero in front of fractions Whether to use parentheses or a minus sign for negative values Whether to group digits c. To delete a data format, click the format in the list, and click the Minus (-) button. Create a data format (ASP only) 1. Open a page containing dynamic data in Design view. 2. Select the dynamic data you want to create a custom format for. 3.

          • PAGE 631

            Dynamic content panels Bindings panel Server Behaviors panel Databases panel Components panel Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article. To the top Bindings panel Use the Bindings panel to define and edit sources of dynamic content, add dynamic content to a page, and apply data formats to dynamic text.

          • PAGE 632

            Adding custom server behaviors To the top Databases panel Use the Databases panel to create database connections, to inspect databases, and to insert database-related code in your pages.

          • PAGE 633

            Dynamic content sources overview About dynamic content sources About recordsets About URL and form parameters About session variables ASP and ColdFusion application variables ASP server variables ColdFusion server variables Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article.

          • PAGE 634

            to the URL. Form parameters store retrieved information that is included in the HTTP request for a web page. If you create a form that uses the POST method, the data submitted by the form is passed to the server. Before you begin, make sure you pass a form parameter to the server. To the top About session variables Session variables let you store and display information maintained for the duration of a user’s visit (or session).

          • PAGE 635

            ASP <% Session("variable_name") = value %> The value expression is usually a server expression such as Request.Form("lastname"). For example, if you use a URL parameter called product (or an HTML form with the GET method and a text field called product) to gather information, the following statements store the information in a session variable called prodID: ColdFusion ASP <% Session("prodID") = Request.

          • PAGE 636

            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. (An application is defined as all the files in a virtual directory and its subdirectories.

          • PAGE 637

            Optimizing the workspace for visual development Displaying web-application development panels View your database within Dreamweaver Previewing dynamic pages in a browser Restrict database information displayed in Dreamweaver Set the Property inspector for ColdFusion stored procedures and ASP commands Input Name options Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later.

          • PAGE 638

            To the top Previewing dynamic pages in a browser Web application developers often debug their pages by checking them often in a web browser. You can quickly view dynamic pages in a browser without first manually uploading them to a server (press F12). To preview dynamic pages, you must complete the Testing Server category of the Site Definition dialog box. You can specify that Dreamweaver use temporary files instead of the original files.

          • PAGE 639

            Packaging web applications Packaging web applications as native mobile applications (CS5.5) Packaging web applications as native mobile applications (CS5.5) To the top Dreamweaver’s integration with jQuery Mobile and PhoneGap helps you create and package web applications for deployment on Android™ and iOS-based devices. Dreamweaver uses PhoneGap SDKs to create the package (.apk file for Android/.

          • PAGE 640

            1. Open the web application that you want to convert to a mobile application. Ensure that your web application is set up as a site in Dreamweaver, and the size of your site is smaller than 25 MB. Note: Ensure that the application contains only HTML5, CSS, and JavaScript files. 2. Select Site > Mobile Applications > Configure Application Framework. 3. Click Easy Install to install the Android SDK. Note: If the Easy Install fails, please see tech note 90408. 4.

          • PAGE 641

            If you are directly deploying your application to a device, select Site > Mobile Applications > Build. Select a platform/device for the build. If you want to see how the build looks like on an emulator before you build it, select Site > Mobile Applications > Emulate and Build. Adobe recommends Have a tutorial you would like to share? Packaging web applications as mobile apps using Dreamweaver CS5.5 Jon Michael Varese Step-by-step tutorial on packaging your web app More Help topics http://www.phonegap.

          • PAGE 642

            Removing connection scripts Using the Remove Connection Scripts command Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article. To the top Using the Remove Connection Scripts command You can use the Remove Connection Scripts command to remove scripts that Dreamweaver places in a remote folder to access databases.

          • PAGE 643

            Securing a folder in your application (ColdFusion) Secure a folder or site on the server (ColdFusion) Note: Support for ColdFusion is removed in Dreamweaver CC and later. To the top Secure a folder or site on the server (ColdFusion) You can use Dreamweaver to password-protect a specific folder in your ColdFusion application, including the application’s root folder. When a visitor to your site requests any page in the specified folder, ColdFusion prompts the visitor for a user name and password.

          • PAGE 644

            Set up your computer for application development What you need to build web applications Web server basics Choosing a web server Choosing an application server Choosing a database Setting up a ColdFusion development environment Setting up a PHP development environment Setting up an ASP development environment Creating a root folder for the application About defining a Dreamweaver site Note: The user interface has been simplified in Dreamweaver CC and later.

          • PAGE 645

            When the web server is running on your computer, you can replace the server name with localhost. For example, the following URLs open the same page in a browser: http://mer_noire/gamelan/soleil.html http://localhost/gamelan/soleil.html Note: .Another expression you can use instead of the server name or localhost is 127.0.0.1 (for example, http://127.0.0.1/gamelan/soleil.html).

          • PAGE 646

            Note: The Developer Edition is for non-commercial use for developing and testing web applications. It is not licensed for deployment. It supports requests from the local host and two remote IP addresses. You can use it to develop and test your web applications as long as you want; the software does not expire. For more information, see ColdFusion help (Help > ColdFusion Help).

          • PAGE 647

            The file does not have an .htm or .html extension. You entered the page’s file path (for example, c:\ColdFusion8\wwwroot\testpage.htm), not its URL (for example, http://localhost:8500/testpage.htm), in the browser’s address text box. The URL contains a typing mistake. Check for errors and make sure the filename is not followed by a slash, such as http://localhost:8080/testpage.htm/. After creating a root folder for your application, define a Dreamweaver site to manage your files.

          • PAGE 648

            Troubleshooting database connections Troubleshooting permissions problems Troubleshooting Microsoft error messages Troubleshooting MySQL error messages Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article. To the top Troubleshooting permissions problems One of the most common problems is insufficient folder or file permissions.

          • PAGE 649

            Understanding anonymous authentication and the IUSR account at www.adobe.com/go/authentication Setting IIS web server permissions at www.adobe.com/go/server_permissions To the top Troubleshooting Microsoft error messages These Microsoft error messages can occur when you request a dynamic page from the server if you use Internet Information Server (IIS) with a Microsoft database system such as Access or SQL Server.

          • PAGE 650

            a SQL account of the same name, it will fail. Map any account that uses an underscore to an account name on SQL that does not use an underscore. [Reference]80004005—Operation must use an updateable query This error occurs when an event is updating a recordset or inserting data in a recordset. Here are possible causes and solutions: The permissions set on the folder containing the database are too restrictive. IUSR privileges must be set to read/write.

          • PAGE 651

            Here are possible causes and solutions: The server behavior is trying to update a database table’s auto-number field or to insert a record into an auto-number field. Because autonumber fields are populated automatically by the database system, any attempt to externally populate them with a value fails.

          • PAGE 652

            Understanding web applications About web applications Common uses for web applications Web application example How a web application works Processing static web pages Processing dynamic pages Accessing a database Authoring dynamic pages Web application terminology Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article.

          • PAGE 653

            Janet gets the application up and running before lunchtime using Dreamweaver, which has the tools she needs to build this kind of application quickly and easily. To the top How a web application works A web application is a collection of static and dynamic web pages. A static web page is one that does not change when a site visitor requests it: The web server sends the page to the requesting web browser without modifying it.

          • PAGE 654

            receives a request for a dynamic page, however, it reacts differently: It passes the page to a special piece of software responsible for finishing the page. This special software is called an application server. The application server reads the code on the page, finishes the page according to the instructions in the code, and then removes the code from the page. The result is a static page that the application server passes back to the web server, which then sends the page to the requesting browser.

          • PAGE 655

            1. Web browser requests dynamic page. 2. Web server finds page and passes it to application server. 3. Application server scans page for instructions. 4. Application server sends query to database driver. 5. Driver executes the query against the database. 6. Recordset is returned to driver. 7. Driver passes recordset to application server 8. Application server inserts data in page, and then passes the page to the web server 9. Web server sends finished page to requesting browser.

          • PAGE 656

            About Trio Motors

            Trio Motors is a leading automobile manufacturer.

            Be sure to visit our Sales page.

            The web server sends the page to the requesting browser, which displays it as follows: About Trio Motors Trio Motors is a leading automobile manufacturer. Be sure to visit our Sales page. You choose a scripting or tag-based language to use depending on the server technology available on your server.

          • PAGE 657

            A relational database A database containing more than one table, with the tables sharing data. The following database is relational because two tables share the DepartmentID column. A server technology The technology that an application server uses to modify dynamic pages at runtime.

          • PAGE 658

            Using ColdFusion components About ColdFusion components Components panel overview (ColdFusion) Create or delete a CFC in Dreamweaver View CFCs in Dreamweaver Edit CFCs in Dreamweaver Build web pages that use CFCs Define a recordset in a CFC Use a CFC recordset as a source of dynamic content Define dynamic content by using a CFC Note: Support for ColdFusion is removed in Dreamweaver CC and later.

          • PAGE 659

            Name Specifies the filename of the component. The name must contain only alphanumeric characters and underscores (_). Don’t specify the .cfc file extension when entering the name. Component Directory Specifies where the component is saved. Select the web application’s root folder (such as \Inetpub\wwwroot\myapp\) or any of its subfolders. b. To define one or more functions for the component, select Functions from the Section list, click the Plus (+) button, and enter the details of the new function.

          • PAGE 660

            To the top Edit CFCs 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: ColdFusion must be running locally. In the advanced Site Definition dialog box in Dreamweaver, the Access type specified in the Testing Server category must be Local/Network.

          • PAGE 661

            The recordset is defined in the function. 4. To define a new function in the CFC, click the New Function button, enter a name for the function in the dialog box that appears, and then click OK. The name must contain only alphanumeric characters and underscores (_). 5. To define a recordset for the function, complete the Recordset dialog box options. The new function is inserted into the CFC that defines the recordset.

          • PAGE 662

            You cannot modify the database connection and the SQL query for the recordset. These fields are always disabled—the connection and SQL query are displayed for your information. 7. Click Test to connect to the database and create an instance of the recordset. If the SQL statement contains page parameters, ensure that the Default Value column of the Parameters box contains valid test values before clicking Test. If the query was executed successfully, a table displays the recordset.

          • PAGE 663

            Cross-product 656

          • PAGE 664

            Working with Photoshop and Dreamweaver About Photoshop integration About Smart Objects and Photoshop-Dreamweaver workflows Create a Smart Object Update a Smart Object Update multiple Smart Objects Resize a Smart Object Edit a Smart Object’s original Photoshop file Smart Object states Copy and paste a selection from Photoshop Edit pasted images Setting Image Optimization dialog box options To the top About Photoshop integration You can insert Photoshop image files (PSD format) into web pages in Dreamweaver

          • PAGE 665

            Smart Object When the web image (that is, the image on the Dreamweaver page) is out of sync with the original Photoshop file, Dreamweaver detects that the original file has been updated, and displays one of the Smart Object icon’s arrows in red. When you select the web image in Design view and click the Update from Original button in the Property inspector, the image updates automatically, reflecting any changes that you made to the original Photoshop file.

          • PAGE 666

            1. In Dreamweaver (Design or Code view), place the insertion point on your page where you want the image inserted. 2. Select Insert > Image. You can also drag the PSD file to the page from the Files panel if you’re storing your Photoshop files in your website. If you do so, you’ll skip the next step. 3. Locate your Photoshop PSD image file in the Select Image Source dialog box by clicking the Browse button and navigating to it. 4.

          • PAGE 667

            Note: You do not need Photoshop installed to make the update from Dreamweaver. To the top Resize a Smart Object You can resize a Smart Object in the Document window just as you would any other image. 1. Select the Smart Object in the Document window and drag the resize handles to resize the image. You can maintain the width and height proportions by holding down the Shift key as you drag. 2. Click the Update from Original button in the Property inspector.

          • PAGE 668

            Dimensions of web image are different from selected HTML width and height The width and height attributes in the HTML code are different from the width and height dimensions of the web image that Dreamweaver created upon insertion. If the web image’s dimensions are smaller than the selected HTML width and height values, the web image can appear pixelated. Use the Update From Original button in the Property inspector to re-create the web image from the original Photoshop file.

          • PAGE 669

            about the image, such as the location of the original PSD source file, is saved in a Design Note, regardless of whether you have enabled Design Notes for your site. The Design Note allows you to return to edit the original Photoshop file from Dreamweaver. For a tutorial on copying and pasting between different applications, including Dreamweaver and Photoshop, see www.adobe.com/go/vid0193.

          • PAGE 670

            Dreamweaver-Business Catalyst integration Video tutorial Create a temporary Business Catalyst site Import a Business Catalyst site Manage files Insert modules, data, or snippets Edit properties of Business Catalyst objects Business Catalyst is a hosted application for building and managing online businesses. Using this unified platform and without back-end coding, you can build everything from websites to powerful online stores.

          • PAGE 671

            10. Select Remote Server from the menu. 11. Enter the Adobe ID associated with your password. The file structure on the remote server is displayed. To the top Import a Business Catalyst site For information on migrating sites that you previously created using the Business Catalyst extension, see Migrating Business Catalyst sites to Dreamweaver CS6. 1. Select Site > Manage Sites. 2. Click Import Business Catalyst Site. The list of Business Catalyst sites you created with the Adobe ID is displayed. 3.

          • PAGE 672

            4. Provide the required information, and click Insert. 5. If your current site uses the new rendering engine, the Snippets tab is displayed. Using the options in the Snippet tab, you can add code snippets, such as repeating and conditional regions, comment sections, and include (works similar to server-side include). 6. Click Live to preview the page as it would appear in a web browser.

          • PAGE 673

            Adding and modifying images About images Insert an image Visually resize an image Insert an image placeholder Replace an image placeholder Set image placeholder properties Edit images in Dreamweaver Create a rollover image Use an external image editor Applying behaviors to images To the top About images Many different types of graphic file formats exist, but three graphic file formats are generally used in web pages—GIF, JPEG, and PNG.

          • PAGE 674

            Insert panel, you can drag the icon to the Document window (or to the Code view window if you are working in the code). Select Insert > Image. Drag an image from the Assets panel (Window > Assets) to the desired location in the Document window; then skip to step 3. Drag an image from the Files panel to the desired location in the Document window; then skip to step 3. Drag an image from the desktop to the desired location in the Document window; then skip to step 3. 2.

          • PAGE 675

            1. Select Window > Properties to view the Property inspector for a selected image. 2. In the text box below the thumbnail image, enter a name so you can refer to the image when using a Dreamweaver behavior (such as Swap Image) or when using a scripting language such as JavaScript or VBScript. 3. Set any of the image options. W and H The width and height of the image, in pixels. Dreamweaver automatically updates these text boxes with the image’s original dimensions when you insert an image in a page.

          • PAGE 676

            Crop Trims the size of an image, removing unwanted areas from the selected image. Resample Resamples a resized image, improving its picture quality at its new size and shape. Brightness and Contrast Sharpen Adjusts the brightness and contrast settings of an image. Adjusts the sharpness of an image. Edit image accessibility attributes in code If you inserted accessibility attributes for an image, you can edit those values in the HTML code. 1. In the Document window, select the image. 2.

          • PAGE 677

            To adjust the height of the element, drag the bottom selection handle. To adjust the width and the height of the element at the same time, drag the corner selection handle. To preserve the element’s proportions (its width-to-height ratio) as you adjust its dimensions, Shift-drag the corner selection handle. To adjust the width and height of an element to a specific size (for example, 1 x 1 pixel), use the Property inspector to enter a numeric value.

          • PAGE 678

            6. For Alternate Text (Optional), enter text to describe the image for viewers using a text-only browser. Note: An image tag is automatically inserted into the HTML code containing an empty src attribute. 7. Click OK. The placeholder’s color, size attributes, and label appear as follows: When viewed in a browser, the label and size text do not appear. To the top Replace an image placeholder An image placeholder does not display an image in a browser.

          • PAGE 679

            W and H Set the width and height of the image placeholder, in pixels. Src Specifies the source file for the image. For a placeholder image, this text box is empty. Click the Browse button to select a replacement image for the placeholder graphic. Link Specifies a hyperlink for the image placeholder. Drag the Point-to-File icon to a file in the Files panel, click the folder icon to browse to a document on your site, or manually type the URL.

          • PAGE 680

            Sharpen Adjusts the focus of an image by increasing the contrast of edges found within the image. When you scan an image, or take a digital photo, the default action of most image capturing software is to soften the edges of objects in the image. This prevents extremely fine details from becoming lost in the pixels from which digital images are composed.

          • PAGE 681

            Sharpening increases the contrast of pixels around the edges of objects to increase the image’s definition or sharpness. 1. Open the page containing the image you want to sharpen, select the image, and do either of the following: Click the Sharpen button in the image Property inspector. Select Modify > Image > Sharpen. 2. You can specify the degree of sharpening Dreamweaver applies to the image by dragging the slider control, or entering a value between 0 and 10 in the text box.

          • PAGE 682

            displayed in the Insert panel, you can drag the icon to the Document window. Select Insert > Image Objects > Rollover Image. 3. Set the options and click OK. Image Name The name of the rollover image. Original image The image you want to display when the page loads. Enter the path in the text box, or click Browse and select the image. Rollover Image The image you want to display when the pointer rolls over the original image. Enter the path or click Browse to select the image.

          • PAGE 683

            starts the default editor for the file type. Note: When you open an image from the Files panel, the Fireworks integration features are not in effect; Fireworks does not open the original PNG file. To use the Fireworks integration features, open images from within the Document window. If you don’t see an updated image after returning to the Dreamweaver window, select the image and then click the Refresh button in the Property inspector.

          • PAGE 684

            4. To select an external editor for the file type, click the Add (+) button above the Editors list. 5. In the dialog box that appears, select the application you want to use to edit this image type. 6. Click Make Primary if you want this editor to be the primary editor for the image type. Change an existing editor preference 1.

          • PAGE 685

            AIR Extension for Dreamweaver Installing the AIR Extension for Dreamweaver Creating an AIR application in Dreamweaver Signing an application with a digital certificate Editing associated AIR file types Editing AIR application settings Previewing a web page in an AIR application Using AIR code hinting and code coloring Accessing the Adobe AIR documentation The Adobe® AIR® Extension for Dreamweaver® lets you transform a web-based application into a desktop application.

          • PAGE 686

            For more information, see the dialog box options listed below. The first time you create an Adobe AIR file, Dreamweaver creates an application.xml file in your site root folder. This file serves as a manifest, defining various properties of the application. The following describes the options in the AIR Application and Installer Settings dialog box: Application File Name is the name used for the application executable file. By default, the extension uses the name of the Dreamweaver site to name the file.

          • PAGE 687

            To the top Signing an application with a digital certificate A digital signature provides an assurance that the code for an application has not been altered or corrupted since its creation by the software author. All Adobe AIR applications require a digital signature, and can’t be installed without one. You can sign your application with a purchased digital certificate, create your own certificate, or prepare an Adobe AIRI file (an Adobe AIR intermediate file) that you’ll sign at a later time. 1.

          • PAGE 688

            Digitally signing an AIR file. To the top Editing associated AIR file types You can associate different file types with your Adobe AIR application. For example, if you want file types with an .avf extension to open in Adobe AIR when a user double-clicks them, you can add the .avf extension to your list of associated file types. 1. In the AIR Application and Installer Settings dialog box, click the Edit list button next to the Associated File Types option. 2.

          • PAGE 689

            Create a link to a Word or Excel document Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article. You can insert a link to a Microsoft Word or Excel document in an existing page. 1. Open the page where you want the link to appear. 2. Drag the file from its current location to your Dreamweaver page, positioning the link wherever you want. 3.

          • PAGE 690

            Cross-application integration About Photoshop, Flash, and Fireworks integration About Photoshop, Flash, and Fireworks integration To the top Photoshop, Fireworks, and Flash are powerful web-development tools for creating and managing graphics and SWF files. You can tightly integrate Dreamweaver with these tools to simplify your web design workflow. Note: There is also limited integration with some other applications.

          • PAGE 691

            Extensions About extensions Using extensions in Dreamweaver CS6, 12.1, and 12.2 Using extensions in Dreamweaver CC and later Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article. To the top About extensions Extensions are new features that you can add easily to Dreamweaver.

          • PAGE 692

            If you choose not to use Extension Manager (by clicking No in the prompt), Dreamweaver downloads the extension (.zxp) in your Documents folder. Note: The extensions are downloaded in your Documents folder if installation of extensions fail for any reason too. Extension Manager supports only .zxp formats and only extensions with valid signatures can be installed using Extension Manager.

          • PAGE 693

            Import Microsoft Office documents (Windows only) Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article. You can insert the full contents of a Microsoft Word or Excel document in a new or existing web page. When you import a Word or Excel document, Dreamweaver receives the converted HTML and inserts it into your web page.

          • PAGE 694

            Managing Contribute sites Managing Contribute sites Site structure and page design for a Contribute site File transfer to and from a Contribute site Contribute file and folder permissions on the server Contribute special files Prepare a site for use with Contribute Administer a Contribute site using Dreamweaver Delete, move, or rename a remote file in a Contribute site Enable Contribute users to access templates without root folder access Troubleshoot a Contribute site To the top Managing Contribute sites

          • PAGE 695

            the include files. Contribute users can then bookmark that page and use it to navigate to the include files and edit them. To the top File transfer to and 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 696

            If your remote site connection uses WebDAV, you can’t enable Contribute compatibility, because those source-control systems aren’t compatible with the Design Notes and Check In/Check Out systems that Dreamweaver uses for Contribute sites. If you use RDS to connect to your remote site, you can enable Contribute compatibility, but you must customize your connection before you can share it with Contribute users.

          • PAGE 697

            1. Select Site > Manage Sites. 2. Select a site, and then click Edit. 3. In the Site Setup dialog box, expand Advanced Settings and select the Contribute category. 4. Click the Administer Site in Contribute button. Note: This button does not appear if you have not enabled Contribute compatibility. 5. If prompted, enter the administrator password, and then click OK. The Administer Website dialog box appears.

          • PAGE 698

            In the Files panel (Window > Files), right-click (Windows) or Control-click (Macintosh), and then select Undo Check Out. A dialog box might appear, indicating who has the file checked out and asking you to confirm that you want to unlock the file. 2. If the dialog box appears, click Yes to confirm. The file is unlocked on the server. Troubleshoot connection problems for a Contribute site 1.

          • PAGE 699

            Update CSS style sheets in a Contribute site Note: In Dreamweaver CC and later, CSS Styles panel is replaced with CSS Designer. For more information, see CSS Designer. Adobe Contribute users can’t make changes to a CSS style sheet. To change a style sheet for a Contribute site, use Dreamweaver. 1. Edit the style sheet using the Dreamweaver style-sheet-editing tools. 2.

          • PAGE 700

            Using Dreamweaver with Adobe Online services BrowserLab Business Catalyst InContext Editing Adobe online services are hosted web applications that work similarly to traditional desktop tools. The advantage of online services, however, is that they are always up to date because they are hosted on the web, as opposed to on your computer. Dreamweaver integrates directly with Adobe® BrowserLab and Adobe® Business Catalyst InContext Editing.

          • PAGE 701

            3. Your options vary, depending on your selection. If you selected a div, th, or td tag, Dreamweaver transforms the tag into an editable region without any further steps. If you’re inserting a new, blank editable region do one of the following: Select Insert New Editable Region at the Current Insertion Point and click OK. Dreamweaver inserts a div tag in your code with the ice:editable attribute in the opening tag.

          • PAGE 702

            Repeating regions as seen in an editable InContext Editing browser window. The lower region is selected and can be duplicated again, deleted, or moved up and down. In addition to adding repeating regions based on the original region, you can also give the user the option to delete regions, add completely new regions (not based on the content of the original region), and to move the regions up or down.

          • PAGE 703

            span, strike, strong, sub, sup, table, tbody, tr, tt, u, ul, and var. Note: This second option is only available when the parent node meets the exact criteria for transformation. For example, it must be one of the listed transformable tags, and it must not be subject to any of the errors listed in InContext Editing Error messages. If you selected a Dreamweaver template repeating region, click OK in the Create Repeating Region dialog box.

          • PAGE 704

            regions group to an editable region, Dreamweaver does not allow you to perform the transformation. Additionally, Dreamweaver will not transform an element into an editable or repeating region if it already contains a repeating regions group. Current selection already contains or is inside of a Repeating Region. Nested Repeating Regions are not allowed.

          • PAGE 705

            Working with Adobe Bridge and Dreamweaver About Adobe Bridge Start Adobe Bridge from Dreamweaver Placing files into Dreamweaver from Adobe Bridge Place an Adobe Bridge file in your page Drag a file from Bridge into your page Start Dreamweaver from Adobe Bridge To the top About Adobe Bridge Dreamweaver provides seamless integration with Adobe Bridge, the cross-platform file browser included with Adobe Creative Suite 5 components.

          • PAGE 706

            To the top Place an Adobe Bridge file in your page 1. In Dreamweaver (Design view), place the insertion point on your page where you want the file inserted. 2. In Adobe Bridge, select the file and choose File > Place In Dreamweaver. 3. If the file is not in your site’s root folder, you are prompted to copy it there. 4.

          • PAGE 707

            Working with ConnectNow and Dreamweaver Working with ConnectNow To the top Working with ConnectNow Adobe® ConnectNow provides you with a secure, personal online meeting room where you can meet and collaborate with others via the web in real time. With ConnectNow, you can share and annotate your computer screen, send chat messages, and communicate using integrated audio. You can also broadcast live video, share files, capture meeting notes, and control an attendee's computer.

          • PAGE 708

            Working with Device Central and Dreamweaver Using Adobe Device Central with Dreamweaver Tips for creating Dreamweaver web content for mobile devices To the top Using Adobe Device Central with Dreamweaver Device Central enables Dreamweaver web designers and developers to preview how Dreamweaver files will look on a wide variety of mobile devices. Device Central uses Opera’s Small-Screen Rendering™ to give designers and developers an impression of how their web page looks on a small screen.

          • PAGE 709

            Working with Fireworks and Dreamweaver Insert a Fireworks image Edit a Fireworks image or table from Dreamweaver Optimize a Fireworks image from Dreamweaver Use Fireworks to modify Dreamweaver image placeholders About Fireworks pop-up menus Edit Fireworks pop-up menus in Dreamweaver Edit a pop-up menu created in Fireworks MX 2004 or earlier Specify launch-and-edit preferences for Fireworks source files Insert Fireworks HTML code in a Dreamweaver document Paste Fireworks HTML code into Dreamweaver Update Fir

          • PAGE 710

            To the top Optimize a Fireworks image from Dreamweaver You can use Dreamweaver to make quick changes to Fireworks images and animations. From within Dreamweaver, you can change optimization settings, animation settings, and the size and area of the exported image. 1. In Dreamweaver, select the desired image and do one of the following: Select Command > Optimize Image Click the Edit Image Settings button in the Property inspector. 2.

          • PAGE 711

            In addition to being extensible and fast to download, the pop-up menus you create with Fireworks give you the following advantages: The menu items can be indexed by search engines. The menu items can be read by screen readers, making your pages more accessible. The code generated by Fireworks complies to standards and can be validated. You can edit Fireworks pop-up menus with Dreamweaver or with Fireworks, but not both. Changes made in Dreamweaver are not preserved in Fireworks.

          • PAGE 712

            In the Common category of the Insert panel, click the Images button and choose Insert Fireworks HTML from the popup menu. 3. Click Browse to select a Fireworks HTML file. 4. If you will have no further use for the file, select Delete File After Insertion. Selecting this option has no effect on the source PNG file associated with the HTML file. Note: If the HTML file is on a network drive, it is permanently deleted—not moved to the Recycle Bin or Trash. 5.

          • PAGE 713

            Legal Notices | Online Privacy Policy 706

          • PAGE 714

            Working with Flash and Dreamweaver Edit a SWF file from Dreamweaver in Flash To the top Edit a SWF file from Dreamweaver in Flash If you have both Flash and Dreamweaver installed, you can select a SWF file in a Dreamweaver document and use Flash to edit it. Flash does not edit the SWF file directly; it edits the source document (FLA file) and re-exports the SWF file. 1. In Dreamweaver, open the Property inspector (Window > Properties). 2.

          • PAGE 715

            Javascript 708

          • PAGE 716

            Applying built-in JavaScript behaviors Using built-in behaviors Apply the Call JavaScript behavior Apply the Change Property behavior Apply the Check Browser behavior Apply the Check Plugin behavior Apply the Control Shockwave or SWF behavior Apply the Drag AP Element behavior Gathering information about the draggable AP element Apply the Go To URL behavior Apply the Jump Menu behavior Apply the Jump Menu Go behavior Apply the Open Browser Window behavior Apply the Play Sound behavior Apply the Popup Messag

          • PAGE 717

            a form). Note: Use this behavior only if you are very familiar with HTML and JavaScript. 1. Select an object and choose Change Property from the Add Behavior menu of the Behaviors panel. 2. From the Type Of Element menu, select an element type to display all the identified elements of that type. 3. Select an element from the Element ID menu. 4. Select a property from the Property menu, or enter the name of the property in the box. 5. Enter the new value for the new property in the New Value field. 6.

          • PAGE 718

            5. Select either Constrained or Unconstrained from the Movement pop-up menu. Unconstrained movement is appropriate for puzzles and other drag-and-drop games. For slider controls and moveable scenery such as file drawers, curtains, and mini-blinds, select constrained movement. 6. For constrained movement, enter values (in pixels) in the Up, Down, Left, and Right boxes. Values are relative to the starting position of the AP element.

          • PAGE 719

            To the top Apply the Go To URL behavior The Go To URL behavior opens a new page in the current window or in the specified frame. This behavior is useful for changing the contents of two or more frames with one click. 1. Select an object and choose Go To URL from the Add Behavior menu of the Behaviors panel. 2. Select a destination for the URL from the Open In list. The Open In list automatically lists the names of all frames in the current frameset as well as the main window.

          • PAGE 720

            To the top Apply the Play Sound behavior This behavior has been deprecated as of Dreamweaver CS5. To the top Apply the Popup Message behavior The Popup Message behavior displays a JavaScript alert with the message you specify. Because JavaScript alerts have only one button (OK), use this behavior to give the user information rather than to present a choice. You can embed any valid JavaScript function call, property, global variable, or other expression in the text.

          • PAGE 721

            Apply the Set Text Of Container behavior The Set Text Of Container behavior replaces the content and formatting of an existing container (that is, any element that can contain text or other elements) on a page with the content you specify. The content can include any valid HTML source code. You can embed any valid JavaScript function call, property, global variable, or other expression in the text. To embed a JavaScript expression, place it inside braces ({}).

          • PAGE 722

            The Show-Hide Elements behavior shows, hides, or restores the default visibility of one or more page elements. This behavior is useful for displaying information as the user interacts with the page. For example, as the user moves the pointer over an image of a plant, you could show a page element giving details about the plant’s growing season and region, how much sun it needs, how large it can grow, and so on.

          • PAGE 723

            To the top Apply the Validate Form behavior The Validate Form behavior checks the contents of specified text fields to ensure that the user has entered the correct type of data. Attach this behavior to individual text fields with the onBlur event to validate the fields as the user is filling out the form, or attach it to the form with the onSubmit event to evaluate several text fields at once when the user clicks the Submit button.

          • PAGE 724

            Using JavaScript behaviors (general instructions) About JavaScript behaviors Behaviors panel overview About events Apply a behavior Change or delete a behavior Update a behavior Download and install third-party behaviors Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article.

          • PAGE 725

            Events Displays a pop-up menu, visible only when an event is selected, of all the events that can trigger the action (this menu appears when you click the arrow button next to the selected event name). Different events appear depending on the object selected. If the events you expect don’t appear, make sure that the correct page element or tag is selected. (To select a specific tag, use the tag selector at the lower-left corner of the Document window.

          • PAGE 726

            To change the order of actions for a given event, select an action and click the Up or Down arrow. Alternatively, you can select the action and cut and paste it into the desired location among the other actions. To delete a behavior, select it and click the Minus (–) button or press Delete. To the top Update a behavior 1. Select an element that has the behavior attached to it. 2. Choose Window > Behaviors and double-click the behavior. 3. Make your changes and click OK in the behavior’s dialog box.

          • PAGE 727

            Accessibility 720

          • PAGE 728

            Dreamweaver and accessibility About accessible content Using screen readers with Dreamweaver Support for operating system accessibility features Optimize the work space for accessible page design Dreamweaver accessibility validation report feature Navigate Dreamweaver using the keyboard Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article.

          • PAGE 729

            Optimize the work space for accessible page design To the top 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. You can activate a dialog box for any of the objects in the Accessibility category in Preferences. 1.

          • PAGE 730

            Navigate frames If your document contains frames, you can use the arrow keys to shift focus to a frame. Select a frame 1. Press Alt+Down Arrow to place the insertion point in the Document window. 2. Press Alt+Up Arrow to select the frame that currently has focus. 3. Continue pressing Alt+Up Arrow to shift focus to the frameset, and then to the parent framesets, if there are nested framesets. 4. Press Alt+Down Arrow to shift focus to a child frameset or a single frame within the frameset. 5.

          • PAGE 731

            Keyboard shortcuts Create a reference sheet for the current shortcut set Customize keyboard shortcuts About keyboard shortcuts and non-U.S. keyboards Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article. Create a reference sheet for the current shortcut set To the top A reference sheet is a record of the current shortcut set.

          • PAGE 732

            1. Select Edit > Keyboard Shortcuts (Windows) or Dreamweaver > Keyboard Shortcuts (Macintosh). 2. From the Commands pop-up menu, select a command category. 3. In the Commands list, select a command and then select a shortcut. 4. Click the Remove Item (-) button. Add a shortcut to a command 1. Select Edit > Keyboard Shortcuts (Windows) or Dreamweaver > Keyboard Shortcuts (Macintosh). 2. From the Commands pop-up menu, select a command category. 3. In the Commands list, select a command.