Reference no: EM131519660

Lab Assignment

iLab Overview

Scenario/Summary

For this iLab, you will create the final page in your case study website. This will be an HTML form submission page.

Required Software

Dreamweaver

Access the software as you have done during previous iLabs. Steps 1-5

Use a personal copy or the free Adobe Creative Cloud subscription provided by DeVry.

Adobe Creative Cloud Subscription

Internet Explorer

Access the software at https://lab.devry.edu. Step: 5

Lab Steps

STEP 1: Use Save As to Create a New HTML File

Refer to the Site Structure Chart you created in the Week 2 You Decide assignment and select a page that would logically contain a form. The Contact Us page or a similar page would be a good choice. If you do not have such a page for some reason, decide on one to add to your website.

Start Dreamweaver. Open one of the pages in your existing website and use Save As to create a new file with the name of your selected form page. Remember to name it according to your site structure chart guidelines so that the links work. At this point, we do not care what is displayed in the workspace in the panel to the far right. The CSS Designer or the Files panel might be displayed but it doesn't matter.

Image Description

Any of your HTML files will work fine. In the example above, the file has been saved as RequestQuote.html. The title in the Property Inspector has been change to Request a Quote.

After you've saved the file, remove the body text and the h2 headings, if any. The text may be removed by selecting it and pressing the delete key on your keyboard. The tags, such as h2 and p, will remain. In the spaces where the tags exist, right click and select Remove Tag from the resulting menu.

Change the h1 heading to something appropriate for your site. In this example, you'll see a form that users can fill out to request a quote from Sunholm Solar. Position the cursor on a blank line below the heading so that you can insert the form into the appropriate location.

Image Description

From the menus at the top, select Insert, Form, Form.

Image Description

You will see a red outline placed on the page, representing the <form></form> tag set.

Image Description

STEP 2: Insert Textboxes

Make sure that your cursor has remained inside the area that has been outlined in red. From the menus at the top, select Insert, Form, Text.

Image Description

A text field will appear in the form area, and the Property Inspector will display the text field's properties.

Image Description

Add in an ID for your text field and a label (which is shown on the screen to the users). By naming convention, textboxes are named txt_ and then a unique name, such as fname to indicate that the user should enter his or her first name. Do not use any spaces. The label, on the other hand, is shown to the users on the screen and must be readable in plain English. Set the Size property and the Max Length property to 20. Click on the box next to Required.

Image Description

Click to the right of the textbox and then press Shift + Enter (that is, hold down the Shift key while pressing Enter) to go down to the next line. Repeat this process for as many plain textboxes as you need. Set the properties of each of them appropriately. You should have at least five textboxes.

STEP 3: Insert Radio Button Group

Click to the right of the last textbox you created, press Shift + Enter to move to a new line, and type a caption for a set of radio buttons. For example, you might type I would like a representative to contact me to prompt the user to select a time frame for being contacted.

Press Shift + Enter again to move to a new line, then use Insert, Form, Radio Group to add a group of radio buttons that will act in a coordinated way.

For each radio button, the Label property refers to what the user will see, and the Value property refers to what will be included as a value when the data are submitted. Initially, both are shown as radio for all buttons. Click on those values to change them. Additional radio buttons can be added to the group by clicking the + sign. Change the group name, RadioGroup1, to a meaningful name. Do not use spaces in the name, but you can use underscores. Click OK when you have completed the group.

Image Description

For this iLab, you must add at least two radio button groups, with at least three buttons each. Note that the name of the groups must be unique; they cannot match the names from other groups.

Image Description

STEP 4: Insert Submit and Reset Buttons

With the cursor at the end of the last radio group, press shift+enter again to move the cursor below the last radio group. Use Insert, Form, Button to add a Submit button. Add the Submit Button by going to the top menu and clicking Insert, Form, Submit Button.

Image Description

With the Submit Button selected, enter an appropriate Name for the Submit Button in the Property Inspector. Enter Submit for the Value and select the name of the form in which the Submit Button is contained, probably form 1, as the Form property.

Image Description

Repeat this step with appropriate variations to a Reset button to clear the form. Set the ID property to rstReset, and the value to Reset.

Image Description

STEP 5: Test, Zip, and Submit

Save your work and preview the page by pressing F12. Be sure to check to see if the data validation for the name textboxes works.Your page should look something like this.

Image Description

When the user clicks Submit, the form data don't go anywhere but the page tests the contents of the submission before passing it along.

Zip all of your website files, including all images, the CSS sheet, and any other contents of your site folder. Submit them to the Week 6 iLab Dropbox.

Submit your lab to the Dropbox, located at the top of this page. For instructions on how to use the Dropbox, read these step-by-step instructions.

See the Syllabus section "Due Dates for Assignments & Exams" for due date information.

Attachment:- Lab_Assignment.rar