Class 8

Topics:

• Creating Forms (Chapter 20 - Dreamweaver 4)
• Reusing Content with Templates & Libraries (Chapter 16 - Dreamweaver 4)
• Practical Test next Class

Forms

• Forms allow you to interact with or gather information from a visitor to your site.
• Forms have two (2) parts:
  1. HTML sources coding.
  2. Scripts or application to process the information submitted (such as CGI or VB scripts).

• Forms contain properties that are invisible to the user.
• These properties specify how the form will be processed.
• There are 3 specific parts of a Form:
1. Form Tag (HTML): which includes the URL of the CGI, PHP, or ASP script that will process the form, setting up the method in which the data will be sent or used.
2. Form Field: which include text fields, menus, checkboxes or radio buttons and more.
3. Submit Button: which sends the data to the server.

HTML Anyone?

Generally, a form is used in conjunction with a CGI, PHP, or ASP script -- all three of these types of scripts require quite a bit of programming knowledge to use successfully. Simple scripts can be downloaded from the internet. Use key words like: "cgi script" or "php script".

Form Tag:

• A form opens with <form>, and closes with </form>.
• The opening <form> tag should contain an action attribute to a script and a method to post, either method="GET" or method="POST".
• Data from a form with method="GET" is posted by appending the data to the end of the script URL, while data from a form with method="POST" is send as a separate packet to the HTTP server.
• All elements must be enclosed within the opening and closing <form> tags.
• One page can have multiple independent forms.

Form Field - text tag / textarea tag:

<input type="text" name="what_time_is_it" size="10" maxlength="25">

input type=text, checkbox, radioname, submit, reset.

name: is a unique name, no spaces, no caps

If the sun is directly above, what time is it?

<textarea>

The <textarea> allows the user to enter multiple lines of text or information.

• It has an opening and closing tag, unlike most form elements.
• A textarea has just a name, rows and cols (as in the amount of rows of text, and the number of columns of characters in each row.)
• You can also set wrap="virtual" if you don't want the text a user types to go outside the right side of the box.

Example of textarea:

<textarea name="vacation" cols="35" rows="4" wrap="virtual"></textarea>

How was your vacation?

Anything you include between the opening and closing textarea tags will appear in the textarea box.

Checkboxes

• Use checkboxes when you wish the user to make choices, while gathering information.
• Checkboxes are used for the user to choose between more than one selection.
• They toggle between off (not checked) and on (checked).
• Each checkbox that is a selection must have a unique name.
• When there are several checkboxes to for one selection or to make more than one exclusive choice, each of the checkboxes must have the same name.

red/yellow <input type="checkbox" name="what_colour_is_the_sun" value="red/yellow">
yellow/white <input type="checkbox" name="what_colour_is_the_sun" value="yellow/white">
blue/pink <input type="checkbox" name="what_colour_is_the_sun" value="blue/pink">
black/red <input type="checkbox" name="what_colour_is_the_sun" value="black/red">

What colour is the sun?

Inserting Radio Buttons

• Radio buttons work as a group and provide mutually exclusive selection values, only one option can be selected in a given group.
• For the choices to remain exclusive, the names give to radio buttons must be the same.
• You can have more than one (1) set of radio buttons, offering exclusive selections in a form, by naming each set differently.

Green <input type="radio" name="a_tree_is" value="green">
Purple <input type="radio" name="a_tree_is" value="purple">
Blue <input type="radio" name="a_tree_is" value="blue">

A tree is ___________?

List/Menu Field:

The <select> element works a lot like a radio button, except in that it used a cool drop down box. It also has a closing tag, </select>. Choices for the drop down box are created by using <option> tags.

We could ask the favorite fruit question with a select (drop down) box like this:

<select name="favorite_fruit">
<option value="apples">apples</option>
<option value="oranges">oranges</option>
<option value="bananas">bananas</option>
</select>

Code for Submit Button:

<input type="submit" value="Submit Info!">

type="submit" tells the browser that this is a button, and value tells the browser what text should be displayed on the button.

 

Where to start in DW4?

• Create a Form by selecting from the Objects Panel, Forms Category, the Insert Form icon.
• A dotted red line appears to indicate the basic form tags have been created.
• ****Note****: the Properties Inspector has now changed to edit the specifics related to your New Form.
• Here you can name the form, select or type the path to the URL where the processing script is located, and choose the method from the popup suggestions:
  • Post: to send the form values in the body of a message.
  • Get: to send information to the server with the submitted form values appended to the URL.
    • Not used for messages with more than 8,192 characters.
    • Not used when dealing with credit card numbers or confidential information.
    • Not used for File Fields.
• Default: to use the user's browser default setting for sending form data which is generally the Get method.

All of the Forms attributes and values have to be placed within the Form tags.

Form Fields

Form Fields are available for users to type/interact with your Form. There are three (3) types of Form Fields:

1. Text Fields:

   A form object in which the user can type in a response.

   • Using the Object Panel, Forms Category > Insert Text Field. The Properties Inspector will change to accommodate the specifics for the text field.

• Text Field:
  • Enter a unique name for this field.
• Do not leave blank spaces, use underscore to separate words.
• Character Width:
  • Type a number to specify the length of the text field.
  • Default is 24 characters
• Max Characters:
  • Leaving the field blank allows the user to type as much text as they require.
  • Type a number to set a maximum number or characters.
• For type of field, select from the following:
  • Single-line:
    • for single word or short phrase responses.
  • Multiple-line:
    • For a larger area to type a response.
    • You can determine the number of characters and/or number of lines available to the user.
  • Password:
    • Type inputted is replaced with asterisks or bullets to obscure the text.
    • Not encrypted
    • Not secure.
• Init Value:
  • You can type some default text into the Init Value field.
  • This text will be displayed in the text field when the form first loads in the user's browser.

• Type descriptive text in the text field as this is what will be returned to be analyzed.

• Additional Multiple-line Specifics:
  • Num Lines:
    • default is 2 lines of text.
    • Type a specific number of lines required
  • Wrap:
    • Off / Default: if you prefer text that is not wrapped.
    • Virtual: for wrapped text in the text area but not wrapped when the data is returned, after being processed.
    • Physical: sets text wrapping in the text area and in the returned data.

2. File Fields:

File fields allow the user to send a specific file (e.g.; a resume) to you through a form.

The Method for the form must be set to Post.

The file field looks like a text file but is followed by a Browse Button.

This button allows the user to browser there computer for a file.

The file gets posted to the address you set up in the form's action field.

3. Hidden Fields:

   Hidden fields aren't visible to the user

   They are invisible elements you place in a form to gather or send information.

   The hidden field information is passed back to the server when a form is submitted and uses the name and value pair you define when you set up the field.

Check Boxes

For multiple choices

Radio Buttons

Exclusive choices

About List / Menus

• List / Menus are for use when you want the user to be presented with lots of choices in a limited space.
• Once you choose the Insert List/Menu icon from the Objects Panel, you define the object through the Properties Inspector.
• Ensure you fill in all the appropriate sections including naming the List/Menu, selecting the Type and filling in the List Value section.
• Initially Selection give the option of suggesting to the user an answer of your choosing. Your selection here becomes the default, if not altered.
  • List:
    • Use a list when you want to control the number of options displayed.
    • You set the list's height to allow the user to view all the options.
    • You can allow the users to select multiple items in your list.
  • Menu:
    • When space is limited in your form, use a menu.
    • Displays only a single-line of choice at a time and includes a down arrow that users click to reveal the other choices.
    • Users can only choose one menu item at a time.

List Value Section

• It is important to understand why you need to fill out the List Value section in full.
• In the List Value dialog box, place your cursor in the Item Label field.
• This is where you type the selections to appear in your list, each on its own line.
• By using the Tab Key, you can move to the Value field.
• Here, you will type the text, reference or data to be sent to the server when the user selects this item.
• You can use the + and - buttons to insert and delete data inputted.

Form Buttons

Text Buttons

• Form buttons control form operations.
• You can use a form button to Submit data or use a form button to Reset a form to its original default settings, as specified by you.
• Form buttons can also control other operations as defined in a processing script.
• All forms must have at least the Submit button in order to function.
• After inserting your Submit and/or Reset buttons, you can assign the value of Submit or Reset in the Properties Inspector.
• The Label field allows you to name the buttons something other than the default names (submit or reset).
• You select None when you will be activating a different action when the script is processed.

Graphical Submit Button

• You can implement a more appealing Submit or Reset button by using the Insert Image Field icon from the Objects Panel, Forms Category.
• First insert the Image Field by selecting that icon on the Object Panel.
• The Select Image Source window appears.
• Select the Image.
• In the Properties Inspector, you need to change the text in the Image Field to read Submit or Reset.
• Ensure the image to be places as the button is in the SRC field.
• In the ALT text, type the text you want to appear in place of the image in the event text cannot be viewed.

Forms Classroom Exercise

• reproduce the form supplied
• save to free server
• check it out.

Reusing Content with Templates & Libraries

Libraries

• Helps to create consistent pages.
• Make a site easier to maintain.
• Store elements used in page design.
• Need to be placed into a page.

Good For:

• On your site, you have a company logo with a company slogan, on every page.
• It is company policy that the slogan be updated every year.
• The site has 200 pages.

Creating a Library Item

• Create the item for the Library on any html document.
• Select the entire item to be added to the Library.
• Modify > Library > Add Object to Library.

When you create a Library Item, DW4 will create the Library folder where the coding for the Library Items can be found. Any images will not be stored in the Library folder only reference to where the image is stored.

Edit an Existing Library Item

• In your document, double click on the Library Item you wish to edit.
• The Library Panel will open.
• Select the Library Item you wish to edit.
• The editing window for that item will appear (looks like a web page, in grey).
• Edit the Library as needed.
• File > Save.
• DW4 will automatically update any instance of this Library Item on your site.

Detach a Library

• Any Library can be attached from the original item.
• Note, that you will not be able to reattach the item and if you choose to edit the Library, any detached instances will not be updated.

Templates

• Helps to create consistent pages.
• Make a site easier to maintain.
• Store the elements of page design.
• Used to create multiple pages that share the same layout.
• Each document created using a template is linked to that template.

Creating a Template

You create a template from an existing document by saving the document as a Template. File > Save As Template.

• First open a new document.
• In the document, develop your page structure.
• Place a few images, who's placement will become a standard for each page of your site.
• Place a block of text and headings, as needed.
• Select each item to define these elements as editable region, this way once the page is saved as a template you will be able to edit these regions of the page..
• Modify > Templates > New Editable Region.
• Save As Template.
• This will take you to a screen that allows you to name and save the Template.

Editing a Template

• Templates, when edited, will be saved in a special folder, which DW4 will create, called Templates.
• There will be elements of the page layout that you will not want to change (company logo, footers, structure, tables, navigation, Library Items) and elements that you will want to mark as New Editable Regions (a body of text, images, etc.).
• You can edit the template at any time, just open the Template, edit and save. Any related documents will be updated too.

Using a Template

• To use a Template, go, File > New From Template and choose the appropriate Template.
• The new document is based on this template.
• The images and/or Text you have marked as New Editable Regions can be editable, while the rest of the Template will remain locked.
• Editable Regions are highlighted, other are not.
• Edit as needed and save the page as a regular html document.
• If you need to edit non-editable areas, you will have to open the related Template document and making changes there, resaving and updating the related files.

Detaching a Template

An html document linked to a Template can be detached from the Template, there by making all the document editable at any time. This detached document cannot not be reattached and will not be changed in the future when you edit the original Template.

• Open a document you wish to Detach from a current Template.
• Modify > Templates > Detach from Tempate.

Recognizing a Template

• You know you are in a templated document when there is a yellow border around the document and in the top right corner, the name of the template is placed.
• Editable Regions are outlined in light blue.
• No Editable Regions are filled in with Yellow.

Practical Test next Class:

• Simple 4 page site designed in frames as defined by the Client (Instructor).
• All images and text are supplied.
• It is up to each student to present a completed site by the end of the Testing period (1 hour and 1/2).
• Each Student will upload their finished Test Pages to their free hosted site and give a back up to the Instructor's on floppy disk.