Section 1.2. The Dreamweaver 8 Interface

1.2. The Dreamweaver 8 Interface

Dreamweaver's windows let you add and modify elements of a Web page. Macromedia refers to most of these windows as panels , and Dreamweaver has an almost overwhelming number of them.

Many of these windows are used to assist with specific tasks , like building style sheets, and are described in the relevant chapters. But you'll frequently interact with four main groups of windows: the document window, the Insert bar, the Property inspector, and panel groups.

Note: The look of these windows depends on what kind of computer you're using (Windows or Macintosh) and what changes you've made to the program's preference settings.Even so, the features and functions generally work identically no matter what your situation. In this book, where the program's operation differs dramatically in one operating system or the other, special boxes and illustrations (labeled "For Macs Only" or "For Windows Only") will let you know.

1.2.1. The Document Window

You build your Web pages in the document window . As in a word processor, you can simply click inside the document window and type to add text to the page. You'll work in this window as you build a page, and you'll open new document windows as you add or edit pages for your site.

Several other screen components provide useful information about your document. They may appear in different locations in Windows or on the Mac (see Figures 1-1 and 1-2), but they work the same. For example:

Title bar . The title bar shows the name of the file you're currently working on and, in Windows, where the file is located on your computer. In addition, if the Web page is XHTML-compliant (see Section 3.2.2), then that's indicated in parentheses. For instance, in the example shown in Figure 1-1, the Web page is written in XHTML and is saved as a file named aries.html in the folder horoscopes , which is nested inside several other folders on the Y: drive. (In Windows, the title bar appears on the top of the screen; on the Mac, it's at the top of the document window, and the location of the file isn't listed.)

Figure 1-1. Dreamweaver on a Windows PC. You can switch between documents by clicking the tab immediately above the Document toolbar. Here, clicking the aries.html tab brings that page to the front. (This nifty feature works only if the document window is maximized.) You can also hide the panels in one fell swoop (either the stack of panels on the right edge of the window or the panels at the bottom-left) by clicking either of the Hide Panels buttons (circled). To show the panels, click the button again.
Document toolbar . The Document toolbar lets you change the title of a page, switch between Design and Code views, preview the page in different Web browsers, access a context-sensitive reference (help) system, and change the look of the document window. You'll be reading about its various buttons and menus in the relevant chapters of this book. (To make the toolbar visible if it's not already, choose View Toolbars Document.)

The Standard toolbar . The Standard toolbar includes buttons for frequent file and editing tasks like creating a new page, opening a page, saving one or all open documents, cutting, copying, pasting, and undoing and redoing actions. (This toolbar is hidden until you summon it by choosing View Toolbars Standard.)

GEM IN THE ROUGH
The Window Size Pop-Up Menu

Creating pages that look good on different monitors set to a wide range of resolutions is one of the most difficult tasks facing Web designers. After all, not everyone has a 21-inch monitor or views Web sites with the browser window maximized to fill the whole screen. Nothing's more dispiriting than spending a solid week designing the coolest-looking Web page, only to have your client call up to say that your design doesn't fit his 15-inch monitor (a painfully common story).

You can simulate browser windows of different sizes by dragging the resize handle at the lower-right corner of the document window, of course. But Dreamweaver has a better tool for such experiments: the Window Size pop-up menu on the status bar at the bottom of your document window. Clicking the black arrow next to the window-size stats lets you choose a different setting for the document window, as shown here. Use this feature to test how your page will look inside different-size browser windows. The numbers indicate the width and height in pixels.

(Windows note: If your document window is maximized, this feature doesn't work. Choose Window Cascade to "unlock the document window from its space on the screen. Now you're free to resize the window and use the Window Size pop-up menu. Note that this gets rid of the nifty document tabs that let you quickly switch between open documentsas pictured in Figure 1-1. To get them back, just click the Maximize window button in the document window.)

The first pair of numbers indicates the amount of usable space in the document window; the numbers in parentheses indicate the resolution of the monitor. The fourth option shown here, in other words, indicates that if someone has an 800 x 600 monitor and maximizes the browser window, there are 760 x 420 pixels of space to display a Web page. (Even though a monitor's resolution is, say, 800 x 600, after you subtract the space required to display the browser's toolbar, location bar, status bar, and other "chrome," 760 x 420 pixels of space will be visible when a Web page is opened.)

Dreamweaver 8 introduces a new featurepage guideswhich also let you identify the viewable space of a page without having to completely resize your document window. See Section 7.1 for more information.

In any case, note that the Window Size pop-up menu doesn't actually set the size of your Web page or add any code to your page; Web pages are usually fluid, and can grow or shrink to the size of each visitor's browser window. For techniques that let you exercise greater control of your page presentation, see Chapter 7.

The Style Rendering toolbar . The Style Rendering toolbar lets you preview the effect of different CSS style sheets on your page. As described on Section 6.3, you can use different style sheets for different types of displays and output devices. For example, you can make the page look one way when displayed on a monitor, but completely differently when printed. This tricky use of CSS, as well as how to use this nifty toolbar, is described on Section 6.3.1. (This toolbar is also hidden until you choose View Toolbars Style Rendering.)
Head content . Most of what you put on a Web page winds up in the body of the page, but some elements are specific to the region of the page called the head . Here you put things like the title of the page, meta tags (keywords) that provide information for some search engines and browsers, JavaScript scripts, and Cascading Style Sheet information (Chapter 6).

None of this information is actually visible on your Web page once it's "live" on the Internet. But while working in Dreamweaver, you can have a look at it by choosing View Head Content. Youll see a row of icons representing the different bits of information in the head.
The status bar provides useful information about your page. It appears at the bottom of the document.

The tag selector (shown in Figure 1-2) is also extremely useful. It provides a sneak peek at the HTML that, behind the scenes, composes your Web page. It indicates how tags are nested in the document, based on what you've selected or where the insertion point is.

Figure 1-2. Dreamweaver on the Mac. A document window like this represents each Web page; here's where you add text, graphics, and other objects as you build a page. As of Dreamweaver 8, the Mac version of Dreamweaver also includes tabs for switching between open documents.

You can also use the tag selector to select an HTML tag and all the information nested inside it. For instance, clicking the <p> tag selects the paragraph and everything inside it. This feature is very useful when you want to set properties (see "The Property Inspector" on Section 1.2.3), add behaviors (Chapter 11), or precisely control the application of styles (Chapter 6).

You'll make good use of the tag selector in the tutorials to come. For experienced Dreamweaver fans, it's one of the program's most popular tools.

Tip: In Design view, clicking the <body> tag in the tag selector is usually the same as pressing Ctrl+A (

-A) or choosing Edit

Select All: it selects everything in the document window. However, if youve clicked inside of a table (Chapter 7) or inside of a CSS-positioned element (sometimes called a layer [Chapter 8]), you'll select only the contents of a table cell or layer. In this case, you need to press Ctrl+A (

-A) several times to select everything on a page. However, after selecting everything this way, you can press the Delete key to instantly get rid of everything in your document.Careful, though. Pressing Ctrl+A (

-A) or choosing Edit

Select All in Code view selects all the code. Deleting this gives you an empty fileand an invalid Web page.

1.2.2. The Insert Bar

If the document window is your canvas, the Insert bar holds your brushes and paints , as shown in Figure 1-3. While you can add text to a Web page simply by typing in the document window, adding elements like images, horizontal rules, forms, and multimedia elements is simplified by the click-to-add approach of the Insert bar. Want to put a picture on your Web page? Just click the Image icon.

Note: Adding elements to your Web page this way may feel like magic, but the Insert bar is really just a quick way to add code to a page, whether it's HTML, XHTML, JavaScript, or server-side code like Visual Basic (see Part Six of this book). Clicking the horizontal-rule icon, for instance, simply inserts the <hr> tag into the underlying HTML of your page. Of course, Dreamweaver's visual approach hides that messy code and cheerfully displays a gray horizontal bar on the page.

When you first start Dreamweaver, the Insert bar is open. If you ever close it by mistake, you can open it again by choosing Window Insert or by pressing Ctrl+F2 ( -F2). On the other hand, if space is at a premium on your screen, you can close the Insert bar and use the Insert menu instead. Its commands duplicate all the objects available from the Insert bar.

Eight different sets of objects are available from the Insert bar, each available from the pop-up menu at the left end (see Figure 1-3). Select a category from the menu to see the corresponding category of objects worth inserting:

