Step 01: Home Page Overview
From PikaDocs
There is really no better starting point for doing a redesign of the Pika CMS interface than its Home Page. As detailed in Home Page: Deconstruct, there are three files -- index.php, default.html, and home.html -- that are the building blocks for the Home Page, as illustrated in this screenshot of a recent iteration of Pika 3.04.
Stripped of its external style sheet (http://en.wikipedia.org/wiki/Cascading_Style_Sheets) (danio.css), the same page displays its various block-level elements (http://www.w3.org/TR/REC-CSS2/visuren.html#q5) vertically in source order as the page is dynamically generated. As seen in the image below, the middle "content" area of the page (left-hand "Frequent Tasks" menu; middle "Message Board"; right-hand "Other Websites" search form fields) still retains its structured look because those page elements are embedded in a three-column table (http://www.w3.org/TR/REC-html40/struct/tables.html) dynamically generated by the home.html template.
The image offers an easy way to visualize how the block-level elements, including the table elements, display in a vertical order that matches their source order within the dynamically generated page. The relationship of the various divs (http://www.w3.org/TR/REC-html40/struct/global.html#h-7.5.4) (outlined with dashed lines) used to "wrap" the entire page and to build the various header or banner elements, the horizontal navigation at the top of the page, and the footer at the bottom of the page, ... and the table and its three td (http://www.htmldog.com/reference/htmltags/td/) elements (outlined with dark solid lines) used to build the three columns in the middle of the page -- all can be seen in structural context in this screenshot:
You may notice that, even stripped of the external style sheet, some text elements on the page still show styling, such the bold text effect on certain letters in the horizontal navigation bar, and the italicized text in the message board area.These styles persist here because they are embedded inline (http://www.w3.org/TR/REC-CSS2/visuren.html#q7) in the default.html template. As we tweak that template and others, we will in most instances simply remove these embedded styles and move them to the danio.css external style sheet.
But first things first. Our initial attention will be primarily on the default.html template that sets the structural design characteristics for both the top and bottom of the default page design used at virtually every location within Pika. After we set up the basic redesigned look to the "default" page, we will do a significant redesign of the horizontal navigation bar that is part of the default.html template. Then we'll do a major structural and design makeover for the middle "content" area of the page.
If you've read our earlier article on Home Page: No Tables, you have a pretty good idea where we're going with that part of the page. But read on, because even there we've come up with some other design changes that should interest you.
Next: Step 02: Rebuilding the Default Page Template
Related articles:
