Read an Excerpt
Chapter 1: Basic Tools
- Explore essential components of the Dreamweaver interface
- Become familiar with the basic tools and functions
- Manage windows and maximize your desktop space
- Customize window settings and program preferences
In this chapter, we'll introduce you to the application interface. Then you'll learn how to use the program's three fundamental elements (windows, panels, and inspectors) and how to manage your desktop so you can view and easily find the tools you need. Finally, we'll touch on the topic of customizing the most commonly used Dreamweaver settings.
Opening DreamweaverAfter installing Dreamweaver, start the program by choosing Start|Programs|Dreamweaver| Dreamweaver 4. When you open Dreamweaver for the first time, you will be greeted with the splash screen, which verifies that you're the registered owner.
On a Mac, double-click on the Dreamweaver icon to open the program.
Create a ShortcutIf you plan to use Dreamweaver often and want to start the program quickly from your desktop, create a desktop shortcut. Locate the program file (which has the name Dreamweaver.exe) in Windows Explorer or My Computer, right-click on its icon, and choose Create Shortcut from the context menu. Drag the resulting shortcut icon onto your desktop.
On the Mac, select the Dreamweaver program icon in the Finder and select File|Make Alias (or press Cmd+A) to make an alias you can then drag onto your desktop.
Exploring the InterfaceAfter Dreamweaver has finished loading, you're ready to begin creating Web pages and manipulating their component parts. The windows, panels, and toolbars open in different parts of your desktop. You're first presented with a default set of elements, but you can rearrange them and add or subtract from a wide range of options when you get to know this program better. Don't panic if you see more panels open on your screen or if they don't match exactly the ones shown here. Later in this chapter, you'll learn how to move, delete, or add windows. For now, we've selected and arranged the components you'll probably find most useful:
- Document Window
- Objects panel
- Property Inspector
WindowsWindows in Dreamweaver have toolbars, menu bars, and scrollbars and appear as buttons on the Windows Taskbar (or, on the Mac, as items in the Finder menu). The window you're likely to use most often is the Document Window. This is where you do most of your work in Dreamweaver.
PanelsPanels, like the Objects panel shown here, contain menu options or buttons that let you format parts of a Web site. A panel has a close box and title bar but no scrollbar. You can grab the title bar to move the panel around. Panel components stay constant no matter what part of a Web site you're working on; an inspector's contents change depending on the currently selected item. The Objects panel you see here is the same one shown earlier-it's just been resized. You can resize panels or windows (not inspectors, however) by clicking on their edges or on their lower-right corner and dragging them in (to make them narrower) or out (to make them wider).
InspectorsAn inspector is a familiar item to users of Photoshop, PageMaker, and other design programs. It provides information specific to the currently selected Web-page object. If an image is selected, you see the Image Inspector. If a word or other textual element is selected, the Text Inspector appears with specs about the font being used (including font size) and with controls that let you change the settings.
Context MenusAnother way to get information that is specific to a certain aspect of the Dreamweaver interface is to look at the context menu associated with the element. When you right-click (Windows) or Ctrl+click (Mac) on an element, a context menu pops up on the screen; it contains menu options that pertain only to that element.
TooltipsHold the mouse cursor over any icon for a few seconds. A tooltip message pops up to name the icon, and some explanatory text appears in the status bar. Tooltips are helpful when you forget what a particular icon does or when you're searching for the right function.
Invisible ElementsWeb pages, like word processors and other software, include formatting elements that are initially invisible and that indicate empty spaces, paragraph marks, line breaks, and other things. In Dreamweaver, you make the invisible elements appear by choosing View|Visual Aids|Invisible Elements.
Formatting with the Document WindowThe Document Window is where most of the business of creating and editing Web-page content takes place in Dreamweaver. This window comes equipped with an extensive variety of tools, so this is an essential element to get to know right from the beginning. The Document Window has 10 primary components:
- Title bar
- Menu bar
- Status bar
- Quick Tag Editor
- Window Size indicator
- Download stats
- Launcher bar
- Content area
The Title BarEvery Web-page file you work with in Dreamweaver-even untitled files that you haven't yet begun to edit-are identified by information in the title bar at the top of the Document Window. The following items are important parts of the title bar:
- The Dreamweaver logo
- Title of the current page
- Location of file/file name [in brackets]
- Minimize/Maximize/Restore boxes
The Menu BarThe Dreamweaver menu bar is located directly beneath the title bar and is similar to the menu bars you've used with other Windows programs. The menu options that are needed to create and format Web pages (such as Modify, Commands, and Site) will be covered in later chapters.
The ToolbarThe toolbar appears just beneath the menu bar and contains the Title text box as well as buttons that control how you view the currently displayed document. From left to right, these buttons are as follows:
- Show Code View-Clicking on this button displays the HTML code for the current page.
Code View is useful for Web designers who are used to entering or editing the raw HTML for their Web pages. In Code View, you not only view the HTML, you can edit it as well, just as you would type and
replace text that will appear on the Web page itself.
- Show Code and Design Views-This button splits the Document Window into two halves. The top half displays the code; the bottom half displays the Design View. (In Design View, text and images appear as they would in a browser window.) Make a change to the code, and you can instantly see the effect in the bottom half of the window.
- Show Design View-If you are in Code View or Code and Design View, press this button to return the Document Window to the original Design View.
- Title Text Box-Enter a short, clear title for the current Web page in this box. The title you enter appears in the title bar for the page. The default title is Untitled.
- File Status Menu-Use this button, which contains options that help you work collaboratively on a Web site. You can check files in and out from local and remote servers and use Design Notes to add comments and notes for your team.
- Preview/Debug In Browser-Click on this button when you want to launch a browser and preview your page to see how it will look so you can debug problems and make changes if necessary.
- Refresh Design View-If you make a change to a page and it doesn't show up immediately, click on this button to refresh the page so you can see the effects of any recent changes.
- Options Menu-This button opens the Options menu, which contains options for hiding or displaying frame or table borders, rulers, the grid, or other visual aids.
Rulers and a GridAlthough it's impossible to achieve perfection when designing Web pages, Dreamweaver gives you a high degree of control when it comes to positioning tables, images, or other elements. That control comes from the rulers and from a grid of vertical and horizontal lines. You display these positioning aids by choosing View|Rulers and View|Grid, respectively. Each of these menu options has a submenu of options to let you control zero points and other settings.
Status BarThis narrow strip at the bottom of the Document Window contains lots of useful information about the file you're working on. It also contains a set of controls (the Launcher bar) that lets you open other windows and panels.
Here are the main components of the status bar:
- Tag Selector-The HTML tags that control the formatting of the currently selected contents appear in this area on the left side of the status bar.
- Window Size Indicator-This area displays the size of the current window in pixels. Click on the size to display a drop-down menu with standard window sizes you can select to reconfigure the current page....