Tutorial - Dreamweaver

Dreamweaver is a web page editor, for creating web pages with a wide variety of features without having to write the HTML code by hand. It's designed to be "what you see is what you get". What you design in the Dreamweaver 'document window' will be coded and placed in the document, so that the browser will display the page just as you see it in your Dreamweaver window. This is called a WYSIWYG-editor.

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.

The Dreamweaver CS3 interface is designed to let you create web pages without having to frequently use the menu bar to access commands.

The Insert bar contains various objects that can be inserted into a document. Each object is a HTML code with various attributes that can be applied. For example, clicking on the Image button in the Insert bar will let you insert an image and apply different image settings into the document.

The Document toolbar contains buttons that let you view the document in different views and buttons that contains common operations such as previewing the page in an Internet browser.

The Document window displays the contents of the document. It can be switched between three views: code, split, and design view using the buttons in the Document toolbar.

The Panel groups are sets of panels grouped together that can be expanded or collapsed.

The Files panel lets you browse and manage your file and folders on your computer or on a remote server.

The Property inspector lets you view and edit the properties for the select object or text. For example, when you click on an image in the Document window, the settings for the image will appear in the Property inspector to let you view or change the settings.

The tag selector shows the HTML tag the selected item is enclosed in and lets you select the contents of the tag by clicking on the tag in the tag selector.

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.

Common: The default category, which contains commands for adding hyperlinks, tables, images, and multimedia objects.

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

Applications: Contains commands for adding database elements to your page.

Flash: Lets you insert a Macromedia Flash movie into your page.

Favourites: Lets you customize your own toolbar by grouping your favorite commands.

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.