This chapter is from the book
This chapter is from the book
This chapter is from the book
Palettes and Inspectors
In this section, you'll get a quick overview of the different tools available through Dreamweaver's palettes and inspectors, which you'll learn more about throughout the book.
The Objects Palette
The Objects palette (Figure 1–8) holds a collection of 58 of the most commonly used tools for building Web pages. From the Objects palette, you can quickly insert a graphic, an HTML table, a form that users fill out, and much more.
)
Figure 1–8 The Objects palette holds commonly used objects represented by icons. There are seven panels of buttons. The Common panel is visible in this screen shot and is the default panel that appears when you first
launch Dreamweaver.
The 58 objects are spread out over seven panels, which are all accessible from the Objects palette. The default panel that appears in the Objects palette is the Common panel shown in Figure 1–8. The Common panel includes buttons that allow you to quickly insert images, tables, Macromedia Flash movies, Java applets, and more.
Viewing or Hiding the Objects Palette
You can view or hide the Objects palette by selecting Window | Objects from the document window or by pressing CTRL + F2 (Mac users: COMMAND + F2); I would recommend leaving the Objects palette open as you'll use it frequently when working in Dreamweaver.
Switching Between Panels
When you want to access the objects on a panel, click the name of the panel at the top of the Objects palette and select the new panel you would like to display, as shown in Figure 1–9.
)
Figure 1–9 You can choose which of the seven panels is displayed in
the Objects palette by clicking the name of the current panel, then selecting
the new one to display.
The new panel and its associated objects will appear, as shown in Figure 1–10.
)
Figure 1–10 The Objects palette with the Forms panel selected. The
tool tips help you figure out what icons stand for in Dreamweaver.
As you can see, the Forms panel has a number of helpful objects that can be added easily to your Web page; you'll learn more about these in Chapter 6, "Designing a Contact Form."
Using Tool Tips to Find Out What Icons Mean
Once you've used Dreamweaver for a while, you'll remember what each icon represents. While you're familiarizing yourself with the different objects, you can confirm what each object represents by moving your mouse over it—a tool tip will pop up that tells you what the icon stands for, as shown in Figure 1–10.
Showing Icons and Text
By default, Dreamweaver only displays icons in the Objects palette. If you prefer, you can adjust the preferences to show icons and the text that describes each icon for the Objects palette. To turn on icons and text for the Objects palette, follow these steps:
From the document window, click Edit | Preferences.
Select General from the Category box on the left side if it isn't already selected.
On the right side of the Preferences dialog box, click on the Object Palette* drop-down menu box and select Icons and Text, as shown in Figure 1–11.
Figure 1–11 You can customize Dreamweaver so that the Objects palette
displays icons and text by changing properties in the Preferences Ð General
dialog box.Click OK to make your changes take effect.
)
Figure 1–11Now that you've set up Dreamweaver to show icons and text in the Objects palette, your Forms panel should look like Figure 1–12.
)
Figure 1–12 The Objects palette's Form panel with icons and text
visible.
The Property Inspector
The Property inspector (Figure 1–13) is one of the most frequently used tools in Dreamweaver; it allows you to review or edit the properties of any element on a page in the document window without having to edit the HTML source code directly. An element on a page is either an object (i.e., a table, image, or form element) or text that you have entered.
)
Figure 1–13 The Property inspector allows you to review and edit the
properties of any element on a page in the document window.
To view or hide the Property inspector, click Window | Properties from the document window or press CTRL + F3 (Mac users: COMMAND + F3).
Using the Property inspector is really easy and can save you a lot of time. To use it, simply select the item you want to see properties for (for example, the table in Figure 1–14) and the properties for that element (the table) will appear in the Property inspector (bottom of Figure 1–14).
)
Figure 1–14 Selecting an element within the document window loads
that element's properties within the Property inspector.
Minimizing and Maximizing the Property Inspector
The Property inspector in Figures 1–13 and 1–14 is shown in maximized view, which ensures that you're seeing all the available properties for the element you've selected. To minimize the Property inspector, simply click on the arrow at the bottom right corner and it will collapse and take up less room on your desktop, like the one in Figure 1–15.
)
Figure 1–15 Clicking on the arrow at the bottom right corner of the
Property inspector will expand or collapse it to expose or hide
properties.
You'll learn more about working with the Property inspector throughout this book.
HTML Code View
As good as Dreamweaver is at writing code for you, there may be times when you'll want to edit a Web page's source code by hand or hand-code something from scratch. By default, Dreamweaver 4 displays the document window in a split view, which includes the Code view on the top and the Design view on the bottom. To edit or add HTML code, simply type in the Code view at the top and the result will display in the Design view, as shown in Figure 1–16.
)
Figure 1–16 By default, the document window displays the Code view on
the top and the Design view on the bottom; this is referred to as split
view.
If you would like the document window to only display the Code view, click the Show Code View button in the document window, as shown in Figure 1–17.
)
Figure 1–17 The HTML Source inspector allows you to edit or add HTML
and other source code by hand.
The History Palette
The History palette (shown in Figure 1–18) keeps track of the work you do on a document and allows you to copy, replay, undo, and create reusable commands out of the steps it tracks to save you time when performing repetitive tasks.
)
Figure 1–18 The History palette keeps track of what you do and allows
you to replay, copy, or undo those steps, plus more.
To view or hide the History palette, click Window | History from the document window or press Shift + F10.
Replaying Previous Tasks
Say you've created a table with specific dimensions and column and row specifications. Instead of recreating an identical table from scratch, you can have Dreamweaver replay that item from the History palette to save you the trouble of building a duplicate. To replay a previous task, follow these steps:
Position your cursor in the document window (Code view or Design view) where you would like the replayed task to be inserted.
In the History palette, highlight the task(s) you would like to replay.
Click the Replay button at the bottom of the History palette.
Saving Selected Steps as a Command
When building Web pages, it's fairly common to have to recreate some of the same steps you've performed in the past on new pages. A common example is a table structure used to lay out content or a code snippet that performs a certain function. With Dreamweaver, you can avoid having to recreate these reusable pieces from scratch or finding them in a different document and copy and paste the code. Instead, you can use the History palette to save the steps you took and create commands. Then, you can simply select the step from the Dreamweaver Commands menu and the steps are replayed, instantly recreating the table structure, code snippet, or whatever else you saved as a command.
To save steps as a command, follow these steps:
In the History palette, highlight the step or steps you would like to save as a command.
At the bottom right corner of the History palette, click the Save selected steps as a command... icon (it looks like a floppy disk). The Save As Command dialog box will appear.
In the Save As Command dialog box, type the unique name you would like to give to the command (for example, Table 3x3 75% Width).
Click OK.
The steps are now saved as a command.
Replaying a Saved Command
To replay a saved command, follow these steps:
Position your cursor either in Code view or Design view, where you would like the steps in the saved command to be inserted.
Click the Commands menu.
At the bottom of the Commands menu, select the command you saved, which should be replayed (for example, Table 3x3 75% Width).
The HTML Styles Palette
Dreamweaver defines an HTML style as one or more HTML tags (for instance, B, FONT, CENTER, etc.) that apply formatting to text. While the World Wide Web Consortium's (W3C's) HTML 4.0 specification discourages the use of HTML formatting in favor of Cascading Style Sheets (CSS), Web developers that still cater to version 3.0 and older browsers can still use HTML styles to help quickly and easily format their sites.
The HTML Styles palette (Figure 1–19) keeps track of the styles you have available (including those you create or edit) and allows you to quickly apply those styles by simply selecting the text or object you want to apply to them, then selecting the appropriate style.
)
Figure 1–19 The HTML Styles palette allows Web developers to create,
edit, and apply HTML formatting to text and objects quickly and easily.
To view or hide the HTML Styles palette, click Window | HTML Styles from the document window or press CTRL + F11 (Mac users: COMMAND + F11).
You'll learn how to work with HTML styles in Chapter 2, "Working with Text."
The CSS Styles Palette
If you want to incorporate stylesheets into your Web sites, Dreamweaver's CSS Styles palette (Figure 1–20) will help you link to existing stylesheet documents, embed stylesheet code, edit existing declarations, or create new ones.
)
Figure 1–20 The CSS Styles palette gives you a central location
to add, create, edit, and link to CSS code.
To view or hide the CSS Styles palette, click Window | CSS Styles from the document window or press Shift + F11.
You'll learn how to incorporate CSS into your Web pages in Chapter 9, "Controlling Text with Cascading Style Sheets," and Chapter 12, "Using Layers to Build a Web Page."
The Layers Palette
The Layers palette (Figure 1–21) keeps track of all the layers on your Web page and makes it easier to manage them by allowing you to do things like modify their z-order, change their descriptive names, and much more. As you insert layers, they are listed from top (newest one added) to bottom (first one added). You can change the order of the layers in the Layers palette.
)
Figure 1–21 The Layers palette allows you to manage the layers on a
Web page.
To view or hide the Layers palette, click Window | Layers from the document window or press F2.
You'll learn more about layers and the Layers palette in Chapter 12, "Using Layers to Build a Web Page."
The Behavior Inspector
A behavior in Dreamweaver is defined as a combination of an event and an action. A typical example of a behavior is a simple image rollover. An example of an event is when a user moves the mouse over an image. This event triggers an action to occur, such as causing the image to be replaced by another one. Another example of a behavior is code that checks whether a browser is of a certain type or version, and if it is, doing something based on that information. The Behavior inspector (Figure 1–22) is a really powerful tool that allows you to add these types of interactivity with a lot less effort than having to hand-code everything yourself.
)
Figure 1–22 The Behavior inspector allows you to add interactivity
(behaviors) to your Web pages with minimal work.
To view or hide the Behavior inspector, click Window | Behaviors from the document window or press Shift + F3.
You'll learn more about behaviors and the Behavior inspector in Chapter 13, "Using Behaviors to Animate a DHTML Drop-Down Menu and Much More . . ."
The Library Palette
Dreamweaver allows you to incorporate library items into your Web pages to make Web site maintenance easier. Library items are reusable chunks of text, code, images, or other page elements that reside between the <BODY> and </BODY> tags of a Web document. Library items are created once and stored in only one file, but are referenced from as many files as you want on your Web site.
Say that you have a copyright statement at the bottom of every page of your Web site. If you were to copy the original HTML for the copyright on every page and then wanted to make a simple text change, you would have to manually make the change on every page. Instead, you can create a Library item out of that copyright statement. You then include a reference to that Library item on every page on which you want it to appear. When you want to update the item, you change the original Library item and all the pages that reference it instantly reflect the change.
The Library palette (Figure 1–23) displays all of the items in the library file for the current site. You can manage the items listed in the Library palette by performing tasks such as creating new library items, adding existing library items to additional pages, deleting library items, renaming library items, and more.
)
Figure 1–23 The Library palette displays library items for the
current site and allows you to manage those items.
To view or hide the Library palette, select the Library icon from the mini-launcher (it's the graphic of an open book) or click Window | Library from the document window.
You'll learn more about library items and the Library palette in Chapter 11, "Library Items and Server-Side Includes."
Frame Inspector
The Frame inspector (Figure 1–24) gives you a visual representation of the frames in a document. You can quickly select a frame within a document by clicking on the corresponding frame in the Frame inspector. Within the Frame inspector, you can also see the name of each frame, which helps in specifying targets when writing cross-frame links (like from a navigation to a main document frame).
)
Figure 1–24 The Frame inspector makes it easier to work with Web
sites that use a frameset structure.
To view or hide the Frame inspector, click Window | Frames or press SHIFT + F2.
Templates Palette
Dreamweaver templates are similar to Library items. Templates allow a Web developer to quickly and easily maintain a site by creating a master document that in turn controls the look and feel of similar documents. When you make a change to a template, it updates every document that is linked to the template. This is great for maintaining a consistent look and feel with navigation items, logos, and much more.
Templates also allow you to create documents that have non-editable (or locked) regions and unlocked (editable) regions. These editable and non-editable regions allow you to empower non-technical staff members to make text-based edits to documents without having to worry about them accidentally modifying or deleting a portion of code.
The Templates palette (Figure 1–25) allows you to create and manage templates by adding new areas (locked regions) to a template, editing existing templates, renaming templates, and more.
)
Figure 1–25 The Templates menu allows you to manage the
editable and non- editable regions on a page.
To view or hide the Templates palette, click Window | Templates.
You'll learn more about templates in Chapter 10, "Save Time with Templates."
Dockable Floating Palettes
If each palette and inspector were separately loaded in your workspace, they would cover the whole screen (and more!), so Dreamweaver includes a feature called dockable floating palettes. What this means is that all of the palettes and inspectors except for the mini-launcher, Property inspector, and Site window can be docked—or combined—into one floating palette with multiple tabs. This makes it easy to find the palette or inspector you want while taking up the least amount of screen space possible.
To dock one palette or inspector with another, click and drag the tab of the palette or inspector you want to move onto the palette you want to combine it with. Figure 1–26 shows the outline of the Behaviors palette as it is being dragged and docked in the same window as the Templates palette.
)
Figure 1–26 To combine multiple palettes or inspectors, click and
drag the tab of one palette or inspector onto the other, then release the mouse
button.
There's a lot of power and functionality available through the various palettes and inspectors in Dreamweaver. Throughout the rest of the book, you'll get a more in-depth understanding of the most commonly used objects, palettes, and inspectors, especially as you follow along with the tutorials.