The Dreamweaver 8 Interface, in Depth


Dreamweaver has so many tools and features it's unlikely that you'll use all of them for every site. However, knowing what's available in Dreamweaver will help you customize your workspace to put frequently used tools within easy reach and hide toolbars and panels that may not be as frequently used. After you know what features are available and how they work, you can customize your workspace and begin adding content to pages by putting those tools to work for you.

Workspace Layouts

If you're using Windows, your first decision in setting up your workspace is choosing a layout. When you installed Dreamweaver, you were prompted to select an initial Workspace Setup (see Figure 22.1). Regardless of whether you chose the Designer or Coder workspace, Dreamweaver enables you to change your workspace at any time to meet the development style of the project you are working on.

Figure 22.1. The Workspace Setup dialog box appears when you first install Dreamweaver on a Windows system. You can also access Workspace Setup from the Preferences dialog box.


You can change your workspace by selecting Window, Workspace Layout from the menu bar and selecting the layout you'd like. In addition, you can save specific layouts and restore them whenever necessary.

The workspace layouts that Dreamweaver 8 offers are

  • Designer Workspace All windows, panels, and inspectors are contained within one application window, in the same manner as in Fireworks and other Macromedia applications (see Figure 22.2). All panels are docked on the right side of the application window. Documents are opened in Design view by default, and multiple documents are tabbed at the top of the Document window.

    Figure 22.2. The Designer workspace contains all documents, panels, and inspectors in one application window.

  • Coder Workspace All panels are docked on the left in the same manner as in HomeSite and ColdFusion Studio (see Figure 22.3). This workspace opens all documents in Code view by default.

    Figure 22.3. The Coder workspace is similar to that of the Designer workspace, but the panel groups are positioned on the left side of the window.

  • Dual Screen Left/Right The workspace can be stretched onto dual screens with the document window stretched to fill either the full left or full right screen.

Note

Mac users have only the floating layout available.


Regardless of which workspace you choose, you can customize it beyond the standard layout by moving and changing Dreamweaver's various panels. Panels that are regrouped or undocked from the panel group remain in that new state even in future Dreamweaver sessions. The Property inspector is initially collapsed, showing only the most common options. If you expand the Property inspector, it remains expanded in future sessions unless you manually collapse it.

Exploring the Document Window

The Document window represents the development view of the document that you are working on and is where you'll be adding content and applying the tools offered with Dreamweaver's various panels and inspectors. The Document window contains a title bar, menus, toolbars, and a status bar. All the other panels, inspectors, and toolbars exist to add to or modify the contents of the Document window. The Document window is capable of displaying a visual representation of the site in Design view (see Figure 22.4), the HTML and scripting code for the site in Code view (see Figure 22.5), or a split window containing both the design and the code (see Figure 22.6).

Figure 22.4. Design view enables you to work in a what-you-see-is-what-you-get (WYSIWYG) atmosphere.


Figure 22.5. Code view enables you to develop or edit the code directly.


Figure 22.6. Split view enables you to make changes to either pane and see how changes in one affect the other.


Regardless of your preference, it's likely that you will use all three views at some point in development. Even with the advancements of WYSIWYG development environments, it's still good to understand and be able to modify and write code by hand.

Tip

In Code and Design view, changes you make to the code aren't reflected in the Design pane unless you refresh the view. You can do this by clicking the Refresh button on either the Property inspector or the Document toolbar, or simply by pressing F5.


Title Bar

The Title bar displays the title and filename of the open document. Aside from being a reminder of the name of the page on which you're currently working, it can also serve as a reminder of the path to which you have saved the file and whether or not you have given the page a title. If the title bar shows the page to be unnamed, you need to save the page for any changes to be preserved. As you work in the document, an asterisk is appended to the filename, signifying that you've made unsaved changes to the document. Use the Save keyboard shortcut (Command+S) [Ctrl+S] or select File, Save to save your file.

Menu Bar

The Menu bar contains nearly all the commands and features of Dreamweaver. Most of these commands are also accessible from panels or the Property inspector, as well as context menus that pop up when you (Control-click) [right-click] your mouse.

Toolbars

Four toolbars are available from within the Document window. To toggle these toolbars from view, select View, Toolbars, and select from the three options. All the toolbars can be visible at the same time, but they cut down on your workspace.

