TEMPLATE CONSTRUCTION - Final

[abdulkarim]

Now that we have required template (skeleton), we will proceed with the preparations before adding actual contents.

In this part, we will identify particular spaces of our template with user friendly names. In our template we have seven spaces and we named them by "header", "top_menu", "slide_show", "latest_news", "links2contents", "main_content_area" and "footer".

In the following pictures code and its result can be seen. Addition of div tags at desired places in "index.html", definitions of those tags in "default.css" and result in browser. Names of the div areas in the second picture are superimposed on picture for clarity.
       

[abdulkarim]

Now the task is to clean-up template, by applying a consistent color scheme, adjustment to background and minor tweaks to make our template balanced looking.

This can all be done without actually changing any style parameters in any .css file.

The following two screenshots are taken after applying one consistent color to some div's.        

In next post, I will show you how to achieve your desired result without editing any of your existing files i.e., index.html or default.css.

[abdulkarim]

Open your index.html file in a browser (I am using FireFox), you will see your template that you created in previous steps.

Consider those colored rectangles as elements of your web page. Place cursor of your mouse into any of the colored rectangles and press right mouse button. A pop up menu will appear     from which you select "Inspect Element".
You will see similar result as in the following screenshot.
   

These screenshots are taken after changing of colors of different elements. Try to achieve similar result by changing color values at the bottom right of the screen.

[abdulkarim]

Mouse click on to any property (at the bottom right in) of the selected element and try to change it. You will see immediate result of that change.

   

[abdulkarim]

The last step of the Template Construction - Final is to update your default.css file according to the values you changed during on the fly re-coloring of your template.

  template_construction_stage_8_8.png (Size: 154.54 KB / Downloads: 1,051)
  template_construction_stage_8_9.png (Size: 41.32 KB / Downloads: 1,060)
And now is the time to test your template on different browsers and different devices/screens. You may upload your files/directories on to a free hosting area on the web and test load it using different devices (mobile/tablets etc.) and different web browsers (Firefox, Chrome, IE, Opera etc.). In case of any problem in viewing on any browser/device, fix it here.

You must be satisfied at this stage that your template looks good on each browser/device before moving on to the next stage (i.e., populating your template with contents).

[abdulkarim]

I would recommend fixing your main content cell height.

That should have been done in TEMPLATE CONSTRUCTION - I at Stage 1.

Advice is, not to go forward if you are not satisfied at a particular step.