Make your own free website on Tripod.com



Internet Link Exchange
Member of the Internet Link Exchange


Rhine 4 Logo
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 
[Design2] [Rhine 4] [Graphics] [Theory] [Words] [Issues]