The Standard toolbar contains the usual File, Save, Copy/Cut, and Paste commands (see Figure 22.7). If you already know the keyboard shortcuts for these common commands, they're the same as those for most Windows or Mac applications.

Figure 22.7. The Standard toolbar is useful for novices, but it takes up valuable development real estate.


The Document toolbar, shown in Figure 22.8, also contains options available elsewhere in Dreamweaver, such as switching views or titling the document. In addition, this toolbar enables you to easily monitor potential browser and markup errors as well as toggle visual aids on and off.

Figure 22.8. The Document toolbar makes it easy to switch views, title the page, and preview the document in a browser.


The Insert toolbar, shown in Figure 22.9, enables you to easily insert elements into your pages such as images, code snippets, and hyperlinks. The available elements are divided into logical categories, which can be selected from the drop-down menu at the far left of the Insert bar. When selected, each category displays a unique set of buttons that enable you to add any specific element to your page with the click of your mouse.

Figure 22.9. The Insert toolbar enables you to easily add elements to your pages.


The Insert bar contains eight categories, each containing icons for the most frequently used options in that category (see Table 22.1).

Table 22.1. Insert Bar Categories

Category

Function

Common

Contains image, table, link, layer, comment, and other commonly used objects.

Layout

Enables toggling of standard, expanded, and layout views for creating tables and provides the tools to use Layout view to draw tables and cells.

Forms

Inserts form containers and elements.

Text

Adds text formatting, such as bold and italic, and paragraph formatting, such as headings and lists. It can also be used to access the Font Tag Editor to set multiple attributes at once.

HTML

Adds HTML elements, such as horizontal rules, tables, or frames to your page.

Application

Enables you to build recordsets containing data from your database connections and display content from those recordsets on your pages.

Flash Elements>

Enables you to control Flash elements stored within your pages.

Favorites

Enables you to create your own toolbar with buttons for your favorite elements.


To insert an element from one of the Insert bar categories, position the cursor in the page where you want the object to be inserted and then click the Object button in the Insert bar (or drag the Object button to the insertion point). In the case of inserting images or creating links, among others, a dialog box appears to help you complete the insertion, in which you can perform such actions as selecting an image file or defining the link parameters. To insert placeholders for these elements, when available (such as for images), press the (Option) [Ctrl] key while clicking the Object button. You can then select a final image or fill in other required attributes later in the development process.

Status Bar

The Status bar is located at the bottom of the Document window (see Figure 22.10). It provides information about the file size and estimated download time for the document. Dreamweaver calculates an approximate download time based on the Connection Speed setting in the Status Bar category of the Preferences dialog box (Edit, Preferences). By default, Dreamweaver calculates page load times at 56 kilobits per second, but you can change these settings to calculate download time for faster or slower connections.

Figure 22.10. The Status bar displays the Tag selector, Window Size selector, and Download Size/Speed indicator.


Window Size Selector

You can change the dimensions of your default screen size to match those of your typical site visitor. This enables you to design for a wide range of browser dimensions or to test the general appearance of the document in a specific configuration.

Choosing the Right Viewing Size

More and more web visitors are using upgraded monitors, enabling them to view pages in a broader array of colors and at a higher resolution. As a result, many designers are now developing for an 800x600 screen size or higher. MSNTV (previously known as WebTV) users have a display size of only 560x384 (and an equally limited range of colors and other limitations). In addition, if you are developing for PDAs or browser-capable mobile devices, you need to take into account the maximum display size for your targeted device.


Tag Selector

The Tag Selector combines the best of working in Design view with the need to occasionally make changes to the underlying code by hand. The Tag Selector shows the HTML tags (see Figure 22.11) relative to the position of the cursor in Design view.

Figure 22.11. The Tag Selector gives you quick access to tags used in your document.


This feature is often overlooked because there are so many methods for accessing and editing code. But when you're working on nested tables or have multiple layers on the page, the Tag Selector can help you find your place in the code. Just click a tag in the Tag Selector to highlight the contents of the tag in Design view. You can then make modifications to that element in the Property inspector or by using the menus and panels. You can also select a tag from the Tag Selector, switch to Code view, and the element and its contents will be highlighted.

