Adobe Dreamweaver CC
Dreamweaver workflow overview
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. After you’ve organized your information and determined a structure, you can begin creating your site. (See About Dreamweaver sites.)
In the Files panel you can easily add, delete, and rename files and folders to change the organization as needed. The Files panel also has many tools for managing your site, transferring files to and from a remote server, setting up a Check In/Check Out process to prevent files from being overwritten, and synchronizing the files on your local and remote sites. From the Assets panel, you can easily organize the assets in a site; you can then drag most assets directly from the Assets panel into a Dreamweaver document. You can also use Dreamweaver to manage aspects of your Adobe®Contribute® sites. (See Managing files and folders and Managing assets and libraries.)
Choose the layout technique that works for you, or use the Dreamweaver layout options in conjunction with one another to create your site’s look. You can use Dreamweaver AP elements, CSS positioning styles, or predesigned CSS layouts to create your layout. The table tools let you design pages quickly by drawing and then rearranging the page structure. If you want to display multiple elements at once in a browser, you can use frames to lay out your documents. Finally, you can create new pages based on a Dreamweaver template, then update the layout of those pages automatically when the template changes. (See Creating pages with CSS and Laying out pages with HTML.)
Add assets and design elements such as text, images, rollover images, image maps, colors, movies, sound, HTML links, jump menus, and more. You can use built-in page-creation features for such elements as titles and backgrounds, type directly in the page, or import content from other documents. Dreamweaver also provides behaviors for performing tasks in response to specific events, such as validating a form when the visitor clicks the Submit button or opening a second browser window when the main page has finished loading. Finally, Dreamweaver provides tools for maximizing website performance and for testing pages to ensure compatibility with different web browsers. (See Adding content to pages.)
Coding web pages by hand is another approach to creating pages. Dreamweaver provides easy-to-use visual editing tools, but it also provides a sophisticated coding environment; you can use either approach, or both, to create and edit your pages. (See Working with page code.)
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.)
In Dreamweaver, you can define a variety of sources of dynamic content, including recordsets extracted from databases, form parameters, and JavaBeans components. To add the dynamic content to a page, simply drag it onto the page.
You can set your page to display one record or many records at a time, display more than one page of records, add special links to move from one page of records to the next (and back), and create record counters to help users keep track of the records. You can encapsulate application or business logic using technologies such as Adobe® ColdFusion® and web services. If you need more flexibility, you can create custom server behaviors and interactive forms. (See Making pages dynamic.)
Testing your pages is an ongoing process that happens throughout the development cycle. At the end of the cycle, you publish the site on a server. Many developers also schedule periodic maintenance to ensure that the site remains current and functional. (See Getting and putting files to and from your server.)
Workspace layout overview
The Dreamweaver workspace lets you view documents and object properties. The workspace also places many of the most common operations in toolbars so that you can quickly make changes to your documents.
A. Document toolbar B. Application bar C. Document window D. Workspace switcher E. Panel groups F. Tag selector G. Property inspector H. Files panel
A. Document toolbar B. Application bar C. Document window D. Workspace switcher E. Panel groups F. Files panel G. Property Inspector H. Tag selector
Workspace elements overview
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 a tutorial.
The Application bar
Across the top of the application window contains a workspace switcher, menus (Windows only), and other application controls.
The Document toolbar
Contains buttons that provide options for different views of the Document window (such as Design view and Code view), various viewing options, and some common operations such as previewing in a browser.
The Standard toolbar
To display the Standard toolbar, select View > Toolbars > Standard. The toolbar contains buttons for common operations from the File and Edit menus: New, Open, Browse in Bridge, Save, Save All, Print Code, Cut, Copy, Paste, Undo, and Redo.
The Coding toolbar
(Displayed in Code view only.) Contains buttons that let you perform many standard coding operations.
The Style Rendering toolbar
To display the Standard toolbar, select View > Toolbars > Style Rendering. The toolbar contains buttons that let you see how your design would look in different media types if you use media-dependent style sheets. It also contains a button that lets you enable or disable Cascading Style Sheets (CSS) styles.
Style Rendering toolbar is removed in Dreamweaver CC and later.
The Property inspector
Lets you view and change a variety of properties for the selected object or text. Each object has different properties. The Property Inspector is not expanded by default in the Coder workspace layout.
The Tag selector
Located in the Status bar at the bottom of the Document window. Shows the hierarchy of tags surrounding the current selection. Click any tag in the hierarchy to select that tag and all its contents.
Help you monitor and modify your work. Examples include the Insert panel, the CSS Styles panel, and the Files panel. To expand a panel, double-click its tab.
The Insert panel
Contains buttons for inserting various types of objects, such as images, tables, and media elements, into a document. Each object is a piece of HTML code that lets you set various attributes as you insert it. For example, you can insert a table by clicking the Table button in the Insert panel. If you prefer, you can insert objects using the Insert menu instead of the Insert panel.
The Files panel
Lets you manage your files and folders, whether they are part of a Dreamweaver site or on a remote server. The Files panel also lets you access all the files on your local disk.
Document window overview
The Document window shows the current document. To switch to a document, click its tab.
You can select any of the following views.
A design environment for visual page layout, visual editing, and rapid application development. In this view, Dreamweaver displays a fully editable, visual representation of the document, similar to what you would see when viewing the page in a browser.
Split Code view
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
Lets you see both Code view and Design view for the same document in a single window.
Similar to Design view, Live view displays a more realistic representation of what your document will look like in a browser, and lets you interact with the document exactly as you would in a browser. Live view is not editable. However, you can edit in Code view and refresh Live view to see your changes.
Live Code view
Only available when viewing a document in Live view. Live Code view displays the actual code that a browser uses to execute the page, and can dynamically change as you interact with the page in Live view. Live Code view is not editable.
When a Document window is maximized (the default), tabs appear at the top of the Document window showing the filenames of all open documents. Dreamweaver displays an asterisk after the filename if you’ve made changes that you haven’t saved yet.
Document toolbar overview
The Document toolbar contains buttons that let you toggle between different views of your document quickly. The toolbar also contains some common commands and options related to viewing the document and transferring it between the local and remote sites. The illustration below shows the expanded Document toolbar.
A. Show code view B. Show code and design view C. Show design view D. Live view E. Multiscreen F. Preview/Debug in browser G. File management H. W3C validation I. Check browser compatibility J. Visual aids K. Refresh design view L. Document title
A. Show code view B. Show code and design view C. Show design view D. Live view E. Preview/Debug in browser F. Document title G. File management
Show Code and Design Views
Splits the Document window between the Code and the Design views. When you select this combined view, the option Design View on Top becomes available in the View Options menu.
Show Design View
Displays only the Design view in the Document window.
Preview/Debug in Browser
Allows you to preview or debug your document in a browser. Select a browser from the pop-up menu.
Refresh Design View
Refreshes the document’s Design view after you make changes in Code view. Changes you make in Code view don’t automatically appear in Design view until you perform certain actions, such as saving the file or clicking this button.
note: Refreshing also updates code features that are DOM (Document Object Model) dependent, such as the ability to select a code block’s opening or closing tags.
Allows you to enter a title for your document, to be displayed in the browser’s title bar. If your document already has a title, it appears in this field.
Standard toolbar overview
The Standard toolbar contains buttons for common operations from the File and Edit menus: New, Open, Browse in Bridge, Save, Save All, Print Code, Cut, Copy, Paste, Undo, and Redo. Use these buttons just as you would use the equivalent menu commands.
Style Rendering toolbar overview
Style Rendering toolbar is removed in Dreamweaver CC and later.
The Style Rendering toolbar (hidden by default) contains buttons that let you see how your design would look in different media types if you use media-dependent style sheets. It also contains a button that lets you enable or disable CSS styles. To display the toolbar, select View > Toolbars > Style Rendering.
This toolbar only works if your documents use media-dependent style sheets. For example, your style sheet might specify a body rule for print media and a different body rule for handheld devices. For more information on creating media-dependent style sheets, see the World Wide Web Consortium website at www.w3.org/TR/CSS21/media.html.
By default, Dreamweaver displays your design for the screen media type (which shows you how a page is rendered on a computer screen). You can view the following media type renderings by clicking the respective buttons in the Style Rendering toolbar.
Render Handheld Media Type
Shows you how the page appears on a handheld device, such as a mobile phone or a BlackBerry device.
Toggle Displaying Of CSS Styles
Lets you enable or disable CSS styles. This button works independently of the other media buttons.
For a tutorial on designing style sheets for print and handheld devices, see www.adobe.com/go/vid0156.
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
A. Browser controls B. Address box C. Live view options
By default, links are not active in Live view. Having links non-active lets you select or click link text in the Document window without being taken to another page. To test links in Live view, you can enable one-time clicking or continuous clicking by selecting Follow Links or Follow Links Continuously from the View options menu to the right of the address box.
Coding toolbar overview
The Coding toolbar contains buttons that let you perform many standard coding operations, such as collapsing and expanding code selections, highlighting invalid code, applying, and removing comments, indenting code, and inserting recently used code snippets. The Coding toolbar appears vertically on the left side of the Document window, and is only visible when Code view is displayed.
You cannot undock or move the Coding toolbar, but you can hide it (View > Toolbars > Coding).
You can also edit the Coding toolbar to display more buttons (such as Word Wrap, Show Hidden Characters, and Auto Indent), or hide buttons that you don’t want to use. To do so, however, you must edit the XML file that generates the toolbar. For more information, see Extending Dreamweaver.
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. Select tool C. Hand tool D. Zoom tool E. Set magnification F. Mobile size G. Tablet size H. Desktop size I. Window size J. Download size / Download time K. Encoding format
A. Tag selector B. Mobile size C. Tablet size D. Desktop size E. Window size
Shows the hierarchy of tags surrounding the current selection. Click any tag in the hierarchy to select that tag and all its contents. Click <body> to select the entire body of the document. To set the class or ID attributes for a tag in the tag selector, right-click (Windows) or Control-click (Macintosh) the tag and select a class or ID from the context menu.
Enables and disables the Hand tool.
Lets you click the document and drag it in the Document window.
Zoom tool and Set Magnification pop-up menu
Let you set a magnification level for your document.
Window size pop-up menu
(Not available in Code view.) Lets you resize the Document window to predetermined or custom dimensions. When you change the view size of a page in design or live view only the dimensions of the view size change. The document size is unaltered.
In addition to predetermined and custom sizes, Dreamweaver also lists sizes specified in a media query. When you select a size corresponding to a media query, Dreamweaver uses the media query to display the page. You can also change the page orientation to preview the page for mobile devices where the page layout changes based on how the device is held.
Document size and download time
Shows the estimated document size and estimated download time for the page, including all dependent files such as images and other media files.
Shows the text encoding for the current document.
Property inspector overview
The Property Inspector lets you examine and edit the most common properties for the currently selected page element, such as text or an inserted object. The contents of the Property Inspector vary depending on the element selected. For example, if you select an image on your page, the Property Inspector changes to show properties for the image (such as the file path to the image, the width and height of the image, the border around the image, if any, and so on).
The Property Inspector is at the lower edge of the workspace by default, but you can undock it and make it a floating panel in the workspace.
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 Category pop-up menu. Additional categories appear when the current document contains server code, such as ASP or CFML documents.
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. For example, if you select Image Placeholder from the Image button’s pop-up menu, the next time you click the Image button, Dreamweaver inserts an image placeholder. Anytime you select a new option from the pop-up menu, the default action for the button changes.
The Insert panel is organized in the following categories:
The Common category
Lets you create and insert the most commonly used objects, such as images and tables.
The Layout category
Lets you insert tables, table elements, div tags, frames, and Spry widgets. You can also choose two views for tables: Standard (default) and Expanded Tables.
The Forms category
Contains buttons for creating forms and inserting form elements, including Spry validation widgets.
The Data category
Lets you insert Spry data objects as well as other dynamic elements like recordsets, repeated regions, and record insertion and update forms.
The InContext Editing category
Contains buttons for building InContext editing pages, including buttons for Editable Regions, Repeating Regions, and managing CSS classes.
The Text category
Lets you insert a variety of text- and list-formatting tags, such as b, em, p, h1, and ul.
The Favorites category
Lets you group and organize the Insert panel buttons you use the most in one common place.
Available only for pages that use a particular server language, including ASP, CFML Basic, CFML Flow, CFML Advanced, and PHP. Each of these categories provides server-code objects that you can insert in Code view.
Unlike other panels in Dreamweaver, you can drag the Insert panel out of its default dock position and drop it into a horizontal position at the top of the Document window. When you do so, it changes from a panel to a toolbar (though you cannot hide and display it in the same way as other toolbars).
Files panel overview
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.
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.
(CS5.5) 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. The current check-out status of files, however, is updated only when auto-updates are enabled.
CSS Styles panel overview
The CSS Styles panel lets you track the CSS rules and properties affecting a currently selected page element (Current mode), or the rules and properties affecting an entire document (All mode). A toggle button at the top of the CSS Styles panel lets you switch between the two modes. The CSS Styles panel also lets you modify CSS properties in both All and Current mode.
CSS Styles panel is replaced with CSS Designer panel in Dreamweaver CC and later. See CSS Designer panel for more information.
You can resize any of the panes by dragging the borders between the panes.
In Current mode, the CSS Styles panel displays three panes: a Summary for Selection pane that displays the CSS properties for the current selection in the document, a Rules pane that displays the location of selected properties (or a cascade of rules for the selected tag, depending on your selection), and a Properties pane that lets you edit CSS properties for the rule defining the selection.
In All mode, the CSS Styles panel displays two panes: an All Rules pane (on top), and a Properties pane (on bottom). The All Rules pane displays a list of rules defined in the current document as well as all rules defined in style sheets attached to the current document. The Properties pane lets you edit CSS properties for any selected rule in the All Rules pane.
Any changes you make in the Properties pane are applied immediately, letting you preview your work as you go.
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®.
Use rulers and guides to provide a visual cue for precise positioning and resizing of page elements.
Use the grid for precise positioning and resizing of absolutely positioned elements (AP elements).
Grid marks on the page help you align AP elements, and when snapping is enabled, AP elements automatically snap to the closest grid point when moved or resized. (Other objects, such as images and paragraphs, do not snap to the grid.) Snapping works regardless of whether the grid is visible.