Macromedia Dreamweaver 8 UNLEASHED [Electronic resources] نسخه متنی

The Insert Bar

The Insert bar, similar to the Insert menu, is a visual representation of elements that can be inserted into the Document window (see Figure 2.22).

The Insert bar allows you to choose from the following eight categories:

• Common Objects :
  Allows you to quickly insert objects that you'll work with most often such as hyperlinks, tables, and images.

• Layout Objects :
  Allows you to quickly insert layout and formatting objects such as tables, <div> tags, and even layers. After a layout object has been inserted, Dreamweaver allows you to switch between Standard, Expanded, and Layout modes.

• Form Objects :
  Use Form Objects to insert form widgets such as text fields, radio buttons, lists, menus, buttons, and so on.

• Text Objects :
  If you need to insert special characters, headings, and so on, choose elements from this category.

• :
  Variou229-related objects such as horizontal rules, head tags, and script tags can be found within this category.

• Application Objects :
  When working with dynamic sites, use this category to quickly insert objects based on the technology you're using.

• Flash Elements :
  Insert Flash-based elements from this menu.

• Favorites :
  Select from a pre-configurable list of favorite objects.

In Figure 2.22, notice that the Insert bar features a unique selectable drop-down menu for switching between categories. You can also choose to display the Insert bar as a tabbed menu, as shown in Figure 2.23, simply by choosing the Show as Tabs option from the Category drop-down menu.

Of course, as was the case with the Properties Inspector, the Insert bar can be made visible or hidden simply by selecting Window, Insert.

Common Objects

You can choose options from the Common Objects category to quickly insert objects that you'll work with most often, including these:

• Hyperlink :
  This object provides a dialog that contains options for creating hyperlinks in you228 documents.

• Email Link :
  This option launches a dialog providing two text fields: one to type text that will be hyperlinked, and the other to type the actual hyperlink itself.

• Named Anchor :
  The Named Anchor object enables you to creat215 anchors. Named anchors act as reference points for hyperlinks to link to an exact location on the page.

• Table :
  Selecting this object opens the Table dialog that allows you to customize properties such as rows, columns, and widths before inserting a table.

• Insert DIV Tag :
  Inserts the Layout Block <div> element within the page.

• Image Menu :
  Use this menu to choose from various types of image options including the following:

  • Image :
    Opens a dialog that allows you to choose from an image on your computer to insert into your document.

  • Image Placeholder :
    Allows you to quickly insert an image placeholder. This can come in handy when you want to start laying out a page but haven't quite finished the graphics.

  • Rollover Image :
    Choosing this option opens the Rollover Image dialog that allows you to quickly and easily create JavaScript-based rollovers without manually having to code anything.

  • Firework229 :
    Macromedia's Fireworks allows you to quickly create buttons, imagemaps, and so on that can be inserted into Dreamweaver. Selecting this option allows you to quickly insert that code.

  • Navigation Bar :
    The Navigation Bar option picks up where the Rollover Image option leaves off. Choose this option to create a fully featured navigation bar with up to four states per button including Up, Over, Down, and Over While Down states.

  • Hotspot Drawing Tools :
    When working with imagemaps, use these options to create linkable hotspots in the image.

• Media Menu :
  Choose options from this menu when you want to insert Flash or Shockwave movies, ActiveX components, Java Applets, or generic plug-ins within your page.

• Date :
  Opens the Insert Date dialog that allows you to choose from a list of pre-configured date and/or time stamp options.

• Server-Side Include :
  Select this button to open the Select File dialog. Use this dialog to browse for and select a server-side include to use within your page. As you'll see later in the book,

  server-side includes are web pages that can be inserted into other web pages, making global changes easier and much more efficient.

• Comment :
  A programmer's friend, you can quickly insert comments directly into you228 code by selecting this option. Comments aren't visible to users in the browser but rather are visible to you, the developer, in Code view.

• Templates :
  Use the Templates menu to choose objects for working with templates. Templates are covered in greater detail in Chapter 15, "Working with Templates."

• Tag Chooser :
  Choose this option to open the Tag Chooser dialog. The Tag Chooser is a handy window that allows you to select and subsequently insert any element from the library o216, CFML, ASP, ASP.NET, JSP, Jrun, PHP, and WML tags.

Layout Objects

As you begin to familiarize yourself with table-based web page design (covered in greater detail in Chapter 6, "Web Page Structuring Using Tables"), you'll use the Layout objects with more regularity. The Layout category is broken up into three modes: Standard mode allows you to work with tables, <div> tags, and layers freely; Expanded mode temporarily adds padding to tables, making them easier to work with; and Layout mode offers you a quick and easy approach to drawing tables and cells directly onto the Document window. Here's a complete list of features beginning from left to right:

• Insert Table :
  Opens the Insert Table dialog that allows you to customize further options for the insertion of a new table in the Document window.

• Insert Div Tag :
  Opens the Insert Div Tag dialog that allows you to customize options for the insertion of a new <div> tag in the Document window.

• Draw Layer :
  Allows you to freely draw a layer onto the Document window.

