Using the Document Window

[ LiB ]

Regardless of your working style, the one piece of the interface that you'll probably spend most of your time interacting with is the Document window. It's an intuitive interface with lots of resources, and like most things in Dreamweaver, it can be tweaked and customized to be just exactly what you want.

Docking and Undocking ( Windows Only)

In the Windows integrated workspace, you can work with the Document window docked or undocked. A free-standing Document window can fill up as much or as little of the central working space as you like, or it can sit outside the application window altogether if you have a large enough monitor (or two monitors ). A docked Document window automatically fills up the central workspace area and sports a tab along its top edge instead of a title bar so you can easily switch among multiple open documents as you work (see Figure 2.12).

Figure 2.12. The docked (maximized) and undocked Document window.

To dock and undock the Document window, use the Maximize/Normalize box in its upper-right corner.

Viewing Documents

To work with documents, you generally have to look at them. The Document window gives you all sorts of choices for how to do that.

Working with Code, Working with Design

The most basic choice you must make when working with a document is whether you want to look at code or a more graphical environment.

Design view (View > Design) enables you to see the page approximately as it will look in the browser (see Figure 2.13). Although this isn't a true WYSIWYG preview, it lets you interact with all page elements in a graphic environment. Nongraphical page elements such as head content, comments, and scripts can be viewed in iconic form by choosing these options in the View menu and the View > Visual Aids submenu. Other viewing aids for Design view include these:

Figure 2.13. The Document window showing a page in Design view, with some viewing aids showing.

Rulers (View > Rulers) Rulers can be set across the top and left edges of the Document window. Use the commands in the View > Rulers submenu to hide and show rulers, change ruler units (although pixels are the most useful), and change the origin point for measuring relative to specific places on the page.
Grid (View > Grid) A customizable grid can be displayed behind the contents of the document to help align page elements. Use the commands in the View > Grid submenu to hide and show the grid, snap to grid lines, and change the grid's size and appearance.
Tracing image (View > Tracing Image) A GIF, JPG, or PNG file is displayed behind the contents of the Document window, to be used as a layout guide. Use the commands in the View > Tracing Image submenu to load a tracing image and position it in relation to the page. Use the Page Properties dialog box (Modify > Page Properties) to adjust the tracing image's opacity so it's less obtrusive as you work.
Table borders, layer borders, frame borders (View > Visual Aids submenu) The edges of tables, layers , or frames are displayed with a thin or dotted line for editing purposes only (see Chapter 8, "Building Tables," for more).
Table widths (View > Visual Aids > Table Widths) An information strip is displayed across every table in Design view, indicating column and table widths (see Chapter 8 for more).
Table mode (View > Table Mode submenu) Several different ways of displaying tables are provided for editing purposes only (see Chapter 8 for more).
Image maps (View > Visual Aids > Image Maps) Image map hotspots are displayed as translucent colored shapes for editing purposes only (see Chapter 5, "Working with Images," for more).
Invisible elements (View > Visual Aids > Invisible Elements) Any piece of code that wouldn't normally be seen in Design view is made visible as an icon. Use the Preferences/Invisible Elements category to determine what kinds of invisible code are represented by icons.

Code view (View > Code) shows only the raw HTML code for the page (see Figure 2.14). Code view is essentially Dreamweaver's built-in text editor. Some features and functions, such as adding behaviors and drawing layers, are not available in Code view. Non-HTML documents, such as CSS style sheets and script files, can be viewed only in Code view. For a full discussion on working with Code view, see Chapter 27, "Writing Code in Dreamweaver."

Figure 2.14. The Document window showing a page in Code view.

Code and Design view (View > Code and Design) splits the Document window horizontally so that you can see Design view and Code view at the same time (see Figure 2.15). Many people find this view to be the most convenient because it enables them to see exactly where they are in the code as they are designing. This view proves convenient when dealing with complex coding tasks such as selecting a particular row or column in an embedded table. By default, Code view is in the upper portion of the window. You can move it to the bottom by choosing View > Design View on Top.

Figure 2.15. The Document window showing a page in Code and Design view.

