Adobe Dreamweaver CC 2015 Manuel d'utilisateur

Adobe® Dreamweaver® CC Help

3What's newLast updated 6/3/2015Visual Media Query consists of three bars as horizontal rows, each representing a category of media query:• Gree

93File managementLast updated 6/3/2015Avoid using spaces and special characters in file and folder names and do not begin a filename with a numeral. I

94File managementLast updated 6/3/2015In Dreamweaver CC, select Starter Templates category.3 In the Sample Folder column, select CSS Style Sheet or Mo

95File managementLast updated 6/3/2015Save all open documents1 Select File > Save All.2 If there are any unsaved documents open, the Save As dialog

96File managementLast updated 6/3/2015There are four Unicode Normalization Forms. The most important is Normalization Form C because it's the mos

97File managementLast updated 6/3/2015To clean up HTML or XHTML that was not generated by Microsoft Word, use the Cleanup HTML command.You can also op

98File managementLast updated 6/3/20153 Hover over the items in the Code Navigator to see more information about them. For example, if you want to cha

99File managementLast updated 6/3/2015• Set up a PHP application server.Note: The server must be running before you attempt to work with Dynamically-R

100File managementLast updated 6/3/2015The Custom Filter dialog only allows for the filtering of exact file names (style.css), file extensions (.php),

101File managementLast updated 6/3/2015More Help topics Understanding Cascading Style SheetsXHTML codeBusiness Catalyst InContext EditingLaying out pa

102File managementLast updated 6/3/2015A Site pop-up menu B Connect/Disconnect C Refresh D View site FTP log E Site files view F Testing serve r

4What's newLast updated 6/3/2015Preview in Code viewIf you are working in Split view, you can see any changes to images or colors instantly in Li

103File managementLast updated 6/3/2015View files and foldersYou can view files and folders in the Files panel, whether they are associated with a Dre

104File managementLast updated 6/3/2015A Site Files B Testing S erver C Repository Files Note: Before you can view a remote site, testing server

105File managementLast updated 6/3/2015• Right-click (Windows) or Control-click (Macintosh) the file’s icon, then select Edit > Rename.3 Type the n

106File managementLast updated 6/3/2015Locate and select files that are newer in the local site than in the remote site❖ In the collapsed Files panel

107File managementLast updated 6/3/2015Access sites, a server, and local drivesYou can access, modify, and save files and folders in your Dreamweaver

108File managementLast updated 6/3/2015When you drag a file from one Dreamweaver site to another or to a folder that is not part of a Dreamweaver site

109File managementLast updated 6/3/2015Sort by any detail column in the Files panel❖ Click the heading for the column you want to sort.Click the headi

110File managementLast updated 6/3/2015• Open a file from a remote server• Auto put files upon saving• Drag files to the remote site• Cut, copy, or pa

111File managementLast updated 6/3/2015Get files from a remote server using the Document window1 Make sure the document is active in the Document wind

