UP


www. Teachwebdesign .Com
Design2
Design3
Design4
Design5
Design6
 
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
 

Website Design 4
A Sample Page Build

computer     On this page we will Create a SAMPLE Page For You...

     First we will Gather Our Content Information

Let's say that our page is about furniture, and we want to tell you all about some of the items that we have found in our travels, and how we describe them...

So first we get a piece of PAPER and jot down a list of all the pieces of furniture and write a little bit about each...

     Next We Draw A Sketch Of Our Page

We get a piece of PAPER and sketch out how we want the page to look... including a Top Section, a Navigation Method (to allow readers to go to more of our pages), a Main Content Section (where we will show you pictures of our furniture as well as explain a little about the pieces... and perhaps a Bottom Section (where we will give you more info on our travels, personal data etc.) NOTE: You can create any sort of sketch and Sections that you like... BUT keep in mind that you must LAYOUT the page accordingly (using HTML Tables)... so it is WISE to "keep it simple"... until you become more familiar with HTML Tables...

NOTE: What we refer to as Sections in the HTML Source Code, are actually HTML Table Cells... <td>'s

     Next We Choose An HTML Layout
for beginners we are using HTML Tables for layout
for advanced you would use RWD (Responsive Web Design)

We use our Tables Design Technique which lays out the WHOLE PAGE in a HTML TABLE... and we have chosen a TEMPLATE DESIGN (we will use TEMPLATE #3) that employs a Top Section (for a Heading), a Left Side Section (for More Links to other pages in our total collection of pages) and a Right Side Section (for the Content that shows our furniture and description text)... and A Bottom Section (for more information)...

You can View The Layout Here ... you of course can choose any other HTML Tables Layout to suit your page design needs! The best way to design a page from scratch, is to type all the Layout HTML Table Code into your text editor... then type into each Section in code, your content text, links, images etc.

     So in the Text Editor (we use Word Pad) we typed this HTML Code:

<html>
<head><title>My Page Title Here</title>
<style type="text/css">
body {color:black; background-color:white;}
a:link {color:blue;}
a:visited {color:#ccccff;}
</style>
</head>
<body>
<center>
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr><td colspan="2" width="100%" align="center" valign="top" bgcolor="white">
Put My Top Page Heading Code Here
</td></tr>
<tr><td width="25%" align="center" valign="top" bgcolor="white">
Put My Left Page Navigation Code Here
</td>
<td width="75%" align="center" valign="top" bgcolor="white">
Put My Main Furniture Page Code Here
</td></tr>
<tr>
<td colspan="2" width="100%" align="center" valign="middle" bgcolor="white">
Put My Bottom Page Code Here
</td>
</tr>
</table>
</center>
</body>
</html>

Now within that Code, you of course can put any Code that you want in the Top Section to suit your page design needs! (The same is true for all the Sections)... We will simply put <h1>Hello, Welcome To My Furniture Page</h1>

Next we placed this Code into the Left Side Section: <a href="http://davmagic.com /firstpage.html">Page One</a><hr noshade width="85%">
<a href="http://davmagic.com /secondpage.html">Page Two</a>

Next we placed this into the Right Side Section: Here are a few pictures of our Furniture...
<table width="100%" cellspacing="0" cellpadding="0" border="0"><tr><td align="center" valign="top"><img src="http://davmagic.com/images /mychair1.jpg" width="150" height="150" alt="chair"><br>A nice Chair</td><td align="center" valign="top"><img src="http://davmagic.com/images /mychair2.jpg" width="150" height="150" alt="chair2"><br>Another nice Chair</td></tr></table>

Finally we placed this code into the Bottom Section: <span style="color:red;">Thank You Very Much!</span>

     So here is the final HTML Source Code for our web page (NOTE: You of course will replace the "http://davmagic.com" with the actual URL for your site!):

<html>
<head><title>My Furniture Page</title>
<style type="text/css">
body {color:black; background-color:white;}
a:link {color:blue;}
a:visited {color:#ccccff;}
</style>
</head>
<body>
<center>
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr><td colspan="2" width="100%" align="center" valign="top" bgcolor="white">
<h1>Hello, Welcome To My Furniture Page</h1>
</td></tr>
<tr><td width="25%" align="center" valign="top" bgcolor="white">
<a href="http://davmagic.com /firstpage.html">Page One</a><hr noshade width="85%">
<a href="http://davmagic.com /secondpage.html">Page Two</a>

</td>
<td width="75%" align="center" valign="top" bgcolor="white">
Here are a few pictures of our Furniture...
<table width="100%" cellspacing="0" cellpadding="0" border="0"><tr><td align="center" valign="top"><img src="http://davmagic.com /images /mychair1.jpg" width="150" height="150" alt="chair"><br>A nice Chair</td><td align="center" valign="top"><img src="http://davmagic.com /images /mychair2.jpg" width="150" height="150" alt="chair2"><br>Another nice Chair</td></tr></table>

</td></tr>
<tr>
<td colspan="2" width="100%" align="center" valign="middle" bgcolor="white">
<span style="color:red;">Thank You Very Much!</span>
</td>
</tr>
</table>
</center>
</body>
</html>

     So here is what the page looks like in the browser (after we Saved It as an HTML Document [samplepage.html], and FTP'ed it to our own web host here at Davmagic.com): Click Here

NOTE: Of course the Navigation Links will not go to the proper place, since this is Only a Sample Page (without any other pages connected to it) ... AND the Images will NOT show since we have no images in the directory for that URL...

NOTE: You can see how we used HTML Tables to place the two Images "side by side"...

     Take some time to STUDY the CODE and learn how it works to build the page... use your Text Editor and copy the source code into it and play around a bit to see how you can change things or add things, and this will help you to understand how to build a page...

    This concludes our Sample Page discussion, and we hope that you have learned a little bit more from it, about how to Build A Webpage...

Continue with this design series...use the "Design 5" link below...

Design 3---Design 5