-
Adobe® Dreamweaver® CC Help
-
Legal notices Legal notices For legal notices, see http://help.adobe.com/en_US/legalnotices/index.html.
-
iii Contents Chapter 1: What's new New features summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1 Chapter 2: Workspace and workflow Dreamweaver workflow and workspace Customizing the Dreamweaver workspace Working in the Document window . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
-
iv DREAMWEAVER Contents Laying out pages with CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156 Work with Bootstrap files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162 Visual Media Queries . . . . . . . . . . . . . . . . .
-
v DREAMWEAVER Contents Set text properties in the Property inspector Spell check a web page Import tabular data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 278 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 281 . . . . . . . . . . . . . . . . . . . . . . . . . . .
-
vi DREAMWEAVER Contents Working with server-side includes Managing tag libraries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 415 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 418 Importing custom tags into Dreamweaver . . . . . . . . . . .
-
vii DREAMWEAVER Contents Performing XSL transformationson the client Missing character entities for XSLT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 544 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 545 Chapter 16: Dynamic sites, pages and web forms Understanding web applications . .
-
1 Chapter 1: What's new New features summary Dreamweaver CC 2015.1 brings you a breakthrough experience in designing and building websites in Dreamweaver. Creative Cloud Libraries and Adobe Stock can now be accessed from within Dreamweaver to integrate design elements and styles from Adobe desktop and mobile apps, and high-quality images and videos. Collaborative features in Creative Cloud provide a smooth designer-to-developer workflows.
-
2 What's new What's new • Integration with Creative Cloud Libraries • Integration with Adobe Stock • Responsive design enhancements • Enhancements to Extract • Enhancements to Live view editing • In-app updates • Testing server - workflow improvements • Selection-based code collapse • CSS designer enhancements • Undo/redo specific to active documents • Improvements to DOM panel • Reset option for new feature guides • Update to W3C Validator • Support for SVG files in the Assets panel • Faster syncing of D
-
3 What's new When you insert assets from Creative Cloud Libraries, you can choose to maintain the link between the asset and the source so that your assets are kept updated at all times. The new CC Libraries panel in Dreamweaver helps you view the assets in your Creative Cloud libraries and insert them in your web pages. You can insert the assets in Live view, or in Code view using code hints. For detailed information, see Creative Cloud Libraries in Dreamweaver.
-
4 What's new Responsive design enhancements • Bootstrap enhancements • Enhancements to Visual Media Query Bootstrap enhancements Support for Bootstrap v3.3.5 Bootstrap version used in Dreamweaver has been updated to version 3.3.5. As a result, Bootstrap components, snippets, and starter templates are now in version 3.3.5. jQuery version, too, has been updated to 1.11.3.
-
5 What's new Enhancements to Bootstrap document creation workflow Whether you create a Bootstrap document from the New Document dialog box or from starter templates, the workflow is now seamless. No dialog boxes - Copy Dependent Files and Overwrite Existing Files - are displayed as in previous versions of Dreamweaver. When you create and save a Bootstrap document in a specific location, the dependent files too are automatically saved in the same location.
-
6 What's new Also, in the popup, the max-width option is selected by default. A drop-down list is introduced to let you change the option to min-width or min-max. Enhancements to editing of breakpoints You can now edit the media query values by double-clicking the breakpoint values in the Visual Media Query bar. When you double-click the breakpoint value, an orange border is displayed and the insertion point appears inside the border.
-
7 What's new Support for multiple artboards You can now open PSDs with multiple artboards in the Dreamweaver Extract panel to extract assets. Each artboard is displayed as a folder in the layers pane. You can expand or collapse the folder to see or hide its contents. To zoom in to a specific artboard, simply click the artboard name. Double-click "FIT" in the panel header to zoom out of the artboard and fit the PSD into the current view.
-
8 What's new 5 Proceed with editing the row or column as required by using the right-click context menu. Drag-select multiple cells You can now select multiple cells/rows/columns using drag. Click on a cell and drag across multiple cell/row/column to select them. 1 Select the table to see the Element Display with the sandwich icon. 2 Click the sandwich icon to enter into the table formatting mode. 3 Drag and select the required rows and columns.
-
9 What's new • The format option allows you to quickly change the element tag to one of these tags: h1-h6, p, and pre. • The link option helps you hyperlink the text element. • The icons for Bold and Italic help you add and tags to the text element. • The blockquote icons help you add or remove text indentation. tag is added or removed from the code accordingly. In Bootstrap documents, the Quick Property Inspector for text also lets you align and transform the text elements.
-
10 What's new • Clip to Shape: Click to clip the corners of images to circular or rounded corners, or as a thumbnail image. • Make image responsive: Click to make images responsive and adapt to various screen sizes. More Help topics Edit in Live view In-app updates Adobe provides updates on an on-going basis to keep Dreamweaver up-to-date with the ever-evolving technology. For example, updates to Bootstrap libraries or starter templates.
-
11 What's new Selection-based code collapse Code collapse for a selected block of code is back again. You can now: • Collapse code at the tag-level as in the previous release of Dreamweaver, and/or; • Collapse a portion of code by selecting it. When you select a block of code, the option to collapse the code appears as shown below: Click '-' to collapse the code. To expand a collapsed section of code, click '+'. Click '-' to collapse the code. To expand a collapsed section of code, click '+'.
-
12 What's new Rearranging selectors You can now rearrange selectors in the Selectors pane by dragging them to the required location in the pane. Panes in CSS Designer retain custom sizes If you collapse or expand the panes in CSS Designer, the sizes of the panes are remembered within a session. Sources and Media panes stick to the customized sizes until you change their sizes again.
-
13 What's new 3 Click Apply and then Close to close the Preferences dialog box. 4 Restart Dreamweaver for the changes to take effect. Improvements to the DOM panel You can now copy a tag in the DOM panel of a document and paste it into the DOM panel of another document using the right-click context menu in the panel. Note: Only the tags copied from the DOM panel can be pasted in another DOM panel. If you are copying a tag from Live view, then it can be pasted only in Live view and not in the DOM panel.
-
14 What's new Update to W3C Validator Dreamweaver has now been updated to use the new validator service for HTML5 from W3C: https://validator.w3.org/nu/. The older validator service, validator.w3.org, is obsolete now. The new validator service supports only the following parsers: Value Description none Choice of HTML or XML parser is based on Content-Type.
-
15 What's new Change in Zooming options Zooming in or out in Live view and Design View using the following actions is no longer available in Dreamweaver: Windows: • Press Ctrl and use Mousewheel • Press Ctrl and use scroll on Trackpad Mac: • Press Cmd and use Mousewheel • Press Cmd and use scroll on Trackpad No changes to other ways to zoom in and out of a document: Cmd/Ctrl++ or Cmd/Ctrl+-, and zoom from View > Magnification menu.
-
16 What's new Faster syncing of Dreamweaver settings with Creative Cloud With several performance improvements in the sync settings feature, you can now synchronize settings between Dreamweaver instances and Creative Cloud faster than ever. Deprecated CSS Styles panel and APIs The older CSS Styles panel is removed from Dreamweaver and as a result, the associated APIs are removed as well. The following basic APIs are still available: • dreamweaver.cssRuleTracker.newRule() • dreamweaver.cssStylePalette.
-
17 What's new The following API’s are not supported going forward: • dreamweaver.cssRuleTracker.editSelectedRule() • dreamweaver.cssRuleTracker.canEditSelectedRule() • dreamweaver.cssStylePalette.getSelectedStyle() • dreamweaver.cssStylePalette.editSelectedStyle() • dreamweaver.cssStylePalette.editSelectedStyleInCodeview() • dreamweaver.cssStylePalette.renameSelectedStyle() • dreamweaver.cssStylePalette.applySelectedStyle() • dreamweaver.cssStylePalette.duplicateSelectedStyle() • dreamweaver.
-
18 Chapter 2: Workspace and workflow Dreamweaver workflow and workspace Dreamweaver workflow overview You can use several approaches to create a website. This is one approach: Plan and set up your site Determine where the files will go and examine site requirements, audience profiles, and site goals. Additionally, consider technical requirements such as user access, as well as browser, plug-in, and download restrictions.
-
19 Workspace and workflow Many websites contain dynamic pages that allow visitors to view information stored in databases, and usually allow some visitors to add new information and edit information in the databases. To create such pages, you must first set up a web server and application server, create or modify a Dreamweaver site, and connect to a database. (See Preparing to build dynamic sites.
-
20 Workspace and workflow Note: Dreamweaver provides many other panels, inspectors, and windows. To open the panels, inspectors, and windows, use the Window menu. The Welcome screen Lets you open a recent document or create a new document. From the Welcome screen, you can also learn more about Dreamweaver by taking a product tour or accessing learn and help content for users with varying skill levels and read about the new features in the current and past releases.
-
21 Workspace and workflow Code view (View > Code) A hand-coding environment for writing and editing HTML, JavaScript, and any other kind of code. Split Code view (View > Split Code) A split version of Code view that lets you scroll to work on different sections of the document at the same time. Code and Design view (View > Code And Design) Lets you see both Code view and Design view for the same document in a single window.
-
22 Workspace and workflow Browser Navigation toolbar overview The Browser Navigation toolbar becomes active in Live view, and shows you the address of the page you’re looking at in the Document window. Live view acts like a regular browser, so even if you browse to a site outside of your local site (for example, http://www.adobe.com), Dreamweaver will load the page in the Document window. A Browser controls B Address box C Live View options By default, links are not active in Live view.
-
23 Workspace and workflow Status bar overview The Status bar at the bottom of the Document window provides additional information about the document you are creating. A Tag selector B Mobile size C Tablet size D Desktop size E Window size Tag selector Shows the hierarchy of tags surrounding the current selection. Click any tag in the hierarchy to select that tag and all its contents. Click
to select the entire body of the document.
-
24 Workspace and workflow Insert panel overview The Insert panel contains buttons for creating and inserting objects such as tables, images, and links. The buttons are organized into several categories, which you can switch by selecting the desired category from the drop-down list at the top. Some categories have buttons with pop-up menus. When you select an option from a pop-up menu, it becomes the default action for the button.
-
25 Workspace and workflow When you view sites, files, or folders in the Files panel, you can change the size of the viewing area, and expand or collapse the Files panel. When the Files panel is collapsed, it displays the contents of the local site, the remote site, the testing server, or the SVN repository as a list of files. When expanded, it displays the local site and either the remote site, the testing server, or the SVN repository.
-
26 Workspace and workflow Testing Server view Repository view The Files panel interacts with the server at regular intervals to update its content. An error message is displayed when you try to perform an action in the Files panel when it is running these auto-updates. To disable auto-updates, open the Files panel options menu, and deselect Auto-Update in the View menu. To update the contents of the panel manually, use the Refresh button in the panel.
-
27 Workspace and workflow The CSS Designer panel consists of the following panes: Sources Lists all the CSS style sheets associated with the document. Using this pane, you can create and attach a CSS to the document, or define styles within the document. @Media Lists all the media queries in the source selected in the Sources pane. If you do not select a specific CSS, this pane displays all the media queries associated with the document.
-
28 Workspace and workflow Visual guides overview Dreamweaver provides several kinds of visual guides to help you design documents and predict approximately how they appear in browsers. You can do any of the following: • Instantly snap the Document window to a desired window size to see how the elements fit on the page. • Use a tracing image as the page background to help you duplicate a design created in an illustration or image-editing application such as Adobe® Photoshop® or Adobe® Fireworks®.
-
29 Workspace and workflow Manage windows and panels You can create a custom workspace by moving and manipulating Document windows and panels. You can also save workspaces and switch among them. For Fireworks, renaming custom workspaces can lead to unexpected behavior. Note: The following examples use Photoshop for demonstration purposes. The workspace behaves the same in all the products. Rearrange, dock, or float document windows When you open more than one file, the Document windows are tabbed.
-
30 Workspace and workflow You can prevent panels from filling all the space in a dock. Drag the bottom edge of the dock up so it no longer meets the edge of the workspace. Move panels As you move panels, you see blue highlighted drop zones, areas where you can move the panel. For example, you can move a panel up or down in a dock by dragging it to the narrow blue drop zone above or below another panel. If you drag to an area that is not a drop zone, the panel floats freely in the workspace.
-
31 Workspace and workflow Press Ctrl (Windows) or Command (Mac OS) while moving a panel to prevent it from docking. Press Esc while moving the panel to cancel the operation. Add and remove panels If you remove all panels from a dock, the dock disappears. You can create a dock by moving panels to the right edge of the workspace until a drop zone appears. • To remove a panel, right-click (Windows) or Control-click (Mac) its tab and then select Close, or deselect it from the Window menu.
-
32 Workspace and workflow Collapse and expand panel icons You can collapse panels to icons to reduce clutter on the workspace. In some cases, panels are collapsed to icons in the default workspace. • To collapse or expand all panel icons in a column, click the double arrow at the top of the dock. • To expand a single panel icon, click it. • To resize panel icons so that you see only the icons (and not the labels), adjust the width of the dock until the text disappears.
-
33 Workspace and workflow Save a custom workspace 1 With the workspace in the configuration you want to save, do one of the following: • (Illustrator) Choose Window > Workspace > Save Workspace. • (Photoshop, InDesign, InCopy) Choose Window > Workspace > New Workspace. • (Dreamweaver) Choose Window > Workspace Layout > New Workspace. • (Flash) Choose New Workspace from the workspace switcher in the Application bar. • (Fireworks) Choose Save Current from the workspace switcher in the Application bar.
-
34 Workspace and workflow • To restore all the workspaces installed with Photoshop, click Restore Default Workspaces in the Interface preferences. To rearrange the order of workspaces in the application bar, drag them. Display tabbed documents (Dreamweaver Macintosh) You can view multiple documents in a single Document window by using tabs to identify each document. You can also display them as part of a floating workspace, in which each document appears in its own window.
-
35 Workspace and workflow About customizing Dreamweaver in multiuser systems You can customize Dreamweaver to suit your needs even in a multiuser operating system such as Windows XP or Mac OS X. Dreamweaver prevents any user’s customized configuration from affecting any other user’s customized configuration. To accomplish this goal, the first time you run Dreamweaver in one of the multiuser operating systems that it recognizes, the application creates copies of a variety of configuration files.
-
36 Workspace and workflow specify the source file for images, the number of rows in a table, and so on. For roll over images and Fireworks HTML, a dialog box always appears when you insert the object, regardless of this option setting. (To temporarily override this setting, Control-click (Windows) or Command-click (Macintosh) when creating and inserting objects.
-
37 Workspace and workflow Set Fonts preferences for documents in Dreamweaver A document’s encoding determines how the document appears in a browser. Dreamweaver font preferences let you view a given encoding in the font and size you prefer. The fonts you select in the Fonts Preferences dialog, however, only affect the way fonts appear in Dreamweaver; they do not affect the way the document appears in a visitor’s browser.
-
38 Workspace and workflow More Help topics Workspace layout overview Update links automatically Understanding document encoding Use the color picker Change the highlight color of div tags Working in the Document window Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article.
-
39 Workspace and workflow 2 To split the view vertically, select View > Split Vertically. To split the view horizontally, deselect View > Split Vertically. Cascade or tile Document windows If you have many documents open at once, you can cascade or tile them. Cascade Document windows ? Select Window > Cascade. Tile Document windows • (Windows) Select Window > Tile Horizontally or Window > Tile Vertically. • (Macintosh) Select Window > Tile.
-
40 Workspace and workflow For less precise resizing, use your operating system’s standard methods of resizing windows, such as dragging the lower-right corner of a window. Note: (Windows only) Documents within the Document window are maximized by default, and you can't resize a in the upper right document when it's maximized. To de-maximize the document, click the de-maximize button corner of the document.
-
41 Workspace and workflow Server Debug Lets you view information to debug an Adobe® ColdFusion® application. Note: Support for ColdFusion is removed in Dreamweaver CC and later. More Help topics Document window overview Preview pages in Live view Manage windows and panels Display tabbed documents (Dreamweaver Macintosh) Status bar overview Using toolbars, inspectors, and context menus Note: The user interface has been simplified in Dreamweaver CC and later.
-
42 Workspace and workflow View and change properties for a page element 1 Select the page element in the Document window. You might have to expand the Property inspector to view all the properties for the selected element. 2 Change any of the properties in the Property inspector. Note: For information on specific properties, select an element in the Document window, and then click the Help icon in the upper-right corner of the Property inspector.
-
43 Workspace and workflow More Help topics Document toolbar overview Standard toolbar overview Coding toolbar overview Style Rendering toolbar overview Property inspector overview Set text properties in the Property inspector Dock and undock panels Change attributes with the Tag inspector 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.
-
44 Workspace and workflow 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 (into Design, Live, or Code View). • Click the arrow on a button, then select an option from the menu.
-
45 Workspace and workflow Depending on the object, a corresponding object-insertion dialog box may appear, prompting you to browse to a file or specify parameters for an object. Or, Dreamweaver may insert code into the document, or open a tag editor or a panel for you to specify information before the code is inserted. For some objects, no dialog box appears if you insert the object in Design view, but a tag editor appears if you insert the object in Code view.
-
46 Workspace and workflow • To add a separator below an object, select an object in the Favorite Objects pane on the right, and then click the Add Separator button below the pane. 4 If you’re not in the Favorites category of the Insert panel, select that category to see your changes. Insert objects using buttons in the Favorites category ? Select the Favorites category from the Category pop-up menu of the Insert panel, and then click the button for any Favorites object that you added.
-
47 Workspace and workflow 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. Show horizontal Insert bar categories as a menu ? Right-click (Windows) or Control-click (Macintosh) a category tab in the horizontal Insert bar, and then select Show as Menus.
-
48 Workspace and workflow You can use Ctrl/Cmd+ Z to undo or Ctrl/Cmd + Y to redo all actions you perform in CSS Designer. The changes are automatically reflected in Live View and the relevant CSS file is also refreshed. To let you know that the related file has changed, the affected file’s tab is highlighted for a while (around 8 seconds). The CSS Designer panel consists of the following panes and options: All Lists all the CSS, media queries, and selectors associated with the current document.
-
49 Workspace and workflow If you collapse or expand the panes in CSS Designer, the sizes of the panes are remembered within a session. Sources and Media panes stick to the customized sizes until you change their sizes again. Note: When you select a page element, the most specific Selector is selected in the Selectors pane. To view the properties of a specific Selector, click the name of that Selector in the pane. To view all the selectors, you can choose All Sources in the Sources pane.
-
50 Workspace and workflow Define CSS Selectors 1 In the CSS Designer, select a CSS source in the Sources pane or a media query in the @Media pane. 2 In the Selectors pane, click . Based on the element selected in the document, CSS Designer smartly identifies and prompts you with the relevant selector (upto three rules). You can do one or more of the following: • Use the up or down arrow keys to make the suggested selector more specific or less specific.
-
51 Workspace and workflow Rearrange selectors Click the required selector and drag it to the new position with the Selectors pane.
-
52 Workspace and workflow Click the values and type the required value. If you want all the four values to be the same and changed simultaneously, click the link icon ( )at the center. At any point in time, you can disable ( the right, top, and bottom values. ) or delete ( ) specific values, for example, left margin value while retaining Set border properties Border Control properties are organized into logical tabs to help you quickly view or modify the properties.
-
53 Workspace and workflow Border color set to black for all sides Last updated 11/30/2015
-
54 Workspace and workflow The code that is inserted is based on the preference setting for shorthand or longhand. Delete and disable controls are available for individual properties as before Dreamweaver CC 2014. Now, you can use the delete and disable controls at the Border Control group level to apply these actions to all the properties. During Inspect, the tabs are focused based on the priority of the "set" tabs.
-
55 Workspace and workflow Keyboard shortcuts You can add or delete CSS selectors and properties using keyboard shortcuts. You can also navigate between the property groups in the Properties pane.
-
56 Workspace and workflow To lock-in the highlight for the elements, click the Selector. The elements now are highlighted with a blue border. To remove the blue highlight around the elements, the Selector again. Note: The following table summarizes the scenarios where Live Highlight is not available. Mode Live Code Live Highlight displayed? Code NA NA Design NA NA Live ON (button is pressed) No OFF Yes Disable Live Highlight Live Highlight is enabled by default.
-
57 Workspace and workflow More Help topics Laying out pages with CSS CSS3 transition effects DOM panel The DOM panel renders an interactive HTML tree for static and dynamic content. This view helps you visually map elements in Live View with their HTML markup and the applied selectors in CSS Designer. You can also make edits to the HTML structure in the DOM panel and see the changes take effect instantly in Live View. Video: Navigate your HTML(Watch, 6 min) View and modify HTML structure.
-
58 Workspace and workflow You can move around the DOM panel and place it at any convenient location on the user interface. You can also dock the panel along with other panels. How to use the DOM panel 1 Open the required document and then open the DOM panel by selecting Window > DOM. 2 Switch to Live view and click the element that you want to inspect or edit. • The HTML markup of the selected element is highlighted in the DOM panel. • The applied selector is highlighted in CSS Designer.
-
59 Workspace and workflow You can undo (Ctrl/Cmd + Z) or redo (Ctrl/Cmd + Y) the operations that you perform in the DOM panel.
-
60 Workspace and workflow A Location where the dragged element is placed B Reference element C Element being moved Important: If your page contains JavaScript, the right-click menu in the DOM panel gets displayed for a while and then becomes unavailable. To use the right-click menu, hide the Live View displays (Live View options > Hide Live View Displays), and then disable JavaScript (Live View options > Disable JavaScript).
-
61 Workspace and workflow Zoom in and out Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article. Dreamweaver lets you increase the magnification (zoom in) in the Document window so that you can check the pixel accuracy of graphics, select small items more easily, design pages with small text, design large pages, and so on.
-
62 Workspace and workflow Keyboard shortcuts Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article. Create a reference sheet for the current shortcut set A reference sheet is a record of the current shortcut set. The information is stored in HTML table format. You can view the reference sheet in a web browser or print it.
-
63 Workspace and workflow Change Adds the key combination shown in the Press Key to the list of shortcuts, or changes the selected shortcut to the specified key combination. Duplicate Set Duplicates the current set. Give the new set a name; the default name is the current set’s name with the word copy appended. Rename Set Renames the current set. Export as HTML File Saves the current set in an HTML table format for easy viewing and printing.
-
64 Workspace and workflow Note: If there is a problem with the key combination (for example, if the key combination is already assigned to another command), an explanatory message appears just below the Shortcuts field and you may be unable to add or edit the shortcut. About keyboard shortcuts and non-U.S. keyboards The default Dreamweaver keyboard shortcuts work primarily on U.S.-standardized keyboards.
-
65 Workspace and workflow Note: The Components panel is enabled only if you open a ColdFusion page. A server behavior is the set of instructions inserted in a dynamic page at design time and executed on the server at run time. For a tutorial on setting up the development workspace, see www.adobe.com/go/vid0144. 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).
-
66 Workspace and workflow Note: You cannot apply a schema or catalog in Dreamweaver if you’re developing a ColdFusion application, or using Microsoft Access. 1 Open a dynamic page in Dreamweaver; then open the Databases panel (Window > Databases). • If the database connection exists, right-click (Windows) or Control-click (Macintosh) the connection in the list, and select Edit Connection from the pop-up menu.
-
67 Workspace and workflow CEF integration Dreamweaver is now integrated with the Chromium Embedded Framework (CEF), an open source framework based on the Google Chromium project. This integration enables Dreamweaver to control resource loading, navigation, context menus, printing and more, while taking advantage of the same performance and HTML5 technologies available in the Google Chrome Web browser.
-
68 Workspace and workflow Inspect The new inspect mode is the same as Google Chrome’s inspect. The “Margin” is marked in yellow and the “Padding” in purple. A set of horizontal and vertical rulers appear when you hover your mouse over the elements. The rulers appear at top/bottom and left/right, based on the position of the element. The rulers show the value of the margin, padding, width, and border properties applied to the element.
-
69 Workspace and workflow Fluid Grid pages When the FG Layout guides are turned OFF, Live view uses CEF Webkit for rendering. Fluid Grid pages in Live view with FG Layout guides ON continues to use the old Apollo Webkit for rendering. Live view features such as Navigation (address bar), Inspect Mode, and Live Code are available only in the CEF mode. Error strings The appearance of error strings in Dreamweaver now is the same as those in Google Chrome.
-
70 Workspace and workflow Code navigator Code Navigator parses the document and lists all the styles applicable to the called element. It uses Browser control to render the contents. When you hover your mouse; on any of the selectors, all the associated CSS properties are shown as tool tip. When you click a selector, the insertion point is taken to the corresponding code.
-
71 Chapter 3: Site management About Dreamweaver sites A Adobe Dreamweaver site is a collection of all of the files and assets in your website. You can create web pages on your computer, upload them to a web server, and maintain the site by transferring updated files whenever you save them. You can also edit and maintain websites that were created without Dreamweaver.
-
72 Site management The following example shows a sample local root folder on the left and a sample remote folder on the right. The local root folder on the local machine maps directly to the remote folder on the web server, rather than to any of the remote folder’s sub folders, or folders that exist above the remote folder in the directory structure. Note: The above example illustrates one local root folder on the local machine, and one top-level remote folder on the remote web server.
-
73 Site management Set up a local version of your site To set up a local version of your site, all you need to do is specify the local folder where you’ll store all of your site files. The local folder can be on your local computer or on a network server. You can use the Manage Sites dialog box in Dreamweaver to set up multiple sites and manage them. 1 Identify or create the folder on your computer where you want to store the local version of your site files. (The folder can be anywhere on your computer.
-
74 Site management 2 Click New to set up a new site, or select an existing Dreamweaver site and click the edit icon. 3 In the Site Setup dialog box, select the Servers category and do one of the following: • Click the Add New Server button to add a new server • Select an existing server and click the Edit Existing Server button The following illustration shows the Basic screen of the Server category with the text fields already populated. 4 In the Server Name text box, specify a name for the new server.
-
75 Site management 10 In the Root Directory text box, enter the directory (folder) on the remote server where you store documents that are visible to the public. If you’re uncertain about what to enter as the root directory, contact the server’s administrator or leave the text box blank. On some servers, your root directory is the same as the directory you first connect to with FTP. To find out, connect to the server.
-
76 Site management 5 Select SFTP from the Connect Using pop-up menu. 6 Specify the other options in the dialog box based on one of the applicable scenarios below: • Scenario 1: No key, but have user name and password • Scenario 2: Have a key that does not require a passphrase • Scenario 3: Have a key that requires a passphrase Scenario 1 You do not have a key and want to establish an SFTP connection using only the credentials - combination of user name and password.
-
77 Site management 1 Enter a friendly name for the server. 2 From the Connect list, click SFTP, and enter a valid SFTP address and port. 3 For the authentication method, click Private Key File, and then provide the following: • User name • A valid Identity File • Leave the Passphrase blank and select Save Passphrase Note: Dreamweaver supports only OpenSSH key files. To verify the connection, click Test. 4 Enter a valid Root Directory. 5 Enter a valid Web URL. 6 Click Save.
-
78 Site management 1 Enter a friendly name for the server. 2 From the Connect list, click SFTP, and enter a valid SFTP address and port. 3 For the authentication method, click Private Key File, and then provide the following: • User name • A valid Identity File • Passphrase for the Identity File Note: Dreamweaver supports only OpenSSH key files. To verify the connection, click Test. 4 Enter a valid Root Directory. 5 Enter a valid Web URL. 6 Click Save.
-
79 Site management Note: This procedure describes options specific to FTPS. For information on regular FTP options, see the previous section. 1 Select Site > Manage Sites. 2 Click New to set up a new site, or select an existing Dreamweaver site and click Edit. 3 In the Site Setup dialog box, select the Servers category and do one of the following: • Click the “+” (Add New Server) button to add a new server. • Select an existing server and click the Edit Existing Server button.
-
80 Site management 6 Click the folder icon beside the Server Folder text box to browse to and select the folder where you store your site files. 7 In the Web URL text box enter the URL of your website (for example, http://www.mysite.com). Dreamweaver uses the Web URL to create site root-relative links, and to verify links when you use the link checker. For a more extensive explanation of this option, see Advanced Settings category. 8 Click Save to close the Basic screen.
-
81 Site management RDS connections Use this setting if you connect to your web server using Remote Development Services (RDS). For this connection method, your remote server must be on a computer running Adobe® ColdFusion® 1 Select Site > Manage Sites. 2 Click New to set up a new site, or select an existing Dreamweaver site and click Edit.
-
82 Site management 6 Select Automatically Upload Files to Server on Save if you want Dreamweaver to upload your file to your remote site when you save the file. 7 Select Enable File Check Out if you want to activate the Check In/Out system. 8 If you are using a Testing server, select a server model from the Server Model pop-up menu. For more information, see . Connect to or disconnect from a remote folder with network access ? You don’t need to connect to the remote folder; you’re always connected.
-
83 Site management Getting and putting files to and from your server Checking in and checking out files Manage Sites dialog box options The Manage Sites dialog box is your gateway into various Dreamweaver site functions. From this dialog box, you can initiate the process for creating a new site, editing an existing site, duplicating a site, removing a site, or importing or exporting a site’s settings. Note: The Manage Sites dialog box does not let you connect to or publish files to a remote server.
-
84 Site management Manage Sites dialog box options (CS5 and CS5.5) 1 Select Site > Manage Sites and select a site from the list on the left. 2 Click a button to select one of the options, make any changes you need to make, and click Done. New Enables you to create a new site. When you click the New button the Site Setup dialog box opens, letting you name and specify the location for your new site. For more information, see Set up a local version of your site .
-
85 Site management Note: You must specify a Web URL in the Basic screen when specifying a testing server. For more information, see the next section. 5 Under Testing Server, select the server model you want to use for your web application. Note: As of Dreamweaver CS5, Dreamweaver no longer installs ASP.NET, ASP JavaScript, or JSP server behaviors. (You can manually re-enable the deprecated server behaviors if you wish, but keep in mind that Dreamweaver no longer officially supports them.
-
86 Site management Web server Web URL ColdFusion MX 7 http://localhost:8500/warehouse/ IIS http://localhost/warehouse/ Apache (Windows) http://localhost:80/warehouse/ Jakarta Tomcat (Windows) http://localhost:8080/warehouse/ Note: By default the ColdFusion MX 7 web server runs on port 8500, the Apache web server runs on port 80, and the Jakarta Tomcat web server runs on port 8080.
-
87 Site management You can then choose the files that you want to push to the testing server. Note: You can select Always Auto Save the Dependent Files to not see the prompt for subsequent operations. To revert this preference at any point in time, go to the settings of the testing server (Site Setup), and in the Advanced tab, uncheck Always Auto Save Dependent Files. Scenario 2: You make changes to the source code and dependent files. The focus is on one of the dependent files when you click Save.
-
88 Site management 4 Choose the testing server and click the edit icon. 5 In the popup that appears, click Advanced. 6 Deselect Automatically Push Files To Testing Server. Version Control and Advanced settings Access the Version Control and Advanced settings categories in the Site Setup dialog box by choosing Site > Manage Sites, selecting the site you want to edit, and clicking Edit. Version Control category You can get and check in files using Subversion.
-
89 Site management For example, let’s say that you’ve specified http://www.mysite.com/mycoolsite (the remote server’s site root directory) as the Web URL, and that you also have an images folder in the mycoolsite directory on the remote server (http://www.mysite.com/mycoolsite/images). Let’s also say that your index.html file is in the mycoolsite directory. When you create a site root-relative link from the index.
-
90 Site management 2 Select one or more sites whose settings you want to export and click Export (CS5/CS5.5) or the Export button (CS6 and later): • To select more than one site, Control-click (Windows) or Command-click (Macintosh) each site. • To select a range of sites, Shift-click the first and last site in the range. 3 If you want to back up your site settings for yourself, select the first option in the Exporting Site dialog box and click OK.
-
91 Site management Make sure to choose the correct root folder for the remote site. 3 In the Files panel (Window > Files), click the Connects To Remote Host button (for FTP access) or the Refresh button (for network access) in the toolbar to view the remote site. 4 Edit the site: • If you want to work with the entire site, select the root folder of the remote site in the Files panel, and click Get File(s) in the toolbar to download the entire site to your local disk.
-
92 Site management If there is no response after the specified amount of time, Dreamweaver displays a warning dialog box alerting you to this fact. FTP Transfer options Determines whether Dreamweaver selects the default option, after a specified number of seconds, when a dialog box appears during a file transfer and there is no user response. Proxy Host Specifies the address of the proxy server through which you connect to outside servers if you are behind a firewall.
-
93 Site management When Dreamweaver queries for a connection to the Internet, it will recognize that the credentials have already been set and stored in the Creative Cloud desktop app and leverages them.
-
94 Site management Note: Contact your system administrator if you need assistance with the proxy server credentials.
-
95 Chapter 4: File management Creating and opening documents The user interface in Dreamweaver CC and later has been simplified. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article. About creating Dreamweaver documents Dreamweaver offers a flexible environment for working with a variety of web documents.
-
96 File management photographs, images using textures, images with gradient color transitions, and any images that require more than 256 colors. XML Extensible Markup Language files have a .xml extension. They contain data in a raw form that can be formatted using XSL (Extensible Stylesheet Language). XSL Extensible Stylesheet Language files have a .xsl or .xslt extension. They are used to style XML data that you want to display on a web page.
-
97 File management This option is particularly useful when you want to use the same CSS layout (the CSS rules for which are contained in a single file) across multiple documents. 6 (Optional) You can also attach CSS style sheets to your new page (unrelated to the CSS layout) when you create the page. To do this, click the Attach Style Sheet icon above the Attach CSS File pane and select a CSS style sheet.
-
98 File management Liquid Column width is specified as a percentage of the site visitor’s browser width. The design adapts if the site visitor makes the browser wider or narrower, but does not change based on the site visitor’s text settings. 5 Select a document type from the DocType pop-up menu. In most cases, you will want to leave this selected to the default selection, XHTML 1.0 Transitional.
-
99 File management Avoid using spaces and special characters in file and folder names and do not begin a filename with a numeral. In particular, do not use special characters (such as é, ç, or ¥) or punctuation (such as colons, slashes, or periods) in the names of files you intend to put on a remote server; many servers change these characters during upload, which will cause any links to the files to break.
-
100 File management In Dreamweaver CC, select Starter Templates category. 3 In the Sample Folder column, select CSS Style Sheet or Mobile Starters; then select a sample file from the list on the right. Note: CSS Style Sheet option is removed in Dreamweaver CC and later 4 Click the Create button. The new document opens in the Document window (Code and Design views). If you selected CSS Style Sheet, the CSS style sheet opens in Code view. 5 Save the document (File > Save).
-
101 File management Save all open documents 1 Select File > Save All. 2 If there are any unsaved documents open, the Save As dialog box is displayed for each unsaved document. In the dialog box that appears, navigate to the folder where you want to save the file. 3 In the File Name box, type a name for the file and click Save. Revert to the last saved version of a document 1 Select File > Revert. A dialog box asks if you want to discard your changes, and revert to the previously saved version.
-
102 File management There are four Unicode Normalization Forms. The most important is Normalization Form C because it's the most common one used in the Character Model for the World Wide Web. Adobe provides the other three Unicode Normalization Forms for completeness. Show New Document Dialog Box on Control+N Deselect this option (“on Command+N” for Macintosh) to automatically create a document of the default document type when you use the key command.
-
103 File management To clean up HTML or XHTML that was not generated by Microsoft Word, use the Cleanup HTML command. You can also open non-HTML text files, such as JavaScript files, XML files, CSS style sheets, or text files saved by word processors or text editors. 1 Select File > Open. You can also use the Files panel to open files. 2 Navigate to and select the file you want to open.
-
104 File management 3 Hover over the items in the Code Navigator to see more information about them. For example, if you want to change a particular CSS color property, but don’t know which rule it resides in, you can find the property by hovering over the available rules in the Code Navigator. 4 Click the item you’re interested in to open the corresponding related file. Return to the source code of the main document ? Click the Source Code button in the Related Files toolbar.
-
105 File management • Set up a PHP application server. Note: The server must be running before you attempt to work with Dynamically-Related Files in Dreamweaver. • Install WordPress, Drupal, or Joomla! on the application server. For more information, see: • WordPress Installation • Drupal Installation • Joomla Installation • In Dreamweaver, define a local folder where you’ll download and edit your CMS files.
-
106 File management The Custom Filter dialog only allows for the filtering of exact file names (style.css), file extensions (.php), and wildcard expressions using asterisks (*menu*). You can filter on multiple wildcard expressions by separating each expression with a semi-colon (for example, style.css;*.js;*tpl.php). Note: Filter settings do not persist once you close the file.
-
107 File management More Help topics Understanding Cascading Style Sheets XHTML code Business Catalyst InContext Editing Laying out pages with CSS Save frame and frameset files Understanding document encoding Clean up code Start an external editor for media files Work with files in the Files panel Switch between views in the Document window Navigate to related code Previewing pages in Dreamweaver Managing files and folders About managing files and folders Dreamweaver includes a Files panel that helps you
-
108 File management A Site pop-up menu B Connect/Disconnect C Refresh D View site FTP log E Site files view F Testing server G Repository view H Get File(s) I Put File(s) J Check Out File(s) K Check In File(s) L Synchronize M Expand/Collapse Note: The Site Files view, Testing Server view, and Synchronize buttons appear only in the expanded Files panel. The Site pop-up menu Lets you select a Dreamweaver site and display that site’s files.
-
109 File management View files and folders You can view files and folders in the Files panel, whether they are associated with a Dreamweaver site or not. When you view sites, files, or folders in the Files panel, you can change the size of the viewing area, and, for Dreamweaver sites, you can expand or collapse the Files panel. For Dreamweaver sites, you can also customize the Files panel by changing the view—either your local or remote site— that appears by default in the collapsed panel.
-
110 File management A Site Files B Testing Server C Repository Files Note: Before you can view a remote site, testing server or repository, you must set up a remote site, testing server, or SVN repository. View files outside of a Dreamweaver site ? Navigate your computer using the Site pop-up menu, much as you would if you were using Windows Explorer(Windows) or the Finder (Macintosh).
-
111 File management • Right-click (Windows) or Control-click (Macintosh) the file’s icon, then select Edit > Rename. 3 Type the new name over the existing name. 4 Press Enter (Windows) or Return (Macintosh). Move a file or folder 1 In the Files panel (Window > Files), select the file or folder you want to move. 2 Do one of the following: • Copy the file or folder, then paste it in a new location. • Drag the file or folder to a new location.
-
112 File management 2 Right-click (Windows) or Control-click (Macintosh), then select Locate in Local Site or Locate in Local Site (depending on where you selected the file). Dreamweaver selects the file in the Files panel. Locate and select files that are newer in the local site than in the remote site ? In the collapsed Files panel (Window > Files), click the Options menu in the upper-right corner of the Files panel, then select Edit > Select Newer Local.
-
113 File management Dreamweaver displays all the files with no incoming links. This means that no files in your site link to these files. 3 Select the files you want to delete and press Delete. Note: Although no other file in the site links to these files, some of the listed files may link to other files. Use caution when deleting the files.
-
114 File management 2 Navigate to a file, then do any of the following: • Open files in Dreamweaver or another application • Rename files • Copy files • Delete files • Drag files When you drag a file from one Dreamweaver site to another or to a folder that is not part of a Dreamweaver site, Dreamweavercopies the file to the location where you drop it. If you drag a file within the same Dreamweaver site, Dreamweavermoves the file to the location where you drop it.
-
115 File management 6 Select a value from the Associate with Design Notes menu, or type in your own. Note: You must associate a new column with a Design Note, so that there is data to display in the Files panel. 7 Select an alignment to determine how text is aligned within the column. 8 Select or deselect Show to reveal or hide the column. 9 Select Share with All Users of This Site to share the column with all users connected to the remote site.
-
116 File management • Preview data in Live view • Insert a web service • Delete remote files or folders • Preview in a browser on a testing server • Save a file to a remote server • Insert an image from a remote server • Open a file from a remote server • Auto put files upon saving • Drag files to the remote site • Cut, copy, or paste files on the remote site • Refresh Remote view By default, the Background File Activity dialog box is open during file transfers.
-
117 File management Dreamweaver downloads the selected files, as follows: • If you’re using the Check In/Check Out system, getting a file results in a read-only local copy of the file; the file remains available on the remote site or testing server for other team members to check out. • If you’re not using the Check In/Check Out system, getting a file results in a copy that has both read and write privileges.
-
118 File management Put files on a remote or testing server using the Files panel 1 In the Files panel (Window > Files), select the files to upload. Usually you select these in the Local view, but you may select the corresponding files in the Remote view if you prefer. Note: You can put only those files for which the local version is more recent than the remote version. 2 Do one of the following to put the file on the remote server: • Click the Put button in the Files panel toolbar.
-
119 File management Cancel a file transfer ? Click the Cancel button in the Background File Activity dialog box. If the dialog box isn’t showing, click the File Activity button at the bottom of the Files panel. Show the Background File Activity dialog box during transfers ? Click the File Activity or Log button at the bottom of the Files panel. Note: You cannot hide or remove the Log button. It’s a permanent part of the panel.
-
120 File management Checking in a file makes the file available for other team members to check out and edit. When you check in a file after editing it, your local version becomes read-only and a lock symbol appears beside the file in the Files panel to prevent you from making changes to the file. Dreamweaver does not make checked-out files read-only on the remote server. If you transfer files with an application other than Dreamweaver, you can overwrite checked-out files.
-
121 File management Note: You can select files in the Local or Remote view, not the Testing Server view. A red check mark indicates that another team member has the file checked out and a lock symbol indicates that the file is read-only (Windows) or locked (Macintosh). 2 Do one of the following to check out the file(s): • Click the Check Out button in the Files panel toolbar. • Right-click (Windows) or Control-click (Macintosh), then select Check Out from the context menu.
-
122 File management Undo a file check-out If you check out a file, then decide not to edit it (or decide to discard the changes you made), you can undo the checkout operation and the file returns to its original state. To undo a file check-out, do one of the following: • Open the file in the Document window, then select Site > Undo Check Out. • In the Files panel (Window > Files), right-click (Windows) or Control-click (Macintosh), then select Undo Check Out.
-
123 File management Note: Dreamweaver CS5 uses the Subversion 1.6.6 client library, and Dreamweaver CS5.5 uses the 1.6.9 client library. Later versions of the Subversion client library are not backward-compatible. Be aware, if you update a third-party client application (for example, TortoiseSVN) to work with a later version of Subversion, the updated Subversion application will update local Subversion meta data, and Dreamweaver will no longer be able to communicate with Subversion.
-
124 File management 5 Click Test to test your connection, or click OK to close the dialog box. Then click Done to close the Manage Sites dialog box. Once the connection with the server established, your SVN repository is available for viewing in the Files panel. To view in the expanded it, you can select Repository View from the View pop-up menu, or click the Repository Files button Files panel.
-
125 File management Update status of files or folders in the repository You can update the SVN status of a single file or folder. The update does not refresh the entire display. 1 Make sure that you’ve successfully set up an SVN connection. 2 Display the SVN repository files by selecting Repository View from the View pop-up menu in the Files panel, or by clicking the Repository Files button in the expanded Files panel.
-
126 File management 2 Do one of the following: • Display the SVN repository files by selecting Repository View from the View pop-up menu in the Files panel, or by clicking the Repository Files button in the expanded Files panel. Then right-click (Windows) or Control-click (Macintosh) the file you’re interested in and select Lock or Unlock. • Display the local version of your SVN files in the Files panel by selecting Local view from the View pop-up menu.
-
127 File management Go offline You might find it useful to avoid repository access during other file-transfer activities by going off-line. Dreamweaver will reconnect to the SVN repository as soon as you invoke an activity that requires a connection (Get Latest Versions, Commit, and so on). 1 Make sure that you’ve successfully set up an SVN connection. 2 Display the local version of your SVN files in the Files panel by selecting Local view from the View pop-up menu.
-
128 File management Note: If your remote site is an FTP server (rather than a networked server), then synchronizing your files uses FTP. Before you synchronize your sites, you can verify which files you want to put, get, delete, or ignore. Dreamweaver also confirms which files have been updated after you complete the synchronization.
-
129 File management Note: Before you can synchronize the files, you must preview the actions Dreamweaver performs to accomplish this task. If the newest version of each chosen file is already in both locations and nothing needs to be deleted, an alert appears informing you that no synchronization is necessary. Otherwise, the Synchronize dialog box appears to let you change the actions (put, get, delete, and ignore) for those files before executing the synchronization.
-
130 File management 3 Do one of the following: • In Windows, click the Browse button and select the application that compares files. • On the Macintosh, click the Browse button and select the tool or script that launches the file comparison tool from the command line, not the actual comparison tool itself. Launch tools or scripts are typically located in the /usr/bin folder on your Macintosh.
-
131 File management Note: If you have a one-button mouse, Control-click the local file instead. The file comparison tool starts and compares the two files. Compare a remote file to a local file You can compare a remote file to a local file. You must define a Dreamweaver site with remote settings before accomplishing this task. 1 In the Files panel, display the files on the remote server by selecting Remote View from the right pop-up menu.
-
132 File management Dreamweaver starts the comparison tool, which compares the local and remote versions of each file you selected. More Help topics Synchronizing files Cloaking files and folders in your Dreamweaver site About site cloaking Site cloaking enables you to exclude files and folders from operations such as Get or Put. You can also cloak all files of a particular type (JPEG, FLV, XML, and so on) from site operations.
-
133 File management • Select Cloaking > Settings to open the Cloaking category of the Site Setup dialog box. Select or deselect , and select or deselect Cloak Files Ending With to enable or disable cloaking for specific file types. You can enter or delete file suffixes in the text box that you want to cloak or uncloak. Cloak and uncloak site files and folders You can cloak specific files and folders, but you cannot cloak all files and folders or cloak an entire site.
-
134 File management Uncloak all files and folders You can uncloak all files and folders in a site at the same time. This action cannot be undone; there is no way to re-cloak all items that were previously cloaked. You have to re-cloak items individually. If you want to temporarily uncloak all folders and files, then re-cloak those items, disable site cloaking. 1 In the Files panel (Window > Files), select a site that has site cloaking enabled. 2 Select any file or folder in that site.
-
135 File management Enable and disable Design Notes for a site Design Notes are notes associated with a file, but stored in a separate file. Use Design Notes to keep track of extra file information associated with your documents, such as image source-filenames and comments on file status. You enable and disable Design Notes for a site in the Design Notes category of the Site Definition dialog box. When you enable Design Notes, you can also choose to share them with others, if you want.
-
136 File management Dreamweaver saves your notes to a folder called _notes, in the same location as the current file. The filename is the document’s filename, plus the extension .mno. For example, if the filename is index.html, the associated Design Notes file is named index.html.mno. Work with Design Notes After you associate a Design Note with a file, you can open the Design Note, change its status, or delete it.
-
137 File management More Help topics Start an external editor for media files Getting and putting files to and from your server Check files into and out of a remote folder Testing your Dreamweaver site Site testing guidelines Before uploading your site to a server and declaring it ready for viewing, it’s a good idea to test it locally. (In fact, it’s a good idea to test and troubleshoot your site frequently throughout its construction—you can catch problems early and avoid repeating them.
-
138 File management Use the discussion forums. The Dreamweaver discussion forums can be found on the Adobe website at www.adobe.com/go/dreamweaver_newsgroup. The forums are a great resource for getting information on different browsers, platforms, and so on. You can also discuss technical issues and share helpful hints with other Dreamweaver users. For a tutorial on troubleshooting publishing problems, see www.adobe.com/go/vid0164.
-
139 File management For example, STOP! is reported. Missing Alt Text Creates a report listing all the img tags that don’t have alternate text. Alternate text appears in place of images for text-only browsers or for browsers that have been set to download images manually. Screen readers read alternate text, and some browsers display alternate text when the user mouses over the image.
-
140 File management Check for browser compatibility Troubleshoot publishing problems tutorial Reports in Dreamweaver Test links in Dreamweaver Add and manage extensions in Dreamweaver Last updated 11/30/2015
-
141 Chapter 5: Layout and design Using visual aids for layout Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article. Set rulers Rulers help you measure, organize, and plan your layout. They can appear on the left and top borders of the page, marked in pixels, inches, or centimeters. • To toggle rulers on and off, select View > Rulers > Show.
-
142 Layout and design Note: When you resize elements, such as absolutely-positioned elements (AP elements), tables, and images, the resized elements snap to guides. Lock or unlock all guides ? Select View > Guides > Lock Guides. View and move a guide to a specific position 1 Hold the mouse pointer over the guide to view its position. 2 Double-click the guide. 3 Enter the new position in the Move Guide dialog box and click OK.
-
143 Layout and design Use the layout grid The grid displays a system of horizontal and vertical lines in the Document window. It is useful for placing objects precisely. You can make absolutely-positioned page elements automatically snap to the grid as you move them, and change the grid or control the snapping behavior by specifying grid settings. Snapping works whether or not the grid is visible. Show or hide the grid ? Select View > Grid > Show Grid.
-
144 Layout and design To switch to another tracing image or change the transparency of the current tracing image at any time, select Modify > Page Properties. Show or hide the tracing image ? Select View > Tracing Image > Show. Change the position of a tracing image ? Select View > Tracing Image > Adjust Position. • To precisely specify the position of the tracing image, enter coordinate values in the X and Y text boxes. • To move the image 1 pixel at a time, use the arrow keys.
-
145 Layout and design To view a set of frames in a browser, enter the URL of the frameset file; the browser then opens the relevant documents to display in the frames. The frameset file for a site is often named index.html, so that it displays by default if a visitor doesn’t specify a filename.
-
146 Layout and design For a full treatment of why you should not use frames, see Gary White’s explanation at http://apptools.com/rants/framesevil.php. The most common use of frames, if you do decide to use them, is for navigation. A set of frames often includes one frame containing a navigation bar and another frame to display the main content pages. Using frames in this way has a couple of advantages: • A visitor’s browser doesn’t need to reload the navigation-related graphics for every page.
-
147 Layout and design For example, the most common frame layout has one frame in the top row (where the company’s logo appears) and two frames in the bottom row (a navigation frame and a content frame). This layout requires a nested frameset: a two-row frameset, with a two-column frameset nested in the second row. A Main frameset B Menu frame and content frame are nested within the main frameset.
-
148 Layout and design Create frames and framesets There are two ways to create a frameset in Dreamweaver: You can select from several predefined framesets or you can design it yourself. Choosing a predefined frameset 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.
-
149 Layout and design 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 Optiondrag (Macintosh) a frame border.
-
150 Layout and design In the Document window’s Design view, when a frame is selected, its borders are outlined with a dotted line; when a frameset is selected, all the borders of the frames within the frameset are outlined with a light dotted line. Note: Placing the insertion point in a document that’s displayed in a frame is not the same as selecting a frame. There are various operations (such as setting frame properties) for which you must select a frame.
-
151 Layout and design • To select the first child frame or frameset of the currently selected frameset (that is, first in the order in which they’re defined in the frameset file), press Alt+Down Arrow (Windows) or Command+Down Arrow (Macintosh). Open a document in a frame You can specify the initial content of a frame by either inserting new content into an empty document in a frame, or opening an existing document in a frame. 1 Place the insertion point in a frame. 2 Select File > Open in Frame.
-
152 Layout and design You may also want to set some frame attributes, such as the title attribute (which is not the same as the name attribute), to improve accessibility. You can enable the accessibility authoring option for frames to set attributes when you create frames, or you can set attributes after inserting a frame. To edit accessibility attributes for a frame, use the Tag inspector to edit the HTML code directly.
-
153 Layout and design Set accessibility values for a frame 1 In the Frames panel (Window > Frames), select a frame by placing the insertion point in one of the frames. 2 Select Modify > Edit Tag
-
154 Layout and design RowCol Selection Sets frame sizes for rows and columns of the selected frameset, click a tab on the left side or top of the RowCol Selection area; then enter a height or width in the Value text box. 3 To specify how much space the browser allocates to each frame, select from the following choices in the Units menu: Pixels Sets the size of the selected column or row to an absolute value. Choose this option for a frame that should always be the same size, such as a navigation bar.
-
155 Layout and design • _self opens the link in the current frame, replacing the content in that frame. • _top opens the linked document in the current browser window, replacing all frames. Frame names also appear in this menu. Select a named frame to open the linked document in that frame. Note: Frame names appear only when you’re editing a document within a frameset. When you edit a document in its own Document window, frame names do not appear in the Target pop-up menu.
-
156 Layout and design Apply the Set Nav Bar Image behavior Apply the Jump Menu behavior Laying out pages with CSS About CSS page layout A CSS page layout uses the Cascading Style Sheets format, rather than traditional HTML tables or frames, to organize the content on a web page. The basic building block of the CSS layout is the div tag—an HTML tag that in most cases acts as a container for text, images, and other page elements.
-
157 Layout and design A Container div B Sidebar div C Main Content div Following is the code for all three div tags in the HTML:
