Prof. Jenna Spevack | Teaching Site

Web Design: AD550

COURSE CALENDAR | WEEK 12 CLASS OUTLINE | Homework |

Topics covered in class:

  1. Projects page REVIEW student work
  2. FORMS:
    • Forms can be used to send data across the web and are often used as contact forms to convert information inputted by a user into an email.
    • On their own, forms are useless. They need to be hooked up to a program that will process the data inputted by the user. We are creating a self-processing form that includes a php script.
    • Unfortunately, the ADGA FTP server does not allow scripts to execute, so our forms will not actually function. However, you can save the script should you decide to put your site on a web server with php enabled, in the future.
  3. HTMLDOG Forms Tutorials:
  4. Form tags in XHTML: Below are some of examples of tags used in HTML form creation.
    1. Form tag defines the form. Within this tag there is generally one required action attribute that tells the form where its contents will be sent to when it is submitted. <form action="processingscript.php" method="post">
      </form>
    2. Input tag can take ten forms, the ones we will use are outlined below. (Note that the input tag closes itself with a '/>' at the end.)
      • <input type="text" /> is a standard textbox. This can also have a value attribute, which sets the text in the textbox. <input type="text" value="This is a text input" />.
      • <input type="checkbox" /> is a checkbox, which can be toggled on and off by the user. This can also have a checked attribute, which would be used in the format
        <input type="checkbox" checked="checked" />.
      • <input type="radio" /> is similar to a checkbox, but the user can only select one radio button in a group. This can also have a checked attribute, used in the same way as the checkbox.<input type="radio" checked="checked" /
      • <input type="submit" /> is a button that when selected will submit the form. You can control the text that appears on the submit button with the value attribute, for example .
        <input type="submit" value="Submit this form." />.
      • <input type="hidden" /> is a field that will not be displayed and is used to pass information such as the page name that the user is on or the email address that the form should be posted to.
    3. Textarea tag is a large textbox. It requires a rows and cols attribute. <textarea rows="5" cols="30">A big load of text here</textarea>
    4. Select tag works with the option tag to make drop-down select boxes <select>
      <option value="first option">      Option 1</option>
      <option value="second option">      Option 2</option>
      <option value="third option">      Option 3</option>
      </select>
    5. Option tag can also have a selected attribute, which would be used in the format: <option value="first option" selected="selected">Option 1</option>
    6. Name attribute needs to be added to all the form fields mentioned above. Without it all the fields will be ignored when you hook up your form to a form-handling program. For example: <input type="text" name="yourEmail" />
    7. Id attribute should also be added to each form field in order to use labels and can be used for CSS styling. <input type="text" name="yourEmail" id="email" />
    8. Label tag is used to help improve the accessibility of forms. <label for="email">Enter Your Email</label> <input type="text" name="yourEmail" id="email"
  5. Adding a form to your contact page using PHP | Sample page
    1. Set up the PHP page by renaming your file contact.html to contact.php - INSIDE OF DREAMWEAVER.
    2. View this page's source. Copy and paste the PHP code into your contact page, just below your <h2>Contact</h2>.
    3. Now we will add the form controls based on the sample page. The tags used in this form are form, input, textarea, select, option, and label. The attributes include id, name, value, type, rows, cols, and for.
  6. Using CSS to style your form
    • Try adding the following rules to your CSS page form { border: thin dotted #CCCCCC; width: 80%; margin-left: 10px; padding: 10px; } #email, #name, #state, #textmessage { background-color: #FED8D5; color: #333333; } #submitbutton { color: #FFFFFF; background-color: #666666; border: thin outset #666666; } #submitbutton:hover { background-color: #C73149; }
  7. References

Homework | Week 12

Finish portfolio sites!!

In Photoshop or Illustrator finalize your alternate color scheme, graphic style and layout for your portfolio site. We will begin work on an alternate stylesheet next class. We will be using the same divisions (a two column layout). Please keep these divisions in mind when designing your alternate mockup, but consider how you can hide these divisions using smart visual design (rounded corners, organic lines- using pattern tiles and other background images)

By next class you should have completed your first web site. If your website is well-styled and includes the following pages it will be included in the upcoming student show.

For students interested in creating horizontal navigation, review this tutorial (using a separate stylesheet file). I will demonstrate it next week.