UP


www. Teachwebdesign .Com
F.A.Q.
Layout
Tables
Navi- gation
Temp- lates
HTML Tricks1
HTML Tricks2
Images
Glossary
HTML Tools
Design QUIZ
 
Site Map
· Learn HTML

· Design 2 (Building a Page)

· Design 3 (Fine Tuning)

· Design 4 (A Sample Page)

· Design 5 (A Page Analysis)

· Design 6 (Mobile Web Pages)



Design Links
 ·HTML Tags
 
 ·Image Sites
 
 ·Validators
 
 ·Web Hosts
 
 ·Design Sites
 
 ·CSS Sites
 
 ·Javascript
 
 ·Misc Sites


Help Pages
 ·F A Q
 
 ·Page Layout
 
 ·Custom Tables
 
 ·Page Navigation
 
 ·Templates
 
 ·HTML Tricks 1
 
 ·HTML Tricks 2
 
 ·Image Help
 
 ·Glossary
 
 ·Tools
 
 ·Design Quiz
 
 ·Ask Questions


Tutorials
 ·Tutorial 1
 
 ·Tutorial 2
 
 ·Craigslist Tutorial
 
 ·eCommerce Tutorial
 
 ·Page Videos
 
 ·Form Mail
 
 ·Sound Tutorial
 

HTML TEMPLATES FOR PAGE LAYOUTS
Quick Copy & Paste Designs

    We have created several common web page HTML layout designs Templates for Webpage Designers using the Tables Design Technique described on another one of our Design Series pages. If you have not read that page, please take a moment and do it, it will simplify your understanding of these codes...

    Now all you need to do is activate your curser within the text box below the Template Example of your choice, and Copy All the HTML code, then goto your Page Editor and Paste the code into the Editor Box, then SAVE... then you can REMOVE Our Comment Text and Add Your Particular Page Content (text, images, more table codes or whatever) where you want!

    CAUTION: Using unbroken text strings OR images that are too wide for any of the table cell widths, will cause browsers to PUSH the cells open wider than you want... control text strings with the <BR> tag and control image sizes with the img tag attributes "width" and "height"...

    NOTE: You can change the value for "cellpadding" (try 5, or 7) to add some space between your cell content and the cell walls...

    You can also change the values for cell background COLORS (bgcolor="?") and the values for cell content HORIZONTAL ALIGNMENT (align="?") and VERTICAL ALIGNMENT (valign="?")...

    A Few Words On Using Pre-Made Downloadable Design Templates (available from various web sites): Unless you have a Good Working Knowledge of HTML and CSS along with Experience in using Files and Folders and Images... you should refrain from using Pre-Made Downloadable Design Templates for creating your web pages! Stick with straight forward HTML Templates, as we have provided here on this page! If on the other hand you have sufficient knowledge about Web Design, then Pre-Made Downloadable Design Templates can be a nice way to build pages! What you will get when you Download a Template is the HTML Code (for the complete page), plus all the Images that you will need for the page... It will be up to you then, to delete their content text and links, and replace them with your own, as well as set-up the paths to the Images!

    There are many, many sites that will offer you templates, both Pay and Free... here is one recommended for you to try for starters: Free Website Templates

TEMPLATE #1

Put Your Left Page Info Here Put Your Main Page Info Here

NOTE: We have set Border="1" to show you the Template but for your page you should set Border="0"

TEMPLATE #2
We used this template for this page that you are currently viewing and many more of our pages!

Put Your Top Page Info Here
Put Your Left Page Info Here Put Your Main Page Info Here

NOTE: We have set Border="1" to show you the Template but for your page you should set Border="0"

TEMPLATE #3

Put Your Top Page Info Here
Put Your Left Page Info Here Put Your Main Page Info Here
Put Your Bottom Page Info Here

NOTE: We have set Border="1" to show you the Template but for your page you should set Border="0"

TEMPLATE #4

Put Your Top Page Info Here
Put Your Left Page Info Here Put Your Center Page Info Here Put Your Right Page Info Here

NOTE: We have set Border="1" to show you the Template but for your page you should set Border="0"

TEMPLATE #5

Put Your Top Page Info Here
Put Your Left Page Info Here Put Your Center Page Info Here Put Your Right Page Info Here
Put Your Bottom Page Info Here

NOTE: We have set Border="1" to show you the Template but for your page you should set Border="0"

    CAUTION: Using unbroken text strings OR images that are too wide for any of the table cell widths, will cause browsers to PUSH the cells open wider than you want... control text strings with the <BR> tag and control image sizes with the img tag attributes "width" and "height"...