| |||
| |||
|
DESIGN TRICKS 1 & TIPS
|
to the left of the page address... this is our Favicon for this page! It also appears
in your Favorites folder if you Bookmark this page!There are a few ways to make Horizontal Lines for a webpage...
Use the HTML Tag <HR> with it's attributes: noshade, invertborder, align, width, size and color... NOTE: Some of these attributes are not supported on every browser! Here are some Examples with the code below each:
<hr width="50%" align="left">
<hr width="100" noshade>
<hr width="150" size="5" align="right">
Another way to make COLORED Horizontal Lines is to use a Table and use a bgcolor in the cell and to keep the cell from "collapsing" and to vary the line HEIGHT put an invisible single pixel gif in the cell and use the image attributes "width" and "height"...
 |
<table width="150" cellspacing="0" cellpadding="0" border="0"><tr><td width="150" bgcolor="green"><img src="/images/dotclear.gif" width="150" height="10"></td></tr></table>
And still another way is to use single pixel gifs of various colors which you have made and stored in your Image files...
<img src="/images/dotcolor.gif" width="?" height="?">
It's important to understand the process that takes place (in a few seconds) when you request a webpage, by typing the URL into your address box, or by clicking a link etc.
Please refer to the diagram below and read the information listed below the diagram...
- A Webpage Request is made by the Client's User Agent (Browser)... by typing the URL (Webpage Address) into the Browser's address box, or by clicking a link, etc. First the User Agent (Browser) checks to see if the Webpage URL is stored in it's Cache (Temporary Files Directory)... if it is there, the Browser loads the Webpage for viewing...
- If the URL is not Cached, the Webpage Request is passed to a local Domain Name Server, which finds the Web Host Server where the URL is located on the WWW (thru several steps)
- The local DNS passes that Host Server location back to the Client
- The Client accesses the Host Server... If that Host Server is "Up and Running" it accepts the Request and finds the URL file, if the Server is "down" the Browser renders an Error Message, or if the Webpage cannot be found on the Server, or if any other errors are found, the Server sends an Error message back to the Client's Browser...
- The Webpage Source Code is interpreted by the Host Server, and any Server-Side Scripting is processed, including Redirects, SSI Includes etc.
- The final Server Reply is passed back to the Client's Browser
- The Browser interprets the Webpage Source Code and any Client-Side Scripting is processed (like JavaScript)... and the final Webpage is rendered in the Client's Browser and is added to the Browser's Cache (unless Caching is disabled)...
NOTE: This entire process is repeated for every element on the webpage that has it's own URL... Images, Remote Stylesheets, Remote Javascripts etc. ...however a certain "keep-alive" time period is created which eliminates several of these steps for repeated Requests...
If you want to create Links within a specific IMAGE on your page...(This is called Image Mapping)...
Put these codes into your source (for "Client Side Image Maps") NOTE: Be advised that Search Engines CANNOT follow Image Map Links:
<img
src="URL of Image Here" width="?" height="?"
usemap="#mymap1" alt="image map">
<map name="mymap1">
<area shape="rect" coords="x,y,X,Y" href="URL of First Link
Here">
<area shape="rect" coords="x,y,X,Y" href="URL of Second Link
Here">
</map>
IMPORTANT: The values (x,y) are the upper left corner coordinates for where you want your LINK BOX OUTLINE to appear...and the (X,Y) are the lower right corner coordinates for the box! ["x or X" being the Horizontal cooridinate, and "y or Y" being the Vertical cooridinate]
To find these coordinates
on your Image... you can use
DRAACS IMAGE
MAPPER
You can make as many Links as you want within your image (be reasonable)...if you want to Image Map another Image on the same page you must use a different name for the new map such as "mymap2" etc.
Want to know how to link from one place on a page...to a different place on the same page...
This is called INTERNAL LINKING and is done by "naming" the link at the place where you want the link to goto...
To "name" the link, do this at the exact PLACE in the source code, where you want the link to goto:
<a name="name1"></a>
THEN make a link to that place (from anywhere else on the same page) like this:
<a href="#name1">LINK TEXT HERE</a>
IN ADDITION: You can now link to that place on the that page FROM ANY OTHER PAGE by putting a link on any other page like this:
<a href="URL of THAT PAGE#name1">LINK TEXT HERE</a>
Just add #name1 to the very end of the URL...let's say the URL is http://davmagic.com/PAGES38.html then you would write it like this:
http://davmagic.com/PAGES38.html#name1
For more links, just change the names to name2, name3 etc. but be sure to match them up correctly...remembering case sensitivety!
A simple way to change the color of your link text for a specific link is to insert the SPAN tag within the Anchor Tag and use the STYLE Attribute for the SPAN tag, to indicate a color for the text... this is called using CSS (Cascading Style Sheets) code:
<a href="URL"> <span style="color:#??????">Link Text</span></a>
A better way is to use the STYLE TAG (CSS code) and create a "class" for the specific link colors ...then assign that link to the class! So in your HEAD Section put:
<style
type="text/css">
a.myname:link { color: green } a.myname:visited { color: yellow }
</style>
Use whatever color values you want... then write your link like this in your BODY Section:
<a href="URL" class="myname">Link Text</a>
The default setting for most Browsers is to have all the text links UNDERLINED... to eliminate the underlining put this CSS code in your HEAD section:
<style
type="text/css">
a:link, a:visited {text-decoration: none}
</style>
Then if you want to CUSTOMIZE your non-underlined links, with a Custom Underline, when the mouse is over them, or in the static state or both... Read This Information
Here's our "cool" example: Mouseover This Link
If you have a one cell table with a link in it, it will look like this:
| Home |
Notice how you have to point your mouse over the link TEXT to get the link to become active...
By using a little CSS (Cascading Style Sheets) code, namely the "display" property, you can make the whole single cell table linkable... Now point your mouse anywhere in the cell below, and the link becomes active:
| Home |
Just write your link like this:
<a style="display:block" href="URL">Link Text</a>
Before we discuss real JavaScript MouseOver Effects using Images, here is a method using the STYLE TAG and CSS Coding that will give the effect of having a color change for text or background behind text when the mouse is moved over a text link:
Now put your mouse over the Dummy Link below to see the effect:
Notice how the color changes and an underline is added... Here is the code that goes into your Head Area:
<style type="text/css">
<!-- .one {color: #6699ff}
.one:hover {color:#ff9933; text-decoration:underline;}
-->
</style>
And then write your link like this:
<a class="one" href="URL">TEST LINK</a>
Find help on CSS AT THESE SITES
If you want to have a Form
Box on your page that will show information when you pass your
mouse over a link:
SEE EXAMPLE
First put this JavaScript into your HEAD section:
<script type="text/javascript">
<!-- Begin function atext(txt)
{ document.aform.atext.value = txt return true;}
// End --> </script>
Now add this Form box to your Body section where ever you want...you can change it's size by changing the variables...
<form
name="aform">
<input type="text" name= "atext" size="40" value="Put Your Text
Here">
</form>
Now write your Links like
this:
Be sure there are NO spaces within your (a
href....) tag!
<a href="URL"onMouseover='atext("Text")'target= _top>LINK</a>
If you want to have an
Image Change to another Image and then Back...when you Mouseover
and Mouseout
SEE EXAMPLE
First put this code into your HEAD section:
<script type="text/javascript">
<!--
Begin
function move_in(img_name,img_src) {
document[img_name].src=img_src;
}
function
move_out(img_name,img_src) {
document[img_name].src=img_src;
}
// End
-->
</script>
Then put this code into
your BODY section for each place where you want a mouseover effect
but be sure for each new mouseover effect to give each image a new
name...(name="button2") (name="button3")...and include that name in
the onMouseover/onMouseout tags!
Be sure there are NO spaces within your (a
href....) tag!
<a
href="URL Here" onMouseover="move_in('button','firstimg.gif')"
onMouseout="move_out('button','secondimg.gif')">
<img name="button" src="secondimg.gif" width="???"
height="???"></a>
SUBSTITUTE your own URL's for the "firstimg.gif" and "secondimg.gif" and make them the same size...
OR... you can avoid using a separate script, and make use of the browser's built-in javascript code "this.src" by writing your link like this:
<a href="url"><img src="image_1.gif" onmouseover="this.src='image_2.gif'" onmouseout="this.src='image_1.gif'" width="xxx" height="yyy" border="0" alt="Text" /></a>
If you want do do the Mouseover Image Effect that we have at the top of our Front Page NOTE: Wait for the Images to load...you can use these codes... Put this into your HEAD SECTION:
<script type="text/javascript">
<!--
Begin
var alarge = new Image();
var blarge = new Image();
var clarge = new Image();
alarge.src
= "alarge.gif";
blarge.src = "blarge.gif";
clarge.src = "clarge.gif";
function
doButtons(picimage) {
document['picture'].src=picimage;
}
// End
-->
</script>
YOU NEED TO SUBSTITUTE YOUR OWN URL's FOR "alarge.gif", "blarge.gif" and "clarge.gif" (You also need a BLANK image for "blank.gif" to use in the link code To Act As A SPACE Holder)
Now write your links like
this:
Be sure there are NO spaces within your (a
href....) tag!
<a href = "URL's Here" onMouseover= "doButtons('alarge.gif')" onMouseout = "doButtons('blank.gif')"> Link Text Here</a>
Do the same for the rest of your links but change the image URL's for each one...leave the "blank.gif" the same...
Then put this Image Code where you want the Images to SHOW:
<img name="picture" src="blank.gif" width="??" height="??" border="0">
MAKE SURE ALL YOUR IMAGES ARE THE SAME SIZE!
