Home Page: Deconstruct

From PikaDocs

By Brian Lawlor & Mark Sawyer
Legal Services of Northern California (http://www.lsnc.net/)

The Concordance lists in summary the three files that represent the Pika default home page:

In the latest version of Pika, the index.php file is located in the Pika installation root directory. The default.html file is located in the /templates subdirectory and the home.html file is located in the /subtemplates subdirectory. The Home Page screenshot shows which file provides the code for particular parts of the page you see when navigating to the Home Page. The "display" organization of the page is a classic web design, relying on four basic sections, from top to bottom:

The contribution of the index.php file to the home-page design elements is trivial. It really only involves control of a limited amount of text, namely, the "Message Board" greeting located at line 20 immediately after the code phrase $messages_text .=; and "Home Page" and "Pika Home" in the header, at lines 35-37:

The default.html page sets the structural design characteristics for both the top and bottom of the default page design used at virtually every location within Pika. The banner/header you see on the home page is set out structurally within a DIV at lines 13-26 (appropriately enough, the DIV is identified as "header"), and includes nested DIVs for the page title and crumb trail information (lines 16-19) pulled in from the index.php page (discussed above), as well as the FORM element search box (lines 20-25) in the upper right-hand corner of the page:

The structure for the horizontal navigation bar is stated at lines 27-38:

And the various parts of the footer structure are located in the default.html file at lines 41-52:

The home.html page does the same for the "content" that makes up the heart of the home page, the three columns in the middle listing the "Frequent Tasks" navigation links on the left, the "Message Board" in the middle and the cluster of alternate search boxes listed under "Other Websites" on the right. The structural markup in home.html is 100+ lines of straightforward TABLE, P and FORM elements used to control the positioning and layout of the three columns and their corresponding "content." No real surprises or tricks there.

The final polish to the Pika default page look is accomplished by using an external style sheet. The style sheet is called danio.css and is called from within the HEAD declaration at the top of the default.html file at line 8:

---

Related articles:

• Concordance: Home Page
• Home Page: No Tables
• Screenshot: Home Page