To_ Getting_Started Help Lesson Six: Useful Tools and Techniques

Lesson Six: Useful Tools and Techniques


Using Layout Tables

You cannot insert Layout tables in Standard view. Switch your document window to Layout view. Use the Layout view icon in the Objects panel. (See page 9 for a complete reference to the Objects panel icons.)

Figure 39 The Objects panel.
A detail showing the
primary editing tools
for the Layout view.

Layout Tables give you greater control in designing your Web pages than the Standard view. Follow the steps to start laying out your Web page using tables and cells.

1. Click the Table Layout icon.

(Your cursor will change to a crosshair.)

2. Click in the page and drag the mouse.

(The table will grow in size as you drag the mouse. If you want to change the size of the Layout Table, click and drag one of the table handles-the little green boxes on the border-to resize the table.)

Figure 40 A Layout Table with border handles (the little green boxes).

3. Click the Cell Layout icon.

(Your cursor will change to a crosshair.)

4. Click in the page and drag the mouse.

(The cell will grow in size as you drag the mouse. If you want to change the size of the Cell Layout, click and drag one of the cell handles-the little blue boxes on the border-to resize the cell.)


Figure 41 A Cell Layout with border handles (the little blue boxes).

You can now insert an image, or text, into this cell. Repeat this process to layout cells you need for the Web page.

(Follow the instructions in Lesson Two: Inserting an Image, page 26, to insert an image. You can just start typing text into the cell, as well.)

Using Tables for Data

A table is a useful feature for laying out data or images. You will find a table can quickly create horizontal and vertical structure to your Web page. To insert a table, you must be in Standard view (the insert table feature is disabled in Layout view).

1. Place your cursor in the proper insertion point in the Web page

2. Click on the Object panel icon for inserting a table.

3. The Insert Table dialog box appears.

Figure 42 The Insert Table dialog box.

5. Set the number of rows and columns you want.

6. Set border, cell padding, and cell spacing, if any, that you want.

7. Click the OK button to close the dialog box.

Your table appears on your Web page.

Figure 43 Inserted Web page table.

Using Frames

Frames divide a Web page up into multiple HTML pages. This section will show you how to create a three frame Web page. (The three frames make up a frameset.)

Note: Be sure you understand how to use frames properly. You must save all the files from each frame separately. Set the properties for each frame, including the frame and frameset names, scrolling and non-scrolling options, and any other parameters you find necessary to change. Check all frame links connect to their proper targets.

Inserting a Pre-Defined Frameset

1. Click on the Expander arrow of the Objects panel.

Figure 44 Changing the Object panel's object category

2. Click on Frames in the list.

A new set of icons appears in the Objects panel.

3. Click on the Insert Top and Nested Left Frame icon.


Figure 45 The Objects panel with objects
from the Frames category.

The Web page divides into three frames. The three frames are separate HTML pages and make up a frameset. You can make this page your home page.

The top frame might have your Web site logo. The frame on the left might contain the Web site's navigation buttons. The bottom right frame might be the content page that changes when you click on navigation buttons in the left frame.


Figure 46 Frame and Layout Table options.

Using Forms

Forms let you interact with your Web site visitors. You can collect information from them for surveys, guest books, email addresses, or to provide feedback.

Forms have two parts:

  • HTML source code (This describes the form fields, labels, and buttons that a Web site visitor sees.)
  • A script or application (This processes the information a Web site visitor submits, such as a CGI, or Common Gateway Interface script.

Note: you cannot collect data without a script; check with your system administrator to find out if CGI script can run on your server.

Using Form Objects

You can access form objects from the Objects panel or the Insert>Forms menu.


Figure 47 The Objects panel's Forms category icons.
Creating a Form

Forms have properties that are invisible to the user, properties that specify how to process the form. Forms consist of three parts:

  • Form tags (These include the URL of the CGI script that processes the form.)
  • Form fields (These include text fields, menus, checkboxes, or radio buttons.)
  • Submit button

These send the data to the CGI script on the server.

Note: If you insert a form object without creating a form first, Dreamwevear 4.0 asks you if you want to "Add form tags?" Choose Yes to create the form tags for the object.

Adding a Form

1. Place the cursor at your chosen insertion point.

2. Select the Insert Form icon (from the Objects panel) or choose Insert>Form from the Insert menu.

A dotted red outline appears in the Document window.

Figure 48 The Form object outline.

3. Click the form to select it.

4. Type a unique name for the form in the Property Inspector's Form Name field.

Figure 49 The Form field Property Inspector.

5. Specify the URL path in the Action field.

This path specifies where the processing script or application will process the information. To specify the path, do one of the following:

  • Click the Action folder icon and navigate to the appropriate folder.
  • Type the complete path of the folder.

    Example: http://www.mysite.com/cgi-bin/process.cgi

6. Choose your preferred method of form data handling in the Method pop-up menu.

  • Choose POST to send the form values in the body of a message.
  • Choose GET to send the information to the server with the submitted form values appended to the URL.
  • Choose DEFAULT to use the user's browser default setting for sending the form data that is generally the GET method.

This last section only intends to give you an overview of the process. The creation of forms and data collection requires thought and you are strongly encouraged to work with Dreamweaver 4.0's online help and your remote server's systems administrator before attempting to create forms.

To_Glossary Glossary of Terms

Go to: Getting Started | Part 1 | Part 2 | Part 3 | Part 4 | Part 5 | Part 6 | Lesson 1 | Lesson 2 | Lesson 3 | Lesson 4 | Lesson 5 | Lesson 6 | Home Page | About | Administrative | Activities | Constitution | Program | Professional | Treasurer's | How to Join | How to Contribute | .

Copyright © 2001 Chico STC Chapter. Send comments to (jjayj@mail.csuchico.edu). Last Updated: 13 June 2001.