Common objects . In addition to images, tables, and horizontal rules, which you'll use frequently in everyday Web design, this category of the Insert bar offers access to Dreamweaver's template features. Templates let you build basic Web page designs that you can use over and over again in your site, speeding up your production process and facilitating easy updates. See Chapter 17 for details.
Layout objects . The objects in this category help you control the layout of a Web page by organizing a page's contents using HTML tables or layers . In addition, this panel lets you use Dreamweaver's Layout viewa customized approach to building complex table designs that's covered in Chapter 7.
Form objects . Want to get some input from visitors to your Web site? You can use forms to receive their comments, collect credit card information for online sales, or gather any other kind of data. The Forms tab lets you add form elements like radio buttons, pull-down menus, and text boxes (see Chapter 10). You'll also use this tab when building the dynamic Web pages discussed in Part Six.
Text objects . For formatting typemaking it bold or italic, for instanceyou can turn to the Text category. Most of the buttons on this tab aren't technically objects; they don't insert new objects onto the page. Instead, they format text already present on the page. For the most part, the Property inspector offers the same formatting options and is a more common tool for formatting text.

Note: Using the Text objects tab can be disorienting. Some "text objects" create incomplete HTML and actually dump you into the raw HTML of the page, leaving the nice visual Design view behind. In general, the Property inspector and Text menu let you do everything in this tabmore quickly and more safely.
HTML objects . This grab bag inserts elements that appear only in the <head> of a document (like keywords used for search engines); tags used for building tables and frames , and objects to insert JavaScript code; and horizontal rules. Like text objects (above), some of these work only in Code view.
Application objects . Dreamweaver makes connecting your Web pages to databases as easy as clicking a few buttons. (OK, almost as easy; see Part Six.) The Application tab adds many powerful tools for building dynamic pages: controls that add records to your database, for example, or that update information already in a database.

Figure 1-3. Toolbar buttons are grouped into eight categories (Common, Layout, and so on). When you select a category, the other buttons change. If you prefer the original Dreamweaver MX tabbed style, select Show as Tabs. To leave tabs behind and return to the menu version, right-click any tab and select Show as Menu.
Flash elements . Although nearly empty, this category in Dreamweaver 8 is intended to hold future Flash elements Flash movies that you can customize with Dreamweaver. As of this writing, only one object shows up hereImage Viewer, which lets you build Flash slideshows (see Section 12.1.2.9).
Favorites . Perhaps the most useful category, Favorites can be anything you want it to be. That is, after you've discovered which objects you use the most (like the Image command, if you work with a lot of graphics), you can add them to this personal category. You may find that once you've customized this tab, you'll never again need the other categories in the Insert bar. For instructions on adding objects to your Favorites tab, see the box on Section 4.4.2.
ASP, PHP, JSP, .NET, ColdFusion . If you're building database-driven Web pages, you'll discover yet another category of objects. The exact name of the category depends on the server model you're using (Microsoft's Active Server Page or Macromedia's ColdFusion server, for example), but it always contains frequently used code snippets for that programming language. See Chapters 20, 21, 22, 23 through 24 for more on working with databases.

1.2.3. The Property Inspector

After dropping in an image, table, or anything else from the Insert bar, you can use the Property inspector to fine-tune its appearance and attributes. Suppose, for example, that your boss has decided she wants her picture centered in the middle of the page. After highlighting her picture in the document window, you would then use the Property inspector to change its alignment.

The Property inspector (Figure 1-4) is a chameleon. It's aware of what you're working on in the document windowa table, an image, some textand displays the appropriate set of properties (that is, options). You'll use the Property inspector extensively in Dreamweaver.

Figure 1-4. If you don't see the Property inspector, you can reopen it by choosing Window Properties, or by pressing Ctrl+F3 ( -F3).

For now, though, here are two essential tips to get you started:

