Introducing Dreamweaver

Introducing Dreamweaver - Property Inspector
(Page 2 of 4 )

The Property inspector is a very handy tool that allows you to change attributes on most HTML tags in a very efficient manner. It constantly changes its contents to suit the currently selected element in your document. If you select a block of text, the Property inspector will display fields and buttons that allow you to change the attributes of the selected element such as color, font, and other attributes, as shown in Figure 1-3. If you select a table, the Property inspector will display fields that directly relate to the <table> tag such as cell spacing and cell padding, as shown in Figure 1-4. You will quickly discover that the Property inspector is probably the most useful element of the Dreamweaver interface.

 Figure 1-3. The Property inspector when text is selected

 Figure 1-4. The Property inspector when a table is selected

Insert Bar

The Insert bar is used to insert elements into your document. It contains categorized tabs, each containing a collection of icons relevant to the tab’s category. By positioning the mouse pointer at a specific location on the document’s design surface and clicking an icon in the Insert bar, the associated element can be easily inserted into the document at that location.

The Common Tab

The Common tab of the Insert bar (shown in Figure 1-5) contains icons that can be used to insert many commonly used elements.

 Figure 1-5. The Insert bar: Common tab

Icons from left to right are:

• Hyperlink: Inserts a link to another page.
• Email Link: Inserts a mailto: link.
• Named Anchor: Inserts an anchor link.
• Insert Table: Inserts an HTML table <table> tag.
• Draw Layer: Allows you to draw a layer on the document surface. The end result is an absolutely positioned <div> tag with the width and height corresponding to what you drew.
• Image: Inserts an image <img> tag.
• Image Placeholder: Inserts a blank image.
• Fireworks HTML: Inserts HTML from a page created with Macromedia Fireworks.
• Flash: Allows you to insert Flash elements into a web page.
• Rollover Image: Inserts the code to create an image that changes when the mouse pointer moves over it.
• Navigation Bar: Inserts a navigation menu.
• Horizontal Rule: Inserts an <hr> tag.
• Date: Inserts the current date.
• Tabular Data: Inserts tabular data from external files.
• Comments: Inserts an HTML comment.
• Tag Chooser: Opens the Tag Chooser to allow selection of tags not present in the Insert bar.

The ASP.NET Tab

The ASP.NET tab of the Insert bar (shown in Figure 1-6) contains icons that can be used to insert many commonly used ASP.NET elements.

Figure 1-6. The Insert bar: ASP.NET tab

Icons from left to right are: 

• Register Custom Tag: Inserts a Register TagPrefix line
• Import Namespace: Inserts an Import Namespace line
• Trimmed Form Element: Inserts code for a trimmed Form element
• Trimmed QueryString Element: Inserts code for a trimmed QueryString element
• Runat Server: Inserts runat="server"
• Bound Data: Inserts Bound Data tags (<%# %>)
• Page_Load: Inserts code for the Page_Load procedure
• Button: Inserts HTML from a page created with Macromedia Fireworks
• asp:CheckBox: Inserts an <asp:CheckBox> tag
• asp:CheckBoxList: Inserts an <asp:CheckBoxList> tag
• asp:DropDownList: Inserts an <asp:DropDownList> tag
• asp:ImageButton: Inserts an <asp:ImageButton> tag
• asp:Label: Inserts an <asp:Label> tag
• asp:ListBox: Inserts an <asp:ListBox> tag
• asp:RadioButton: Inserts an <asp:RadioButton> tag
• asp:RadioButtonList: Inserts an <asp:RadioButtonList> tag
• asp:TextBox: Inserts an <asp:TextBox> tag
• More Tags: Opens the Tag Chooser to allow selection of tags not present inthe Insert bar

This chapter is from ASP.NET Web Development with Macromedia Dreamweaver MX 2004, by Costas Hadjisotiriou (Apress, 2004, ISBN: 1590593480). Check it out at your favorite bookstore today. Buy this book now.

blog comments powered by Disqus