Spring Forward Web Design

Build your own Site... Control your own Future!

Breadcrumbs

STEP 4 CONTENT 4.1 Organizing Your Website Content

4.1 Using Sections and Categories to Organize Website Content

Your website, including your Main Menu should be more than just a collection of pages and links to navigate between pages. It should be organized like the Table of Contents in a book, describing the layout of the book and the logical flow from one page to the next by organizing the page subjects into chapters (which Joomla called categories) and then organizing those categories into sections. Only AFTER designing the Structure of your website will you be ready to build your Joomla website. First you create the structure or the plan for your new house. Then you create the webpages and put them all like building blocks in the proper place in the house. In this article, we will outline how to create sections and categories which are the crucial first steps in building and organizing your website.

Understanding the Joomla Content Management System

Because Joomla is a Content Management System (CMS), it imposes a predefined structure on your page organization which in turn imposes a predefined structure on your menu system.

Joomla is therefore different than a Code editing program, such as Dreamweaver, which imposes no structure at all on your website content or your menu system. Managing the Content, which in turn organizes your menu items, can be a huge advantage if you have a large website with dozens of pages. But it can also be harder to understand because the process for building menus in Joomla is much more structured than the process in Dreamweaver.

While there is considerable flexibility in how you can display menu systems in Joomla, the methods for developing and displaying Joomla menus are not well explained either in the Help Section that comes with Joomla or in various articles published on the Internet. We will therefore try to provide a more complete explanation of how to design and build your Joomla menu system.

Website Layout: Overview of the Joomla Website Construction Process
Most articles on Joomla menus assume you have already designed the structure of your website and your menu and they merely describe the various steps for how to enact your menu design in Joomla.

The basic (surface) four steps for building a Joomla menu are:
FIRST, you write an article/webpage using the Article Manager > NEW button. The article includes a title, pictures and text.
SECOND, you create a menu item using the Menu Manager. The Menu Item is linked or attached to the article you just wrote.
THIRD, you set where the Article appears using the position function of the Menu Manager.
FOURTH, you set where the menu appears using the Module Manager.

What is typically missing from these instructions is the structure of the entire website and how the Menu Items should be linked not merely to the Articles, but also to the Categories and Sections which the article has been assigned to. Without this understanding, it is common for new web designers to have unrelated items in the same menu. Readers get in trouble because the manner in which they designed their menu is not really compatible with or consistent with the Joomla Content Management System. We will therefore start at the very beginning with a series of steps which should be considered before you write you very first article.

The first step is to consider the entire layout of your website – not merely what it will look like now, but what it might look like in the future. There are two useful analogies to help you think of website structures. The first is to imagine that building your website is like building a home. You may want to start with a simple one story, one room house. But most folks add extra rooms and extra stories onto their homes over time. You want to plan ahead by designing and building a solid foundation so that you do not need to tear down your entire home when it comes time to add that second story.

Real Website Building Work Sequence
The work sequence is of building your website is roughly the same as the articles presented on our website: springforwardwebdesign.com. First you need to set up (pay for) a web hosting account with a provider that allows a one click installation of Joomla. Then you need to set the initial configurations. Next you should download a better text editor. These steps were all covered in our section called Site Set Up.

The second set of tasks is to download the Joomla Cloudbase 2 template and creating a custom header for it. These steps were covered in the section called Site Appearance.

The third task, which is the topic of this article, is to set up the organization of the website articles and pages. Joomla uses Sections and Categories to organize your website. This same organization can and should be used to organize your menu items. This task of creating Sections and Categories for web pages is often overlooked. But is an essential step – especially if your website will eventually grow to more than 20 pages. .
In future articles, we will cover how to create the articles or web pages, organize images for each article or web page and place the articles in specific sections and categories. The final task is to create menu items for each of your articles and web pages. We recommend placing all articles in a single main horizontal menu with sections and/or categories as parents (first level) and categories and/or articles as children (second level). Once you have all your menu items set up, you need finish by grouping them all in drop down columns using your Fusion menu – which includes the ability to group articles into the same sections and categories you used to organize your articles in the first place. .

Understanding Joomla Language
Joomla divides its Content Management System into several inter-related processes. The relationships between these processes are not obvious and are not well explained in the Joomla Help section. It can thus be very confusing. So we will start out at the Administrator Log In page you see before entering the Content Management System (CMS) for your Joomla website. Enter your user name and password and click the Log In arrow to access the CMS. This takes you to the Joomla Administrator Control Panel:

There are two main areas you will use to create your Main Menu and build your website:
FIRST is the Menu Item Manager (main menu). This is the THIRD item under the Menus Tab above. It is called “Main Menu” and is NOT the same as the Menu Manager. When you click on the Main Menu button, you will see:


The above screen shows that there are 9 items in the Main Menu. The most important of these is the Home page. Note that under the second item (Joomla Overview), there is a sub-item (or child item) called “What’s New in 1.5?”. We will review how to make sub-menu items in more detail below.

You will also use the Articles Manager (which is under the Articles Tab in the top menu):


There are 20 articles displayed per page in the Article Manager. The first 13 articles are shown in the screen shot above. Note that the first article listed above is not in a section or a category. It is thus similar to the Preface or Introduction to a book which is not in any chapter. The next 10 articles in the screen shot above are in the About Joomla Section and the next 2 are in the FAQS Section. Within the About Joomla Section, there are three categories (The CMS, The Community and The Project). Each category has 2 to 5 articles.

Your website main menu is like the Table of Contents in a book.
There are several reasons to organize your website like the Table of Contents in a book. The first is that your website viewers have been reading books and magazines and newspapers all their life. They are used to seeing a Table of Contents and having the content organized into Sections and Chapters and Pages (or in the case of a Newspaper, Sections and Pages and Articles). The Main Menu should be a Table of Contents which your viewer can quickly scan through in order to understand the organization of your website and where they might be able to find a particular page or article they are interested in reading.

Another important reason is conservation of space. Unlike a book, the Main Menu will and should appear on every page to help the viewer with Site Navigation. Also modern pages often have a Header Image at the top of the screen and a Multimedia Slide Presentation near the top of the screen. In order to provide more room for content and images in the Content section of your webpage, the use of Main Menus in the Side Bar is declining. The Main Menu therefore is now commonly inserted as a Horizontal Menu between the Header and the Main Content Area. You therefore do not want the Main Menu to take up a lot of room or be too much of a distraction to the reader. The way to show all 44 articles in a limited amount of space is use a Horizontal “Drop Down Menu” in which all that appears on the opening screen are the SECTIONS. The categories and articles are hidden until the viewer points their cursor over the section. This displays the categories. Pointing the cursor over the categories displays the articles.