Double-click any blank gray area in the Property inspectoror striped area in Mac OS Xto hide or show the bottom half of the palette, where Dreamweaver displays an additional set of advanced options. (It's a good idea to leave the inspector fully expanded most of the time, since you may otherwise miss some useful options.)
At its heart, the Property inspector is simply a display of the attributes of HTML tags. The src (source) attribute of the <img> (image) tag, for instance, tells a Web browser where to look for an image file.

The best way to make sure you're setting the properties of the correct object is to click its tag in the tag selector (see Section 1.2.1).

1.2.4. Panel Groups

So far, this chapter has described the Insert bar, Property inspector, and document windowbut those are just the beginning of Dreamweaver's windows. In Dreamweaver 8, most of the remaining windowscalled panels sit in tidy groups on the right edge of your screen.

For example, a panel group named Files harbors panels for working with your Web page files, Web site assets, and code snippets (see Figure 1-5).

Tip: To view the panels in a group, click the expander arrow or the panel group's name; to hide the panels, click the arrow (or name) again.

Figure 1-5. To open a panel, click the arrow next to the panel group name (Application or Files, for example). Clicking a tab brings the corresponding panel forward. Each panel group has its own Context menu icon (circled). Clicking the button reveals a shortcut menu that lets you work with features specific to that panel. This menu also offers generic panel actions, such as moving a panel to another group, creating a new panel group, renaming a group, or completely hiding a group of panels.

The various panels and their uses will come up in relevant sections of this book. But a few tips concerning Dreamweaver's panels are worth noting here:

You can open a particular panel from the Window menu. For example, to open the Files panel, choose Window Files.
Double-click anywhere in a panel group's gray title bar to open that panel group and expand it to fill the maximum space available. To give the panel as much space as possible, any open panels are also closed.

This is really the best way to open a panel group. Not only is the title bar a larger target, but most panels contain a lot of information. You'll want to see as much of it as possible.
You can even rename a panel group. Maybe the name Code doesn't make sense as the name of a panel group; after all, there are plenty of different kinds of codes involved in building Web sites.

To rename a group, open its contextual menu, either by clicking the context menu icon (see Figure 1-5) or by right-clicking (Windows) or Control-clicking (Mac) the title bar. In the contextual menu, choose Rename Panel Group. Type the new name in the resulting window HTML , in this exampleand then click OK.
If you want to hide all windows except for documents, choose Window Hide Panels or press F4a useful trick when you want to maximize the amount of your screen dedicated to showing the actual Web page youre working on. To bring back all of Dreamweaver's administrative windows, press F4 again or choose Window Show Panels.
On the Mac, if you've really made a mess of your screen by dragging Dreamweaver windows all over the place, you can make them snap back into a tidy arrangement by choosing Window Arrange Panels. (Unfortunately, this command arranges only tool panels and inspector windows. It doesnt arrange your document windows.)

1.2.5. Workspace Layouts

Dreamweaver 8 introduces a wonderful, time-saving productivity enhancer : Workspace Layouts. This feature lets you save the position and size of Dreamweaver's panels and windows as a "layout," which you can return to by simply selecting the layout's name from Window Workspace Layout. For example, when youre working on a database-driven Web site, you may like to have the Application and Code panel groups open, but close the Design panel group. When working on a design-heavy site, on the other hand, you may absolutely require the Design panel group to be open, but could care less about the Tag Inspector. You can create a different layout for each situation and then simply switch between them.

First, you should organize your workspace the way you want to work:

Open the panels you work with most frequently. For example, choose Window Files to open the Files panel.
Increase or decrease the height of a panel by dragging the empty space to the right of a panel or panel-group name (see Figure 1-6.)
You can move a panel group to another area of your screen by dragging its gripper (see Figure 1-6). This is especially useful if you have a large monitor, since you can place one group of panels on the right edge of the monitor and another group either next to the first or on the left side of the monitor. If you're lucky enough to have two monitors hooked up to your computer, you can even spread the panels across both monitors.

Figure 1-6. Resizing a panel is as easy as dragging up or down (circled). If you're lucky enough to have a large monitor, it's often helpful to put the Files panel by itself on either the left or right side of the screen.
Open the toolbars you'll want to work with most often (see Section 1.2.1).
Choose the Insert bar tab containing the objects you use most frequently. (You can collect your favorite objects onto a single tab, as described on Section 4.4.2.)

To save your layout, select Window Workspace Layout Save Current (see Figure 1-7.) The Save Workspace Layout dialog box appears; type the name for the layout and click OK. (If you type the same name as a layout youve already saved, Dreamweaver lets you know it and gives you the option to replace the old layout with this new layout. This is the only way to update a layout you've previously created.) Dreamweaver saves your new layout.

Tip: This feature is also handy if you share your computer with other people. You can create your own Workspace Layoutuse your own name when naming the layoutwith all the panels and windows exactly where you like them. Then, when you go to use the computer and the bozo before you has rearranged the entire workspace, just select your layout from the Window

Workspace Layouts menu.

Workspace Layout

The Name of Your Layout (see Figure 1-7). After a brief pause, Dreamweaver switches to the selected layout.

Figure 1-7. The Windows version of Dreamweaver (shown here) includes three preprogrammed layouts, including one that puts all the panels and other windows on a second monitor, while leaving the first monitor available for just Web page documents. The Mac version has a default and a dual-screen layout.