DESIGN TRICKS 2 & TIPS
New
Tricks
Added Often
For More Design Tricks:
GOTO DESIGN TRICKS
1
Use our Quick Jump Menu:
 TO PAGE BOTTOM
Typing - Printing
To make business cards,
letterheads, letters, resumés, labels, fliers and more...you
simply use HTML tables to build a page (at your free Web page Host
site...such as
Angelfire)...this then configures the page
so that you
can print it out when you goto it online with your web browser and receive your business cards etc. which you can
cut out with a paper cutter if necessary (use heavier paper for
cards)... you can build a page using any text editor on your PC too... SEE Our Tutorial for more info...
It's all so simple once
you learn HTML tables, fonts, colors etc.
Just create a new page
and in the body section, build an HTML
table to produce a page of say 10 copies of business cards for
example...then print the page and there you have it! NOTE: You will have to experiment a bit
depending on WHAT PRINTER you are using!
Do the same thing on a
new page for resumés,
letterheads, labels, greeting cards, letters, fliers etc. NOTE:
You don't always have to use tables to layout the page ...for a
Flier for example you can simply
write out the whole page and adjust your font sizes and colors and
go ahead and print it! Then take it up to a 5 cent copy machine and
make copies...copy your letterheads and other documents this way
too!
You can view my page which prints out
business cards for our Magic Secrets For Sale Site... Go ahead
and print the page to see how it comes out... NOTE: It is set-up to print on a HP 1200 All-In-One Printer, so it might not print correctly on your printer...
NOTE: You will have to
fiddle around with your HTML table cells to get the printed page to
result in the correct size for your cards based on WHAT PRINTER you have... same thing is
true for letter heads etc.
There are many PC Software Programs that can be used on a PC to Print Business Cards,
Fliers etc. but using HTML is just a different way to accomplish the same thing!
For a
quick lesson on Tables
GO HERE
 GO UP TO MENU