• Standard, Expanded, Layout Modes :
  Allows you to select between the default Standard mode, Expanded mode, or Layout mode. In Layout mode, the following options become available:

  • Layout Table :
    Choosing this option allows you to draw a table onto the page, bypassing the Insert Table dialog.

  • Draw Layout Cell :
    Choosing this option allows you to draw cells within a drawn table. After you've drawn cells within a table, the following four options become available:

    • Insert Row Above :
      Inserts a row above a cell.

    • Insert Row Below :
      Inserts a row below a cell.

    • Insert Column to the Left :
      Inserts a column to the left of a cell.

    • Insert Column to the Right :
      Inserts a column to the right of a cell.

• Frames Menu :
  Opens the Frameset submenu that allows you to pick from various options for splitting the Document window into frames. Frames are covered in more detail in Chapter 8, "Working with Frames and Framesets."

• Tabular Data :
  Opens the Insert Tabular Data dialog. Use this option when you want to import large amounts of data contained in spreadsheets, comma-separated files, comma-delimited files, and so on.

Form Objects

Covered in more detail in Chapter 9, "HTML Forms," form objects facilitate interactivity between your users and your dynamic web applications. Aside from adding form objects by using the Insert, Form menu, you can visually add form objects from this category.

[View full size image]

Text Objects

As you can see from Figure 2.25, Text objects occupy a section on the Insert bar from which text can be easily formatted.

Text objects can be divided into the following categories (moving from left to right):

• Font Tag Editor :
  Opens the Font Tag Editor dialog, giving you single-click access to commonly typed tags and attributes.

• Font Weights and Styles :
  Allows you to add a bold (<b>) or strong (<strong>) tag as well as an italic (<i>) or emphasis (<em>) tag.

• Paragraph, Blockquote, & Preformatted :
  Allows you to format blocks of text with the paragraph (<p>) tag, indent text with the blockquote (<blockquote>) tag, or preserve the formatting of content with the preformatted (<pre>) tag.

• Headings :
  Provides three heading options (H1, H2, H3) for your text.

• Lists :
  Allows you to pick from three types of lists including ordered list (numbered), unordered list (bulleted), and definition list.

• Abbreviations and Acronyms :
  Assign the abbreviation or acronym tag to text within your page.

• Special Characters :
  Select from a group of predefined special characters from this menu. The most obvious are listed but you can choose from a character map by selecting the Other Characters option.

Although most of the Text objects are readily available from the Properties Inspector or the Text menu, the Text category does provide an interesting piece of functionality in the Font Tag Editor. The Font Tag Editor is best used when hand coding because it allows single-click access to commonly typed tags and attributes. Instead of having to type tag attributes, you can select them from the Font Tag Editor in a GUI interface.

HTML Objects

You can add various miscallaneou229 objects directly from this category. For instance, you can add horizontal rules, meta tags, table objects, frame/no frame objects, and script tags. Here's a complete list of objects moving from left to right on the Insert bar:

• Horizontal Rule :
  Inserts a straight horizontal line on the page. Using the Properties Inspector, you can change the width and height of the line.

• Head Tags :
  This submenu allows you to pick from various head objects including the following:

  • Meta Tags :
    Meta tags are typically used to describe the contents of the web page. This can be especially useful wit218 validators.

  • Keywords :
    Similar to the way meta tags describe the page, keywords describe the page and its content for search engines. If you create a site and never register or submit it to any search engine or web directory, you might still get a listing. The reason for that is because search engines run programs called

    spiders , which gather meta information from different websites.

  • Description :
    Use the Description meta tag in conjunction with the Keyword meta tag to provide a brief description to potential clients as to what your web page is about. The description you type shows up directly underneath your hyperlink in the results page of the search engine.

  • Refresh :
    There are different uses for the Refresh meta tag. Simply put, Refresh causes the page to refresh itself. This could come in useful if you were displaying live sports scores on your page. You could include a Refresh meta tag so that the sports scores refresh every 30, 60, or 90 seconds, for instance. This would offset the user needing to click the browser's Refresh button.

  • Base :
    You can use the Base tag as a way to point all link references on your page to a single, relative address.

  • Link :
    Most commonly used with external style sheets and JavaScript files, you can use the Link tag as a way to directly link an external file into your document.

• Table Tags :
  Use the table objects to insert a variety of table-based tags including the table, table row, table header, table data, and table caption tags.

• Frame Tags :
  Use the frame objects to insert a variety of frame-based tags including frameset, frame, and floating frame tags. You can even use the No Frames tag to define content that should appear if a browser is detected that doesn't support frames.

• Script Tags :
  Use the script objects to insert a variety of script-based tags including script or server-side includes. You can even use the No Script tag to define content that should appear if a browser is detected that doesn't support scripts.

Application Objects

Throughout the second half of this book, you will become increasingly familiar with application objects. Depending on what server technology you're using, the Application Objects category will tailor itself to accommodate features and functionality of a specific technology. To prove this point, I'll briefly create a sample ASP.NET site. As you can see from

[View full size image]

It's also important to notice that, depending on the server technology you decide to use, a new category appears to support the particular technology. Again, this topic is covered in much more detail in the second half of the book.

Flash Elements

The Flash elements category allows you to add Macromedia Flash components directly into your document. Dreamweaver ships with one component that lets you create a feature-rich interactive slideshow directly in your web page. Other Flash elements can be downloaded from Macromedia's Exchange at http://www.macromedia.com/cfusion/exchange/index.cfm.

Favorites

As you familiarize yourself with using the objects bars, you'll quickly begin to realize that you're using some objects more than others. When this happens, you'll want to create object favorites and store them in the Favorites category, making them easy to reference. To create a favorite object, follow these steps: