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 5
A Page Analysis

computer     On this page we will ANALYZE How This Page (That You Are Currently Viewing) was built ... to build it we used our favorite text editor (Word Pad) and a full knowledge of HTML, CSS, Javascript Coding, as well as Responsive Web Design all of which you can learn from reading thru our Design Series Pages and visiting the Links we provide...

     First take a look at the complete HTML Source Code for this page HERE

    Now... don't be alarmed... we will explain all of it (or most of it) below, to show you how and why the Code is used... and hopefully from understanding this, you will be able to build YOUR PAGES more accurately... regardless of what Page Layout you choose, and regardless of what type of Navigation and Content you use...

     In the Start of the Code (in the HEAD SECTION) and ABOVE It... we placed all of this Code:

CLICK HERE

We won't go into Detail about all of that Code; you need to Study your HTML and learn about it... it DOES NOT SHOW ON THE WEBPAGE... but it is necessary for the page to "work" as we designed it, so that Web Browsers will render the page correctly, and so that various Search Engines (like Google) will find and display it... and so that various Code (in the Body Section... below it) will "work" correctly! NOTICE IN PARTICULAR... the Link To Our Main Style Sheet (style1.css)... which CONTROLS the Major part of all of the CSS Styling for ALL of our web site! You should STUDY CSS HERE ...

IMPORTANT: We have used the relatively new method of "Responsive Web Design" to build this (and many other pages) so that they become "Fluid" and downsize from a typical rendering in a larger screen to rendering in a relatively tiny screen (like a Smart Phone)... without changing the source code... ie using the SAME code for ALL Screen Sizes! You can read up on it Here or simply just Google for it!

     In the Top Of The Body we placed this HTML Code:

CLICK HERE

This Code employs a Server Side Include (SSI) which INSERTS a Separate Text File at that point of the Code (topdesign.txt ...containing the HTML Code we use across the top of all, or most, of our Design Series pages)... so that if we ever want to change the Code, we only need to change just that Text File (saving all the work of having to change countless numbers of pages seperately)... Here Is That Whole Text Code... you can see how it creates the Rows and Columns (which layout the page in a GRID PATTERN)! ...Please read more about SSI HERE

IMPORTANT NOTE! All of our Design Series pages have been REDESIGNED recently using The Responsive Web Page Design Technique, so that they are flexable from wide screen devices all the way down to small screen devices, like Smartphones... you can read about this Technique Here or simply just Google for it!... To check it out, try Resizing Your Browser Window to see how this page accomodates the smaller window sizes... Our Tables Design Technique can still be used if you are Not concerned with users viewing your page with Smartphones! SEE Design 6

    In that Code, you can see how we used HTML and CSS (Cascading Style Sheets) to produce the Top Section of this page... You can Study the Code and see how we placed the Google Ad Code, and how we set-up the top tab-style navigation, and especially how we used COMMENT TAGS (which do Not show up on the page) to help us keep track of various parts of the Code... You of course can put any Code that you want in the Top Section to suit your page design needs!

     Next we placed this Code:

CLICK HERE

This Code starts to address the Left Side Section (which has a WIDTH of about 25% of the total browser screen) with another SSI Include (sideone.txt ...since all of our Design Series pages have the SAME Code in this area on the page)... Here Is That Whole Text Code ...Please read more about SSI HERE

    In that Code, you can see how we used HTML and CSS (Cascading Style Sheets) to produce the Left Side Section of this page... You can Study the Code and see how we placed the Links to our other Design Series pages... You of course can put any Code that you want in the Left Side Section to suit your page design needs!

     Next we placed this Code: View Code

This Code starts to address the Right Side Section (which has a WIDTH of 75% of the total browser screen) with Content That You See Here On The Page... You can Study the Code and see how we placed the Main Content onto the page...

    This concludes our Page Analysis, 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 6" link below...

Design 4---Design 6