Cos 125 by vivi07

VIEWS: 11 PAGES: 4

									Cos 125 Assignment #6 Due Monday, March 23 at 9:35 AM Name:

Learning Styles
1) Write your name on this document 2) Using Dreamweaver you will create 4 style sheets to apply to an xHTML page given to you. Follow these steps to complete this exercise. a. Download the following from WebCT assignment sections 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. Umfk.css ix. Ftkt.jpg b. Verify operation and completeness of download by clicking on Umfk.htm and verifying all images are present c. The document UMFK.htm has the following properties i. 7 divisions named 1. header 2. mission 3. about 4. history 5. ftkt 6. nav 7. facts ii. two classes named 1. image 2. content iii. 7 images named 1. banner 2. blake 3. students 4. map 5. downtown 6. block 7. fortkent iv. 7 elements that can be styled

1. 2. 3. 4. 5. 6. 7.

<p> <div> <a> <img> </br> <h1> <h3>

d. Create an xHTML page and name it “test6.htm” this page should contain the following i. A title of Style Exercise ii. A total of 8 links to the following 1. 4 copies of the umfk.htm page named umfk1.htm, umfk2.htm, umfk3.htm and umfk4.htm 2. 4 styles sheets that correspond to the four WebPages named sytle1.css, style2.css, style3.css and style4.css 3. label each link with a short narrative of what I should expect when I click on the link iii. A background color or image e. Create umfk1.htm by doing the following i. Load umfk.htm into Dreamweaver ii. Rename umfk.htm to umfk1.htm iii. Change the line <link rel="stylesheet" type="text/css" href="umfk.css" /> to <link rel="stylesheet" type="text/css" href="style1.css" /> iv. Make no other modifications to umfk1.htm v. Create style1.css by selecting one of the “full design” style sheets available in Dreamweaver vi. Verify page operation f. Create umfk2.htm by doing the following i. Load umfk.htm in to Dreamweaver ii. Rename umfk.htm to umfk2.htm iii. Change the line <link rel="stylesheet" type="text/css" href="umfk.css" /> to <link rel="stylesheet" type="text/css" href="style2.css" /> iv. Make no other modifications to umfk2.htm v. Create style2.css by selecting one of the “basic” style sheets available in Dreamweaver vi. Add style rules to your style to perform the following 1. Add a font-family for the <p> elements 2. set line spacing for the <p> elements 3. set the aligning for those paragraph in the content class (and only those paragraphs) to justify 4. Make the H1 headers bold with a sans-serif font 5. Make the H1 headers have the first letter of each word capitalized

6. Make those paragraphs in the class “content” have a positive indentation 7. Set text color for the nav division to a shade of blue 8. Set a background color for the nav division 9. Set colors for <a> elements states (link , hover, visited, focus, active) vii. Verify umfk2.htm operation and make changes as necessary g. Create umfk3.htm by doing the following i. Load umfk.htm in to Dreamweaver ii. Rename umfk.htm to umfk3.htm iii. Change the line <link rel="stylesheet" type="text/css" href="umfk.css" /> to <link rel="stylesheet" type="text/css" href="style3.css" /> iv. Make no other modifications to umfk3.htm v. Create style3.css by selecting one of the “color” style sheets available in Dreamweaver vi. Add style rules to your style to perform the following 1. Position each of the following in a visually pleasing manner. Each division should be placed in a position removed from the normal flow of an xHTML page that didn’t utilize CSS. a. header b. mission c. about d. history e. ftkt f. nav 2. Put a border (any style or color)around each of the images except “banner.gif” 3. Float the following images to the right a. blake b. map c. block 4. Float the following images to the left a. students b. downtown c. fortkent 5. Adding padding, a border and a margins to those divisions in the class content vii. Verify umfk3.htm operation and make changes as necessary h. Create umfk4.htm by doing the following i. Load umfk.htm in to Dreamweaver ii. Rename umfk.htm to umfk4.htm iii. Change the line <link rel="stylesheet" type="text/css" href="umfk.css" /> to <link rel="stylesheet" type="text/css" href="style4.css" />

3) 4) 5) 6)

iv. Make no other modifications to umfk3.htm v. Create style4.css by selecting any of the style sheets available in Dreamweaver vi. Add any style rules to your stylesheet to create a visually pleasing webpage with the following constraints 1. A minima of 10 rules created by you 2. At least two different fonts 3. Must have style rule of each class 4. Must have at least one style rule for each of the following a. An element b. A division c. An element within a division vii. Verify umfk4.htm operation and make changes as necessary Using ftp place all documents (5), all stylesheets (4) and all images (7) into your ftp directory on perleybrook.umfk.maine.edu 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#6 Complete the following table by putting your initials in the completed column and upload the document onto WebCT. This table will be completed by the Instructor with the scores you received for this assignment and presented to you via WebCT.

Scoring for assignment #6
Task Creation of web pages using Dreamweaver Creation of stylesheets using Dreamweaver All required style rules present Ftp’d to correct directory Verify web page operation Correct use of WebCT assignments sections Creative and originality Completed Possible Points 10 20 20 10 10 10 20 Total Score Earned Points


								
To top