Page Editing
Using a Text Editor on your PC to edit your HTML Documents is fairly easy and we
have written a Text Editing Tutorial to help you... Good Luck!
GO UP TO MENU
Text Highlite
Here's a CSS code using
the "style" attribute which
will add a background color to text or to just one word in a text
line!
Just put this code into the
line:
<span
style="background-color: #ffcccc">text
here</span>
Use the color name or
hexadecimal number preceeded by "#" and adjust your font color to
show over it...and don't miss the "colon" or it won't
work!
GO UP TO MENU
Transitions
For PC Users using IE
(Internet Explorer) you can add this code to your HEAD
Section, which will cause the page to open in a special way, by sliding open from the left or from the right etc. (many possibilities):
<META
http-equiv="Page-Enter"
content="revealTrans(Duration=?,Transition=?)">
Change the "?" after
"Duration" to the Number of SECONDS that you want the Transition to
last... and change the "?" after "Transition" to the Number for the
Transition EFFECT that you want from the list on THIS PAGE ...
GO UP TO MENU
Slide Shows
Want to make a SlideShow
where pics or images rotate automatically...
SEE EXAMPLE
Put this code into your
HEAD section and replace the values of image URL's with your own
values!
<SCRIPT
LANGUAGE="JavaScript">
<!--
Begin var timeDelay = 5; // change delay time in seconds
var Pix = new Array
("http://davmagic.com/images/pic/pictony.jpg"
,"http://davmagic.com/images/pic/picantiques.jpg"
,"http://davmagic.com/images/pic/picentrance.jpg"
,"http://davmagic.com/images/pic/picdog.jpg"
); var howMany = Pix.length;
timeDelay *= 1000;
var PicCurrentNum = 0;
var PicCurrent = new Image();
PicCurrent.src = Pix[PicCurrentNum];
function startPix() {
setInterval("slideshow()", timeDelay);
}
function slideshow() {
PicCurrentNum++;
if (PicCurrentNum == howMany) {
PicCurrentNum = 0;
}
PicCurrent.src = Pix[PicCurrentNum];
document["ChangingPix"].src = PicCurrent.src;}
// End -->
</script>
Now put this code into your
BODY section where you want the SlideShow to take place:
<img
name="ChangingPix" src="your pic1.jpg" width="???"
height="???">
And finally add this to
your Body Line of Code:
onLoad="startPix()"
This SlideShow should work
on all browsers with JavaScript enabled!
GO UP TO MENU
Transloading
Knowledge of TRANSLOADING
is essential with WebTv if you're building web pages...
On a Computer you would
UPLOAD files using an FTP program such as FILEZilla if you want them in your
web host files...
But since WebTv is NOT a
computer and has very little memory, you must use an online site to
TRANSLOAD files instead...
We suggest that WebTv users use Transloader.Com
which has a Help section that will tell you how to use it or try
a Search at Google for "webtv transloading"!
Use the Transloader at our
HTML UTILITIES CLICK
HERE
GO UP TO MENU
View Source
For WebTv'ers To View the Source HTML
code page for any web page...use
Our Source Viewer Page ...simply assign one of your F-Keys to Our source Viewer Page
and when you're on a web page that you want the HTML for
...just hit your preassigned F-Key for
Our Source Viewer Page and then click the button for "View HTML"!
For PC users using Windows OS... just Right Click on an OPEN PLACE
on the page... and then hit "View Source" in the window that opens... you will then get
a new window that opens in Note Pad that will show the entire HTML Source Code for that
webpage...
GO UP TO MENU
Spacing
Even if you're using Tables
to control page layout, you still need to be able to space blocks
of text or images on a page or in a table cell...
You can string out a bunch
of (non breaking spaces codes) for only horizontal
control, but a better way is to use an "invisible single pixel gif"
and place it by using the image tag and control the space by using
the attributes width and height...example:
I just inserted a spacial block 100x100 pixels aligned to the left
of this text cell and here is the code I used (note the dotclear
single pixel gif is stored at my images files):
<img
src="/images/dotclear.gif" width="100" height="100"
align="left">
To get your own gif, use: Our Image Tutorial
Another way is to use the
HTML tag <spacer> ...with it's attribute TYPE and values
Block,Horizontal(default),or Vertical.....like this:
<spacer
type="block" width="100" height="100"
align="left,right,top,bottom,middle">
OR
<spacer type="horizontal" size="75">
OR
<spacer type="vertical" size="90">
Do Not Use A Closing Tag
For This Element!
NOTE: The
W3C does not recognize this tag in HTML 4.0
GO UP TO MENU
Page Redirect
To have a user Redirected Automatically to another page is best accomplished by using a
Server Redirect via .htaccess files, rather than using the other client-side methods explained
below! For info on this please
Look Here
To have a user Redirected using the META tag in
your HEAD section... which is a client-side Redirect (ie it's done on the user's Browser):
SEE
EXAMPLE
Just add this META tag to
your HEAD section:
<meta
http-equiv="refresh" content= "10;url=http://addy of redirected
page">
Change the 10 to whatever
number of seconds you want to wait before redirect
begins!
Another client-side method using
JavaScript will redirect the user automatically without any
waiting... put this into your Head section:
<Script
language="JavaScript">
<!--
window.location="http://someplace.com";
//-->
</Script>
GO UP TO MENU
SSI
SSI....Server Side Include...Let's say for example that you
have a lot of pages that all have the same thing on them...say it's
a Table of links to your other pages. Now if you want to add to or
change that Table, you would have to go to each page and make the
change...but using SSI (IF your host server allows it to be used)
you can rename those pages to a file name ending in ( .shtml ) and
take out the Table on all of the pages and replace it with this SSI
Directive...
<!--#include virtual="page.txt" -->
Where page.txt is a new
text file that you create which has (only) the Table code on
it!
This text file should be in
the same directory as your .shtml file...now what happens is when
the browser reads the .shtml extension of your ( RENAMED ) page URL, it looks
for SSI Directives and INSERTS the page.txt file at that
position (removing the SSI Directive)...
This is of course only
possible IF your server allows it...to test it...go ahead and try
it...if it works then you are in luck and will save countless hours
of coding because you now only have to change one page (the
page.txt ) and the rest is done by your server! The idea is
obviously that you can ORIGINALLY build your pages this way and use
SSI from the get-go!
NOTE: If
you do this as a fix...don't forget to change any links that point
to those renamed pages so that they read (.shtml)...or else you'll
have a bunch of Dead Links on your hands!!!
GO UP TO MENU
Thumbnails
A Thumbnail Image is just a
smaller sized Image which when clicked on, will take you to either
the full sized Image or to any other location...
Click this Example
Thumbnail to see what I mean:
A quick way to make a
Thumbnail is to use this code:
<a href="URL Of Image Here"><img src="URL Of Image
Here" width="70" height="50"
border="0"></a>
You can use the same URL
for both tags and you can vary the values for width and
height...
But to get the Thumbnail to
load faster you really should take the original Image and Optimize it (reduce the file size) and Reduce it's overall size (height and width) and get a different URL for this Resized (Smaller)
Image and use this URL in the Image Tag in the above
code!
<a href="URL Of Image Here"><img src="URL Of Optimized Image
Here" width="70" height="50"
border="0"></a>
You can find Free Image
Sites to do this Optimization at Our Design Links Page
GO UP TO MENU
Scroll Bars
For Internet Explorer Browsers, you can Color the Scroll Bars (other Browsers will not see
these), just by adding a simple Style Code to your <head> section... you can "brighten-up" your pages:
<style type="text/css">
body, html { scrollbar-arrow-color:#0000cc;
scrollbar-face-color:#c7d0e0;
scrollbar-track-color:#e7f0fa;
scrollbar-highlight-color:#e0e7f7;
scrollbar-3dlight-color:#e0e7f7;
scrollbar-shadow-color:#6699cc;
scrollbar-darkshadow-color:#003366; }
</style>
Refer to the Image at the right...
Arrow-Color ... [red]
Face-Color ... [green]
Track-Color ... [gray]
Highlight-Color ... [lighter blue]
3DLight-Color ... [darker blue]
Shadow-Color ... [lighter brown]
Darkshadow-Color ... [darker brown]
Change the Colors to suit your page style...
GO UP TO MENU
Vertical Lines
To make Vertical Lines
there are a couple of methods...
Use a Table code and add an
invisible single pixel gif to a cell and use
the Image attributes width and height... you can COLOR the line too
by using the table data attribute "bgcolor"...
<TABLE cellspacing="0" cellpadding="0"
border="0"><TR><TD width="2" bgcolor="green"><img
src="/images/dotclear.gif" width="2"
height="150"></TD></TR></TABLE>
Another way is to use a
single pixel gif of the color you want which you have made and
saved in your Image files... use the image attributes width and
height to control the line...
<img src="/images/dotcolor.gif"
width="?" height="?">
GO UP TO MENU
Tab Navigation
To make custom designed Tab style Navigation, like the kind we use on our pages... (here are two EXAMPLES):
...You need to
Study the Technique Here and
Here ... the advantages are fantastic... cross browser compatable, and liquid for text size and resolution changes! Only three images are required for any set of tabs... You should also read
Dynamic Drive's CSS Library
GO UP TO MENU
Titles
By adding the TITLE ATTRIBUTE with a corresponding VALUE to any anchor tag,
you can cause PC Browsers to show this value text in a tiny pop-up
window (like a "tool tip") next to the link as the mouse points to it... See EXAMPLE BELOW:
The Story Of Magic Dave
And here's the code:
<a title="Our Front Page" href="/index.html">The Story Of Magic Dave</a>
GO UP TO MENU
Adding Videos
Creating and adding a Video to play on your webpage is thoroughly discussed at our VIDEO Tutorial ...enjoy!
GO UP TO MENU
Check Back Here Often For More Tricks...
For
More Design Tricks:
GOTO DESIGN TRICKS
1
And If You Have A Question
On These Tricks...
TO PAGE TOP
 Tricks 1---Images 
|