Lists and Tables

Creating a Nested Order List

Creating a Table

<banner.gif

1 Write your name on this document 

2 Using Dreamweaver you will create one xHTML page named test7.htm and one style sheet called test7.css. Follow these steps to complete this exercise.

a. Create an h1 header

I. Use the text “Lists and Tables”

II. Center the h1 header 

b. Create an h2 header 

I. Use the text “Creating a Nested Order List” 

II. Center the h2 header 

c. Recreate an exact replica of this outline for this assignment (steps 1-7) in the xHTML page using nested ordered lists and style rules in the external style sheet. 

d. Create an h2 header 

I. Use the text “Creating a Table” 

II. Center the h2 header 

e. Use the images and text from assignment six listed below and place in a working directory. 

I. Umfk.htm

II. Banner.gif 

III. Blake.jpg

IV. Students.jpg 

V. Tourblockhouse.jpg

VI. Tourdowntown.jpg 

VII. Umfkmap.gif 

VIII. Ftkt.jpg f. 

Create a table with the following constraints

I. Table should be as wide as banner.gif (640 pixels)

II. Table should be centered on page 

III. There should be 6 rows in your table with the following horizontal partitions

i. thead –row1

ii. tbody – row 2, 3,4 & 5

iii. tfoot – row 6

IV. Banner.gif should occupy all of first row 

V. Create a border around each of the horizontal partitions and around the entire table. There should be no other borders 

VI. Add background image (find one on web)

g. Create 4 other tables for each of the following sections 

I. About UMFK

i. 3 rows, 2 columns 

ii. Place the text “About Fort Kent” in row one spanning two columns and centered

iii. Place The Quick Facts text in row 2 column 1

iv. Place Blake.gif in row 2 column 2 

v. Place the rest of the text in the div labeled “about” in Umfk.htm in row 3 spanning both columns and the make the text justified 

vi. Add background color different from previous table 

II. Mission statement

i. 3 rows, 2 columns 

ii. Place the text “Mission Statement” in row one spanning two columns and centered

iii. Size column 1 to be the same width as students.jpg 

iv. Place students.jpg in row 2 column 1 

v. Create a caption for the image students.jpg and place in row 3 column 1

vi. Place the rest of the text in the div labeled “mission” in Umfk.htm in column two, spanning rows 2 and 3 and the make the text left aligned

vii. Add background color different from previous tables 

III. History of UMFK 

i. Create any number of rows and columns

ii. Place the following in your table A. 

A title of “History of UMFK” 

B. umfkmap.gif 

C. All the text in that section of UMFK.htm

iii. Add cell padding 

iv. Add background color different from previous tables 

IV. About Fort Kent

i. Create any number of rows and columns 

ii. Place the following in your table in a visually pleasing manner A. 

A title of “About Fort Kent” 

B. Tourblockhouse.jpg 

C. Tourdowntown.jpg

D. Ftkt.jpg 

E. All the text in that section of UMFK.htm

iii. Add cell spacing

iv. Add background color different from previous tables

h. In the sixth row on the main table place links to the following sections on this web page. Use any formatting method you have learned to date to create a visual appealing display. 

I. Top of Page

II. List exercise 

III. About UMFK section 

IV. Mission Statement 

V. History of UMFK 

VI. About Fort Kent 

3 Verify that that all tables work and apply any formatting and style rules that add visual appeal to your webpage 

4 Using ftp place test7.htm, test7.css and all images (7) into your ftp directory on perleybrook.umfk.maine.edu 

5 Verify the new web page works by clicking on your name on the COS 125 home page on perleybrook.umfk.maine.edu and then assignment#7 

6 Complete the following table by putting your initials in the completed column and upload the document onto Blackboard. 

7 This table will be completed by the Instructor with the scores you received for this assignment and presented to you via blackboard.