Comm 260
Intro to Web Design

Instructor: Ross Collins, North Dakota State University Department of Communication

Final scripting exercise

Now that you've had the chance to code both HTML and CSS, it's time to show what you know by putting both together using your own handwritten code. This last exercise asks you to create two pages. One will be a css style page. The second will be an HTML page in which you call up the CSS style. Below are the directions; if necessary, use on-line resources, your text, or old exercises to refresh your memory.

To begin with, pull together your resources. You'll need a bit of text and, most importantly, a photo. You may use one of your own, or choose one from the practice photos on my photojournalism class web site resources. Create a folder for your assets, in this case a photo, the css style sheet, and html page.

I. Create a CSS style sheet.

1. Open new document in a text editor. Save as a style sheet; any name, with css file extension.

Note: avoid saving documents with spaces or odd characters that might mean something different to a browser. Always save with either the .css file extension (if a style sheet) or the .htm extension.

2. Set up this style of pseudoclass for the links:

link color: some sort of green.

visited link: some sort of blue.

mouseover link: some sort of red.

active link (when you click on it): black.

Note: Choose colors from this list of named colors, or a hexadecimal value.

3. Set up a top menu bar. Make it fixed (absolute; will not expand with size of monitor window), 90 percent wide, 10 percent high, positioned at the top and left.

Add some padding, so type doesn't touch edges of box.

Make the font about 12 pixels in size, and use a sans serif font, probably verdana or arial.

Add a cool color of your choice for the background.

4. Set up a main text box.

Make it about 85 pixels below the menu bar at top (you may have to adjust this to eliminate the white line between the two boxes).

Make it absolute, 90 percent wide, 90 percent high.

Set up some padding again.

Choose a background color.

This time use a serif font, probably georgia or times.

Make the text black.

5. Set up a heading style. Choose baskerville or didot for the font, and for the color, the same color as your (unvisited) link color.

Your done with the CSS style sheet.

II. Create an HTML document; save with .htm file extension.

1. Set up the head area.

Note: Recall the HTML code to link to an external style sheet is <link type="text/css" rel="stylesheet" href="yourcsssheetname">

2. Add a title to your document.

3. Close the head area, open the body area.

4. Call up your CSS menu bar div class.

5. Add three links to this menu bar, with comments for each link. Put space between each link. The third link must be an email link. If you need to know the code for this (or anything else) go to the W3 schools' HTML tutorial, and HTML links.

6. Close the menu div class, open the div class for the main text box.

7. Write a short heading.

8. Type some stuff in this text box, or copy and paste text from elsewhere. Must be at least a couple sentences. Say something about your photo.

9. Use boldface to emphasize several words of your choice in your text.

10. Add the photo you downloaded. Make it about 350 pixels by 225 pixels, and align it on the right. Don't forget the alt tag.

11. Add a horizontal rule under the text. Make it about 4 pixels wide, and color it the same color as your heading.

12. Proofread copy, check in browser, attach html code, css style sheet, and photo to an email to me for grading. I will grade the code, and how well it renders as a web page. No credit for submitting code created by Dreamweaver.

What does it look like? It should look something like this.

Desperate, want to see the code? Okay, I'll send it to you on request, but it'll cost you five points penalty!