Finding Zones in Your Design
We’re going to assume you already have HTML pages that you’re ready to convert to Joomla—either from your own design or from an existing website. For this walkthrough, we’ll use our mock website, JoomlaPetCenter.com (see Figure 17-1).

Figure 17-1. The Joomla Pet Center home page
It looks like a pretty typical website with a main menu across the top of the page under the page header and a secondary menu on the left side. Under the secondary menu is a login box. The welcome message “Welcome to the Joomla Pet Center!” is in the main area of the page and below it is the footer across the bottom.
In order to start thinking like Joomla, break down your page structure into “zones.” These zones are areas that separate your content into blocks.
We’ve highlighted the following zones on the home page:
Header: The top area of the page, usually containing a logo, the site name, or other decorative elements.
Top Main Menu: Websites usually have either a horizontal navigation bar across the top, a vertical navigation bar on the left column, or a combination of both.
Left Secondary Menu: For this site, these are additional items that don’t fit in the top main menu, but on other sites it may show submenu items contained in one of the site sections.
Login Box: This is where the user logs in to the site, possibly to access special content.
Main Content Area: This is where the majority ...
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Read now
Unlock full access