HTML and CSS Exercise

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.

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/WScbb6b82af5544594822510a94ae8d65-7e32a.html

H2	Text color -- #333, bold
H3	Background color -- #39f Border on the bottom with the following rules Width--thin Style -- solid Color -- #003 Center the text Margin on all sides 35 pixels
p	Font Georgia Text color -- #030 padding of 15 pixel on all sides
li	Font-family Arial Background-color gray 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.

navtable -- this class will be applied to navigation table	Font-family Times Roman Background-color #0ff Text color- bold, center
example1 -- this class will be applied to example 1	Font-family Tahoma Background-color #699 Text color- #033, bold Text size- 10 points Margin on all sides 25 pixels Padding on all sides 25 pixels
example2 -- this class will be applied to example 2	Background color -- #66c Border on all sides with the following rules Width--10px Style -- solid Color -- #06c Text size of 10 pixels Text color -- #ccc
header - this class will be applied to the heading "IEBGENER STUDY GUIDE"	Font-family Arial Background-color #6ff Text color- 030 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.
• Put copies of each required deliverable into the new folder.
• Right-click on the folder and select Send To -> Compressed (zipped) Folder. You can also use other tools to compress the files into a single zip folder (e.g., 7-zip).
• • Upload the zip file to the weekly iLab Dropbox in eCollege.