By now you've read my bio and know that I tend to keep to the technical aspects of web development. That includes, HTML, PHP, CSS, Javascript and anything else not art. This series of articles will help give a better understanding of the build process and the intricacies of web building.
The web build for apt2 labs took about 1 week to complete. That is, one week after agreeing upon a design. It took us a good month, if not longer to agree upon typography, layout, and color. We mocked up about 5 different designs and compared them, tweaked them, and threw the bad ones out.
For me, the first place to start is the Joomla! installation. Don't know what Joomla is? Their website defines it as:
Joomla is an award-winning content management system (CMS), which enables you to build Web sites and powerful online applications. Many aspects, including its ease-of-use and extensibility, have made Joomla the most popular Web site software available. Best of all, Joomla is an open source solution that is freely available to everyone. Source
and defines a CMS as:
A content management system is software that keeps track of every piece of content on your Web site, much like your local public library keeps track of books and stores them. Content can be simple text, photos, music, video, documents, or just about anything you can think of. A major advantage of using a CMS is that it requires almost no technical skill or knowledge to manage. Since the CMS manages all your content, you don't have to. Source
After the Joomla installation its time to get started on our custom template.
The most basic page, and the structure upon which a web page is built is HTML. Joomla is a dynamic system that requires a dynamic language and although HTML is not dynamic the template page must be saved as a ".php" web page. Be sure to include the correct DOCTYPE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>">
Before I begin writing my HTML I study the design and mark the divisions that need to be defined.
The breakdown is pretty intuitive. There are 4 major "div" breakdowns are: Top_Nav, Banner, Content, and Footer. The Coding for these parts are as such:
<body>
<div id="top_nav" class="top_nav"></div>
<div id="banner" class"banner"></div>
<div id="content_wrap" class="content_wrap"></div>
<div id="footer" class="footer"></div>
</body>
I decided to put all the content within its own div to make it easier to keep the page order.
Let's take a closer look at the content div and what it included. (Many of the divs and tags are created by the Joomla CMS and we'll need to add code that wil call for the joomla content, but we'll save that for another post.) The content section is divided into 2 distinct columns. The left column, which holds the main content and the right column that holds related content.
To keep these two separate they will need to have their own divisions.
<div id="leftcol" class="leftcol"></div>
<div id="rightcol" class="rightcol"></div>
Content that belongs with the left column will be placed with the "leftcol" div tags and that which belongs in the right column is placed with in the "rightcol" div tags.
As you've probably noticed we're giving these div's names: leftcol, rightcol. This is so we can target specific div's with css styling.(CSS tricks and tips as used on our site will be in another post)
The best trick to keep content ordered properly is the use of clear divs, which will be explained more in the css style post, but for now know that these divs are written in the same fashion:
<div class="clear"></div>
These div's, though, do not contain any content. They are styled as such to keep higher divs above and lower divs below when rendering.
Next Post: Creating the Joomla Template XML for apt2labs.com
What are some of your favorite least used HTML tags?
