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.
[
attachment=67][
attachment=68]
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.[
attachment=78][
attachment=79]
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.
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 [
attachment=80] from which you select "Inspect Element".
You will see similar result as in the following screenshot.
[
attachment=81]
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.
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.
[
attachment=82]
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.
[
attachment=104][
attachment=105]
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).
(03-05-2016, 06:16 AM)MarshaHal Wrote: [ -> ]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.