Web Design & Development

"Borrowing" images from the web opens a lot of problems as far as copyrights are concerned. In a previous class I noticed Lemming graphics (from the game Lemmings). I wondered about the copyright infringement in that case. It is so easy to copy an image from the web (just right click and "save image as...") that people rarely think about the copyright problem. If you go to clip art sites (and I'll give you a couple below) some of them only request that you add a link to their site on your page. Some ask that you simply add a credit line. Just be aware of these problems.

I hope you noticed that you are seeing a lot more attributes to include in the img src tag. Width, height, border, bgcolor, color, alt, etc. Remember that each attribute needs a space before it begins. Lemay discusses resizing by the use of the height and width attributes. Unless you are creating a thumbnail which will link to the full-size version of the image, I do not recommend that you use this method to resize an image. You can lose definition of the image, especially if it is a photo, and the distortion that can take place could make the image unusable on the page. *** See 2 examples of re-sizing with the attributes

As you should have read in my comments on links, I usually include a "pics" folder in the first level of my www folder on the server. All of my clip art, photos, etc. are kept there to make it easy to load and find them. (Especially for those images that will be used on more that one page, like buttons) The only thing you have to be careful of is the relative pathnames to include the image on your page. You can follow an example of this in my comments for Lesson 6 at the bottom of the page.

And one more thing with images -- ALWAYS use the <alt> tag. And be sure that your tag makes sense to a visitor to your site. I have seen some sites where the designer used alt tags, but some of them were like --- 09653.gif If the image had not loaded for some reason, that tag would not mean a thing to me. The alt tag can be a phrase with spaces and upper/lower case letters. Whatever you type in the tag will show up on the page. Make it usable. Example of images and color

Borders -- experiment with these. You might want to use them around an image, and you may want to let the image stand without a border. There are two defaults with image borders. The default for any image is "0" (but it's a good idea to get in the habit of putting a border attribute tag anyway), and the default for a linkable image is "1". This is the one you may want to change to border="0". As with any normal link (the link becomes blue), the border of a linkable image is blue. I almost always change the border to "0" to eliminate that blue border. Try things -- experiment -- see what works best for you.

Now, to hexadecimal numbers for color. If you have a Web Page Composer program there is a palette of colors in it somewhere. When you run the cursor (usually an eyedropper) over the color, you can choose it for whatever you are doing. There should be an area in that palette that will show the hexadecimal number. What I do to use the hexadecimal numbers is -- I have made a Xerox copy of pages 781-783, and then, as I try the various colors and view them in a browser, I make notations on the list about the usability of that color. (I need more than "darkkhaki" to tell me what that color looks like on the web.) There is no better way to decide which colors you want than to just try it, view it, change it, view it again, etc. until you have found the color(s) that you want to use.

A couple of things to bear in mind --- remember that the background of a web page will not print when a visitor prints the page. So if you have used a dark background with light text (such as Lemay uses on the Halloween page), if a visitor prints off the page, all they will get printed is the light text. Students try printing pages like this at our school, and then get very discouraged when the text is so light (or even white) that the printed page is completely unusable. Also be very careful of putting text over a background that will make the text difficult to read. If I had not included the table to contain this text, with a plain background, the text would have been on the crinkled paper background and been much more difficult to read.

There are many, many sites out there on the web for clip art and backgrounds. Let me offer a couple for you to look at.

http://www.barrysclipart.com/
This is an OK site, one I started with, but have not used much recently.

http://www.arttoday.com/
This is a great site, with thousands of clipart images, and art photos. You can look over the site, but it does require a membership to access ALL of the possibilities. I have used this site a lot, especially for the photos, which are difficult to find anywhere else.

http://cpcug.org/user/jlacombe/backgrnds/johnback.html
Lots of backgrounds for your pages, but be sure to read John's first sentence. This falls right into our discussion of "borrowing" from the web.

http://www.aplusart.com/
This site takes a little while to load, but that's because it is an index of dozens of free clip art sites. A+ Art has its own collection of clip art and buttons in a menu on the left. The major part of the home page is a link menu to many other sites. It takes a lot of browsing to find the sub-sites that you want to use, but at least they are all here in one spot. I use this site a lot.

There are literally uncountable ways to color your pages, include backgrounds, and include images. Experiment and find out which ones will work for you -- and by finding the bad combinations, find out which one you should avoid.