To Temple College Class  logo R. Craig Collins > Web Page Design > Lab 6

Lab 6 © R. Craig Collins, 2005/6

General Lab Directions
Note: There is not enough time in lecture to cover all the material; read your book BEFORE you begin the lab
Note: Typically labs will require you to invest some time in the lab, outside of class lecture hours

•Note: Please read the related overview material before continuing
Check with your Instructor for due date, typically Friday, 11:59PM (see due dates)

 •NOTE: Do NOT use CAPITAL letters OR spaces in file names, or add extra spaces between quotation marks.
 •NOTE: Do NOT use curly quotation marks, such as ; only use straight quotation marks, such as ".

 • Copy the contents of lab5 to a lab6 folder

Part 1, Activity (50%):
 • Using a text editor or a html editor, such as Dreamweaver or NVu, add a table to one of your existing pages, such as page1.htm; include with align=, valign=, background= or bgcolor=, and either a rowspan or colspan, as described on the advanced table features page.    
Tips for using NVu

Part 2, Activity (50%):
 • Copy the image folders.gif below to your images folder (verify the file is saved as folders.gif), then add the following code to to one of your existing pages, such page2.htm (the code makes the IMED1316 folder a link)

I strongly suggest you copy, rather than type, the lines below, then paste them into your document.

<img src="../images/folders.gif" usemap="#folders" alt="folders" style="border-style:none">
<map id="folders" name="folders">
<area shape="rect" coords="132,29,204,88" href="http://www.templejc.edu" alt="Temple College" /> </map>

or

Using a text editor or a html editor, such as Dreamweaver or NVu, add an image map to one of your existing pages, such as page2.htm. Details at Using Image Maps

Grading Points
page1.html has a table with

  • a table with text or an image in every cell (10%)
  • the table (or individual cells) has background color or background image (10%)
  • at least two cells are merged/joined (10%)
  • text in at least one cell is visibly vertically aligned (10%)
    if you put a <br> in an adjacent cell, this will be easier to see
  • text in at least one cell is visibly horizontally aligned, center or right (10%)

page2.html has a working image map with

  • a working visible image, such as the "folders.gif" (10%)
  • a working alt attribute, such as "folders" (10%)
  • a working hotspot, such as the rectangle over the IMED 1316 folder (15%)
  • the hotspot links to another page, such as www.templejc.edu (15%)
(How to check for HTML errors)



Image map Image Map, IMED folder is link

Problems? Zip the entire folder and attach to an email:
       •Send the mail to your instructor, cc yourself
       •The subject line should include your name, your class, your section, and what you are submitting
       •Make sure you attach the zipped file

SUBMITTING THE LAB

In Windows, zip the entire lab6 directory, and rename to yourname-lab6.zip.
       •Example: yourname-lab6 or yourname-lab6.zip (if your extensions are visible)
Log into Desire2Learn, choose this class, choose Dropbox, and select Lab 6.
Browse to yourname-lab6.zip and upload it. (Scroll down to see detailed instructions)


To submit by Temple College Desire2Learn:
       •Log into D2L, scroll to the bottom, and choose the correct course
       •When the Course Home Page appears, click on the Dropbox link.
              •You may click on Discussions, Dropbox, or Quizzes below, for more info

       D2L navigation D2L Dropbox notes D2L Quizzes Notes D2L Discussion Notes
Dropbox directions