EdTech 502: Week 8 Creating Tables for Web Pages

Week 8: March 5 – 14
Topic: Creating Tables for Web Pages
Assignments Due: March 14

Introduction

This week you will create a collaborative learning activity using the Jigsaw model (See: http://jigsaw.org/) I have not always been a fan of group work, but this approach works well. For a quick overview of the method please read Jigsaw in 10 Easy Steps. I hope you have fun with this one.

The expert groups used in the Jigsaw activity will be organized in a table that is created with XHTML. Tables have been used by many people to create Web page layouts, but this technique is being replaced with CSS. Now, we use tables for their intended purpose of displaying tabular information. We can also make tables accessible if we add headers, caption, and table summary as I show you in the videos this week.

Jigsaw Activity (75 Points)

In this project you will create a collaborative learning activity with expert groups that are organized into a table.

Instructor Example: http://edtech2.boisestate.edu/hungj/502/jigsaw.html
http://edtech2.boisestate.edu/evanouskil/502/jigsaw.html (Note: To view the XHTML code on the example open this page in Firefox, click the View menu, then click Page Source.)

Instructor CSS (Best viewed with the Firefox browser): http://edtech2.boisestate.edu/hungj/502/styles/jigsaw.css

http://edtech2.boisestate.edu/evanouskil/styles/jigsaw.css

Dr. Snelson has prepared a series of videos designed to help you learn the skills needed to complete the assignment. Please do the reading first and then watch the videos.

Video Presentations (Recorded by Dr. Snelson)

  1. About the Jigsaw Project: http://edtech.boisestate.edu/snelsonc/videos/dwcs4jigsaw/dwcs4jigsaw.html
  2. Create a Basic HTML Table in Dreamweaver CS4/CS5: http://edtech.boisestate.edu/snelsonc/videos/dwcs4basictable/dwcs4basictable.html
  3. Create an Accessible Table in Dreamweaver CS4/CS5: http://edtech.boisestate.edu/snelsonc/videos/dwcs4accesstable/dwcs4accesstable.html
  4. Use CSS to Style a Table: http://edtech.boisestate.edu/snelsonc/videos/dwcs4tablestyle/dwcs4tablestyle.html

Assignment Instructions

  1. Select a concept taught in your content area, or one that you might teach, that has a several interrelated subsections. It is best to stick with a simple topic for this such as how to create a PowerPoint presentation or laboratory safety. Do not try to use Jigsaw for a large unit or entire course. It is best to focus on a topic that can be covered in a couple of hours or less. Once you have selected a topic decide if it can be subdivided into clear subsections for the expert groups. You will need at least three expert groups. Refer to the example to see how I did this with Internet search. (By the way, if you want to do your project on Internet search it is fine as long as you take a different approach. You might do the entire thing on kid-friendly search engines or educational directories, for example.)
  2. After you have selected a topic then start to look for information on the Internet that relates to the topic. Locate websites that you can link to for your expert groups in the jigsaw activity. Before you begin the Web page you should have your topic, text, and links prepared.
  3. Create a new Web page for this project. Save it in the 502 folder of you Web site and name it jigsaw.html.
  4. Create a new external style sheet and name it jigsaw.css. Link it to the head section of jigsaw.html. Please note that you can reuse favorite styles from previous projects as long as the code is written correctly. Save the style sheet in the styles folder of your website.
  5. Type a title on your page (or create and use a graphic page banner).
  6. Type a brief learner description. This should include language that indicates who the intended learners are. Use the words “Learner Description” to indicate this line of text.
  7. Add your name and copyright information to your page. In the example this is in the footer of the page.
  8. Type an introduction to the activity.
  9. Type a set of directions for your learners to explain how to do the Jigsaw activity.
  10. Create an HTML table to organize the expert groups for the activity. There should be at least three expert groups.
  11. Make your table accessible by adding a caption, summary (opening table tag), and header cells with appropriate scope attributes for column or row.
  12. Add at least three links to external websites per expert group.
  13. In addition to the necessary XHTML and CSS needed to format your page and make it attractive, please add the following code elements and styles to your project:
    • Text between <title></title>
    • Div tags as needed to structure the content of the page. The page should make logical sense without a style sheet.
    • Heading tags as needed to identify major sections: Start with h1 and move progressively down through h2, h3, etc. as necessary for the page.
    • Alternative Text: Please add a few words of alt text to any image used on the page (if any).
    • Accessible HTML table: Use HTML to create a table to organize the expert groups for the activity. Make it accessible with the caption, summary, and header cells.
    • CSS to format the appearance of the table. Apply styles to one or more table-related tags such as table, th, td, or caption.
    • CSS to format the rest of the page as desired.
  14. Your page should be attractive and adhere to the design principles in the Non-Designer’s Web Book.
  15. Save and upload all of the files: jigsaw.html, jigsaw.css, and all image file(s) for the page. Try typing the address to your page to open your project page from the server. Your page should have an address similar to the instructor example. However, the snelsonc part of the URL will be changed to your own user name (typically last name and first initial).
  16. Validate your XHTML. http://validator.w3.org/
  17. Validate your CSS code with the W3C CSS Validation Service at: http://jigsaw.w3.org/css-validator/
  18. Correct any problems with the code.
  19. I would suggest spell checking your page. Click the Commands menu then Check Spelling.

If you make any additional changes, please be sure to save your pages and upload

  1. them to the EDTECH2 server.
  2. Open your 502.html page and create a link to the jigsaw.html page.
  3. Post 502.html URL on the Assignment 8 Showcase discussion board to share with the class.
Advertisements
This entry was posted in EdTech 502 and tagged , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s