TEMPLATE CONSTRUCTION - The End (Layout creation for each content space)

[abdulkarim]

In TEMPLATE CONSTRUCTION - Final we have prepared particular spaces (header, latest_news, links2contents, main_content_area, footer) to show contents.    

Now is the time to create layout for each of the content space separately one by one.

Important thing to consider is to place layout information in a separate .css file for each space. That is, we should have header.css, latest_news.css, links2contents.css, main_content_area.css and footer.css. Reason: we want to keep ourselves in 'objected orientation' mode.

[abdulkarim]

As an example, visit NotJustBrowsing and explore code behind this site by using Inspect Element (in Firefox) or Inspect (in Chrome) menu item in the popup menu.

  notjustbrowsing_org_1.png (Size: 125.16 KB / Downloads: 1,168)
  notjustbrowsing_org_2.png (Size: 16.18 KB / Downloads: 1,157)
Also use View Page Source (in Firefox) or View page source on main page to see the following at the top of source display page in element of the page source.

From this example page you can see that for each of the areas in this page, style information is placed in a different file. The benefit in doing so is that these files can be re-used in other websites with a slight modification of color information. After designing couple of separate layouts, a person can have sufficient re-usable style information. See similar websites (Knowte, AIMS) to get a feeling of style re-usability.

Once you have a separate styling code for a segment of your web page, it becomes easy to just add new contents without worrying about particular layout information for that segment of the page.

[abdulkarim]

Are the links on your site helping or hindering customer effort to get where they want to go on the site or complete the task they wish to do?

Can you please be a little more specific about those links, I will be happy to fix them.

[abdulkarim]

Let us examine a space "team_member" in the template of NotJustBrowsing, as shown in the following figures.

  notjustbrowsing_org_3.png (Size: 19.23 KB / Downloads: 1,172)
  notjustbrowsing_org_5.png (Size: 43.23 KB / Downloads: 1,165)

Testing each space's layout can be done locally on your computer. For example creating a file team_member.html with the contents to see the outcome of layout specification.

Now to add another member of team, there is no need for any layout information. Only "member_name", "member_intro" and member's photo url is sufficient.

What it means is setting layout first and concentrating on the contents later throughout the life of the website. This is object oriented way of doing things.

We have done two things
1. Created a template for a website (Template Construction - I/Final)
2. Created layouts for contents within spaces created in template.

Now we are ready to move this template in to a Content Management System. To start with, we will incorporate our template in Joomla.

[abdulkarim]

Now you are ready to explore a Content Management System to transform your template into a website.

Your next step should be to import your template created in this forum into Joomla (or any other CMS).

--------------
Your Next Step
--------------