The Tag Selector also makes deleting blocks of content easy. You can delete tables or blocks of text easily by right-clicking on the container tag in the Tag Selector and then pressing the Backspace or Delete key on the keyboard.

In addition, the Tag Selector also can be used to edit existing tags. To edit a tag, (Control-click) [right-click] on the tag in the Tag Selector, which activates the context menu. The context menu provides one of many methods for setting the class of a tag, used extensively with Cascading Style Sheets. You can also use the context menu to access the Quick Tag Editor by choosing Edit Tag.

Using the Property Inspector

The Property inspector (see Figure 22.12) is one of the most important tools in Dreamweaver because it enables you to adjust the editable properties of any text or objects located within your pages. The context of the Property inspector and the elements that are visible within it change depending on the element that is selected within the Document window. As with all panels, the Property inspector can be moved. It can be docked either above or below the Document window or undocked to become a floating panel.

Figure 22.12. The Property inspector changes with the context of the selection.


The Property inspector is initially in a maximized state, displaying all the editable properties for the selected object. If you want to maximize your workspace, you can minimize the Property inspector by clicking the arrow in the bottom-right corner. The minimized view then displays only the most commonly edited attributes for the object.

In addition to the standard text fields and buttons, the Property inspector also contains several other features. Color pickers are used to select a color for text, table borders, and other objects. The Point-to-File and Folder icons are used to locate files to insert images or links; the Quick Tag Editor, signified by a pencil-and-paper icon on the right side of the Property inspector, enables you to add element attributes not found on the Inspector. Selecting the question mark icon launches the Using Dreamweaver help system. In addition, the Property inspector in Dreamweaver 8 now contains a CSS button that opens the CSS Styles pane, which enables you to easily format text based on styles embedded within the document or available from an attached style sheet.

Working with Panels

Unless you've already started to change the default workspace by removing from view or resizing the panels and inspectors, you'll see that the Document window is surrounded by groupings of additional options and site information. Some of these panels are critical to Dreamweaver's ease of use, whereas others can be minimized or hidden without worry.

Panels are grouped by default in logical panel groups. Of course, this logic might or might not be applicable to your style of work, so the arrangement of panels and their groupings can be modified to meet your working style.

To expand a panel group, click the arrow to the left of the panel group name or click the panel group name itself (see Figure 22.13).

Figure 22.13. Click the arrow next to panel groups to open and close panels. Here, you see the Databases, Bindings, Server Behaviors, Components, Files, Assets, and Snippets panels, with the Application and Files panel groups open.


Arranging Panel Groups

Each panel group has several controls (see Figure 22.14). The icon to the right of the panel group name activates a drop-down options menu containing several commands within the context of the panels contained in the group. The menu for each panel group is unique and contains commands that apply to that panel group.

Figure 22.14. The panel group controls include a gripper and a drop-down menu with group commands.


To the left of the group name is an area called the gripper. Clicking and dragging the gripper for a group enables you to undock that panel group. These floating panels can then be moved around the workspace. To dock a floating panel group, drag it by its gripper until the insert indicator is positioned where you want in the panel dock.

If you would like to move an existing panel into another panel group, you can do this by opening the panel group where the panel is located and clicking the options menu. From the options menu, choose the Group [panel name] With command and select the target group.

The moved panel immediately appears in its new group. If you choose to create a new panel group, open the Options menu in the new group and select Rename Panel Group to give it an appropriate name. You can then add other panels to the new group.

Panel groups can also be resized to take up more or less space in the panel dock. When you position the mouse between panel groups, the cursor changes into a double-headed arrow, which can be clicked and dragged up or down to modify the size of expanded panel groups. To maximize a panel group to take up as much space in the panel dock as possible, select Maximize Panel Group from the Panel menu. This minimizes other open panel groups to give the select group full use of the vertical space.

Some panels, such as those located in the Results panel group, benefit from the additional horizontal space they get when they are placed below the Property inspector. Position the mouse cursor between the panel dock and the Document window until it becomes a double-headed arrow; then click and drag horizontally to give additional space to the panel dock. Keep in mind, however, that this decreases the size of the Document window.

If you're not using a panel group at all, you can close it by selecting Close Panel Group from the Options menu for that group. To reopen a closed panel group, select it from the Window menu on the menu bar.

CSS Panel Group

