If you feel overwhelmed by this layout, don’t worry. You
can easily change the layout of Dreamweaver MX to look like the
layout from Dreamweaver 4.
This will bring up the “Workspace Setup” window. If
you want to apply the Dreamweaver 4 layout, select “Dreamweaver
4 Workspace” and click “OK” to continue.
If you choose to use the Dreamweaver 4 Workspace, then you don’t
need to read anything else beyond this point in this section. Everything
else in “Program Layout” will pertain to the Dreamweaver
MX layout.
Common
The Common tab features some of the most-used functions in Dreamweaver
MX
1. Hyperlink:
Clicking on this brings up a window that lets you create a link
to another web page, file, or location on the same page.
2. Email Link:
Email links allow visitors to a site send someone an email by
clicking on a special link. Using this tool allows to you easily
make such a link.
3. Named Anchor:
An anchor is a special kind of link that takes a user to a different
part of the same page. Clicking on the Named Anchor button lets
you quickly make a link for an anchor.
4. Insert Table:
When you click on this tool, a window pops up asking you to input
information to create a table. When you are done, click on “OK”
and the table will appear in your web page.
5. Draw Layer:
Layers can be helpful when designing a layout for a page. A layer
isn’t a table, but rather, a box that can hold text, an
image, or nearly anything, and can be positioned anywhere on the
screen. When you click on this button, your cursor will be transformed
into crosshairs, and you can draw your own layer on a page.
6. Image:
You can easily place an image in a web page by clicking on this
button. When you do, a new window will pop up. From here, you
can browser your computer to find the image you wish to include
in your web page. Remember, if you plan on putting your page on
the Internet, you will need to put all images used in your web
page on the Internet as well. This will be discussed further in
the “Publishing” section.
7. Image Placeholder:
Image placeholders can be used effectively in web designing. They
may seem simple, but they are quite important. The “image”
isn’t really an image, per se. It is really a blank pixel
that can be used for many things, such as creating space between
objects, or making lines and boxes for use in layouts.
8. Fireworks HTML:
If you have created a web page in Macromedia Fireworks, you can
insert it into a Dreamweaver MX page by using this tool.
9. Flash:
Allows you to insert Flash elements into a web page.
10. Rollover image:
A rollover image is a special type of effect that takes place
when a cursor is moved over an image, and the image changes. You
can make your own rollover image in Dreamweaver MX by clicking
on the button, and inputting the proper information in the pop
up window that appears. This includes finding two different images
to use to create the rollover effect.
11. Navigation Bar:
This is a rather complicated function that lets you make your
own navigation bar for a web site. You can decide what images
can be used in the bar, and turn those images into links to different
pages.
12. Horizontal Rule:
A horizontal rule is a simple line that can be used to separate
sections of content on a web page. Click on this button, decide
a length for the horizontal rule, and it will be inserted into
a page.
13. Date:
Clicking on this button lets you insert the date into a web page.
When you click on the icon, a window appears listing several formatting
options to choose from for dates.
14. Tabular Data:
Inserts pre-existing data into a table.
15. Comments:
Comments can be used to make notations about a web page, without
actually appearing on a page. This is helpful if you want to remember
something specific you have done in your design.
16. Tag Chooser:
Insert a specific HTML tag from this list of tags. Good for advanced
users.
Layout
The functions in the Layout tab help to create a layout design
for a page
1. Insert Table:
When you click on this tool, a window pops up asking you to input
information to create a table. When you are done, click on “OK”
and the table will appear in your web page.
2. Draw Layer:
Layers can be helpful when designing a layout for a page. A layer
isn’t a table, but rather, a box that can hold text, an
image, or nearly anything, and can be positioned anywhere on the
screen. When you click on this button, your cursor will be transformed
into crosshairs, and you can draw your own layer on a page.
Text
The following functions help to edit and format text in a web
page
1. Font Tag Editor:
When you have a special font tag you have made for general use
or in a Cascading Style Sheet, you can edit that tag by clicking
on this icon.
2. Bold:
Makes selected text bold.
3. Italics:
Makes selected text italic.
4. Strong:
Makes the same text effect as “Bold,” only “Strong”
uses a different HTML tag (<strong>).
5. Emphasis:
Makes the same text effect as “Italic,” only “Emphasis”
uses a different HTML tag (<em>).
6. Paragraph:
Puts space in-between blocks of text to make a paragraph.
7. Block Quote:
Select desired text, specifically text that is quoted from another
source, and click on this button to format it into a block quote.
8. Preformatted Text:
Text will appear in a monospaced, or fixed-width font, making
it look typewritten.
9. Heading 1:
Sets selected text to Heading 1 (big sized font).
10. Heading 2:
Sets selected text to Heading 2 (medium sized font).
11. Heading 3:
Sets selected text to heading 3 (small sized font).
12. Unordered List:
Makes a bulleted (unordered) list.
13. Ordered List:
Creates a numbered (ordered) list.
14. List Item:
Allows you to edit the text of a listed item.
15. Definition List:
Automatically formats a list for definitions.
16. Definition Term:
Automatically formats a definition term.
17. Definition Description:
Automatically formats a definition description.
18. Abbreviation:
Enter in the full meaning of an abbreviation (i.e.: Cont’d).
19. Acronym:
Enter in the full meaning of an acronym (i.e.: NBA).
Frames
Use this menu for the easy insertion and formatting of frames
1. Left Frame:
Inserts a frame on the left.
2. Right Frame:
Inserts a frame on the right.
3. Top Frame:
Inserts a frame on the top.
4. Bottom Frame:
Inserts a frame on the bottom.
5. Bottom and Nested Left Frame:
Inserts the main frame on the bottom, and the nested frame on
the left.
6. Bottom and Nested Right Frame:
Inserts the main frame on the bottom, and the nested on the right.
7. Left and Nested Bottom Frame:
Inserts the main frame on the left, and the nested frame on the
bottom.
8. Right and Nested Bottom Frame:
Inserts the main frame on the right, and the nested frame on the
bottom.
9. Top and Bottom Frames:
Inserts a frame on the top and bottom.
10. Left and Nested Top Frame:
Inserts the main frame on the left, and the nested frame on the
top.
11. Right and Nested Top Frame:
Inserts the main frame on the right, and the nested frame on the
bottom.
12. Top and Nested Left Frame:
Inserts the main frame on the top, and the nested frame on the
left.
13. Top and Nested Right Frame:
Inserts the main frame on the top, and the nested frame on the
right.
Forms
For more interactive web pages, you can insert form elements from
this list
1. Form:
Creates a new area on a web page to insert a form.
2. Text Field:
Creates a text box for users to enter data in a web page.
3. Hidden Field:
Hidden fields collect information about site visitors. Information
stored in the field is sent back to the server when the form is
submitted.
4. Textarea:
Similar to a text field, but allows multiple lines of text to
be entered.
5. Checkbox:
A checkbox allows users to select an option from a list. Users
can select more than one checkbox.
6. Radio Button:
A radio button allows users to select one option from a list.
7. Radio Group:
Inserts multiple radio buttons into a list.
8. List/Menu:
Creates a drop-down menu.
9. Jump Menu:
Creates a jump menu. A jump menu brings a user to a different
location depending on what is selected in the menu.
10. Image Field:
Inserts an image into a field.
11. File Field:
Creates a field in which lets one upload a file.
12. Button:
When users have input data into forms and field, it must be submitted
via a button. This tool inserts a button on to a page.
13. Label:
Creates a label for a field.
14. Fieldset:
Creates a tag for a group of form elements.
Characters
Some of the more common symbols and characters are in this menu.
1. Line Break:
Creates a single space between lines.
2. Non-breaking Space:
Creates a space between letters or words.
3. Left Quote:
Creates a left quote.
4. Right Quote:
Creates a right quote
5. Em Dash:
Insert a long em dash into a page. (—)
6. Pound:
Inserts the symbol for the pound currency. (£)
7. Euro:
Inserts the symbol for the Euro currency. (€)
8. Yen:
Inserts the symbol for the Japanese Yen currency. (¥)
9. Copyright:
Inserts a copyright symbol. (©)
10. Registered Trademark:
Inserts a registered trademark symbol. (®)
11. Trademark:
Inserts a trademark symbol. (™)
12. Other Characters:
Choose from an additional set of symbols to insert a character
on to a page.
