Manualshelf

Operation Manual

Manuals Brands Adobe Manuals Software Dreamweaver CS6
1 2 3 4 5 6 7 8 9 10
ADOBE
®
DREAMWEAVER
®
Help and tutorials
February 2013

Summary of content (694 pages)

consectetuer adipiscing elit. Praesent aliquam, augue condimentum adipiscing. Aenean at, odio.

justo convallis luctus sagittis. Etiam leo pede, rhoncus consectetuer adipiscing elit. Praesent aliquam, at nonummy quam ante ac quam.

  • PAGE 117

    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. Additionally, the rule provides for 20 pixels of spacing on the right, bottom, and left sides of the main content div.

  • PAGE 118

    H2 level heading

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam.

    justo convallis luctus Note: The above example code is a simplified version of the code that creates the two-column fixed left sidebar layout when you create a new document using the predesigned layouts that come with Dreamweaver.

  • PAGE 119

    page you’re creating. Note: Internet Explorer conditional comments (CCs), which help work around IE rendering issues, remain embedded in the head of the new CSS layout document, even if you select New External File or Existing External File as the location for your layout CSS. 8. (Optional) You can also attach CSS style sheets to your new page (unrelated to the CSS layout) when you create the page. To do this, click the Attach Style Sheet icon above the Attach CSS file pane and select a CSS style sheet.

  • PAGE 120

    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 121

    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 122

    inherit certain properties from body tags, span tags inherit certain properties from paragraph tags, and so on. Thus, if you create the following rule in your style sheet: body { font-family: Arial; font-style: italic; } All paragraph text on your web page (as well as text that inherits properties from the paragraph tag) will be Arial and italic because the paragraph tag inherits these properties from the body tag.

  • PAGE 123

    Rewritten as a single, shorthand property, the same rule might appear as follows: h1 { font: bold 16pt/18pt Arial } When written using shorthand notation, omitted values are automatically assigned their default values. Thus, the previous shorthand example omits the font-variant, font-style, font-stretch, and font-size-adjust tags.

  • PAGE 124

    Create a CSS rule You can create a CSS rule to automate the formatting of HTML tags or a range of text identified by class or ID attributes. 1. Place the insertion point in the document, and then do one of the following to open the New CSS Rule dialog box: Select Format > CSS Styles > New. In the CSS Styles panel (Window > CSS Styles), click the New CSS Rule (+) button located in the lower-right side of the panel.

  • PAGE 125

    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 126

    2. Click . 3. Use the Edit Transition dialog to change previously entered values for the transition. To the top Disable CSS shorthand for Transitions 1. Select Edit > Preferences. 2. Select CSS Styles. 3. In Use Shorthand For, deselect Transition. Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

  • PAGE 127

    Add a property to a CSS rule 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. Do one of the following: If Show Only Set Properties view is selected in the Properties pane, click the Add Properties link and add a property.

  • PAGE 128

    Apply, remove, or rename CSS class styles Apply a CSS class style Remove a class style from a selection Rename a class style 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 [.] preceding their name) and in the Style pop-up menu of the text Property inspector.

  • PAGE 129

    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 The Browser Compatibility Check (BCC) feature helps you locate combinat

  • PAGE 130

    Exclude an issue from the browser compatibility check 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.

  • PAGE 131

    Convert inline CSS to a CSS rule 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. Right-click and select CSS Styles > Convert Inline CSS to Rule. 3.

  • PAGE 132

    Disable/Enable CSS 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. When you disable a CSS property, Dreamweaver adds CSS comment tags and a [disabled] label to the CSS property you’ve disabled.

  • PAGE 133

    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 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. Edits to an external style sheet affect all the documents linked to it.

  • PAGE 134

    Edit a CSS style sheet A CSS style sheet typically includes one or more rules. You can edit an individual rule in a CSS style sheet using the CSS Styles panel, or if you prefer, you can work directly in the CSS style sheet. 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. In the Document window, modify the style sheet as desired, and then save the style sheet.

  • PAGE 135

    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 136

    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 Have a tutorial you would like to share? Adobe recommends Enhanced support for CSS3 in DW CS5.

  • PAGE 137

    Format CSS code Set CSS code formatting preferences Format CSS code in a CSS style sheet manually Format embedded CSS code manually You can set preferences that control the format of your CSS code whenever you create or edit a CSS rule using the Dreamweaver interface. For example, you can set preferences that will place all CSS properties on separate lines, place a blank line between CSS rules, and so on.

  • PAGE 138

    Inspect CSS in Live view 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 139

    Link to an external CSS style sheet 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. You can attach to your pages any style sheet that you create or copy into your site.

  • PAGE 140

    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 The CSS management features in Dreamweaver make it easy for you to move or export CSS rules to different locations. You can move rules from document to document, from the head of a document to an external style sheet, between external CSS files, and more.

  • PAGE 141

    Legal Notices | Online Privacy Policy 134

  • PAGE 142

    Set CSS Styles preferences 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. Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh) and from the Category list select CSS Styles. 2.

  • PAGE 143

    Set CSS heading properties for an entire page 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.) Headings are available for selection in HTML Property inspector. 1. Select Modify > Page Properties, or click the Page Properties button in the text Property inspector. 2.

  • PAGE 144

    Set CSS link properties for an entire page 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.) Note: If you want to customize individual links on a page, you need to create individual CSS rules, and then apply them to the links separately. 1.

  • PAGE 145

    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 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). A toggle button at the top of panel lets you switch between the two modes.

  • PAGE 146

    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 147

    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. Any changes you make in the Properties pane are applied immediately, letting you preview your work as you go.

  • PAGE 148

    Update CSS style sheets in a Contribute site Adobe Contribute users can’t make changes to a CSS style sheet. To change a style sheet for a Contribute site, use Dreamweaver. 1. Edit the style sheet using the Dreamweaver style-sheet-editing tools. 2. Tell all of the Contribute users who are working on the site to publish pages that use that style sheet, then re-edit those pages to view the new style sheet.

  • PAGE 149

    Use Design-Time style sheets 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 150

    Use Dreamweaver sample style sheets Dreamweaver provides sample style sheets that you can apply to your pages or that you can use as starting points to develop your own styles. 1. Open the CSS Styles panel by doing one of the following: Select Window > CSS Styles. Press Shift+F11. 2. In the CSS Styles panel, click the Attach External Style Sheet button. (It’s in the lower-right corner of the panel.) 3. In the Attach External Style Sheet dialog box, click Sample Style Sheets. 4.

  • PAGE 151

    Working with div tags Insert and edit div tags CSS layout blocks Working with AP elements (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. To the top Insert and edit div tags You can create page layouts by manually inserting div tags and applying CSS positioning styles to them.

  • PAGE 152

    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 153

    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 154

    Sample AP Div Page

    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 155

    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 156

    to see all properties. 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 157

    Select multiple AP elements 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 158

    Click an AP element’s border. Control-Shift-click (Windows) or Command-Shift-click (Macintosh) inside an AP element. Click inside an AP element and press Control+A (Windows) or Command+A (Macintosh) to select the contents of the AP element. Press Control+A or Command+A again to select the AP element. 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.

  • PAGE 159

    Resize an AP element 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 160

    Convert between AP elements and tables You can create your layout using AP elements, then convert the AP elements to tables so that your layout can be viewed in older browsers. Before you convert to tables, make sure AP elements do not overlap. Also, make sure you’re in Standard Mode (View > Table Mode > Standard Mode). Convert AP elements to a table 1. Select Modify > Convert > AP Divs To Table. 2.

  • PAGE 161

    Layout and design To learn more, view these recommended resources online. Creating a page layout with Dreamweaver CS6 Adobe Creative Team (Jul. 19, 2012) tutorial In this tutorial, you will learn the basics of webpage design, how to create design thumbnails and wireframes, insert and format new components into a predefined CSS layout, and check for browser compatibility.

  • PAGE 162

    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 163

    Lorem ipsum dolor sit amet, rutrum.

    Phasellus tristique purus a venenatis, tristique in, vulputate

    H2 level heading

    Lorem ipsum dolor sit amet, rutrum, erat nulla fermentum diam, consectetuer adipiscing elit. Praesent aliquam, augue condimentum adipiscing. Aenean at, odio.

    justo convallis luctus sagittis. Etiam leo pede, rhoncus consectetuer adipiscing elit. Praesent aliquam, at nonummy quam ante ac quam.

  • PAGE 164

    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. Additionally, the rule provides for 20 pixels of spacing on the right, bottom, and left sides of the main content div.

  • PAGE 165

    H2 level heading

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam.

    justo convallis luctus Note: The above example code is a simplified version of the code that creates the two-column fixed left sidebar layout when you create a new document using the predesigned layouts that come with Dreamweaver.

  • PAGE 166

    page you’re creating. Note: Internet Explorer conditional comments (CCs), which help work around IE rendering issues, remain embedded in the head of the new CSS layout document, even if you select New External File or Existing External File as the location for your layout CSS. 8. (Optional) You can also attach CSS style sheets to your new page (unrelated to the CSS layout) when you create the page. To do this, click the Attach Style Sheet icon above the Attach CSS file pane and select a CSS style sheet.

  • PAGE 167

    About the Spry framework 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. With Spry, you can use HTML, CSS, and a minimal amount of JavaScript to incorporate XML data into your HTML documents, create widgets such as accordions and menu bars, and add different kinds of effects to various page elements.

  • PAGE 168

    Adding Spry effects Spry effects overview Apply an Appear/Fade effect Apply a Blind effect Apply a Grow/Shrink effect Apply a Highlight effect Apply a Shake effect Apply a Slide effect Apply a Squish effect Add an additional effect Delete an effect To the top Spry effects overview Spry effects are visual enhancements that you can apply to almost any element on an HTML page using JavaScript.

  • PAGE 169

    2. In the Behaviors panel (Window > Behaviors), click the Plus (+) button and select Effects > Blind from the menu. 3. Select the element’s ID from the target element menu. If you already selected an element, choose . 4. In the Effect Duration box, define the time it takes for the effect to occur, in milliseconds. 5. Select the effect you want to apply: Blind Up or Blind Down. 6.

  • PAGE 170

    4. In the Effect Duration field, define the time it takes for the effect to occur, in milliseconds. 5. Select the effect you want to apply: Slide Up or Slide Down. 6. In the Slide Up From box, define the sliding starting point as a percentage or as a pixel number. 7. In the Slide Up To box, define the sliding end point as a percentage or as a positive pixel number. 8. Select Toggle Effect if you want the effect to be reversible, sliding up and down with successive clicks.

  • PAGE 171

    Change page orientation for mobile devices (CS5.5 and later) In most advanced mobile devices, the orientation of a page changes based on how the device is held. When the user holds the phone vertically, the portrait view is displayed. When the user flips the device horizontally, the page readjusts itself to fit the landscape dimensions. In Dreamweaver, the option to view a page in either Portrait or Landscape orientation is available in both Live View and Design View.

  • PAGE 172

    Colors Web-safe colors Use the color picker To the top Web-safe colors In HTML, colors are expressed either as hexadecimal values (for example, #FF0000) or as color names (red). A web-safe color is one that appears the same in Safari and Microsoft Internet Explorer on both Windows and Macintosh systems when running in 256-color mode.

  • PAGE 173

    Creating media queries (CS5.5 and later) 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 174

    If you want to specify a CSS file that you are yet to create, select Create New File. Enter the name of the CSS file. The file is created when you press OK. 8. Click OK. 9. For site-wide media query, a new file is created. Save it. Site-wide media query: For existing pages, ensure that you include the media query file in all the pages in the tag. Example of a media query link where mediaquery_adobedotcom.css is the site-wide media query file for the site www.adobe.

  • PAGE 175

    Designing dynamic pages Dreamweaver and dynamic page design To the top Dreamweaver and dynamic page design Follow these general steps to successfully design and create a dynamic website. 1. Design the page. A key step in designing any website—whether static or dynamic—is the visual design of the page. When adding dynamic elements to a web page, the design of the page becomes crucial to its usability.

  • PAGE 176

    table’s appearance and the repeating region by using the Property inspector and Repeating Region Server Behavior, respectively. Insert a dynamic text object into a page. The text object you insert is an item from a predefined recordset, to which you can apply any of 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.

  • PAGE 177

    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 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. With Dreamweaver you can quickly create this object and load data from a data source (such as an XML file or HTML file) into the object.

  • PAGE 178

    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 179

    Select Do Not Insert HTML. If you select this option, Dreamweaver creates the data set, but does not add any HTML to the page. The data set becomes available from the Bindings panel (Window > Bindings), and you can manually drag pieces of data from the data set to the page. 6. Click Done. Dreamweaver creates the data set and, if you selected a layout option, displays the layout and data placeholders on your page.

  • PAGE 180

    (Optional) Set data set column types by selecting a column, and choosing a column type from the Type pop-up menu. For example, if a column in the data set contains numbers, select the column and choose number from the Type pop-up menu. This option is only important if you want your user to be able to sort the data by that column.

  • PAGE 181

    exact order indicated above (odd, even, hover, select). If the hover rule appears below the select rule in the style sheet, the hover effect won’t appear until the user mouses over a different row. If the hover and select rules appear above the even and odd rules in the style sheet, the even and odd effects will not work at all. You can drag rules in the CSS panel to order them correctly, or you can manipulate the CSS code directly. 4.

  • PAGE 182

    select a column name to add new columns to the spotlight area. By default Dreamweaver populates the spotlight area with data from the first column in the data set. Select a column name and click the up or down arrows to move the column. Moving a column up or down in the Spotlight Columns panel sets the order of the data’s appearance in the spotlight area on the page. 2. (Optional) Set different container types for data in the spotlight area.

  • PAGE 183

    place. But if you want to create a dynamic master table on your own, you have the option of preparing it for association with a detail region later. When you select the Update Detail Regions When Row is Clicked Option (in the Insert Table dialog box), Dreamweaver inserts a spry:setrow tag inside the tag for the repeating row of your dynamic table. This attribute prepares the table as a master table that has the ability of resetting the current row of the data set as the user interacts with the table.

  • PAGE 184

    {name}{category}
    {ds1::name}{ds1::descheader}
    To the top Create a Spry repeat region You can add repeat regions to display your data. A repeat region is a simple data structure that you can format as needed to present your data. For example, you can use a repeat region to display a set of photograph thumbnails one after another within a page layout object such as an AP div element. 1. Select Insert > Spry > Spry Repeat.

  • PAGE 185

    You can also click the Spry Repeat List button in the Spry category in the Insert panel. 2. Select the container tag you want to use: UL, OL, DL, or SELECT. The other options vary depending on which container you choose. If you choose SELECT, you must define the following fields: Display Column: This is what users see when they view the page in their browsers. Value Column: This is the actual value sent to the background server.

  • PAGE 186

    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 To the top About database records Displaying database records

  • PAGE 187

    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 188

    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. If the recordset contains a large number of records, the Move To Last Record server behavior can take a long time to run when the user clicks the link. 4. In the Recordset pop-up menu, select the recordset that contains the records, and click OK.

  • PAGE 189

    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 190

    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 191

    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 192

    a. Select the format from the list, and click Edit. b. Change any of the following parameters in the Currency, Number, or Percent dialog boxes, and click OK. The number of digits to display after the decimal point Whether to place a leading zero in front of fractions Whether to use parentheses or a minus sign for negative values 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.

  • PAGE 193

    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

  • PAGE 194

    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. Then, add text and images to table cells the same way that you add text and images outside of a table. Note: The Layout mode feature is deprecated as of Dreamweaver CS4 and later. Layout mode created page layouts using layout tables, which are no longer recommended by Adobe.

  • PAGE 195

    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. If you don’t do this, the file will not be imported properly, and your data will not be correctly formatted in a table.

  • PAGE 196

    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 197

    2. In the Property inspector (Window > Properties), change properties as necessary. 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.

  • PAGE 198

    word or widest image in the cell, then expand vertically as necessary to accommodate other contents.) Header Formats the selected cells as table header cells. The contents of table header cells are bold and centered by default. You can specify widths and heights as either pixels or percentages, and you can convert from pixels to percentages and back. Note: When you set properties on a column, Dreamweaver changes the attributes of the td tag corresponding to each cell in the column.

  • PAGE 199

    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. Add or edit accessibility values for a table in Code view Edit the appropriate attributes in the code. To quickly locate the tags in the code, click in the table, then select the

    tag in the tag selector at the bottom of the Document window.

  • PAGE 200

    column you are resizing. 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 201

    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 202

    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 203

    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. If you are pasting entire rows or columns into an existing table, the rows or columns are added to the table. If you are pasting an individual cell, the contents of the selected cell are replaced. If you are pasting outside a table, the rows, columns, or cells are used to define a new table. Remove cell content but leave the cells intact 1. Select one or more cells.

  • PAGE 204

    Legal Notices | Online Privacy Policy 197

  • PAGE 205

    Set CSS heading properties for an entire page 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.) Headings are available for selection in HTML Property inspector. 1. Select Modify > Page Properties, or click the Page Properties button in the text Property inspector. 2.

  • PAGE 206

    Set title and encoding properties for a page 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. Select Modify > Page Properties, or click the Page Properties button in the text Property inspector. 2. Choose the Title/Encoding category and set the options.

  • PAGE 207

    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 208

    Update CSS style sheets in a Contribute site Adobe Contribute users can’t make changes to a CSS style sheet. To change a style sheet for a Contribute site, use Dreamweaver. 1. Edit the style sheet using the Dreamweaver style-sheet-editing tools. 2. Tell all of the Contribute users who are working on the site to publish pages that use that style sheet, then re-edit those pages to view the new style sheet.

  • PAGE 209

    Use Design-Time style sheets 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 210

    Use Dreamweaver sample style sheets Dreamweaver provides sample style sheets that you can apply to your pages or that you can use as starting points to develop your own styles. 1. Open the CSS Styles panel by doing one of the following: Select Window > CSS Styles. Press Shift+F11. 2. In the CSS Styles panel, click the Attach External Style Sheet button. (It’s in the lower-right corner of the panel.) 3. In the Attach External Style Sheet dialog box, click Sample Style Sheets. 4.

  • PAGE 211

    Use a tracing image to design a page 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. Select Modify > Page Properties, or click the Page Properties button in the text Property inspector. 2. Choose the Tracing Image category and set the options. Tracing Image Specifies an image to use as a guide for copying a design.

  • PAGE 212

    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 To the top How frames and framesets work A frame is a region

  • PAGE 213

    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. The phrase “a page that uses frames,” for example, usually refers to a set of frames and the documents that initially appear in those frames.

  • PAGE 214

    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 215

    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 216

    thin gray line and is identified by a frame name. 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.

  • PAGE 217

    2. Select File > Open in Frame. 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 218

    Border options are Yes (show borders), No (hide borders), and Default; most browsers default to showing borders, unless the parent frameset has Borders set to No. A border is hidden only when all frames that share the border have Borders set to No, or when the parent frameset’s Borders property is set to No and the frames sharing the border have Borders set to Default. Border Color Sets a border color for all of the frame’s borders.

  • PAGE 219

    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 220

    2. Do one of the following: In the Document window, type or insert the content just as you would for an ordinary document. Select Window > Code Inspector, place the insertion point between the body tags that appear inside the noframes tags, then type the HTML code for the content. 3. Select Modify > Frameset > Edit NoFrames Content again to return to the normal view of the frameset document.

  • PAGE 221

    Using visual aids for layout Set rulers Set layout guides Using guides with templates Use the layout grid Use a tracing image To the top Set rulers Rulers help you measure, organize, and plan your layout. They can appear on the left and top borders of the page, marked in pixels, inches, or centimeters. To toggle rulers on and off, select View > Rulers > Show. To change the origin, drag the ruler-origin icon anywhere on the page.

  • PAGE 222

    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 223

    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 224

    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 To the top About Spry widgets A Spry widget is a page element that provides a richer user experience by enabling user interaction. A Spry widget comprises the following parts: Widget structure An HTML code block that defines the structural composition of the widget.

  • PAGE 225

    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. To the top Get more widgets There are many more web widgets available than the Spry widgets that install with Dreamweaver.

  • PAGE 226

    Working with div tags Insert and edit div tags CSS layout blocks Working with AP elements (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. To the top Insert and edit div tags You can create page layouts by manually inserting div tags and applying CSS positioning styles to them.

  • PAGE 227

    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 228

    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 229

    Sample AP Div Page

    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 230

    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 231

    to see all properties. 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 232

    Select multiple AP elements 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 233

    Click an AP element’s border. Control-Shift-click (Windows) or Command-Shift-click (Macintosh) inside an AP element. Click inside an AP element and press Control+A (Windows) or Command+A (Macintosh) to select the contents of the AP element. Press Control+A or Command+A again to select the AP element. 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.

  • PAGE 234

    Resize an AP element 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 235

    Convert between AP elements and tables You can create your layout using AP elements, then convert the AP elements to tables so that your layout can be viewed in older browsers. Before you convert to tables, make sure AP elements do not overlap. Also, make sure you’re in Standard Mode (View > Table Mode > Standard Mode). Convert AP elements to a table 1. Select Modify > Convert > AP Divs To Table. 2.

  • PAGE 236

    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 Pages contain elements that describe the information on the page, which is used by search browsers. You can set the properties of head elements to control how your pages are identified.

  • PAGE 237

    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 238

    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 239

    external. 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. Rev Specifies a reverse relationship (the opposite of Rel) between the current document and the document in the Href box. Possible values are the same as those for Rel.

  • PAGE 240

    Working with the Spry Accordion widget About the Accordion widget Insert and edit the Accordion widget Customize the Accordion widget 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. Site visitors hide or reveal the content stored in the accordion by clicking the tab of the panel. The panels of the accordion expand or contract accordingly as the visitor clicks different tabs.

  • PAGE 241

    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 242

    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 243

    Working with the Spry Collapsible Panel widget About the Collapsible Panel widget Insert and edit the Collapsible Panel widget Customize the Collapsible Panel widget To the top About the Collapsible Panel widget A Collapsible Panel widget is a panel that can store content in a compact space. Users hide or reveal the content stored in the Collapsible Panel by clicking the tab of the widget. The following example shows a Collapsible Panel widget, expanded and collapsed: A. Expanded B.

  • PAGE 244

    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. For a more advanced list of styling tasks, see www.adobe.com/go/learn_dw_sprycollapsiblepanel_custom. All CSS rules in the topics below refer to the default rules located in the SpryCollapsiblePanel.css file. Dreamweaver saves the SpryCollapsiblePanel.

  • PAGE 245

    Legal Notices | Online Privacy Policy 238

  • PAGE 246

    Working with the Spry Tabbed Panels widget About the Tabbed Panels widget Insert and edit the Tabbed Panels widget Customize the Tabbed Panels widget 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. Site viewers hide or reveal the content stored in the Tabbed Panels by clicking the tab of the panel they want to access. The panels of the widget open accordingly as the visitor clicks different tabs.

  • PAGE 247

    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 248

    default value.) Background color of panel tabs when the mouse pointer moves over them .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 .TabbedPanels CSS rule by opening the SpryTabbedPanels.css file.

  • PAGE 249

    Working with the Spry Tooltip widget About the Tooltip widget Insert the Tooltip widget Edit Tooltip widget options 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. You can also set tooltips to stay open for longer periods of time so that users can interact with content inside the tooltip.

  • PAGE 250

    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. Follow Mouse When selected, this option causes the tooltip to follow the mouse while hovering over the trigger element.

  • PAGE 251

    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 To the top About the Validation Checkbox widget A Spry Validation Checkbox widget is a check box or group of check boxes in an HTML form that display valid or invalid states when the user selects or fails to select a check box.

  • PAGE 252

    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. Change Validates as the user makes selections.

  • PAGE 253

    Working with the Spry Validation Confirm widget About the Validation Confirm widget Insert and edit the Validation Confirm widget Customize the Confirm widget To the top About the Validation Confirm widget The Validation Confirm Widget is a text field or a password form field that displays valid or invalid states when a user enters a value that does not match the value of a similar field in the same form.

  • PAGE 254

    Display widget states in Design view 1. Select a Validation Confirm 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 255

    input.confirmValidState Background color of widget in invalid state Background color of widget in focus input.confirmRequiredState, .confirmRequiredState input, input.confirmInvalidState, .confirmInvalidState input .confirmFocusState input, input.

  • PAGE 256

    Working with the Spry Validation Password widget About the Validation Password widget Insert and edit the Validation Password widget Customize the Validation Password widget To the top About the Validation Password widget The Spry Validation Password widget is a password text field that you can use to enforce password rules (for example, number and type of characters). The widget provides warning or error messages based upon a user's input.

  • PAGE 257

    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. Specify when validation occurs You can set the point at which validation occurs—when the site visitor clicks outside the widget, as the visitor types, or when the visitor tries to submit the form. 1.

  • PAGE 258

    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 .passwordRequiredMsg, .passwordMinCharsState .

  • PAGE 259

    Page content and assets 252

  • PAGE 260

    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 Dreamweave

  • PAGE 261

    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 262

    Dreamweaver is in sync with the original Photoshop file, both of the arrows in the icon are green. When the web-ready image is out of sync with the original Photoshop file, one of the icon’s arrows turns read. To update a Smart Object with the current contents of the original Photoshop file, select the Smart Object in the Document window, and then click the Update from Original button in the Property inspector. Note: You do not need Photoshop installed to make the update from Dreamweaver.

  • PAGE 263

    modified after the creation of the web image in Dreamweaver. the Property inspector to sync the two images. 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.

  • PAGE 264

    Press Control (Windows) or Command (Macintosh) as you double-click the file. Right-click (Windows) or Control-click (Macintosh) an image, choose Edit Original With from the context menu, and then choose Photoshop. Note: This assumes that Photoshop is set as the primary external image editor for PSD image files. You may also want to set Photoshop as the default editor for JPEG, GIF, and PNG file types. 2. Edit the file in Photoshop. 3.

  • PAGE 265

    Working with the Spry Menu Bar widget About the Menu Bar widget Insert and edit the Menu Bar widget Customize the Menu Bar widget To the top About the Menu Bar widget A Menu Bar widget is a set of navigational menu buttons that display submenus when a site visitor hovers over one of the buttons. Menu Bars let you display a large amount of navigational information in a compact space, and also give visitors to the site a sense of what is available on the site without having to browse it extensively.

  • PAGE 266

    1. Select a Menu Bar widget in the Document window. 2. In the Property inspector, select the name of the main menu item to which you want to add the submenu. 3. Click the plus button above the second column. 4. (Optional) Rename the new submenu item by changing the default text in either the Document window or the Text box of the Property inspector.

  • PAGE 267

    Change the orientation of a Menu Bar widget You can change the orientation of a Menu Bar widget from horizontal to vertical, and vice versa. All you need to do is alter the HTML code for the menu bar and make sure you have the correct CSS file in your SpryAssets folder. The following example changes a horizontal Menu Bar widget to a vertical Menu Bar widget. 1. In Dreamweaver, open the page that contains a horizontal Menu Bar widget. 2.

  • PAGE 268

    a:focus Menu Bar item color when mouse pointer moves over it ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemHover Submenu item color when mouse pointer moves over it ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover color: #FFF; color: #FFF; Change the background color of a menu item The CSS attached to the tag contains the information for a menu item’s background color.

  • PAGE 269

    Creating and opening documents About creating Dreamweaver documents Dreamweaver file types Create a layout using a blank page Create a blank template Create a page based on an existing template Create a page based on a Dreamweaver sample file Create other kinds of pages Save and revert documents Set default document type and encoding Converting HTML5 to an older doctype Set the default file extension of new HTML documents Open and edit existing documents Open Related Files Open Dynamically-Related Files Cle

  • PAGE 270

    CFML ColdFusion Markup Language files have a .cfm extension. They are used to process dynamic pages. PHP Hypertext Preprocessor files have a .php extension and are used to process dynamic pages. To the top Create a layout using a blank page You can create a page that contains a predesigned CSS layout, or create a completely blank page and then create a layout of your own. 1. Select File > New. 2.

  • PAGE 271

    8. Click Preferences if you want to set default document preferences, such as a document type, encoding, and a file extension. 9. Click Get More Content if you want to open Dreamweaver Exchange where you can download more page design content. 10. Click the Create button. 11. Save the new document (File > Save). 12. In the dialog box that appears, navigate to the folder where you want to save the file. It’s a good idea to save your file in a Dreamweaver site. 13.

  • PAGE 272

    7. (Optional) You can also attach CSS style sheets to your new page (unrelated to the CSS layout) when you create the page. To do this, click the Attach Style Sheet icon above the Attach CSS file pane and select a CSS style sheet. 8. Select Enable InContext Editing if you want to create a page that becomes InContext Editing-enabled as soon as you save it. An InContext Editing-enabled page must have at least one div tag that can be specified as an editable region.

  • PAGE 273

    Create a page based on a Dreamweaver sample file To the top Dreamweaver comes with several professionally developed CSS design files and starter pages for mobile applications. You can use these sample files as starting points for designing pages in your sites. When you create a document based on a sample file, Dreamweaver creates a copy of the file. You can preview a sample file and read a brief description of a document’s design elements in the New Document dialog box.

  • PAGE 274

    In the dialog box that appears, navigate to the folder where you want to save the file. 3. In the File Name box, type a name for the file and click Save. Revert to the last saved version of a document 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.

  • PAGE 275

    forms in one document. For more information on Unicode Normalization and the specific forms that can be used, see the Unicode website at www.unicode.org/reports/tr15. To the top Converting HTML5 to an older doctype Using File > Convert to switch from HTML5 to an older DOCTYPE doesn’t remove HTML5 elements or attributes. Only the DOCTYPE changes, and trailing slashes (for XHTML) are inserted.

  • PAGE 276

    Note: If a related file is missing, Dreamweaver still displays the corresponding button in the Related Files toolbar. If you click the button, however, Dreamweaver does not display anything. Dreamweaver supports the following kinds of related files: Client-side script files Server Side Includes Spry data set sources (XML and HTML) External CSS style sheets (including nested style sheets) For a video overview from the Dreamweaver engineering team about working with related files, see www.adobe.

  • PAGE 277

    To the top Open Dynamically-Related Files The Dynamically-Related Files feature extends the functionality of the Related Files feature by allowing you to see the related files of dynamic pages in the Related Files toolbar. Specifically, the Dynamically-Related Files feature lets you see the numerous dynamic includes that are required to generate the runtime code for popular open-source PHP Content Management System (CMS) frameworks such as WordPress, Drupal and Joomla!.

  • PAGE 278

    4. Select the types of files you want to see in the Related Files toolbar. By default, Dreamweaver selects all Related Files. 5. To create a custom filter, click the Filter Related Files icon and choose Custom Filter. The Custom Filter dialog only allows for the filtering of exact file names (style.css), file extensions (.php), and wildcard expressions using asterisks (*menu*). You can filter on multiple wildcard expressions by separating each expression with a semi-colon (for example, style.css;*.js;*tpl.

  • PAGE 279

    Save frame and frameset files XHTML code Understanding document encoding Clean up code Start an external editor for media files Work with files in the Files panel Switch between views in the Document window Navigate to related code Previewing pages in Dreamweaver Related files tutorial www.adobe.com/go/dwcs5drf_en Clean up code Import Microsoft Office documents (Windows only) Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

  • PAGE 280

    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 281

    Size Sets the font size for the targeted rule. Text Color Sets the selected color as the font color in the targeted rule. Select a web-safe color by clicking the color box, or enter a hexadecimal value (for example, #FF0000) in the adjacent text field. Bold Adds the bold property to the targeted rule. Italic Adds the italics property to the targeted rule. Left, Center, and Right Align Adds the respective alignment properties to the targeted rule.

  • PAGE 282

    Rename a class from the HTML Property inspector To the top Dreamweaver displays all of the classes available to your page in the Class menu of the HTML Property inspector. You can rename styles in this list by selecting the Rename option at the end of the list of class styles. 1. Select Rename from the text Property inspector Style pop-up menu. 2. Select the style you want to rename from the Rename Style pop-up menu. 3. Enter a new name in the New Name text field and click OK.

  • PAGE 283

    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 284

    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. Right-to-left table To the top Div properties Use Direction to specify the Div direction in the Properties. Div direction Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

  • PAGE 285

    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 286

    Dreamweaver tiles (repeats) the background image if it does not fill the entire window, just as browsers do. (To prevent the background image from tiling, use Cascading Style Sheets to disable image tiling.) Background Sets a background color for your page. Click the Background color box and select a color from the Color Picker. Text Specifies the default color to render fonts with. Link Specifies the color to apply to link text. Visited Links Specifies the color to apply to visited links.

  • PAGE 287

    Adding and modifying images About images Insert an image Align 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 288

    Select Data Source to choose a dynamic image source. Click the Sites And Servers button to choose an image file in a remote folder of one of your Dreamweaver sites. 3. Browse to select the image or content source you want to insert. If you are working in an unsaved document, Dreamweaver generates a file:// reference to the image file. When you save the document anywhere in the site, Dreamweaver converts the reference to a document-relative path.

  • PAGE 289

    Map Name and Hotspot tools Allow you to label and create a client-side image map. V Space and H Space Add space, in pixels, along the sides of the image. V Space adds space along the top and bottom of an image. H Space adds space along the left and right of an image. Target Specifies the frame or window in which the linked page should load. (This option is not available when the image isn’t linked to another file.) The names of all the frames in the current frameset appear in the Target list.

  • PAGE 290

    Middle Aligns the middle of the image with the baseline of the current line. Text Top Aligns the top of the image with the top of the tallest character in the text line. Absolute Middle Aligns the middle of the image with the middle of the text in the current line. Absolute Bottom Aligns the bottom of the image with the bottom of the line of text (which includes descenders, as in the letter g). Left Places the selected image on the left margin, wrapping text around it to the right.

  • PAGE 291

    2. Select Insert > Image Objects > Image Placeholder. 3. For Name (Optional), enter text you want to appear as a label for the image placeholder. Leave the text box blank if you do not want a label to appear. The name must begin with a letter and can contain only letters and numbers; spaces and high ASCII characters are not allowed. 4. For Width and Height (Required), type a number to set the image size in pixels. 5.

  • PAGE 292

    spoken out loud. In some browsers, this text also appears when the pointer is over the image. Create Starts Fireworks to create a replacement image. The Create button is disabled unless Fireworks is also installed on your computer. Reset Size Resets the W and H values to the original size of the image. Color Specifies a color for the image placeholder. To the top Edit images in Dreamweaver You can resample, crop, optimize, and sharpen images in Dreamweaver.

  • PAGE 293

    Dreamweaver, or edit the file in an external image-editing application. Optimize an image You can optimize images in your web pages from within Dreamweaver. 1. Open the page containing the image you want to optimize, select the image, and do either of the following: Click the Edit Image Settings button in the image Property inspector. Select Modify > Image > Optimize. 2. Make your edits in the Image Optimization dialog box and click OK.

  • PAGE 294

    Preload Rollover Image Preloads the images in the browser’s cache so no delay occurs when the user rolls the pointer over the image. Alternate Text (Optional) Text to describe the image for viewers using a text-only browser. When clicked, Go to URL The file that you want to open when a user clicks the rollover image. Enter the path or click Browse and select the file.

  • PAGE 295

    Category list on the left. Select Edit > Edit with External Editor and select File Types/Editors. 2. In the File Types/Editors Preferences dialog box, click the Add (+) button above the Extensions list. A text box appears in the Extensions list. 3. Type the file extension of the file type you want to start an editor for. 4. To select an external editor for the file type, click the Add (+) button above the Editors list. 5.

  • PAGE 296

    About assets and libraries About assets About library items 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. You can also drag an asset directly to insert it in a page of the current document. You obtain assets from various sources.

  • PAGE 297

    About the Spry framework 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. With Spry, you can use HTML, CSS, and a minimal amount of JavaScript to incorporate XML data into your HTML documents, create widgets such as accordions and menu bars, and add different kinds of effects to various page elements.

  • PAGE 298

    Adding Sound Audio file formats Link to an audio file Embed a sound file 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. Some factors to consider before deciding on a format and method for adding sound are its purpose, your audience, file size, sound quality, and differences in browsers. Note: Sound files are handled very differently and inconsistently by different browsers.

  • PAGE 299

    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. These values determine the size at which the audio controls are displayed in the browser.

  • PAGE 300

    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 To the top Insert and edit media objects In addition to SWF and FLV files, you can insert QuickTime or Shockwave movies, Jav

  • PAGE 301

    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 302

    You can also add a Design Note to a media object from the Files panel by selecting the file, revealing the context menu, and choosing Design Notes from the context menu. 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 303

    V Space and H Space Specify the amount of white space in pixels above, below, and on both sides of the plug-in. Border Specifies the width of the border around the plug-in. Parameters Opens a dialog box for entering additional parameters to pass to the plug-in. Many plug-ins respond to special parameters. You can also view the attributes assigned to the selected plug-in by clicking the Attribute button. You can edit, add, and delete attributes such as width and height in this dialog box.

  • PAGE 304

    Align Determines how the object is aligned on the page. Parameters Opens a dialog box for entering additional parameters to pass to the ActiveX object. Many ActiveX controls respond to special parameters. Src Defines the data file to be used for a plug-in if the Embed option is turned on. If you don’t enter a value, Dreamweaver attempts to determine the value from the ActiveX properties entered already.

  • PAGE 305

    2. Open the dialog box using one of the following methods: Right-click (Windows) or Control-click (Macintosh) the object, and select Parameters from the context menu. Open the Property inspector if it isn’t already open, and click the Parameters button found in the lower half of the Property inspector. (Make sure the Property inspector is expanded.) 3. Click the Plus (+) button and enter the parameter name and value in the appropriate columns.

  • PAGE 306

    Adding video Embed videos in web pages (HTML5) Inserting FLV files 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. Dreamweaver supports code hints for adding video and audio tags. Live View renders the video, providing a preview of the video that you are embedding in the web page.

  • PAGE 307

    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. For ASP pages, Dreamweaver uses nested object/embed code instead of nested object code when inserting SWF or FLV files.

  • PAGE 308

    Auto Rewind Specifies whether the playback control returns to starting position after the video finishes playing. Buffer Time Specifies the time, in seconds, required for buffering before the video starts playing. The default buffer time is set to 0 so that the video starts playing instantly after the Play button is clicked. (If Auto Play is selected, the video starts playing as soon as a connection is made with the server.

  • PAGE 309

    Viewing problems when previewing pages locally Because of security updates in Dreamweaver CS4, you cannot use the Preview in Browser command to test a page with an embedded FLV unless you define a local testing server in your Dreamweaver site definition and use the testing server to preview the page. Normally, you require a testing server only if you are developing pages with ASP, ColdFusion, or PHP (see Set up your computer for application development).

  • PAGE 310

    Adding web widgets A web widget is a web page component comprised of HTML, CSS, and JavaScript. Examples of web widgets include accordions, tabbed panels, and calendars. You can make your own personal selection of web widgets available in Dreamweaver by using the Adobe Widget Browser—an AIR application that lets you browse, configure, and preview widgets using a visual interface. 1. Select Insert > Widget. 2. In the Widget dialog box, select a widget and preset (if applicable) and click OK.

  • PAGE 311

    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 To the top Task automation The History panel records the steps you take when you complete a task. Automate a frequently performed task by replaying those steps from the History panel or creating a new command that performs the steps automatically.

  • PAGE 312

    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. Set the number of steps that the History panel retains and shows The default number of steps is sufficient for most users’ needs.

  • PAGE 313

    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 314

    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 315

    Create a link to a Word or Excel document You can insert a link to a Microsoft Word or Excel document in an existing page. 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. Select Create A Link, and then click OK. 4. If the document you are linking to is located outside of your site’s root folder, Dreamweaver prompts you to copy the document to the site root.

  • PAGE 316

    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 To the top Managing favorite assets The complete list of all recognized assets list can become cumbersome for some large sites. You can add frequently used assets to a Favorites list, group related assets together, give them nicknames to remind yourself what they’re for, and find them easily in the Assets panel.

  • PAGE 317

    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. Select the Favorites option at the top of the panel. 3.

  • PAGE 318

    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 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. With Dreamweaver you can quickly create this object and load data from a data source (such as an XML file or HTML file) into the object.

  • PAGE 319

    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 320

    Select Do Not Insert HTML. If you select this option, Dreamweaver creates the data set, but does not add any HTML to the page. The data set becomes available from the Bindings panel (Window > Bindings), and you can manually drag pieces of data from the data set to the page. 6. Click Done. Dreamweaver creates the data set and, if you selected a layout option, displays the layout and data placeholders on your page.

  • PAGE 321

    (Optional) Set data set column types by selecting a column, and choosing a column type from the Type pop-up menu. For example, if a column in the data set contains numbers, select the column and choose number from the Type pop-up menu. This option is only important if you want your user to be able to sort the data by that column.

  • PAGE 322

    exact order indicated above (odd, even, hover, select). If the hover rule appears below the select rule in the style sheet, the hover effect won’t appear until the user mouses over a different row. If the hover and select rules appear above the even and odd rules in the style sheet, the even and odd effects will not work at all. You can drag rules in the CSS panel to order them correctly, or you can manipulate the CSS code directly. 4.

  • PAGE 323

    select a column name to add new columns to the spotlight area. By default Dreamweaver populates the spotlight area with data from the first column in the data set. Select a column name and click the up or down arrows to move the column. Moving a column up or down in the Spotlight Columns panel sets the order of the data’s appearance in the spotlight area on the page. 2. (Optional) Set different container types for data in the spotlight area.

  • PAGE 324

    place. But if you want to create a dynamic master table on your own, you have the option of preparing it for association with a detail region later. When you select the Update Detail Regions When Row is Clicked Option (in the Insert Table dialog box), Dreamweaver inserts a spry:setrow tag inside the tag for the repeating row of your dynamic table. This attribute prepares the table as a master table that has the ability of resetting the current row of the data set as the user interacts with the table.

  • PAGE 325

    {name}{category}
    {ds1::name}{ds1::descheader}
    To the top Create a Spry repeat region You can add repeat regions to display your data. A repeat region is a simple data structure that you can format as needed to present your data. For example, you can use a repeat region to display a set of photograph thumbnails one after another within a page layout object such as an AP div element. 1. Select Insert > Spry > Spry Repeat.

  • PAGE 326

    You can also click the Spry Repeat List button in the Spry category in the Insert panel. 2. Select the container tag you want to use: UL, OL, DL, or SELECT. The other options vary depending on which container you choose. If you choose SELECT, you must define the following fields: Display Column: This is what users see when they view the page in their browsers. Value Column: This is the actual value sent to the background server.

  • PAGE 327

    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 About editing content in template-based documents To the top Dreamweaver templates specify regions that are locked (uneditable) and others that are editable for template-based documents. In pages based on templates, template users can edit content in editable regions only.

  • PAGE 328

    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. Click the Minus (–) button to delete the selected repeating region entry. Click the Down Arrow button to move the selected entry down one position. Click the Up Arrow button to move the selected entry up one position.

  • PAGE 329

    Import Microsoft Office documents (Windows only) 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. The file’s size, after Dreamweaver receives the converted HTML, must be less than 300K. Instead of importing the entire contents of a file, you can also paste portions of a Word document and preserve the formatting.

  • PAGE 330

    Import tabular data You can import tabular data into your document by first saving the files (such as Microsoft Excel files or database files) as delimited text files. You can import and format tabular data and import text from Microsoft Word HTML documents. You can also add text from Microsoft Excel documents to a Dreamweaver document by importing the contents of the Excel file into a web page. 1. Select File > Import > Import Tabular Data, or Insert > Table Objects > Import Tabular Data. 2.

  • PAGE 331

    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 To the top About importing custom tags into Dreamweaver You can import custom tags into Dreamweaver so that they become an integral part of the authoring environment.

  • PAGE 332

    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. The URI (Uniform Resource Identifier) often consists of the URL of the organization maintaining the tag library.

  • PAGE 333

    Insert dates Dreamweaver provides a convenient Date object, which inserts the current date in whatever format you prefer (with or without the time) and provides the option of updating that date whenever you save the file. Note: The dates and times shown in the Insert Date dialog box are not the current date, nor do they reflect the dates/times that a visitor sees when they display your site. They are examples only of the way you want to display this information. 1.

  • PAGE 334

    Inserting SWF files About FLA, SWF, and FLV file types Insert and preview SWF files Insert FlashPaper documents To the top About FLA, SWF, and FLV file types Before you use Dreamweaver to insert content created with Adobe Flash, you should be familiar with the following different file types: FLA file (.fla) The source file for any project and created in the Flash authoring tool. This type of file can only be opened in Flash (not in Dreamweaver or in browsers).

  • PAGE 335

    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 336

    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 To the top About Dreamweaver tag libraries A tag library, in Dreamweaver, is a collection of tags of a particular type, along with information about how Dreamweaver should format the tags.

  • PAGE 337

    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 338

    Modify font combinations Modify font combinations Add a new combination to the font list 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. A browser uses the first font in the combination that is installed on the user’s system; if none of the fonts in the combination is installed, the browser displays the text as specified by the user’s browser preferences.

  • PAGE 339

    Set title and encoding properties for a page 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. Select Modify > Page Properties, or click the Page Properties button in the text Property inspector. 2. Choose the Title/Encoding category and set the options.

  • PAGE 340

    Spell check a web page 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. Additionally, the Check Spelling command ignores HTML tags and attribute values. Note: Dreamweaver can only spell check the file that is currently open in the Document window. It cannot spell check all of the files in a site simultaneously.

  • PAGE 341

    Use HTML Formatting Format paragraphs Change the color of text Align text Indent text Apply font styles While CSS is the preferred method for formatting text, Dreamweaver still lets you format text with HTML. To the top Format paragraphs Use the Format pop-up menu in the HTML Property inspector or the Format > Paragraph Format submenu to apply the standard paragraph and heading tags. 1. Place the insertion point in the paragraph, or select some of the text in the paragraph. 2.

  • PAGE 342

    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. Use the Format menu to set or change font characteristics for selected text.

  • PAGE 343

    Use horizontal rules Create a horizontal rule Modify a horizontal rule 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. In the Document window, place the insertion point where you want to insert a horizontal rule. 2. Select Insert > HTML > Horizontal Rule. To the top Modify a horizontal rule 1. In the Document window, select the horizontal rule. 2.

  • PAGE 344

    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 345

    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. Or, Dreamweaver may insert code into the document, or open a tag editor or a panel for you to specify information before the code is inserted.

  • PAGE 346

    2. When you see a horizontal blue line across the top of the Document window, drop the Insert panel into position. Note: The horizontal Insert bar is also a default part of the Classic workspace. To switch to the Classic workspace, select Classic from the workspace switcher in the Application bar. To the top Return the horizontal Insert bar to a panel group 1. Click the horizontal Insert bar’s gripper (on the left side of the Insert bar) and drag the bar to the place where your panels are docked. 2.

  • PAGE 347

    File management 340

  • PAGE 348

    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 349

    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 350

    To the top Use WebDAV to check in and check out files Dreamweaver can connect to a server that uses WebDAV (Web-based Distributed Authoring and Versioning), which is a set of 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.

  • PAGE 351

    4. Set access options as follows: 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).

  • PAGE 352

    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 353

    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 354

    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 355

    A red line through the file or folder icon appears or disappears, indicating that the folder is cloaked or uncloaked. 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.

  • PAGE 356

    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 357

    this task. 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 358

    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 359

    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 360

    you can close that to improve performance. 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.

  • PAGE 361

    Save a log of the last file transfer 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 362

    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 363

    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 364

    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 365

    Right-click (Windows) or Control-click (Macintosh) any file or folder, then select Refresh. (Dreamweaver sites only) Click the Refresh button in the Files panel toolbar (this option refreshes both panes). Note: Dreamweaver 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.

  • PAGE 366

    Testing Server and entered a URL prefix for that server, or if you are running the report for more than one site, this option is not available. Other Location if you want to enter a path in the text box. 5. Click OK to save your settings. Dreamweaver highlights the files that were modified within the selected time frame in the Files panel. 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.

  • PAGE 367

    2. Navigate to a file, then do any of the following: Open files in Dreamweaver or another application Rename files Copy files 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.

  • PAGE 368

    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 369

    Set download time and size preferences Dreamweaver calculates size based on the entire contents of the page, including all linked objects, such as images and plug-ins. Dreamweaver estimates download time based on the connection speed entered in Status Bar preferences. Actual download time varies depending on general Internet conditions. A good guideline to use when checking download times for a particular web page is the 8-second rule.

  • PAGE 370

    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 371

    To the top 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 372

    If you use Dreamweaver to delete a file that has an associated Design Notes file, Dreamweaver deletes the Design Notes file too; so usually orphan Design Notes files occur only if you delete or rename a file outside of Dreamweaver. Note: If you deselect the Maintain Design Notes option before you click Clean Up, Dreamweaver deletes all Design Notes files for your site.

  • PAGE 373

    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 374

    8. Verify the action that will be performed for each file. 9. To change the action for a particular file, select the file, and then click one of the action icons at the bottom of the preview window. Compare The Compare action works only if you installed and specified a 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.

  • PAGE 375

    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 376

    Linking and navigation To learn more, view these recommended resources online. Customizing a Spry Menu Bar David Powers (Jan. 1, 2011) tutorial See how you can turn a standard menu bar into something much more elegant by careful planning and a reasonable understanding of CSS.

  • PAGE 377

    About linking and navigation About links Absolute, document-relative, and site root-relative paths To the top About links After you’ve set up a Dreamweaver site to store your website documents and have created HTML pages, you’ll want to create connections from your documents to other documents. Dreamweaver provides several ways to create links to documents, images, multimedia files, or downloadable software.

  • PAGE 378

    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 379

    Image maps About image maps Insert client-side image maps Modify image map hotspots 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). Client-side image maps store the hypertext link information in the HTML document—not in a separate map file as server-side image maps do. When a site visitor clicks a hotspot in the image, the associated URL is sent directly to the server.

  • PAGE 380

    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 381

    Jump menus About jump menus Insert a jump menu Edit jump menu items Troubleshooting jump menus 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. You can create links to documents in your website, links to documents on other websites, e-mail links, links to graphics, or links to any file type that can be opened in a browser. Each option in a jump menu is associated with a URL.

  • PAGE 382

    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 383

    Link to an external CSS style sheet 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. You can attach to your pages any style sheet that you create or copy into your site.

  • PAGE 384

    Navigation bars About navigation bars 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 385

    Set CSS link properties for an entire page 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.) Note: If you want to customize individual links on a page, you need to create individual CSS rules, and then apply them to the links separately. 1.

  • PAGE 386

    Troubleshooting links Find broken, external, and orphaned links Fix broken links To the top Find broken, external, and orphaned links Use the Check Links feature to search for broken links and orphaned files (files that still exist in the site but that aren’t linked to by any other files in the site). You can search an open file, a portion of a local site, or an entire local site.

  • PAGE 387

    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 388

    Coding 381

  • PAGE 389

    Collapsing code About collapsing code Collapse and expand code fragments Paste and move collapsed code fragments 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. For example, to see all of the CSS rules in the head tag that apply to a div tag farther down the page, you can collapse everything between the head tag and the div tag so that you can see both sections of code at once.

  • PAGE 390

    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 391

    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 To the top About editing code in Des

  • PAGE 392

    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 393

    2. Press Control+T (Windows) or Command+T (Macintosh). The Quick Tag Editor opens in Insert HTML mode. 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.

  • PAGE 394

    The Code Hints Preferences dialog box appears. 2. To disable the hints menu, deselect the Enable Code Hints option. 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.

  • PAGE 395

    Edit a script 1. Select the script marker. 2. In the Property inspector, click the Edit button. The script appears in the Script Properties dialog box. If you linked to an external script file, the file opens in Code view, where you can make your edits. Note: If there is code between the script tags, the Script Properties dialog box opens even if there is also a link to an external script file. 3. In the Language box, specify either JavaScript or VBScript as the language of the script. 4.

  • PAGE 396

    Format CSS code Set CSS code formatting preferences Format CSS code in a CSS style sheet manually Format embedded CSS code manually You can set preferences that control the format of your CSS code whenever you create or edit a CSS rule using the Dreamweaver interface. For example, you can set preferences that will place all CSS properties on separate lines, place a blank line between CSS rules, and so on.

  • PAGE 397

    General information about coding in Dreamweaver Supported languages Invalid markup Automatic code modification XHTML code Regular expressions Server behavior code To the top Supported languages In addition to text-editing capabilities, Adobe® Dreamweaver® provides various features, such as code hints, to help you code in the following languages: HTML XHTML CSS JavaScript ColdFusion Markup Language (CFML) VBScript (for ASP) C# and Visual Basic (for ASP.

  • PAGE 398

    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. Note: Some of the requirements also are required in various versions of HTML.

  • PAGE 399

    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. (The type attribute of the script element has been required since HTML 4, when the language attribute was deprecated.) All img and area elements must have an alt attribute.

  • PAGE 400

    \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. \sbook matches ”book” in “blue book” but nothing in “notebook” \S Any single non-white-space character.

  • PAGE 401

    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 To the top About Dreamweaver tag libraries A tag library, in Dreamweaver, is a collection of tags of a particular type, along with information about how Dreamweaver should format the tags.

  • PAGE 402

    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 403

    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) To the top Clean up code You can automatically remove empty tags, combine nested font tags, and otherwise improve messy or unreadable HTML or XHTML code.

  • PAGE 404

    3. Select Edit > Select Parent Tag. The enclosing matching tags (and their contents) are selected in your code. If you keep selecting Edit > Select Parent Tag, and your tags are balanced, eventually Dreamweaver will select the outermost html and /html tags. Check for balanced parentheses, braces, or square brackets 1. Open the document in Code view. 2. Place the insertion point in the code you want to check. 3. Select Edit > Balance Braces.

  • PAGE 405

    1. Select Window > Results > W3C validation. 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.

  • PAGE 406

    Note: Not all document types can be made XHTML-compliant. 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.

  • PAGE 407

    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 To the top About coding preferences You can set coding preferences such as code formatting and coloring, among others, to meet your specific needs. Note: To set advanced preferences, use the Tag Library editor (see Managing tag libraries).

  • PAGE 408

    Options Auto-Indent option. For 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 409

    Remove Extra Closing Tags Deletes closing tags that have no corresponding opening tag. Warn When Fixing Or Removing Tags Displays a summary of technically invalid HTML that Dreamweaver attempted to correct. The summary notes the location of the problem (using line and column numbers) so that you can find the correction and ensure that it’s rendering as intended. Never Rewrite Code: In Files With Extensions Allows you to prevent Dreamweaver from rewriting code in files with the specified filename extensions.

  • PAGE 410

    Start an external code editor Select Edit > Edit with External Editor.

  • PAGE 411

    Setting up your coding environment Using coder-oriented workspaces Viewing code Customizing keyboard shortcuts Open files in Code view by default To the top Using coder-oriented workspaces You can adapt the coding environment in Dreamweaver to fit the way you work. For example, you can change the way you view code, set up different keyboard shortcuts, or import and use your favorite tag library. Dreamweaver comes with several workspace layouts designed for an optimal coding experience.

  • PAGE 412

    For instructions, see Customize keyboard shortcuts. To the top Open files in Code view by default When you open a file type that normally doesn’t contain any HTML (for example, a JavaScript file), the file opens in Code view (or Code inspector) instead of Design view. You can specify which file types open in Code view. 1. Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh). 2. Select File Types/Editors from the Category list on the left. 3.

  • PAGE 413

    Template syntax General syntax rules Template tags Instance tags Check template syntax 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. When you insert a template object, template tags are inserted in the code. General syntax rules are as follows: Wherever a space appears, you can substitute any amount of white space (spaces, tabs, line breaks).

  • PAGE 414

    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. Select Modify > Templates > Check Template Syntax. An error message appears if the syntax is badly formed.

  • PAGE 415

    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 416

    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. For example, to insert a tag, type a right angle bracket (<).

  • PAGE 417

    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. Enable Code Hints Displays code hints while you enter code in Code view. Drag the Delay slider to set the time in seconds before appropriate hints are displayed.

  • PAGE 418

    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 419

    Highlight Invalid Code Highlights invalid code in yellow. Syntax Error Alerts in Info Bar Enables or disables an information bar at the top of the page that alerts you to syntax errors. When 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.

  • PAGE 420

    tags in the selected tag library folder. 2. Select a category of tags from the tag library, or expand the category and select a subcategory. 3. Select a tag from the right pane. 4. To view syntax and usage information for the tag in the Tag Chooser, click the Tag Info button. If available, information about the tag 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.

  • PAGE 421

    • and
    ). Collapse Outside Full Tag Collapses the content outside a set of opening and closing tags (for example, the content outside and
    ). Expand All Restores all collapsed code. Apply HTML Comment Wraps the selected code with , or opens a new tag if no code is selected. Apply /* */ Comment Wraps the selected CSS or JavaScript code with /* and */.

  • PAGE 422

    Select Edit > Indent Code. Unindent the selected block of code Press Shift+Tab. Select Edit > Outdent Code. To the top 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.

  • PAGE 423

    In the Code inspector, click the Code Navigation button ({ }) on the toolbar. 3. Select a function name to jump to the function in your code. To the top Extract JavaScript The JavaScript Extractor (JSE) removes all or most of the JavaScript from your Dreamweaver document, exports it to an external file, and links the external file to your document.

  • PAGE 424

    Snippets that contain tags and other deprecated elements and attributes are in the Legacy folder in the Snippets panel. Insert a code snippet 1. Place the insertion point where you want to insert the code snippet, or select code to wrap a snippet around. 2. In the Snippets panel (Window > Snippets), double-click the snippet. You can also right-click (Windows) or Control-click (Macintosh) the snippet, and then select Insert from the pop-up menu. Create a code snippet 1.

  • PAGE 425

    2. Select Edit > Find And Replace. 3. Specify which files to search in, and then specify the kind of search to perform, and text or tags to search for. Optionally, specify replacement text as well. Then click one of the Find buttons or one of the Replace buttons. 4. Click the Close button. 5. To search again without displaying the Find And Replace dialog box, press F3 (Windows) or Command+G (Macintosh). To the top Save and recall search patterns You can save search patterns and reuse them later.

  • PAGE 426

    3. To view information about an attribute of the selected item, select the attribute from the pop-up menu next to the Tag, Object, Style, or CFML pop-up menu. This menu contains the list of attributes for the item you select. The default selection is Description, which displays a description of the chosen item. To the top Print code You can print your code to edit it offline, archive it, or distribute it. 1. Open a page in Code view. 2. Select File > Print Code. 3.

  • PAGE 427

    Mobile and multiscreen To learn more, view these recommended resources online. 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 428

    Creating web applications for mobile devices (CS5.5, CS6) 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 429

    Page From Sample > Mobile Starters > jQuery Mobile (CDN). Page From Sample > Mobile Starters > jQuery Mobile (Local). Page From Sample > Mobile Starters > jQuery Mobile with Theme (Local). 3. Click Create. In the page that appears, enable Follow Links Continuously (View > Live View Options), and switch to Live View. Use the navigation components to test how the application works. Use the options in the Multiscreen menu to see how the design is displayed in devices with various dimensions.

  • PAGE 430

    http://jquerymobile.com/demos/1.0a3/ http://docs.jquery.com/Downloading_jQuery#CDN_Hosted_jQuery http://en.wikipedia.org/wiki/Content_delivery_network http://docs.jquery.

  • PAGE 431

    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 432

    2. Choose Site > PhoneGap Build Service > PhoneGap Build Service. 3. Provide your login information and log in to PhoneGap Build. If you haven't created a PhoneGap Build account, see Create a PhoneGap Build service account. 4. Leave Create as a New Project selected and click Continue. When you click the Continue button, Dreamweaver begins building your application. You must, however, take additional steps beyond this initial build. 5.

  • PAGE 433

    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. Once the application has finished downloading, you can launch it directly on your device. 4. Return to the build list by clicking the Back to Build Panel button.

  • PAGE 434

    Change page orientation for mobile devices (CS5.5 and later) In most advanced mobile devices, the orientation of a page changes based on how the device is held. When the user holds the phone vertically, the portrait view is displayed. When the user flips the device horizontally, the page readjusts itself to fit the landscape dimensions. In Dreamweaver, the option to view a page in either Portrait or Landscape orientation is available in both Live View and Design View.

  • PAGE 435

    Creating media queries (CS5.5 and later) 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 436

    If you want to specify a CSS file that you are yet to create, select Create New File. Enter the name of the CSS file. The file is created when you press OK. 8. Click OK. 9. For site-wide media query, a new file is created. Save it. Site-wide media query: For existing pages, ensure that you include the media query file in all the pages in the tag. Example of a media query link where mediaquery_adobedotcom.css is the site-wide media query file for the site www.adobe.

  • PAGE 437

    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 438

    For information on creating a web application, including sample files, see this tutorial on the Dreamweaver Developer Center. 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.

  • PAGE 439

    Define a different target path for the package. Note: When you click Save, the phonegap.js file is copied to the site root. 9. Do one of the following: 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.

  • PAGE 440

    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 441

    Previewing 434

  • PAGE 442

    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 The Browser Compatibility Check (BCC) feature helps you locate combinat

  • PAGE 443

    Exclude an issue from the browser compatibility check 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.

  • PAGE 444

    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 445

    Previewing pages Previewing pages in Dreamweaver Previewing pages in browsers Previewing pages in mobile devices Design view gives you an idea of how your page will look on the web but does not render pages exactly as browsers do. Live view presents a more accurate depiction, and lets you work in Code view so that you can see changes to the design. The Preview in Browser feature lets you see how your pages will look in specific browsers.

  • PAGE 446

    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 447

    This is because browsers 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 448

    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 To select an element in the Design view of the Document window, click the element. If an element is invisible, you must make it visible before you can select it. Some HTML code doesn’t have a visible representation in a browser. For example, comment tags don’t appear in browsers.

  • PAGE 449

    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 450

    Viewing live data Provide the page with live data in Live view Troubleshooting live data in Live view The View Live Data feature has been deprecated as of Dreamweaver CS5. It has been replaced by the more streamlined Live view feature. To view live data in Live view, make sure that you have done the following: Define a folder to process dynamic pages (for example, a root folder on a ColdFusion server, either on your computer or on a remote machine).

  • PAGE 451

    Templates 444

  • PAGE 452

    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 To the top Understanding Dreamweaver templates A template is a special type of document that you use to design a “fixed” page layout; you can then create documents based on the template that inherit its page layout.

  • PAGE 453

    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.) Some users took advantage of the way Dreamweaver treated links to files in the Templates folder, and used this inconsistency to create links that they intentionally did not want to update when creating template-based pages.

  • PAGE 454

    You can define expressions in Code view or in the Optional Region dialog box when you insert an optional region. In Code view, there are two ways to define template expressions: use the comment or @@(your expression)@@. When you insert the expression in the template code, an expression marker appears in Design view. When you apply the template, Dreamweaver evaluates the expression and displays the value in the template-based document.

  • PAGE 455

    TemplateBeginIfClause cond="Dept == 2" --> TemplateBeginIfClause cond="Dept == 3" --> TemplateBeginIfClause cond="Dept != 3" --> TemplateEndMultipleIf --> image--> PAGE 456

    Applying or removing a template from an existing document Apply a template to an existing document Detach a document from a template To the top Apply a template to an existing document When you apply a template to a document which contains existing content, Dreamweaver attempts to match the existing content to a region in the template. If you are applying a revised version of one of your existing templates, the names are likely to match.

  • PAGE 457

    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 458

    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 To the top About creating Dreamweaver templates You can create a template from an existing document (such as an HTML, Adobe ColdFusion, or Microsoft Active Server Pages document) or you can create a template from a new document.

  • PAGE 459

    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 460

    Create a blank template Legal Notices | Online Privacy Policy 453

  • PAGE 461

    Creating a nested template About nested templates Create a nested template Prevent an editable region from passing through to a nested template To the top About nested templates A nested template is a template whose design and editable regions are based on another template. Nested templates are useful for controlling content in pages of a site that share many design elements, but have a few variations between pages.

  • PAGE 462

    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 463

    @@("")@@ Editable 1

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

  • PAGE 464

    Creating editable regions in templates Insert an editable region Select editable regions Remove an editable region Change an editable region’s name To the top Insert an editable region Editable template regions control which areas of a template-based page a user can edit. Before you insert an editable region, save the document you are working in as a template.

  • PAGE 465

    If you’ve marked a region of your template file as editable and you want to lock it (make it noneditable in template-based documents) again, use 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.

  • PAGE 466

    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 To the top About template repeating regions A repeating region is a section of a template that can be duplicated many times in a template-based page. Typically, repeating regions are used with tables but you can define a repeating region for other page elements.

  • PAGE 467

    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. If you don’t explicitly assign a value for border, most browsers display the table as if the border were set to 1. To ensure that browsers display the table with no border, set Border to 0.

  • PAGE 468

    Defining editable tag attributes in templates Specify editable tag attributes in a template Make an editable tag attribute uneditable To the top Specify editable tag attributes in a template You can allow a template user to modify specified tag attributes in a document created from a template. For example, you can set a background color in the template document, yet enable template users to set a different background color for pages they create.

  • PAGE 469

    More Help topics Legal Notices | Online Privacy Policy 462

  • PAGE 470

    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 About editing content in template-based documents To the top Dreamweaver templates specify regions that are locked (uneditable) and others that are editable for template-based documents. In pages based on templates, template users can edit content in editable regions only.

  • PAGE 471

    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. Click the Minus (–) button to delete the selected repeating region entry. Click the Down Arrow button to move the selected entry down one position. Click the Up Arrow button to move the selected entry up one position.

  • PAGE 472

    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 To the top About editing and updating templates When you make changes to and save a template, all the documents based on the template are updated. You can also manually update a template-based document or the entire site if necessary.

  • PAGE 473

    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. Click Update to update all documents based on the modified template; click Don’t Update if you don’t want to update documents based on the modified template. Dreamweaver displays a log indicating the files that were updated. To the top Rename a template 1.

  • PAGE 474

    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 475

    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 To the top About template XML content You can think of a document based on a template as containing data represented by name-value pairs. Each pair consists of the name of an editable region, and the contents of that region.

  • PAGE 476

    Legal Notices | Online Privacy Policy 469

  • PAGE 477

    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 To the top Recognizing templates in Design view In Design view, editable regions appear in the Document window surrounded by rectangular outlines in a preset highlight color. A small tab appears at the upper-left corner of each region, showing the name of the region.

  • PAGE 478

    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. A small tab appears at the upper-left corner of each region, showing the name of the region.

  • PAGE 479

    Legal Notices | Online Privacy Policy 472

  • PAGE 480

    Setting authoring preferences for templates Customize code coloring preferences for a template Set highlighting preferences for template regions Customize code coloring preferences for a template To the top Code color preferences control the text, background color, and style attributes of the text displayed in Code view. You can set your own color scheme so you can easily distinguish template regions when you view a document in Code view. 1.

  • PAGE 481

    Legal Notices | Online Privacy Policy 474

  • PAGE 482

    Template syntax General syntax rules Template tags Instance tags Check template syntax 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. When you insert a template object, template tags are inserted in the code. General syntax rules are as follows: Wherever a space appears, you can substitute any amount of white space (spaces, tabs, line breaks).

  • PAGE 483

    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. Select Modify > Templates > Check Template Syntax. An error message appears if the syntax is badly formed.

  • PAGE 484

    Using optional regions in templates About template optional regions Insert an optional region Set values for an optional region 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. Use an optional region when you want to set conditions for displaying content in a document.

  • PAGE 485

    Set values for an optional region You can edit optional region settings after you’ve inserted the region in a template. For example, you can change whether the default 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.

  • PAGE 486

    Web applications and forms To learn more, view these recommended resources online. Enabling PHP and Apache in Leopard David Powers (Jan.

  • PAGE 487

    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 488

    http://www.mystartup.com/warehouse/ Localhost Refers to the home directory in your URLs when the client (usually a browser, but in this case Dreamweaver) runs on the same system as your web server. Suppose Dreamweaver is running on the same Windows system as the web server, your home directory is c:\sites\company, and you defined a virtual directory called warehouse to refer to the folder you want to use to process dynamic pages.

  • PAGE 489

    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 To the top About custom server behaviors Dreamweaver comes with a set of built-in server behaviors that lets you easily add dynamic capabilities to a site.

  • PAGE 490

    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. To add a new code block, click the Plus (+) button, enter a name for the code block, and click OK. The name you enter appears in the Server Behavior Builder, with the appropriate scripting tags visible in the Code block box. 6.

  • PAGE 491

    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. Conditions in code blocks Dreamweaver lets you develop code blocks that incorporate control statements that execute conditionally.

  • PAGE 492

    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 493

    To repeat a portion of a code block or the entire code block a number of times, use the following syntax: <@ 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.

  • PAGE 494

    Note: Parameter arrays cannot be used outside of a loop except as part of a conditional directive expression.

  • PAGE 495

    Note: Parameter names in the server behavior code cannot have any spaces. Therefore, the dialog box labels cannot have any spaces. If you 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.

  • PAGE 496

    Dreamweaver saves all changes in the server behavior’s EDML file. To the top Coding guidelines In general, your server behavior’s code should be compact and robust. Web application developers are very sensitive to the code added to their pages. Follow generally accepted coding practices for the document type’s language (ColdFusion, JavaScript, VBScript, or PHP).

  • PAGE 497

    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 To the top About adding dynamic content After you define one or more sources of dynamic content, you can use the sources to add dynamic content on the page. Content sources can include a column in a recordset, a value submitted by an HTML form, the value contained in a server object, or other data.

  • PAGE 498

    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. The page’s general layout would remain the same for each item, but the photo (and descriptive text) could change. 1. With the page open in Design view (View > Design), place the insertion point where you want the image to appear on the page. 2. Select Insert > Image.

  • PAGE 499

    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 500

    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 To the t

  • PAGE 501

    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 502

    1. In Design view, place the insertion point inside the form outline. 2. Select the control from the Insert menu (Insert > ColdFusion Objects > CFForm), or from the CFForm category in the Insert panel. 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.

  • PAGE 503

    Cfhiddenfield Lets you specify the unique name for the hidden field. Value Lets you specify a value for the hidden field. The data can either be static or dynamic. To specify a dynamic value, click the lightning bolt icon beside the Value box and select a recordset column in the Dynamic Data dialog box. 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.

  • PAGE 504

    3. Select the button on the page and set any of the following options in the Property inspector: Cfbutton Lets you specify a unique name for the control. Action Lets you specify the type of button to create. 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.

  • PAGE 505

    Size Lets you specify the size of the control. This property is ignored by the ColdFusion server at run time. Required Lets you specify whether the radio button must be checked before the form is submitted to the server. Display Tag Editor Lets you edit properties not listed in the Property inspector. 4. To label the radio button, click beside it on the page and enter text for the label.

  • PAGE 506

    Src Lets you specify the URL of the inserted image. Alt Lets you specify a message when the image cannot be displayed. Align Lets you specify the alignment of the picture. Border Lets you set the width of the image border. Edit Image Opens the image in your default image editor. 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.

  • PAGE 507

    To the top Insert ColdFusion date fields Although you can’t visually insert a ColdFusion date field in Dreamweaver, you can visually set its properties. A ColdFusion date field is a special type of text field that lets users select a date from a pop-up calendar to insert it in the text field. Note: This enhancement is available only if you have access to a computer running ColdFusion MX 7 or later. 1. In Design view, select the CFForm to display its Property inspector.

  • PAGE 508

    More Help topics Set up a testing server Legal Notices | Online Privacy Policy 501

  • PAGE 509

    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 To the top About record delete pages Your application can contain a set of pages that lets users delete records in a database. The pages normally consist of a search page, a results page, and a delete page. A delete page is usually a detail page working in tandem with a results page.

  • PAGE 510

    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 511

    pop-up menu. 6. In the Detail Page box, click Browse and locate the delete page. 7. In the Pass URL Parameter box, specify the name of your parameter, such as recordID. You can make up any name you like, but take note of the name because you'll use it in the delete page later. 8. Specify the value you want to pass to the delete page by selecting a recordset and a column from the Recordset and Column pop-up menus. Typically the value is unique to the record, such as the record’s unique key ID. 9.

  • PAGE 512

    From the pop-up menu beside the first menu, select the equal sign, if not already selected. From the third pop-up menu, select URL Parameter. The page with the Delete links uses a URL parameter to pass information to the delete page. In the fourth box, enter the name of the URL parameter passed by the page with the Delete links. 5. Click OK. The recordset appears in the Bindings panel. Display the record the user wants to delete 1.

  • PAGE 513

    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 514

    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 515

    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 To the top About login pages Your web application can contain a page that lets registered users log in to the site.

  • PAGE 516

    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. The server behavior compares the user name and password a visitor enters on the login page against the values in these columns. 5. Specify a page to open if the login process succeeds.

  • PAGE 517

    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 To the top About protected pages Your web application can contain a protected page that only authorized users can access. For example, if a user attempts to bypass the login page by typing the protected page’s URL in a browser, the user is redirected to another page.

  • PAGE 518

    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. The Restrict Access To Page server behavior is copied to your system’s Clipboard. 3.

  • PAGE 519

    Building a record insert page About building record insert pages Build an insert page block by block Build the insert page in one operation To the top About building record insert pages Your application can contain a page that lets users insert new records in a database.

  • PAGE 520

    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 521

    By default, Dreamweaver creates a form object for each column in the database table. If your database automatically generates unique key IDs for each new record created, remove the form object corresponding to the key column by selecting it in the list and clicking the Minus (-) button. This eliminates the risk that the user of the form will enter an ID value that already exists.

  • PAGE 522

    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 To the top About registration pages Your web application can contain a page that requires users to register the first time they visit your site.

  • PAGE 523

    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. In the Server Behaviors panel (Window > Server Behaviors), click the Plus (+) button and select Insert Record from the pop-up menu. The Insert Record dialog box appears. 2.

  • PAGE 524

    Building pages with advanced data manipulation objects (ColdFusion, ASP) About ASP command objects Use ASP commands to modify a database About stored procedures Add a stored procedure (ColdFusion) Run a stored procedure (ASP) To the top About ASP command objects An ASP command object is a server object that performs some operation on a database. The object can contain any valid SQL statement, including one that returns a recordset, or one that inserts, updates, or deletes records in a database.

  • PAGE 525

    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. Note: Numeric, Boolean and date/time data types always use -1 as the size.

  • PAGE 526

    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. A stored procedure is reusable in the sense that you can reuse a single compiled version of the procedure to execute a database operation a number of times.

  • PAGE 527

    The Command dialog box appears. 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.

  • PAGE 528

    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) To the top About search and results pages You can use Dreamweaver to build a set of pages to let users search your database and view the search results. In most cases, you need at least two pages to add this feature to your web application.

  • PAGE 529

    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 530

    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 531

    In the following ASP example, the HTML form on the search page uses the GET method and contains one text field called LastName and another called Department: 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.

  • PAGE 532

    Legal Notices | Online Privacy Policy 525

  • PAGE 533

    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 To the top About dynamic content You can change the dynamic content on your page by editing the server behavior that provides the content. For example, you can edit a recordset server behavior to provide more records to your page. Dynamic content on a page is listed in the Server Behaviors panel.

  • PAGE 534

    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 535

    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 To the top About

  • PAGE 536

    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. A user can select as many options as apply. The following example shows three check box items selected: Surfing, Mountain Biking, and Rafting. Radio buttons Represent exclusive choices.

  • PAGE 537

    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. POST Embeds the form data in the HTTP request. Do not use the GET method to send long forms. URLs are limited to 8192 characters.

  • PAGE 538

    specifies the maximum number of characters that can be entered in the field. For example, if the Char Width is set to 20 (the default value) and a 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.

  • PAGE 539

    1. Use the Plus (+) and Minus (–) buttons to add and remove items in the list. 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.

  • PAGE 540

    Value Assigns a value to the field. This value is passed to the server when the form is submitted. 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 541

    To the top Insert or change a dynamic HTML form menu You can dynamically populate an HTML form menu or list menu with entries from a database. For most pages, you can use an HTML menu object. Before you begin, you must insert an HTML form in a ColdFusion, PHP, or ASP page, and you must define a recordset or other source of dynamic content for the menu. 1. Insert an HTML List/Menu form object in your page: a. Click inside the HTML form on the page (Insert > Form > Form). b.

  • PAGE 542

    1. Select a check box form object on your page. 2. In the Property inspector, click the Dynamic button. 3. Complete the Dynamic CheckBox dialog box, and click OK: Click the lightning bolt icon beside the Check If box and select the field from the list of data sources. The data source must contain Boolean data such as Yes and No, or true and false. If no data sources appear in the list, or if the available data sources don’t meet your needs, click the Plus (+) button to define a new data source.

  • PAGE 543

    For example, you might specify that a text field for a person’s age accepts only numbers. Note: The Validate Form behavior is available only if a text field has been inserted into the document. Attach JavaScript behaviors to HTML form objects To the top You can attach JavaScript behaviors stored in Dreamweaver to HTML form objects such as buttons. 1. Select the HTML form object. 2. In the Behaviors panel (Window > Behaviors), click the Plus (+) button, and select a behavior from the list.

  • PAGE 544

    No Label Tag Does not use a label tag, as follows: RadioButton3 Access Key Uses a keyboard equivalent (one letter) and the Alt key (Windows) or the Control key (Macintosh) to select the form object in the browser. For example, if you enter B as the Access Key, users with a Macintosh browser could type Control+B to select the form object. Tab Index Specifies a tab order for the form objects.

  • PAGE 545

    Database connections for ASP developers 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 To the top About ASP database connections An ASP application must connect to a database through an open database connectivity (ODBC) driver or an object linking and embedding database (OLE DB) provider.

  • PAGE 546

    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. To the top About connection strings A connection string combines all the information your web application needs to connect to a database. Dreamweaver inserts this string in your page’s server-side scripts for later processing by your application server.

  • PAGE 547

    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. If you want to use a local DSN but haven’t defined one yet, click Define to open the Windows ODBC Data Source Administrator. 6. Complete the User Name and Password boxes. 7.

  • PAGE 548

    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 549

    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.mdb If you don’t know the physical path of your files on the remote server, you can get the path by using the MapPath method in your connection string. 1.

  • PAGE 550

    Legal Notices | Online Privacy Policy 543

  • PAGE 551

    Database connections for ColdFusion developers Connecting to a ColdFusion database Create or modify a ColdFusion data source Connecting to the database in Dreamweaver To the top Connecting to a ColdFusion database When developing a ColdFusion web application in Dreamweaver, you connect to a database by selecting a ColdFusion data source defined in Dreamweaver or in ColdFusion Administrator, the server’s management console. Before connecting to a database, you must set up a ColdFusion web application.

  • PAGE 552

    More Help topics Set up a testing server Legal Notices | Online Privacy Policy 545

  • PAGE 553

    Database connections for PHP developers About PHP database connections Connect to a database Edit or delete a database connection To the top About PHP database connections For PHP development, Dreamweaver only supports the MySQL database system. Other database systems such as Microsoft Access or Oracle are not supported. MySQL is open-source software you can download for free from the Internet for non-commercial use. For more information, see the MySQL website at http://dev.mysql.com/downloads/.

  • PAGE 554

    3. In the dialog box that appears, confirm that you want to delete the connection. Note: To avoid getting errors after deleting a connection, update every recordset that uses the old connection by doubleclicking the name of the recordset in the Bindings panel and selecting a new connection in the Recordset dialog box.

  • PAGE 555

    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 To the top Define a recordset witho

  • PAGE 556

    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 557

    different. (If the simple Recordset dialog box appears instead, switch to the advanced Recordset dialog box by clicking the Advanced button.) 4. Complete the advanced Recordset dialog box. 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.

  • PAGE 558

    5. Click Test to connect to the database and create an instance of the recordset. If the SQL statement contains variables, make sure the Default Value column of the Variables box contains valid test values before clicking Test. If successful, a table appears displaying the data in your recordset. Each row contains a record and each column represents a field in that record. Click OK to clear the recordset. 6. If satisfied with your work, click OK.

  • PAGE 559

    6. Click Test to connect to the database and create an instance of the recordset. If the SQL statement contains run-time references, make sure the Default Value column of the Page Parameters field contains valid test values before clicking Test. 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. 7. If satisfied with your work, click OK.

  • PAGE 560

    5. Click OK to add the recordset to the Bindings panel. To the top Define URL parameters URL parameters store retrieved information input by users. Before you begin, make sure you pass a form or URL parameter to the server. After you define the URL variable, you can use its value in the currently selected page. 1. In the Document window, open the page that will use the variable. 2. Select Windows > Bindings to display the Bindings panel. 3.

  • PAGE 561

    You can use session variables to store and display information maintained for the duration of a user’s visit (or session). The server creates a different session object for each user and maintains it for a set period of time or until the object is explicitly terminated. Before defining session variables for a page, you must create them in the source code. After you create a session variable in the web application’s source code, you can use Dreamweaver to retrieve its value and use it in a web page. 1.

  • PAGE 562

    To the top Define server variables You define server variables as sources of dynamic content for use within a web application. Server variables vary from document type to document type and include form variables, URL variables, session variables, and application variables. Server variables can be accessed by all clients that access the server, and by any applications running on the server. The variables persist until the server is stopped. Define ColdFusion server variables 1.

  • PAGE 563

    a cookie called "readMe" on the user’s system. On the server, the values of the cookie are stored in the variable Request.Cookies("readMe"). The ClientCertificate collection Retrieves the certification fields from the HTTP request sent by the browser. The certification fields are specified in the X.509 standard. 4. Specify the variable in the collection that you want to access, and click OK. For example, if you want to access the information in the Request.

  • PAGE 564

    SERVER_SOFTWARE The name and version of the information server software answering the request (and running the gateway). Format: name/version. SERVER_NAME The server's hostname, DNS alias, or IP address as it appears in self-referencing URLs. GATEWAY_INTERFACE The revision of the CGI specification to which this server complies. Format: CGI/revision. SERVER_PROTOCOL The name and revision of the information protocol this request came in with. Format: protocol/revision.

  • PAGE 565

    To the top Cache content sources You can cache—or store—sources of dynamic content in a Design Note. This lets you work on a site even if you don’t have access to the database or application server storing the sources of dynamic content. Caching may also speed up development by eliminating repeated access across a network to the database and application server. Click the arrow button in the top right corner of the Bindings panel and toggle Cache in the pop-up menu.

  • PAGE 566

    Designing dynamic pages Dreamweaver and dynamic page design To the top Dreamweaver and dynamic page design Follow these general steps to successfully design and create a dynamic website. 1. Design the page. A key step in designing any website—whether static or dynamic—is the visual design of the page. When adding dynamic elements to a web page, the design of the page becomes crucial to its usability.

  • PAGE 567

    table’s appearance and the repeating region by using the Property inspector and Repeating Region Server Behavior, respectively. Insert a dynamic text object into a page. The text object you insert is an item from a predefined recordset, to which you can apply any of 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.

  • PAGE 568

    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 To the top About database records Displaying database records

  • PAGE 569

    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 570

    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. If the recordset contains a large number of records, the Move To Last Record server behavior can take a long time to run when the user clicks the link. 4. In the Recordset pop-up menu, select the recordset that contains the records, and click OK.

  • PAGE 571

    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 572

    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 573

    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 574

    a. Select the format from the list, and click Edit. b. Change any of the following parameters in the Currency, Number, or Percent dialog boxes, and click OK. The number of digits to display after the decimal point Whether to place a leading zero in front of fractions Whether to use parentheses or a minus sign for negative values 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.

  • PAGE 575

    Dynamic content panels Bindings panel Server Behaviors panel Databases panel Components panel 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 576

    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 577

    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 To the top About dynamic content sources A dynamic content source is a store of information from which you can retrieve and display dynamic content for use in a web page.

  • PAGE 578

    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). The server creates a different session object for each user and maintains it for a set period of time or until the object is explicitly terminated.

  • PAGE 579

    <% 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 580

    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.) Because application variables last for the lifetime of the application, and persist from user to user, they’re ideal for storing information that must exist for all users, such as the current time and date.

  • PAGE 581

    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 To the top Displaying web-application development panels Select the Data category from the Category pop-up menu of the Insert panel to display a set of buttons that let you add dynamic con

  • PAGE 582

    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. With this option, Dreamweaver runs a temporary copy of the page on a web server before displaying it in your browser.

  • PAGE 583

    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 584

    For information on creating a web application, including sample files, see this tutorial on the Dreamweaver Developer Center. 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.

  • PAGE 585

    Define a different target path for the package. Note: When you click Save, the phonegap.js file is copied to the site root. 9. Do one of the following: 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.

  • PAGE 586

    Removing connection scripts Using the Remove Connection Scripts command 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. These scripts are only needed for design-time authoring in Dreamweaver.

  • PAGE 587

    Securing a folder in your application (ColdFusion) Secure a folder or site on the server (ColdFusion) 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 588

    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 To the top What you need to build web applications To build web applications in Adobe® Dreamweaver®, you need the followin

  • PAGE 589

    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). To the top Choosing a web server To develop and test web applications, you can choose from a number of common web servers including Microsoft Internet Information Server (IIS) and Apache HTTP Server.

  • PAGE 590

    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). During installation, you can configure ColdFusion to use the web server built into ColdFusion or another web server installed on your system. Generally, it’s best to match your development environment to your production environment.

  • PAGE 591

    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 592

    Troubleshooting database connections Troubleshooting permissions problems Troubleshooting Microsoft error messages Troubleshooting MySQL error messages To the top Troubleshooting permissions problems One of the most common problems is insufficient folder or file permissions. If your database is located on a Windows 2000 or Windows XP computer and you receive an error message when you try to view a dynamic page in a web browser or in Live view, the error might be due to a permissions problem.

  • PAGE 593

    For more information about the IUSR account and web server permissions, see the following TechNotes on the Adobe Support Center: Understanding anonymous authentication and the IUSR account at www.adobe.com/go/authentication Setting IIS web server permissions at www.adobe.

  • PAGE 594

    (UID= “sa” and no password), which must be defined in the connection string line. (DSNs do not store user names and passwords.) If you use integrated security, check the Windows account calling the page and find its mapped SQL account (if any). SQL Server does not allow an underscore in SQL account names. If someone manually maps the Windows IUSR_machinename account to a SQL account of the same name, it will fail.

  • PAGE 595

    MySQL at http://dev.mysql.com/doc/mysql/en/reserved-words.html [Reference]80040e21—ODBC error on Insert or Update This error occurs when the server tries to process a page containing an Update Record or Insert Record server behavior. The database cannot handle the update or insert operation the server behavior is trying to perform. 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.

  • PAGE 596

    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 To the top About web applications A web application is a website that contains pages with partly or entirely undetermined content. The final content of a page is determined only when the visitor requests a page from the web server.

  • PAGE 597

    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. In contrast, a dynamic web page is modified by the server before it is sent to the requesting browser. The changing nature of the page is why it’s called dynamic.

  • PAGE 598

    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. All the browser gets when the page arrives is pure HTML. Here’s a view of the process: 1. Web browser requests dynamic page. 2. Web server finds page and passes it to application server. 3.

  • PAGE 599

    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 600

    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 601

    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 602

    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 To the top About ColdFusion components ColdFusion component (CFC) files let you encapsulate application and business logic into self-contained, reusable units.

  • PAGE 603

    (_). 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. Ensure that you specify the type of the value returned by the function in the Return Type option.

  • PAGE 604

    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 605

    The Recordset dialog box appears. You can work in either the simple or the advanced Recordset dialog boxes. 3. To use an existing function in the CFC, select the function from the Function pop-up menu and skip to step 5. 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.

  • PAGE 606

    The value type can be a URL parameter, a form variable, a cookie, a session variable, an application variable, or an entered value. b. Enter a default value for the parameter in the Default Value box. If no run-time value is returned, the default parameter value is used. c. Click OK. 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.

  • PAGE 607

    Cross-product To learn more, view these recommended resources online. Creating and Editing your Business Catalyst Website Using Dreamweaver CS6 Adobe TV (Jul. 19, 2012) video-tutorial Provides you an overview of the Business Catalyst features built into CS6, working with module templates from this interface and display some new features like code completion and related files.

  • PAGE 608

    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 Dreamweave

  • PAGE 609

    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 610

    Dreamweaver is in sync with the original Photoshop file, both of the arrows in the icon are green. When the web-ready image is out of sync with the original Photoshop file, one of the icon’s arrows turns read. To update a Smart Object with the current contents of the original Photoshop file, select the Smart Object in the Document window, and then click the Update from Original button in the Property inspector. Note: You do not need Photoshop installed to make the update from Dreamweaver.

  • PAGE 611

    modified after the creation of the web image in Dreamweaver. the Property inspector to sync the two images. 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.

  • PAGE 612

    Press Control (Windows) or Command (Macintosh) as you double-click the file. Right-click (Windows) or Control-click (Macintosh) an image, choose Edit Original With from the context menu, and then choose Photoshop. Note: This assumes that Photoshop is set as the primary external image editor for PSD image files. You may also want to set Photoshop as the default editor for JPEG, GIF, and PNG file types. 2. Edit the file in Photoshop. 3.

  • PAGE 613

    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 614

    2. Click Import Business Catalyst Site. The list of Business Catalyst sites you created with the Adobe ID is displayed. 3. Select the site, and click Import Site. 4. For the site that you are trying to import, specify a location on your computer. 5. Enter the password related to your Adobe ID. 6. When the file activity is complete, click Done. To the top Manage files Because Business Catalyst is also a web hosting service, you can use Dreamweaver to manage local and remote site files.

  • PAGE 615

    Adding and modifying images About images Insert an image Align 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 616

    Select Data Source to choose a dynamic image source. Click the Sites And Servers button to choose an image file in a remote folder of one of your Dreamweaver sites. 3. Browse to select the image or content source you want to insert. If you are working in an unsaved document, Dreamweaver generates a file:// reference to the image file. When you save the document anywhere in the site, Dreamweaver converts the reference to a document-relative path.

  • PAGE 617

    Map Name and Hotspot tools Allow you to label and create a client-side image map. V Space and H Space Add space, in pixels, along the sides of the image. V Space adds space along the top and bottom of an image. H Space adds space along the left and right of an image. Target Specifies the frame or window in which the linked page should load. (This option is not available when the image isn’t linked to another file.) The names of all the frames in the current frameset appear in the Target list.

  • PAGE 618

    Middle Aligns the middle of the image with the baseline of the current line. Text Top Aligns the top of the image with the top of the tallest character in the text line. Absolute Middle Aligns the middle of the image with the middle of the text in the current line. Absolute Bottom Aligns the bottom of the image with the bottom of the line of text (which includes descenders, as in the letter g). Left Places the selected image on the left margin, wrapping text around it to the right.

  • PAGE 619

    2. Select Insert > Image Objects > Image Placeholder. 3. For Name (Optional), enter text you want to appear as a label for the image placeholder. Leave the text box blank if you do not want a label to appear. The name must begin with a letter and can contain only letters and numbers; spaces and high ASCII characters are not allowed. 4. For Width and Height (Required), type a number to set the image size in pixels. 5.

  • PAGE 620

    spoken out loud. In some browsers, this text also appears when the pointer is over the image. Create Starts Fireworks to create a replacement image. The Create button is disabled unless Fireworks is also installed on your computer. Reset Size Resets the W and H values to the original size of the image. Color Specifies a color for the image placeholder. To the top Edit images in Dreamweaver You can resample, crop, optimize, and sharpen images in Dreamweaver.

  • PAGE 621

    Dreamweaver, or edit the file in an external image-editing application. Optimize an image You can optimize images in your web pages from within Dreamweaver. 1. Open the page containing the image you want to optimize, select the image, and do either of the following: Click the Edit Image Settings button in the image Property inspector. Select Modify > Image > Optimize. 2. Make your edits in the Image Optimization dialog box and click OK.

  • PAGE 622

    Preload Rollover Image Preloads the images in the browser’s cache so no delay occurs when the user rolls the pointer over the image. Alternate Text (Optional) Text to describe the image for viewers using a text-only browser. When clicked, Go to URL The file that you want to open when a user clicks the rollover image. Enter the path or click Browse and select the file.

  • PAGE 623

    Category list on the left. Select Edit > Edit with External Editor and select File Types/Editors. 2. In the File Types/Editors Preferences dialog box, click the Add (+) button above the Extensions list. A text box appears in the Extensions list. 3. Type the file extension of the file type you want to start an editor for. 4. To select an external editor for the file type, click the Add (+) button above the Editors list. 5.

  • PAGE 624

    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 625

    4. Complete the AIR Application and Installer Settings dialog box, and then click Create AIR File. 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.

  • PAGE 626

    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 627

    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 628

    Create a link to a Word or Excel document You can insert a link to a Microsoft Word or Excel document in an existing page. 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. Select Create A Link, and then click OK. 4. If the document you are linking to is located outside of your site’s root folder, Dreamweaver prompts you to copy the document to the site root.

  • PAGE 629

    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 630

    Extensions Add and manage extensions in Dreamweaver To the top Add and manage extensions in Dreamweaver Extensions are new features that you can add easily to Dreamweaver. You can use many types of extensions; for example, there are extensions that let you reformat tables, connect to back-end databases, or help you write scripts for browsers. Note: To install extensions that all users have access to in a multiuser operating system, you must be logged in as Administrator (Windows) or root (Mac OS X).

  • PAGE 631

    Import Microsoft Office documents (Windows only) 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. The file’s size, after Dreamweaver receives the converted HTML, must be less than 300K. Instead of importing the entire contents of a file, you can also paste portions of a Word document and preserve the formatting.

  • PAGE 632

    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 633

    If you use server-side includes for HTML page elements, such as headers or footers, create an unlinked HTML page that contains links to 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.

  • PAGE 634

    related features; Dreamweaver does not prompt you to do this; however, when you connect to a site that’s been set up as a Contribute site (that has an administrator), Dreamweaver prompts you to enable Contribute compatibility. Not all connection types support Contribute compatibility.

  • PAGE 635

    Contribute users need certain information about the site to be able to connect to it. You can package all of this information in a file called a connection key to send to Contribute users. Note: A connection key is not the same as a Dreamweaver exported site file. Before you give Contribute users the connection information they need to edit pages, use Dreamweaver to create the basic folder hierarchy for your site, and to create any templates and CSS style sheets needed for the site. 1.

  • PAGE 636

    Unlock a file in a Contribute site Note: Before following this procedure, make sure that the file really isn’t checked out. If you unlock a file while a Contribute user is editing it, multiple users might edit the file simultaneously. 1. Do one of the following: Open the file in the Document window, and then select Site > Undo Check Out. In the Files panel (Window > Files), right-click (Windows) or Control-click (Macintosh), and then select Undo Check Out.

  • PAGE 637

    Update CSS style sheets in a Contribute site Adobe Contribute users can’t make changes to a CSS style sheet. To change a style sheet for a Contribute site, use Dreamweaver. 1. Edit the style sheet using the Dreamweaver style-sheet-editing tools. 2. Tell all of the Contribute users who are working on the site to publish pages that use that style sheet, then re-edit those pages to view the new style sheet.

  • PAGE 638

    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 639

    2. Choose Insert > InContext Editing > Create Editable Region. 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 640

    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 641

    li, menu, ol, p, pre, q, s, samp, small, 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 642

    regions group to an editable region, Dreamweaver does not allow you to perform the transformation. Repeating Regions should not be inside Editable Regions or contain Repeating Regions Groups InContext Editing editable regions cannot contain any other InContext Editing functionality. If you try to add a repeating region or a repeating regions group to an editable region, Dreamweaver does not allow you to perform the transformation.

  • PAGE 643

    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 644

    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 645

    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 646

    Working with Device Central and Dreamweaver Using Adobe Device Central with Dreamweaver Preview mobile content with Adobe Device Central and 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.

  • PAGE 647

    Legal Notices | Online Privacy Policy 640

  • PAGE 648

    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 649

    Dreamweaver. In Dreamweaver, the updated image or table appears. For a tutorial about Dreamweaver and Fireworks integration, see www.adobe.com/go/vid0188. 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.

  • PAGE 650

    To the top About Fireworks pop-up menus Fireworks lets you quickly and easily create CSS-based pop-up menus. 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.

  • PAGE 651

    1. In Dreamweaver document, place the insertion point where you want to insert the Fireworks HTML code. 2. Do one of the following: Select Insert > Image Objects > Fireworks HTML. 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.

  • PAGE 652

    The Create Web Photo Album feature has been deprecated as of Dreamweaver CS5.

  • PAGE 653

    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 654

    Javascript 647

  • PAGE 655

    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 656

    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. Click OK and verify that the default event is correct.

  • PAGE 657

    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. To constrain movement within a rectangular region, enter positive values in all four boxes.

  • PAGE 658

    MM_SNAPPED value of true and call it whenever an AP element is dropped. When the snapped count reaches the desired number, you could send the visitor to the next page or display a message of congratulations. 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.

  • PAGE 659

    3. Set the options for window width and height (in pixels) and for the incorporation of various toolbars, scroll bars, resize handles, and the like. Give the window a name (use no spaces or special characters) if you want it to be the target of links or want to control it with JavaScript. 4. Click OK and verify that the default event is correct. To the top Apply the Play Sound behavior This behavior has been deprecated as of Dreamweaver CS5.

  • PAGE 660

    4. Enter a message in the New HTML box. 5. Click OK and verify that the default event is correct. To the top Apply the Set Text Of Container behavior The Set Text Of Container behavior replaces the content and formatting of an existing container (that is, any element that can contain text or other elements) on a page with the content you specify. The content can include any valid HTML source code.

  • PAGE 661

    3. Click OK and verify that the default event is correct. To the top Apply the Show-Hide Elements behavior 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.

  • PAGE 662

    7. Repeat steps 5 and 6 for any additional images you want to change. Use the same Swap Image action for all the images you want to change at once; otherwise, the corresponding Swap Image Restore action won’t restore all of them. 8. Select the Preload Images option to cache the new images when the page is loaded. This prevents downloading delays when it is time for the images to appear. 9. Click OK and verify that the default event is correct.

  • PAGE 663

    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 To the top About JavaScript behaviors Adobe® Dreamweaver® behaviors place JavaScript code in documents so that visitors can change a web page in various ways or initiate certain tasks. A behavior is a combination of an event and an action triggered by that event.

  • PAGE 664

    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.) Note: Event names in parentheses are available only for links; selecting one of these event names automatically adds a null link to the selected page element, and attaches the behavior to that link instead of to the element itself. The null link is specified as href="javascript:;" in the HTML code.

  • PAGE 665

    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 666

    Accessibility 659

  • PAGE 667

    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 To the top About accessible content Accessibility refers to making websites and web products usable for people with visual, auditory, motor, and other disabilities.

  • PAGE 668

    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. Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh). 2.

  • PAGE 669

    5. Press Enter to exit the dialog box. 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.

  • PAGE 670

    Keyboard shortcuts Create a reference sheet for the current shortcut set Customize keyboard shortcuts About keyboard shortcuts and non-U.S. keyboards Create a reference sheet for the current shortcut set To the top A reference sheet is a record of the current shortcut set. The information is stored in HTML table format. You can view the reference sheet in a web browser or print it. 1. Select Edit > Keyboard Shortcuts (Windows) or Dreamweaver > Keyboard Shortcuts (Macintosh). 2.

  • PAGE 671

    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.

  • PAGE 672

    XML 665

  • PAGE 673

    About XML and XSLT Using XML and XSL with web pages Server-side XSL transformations Client-side XSL transformations XML data and repeating elements Previewing XML data To the top Using XML and XSL with web pages Extensible Markup Language (XML) is a language that lets you structure information. Like HTML, XML lets you structure your information using tags, but XML tags are not predefined as HTML tags are. Instead, XML lets you create tags that best define your data structure (schema).

  • PAGE 674

    browser can display the transformed data. Deploying pages for server-side transformations, however, is somewhat complex, and requires that you have access to an application server. When working with server-side XSL transformations, you can use Dreamweaver to create XSLT pages that generate full HTML documents (entire XSLT pages), or XSLT fragments that generate a portion of an HTML document. An entire XSLT page is similar to a regular HTML page.

  • PAGE 675

    After you’ve created your XSLT page, you must link it to the XML file containing the XML data by inserting a reference to the XSLT page in the XML file itself (much like you would insert a reference to an external CSS style sheet in the section of an HTML page). Your site visitors must view the XML file (not the XSLT page) in a browser. When your site visitors view the page, the browser performs the XSL transformation and displays the XML data, formatted by the linked XSLT page.

  • PAGE 676

    When you apply a Repeating Region XSLT object to an element in the Document window, a thin, tabbed, gray outline appears around the repeated region. When you preview your work in a browser (File > Preview in Browser), the gray outline disappears and the selection expands to display the specified repeating elements in the XML file, as in the previous illustration. When you add the Repeating Region XSLT object to the page, the length of the XML data placeholder in the Document window is truncated.

  • PAGE 677

    To the top Previewing XML data When you use Preview in Browser (File > Preview in Browser) to preview XML data that you’ve inserted in an XSLT fragment or an entire XSLT page, the engine that performs the XSL transformation differs from situation to situation. For dynamic pages containing XSLT fragments, the application server always performs the transformation. At other times, either Dreamweaver or the browser might be performing the transformation.

  • PAGE 678

    Missing character entities for XSLT Specify a missing character entity To the top Specify a missing character entity In XSLT, some characters are not allowed in certain contexts. For example, you cannot use the less than sign (<) and the ampersand (&) in the text between tags or in an attribute value. The XSLT transformation engine will give you an error if those characters are used incorrectly. To solve the problem, you can specify character entities to replace the special characters.

  • PAGE 679

    In the example, you would enter the following entity tag: 4. Save your file. If you repeatedly use the same character entities, you may want to permanently add their definitions in the XSL files Dreamweaver creates by default when you use File > New. Add entity definitions to the XSL files Dreamweaver creates by default 1.

  • PAGE 680

    Performing XSL transformations on the client Workflow for performing client-side XSL transformations Creating entire XSLT pages and displaying data Link an XSLT page to an XML page Workflow for performing client-side XSL transformations To the top You can perform client-side XSL transformations. Read about server-side and client-side XSL transformations and about using XML and XSL with web pages before building pages that display XML data.

  • PAGE 681

    4. Click OK to close the dialog box and insert the reference to the XSLT page at the top of the XML document.

  • PAGE 682

    Performing XSL transformations on the server Workflow for performing server-side XSL transformations Create an XSLT page Convert HTML pages to XSLT pages Attach XML data sources Display XML data in XSLT pages Display repeating XML elements Insert XSLT fragments in dynamic pages Delete XSLT fragments from dynamic pages Edit XSL Transformation server behaviors Create a dynamic link Applying styles to XSLT fragments Use parameters with XSL transformations Create and edit conditional XSLT regions Insert XSL com

  • PAGE 683

    You can create XSLT pages that let you display XML data on web pages. You can create either an entire XSLT page—an XSLT page that contains a tag and a tag—or you can create an XSLT fragment. When you create an XSLT fragment, you create an independent file that contains no body or head tag—a simple piece of code that is later inserted in a dynamic page. Note: If you are starting with an existing XSLT page, you need to attach an XML data source to it. 1. Select File > New. 2.

  • PAGE 684

    If you are starting with an existing XSLT page, or if you don’t attach an XML data source when creating a new XSLT page with Dreamweaver, you must attach an XML data source using the Bindings panel. 1. In the Bindings panel (Window > Bindings), click the XML link. Note: You can also click the Source link at the upper-right corner of the Bindings panel to add an XML data source. 2.

  • PAGE 685

    styles to XSLT fragments. Each of these methods has its own set of benefits and limitations. 5. Preview your work in a browser (File > Preview in Browser). Note: When you preview your work using Preview in Browser, Dreamweaver performs an internal XSL transformation without the use of an application server. To the top Display repeating XML elements The Repeating Region XSLT object lets you display repeating elements from an XML data source in a web page.

  • PAGE 686

    In the Select box, enter a new node, and then press the lightning bolt icon and select the node from the XML schema tree that appears. Edit a Repeating Region XSLT object After you’ve added a Repeating Region XSLT object to a region, you can edit it using the Property inspector. 1. Select the object by clicking the gray tab that surrounds the repeated region. 2. In the Property inspector (Window > Properties), click the dynamic icon next to the Select text field. 3.

  • PAGE 687

    Delete XSLT fragments from dynamic pages You can remove an XSLT fragment from a page by deleting the XSL Transformation server behavior used to insert the fragment. Deleting the server behavior deletes the XSLT fragment only—it does not delete the associated XML, XSLT, or run-time library files. 1. In the Server Behaviors panel (Window > Server Behaviors), select the XSL Transformation server behavior that you want to delete. 2. Click the minus (-) button.

  • PAGE 688

    2. In the XSL Transformation dialog box, click the Plus (+) button next to XSLT Parameters. 3. In the Add Parameters dialog box, enter a name for the parameter in the Name box. The name can only contain alphanumeric characters. It cannot contain spaces. 4. Do one of the following: If you want to use a static value, enter it in the Value box. If you want to use a dynamic value, click the dynamic icon next to the Value box, complete the Dynamic Data dialog box, and click OK.

  • PAGE 689

    3. Click OK. The following code is inserted in your XSLT page: Content goes here Note: You must surround string values such as true in quotes. Dreamweaver encodes the quotes for you (') so that they are entered as valid XHTML. In addition to testing nodes for values, you can use any of the supported XSLT functions in any conditional statement. The condition is tested for the current node within your XML file.

  • PAGE 690

    Content goes here Content goes here 4. To insert another condition, place the insertion point in Code view between tag pairs or just before the tag, and then insert a conditional region (Insert > XSLT Objects > Conditional Region). After you specify the condition and click OK, another tag is inserted in the block.

  • PAGE 691

    Note: If you select a different node in the XML schema tree, the expression changes to reflect your choice. In the following example, you want to display the price subelement of the item node: This selection would insert the following code in your XSLT page: 3. (Optional) Select a formatting option from the Format pop-up menu. Formatting a selection is useful when the value of your node returns a number. Dreamweaver provides a predefined list of formatting functions.

  • PAGE 692

    For more information and examples on selecting nodes to return a value, see the section in the Reference panel. Select a node to repeat You can select a node to repeat over and, optionally, to filter the results. In the XPath Expression Builder dialog box, your selected content will be wrapped inside an block. If you have not selected content, the block will be entered at the insertion point of your cursor. 1.

  • PAGE 693

    As you enter values or make selections in the pop-up menus, the XPath expression in the Expression box changes. In the following example, you want to restrict the result set to those item nodes where the value of the @available attribute is true. When you click OK, the following code is inserted in your XSLT page: Content goes here Note: You need to surround string values such as true in quotes.

  • PAGE 694

    When you click OK, the following code is inserted in your XSLT page: Content goes here For more information and examples of repeating regions, see the section in the Reference panel.