171 USING DREAMWEAVER Laying out pages with HTML Note: The pointer changes to the table grid icon border). when you can select the table (unless you click a row or column • Click in a table cell, then select the
tag in the tag selector at the lower-left corner of the Document window. • Click in a table cell, then select Modify > Table > Select Table. • Click in a table cell, click the table header menu, then select Select Table.
172 USING DREAMWEAVER Laying out pages with HTML All of the cells within the linear or rectangular region defined by the two cells are selected. Select nonadjacent cells ❖ Control-click (Windows) or Command-click (Macintosh) the cells, rows, or columns you want to select. If each cell, row, or column you Control-click or Command-click isn’t already selected, it’s added to the selection. If it is already selected, it’s removed from the selection.
173 USING DREAMWEAVER Laying out pages with HTML If you don’t explicitly assign values for the border, cell spacing, and cell padding, most browsers display the table with the border and cell padding set to 1 and cell spacing set to 2. To ensure that browsers display the table with no padding or spacing, set Border to 0, Cell Padding and Cell Spacing to 0. To view cell and table boundaries when the border is set to 0, select View > Visual Aids > Table Borders. Class sets a CSS class on the table.
174 USING DREAMWEAVER Laying out pages with HTML No Wrap Prevents line wrapping, keeping all the text in a given cell on a single line. If No Wrap is enabled, cells widen to accommodate all data as you type it or paste it into a cell. (Normally, cells expand horizontally to accommodate the longest word or widest image in the cell, then expand vertically as necessary to accommodate other contents.) Header Formats the selected cells as table header cells.
175 USING DREAMWEAVER Laying out pages with HTML • In the Layout category of the Insert panel, click Standard Mode. Format tables and cells You can change the appearance of tables by setting properties for the table and its cells or by applying a preset design to the table. Before you set table and cell properties, be aware that the order of precedence for formatting is cells, rows, and tables.
176 USING DREAMWEAVER Laying out pages with HTML Resizing columns and rows You can change the width of a column or the height of a row in the Property inspector or by dragging the borders of the column or row. If you have trouble resizing, you can clear the column widths or row heights and start over. Note: You can also change cell widths and heights directly in the HTML code using Code view.
177 USING DREAMWEAVER Laying out pages with HTML Make column widths in code consistent with visual widths 1 Click in a cell. 2 Click the table header menu, then select Make All Widths Consistent. Dreamweaver resets the width specified in the code to match the visual width. Clear all set widths or heights in a table 1 Select the table. 2 Do one of the following: • Select Modify > Table > Clear Cell Widths, or Modify > Table > Clear Cell Heights.
178 USING DREAMWEAVER Laying out pages with HTML • Click the column header menu, and then select Insert Column Left or Insert Column Right. Add multiple rows or columns 1 Click in a cell. 2 Select Modify > Table > Insert Rows Or Columns, complete the dialog box, and click OK. Insert Indicates whether to insert rows or columns. Number of Rows or Number of Columns The number of rows or columns to insert.
179 USING DREAMWEAVER Laying out pages with HTML In the following illustration, the selection is not a rectangle, so the cells can’t be merged. 2 Do one of the following: • Select Modify > Table > Merge Cells. • In the expanded HTML Property inspector (Window > Properties), click Merge Cells . Note: If you don’t see the button, click the expander arrow in the lower-right corner of the Property inspector so that you see all the options.
180 USING DREAMWEAVER Laying out pages with HTML In the following illustration, the selection is a rectangle of cells, so the cells can be cut or copied. In the following illustration, the selection is not a rectangle, so the cells can’t be cut or copied. 2 Select Edit > Cut or Edit > Copy. Note: If you selected an entire row or column and you select Edit > Cut, the entire row or column is removed from the table (not just the contents of the cells).
181 USING DREAMWEAVER Laying out pages with HTML Delete rows or columns that contain merged cells 1 Select the row or column. 2 Select Modify > Table > Delete Row, or Modify > Table > Delete Column. Nest tables A nested table is a table inside a cell of another table. You can format a nested table as you would any other table; however, its width is limited by the width of the cell in which it appears. 1 Click in a cell of the existing table.
182 USING DREAMWEAVER Laying out pages with HTML Using Frames How frames and framesets work A frame is a region in a browser window that can display an HTML document independent of what’s being displayed in the rest of the browser window. Frames provide a way to divide a browser window into multiple regions, each of which can display a different HTML document.
183 USING DREAMWEAVER Laying out pages with HTML Note: A “page” refers either to a single HTML document or to the entire contents of a browser window at a given moment, even if several HTML documents appear at once. The phrase “a page that uses frames,” for example, usually refers to a set of frames and the documents that initially appear in those frames.
184 USING DREAMWEAVER Laying out pages with HTML In many cases, you can create a web page without frames that accomplishes the same goals as a set of frames. For example, if you want a navigation bar to appear on the left side of your page, you can either replace your page with a set of frames, or just include the navigation bar on every page in your site. (Dreamweaver helps you create multiple pages that use the same layout.
185 USING DREAMWEAVER Laying out pages with HTML A B A. Main frameset B. Menu frame and content frame are nested within the main frameset. Dreamweaver takes care of nesting framesets as needed; if you use the frame-splitting tools in Dreamweaver, you don’t need to worry about the details of which frames are nested and which are not. There are two ways to nest framesets in HTML: the inner frameset can be defined either in the same file as the outer frameset, or in a separate file of its own.
186 USING DREAMWEAVER Laying out pages with HTML Choosing a predefined frameset sets up all the framesets and frames needed to create the layout and is the easiest way to create a frames-based layout quickly. You can insert a predefined frameset only in the Document window’s Design view. You can also design your own frameset in Dreamweaver by adding “splitters” to the Document window.
187 USING DREAMWEAVER Laying out pages with HTML Split a frame into smaller frames • To split the frame where the insertion point is, select a splitting item from the Modify > Frameset submenu. • To split a frame or set of frames vertically or horizontally, drag a frame border from the edge into the middle of the Design view. • To split a frame using a frame border that isn’t at the edge of the Design view, Alt-drag (Windows) or Option-drag (Macintosh) a frame border.
188 USING DREAMWEAVER Laying out pages with HTML The Frames panel provides a visual representation of the frames within a frameset. It shows the hierarchy of the frameset structure in a way that may not be apparent in the Document window. In the Frames panel, a very thick border surrounds each frameset; each frame is surrounded by a thin gray line and is identified by a frame name.
189 USING DREAMWEAVER Laying out pages with HTML Select a different frame or frameset • To select the next or previous frame or frameset at the same hierarchical level as the current selection, press Alt+Left Arrow or Alt+Right Arrow (Windows), or Command+Left Arrow or Command+Right Arrow (Macintosh). Using these keys, you can cycle through frames and framesets in the order in which they’re defined in the frameset file.
190 USING DREAMWEAVER Laying out pages with HTML Note: If you used File > Open in Frame to open a document in a frame, then when you save the frameset, the document you opened in the frame becomes the default document to be displayed in that frame. If you don’t want that document to be the default, don’t save the frameset file.
191 USING DREAMWEAVER Laying out pages with HTML Border Color Sets a border color for all of the frame’s borders. This color applies to all borders that touch the frame, and overrides the specified border color of the frameset. Margin Width Sets the width in pixels of the left and right margins (the space between the frame borders and the content). Margin Height Sets the height in pixels of the top and bottom margins (the space between the frame borders and the content).
192 USING DREAMWEAVER Laying out pages with HTML View or set frameset properties 1 Select a frameset by doing one of the following: • Click a border between two frames in the frameset in the Document window’s Design view. • Click the border that surrounds a frameset in the Frames panel (Window > Frames). 2 In the Property inspector (Window > Properties), click the expander arrow in the lower-right corner and set the frameset options.
193 USING DREAMWEAVER Laying out pages with HTML Control frame content with links To use a link in one frame to open a document in another frame, you must set a target for the link. The target attribute of a link specifies the frame or window in which the linked content opens.
194 USING DREAMWEAVER Laying out pages with HTML Using JavaScript behaviors with frames There are several JavaScript behaviors and navigation-related commands that are particularly appropriate for use with frames: Set Text Of Frame Replaces the content and formatting of a given frame with the content you specify. The content can include any valid HTML. Use this action to dynamically display information in a frame. Go To URL Opens a new page in the current window or in the specified frame.
195 Chapter 8: Adding content to pages Use the Insert panel The Insert panel contains buttons for creating and inserting objects such as tables and images. The buttons are organized into categories. More Help topics “Insert panel overview” on page 13 “Edit tags with Tag editors” on page 294 “Select and view elements in the Document window” on page 202 Hide or show the Insert panel ❖ Select Window > Insert.
196 USING DREAMWEAVER Adding content to pages Insert an object 1 Select the appropriate category from the Category pop-up menu of the Insert panel. 2 Do one of the following: • Click an object button or drag the button’s icon into the Document window. • Click the arrow on a button, then select an option from the menu. Depending on the object, a corresponding object-insertion dialog box may appear, prompting you to browse to a file or specify parameters for an object.
197 USING DREAMWEAVER Adding content to pages • To delete an object or separator, select an object in the Favorite Objects pane on the right, and then click the Remove Selected Object in Favorite Objects List button above the pane. • To move an object, select an object in the Favorite Objects pane on the right, and then click the Up or Down arrow button above the pane.
198 USING DREAMWEAVER Adding content to pages Return the horizontal Insert bar to a panel group 1 Click the horizontal Insert bar’s gripper (on the left side of the Insert bar) and drag the bar to the place where your panels are docked. 2 Position the Insert panel and drop it. A blue line indicates where you can drop the panel. Show horizontal Insert bar categories as tabs ❖ Click the arrow beside the category name on the left end of the horizontal Insert bar, and then select Show as Tabs.
199 USING DREAMWEAVER Adding content to pages Repeat Specifies how the background image will be displayed on the page: • Select the No-repeat option to display the background image only once. • Select the Repeat option to repeat, or tile, the image both horizontally and vertically. • Select the Repeat-x option to tile the image horizontally. • Select the Repeat-y option to tile the image vertically. Left Margin and Right Margin Specify the size of the left and right page margins.
200 USING DREAMWEAVER Adding content to pages Visited Links Specifies the color to apply to visited links. Rollover Links Specifies the color to apply when a mouse (or pointer) hovers over a link. Active Links Specifies the color to apply when a mouse (or pointer) clicks on a link Underline Style Specifies the underline style to apply to links.
201 USING DREAMWEAVER Adding content to pages In Unicode, some characters are visually similar but can be stored within the document in different ways. For example, “ë” (e-umlaut) can be represented as a single character, “e-umlaut,” or as two characters, “regular Latin e” + “combining umlaut.” A Unicode combining character is one that gets used with the previous character, so the umlaut would appear above the “Latin e.
202 USING DREAMWEAVER Adding content to pages You can change document encoding for a page and change the default encoding that Dreamweaver uses to create new documents, including the fonts used to display each encoding. More Help topics “Set default document type and encoding” on page 63 Select and view elements in the Document window To select an element in the Design view of the Document window, click the element. If an element is invisible, you must make it visible before you can select it.
203 USING DREAMWEAVER Adding content to pages View the HTML code associated with the selected text or object ❖ Do one of the following: • In the Document toolbar, click the Show Code View button. • Select View > Code. • In the Document toolbar, click the Show Code and Design Views button. • Select View > Code and Design. • Select Window > Code Inspector. When you select something in either code editor (Code view or the Code inspector), it’s generally also selected in the Document window.
204 USING DREAMWEAVER Adding content to pages Anchor Points For Aligned Elements Displays an icon showing the location of HTML code for elements that accept the align attribute. These include images, tables, ActiveX objects, plug-ins, and applets. In some cases, the code for the element may be separated from the visible object.
205 USING DREAMWEAVER Adding content to pages Use the color picker In Dreamweaver, many of the dialog boxes, as well as the Property inspector for many page elements, contain a color box, which opens a color picker. Use the color picker to select a color for a page element. You can also set the default text color for your page elements. 1 Click a color box in any dialog box or in the Property inspector. The color picker appears.
206 USING DREAMWEAVER Adding content to pages You can also zoom out without using the Zoom tool by pressing Control+- (Windows) or Command+- (Macintosh). Edit a page after zooming ❖ Click the Select tool (the pointer icon) in the lower-right corner of the Document window, and click inside the page. Pan a page after zooming 1 Click the Hand tool (the hand icon) in the lower-right corner of the Document window. 2 Drag the page. Fill the Document window with a selection 1 Select an element on the page.
207 USING DREAMWEAVER Adding content to pages Working with text Add text to a document To add text to a Dreamweaver document, you can type text directly in the Document window, or you can cut and paste text. You can also import text from other documents. When you paste text into a Dreamweaver document, you can use either the Paste or the Paste Special command. The Paste Special command lets you specify the format of pasted text in different ways.
208 USING DREAMWEAVER Adding content to pages There are many other special characters available; to select one of them, select Insert > HTML > Special Characters > Other or click the Characters button in the Text category of the Insert panel and select the Other Characters option. Select a character from the Insert Other Character dialog box, and click OK.
209 USING DREAMWEAVER Adding content to pages More Help topics “Set CSS properties” on page 127 Create a new list 1 In the Dreamweaver document, place the insertion point where you want to add a list, then do one of the following: • In the HTML Property inspector, click either the Bulleted or Numbered List button. • Select Format > List and select the type of list desired—Unordered (bulleted) List, Ordered (numbered) List, or Definition List.
210 USING DREAMWEAVER Adding content to pages 3 Under List Item, set the options you want to define: New Style Specifies a style for the selected list item. Styles in the New Style menu are related to the type of list displayed in the List Type menu. For example, if the List Item menu displays Bulleted List, only bullet options are available in the New Style menu. Reset Count To Sets a specific number from which to number list item entries. 4 Click OK to set the options.
211 USING DREAMWEAVER Adding content to pages Note: Pressing Control+Enter or Shift+Enter (Windows), or Control+Return, Shift+Return, or Command+Return (Macintosh), adds line breaks within the text search fields, allowing you to search for a Return character. When performing such a search, deselect the Ignore Whitespace Differences option if you’re not using regular expressions.
212 USING DREAMWEAVER Adding content to pages Perform the same search again ❖ Click the Find And Replace button. Stop a search in progress ❖ Click the Stop button. Search for a specific tag Use the Find And Replace dialog box to search for text or tags in a document, and to replace the found material with other text or tags. 1 Select Edit > Find And Replace. 2 In the Search pop-up menu, select Specific Tag.
213 USING DREAMWEAVER Adding content to pages 5 (Optional.) Click the Plus (+) button to limit the search with one of the following tag modifiers: With Attribute Specifies an attribute that must be in the tag for it to match. You can specify a particular value for the attribute or select [any value]. Without Attribute Selects an attribute that must not be in the tag for it to match. For example, select this option to search for all img tags with no alt attribute.
214 USING DREAMWEAVER Adding content to pages Text With Structure Plus Basic Formatting Lets you paste both structured and simple HTML-formatted text (e.g., paragraphs and tables, as well as text formatted with the b, i, u, strong, em, hr, abbr, or acronym tag). Text With Structure Plus Full Formatting Lets you paste text that retains all structure, HTML formatting, and CSS styles.
215 USING DREAMWEAVER Adding content to pages More Help topics “Open the CSS Styles panel” on page 124 “Understanding Cascading Style Sheets” on page 116 Edit CSS rules in the Property inspector 1 Open the Property inspector (Window > Properties), if it isn’t already open and click the CSS button. 2 Do one of the following: • Place the insertion point inside a block of text that’s been formatted by a rule you want to edit. The rule appears in the Targeted Rule pop-up menu.
216 USING DREAMWEAVER Adding content to pages Class Displays the class style that is currently applied to the selected text. If no styles have been applied to the selection, the pop-up menu shows No CSS Style. If multiple styles have been applied to the selection, the menu is blank. Use the Style menu to do any of the following: • Select the style you want to apply to the selection. • Select None to remove the currently selected style. • Select Rename to rename the style.
217 USING DREAMWEAVER Adding content to pages Note: Dreamweaver can only spell check the file that is currently open in the Document window. It cannot spell check all of the files in a site simultaneously. By default, the spelling checker uses the U.S. English spelling dictionary. To change the dictionary, select Edit > Preferences > General (Windows) or Dreamweaver > Preferences > General (Macintosh), then in the Spelling Dictionary pop-up menu select the dictionary you want to use.
218 USING DREAMWEAVER Adding content to pages Import Microsoft Office documents (Windows only) You can insert the full contents of a Microsoft Word or Excel document in a new or existing web page. When you import a Word or Excel document, Dreamweaver receives the converted HTML and inserts it into your web page. The file’s size, after Dreamweaver receives the converted HTML, must be less than 300K.
219 USING DREAMWEAVER Adding content to pages Use HTML Formatting While CSS is the preferred method for formatting text, Dreamweaver still lets you format text with HTML. Format paragraphs Use the Format pop-up menu in the HTML Property inspector or the Format > Paragraph Format submenu to apply the standard paragraph and heading tags. 1 Place the insertion point in the paragraph, or select some of the text in the paragraph.
220 USING DREAMWEAVER Adding content to pages Align text on a page 1 Select the text you want to align or simply insert the pointer at the beginning of the text. 2 Select Format > Align and select an alignment command. Center page elements 1 Select the element (image, plug-in, table, or other page element) you want to center. 2 Select Format > Align > Center. Note: You can align and center complete blocks of text; you cannot align or center part of a heading or part of a paragraph.
221 USING DREAMWEAVER Adding content to pages 2 Select Insert > HTML > Horizontal Rule. Modify a horizontal rule 1 In the Document window, select the horizontal rule. 2 Select Window > Properties to open the Property inspector, and modify the properties as desired: The ID text box Lets you specify an ID for the horizontal rule. W and H Specify the width and height of the rule in pixels or as a percentage of the page size. Align Specifies the alignment of the rule (Default, Left, Center, or Right).
222 USING DREAMWEAVER Adding content to pages To add a font that is not installed on your system, type the font name in the text field below the Available Fonts list and click the << button to add the font to the combination. Adding a font not installed on your system is useful, for example, for specifying a Windows-only font when you are developing pages on a Macintosh.
223 USING DREAMWEAVER Adding content to pages PNG (Portable Network Group) The PNG file format is a patent-free replacement for GIFs that includes support for indexed-color, gray scale, and true-color images, and alpha channel support for transparency. PNG is the native file format of Adobe® Fireworks®. PNG files retain all the original layer, vector, color, and effects information (such as drop shadows), and all elements are fully editable at all times. Files must have the .
224 USING DREAMWEAVER Adding content to pages 5 Enter values in the Alternate Text and Long Description text boxes, and click OK. • In the Alternate Text box, enter a name or brief description for the image. The screen reader reads the information you enter here. You should limit your entry to around 50 characters. For longer descriptions, consider providing a link, in the Long Description text box, to a file that gives more information about the image.
225 USING DREAMWEAVER Adding content to pages Src Specifies the source file for the image. Click the folder icon to browse to the source file, or type the path. Link Specifies a hyperlink for the image. Drag the Point-To-File icon to a file in the Files panel, click the folder icon to browse to a document on your site, or manually type the URL. Align Aligns an image and text on the same line.
226 USING DREAMWEAVER Adding content to pages Align an image You can align an image to text, another image, a plug-in, or other elements in the same line. You can also set the horizontal alignment of an image. 1 Select the image in Design view. 2 Set the alignment attributes of the image in the Property inspector with the Align popup menu. You can set the alignment in relation to other elements in the same paragraph or line.
227 USING DREAMWEAVER Adding content to pages Resize handles appear at the bottom and right sides of the element and in the lower-right corner. If resize handles don’t appear, click somewhere other than the element you want to resize and then reselect it, or click the appropriate tag in the tag selector to select the element. 2 Resize the element by doing one of the following: • To adjust the width of the element, drag the selection handle on the right side.
228 USING DREAMWEAVER Adding content to pages The placeholder’s color, size attributes, and label appear as follows: When viewed in a browser, the label and size text do not appear. More Help topics “Visually resize an image” on page 226 “Use Fireworks to modify Dreamweaver image placeholders” on page 344 Replace an image placeholder An image placeholder does not display an image in a browser.
229 USING DREAMWEAVER Adding content to pages Src Specifies the source file for the image. For a placeholder image, this text box is empty. Click the Browse button to select a replacement image for the placeholder graphic. Link Specifies a hyperlink for the image placeholder. Drag the Point-to-File icon to a file in the Files panel, click the folder icon to browse to a document on your site, or manually type the URL.
230 USING DREAMWEAVER Adding content to pages Note: Dreamweaver image-editing features apply only to JPEG, GIF, and PNG image file formats. Other bitmap image file formats cannot be edited using these image-editing features. Crop an image Dreamweaver lets you crop (or trim) bitmap file images. Note: When you crop an image, the source image file is changed on disk. For this reason, you may want to keep a backup copy of the image file in the event you need to revert to the original image.
231 USING DREAMWEAVER Adding content to pages Adjust the brightness and contrast of an image Brightness/Contrast modifies the contrast or brightness of pixels in an image. This affects the highlights, shadows, and midtones of an image. You typically use Brightness/Contrast when correcting images that are too dark or too light. 1 Open the page containing the image you want to adjust, select the image, and do either of the following: • Click the Brightness/Contrast button in the image Property inspector.
232 USING DREAMWEAVER Adding content to pages Note: You cannot see the effect of a rollover image in Design view. More Help topics “Apply the Swap Image behavior” on page 339 Rollover tutorial Use an external image editor While in Dreamweaver, you can open a selected image in an external image editor; when you return to Dreamweaver after saving the edited image file, any changes you made to the image are visible in the Document window. You can set up Fireworks as your primary external editor.
233 USING DREAMWEAVER Adding content to pages 5 In the Preferences dialog box, click Make Primary if you want this editor to be the primary editor for this file type. 6 If you want to set up an additional editor for this file type, repeat steps 3 and 4. Dreamweaver automatically uses the primary editor when you edit this image type. You can select the other listed editors from the context menu for the image in the Document window.
234 USING DREAMWEAVER Adding content to pages More Help topics “Insert a jump menu” on page 266 “Apply the Swap Image behavior” on page 339 “Apply the Preload Images behavior” on page 336 Adding video Embed videos in web pages (HTML5) HTML5 supports video and audio tags that allow users to play video and audio files in a browser, without an external plug-in or player. Dreamweaver supports code hints for adding video and audio tags.
235 USING DREAMWEAVER Adding content to pages Streaming Video Streams the video content and plays it on a web page after a short buffer period that ensures smooth play back. To enable streaming video on your web pages, you must have access to Adobe® Flash® Media Server. You must have an encoded FLV file before you can use it in Dreamweaver. You can insert video files created with two kinds of codecs (compression/decompression technologies): Sorenson Squeeze and On2.
236 USING DREAMWEAVER Adding content to pages The Insert FLV command generates a video player SWF file and a skin SWF file that are used to display your video content on a web page. (To see the new files, you may need to click the Refresh button in the Files panel.) These files are stored in the same directory as the HTML file to which you’re adding video content.
237 USING DREAMWEAVER Adding content to pages Note: If you already have a main.asc file on your server, check with your server administrator before uploading the main.asc file generated by the Insert FLV command. You can easily upload all of the required media files by selecting the video component placeholder in the Dreamweaver Document window, and clicking the Upload Media button in the Property inspector (Window > Properties). To see a list of required files, click Show required files.
238 USING DREAMWEAVER Adding content to pages To ensure that you've uploaded all of the dependent files, use the Dreamweaver Files panel to upload the page in which the FLV appears. When you upload the page, Dreamweaver asks you if you want to upload dependent files (unless you've turned off this option). Click yes to upload dependent files.
239 USING DREAMWEAVER Adding content to pages Remove FLV detection code For Dreamweaver CS4 and later, Dreamweaver inserts Flash Player detection code directly in the object tag that contains the FLV file. For Dreamweaver CS3 and earlier, however, the detection code resides outside the FLV file’s object tag.
240 USING DREAMWEAVER Adding content to pages Insert a SWF file 1 In the Design view of the Document window, place the insertion point where you want to insert the content, then do one of the following: • In the Common category of the Insert panel, select Media and click the SWF icon . • Select Insert > Media > SWF. 2 In the dialog box that appears, select a SWF file (.swf). A SWF file placeholder appears in the Document window. The placeholder has a tabbed blue outline.
241 USING DREAMWEAVER Adding content to pages 2 In the Property inspector (Window > Properties), click the Play button. Click Stop to end the preview. You can also preview the SWF file in a browser by pressing F12. To preview all SWF files in a page, press Control+Alt+Shift+P (Windows) or Command+Option+Shift+P (Macintosh). All SWF files are set to Play. Set SWF file properties You can set properties for SWF files using the Property inspector. The properties are also applicable to Shockwave movies.
242 USING DREAMWEAVER Adding content to pages Insert FlashPaper documents The Insert FlashPaper feature has been deprecated as of Dreamweaver CS5. Adding web widgets A web widget is a web page component comprised of HTML, CSS, and JavaScript. Examples of web widgets include accordions, tabbed panels, and calendars.
243 USING DREAMWEAVER Adding content to pages .wav (Waveform Extension) These files have good sound quality, are supported by many browsers, and don’t require a plug-in. You can record your own WAV files from a CD, tape, microphone, and so on. However, the large file size severely limits the length of sound clips that you can use on your web pages. .
244 USING DREAMWEAVER Adding content to pages When incorporating sound files in your web pages, carefully consider their appropriate use in your web site, and how visitors to your site use these media resources. Always provide a control to either enable or disable the playing of the sound, in the event that visitors don’t want to listen to the audio content.
245 USING DREAMWEAVER Adding content to pages Access Key Enter a keyboard equivalent (one letter) in the text box to select the form object in the browser. This lets a visitor to the site use the Control key (Windows) with the Access Key to access the object. For example, if you enter B as the Access Key, use Control+B to select the object in the browser. Tab Index Enter a number for the tab order of the form object.
246 USING DREAMWEAVER Adding content to pages 2 Select the file type extension in the Extensions list and do one of the following: • To associate a new editor with the file type, click the Plus (+) button above the Editors list and complete the dialog box that appears. For example, select the application icon for Acrobat to associate it with the file type.
247 USING DREAMWEAVER Adding content to pages Insert Shockwave movies You can use Dreamweaver to insert Shockwave movies into your documents. Adobe® Shockwave®, a standard for interactive multimedia on the web, is a compressed format that allows media files created in Adobe® Director® to be downloaded quickly and played by most popular browsers.
248 USING DREAMWEAVER Adding content to pages Insert plug-in content and set its properties 1 In the Design view of the Document window, place the insertion point where you want to insert the content, then do one of the following: • In the Common category of the Insert panel, click the Media button and select the Plugin icon from the menu. • Select Insert > Media > Plugin. 2 In the dialog box that appears, select a content file for a plug-in and click OK.
249 USING DREAMWEAVER Adding content to pages • Open the file Configuration/Plugins/UnsupportedPlugins.txt in a text editor and look to see if the problematic plug-in is listed. This file keeps track of plug-ins that cause problems in Dreamweaver and are therefore unsupported. (If you experience problems with a particular plug-in, consider adding it to this file.) • Check that you have enough memory. Some plug-ins require an additional 2 to 5 MB of memory to run.
250 USING DREAMWEAVER Adding content to pages Base Specifies the URL containing the ActiveX control. Internet Explorer downloads the ActiveX control from this location if it has not been installed in the visitor’s system. If you don’t specify a Base parameter and if your visitor doesn’t already have the relevant ActiveX control installed, the browser can’t display the ActiveX object. Alt Img Specifies an image to be displayed if the browser doesn’t support the object tag.
251 USING DREAMWEAVER Adding content to pages Check Plugin Lets you check to see if visitors to your site have the required plug-in installed, then route them to different URLs, depending on whether they have the right plug-in. This only applies to plug-ins, as the Check Plugin behavior does not check for ActiveX controls.
252 USING DREAMWEAVER Adding content to pages Certain mouse movements, such as selecting by clicking in the Document window, can’t be played back or saved. When you make such a movement, a black line appears in the History panel (the line does not become obvious until you perform another action).
253 USING DREAMWEAVER Adding content to pages Set the number of steps that the History panel retains and shows The default number of steps is sufficient for most users’ needs. The higher the number, the more memory the History panel requires, which can affect performance and slow your computer significantly. 1 Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh). 2 Select General from the Category list on the left. 3 Enter a number for Maximum Number Of History Steps.
254 USING DREAMWEAVER Adding content to pages Apply steps in the History panel to objects You can apply a set of steps from the History panel to any object in the Document window. If you select multiple objects and then apply steps to them from the History panel, the objects are treated as a single selection and Dreamweaver attempts to apply the steps to that combined selection; however, you can apply a set of steps only to a single object at a time.
255 USING DREAMWEAVER Adding content to pages The current image’s spacing changes, and the next image is selected. 10 Continue to click Replay until all the images are spaced correctly. Copy and paste steps between documents Each open document has its own history of steps. You can copy steps from one document and paste them into another. Closing a document clears its history. If you know you will want to use steps from a document later, copy or save the steps before you close the document.
256 USING DREAMWEAVER Adding content to pages Note: The command is saved as a JavaScript file (or sometimes an HTML file) in your Dreamweaver/Configuration/Commands folder. If you are using Dreamweaver on a multiuser operating system, the file is saved in the specific user’s Commands folder. Use a saved command 1 Select an object to apply the command to, or place the insertion point where you want to apply the command. 2 Select the command from the Commands menu.
257 Chapter 9: Linking and navigation About linking and navigation About links After you’ve set up a Dreamweaver site to store your website documents and have created HTML pages, you’ll want to create connections from your documents to other documents. Dreamweaver provides several ways to create links to documents, images, multimedia files, or downloadable software.
258 USING DREAMWEAVER Linking and navigation Absolute paths Absolute paths provide the complete URL of the linked document, including the protocol to use (usually http:// for web pages), for example, http://www.adobe.com/support/dreamweaver/contents.html. For an image asset, the complete URL might be something like http://www.adobe.com/support/dreamweaver/images/image1.jpg. You must use an absolute path to link to a document or asset on another server.
259 USING DREAMWEAVER Linking and navigation Site root–relative paths Site root–relative paths describe the path from the site’s root folder to a document. You may want to use these paths if you are working on a large website that uses several servers, or one server that hosts several sites. However, if you are not familiar with this type of path, you may want to stick to document-relative paths. A site root–relative path begins with a leading forward slash, which stands for the root folder of the site.
260 USING DREAMWEAVER Linking and navigation Attaching JavaScript behaviors to links You can attach a behavior to any link in a document. Consider using the following behaviors when you insert linked elements into documents: Set Text Of Status Bar Determines the text of a message and displays it in the status bar at the lower left of the browser window. For example, you can use this behavior to describe the destination of a link in the status bar instead of showing the URL associated with it.
261 USING DREAMWEAVER Linking and navigation Link to documents using the Point-To-File icon 1 Select text or an image in the Document window’s Design view. 2 Create a link in one of two ways: • Drag the Point-To-File icon (target icon) at the right of the Link box in the Property inspector and point to a visible anchor in the current document, a visible anchor in another open document, an element that has a unique ID assigned to it, or a document in the Files panel.
262 USING DREAMWEAVER Linking and navigation Set the relative path of new links By default, Dreamweaver creates links to other pages in your site using document-relative paths. To use site root– relative path instead, you must first define a local folder in Dreamweaver by choosing a local root folder to serve as the equivalent of the document root on a server. Dreamweaver uses this folder to determine the site root–relative paths to files. 1 Select Site > Manage Sites.
263 USING DREAMWEAVER Linking and navigation Link to a named anchor 1 In the Document window’s Design view, select text or an image to create a link from. 2 In the Link box of the Property inspector, type a number sign (#) and the name of the anchor. For example, to link to an anchor named “top” in the current document, type #top. To link to an anchor named “top” in a different document in the same folder, type filename.html#top. Note: Anchor names are case-sensitive.
264 USING DREAMWEAVER Linking and navigation The complete entry would look as follows: mailto:someone@yoursite.com?subject=Mail from Our Site Create null and script links A null link is an undesignated link. Use null links to attach behaviors to objects or text on a page. For instance, you can attach a behavior to a null link so that it swaps an image or displays an absolutely-positioned element (AP element) when the pointer moves over the link.
265 USING DREAMWEAVER Linking and navigation 4 Click OK. Create a cache file for your site 1 Select Site > Manage Sites. 2 Select a site, and then click Edit. 3 In the Site Setup dialog box, expand Advanced Settings and select the Local Info category. 4 In the Local Info category, select Enable Cache. The first time you change or delete links to files in your local folder after starting Dreamweaver, Dreamweaver prompts you to load the cache.
266 USING DREAMWEAVER Linking and navigation Test links in Dreamweaver Links are not active within Dreamweaver; that is, you cannot open a linked document by clicking the link in the Document window. ❖ Do one of the following: • Select the link and select Modify > Open Linked Page. • Press Control (Windows) or Command (Macintosh) and double-click the link. Note: The linked document must reside on your local disk.
267 USING DREAMWEAVER Linking and navigation Arrow buttons Select an item and click the arrows to move it up or down in the list. Text Type the name of an unnamed item. If your menu includes a selection prompt (such as “Choose one”), type it here as the first menu item (if so, you must also choose the Select First Item After URL Change option at the bottom). When Selected Go To URL Browse to the target file or type its path. Open URLs In Specify whether to open the file in the same window or in a frame.
268 USING DREAMWEAVER Linking and navigation Navigation bars About navigation bars The navigation bar feature has been deprecated as of Dreamweaver CS5. Adobe recommends using the Spry Menu Bar widget if you want to create a navigation bar. More Help topics “Working with the Spry Menu Bar widget” on page 404 Image maps About image maps An image map is an image that has been divided into regions called hotspots; when a user clicks a hotspot, an action occurs (for example, a new file opens).
269 USING DREAMWEAVER Linking and navigation 5 In the hotspot Property inspector’s Link box, click the folder icon to browse to and select the file you want to open when the user clicks the hotspot, or type the path. 6 In the Target pop-up menu, select the window in which the file should open or type its name. The names of all the frames you’ve named in the current document appear in the pop-up list.
270 USING DREAMWEAVER Linking and navigation Troubleshooting links Find broken, external, and orphaned links Use the Check Links feature to search for broken links and orphaned files (files that still exist in the site but that aren’t linked to by any other files in the site). You can search an open file, a portion of a local site, or an entire local site.
271 USING DREAMWEAVER Linking and navigation 2 Select Site > Check Links Sitewide. The Broken Links report appears in the Link Checker panel (in the Results panel group). 3 In the Link Checker panel, select External Links or Orphaned Files from the Show pop-up menu to view another report. A list of files that fit the report type you selected appears in the Link Checker panel.
272 Chapter 10: Previewing pages Previewing pages Design view gives you an idea of how your page will look on the web but does not render pages exactly as browsers do. Live view presents a more accurate depiction, and lets you work in Code view so that you can see changes to the design. The Preview in Browser feature lets you see how your pages will look in specific browsers.
273 USING DREAMWEAVER Previewing pages Even though you can’t edit in Live view, your options for making edits in other areas (for example, in the CSS Styles panel or in Code view) change as you click in Live view. You can work with related files (such as CSS style sheets) while keeping Live view in focus by opening the related file from the Related Files toolbar at the top of the document.
274 USING DREAMWEAVER Previewing pages Edit the Live View Page in a New Tab Lets you open new tabs for site documents you browse to using the Browser Navigation toolbar or the Follow Link(s) feature. You must browse to the document first, then select Edit the Live View Page in a New Tab to create a new tab for it. Follow Link Makes the next link you click in Live View active. Alternatively you can Control-click a link in Live view to make it active.
275 USING DREAMWEAVER Previewing pages 2 Click links and test content in your page. Note: Content linked with a site root-relative path does not appear when you preview documents in a local browser unless you specify a testing server, or select the Preview Using Temporary File option in Edit > Preferences > Preview In Browser. This is because browsers don’t recognize site roots—servers do.
276 Chapter 11: Working with page code General information about coding in Dreamweaver More Help topics “Code hints” on page 287 “Setting coding preferences” on page 282 “Customizing keyboard shortcuts” on page 282 “Make pages XHTML-compliant” on page 308 “Search for tags, attributes, or text in code” on page 300 “Save and recall search patterns” on page 301 “Optimizing the workspace for visual development” on page 525 “Displaying database records” on page 555 Supported languages In addition to text-editi
277 USING DREAMWEAVER Working with page code Automatic code modification You can set options that instruct Dreamweaver to automatically clean up your hand-written code according to criteria that you specify. However, your code is never rewritten unless the code rewriting options are enabled or you perform an action that changes the code. For example, Dreamweaver does not alter your white space or change the case of attributes unless you use the Apply Source Formatting command.
278 USING DREAMWEAVER Working with page code XHTML requirement Actions Dreamweaver performs All element and attribute names must be lowercase. Forces HTML element and attribute names to be lowercase in the XHTML code that it generates and when cleaning up XHTML, regardless of your tag and attribute case preferences. Every element must have a closing tag, unless it is declared in the DTD Inserts closing tags in the code that it generates, and when cleaning as EMPTY. up XHTML.
279 USING DREAMWEAVER Working with page code Character Matches Example ^ Beginning of input or line. ^T matches “T” in “This good earth” but not in “Uncle Tom’s Cabin” $ End of input or line. h$ matches “h” in “teach” but not in “teacher” * The preceding character 0 or more times. um* matches “um” in “rum”, “umm” in “yummy”, and “u” in “huge” + The preceding character 1 or more times. um+ matches “um” in “rum” and “umm” in “yummy” but nothing in “huge” ? .
280 USING DREAMWEAVER Working with page code Character Matches Example \w Any alphanumeric character, including underscore. Equivalent to [A-Za-z0-9_]. b\w* matches “barking” in “the barking dog” and both “big” and “black” in “the big black dog” \W Any non-alphanumeric character. Equivalent to \W matches “&” in “Jake&Mattie” and “%” in “100%” [^A-Za-z0-9_]. Control+Enter or Shift+Enter (Windows), or Control+ Return or Shift+Return or Command+ Return (Macintosh) Return character.
281 USING DREAMWEAVER Working with page code More Help topics “Manage windows and panels” on page 21 “Save and switch workspaces” on page 25 “Customize keyboard shortcuts” on page 31 “Managing tag libraries” on page 323 Viewing code You can view the source code for the current document in several ways: you can display it in the Document window by enabling Code view, you can split the Document window to display both the page and its associated code, or you can work in the Code inspector, a separate coding
282 USING DREAMWEAVER Working with page code To use the Coding toolbar along the left side of the window, see “Insert code with the Coding toolbar” on page 291. Customizing keyboard shortcuts You can use your favorite keyboard shortcuts in Dreamweaver. If you’re accustomed to using specific keyboard shortcuts—for example, Shift+Enter to add a line break, or Control+G to go to a specific position in the code—you can add them to Dreamweaver using the Keyboard Shortcut Editor.
283 USING DREAMWEAVER Working with page code 3 Select or deselect any of the following options: Word Wrap Wraps the code so that you can view it without scrolling horizontally. This option doesn’t insert line breaks; it just makes the code easier to view. Line Numbers Displays line numbers along the side of the code. Hidden Characters Displays special characters in place of white space.
284 USING DREAMWEAVER Working with page code Note: Dreamweaver indents using either spaces or tabs; it doesn’t convert a run of spaces to a tab when inserting code. Line Break Type Specifies the type of remote server (Windows, Macintosh, or UNIX) that hosts your remote site. Choosing the correct type of line break characters ensures that your HTML source code appears correctly when viewed on the remote server.
285 USING DREAMWEAVER Working with page code If you disable the rewriting options, invalid-markup items are displayed in the Document window for HTML that it would have rewritten. 1 Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh). 2 Select Code Rewriting from the Category list on the left. 3 Set any of the following options: Fix Invalidly Nested and Unclosed Tags Rewrites overlapping tags. For example, text is rewritten as text.
286 USING DREAMWEAVER Working with page code 4 Click the Edit Coloring Scheme button. 5 In the Edit Coloring Scheme dialog box, select a code element from the Styles For list, and set its text color, background color, and (optional) style (bold, italic, or underline). The sample code in the Preview pane changes to match the new colors and styles. Click OK to save your changes and close the Edit Coloring Scheme dialog box. 6 Make any other necessary selections in Code Coloring preferences and click OK.
287 USING DREAMWEAVER Working with page code Writing and editing code Code hints The code hints feature helps you insert and edit code quickly and without mistakes. As you type characters in Code view, you see a list of candidates that automatically complete your entry. For example, when you type the first characters of a tag, attribute, or CSS property name, you see a list of options beginning with those characters. This feature simplifies the insertion and editing of code.
288 USING DREAMWEAVER Working with page code Display a code hints menu The code hints menu appears automatically as you type in Code view. But you can also display the code hints menu manually, without typing. 1 In Code view (Window > Code), place the insertion point inside a tag. 2 Press Control+Spacebar. Insert code in Code view by using code hints 1 Type the beginning of a piece of code. For example, to insert a tag, type a right angle bracket (<).
289 USING DREAMWEAVER Working with page code Dreamweaver displays syntax errors not only for the current page but also for related pages. For example, suppose you are working on an HTML page that uses an included JavaScript file. If the included file contains an error, Dreamweaver displays an alert for the JavaScript file as well. You can easily open the related file containing the error by clicking its name at the top of the document.
290 USING DREAMWEAVER Working with page code Note: The code hints you create are specifically for the site selected in the Dreamweaver Files panel. In order for the code hints to display, the page you are working on must reside in the currently selected site. 1 Select Site > Site-Specific Code Hints. By default, the Site-Specific Code Hints feature scans your site to determine which Content Management System (CMS) framework you’re using.
291 USING DREAMWEAVER Working with page code 2 Click the Rename Structure icon button in the upper right-hand corner of the dialog box. 3 Specify a new name for the structure and click Rename. Note: If the name you specify is already in use, Dreamweaver prompts you to enter a different name, or to confirm that you want to overwrite the structure with the same name. You cannot overwrite any of the default framework structures.
292 USING DREAMWEAVER Working with page code You can also collapse the code outside a selection by Alt-clicking (Windows) or Option-clicking (Macintosh) the Collapse Selection button. Additionally, Control-clicking this button disables “smart collapse” so that you can collapse exactly what you selected without any manipulation from Dreamweaver. For more information, see “About collapsing code” on page 303. Expand All Restores all collapsed code.
293 USING DREAMWEAVER Working with page code You can also edit the Coding toolbar to display more buttons (such as Word Wrap, Hidden Characters, and Auto Indent) or hide buttons that you don’t want to use. To do this, however, you must edit the XML file that generates the toolbar. For more information, see Extending Dreamweaver. Note: The option to view hidden characters, which is not a default button in the Coding toolbar, is available from the View menu (View > Code View Options > Hidden Characters).
294 USING DREAMWEAVER Working with page code If the tag appears in the right pane with angle brackets (for example,
), it doesn’t require additional information, and it’s immediately inserted into the document at the insertion point. If the tag does require additional information, a tag editor appears. 7 If a tag editor opens, enter the additional information, and click OK. 8 Click the Close button.
295 USING DREAMWEAVER Working with page code To get more information about the tag within the Tag editor, click Tag Info. Edit code with the Coding context menu 1 In Code view, select some code and right-click (Windows) or Control-click (Macintosh). 2 Select the Selection submenu, and select any of the following options: Collapse Selection Collapses the selected code. Collapse Outside Selection Collapses all of the code outside the selected code. Expand Selection Expands the selected code fragment.
296 USING DREAMWEAVER Working with page code Convert Lines To Table Wraps the selection in a table tag with no attributes. Add Line Breaks Adds a br tag at the end of each line of the selection. Convert To Uppercase Converts all letters in the selection (including tag and attribute names and values) to uppercase. Convert To Lowercase Converts all letters in the selection (including tag and attribute names and values) to lowercase.
297 USING DREAMWEAVER Working with page code You can access the Code Navigator from Design, Code, and Split views, as well as from the Code inspector. For a video overview from the Dreamweaver engineering team about working with the Code Navigator, see www.adobe.com/go/dw10codenav. For a video tutorial on working with Live View, related files, and the Code Navigator, see www.adobe.com/go/lrvid4044_dw. Open the Code Navigator ❖ Alt+click (Windows) or Command+Option+Click (Macintosh) anywhere on the page.
298 USING DREAMWEAVER Working with page code The Functions submenu does not appear in Design view. Any JavaScript or VBScript functions in your code appear in the submenu. To see the functions listed in alphabetical order, Control-right-click (Windows) or Option-Control-click (Macintosh) in Code view, and then select the Functions submenu. • In the Code inspector, click the Code Navigation button ({ }) on the toolbar. 3 Select a function name to jump to the function in your code.
299 USING DREAMWEAVER Working with page code • In the Edit column, deselect any edits you do not want to make, or select edits that Dreamweaver did not select by default. By default, Dreamweaver lists but does not select the following edits: • Script blocks in the head of the document that contain document.write() or document.writeln() calls. • Script blocks in the head of the document that contain function signatures related to EOLAS handling code, which is known to use document.write().
300 USING DREAMWEAVER Working with page code 4 For Snippet Type, select Wrap Selection or Insert Block. a If you chose Wrap Selection, add code for the following options: Insert Before Type or paste the code to insert before the current selection. Insert After Type or paste the code to insert after the current selection. To set default spacing for the blocks, use line breaks; press Enter (Windows) or Return (Macintosh) inside the text boxes.
301 USING DREAMWEAVER Working with page code You can also search for specific text strings that are within or not within a set of container tags. For example, you can search for the word Untitled contained in a title tag to find all the untitled pages on your site. 1 Open the document to search in, or select documents or a folder in the Files panel. 2 Select Edit > Find And Replace. 3 Specify which files to search in, and then specify the kind of search to perform, and text or tags to search for.
302 USING DREAMWEAVER Working with page code Open the Reference panel 1 Do one of the following in Code view: • Right-click (Windows) or Control-click (Macintosh) a tag, attribute, or keyword, and then select Reference from the context menu. • Place the insertion point in a tag, attribute, or keyword, and then press Shift+F1. The Reference panel opens and displays information about the tag, attribute, or keyword you clicked.
303 USING DREAMWEAVER Working with page code Collapsing code About collapsing code You can collapse and expand code fragments so that you can view different sections of your document without having to use the scroll bar. For example, to see all of the CSS rules in the head tag that apply to a div tag farther down the page, you can collapse everything between the head tag and the div tag so that you can see both sections of code at once.
304 USING DREAMWEAVER Working with page code View the code in a collapsed code fragment without expanding it ❖ Hold the mouse pointer over the collapsed code fragment.
305 USING DREAMWEAVER Working with page code Optimizing and debugging code Clean up code You can automatically remove empty tags, combine nested font tags, and otherwise improve messy or unreadable HTML or XHTML code. For information on how to clean up HTML generated from a Microsoft Word document, see “Open and edit existing documents” on page 65. 1 Open a document: • If the document is in HTML, select Commands > Clean Up HTML. • If the document is in XHTML, select Commands > Clean Up XHTML.
306 USING DREAMWEAVER Working with page code More Help topics “Change the code format” on page 283 “Set the code colors” on page 285 Verify tags and braces are balanced You can check to make sure the tags, parentheses (( )), braces ({ }), and square brackets ([ ]) in your page are balanced. Balanced means that every opening tag, parenthesis, brace, or bracket has a corresponding closing one, and vice versa. Check for balanced tags 1 Open the document in Code view.
307 USING DREAMWEAVER Working with page code 4 To view the report in your primary browser (which lets you print the report), click the Browse Report button. Validate documents using W3C validator (CS5.5) Dreamweaver CS5.5 and later helps you create standards-compliant web pages with its in-built support for the W3C validator. The W3C validator validates your HTML documents for conformance to HTML or XHTML standards. You can validate both open documents, and files posted on a live server.
308 USING DREAMWEAVER Working with page code • To view the entire report in HTML, click Browse Report. The HTML report provides the complete list of errors and warnings along with a summary. • To jump to the location in the code containing the error, select the error in the W3C Validation panel. Click the Options button, and select Go to Line. • To hide errors/warnings, select the error/warning. Click the Options button, and select Hide Error.
309 USING DREAMWEAVER Working with page code For example, you can make an HTML document XHTML-compliant by selecting XHTML 1.0 Transitional or XHTML 1.0 Strict from the pop-up menu. Note: Not all document types can be made XHTML-compliant. Create XHTML-compliant documents by default 1 Select Edit > Preferences or Dreamweaver > Preferences (Mac OS X), and select the New Document category.
310 USING DREAMWEAVER Working with page code Dreamweaver requests the page from the ColdFusion server and displays it in an internal Internet Explorer browser window. If the page contains errors, possible causes for the errors appear at the bottom of the page. At the same time, a Server Debug panel opens.
311 USING DREAMWEAVER Working with page code Note: The Tag inspector and the Property inspector both let you view and edit a tag’s attributes. The Tag inspector lets you to view and edit every attribute associated with a given tag. The Property inspector shows only the most common attributes, but provides a richer set of controls for changing those attributes’ values, and lets you edit certain objects (such as table columns) that don’t correspond to specific tags.
312 USING DREAMWEAVER Working with page code Note: If you change the name of a standard attribute and then add a value for that attribute, the attribute and its new value move to the appropriate category. • To add a new attribute not already listed, click in the empty space below the last listed attribute name and type a new attribute name. 4 Press Enter (Windows) or Return (Macintosh), or click elsewhere in the Tag inspector, to update the tag in your document.
313 USING DREAMWEAVER Working with page code The Quick Tag Editor opens in Insert HTML mode. 3 Enter the HTML tag and press Enter. The tag is inserted into your code, along with a matching closing tag if applicable. 4 Press Escape to exit without making any changes. Edit an HTML tag 1 Select an object in Design view. You can also select the tag you want to edit from the tag selector at the bottom of the Document window. For more information, see “Edit code with the tag selector” on page 314.
314 USING DREAMWEAVER Working with page code Similarly, to see a hints menu listing valid tag names, pause briefly while entering or editing a tag name in the Quick Tag Editor. Note: The Quick Tag Editor code hints preferences are controlled by the normal code hints preferences. For more information, see “Set code hints preferences” on page 289. More Help topics “Quick Tag Editor overview” on page 312 Use a hints menu 1 Do one of the following: • Begin to type a tag or attribute name.
315 USING DREAMWEAVER Working with page code The object represented by the tag is selected on the page. Use this technique to select individual table rows (tr tags) or cells (td tags). Write and edit scripts in Design view You can work with client-side JavaScripts and VBScripts in both Code and Design views, in the following ways: • Write a JavaScript or VBScript script for your page without leaving Design view. • Create a link in your document to an external script file without leaving Design view.
316 USING DREAMWEAVER Working with page code 5 (Optional) In the Source box, specify an externally linked script file. Click the folder icon or the Browse button to select a file, or type the path. 6 Edit the script, and click OK. Edit ASP server-side scripts in Design view Use the ASP script Property inspector to inspect and modify ASP server-side scripts in Design view. 1 In Design view, select the server-language tag visual icon. 2 In the ASP script Property inspector, click the Edit button.
317 USING DREAMWEAVER Working with page code Insert an element into the head section of a document 1 Select an item from the Insert > HTML > Head Tags submenu. 2 Enter options for the element in the dialog box that appears, or in the Property inspector. Edit an element in the head section of a document 1 Select View > Head Content. 2 Click one of the icons in the head section to select it. 3 Set or modify the properties of the element in the Property inspector.
318 USING DREAMWEAVER Working with page code Specify the title in the head content 1 Select View > Head Content. 2 Select the Title marker that appears at the top of the Document window. 3 Specify the page title in the Property inspector. Specify keywords for the page Many search-engine robots (programs that automatically browse the web gathering information for search engines to index) read the contents of the Keywords meta tag and use the information to index your pages in their databases.
319 USING DREAMWEAVER Working with page code Add a Refresh meta tag 1 Select Insert > HTML > Head Tags > Refresh. 2 Set the Refresh meta tag properties in the dialog box that appears. Edit a Refresh meta tag 1 Select View > Head Content. 2 Select the Refresh marker that appears at the top of the Document window. 3 In the Property inspector, set the Refresh meta tag properties.
320 USING DREAMWEAVER Working with page code Set the link properties of the page Use the link tag to define a relationship between the current document and another file. Note: The link tag in the head section is not the same thing as an HTML link between documents in the body section. Add a Link meta tag 1 Select Insert > HTML > Head Tags > Link. 2 Specify the Link meta tag properties in the dialog box that appears. Edit a Link meta tag 1 Select View > Head Content.
321 USING DREAMWEAVER Working with page code When a visitor’s browser requests the document that contains the include instruction, your server processes the include instruction and creates a new document in which the include instruction is replaced by the contents of the included file. The server then sends this new document to the visitor’s browser.
322 USING DREAMWEAVER Working with page code Insert a server-side include 1 Select Insert > Server-Side Include. 2 In the dialog box that appears, browse to and select a file. By default, a File type of include is inserted. 3 To change the type of the include, select the server-side include in the Document window and change the type in the Property inspector (Window > Properties), as follows: • If your server is an Apache web server, select Virtual.
323 USING DREAMWEAVER Working with page code Managing tag libraries About Dreamweaver tag libraries A tag library, in Dreamweaver, is a collection of tags of a particular type, along with information about how Dreamweaver should format the tags. Tag libraries provide the information about tags that Dreamweaver uses for code hints, target browser checks, the Tag Chooser, and other coding capabilities.
324 USING DREAMWEAVER Working with page code Add attributes to a tag 1 In the Tag Library editor (Edit > Tag Libraries), click the Plus (+) button and select New Attributes. 2 In the Tag Library pop-up menu, select a tag library. 3 In the Tag pop-up menu, select a tag. 4 Type the name of the new attribute. To add more than one attribute, separate attributes’ names with a comma and a space (for example: width, height). 5 Click OK.
325 USING DREAMWEAVER Working with page code Edit an attribute for a tag 1 In the Tag Library editor (Edit > Tag Libraries), expand a tag library in the Tags box, expand a tag, and select a tag attribute. 2 In the Attribute Case pop-up menu, select the Default, Lowercase, Uppercase, or Mixed Case option. If you select Mixed Case, the Attribute Name Mixed Case dialog box appears. Type the attribute with the case Dreamweaver should use when inserting it (for example, onClick), and click OK.
326 USING DREAMWEAVER Working with page code 5 Click OK. Import custom ASP.NET tags You can import custom ASP.NET tags into Dreamweaver. Before you begin, make sure that the custom tag is installed on the testing server defined in the Site Definition dialog box (see “Set up a testing server” on page 43). Compiled tags (DLL files) must be placed in the site root’s /bin folder. Noncompiled tags (ASCX files) can reside in any virtual directory or subdirectory on the server.
327 USING DREAMWEAVER Working with page code The URI (Uniform Resource Identifier) often consists of the URL of the organization maintaining the tag library. The URL is not used to view the organization’s website; it is used to uniquely identify the tag library. 6 (Optional) Enter the prefix to be used with the tags. Some tag libraries use a prefix to identify a tag in the code as part of a particular tag library. 7 Click OK.
328 Chapter 12: Adding JavaScript behaviors Using JavaScript behaviors (general instructions) About JavaScript behaviors Adobe® Dreamweaver® CS5 behaviors place JavaScript code in documents so that visitors can change a web page in various ways or initiate certain tasks. A behavior is a combination of an event and an action triggered by that event. In the Behaviors panel, you add a behavior to a page by specifying an action and then specifying the event that triggers that action.
329 USING DREAMWEAVER Adding JavaScript behaviors Show All Events Displays an alphabetical list of all events for a given category. Add Behavior (+) Displays a menu of actions that can be attached to the currently selected element. When you select an action from this list, a dialog box appears in which you can specify parameters for the action. If all the actions are dimmed, no events can be generated by the selected element. Remove Event (–) Removes the selected event and action from the behavior list.
330 USING DREAMWEAVER Adding JavaScript behaviors You can specify more than one action for each event. Actions occur in the order in which they’re listed in the Actions column of the Behaviors panel, but you can change that order. 1 Select an element on the page, such as an image or a link. To attach a behavior to the entire page, click the
tag in the tag selector at the lower-left corner of the Document window. 2 Choose Window > Behaviors.
331 USING DREAMWEAVER Adding JavaScript behaviors Download and install third-party behaviors Many extensions are available on the Exchange for Dreamweaver website (www.adobe.com/go/dreamweaver_exchange). 1 Choose Window > Behaviors and select Get More Behaviors from the Add Behavior menu. Your primary browser opens, and the Exchange site appears. 2 Browse or search for packages. 3 Download and install the extension package you want.
332 USING DREAMWEAVER Adding JavaScript behaviors 5 Enter the new value for the new property in the New Value field. 6 Click OK and verify that the default event is correct. Apply the Check Browser behavior This behavior has been deprecated as of Dreamweaver CS5. Apply the Check Plugin behavior Use the Check Plugin behavior to send visitors to different pages depending on whether they have the specified plug-in installed.
333 USING DREAMWEAVER Adding JavaScript behaviors Because the Drag AP Element behavior must be called before the visitor can drag the AP element, you should attach Drag AP Element to the body object (with the onLoad event). 1 Select Insert > Layout Objects > AP Div or click the Draw AP Div button on the Insert panel and draw an AP Div in the Document window’s Design view. 2 Click
in the tag selector at the lower-left corner of the Document window.
334 USING DREAMWEAVER Adding JavaScript behaviors 12 Enter JavaScript code or a function name (for example, evaluateAPelementPos()) in the second Call JavaScript box to execute the code or function when the AP element is dropped. Select Only If Snapped if the JavaScript should be executed only if the AP element has reached the drop target. 13 Click OK and verify that the default event is correct.
335 USING DREAMWEAVER Adding JavaScript behaviors 5 Click OK and verify that the default event is correct. Apply the Jump Menu behavior When you create a jump menu by using Insert > Form > Jump Menu, Dreamweaver creates a menu object and attaches the Jump Menu (or Jump Menu Go) behavior to it. There is usually no need to attach the Jump Menu behavior to an object by hand.
336 USING DREAMWEAVER Adding JavaScript behaviors If you specify no attributes for the window, it opens at the size and with the attributes of the window from which it was opened. Specifying any attribute for the window automatically turns off all other attributes that are not explicitly turned on.
337 USING DREAMWEAVER Adding JavaScript behaviors 6 Click OK and verify that the default event is correct. Apply the Set Nav Bar Image behavior This behavior has been deprecated as of Dreamweaver CS5. Apply the Set Text Of Frame behavior The Set Text Of Frame behavior allows you to dynamically set the text of a frame, replacing the content and formatting of a frame with the content you specify. The content can include any valid HTML code. Use this behavior to display information dynamically.
338 USING DREAMWEAVER Adding JavaScript behaviors Apply the Set Text Of Status Bar behavior The Set Text Of Status Bar behavior shows a message in the status bar at the lower-left corner of the browser window. For example, you can use this behavior to describe the destination of a link in the status bar instead of showing the URL associated with it.
339 USING DREAMWEAVER Adding JavaScript behaviors Apply the Show-Hide Elements behavior The Show-Hide Elements behavior shows, hides, or restores the default visibility of one or more page elements. This behavior is useful for displaying information as the user interacts with the page. For example, as the user moves the pointer over an image of a plant, you could show a page element giving details about the plant’s growing season and region, how much sun it needs, how large it can grow, and so on.
340 USING DREAMWEAVER Adding JavaScript behaviors There is also a Swap Image Restore behavior, which restores the last set of swapped images to their previous source files. This behavior is automatically added whenever you attach the Swap Image behavior to an object; if you leave the Restore option selected while attaching Swap Image, you should never need to select the Swap Image Restore behavior manually. 1 Select Insert > Image or click the Image button on the Insert panel to insert an image.
341 USING DREAMWEAVER Adding JavaScript behaviors Use E-mail address Checks that the field contains an @ symbol. Use Number Checks that the field contains only numerals. Use Number From Checks that the field contains a number in a specific range. 8 If you have chosen to validate multiple fields, repeat steps 6 and 7 for any additional fields that you want to validate. 9 Click OK.
342 Chapter 13: Working with other applications Cross-application integration About Photoshop, Flash, and Fireworks integration Photoshop, Fireworks, and Flash are powerful web-development tools for creating and managing graphics and SWF files. You can tightly integrate Dreamweaver with these tools to simplify your web design workflow. Note: There is also limited integration with some other applications. For example, you can export an InDesign file as XHTML and continue working on it in Dreamweaver.
343 USING DREAMWEAVER Working with other applications Working with Fireworks and Dreamweaver Insert a Fireworks image Dreamweaver and Fireworks recognize and share many of the same file-editing procedures, including changes to links, image maps, table slices, and more. Together, the two applications provide a streamlined workflow for editing, optimizing, and placing web graphics files in HTML pages.
344 USING DREAMWEAVER Working with other applications 4 In Fireworks, edit the source PNG file and click Done. Fireworks saves the changes in the PNG file, exports the updated image (or HTML and images), and returns focus to Dreamweaver. In Dreamweaver, the updated image or table appears. For a tutorial about Dreamweaver and Fireworks integration, see www.adobe.com/go/vid0188.
345 USING DREAMWEAVER Working with other applications Note: Although Fireworks doesn’t show links you’ve added to an image placeholder, they are preserved. If you draw a hotspot and add a link in Fireworks, it will not delete the link you added to the image placeholder in Dreamweaver; however, if you cut out a slice in Fireworks in the new image, Fireworks will delete the link in the Dreamweaver document when you replace the image placeholder.
346 USING DREAMWEAVER Working with other applications The source PNG file opens in Fireworks. 2 In Fireworks, edit the menu with the Pop-up Menu Editor, and then click Done on the Fireworks toolbar. Fireworks sends the edited pop-up menu back to Dreamweaver. If you created a pop-up menu in Fireworks MX 2004 or earlier, you can edit it in Dreamweaver using the Show Pop-Up Menu dialog box, available from the Behaviors panel.
347 USING DREAMWEAVER Working with other applications • In the Common category of the Insert panel, click the Images button and choose Insert Fireworks HTML from the popup menu. 3 Click Browse to select a Fireworks HTML file. 4 If you will have no further use for the file, select Delete File After Insertion. Selecting this option has no effect on the source PNG file associated with the HTML file.
348 USING DREAMWEAVER Working with other applications 4 Navigate to the Dreamweaver file containing the HTML you want to update, and click Open. 5 Navigate to the folder destination where you want to place the updated image files, and click Select (Windows) or Choose (Macintosh). Fireworks updates the HTML and JavaScript code in the Dreamweaver document. Fireworks also exports updated images associated with the HTML and places the images in the specified destination folder.
349 USING DREAMWEAVER Working with other applications Smart Object When the web image (that is, the image on the Dreamweaver page) is out of sync with the original Photoshop file, Dreamweaver detects that the original file has been updated, and displays one of the Smart Object icon’s arrows in red.
350 USING DREAMWEAVER Working with other applications Storing Photoshop files If you’ve inserted a web image, and have not stored the original Photoshop file in your Dreamweaver site, Dreamweaver recognizes the path to the original file as an absolute local file path. (This is true for both the copy/paste and Smart Object workflows.
351 USING DREAMWEAVER Working with other applications Note: You do not need Photoshop installed to make the update from Dreamweaver. Update multiple Smart Objects You can update multiple Smart Objects at once using the Assets panel. The Assets panel also lets you see Smart Objects that might not be selectable in the Document window (for example, CSS background images). 1 In the Files panel, click the Assets tab to view site assets. 2 Make sure that Images view is selected.
352 USING DREAMWEAVER Working with other applications SmartObject state Description Recommended action Images synched The web image is in sync with the current contents of the original None Photoshop file. Width and height attributes in the HTML code match the dimensions of the web image. Original asset modified The original Photoshop file has been modified after the creation Use the Update From Original button in the of the web image in Dreamweaver. Property inspector to sync the two images.
353 USING DREAMWEAVER Working with other applications For a tutorial on copying and pasting between different applications, including Dreamweaver and Photoshop, see www.adobe.com/go/vid0193. Edit pasted images After you paste Photoshop images in your Dreamweaver pages, you can edit the original PSD file in Photoshop.
354 USING DREAMWEAVER Working with other applications A B C The Image Preview dialog box A. Options tab B. File tab C. Preview panel Note: Whatever settings you select only affect the exported version of the image file. The original Photoshop PSD or Fireworks PNG file always remains untouched. The Image Preview dialog box has three sections: • The Options tab lets you define which file format to use and set preferences such as color.
355 USING DREAMWEAVER Working with other applications Matte Allows you to set the background of the image. You can maintain the transparency of a 32-bpc (bits per channel) PNG by clicking the transparency icon in the Matte dialog box. You can also use Matte to anti-alias softedged objects that lie directly above the canvas by matching the matte color to the target background. Remove Unused Colors Reduces file size by removing colors not used in the image.
356 USING DREAMWEAVER Working with other applications Optimize To Size Lets you specify a size, in kilobytes, for the image. For 8-bpc images, the wizard attempts to achieve the requested file size by adjusting the number of colors or dithering. Saved settings Dreamweaver provides several option settings for your convenience. Depending on the saved settings you choose, the file-type-specific image options described above may change. GIF Web 216 Forces all colors to web-safe colors.
357 USING DREAMWEAVER Working with other applications Working with Flash and Dreamweaver Edit a SWF file from Dreamweaver in Flash If you have both Flash and Dreamweaver installed, you can select a SWF file in a Dreamweaver document and use Flash to edit it. Flash does not edit the SWF file directly; it edits the source document (FLA file) and re-exports the SWF file. 1 In Dreamweaver, open the Property inspector (Window > Properties).
358 USING DREAMWEAVER Working with other applications Start Adobe Bridge from Dreamweaver You can start Adobe Bridge from Dreamweaver to view your files before placing them or dragging them in your page layout. ❖ You can start Adobe Bridge in several different ways: • Select File > Browse In Bridge. • Click the Browse In Bridge button in the Standard toolbar. • Press the Browse In Bridge shortcut from the keyboard: Control+Alt+O (Windows) or Command+Option+O (Macintosh).
359 USING DREAMWEAVER Working with other applications Note: If your insertion point is in Code view, Adobe Bridge starts as usual but cannot place the file. You can only place files in Design view. Drag a file from Bridge into your page 1 In Dreamweaver (Design view), place the insertion point on your page where you want the image inserted. 2 Start Adobe Bridge if it isn't already open. 3 In Adobe Bridge, select one or more files and drag them into your Dreamweaver page.
360 USING DREAMWEAVER Working with other applications 3 Do one of the following: • Select File > Preview in Browser > Device Central. • On the document window toolbar, click and hold the Preview/Debug In browser button and select Preview In Device Central. The file is displayed in the Device Central Emulator tab. To continue testing, double-click the name of a different device in the Device Sets or Available Devices lists.
361 USING DREAMWEAVER Working with other applications For complete instructions on using ConnectNow, see Adobe ConnectNow Help. For a video tutorial about using ConnectNow, see Using ConnectNow to share your screen (7:12). (This demonstration is in Dreamweaver.) AIR Extension for Dreamweaver The Adobe® AIR® Extension for Dreamweaver® lets you transform a web-based application into a desktop application.
362 USING DREAMWEAVER Working with other applications Creating an AIR application in Dreamweaver To create an HTML-based AIR application in Dreamweaver, you select an existing site to package as an AIR application. 1 Make sure that the web pages you want to package into an application are contained in a defined Dreamweaver site. 2 In Dreamweaver, open the home page of the set of pages you want to package. 3 Select Site > Air Application Settings.
363 USING DREAMWEAVER Working with other applications Application Updates determines whether the Adobe AIR Application Installer or the application itself performs updates to new versions of Adobe AIRapplications. The check box is selected by default, which causes the Adobe AIR Application Installer to perform updates. If you want your application to perform its own updates, deselect the checkbox.
364 USING DREAMWEAVER Working with other applications Signing an application with a digital certificate A digital signature provides an assurance that the code for an application has not been altered or corrupted since its creation by the software author. All Adobe AIR applications require a digital signature, and can’t be installed without one.
365 USING DREAMWEAVER Working with other applications Following is a list of options: Name specifies the name of the file type that appears in the Associated File Types list. This option is required, and can only include alphanumeric ASCII characters (a-z, A-Z, 0-9) and dots (for example, adobe.VideoFile). The name must start with a letter. The maximum length is 38 characters. Extension specifies the extension of the file type. Do not include a preceding dot.
366 Chapter 14: Creating and managing templates About Dreamweaver templates Understanding Dreamweaver templates A template is a special type of document that you use to design a “fixed” page layout; you can then create documents based on the template that inherit its page layout. As you design a template, you specify as “editable” which content users can edit in a document based on that template.
367 USING DREAMWEAVER Creating and managing templates An optional region A section of a template that holds content—such as text or an image—that may or may not appear in a document. In the template-based page, the template user usually controls whether the content is displayed. An editable tag attribute Lets you unlock a tag attribute in a template, so the attribute can be edited in a template- based page.
368 USING DREAMWEAVER Creating and managing templates In Dreamweaver 8, however, this behavior was changed so that all document-relative links are updated when creating template-based pages, regardless of the apparent location of the linked files. In this scenario, Dreamweaver examines the link in the template file (href="main.css") and creates a link in the template-based page that is relative to the location of the new document.
369 USING DREAMWEAVER Creating and managing templates Template parameters are passed to the document as instance parameters. In most cases, a template user can edit the parameter’s default value to customize what appears in a template-based document. In other cases, the template author might determine what appears in the document, based on the value of a template expression.
370 USING DREAMWEAVER Creating and managing templates The following data types are used: Boolean, IEEE 64-bpc floating point, string, and object. Dreamweaver templates do not support the use of JavaScript “null” or “undefined” types. Nor do they allow scalar types to be implicitly converted into an object; thus, the expression "abc".length would trigger an error, instead of yielding the value 3. The only objects available are those defined by the expression object model.
371 USING DREAMWEAVER Creating and managing templates TemplateEndIfClause --> TemplateEndIfClause--> TemplateEndIfClause --> TemplateEndIfClause --> image--> 
372 USING DREAMWEAVER Creating and managing templates Recognizing templates in Code view In Code view, editable content regions are marked in HTML with the following comments: You can use code color preferences to set your own color scheme so you can easily distinguish template regions when you view a document in Code view. Everything between these comments will be editable in documents based on the template.
373 USING DREAMWEAVER Creating and managing templates In addition to the editable-region outlines, the entire page is surrounded by a different-colored outline, with a tab in the upper-right corner giving the name of the template that the document is based on. This highlighted rectangle reminds you that the document is based on a template and that you can’t change content outside the editable regions.
374 USING DREAMWEAVER Creating and managing templates
| Name | Address | Telephone Number |
| Enter name | Enter Address | Enter Telephone |
The default color for non-editab
375 USING DREAMWEAVER Creating and managing templates Create a template from an existing document You can create a template from an existing document. 1 Open the document you want to save as a template. 2 Do one of the following: • Select File > Save As Template. • In the Common category of the Insert panel, click the Templates button, then select Make Template from the popup menu.
376 USING DREAMWEAVER Creating and managing templates In addition to Dreamweaver templates, you can create non-Dreamweaver templates using the Contribute administration tools. A non-Dreamweaver template is an existing page that Contribute users can use to create new pages; it’s similar to a Dreamweaver template, except that pages that are based on it don’t update when you change the template.
377 USING DREAMWEAVER Creating and managing templates 8 Select the New Pages category, and then add existing pages to the list under Create A New Page By Copying A Page From This List. For more information, see Administering Contribute. 9 Click OK twice to close the dialog boxes. More Help topics “Prepare a site for use with Contribute” on page 52 Creating editable regions in templates Insert an editable region Editable template regions control which areas of a template-based page a user can edit.
378 USING DREAMWEAVER Creating and managing templates More Help topics “Creating a Dreamweaver template” on page 374 “Set highlighting preferences for template regions” on page 397 Select editable regions You can easily identify and select template regions in both the template document and template-based documents. Select an editable region in the Document window ❖ Click the tab in the upper-left corner of the editable region.
379 USING DREAMWEAVER Creating and managing templates There are two repeating region template objects you can use: repeating region and repeating table. More Help topics “Types of template regions” on page 366 Create a repeating region in a template Repeating regions enable template users to duplicate a specified region in a template as often as desired. A repeating region is not necessarily an editable region.
380 USING DREAMWEAVER Creating and managing templates If you don’t explicitly assign values for cell padding and cell spacing, most browsers display the table as if cell padding were set to 1 and cell spacing were set to 2. To ensure that browsers display the table with no padding or spacing, set Cell Padding and Cell Spacing to 0. Width Specifies the width of the table in pixels, or as a percentage of the browser window’s width. Border Specifies the width, in pixels, of the table’s borders.
381 USING DREAMWEAVER Creating and managing templates Using optional regions in templates About template optional regions An optional region is a region in a template that users can set to show or to hide in a template-based document. Use an optional region when you want to set conditions for displaying content in a document. When you insert an optional region, you can either set specific values for a template parameter or define conditional statements (If...else statements) for template regions.
382 USING DREAMWEAVER Creating and managing templates 3 Enter a name for the optional region, click the Advanced tab if you want to set values for the optional region, and then click OK. Insert an editable optional region 1 In the Document window, place the insertion point where you want to insert the optional region. You cannot wrap a selection to create an editable optional region. Insert the region, then insert the content in the region.
383 USING DREAMWEAVER Creating and managing templates 6 Click OK. When you use the Optional Region template object, Dreamweaver inserts template comments in the code. A template parameter is defined in the head section, as in the following example: At the location where the optional region is inserted, code similar to the code below appears:
PAGE 391
384 USING DREAMWEAVER Creating and managing templates 6 In the Type menu, select the type of value allowed for this attribute by setting one of the following options: • To enable a user to enter a text value for the attribute, select Text. For example, you can use text with the align attribute; the user can then set the attribute’s value to left, right, or center. • To insert a link to an element, such as the file path to an image, select URL.
385 USING DREAMWEAVER Creating and managing templates In the following example, the template trioHome contains three editable regions, named Body, NavBar, and Footer: To create a nested template, a new document based on the template was created and then saved as a template and named TrioNested. In the nested template, two editable regions have been added in the editable region named Body.
386 USING DREAMWEAVER Creating and managing templates When you add a new editable region in an editable region passed through to the nested template, the highlighting color of the editable region changes to orange. Content you add outside the editable region, such as the graphic in the editableColumn, is no longer editable in documents based on the nested template.
387 USING DREAMWEAVER Creating and managing templates
@@("")@@ Editable 1
Editing, updating, and deleting templates About editing and updating templates When you make changes to and save a template, all the documents based on the template are updated. You can also manually update a template-based document or the entire site if necessary.
388 USING DREAMWEAVER Creating and managing templates 3 Modify the contents of the template. To modify the template’s page properties, select Modify > Page Properties. (Documents based on a template inherit the template’s page properties.) 4 Save the template. Dreamweaver prompts you to update pages based on the template. 5 Click Update to update all documents based on the modified template; click Don’t Update if you don’t want to update documents based on the modified template.
389 USING DREAMWEAVER Creating and managing templates Change a template description The template description appears in the New Document dialog box when you’re creating a page from an existing template. 1 Select Modify > Templates > Description. 2 In the Template Description dialog box, edit the description and click OK.
390 USING DREAMWEAVER Creating and managing templates • If you remove an editable region from a template, a Contribute user editing a page based on that template might be confused about what to do with the content that was in that editable region. To update a template in a Contribute site, complete the following steps. 1 Open the Contribute template in Dreamweaver, edit it, and then save it. For instructions, see “Open a template for editing” on page 387.
391 USING DREAMWEAVER Creating and managing templates 5 In the dialog box that appears, select a folder location, enter a name for the XML file, and then click Save. An XML file is generated that contains the material from the document’s parameters and editable regions, including editable regions inside repeating regions or optional regions. The XML file includes the name of the original template, as well as the name and contents of each template region.
392 USING DREAMWEAVER Creating and managing templates Apply a template to an existing document using the Assets panel 1 Open the document you want to apply the template to. 2 In the Assets panel (Window > Assets), select the Templates category on the left side of the panel . 3 Do one of the following: • Drag the template you want to apply from the Assets panel to the Document window. • Select the template you want to apply, then click the Apply button at the bottom of the Assets panel.
393 USING DREAMWEAVER Creating and managing templates Note: You cannot convert a template file (.dwt) to a normal file by simply resaving the template file as an HTML (.html) file. Doing so does not delete the template code that appears throughout the document. If you want to convert a template file to a normal file, you can save the document as a normal HTML file, but must then manually delete all of the template code in Code view. 1 Open the template-based document you want to detach.
394 USING DREAMWEAVER Creating and managing templates 3 In the Name list, select the property. The bottom area of the dialog box updates to show the selected property’s label and its assigned value. 4 In the field to the right of the property label, edit the value to modify the property in the document. Note: The field name and updateable values are defined in the template. Attributes that do not appear in the Name list are not editable in the template-based document.
395 USING DREAMWEAVER Creating and managing templates • Click the Minus (–) button to delete the selected repeating region entry. • Click the Down Arrow button to move the selected entry down one position. • Click the Up Arrow button to move the selected entry up one position. Note: Alternatively, you can select Modify > Template, then select one of the repeating entry options near the bottom of the context menu. You can use this menu to insert a new repeating entry or move the selected entry’s position.
396 USING DREAMWEAVER Creating and managing templates TemplateEndEditable --> TemplateParam name="..." type="..." value="..." --> TemplateBeginRepeat name="..." --> TemplateEndRepeat --> TemplateBeginIf cond="..." --> TemplateEndIf --> TemplateBeginPassthroughIf cond="...
397 USING DREAMWEAVER Creating and managing templates Setting authoring preferences for templates Customize code coloring preferences for a template Code color preferences control the text, background color, and style attributes of the text displayed in Code view. You can set your own color scheme so you can easily distinguish template regions when you view a document in Code view. 1 Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh).
398 USING DREAMWEAVER Creating and managing templates View highlight colors in the Document window ❖ Select View > Visual Aids > Invisible Elements. Highlight colors appear in the document window only when View > Visual Aids > Invisible Elements is enabled and the appropriate options are enabled in Highlighting preferences.
399 Chapter 15: Building Spry pages visually The Spry framework is a JavaScript library that provides web designers with the ability to build web pages that offer richer experiences to their site visitors. With Spry, you can use HTML, CSS, and a minimal amount of JavaScript to incorporate XML data into your HTML documents, create widgets such as accordions and menu bars, and add different kinds of effects to various page elements.
400 USING DREAMWEAVER Building Spry pages visually Each widget in the Spry framework is associated with unique CSS and JavaScript files. The CSS file contains everything necessary for styling the widget, and the JavaScript file gives the widget its functionality. When you insert a widget by using the Dreamweaver interface, Dreamweaver automatically links these files to your page so that your widget contains functionality and styling.
401 USING DREAMWEAVER Building Spry pages visually Get more widgets There are many more web widgets available than the Spry widgets that install with Dreamweaver. The Adobe Exchangeprovides web widgets that have been developed by other creative professionals. ❖ Choose Browse for Web Widgets from the Extend Dreamweaver menu in the Application bar. For a video overview from the Dreamweaver engineering team about working with web widgets, see www.adobe.com/go/dw10widgets.
402 USING DREAMWEAVER Building Spry pages visually The default HTML for the Accordion widget comprises an outer div tag that contains all of the panels, a div tag for each panel, and a header div and content div within the tag for each panel. An Accordion widget can contain any number of individual panels. The HTML for the Accordion widget also includes script tags in the head of the document and after the accordion’s HTML markup.
403 USING DREAMWEAVER Building Spry pages visually For a more advanced list of styling tasks, see www.adobe.com/go/learn_dw_spryaccordion_custom. All CSS rules in the following topics refer to the default rules located in the SpryAccordion.css file. Dreamweaver saves the SpryAccordion.css file in the SpryAssets folder of your site whenever you create a Spry Accordion widget.
404 USING DREAMWEAVER Building Spry pages visually You can also locate the rule by selecting the Accordion widget, and looking in the CSS Styles panel (Window > CSS Styles). Make sure the panel is set to Current mode. 2 Add a width property and value to the rule, for example width: 300px;. Working with the Spry Menu Bar widget About the Menu Bar widget A Menu Bar widget is a set of navigational menu buttons that display submenus when a site visitor hovers over one of the buttons.
405 USING DREAMWEAVER Building Spry pages visually Note: The Spry Menu Bar widget uses DHTML layers to display sections of HTML on top of other sections. If your page contains content created with Adobe Flash, this might cause a problem because SWF files are always displayed on top of all other DHTML layers, so the SWF file might be displayed on top of your submenus. The workaround for this situation is to change the parameters for the SWF file to use wmode="transparent".
406 USING DREAMWEAVER Building Spry pages visually Link a menu item 1 Select a Menu Bar widget in the Document window. 2 In the Property inspector (Window > Properties) select the name of the menu item to which you want to apply a link. 3 Type the link in the Link text box, or click the folder icon to browse to a file. Create a tool tip for a menu item 1 Select a Menu Bar widget in the Document window.
407 USING DREAMWEAVER Building Spry pages visually Note: If your site already has a vertical Menu Bar widget somewhere else, you don’t need to insert a new one. You can simply attach the SpryMenuBarVertical.css file to the page instead by clicking the Attach Style Sheet button in the CSS Styles panel (Windows > CSS Styles). 3 Delete the vertical Menu Bar. 4 In Code view (View > Code), locate the MenuBarHorizontal class and change it to MenuBarVertical.
408 USING DREAMWEAVER Building Spry pages visually Style to change CSS rule for vertical or horizontal menu bar Relevant properties and default values Default text ul.MenuBarVertical a, ul.MenuBarHorizontal a color: #333; text-decoration: none; Text color when mouse pointer moves over it ul.MenuBarVertical a:hover, ul.MenuBarHorizontal a:hover color: #FFF; Text color when in focus ul.MenuBarVertical a:focus, ul.
409 USING DREAMWEAVER Building Spry pages visually Position submenus The position of Spry Menu Bar submenus is controlled by the margin property on submenu ul tags. 1 Locate the ul.MenuBarVertical ul or ul.MenuBarHorizontal ul rule. 2 Change the margin: -5% 0 0 95%; default values to the desired values. Working with the Spry Collapsible Panel widget About the Collapsible Panel widget A Collapsible Panel widget is a panel that can store content in a compact space.
410 USING DREAMWEAVER Building Spry pages visually Set the default state of a Collapsible Panel widget You can set the default state (open or closed) of the Collapsible Panel widget when the web page loads in a browser. 1 Select a Collapsible Panel widget in the Document window. 2 In the Property inspector (Window > Properties), select Open or Closed from the Default state pop-up menu.
411 USING DREAMWEAVER Building Spry pages visually Change Collapsible Panel widget background colors ❖ To change the background colors of different parts of a Collapsible Panel widget, use the following table to locate the appropriate CSS rule, and then add or change background color properties and values to your liking: Color to change Relevant CSS rule Example of property and value to add or change Background color of panel tab .
412 USING DREAMWEAVER Building Spry pages visually For a more comprehensive explanation of how the Tabbed Panels widget works, including a full anatomy of the widget’s code, see www.adobe.com/go/learn_dw_sprytabbedpanels. Insert and edit the Tabbed Panels widget Insert the Tabbed Panels widget ❖ Select Insert > Spry > Spry Tabbed Panels. Note: You can also insert a Tabbed Panels widget by using the Spry category in the Insert panel.
413 USING DREAMWEAVER Building Spry pages visually For a quick reference on changing the colors of the Tabbed Panels widget, see David Powers’s Quick guide to styling Spry tabbed panels, accordions, and collapsible panels. For a more advanced list of styling tasks, see www.adobe.com/go/learn_dw_sprytabbedpanels_custom. All CSS rules in the topics below refer to the default rules located in the SpryTabbedPanels.css file. Dreamweaver saves the SpryTabbedPanels.
414 USING DREAMWEAVER Building Spry pages visually Constrain the width of tabbed panels By default, the Tabbed Panels widget expands to fill available space. You can constrain the width of a Tabbed Panels widget, however, by setting a width property for the accordion container. 1 Locate the .TabbedPanels CSS rule by opening the SpryTabbedPanels.css file. This rule defines properties for the main container element of the Tabbed Panels widget.
415 USING DREAMWEAVER Building Spry pages visually Insert the Tooltip widget ❖ Select Insert > Spry > Spry Tooltip. Note: You can also insert a Tooltip widget by using the Spry category in the Insert panel. This action inserts a new Tooltip widget with a container for the tooltip content, and a placeholder sentence that acts as the tooltip trigger. You can also select an existing element on the page (for example, an image), and then insert the tooltip.
416 USING DREAMWEAVER Building Spry pages visually The following example shows a Validation Radio Group widget in various states. B A A. Validation Radio Group widget error messages B. Validation Radio Group widget group The Validation Radio Group widget includes three states beyond the initial state: valid, invalid, and required value. You can alter the properties of these states by editing the corresponding CSS file (SpryValidationRadio.css), depending on the desired validation results.
417 USING DREAMWEAVER Building Spry pages visually 7 Select a layout type for the radio group. Line breaks Places each radio button on a separate line using line breaks (br tags). Table Places each radio button on a separate line using individual table rows (tr tags). 8 Click OK. Note: You can also insert a Radio Group widget by using the Spry category in the Insert panel.
418 USING DREAMWEAVER Building Spry pages visually Radio Group widget with empty value radio button. 1 Select the radio button in your Radio Group widget that you want to use for the empty or invalid radio button. When specifying empty or invalid values for the widget, there must be corresponding radio buttons with those values already assigned. 2 In the Radio Button Property inspector (Window > Properties), assign the radio button a checked value.
419 USING DREAMWEAVER Building Spry pages visually The SpryValidationRadio.css file contains extensive comments, explaining the code and the purpose for certain rules. For further information, see the comments in the file. Style Validation Radio Group widget error message text By default, error messages for the Validation Radio Group widget appear in red with a 1-pixel solid border surrounding the text.
420 USING DREAMWEAVER Building Spry pages visually Required state The widget state when the user has failed to enter required text in the text field. Minimum Number Of Characters state The widget state when the user has entered fewer than the minimum number of characters required in the text field. Maximum Number Of Characters state The widget state when the user has entered greater than the maximum number of characters allowed in the text field.
421 USING DREAMWEAVER Building Spry pages visually Validation type Format None No particular format required. Integer Text field accepts numbers only. Email Address Text field accepts e-mail addresses that contain @ and a period (.) that is both preceded and followed by at least one letter. Date Formats vary. Make your selection from the Format pop-up menu of the Property inspector. Time Formats vary. Make your selection from the Format pop-up menu of the Property inspector.
422 USING DREAMWEAVER Building Spry pages visually Specify minimum and maximum values This option is only available for Integer, Time, Currency, and Real Number/Scientific Notation validation types. 1 Select a Validation Text Field widget in the Document window. 2 In the Property inspector (Window > Properties), enter a number in the Min Value or Max Value box.
423 USING DREAMWEAVER Building Spry pages visually Although you can easily edit rules for the Validation Text Field widget directly in the accompanying CSS file, you can also use the CSS Styles panel to edit the widget’s CSS. The CSS Styles panel is helpful for locating the CSS classes assigned to different parts of the widget, especially if you use the panel’s Current mode.
424 USING DREAMWEAVER Building Spry pages visually A B C D E A. Characters remaining counter B. Text Area widget in focus, maximum number of characters state C. Text Area widget in focus, valid state D. Text Area widget, required state E. Characters typed counter The Validation Text Area widget includes a number of states (for example, valid, invalid, required value, and so on). You can alter the properties of these states using the Property inspector, depending on the desired validation results.
425 USING DREAMWEAVER Building Spry pages visually 2 Complete the Input Tag Accessibility Attributes dialog box and click OK. Note: You can also insert a Validation Text Area widget by using the Spry category in the Insert panel. More Help topics “Create accessible HTML forms” on page 638 Specify when validation occurs You can set the point at which validation occurs—when the user clicks outside the widget, as the user types, or when the user tries to submit the form.
426 USING DREAMWEAVER Building Spry pages visually Create a hint for a text area You can add a hint to the text area (for example, “Type your description here”), to let your users know the kind of information they should enter in the text area. The text area displays the hint text when the user loads the page in a browser. 1 Select a Validation Text Area widget in the Document window. 2 In the Property inspector (Window > Properties), enter a hint in the Hint text box.
427 USING DREAMWEAVER Building Spry pages visually Background color to change Relevant CSS rule Relevant property to change Background color of widget in valid state .textareaValidState textarea, textarea.textareaValidState background-color: #B8F5B1; Background color of widget in invalid state textarea.textareaRequiredState, .textareaRequiredState textarea, textarea.textareaMinCharsState, .textareaMinCharsState textarea, textarea.textareaMaxCharsState, .
428 USING DREAMWEAVER Building Spry pages visually Whenever a Validation Select widget enters one of the above states through user interaction, the Spry framework logic applies a specific CSS class to the HTML container for the widget at run time. For example, if a user tries to submit a form, but has not selected an item from the menu, Spry applies a class to the widget so that it displays the error message, “Please select an item.
429 USING DREAMWEAVER Building Spry pages visually Prohibit or allow blank values By default, all Validation Select widgets that you insert with Dreamweaver require that users select menu items that have an associated value when the widget is published on a web page. You can, however, disable this option. 1 Select a Validation Select widget in the Document window. 2 In the Property inspector (Window > Properties), select or deselect the Do Not Allow Blank Values option, depending on your preference.
430 USING DREAMWEAVER Building Spry pages visually Background color to change Relevant CSS rule Relevant property to change Background color of widget in valid state .selectValidState select, select.selectValidState background-color: #B8F5B1; Background color of widget in invalid state select.selectRequiredState, .selectRequiredState select, select.selectInvalidState, .selectInvalidState select background-color: #FF9F9F; Background color of widget in focus .selectFocusState select, select.
431 USING DREAMWEAVER Building Spry pages visually Whenever a Validation Checkbox widget enters one of these states through user interaction, the Spry framework logic applies a specific CSS class to the HTML container for the widget at run time. For example, if a user tries to submit a form, but has made no selections, Spry applies a class to the widget that causes it to display the error message, “Please make a selection.
432 USING DREAMWEAVER Building Spry pages visually Display widget states in Design view 1 Select a Validation Checkbox widget in the Document window. 2 In the Property inspector (Window > Properties), select the state you want to see from the Preview States pop-up menu. For example, select Initial to see the widget in its initial state.
433 USING DREAMWEAVER Building Spry pages visually A B C A. Password widget, minimum number of characters state B. Password widget, maximum number of characters state C. Password widget, required state The Validation Password widget includes a number of states (for example, valid, required, minimum number of characters, and so on). You can alter the properties of these states by editing the corresponding CSS file (SpryValidationPassword.css), depending on the desired validation results.
434 USING DREAMWEAVER Building Spry pages visually Change required status of a Validation Password widget By default, all Validation Password widgets that you insert with Dreamweaver require user input when published on a web page. You can, however, make the completion of password text fields optional for the user. 1 Select a Validation Password widget in the Document window by clicking its blue tab.
435 USING DREAMWEAVER Building Spry pages visually Minimum/Maximum special characters Specifies the minimum and maximum number of special characters (!, @, #, and so on) required for the password to be valid. Leaving any of the above options blank causes the widget not to validate against that criterion. For example, if you leave the Minimum/Maximum numbers option blank, the widget does not look for numbers in the password string.
436 USING DREAMWEAVER Building Spry pages visually Change Validation Password widget background colors ❖ To change the background colors of the Validation Password widget in various states, use the following table to locate the appropriate CSS rule, and then change the default background color values. Color to change Relevant CSS rule Relevant property to change Background color of widget in valid state .passwordValidState input, input.
437 USING DREAMWEAVER Building Spry pages visually Valid state When the user enters information correctly, and the form can be submitted. Invalid state When the user enters text that does not match the text entered in a previous text field, Validation Text Field widget, or Validation Password widget. Required state When the user fails to enter required text in the text field.
438 USING DREAMWEAVER Building Spry pages visually 2 In the Property inspector (Window > Properties), select the option that indicates when you want validation to occur. You can select all of the options or Submit only. Blur Validates whenever the user clicks outside the confirm text field. Change Validates as the user changes text inside the confirm text field. Submit Validates when the user tries to submit the form. The submit option is selected by default, and cannot be deselected.
439 USING DREAMWEAVER Building Spry pages visually Color to change Relevant CSS rule Relevant property to change Background color of widget in valid state .confirmValidState input, input.confirmValidState background-color: #B8F5B1; Background color of widget in invalid state input.confirmRequiredState, .confirmRequiredState input, input.confirmInvalidState, .confirmInvalidState input background-color: #FF9F9F; Background color of widget in focus .confirmFocusState input, input.
440 USING DREAMWEAVER Building Spry pages visually Dreamweaver renders the HTML data source in the Data Selection window, and displays visual markers for the elements that are eligible as containers for the data set. The element you want to use must already have a unique ID assigned to it. If it doesn’t, Dreamweaver will display an error message, and you’ll need to go back to the data source file and assign a unique ID.
441 USING DREAMWEAVER Building Spry pages visually 4 In the Set Data Options screen, do the following: • (Optional) Set data set column types by selecting a column, and choosing a column type from the Type pop-up menu. For example, if a column in the data set contains numbers, select the column and choose number from the Type pop-up menu. This option is only important if you want your user to be able to sort the data by that column.
442 USING DREAMWEAVER Building Spry pages visually • Specify a name for the new data set. The default name is ds1 the first time you create a data set. The data set name can contain letters, numbers, and underscores, but cannot start with a number. • Specify the path to the file that contains your XML data source. The path can be a relative path to a local file in your site (for example, datafiles/data.xml), or an absolute URL to a page on the web (using HTTP or HTTPS).
443 USING DREAMWEAVER Building Spry pages visually 4 In the Set Data Options screen, do the following: • (Optional) Set data set column types by selecting a column, and choosing a column type from the Type pop-up menu. For example, if a column in the data set contains numbers, select the column and choose number from the Type pop-up menu. This option is only important if you want your user to be able to sort the data by that column.
444 USING DREAMWEAVER Building Spry pages visually • Select a column name and click the up or down arrows to move the column. Moving a column up moves it further left in the displayed table; moving a column down moves it to the right. 2 To make a column sortable, select the column in the Columns panel and select Sort Column When Header Is Clicked. By default, all columns are sortable.
445 USING DREAMWEAVER Building Spry pages visually 3 (Optional) Set different container types for data in the detail region. To do so, select the name of a detail column, and select the container you want to use for it from the Container Type pop-up menu. You can choose from DIV, P, SPAN, or H1-H6 tags. 4 Click OK to close the dialog box and then click Done in the Choose Insert Options screen.
446 USING DREAMWEAVER Building Spry pages visually 3 Repeat the above steps for the Stacked Columns panel. By default Dreamweaver populates the stacked columns with all of the data that is not in the spotlight area (that is, all columns except for the first column in the data set). 4 Click OK to close the dialog box and then click Done in the Choose Insert Options screen.
447 USING DREAMWEAVER Building Spry pages visually About dynamic Spry master tables and updating detail regions One of the most common uses of Spry data sets is to create one or more HTML tables that dynamically update other page data in response to a user action. For example, if a user selects a product from a list of products in a table, the data set can immediately update data elsewhere on the page with detailed information about the selected product.
448 USING DREAMWEAVER Building Spry pages visually 4 Choose your Spry data set from the menu. 5 If you want to create or change the region defined for an object, select the object and choose one of the following: Wrap Selection Puts a new region around an object. Replace Selection Replaces an existing region for an object. 6 When you click OK, Dreamweaver puts a region placeholder into your page with the text “Content for Spry Region Goes Here.
449 USING DREAMWEAVER Building Spry pages visually If you want more flexibility, you may want to use the Repeat Children option where data validation is done for each line in a list at the child level. For instance, if you have a
list, the data is checked at the - level. If you choose the Repeat option, the data is checked at the
level. The Repeat Children option may be especially useful if you use conditional expressions in your code. 4 Choose your Spry data set from the menu.
-
450 USING DREAMWEAVER Building Spry pages visually You can also click the Spry Repeat List button in the Spry category in the Insert panel. 2 Select the container tag you want to use: UL, OL, DL, or SELECT. The other options vary depending on which container you choose. If you choose SELECT, you must define the following fields: • Display Column: This is what users see when they view the page in their browsers. • Value Column: This is the actual value sent to the background server.
-
451 USING DREAMWEAVER Building Spry pages visually Important: When you use an effect, various lines of code are added to your file in the Code view. One line identifies the SpryEffects.js file, which is necessary to include the effects. Do not remove this line from your code or the effects will not work. For a comprehensive overview of the Spry effects available in the Spry framework, visit www.adobe.com/go/learn_dw_spryeffects.
-
452 USING DREAMWEAVER Building Spry pages visually 3 Select the element’s ID from the target element pop-up menu. If you have already selected an element, choose . 4 In the Effect Duration field, define the time it takes for the effect to occur, in milliseconds. 5 Select the effect you want to apply: Grow or Shrink. 6 In the Grow/Shrink From box, define the element’s size when the effect starts. This is a percentage of the size or a pixel value.
-
453 USING DREAMWEAVER Building Spry pages visually The target element tag must be one of the following: blockquote, dd,div, form, center, table, span, input, textarea, select, or image. 1 (Optional) Select the container tag of the content you want to apply the effect to. 2 In the Behaviors panel (Window > Behaviors), click the Plus (+) button and select Effects > Slide from the menu. 3 Select the container tag’s ID from the target element menu.
-
454 Chapter 16: Designing for multiple screens and devices Creating media queries (CS5.5 and later) You can use media queries to specify CSS files based on the reported characteristics of a device. The browser on a device checks the media query and uses the corresponding CSS file to display the web page. For example, the following media query specifies the phone.css file for devices that are 300-320 pixels wide. PAGE 462
455 USING DREAMWEAVER Designing for multiple screens and devices • Click Default Presets if you want to begin with standard presets. 7 Select rows in the table, and edit their properties using the options under Properties. Description The description of the device for which the CSS file must be used. For example, phone, TV, tablet, and so on. Min Width and Max width The CSS file is used for devices whose reported width is within the specified values.
-
456 USING DREAMWEAVER Designing for multiple screens and devices Note: Changing the site-wide media queries file does not affect documents linked to a different or previous site-wide media query file. 6 Click Save. Viewing web pages based on media query Dimensions specified in a media query appear in the options for Multiscreen button/window size. When you select a dimension from the menu, the following changes are seen: • The view size changes to reflect the specified dimensions.
-
457 USING DREAMWEAVER Designing for multiple screens and devices 2. Insert jQuery Mobile components from the Insert panel Insert jQuery Mobile components from the Insert panel into the HTML page. The jQuery Mobile CSS and JavaScript files define the style and behavior of the components. About CDNs and local jQuery Mobile files CDNs A CDN (content delivery network) is a computer network containing copies of data placed at various points in the network.
-
458 USING DREAMWEAVER Designing for multiple screens and devices 5 In Design view, place the cursor at the location where you want to insert the component, and click the component in the Insert Panel. In the dialog box that appears, customize the components using the options. 6 (jQuery Mobile - Local) After you save the HTML file, the jQuery Mobile files, including image files, are copied to a folder in the HTML file location. Preview the page in Live view.
-
459 USING DREAMWEAVER Designing for multiple screens and devices Packaging web applications IMPORTANT CHANGE TO PACKAGING WEB APPS WORKFLOW Please note that as of March 2012, there has been an update to the Dreamweaver-PhoneGap integration workflow. Adobe strongly recommends that all CS5.5 users download the PhoneGap Build extension for Dreamweaver CS5.5, which replaces the current application packaging functionality described below. Packaging web applications as native mobile applications (CS5.
-
460 USING DREAMWEAVER Designing for multiple screens and devices System requirements for packaging applications You must ensure that you meet the following system requirements before you can proceed with packaging an application. MAC OS - iOS • Mac OS X Snow Leopard version 10.6.x or later • Xcode 3.2.x with the iOS SDK (Install instructions below.) MAC OS - Android • Mac OS X 10.5.8 or later (x86 only) • Android SDK (Install instructions below.
-
461 USING DREAMWEAVER Designing for multiple screens and devices 9 Do one of the following: • If you are directly deploying your application to a device, select Site > Mobile Applications > Build. Select a platform/device for the build. • If you want to see how the build looks on an emulator before you build it, select Site > Mobile Applications > Emulate and Build.
-
462 USING DREAMWEAVER Designing for multiple screens and devices More Help topics Packaging web applications tutorial Preview pages using the Multiscreen Preview panel Multiscreen preview in Dreamweaver provides a preview of the page that you are currently editing as it would appear on devices supporting different screen resolutions. To open the Multiscreen Preview panel,select File > Multiscreen preview.
-
463 USING DREAMWEAVER Designing for multiple screens and devices Navigate among pages in the Multiscreen Preview panel. Navigate within the Multiscreen Preview panel to navigate away from the original file. Dreamweaver updates all three panes as you navigate within the Multiscreen Preview panel. If you switch between different top-level tabs in Dreamweaver, click the Refresh button in the Multiscreen Preview panel to render the currently selected file.
-
464 Chapter 17: Using Adobe Online Services Using Dreamweaver with Adobe Online services Adobe online services are hosted web applications that work similarly to traditional desktop tools. The advantage of online services, however, is that they are always up to date because they are hosted on the web, as opposed to on your computer. Dreamweaver integrates directly with Adobe® BrowserLab and Adobe® Business Catalyst InContext Editing.
-
465 USING DREAMWEAVER Using Adobe Online Services Note: Adobe AIR does not support Adobe Business Catalyst InContext Editing. If you use the AIR Extension for Dreamweaver to export an application that contains InContext Editing regions, the InContext Editing functionality will not work. Create an InContext Editing editable region An InContext Editing editable region is a pair of HTML tags that includes the ice:editable attribute in the opening tag.
-
466 USING DREAMWEAVER Using Adobe Online Services Note: If you are working in a Dreamweaver template, be sure to select the InContext Editing editable region (the container region), and not the Dreamweaver template editable region. 5 Select or deselect options in the Editable Regions Property inspector. The options you select will be available to a user when they edit the contents of the editable region in a browser.
-
467 USING DREAMWEAVER Using Adobe Online Services Note: When creating a repeating region from a table row (tr tag), Dreamweaver applies the repeating regions group attribute to the parent tag (for example, the table tag), and does not insert a div tag.
-
468 USING DREAMWEAVER Using Adobe Online Services • Select Transform the Parent Tag Into a Repeating Region if you want Dreamweaver to make the parent tag of the selection the container element for the repeating region.
-
469 USING DREAMWEAVER Using Adobe Online Services Editable Regions should not contain Repeating Regions or Repeating Regions Groups InContext Editing editable regions cannot contain any other InContext Editing functionality. If you try to add a repeating region or a repeating regions group to an editable region, Dreamweaver does not allow you to perform the transformation.
-
470 Chapter 18: Displaying XML data with XSLT About XML and XSLT Using XML and XSL with web pages Extensible Markup Language (XML) is a language that lets you structure information. Like HTML, XML lets you structure your information using tags, but XML tags are not predefined as HTML tags are. Instead, XML lets you create tags that best define your data structure (schema). Tags are nested within others to create a schema of parent and child tags.
-
471 USING DREAMWEAVER Displaying XML data with XSLT The approach you ultimately take (server-side transformations versus client-side transformations) depends on what you are trying to achieve as an end result, the technologies available to you, the level of access you have to XML source files, and other factors. Both approaches have their own benefits and limitations.
-
472 USING DREAMWEAVER Displaying XML data with XSLT WEB SERVER 6
data Application server 5 4 3 XML Web browser 1 2 1. Browser requests dynamic page 2. Web server finds page and passes it to application server 3. Application server scans page for instructions and gets XSLT fragment 4. Application server performs transformation (reads XSLT fragment, gets and formats xml data) 5.
-
473 USING DREAMWEAVER Displaying XML data with XSLT First, create an entire XSLT page and attach an XML data source. (Dreamweaver prompts you to attach the data source when you create the new page.) You can create an XSLT page from scratch, or you can convert an existing HTML page to an XSLT page. When you convert an existing HTML page to an XSLT page you must attach an XML data source using the Bindings panel (Window > Bindings).
-
474 USING DREAMWEAVER Displaying XML data with XSLT If 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 out on the web), the workflow is a bit more complicated. To perform client-side transformations using XML data from an external source, you must first download the XML source file to the same directory where your XSLT page resides.
-
475 USING DREAMWEAVER Displaying XML data with XSLT The following example shows how the Repeating Region XSLT object is applied to a table row that displays menu information for a restaurant. The initial row displays three different elements from the XML schema: item, description, and price. When the Repeating Region XSLT object is applied to the table row, and the page is processed by an application server or a browser, the table is repeated with unique data inserted in each new table row.
-
476 USING DREAMWEAVER Displaying XML data with XSLT The following code is for the same table with the Repeating Region XSLT object applied to it: In the previous example, Dreamweaver has updated the XPath for the items that fall within the Repeating Region (title & description) to be relative to the XPa
-
477 USING DREAMWEAVER Displaying XML data with XSLT Previewing pages for client-side transformations In the case of client-side transformations, the content the site visitor ultimately sees is transformed by a browser. You accomplish this by adding a link from the XML file to the XSLT page. If you open the XML file in Dreamweaver and preview it in a browser, you force the browser to load the XML file and perform the transformation. This provides you with the same experience as that of your site visitor.
-
478 USING DREAMWEAVER Displaying XML data with XSLT 5. Attach an XML data source to the page. 6. Display XML data by binding the data to the XSLT fragment or to the entire XSLT page. 7. If appropriate, add a Repeating Region XSLT object to the table or table row that contains the XML data placeholders. 8. Insert references. • To insert a reference to the XSLT fragment in your dynamic page, use the XSL Transformation server behavior.
-
479 USING DREAMWEAVER Displaying XML data with XSLT Note: Clicking the Cancel button generates a new XSLT page with no attached XML data source. The Bindings panel is populated with the schema of your XML data source.
-
480 USING DREAMWEAVER Displaying XML data with XSLT Note: 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 of the following: • Select Attach A Local File, click the Browse button, browse to a local XML file on your computer, and click OK. • Select Attach A Remote File, and enter the URL of an XML file on the Internet (such as one coming from an RSS feed). 3 Click OK to close the Locate XML Source dialog box.
-
481 USING DREAMWEAVER Displaying XML data with XSLT 4 (Optional) Apply styles to your XML data by selecting an XML data placeholder and applying styles to it like any other piece of content using the Property inspector or the CSS Styles panel. Alternatively, you can use Design-time style sheets to apply styles to XSLT fragments. Each of these methods has its own set of benefits and limitations. 5 Preview your work in a browser (File > Preview in Browser).
-
482 USING DREAMWEAVER Displaying XML data with XSLT 3 In the XPath Expression Builder, select the repeating element, indicated by a small plus sign. 4 Click OK. In the Document window, a thin, tabbed, gray outline appears around the repeated region. When you preview your work in a browser (File > Preview in Browser), the gray outline disappears and the selection expands to display the specified repeating elements in the XML file.
-
483 USING DREAMWEAVER Displaying XML data with XSLT Insert XSLT fragments in dynamic pages After you have created an XSLT fragment, you can insert it in a dynamic web page using the XSL Transformation server behavior. When you add the server behavior to your page and view the page in a browser, an application server performs a transformation that displays the XML data from the selected XSLT fragment. Dreamweaver supports XSL transformations for ColdFusion, ASP, or PHP pages.
-
484 USING DREAMWEAVER Displaying XML data with XSLT 7 Upload the dynamic page to your server (Site > Put) and click Yes to include dependent files. The file containing the XSLT fragment, the XML file containing your data, and the generated run-time library file must all be on the server for your page to display correctly. (If you selected a remote XML file as your data source, that file must reside somewhere else on the Internet.
-
485 USING DREAMWEAVER Displaying XML data with XSLT For example, you might want to create an XSLT fragment for insertion in a dynamic page and format the fragment using the same external style sheet as the dynamic page. If you attach the same style sheet to the fragment, the resulting HTML page contains a duplicate link to the style sheet (one in the
section of the dynamic page, and another in the section of the page, where the content of the XSLT fragment appears).
-
486 USING DREAMWEAVER Displaying XML data with XSLT 3 In the Add Parameters dialog box, enter a name for the parameter in the Name box. The name can only contain alphanumeric characters. It cannot contain spaces. 4 Do one of the following: • If you want to use a static value, enter it in the Value box. • If you want to use a dynamic value, click the dynamic icon next to the Value box, complete the Dynamic Data dialog box, and click OK.
-
487 USING DREAMWEAVER Displaying XML data with XSLT 2 In the Conditional Region dialog box, enter the conditional expression to use for the region. In the following example, you want to test to see if the context node’s @available attribute value is true. 3 Click OK. The following code is inserted in your XSLT page: Content goes here Note: You must surround string values such as true in quotes.
-
488 USING DREAMWEAVER Displaying XML data with XSLT In the following example, you want to test to see if the context node’s price subelement is less than 5. 3 Click OK.
-
489 USING DREAMWEAVER Displaying XML data with XSLT You can also click on the XSL Comment icon in the XSLT category of the Insert panel. Wrap a selection in XSL comment tags 1 Switch to Code view (View > Code). 2 Select the code you want to comment. 3 In the Coding toolbar, click the Apply Comment button and select Apply Comment.
-
490 USING DREAMWEAVER Displaying XML data with XSLT In the following example, you want to display the price subelement of the item node: This selection would insert the following code in your XSLT page: 3 (Optional) Select a formatting option from the Format pop-up menu. Formatting a selection is useful when the value of your node returns a number. Dreamweaver provides a predefined list of formatting functions.
-
491 USING DREAMWEAVER Displaying XML data with XSLT 5 To display the value of each node in the XML file, apply a repeating region to the element containing the dynamic text (for example, an HTML table row or a paragraph). For more information and examples on selecting nodes to return a value, see the section in the Reference panel. Select a node to repeat You can select a node to repeat over and, optionally, to filter the results.
-
492 USING DREAMWEAVER Displaying XML data with XSLT 4 Enter the filter criteria in the following fields: Filter By Specifies the repeating node that contains the data you want to filter by. The pop-up menu provides a list of ancestor nodes relative to the node you selected in the XML schema tree. Where Specifies the attribute or subelement of the Filter By node that will be used to limit the results.
-
493 USING DREAMWEAVER Displaying XML data with XSLT You can create more complex filters that allow you to specify parent nodes as part of your filter criteria. In the following example, you want to restrict the result set to those item nodes where the store’s @id attribute is equal to 1 and the item’s price node is greater than 5.
-
494 USING DREAMWEAVER Displaying XML data with XSLT 3. Attach an XML data source to the page (if you haven’t already done so). The XML file that you attach must reside in the same directory as the XSLT page. 4. Bind your XML data to the XSLT page. 5. Display XML data by binding the data to the entire XSLT page. 6. If appropriate, add a Repeating Region XSLT object to the table or table row that contains the XML data placeholder(s). 7. Attach the XSLT page to the XML page. 8.
-
495 USING DREAMWEAVER Displaying XML data with XSLT Link an XSLT page to an XML page After you have an entire XSLT page with dynamic content placeholders for your XML data, you must insert a reference to the XSLT page in the XML page. Note: The XML and XSL files you use for client-side transformations must reside in the same directory.
-
496 USING DREAMWEAVER Displaying XML data with XSLT Reference to undefined entity 'auml'. Error processing resource 'http://localhost/testthis/list.xsl'. Line 28, Position 20
ä
-------------------^ To correct the error in your page, you must add the entity definition to your page manually. Specify a missing entity definition 1 Look up the missing character in the character entity reference page on the W3C website at www.w3.org/TR/REC- html40/sgml/entities.html.
-
497 Chapter 19: Preparing to build dynamic sites Before you begin building dynamic web pages, there are a few preparations that must be done, including setting up a web application server and connecting to a database for Coldfusion, ASP, and PHP applications. Adobe® Dreamweaver® CS5 handles database connections differently depending on your server technology.
-
498 USING DREAMWEAVER Preparing to build dynamic sites Chris’s problem is that the fitness program has grown too successful. So many employees now participate that Chris is inundated with e-mails at the end of each month. Chris asks Janet if a web-based solution exists.
-
499 USING DREAMWEAVER Preparing to build dynamic sites 3 WEB SERVER Response
H1 Web browser 2 Request 1 1. Web browser requests static page. 2. Web server finds page. 3. Web server sends page to requesting browser. In the case of web applications, certain lines of code are undetermined when the visitor requests the page. These lines must be determined by some mechanism before the page can be sent to the browser. The mechanism is discussed in the following section.
-
500 USING DREAMWEAVER Preparing to build dynamic sites Accessing a database An application server lets you work with server-side resources such as databases. For example, a dynamic page may instruct the application server to extract data from a database and insert it into the page’s HTML. For more information, see www.adobe.com/go/learn_dw_dbguide. Using a database to store content allows you to separate your website’s design from the content you want to display to site users.
-
501 USING DREAMWEAVER Preparing to build dynamic sites WEB SERVER 9 Response 8 7 6
data Recordset Application server Database driver Database Web browser Request 1 Query 4 2 5 3 1. Web browser requests dynamic page. 2. Web server finds page and passes it to application server. 3. Application server scans page for instructions. 4. Application server sends query to database driver. 5. Driver executes the query against the database. 6.
-
502 USING DREAMWEAVER Preparing to build dynamic sites
Trio Motors Information Page About Trio Motors
Trio Motors is a leading automobile manufacturer.
Be sure to visit our #department# page.
-
503 USING DREAMWEAVER Preparing to build dynamic sites More Help topics “Choosing an application server” on page 506 Web application terminology This section defines frequently used terms relating to web applications. An application server Software that helps a web server process web pages containing server-side scripts or tags. When such a page is requested from the server, the web server hands the page off to the application server for processing before sending the page to the browser.
-
504 USING DREAMWEAVER Preparing to build dynamic sites A relational database A database containing more than one table, with the tables sharing data. The following database is relational because two tables share the DepartmentID column. A server technology The technology that an application server uses to modify dynamic pages at runtime.
-
505 USING DREAMWEAVER Preparing to build dynamic sites Several web hosting companies offer plans that let you use their software to test and deploy web applications. In some cases, you can install the required software on the same computer as Dreamweaver for development purposes. You can also install the software on a network computer (typically a Windows 2000 or XP computer) so that other developers on your team can work on a project.
-
506 USING DREAMWEAVER Preparing to build dynamic sites Note: .Another expression you can use instead of the server name or localhost is 127.0.0.1 (for example, http://127.0.0.1/gamelan/soleil.html).
-
507 USING DREAMWEAVER Preparing to build dynamic sites Choosing a database Databases come in many forms depending upon the amount and the complexity of the data they must store. When choosing a database, you should consider several factors, including your budget and the number of users you anticipate will access the database. Budget Some vendors produce high-end application database servers that are expensive to buy and administer.
-
508 USING DREAMWEAVER Preparing to build dynamic sites Creating a root folder for the application After signing up with a web hosting company or setting up the server software yourself, create a root folder for your web application on the computer running the web server. The root folder can be local or remote, depending on where your web server is running. The web server can serve any file in this folder or in any of its subfolders in response to an HTTP request from a web browser.
-
509 USING DREAMWEAVER Preparing to build dynamic sites About defining a Dreamweaver site After configuring your system to develop web applications, define a Dreamweaver site to manage your files. Before you start, make sure you meet the following requirements: • You have access to a web server. The web server can be running on your local computer, on a remote computer such as a development server, or on a server maintained by a web hosting company.
-
510 USING DREAMWEAVER Preparing to build dynamic sites Create or modify a ColdFusion data source Before you can use database information in your page, you must create a ColdFusion data source. If you’re running ColdFusion MX 7 or later, you can create or modify the data source directly in Dreamweaver. If you’re running ColdFusion MX, you must use the server’s management console, ColdFusion MX Administrator, to create or modify the data source.
-
511 USING DREAMWEAVER Preparing to build dynamic sites Database connections for ASP developers About ASP database connections An ASP application must connect to a database through an open database connectivity (ODBC) driver or an object linking and embedding database (OLE DB) provider. The driver or provider acts as an interpreter that lets the web application communicate with the database.
-
512 USING DREAMWEAVER Preparing to build dynamic sites You can download OLE DB providers for Oracle databases from the Oracle website at www.oracle.com/technology/software/tech/windows/ole_db/index.html (registration is required). In Dreamweaver, you create an OLE DB connection by including a Provider parameter in a connection string. For example, here are parameters for common OLE DB providers for Access, SQL Server, and Oracle databases, respectively: Provider=Microsoft.Jet.OLEDB.4.0;...
-
513 USING DREAMWEAVER Preparing to build dynamic sites Here’s an example of a connection string that will create an OLE DB connection to a SQL Server database called Mothra located on a server called Gojira: Provider=SQLOLEDB;Server=Gojira;Database=Mothra;UID=jsmith; PWD=orlando8 Create a connection using a local DSN Note: This section assumes you have set up an ASP application. It also assumes a database is set up on your local computer or on a system to which you have network or FTP access.
-
514 USING DREAMWEAVER Preparing to build dynamic sites Create a connection using a remote DSN Note: This section assumes you have set up an ASP application. It also assumes a database is set up on your local computer or on a system to which you have network or FTP access. Note: Dreamweaver can retrieve only server DSNs created with the Windows ODBC Data Source Administrator. You can use a DSN defined on a remote computer to create a database connection in Dreamweaver.
-
515 USING DREAMWEAVER Preparing to build dynamic sites 3 Enter a name for the new connection without spaces or special characters. 4 Enter a connection string to the database. If you do not specify an OLE DB provider in the connection string—that is, if you don’t include a Provider parameter—ASP will automatically use the OLE DB provider for ODBC drivers. In that case, you must specify an appropriate ODBC driver for your database.
-
516 USING DREAMWEAVER Preparing to build dynamic sites Find a file’s physical path with the virtual path If you work with an ISP, you don’t always know the physical path to the files you upload. ISPs typically provide you with an FTP host, possibly a host directory, and a login name and password. ISPs also specify a URL to view your pages on the Internet, such as www.plutoserve.com/jsmith/.
-
517 USING DREAMWEAVER Preparing to build dynamic sites "Driver={Microsoft Access Driver (*.mdb)};DBQ=" & Server.MapPath¬ ("/jsmith/data/statistics.mdb") The ampersand (&) is used to concatenate (combine) two strings. The first string is enclosed in quotation marks and the second is returned by the Server.MapPath expression. When the two strings are combined, the following string is created: Driver={Microsoft Access Driver (*.mdb)}; DBQ=C:\Inetpub\wwwroot\accounts\users\jsmith\data\statistics.
-
518 USING DREAMWEAVER Preparing to build dynamic sites Database connections for PHP developers About PHP database connections For PHP development, Dreamweaver only supports the MySQL database system. Other database systems such as Microsoft Access or Oracle are not supported. MySQL is open-source software you can download for free from the Internet for non-commercial use. For more information, see the MySQL website at http://dev.mysql.com/downloads/. This section assumes you have set up a PHP application.
-
519 USING DREAMWEAVER Preparing to build dynamic sites Edit a connection 1 Open a PHP page in Dreamweaver, and then open the Databases panel (Window > Databases). 2 Right-click (Windows) or Control-click (Macintosh) the connection and select Edit Connection from the menu. 3 Edit the connection information and click OK. Dreamweaver updates the include file, which updates all the pages in the site that use the connection.
-
520 USING DREAMWEAVER Preparing to build dynamic sites 4 If the IUSR_computername account is not listed in the Group or User Names list, click the Add button to add it. 5 In the Select Users or Groups dialog box, click Advanced. The dialog box changes to show more options. 6 Click Locations and select the computer’s name. 7 Click Find Now to display a list of account names associated with the computer. 8 Select the IUSR_computername account and click OK; then click OK again to clear the dialog box.
-
521 USING DREAMWEAVER Preparing to build dynamic sites [Reference]80004005—Data source name not found and no default driver specified This error occurs when you attempt to view a dynamic page in a web browser or in Live view. The error message may vary depending on your database and web server.
-
522 USING DREAMWEAVER Preparing to build dynamic sites This error is generated by SQL Server if it doesn’t accept or recognize the logon account or password being submitted (if you’re using standard security), or if a Windows account does not map to a SQL account (if you’re using integrated security). Here are possible solutions: • If you use standard security, the account name and password might be incorrect.
-
523 USING DREAMWEAVER Preparing to build dynamic sites You might be trying to insert a record into a database field that has a question mark (?) in its field name. The question mark is a special character for some database engines, including Microsoft Access, and should not be used for database table names or field names. Open your database system and delete the question mark (?) from the field names, and update the server behaviors on your page that refer to this field.
-
524 USING DREAMWEAVER Preparing to build dynamic sites 2 In the Server Behaviors panel, click the Plus (+) button and select Show Region > Show Region If Recordset Is Not Empty. 3 Select the recordset supplying the dynamic content and click OK. 4 Repeat steps 1 to 3 for each element of dynamic content on the page. Troubleshooting MySQL error messages One common error message that you might encounter when testing a PHP database connection to MySQL 4.
-
525 Chapter 20: Making pages dynamic You can create dynamic pages that display information from dynamic content sources such as databases and session variables. Adobe® Dreamweaver® CS5 supports dynamic page development for ColdFusion, ASP, and PHP server models. You can also use an Ajax-based framework called Spry to create dynamic pages that display and process XML data. Using prebuilt Spry form elements lets you build dynamic pages that don’t require a full-page refresh.
-
526 USING DREAMWEAVER Making pages dynamic “Databases panel” on page 535 “Components panel” on page 535 Development workspace tutorial View your database within Dreamweaver After connecting to your database, you can view its structure and data within Dreamweaver. 1 Open the Databases panel (Window > Databases). The Databases panel displays all the databases for which you created connections.
-
527 USING DREAMWEAVER Making pages dynamic Restrict database information displayed in Dreamweaver Advanced users of large database systems like Oracle should restrict the number of database items retrieved and displayed by Dreamweaver at design time. An Oracle database may contain items that Dreamweaver cannot process at design time. You can create a schema in Oracle and use it in Dreamweaver to filter out unnecessary items at design time. Note: You cannot create a schema or catalog in Microsoft Access.
-
528 USING DREAMWEAVER Making pages dynamic Designing dynamic pages Dreamweaver and dynamic page design Follow these general steps to successfully design and create a dynamic website. 1 Design the page. A key step in designing any website—whether static or dynamic—is the visual design of the page. When adding dynamic elements to a web page, the design of the page becomes crucial to its usability. You should carefully consider how users will interact with both individual pages and the website as a whole.
-
529 USING DREAMWEAVER Making pages dynamic Dreamweaver provides a point-and-click interface that makes applying dynamic content and complex behaviors to a page as easy as inserting textual and design elements. The following server behaviors are available: • Define a recordset from an existing database. The recordset you define is then stored in the Bindings panel. • Display multiple records on a single page.
-
530 USING DREAMWEAVER Making pages dynamic Dynamic websites require a data source from which to retrieve and display dynamic content. Dreamweaver lets you use databases, request variables, URL variables, server variables, form variables, stored procedures, and other sources of dynamic content. Depending on the data source, you can either retrieve new content to satisfy a request, or modify the page to meet the needs of users.
-
531 USING DREAMWEAVER Making pages dynamic More Help topics “URL parameters” on page 624 “Define form parameters” on page 543 About session variables Session variables let you store and display information maintained for the duration of a user’s visit (or session). The server creates a different session object for each user and maintains it for a set period of time or until the object is explicitly terminated.
-
532 USING DREAMWEAVER Making pages dynamic A form-based survey is a typical example of a page that stores form parameters in session variables. The form sends the selected information back to the server, where an application page scores the survey and stores the responses in a session variable to be passed to an application that might tally up the responses gathered from the survey population. Or the information might be stored in a database for later use.
-
533 USING DREAMWEAVER Making pages dynamic Example of information stored in session variables You’re working on a site with a large audience of senior citizens. In Dreamweaver, add two links to the Welcome screen that let users customize the size of the site’s text. For larger, easy-to-read text, the user clicks one link, and for regularsize text, the user clicks another link.
-
534 USING DREAMWEAVER Making pages dynamic ASP server variables You can define the following ASP server variables as sources of dynamic content: Request.Cookie, Request.QueryString, Request.Form, Request.ServerVariables, and Request.ClientCertificates. More Help topics “Define server variables” on page 545 ColdFusion server variables You can define the following ColdFusion server variables: Client variables Associate data with a specific client.
-
535 USING DREAMWEAVER Making pages dynamic • “Cache content sources” on page 548 • “Copy a recordset from one page to another page” on page 549 • “Make HTML attributes dynamic” on page 551 Server Behaviors panel Use the Server Behavior panel to add Dreamweaver server behaviors to a page, edit server behaviors, and create server behaviors.
-
536 USING DREAMWEAVER Making pages dynamic Defining sources of dynamic content Define a recordset without writing SQL You can create a recordset without manually entering SQL statements. 1 In the Document window, open the page that will use the recordset. 2 Select Windows > Bindings to display the Bindings panel. 3 In the Bindings panel, click the Plus (+) button and select Recordset (Query) from the pop-up menu. The simple Recordset dialog box appears.
-
537 USING DREAMWEAVER Making pages dynamic 7 Click Test to connect to the database and create an instance of the data source, and click OK to close the data source. A table appears displaying the returned data. Each row contains a record and each column represents a field in that record. 8 Click OK. The newly defined recordset appears in the Bindings panel.
-
538 USING DREAMWEAVER Making pages dynamic A table appears displaying the returned data. Each row contains a record and each column represents a field in that record. Click OK to close the test recordset. 10 Click OK. The newly defined ColdFusion recordset appears in the Bindings panel. Define an advanced recordset by writing SQL Write your own SQL statements by using the advanced Recordset dialog box, or create a SQL statement by using the graphical Database Items tree.
-
539 USING DREAMWEAVER Making pages dynamic 3 Enter a SQL statement in the SQL text area or use the graphical Database Items tree at the bottom of the dialog box to build a SQL statement from the chosen recordset. Do the following to use the Database Items tree to build the SQL statement: • Ensure the SQL text area is blank. • Expand the branches of the tree until you find the database object you need—a column in a table, for example, or a stored procedure in the database.
-
540 USING DREAMWEAVER Making pages dynamic A common practice is to add the prefix rs to recordset names to distinguish them from other object names in your code. For example: rsPressReleases Recordset names can only contain letters, numbers, and the underscore character (_). You cannot use special characters or spaces.
-
541 USING DREAMWEAVER Making pages dynamic If the SQL statement contains run-time references, make sure the Default Value column of the Page Parameters field contains valid test values before clicking Test. If successful, a table appears displaying the data in your recordset. Each row contains a record and each column represents a field in that record. Click OK to clear the recordset. 7 If satisfied with your work, click OK.
-
542 USING DREAMWEAVER Making pages dynamic SELECT emplNo, emplName FROM Employees WHERE emplJob = 'varJob' ORDER BY emplName 1 Expand the Tables branch to display all of the tables in the selected database; then expand the Employees table to display the individual table rows. 2 Build the SQL statement as follows: • Select emplNo, and click the Select button. • Select emplName, and click the Select button. • Select emplJob, and click the Where button. • Select emplName, and click the Order By button.
-
543 USING DREAMWEAVER Making pages dynamic Define form parameters Form parameters store retrieved information that is included in the HTTP request for a web page. If you create a form that uses the POST method, the data submitted by the form is passed to the server. Before you begin, make sure you pass a form parameter to the server. After you define the form parameter as a content source, you can use its value in your page. 1 In the Document window, open the page that will use the variable.
-
544 USING DREAMWEAVER Making pages dynamic 3 Click the Plus (+) button, and select Session Variable from the pop-up menu. 4 Enter the name of the variable you defined in the application’s source code, and click OK.
-
545 USING DREAMWEAVER Making pages dynamic 3 Define a variable, and click OK. 4 When defining the recordset, select the variable as the data source for the recordset. In the Recordset dialog box, the variable appears in the Data Source pop-up menu along with the ColdFusion data sources on the server. 5 Complete the Recordset dialog box, and click OK. 6 Initialize the variable. Dreamweaver does not initialize the variable for you so that you can initialize it how and where you want.
-
546 USING DREAMWEAVER Making pages dynamic Define a ColdFusion local variable Local variables are variables created with the CFSET or CFPARAM tag within a ColdFusion page. The defined local variable appears in the Bindings panel. ❖ In the Local Variable dialog box, enter the name of the local variable and click OK. Define ASP server variables You can define the following ASP server variables as sources of dynamic content: Request.Cookie, Request.QueryString, Request.Form, Request.
-
547 USING DREAMWEAVER Making pages dynamic For more information, search for the keyword $_SERVER in the PHP documentation. Define a ColdFusion client variable Define a ColdFusion client variable as a source of dynamic content for the page. The newly defined ColdFusion client variables appear in the Bindings panel. ❖ In the Client Variable dialog box, enter the name of the variable, and click OK. For example, to access the information in the Client.LastVisit ColdFusion variable, enter LastVisit.
-
548 USING DREAMWEAVER Making pages dynamic Variable Description PATH_INFO The extra path information, as given by the client. Scripts can be accessed by their virtual pathname, followed by extra information at the end of this path. The extra information is sent as PATH_INFO. PATH_TRANSLATED The server provides a translated version of PATH_INFO, which takes the path and does any virtual-tophysical mapping to it. SCRIPT_NAME A virtual path to the script being executed; used for self-referencing URLs.
-
549 USING DREAMWEAVER Making pages dynamic Change a content source in the Bindings panel 1 In the Bindings panel (Window > Bindings), double-click the name of the content source you want to edit. 2 Make your changes in the dialog box that appears. 3 If satisfied with your work, click OK. Delete a content source from the Bindings panel 1 In the Bindings panel (Window > Bindings), select the content source from the list. 2 Click the Minus (-) button.
-
550 USING DREAMWEAVER Making pages dynamic More Help topics “Defining sources of dynamic content” on page 536 “Create a recordset navigation bar” on page 556 “Display multiple recordset results” on page 558 “Applying typographic and page layout elements to dynamic data” on page 555 “Use predefined data formats” on page 563 About dynamic text Dynamic text adopts any text formatting applied to the existing text or to the insertion point.
-
551 USING DREAMWEAVER Making pages dynamic Make images dynamic You can make images on your page dynamic. For example, suppose you design a page to display items for sale at a charity auction. Each page would include descriptive text and a photo of one item. The page’s general layout would remain the same for each item, but the photo (and descriptive text) could change. 1 With the page open in Design view (View > Design), place the insertion point where you want the image to appear on the page.
-
552 USING DREAMWEAVER Making pages dynamic Make HTML attributes dynamic with the Property inspector 1 In Design view, select an HTML object and open the Property inspector (Window > Properties). For example, to select an HTML table, click inside the table and click the
tag in the tag selector on the bottomleft of the Document window. 2 How you bind a dynamic content source to the HTML attribute depends on where it is located.
-
553 USING DREAMWEAVER Making pages dynamic Changing dynamic content About dynamic content You can change the dynamic content on your page by editing the server behavior that provides the content. For example, you can edit a recordset server behavior to provide more records to your page. Dynamic content on a page is listed in the Server Behaviors panel.
-
554 USING DREAMWEAVER Making pages dynamic Let Adobe Contribute users edit dynamic content When a Contribute user edits a page containing dynamic content or invisible elements (such as scripts and comments), Contribute displays the dynamic content and invisible elements as yellow markers. By default, Contribute users can’t select or delete these markers.
-
555 USING DREAMWEAVER Making pages dynamic Displaying database records About database records Displaying database records involves retrieving information stored in a database or other source of content, and rendering that information to a web page.
-
556 USING DREAMWEAVER Making pages dynamic You can create four types of navigation links to move through a recordset: First, Previous, Next, and Last. A single page can contain any number of these links, provided they all work on a single recordset. You can’t add links to move through a second recordset on the same page.
-
557 USING DREAMWEAVER Making pages dynamic Custom recordset navigation bars You can create your own recordset navigation bar that uses more complex layout and formatting styles than the simple table created by the Recordset Navigation Bar server object.
-
558 USING DREAMWEAVER Making pages dynamic Navigation link Server behavior Go to first page Move to first page Go to previous page Move to previous page Go to next page Move to next page Go to last page Move to last page More Help topics “About recordsets” on page 530 Display and hide regions based on recordset results You can also specify that a region be displayed or hidden based on whether the recordset is empty.
-
559 USING DREAMWEAVER Making pages dynamic 2 Select Window > Server Behaviors to display the Server Behaviors panel. 3 Click the Plus (+) button, and select Repeating Region. 4 Select the name of the recordset to use from the pop-up menu. 5 Select the number of records to display per page, and click OK. In the Document window, a thin, tabbed, gray outline appears around the repeating region.
-
560 USING DREAMWEAVER Making pages dynamic Create a dynamic table The following example illustrates how the Repeating Region server behavior is applied to a table row, and specifies that nine records are displayed per page. The row itself displays four different records: city, state, street address, and ZIP code.
-
561 USING DREAMWEAVER Making pages dynamic A table and placeholders for the dynamic content defined in its associated recordset are inserted into the page. In this example, the recordset contains four columns: AUTHORID, FIRSTNAME, LASTNAME, and BIO. The table’s heading row is populated with the names of each column. You can edit the headings using any descriptive text, or replace them with representative images.
-
562 USING DREAMWEAVER Making pages dynamic Build and add the record counter to the page ❖ In the Insert Recordset Navigation Status dialog box, select the recordset to track, and click OK. Create custom record counters You use individual record count behaviors to create custom record counters. Creating a custom record counter lets you create a record counter beyond the simple, single row table inserted by the Recordset Navigation Status server object.
-
563 USING DREAMWEAVER Making pages dynamic Use predefined data formats Dreamweaver includes several predefined data formats that you can apply to dynamic data elements. The data format styles include date and time, currency, numerical, and percentage formats. Apply data formats to dynamic content 1 Select the dynamic content placeholder in the Document window. 2 Select Window > Bindings to display the Bindings panel. 3 Click the down arrow button in the Format column.
-
564 USING DREAMWEAVER Making pages dynamic 5 Click the Plus (+) button, and select a format type. 6 Define the format, and click OK. 7 Enter a name for the new format in the Name column, and click OK. Note: Though Dreamweaver only supports creating data formats for ASP pages, ColdFusion and PHP users can download formats that other developers created, or create server formats and post them to the Dreamweaver Exchange.
-
565 USING DREAMWEAVER Making pages dynamic Remote folder Web URL C:\Inetpub\wwwroot\ http://localhost/ C:\Inetpub\wwwroot\myapp\ http://localhost/myapp/ C:\Inetpub\wwwroot\fs\planes http://localhost/fs/planes More Help topics “Switch between views in the Document window” on page 16 “Preview pages in Live view” on page 272 “Previewing dynamic pages in a browser” on page 526 Adding custom server behaviors About custom server behaviors Dreamweaver comes with a set of built-in server behaviors that l
-
566 USING DREAMWEAVER Making pages dynamic • If the server behavior requires that a value be specified for a parameter, create a dialog box that prompts the web developer applying the behavior to supply an appropriate value. • Test the server behavior before making it available to others.
-
567 USING DREAMWEAVER Making pages dynamic More Help topics “Repeating code blocks with the loop directive” on page 570 “Coding guidelines” on page 574 “Request a parameter for the server behavior” on page 572 “Adding custom server behaviors” on page 565 Advanced options After you specify the source code and insert location for each code block, the server behavior is completely defined. In most cases, you don’t need to specify any additional information.
-
568 USING DREAMWEAVER Making pages dynamic You can create the code blocks either directly in the Server Behavior Builder, or you can copy and paste the code from other sources. Each code block you create in the Server Behavior Builder must be a single tag or script block. If you must insert multiple tag blocks, split them into separate code blocks. Conditions in code blocks Dreamweaver lets you develop code blocks that incorporate control statements that execute conditionally.
-
569 USING DREAMWEAVER Making pages dynamic Positioning a code block When you create code blocks using the Server Behavior Builder, you must specify where to insert them in the page’s HTML code. For example, if you insert a code block above the opening tag, you must then specify the code block’s position relative to other tags, scripts, and server behaviors in that section of the page’s HTML code.
-
570 USING DREAMWEAVER Making pages dynamic “About custom server behaviors” on page 565 “Creating code blocks” on page 567 “Testing server behaviors” on page 575 Position a code block (general instructions) 1 Using the Server Behavior Builder, write a code block. 2 In the Server Behavior Builder dialog box, select a position in which to insert the code block from the Insert Code pop-up menu.
-
571 USING DREAMWEAVER Making pages dynamic The loop directive accepts a comma-separated list of parameter arrays as arguments. In this case, parameter array arguments allow a user to supply multiple values for a single parameter. The repeating text is duplicated n times, where n is the length of the parameter array arguments. If more than one parameter array argument is specified, all the arrays must have the same length.
-
572 USING DREAMWEAVER Making pages dynamic PAGE 580
573 USING DREAMWEAVER Making pages dynamic To require the page designer to supply the value of Form_Object_Name, enclose the string in parameter markers (@@): <% Session("lang_pref") = Request.Form("@@Form_Object_Name@@"); %> You can also highlight the string and click the Insert Parameter In Code Block button. Enter a parameter name and click OK. Dreamweaver replaces every instance of the highlighted string with the specified parameter name enclosed in parameter markers.
-
574 USING DREAMWEAVER Making pages dynamic If you apply a server behavior to a page and then edit the behavior in Dreamweaver, instances of the old behavior no longer appear in the Server Behaviors panel. The Server Behaviors panel searches the page for code that matches the code of known server behaviors. If the code of a server behavior changes, the panel does not recognize earlier versions of the behavior on that page.
-
575 USING DREAMWEAVER Making pages dynamic Code prefixes Allow you to identify your own run-time functions and global variables in a page. One convention is to use your initials. Never use the MM_ prefix, as it is reserved for Dreamweaver use only. Dreamweaver precedes all functions and global variables with the prefix MM_ to prevent them from conflicting with any code that you write. var MM_ERROR_STRING = "...
-
576 Chapter 21: Building applications visually In Adobe® Dreamweaver® CS5, you can use Adobe ColdFusion, PHP, or ASP to build pages that let you search, insert, delete, and update database records, display master and detail information, and restrict access to certain users. Building master and detail pages About master and detail pages Master and detail pages are sets of pages used to organize and display recordset data. These pages provide a visitor to your site with both an overview and a detailed view.
-
577 USING DREAMWEAVER Building applications visually Detail page You can build master and detail pages by inserting a data object to create a master page and detail page in one operation or by using server behaviors to build the master and detail pages in a more customized way. When using server behaviors to build master and detail pages, you first create a master page to list the records and then add links from the list to the detail pages.
-
578 USING DREAMWEAVER Building applications visually Recordset columns selected for a master page Typically, the recordset on the master page extracts a few columns from a database table while the recordset on the detail page extracts more columns from the same table to provide the extra detail. The recordset can be defined by the user at run time. For more information, see “Building search and results pages” on page 583. 3 Insert a dynamic table to display the records.
-
579 USING DREAMWEAVER Building applications visually Open the detail page and pass a record ID (ColdFusion, PHP) 1 In the dynamic table, select the content placeholder for text that will serve as a link. Links applied to placeholder selected. 2 In the Property inspector, click the folder icon beside the Link box. 3 Browse and select the detail page. The detail page appears in the Link box in the Property inspector. In the dynamic table, the selected text appears linked.
-
580 USING DREAMWEAVER Building applications visually When the page runs, the values of the recordset’s CODE field are inserted in the corresponding rows in the dynamic table. For example, if the Canberra, Australia, rental location has the code CBR, the following URL is used in the Canberra row in the dynamic table: locationDetail.php?recordID=CBR 7 Save the page. Open the detail page and pass a record ID (ASP) 1 Select the dynamic content to double as a link.
-
581 USING DREAMWEAVER Building applications visually 5 Complete the Filter section as to find and display the record specified in the URL parameter passed by the master page: • From the first pop-up menu in the Filter area, select the column in the recordset containing values that match the value of the URL parameter passed by the master page. For example, if the URL parameter contains a record ID number, select the column containing record ID numbers.
-
582 USING DREAMWEAVER Building applications visually Build master and detail pages in one operation When developing web applications, you can quickly build master and detail pages using the Master Detail Page Set data object. 1 To create a blank dynamic page, select File > New > Blank Page, select a dynamic page from the Page Type list, and click Create. This page becomes the master page. 2 Define a recordset for the page.
-
583 USING DREAMWEAVER Building applications visually The data object creates a detail page (if you didn’t already create one) and adds dynamic content and server behaviors to both the master and detail pages. 15 Customize the layout of the master and detail pages to suit your needs. You can fully customize the layout of each page by using the Dreamweaver page-design tools. You can also edit the server behaviors by double-clicking them in the Server Behaviors panel.
-
584 USING DREAMWEAVER Building applications visually More Help topics “Defining sources of dynamic content” on page 536 “Building search and results pages” on page 583 Build the search page A search page on the web typically contains form fields in which the user enters search parameters. At minimum, your search page must have an HTML form with a Submit button. To add an HTML form to a search page, complete the following procedure. 1 Open the search page or a new page, and select Insert > Form > Form.
-
585 USING DREAMWEAVER Building applications visually Build a basic results page When the user clicks the form’s Search button, the search parameters are sent to a results page on the server. The results page on the server, not the search page on the browser, is responsible for retrieving records from the database. If the search page submits a single search parameter to the server, you can build the results page without SQL queries and variables.
-
586 USING DREAMWEAVER Building applications visually 6 To include only some of the table’s columns in the recordset, click Selected and select the desired columns by Control-clicking (Windows) or Command-clicking (Macintosh) them in the list. You should include only the columns containing information you want to display on the results page. Leave the Recordset dialog box open for now.
-
587 USING DREAMWEAVER Building applications visually Note: If you have only one search condition, you can use the simple Recordset dialog box to define your recordset (see “Build a basic results page” on page 585). 1 Open the results page in Dreamweaver, and then create a recordset by opening the Bindings panel (Window > Bindings), clicking the Plus (+) button, and selecting Recordset from the pop-up menu. 2 Make sure the advanced Recordset dialog box appears.
-
588 USING DREAMWEAVER Building applications visually Display the search results After creating a recordset to hold the search results, you must display the information on the results page. Displaying the records can be a simple matter of dragging individual columns from the Bindings panel to the results page. You can add navigation links to move forward and backward through the recordset, or you can create a repeating region to display more than one record on the page.
-
589 USING DREAMWEAVER Building applications visually Building a record insert page About building record insert pages Your application can contain a page that lets users insert new records in a database. An insert page consists of two building blocks: • An HTML form that lets users enter data • An Insert Record server behavior that updates the database When a user clicks Submit on a form, the server behavior inserts records in a database table.
-
590 USING DREAMWEAVER Building applications visually 2 Select a form from the Submit Values From pop-up menu. 3 In the Data Source pop-up menu, select a connection to the database. 4 Enter your user name and password. 5 In the Insert Into Table pop-up menu, select the database table to insert the record in.
-
591 USING DREAMWEAVER Building applications visually 5 Specify a database column to insert the record in, select the form object that will insert the record from the Value pop-up menu, and then select a data type for the form object from the Submit As pop-up menu. The data type is the kind of data the column in your database table is expecting (text, numeric, Boolean option values). Repeat the procedure for each form object in your form.
-
592 USING DREAMWEAVER Building applications visually Dreamweaver adds both an HTML form and an Insert Record server behavior to your page. The form objects are laid out in a basic table, which you can customize using the Dreamweaver page design tools. (Make sure all the form objects remain within the form’s boundaries.) To edit the server behavior, open the Server Behaviors panel (Window > Server Behaviors) and double-click the Insert Record behavior.
-
593 USING DREAMWEAVER Building applications visually 3 Name the recordset and specify where the data you want to update is located using the Connection and Table pop-up menus. 4 Click Selected, and select a key column (usually the record ID column) and the columns that contain the data to be updated. 5 Configure the Filter area so that the value of your key column equals the value of the corresponding URL parameter passed by the results page.
-
594 USING DREAMWEAVER Building applications visually 5 Add a form object such as a text field (Insert > Form > Text Field) for each column you want to update in the database table. The form objects are for data entry. Text fields are common for this purpose, but you can also use menus, options, and radio buttons. Each form object should have a corresponding column in the recordset you defined earlier. The only exception is the unique key column, which should have no corresponding form object.
-
595 USING DREAMWEAVER Building applications visually 9 (ASP) Specify a database column to update, select the form object that will update the column from the Value pop-up menu, and then select a data type for the form object from the Submit As pop-up menu. The data type is the kind of data the column in your database table is expecting (text, numeric, Boolean option values). Repeat the procedure for each form in your form. 10 Click OK.
-
596 USING DREAMWEAVER Building applications visually You can also change the order of the form objects on the HTML form by selecting a form object in the list and clicking the up or down arrow on the right side of the dialog box. 8 Specify how each data-entry field should appear on the HTML form by clicking a row in the Form Fields table and entering the following information in the boxes below the table: • In the Label box, enter a descriptive label to display beside the data-entry field.
-
597 USING DREAMWEAVER Building applications visually You can enter a static value or you can specify a dynamic value by clicking the lightning bolt icon, and selecting a dynamic value from the list of data sources. In either case, the value you specify should match one of the element’s values. Building a delete record page About record delete pages Your application can contain a set of pages that lets users delete records in a database.
-
598 USING DREAMWEAVER Building applications visually After clicking outside the Link box, the Delete string appears linked in the table. If you Live view, you can see that the link is applied to the same text in every table row. 6 Select the Delete link on the results page. 7 (ColdFusion) In the Link box in the Property inspector, add the following string at the end of the URL: ?recordID=#recordsetName.fieldName# The question mark tells the server that what follows is one or more URL parameters.
-
599 USING DREAMWEAVER Building applications visually The expression after the equal sign is the value of the parameter. In this case, the value is generated by an ASP expression that returns a record ID from the recordset. A different ID is generated for each row in the dynamic table. In the ASP expression, replace recordsetName with the name of your recordset, and replace fieldName with the name of the field in your recordset that uniquely identifies each record.
-
600 USING DREAMWEAVER Building applications visually Build the delete page After completing the page listing the records, switch to the delete page. The delete page shows the record and asks the user if they're sure they want to delete it. When the user confirms the operation by clicking the form button, the web application deletes the record from the database.
-
601 USING DREAMWEAVER Building applications visually • From the third pop-up menu, select URL Parameter. The page with the Delete links uses a URL parameter to pass information to the delete page. • In the fourth box, enter the name of the URL parameter passed by the page with the Delete links. 5 Click OK. The recordset appears in the Bindings panel. Display the record the user wants to delete 1 Select the recordset columns (record fields) in the Bindings panel, and drag them to the delete page.
-
602 USING DREAMWEAVER Building applications visually Record ID column selected 5 Click OK and save the page. Completed delete page Add logic to delete the record After displaying the selected record on the delete page, you must add logic to the page that deletes the record from the database when the user clicks the Confirm Deletion button. You can add this logic quickly and easily by using the Delete Record server behavior.
-
603 USING DREAMWEAVER Building applications visually 4 In the Connection or Data Source (ColdFusion) pop-up menu, select a connection to the database so that the server behavior can connect to the affected database. 5 In the Table pop-up menu, select the database table that contains the records that will be deleted. 6 In the Primary Key Column pop-up menu, select the table column that contains record IDs. The Delete Record server behavior searches this column for a match.
-
604 USING DREAMWEAVER Building applications visually 7 In the Delete By Submitting pop-up menu, specify the HTML form with the Submit button that sends the delete command to the server. 8 In the After Deleting, Go To box, specify a page to open after the record has been deleted from the database table. You can specify a page that contains a brief success message to the user, or a page listing the remaining records so that the user can verify that the record has been deleted.
-
605 USING DREAMWEAVER Building applications visually 3 Enter a name for the command, select a connection to the database that contains the records you want to edit, and select the editing operation that you want the command to perform—Insert, Update, or Delete. Dreamweaver starts the SQL statement, based on the type of operation you select. For example, if you select Insert, the dialog box looks like the following example: 4 Complete the SQL statement.
-
606 USING DREAMWEAVER Building applications visually Type in database Type in Dreamweaver Size All other types of text fields, including the MySQL text data types char, varchar and longtext LongVarChar check database table Text (MS Access) or nvarchar, nchar (MS SQL Server) VarWChar check database table Memo (MS Access), ntext (MS SQL Server), or fields that support large amounts of text LongVarWChar 1073741823 For more information on the type and size of SQL variables, see www.adobe.
-
607 USING DREAMWEAVER Building applications visually 4 Enter the ColdFusion Data Source user name and password. 5 Select a stored procedure from the Procedures pop-up menu. Dreamweaver automatically fills in any parameters. 6 Select a parameter, and click Edit if you have to make changes. The Edit Stored Procedure Variable dialog box appears. The name of the variable you are editing appears in the Name box. Note: You must enter test values for any stored procedure input parameters.
-
608 USING DREAMWEAVER Building applications visually 2 In the Bindings panel (Window > Bindings), click the Plus (+) button, and then select Command (Stored Procedure). The Command dialog box appears. 3 Enter a name for the command, select a connection to the database containing the stored procedure, and then select Stored Procedure from the Type pop-up menu.
-
609 USING DREAMWEAVER Building applications visually More Help topics “Add an HTML form for selecting a user name and password” on page 609 “Update the database table of users” on page 610 “Add a server behavior to ensure a unique user name” on page 610 Storing login information about users A registration page requires a database table to store the login information entered by users. • Make sure your database table contains a user name and a password column.
-
610 USING DREAMWEAVER Building applications visually The next step in creating a registration page is to add the Insert Record server behavior to insert records in the table of users in the database. Update the database table of users You must add an Insert Record server behavior to the registration page to update the table of users in the database. 1 In the Server Behaviors panel (Window > Server Behaviors), click the Plus (+) button and select Insert Record from the pop-up menu.
-
611 USING DREAMWEAVER Building applications visually More Help topics “Add an HTML form to let users log in” on page 611 “Verify the user name and password” on page 611 Create a database table of registered users You need a database table of registered users to verify that the user name and password entered in the login page are valid. ❖ Use your database application and a registration page to create the table. For instructions, see the related topic link below.
-
612 USING DREAMWEAVER Building applications visually When a user clicks the Submit button on the login page, the Log In User server behavior compares the values entered by the user against the values for registered users. If the values match, the server behavior opens one page (usually the site’s Welcome screen). If the values do not match, the server behavior opens another page (usually a page alerting the user that the login attempt failed).
-
613 USING DREAMWEAVER Building applications visually You can also use authorization levels to review newly registered users before granting them full access to the site. For example, you may want to receive payment before allowing a user access to the member pages of the site. To do so, you can protect the member pages with a Member authorization level and only grant newly registered users Guest privileges.
-
614 USING DREAMWEAVER Building applications visually For example, you can specify that any user with Guest, Member, or Administrator privileges can view the page. 6 Specify the page to open if an unauthorized user attempts to open the protected page. Ensure that the page you choose is not protected. 7 Click OK.
-
615 USING DREAMWEAVER Building applications visually Log out users when a specific page loads 1 Open the page that will load in Dreamweaver. The page is usually a goodbye or thank you page. 2 In the Server Behaviors panel, click the Plus (+) button and select User Authentication > Log Out User. 3 Select the Log Out When Page Loads option, and click OK.
-
616 USING DREAMWEAVER Building applications visually Using ColdFusion components About ColdFusion components ColdFusion component (CFC) files let you encapsulate application and business logic into self-contained, reusable units. CFCs also provide a fast, easy way to create web services. A CFC is a reusable software unit written in ColdFusion markup language (CFML), which makes it easy to reuse and maintain your code. You can use Dreamweaver to work with CFCs.
-
617 USING DREAMWEAVER Building applications visually Note: Depending on the component, you may have to complete some code by hand. 1 Open a ColdFusion page in Dreamweaver. 2 In the Components panel (Window > Components), select CF Components from the pop-up menu. 3 Click the Plus (+) button, and complete the Create Components dialog box, and click OK. a In the Components section, enter the details about the component. Here is a partial list: Name Specifies the filename of the component.
-
618 USING DREAMWEAVER Building applications visually • Inspect the properties of functions that serve as web services. To use Dreamweaver to inspect CFCs residing in the server root while also managing your site files in a different website root, you can define two Dreamweaver sites. Set the first site to point to the server root and the second to point to the website root. Use the site pop-up menu on the Files panel to switch quickly between the two sites.
-
619 USING DREAMWEAVER Building applications visually • In the advanced Site Definition dialog box, the path of your local root folder must be the same as the path of the testing server folder (for example, c:\Inetpub\wwwroot\cf_projects\myNewApp\). You can examine and change these paths by selecting Site > Edit Sites. • The component must be stored in the local site folder or any of its subfolders on your hard disk.
-
620 USING DREAMWEAVER Building applications visually 6 Save the page (File > Save). Define a recordset in a CFC Dreamweaver can help you define a recordset (also known as a ColdFusion query) in a ColdFusion component (CFC). By defining a recordset in a CFC, you don’t need to define the recordset on each page that uses it. You define the recordset once in the CFC and use the CFC on different pages. Note: This feature is available only if you have access to a computer running ColdFusion MX 7 or later.
-
621 USING DREAMWEAVER Building applications visually Define dynamic content by using a CFC You can define a recordset as a source of dynamic content in Dreamweaver by using a CFC that contains a recordset definition. 1 In the Name box, enter a name for the CFC recordset. A common practice is to add the prefix rs to recordset names to distinguish them from other object names in the code, for example: rsPressRelease. Recordset names must contain only alphanumeric characters and underscores (_).
-
622 USING DREAMWEAVER Building applications visually If the SQL statement contains page parameters, ensure that the Default Value column of the Parameters box contains valid test values before clicking Test. If the query was executed successfully, a table displays the recordset. Each row contains a record and each column represents a field in that record. Click OK to clear the CFC Query. 8 Click OK.
-
623 Chapter 22: Building forms When a visitor enters information into a web form displayed in a web browser and clicks the submit button, the information is sent to a server where a server-side script or application processes it. The server responds by sending the processed information back to the user (or client), or by performing some other action based on the form’s contents. You can use Dreamweaver to create forms that submit data to most application servers, including PHP, ASP, and ColdFusion.
-
624 USING DREAMWEAVER Building forms In cases where a web application expects a precise parameter value (for example, when it performs an action based on one of several options), use a radio button, check box, or list/menu form object to control the values the user can submit. This prevents users from typing information incorrectly and causing an application error.
-
625 USING DREAMWEAVER Building forms In this example workflow, the application is a web-based storefront. Because the developers of the site want to reach the widest possible audience, the site is designed to support foreign currencies. When users log in to the site, they can select the currency in which to view the prices of the available items. 1 The browser requests the report.cfm page from the server. The request includes the URL parameter Currency="euro".
-
626 USING DREAMWEAVER Building forms Add a record Update a record Delete a record The Property inspector (Window > Properties) lets you create the same URL parameters by selecting the link and appending the URL parameter values at the end of the link URL in the Link box.
-
627 USING DREAMWEAVER Building forms Form objects In Dreamweaver, form input types are called form objects. Form objects are the mechanisms that allow users to input data. You can add the following form objects to a form: Text fields Accept any type of alphanumeric text entry. The text can be displayed as a single line, multiple lines, and as a password field where entered text is replaced by asterisks or bullets to hide the text from onlookers.
-
628 USING DREAMWEAVER Building forms Radio buttons Represent exclusive choices. Selecting a button within a radio button group deselects all others in the group (a group consists of two or more buttons that share the same name). In the example below, Rafting is the currently selected option. If the user clicks Surfing, the Rafting button is automatically cleared. List menus Display option values within a scrolling list that allows users to select multiple options.
-
629 USING DREAMWEAVER Building forms d In the Method pop-up menu, specify the method to transmit the form data to the server. Set any of the following options: Default Uses the browser’s default setting to send the form data to the server. Typically, the default value is the GET method. GET Appends the value to the URL requesting the page. POST Embeds the form data in the HTTP request. Do not use the GET method to send long forms. URLs are limited to 8192 characters.
-
630 USING DREAMWEAVER Building forms Note: All radio buttons in a group must have the same name. f To label the text field, check box, or radio button object on the page, click beside the object and type the label. 5 Adjust the layout of the form. Use line breaks, paragraph breaks, preformatted text, or tables to format your forms. You cannot insert a form in another form (that is, you cannot overlap tags), but you can include more than one form in a page.
-
631 USING DREAMWEAVER Building forms • Password Results in an input tag with its type attribute set to password. The Char Width and Max Chars settings map to the same attributes as in single-line text fields. When a user types in a password text field, the input appears as bullets or asterisks to protect it from observation by others. Init val Assigns the value displayed in the field when the form first loads.
-
632 USING DREAMWEAVER Building forms Select the List option to list some or all the options when the form is displayed in a browser, to let users select multiple items. Height (List type only) Sets the number of items displayed in the menu. Selections (List type only) Indicates whether the user can select multiple items from the list. List Values Opens a dialog box that lets you add the items to a form menu: 1 Use the Plus (+) and Minus (–) buttons to add and remove items in the list.
-
633 USING DREAMWEAVER Building forms Insert an image button You can use images as button icons. Using an image to perform tasks other than submitting data requires attaching a behavior to the form object. 1 In the document, place the insertion point inside the form outline. 2 Select Insert > Form > Image Field. The Select Image Source dialog box appears. 3 Select the image for the button in the Select Image Source dialog box, and click OK.
-
634 USING DREAMWEAVER Building forms Lay out the buttons using line breaks or a table. If you select the table option, Dreamweaver creates a single-column table, and places the radio buttons on the left and the labels on the right. You can also set the properties in the Property inspector or directly in Code view. Insert a group of check boxes 1 Place the insertion point inside the form outline. 2 Select Insert > Form > Checkbox Group. 3 Complete the dialog box and click OK.
-
635 USING DREAMWEAVER Building forms Before you begin, you must insert an HTML form in a ColdFusion, PHP, or ASP page, and you must define a recordset or other source of dynamic content for the menu. 1 Insert an HTML List/Menu form object in your page: a Click inside the HTML form on the page (Insert > Form > Form). b Select Insert > Form > List/Menu to insert the form object.
-
636 USING DREAMWEAVER Building forms Set the Dynamic Text Field dialog box options 1 Select the text field to make dynamic from the Text Field pop-up menu. 2 Click the lightning bolt icon beside the Set Value To box, select a data source from the list of data sources, and click OK. The data source should contain textual information. If no data sources appear in the list, or if the available data sources don’t meet your needs, click the Plus (+) button to define a new data source.
-
637 USING DREAMWEAVER Building forms 3 Click the lightning bolt icon beside the Select Value Equal To box and select a recordset that contains possible checked values for the radio buttons in the group. The recordset you select contains values that match the radio buttons’ checked values. To view the checked values of the radio buttons, select each radio button and open its Property inspector (Window > Properties). 4 Click OK.
-
638 USING DREAMWEAVER Building forms Attach JavaScript behaviors to HTML form objects You can attach JavaScript behaviors stored in Dreamweaver to HTML form objects such as buttons. 1 Select the HTML form object. 2 In the Behaviors panel (Window > Behaviors), click the Plus (+) button, and select a behavior from the list.
-
639 USING DREAMWEAVER Building forms Attach Label Tag Using For Uses the for attribute to wrap a label tag around the form item, as follows: This choice causes the browser to render text associated with a check box and radio button with a focus rectangle, and enables the user to select the check
-
640 USING DREAMWEAVER Building forms Dreamweaver provides a number of enhancements for ColdFusion developers who use ColdFusion MX 7 or later as their development server. These enhancements include more Insert panel buttons, menu items, and Property inspectors so that you can rapidly build and set the properties of ColdFusion forms. You can also generate code that validates the information provided by site visitors.
-
641 USING DREAMWEAVER Building forms Encoding Type Specifies the encoding method used for transmitting the form data. Note: Encoding type does not refer to character encoding. This attribute specifies the content type used to submit the form to the server (when the value of method is post). The default value for this attribute is application/x-www-formurlencoded. Format Determines what kind of form is created: • HTML Generates an HTML form and sends it to the client.
-
642 USING DREAMWEAVER Building forms Remember to label the ColdFusion form fields with descriptive text to let users know what they are responding to. For example, create a “Type your name label” to request name information. More Help topics “Validate ColdFusion form data” on page 651 “Create an HTML form” on page 628 Insert ColdFusion form controls Use the Insert panel or Insert menu to quickly insert ColdFusion form controls into a ColdFusion form.
-
643 USING DREAMWEAVER Building forms CFTextField options (ColdFusion) To set the options of a ColdFusion text or password field, set any of the following options in the CFTextField Property inspector: CFtextfield Sets the id attribute of the tag. Value Lets you specify text to be displayed in the field when the page first opens in a browser. The information can either be static or dynamic.
-
644 USING DREAMWEAVER Building forms Validate Specifies the type of validation for the current field. Validate At Specifies when the field is validated: onSubmit, onBlur or onServer. Label Lets you specify a label for the control. This property is ignored by the ColdFusion server at run time. Pattern Lets you specify a JavaScript regular expression pattern to validate input. Omit leading and trailing slashes. For more information, see the ColdFusion documentation.
-
645 USING DREAMWEAVER Building forms 4 To label the text area, click beside it and enter text for the label. More Help topics “Validate ColdFusion form data” on page 651 “Modify ColdFusion form controls” on page 650 Insert ColdFusion buttons You can visually insert a ColdFusion button into your form and set its properties. ColdFusion buttons control ColdFusion form operations. Buttons can be used to submit ColdFusion form data to the server or to reset the ColdFusion form.
-
646 USING DREAMWEAVER Building forms Label Lets you specify a label for the check box. Pattern Lets you specify a JavaScript regular expression pattern to validate input. Omit leading and trailing slashes. For more information, see the ColdFusion documentation. Height Lets you specify the height of the control, in pixels. This property is ignored by the ColdFusion server at run time. Width Lets you specify the width of the control, in pixels. This property is ignored by the ColdFusion server at run time.
-
647 USING DREAMWEAVER Building forms More Help topics “Modify ColdFusion form controls” on page 650 “Validate ColdFusion form data” on page 651 Insert ColdFusion select boxes You can visually insert a ColdFusion select box into your form and set its properties. A select box lets a visitor select one or more items from a list. Select boxes are useful when you have a limited amount of space, but need to display many items. They’re also useful when you want to control the values returned to the server.
-
648 USING DREAMWEAVER Building forms More Help topics “Modify ColdFusion form controls” on page 650 “Validate ColdFusion form data” on page 651 Insert ColdFusion image fields You can visually insert a ColdFusion image field into your form and set its options. Use image fields to make custom buttons. Note: This enhancement is available only if you have access to a computer running ColdFusion MX 7 or later. 1 In Design view, place the insertion point inside the form outline.
-
649 USING DREAMWEAVER Building forms Insert ColdFusion file fields You can visually insert a ColdFusion file field into your form and set its properties. Use a file field to let users select a file from their computer, such as a word processing document or a graphics file, and upload it to the server. A ColdFusion file field looks like other text fields, except it also has a Browse button.
-
650 USING DREAMWEAVER Building forms Insert ColdFusion date fields Although you can’t visually insert a ColdFusion date field in Dreamweaver, you can visually set its properties. A ColdFusion date field is a special type of text field that lets users select a date from a pop-up calendar to insert it in the text field. Note: This enhancement is available only if you have access to a computer running ColdFusion MX 7 or later. 1 In Design view, select the CFForm to display its Property inspector.
-
651 USING DREAMWEAVER Building forms 2 Change the control’s properties in the Property inspector. For more information, click the Help icon in the Property inspector. 3 To set more properties, click the Display Tag Editor button in the Property inspector and set the properties in the Tag editor that appears. Validate ColdFusion form data You can build ColdFusion forms in Dreamweaver that check the contents of specified fields to ensure the user entered the correct data type.
-
652 Chapter 23: Accessibility Dreamweaver and accessibility About accessible content Accessibility refers to making websites and web products usable for people with visual, auditory, motor, and other disabilities. Examples of accessibility features for software products and websites include screen reader support, text equivalents for graphics, keyboard shortcuts, change of display colors to high contrast, and so on.
-
653 USING DREAMWEAVER Accessibility • Design view uses the background and text colors you set in Modify > Page Properties so that pages you design render colors as a browser will. Optimize the work space for accessible page design When you create accessible pages, you need to associate information, such as labels and descriptions, with your page objects to make your content accessible to all users.
-
654 USING DREAMWEAVER Accessibility • If there are tabs in the panel group to open other panels, place focus on the open tab, and then use the left or right arrow key to open another tabs. Once you open a new tab, press the Tab key to move through the options in that panel. Navigate the Property inspector 1 Press Control+F3 to display the Property inspector, if it is not visible. 2 Press Control+F6 (Windows only) until you shift focus to the Property inspector.
