A column for people who remember what
the world was like before there was color.....
More Spiffy Web Page Tips May 31st, 2000
At the end of last week's column I addressed the fairly significant error that I made the week before when I said that Adobe PageMill did not have a spell checker. Not only that, but I discovered from reader Nancy Blossom that there is a great user manual included on the PageMill installation CD. While following up on Nancy's information I also discovered that there are just loads of things included on that same CD to help you design your web page. Apparently these items don't automatically download when you install Adobe PageMill, but they are all there on the CD. Since they take up a great deal of space, it is probably a good idea to just leave them on the CD and work from it as needed. There are page arrangements, bullets, buttons, images, backgrounds, etc. It actually will take you some good time to review everything that PageMill includes, but it might be worth it to you if you are just starting out the web page adventure or are making a new one.
Today's column will offer tips on putting depth into tables, and creating mouseovers.
How Can I Put An Image Inside A Table to Give It the Appearance of Depth?
Using Adobe PageMill, first create a table on your page. When you click on the table icon you will get a box that looks like this.
Adobe PageMill Table Guide
To make the depth, simply put a 7, 8, or whatever number you want to work with in the box labeled "border." That's all it takes. While in PageMill you can change the size of your table by clicking on the outside edge and when you get a yellow box with "handles" in the corner, dragging the handles until you have the size you want. The HTML code automatically changes at the same time. To add an image you can drag and drop (hold down the mouse button on the image, keep it held down while you drag the image to the new location, release the mouse button) an image anywhere on the PageMill page and then drag it again into the center of the table. The table will adjust to fit the image and you are all set. You can also use the image icon in the task bar at the top of the page, but drag and drop is really much easier. If you are using a background, the border of your table will assume the same color and texture when viewed on the net.
I think it is important to remember that what you see on your PageMill creation page is not necessarily the way the completed page is going to look on the web. When I first started doing this I though I had done something wrong when the transparency didn't seem to work or the table borders didn't assume the background color while in PageMill, and I kept trying to figure out what I had done incorrectly. It was only when I uploaded the page to the net and then looked at it that I realized that it was working fine.
When selecting and saving images for your web page, be sure to save them all in the same folder. It will save you lots of time when you are ready to upload them.
Example of an Image Inside of a Table
How Do I Create A Mouse-over? Do I Even Want To Create A Mouse-over?
I admit that it took me a couple of weeks, off and on, to finally get this mouse-over stuff figured out and working correctly. However, there was a great sense of satisfaction when I finally made it work and it is a totally cool addition on your web page. Besides, knowing how to do it definitely moves you up on the respect scale with those all important critics--your children, and we are going to do the Cliff Notes version. By that I mean I am not going to try and explain why it works (good idea since I haven't a clue). Rather I hope to give you a template that you can use to make your own. Also, for those hardy among you, I will include a couple of web sites that offer good tutorials as well as explaining why they work. Below are the two images I worked with plus a sample of the finished product.
GIF images used in mouse-over
(drag your mouse across the image)
The only things you have to touch are the items I marked in red.
blue is the name I choose for my mouse-over
50, 50 is the size of my graphic. Both images must be the same size, but they don't have to be square, that just happens to be applicable to the images i choose.
image1.jpg and image2.jpg are the names I assigned to my two graphics.
To set your image size correctly you can try one of two things. You can guess and keep working with them until they look good on your page. Or, while you have your image open in Graphic Converter, look at Show Information under the Picture pull-down menu. The first item there will give you the size of your image in pixels. Simply replace the 50, 50 above with the pixel numbers for your own image. Also using Graphic Converter you can adjust two images so that they end up the same size by selecting Size from the Picture pull-down menu.
Any Java Script must be placed on your page between the <HEAD> and </HEAD> because the script is giving directions to your page as opposed to being a part of your page. If you wanted more than one mouse-over on your page you would repeat the MouseOn and MouseOff sections above with the identifiers for the new images. Keep in mind though that the more graphics you add to your page the slower it will open. Your script would look something like this.
blue1 = new Image(50, 50);
blue1.src = "image2.jpg";
red1 = new Image(250, 75);
red1.src = "image3.gif"
blue0 = new Image(50, 50);
blue0.src = "image1.jpg";
red 0 = new Image (250, 75);
red 0 = "image4.gif"
The second half of the mouse-over process goes within the body of your page. Where depends on where you want it to appear.
This is an example, and again you only have to change the parts that are in red.
My advice is just keep working with it, making subtle changes and checking it out until it works. There is no simple answer because everyone uses different locations, ways to upload, etc.
The source that I found the most helpful for all these mouse-over issues is this one:
Marty Pfeiffer sent a funny note this week that i want to share. Marty came across a 1961 ad for the IBM Selectric Typewriters. Those of us who remember when this revolutionary typewriter was introduced using a golf ball typing element, may also remember that these typewriters came in colors and the colors were used as strong selling points to sell the machines. Marty notes:
I find it interesting that IBM itself credits the color choice as a
primary factor in the Selectric's success. And here I thought IBM was all
stuffy and not at all fun... perhaps they should rename themselves iBM?
If you have any tips, suggestions, or other comments about this, or any other Mac topics, send them to me so that I can share them with other readers.
Copies of Nancy's book Tips, Hints, and Solutions for Seasoned Beginners Using Apple Macintosh Computers With OS X are available in PDF download versions for US$9.57 and in print version for $18.15 plus $4.00 shipping. To view sample pages and get ordering information visit the September 14, 2004 column.
Talking to a generation that remembers what the world was like before there was color,
covers issues for people who don't care how their computer works, but rather what their computer and the internet can do for them.
Nancy has a Master's degree in Human Services Administration and prior to her retirement she worked for almost 30 years in field of mental health and mental retardation. She has been a Mac user for 11 years, and has recently developed an avocation of teaching basic computer skills in both group and one-to-one settings.