Assignments

Dreamweaver (CIS 58.62B) Homework Assignments

Before completing each assignment look at the homework examples here

Week One Homework Assignment- due March 25

  1. Purchase textbook- Dreamweaver CS4 Digital Classroom by Jeremy Osborn, Wiley Publishers, ISBN: 978-0-470-41092-9.
  2. If you do not have a web site set up on student.santarosa.edu read how to set up the account here and then read how to define a site in Dreamweaver here. If you have one from Dreamweaver A or another class, you can use that.
  3. Define your site or re-use your site definition from Dreamweaver A.
  4. Read Lessons 7 and 8 and complete the exercises as necessary.
  5. Create a new index page for Dreamweaver B which includes the following tags, div tags, contents, and comments in the order listed:
  6. Add this class to the body tag <body class=".oneColFixCtrHdr">
    <div id="container">
    <div id="header"></div><!--this ends the header div-->
    <div id="nav">Place the following text and create links here and make sure to link to all future homework assignments
    home (index) | templates (hw2) | forms (hw3) | rollovers (hw4) | spry (hw5) | final project (fp)</div><!--this ends the nav div-->
    <div id="mainContent">Answer the questions from the homework one example page within this div.</div><!--this ends the content div-->
    <div id="footer"></div><!--this ends the footer div-->
    </div><!--this ends the wrapper div-->
  7. Copy the embedded styles from the example page exactly as written (you can choose your own colors) and use the CSS panel to move them to an external style sheet.
  8. Save your pages as index.html and dreamweaver_b.css
  9. Upload these to your server
  10. Go to http://student.santarosa.edu/~jdiamond/insert_link.php and fill out the form. This will create the link to your home page for this class. I will check all homework from this link.

Week Two Homework Assignment- due April 1

  1. Read Lesson 9 and complete the exercises as necessary
  2. Either create your own template or use any of the “Latest Designs” listed on the website http://www.oswd.org/ Note: Read the set of Design Criteria and keep these in mind when creating your template.
  3. Create navigation links to all homework assignments.
  4. Select File>Save As Template and name it dreamweaver_b_template.dwt
  5. Once saved as a template, create at least ONE editable region in this template for unique page content and save and close the template.
  6. Create another page from this template by selecting File> New
  7. In the New Documents dialog box click on the Page from Template tab
  8. Select the Template file you just created and click on Create
  9. In the editable region, write a paragraph listing at least three advantages of templates
  10. Save the page created from Template as hw2.html and upload to your server.

Week Three Homework Assignment- due April 8

  1. Read Lesson 10 and 11 and complete the exercises as necessary
  2. Examine the homework 3 example and see additional instructions there
  3. (PC Only) Search for and download the “Check Form” extension by Jaro von Flocken from http://www.adobe.com/cfusion/exchange/index.cfm and make sure to use this behavior to validate the name, address, and telephone fields of your form. Note: Mac users can use the default validate form behavior in the Tag Inspector.
  4. Select File> New> Page from Template, choose dreamweaver_b_template.dwt and select Create
  5. Save this new page as hw3.html
  6. In your mainContent editable region create an online sandwich order form which includes:
    1. Form tag with the following code: <form method="post" action="http://www.santarosa.edu/cgi-bin/misc/formmail.pl"> When the user clicks on the "submit" button in your form, the browser will send the information that the user entered in the form to the formmail web application, and the web application will in turn send an email that contains this information. In this assignment you must provide 4 additional pieces of information to the formmail web application. You provide this additional information by inserting 4 input elements with a type attribute set to "hidden" into your form, as described in step 7.
    2. Text fields for name, address and phone. You must use the Label tag attached to your text field element names.
    3. Radio boxes for the bread type (bun, hoagie, sourdough, white, rye).
    4. Checkboxes for lettuce, mayo, mustard, salt, pepper, tomato, onion, jalapeno, ketchup and Tabasco.
    5. A list/menu for payment types: American Express, VISA, Master Card, Discover, COD
    6. A list/menu for delivery types: Will Call, Parcel Post, Delivery Van, FedEx.
    7. Submit order button.
    8. Clear order button.
    9. Jump Menu that links back to your home page.
  7. Add the following hidden input fields right before the close of the form tag:
    1. <input type="hidden" name="recipient" value="yourusername@student.santarosa.edu" />This tells the web application what email address the email should be sent to. (In this case, the email must be sent to your email account on the student server.)
    2. <input type="hidden" name="subject" value="here is information from my form" /> This tells the web application what the subject of the email should be.
    3. <input type="hidden" name="required" value="name, address, phone, email" /> With the name attribute set to "required" if the user fails to fill in the required fields, the web application will refer the user to a webpage displaying an error message. As a matter of good practice, you should indicate on the form which fields are required. If more than one field is required, you can separate the names of the required fields with commas.
    4. <input type="hidden" name="redirect" value="http://student.santarosa.edu/~myusername/mythankyoupage.html" /> This will send the browser to a Thank You webpage after the user has clicked on the submit button. If you don't provide this element, the browser will display an ugly default "thank you" page that won't match the rest of your site. Typically the "thank you" page will have a link on it to take the user back to your main website. Note that the value attribute must be given a complete URL as its value, not just a relative URL.
  8. Create an acknowledgement page called thankyou.html
  9. Try to submityour form and check your email at http://student.santarosa.edu (using the same username and password you used to create your student.santarosa.edu account) to make sure it worked.
  10. Save hw3.html and thankyou.html and upload them to your server.

Week Four Homework Assignment- due April 15

  1. Watch the instructional videos available on the homework four example page before completing the homework assignment.
  2. Complete online midterm

Week Five Homework Assignment- due April 23

  1. Read Lesson12 and complete the exercises
  2. Create a page based on your template that incorporates the following Spry elements into your homework five web page:
    1. Tabbed Panels
    2. Accordion Panels
    3. Collapsible Panels
  3. Make sure to place ALL your Spry styles into a single css page called hw5.css
  4. Follow all the remaining instructions on the homework five example page
  5. Save your page as hw5.html and upload it to your server

Week Six Homework Assignment- due April 30

  1. Read Lesson 13 and complete the exercises as necessary
  2. Begin working on the Final Project

Week Seven Homework Assignment- due May 7

  1. Read Lesson 14 and complete the exercises as necessary
  2. Complete your final project, send me an email with the link Subject Dreamweaver FP- your name.
  3. In the body of the email explain the following:
  4. How you fulfilled the technical requirements of the project
  5. What was the most valuable part of completing the final project
  6. What was the most challenging part of completing the final project
  7. Complete MTM Evaluation
  8. Complete online final quiz

Week Eight- Present Final Projects (May 7)