Creative Conservative Home
Our Own HTML Primer
What Little Clip Art I've Done so Far

Web Page Design Tools



Short and Sweet

Want to jazz up your site a little, without learning a new scripting language? If you're comfortable with HTML and CSS Style sheets, here's a quick, short tip that should be compatible with both NS 4= and I.E. 4+:

If you want a quick "mouseover" effect for links, without typing all that "onmouseover=" and "onmouseout=" code into each individual link, you can use A:hover. A:hover is actuallu referred to as "pseudo" style code. It works. Who cares.

You can create a style rule to change font-sizes, background-color, text color, etc.

A:hover { background-color: #999900; color: #ffffcc }

Would give you this: Slide your mouse across here.

I.E.5, at least, supports class rules for A:hover. If the background turned green, your browser supports a style class for "hover".If you have a navigation bar of one color on one side of the page, and other links in a content part of a different color, you can use

A:hover.c2 { background-color:#RRGGBB } ( or whatever ).

When you use that class in a link, you'd do this:

<a class="c1" href="url">url</a>

Only the links you want will show that effect.

Another quick trick is:

<H3 onmouseover="this.style.letterSpacing='10px'; this.style.color='#ff3366'" onmouseout="this.style.letterSpacing='2px'; this.style.color='#999900'"></H3>

This expands the selected text when a veiwer's curser is passing over it, then contracts the text back to normal as the curser moves past. The text also flashes a different color as the mouse moves over it. Should be compatible with Netscape 4+ and I.E. 4+.

Other "onmouseover" events.

When you find a page that has effects that you like, use your default web page editor to view the code. Because so much is done by calling seperate Java scripts and CSS link pages, it's a good idea to save the page as a "Web Page Complete" or whatever your browsers equivilant of that command is.

I just found a tool to make finding buried code easier, called Microsoft Web Developer Accessories. It's at the bottom of the page. It adds a utility for reading the DOM ( Document Object Model ) properties of the page to IE's Tools menu, and has another handy tool that lets you highlight the section of a page that interests you, then access that block of code by right-clicking on it. I've been playing with it. It's really neat.

Graphics

  • Flaming Text...an online web tool for making cool logos. It also has many links for clip art, buttons and more online tools.
  • Cool Archive: thousands of beautiful icons, borders, backgrounds and buttons
  • The Matrix Vault has an extensive library of buttons, as well as tutorials on how to make your own buttons and control panels.
  • Gif Works is a free online tool (no downloading necessary) which you can use to edit any gif image, animate it, turn it into a postcard, make a banner, etc. Very easy to use.
  • Pov Ray is the Persistence Of Vision ray tracing program. Freeware, available for all platforms, Pov Ray allows you to make beautiful 3D graphics even if you can't draw a straight line.
  • Dave Central is the place to go for image converters, online tools, downloadable tools...too many thousands of great programs to mention. Both Windows and Mac platforms. Excellent site. Dave, you're my hero!

Tutorials and Script Tips

Getting Your Site Listed

  • Search Engine.com has pages and pages of great tips on how to design web pages that search engines like.

Homesteads

  • Terrashare gives you 25 MB free space, and pays you.
  • Xoom gives its members unlimited free space.

There are literally hundreds of servers who offer free web space. I suggest using a search engine like dogpile, and using the keywords "free web space".