Since there is only room for about9 tabs in a horizontal menu, and since the Home Page and Contact page are usually listed in this top menu, you will need to limit your number of sections to about 7 sections. (Alternately, if you have a smaller number of pages, you can just display up to 7 CATEGORIES and hide the articles as children of their categories.

Imagine you are writing a 60 page book. You may start out by just writing the first 4 pages. But over time, the book might grow into 60 or more pages. You should plan ahead so that you do not need to re-write the entire book just because you are adding extra pages and even extra chapters.

You do not want you Table of Contents to be merely 60 randomly entered Page Titles. Instead, you should organize your book into Chapters so that there are three to five pages per chapter. These Chapters in turn should be organized into Sections such that there are two to six chapters per section. So your 60 page book might have 12 chapters each with 5 pages. These 12 chapters could then be organized into 3 sections each with 4 chapters.

Like with a book, it is not necessary that there be the same number of pages in each chapter. Nor does there need to be the same number of chapters in each section. But if you have more than 8 pages in your chapter, you should consider splitting your big chapter into two smaller chapters each with 4 pages (assuming you want to display direct links to all pages in your main menu). Also if you have 8 or fewer pages, you can simply have all of them in a single chapter which is in a single section of your book.

Using our book analogy, the Joomla name for pages in the book is Articles, the Joomla name for Chapters in the book is Categories and the Joomla name for Sections of the book is Sections:

Book Name >>> Joomla Name
Pages >>> Articles
Chapters >>> Categories
Sections >>> Sections
Book Title >>> Main Menu (also called Top, or Top level)

The Table of Contents for the default content that comes with Joomla begins like the following:

Book Title: Joomla Website

Table of Contents

SECTION ONE: ABOUT JOOMLA … Web Page #

Chapter One (Category One): The CMS
Joomla Overview ……… 1
What’s New in 1.5? 2
Extensions 3
Joomla Features 4
Content Layouts 5

Chapter Two (Category Two): The Community
Joomla Facts 6
The Joomla Community 7

Chapter Three (Category Three): The Project
Support and Documentation 8
Joomla License Guidelines 9
Platforms and Open Standards 10

SECTION TWO: FAQS

Chapter Four (Section Two, Category One): Current Users
Where did the installers go? ….11
What happened to the locale setting? 12

There is an unfortunate tendency to head straight to the Menu Manager to try to create your menu. But the first thing to know about Menus is that they are creating links to actual pages. You first need to write some pages before you use the Menu Manager create your links.

This leads to the second unfortunate tendency which is to start writing articles. This leads to a very poorly organized website. To use the house building analogy, you should not start building a house by constructing a bunch of rooms and hoping they will fit together. Instead, you first need to design a PLAN for the House and write this plan down on paper.

In Joomla, there are three levels to this plan. The first level is the SECTIONS. The second level is the CATEGORIES. And the third level includes the actual ARTICLES. So you begin your house plan (or your book) by defining some SECTIONS. We will next show how this is done.

STEP ONE: CREATE YOUR JOOMLA SECTION & CATEGORY STRUCTURE
Copy an original Word document to create an original website working document.
For example, let’s say you have a source document which is about 12 pages long and consists of a combination of text and 12 images. Break your source document into a series of one subject articles that are about one page in length. Some can be two pages and others can be a half page, but the main thing is to have a series of smaller pages, rather than a single big long page. You would therefore have about 12 web pages of Articles each with one or more images in your source document (thus far, nothing has been added to Joomla).

One of the many purposes of a Joomla website is to help you organize the structure of your pages. This is why Joomla is called a Content Management System (CMS). With all Joomla websites, Web pages are called Articles, which are organized into Categories which are then organized into Sections. Thus, for long documents, the entire source document (all the information on your website) is a Section. This will be broken down into one to four categories each of which includes one or more articles.

The Complete Organizational Chart of the Website is:
Articles are in >> Categories which are in >> Sections.

Below is a diagram of the relationship between sections, categories and articles:

For example, if you have a 12 page WORD source document, which holds all the content of your website and all of the images and video files for your website and all of the forms for your website, then you can have three sections, each with two categories (for a total of 6 categories) and each category would have 2 articles or web pages. If you have fewer web pages, then simply use fewer sections and categories. For example, if you have 6 articles, then you might only have 2 sections and each section might only have one category and each category might only have three articles. If you only have four pages, then you will only need one section and one category. All 4 articles would fit in this category and section. However, think about future additions to your website. If you know you will be adding a bunch of articles in the future on a particular topic, then go ahead and create a section and category for these future articles now. It is like having an extra bedroom in your house so it will be there for if and when you need it.

Try to make these decisions before you ever open the Joomla Administrator page and get them written down on a Table of Contents for your website just as if you were writing a book.

Example One: A Basic Table of Website Sections and Categories

After you create a Main Menu which matches the Content Structure above, the Main Menu for your website would then look like the following:

Front Page l Why Topic is Important l Solutions l Plan of Action l Contact Us

Each SECTION link on the Main Menu above would then lead to a sub-menu with the categories and pages lists on the sub-menus. For example, the sub-menu for the section Possible Solutions would include links to three articles, Options 1, 2 and 3. Sub-menus can also be displayed directly in Joomla as hidden “drop down” menu items.

You can always change and expand your Website Article Structure later. But get something down on paper at the beginning. When you are done organizing your articles into categories and sections, then log onto the administrative page of your website. Enter your User Name and Password to reach the Joomla Administrator Control Panel.

Example Two: springforwardwebdesign.com
The Spring Forward Web Design site has seven categories. Hovering or click on these 7 categories reveals the associated Articles in each category.

Thus, the Table of Contents for the Joomla articles in the springforwardwebdesign.com website looks like the following:

Section: Joomla (7 categories) (34 Articles so far)

Category #1: Site Start Up (4 Articles)
1.1 Why Choose Joomla for your website?
1.2 Seven Steps for Building a Joomla Website
1.3 Getting your Domain Name and Web Hosting
1.4 Installing Joomla on your website

Category #2: Site Set Up (4 articles)
2.1 Joomla Administrator Control Panel
2.2 Joomla Global Configurations
2.3 Adding Joomla Extensions
2.4 Installing and Using the Joomla CK Editor

Category #3: Site Appearance (5 Articles)
3.1 Benefits of the Cloudbase 2 Grid 960 Template
3.2 Installing the Cloudbase 2 Template
3.3 Creating a Custom Header for your Template
3.4 Fine Tuning the Appearance of your Template
3.5 Configuring the Layout of your Template

Category #4: Site Content (6 Articles)
4.1 Using Sections and Categories to Organize Site Content
4.2 Writing Joomla Articles
4.3 Organizing Images in Article Folders on Your Home Computer
4.4 Transmitting Article Images to the Server
4.5 Posting your Article to your Website
4.6 Transferring Images back to your Web Article

Category #5: Site Structure (7 Articles)
5.1 Making a New Menu Item
5.2 Using the Joomla Menu Manager
5.3 Building your Joomla Menu System
5.4 Adding an Expandable Menu
5.5 Configuring your Expandable Menu
5.6 Loading Modules into your Menu
5.7 Changing the Appearance of your Expandable Menu

Category #6: Site Components (4 Articles)
6.1 Uploading Multiple Images to your Website
6.2 Adding a Slide Show to your Joomla Website
6.3 Adding Video to your Website
6.4 Watch this Video

Category #7: Social Networking (5 Articles)
7.1 Adding a Contact Us Feedback Form
7.2 Adding a Petition
7.3 Adding a Joomla Forum
7.4 Adding an Enewsletter
7.5 Adding a Blog

The numbers are not shown in the Menu Items. But they are a way to organize the sections (#), categories (#) and articles (#) on my home computer.

The following is how the above plan was translated into the Springforwardwebdesign.com expandable menu:


Example Three: Wapublicbank.org Joomla Sections and Categories
Imagine the Website as a Book with the Front Page as the first section or introduction
Describing the Problem is usually the second section (and sometimes the third section)
Describing the Solution is Usually the next section(s)
Taking Action (including links and petitions) is usually the final section

The Sections can appear as separate side menus. But these may interfere with reading the web pages. The more modern approach is to use have a MAIN Horizontal Menu just below the header listing the SECTIONS, with the categories listed under the Sections and the pages appearing when each category is “rolled over.” Alternately in simply websites with just two levels, the Section/Categories are the same and the pages appear below the main menu items.

Below are examples of how this works. Keep in mind that websites are always a work in progress and evolve over time. They are like a book that is constantly being re-written and updated and expanded. The key is to have a flexible structure which will work initially when there are only a few pages. But can also be used over time when there may be 100 or more pages:

The above structure has 6 essential menu items in the top menu. The minimum in a Main Menu is 4 and the maximum is about 8. Often the home section only has one category. But I think this group will need at least four. The maximum number of categories is about 8. Each category may have up to 10 articles. So the maximum number of pages this structure can support is 8 times 8 times 10 or 640 pages. With an average of 10 images per page, this would be 6,400 images. If you go beyond this, you probably should split the website into two websites with links between them.

Follow the format of first describing the problem, then describing the solution and then having a Take Action section. Because Joomla requires organization of Sections and Categories before even writing our first article, we will use the following initial structure:

Section 1: NEWS…
Categories
1. Front Page Only Articles
2. Legislative Bills and Updates
3. Organization Building News
4. Links to Pennsylvania sight AND Ellen Brown (also see the LINKS Section)

Section 2: Mega Bank Problems
Categories
1 Bank Options and Differences
How Mega Banks are different from local community banks or a State Public Bank
Definition
Different types
How public bank
How public banking differs

2 Money Creation
The Federal Reserve definition
The Federal Reserve and The Bond Market
The Federal Reserve and The Banks

3 Derivatives: A Cause of the Problem
Definition
Derivatives worldwide
Derivatives and States/Counties/cities/schools
How Public Banking differs

SECTION 3: Public Bank Benefits
Definition…How Public Banking differs from a Private Mega Bank
North Dakota
Washington State what it would mean
Worldwide

SECTION 4: FAQ
Forum
Additional Resources
Links

SECTION 5: Public Bank Newsletter
2011, 2012, by month, etc.

SECTION 6: Take Action
What you can do

Here is how the above structure of sections and categories was translated into the website’s main menu:

Hopefully, the above examples have given you a good idea of how to create the sections and categories for your website. In the next section, we will review how to take the sections and categories you have created and enter them into the Joomla CMS.

STEP TWO: CREATING YOUR NEW SECTIONS
The process of building your website begins with the creation of new sections. If you have the “default” content installed on Joomla, you have to begin by deleting all of the articles you do not want to keep. Only after deleting as many articles as possible, Joomla then allows you to delete any Categories which do not have articles. You can then delete any Sections which do not have Categories.

Building your new website is just the reverse. First you create sections, then attach categories to sections, then place articles inside of categories.

To create a new section, log into the Joomla Administration back end:

Then in the Top Menu, click on CONTENT, SECTION MANAGER:

You can see that I have already deleted all but three sections. I can’t delete these three sections because each still has articles in it. When your team has finished reading the About Joomla Articles, you can delete them, delete the categories they are in and delete the section called “about joomla.” We will keep and use the other two sections and add four more to get:

Section 1: NEWS…
Section 2: Mega Bank Problems
SECTION 3: Public Bank Benefits
SECTION 4: FAQ
SECTION 5: Public Bank Newsletter
SECTION 6: Take Action


To create a new section, in the Section Manager, click on the green “NEW” button in the upper right corner. This will take you to the SECTION (NEW) screen.

Simply type in the title of your new section (Joomla will create an ALIAS). It is okay to use capitals and spaces. Then click on SAVE. Joomla will automatically create a file name for this section and do all the background computer coding. Name the section whatever name will want to appear in the Main Menu of your website. Click the APPLY or SAVE buttons to save your new section.

After adding all four new sections and putting them in the right order with the green ranking arrows, this is what the section page now looks like:

It is not actually necessary to have the sections in the right order, but it does help remind you of the structure of your website.

How many sections does your website need?
If you only have 7 pages, or 7 articles, there is obviously no need for multiple sections or categories. You only need one section and one category. You then place the 7 articles all in the same category and the same section. The Main Menu would then be a single level menu in which the 7 articles are all displayed on the horizontal menu. There would be no hidden drop down items. Thus, a single level menu has no sub-menu items.

If you have under 30 pages, there is no need for different sections. You place up to 5 articles in up to 6 categories which are all in the same section. The 6 categories are shown on the horizontal menu and the articles are shown as drop down items when the cursor is pointed at the categories. This is called a two level drop down menu. It has one main level with some sub-menu items (up to 35 items) which are hidden on a second level.

If you have more than 30 articles, you will need a second section and your horizontal menu will show a combination of sections and categories with at least some of the tabs dropping down to a third level submenu to reveal articles. This is a three level drop down menu with some items hidden on the second level and some menu items (links to articles) hidden on the third level. If you had 6 sections, each with 5 categories, each with up to 5 articles, you could have as many as 150 articles on your Main Horizontal Drop Down Menu. If you have more articles than this (such as if you are doing a blog), you will need to add secondary menus. But for now, we will assume you have fewer than 150 articles or pages which you want to list in your Main Menu.

STEP THREE: CREATING YOUR NEW CATEGORIES
Once you have defined some sections, you are ready to create your categories. This is done by going to the Category Manager which is under the Content Tab. Here are some of the categories used to organize the default Joomla Content (I have already deleted some).



We will now add some categories to the sections we just created. Organizing your articles like this will make it easier later on to create what Joomla calls Section blogs and category blogs.

To create a new category, click on the Green NEW button. This will take you to the CATEGORY (NEW) screen. Here you need to do TWO things. First, type in a Title. And second in the SECTION: click on the drop down arrow to choose which Section the new category will be placed:

This is why the first step in building a Joomla Website is defining sections. It is because you need some existing sections in which to place your categories. The sections are like the foundation of the house. The categories are like the floors in the House. And the articles are like the rooms. To build your house, you first need to build the foundation, then the floors and finally place the rooms inside the floors. If you want to make a major addition to you house later, you again build more foundation (another section). Then put more floors on the new foundation (more categories), then add more rooms (more articles). You can also add more floors as long as you do not exceed five floors (or categories) per foundation (or section). You can also add more rooms on each floor as long as you do not exceed 5 rooms per floor (or 5 articles per category). When writing articles, these also should be placed in sections and categories. So the Sections and Categories should be defined before writing articles. You can always change the sections and categories your articles are in later. But you will need at least one section and one category in which to place your articles. It is okay to have only one category per section. But it is not possible to have a category without having a section to put it in.

We will now add some categories to the sections we just created. Organizing your articles like this will make it easier later on to create what Joomla calls Section blogs and category blogs.

Section 1: NEWS… Categories
Front Page Only Articles
Legislation Bills and Updates
Organization Building News
Links to Pennsylvania sight AND Ellen Brown (also see the LINKS Section)

Section 2: Mega Bank Problems Categories
Bank Options and Differences
Money Creation
Derivatives : A Cause of the Problem

SECTION 3: Public Bank Benefits Categories
General
North Dakota
Washington State
Worldwide

SECTION 4: FAQ Categories
Forum
Resources
Links

SECTION 5: Public Bank Newsletter Categories
2011
2012

SECTION 6: Take Action Categories
Petitions
Contact Us
About Us

You can use capitals and spaced for the category names but also remember to put each category in the correct section! Then click on SAVE.

After adding in all 18 categories, you will now have lots of choices for putting your articles in as you write them. But this is why Joomla is called a Content Management System – or CMS. It is because the structure of Joomla helps you organize the articles/content of your website right from the very beginning.

Below is how the Category Manager now looks. You can add or delete categories and sections whenever you want - as long as you first delete or more any articles which are in any categories and then more or delete any categories which are in any sections.

Now when you create a new article/new webpage you will have a category and section to place the article in.

Now that we have our sections and categories all set, in the next article we will describe how to turn your articles into web pages.