112File managementLast updated 6/3/20153 If the file hasn’t been saved, a dialog box appears (if you set this preference in the Site category of the P

5What's newLast updated 6/3/2015• HTML_Snippets• JavaScript Snippets (updated)• PHP_Snippets• Preprocessor_Snippets• Responsive_Design_SnippetsFo

113File managementLast updated 6/3/2015Save a log of the last file transfer1 Click the Log button at the bottom of the Files panel to open the Backgro

114File managementLast updated 6/3/20153 In the Site Setup dialog box, select the Servers category and do one of the following:• Click the Add New Ser

115File managementLast updated 6/3/2015Note: If you check out the currently active file, the currently open version of the file is overwritten by the

116File managementLast updated 6/3/2015Use WebDAV to check in and check out filesDreamweaver can connect to a server that uses WebDAV (Web-based Distr

117File managementLast updated 6/3/2015Set up an SVN connectionBefore you use Subversion (SVN) as a version control system with Dreamweaver, you must

118File managementLast updated 6/3/2015Note: When getting files for the first time from the repository, you should work with a local directory that is

119File managementLast updated 6/3/20152 Display the local version of your SVN files in the Files panel by selecting Local view from the View pop-up m

120File managementLast updated 6/3/2015Move, copy, delete, or revert files• To move a file, drag the file to the destination folder in your local site

121File managementLast updated 6/3/2015About moving files and folders in Subversion-controlled sitesWhen you move the local versions of files or folde

122File managementLast updated 6/3/2015Synchronize your files1 In the Files panel (Window > Files), select a site from the menu where the current s

6What's newLast updated 6/3/2015Whether it is a fully designed Bootstrap file or a work-in-progress design, you can edit them in Dreamweaver to n

123File managementLast updated 6/3/2015Put files on a remote serverComparing files for differencesComparing files for differencesCompare local and rem

124File managementLast updated 6/3/2015Compare two local filesYou can compare two files located anywhere on your computer.1 In the Files panel, Contro

125File managementLast updated 6/3/2015Compare before putting filesIf you edit a file locally and then try to upload it to your remote server, Dreamwe

126File managementLast updated 6/3/2015You can cloak files and folders on the remote or local site. Cloaking excludes cloaked files and folders from t

127File managementLast updated 6/3/2015Cloak and uncloak specific file typesYou can indicate specific file types to cloak, so that Dreamweaver cloaks

128File managementLast updated 6/3/2015Storing file information in Design NotesAbout Design NotesDesign Notes are notes that you create for a file. De

129File managementLast updated 6/3/20156 Select Enable Upload Design Notes For Sharing to upload Design Notes associated with your site with the rest

130File managementLast updated 6/3/2015Note: To show the yellow Design Notes icons, select Site > Manage Sites > [your site name] > Edit >

131File managementLast updated 6/3/2015Site testing guidelinesBefore uploading your site to a server and declaring it ready for viewing, it’s a good i

132File managementLast updated 6/3/2015Use reports to test your siteYou can run site reports on workflow or HTML attributes. You can also use the Repo

7What's newLast updated 6/3/2015• Format• Commands• Site• 'Paste Special' option in Edit and context menuSupport for jQuery UI elements

133File managementLast updated 6/3/2015Untitled Documents Creates a report listing all the untitled documents found within the selected parameters. D

134Last updated 6/3/2015Chapter 5: Layout and designUsing visual aids for layoutNote: The user interface has been simplified in Dreamweaver CC and lat

135Layout and designLast updated 6/3/2015Note: When you resize elements, such as absolutely-positioned elements (AP elements), tables, and images, the

136Layout and designLast updated 6/3/2015Use the layout gridThe grid displays a system of horizontal and vertical lines in the Document window. It is

137Layout and designLast updated 6/3/2015To switch to another tracing image or change the transparency of the current tracing image at any time, selec

138Layout and designLast updated 6/3/2015To view a set of frames in a browser, enter the URL of the frameset file; the browser then opens the relevant

139Layout and designLast updated 6/3/2015For a full treatment of why you should not use frames, see Gary White’s explanation at http://apptools.com/ra

140Layout and designLast updated 6/3/2015For example, the most common frame layout has one frame in the top row (where the company’s logo appears) and

141Layout and designLast updated 6/3/2015Create frames and framesetsThere are two ways to create a frameset in Dreamweaver: You can select from severa

142Layout and designLast updated 6/3/2015Split a frame into smaller frames• To split the frame where the insertion point is, select a splitting item f

8What's newLast updated 6/3/2015SVG code hints in HTML documentsCode hints for all SVG elements and attributes are now supported in HTML document

143Layout and designLast updated 6/3/2015In the Document window’s Design view, when a frame is selected, its borders are outlined with a dotted line;

144Layout and designLast updated 6/3/2015• To select the first child frame or frameset of the currently selected frameset (that is, first in the order

145Layout and designLast updated 6/3/2015You may also want to set some frame attributes, such as the title attribute (which is not the same as the nam

146Layout and designLast updated 6/3/2015Set accessibility values for a frame1 In the Frames panel (Window > Frames), select a frame by placing the

147Layout and designLast updated 6/3/2015RowCol Selection Sets frame sizes for rows and columns of the selected frameset, click a tab on the left sid

148Layout and designLast updated 6/3/2015• _self opens the link in the current frame, replacing the content in that frame.• _top opens the linked docu

149Layout and designLast updated 6/3/2015Apply the Set Nav Bar Image behaviorApply the Jump Menu behaviorLaying out pages with CSSAbout CSS page layou

150Layout and designLast updated 6/3/2015A Container div B Sidebar div C Main Content div Following is the code for all three div tags in the HTML:

151Layout and designLast updated 6/3/2015A Text aligne d lef t B White background C 1-pixel solid black border The next CSS rule creates styling r

152Layout and designLast updated 6/3/2015The complete code looks as follows:A 20 pixels left padding B 20 pixels right padding C 20 pixels bottom pa

9What's newLast updated 6/3/2015Custom preview in Code view using showPreview APIWith this release of Dreamweaver, you can generate a custom prev

153Layout and designLast updated 6/3/2015<div id="container"> <!--sidebar div tag--> <div id="sidebar">

154Layout and designLast updated 6/3/20156 Select a location for the layout’s CSS from the Layout CSS in pop-up menu.Add To Head Adds CSS for the lay

155Layout and designLast updated 6/3/20155 (Optional) After you’ve created a notes file for your custom layout, you can open the file and specify the

156Layout and designLast updated 6/3/2015An HTML page that is based on the template you chose is created. You can now modify the page by adding or del

157Layout and designLast updated 6/3/2015If you do not want the basic structure and want to start off with a blank document, deselect the Include A Pr

158Layout and designLast updated 6/3/2015b (Optional) if you want to attach any other CSS to your document, click in the Attach CSS section. The Atta

159Layout and designLast updated 6/3/2015A Row B Column Dreamweaver recognizes the CSS files associated with any Bootstrap HTML file if the CSS file

160Layout and designLast updated 6/3/2015Add Bootstrap componentsThe Bootstrap Components option in the Insert panel lists all the Bootstrap component

161Layout and designLast updated 6/3/2015Resize and offset columnsResizing and offsetting columns become imperative especially when you are creating r

162Layout and designLast updated 6/3/2015Visual Media Query barsVisual Media Query bars are a visual representation of the media queries present in a

10What's newLast updated 6/3/2015Support for % unitsIn the Extract panel, you can now view the width and height of images in % values in addition

163Layout and designLast updated 6/3/2015• Select the Full Width option in the drop-down list at the bottom of the document window.If you do not see t

164Layout and designLast updated 6/3/20154 In the pop-up that appears, one of the media query conditions (based on your choice) is prepopulated with t

165Layout and designLast updated 6/3/2015Create a fluid grid layout1 Select File > Fluid Grid (legacy).2 The default value for the number of column

166Layout and designLast updated 6/3/20153 Select a class, or enter a value for the ID. The Class menu displays classes from the CSS file that you spe

167Layout and designLast updated 6/3/2015Presenting content with tablesNote: The user interface has been simplified in Dreamweaver CC and later. As a

168Layout and designLast updated 6/3/2015In the following example, the cells in the middle of the first two rows have been merged into a single cell t

169Layout and designLast updated 6/3/2015Import and export tabular dataYou can import tabular data that has been created in another application (such

170Layout and designLast updated 6/3/2015Line Breaks Specifies which operating system you’ll be opening the exported file in: Windows, Macintosh, or

171Layout and designLast updated 6/3/2015Select a single cell❖ Do one of the following:• Click in the cell, then select the <td> tag in the tag

172Layout and designLast updated 6/3/2015Set table propertiesYou can use the Property inspector to edit tables.1 Select a table.2 In the Property insp

11What's newLast updated 6/3/2015Nested Insert in Live ViewNow, you can insert elements within other elements in Live view. When you drag element

173Layout and designLast updated 6/3/20152 In the Property inspector (Window > Properties), set the following options:Horz Specifies the horizonta

174Layout and designLast updated 6/3/2015A Table in Standard mode B Table in Expanded tables mode Note: After you make your selection or place the i

175Layout and designLast updated 6/3/2015Add or edit accessibility values for a table in Code view❖ Edit the appropriate attributes in the code.To qui

176Layout and designLast updated 6/3/2015Change a column’s width and keep the overall table width❖ In Design view, drag the right border of the column

177Layout and designLast updated 6/3/2015• In the Property inspector, (Window > Properties), click the Clear Row Heights button or the Clear Colum

178Layout and designLast updated 6/3/2015Delete a row or column❖ Do one of the following:• Click in a cell within the row or column you want to delete

179Layout and designLast updated 6/3/2015The contents of the individual cells are placed in the resulting merged cell. The properties of the first cel

180Layout and designLast updated 6/3/20152 Select Edit > Cut or Edit > Copy.Note: If you selected an entire row or column and you select Edit &g

181Layout and designLast updated 6/3/2015Nest tablesA nested table is a table inside a cell of another table. You can format a nested table as you wou

182Layout and designLast updated 6/3/2015jQuery UI widgets such as accordion, tabs, datepicker, slider, and autocomplete bring the experience of the d

12What's newLast updated 6/3/2015This mode is optimal if you want to create CSS, media queries, or selectors.• Current: Computed styles for any e

183Layout and designLast updated 6/3/20153 Click , click Effects, and then click the required effect.The customization panel with the settings for th

184Layout and designLast updated 6/3/2015ColorsNote: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find

185Layout and designLast updated 6/3/2015• Use the eyedropper to pick up a color from anywhere on your screen—even outside the Dreamweaver windows. To

186Last updated 6/3/2015Chapter 6: CSSUnderstanding Cascading Style SheetsAbout Cascading Style SheetsCascading Style Sheets (CSS) is a collection of

187CSSLast updated 6/3/2015The style (which comes from a rule, or a collection of rules) resides in a place separate from the actual text it’s formatt

188CSSLast updated 6/3/2015About cascading stylesThe term cascading refers to the way a browser ultimately displays styles for specific elements on a

189CSSLast updated 6/3/2015All body text will be Arial and italic except paragraph (and its inherited) text, which will display as Courier normal (non

190CSSLast updated 6/3/2015When written using shorthand notation, omitted values are automatically assigned their default values. Thus, the previous s

191CSSLast updated 6/3/2015Note: You can use Ctrl/Cmd+ Z to undo or Ctrl/Cmd + Y to redo all actions you perform in CSS Designer. The changes are auto

192CSSLast updated 6/3/2015CSS Designer is context-sensitive. This means, for any given context or selected page element, you can view the associated

Last updated 6/3/2015Legal noticesLegal noticesFor legal notices, see http://help.adobe.com/en_US/legalnotices/index.html.

13What's newLast updated 6/3/2015Other changes• Show Set option: The Show Set check box in the Properties section is now selected by default when

193CSSLast updated 6/3/2015If you add media query conditions through code, only the supported conditions are populated in the Define Media Query dialo

194CSSLast updated 6/3/2015• If a selector has no styles, Copy and Copy All Styles are disabled.• Paste Styles is disabled for remote sites that canno

195CSSLast updated 6/3/2015Set margins, padding, and positionUsing the box controls in CSS Designer's Properties pane, you can quickly set the ma

196CSSLast updated 6/3/2015If you prefer code, you can specify shorthand code for borders and border radius in the quick edit text box.To specify the

197CSSLast updated 6/3/2015Border color set to black for all sides The code that is inserted is based on the preference setting for shorthand or longh

198CSSLast updated 6/3/2015During Inspect, the tabs are focused based on the priority of the "set" tabs. The highest priority is for "A

199CSSLast updated 6/3/2015To identify the page elements associated with a CSS Selector, hover your mouse over the Selector in Live View (with Live Co

200CSSLast updated 6/3/2015Disable Live HighlightLive Highlight is enabled by default. To disable Live Highlight, click Live View options in Document

201CSSLast updated 6/3/2015Note: Class names must begin with a period and can contain any combination of letters and numbers (for example, .myhead1).

202CSSLast updated 6/3/2015Font-style Specifies Normal, Italic, or Oblique as the font style. The default setting is Normal. The style attribute is s

14What's newLast updated 6/3/2015Changes to Business Catalyst workflowBusiness Catalyst extension is retired and will not be available for use wi

203CSSLast updated 6/3/2015Background Position (X) and Background Position (Y) Specify the initial position of the background image in relation to th

204CSSLast updated 6/3/2015You can apply settings to individual sides of an element when applying padding and margin settings, or use the Same For All

205CSSLast updated 6/3/2015Color Sets the color of the border. You can set each side’s color independently, but the display depends on the browser. D

206CSSLast updated 6/3/2015Visibility Determines the initial display condition of the content. If you do not specify a visibility property, by defaul

207CSSLast updated 6/3/20153 In the CSS Rule Definition dialog box, select Extensions, and set any of the following style properties. (Leave the prope

208CSSLast updated 6/3/2015• Select a rule in the All Rules pane, and then edit the rule’s properties in the Properties pane below.• Select a rule in

209CSSLast updated 6/3/2015Apply a CSS class style1 In the document, select the text to which you want to apply a CSS style.Place the insertion point

210CSSLast updated 6/3/2015Move/export CSS rules to a new style sheet1 Do one of the following:• In the CSS Styles panel, select the rule or rules you

211CSSLast updated 6/3/2015Convert inline CSS to a CSS ruleNote: In Dreamweaver CC and later, CSS Styles panel is replaced with CSS Designer. For more

212CSSLast updated 6/3/2015• You cannot use a link tag to add a reference from one external style sheet to another. If you want to nest style sheets,

15Last updated 6/3/2015Chapter 2: Workspace and workflowDreamweaver workflow and workspaceDreamweaver workflow overviewYou can use several approaches

213CSSLast updated 6/3/20152 In the Preferences dialog box, select the Code Format category.3 Next to Advanced Formatting, click the CSS button.4 In t

214CSSLast updated 6/3/2015When you disable a CSS property, Dreamweaver adds CSS comment tags and a [disabled] label to the CSS property you’ve disabl

215CSSLast updated 6/3/2015Check for cross-browser CSS rendering issuesNote: In Dreamweaver CC and later, CSS Styles panel is replaced with CSS Design

216CSSLast updated 6/3/2015For example, to see if CSS rendering bugs might appear in Internet Explorer 5.0 and later and Netscape Navigator 7.0 and la

217CSSLast updated 6/3/2015Use Design-Time style sheetsNote: In Dreamweaver CC and later, CSS Styles panel is replaced with CSS Designer. For more inf

218CSSLast updated 6/3/2015Tutorial: Style the header and navigation menuLaying out pages with CSSManage tag librariesInsert and edit div tagsYou can

219CSSLast updated 6/3/2015When you assign borders to div tags, or when you have CSS Layout Outlines selected, they have visible borders. (CSS Layout

220CSSLast updated 6/3/2015Visualizing CSS layout blocksYou can visualize CSS layout blocks while you work in Design view. A CSS layout block is an HT

221CSSLast updated 6/3/2015Use visual aids with non-CSS layout block elementsYou can use a Design-time style sheet to display the backgrounds, borders

222CSSLast updated 6/3/2015HTML code for AP Div elementsDreamweaver creates AP elements using the div tag. When you draw an AP element using the Draw

16Workspace and workflowLast updated 6/3/2015Many websites contain dynamic pages that allow visitors to view information stored in databases, and usua

223CSSLast updated 6/3/2015Insert an AP Div at a particular place in the document❖ Place the insertion point in the Document window, and then select I

224CSSLast updated 6/3/2015Draw a nested AP Div1 Make sure Prevent Overlaps is deselected in the AP Elements panel (Window > AP Elements).2 In the

225CSSLast updated 6/3/20153 Set any of the following options:CSS-P Element Specifies an ID for the selected AP element. The ID identifies the AP ele

226CSSLast updated 6/3/2015Visible indicates that the extra content appears in the AP element; effectively, the AP element stretches to accommodate it

227CSSLast updated 6/3/2015• Inherit uses the visibility property of the AP elements’ parent. • Visible displays the AP elements’ contents, regardless

228CSSLast updated 6/3/2015Select multiple AP elements❖ Do one of the following:• In the AP Elements panel (Window > AP Elements), Shift-click two

229CSSLast updated 6/3/2015Change the visibility of all AP elements at once❖ In the AP Elements panel (Window > AP Elements), click the header eye

230CSSLast updated 6/3/2015Hold down the Shift key while pressing an arrow key to move the AP element by the current grid-snapping increment.Align AP

231CSSLast updated 6/3/2015Use Transparent GIFs Fills the table’s last row with transparent GIFs. This ensures that the table is displayed with the s

232CSSLast updated 6/3/2015Click adjacent to the gradient property to open the gradients panel. Using this panel, you can:• Choose colors from differ

17Workspace and workflowLast updated 6/3/2015Note: Dreamweaver provides many other panels, inspectors, and windows. To open the panels, inspectors, an

233CSSLast updated 6/3/2015Note: The Eye Dropper tool is available in Dreamweaver 13.1 and later.Let's understand the following code:background-i

234CSSLast updated 6/3/2015CSS3 transition effectsYou can create, modify, and delete CSS3 transitions using the CSS Transitions panel.To create a CSS3

235CSSLast updated 6/3/20152 Click .3 Use the Edit Transition dialog to change previously entered values for the transition.Disable CSS shorthand for

236CSSLast updated 6/3/2015The CSS Styles panel lets you track the CSS rules and properties affecting a currently selected page element (Current mode)

237CSSLast updated 6/3/2015font-size: 12px font-family: ‘Arial’ color: greenThe Summary for Selection pane arranges properties in increasing order o

238CSSLast updated 6/3/2015You can resize either pane by dragging the border between the panes, and can resize the Properties columns by dragging thei

239CSSLast updated 6/3/2015A Attach Style Sheet B New CSS Rule C Edit Style D Disable/enable CSS property E Delete CSS rule Attach Style Sheet O

240Last updated 6/3/2015Chapter 7: Page content and assetsSet page propertiesFor each page you create in Dreamweaver, you can specify layout and forma

241Page content and assetsLast updated 6/3/2015Top Margin and Bottom Margin Specify the size of the top and bottom page margins.Set HTML page proper

242Page content and assetsLast updated 6/3/2015Underline Style Specifies the underline style to apply to links. If your page already has an underline

18Workspace and workflowLast updated 6/3/2015Code view (View > Code) A hand-coding environment for writing and editing HTML, JavaScript, and any o

243Page content and assetsLast updated 6/3/2015In Unicode, some characters are visually similar but can be stored within the document in different way

244Page content and assetsLast updated 6/3/2015You can change document encoding for a page and change the default encoding that Dreamweaver uses to cr

245Page content and assetsLast updated 6/3/2015• Select View > Code and Design.• Select Window > Code Inspector. When you select something in ei

246Page content and assetsLast updated 6/3/2015ColdFusion server. Dreamweaver reperesents the tag with a ColdFusion invisible element since Dreamweave

247Page content and assetsLast updated 6/3/2015Pan a page after zooming1 Click the Hand tool (the hand icon) in the lower-right corner of the Document

248Page content and assetsLast updated 6/3/2015Add text to a documentTo add text to a Dreamweaver document, you can type text directly in the Document

249Page content and assetsLast updated 6/3/2015There are many other special characters available; to select one of them, select Insert > HTML >

250Page content and assetsLast updated 6/3/2015Create a new list1 In the Dreamweaver document, place the insertion point where you want to add a list,

251Page content and assetsLast updated 6/3/20154 Click OK to set the options.Search for and replace textYou can use the Find And Replace command to se

252Page content and assetsLast updated 6/3/2015Match Whole Word Limits the search to text that matches one or more complete words.Note: Using this o

19Workspace and workflowLast updated 6/3/2015Browser Navigation toolbar overviewThe Browser Navigation toolbar becomes active in Live view, and shows

253Page content and assetsLast updated 6/3/20154 (Optional.) Limit the search with one of the following tag modifiers:With Attribute Specifies an att

254Page content and assetsLast updated 6/3/2015Define abbreviations and acronymsHTML provides tags that let you define the abbreviations and acronyms

255Page content and assetsSet CSS propertiesViewing codeRegular expressionsArabic and Hebrew textNew and improved features for working in Arabic and H

256Last updated 6/3/2015• DOM panel: (Windows > DOM) Shows the HTML structure of your document and lets you copy-paste, duplicate, delete, and rear

257Page content and assetsLast updated 6/3/2015Note: In Live View, only those options that are applicable for the selected element are made available

258Page content and assetsLast updated 6/3/2015To show or hide Quick Property Inspector, press Ctrl+Alt+H (Win)/CMD+Ctrl+H (Mac).Note: Code navigator

259Page content and assetsLast updated 6/3/2015The following are the elements that you can edit using Live View Property Inspector:• HTML• CSS• Image•

260Page content and assetsLast updated 6/3/2015To edit the attributes, click the sandwich icon in the Quick Property Inspector. You can change the sou

261Page content and assetsLast updated 6/3/2015The orange border around the text element indicates that the mode is changed to edit mode. The insertio

262Page content and assetsLast updated 6/3/2015Insert elements directly in Live ViewUsing the Insert panel, you can directly drag elements into the re

20Workspace and workflowLast updated 6/3/2015Status bar overviewThe Status bar at the bottom of the Document window provides additional information ab

263Page content and assetsLast updated 6/3/2015When you pause for a while before dropping the element, the DOM icon (</>) appears. When you hove

264Page content and assetsLast updated 6/3/2015Keyboard navigation in Live ViewYou can traverse page elements or selectors in Element Display using yo

265Page content and assetsLast updated 6/3/2015Traverse selectorsPress the Tab key to traverse through the selectors in Element Display. The selector

266Page content and assetsLast updated 6/3/2015Unsupported scenarios• Dreaweaver template files cannot be edited in Live View.• Tags that have both st

267Page content and assetsLast updated 6/3/2015You can move around the DOM panel and place it at any convenient location on the user interface. You ca

268Page content and assetsLast updated 6/3/2015Edit HTML structure using the DOM panelThe current selected element on the page is highlighted in the D

269Page content and assetsLast updated 6/3/2015A Location where the dragged element is placed B Reference element C Element being moved Important:

270Page content and assetsLast updated 6/3/2015Note: When you create CSS inline styles, Dreamweaver adds style attribute code directly to the body of

271Page content and assetsLast updated 6/3/2015Font Changes the font of the targeted rule.Size Sets the font size for the targeted rule. Text Color

272Page content and assetsLast updated 6/3/2015Target Specifies the frame or window in which the linked document will load:• _blank loads the linked

21Workspace and workflowLast updated 6/3/2015Insert panel overviewThe Insert panel contains buttons for creating and inserting objects such as tables,

273Page content and assetsLast updated 6/3/2015Ignore All Ignores all instances of the unrecognized word.Change All Replaces all instances of the un

274Page content and assetsLast updated 6/3/2015• Select File > Import > Word Document or File > Import > Excel Document. 3 In the Insert D

275Page content and assetsLast updated 6/3/2015Format paragraphsUse the Format pop-up menu in the HTML Property inspector or the Format > Paragraph

276Page content and assetsLast updated 6/3/2015Indent textUsing the Indent command applies the blockquote HTML tag to a paragraph of text, indenting t

277Page content and assetsLast updated 6/3/20152 Select Window > Properties to open the Property inspector, and modify the properties as desired:Th

278Page content and assetsLast updated 6/3/20154 When you have finished selecting specific fonts, select a generic font family from the Available Font

279Page content and assetsLast updated 6/3/2015Add local web fonts to the Font listYou can add web fonts from your computer to the Font list in Dreamw

280Page content and assetsLast updated 6/3/2015Dreamweaver provides a convenient Date object, which inserts the current date in whatever format you pr

281Page content and assetsLast updated 6/3/2015The Assets panel provides different ways to view assets:Site list Shows all of the assets in your site

282Page content and assetsLast updated 6/3/2015Display assets in a category❖ Click a category icon on the left side of the Assets panel.Sort assets❖ C

22Workspace and workflowLast updated 6/3/2015When you view sites, files, or folders in the Files panel, you can change the size of the viewing area, a

283Page content and assetsLast updated 6/3/20154 Do one of the following:• Drag the asset from the panel to the document. You can drag from the list v

284Page content and assetsLast updated 6/3/2015b Do one of the following:• Drag the URL from the preview or the list view. Hover the mouse on elements

285Page content and assetsLast updated 6/3/2015Note: The Files panel might show a different site from the one that the Assets panel shows. This is bec

286Page content and assetsLast updated 6/3/2015Add or remove favorite assetsThere are several ways to add assets to your site’s Favorites list in the

287Page content and assetsLast updated 6/3/20153 Do one of the following:• Right-click (Windows) or Control-click (Macintosh) the asset’s name or icon

288Page content and assetsLast updated 6/3/2015Dreamweaver also allows you to insert images dynamically. Dynamic images are those images that change o

289Page content and assetsLast updated 6/3/20151 Click the image and select Window > Properties to view the Property inspector for a selected image

290Page content and assetsLast updated 6/3/2015Crop Trims the size of an image, removing unwanted areas from the selected image.Resample Resamples

291Page content and assetsLast updated 6/3/20152 Resize the element by doing one of the following:• To adjust the width of the element, drag the selec

292Page content and assetsLast updated 6/3/2015When viewed in a browser, the label and size text do not appear. Replace an image placeholderAn image p

iiiLast updated 6/3/2015ContentsChapter 1: What's newNew features summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

23Workspace and workflowLast updated 6/3/2015Test i ng S er ver v ie wRepository viewThe Files panel interacts with the server at regular intervals t

293Page content and assetsLast updated 6/3/2015button in the Property inspector, the image updates automatically, reflecting any changes that you made

294Page content and assetsLast updated 6/3/20152 Adjust the crop handles until the bounding box surrounds the area of the image that you want to keep.

295Page content and assetsLast updated 6/3/2015Create a rollover imageYou can insert rollover images in your page. A rollover is an image that, when v

296Page content and assetsLast updated 6/3/2015Start the external image editor❖ Do one of the following:• Double-click the image you want to edit.• Ri

297Page content and assetsLast updated 6/3/2015Change an existing editor preference1 Open the File Types/Editors Preferences dialog box by doing one o

298Page content and assetsLast updated 6/3/2015A dialog box appears letting you select a source file and specify certain parameters for the media obje

299Page content and assetsLast updated 6/3/2015• In Design view, right-click (Windows) or Control-click (Macintosh) the media element within the curre

300Page content and assetsLast updated 6/3/2015Insert Shockwave moviesYou can use Dreamweaver to insert Shockwave movies into your documents. Adobe® S

301Page content and assetsLast updated 6/3/2015• Select Insert > Media > Plugin.2 In the dialog box that appears, select a content file for a pl

302Page content and assetsLast updated 6/3/2015Insert an ActiveX controlYou can insert an ActiveX control in your page. ActiveX controls (formerly kno

24Workspace and workflowLast updated 6/3/2015The CSS Designer panel consists of the following panes:Sources Lists all the CSS style sheets associated

303Page content and assetsLast updated 6/3/2015Data Specifies a data file for the ActiveX control to load. Many ActiveX controls, such as Shockwave a

304Page content and assetsLast updated 6/3/2015Use parameters to control media objectsDefine special parameters to control Shockwave and SWF files, Ac

305Page content and assetsLast updated 6/3/2015Live View renders the video, providing a preview of the video that you are embedding in the web page.No

306Page content and assetsLast updated 6/3/2015For more information about working with video, visit the Video Technology Center at www.adobe.com/go/fl

307Page content and assetsLast updated 6/3/20152 Select Streaming Video from the Video Type pop-up menu.Server URI Specifies the server name, applica

308Page content and assetsLast updated 6/3/2015Edit Flash Player download informationWhen you insert an FLV file in a page, Dreamweaver inserts code t

309Page content and assetsLast updated 6/3/2015Normally, you require a testing server only if you are developing pages with ASP, ColdFusion, or PHP (s

310Page content and assetsLast updated 6/3/2015For more information on HTML5 video element, see the article on HTML5 Video at W3schools.com.More Help

311Page content and assetsLast updated 6/3/2015Preview the video in browser1 Save the web page.2 Select File > Preview in Browser. Select the brows

312Page content and assetsLast updated 6/3/2015The placeholder has a tabbed blue outline. The tab indicates the type of asset (SWF file) and the ID of

25Workspace and workflowLast updated 6/3/2015Visual guides overviewDreamweaver provides several kinds of visual guides to help you design documents an

313Page content and assetsLast updated 6/3/2015Set SWF file propertiesYou can set properties for SWF files using the Property inspector. The propertie

314Page content and assetsLast updated 6/3/2015More Help topics Working with Flash and DreamweaverInserting FLV filesWorking with Flash and Dreamweave

315Page content and assetsLast updated 6/3/2015Audio file formatsYou can add sound to a web page. There are several different types of sound files and

316Page content and assetsLast updated 6/3/2015Embed a sound fileEmbedding audio incorporates the sound directly into the page, but the sound only pla

317Page content and assetsLast updated 6/3/2015• Title: Enter a title for the audio file. • Fallback text: Enter the text to be displayed in browsers

318Page content and assetsLast updated 6/3/2015Saved commands are retained permanently (unless you delete them), while recorded commands are discarded

319Page content and assetsLast updated 6/3/2015Erase the history list for the current document:❖ In the History panel’s context menu, select Clear His

320Page content and assetsLast updated 6/3/2015Apply steps to one other object1 Select the object.2 Select the relevant steps in the History panel, an

321Page content and assetsLast updated 6/3/20152 Click Copy Steps in the History panel .Note: The Copy Steps button in the History panel is different

322Page content and assetsLast updated 6/3/2015Record and save commandsRecord a temporary command for short-term use, or record and save a command to

26Workspace and workflowLast updated 6/3/2015Manage windows and panelsYou can create a custom workspace by moving and manipulating Document windows an

323Page content and assetsLast updated 6/3/2015About library itemsA library is a special Dreamweaver file containing a collection of individual assets

324Page content and assetsLast updated 6/3/2015Working with library itemsNote: The user interface has been simplified in Dreamweaver CC and later. As

325Page content and assetsLast updated 6/3/2015You can rename items to break their connection with documents or templates, delete items from the site’

326Page content and assetsLast updated 6/3/2015Delete a library item from a libraryWhen you delete a library item, Dreamweaver removes it from the lib

327Page content and assetsLast updated 6/3/2015Make library items editable in a documentIf you’ve added a library item to your document and you want t

328Page content and assetsLast updated 6/3/2015About Photoshop integrationYou can insert Photoshop image files (PSD format) into web pages in Dreamwea

329Page content and assetsLast updated 6/3/2015When the web image (that is, the image on the Dreamweaver page) is out of sync with the original Photos

330Page content and assetsLast updated 6/3/20154 In the Image Optimization dialog box that appears, adjust optimization settings as needed and click O

331Page content and assetsLast updated 6/3/2015Edit a Smart Object’s original Photoshop fileAfter you create a Smart Object on your Dreamweaver page,

332Page content and assetsLast updated 6/3/2015Note: While the Update from Original functionality is not available for pasted images, you can still op

27Workspace and workflowLast updated 6/3/2015You can prevent panels from filling all the space in a dock. Drag the bottom edge of the dock up so it no

333Page content and assetsLast updated 6/3/2015Setting Image Optimization dialog box optionsWhen you create a Smart Object or paste a selection from P

334Last updated 6/3/2015Chapter 8: Linking and navigationAbout linking and navigationNote: The user interface has been simplified in Dreamweaver CC an

335Linking and navigationLast updated 6/3/2015You must use an absolute path to link to a document or asset on another server. You can also use absolut

336Linking and navigationLast updated 6/3/2015A site root–relative path is often the best way to specify links if you frequently move HTML files from

337Linking and navigationLast updated 6/3/2015Attaching JavaScript behaviors to linksYou can attach a behavior to any link in a document. Consider usi

338Linking and navigationLast updated 6/3/2015• Shift-drag from the selection and point to a visible anchor in the current document, a visible anchor

339Linking and navigationLast updated 6/3/2015Note: Content linked with a site root–relative path does not appear when you preview documents in a loca

340Linking and navigationLast updated 6/3/2015• Shift-drag in the Document window from the selected text or image to the anchor you want to link to: e

341Linking and navigationLast updated 6/3/2015Create a script link1 Select text, an image, or an object in the Document window’s Design view.2 In the

342Linking and navigationLast updated 6/3/2015Change a link sitewideIn addition to having Dreamweaver update links automatically whenever you move or

28Workspace and workflowLast updated 6/3/2015Press Ctrl (Windows) or Command (Mac OS) while moving a panel to prevent it from docking. Press Esc while

343Linking and navigationLast updated 6/3/2015Apply a behaviorFind broken, external, and orphaned linksJump menusNote: The user interface has been sim

344Linking and navigationLast updated 6/3/2015Edit jump menu itemsYou can change the order of items in the menu or the file an item links to, and you

345Linking and navigationLast updated 6/3/2015Image mapsNote: The user interface has been simplified in Dreamweaver CC and later. As a result, you may

346Linking and navigationLast updated 6/3/2015• _self loads the linked file into the same frame or window as the link. This target is the default, so

347Linking and navigationLast updated 6/3/2015Dreamweaver verifies links only to documents within the site; Dreamweaver compiles a list of external li

348Linking and navigationLast updated 6/3/2015Fix broken linksAfter you run a links reports, you can fix broken links and image references directly in

349Last updated 6/3/2015Chapter 9: PreviewingPreview and inspect web pages on multiple devicesDreamweaver now lets you test your production-ready web

350PreviewingLast updated 6/3/2015Preview web pages on devices1 On your desktop computer, launch Dreamweaver, and open the web page that you want to p

351PreviewingLast updated 6/3/20155 After a successful login, the names of the connected devices appear in the Device Preview pop-up. And, you will se

352PreviewingLast updated 6/3/2015• To inspect the web page on a specific device, click the inspect icon that corresponds to the device name in the De

29Workspace and workflowLast updated 6/3/2015Collapse and expand panel iconsYou can collapse panels to icons to reduce clutter on the workspace. In so

353PreviewingLast updated 6/3/2015You can switch to Live view any time you are in Design view. Switching to Live view, however, is not related to swit

354PreviewingLast updated 6/3/20154 To return to the editable Code view, click the Live Code button again.To change Live Code preferences, choose Edit

355PreviewingLast updated 6/3/2015Preview in a browserYou can preview a page in a browser at any time; you don’t have to upload it to a web server fir

356PreviewingLast updated 6/3/2015Live View video tutorialSite root–relative pathsWorking with Device Central and Dreamweaver

357Last updated 6/3/2015Chapter 10: CodingGeneral information about coding in DreamweaverNote: The user interface has been simplified in Dreamweaver C

358CodingLast updated 6/3/2015The Roundtrip HTML capabilities in Dreamweaver let you move your documents back and forth between a text-based HTML edit

359CodingLast updated 6/3/2015Regular expressionsRegular expressions are patterns that describe character combinations in text. Use them in your code

360CodingLast updated 6/3/2015Use parentheses to set off groupings within the regular expression to be referred to later. Then use $1, $2, $3, and so

361CodingLast updated 6/3/2015Note: In the Search For box, to refer to a parenthetical grouping earlier in the regular expression, use \1, \2, \3, and

362CodingLast updated 6/3/2015Viewing codeYou can view the source code for the current document in several ways: you can display it in the Document wi

30Workspace and workflowLast updated 6/3/2015Save a custom workspace1 With the workspace in the configuration you want to save, do one of the followin

363CodingLast updated 6/3/20152 Select File Types/Editors from the Category list on the left.3 In the Open In Code View box, add the filename extensio

364CodingLast updated 6/3/2015Hidden Characters Displays special characters in place of white space. For example, a dot replaces each space, a double

365CodingLast updated 6/3/2015Note: For servers that you connect to using FTP, this option applies only to binary transfer mode; the ASCII transfer mo

366CodingLast updated 6/3/2015Note: Unlike the other options in this preferences dialog box, this option does not apply when you open a document, only

367CodingLast updated 6/3/20154 If you want to customize the theme, perform the following steps:a To change the background colors, use the following o

368CodingLast updated 6/3/2015c To revert to the factory default settings of a theme, click Restore Defaults.5 Click Apply to save the changes.You can

369CodingLast updated 6/3/20155 Relaunch Dreamweaver and check the default themes list (Preferences > Code Coloring) to see if your theme is listed

370CodingLast updated 6/3/2015Writing and editing codeNote: The user interface has been simplified in Dreamweaver CC and later. As a result, you may n

371CodingLast updated 6/3/2015Display a code hints menuThe code hints menu appears automatically as you type in Code view. But you can also display th

372CodingLast updated 6/3/2015Dreamweaver displays syntax errors not only for the current page but also for related pages. For example, suppose you ar

31Workspace and workflowLast updated 6/3/2015• To restore all the workspaces installed with Photoshop, click Restore Default Workspaces in the Interfa

373CodingLast updated 6/3/2015Note: The code hints you create are specifically for the site selected in the Dreamweaver Files panel. In order for the

374CodingLast updated 6/3/20153 Specify a new name for the structure and click Rename.Note: If the name you specify is already in use, Dreamweaver pro

375CodingLast updated 6/3/2015Note: This option is not available for HTML, CSS, and JS files. Use linting in these files to find potential errors in c

376CodingLast updated 6/3/2015When you click an icon, the code may appear in your page immediately, or a dialog box may appear requesting more informa

377CodingLast updated 6/3/2015To insert CSS code for creating border radius with vendor prefixes, open your CSS file and type the following Emmet abbr

378CodingLast updated 6/3/2015Display comment markers in Design view❖ Select View > Visual Aids > Invisible Elements.Make sure that the Comments

379CodingLast updated 6/3/2015Color previewHover your mouse over color values to preview colors in Code View. The following are the supported formats:

380CodingLast updated 6/3/2015Note:Only the first error in the line is displayed. If the line contains only a warning, the description of the warning

381CodingLast updated 6/3/2015Remove All Tags Removes all the tags in the selection.Convert Lines To Table Wraps the selection in a table tag with n

382CodingLast updated 6/3/2015For a video tutorial on working with Live View, related files, and the Code Navigator, see www.adobe.com/go/lrvid4044_dw

32Workspace and workflowLast updated 6/3/2015About customizing Dreamweaver in multiuser systemsYou can customize Dreamweaver to suit your needs even i

383CodingLast updated 6/3/2015Extract JavaScriptThe JavaScript Extractor (JSE) removes all or most of the JavaScript from your Dreamweaver document, e

384CodingLast updated 6/3/20154 Click OK.The summary dialog provides a summary of extractions. Review the extractions and click OK.5 Save the page.Dre

385CodingLast updated 6/3/20152 In the Commands pop-up menu, select Snippets.A list of snippets appears.3 Select a snippet and assign a keyboard short

386CodingLast updated 6/3/20153 Navigate to the folder where your queries are saved. Then select a query file and click Open.4 Click Find Next, Find A

387CodingLast updated 6/3/2015Print codeYou can print your code to edit it offline, archive it, or distribute it.1 Open a page in Code view.2 Select F

388CodingLast updated 6/3/2015You can collapse code in HTML, PHP, XML, and SVG files based on tag blocks. In CSS, LESS, Sass, SCSS, and JS files, you

389CodingLast updated 6/3/2015Specify the code folding sizeThe default code folding size is two lines. This means, when you collapse code, all the cod

390CodingLast updated 6/3/2015To access and edit these files, perform the following steps:1 Click Edit > Preferences (Win) or Dreamweaver > Pref

391CodingLast updated 6/3/2015The lines that contain the errors or warnings are highlighted in red and yellow respectively. You can double click a mes

392CodingLast updated 6/3/2015Combine Nested <font> Tags When Possible Consolidates two or more font tags when they control the same range of t

ivDREAMWEAVERContentsLast updated 6/3/2015Working with Bootstrap files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

33Workspace and workflowLast updated 6/3/2015specify the source file for images, the number of rows in a table, and so on. For roll over images and Fi

393CodingLast updated 6/3/2015Validate documents using W3C validatorDreamweaver helps you create standards-compliant web pages with its in-built suppo

394CodingLast updated 6/3/2015• To hide errors/warnings, select the error/warning. Click the Options button, and select Hide Error.• To view all the e

395CodingLast updated 6/3/2015Make an existing HTML document XHTML-compliant1 Open a document, and do one of the following:• For a document without fr

396CodingLast updated 6/3/2015Edit code with the Property inspectorYou can use the Property inspector to inspect and edit the attributes of text or of

397CodingLast updated 6/3/2015• If the attribute takes a value from a source of dynamic content (such as a database), click the Dynamic Data button to

398CodingLast updated 6/3/20153 Enter the HTML tag and press Enter.The tag is inserted into your code, along with a matching closing tag if applicable

399CodingLast updated 6/3/2015Use a hints menu1 Do one of the following:• Begin to type a tag or attribute name. The selection in the Code Hints menu

400CodingLast updated 6/3/2015• Create a link in your document to an external script file without leaving Design view.• Edit a script without leaving

401CodingLast updated 6/3/20152 In the ASP script Property inspector, click the Edit button.3 Edit the ASP server-side script, and click OK.Edit scrip

402CodingLast updated 6/3/2015Edit an element in the head section of a document1 Select View > Head Content.2 Click one of the icons in the head se

34Workspace and workflowLast updated 6/3/2015Set Fonts preferences for documents in DreamweaverA document’s encoding determines how the document appea

403CodingLast updated 6/3/2015Specify keywords for the pageMany search-engine robots (programs that automatically browse the web gathering information

404CodingLast updated 6/3/20152 Select the Refresh marker that appears at the top of the Document window.3 In the Property inspector, set the Refresh

405CodingLast updated 6/3/2015Add a Link meta tag1 Select Insert > HTML > Head Tags > Link.2 Specify the Link meta tag properties in the dial

406CodingLast updated 6/3/2015With Dreamweaver you can preview documents just as they’ll appear after they’re on the server, both in the Design view a

407CodingLast updated 6/3/20153 To change the type of the include, select the server-side include in the Document window and change the type in the Pr

408CodingLast updated 6/3/2015Open and close the Tag Library editor1 Select Edit >Tag Libraries to open the Tag library editor.The Tag Library Edit

409CodingLast updated 6/3/20152 In the Used In list, select every document type that should use the tag library.The document types you select here det

410CodingLast updated 6/3/2015More Help topics Importing custom tags into DreamweaverSetting coding preferencesSetting coding preferencesImporting cus

411CodingLast updated 6/3/2015• To import only certain custom tags from the application server, select ASP.NET > Import Selected ASP.NET Custom Tag

412Last updated 6/3/2015Chapter 11: JavascriptUsing JavaScript behaviors (general instructions)Note: The user interface has been simplified in Dreamwe

35Workspace and workflowLast updated 6/3/2015More Help topics Workspace layout overviewUpdate links automaticallyUnderstanding document encodingUse th

413JavascriptLast updated 6/3/2015Behaviors that have already been attached to the currently selected page element appear in the behavior list (the ma

414JavascriptLast updated 6/3/2015To see which tags you can use with a given event in a given browser, search for the event in one of the files in the

415JavascriptLast updated 6/3/2015Update a behavior1 Select an element that has the behavior attached to it.2 Choose Window > Behaviors and double-

416JavascriptLast updated 6/3/2015Apply the Change Property behaviorUse the Change Property behavior to change the value of one of an object’s propert

417JavascriptLast updated 6/3/2015Apply the Control Shockwave or SWF behaviorThis behavior has been deprecated as of Dreamweaver CS5.Apply the Drag AP

418JavascriptLast updated 6/3/2015This option is useful when the image inside the AP element contains an element that suggests dragging, such as a tit

419JavascriptLast updated 6/3/2015Apply the Go To URL behaviorThe Go To URL behavior opens a new page in the current window or in the specified frame.

420JavascriptLast updated 6/3/2015Apply the Open Browser Window behaviorUse the Open Browser Window behavior to open a page in a new window. You can s

421JavascriptLast updated 6/3/20152 Click Browse to select an image file, or enter the path and filename of an image in the Image Source File box.3 Cl

422JavascriptLast updated 6/3/2015Apply the Set Text Of Status Bar behaviorThe Set Text Of Status Bar behavior shows a message in the status bar at th

36Workspace and workflowLast updated 6/3/20152 To split the view vertically, select View > Split Vertically. To split the view horizontally, desele

423JavascriptLast updated 6/3/2015Apply the Show-Hide Elements behaviorThe Show-Hide Elements behavior shows, hides, or restores the default visibilit

424JavascriptLast updated 6/3/2015There is also a Swap Image Restore behavior, which restores the last set of swapped images to their previous source

425JavascriptLast updated 6/3/2015Use E-mail address Checks that the field contains an @ symbol.Use Number Checks that the field contains only num

426Last updated 6/3/2015Chapter 12: Cross-productAdd-OnsAdd-ons are new features that you can add easily to Dreamweaver. You can use many types of add

427Cross-productLast updated 6/3/2015Important: Before installing add-ons, ensure that you have enabled file sync for your Adobe Creative Cloud accoun

428Cross-productLast updated 6/3/20153 In the Files tab, set Sync On/Off to On.

429Cross-productLast updated 6/3/2015Cross-application integrationAbout Photoshop, Flash, and Fireworks integrationPhotoshop, Fireworks, and Flash are

430Cross-productLast updated 6/3/2015In addition to location information, Design Notes contain other pertinent information about exported files. For e

431Cross-productLast updated 6/3/2015When the image is part of a Fireworks table, you can open the entire Fireworks table for edits, as long as the &l

432Cross-productLast updated 6/3/20153 Start Fireworks in Editing From Dreamweaver mode by doing one of the following:• In the Property inspector, cli

37Workspace and workflowLast updated 6/3/2015For less precise resizing, use your operating system’s standard methods of resizing windows, such as drag

433Cross-productLast updated 6/3/2015Edit Fireworks pop-up menus in DreamweaverYou can create a pop-up menu in Fireworks 8 or later and then edit it w

434Cross-productLast updated 6/3/2015Insert Fireworks HTML code in a Dreamweaver documentFrom Fireworks, you can use the Export command to export and

435Cross-productLast updated 6/3/2015Update Fireworks HTML code placed in DreamweaverIn Fireworks, the File > Update HTML command provides an alter

436Cross-productLast updated 6/3/2015Dreamweaver switches the focus to Flash, and Flash attempts to locate the Flash authoring file (FLA) for the sele

437Cross-productLast updated 6/3/2015Note: Adobe Bridge is only installed with Dreamweaver CS5 when you install Creative Suite CS5; it is not included

438Cross-productLast updated 6/3/2015Start Dreamweaver from Adobe Bridge❖ Select a file in Adobe Bridge and do one of the following:• Select File >

439Cross-productLast updated 6/3/2015Use the tips below to ensure that web pages created in Dreamweaver display well on mobile devices.• If you use th

440Cross-productLast updated 6/3/2015AIR Extension for Dreamweaver The Adobe® AIR® Extension for Dreamweaver® lets you transform a web-based applicati

441Cross-productLast updated 6/3/20153 Select Site > Air Application Settings.4 Complete the AIR Application and Installer Settings dialog box, and

442Cross-productLast updated 6/3/2015Included Files specifies which files or folders to include in your application. You can add HTML and CSS files,

38Workspace and workflowLast updated 6/3/2015Server Debug Lets you view information to debug an Adobe® ColdFusion® application.Note: Support for Col

443Cross-productLast updated 6/3/2015Signing an application with a digital certificateA digital signature provides an assurance that the code for an a

444Cross-productLast updated 6/3/2015Namespecifies the name of the file type that appears in the Associated File Types list. This option is required,

445Cross-productLast updated 6/3/2015Dreamweaver integrates directly with Adobe® BrowserLab and Adobe® Business Catalyst InContext Editing. Help for w

446Cross-productLast updated 6/3/2015Note: If you are adding an InContext Editing editable region to a page that’s based on a Dreamweaver template, th

447Cross-productLast updated 6/3/20156 Save the page.If this is the first time you’re adding InContext Editing functionality to a page, Dreamweaver in

448Cross-productLast updated 6/3/2015To create a repeating region in Dreamweaver, follow these steps.1 Do one of the following:• Select a tag that you

449Cross-productLast updated 6/3/20155 Select or deselect options in the Repeating Regions Group Property inspector. Two options are available: Reorde

450Cross-productLast updated 6/3/2015Repeating Regions should not be inside Editable Regions or contain Repeating Regions GroupsInContext Editing edit

451Cross-productLast updated 6/3/2015Extract in Dreamweaver CCExtract integration with Dreamweaver lets web designers and developers apply design info

452Cross-productLast updated 6/3/2015Getting started with ExtractExtract in Dreamweaver lets you access your PSD files directly from within the Extrac

39Workspace and workflowLast updated 6/3/2015View and change properties for a page element1 Select the page element in the Document window.You might h

453Cross-productLast updated 6/3/2015Hands-on tutorialExtract a Photoshop design into code in Dreamweaver(Try-it, 13 min)Extract panel and workspaceTh

454Cross-productLast updated 6/3/2015To relaunch the tutorial, click the pop-up menu on the upper right corner of the panel and select Launch Tutorial

455Cross-productLast updated 6/3/20154 (Optional) In the Extract For Devices section, select the required resolutions. These settings will be used whe

456Cross-productLast updated 6/3/2015Note: If you choose percentage here, the measurements too will be displayed in percentage units.To copy CSS, sele

457Cross-productLast updated 6/3/20155 To extract multiple CSS properties, select the required properties in the Extract panel popup. Then, in code hi

458Cross-productLast updated 6/3/2015After you have extracted the text, you can extract properties, such as, font and colors that are associated with

459Cross-productLast updated 6/3/2015• Drag the image into the Live View of your document. Live Guides appear in the Live View to help you position th

460Cross-productLast updated 6/3/2015• When you click the image, contextual code hints in Dreamweaver are populated. In the Code View of your HTML doc

461Cross-productLast updated 6/3/2015Extract measurements from PSD filesUsing the Extract panel, you can easily view and extract the measurement value

462Cross-productLast updated 6/3/2015Note: You can change the unit of the font to 'em' or 'rem' in Extract preferences (Preference

40Workspace and workflowLast updated 6/3/2015More Help topics Document toolbar overviewStandard toolbar overviewCoding toolbar overviewStyle Rendering

463Cross-productLast updated 6/3/20154 To extract gradients, click a gradient swatch in the Gradients section. In the popup that appears, click Copy C

464Cross-productLast updated 6/3/2015Create a temporary Business Catalyst site1 Select Site > Manage Sites.2 Click New Business Catalyst Site.3 Sig

465Cross-productLast updated 6/3/2015Insert modules, data, or snippets1 Select Window > Business Catalyst to open the Business Catalyst panel.2 Do

466Cross-productLast updated 6/3/2015Text With Structure Inserts text that retains structure, but does not retain basic formatting. For example, you

467Last updated 6/3/2015Chapter 13: TemplatesAbout Dreamweaver templatesNote: The user interface has been simplified in Dreamweaver CC and later. As a

468Tem pl at esLast updated 6/3/2015An editable tag attribute Lets you unlock a tag attribute in a template, so the attribute can be edited in a temp

469Tem pl at esLast updated 6/3/2015To have Dreamweaver update document-relative paths to non-template files in the Templates folder, select the Templ

470Tem pl at esLast updated 6/3/2015Template expression languageThe template expression language is a small subset of JavaScript, and uses JavaScript

471Tem pl at esLast updated 6/3/2015The following is an example of the code you might enter in the head section of the template:<!-- TemplateParam

472Tem pl at esLast updated 6/3/2015You can identify a template file by looking at the title bar in the Document window. The title bar for a template

41Workspace and workflowLast updated 6/3/2015Insert an object1 Select the appropriate category from the Category pop-up menu of the Insert panel.2 Do

473Tem pl at esLast updated 6/3/2015Recognizing template-based documents in Design viewIn a document based on a template (a template-based document),

474Tem pl at esLast updated 6/3/2015<body bgcolor="#FFFFFF" leftmargin="0"> <table width="75%" border="1

475Tem pl at esLast updated 6/3/2015Create a template from an existing documentYou can create a template from an existing document.1 Open the document

476Tem pl at esLast updated 6/3/2015When a Contribute user creates a new document within a site containing Dreamweaver templates, Contribute lists the

477Tem pl at esLast updated 6/3/2015More Help topics Types of template regionsSetting authoring preferences for templatesAssociate Design Notes with f

478Tem pl at esLast updated 6/3/20154 Click OK. The editable region is enclosed in a highlighted rectangular outline in the template, using the highli

479Tem pl at esLast updated 6/3/2015About template repeating regionsA repeating region is a section of a template that can be duplicated many times in

480Tem pl at esLast updated 6/3/2015 If you don’t explicitly assign values for cell padding and cell spacing, most browsers display the table as if ce

481Tem pl at esLast updated 6/3/2015Using optional regions in templatesNote: The user interface has been simplified in Dreamweaver CC and later. As a

482Tem pl at esLast updated 6/3/2015You cannot wrap a selection to create an editable optional region. Insert the region, then insert the content in t

42Workspace and workflowLast updated 6/3/2015Depending on the object, a corresponding object-insertion dialog box may appear, prompting you to browse

483Tem pl at esLast updated 6/3/2015More Help topics Modify template propertiesTypes of template regionsModify template propertiesModify template prop

484Tem pl at esLast updated 6/3/2015To make it easier to identify a specific editable tag attribute later, use a label that identifies the element and

485Tem pl at esLast updated 6/3/2015Editable regions in a base template are passed through to the nested template, and remain editable in pages create

486Tem pl at esLast updated 6/3/2015When you add a new editable region in an editable region passed through to the nested template, the highlighting c

487Tem pl at esLast updated 6/3/20152 Select File > Save As Template to save the new document as a nested template:3 Enter a name in the Save As bo

488Tem pl at esLast updated 6/3/2015Open a template for editingYou can open a template file directly for editing, or you can open a template-based doc

489Tem pl at esLast updated 6/3/2015This method of renaming works in the same way as renaming a file in Windows Explorer (Windows) or the Finder (Maci

490Tem pl at esLast updated 6/3/2015Update templates in a Contribute siteContribute users can’t make changes to a Dreamweaver template. You can, howev

491Tem pl at esLast updated 6/3/2015Exporting and importing template contentNote: The user interface has been simplified in Dreamweaver CC and later.

492Tem pl at esLast updated 6/3/20152 In the Folder box, enter the file path to the folder you want to export the file to or click Browse and select t

vDREAMWEAVERContentsLast updated 6/3/2015Spell check a web page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

43Workspace and workflowLast updated 6/3/2015• To add a separator below an object, select an object in the Favorite Objects pane on the right, and the

493Tem pl at esLast updated 6/3/2015Apply a template to an existing document from the Document window1 Open the document you want to apply the templat

494Tem pl at esLast updated 6/3/2015In pages based on templates, template users can edit content in editable regions only. You can easily identify and

495Tem pl at esLast updated 6/3/2015Add, delete, or change the order of a repeating region1 Open the template-based document.2 Place the insertion poi

496Tem pl at esLast updated 6/3/2015Template syntaxNote: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not

497Tem pl at esLast updated 6/3/2015<!-- InstanceBegin template="..." codeOutsideHTMLIsLocked="..." --> <!-- InstanceEnd

498Tem pl at esLast updated 6/3/2015Note: If you want to make global changes, you can edit the source file that stores your preferences. On Windows XP

499Last updated 6/3/2015Chapter 14: Mobile and multiscreenCreating media queriesYou can use media queries to specify CSS files based on the reported c

500Mobile and multiscreenLast updated 6/3/20156 Do one of the following:• Click "+" to define the properties for the media query file.• Clic

501Mobile and multiscreenLast updated 6/3/20154 Under Advanced Settings in the left panel, select Local Info.5 In Site-Wide Media Query File on the ri

502Mobile and multiscreenLast updated 6/3/2015About CDNs and local jQuery Mobile filesCDNsA CDN (content delivery network) is a computer network conta

44Workspace and workflowLast updated 6/3/20152 Position the Insert panel and drop it. A blue line indicates where you can drop the panel.Show horizont

503Mobile and multiscreenLast updated 6/3/2015Use the options in the Multiscreen menu to see how the design is displayed in devices with various dimen

504Mobile and multiscreenLast updated 6/3/20152 Save the file to the core folder containing the other resources. More Help topics http://jquerymobile.

505Last updated 6/3/2015Chapter 15: XMLAbout XML and XSLTNote: The user interface has been simplified in Dreamweaver CC and later. As a result, you ma

506XMLLast updated 6/3/2015Extensible Stylesheet Language Transformations (XSLT) is a subset language of XSL that actually lets you display XML data o

507XMLLast updated 6/3/2015A Browser requests dynamic page B Web server finds page and passes it to application server C Application server scans pa

508XMLLast updated 6/3/2015First, create an entire XSLT page and attach an XML data source. (Dreamweaver prompts you to attach the data source when yo

509XMLLast updated 6/3/2015If you don’t own the XML page to which you’re linking (for example, if you want to use XML data from an RSS feed somewhere

510XMLLast updated 6/3/2015When you apply a Repeating Region XSLT object to an element in the Document window, a thin, tabbed, gray outline appears ar

511XMLLast updated 6/3/2015The following topics provide guidelines for helping you determine the appropriate previewing methods, based on your needs.P

512XMLLast updated 6/3/2015Workflow for performing server-side XSL transformationsYou can perform server-side XSL transformations on the server. Read

45Workspace and workflowLast updated 6/3/2015Note: You can use Ctrl/Cmd+ Z to undo or Ctrl/Cmd + Y to redo all actions you perform in CSS Designer. Th

513XMLLast updated 6/3/2015• Select XSLT (Fragment) to create an XSLT fragment.3 Click Create and do one of the following in the Locate XML Source dia

514XMLLast updated 6/3/2015Note: You can also click the Source link at the upper-right corner of the Bindings panel to add an XML data source.2 Do one

515XMLLast updated 6/3/2015An XML data placeholder appears on the page. The placeholder is highlighted and in curly brackets. It uses the XPath (XML P

516XMLLast updated 6/3/20154 Click OK.In the Document window, a thin, tabbed, gray outline appears around the repeated region. When you preview your w

517XMLLast updated 6/3/2015Note: If you want to insert the contents of an entire XSLT page in a dynamic page, the procedure is exactly the same. Befor

518XMLLast updated 6/3/2015Delete XSLT fragments from dynamic pagesYou can remove an XSLT fragment from a page by deleting the XSL Transformation serv

519XMLLast updated 6/3/2015After you have completed the two previous steps, you can create new styles in your XSLT fragment using the same style sheet

520XMLLast updated 6/3/20153 Click the Edit button.4 Make your changes and click OK.Delete an XSLT parameter1 Open the XSL Transformation dialog box.

521XMLLast updated 6/3/2015Note: You must surround string values such as true in quotes. Dreamweaver encodes the quotes for you (&apos;) so that t

522XMLLast updated 6/3/20154 To insert another condition, place the insertion point in Code view between <xsl:when> tag pairs or just before the

46Workspace and workflowLast updated 6/3/2015Create and attach style sheets1 In the Sources pane of the CSS Designer panel, click , and then click on

523XMLLast updated 6/3/2015The XPath Expression Builder is a Dreamweaver feature that lets you build simple XPath expressions for identifying specific

524XMLLast updated 6/3/2015These options would insert the following code in your XSLT page:<xsl:value-of select="format-number(provider/store/

525XMLLast updated 6/3/2015When you click OK, the following code is inserted in your XSLT page:<xsl:for-each select="provider/store/items/item

526XMLLast updated 6/3/2015When you click OK, the following code is inserted in your XSLT page:<xsl:for-each select="provider/store/items/item

527XMLLast updated 6/3/2015When you click OK, the following code is inserted in your XSLT page:<xsl:for-each select="provider/store[@id = 1]/i

528XMLLast updated 6/3/2015Performing XSL transformationson the clientNote: The user interface has been simplified in Dreamweaver CC and later. As a r

529XMLLast updated 6/3/2015Note: The XML and XSL files you use for client-side transformations must reside in the same directory. If they don’t, the b

530XMLLast updated 6/3/2015If you use other character entities in an XSL file, you need to define them in the DTD section of the XSL file. Dreamweaver

531XMLLast updated 6/3/2015Add entity definitions to the XSL files Dreamweaver creates by default1 Locate the following configuration file in the Drea

532Last updated 6/3/2015Chapter 16: Dynamic sites, pages and web formsUnderstanding web applicationsNote: The user interface has been simplified in Dr

47Workspace and workflowLast updated 6/3/2015• To move a selector from one source to another, drag the selector to the required source in the Source p

533Dynamic sites, pages and web formsLast updated 6/3/2015Chris’s problem is that the fitness program has grown too successful. So many employees now

534Dynamic sites, pages and web formsLast updated 6/3/2015When the web server receives a request for a static page, the server reads the request, find

535Dynamic sites, pages and web formsLast updated 6/3/2015A Web browser requests dynamic page. B Web server finds page and passes it to application s

536Dynamic sites, pages and web formsLast updated 6/3/2015The following example shows the process of querying a database and returning data to the bro

537Dynamic sites, pages and web formsLast updated 6/3/2015<html> <head> <title>Trio Motors Information Page</title>

538Dynamic sites, pages and web formsLast updated 6/3/2015Web application terminologyThis section defines frequently used terms relating to web applic

539Dynamic sites, pages and web formsLast updated 6/3/2015A server technology The technology that an application server uses to modify dynamic pages

540Dynamic sites, pages and web formsLast updated 6/3/2015• A database driver that supports your databaseSeveral web hosting companies offer plans tha

541Dynamic sites, pages and web formsLast updated 6/3/2015Choosing a web serverTo develop and test web applications, you can choose from a number of c

542Dynamic sites, pages and web formsLast updated 6/3/2015concurrent user communities, consider server-based relational databases (typically referred

48Workspace and workflowLast updated 6/3/2015Select the Show Set check box to view only the set properties. To view all the properties that you can sp

543Dynamic sites, pages and web formsLast updated 6/3/2015To test the web server, place a test HTML page in the default root folder and attempt to ope

544Dynamic sites, pages and web formsLast updated 6/3/2015The local folder is the folder you use to store working copies of site files on your hard di

545Dynamic sites, pages and web formsLast updated 6/3/20153 To create a new data source, click the Plus (+) button in the Databases panel (Windows >

546Dynamic sites, pages and web formsLast updated 6/3/2015You can use a data source name (DSN) or a connection string to connect to the database. You

547Dynamic sites, pages and web formsLast updated 6/3/2015About connection stringsA connection string combines all the information your web applicatio

548Dynamic sites, pages and web formsLast updated 6/3/2015Because you can only specify an ODBC driver in a DSN, you must use a connection string if yo

549Dynamic sites, pages and web formsLast updated 6/3/20155 Select Using DSN On Testing Server.Note: Macintosh users can ignore this step because all

550Dynamic sites, pages and web formsLast updated 6/3/2015Understanding physical and virtual pathsAfter using Dreamweaver to upload your files to a re

551Dynamic sites, pages and web formsLast updated 6/3/2015If you don’t know the physical path of your files on the remote server, you can get the path

552Dynamic sites, pages and web formsLast updated 6/3/2015Delete a connection1 Open an ASP page in Dreamweaver and then open the Databases panel (Wind

49Workspace and workflowLast updated 6/3/2015Set border propertiesBorder Control properties are organized into logical tabs to help you quickly view o

553Dynamic sites, pages and web formsLast updated 6/3/20152 Click the Plus (+) button on the panel, select MySQL Connection from the menu, and complet

554Dynamic sites, pages and web formsLast updated 6/3/2015Troubleshooting database connectionsNote: The user interface has been simplified in Dreamwea

555Dynamic sites, pages and web formsLast updated 6/3/20152 In Windows Explorer, locate the database file or the folder containing the database, right

556Dynamic sites, pages and web formsLast updated 6/3/2015If you use Microsoft Access, the database file (.mdb) might be locked. The lock might be due

557Dynamic sites, pages and web formsLast updated 6/3/2015[Reference]80004005—Operation must use an updateable query]This error occurs when an event i

558Dynamic sites, pages and web formsLast updated 6/3/2015• Using a space in the name.The error can also occur when an input mask is defined for an ob

559Dynamic sites, pages and web formsLast updated 6/3/2015Using the Remove Connection Scripts commandYou can use the Remove Connection Scripts command

560Dynamic sites, pages and web formsLast updated 6/3/20153 Add dynamic content to a web page.After you define a recordset or other data source, and a

561Dynamic sites, pages and web formsLast updated 6/3/2015More Help topics Presenting content with tablesAdding and modifying imagesInserting SWF file

562Dynamic sites, pages and web formsLast updated 6/3/2015Database queries are written in Structured Query Language (SQL, pronounced “sequel”), a simp

50Workspace and workflowLast updated 6/3/2015Border color set to black for all sides

563Dynamic sites, pages and web formsLast updated 6/3/2015Session variables can only function if the user’s browser is configured to accept cookies. T

564Dynamic sites, pages and web formsLast updated 6/3/2015ColdFusion<CFSET session.prodID = form.txtProduct>ASP<% Session("prodID")

565Last updated 6/3/2015Dynamic sites, pages and web formsASP server variablesYou can define the following ASP server variables as sources of dynamic

566Dynamic sites, pages and web formsLast updated 6/3/20154 Complete the Recordset dialog box for your document type.For instructions, see the topics

567Dynamic sites, pages and web formsLast updated 6/3/2015Options for the simple Recordset dialog box (ColdFusion)Define a recordset for ColdFusion do

568Dynamic sites, pages and web formsLast updated 6/3/2015Define an advanced recordset by writing SQLWrite your own SQL statements by using the advanc

569Dynamic sites, pages and web formsLast updated 6/3/20154 If the SQL statement contains variables, define their values in the Variables area by clic

570Dynamic sites, pages and web formsLast updated 6/3/2015If no data source appears in the pop-up menu list, you will need to first create a ColdFusio

571Dynamic sites, pages and web formsLast updated 6/3/2015Define parameters in a SQL statement (PHP)Define parameters in a SQL statement; the default

572Dynamic sites, pages and web formsLast updated 6/3/20154 Define the variable 'varJob' by clicking the Plus (+) button in the Variables ar

51Workspace and workflowLast updated 6/3/2015The code that is inserted is based on the preference setting for shorthand or longhand. Delete and disabl

573Dynamic sites, pages and web formsLast updated 6/3/2015Define session variablesYou can use session variables to store and display information maint

574Dynamic sites, pages and web formsLast updated 6/3/2015Use a variable as a data source for a ColdFusion recordsetWhen you define a recordset for a

575Dynamic sites, pages and web formsLast updated 6/3/2015Define a ColdFusion local variableLocal variables are variables created with the CFSET or CF

576Dynamic sites, pages and web formsLast updated 6/3/20154 Specify the variable in the collection that you want to access, and click OK.For example,

577Dynamic sites, pages and web formsLast updated 6/3/2015Define a ColdFusion CGI variableThe defined CGI variable appears in the Bindings panel. ❖ In

578Dynamic sites, pages and web formsLast updated 6/3/2015Cache content sourcesYou can cache—or store—sources of dynamic content in a Design Note. Thi

579Dynamic sites, pages and web formsMore Help topics Database connections for ASP developersDatabase connections for PHP developersDefining sources o

580Dynamic sites, pages and web formsLast updated 6/3/2015There is often more than one way to make a given page element dynamic. For example, to make

581Dynamic sites, pages and web formsLast updated 6/3/20152 Select Insert > Image.The Select Image Source dialog box appears.3 Click the Data Sourc

582Dynamic sites, pages and web formsLast updated 6/3/2015• If the attribute you want to bind is not listed in the List view, click the Plus (+) butto

52Workspace and workflowLast updated 6/3/2015Identify page elements associated with a CSS Selector (13.1)Most often, a single CSS Selector is associat

583Dynamic sites, pages and web formsLast updated 6/3/2015Changing dynamic contentNote: The user interface has been simplified in Dreamweaver CC and l

584Dynamic sites, pages and web formsLet Adobe Contribute users edit dynamic contentWhen a Contribute user edits a page containing dynamic content or

585Dynamic sites, pages and web formsLast updated 6/3/2015About database recordsDisplaying database records involves retrieving information stored in

586Dynamic sites, pages and web formsLast updated 6/3/2015Recordset navigation links require the following dynamic elements:• A recordset to navigate•

587Dynamic sites, pages and web formsLast updated 6/3/2015• Assign individual server behaviors to each navigation linkThis section describes how to as

588Dynamic sites, pages and web formsLast updated 6/3/2015Display and hide regions based on recordset resultsYou can also specify that a region be dis

589Dynamic sites, pages and web formsLast updated 6/3/2015Reuse PHP recordsetsFor a tutorial on reusing PHP recordsets, see David Powers’s tutorial, H

590Dynamic sites, pages and web formsLast updated 6/3/20155 Click OK.A table and placeholders for the dynamic content defined in its associated record

591Dynamic sites, pages and web formsLast updated 6/3/2015Create custom record countersYou use individual record count behaviors to create custom reco

592Dynamic sites, pages and web formsLast updated 6/3/2015Apply data formats to dynamic content1 Select the dynamic content placeholder in the Documen

viDREAMWEAVERContentsLast updated 6/3/2015Managing tag libraries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

53Workspace and workflowLast updated 6/3/2015To remove the blue highlight around the elements, the Selector again.Note: The following table summarizes

593Dynamic sites, pages and web formsLast updated 6/3/2015Note: Though Dreamweaver only supports creating data formats for ASP pages, ColdFusion and P

594Dynamic sites, pages and web formsLast updated 6/3/2015Verify that the Web URL box specifies a URL that corresponds (maps) to the server folder. Fo

595Dynamic sites, pages and web formsLast updated 6/3/2015Custom server behaviors workflowIf you are a web developer proficient in ColdFusion, JavaScr

596Dynamic sites, pages and web formsLast updated 6/3/201515 Test the server behavior and ensure that it functions properly.Advanced optionsAfter you

597Dynamic sites, pages and web formsLast updated 6/3/2015Dreamweaver lets you develop code blocks that incorporate control statements that execute co

598Dynamic sites, pages and web formsLast updated 6/3/2015When you select a positioning option from the Insert Code pop-up menu, the options available

599Dynamic sites, pages and web formsLast updated 6/3/2015Position a code block relative to another tag on the page1 In the Insert Code pop-up menu, s

600Dynamic sites, pages and web formsLast updated 6/3/2015 <CFPROCPARAM type="IN" dbvarname="@@paramName@@" value=&quo

601Dynamic sites, pages and web formsLast updated 6/3/2015The loop directive includes two built-in variables that you can use for embedded if conditio

602Dynamic sites, pages and web formsLast updated 6/3/2015Create a dialog box for your server behavior to request the parameter value1 In the Server B

54Workspace and workflowLast updated 6/3/2015You can move around the DOM panel and place it at any convenient location on the user interface. You can

603Dynamic sites, pages and web formsLast updated 6/3/2015Edit the code of a server behavior created with the Server Behavior Builder1 In the Server B

604Dynamic sites, pages and web formsLast updated 6/3/2015• Apply the server behavior again and enter invalid data in each field of the dialog box. Tr

605Dynamic sites, pages and web formsLast updated 6/3/2015About collecting information from usersYou can use web forms or hypertext links to gather in

606Dynamic sites, pages and web formsLast updated 6/3/2015After a form parameter is created, Dreamweaver can retrieve the value and use it in a web ap

607Dynamic sites, pages and web formsLast updated 6/3/2015Creating URL parameters using HTML linksYou create URL parameters within an HTML link by usi

608Dynamic sites, pages and web formsLast updated 6/3/2015Building ColdFusion formsNote: Support for ColdFusion is removed in Dreamweaver CC and later

609Dynamic sites, pages and web formsLast updated 6/3/20153 Ensure that the form is still selected, and then use the Property inspector to set any of

610Dynamic sites, pages and web formsLast updated 6/3/2015Make sure the control is selected in Design view and then set the properties in the Property

611Dynamic sites, pages and web formsLast updated 6/3/2015CFTextField options (ColdFusion)To set the options of a ColdFusion text or password field, s

612Dynamic sites, pages and web formsLast updated 6/3/2015To specify a dynamic value, click the lightning bolt icon beside the Value box and select a

55Workspace and workflowLast updated 6/3/2015Edit HTML structure using the DOM panelThe current selected element on the page is highlighted in the DOM

613Dynamic sites, pages and web formsLast updated 6/3/2015Display Tag Editor Lets you edit properties not listed in the Property inspector.4 To label

614Dynamic sites, pages and web formsLast updated 6/3/2015Width Lets you specify the width of the control, in pixels. This property is ignored by the

615Dynamic sites, pages and web formsLast updated 6/3/2015You can insert two types of select boxes into a form: a menu that “drops down” when the user

616Dynamic sites, pages and web formsLast updated 6/3/2015Note: If the image is outside the site root folder, you should copy the image to the root fo

617Dynamic sites, pages and web formsLast updated 6/3/20154 Position the insertion point inside the form outline where you want to file field to appea

618Dynamic sites, pages and web formsLast updated 6/3/2015To specify a dynamic value, click the lightning bolt icon beside the Value box and select a

619Dynamic sites, pages and web formsLast updated 6/3/2015More Help topics Securing a folder in your application (ColdFusion)Working with Dreamweaver

620Dynamic sites, pages and web formsLast updated 6/3/2015Note: Passwords and other information sent to a server using a password field are not encryp

621Dynamic sites, pages and web formsLast updated 6/3/2015Image fields Let you insert an image in a form. Use image fields to make graphical buttons

622Dynamic sites, pages and web formsLast updated 6/3/2015f.(Optional) In the Target pop-up menu, specify the window in which to display the data retu

56Workspace and workflowLast updated 6/3/2015A Location where the dragged element is placed B Reference element C Element being moved Important: If

623Dynamic sites, pages and web formsLast updated 6/3/2015the Char Width is set to 20 (the default value) and a user enters 100 characters, only 20 of

624Dynamic sites, pages and web formsLast updated 6/3/2015Class Applies Cascading Style Sheets (CSS) rules to the object.Single radio button object o

625Dynamic sites, pages and web formsLast updated 6/3/2015File fields require that you use the POST method to transmit files from the browser to the s

626Dynamic sites, pages and web formsLast updated 6/3/2015Insert a group of radio buttons1 Place the insertion point inside the form outline.2 Select

627Dynamic sites, pages and web formsLast updated 6/3/2015Lay out the check boxes using line breaks or a table. If you select the table option, Dreamw

628Dynamic sites, pages and web formsLast updated 6/3/2015 Make existing HTML form menus dynamic1 In Design view, select the list/menu form object.2 I

629Dynamic sites, pages and web formsLast updated 6/3/2015Dynamically preselect an HTML radio buttonDynamically preselect an HTML radio button when a

630Dynamic sites, pages and web formsLast updated 6/3/20153 In the Behaviors panel (Window > Behaviors), click the Plus (+) button and select the V

631Dynamic sites, pages and web formsLast updated 6/3/2015Note: The screen reader reads the name you enter as the Label attribute for the object.ID a

632Dynamic sites, pages and web formsLast updated 6/3/2015Building ColdFusion formsBuilding Spry pages visuallyCreating forms tutorialStyling forms tu

57Workspace and workflowLast updated 6/3/2015Use Live Search to locate files based on filename or text present in files. The site selected in the File

633Dynamic sites, pages and web formsLast updated 6/3/2015Form elements with modified attributes• Form No Validate: Select this option to disable form

634Dynamic sites, pages and web formsLast updated 6/3/2015Date Time 12.2 Allows the user to select a date and time (with the time zone).http://www.w3.

635Last updated 6/3/2015Chapter 17: Building applications visuallyBuilding master and detail pagesNote: The user interface has been simplified in Drea

636Building applications visuallyLast updated 6/3/2015You can build master and detail pages by inserting a data object to create a master page and det

637Building applications visuallyLast updated 6/3/2015Typically, the recordset on the master page extracts a few columns from a database table while t

638Building applications visuallyLast updated 6/3/2015In the dynamic table, the selected text appears linked. When the page runs on the server, the li

639Building applications visuallyLast updated 6/3/20155 If desired, pass existing page parameters to the detail page by selecting the URL Parameters o

640Building applications visuallyLast updated 6/3/20157 Bind the recordset columns to the detail page by selecting the columns in the Bindings panel (

641Building applications visuallyLast updated 6/3/20154 In the Recordset pop-up menu, make sure the recordset containing the records you want to displ

642Last updated 6/3/2015Building applications visuallyBuilding an update record pageSet up a testing serverDefining sources of dynamic contentBuilding

58Workspace and workflowLast updated 6/3/2015Edit a page after zooming❖ Click the Select tool (the pointer icon) in the lower-right corner of the Docu

643Building applications visuallyLast updated 6/3/2015To add an HTML form to a search page, complete the following procedure. 1 Open the search page o

644Building applications visuallyLast updated 6/3/20153 Make sure the simple Recordset dialog box appears.If the advanced dialog box appears instead,

645Building applications visuallyLast updated 6/3/2015For example, suppose you want to create a recordset that includes only adventure trips to a spec

646Building applications visuallyLast updated 6/3/2015In the following ASP example, the HTML form on the search page uses the GET method and contains

647Building applications visuallyLast updated 6/3/2015Also, you can select text or an image on the page to serve as the link to the related page, or y

648Building applications visuallyLast updated 6/3/20152 Add an HTML form by placing the insertion point where you want the form to appear and selectin

649Building applications visuallyLast updated 6/3/20154 In the After Inserting, Go To box, enter the page to open after the record is inserted into th

650Building applications visuallyLast updated 6/3/20156 In the Form Fields area, specify the form objects you want to include on the insert page’s HTM

651Building applications visuallyLast updated 6/3/2015Search for the record to updateWhen users want to update a record, they must first find that rec

652Building applications visuallyLast updated 6/3/2015• An Update Record server behavior to update the database tableYou can add the final two basic b

59Workspace and workflowLast updated 6/3/2015Create a keyboard shortcutCreate your own shortcut keys, edit existing shortcuts, or select a predetermin

653Building applications visuallyLast updated 6/3/20153 In the Data Source or Connection pop-up menu, select a connection to the database.4 Enter your

654Building applications visuallyLast updated 6/3/20152 In the Connection pop-up menu, select a connection to the database.Click the Define button if

655Building applications visuallyLast updated 6/3/2015Form Element Properties optionsThe purpose of the Form Element Properties dialog box is to set t

656Building applications visuallyLast updated 6/3/2015To create the links manually1 On the results page, create a column in the table used to display

657Building applications visuallyLast updated 6/3/2015When the page runs, the values of the recordset's CODE field are inserted in the correspond

658Building applications visuallyLast updated 6/3/2015A special link surrounds the selected text. When the user clicks the link, the Go To Detail Page

659Building applications visuallyLast updated 6/3/2015To display only some of the record’s fields, click Selected and choose the desired fields by Con

660Building applications visuallyLast updated 6/3/2015In the following example, the record ID column, CODE, contains unique store codes.5 Click OK and

661Building applications visuallyLast updated 6/3/20154 In the Connection or Data Source (ColdFusion) pop-up menu, select a connection to the database

662Building applications visuallyLast updated 6/3/20158 In the After Deleting, Go To box, specify a page to open after the record has been deleted fro

60Workspace and workflowLast updated 6/3/20153 In the Commands list, select a command.To add a keyboard shortcut for a code snippet, select Snippet fr

663Building applications visuallyLast updated 6/3/2015Use ASP commands to modify a databaseYou can use Dreamweaver to create ASP command objects that

664Building applications visuallyLast updated 6/3/2015For more information on the type and size of SQL variables, see www.adobe.com/go/4e6b330a. 6 Clo

665Building applications visuallyLast updated 6/3/2015Add a stored procedure (ColdFusion) (CS6)You can use a stored procedure to modify a database. A

666Building applications visuallyLast updated 6/3/2015If the stored procedure takes parameters, you can create a page that gathers the parameter value

667Building applications visuallyLast updated 6/3/2015About registration pagesYour web application can contain a page that requires users to register

668Building applications visuallyLast updated 6/3/2015You can change the label of the Submit button by selecting the button, opening the Property insp

669Building applications visuallyLast updated 6/3/2015A login page is made up of the following building blocks:• A database table of registered users•

670Building applications visuallyLast updated 6/3/2015When a user clicks the Submit button on the login page, the Log In User server behavior compares

671Building applications visuallyLast updated 6/3/2015For example, if a user attempts to bypass the login page by typing the protected page’s URL in a

672Building applications visuallyLast updated 6/3/20155 To set more than one authorization level for a page, Control-click (Windows) or Command-click

61Workspace and workflowLast updated 6/3/2015Displaying web-application development panelsSelect the Data category from the Category pop-up menu of th

673Building applications visuallyLast updated 6/3/2015The page is usually a goodbye or thank you page.Log out users when a specific page loads1 Open t

674Building applications visuallyLast updated 6/3/2015More Help topics Enable the ColdFusion enhancementsBuilding a page that only authorized users ca

675Building applications visuallyLast updated 6/3/2015Note: The Components panel is available only when viewing a ColdFusion page in Dreamweaver. Crea

676Building applications visuallyLast updated 6/3/2015• If you’re running ColdFusion MX 7 or later, filter the list to show only the CFCs located in y

677Building applications visuallyLast updated 6/3/2015Open any ColdFusion page in Dreamweaver and display the components in the Components panel. To d

678Building applications visuallyLast updated 6/3/2015Note: This feature is available only if you have access to a computer running ColdFusion MX 7 or

679Building applications visuallyLast updated 6/3/2015If the package does not appear in the pop-up menu, you can refresh the list of packages by click

680Last updated 6/3/2015Chapter 18: AccessibilityDreamweaver and accessibilityNote: The user interface has been simplified in Dreamweaver CC and later

681AccessibilityLast updated 6/3/2015The Windows operating system’s high contrast setting is also supported. You activate this option through the Wind

682AccessibilityLast updated 6/3/2015If the panel you want to work in is open, but not expanded, place focus on the panel title bar, and then press th

62Workspace and workflowLast updated 6/3/2015Previewing dynamic pages in a browserWeb application developers often debug their pages by checking them

683AccessibilityLast updated 6/3/2015Pressing Tab in a right-most cell adds another row to the table. 2 To select a cell, press Control+A (Windows onl

684Last updated 6/3/2015Chapter 19: Dreamweaver and Creative CloudSynchronizing Dreamweaver settings with Creative CloudAdobe Creative Cloud subscript

685Dreamweaver and Creative CloudLast updated 6/3/2015If a site does not exist on a machine, Dreamweaver creates a new site folder in the default loca

686Dreamweaver and Creative CloudLast updated 6/3/2015On your second machine, the following dialog box appears when you launch Dreamweaver:Sync Cloud

687Dreamweaver and Creative CloudLast updated 6/3/2015Scenario 1You change the Preferences on the first machine and sync those changes with the cloud.

688Dreamweaver and Creative CloudLast updated 6/3/20153 Select Import Sync Settings, and click Close.4 Quit Dreamweaver and launch it again to apply t

689Dreamweaver and Creative CloudLast updated 6/3/20152 Click Sync Settings in the Category list.3 In the Settings To Sync section, click the setting

690Dreamweaver and Creative CloudLast updated 6/3/20157 Click Apply to save the changes you made to the sync settings preferences.8 Click Close to exi

691Dreamweaver and Creative CloudLast updated 6/3/2015(13.1) If there are updates available on the cloud, they are downloaded onto the computer. The S

692Dreamweaver and Creative CloudLast updated 6/3/2015

viiDREAMWEAVERContentsLast updated 6/3/2015Chapter 16: Dynamic sites, pages and web formsUnderstanding web applications . . . . . . . . . . . . . . .

63Last updated 6/3/2015Workspace and workflowIf you change the field type in the Property inspector to a value that Dreamweaver recognizes—for example

693Last updated 6/3/2015Chapter 20: System RequirementsSystem requirements for DreamweaverSystem requirements for Dreamweaver

64Workspace and workflowLast updated 6/3/2015• Error messages• Zoom/Scroll• Fluid Grid pages• Architectural changes• Code Navigator• Navigation• SSL C

65Workspace and workflowLast updated 6/3/2015CodecPop-up supportWith CEF integration, Dreamweaver can now render HTML5 form elements such as month, da

66Workspace and workflowLast updated 6/3/2015Zoom/ScrollUI for scroll bars are different in Live view and Design view.Zoom behavior in Dreamweaver is

67Workspace and workflowLast updated 6/3/2015OthersThe following features are impacted due to CEF integration:• Dynamically Related Files• External CS

68Last updated 6/3/2015Chapter 3: Site managementAbout Dreamweaver sitesA Adobe Dreamweaver site is a collection of all of the files and assets in you

69Site managementLast updated 6/3/2015The following example shows a sample local root folder on the left and a sample remote folder on the right. The

70Site managementLast updated 6/3/2015Set up a local version of your siteTo set up a local version of your site, all you need to do is specify the loc

71Site managementLast updated 6/3/2015Specify a connection methodFTP connectionsUse this setting if you connect to your web server using FTP.Note: Bus

72Site managementLast updated 6/3/20157 In the Username and Password text boxes, enter the username and password that you use to connect to the FTP se

1Last updated 6/3/2015Chapter 1: What's newNew features summaryThe 2015 release of Dreamweaver CC focuses on responsive design, improvements to c

73Site managementLast updated 6/3/2015You can now authenticate connections to an SFTP server based on an ‘Identity Key’ (with or without a passphrase)

74Site managementLast updated 6/3/20154 Enter a valid Root Directory.5 Enter a valid Web URL.6 Click Save.Scenario 2You have a key that does not requi

75Site managementLast updated 6/3/20151 Enter a friendly name for the server.2 From the Connect list, click SFTP, and enter a valid SFTP address and p

76Site managementLast updated 6/3/2015Note: This procedure describes options specific to FTPS. For information on regular FTP options, see the previou

77Site managementLast updated 6/3/20155 Select Local/Network from the Connect Using pop-up menu.6 Click the folder icon beside the Server Folder text

78Site managementLast updated 6/3/2015RDS connectionsUse this setting if you connect to your web server using Remote Development Services (RDS). For t

79Site managementLast updated 6/3/20156 Select Automatically Upload Files to Server on Save if you want Dreamweaver to upload your file to your remote

80Site managementLast updated 6/3/2015Manage Sites dialog box optionsThe Manage Sites dialog box is your gateway into various Dreamweaver site functio

81Site managementLast updated 6/3/20152 Click a button to select one of the options, make any changes you need to make, and click Done.New Enables yo

82Site managementLast updated 6/3/2015Note: As of Dreamweaver CS5, Dreamweaver no longer installs ASP.NET, ASP JavaScript, or JSP server behaviors. (Y

2What's newLast updated 6/3/2015What's changed • Device preview • Visual Media Queries • Linting support • Emmet support • Preview in Code V

83Site managementLast updated 6/3/2015Note: By default the ColdFusion MX 7 web server runs on port 8500, the Apache web server runs on port 80, and th

84Site managementLast updated 6/3/2015In this case, only the dependent file is saved and pushed to the testing server. Version Control and Advanced se

85Site managementLast updated 6/3/2015Note: Content linked by site-root relative links does not appear when you preview documents in a local browser u

86Site managementLast updated 6/3/2015The import/export feature does not import or export site files. It only imports/exports site settings to save yo

87Site managementLast updated 6/3/2015Edit an existing remote websiteYou can use Dreamweaver to copy an existing remote site (or any branch of a remot

88Site managementLast updated 6/3/2015It’s usually a good idea to download dependent files when checking out a new file, but if the latest versions of

89Last updated 6/3/2015Chapter 4: File managementCreating and opening documentsThe user interface in Dreamweaver CC and later has been simplified. As

90File managementLast updated 6/3/2015photographs, images using textures, images with gradient color transitions, and any images that require more tha

91File managementLast updated 6/3/2015This option is particularly useful when you want to use the same CSS layout (the CSS rules for which are contain

92File managementLast updated 6/3/2015Liquid Column width is specified as a percentage of the site visitor’s browser width. The design adapts if the