Exercise 1:
Your first website
1) Create a 220 folder on your desktop. (Notice there are no caps or spaces in that name: this is the name I'll be looking under for all your exercises.)
I would also like you to create a new folder underneath the "220" folder called "images".
2) For each of the three favourite websites you have chosen for your home page, collect a piece of artwork (logo, image, etc.) that you can add to the page.
3) Save them all into the sub-folder called "images"
4) Open up your index.htm page in insert each of the images into your page, either in code or using the dreamweaver "design view".
5) Now, link them all. To link an image, you simply put the <a href> code around the <img src> code. It will look something like this:
<a href="http://instruct.uwo.ca/mit/220">
<img src="images/mit220_006699.gif"></a>
If you'd like mit220 logos, here they are:
.
Adding color:
You can change the background color, the text color, and the link colors by changing the attributes to the <body> tag. So, it for this page the code looks like:
<body bgcolor="#FF9933" link="#330099" vlink="#3333CC" alink="#0066CC" text="#330099">
text is for the text color
bgcolor is the background color
link is for the underlined link, or the border around an image that is linked
alink is the active link. The color of the link while the mouse button is pressed.
vlink is the visited link. The color of that tells your viewer they have already visited this link.These are called hexidecimal values (or hex = base 16). Each color is represented as three pairs of hex digits. One pair for the red, one for the green, one for the blue. Hex ranges from 0 to F. 0-9 + A-F. All web color is based on RGB, or combinations of the three primary colors, red, green and blue.
We'll talk more about color in the Photoshop section of the site.
Picking colors:
Great, so you can add color, but how do you know which ones to pick? There is a complete listing of web safe colors in dreamweaver, every time you click on the little color box.
You can also check out a wonderful resource from VisiBone that will allow you to pick a palatte of colors. As you pick a color, it will appear in a swatch, along with information such as the hexidecimal values for that color. You can find this tool at:
http://www.visibone.com/colorlab
