You can use several approaches to create a website. This is one approach:
- Dreamweaver workflow overview
- Workspace layout overview
- Workspace elements overview
- Document window overview
- Document toolbar overview
- Standard toolbar overview
- Browser Navigation toolbar overview
- Coding toolbar overview
- Status bar overview
- Property inspector overview
- Insert panel overview
- Files panel overview
- CSS Designer
- Visual guides overview
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 Fluid Grid layouts or default templates to get started. You can create new pages based on a Dreamweaver template, then update the layout of those pages automatically when the template changes. If you want to display multiple elements at once in a browser, you can use frames to lay out your documents. (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 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 on to 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. (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. Application bar B. Extract panel C. Document toolbar D. Document window E. Workspace switcher F. Panel groups G. Live View H. Code View I. 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 accessing learn and help content for users with varying skill levels and read about the new features in the current and past releases. Welcome Screen lets you create a new Starter Template too.
The Application bar
Is across the top of the application window and 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, Live 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 Property inspector
Lets you view and change a variety of properties for the selected object or text. Each object has different properties.
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 Designer panel, and the Files panel. To expand a panel, double-click its tab.
The Extract panel
Lets you upload and view your PSD files on Creative Cloud. Using this panel, you can extract CSS, text, images, fonts, colors, gradients, and measurements from your PSD comps into your document.
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:
(View > Live 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. You can edit HTML elements directly in Live View and instantly preview your changes in the same view as well. For more information on editing in Live View, see Edit HTML elments in Live View.
(View > Design) 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
(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.
Live Code view
(View > Live Code) 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 have 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.
A. Code view B. Show Live and Code view C. Live view D. Go to Inspect mode E. Show Live view source in Code view F. Refresh G. File path and name H. Preview/Debug in browser I. Live view options J. File management
Show Live and Code Views
Splits the Document window between the Code and the Live/Design views. Design view option is not available for fluid grid documents.
Displays an interactive, browser-based view of the document. You can also edit HTML elements in Live View. The drop-down list adjacent to the Live options lets you switch between Live and Design views. This drop-down list is not available in fluid grid documents.
Preview/Debug in Browser
Allows you to preview or debug your document in a browser. Select a browser from the pop-up menu.
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.
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. 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). For information on the different options available in the toolbar, see Insert code using the Coding toolbar.
You can also edit the Coding toolbar to display more buttons (such as 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. 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.
Shows a preview of the document in mobile size - 480 X 800 by default. To change the default size, click Window Size pop-up menu > Edit Sizes.
Shows a preview of the document in tablet size - 768 X 1024 by default. To change the default size, click Window Size pop-up menu > Edit Sizes.
Shows a preview of the document in desktop size - 1000 px width by default. To change the default size, click Window Size pop-up menu > Edit Sizes.
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.
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 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. 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:
Lets you create and insert the most commonly used elements such as div tags and objects, such as images, and tables.
Lets you insert structural elements such as div tags, headings, lists, paragraphs, headers, and footers.
Lets you insert media elements such as Edge Animate composition, HTML5 audio and video, and Flash audio and video.
Contains buttons for creating forms and inserting form elements, such as search, month, and password.
Lets you save the document as a template and mark specific regiions as editable, optional, repeating, or editable optional regions.
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.
The folders in the Files panel are displayed in different colors based on the view - Local, Remote, or Testing.
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 Designer panel (Windows > CSS Designer) is a CSS Property Inspector that lets you 'visually' create CSS styles, files, and set properties, along with media queries.
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.
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.
Lists all the selectors in the source selected in the Sources pane. If you also select a media query, this pane narrows down the list of selectors for that media query. If no CSS or media queries are selected, this pane displays all the selectors in the document.
When you select Global in the @Media pane, all the selectors that are not included in a media query of the selected source are displayed.
Displays properties that you can set for the specified selector. For more information, see Set properties.
CSS Designer is context-sensitive. This means, for any given context or selected page element, you can view the associated selectors and properties. Further, when you select a selector in CSS Designer, the associated source and media queries are highlighted in the respective panes.
For more information, see CSS Designer panel.
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.