Winter /Spring '97
The more we do, the more
we can do. -- William Hazlitt
|
Design Tips
Rhine by Design" is the
theme of this issue's Home Department.
Although there are many
complete
reference guides
on the WWW, "Rhine 4" offers layout
control tips and
tags that will help new and
seasoned web designers
create better sites. Enjoy!
Additional tips
and comments are always welcome!
|
Meta
Tags
|
META
TAGS (placed in the head of the document) are not only used
by search engines to index your site, but can also be used
to reload or refresh your page after a few seconds. This
is known as Client Pull and works well, for example, with a
splash or cover page - a spiffy page - that is briefly viewed before
the main content page.
|
Meta
Refresh Splash
|
<META NAME="Author"
CONTENT="jmick@netcom.ca">
<META NAME="Keywords"
CONTENT="Entertainment,
HTML, Games">
<!--Use absolute url
for refresh-->
<META HTTP-EQUIV="REFRESH"
Content="seconds; URL="new url">
|
Banner
Tags
|
BANNER
TAGS can not only add continuity and navigational aids to your
site, but can also cut down on loading time when the banner
tag is put on all of your pages. You can place a logo or a
navigational bar within these tags which are placed at the
top of the document within the Body.
|
| Banner Example
|
<BANNER>
<IMG SRC="logo1.gif"ALT="LOGO"
Height="100" Width="126">
</BANNER>
|
Div
Tags
|
DIV
TAGS are useful in the layout control of text, images, tables,
and more. Use this tag to align your text to the left (default),
center or to the right or when you want to change the design
of your page midway through. Place your new section within
the DIV tags.
|
See
example
at right.
|
<DIV ALIGN="Center">
Your Text
</DIV>
YOUR TEXT
<!--Can also align
graphics and text to right;
default is left-->
|
Vertical
Borders
|
VERTICAL
BACKGROUNDS can enhance a site's appearance, but, until lately,
these finicky gifs were almost impossible to find, almost as
hard to design, and finally, almost impossible to overlay with
text. Instead, you can just add color to the left column
of a two-column table which is set (for example) at "100%".
Set the left column width at "20%" to "30%" and the height to "100%"
so the stripe not only runs top to bottom, but also displays
correctly in different browsers and screen resolutions.(When using
%'s to set the table attributes, enclose in quotations.) Add
color, any color will do, to the left column and then add your
content. Set the width of the second column to "70%" or "80%",(the
combined column width of the two columns must equal"100%"),
and then add your text between the TD tags. Turn the border
width to 0 when everything is formatted and you will
now have a personalized "vertical" table.
|
| Vertical
Colored Cell
|
<TABLE BORDER=0 WIDTH="100%">
<TR>
<TD WIDTH="25%" BGCOLOR="red"
ALIGN="LEFT" VALIGN="TOP">
<!--Place your text,index, or TOC here.-->
</TD>
<TD WIDTH="75%" ALIGN=CENTER
VALIGN=TOP>
<!--Place content here.-->
</TD>
</TR>
</TABLE>
|
| More
Rhine Design Tips
|