Introduction to Dreamweaver CS3

<< Previous: Creating and Editing Web Pages

Contents:

Formatting Text
Inserting Links
Inserting Tables
Inserting Images

Note: Make sure you have the Properties toolbar open in Dreamweaver workspace. It is the most important floating toolbar. If not open already, you can get it by selecting Window > Properties from the main toolbar. The contents of the Properties toolbar change depending on the context of the cursor in the editor window.

Formatting Text

The attributes/features of the text in Editor window can be easily changed using the Properties toolbar. Most of the text features work how they work in general text editors like MS Word. You can highlight a section of text and change the attribute (e.g. make text italic), or you can set the attribute and type away, and the text you type will use that attribute. For Link, however, you must first highlight the text you want to link for it to work.

For additional Text attributes, not included in Properties toolbar, you can click the Text button from the main toolbar.

Inserting Links

To create a link in your face, first highlight the text you want to appear as link, then type the address of the link in the Link field in the Properties toolbar. If you are linking to a page outside your website, you have to provide the full web address in the link field. For example, http://www.google.com.

If you are linking to a page within your site, you can browse to the particular file by clicking on the folder icon which is right besides the Link field. Dreamweaver will automatically insert the path to the file.

You can also link to a page within your site using the pointer right next to the Link field. Highlight the text you want to appear as a link and drag the pointer to the particular file as shown below.

Inserting Tables

You can insert a table in your Web page in Dreamweaver by selecting Insert > Table from the main menu. A dialog pops up with several attributes for the table.

The number of Rows and Columns is to allow Dreamweaver to assist you by laying things out in advance. You can always add or delete rows and columns later.

The Width can be specified in terms of percent of the current window or absolute pixels.

The Border thickness is assigned some numerical values to determine the appearance of the outer lining of the table. The value '0' will remove the outer lining of the table.

Cell Padding is the amount of space (in pixels) within a table sell surrounding all text and other objects. There is a default on most browsers of 3-5 pixels.

Cell Spacing is the amount of space between every two cells, and the outer cells and the border. Again, there is usually a browser default somewhere around 3-5 pixels.

Header field lets you select the nature of the table according to row header, column header, or both.

Caption and Align Caption fields displays the table caption in a desired position.

These properties can be changed anytime using the Properties toolbar associated with the table.

Inserting Images

Before inserting images make sure to you have the image resized to a desired size using an image editor. For instructions on resizing images using Macromedia Fireworks click here. Resizing images using Dreamweaver will compromise the quality of the image and will increase the loading time of the web page.

To insert an Image, Select Insert > Image from the main menu. You will be presented with a dialog box that you can use to browse to the image. After selecting the image, another dialog box will appear which includes accessibility attributes.

Image Accessibility

Alternate text is the text that is displayed if the browser is unable to display the actual image. Long description field is used to enter a URL of a document that contains a long description of the image.