Page Guidelines: Bars, Bullets & Buttons
Perhaps the trickiest thing to tastefully pull off on a web page are the infamous bars, bullets, and buttons. It is a constant struggle to use these three items on a web page and not be tacky, clip-arty, or old fashioned looking. They are, however, a necessity to organize any web page. To use any of the bars, bullets, or buttons below, copy the red HTML code below the item and paste it into your HTML documents where necessary.
Bars
In most cases, very basic bars are the best way to go for a University web page, and our examples reflect that. If you want to create your own bars, please be sure to use care and use the color guide. Animated and multi-colored bars are generally a bad idea since they tend to distract the viewer from the information that you are trying to convey.
<HR>
<HR WIDTH=80%> The width is settable to any percentage of the page width.
<HR WIDTH=350> The width is also settable to any positive number (integer).
<HR NOSHADE>
<HR SIZE=5> The size is settable to any small positive number (integer).
<HR SIZE=5 WIDTH=80% NOSHADE> Combine the settings!
Bullets
 |
|
Example of Bullets
|
Bullets are an excellent way to list information or bring a little attention to something. If you have a list of links, use some bullets to enliven the page. Animated bullets should be avoided since they can be distracting.
The recommended bullet for University pages is a square. The colors presented are based on the Color Guidelines. To use any of the bullets, copy the red HTML code and past it into your web page. To reduce your maintenance tasks, please do not download the images to your web area.
<IMG HEIGHT=6 WIDTH=6 BORDER=0 SRC="/images/bullets/squareblue.gif">
<IMG HEIGHT=6 WIDTH=6 BORDER=0 SRC="/images/bullets/squaremaroon.gif">
<IMG HEIGHT=6 WIDTH=6 BORDER=0 SRC="/images/bullets/squareorange.gif">
<IMG HEIGHT=6 WIDTH=6 BORDER=0 SRC="/images/bullets/squarekhaki.gif">
If none of these bullets work well with your page, you can download the Adobe Photoshop file, replace the color with yours, and save the bullet to your web area. You may also design your own bullets as long as they follow the color guide recommendations.
You can also use the bullets that are provided with HTML lists.
Buttons
Buttons are an easy and attractive way to add some interest to your navigation cluster. Be careful not to get too many buttons, though, or your page's download time will increase dramatically. Always use GIF images for buttons since they do not require great color depth. JavaScript mouse-overs are a good way to draw attention to a button, but use them wisely so that they do not become distracting. If possible, use a font that characterizes your department or organization field or expertise. Just keep in mind when you are choosing a font, to make sure it is clean, readable, and reflective of a University web page.
If you have any questions about bars, bullets, and buttons for University web pages, please send an email to the Webmaster or call 570-372-4348.
