TEMPLATE CONSTRUCTION - VII

[abdulkarim]

Now that we have our basic page ready for divisions (TEMPLATE CONSTRUCTION - VI), I will show you the code and its result for one sub-division in each post.

Let us go for the first split from A to B and C as shown in the following figure. In the following figure, 'A' that is in our code as 'main_page'
   

Following picture shows the division by using two

tags in index.html and their attributes described in default.css
   

[abdulkarim]

First Split of the main_page in to two parts B and C using HTML tag

       

[abdulkarim]

Let us go for the second split from C to C1 and C2 as shown in the following figure.
   

Following picture shows the division by using two

tags {C1 and C2} in index.html and their attributes described in default.css
   

[abdulkarim]

Second Split from C to C1 and C2
   

Result of second split
   

[abdulkarim]

Let us go for the third split from B to B1 and B2 as shown in the blue boxed figure on the right hand side of the following picture.

Following picture shows the division by using two

tags {B1 and B2} in index.html and their attributes described in default.css
   

The result of third split can be seen in the following picture
   

[abdulkarim]

Let us go for the fourth split from B2 to B21 and B22 as shown in the black boxed figure on the right hand side of the following picture.

Following picture also shows the division by using two

tags {B21 and B22} in index.html and their attributes described in default.css
   

The result of fourth split can be seen in the following picture
   

[abdulkarim]

Let us go for the fifth split from B21 to B21-1 and B21-2 as shown in the brown boxed figure on the right hand side of the following picture.

Following picture also shows the division by using two

tags {B21-1 and B21-2} in index.html and their attributes described in default.css
   

The result of fifth split can be seen in the following picture
   

[abdulkarim]

Let us go for the sixth split from B21-1 to B21-11 and B21-12 as shown in the green boxed figure on the right hand side of the following picture.

Following picture also shows the division by using two

tags {B21-11 and B21-12} in index.html and their attributes described in default.css
   

The result of sixth split can be seen in the following picture
   

[abdulkarim]

At this stage you should be able to construct template according to your requirement.

Now that you have your template ready, we will learn
1. How to transform a template into "A Web Page".
2. How to transform a template into "A Website"
3. How to incorporate this template in a Content Management System like Joomla, WordPress etc.

Template constructed in this way is suitable to be incorporated in any other web development system with minor modifications for adaptation into that system.

If you did not have your own template made by now, please do so before moving to some other topic. It is important that you follow procedures step by step.