Contents:

CSS Box Model, Absolute Position, and HTML Forms

______________________________________________________

Readings:

1. Osborn
   • Lessons 6 and 12 with CD
2. W3Schools Online Web Tutorials
   • Styling Links
   • Styling Lists
   • Styling Tables

______________________________________________________

Introduction:

[kml_flashembed movie=” http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=week5apforms-110306230705-phpapp02&stripped_title=week5-ap-forms&userName=rowenali” width=”525″ height=”405″ allowfullscreen=”true” /]

______________________________________________________

Section 1. Working with Margins & Padding:

[youtube]http://www.youtube.com/watch?v=E6KmZml85l4[/youtube]

______________________________________________________

Section 2. More on CSS Box Model

[youtube]http://www.youtube.com/watch?v=fpAxwOgTseg&feature=channel_video_title[/youtube]

[youtube]http://www.youtube.com/watch?v=ciQSXnSRYZw&feature=relmfu[/youtube]

[youtube]http://www.youtube.com/watch?v=ZLufT7co3ec&feature=relmfu[/youtube]

[youtube]http://www.youtube.com/watch?v=XG3-zY68K3c&feature=relmfu[/youtube]

______________________________________________________

Section 3. CSS and Images:

[youtube]http://www.youtube.com/watch?v=8V1GB3IboKc&feature=relmfu[/youtube]

______________________________________________________

Section 4. Set up a Contact Information Form:

[youtube]http://www.youtube.com/watch?v=OHM5lg7mEgs[/youtube]

______________________________________________________

Section 5. Set up a Form Script:

[youtube]http://www.youtube.com/watch?v=PyG4rjqG42o&feature=related[/youtube]

______________________________________________________

Section 6. Customizing the Form Confirmation Page:

[youtube]http://www.youtube.com/watch?v=TVXbBsJRvZo&feature=related[/youtube]

______________________________________________________

Assignment (5 points):

1. Based on the videos in Sections 1, 2, and 3 above, please revise both your index.html and week4.html to include the following elements:
   • add padding (4 sides) 15px to both content sections (0.5 point);
   • add margins 10px to the images in the content sections, not to the banners (0.5 point);
   • center your pages (via table and div setup) (0.5 point);

   ****If you have included these elements in your Week3 and Week4 assignments, you do not have to do anything this time. If you used Indent in the content sections before, you should delete the indent feature and add these elements this time.

2. Based on the videos in Sections 4 and 5, create a form as a stand-alone page. Here is an example. If you use a table in the form, please do not show the table border. Your page should include the following (3 points):
   • same heading, banner, setup and footer of your index page, just change the content section
   • text field
   • text area
   • checkbox group
   • radio group
   • list/menu
   • file field
   • button

   ***You may create this page by using your index.html or week4.html page as a base. Just delete the content part of that page and insert the form.

3. Upload it to your server.
4. Create a link on your index.html page for this page, so that I can check this page from our class blog.
5. Download the .php file, make necessary changes, and upload it to your server, so that when SUBMIT button is clicked, the “Thank you” page will appear (0.5 point).

Extra Credits (2 points):

Customize your Thankyou page so that it matches your index.html page as shown on the video in Section 6. Pay attention to the css code you have set up for the content section. (Hint: If you have an external css file, you may have to change some of the css code. And you may have to change your image link.)