Preparing the HTML and CSS

Now that we’ve determined the structure of our pages, let’s take a look at the structure itself, shown in Figure 17-2.

Joomla Pet Center home page zones

Figure 17-2. Joomla Pet Center home page zones

There are plenty of philosophies on how you’d code a page in HTML and this isn’t the right book to explain that. However, it’s always a good practice to use CSS and separate your page structure markup from your presentation markup. Using our previous structure, we start by creating a simple PHP file containing a DIV for each zone, which might look like:

<html>
<head>My test page</head>
<body>
<div id="container">
    <div id="header">This is where my header will go</div>
    <div id="main-menu">This is where my main menu will go</div>
    <div id="content-area">This is where my content area will go</div>
    <div id="second-menu">This is where my secondary menu will go</div>
    <div id="login">This is where my login box will go</div>
    <div id="footer">This is where my footer will go</div>
</div>
</body>
</html>

There’s an outer DIV “container” added there to enclose all of the zones marked by their own DIVs. Now, create a stylesheet (often named template.css) and add styles for each of those DIVs. For example:

#container {width: 900px;]
#main-menu (width: 200px;}
#content-area {width:700px;}
#login {width 200px;}

While this CSS code is only the beginning of your design, it defines the widths of the ...

Get Using Joomla now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial