Macromedia Dreamweaver is an excellent tool for people who want the best
designs for their Web sites. With the tools and design features offered by
Dreamweaver, it is easy to create, edit, and manage Web pages and entire sites.
All of this can be done without having to write any of the HTML commands, but if you would like to, the HTML can be accessed
for customization. The following pages explain and illustrate some of the
many features to help you decide if Dreamweaver will fit your needs.
Before you begin using Dreamweaver to create pages, it is a good idea to
do some planning to ensure that the development of your Web pages/Web site
goes smoothly. Instead of creating pages that you think you may need, plan
the organization of your site so that you know in advance the categories and
type of content that you will actually require. You could make an outline
of your content before you actually begin working with Dreamweaver to help
provide you with a logical order to your site.
When you are ready to create your Web pages, it is easiest to put all of
the files that you create for your site into a main folder on your local disk
to act as a local site. Using this local site allows you to edit your files
and test any changes rather than doing this on a live site where the public
can view the pages you are still working on. You can then copy these changes
to your live Web site at one time. You can also put each category of information
on your site into a separate folder within the main folder which will contain
all of the pages related to that category. This will prevent your site from
having related information scattered in several areas. For example, you could
put all the files relating to information about your company into a folder
named "aboutus" and all of the information related to your products
into a folder named "products", and so on. All of the images that
you may potentially use for your site can also be put into one folder to make
it easier to locate an image when you need it.
You must also think about how users of your site will navigate through the
various pages and content that you are presenting. It should be easy for people
to move around the site without getting lost. They should be able to go to
other pages and then return easily to their starting place. Use links, navigation
bars, image maps, or buttons, but keep the navigation methods for each page
similar and the style and format of the pages consistent to avoid confusion.
Dreamweaver utilizes layers as the containers for graphics and text for a
Web site. Layers give you better control over the elements on your pages by
separating objects and making overlapping objects easier to edit. You can
determine which items should be in front of others and which ones are to be
hidden. The Layers Palette is your tool for organizing and managing the different
layers that you create. The layers are shown on the Layers Palette as a stacked
list. The first layer that was created will be at the bottom of the list and
the last layer that was created will be at the top of the list. The Layers
Palette is shown below.
The basic elements of a table are rows, columns, and cells, which are created
when rows and columns intersect. Using tables helps you to organize text and
graphics that are required to be in relatively the same position when viewed
on different sized monitors or with different browsers. If you put text and
graphics on a page without a table, their positions will change when viewed
in different browsers or on different sized screens. For example, you may
have a text block that looks just the way you want it on a 14" screen,
but the text lines will be longer on a larger screen. There may be nothing
wrong with this, but it may look odd if you have three lines of text on a
14" screen that turns into one and a half lines on a 21" screen.
This especially true if the text is next to a graphic as shown below.
Another way a table is useful is when items need to be arranged in an exact
horizontal and vertical placement, such as a chart. For example, you could
create a chart showing different products listed in a column on the left side
of a table and have a comparison of the product characteristics listed in
columns to the right, as shown below.
When you want to insert a table, you can specify the number of rows and columns
that you require. The table above has 7 rows, 5 columns, and 35 cells. This
table also has a border around it and the cells are outlined to make the table
look like a chart. You may not want to have any borders on many of the tables
that you create because the tables would be used only to keep items in their
proper places. In that case, you would not want the lines of the table and
its cells to be visible when viewed on the Web.
The text that you place into a Dreamweaver project can be easily formatted
by clicking the Text menu and then the Format submenu. You can also use the
Property Inspector where you can change the font type, the size, text color,
and text alignment. You can change the style of the text such as bold or italic,
have the text underlined, and create bulleted and numbered lists. The Property
Inspector is shown below.
You can also use HTML tags to apply formats and attributes into a single
style and save it in the HTML style palette. You can then apply this style
to your text. This saves time because when you want to format text the same
as previously formatted text, you can just use the style rather than selecting
all of the same formats that you had previously.
Any images that you want to use on your Web pages must be designed and edited
in other software programs. You can then place these images on your Dreamweaver
pages. If you need to do further editing to an image after you have placed
it in your Dreamweaver page, you can have Dreamweaver launch an image editing
program like Fireworks in order to make the necessary changes. When an image
is inserted into Dreamweaver, the reference to its file is automatically placed
in the HTML.
Some of the properties for images can be changed by clicking on the expander
arrow on the lower right corner of the Properties Inspector. This will reveal
a menu of items including the following:
- Name: An image can be named and referred to with a scripting
- W and H: These reserve space for an image as it loads.
- V Space and H Space: This adds space all around the image.
- Src: This refers to the source file of the image.
- Low Src: This specifies an image to load before the main
image loads. It is usually a low grade black and white version of the main
image that will appear while the user is waiting for the main color image
- Align: This puts an image and text on the same line.
- Border: his adjusts the width of the border around an image.
A number representing pixels is entered for this.
- Alt: Use this for text only browsers to display alternative
text in place of the image.
- Target: The frame or window in which the linked page will
load, is specified with this.
- Link: Use this to specify the hyperlink for an image.
- Map Name Field: Client-side image maps are created.
- Refresh: The W and H values are reset to the original size
of the image.
There are also alignment options that are in the Alignment drop-down menu
in the Properties Inspector that place an image in a specific location in
relation to other graphics or text.
With Dreamweaver, you can create rollovers, which are images that change
when the mouse pointer passes over them. These could include a navigation
button that changes color or a graphic that changes into a different graphic.
Both images for the rollover must be the same size or else Dreamweaver will
change the size of the second image to the size of the first one.
Create image maps with Dreamweaver as an alternative way to navigate your
web site. An image map is divided into hotspots. When you click on a hotspot,
a Web page will appear. To create an image map, click the arrow in the lower
right corner of the Properties Inspector to reveal additional properties.
Enter the name for the image map in the Map Name field. You can then use the
rectangle, circle, or polygon tools to drag shapes over the image to create
the hotspots that users click on in order to reveal different pages.
The image on the right shows how shapes
were used to create hotspots. These link to other pages which will display
information concerning the areas of interest highlighted by the shapes.
The shapes will not be visible on the Web page.
The image on the right shows part of
the expanded Properties Inspector with properties related to image maps.
It is possible to insert multimedia objects onto your Dreamweaver page, such
as a Shockwave or Flash movie, a Java applet, or ActiveX control. Video and
sound can add an extra dimension to your Web site.
Dreamweaver allows you to add forms to your projects. These can be used as
online order forms, customer surveys, or various company forms. Some of the
items that you can include on your forms are drop down lists, radio buttons,
check boxes, and text fields. From the "Insert" drop down menu on
the top of the Window, select the Forms command in order to create a form
or you could use the Forms panel found in the Object palette. A sample form
is shown below.
Is this your business address?
Credit Card Number
When you have created your Web pages, you need a way of linking them with
each other and with other sites so that users have a way to navigate through
the information you are presenting. These links are known as hypertext links
and allow you to link pages within the same Web site using internal links,
link pages outside of the local site using external links, link to a particular
area of the current page or a completely different page using bookmarks, and
link to an e-mail form using e-mail links.
To create hypertext links, open the Properties Inspector and using the folder
to the right of the link field, select a file that you want your page to link
to. You can also type an appropriate address for the file directly into the
Link field in the Properties Inspector as shown below. You are able to create
an e-mail link in the same way except that you would type mailto: and then
the e-mail address. Regardless of how you create links for your pages, Dreamweaver
will insert the appropriate HTML tags (called anchor tags) for you.
With Dreamweaver, you can create templates which can help speed the process
of creating pages. A template page may contain information that remains the
same for other pages that are similar to it. For example, you may have a Web
site in which you would like all of the pages to be formatted the same and
contain some common information like the company name, logo, and navigation
bars and buttons. These items could all be put on a template page that you
could use to create all of the pages. This would save time having to put all
of these items separately on every page. You can save an existing document
as a template and then reuse it, or you can create a new template with the
- Power Macintosh with Mac OS 8.1 or later.
- 32 MB of RAM.
- 20 MB of available disk space.
- Color monitor with at least 800 x 600 pixel resolution.
- CD-ROM Drive.
- Intel Pentium Processor or equivalent, 120 MHz or faster, running Windows
95, 98, or NT version 4.0 or later.
- 32 MB of RAM.
- 20 MB of available disk space.
- Color monitor capable of 800 x 600 pixel resolution.
- CD-ROM Drive.
Back to Top