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,313)
  notjustbrowsing_org_2.png (Size: 16.18 KB / Downloads: 1,282)
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.