Macromedia Dreamweaver

Planning

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.

Layers

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.

Tables

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.

Text

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.

Images

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 language.
• 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 to load.
• 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.

Multimedia

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.

Forms

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.

Creating Links

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.

Templates

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 Template palette.

System Requirements

Macintosh:

• 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.

Windows:

• 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