Code view and Design view are more than just different views. They represent different ways of working. Different options appear in panels, or different commands are grayed out, depending on which view is active. In Code and Design view, when both views are visible, one or always has focusthat is, Dreamweaver considers it the active view. To give a particular portion of the Document window focus, click in that half of the window. You can also choose View > Switch Views, or Ctrl/Cmd-`, to switch between Code view and Design view, or to switch the focus from code to design in Code and Design view.

Live Data View

If you use Dreamweaver to create data-driven websites , Design view normally displays your pages with placeholders marking where the server will eventually insert information from a database. For instance, an online catalog page viewed in Dreamweaver will display placeholders for each catalog item's names , prices, and descriptions. Engaging Live Data view makes Dreamweaver replace these placeholders with actual information from a database, giving you a much better preview of what your page will eventually look like online. Live Data view is covered in detail in the section "How Dynamic Sites Work in Dreamweaver" in Chapter 21, "Building Dynamic Sites with Dreamweaver."

Status Bar

Located at the bottom of the Document window, the status bar provides a wealth of information about your page. It also enables you to access your code and panels with a quick click (see Figure 2.16).

Figure 2.16. The status bar shown here at the bottom of an undocked Document window.

Window Size

The Window Size indicator tells you, in pixels, the current width and height of the "live" area of the Document window. (The live area is the part of the window where there's actually content, as opposed to tool-bars and status bars and other so-called "chrome" elements.) This can be important information if you're trying to design your pages to fit within common browser window sizes (and who isn't?).

The Window Size indicator reports only the size of the Design view portion of the window. If the Document window is displaying Code view, the Window Size indicator disappears. If the Document window is displaying Code and Design view, the indicator shows the size of the Design view portion of the window.

If you're working in the integrated workspace (Windows only) and have your Document window docked (maximized), the Window Size indicator shows the size of the visible portion of the window (for example, from the bottom edge of the Insert bar to the bottom of the Document window, and from the left edge of the application window to the vertical divider that begins the panel dock).

The Window Size indicator also includes a pop-up menu that quickly resizes the Document window to any of several default sizes that match the window sizes of browsers at common monitor resolutions . Choose from this pop-up menu to quickly check how your page contents will fit into some common window sizes. You're not limited to the default window sizes Dreamweaver has provided, either. For instance, if you're designing for an intranet and you know that your target audience will all have browser windows set to 600 x 300, you can add that set of dimensions to the pop-up menu. Just do this:

From the Window Size indicator pop-up menu, choose Edit Sizes. This opens the Status Bar category of the Dreamweaver Preferences dialog box (see Figure 2.17).

Figure 2.17. Adding a default window size to the Window Size indicator pop-up menu.
In the Preferences dialog box, edit the list of window sizes as you like.
- To change any of the existing sizes, just select one of the dimensions shown and enter a new number.
- To add a new size, click in the area below the existing entries to activate it, and type in a new dimension. Your new entry can have width, height, or both.
When you're done, click OK to close the Preferences dialog box. From now on, your new entry appears in the Window Size indicator pop-up menu.

Document Size/Download Time Indicator

The Document Size/Download Time indicator displays two related pieces of information: the file size for the current document and all of its embedded media, and the estimated time that this material will take to down-load. Unless you have a corner on the market of extremely patient visitors , this is crucial information to have at your fingertips as you're creating your pages. The file size indicator (on the left) calculates the size of your current HTML file itself as well as the sizes of any images, Flash movies, or other files that will need to download before your page can display in a browser, rounded off to the nearest kilobyte (K). The estimated download time calculates how long that much content will take to download over a specific connection speed, rounded to the nearest second. For instance, if your page consists of a 1K HTML document and a 27Kbps image, at a connection speed of 28.8Kbps it will take approximately 1 second to download. The display for this setup would look like this: 28K/1 sec .

The default connection speed for calculating download time is 28.8Kbps, or kilobits per second (the speed of a fairly old modem, or a new modem at peak traffic times). You can change this speed to suit whatever connection speeds you think your target audience will have. For instance, if you're producing an online film festival for high-end users who are all going to have some sort of broadband access, you'll want to set your connection speed at several hundred kilobits per second. To adjust the connection speed, do this:

Click the Window Size indicator and choose Edit Sizes from the drop-down menu. This opens the Preferences/Status Bar dialog box.
In the Connection Speed text input field, enter whatever value you think represents an average download speed for your target audience.
When you're done, click OK to close the dialog box. The status bar now displays its download time based on document size and this new connection speed.

What are some standard speeds? Telephone modems can theoretically connect at up to 56K, but federal regulations limit phone-line transfer rates to somewhere between 51K and 53K. ISDN connections can range from 56K to 112K. Cable and DSL connections range from 112K to 1M (one thousand kilo-bits per second). Don't forget that when determining your visitors' probable connection speed, individual connections can be much slower than the standards.

Tag Selector

The Tag Selector (see Figure 2.18) lets you keep one eye on where your code is while you're working in Design view. Based on the fact that HTML pages are built from a series of nested tags, the tag selector indicates at all times where the insertion point or selection is in relation to the tag hierarchy of the page. Because Design view displays only the visible body content of the page, the body tag is always the leftmost element shown here. If the insertion point is inside an h1 tag, the Tag Selector displays this structure:

Figure 2.18. The Tag Selector in action.

 <body> <h1>

If the insertion point is inside a table cell , inside a table row, inside a table, the Tag Selector displays this:

 <body> <table> <tr> <td>

If an entire tag and its contents are selected, the Tag Selector displays that tag in boldface.

Best of all, you can use the Tag Selector to select tags. Click any tag displayed there, and the entire tag and its contents are selected in Design view. Right-clicking a tag in the Tag Selector opens a contextual menu for performing tag-related tasks such as stripping a tag while leaving its contents intact (Remove Tag), applying a CSS style to the tag (Set Class), and applying ID attributes (Set ID).

Toolbars

Dreamweaver includes various toolbars that can show at the top of the Document window to help you work. All toolbars can be accessed from the View > Toolbars submenu or by right-clicking in a blank part of the Document toolbar.

Standard Toolbar

Following the trend in much software, the Standard toolbar gives you easy access to frequently used commands from the File and Edit menus (see Figure 2.19). The Standard toolbar can be toggled on and off by choosing View > Toolbars > Standard. In Dreamweaver/Windows, the Standard toolbar can be undocked by dragging it into the center of the Document window; after it's undocked, redock it by double-clicking its title bar.

Figure 2.19. The Standard toolbar in its docked and undocked states.

Document Toolbar

The Document toolbar shows an icon view of frequently accessed commands related to working with the Document window (see Figure 2.20). Changing document views, previewing in the browser, validating, and more are all a mouse click away. The Document toolbar can be toggled on and off by choosing View > Toolbars > Document.

Figure 2.20. The Document toolbar.