HTML TEMPLATES FOR PAGE LAYOUTS
Quick Copy & Paste RWD Designs
I have created several common web page HTML layout designs Templates for Webpage Designers using the HTML RWD Design Technique described on another one of my 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...
TO ILLUSTRATE RESPONSIVE DESIGN (RWD) I will present the Page Template Codes (for All TEMPLATES 1 - 5) ...Below Using RWD Coding:
Now all you need to do is Copy All the RWD 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!
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 I 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 |
TO ILLUSTRATE RESPONSIVE DESIGN (RWD) I will present the Above Page Layout Code (for TEMPLATE 1) ...Here Below Using RWD Coding:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Page Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="toprow">
<div class="col-3" style="background-color: white;text-align:center;">
Put Your Left Page Info Here
</div>
<div class="col-9" style="background-color: white;text-align:center;">
Put Your Main Page Info Here
</div>
</div>
</body>
</html>
NOTE... HOWEVER... THAT FOR THE ABOVE RWD CODE, THE FOLLOWING CSS CODE MUST ALSO BE USED (placed in the head section or on a separate style sheet):
<style>
* {
box-sizing: border-box;
}
img {
max-width: 100%;
height: auto;
}
.row:after {
content: "";
clear: both;
display: block;
}
[class*="col-"] {
float: left;
padding: 0px;
width: 95%;
margin-bottom:0em;
}
@media only screen and (min-width: 768px) {
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
</style>
IN ADDITION THE FOLLOWING VIEWPORT CODE WAS PLACED INTO THE HEAD SECTION OF THE PAGE:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
TEMPLATE #2
I used this template for this page that you are
currently viewing (showing on large screen devices) and many more of our pages!
| Put Your Top Page Info Here | |
| Put Your Left Page Info Here | Put Your Main Page Info Here |
TO ILLUSTRATE RESPONSIVE DESIGN (RWD) I will present the Above Page Layout Code (for TEMPLATE 2) ...Here Below Using RWD Coding and like all the RWD Code, you need to place the appropriate STYLE and VIEWPORT Codes into the page's HEAD Section... as referenced above:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Page Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="toprow">
<div class="col-12" style="text-align:center;">
Put Your Top Page Info Here
</div>
</div>
<div class="secondrow">
<div class="col-3" style="background-color: white;text-align:center;">
Put Your Left Page Info Here
</div>
<div class="col-9" style="background-color: white;text-align:center;">
Put Your Main Page Info Here
</div>
</div>
</body>
</html>
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 | |
TO ILLUSTRATE RESPONSIVE DESIGN (RWD) I will present the Above Page Layout Code (for TEMPLATE 3) ...Here Below Using RWD Coding and like all the RWD Code, you need to place the appropriate STYLE and VIEWPORT Codes into the page's HEAD Section... as referenced above:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Page Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="toprow">
<div class="col-12" style="text-align:center;">
Put Your Top Page Info Here
</div>
</div>
<div class="secondrow">
<div class="col-3" style="background-color: white;text-align:center;">
Put Your Left Page Info Here
</div>
<div class="col-9" style="background-color: white;text-align:center;">
Put Your Main Page Info Here
</div>
</div>
<div class="bottomrow">
<div class="col-12">
Put Your Bottom Page Info Here
</div>
</div>
</body>
</html>
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 |
TO ILLUSTRATE RESPONSIVE DESIGN (RWD) I will present the Above Page Layout Code (for TEMPLATE 4) ...Here Below Using RWD Coding and like all the RWD Code, you need to place the appropriate STYLE and VIEWPORT Codes into the page's HEAD Section... as referenced above:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Page Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="toprow">
<div class="col-12" style="text-align:center;">
Put Your Top Page Info Here
</div>
</div>
<div class="secondrow">
<div class="col-3" style="background-color: white;text-align:center;">
Put Your Left Page Info Here
</div>
<div class="col-6" style="background-color: white;text-align:center;">
Put Your Center Page Info Here
</div>
<div class="col-3">
Put Your Right Page Info Here
</div>
</div>
</body>
</html>
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 | ||
TO ILLUSTRATE RESPONSIVE DESIGN (RWD) I will present the Above Page Layout Code (for TEMPLATE 5) ...Here Below Using RWD Coding and like all the RWD Code, you need to place the appropriate STYLE and VIEWPORT Codes into the page's HEAD Section... as referenced above:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Page Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="toprow">
<div class="col-12" style="text-align:center;">
Put Your Top Page Info Here
</div>
</div>
<div class="secondrow">
<div class="col-3" style="background-color: white;text-align:center;">
Put Your Left Page Info Here
</div>
<div class="col-6" style="background-color: white;text-align:center;">
Put Your Center Page Info Here
</div>
<div class="col-3">
Put Your Right Page Info Here
</div>
</div>
<div class="bottomrow">
<div class="col-12" style="text-align:center;">
Put Your Bottom Page Info Here
</div>
</div>
</body>
</html>
Continue with help pages...use the links below...