Project 1 A website of misinformation |
Part A Adding content and style
Continue to work on the copy of your page that is on your desktop (the one you have open in NotePad++).
1. Type "Topic" in the first cell of your table, and add "My topic is..." in the second cell of the first row:
Now you will really get to work on the content of your page.
2. Finish the "topic" paragraph (it should be a paragraph describing the topic of your misinformation Web site).
(Click here to go to see guidelines for choosing a topic)
3. Add the rest of the content:
Images
1-5 images which you plan to modify
Image Manipulation Plan
One paragraph describing how you plan to manipulate the image(s), and what you plan to use it (them) for.
Copyright compliance
One paragraph citing the source of the original image(s) and your permission or legal rights to use the image(s). There are three cases, each with different requirements (described here). Read these carefully.
Disclaimer
Create a logo tol use as a disclaimer to alert viewers to the fact that what they're seeing is bogus. You can create this in GIMP or any other image creation software (click here for an explanation of one way to create a logo using Microsoft Word). Examples of text for the logo are "Bogus Website!" or "Website of Misinformation" -- anything that gets this point across is ok.
(example):
Now make some decisions about the overall appearance of the page.
Choose a font-family. Choose the general type, either serif (like Times Roman) or sans-serif (like Arial). Always choose a font-family because whoever is looking at your Web page may not have those fonts available on their computer. The font-family list starts with the font you prefer and becomes more general as you move through the list. The Web browser will work its way down the list until it finds one that is available. Note: Font names with more than one word are enclosed in single quotes, like 'Times New Roman'.
4. Add the font-family as a style inside the start body tag to change the font for the entire Web page.
<body style="font-family:Verdana, Geneva, sans-serif;"> This is what this sans-serif font-family looks like.
<body style="font-family:Arial, Helvetica, sans-serif;"> This is what this serif font-family looks like.
<body style="font-family:'Times New Roman', Times, serif;"> This is what this serif font-family looks like.
<body style="'Palatino Linotype', 'Book Antiqua', Palatino, serif;"> This is what this serif font-family looks like.
Choose a background color and a text color. You can play with color schemes in Color Scheme Designer.
Blaze away. When you click on different parts of the color wheel, the palette changes. Try Mono, Complement, Triad, Tetrad (shown), and Analogic schemes. Mouseover the swatches in the palette to get the hex color numbers.
5. When you have chosen your background color and your text color, add them to the <body> tag as shown in this code snippet. The semi-colon (;) after serif says that the style is finished. You can add another style inside the quotes for background-color, as shown. End that with a semi-colon, too. Be sure to start the hex color with a #.
<body style="font-family:Verdana, Geneva, sans-serif; background-color:#A60400;">
Choose a text color contrasts well with the background color.
6. You can add another style inside the quotes for text color and end that with a semi-colon, too. Be sure to start the hex color with a #.
<body style="font-family:Verdana, Geneva, sans-serif; background-color:#A60400; color:#BF7230;">
Be sure to use different colors than the ones given here!
7. Save your page and preview it in Firefox. Change your colors if needed. If you colors didn't show up, make sure you started the hex code with a # sign.
The final element of your page is the validation icon some additional items may be caught by the W3 validator).
8. Validate your page the way you did in lab 3: http://validator.w3.org
When your page is valid, you will see two icons on the bottom of the page with HTML code that you can paste into your document to make them appear on your page (you can use whichever color scheme looks best with your page):
The next page describes what to submit to Catalyst...
| previous page | next page |