Dreamweaver workflow and workspace

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.

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. After you’ve organized your information and determined a structure, you can begin creating your site. (See About Dreamweaver sites.)

Organize and manage your site files

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.)

Lay out your web pages

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 content to pages

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.)

Create pages by hand coding

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.)

Set up a web application for dynamic content

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.)

Create dynamic pages

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.)

Test and publish

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.)

For a video tutorial on what you can do with Dreamweaver, see www.adobe.com/go/lrvid4040_dw.

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.

For a tutorial on working with different Dreamweaver workspaces, see www.adobe.com/go/lrvid4042_dw.

The workspace includes the following elements.

The Document window shows the current document. To switch to a document, click its tab.

You can select any of the following views.

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.

Dreamweaver also displays the Related Files toolbar below the document’s tab (or below the document’s title bar if you’re viewing documents in separate windows). Related documents are documents associated with the current file, such as CSS files or JavaScript files. To open one of these related files in the Document window, click its filename in the Related Files toolbar.

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.

The following options appear in the Document toolbar:

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.

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.

For a tutorial on designing style sheets for print and handheld devices, see www.adobe.com/go/vid0156.

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.

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.

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.

The Status bar at the bottom of the Document window provides additional information about the document you are creating.

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 <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.

Select tool

Enables and disables the Hand tool.

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.

Encoding indicator

Shows the text encoding for the current document.

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.

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:

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).

Use the Files panel to view and manage the files in your Dreamweaver site.

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.

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.

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.

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.

If you have been using GoLive and want to switch to working with Dreamweaver, you can find an online introduction to the Dreamweaver workspace and workflow, as well as a discussion of ways to migrate your sites to Dreamweaver.