1. CIS363A Week 3 iLab 3
Click this link to get the tutorial:
http://homeworkfox.com/tutorials/general-
questions/7836/cis363a-week-3-ilab-3/
This lab supports the following TCOs:
TCO 3 - Given an original source document, convert the document to a web page using HTML
and CSS.
TCO 4 - Given an older website that requires updating, review the techniques used to create the
current site, develop a plan to revise the site using CSS layout techniques, client-side scripts, and
other current website design techniques, and convert the web pages based on the plan.
Scenario:
Create an index.html file and create an External CSS file based on the specifications given in the
assignment.
1. You will need to create an inline and external CSS.
2. You will also need to attach an external CSS file to the original page.
Deliverables and Grading Rubric
1. index.html with attached external CSS sheet
2. style.css file
Part Deliverable Points
A Create HTML and CSS files (style.css) 3
B Inline CSS 22
C Tag CSS 22
D Class CSS (index.html with attached external CSS sheet) 23
Total 70
iLAB STEPS
Lab Preparation
Download the lab3Content.docx document found in Doc Sharing.

2. Part A: Create HTML and CSS files (3 Points)
Step 1: Create a new HTML file (1 Point)
• Open Dreamweaver and create a new HTML page.
• Enter index.html as the web page name.
Step 2: Copy content from Word document (1 Point)
• Open the lab3Content document found in Doc Sharing.
• Paste the content into the index.html page.
Step 3: Create CSS file (1 Point)
• Create a new CSS page.
• Save the file and name it styles.css.
Note: If your styles.css file does not show when needed in the remaining steps, then Click on the
Attach Stylesheet icon, Select Browse, Locate the styles.css file, and then Click Ok. (The
styles.css will automatically be links to the index.html file in the head section of the code.)
Part B: Inline CSS (22 Points)
Step 1: Create an Inline CSS (10 Points)
• Go to the index.html file and create an Inline CSS for the following properties. Use the
Page Properties option in the Properties Panel.
Background color for the body A light tan -- #FC6
Font color for all text in the body A dark blue -- #039
Font for all text in the body Comic sans MS
Font size for all the text in the body Body 14 points
Link color for all links Dark red -- #CC0000
Visited link color for all links Dark red -- #CC0000
Rollover link color for all links Dark green -- #060
Active link color for all links Dark red -- #CC0000
No link should be underlined for all links Never underline
Step 2: Apply Inline CSS (12 Points)
• Your index.html page should reflect the styles from above.
• Go back to Page Properties if the page did not update with your Inline CSS.

3. Part C: Tag CSS (22 Points)
Step 1: Create Tag CSS (10 Points)
• For all of the following Tags, create the CSS rule from the descriptions below.
• Hint: To create a CSS, you need to click on the New CSS Rule in the CSS panel on the
right hand side. Watch Adobe TV on best practices for creating a style sheet. You will
need to enter Style Sheets or CSS in the Adobe TV searchbox.
http://help.adobe.com/en_US/dreamweaver/cs/using/WScbb6b82af5544594822510a94ae
8d65-7e32a.html
H2 Text color -- #333, bold
Background color -- #39f
Border on the bottom with the following rules
• Width--thin
H3 • Style -- solid
• Color -- #003
Center the text
Margin on all sides 35 pixels
Font Georgia
p Text color -- #030
padding of 15 pixel on all sides
Font-family Arial
Background-color gray
li
Text color black, bold
Text size 18 points
Step 2: Apply Tag CSS (12 Points)
• Apply the new Tag CSS to the content on the page.
Part D: Class CSS (23 Points)
Step 1: Create a Class CSS (10 Points)
• Create a New CSS Rule using a Class CSS. You will need to select the option to include
the Class CSS to the styles.css file.
Font-family Times Roman
navtable -- this class will be applied to navigation table Background-color #0ff
Text color- bold, center

4. Font-family Tahoma
Background-color #699
Text color- #033, bold
example1 -- this class will be applied to example 1
Text size- 10 points
Margin on all sides 25 pixels
Padding on all sides 25 pixels
Background color -- #66c
Border on all sides with the
following rules
• Width--10px
example2 -- this class will be applied to example 2 • Style -- solid
• Color -- #06c
Text size of 10 pixels
Text color -- #ccc
Font-family Arial
Background-color #6ff
header - this class will be applied to the heading Text color- 030
"IEBGENER STUDY GUIDE" Text size -- 36 points
Margin on all sides 50 pixels
Padding on all sides 50 pixels
Step 2: Apply the Class CSS (12 Points)
• Apply Class CSS as done in the Class CSS steps above.
Step 3: Upload Zipped File (1 Point)
Your index.html page should have all Inline, Tags, and Class CSS applied.
• Create a folder called CIS363A_YourLastName_Lab3.