The Dreamweaver MX 2004 Introductory Tutorial Interface

dreamweaver| Tutorials | Getting Started |

Site original content, reproduced please indicate the source Web page teaching network .

Dreamweaver MX 2004 has a new style and splash screen, please go to Baidu or Google search this software to download and install, do not do this in detail. The Dreamweaver MX 2004 provides a layout for the designer and for the needs of the hand-coded person. When you first start Dreamweaver MX 2004, a Workspace Settings dialog box appears (as shown below):

From which you can choose a workspace layout that works for you. If you are unfamiliar with writing code, please select "Designer". If you later want to change the workspace, you can use the Edit menu "preferences" to switch to the following diagram:

You can then switch to another different workspace in the dialog that appears. The Edit Menu Preferences dialog box is shown in the following illustration:

Introduction to the Work interface

Dreamweaver MX 2004 provides an integrated layout that places all elements in a single window. In an integrated workspace, all windows and panels are integrated into an application window. (pictured below)

"Column description"

　　title bar (pictured below): Displays the name of the application, the toggle button between minimized, maximized, and normal, and the Close button.

　　menu bar (pictured below): Contains files, edits, views, inserts, modifications, text, commands, sites, Windows, Help 10 menu items, specific features:

　　File menu : Contains commands such as new, open, save, close, save As, saved all, to view the current document or to perform actions on the current document, such as preview in browser and save as template.

　　Edit Menu : Contains selection and lookup commands, such as select parent tag and find and replace, and also includes preferences.

　　View menu : You can set various views of a document (such as Design view and Code view), and you can display and hide different types of page elements and toolbars.

　　Insert menu : Provides an extension of the Insert bar to insert the appropriate object into your current document.

　　Modify Menu : Enables you to change the properties of a selected page element or item. With this menu, you can edit label properties, change table and table elements, and perform different actions for library items and templates.

　　Text Menu : You can easily format text.

　　Command Menu : Provides access to a variety of commands, including a clean HTML, a command to create albums, an Add/remove Netscape adjustment fix (make your Web page suitable for Netscape browsing), and more.

　　Site Menu : Provides menu items for managing sites and uploading and downloading files.

　　Window Menu : Provides access to all panels, properties, inspectors, and windows in the DW.

　　Help Menu : Provides access to Dreamweaver documents, including help systems for using Dreamweaver and creating Dreamweaver extensions, as well as reference materials in a variety of languages. It includes a Dreamweaver introductory tutorial that beginners can take a look at.

　　Insert Bar (pictured below): Contains buttons for inserting various types of objects, such as images, tables, and layers, into a document. Each object is a piece of HTML code that allows you to set different properties when you insert it. For example, you can insert a table by clicking the Table button in the Insert column. You can also insert an object by using the Insert menu without using the Insert bar.

Some categories have buttons with pop-up menus. When you select an option from the pop-up menu, this option 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. Each time a new option is selected from the pop-up menu, the default action for that button will change.

The Insert column is organized in the following categories:

The common category allows you to create and insert the most commonly used objects, such as images and tables.

The layout category allows you to insert tables, div tags, layers, and frames. You can also choose from three table views: standard (default), extended table, and layout. When you select layout mode, you can use the Dreamweaver Layout tool: Draw layout cells and draw layout tables.

The forms category contains buttons for creating forms and inserting form elements.

The text category allows you to insert various text formatting labels and list formatting labels.

The HTML category allows you to insert HTML tags for horizontal lines, header content, tables, frames, and scripts.

The server code category applies only to pages that use a specific server language, and each of these categories provides server code objects that you can insert into code view.

The applications category allows you to insert dynamic elements, such as recordsets, repeating regions, and records to insert and update forms.

The Flash element category allows you to insert a flash element.

The Favorites category allows you to group and organize the most commonly used buttons in the insert bar into a common location.

　　The document toolbar (as shown below ) contains buttons and pop-up menus that provide a variety of document window views such as Design view and code view, various viewing options, and some common actions, such as previewing in a browser.

The following options are described:

Show Code view displays code view only in the document window.

Show Code view and Design view displays code view in part of the document window, and Design view in another section. When you select this combination view, the view Design view at top option on the View Options menu becomes available. Use this option to specify which view is displayed at the top of the document window.

Show Design view displays Design view only in the document window.

The title allows you to enter a title for the document, which appears in the browser's title bar. If the document already has a title, the title appears in the area.

No browser/Check error allows you to check cross-browser compatibility.

File Management displays the file Management pop-up menu.

Preview/debug in a browser preview or debug a document in a browser. Select a browser from the pop-up menu.

Refresh Design view refreshes the document's Design view when you make changes in code view.

The view options allow you to set options for code view and Design view.

　　document window: Displays the document that you are currently creating and editing.

　　status bar: provides additional information about the document you are creating.

The label selector displays a hierarchy of labels that wraps around the current selection. Click any label in the hierarchy to select the label and all its contents. For example, click <body> to select the entire body of the document.

The Window Size pop-up menu (visible in Design view only) is used to resize the document window to a predefined or custom size.

To the right of the window size pop-up menu is the document size of the page and the estimated download time.

　　Property Inspector (figure below): for viewing and changing the various properties of the selected object or text.

　　Panel group (pictured below) is a collection of related panels grouped under a heading. To expand a panel group, click the expand arrow to the left of the group name, and to undock a panel group, drag the handle on the left edge of the group's title bar.

The panels in DW MX 2004 are organized into panel groups. The Panel selected in the Panel group appears as a tab. Each panel group can be expanded or collapsed, and can dock with other panel groups (or undock). Panel groups can also dock to an integrated application window, which makes it easy to access the required panels without confusing the workspace.

Dreamweaver MX 2004 provides a variety of other panels, inspectors, and windows that are not described here. To open a different panel, use the Window menu.