Dreamweaver is an easy to use web development application that covers up the gap between a developer and a designer. Dreamweaver is a powerful web development tool that helps you create attractive, dynamic, powerful websites. It includes advanced features to develop complex data-driven web applications. Dreamweaver’s user friendly interface and extensive library not only enables even the amateur web designers to create professional websites easily, but helps one to structure the websites in such a way that they are easy to maintain after being built.
This tutorial is a practical introduction to Macromedia Dreamweaver 8. Starting with explaining all the entities of the user interface, this tutorial will quickly get you used to the robust features of dreamweaver.
Dreamweaver has a very easy and user friendly interface that lets the user develop and manage simple as well as complex websites. The interface features in Dreamweaver allows the user to quickly create web pages in the WYSIWYG mode. The various elements and assets can be dragged directly into the document from an easy to use panel. Developers can work directly with the page's code, making use of the various tools Dreamweaver provides for ensuring correct syntax. Dreamweaver comes with the support to directly import images created using Macromedia Fireworks and other graphics applications.
In Windows, Dreamweaver provides an all-in-one-window integrated layout. In the integrated workspace, all windows and panels are integrated into a single larger application window.
The toolbars contain the common commands. Many of these commands are also available in the Dreamweaver menus. Additional commands are available in the panel groups found on the right side of the Dreamweaver window; you can expand and collapse these groups as necessary. 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. We will go through the brief introduction of each of these features.
You can use the insert bar to create and insert objects such as tables, layers and images. It includes images, hyperlinks, tables, forms, and multimedia objects. When the mouse is rolled over a button, its tooltip comes up with the name of the command button. These command buttons are organized into categories. These categories can be switched on the left side of the bar. In addition to this the categories also appear when the current document contains server code such as ASP or Coldfusion documents.
The various categories that these command buttons are grouped into are
Common - The default category, which contains commands for adding hyperlinks, tables, images, and multimedia objects.
Layout - It is used for designing the layout of the page, with the help of commands for tables, layers, and framesets.
Forms - Contains commands for adding form elements to your page.
Text - Contains commands for applying various formatting to the text on your page, as well as for inserting special characters.
HTML - Lets you select various HTML tags to insert into your page.
Application - Contains commands for adding database elements to your page.
Flash Elements - Lets you insert a Macromedia Flash movie into your page.
Favorites - Lets you customize your own toolbar by grouping your favorite commands.
To show or hide the Insert toolbar, open the View menu and select Toolbars, and then Insert.
The Document Toolbar can be used to toggle between different view modes i.e., Code, Design and Split View mode. In addition, there are some common commands related to viewing the document and transferring it between the local and remote sites. There are commands for naming, previewing, and publishing the current document:
Show Code View - displays only the Code view in the Document window.
Show Code and Design Views - displays Code view in part of the Document window and Design view in another part. When you select this combined view, the option Design View on Top becomes available in the View Options menu. Use this option to specify which view appears at the top of your Document window. Code view is updated automatically when you make changes in Design view. However, after making changes in Code view, you must manually update the document in Design view by clicking in Design view or pressing F5.
Show Design View - displays only the Design view in the Document window.
Document Title - Lets you specify a title for the page, which appears in the title bar of the browser's viewer.
No Browser/Check Errors - Provides a menu of options for checking browser compatibility with the page.
Validate Markup - lets you validate the current document or a selected tag.
File Management - Provides a menu of file management options for the page, including a command to upload the page to your web server.
Preview/Debug in Browser - Lets you preview the page in the browser you select.
Refresh Design View - Refreshes the appearance of the page in Design view after you've made changes to it in Code view.
View Options - Lets you specify various settings for the current view.
Visual Aids - lets you use different visual aids to design your pages.
If you don't see the Document toolbar, open the View menu and select Toolbars, and then Document to show it.
The Document window shows the current document in either of the view modes among Design View, Code View and Split View. The Design View mode is used for visual page layout, visual editing and rapid application development. In the Design View mode the document is available as a fully editable visual representation similar to the final output that you would be seeing in the browser.
The Split view mode lets the user view both code and design view in the same window.
The title bar displays the title of the page and the file’s path and name. An astrisk is displayed after the name if any changes have not been saved.
When a Document window is maximized, tabs appear at the top of the Document window area showing the filenames of all open documents. To switch to a document, click its tab.
The Dreamweaver Panel Groups are displayed vertically on the right side of the Dreamweaver window. Panel groups are collection of related panels and commands you will use to design your pages andbuild and publish your web site.
A Panel group can be collapsed or expanded and docked or undocked along with the other panel groups. A panel appears as a tab in the panel group when selected.
The commands available in the panel groups are far more extensive than the ones you'll find on the Insert bar, which contains the most common Dreamweaver commands.
Each panel includes an Options menu in the upper right corner, which contains additional options for that panel.
Design Panel Group
There are two panels in the design panel group: CSS Styles and Layers. CSS styles are used to maintain the styles in the document and creating and attaching style sheets. The layer panel shows all the layers of the open document. It can be used to lock or unlock, rearrange, and rename the layers.
Code Panel Group