Today is . Page created page created 02/20/02, updated 08/28/07
More Tips & Tricks - Page 3 |
Multiple Colored Tables
B elow we shall demonstrate how easy it is to have multiple colored tables or "Borders" around some text or you can substitute images if you like.
F
irst, we will show you how to create a border effect on your tables by placing a table inside another, with the first table given a cellpading of 1 pixel and a background color of #FF0033 or Red. This has the effect of displaying a 1 pixel Red border around the inner table.
Here's an example.
|
HTML Code For Above Effect
<p><table border="0" cellpadding=1 cellspacing=0 bgcolor="#FF0033">
<tr>
<td>
<table border="0" cellpadding=10 cellspacing=0
bgcolor="#FFFFFF">
<tr>
<td>Your Text Here</td>
</tr>
</table>
</td>
</tr>
</table></p>
Multiple Colored Table Effect
|
O ne of our astute support people saw this trick, and showed us that by using layers of outer tables, we can create multi-colored border layers for a cool effect to our inner table. So, for a double-colored border, we use three tables, two outer and the main inner table, and so on. Here's an example of a triple-table that creates a dual-color border.
<p><table bgcolor="#000000" cellpadding="1" cellspacing="0" border="0">
<tr>
<td>
<table border="0" cellpadding="3" border="0" bgcolor="#000000">
<tr>
<td>
<table border="0" bgcolor="#ffffcc">
<tr>
<td>
Here is our Text!
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</p>
T his works in both IE and Netscape and offers real control over table displays without resorting to IE-specific tags of border colors. You can play with the variations of this process to get the effect you are looking for.
H ere is some cool code to get rid of that ugly dotted line that Internet Explorer places around image links when you click on them.
P
lace the above script in the <HEAD> section of your document.
onfocus='this.blur()'
Note:
IE6 has removed the dotted line all together from the browser.
SYMPTOMS
CAUSE
RESOLUTION
To work around this issue, use the HTML mail sending format:
On the Tools menu, click Options , and then click the Send tab.
Click HTML for the Mail sending format, and then click OK.
H ere is a great way to use form buttons as links to your pages, while at the same time making sure everyone can use them! This is far more browser friendly than using Javascript, so you will know that everyone can use it.
<form method="submit" action="link"><input type="submit" value="Text"></form>
R eplace "link" with the URL you want others to go to. This may be your homepage, a friend's page, or a famous website you want people to visit. It doesn't matter! The button can be as simple as "Click Here" or as descriptive as "Press Now to go to mysite.com". You can do this by changing "Text" with any word or phrase you wish to type that you think will invite others to click on the button. It's your choice, experiment with it!
Differences Between Gif And JPEG Files
D ifferent situations call for different image formats. For optimum display properties and to minimize download times, be sure to use the right format for the right job. Here are some tips:
W eb Graphics take advantage of file compression to minmize size. Both GIF and JPEG images are compressed files that significantly reduce file size. However, there are some differences that you should take into consideration.
G IF images are ideal for images with relatively few colors and little gradation. A rule of thumb to apply here is if your image has few colors and those colors don't meld into each other, then use the GIF format -- your file will be considerably smaller than a JPEG and will be much clearer.
O n the other hand, if your image is dithered (colors bleeding into one another as in a photograph), JPEG is the way to go. Mulit-color, dithered images will actually be smaller and clearer in JPEG format.
T ry a test by creating sample images in both formats and you'll soon get a feel for which format to use in which situation.
H ave you ever noticed a little blue mark (underscore) near the bottom right corner of an image? If you don't properly code hyper- linked images, visitors using Netscape will see this. But there is a simple way to get rid of the offending mark. All you have to do is place all your code on one line. For example, the code below will show the blue mark:
<A HREF="pagelink.htm">
<IMG SRC="image.jpg">
</A>
T his code will display fine in Explorer, but Netscape users won't be so lucky. To fix this glitch, place the source code on one line, like this:
<A HREF="pagelink.htm"><IMG SRC="image.jpg"></A>
I f you have Netscape available on your system, try placing both code examples on a test page and you'll see the difference. Many web-masters are unaware of this problem. In fact, we find it a good idea to code for Netscape instead of Explorer, as Explorer displays Netscape-coded pages properly, but not the other way around.
H orizontal lines <HR> are nice to use on your Web page as a way to divide it into different sections because they take almost no time to load. This is pretty easy to do, and you can make them any size you want: Play around with the tag variables to see how you can customize these lines.
Y
ou can size them by relative screen percentage, or directly with pixels. You can also change the appearance of the line itself with width and alignment.
Review the following examples:
<HR width="80%">
<HR size="5" width="300">
<HR align="left" width="100" color="yellow"> ~ ~
I
t's really quite simple, and it's a great idea to help you brand your site at the same time. If you want to change your email profile, so that your mail comes from: You at Yoursite.com, for example, here's how:
MS Outlook: Netscape: Eudora:
1. From the top menu select: Tools > Accounts
2. Select your account and click Properties
3. Change "Name" under "User Information" and click OK.
1. Click on the Edit pull-down menu and select Preferences
2. On the left column, click on the "Identity" sub-category.
1. Select Special then Configuration
2. In the box labelled Real Name, change the name to the desired.
3. Click on OK.
T his little JavaScript prompts the visitor to enter his or her name, then the script outputs that information to the browser. This is the code you can use to make this happen. And remember, using your HTML knowledge, you can always change the way JavaScripts perform their output by altering the HTML elements of the script.
Default Code
<div align="center">
<Script language="JavaScript">
document.write("<Font Face=Verdana Size=3 color=red>Hello, ");
document.write(prompt("What is your Name?","Enter Name"));
document.write(". Welcome to My Website!</font>");
</script>
</div>
Our Reconfigurations
<div align="center">
<Script language="JavaScript">
document.write("<Font Face=georgia,arial,helvetica Size=3 color=lime>Hello ");
document.write(prompt("What Is Your Name?","Enter Name"));
document.write(". To See How To Do This<br> Scroll Down To<br> \"<blink>Prompting User Input</blink>\"</font>");
</script>
</div>
A s you noticed when you entered this page, the prompt came up to ask for your name. This was done by inserting the above code anywhere in the <BODY> section of your document where you want it to appear and greet your visitors by name.
What The Different Color Codes Mean
A s you can see, the default code and our reconfigurations are quite different. The default will work perfectly well. We just added some attributes as you can see as you entered this page. If you pasted the default code on your page and it did not look anything like ours, you would wondered why.
("<Font Face=Verdana
The default uses only one Font Face (style) and that is fine but.........
("<Font Face=georgia,arial,helvetica
We used three different styles because not all computers have the single font specified. By using three different ones (font styles), if the person's computer does not have the first one, it will go to the second one, etc.
A
prime example of this would be using only the font style of " Isabella".
If you do not see the above example of Isabella font, then your computer does not have it. It should look like the below graphic:
Size=3 color=lime>Hello ");
document.write(prompt("What Is Your Name?","Enter Name"));
As you can notice the only thing we changed was the font color from red to Lime. Everything else in this section remained the same.
T
he next section is where most of the different reconfigurations come into play.
Default
document.write(". Welcome to My Website!</font>");
</script>
</div>
document.write(". To See How To Do This<br> Scroll Down To<br> \"<blink>Prompting User Input</blink>\"</font>");
</script>
</div>
<br> This is a "Break Tag". We placed this where we want to end the line of words and it will continue on the following line.
<blink></blink> These are as they say "Blink Tags" that are placed around words you want to blink. The only problem with these is that they only work with Netscape. So what we have done is added a Java script that is cross browser compatible so it will work in Netscape and Internet Explorer. Place the script between your <HEAD> & </HEAD> tags. Then use the <blink> and </blink> tags around the text
you would like to have blinking.
\"Prompting User Input\"
</font>");, This character (comma) is on the default script and we just removed it for grammar reasons. (It is not necessary within the script). Proper grammar dictates that you do not use a comma when you greet a person and then use their name and then a period (.).
I
f you have any problems with this page or with anything else, feel free to consult our [ FAQ ] and if you can't find the answer there, [ contact us ].
[ Rate This Page ]
Search Our Site By Individual letter
[ A ]
[ B ]
[ C ]
[ D ]
[ E ]
[ F ]
[ G ]
[ H ]
[ I ]
[ J-K ]
[ L ] |
Little Tips Directory [ Page 1 ] [ Page 2 ] [ Page 3 ] [ Page 4 ] [ Page 5 ] [ Page 6 ] [ Page 7 ] |
[ Index Page 1 ]
[ Index Page 2 ]
[ Index Page 3 ]
[ Index Page 4 ]
[ Index Page 5 ] [ Index Page 6 ] [ Index Page 7 ] [ Index Page 8 ] [ Index Page 9 ] [ Index Page 10 ] [ Index Page 11 ] [ Index Page 12 ] [ Index Page 13 ] [ Form Index ] [ 2001 ] [ 2002 ] [ 2003 ] [ 2004 ] [ 2005 ] [ 2006 ] [ 2007 ] [ Disclaimer ] [ News Letter Archives ]
[ Navigation Page ]
[ Archives Of Published Material ] |
If you are part of the ever growing number of webmasters who enjoy
sharing your knowledge with others on web design, join The
Consigliere Ltd. web ring to broaden your scope of exposure.
Join Today
This Site Was Built And Is Maintained Exclusively by
The Webmaster @ Consigliere Ltd.
Copyright © Consigliere Ltd., All Rights Reserved. 2001-