Personal tools
  •  

DWMX Tables and Forms

Document Actions
  • Content View
  • Bookmarks
  • CourseFeed

Working with Tables

HTML tables are very important for two reasons: 1. To display tabular data in a web page without the use of a graphic or third-party plugin, and 2. To provide additional page layout capabilities.

The supplemental but helpful tutorial from the link below will walk you through the basics of working with tables. You only need to read the pages that have to do with Tables.

Activity: Using the information from the above tutorial complete the following activity:

Part 1: Using tables to display information

  1. Open a new document and save it as calendar.htm in your "dreamweaver" folder.
  2. Using a table, create a calendar showing 1 month (i.e. September 2002). Click the "Tables" tab on the Insert panel. Click the "Insert Table" Icon to open a dialog box.
    Insert Table Dialog Box
    Type the number of Rows and Columns in the appropriate boxes. Create enough rows for the Month heading, day headings, day numbers, and day content. Create enough columns for each day of the week.
  3. You can also specify the width of the table in pixels or percent of the browser window. Experiment to see what looks best on your page. Remember that if you specify a percentage, the table will expand or collapse as the browser window is resized.
  4. Lastly, you can specify the border thickness, cell padding (the space between the cell walls and the content of the cell), and cell spacing (the thickness of the cell walls). Click "OK" and the table will appear in your page.

    September 2002

    Sunday Monday Tuesday etc...
    27 28 1 etc...
    Assignment: Read chapters 2-36 of War and Peace etc...
  5. You may remember the tags colspan and rowspan from your html tutorials. Dreamweaver helps you create combined cells easily. To create a "Month" row, click in the top left table cell, and drag all the way to the right to select the entire top row of cells. With the row selected, click the "Merge selected cells using spans" button in the lower left ofthe Properties panel.
    Tip: It is sometimes easier to select tables and table rows by usingt the Quick Tag Selector at the bottom of the document window. Just click on a tag name and it will be selected in the document.
    propertiesPanel_tables
  6. Add the appropriate labels to your calendar.
  7. Add some due dates or other course information in the course calendar.
  8. Open your index and syllabus pages and add links to your calendar page, and link from your calendar page to the index and syllabus pages.

Part 2: Using tables for layout

  1. On your index and syllabus pages, use a table lay out your content:
    1. Create a table with at least 2 columns. Set the border to 0 .
    2. Create a "Nav Bar" (navigation bar) on the left of your page. Give the nav bar (the left table cell) a different background color than the body (the right table cell) of your page.
    3. Move your links into the Nav Bar. You can Cut and Paste using the buttons on the toolbar (go to View > Toolbars > Standard to make the Cut and Paste icons visible if they are not already), or you can select the links and click and drag them to the appropriate place.
    4. Move your main content in the right column.
    5. Ensure that your Nav Bar column has a fixed width (not a percentage).
    6. Ensure that your content is adequately spaced from the table borders by adjusting the cell padding of the table.
    7. Adjust the table and its contents until you feel that it looks the way you want it to.
  2. Upload your files to the remote site and view them in a browser.

Forms

HTML forms provide a large amount of the interactivity of the web. Forms are the primary method for collecting user input. By themselves, HTML forms are limited in their functionality. However, when coupled with a server-side scripting language like Perl, ASP, or ColdFusion, and a database like Access, My SQL, or SQL Server, forms can be a powerful tool for collecting, displaying, and/or editing user input.

Read in your HTML 4.0 book on pages 251-254 for a conceptual overview of forms and how they work.

Here are a few web resources that will help you learn about creating forms Dreamweaver. In these tutorials and in the following activity, be sure to learn about the following:

  • Adding a Form to a page
  • Specifying the form's method and action
  • Creating text inputs, both single- and multiline
  • Adding checkboxes and radio buttons
  • Creating a select box and populating it with labels and values
  • Adding a Jump Menu using Dreamweaver's built-in features.

If you need more information than these tutorials cover, refer to the Dreamweaver manual (the book or in the Help menu within Dreamweaver) or search the Internet for "Dreamweaver Tutorial."

Activity

Part 1: Create an online 6-question quiz

