Dreamweaver 4 Visual Insight

Dreamweaver 4 Visual Insight

by Greg Holden, Scott Willis

View All Available Formats & Editions

Through illustrations and screen shots, Dreamweaver™ 4 Visual Insight will lead beginners through a tour of Dreamweaver's most important tools and functions. Readers will learn how to convert text files to Web pages, add/edit Web pages images, make global changes to and publish a Web site. This book provides an easy and practical starter guide for professional


Through illustrations and screen shots, Dreamweaver™ 4 Visual Insight will lead beginners through a tour of Dreamweaver's most important tools and functions. Readers will learn how to convert text files to Web pages, add/edit Web pages images, make global changes to and publish a Web site. This book provides an easy and practical starter guide for professional designers who are new to the Internet, as well as technical novices who need a user-friendly yet powerful application for designing and managing fully functional web sites.

Product Details

Coriolis Group
Publication date:
Visual Insight Series
Product dimensions:
6.97(w) x 8.97(h) x 1.03(d)

Related Subjects

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

Your First Dreamweaver Session

Dreamweaver is a powerful Web-site design and management program that lets you achieve complex and interactive Web-page effects without having to learn the technical languages that make those effects possible. Although you don't necessarily have to learn HTML, JavaScript, or other programming languages, you do have to make an initial investment and familiarize yourself with Dreamweaver's work environment. By learning how to use the program's array of basic tools-including dialog boxes, menus, and buttons-you can go on to tackle more advanced features that let you create complex Web-design elements. Before long, you'll be able to create Web sites that are as feature rich and well organized as sites created by any highly trained Webmaster.

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 Dreamweaver

After 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 Shortcut

If 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 Interface

After 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:
  1. Document Window
  2. Objects panel
  3. Property Inspector
  4. Launcher


Windows 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.


Panels, 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).


An 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 Menus

Another 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.


Hold 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 Elements

Web 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 Window

The 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:
  1. Title bar
  2. Menu bar
  3. Toolbar
  4. Rulers
  5. Status bar
  6. Quick Tag Editor
  7. Window Size indicator
  8. Download stats
  9. Launcher bar
  10. Content area

The Title Bar

Every 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 title of a Web page is different from the file name. The file name is a short designation that you assign to the file and that appears in the Uniform Resource Locator (URL) that visitors use to locate the file with a Web browser. The title of the page appears in the title bar when the page is opened.

The Menu Bar

The 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 Toolbar

The 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.

  • Reference-This button opens the Reference panel, which you can use to look up information about HTML commands, JavaScript code, or style sheet instructions in case you forget exactly what command you need to use to achieve a particular effect.

  • Code Navigator-Click on this button to open the Code Navigator menu, which contains options for editing code elements such as scripts. If you have added JavaScript code to a page, for example, you can insert a breakpoint that tells a browser to stop executing code at that point.

  • 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 Grid

Although 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 Bar

This 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....

Meet the Author

Greg Holden (Chicago, IL) has written several books about the Internet and computer-related topics and numerous columns specializing in e-commerce, e-business, and the creation of Web sites. Greg was the co-founder of Stylus Media and currently serving as President of this company.

Scott Wills (Chicago, IL) is principal of Scott Wills & Associates, a communications design firm in Chicago, where for the past twenty years he has practiced, taught, and studied graphic communication. Scott has also authored Computer Tips for Artists, Designers, and Desktop Publishers and Tips on Type.

Customer Reviews

Average Review:

Write a Review

and post it to your social network


Most Helpful Customer Reviews

See all customer reviews >