Exploring the Tools


Before jumping into further development of any Web pages, you need to become familiar with the variety of tools and panels that make up the Dreamweaver 8 interface and enable you to effectively produce a Website.

1.

Move the pointer over the Document window and the document toolbar. Rest the pointer over a button to see its name.

The majority of your design and coding work is done within the Document window. This area is known as the body of the page, in which you can insert, modify, and delete the wide variety of elements that make up a Web page. As you work, the Document window displays an approximation of the way your page should appear in a browser. It is an approximation because there are differences in the ways that browsers interpret Web pages.

The filename yoga.html (as you saved this page in the previous exercise) is shown on the title bar (On Windows, the filename is shown in a tab at the top of the document window; see the illustration on page 31). By default, this page is initially titled Untitled Document, as shown in the Title text field on the document toolbar. The document toolbar, which can be shown or hidden through View > Toolbars, contains buttons and pop-up menus to provide quick access to common operations. By default, the toolbar is part of the document window. Windows users can double-click or drag the gripper area on the left edge of the toolbar to separate it from the document window, making it become an individual panel.

There are three view modes in Dreamweaver: Design view, Code view, and Split view, which shows both Design view and Code view. The buttons for these modes are located on the left side of the document toolbar. You can see the view mode names by pausing the pointer over the buttons. At this point, the view mode you are using should be Design view. The active button is highlighted, indicating that Dreamweaver is displaying the page in that view mode. You will work with Code view and Split view in Lesson 16. If the Document window is shown split into two panes with code in one pane or a single pane with code, you need to select the Design View icon located on the document toolbar.

In the lower-left corner of the document window is the tag selector. The tag selector always starts from the <body> tag and hierarchically displays HTML tags that apply to the currently selected element. Using the HTML tags that correspond with those elements, the tag selector allows you to move quickly through the hierarchy of code to see what element you are working with and to easily select other elements. Getting used to working with the tag selector will be particularly helpful when you begin using tables in Lesson 6.

Tip

If you can't see the tag selector, try reducing the size of your document window. The tag selector can become hidden beneath the Property inspector.

You'll become familiar with the many buttons and customizable options in the Document window as you work through the lessons in this book.

2.

Make sure that Common is chosen from the pop-up menu at the left end of the Insert bar, then move the pointer over the bar, whose default position is at the top of your screen. Rest the pointer over a button to see its name.

The Insert bar contains many of the objects or elements that you can add to your page, including images, tables, special characters, forms, and HTML. The elements are arranged in eight groups, according to their type: Common, Layout, Forms, Text, HTML, Application, Flash Elements, and Favorites. The name of the active group is displayed on the menu. The Common group is active by default. You can use the pop-up menu to switch to a different group of objects. Many of the individual objects in these groups have their own pop-up menus, indicated by a small black arrow, with additional tools, options and other closely related objects; click the black arrow once to open the pop-up menu. The last option in the Insert bar category pop-up menu is Show As Tabs, which will convert the Insert bar to show tabs at the top of the bar for each category. To switch back to the menu format, choose Show As Menu from the Options menu in the upper-right corner of the Insert bar. Use whichever viewing methodtabs or the menuthat you prefer.

Note

Throughout this book, the words "objects" and "elements" are used interchangeably. Where possible, "object" is used when referring to the button, and "element" is used for the item after it appears within the Document window.

To insert an element, you can drag the object's icon from the Insert bar to the location where you want it to appear in the Document window. You can also place the insertion point in your document where the element should appear and then click the object's icon in the panel. When you click the icon, the element appears in the document at the insertion point.

Tip

You can move many of the objects that you use regularly into the Favorites group of the Insert bar by right-clicking (Macintosh users with single-button mice can use Control+click to access the same options) on the bar and choosing Customize Favorites. Select the desired item from the Available Objects menu that appears and click the double arrow button between the Available Objects and Favorite Objects lists. You can use the Up and Down Arrow keys above the Favorite objects list to adjust the order of objects. The dialog box also allows you to remove objects from the Favorites group and add separators between the objects to further organize them.

3.

Move the pointer over the Property inspector, normally at the bottom of your screen. Rest the pointer over a button to see its name.

The Property inspector is used to view and modify the attributes of selected text, images, tables and other elements in a document. The Property inspector is contextualthe attributes that it makes available change depending on what is selected in the document window. To expand or collapse the Property inspector, click the expander arrow in the lower-right corner of the panel. If the Property inspector is collapsed, there can be additional properties that are not visible until you expand the panel.

Windows users can also reduce the inspector so that only the name of the panel shows to gain a larger viewing area.

Tip

Windows users can also resize the entire area for the Property inspector (and additional panels that later appear in that area) by dragging the arrow button on the horizontal border between the document window and the Property inspector. Clicking the arrow button collapses the entire area; simply click the button again to reopen it. The horizontal border is not part of the Macintosh interface.





Macromedia Dreamweaver 8(c) Training from the Source
Macromedia Dreamweaver 8: Training from the Source
ISBN: 0321336267
EAN: 2147483647
Year: 2006
Pages: 326

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net