The CSS panel group contains panels that control the styles and layers of the elements on the page. The two panels in this group are CSS Styles (see Figure 22.15) and Layers (see Figure 22.16).

Figure 22.15. The CSS Styles panel is used to define and modify Cascading Style Sheets.


Figure 22.16. The Layers panel is used to control any CSS layers that exist within the document.


Application Panels

When you're using databases and advanced server technologies to generate content for your pages, the tools used most frequently are found in the Application panel. Initially, each of the panels in this group prompts you to configure the site, document type, and testing server (if you haven't already done so in the Site Definition).

Using the Databases panel (see Figure 22.17), you can then create a connection to a database containing content for your site.

Figure 22.17. The Databases panel controls database connections.


The Bindings panel, shown in Figure 22.18, is used to create recordsets or datasets (depending on your platform) and displays the field names stored in those recordsets. After you have created the recordsets you need, the Bindings panel enables you to drag and drop dynamic content into your pages and select formatting options for the dynamic data placeholders.

Figure 22.18. The Bindings panel enables you to add dynamic text and elements to your pages.


The Server Behaviors panel (see Figure 22.19) gives you access to a broad range of dynamic server behaviors ranging from restricting access to your pages to repeating regions.

Figure 22.19. The Server Behaviors panel provides access to database-driven server behaviors.


Finally, the Components panel (see Figure 22.20) enables you to easily add web services or ColdFusion components to your page.

Figure 22.20. The Components panel provides access to ColdFusion components and web services.


Note

If you don't plan on designing dynamic pages, you can close this panel group entirely to save space.


Tag Panel Group

The Tag panel enables you to visualize how tags are nested within other tags within your document and what attributes are associated with each tag. By selecting an element within the page or choosing a tag from the Tag Selector and then choosing the Attributes panel (see Figure 22.21), you can view information about the tag, such general attributes, any styles that are associated with it, the language in which the code is styled, and any uncategorized attributes associated with the tag.

Figure 22.21. The Attributes panel enables you to visualize attributes of specific code tags.


The Behaviors panel, shown in Figure 22.22, provides you with access to commonly used JavaScript behaviors that can be associated with tags within your document. For instance, after you create a hyperlink from text and select the <a> tag, the Behaviors panel provides access to numerous behaviors that are unavailable to nonlinked text.

Figure 22.22. The Behaviors panel gives you access to JavaScript behaviors that can be applied to specific elements.


Files Panel Group

The Files panel, shown in Figure 22.23, enables you to view and manipulate the files and folders located within your local site. The Files panel also enables you to create, edit, and delete Dreamweaver sites.

Figure 22.23. The Files panel enables you to manage the files and folders contained within your site.


With the Assets panel you can easily organize elements located within your site, such as images, movies, rich content, and hyperlinks. It can save you time because you simply drag and drop elements right into your page (see Figure 22.24).

Figure 22.24. The Assets panel organizes many of the elements contained within your site.


The Snippets panel (see Figure 22.25) provides a place for you to organize and manage predefined blocks of code known as "snippets." These reusable code snippets can easily be dragged into your code and customized for the individual application.

Figure 22.25. The Snippets panel enables you to store reusable code for reuse in pages.


Frames Panel

The Frames panel is used to design and manage any frames used within your page layout. From within the Frames panel, you can also select a specific frame.

History Panel

The History panel maintains a list of the steps you take in creating the current document (see Figure 22.26). You can then use this list to create new commands for repetitive, time-consuming actions. You can also use the History panel to undo multiple steps at once or to replay steps to see their effect on the page design.

Figure 22.26. The History panel tracks the steps you take in creating a document.


When you look at the items in the History panel, the last item on the list is the most recent, and the panel scrolls upward. To undo the last several actions, drag the slider that's to the left of the steps upward to select the steps you want to undo. After you've made your selection, continue editing. The selected steps are not undone until you take another action that overwrites those steps in the history.

To repeat steps, use the slider to select them and then click the Copy Steps button.

Note

After you've undone multiple items and overwritten them with other steps, you cannot redo the original steps.


To create a command that completes multiple steps, select a series of steps with the slider and then click the Save Selected Steps As a Command button. You are prompted to give the command a name, and the new command appears on the Commands menu.

Note

