Home > Articles > Graphics & Web Design > Dreamweaver & Flash

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-8Figure 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-9Figure 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-10Figure 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:

  1. From the document window, click Edit | Preferences.

  2. Select General from the Category box on the left side if it isn't already selected.

  3. 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-11Figure 1–11 You can customize Dreamweaver so that the Objects palette displays icons and text by changing properties in the Preferences Ð General dialog box.

  4. Click OK to make your changes take effect.

Now 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-12Figure 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-13Figure 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-14Figure 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-15Figure 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-16Figure 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-17Figure 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-18Figure 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:

  1. Position your cursor in the document window (Code view or Design view) where you would like the replayed task to be inserted.

  2. In the History palette, highlight the task(s) you would like to replay.

  3. 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:

  1. In the History palette, highlight the step or steps you would like to save as a command.

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

  3. 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).

  4. Click OK.

The steps are now saved as a command.

Replaying a Saved Command

To replay a saved command, follow these steps:

  1. Position your cursor either in Code view or Design view, where you would like the steps in the saved command to be inserted.

  2. Click the Commands menu.

  3. 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-19Figure 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-20Figure 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-21Figure 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-22Figure 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-23Figure 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-24Figure 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-25Figure 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-26Figure 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.

InformIT Promotional Mailings & Special Offers

I would like to receive exclusive offers and hear about products from InformIT and its family of brands. I can unsubscribe at any time.

Overview


Pearson Education, Inc., 221 River Street, Hoboken, New Jersey 07030, (Pearson) presents this site to provide information about products and services that can be purchased through this site.

This privacy notice provides an overview of our commitment to privacy and describes how we collect, protect, use and share personal information collected through this site. Please note that other Pearson websites and online products and services have their own separate privacy policies.

Collection and Use of Information


To conduct business and deliver products and services, Pearson collects and uses personal information in several ways in connection with this site, including:

Questions and Inquiries

For inquiries and questions, we collect the inquiry or question, together with name, contact details (email address, phone number and mailing address) and any other additional information voluntarily submitted to us through a Contact Us form or an email. We use this information to address the inquiry and respond to the question.

Online Store

For orders and purchases placed through our online store on this site, we collect order details, name, institution name and address (if applicable), email address, phone number, shipping and billing addresses, credit/debit card information, shipping options and any instructions. We use this information to complete transactions, fulfill orders, communicate with individuals placing orders or visiting the online store, and for related purposes.

Surveys

Pearson may offer opportunities to provide feedback or participate in surveys, including surveys evaluating Pearson products, services or sites. Participation is voluntary. Pearson collects information requested in the survey questions and uses the information to evaluate, support, maintain and improve products, services or sites, develop new products and services, conduct educational research and for other purposes specified in the survey.

Contests and Drawings

Occasionally, we may sponsor a contest or drawing. Participation is optional. Pearson collects name, contact information and other information specified on the entry form for the contest or drawing to conduct the contest or drawing. Pearson may collect additional personal information from the winners of a contest or drawing in order to award the prize and for tax reporting purposes, as required by law.

Newsletters

If you have elected to receive email newsletters or promotional mailings and special offers but want to unsubscribe, simply email information@informit.com.

Service Announcements

On rare occasions it is necessary to send out a strictly service related announcement. For instance, if our service is temporarily suspended for maintenance we might send users an email. Generally, users may not opt-out of these communications, though they can deactivate their account information. However, these communications are not promotional in nature.

Customer Service

We communicate with users on a regular basis to provide requested services and in regard to issues relating to their account we reply via email or phone in accordance with the users' wishes when a user submits their information through our Contact Us form.

Other Collection and Use of Information


Application and System Logs

Pearson automatically collects log data to help ensure the delivery, availability and security of this site. Log data may include technical information about how a user or visitor connected to this site, such as browser type, type of computer/device, operating system, internet service provider and IP address. We use this information for support purposes and to monitor the health of the site, identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents and appropriately scale computing resources.

Web Analytics

