| In this section, you'll learn about the different windows , panels, pages, views, toolbars , and inspectors that make up the Dreamweaver experience. Whether you're a novice to Web design, an experienced pro who's new to Dreamweaver, or someone who primarily wants to know what's new in Dreamweaver 8, this will bring you up to speed. The Start Page The first time you launch Dreamweaver, you'll see the Start Page, as shown in Figure 1.1 . This page (which changes based on what you've recently done in Dreamweaver) is your starting point for both creating and modifying pages and sites. If you close all your open Dreamweaver windows, the Start Page reappears. 
The Start Page consists of several sections: -
Open a Recent Item: This section contains a list of the ten most recently opened items in Dreamweaver. If you've opened fewer than ten, it will show just that number; if you've never used Dreamweaver, it will appear as in Figure 1.1 with just an "Open..." folder. -
Create New: If you want to create a new page or site, this is the column for you. Choosing one of these options creates a new HTML, ColdFusion, PHP, ASP, JavaScript, XML, XSLT, or CSS file. Next to last, you can create a new Dreamweaver site. And lastly, you can choose "More...", which will display the New Document dialog ( Figure 1.2 ) about which we'll learn more later.  -
Create from Samples: If you're just learning about building Web sites, these are the choices for you. This section contains folders, each of which contains many beautifully laid-out pages ready for your content. Clicking on any one of these opens up the New Document dialog again, but with a different category chosen : Choosing CSS Style Sheets selects the CSS Style Sheets category, choosing Framesets selects the Framesets category, and so on, through Page Designs (CSS), Starter Pages, and Page Designs. Even if you're an experienced designer, it can be worth your time to look at the previews to get your creative juices flowing . -
Extend: Dreamweaver is built with an extensible architecturethat is, it's easy to add functionality to Dreamweaver that wasn't included when it shipped. That's done through a technology called extensions, which are bits of software that extend Dreamweaver's capabilities. You can get additional extensions through the Macromedia Dreamweaver Exchange at www.macromedia.com/exchange/dreamweaver/. Some of them have an additional charge, and some are free, but it's worth checking out what's available when Dreamweaver alone doesn't scratch your itch. See Appendix B for more information about extending Dreamweaver. -
Quick Tour: Choosing this option gives you, as it says, a quick tour of Dreamweaver's functionality. You'll see a short online tutorial from Macromedia.com using their Breeze Web presentation product. -
Documentation Resources: This displays the online Dreamweaver documentation using your default browser. -
Authorized Training: If, despite having this book, you still want further training, you can follow this link to www.macromedia.com/support/training/. There, you'll find resources that can get you any kind of training you're looking for. -
Dreamweaver Developer Center: If you want to learn more about Dreamweaver from a developer's perspective, this will take you to www.macromedia.com/devnet/dreamweaver/. -
Don't show again: Macromedia knows that while some people love the Start Page, other people aren't so fond of it. Throughout this book, you'll see many examples of how you can personalize your copy of Dreamweaver so that it works just the way you want it to. Here, you can choose to never see the Start Page again. If you reconsider, though, it's easy to bring back the Start Page: in Dreamweaver, choose Edit (Windows)/Dreamweaver (Mac) > Preferences > General > Document Options, and check the "Show Start Page" box. | If you've just launched Dreamweaver for the first time, and you're on Windows, you'll see a dialog before the Start Page ( Figure 1.3 ). The Workspace Setup dialog lets you choose which of the two layouts you prefer: the Designer or the Coder. If you've spent years working with HomeSite and that's what you're comfortable with, choose Coder. If you're more of a visual type, or you don't even know what HomeSite is, choose Designer. Click OK, and you'll see the Start Page. 
This dialog only appears the first time you run Dreamweaver. If you change your mind later, you can change your layout by choosing Window > Workspace Layout and selecting the alternate in the menu that appears ( Figure 1.4 ). 
This book assumes that all you Windows users (the Mac users don't have a choice) will pick the Designer Layout, so that's what you'll see from here on out. The Dual Screen layout option, available for both Windows and Mac users (even those with only a single monitor), isn't an actual layout choice. What it's used for is discussed below. Pick a choice from the Start Page, and you're off and running. |
The Document Window Now that you've opened a file, you see the document window and all its surrounding panels, inspectors, etc. ( Figure 1.5 ). It may look busy and cluttered at first, but you'll soon learn your way around. 
The document window shown here is a blank white Web page, ready for you to add your design and content. If you want, you can just click inside the window and start typing away! The details of creating a Web page will be covered in Chapter 3. If you have multiple files open at once (a fairly common occurrence), you'll see a row of tabs across the top of the document window ( Figure 1.6 ). To go from one file to another, just click on the name of the file you want to edit. 
Don't like tabs? Dreamweaver lets you get rid of them: -
Windows: When you open a document in Dreamweaver, click the Restore Down button ( Figure 1.7 ) in the top-right corner of the document window ( not the one in the Dreamweaver window). Once one document has been moved into its own window, all the others will automatically move, too. To go back to the original, click the Maximize button (which has replaced the Restore Down button) in the top-right corner.  -
Mac: Tabs are the normal interface in Windows, so Windows users have to manually lose the tabs any time they want to do without them. Mac users, though, are only getting tabs with Dreamweaver 8. Because of that, Dreamweaver allows Mac users to choose whether to get rid of tabs permanently (older Dreamweaver/Mac behavior), to force windows to always show tabs (Windows behavior), or to open documents in tabs, but only when two or more documents are open (new Dreamweaver/Mac behavior). These can be set by going to Dreamweaver > Preferences > General > Document Options and choosing your preferred combination of "Open documents in tabs" and "Always show tabs." The Menu Bar The Dreamweaver menu bar is about what you'd expect to see on your platform. There is one big difference between the Windows menu bar ( Figure 1.8 ) and the Mac menu bar ( Figure 1.9 ): the latter also contains a "Dreamweaver" menu. On it are the "About Dreamweaver," "Keyboard Shortcuts," and "Preferences" menu options. On Windows, the first can be found under Help, and the latter two under Edit. And of course, the Windows menu bar is part of the Dreamweaver window, while on the Mac the menu bar is always at the top of the screen. 
The Insert Bar Directly under the menu bar is what's called the Insert Bar. The Windows version is shown in Figure 1.10 and the Mac version in Figure 1.11 . As you might have guessed, the Insert Bar is used to insert content and objects into your page. The Insert Bar comes in eight different flavors (as seen in Figure 1.12 ): -
Common: This set of objects contains those that are the most commonly used such as links and images. -
Layout: This set includes tables, divs, layers , and frames : all objects that let you describe how you want to lay out your page. -
Forms: The forms set includes form elements such as text fields, buttons , and check boxes. -
Text: The text set doesn't actually contain objects to insert on the page; instead, it lets you style text that's already on the page. It's better, though, to just use the Property Inspector (see below) to do this instead. -
HTML: The HTML set is another less-than -useful group : it allows you to insert objects such as tables, frames, and scripts that are better done elsewhere. -
Application: If you're someday going to work with external data such as databases, that's when you'll use the Application set. -
Flash elements: Oddly enough, this set only holds one object, the Flash image viewer. If you want to add other Flash elements (such as Flash buttons, text, or video), go back to the Common set, where they can be found under Media Plugins. -
Favorites: This starts off empty, but you can modify it to contain just what you'd like it to have. To do this, choose the Favorites set, and then right-click (or Control-click, for Mac users with only a single-button mouse or trackpad). You'll be presented with a dialog that will allow you to add your most commonly used objects. 
If you're ever wondering what an icon on the Insert Bar does, just move your cursor over ita tool tip will appear with the icon's name. If there's a small black triangle to the right of an icon that means this object contains related tools and objects. Click on the object to view the pop-up menu of choices. The Document Toolbar Underneath the Insert Bar, and below any tabs you have open, you'll find the Document toolbar (Windows: Figure 1.13 , Mac: Figure 1.14 ). The Document toolbar itself consists of three parts : -
View mode buttons: These let you choose between Design, Code, and Split views of your document. See "Using Document Views" for more on what each of these does and when you'd want to choose each. -
The page title: Every page needs a descriptive title, and here's where you'll change yours. The page title, and how it differs from the name of a page itself, will be covered in Chapter 3, "Building Your First Page." -
Miscellaneous buttons: These contain everything from a "preview in browser" button, to a button to validate content, to a button to show additional visual aids inside Dreamweaver itself. 
Using document views The three document views allow you to choose which version of the document you want to see: -
Design: Figure 1.15 shows a typical Web page in the design view. This mode, known as WYSIWYG (What You See Is What You Get) allows you to get an idea of how your page will appear when viewed in a browser. For the most part, almost everything you want to do in Dreamweaver can be done in the design view, and this book will be entirely about what you can do here (except for Chapter 15, "Editing Code").  -
Code: Figure 1.16 shows the exact same page in the code view. Here's what the underlying markup and tags look like. While Chapter 15 will cover the ins-and-outs of tags, many people work quite well with Dreamweaver without ever using the code view.  -
Split: Figure 1.17 shows the same page, again, in the split view. If you can't decide whether you want to look at code or design, split lets you have the best of both, with code on the top, and the WYSIWYG view below. It's a great way to start to learn about markup, and it's also handy for control freaks who want to tweak their tags to be just so, and simultaneously see how their design looks. You can resize the amount of space taken up by each of the two views by dragging the split bar between the two panes up or down.  Other toolbars If you right-click in the Insert Bar or Document toolbar, you'll see that there are two other bars that aren't enabled by default: -
Style Rendering bar: If you've set up your CSS stylesheets so that your pages appear differently in, for example, a screen view versus a page designed for printing, this is what you'll use to switch between the two style renderings . Most of the time, you'll just want the default screen view. The button at the far-right end of the bar works a little differently: it toggles the page between a view that includes the rendered CSS styles and a view with CSS styles turned off. -
Standard bar: While Macromedia refers to this bar as "standard," it's actually used to make Dreamweaver feel more like a word processing application. Some examples of what it containsNew, Open, Save, Print, Cut, Copy, Pastewill give you an idea of what's here. As with the Style Rendering bar, the chances are that Macromedia's default for these toolbars (off) is what you'll want to use. You can also turn off the Insert Bar and Document toolbar in the same fashion if you want the cleanest possible layout (for instance, if you're working on a very small screen). To turn them back on, choose View > Toolbars, and select the ones you want to see again. The Status Bar The status bar is the bottom-most part of the document window. It's often also referred to as the tag selector , although that's really the correct name for just the left-most part. Click anywhere in a document, and the tag selector will show you the current tags based on the current location of the cursor. You can then click on any of the tags in the tag selector ( Figure 1.18 ) to select everything contained within that tag. Clicking on the <body> tag always selects the entire contents of the page. 
The right-most side of the status bar contains more controls ( Figure 1.19 ). The Select, Hand, and Zoom tools let you (respectively) select objects on the page, scroll around the page, and zoom into the page. The next control shows the current zoom percentage of the page. After that is the window size currently being displayed; you can click on this to get a popup menu of available window sizes ( Figure 1.20 ). And finally, there's an estimate of how long it would take a browser to download this page. If you don't like the default values for the last two controls, you can change either or both by selecting "Edit Sizes" from the popup menu. These will be covered more extensively in Chapter 6. 
The Property Inspector At the bottom of the screen is the Property Inspector ( Figure 1.21 , Windows; Figure 1.22 , Mac). Based on what is selected in the document window, different options appear in this inspector; that is, if you've selected some text, you'll see text options, while if you've selected an image, image options appear. The Property Inspector can be used to both view and modify the displayed options. The many uses of the Property Inspector will be covered throughout the rest of the book. 
In the lower-right corner of the inspector is an expand/collapse triangle. Depending on its current state, this will either expand or collapse the inspector. This lets you choose whether you want to display the extra information shown in the bottom half. The Panels Along the right side of the Dreamweaver window are panels . In the default installation of Dreamweaver, the CSS, Application, Tag Inspector, and Files panels are visible and docked . Also available, although not visible until you turn them on, are Frames, History, Results, Code Inspector, and Timelines. These can all be found under the Window menu. Each panel has its own unique features designed to make it easy to inspect and modify their respective objects. They do have a few things in common, shown in Figure 1.23 : 
-
Panel grip: At the top left of each panel are two vertical rows of dots. This is the panel grip . Click and drag the grip to move the panel to a new location. If you drag the panel out of the dock area, you will undock the panel ( Figure 1.24 ), and the panel group bar will appear. To dock the panel again, use the panel grip to drag the panel back into the dock area.  -
Panel group bar: The bar across the top of an undocked panel is the panel group bar . Click and drag the panel group bar to move the panel to a new location. Clicking the close box (Windows) or close button (Mac) closes the panel group; It does not re-dock it. On the Mac, a group of docked panels share a single panel group bar. -
Panel tab: Almost every panel contains two or more tabs; this one contains two: "Attributes" and "Behaviors." What displays in the remainder of the panel depends on which tab within that panel is active. -
Category view: This example (the Attributes tab in the Tag panel) has two possible views: category and list. The category view is currently not selected. If it was, the attributes would be shown grouped by category. -
List view: Here, the list view of the Attributes tab in the Tag panel is selected, so the attributes are listed below in alphabetical order. -
Panel options button: If you click the panel options button, a menu appears that gives you a variety of options ( Figure 1.25 ) based on which panel and tab you're currently on. This example shows the options for the Layers tab of the CSS menu. From here, you can group Layers with one of the other panels, close the Layers tab, rename the CSS panel group, maximize the CSS panel group, or close the CSS panel group. If you choose to group the Layers tab with another panel, you can choose the Application, Frames, Code Inspector, Timelines, Results, History, or Files panels, or you can create a new panel group. The ability to close tabs and move tabs from one panel to another allows you to set Dreamweaver up to work just the way you want it.   Tip
 |