The History panel tracks only a limited number of steps per session. You can increase or decrease this number in the Maximum Number of History Steps field of the General Preferences settings.


Results Panel Group

The Results panel automatically appears to display the results of searches, validation checks, and various reports. It's one of two panels that are docked horizontally below the Property inspector because the content displayed in the various panels is much easier to read and review horizontally.

Search Panel

The Search panel is displayed at the bottom of the workspace whenever you issue a Find command (see Figure 22.27) that reaches beyond the active document (such as if you're conducting a site-wide search). This panel displays the results of your search and enables you to click the results to edit them in the Document window. Buttons on the left side of the panel enable you to initiate, cancel, or save Find commands.

Figure 22.27. The Search panel lists the results of searches in a document or site.


Reference Panel

The Reference panel, shown in Figure 22.28, provides access to reference material for HTML, CSS, JavaScript, and quite a few of the dynamic platforms and scripting languages.

Figure 22.28. The Reference panel provides you quick access to helpful reference materials.


Validation Panel

The Validation panel, shown in Figure 22.29, lists any coding errors in the site or document when you validate the site (by selecting File, Check Page, Validate Markup/Validate As XML). This validation can also be initiated directly from the panel, and corrections can be located from it.

Figure 22.29. The Validation panel lists coding errors.


Target Browser Check Panel

The Target Browser Check panel, shown in Figure 22.30, lists browser compatibility issues that have emerged in a running of the Check Target Browsers report (File, Check Page, Check Target Browsers, or use the Target Browser Check button on the left side of the Target Browser Check panel). The panel also provides options to save the report for future reference. By highlighting an item in the report and clicking the More Info button, you can view a dialog box explaining exactly why an item is marked. If you double-click an entry, it opens in the Document window in Code and Design view with the offending code highlighted.

Figure 22.30. The Target Browser Check panel lists elements that can't be viewed properly in the target browser.


Link Checker Panel

The Link Checker panel, shown in Figure 22.31, lists the results of the Check Links report (File, Check Page, Check Links, or run from within the Link Checker panel). This report lists broken links, orphaned files within the site, and all external links.

Figure 22.31. The Link Checker panel enables you to fix broken links, eliminate orphaned files, and manually validate external links.


Site Reports Panel

The Site Reports panel, shown in Figure 22.32, displays the results of the Site Report (activated by choosing Site, Reports from the menu bar or by clicking the Reports button on the Site Report panel). The Site Report can be quite extensive, depending on the options you choose when initiating the report. As with the other Results panels, you can use this report to get more information on the items listed and use the items to locate the specific code in question to make modifications.

Figure 22.32. The Site Reports panel lists problems found with accessibility, incomplete tags, or missing alt attributes.


FTP Log Panel

The FTP Log tracks communication with the remote server. You can also enter commands directly to the server from this panel, which is useful to experienced developers.

Server Debug Panel

The Server Debug panel is used with dynamic pages to locate errors in the code. To use this feature, select View, Server Debug from the menu. The Server Debug panel displays the results of this command, including the server variables and values, execution time, and SQL queries on the page. If you didn't configure your testing server correctly, this panel prompts you through the required steps.

Timelines Panel

After being removed from Dreamweaver MX 2004, the Timelines panel has now returned to Dreamweaver 8 (see Figure 22.33). This panel enables you to time interactions on your site such as the moving of layers or the hiding/displaying of objects.

Figure 22.33. The Timelines panel enables you to relocate images and other objects over a period of time.


By dragging an image into the timeline frame, you can control the image's source URL and, if the image is stored in a layer, its location.

Code Inspector

The Code Inspector contains all the same features as the Code view, but is located on a floating panel (see Figure 22.34). The Code view is where you generally want to work if you plan on doing major code review or revisions. If, however, you're interested in taking a quick look at your code, you can activate the Code Inspector either by choosing Window, Code Inspector or by pressing the F10 key. If you're using dual screens, the Code Inspector is especially handy because you can keep the Design view open and move the floating Code Inspector window to your other screen.

Figure 22.34. The Code Inspector duplicates the functionality of the Code view in the Document window.




Special Edition Using Macromedia Studio 8
Special Edition Using Macromedia Studio 8
ISBN: 0789733854
EAN: 2147483647
Year: 2003
Pages: 337

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net