Pearson may use third party web trend analytical services, including Google Analytics, to collect visitor information, such as IP addresses, browser types, referring pages, pages visited and time spent on a particular site. While these analytical services collect and report information on an anonymous basis, they may use cookies to gather web trend information. The information gathered may enable Pearson (but not the third party web trend services) to link information with application and system log data. Pearson uses this information for system administration and to identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents, appropriately scale computing resources and otherwise support and deliver this site and its services.

Cookies and Related Technologies

This site uses cookies and similar technologies to personalize content, measure traffic patterns, control security, track use and access of information on this site, and provide interest-based messages and advertising. Users can manage and block the use of cookies through their browser. Disabling or blocking certain cookies may limit the functionality of this site.

Do Not Track

This site currently does not respond to Do Not Track signals.

Security


Pearson uses appropriate physical, administrative and technical security measures to protect personal information from unauthorized access, use and disclosure.

Children


This site is not directed to children under the age of 13.

Marketing


Pearson may send or direct marketing communications to users, provided that

  • Pearson will not use personal information collected or processed as a K-12 school service provider for the purpose of directed or targeted advertising.
  • Such marketing is consistent with applicable law and Pearson's legal obligations.
  • Pearson will not knowingly direct or send marketing communications to an individual who has expressed a preference not to receive marketing.
  • Where required by applicable law, express or implied consent to marketing exists and has not been withdrawn.

Pearson may provide personal information to a third party service provider on a restricted basis to provide marketing solely on behalf of Pearson or an affiliate or customer for whom Pearson is a service provider. Marketing preferences may be changed at any time.

Correcting/Updating Personal Information


If a user's personally identifiable information changes (such as your postal address or email address), we provide a way to correct or update that user's personal data provided to us. This can be done on the Account page. If a user no longer desires our service and desires to delete his or her account, please contact us at customer-service@informit.com and we will process the deletion of a user's account.

Choice/Opt-out


Users can always make an informed choice as to whether they should proceed with certain services offered by InformIT. If you choose to remove yourself from our mailing list(s) simply visit the following page and uncheck any communication you no longer want to receive: www.informit.com/u.aspx.

Sale of Personal Information


Pearson does not rent or sell personal information in exchange for any payment of money.

While Pearson does not sell personal information, as defined in Nevada law, Nevada residents may email a request for no sale of their personal information to NevadaDesignatedRequest@pearson.com.

Supplemental Privacy Statement for California Residents


California residents should read our Supplemental privacy statement for California residents in conjunction with this Privacy Notice. The Supplemental privacy statement for California residents explains Pearson's commitment to comply with California law and applies to personal information of California residents collected in connection with this site and the Services.

Sharing and Disclosure


Pearson may disclose personal information, as follows:

  • As required by law.
  • With the consent of the individual (or their parent, if the individual is a minor)
  • In response to a subpoena, court order or legal process, to the extent permitted or required by law
  • To protect the security and safety of individuals, data, assets and systems, consistent with applicable law
  • In connection the sale, joint venture or other transfer of some or all of its company or assets, subject to the provisions of this Privacy Notice
  • To investigate or address actual or suspected fraud or other illegal activities
  • To exercise its legal rights, including enforcement of the Terms of Use for this site or another contract
  • To affiliated Pearson companies and other companies and organizations who perform work for Pearson and are obligated to protect the privacy of personal information consistent with this Privacy Notice
  • To a school, organization, company or government agency, where Pearson collects or processes the personal information in a school setting or on behalf of such organization, company or government agency.

Links


This web site contains links to other sites. Please be aware that we are not responsible for the privacy practices of such other sites. We encourage our users to be aware when they leave our site and to read the privacy statements of each and every web site that collects Personal Information. This privacy statement applies solely to information collected by this web site.

Requests and Contact


Please contact us about this Privacy Notice or if you have any requests or questions relating to the privacy of your personal information.

Changes to this Privacy Notice


We may revise this Privacy Notice through an updated posting. We will identify the effective date of the revision in the posting. Often, updates are made to provide greater clarity or to comply with changes in regulatory requirements. If the updates involve material changes to the collection, protection, use or disclosure of Personal Information, Pearson will provide notice of the change through a conspicuous notice on this site or other appropriate way. Continued use of the site after the effective date of a posted revision evidences acceptance. Please contact us if you have questions or concerns about the Privacy Notice or any objection to any revisions.

Last Update: November 17, 2020