As mentioned above, HTML forms used in conjunction with a server-side programming language can be quite powerful. Part 1 of the activity will submit the quiz responses to a server that can process form results and email them using Perl or another similar language. You will use hidden fields to supply the information we have provided you that is needed to send the form results to the server. To align the quiz questions and responses, use a table , with or without a border.

  1. Create a new page and save it as quiz.htm in your "dreamweaver" folder.
  2. Add a form tag to the page (Insert panel > Forms tab > Click the 'Insert Form' icon). In Design view, a form tag is represented by a dashed red line (if you have selected to show invisible elements in the View menu). When adding form elements, make sure that they are inside the dashed red line.
  3. Create a True-False question with radio buttons for the responses . In the Forms tab, click the Radio Button icon twice to add two radio buttons. As you may recall from learning HTML, a group of radio buttons must have the same name (i.e. "question_1"but different values (i.e. "true" and "false"). In the Properties panel, with a radio button selected, specify a name, a checked value, and the initial state (checked or unchecked). Do the same with the other radio button.
  4. Create a Multiple Choice question with more than one correct answer using checkboxes . After writing your question, click the Checkbox button in the Forms tab to add the appropriate number of checkboxes. In the Properties panel, give them all the same name (i.e. "question_2") but different checked values.
    Unlike Radio button groups, Checkboxes can have the same name or different names, but in this exercise we recommend giving each of your checkboxes in one group the same name. The script that will process the results (see step 11) will group checkbox responses together so you will know which ones have been checked out of a particular group.
  5. Create a Multiple Choice question with one correct answer using a select box (menu) . After writing a question, add a dropdown list using the "List/Menu" icon in the Forms tab. In the Properties panel, give the select box a name. Ensure that "Menu" is selected next to "Type". This will create a dropdown-style list and the user can select only one option. Click the "List Values..." button. In the dialog box that pops up, use the + button to add labels and values for your responses. The label is what the user will see on the dropdown list. The value is what is passed to the server.
    List Values Dialog Box
    When viewed in a browser, your result should resemble this: Label 1 Label 2 Label 3 Label 4
  6. Create a Multiple Choice question with more than one correct answer using a select box. Add a question and another select box using the "List/Menu" button on the Forms tab of the Insert Panel. This time, select the "List" type, and check the "Allow Multiple" box. Set the height to the number of responses you will have. Click the "List Values" button and add the response labels and values. The result should look something like this:
    Label 1 Label 2 Label 3 Label 4
    To select more than one response, Control + Click (Windows) or Command + Click (Mac).
  7. Create one Short Answer or Fill-in-the-Blank question using a text field . Write a question, and add a text box using the "Text Field" button on the Forms tab. In the Properties panel, give the text box a unique name. "Char Width" sets the physical width of the text box using the "size" attribute of the "input" tag. Set it to an appropriate width for the type of response you are expecting. "Max Chars" uses the "maxlength" attribute to limit the number of characters you can type in, regardless of the physical width of the text box. Tip: Never set the "Max Chars" field to a number less than the "Char Width" field. This will only confuse users, who will be wondering why they can't type all the way to the end of the text box! Most often, you will not even need to specify a maximum number of characters.
  8. Create one Essay question using a multiline text field (textarea) . Write your essay question, then add a multiline text box by clicking the "Textarea" button. A three line text box should appear on your page. Like the single line textbox, you can specify the width using the "Char Width" field in the Properties panel. Also, you can specify the number of lines. The "Wrap" dropdown list lets you specify how text entered into this field will wrap. Leaving it at "Default" will suffice for this exercise and most other instances.
  9. Add one submit button at the bottom of the form . Click the "Button" button to add a Submit button. You can change the text that appears on the button by changing the "Label" field in the Properties panel. Leave the "Action" as "Submit form".
  10. Set the Method and Action of the form . Using the Quick Tag Selector (at the bottom of the document window) click the "form" tag to select the form itself. Give the form a name like "quiz_form". In the "Method" dropdown list, select "POST" and set the Action to:

    http://ia.usu.edu/php-bin/form_mail.php

    (without the quotes). Leave the "Target" and "Enctype" fields blank for this exercise.

  11. Add 3 Hidden fields . Click the "Hidden Field" button in the Form tab. HIdden fields are represented in Design view as a small yellow icon with an "H" on it. Click on the icon to select it. In the Properties panel:
    1. Name the first hidden field mail_to , and set its value to your email address , for example, myname@hostname.com
    2. Name the second hidden field subject , and set its value to what you want the email subject field to be
    3. Name the third hidden field next_page , and set its value to an absolute path to a file called "thanks.htm" in your 5240 folder, for example:

    4. http://hostname/~myusername/dreamweaver/thanks.htm
  12. Create a new page and save it as "thanks.htm" in your "dreamweaver" folder . Add some text thanking the user for taking the quiz.
  13. Preview your page in a browser (F12) to see if your form elements are displaying correctly.
  14. Upload both pages to your remote site.
  15. Add a link to the quiz from your calendar.htm page . Save and upload calendar.htm.
  16. Take your quiz online. You should receive an email with the results.

Part 2: Create an Email Form.

  1. Create a new document and save it as contact.htm in your "dreamweaver" folder.
  2. Add a form to your page.
  3. Add text boxes for Name, Email, and Subject, and a textarea for the Body.
  4. Add submit and reset buttons.
  5. Use a table to align your fields, if desired.
  6. Select the Form tag (using the Quick Tag Selector), set the method of the form to "POST." Set the action to mailto: myname @hostname.com or your email address. Set theEnctype field to "text/plain". (Using "mailto:" utilizes the email program on the user's computer, such as Outlook or Netscape Mail. If there is no email account configured on the user's computer using one of these email programs, then the form will not send email.)
  7. Upload this file to the server.
  8. Add a link to your email form on contact.htm from your home page (index.htm). Save and upload this file.
  9. Try sending email through your form.

Part 3: Create a Jump Menu for navigation on your homepage

This part of the activity combines the use of form elements with JavaScript to create site navigation. Don't worry, Dreamweaver writes the JavaScript for you.

  1. Select a place on your index.htm page to add a Jump Menu as supplementary site navigation (probably somewhere near the top of the page)
  2. Add a Jump Menu (from the Insert panel > Forms)
  3. Add labels and URLs for each page you want your site visitor to visit.
  4. Save the file and upload it to the server.
  5. Try it out.
  6. Add your jump menu to your other pages if desired.
Copyright 2008, by the Contributing Authors. Cite/attribute Resource . admin. (2008, May 20). DWMX Tables and Forms. Retrieved January 07, 2011, from Free Online Course Materials — USU OpenCourseWare Web site: http://ocw.usu.edu/instructional-technology-learning-sciences/producing-distance-education-resources/resource20.html. This work is licensed under a Creative Commons License Creative Commons License
Online Degree Program
Utah State University offers an online masters degree program (MS & MEd) in Instructional Technology and Learning Sciences. Click below to find out more.