Posted on 03/11/2009 by Dawn Pedersen — No Comments ↓
Dreamweaver CS4 Workspace
When working with Dreamweaver tutorials here, elsewhere on the Web, or in books, it pays to memorize the main components of the Dreamweaver CS4 workspace. After the jump, I describe the components I will refer to the most in my tutorials.
Click on the image below to view a much larger version.
Dreamweaver CS4 Workspace
Application Bar
Application Bar
The Application Bar includes menus* that give you access to Dreamweaver’s commands and features. They also allow you to make things visible or invisible like panels. Some menu items act on your instruction right away. Other menu items are followed by an ellipsis (…). When you select these menu items, you will get a dialog box which gives you options to modify your request.
Many menu items are accompanied by mysterious text on the right, such as “Ctrl-Alt+T”. This indicates that there is a keyboard shortcut associated with this command. In the example above, you would hold down the Ctrl and Alt keys (on the PC), then click the T key to create a table. It is possible to create your own keyboard shortcuts (Edit > Keyboard Shortcuts…).
Application Bar commands are indicated in my tutorials as a series of terms separated by a “Greater Than” (>) character. For example, Insert > Layout Objects > Div Tag means start with the Insert menu, select the Layout Objects item, and then select Div Tag from the fly-out menu.
The Application Bar gives you some button shortcuts to common functions, like viewing the site map and opening the Extension Manager. It also includes the Workspace Switcher, which allows you to change the configuration of your workspace to accommodate your work flow. It simply allows you to save and load different arrangements of panels. To save your own custom workspace, click on this button and select New Workspace…
* PCs only; Macs show the menus in a separate bar.
Document Toolbar
Document
Toolbar
The Document Toolbar allows allows you to change between the design and code views of your file, view your file as it would appear in a browser, enter a title for your document, make code hints and guides visible, and perform other common functions.
Files Panel
Files Panel
The Files Panel is one of many panels available in Dreamweaver, and it’s the one I use most frequently. Panels allow you do all sorts of tasks quickly, like edit your style sheets, and behaviors to your page, and insert common page elements. The Files Panel allows you to view and manage the files in your Web site. You can see the files on your local computer, on the server, or both. The up and down buttons allow you to upload (“put”) or download (“get”) the files you specify.
Files Panel
Tag Selector
Tag Selector
The Tag Selector gives you a quick snapshot of where your cursor is placed within the code, and allows you to select entire HTML tags. The hierarchy left to right goes from the general to the more specific (where your cursor is located).
For example, in the image below, the cursor is place inside a paragraph <p> tag. This <p> tag is inside a <td> (table data cell) tag, which is in a <tr> (table row) tag. All of these are inside a table. You can select the entire table (and its contents) for editing by clicking on <table> in the Tag Selector, as I have done here. Once you’ve selected a tag, you change change its settings in the Property Inspector.
You can see, finally, that the table is inside the main <body>.
Property Inspector
Property
Inspector
The Property Inspector allows you to see and edit the settings for any given selected object or text. Each type of object will have a different set of options in the Property Inspector.
For example, a table tag will have options for number of rows and columns, overall width, border width, and any spacing between individual table cells or between the border and the cell contents. An image tag will have options for image source, width, height, alt attribute, and alignment.
........................................................................
http://blulob.com/wordpress/2009/03/11/the-dreamweaver-cs4-workspace/
.
Dreamweaver CS4 Workspace
When working with Dreamweaver tutorials here, elsewhere on the Web, or in books, it pays to memorize the main components of the Dreamweaver CS4 workspace. After the jump, I describe the components I will refer to the most in my tutorials.Click on the image below to view a much larger version.
Dreamweaver CS4 Workspace
Application Bar
Application Bar
The Application Bar includes menus* that give you access to Dreamweaver’s commands and features. They also allow you to make things visible or invisible like panels. Some menu items act on your instruction right away. Other menu items are followed by an ellipsis (…). When you select these menu items, you will get a dialog box which gives you options to modify your request.
Many menu items are accompanied by mysterious text on the right, such as “Ctrl-Alt+T”. This indicates that there is a keyboard shortcut associated with this command. In the example above, you would hold down the Ctrl and Alt keys (on the PC), then click the T key to create a table. It is possible to create your own keyboard shortcuts (Edit > Keyboard Shortcuts…).
Application Bar commands are indicated in my tutorials as a series of terms separated by a “Greater Than” (>) character. For example, Insert > Layout Objects > Div Tag means start with the Insert menu, select the Layout Objects item, and then select Div Tag from the fly-out menu.
The Application Bar gives you some button shortcuts to common functions, like viewing the site map and opening the Extension Manager. It also includes the Workspace Switcher, which allows you to change the configuration of your workspace to accommodate your work flow. It simply allows you to save and load different arrangements of panels. To save your own custom workspace, click on this button and select New Workspace…
* PCs only; Macs show the menus in a separate bar.
Document Toolbar
Document
Toolbar
The Document Toolbar allows allows you to change between the design and code views of your file, view your file as it would appear in a browser, enter a title for your document, make code hints and guides visible, and perform other common functions.
Files Panel
Files Panel
The Files Panel is one of many panels available in Dreamweaver, and it’s the one I use most frequently. Panels allow you do all sorts of tasks quickly, like edit your style sheets, and behaviors to your page, and insert common page elements. The Files Panel allows you to view and manage the files in your Web site. You can see the files on your local computer, on the server, or both. The up and down buttons allow you to upload (“put”) or download (“get”) the files you specify.
Files Panel
Tag Selector
Tag Selector
The Tag Selector gives you a quick snapshot of where your cursor is placed within the code, and allows you to select entire HTML tags. The hierarchy left to right goes from the general to the more specific (where your cursor is located).
For example, in the image below, the cursor is place inside a paragraph <p> tag. This <p> tag is inside a <td> (table data cell) tag, which is in a <tr> (table row) tag. All of these are inside a table. You can select the entire table (and its contents) for editing by clicking on <table> in the Tag Selector, as I have done here. Once you’ve selected a tag, you change change its settings in the Property Inspector.
You can see, finally, that the table is inside the main <body>.
Property Inspector
Property
Inspector
The Property Inspector allows you to see and edit the settings for any given selected object or text. Each type of object will have a different set of options in the Property Inspector.
For example, a table tag will have options for number of rows and columns, overall width, border width, and any spacing between individual table cells or between the border and the cell contents. An image tag will have options for image source, width, height, alt attribute, and alignment.
........................................................................
http://blulob.com/wordpress/2009/03/11/the-dreamweaver-cs4-workspace/
.