J1.5

Difference between revisions of "Design appearance using Menus and Modules: Joomla! 1.5"

From Joomla! Documentation

m (version tutorial template)
(21 intermediate revisions by 3 users not shown)
Line 1: Line 1:
{{incomplete}}
+
{{version/tutor|1.5}}{{:Getting Started Page Index/1.5}}
{{:GSheader}}
+
The aim of this document is to discuss the design of a Menus system for a new site and to introduce Modules.
The aim of this document is to introduce the design of Menus and Modules.
 
  
 
===Background to creating a new Joomla! 1.5 web site===
 
===Background to creating a new Joomla! 1.5 web site===
Line 15: Line 14:
  
 
==Overview==
 
==Overview==
*Menus are used for site navigation and are not part of the content heirachy.
+
Menus and Menu Items are used to create the main navigational links on the pages of the web site. They are '''not''' part of the content heirachy in the background. The Menus are themselves a hierachy and there can be confusions between the underlying content organisation of Sections/Categories/Articles and the hierachy of the Menus. Sometimes the Menus reflect the Sections and Categories closely. On other sites the Menus do not exactly match the content structure, so a bit of care is needed here to think about the right things.
  
 +
'''Menus''' are used for site navigation and are not part of the content heirachy. For example, the menus on the sample site are placed to the left of the main content and give a viewer a means of finding information.
  
[[Image:GSMenuSample.png|frame|center|'''The Main Menus from the Sample site''']]
+
'''Menu items''' are grouped  under the Menus and are displayed on the site page. Some sites use a few main menus and a lot of menu items. Others, such as the sample site, group things under menus and make less use of Menu Items used as sub-menus. This is a matter of style and taste; both work.
  
  
*Menu items are grouped together under the Menus and are displayed on the site page - in a position controlled by the Template and Module. Some sites use a few main menus and a lot of menu items. Others, such as the sample site, group things under menus. This is a matter of style and taste; both work.
+
[[Image:GSMenuItemSample.png|frame|center|'''An example of a menu and Menu Items from the Sample site''']]
  
 +
===Menu Manager===
  
[[Image:GSMenuItemMan.png|frame|center|'''Menus Items from the Sample site''']]
+
The Menus normally reflect the content structure, although there may be occasions when they do not. The key is to avoid muddling Categories and Menus. The Sample data is not helpful here as the list of Menu Items under the Main Menu is the same as the list of Categories. You will find sites where there are Menus that do not relate to a Category.
  
 +
Joomla! adds the Main menu to your site automatically. It already contains a Section for the Front page, so the Main Menu displays the Home page.
  
*The Menu Manager enables the creation and editing of menus.
+
Some sites stick to the Main Menu and add a heirachy of Menu Items (as sub-menus) beneath the Main Menu. Other sites use more menus, for example the Sample site uses 6 Menus, each with a few Menu Items (or sub-menus) under them.
 
 
 
 
[[Image:GSMenuManSample.png|frame|center|'''The Menu Management page from the sample site''']]
 
*The Menu Item Manager enables the creation and editing of menu items
 
 
 
  
 +
'''The Menu Manager allows the creation and editing of menus.'''
  
[[Image:GSMenuItemManSample.png|frame|center|'''The Menu Item Maagement page from the Sample site''']]
+
[[Image:GSMenuManSample.png|frame|left|'''The Menu Management page from the sample site''']]
  
Thus Menus and Menu Items are used to create the main navigational links on the pages of the web site. They are '''not''' part of the content heirachy in the background. The Menus are themselves a hierachy and there can be confusions between the underlying content organisation of Sections/Categories/Articles and the hierachy of the Menus. Sometimes the Menus reflect the Sections and Categories closely. On other sites the Menus do not exactly match the content structure, so a bit of care is needed here to think about the right things.
+
===Menu Item Manager===
  
===Menu Manager and Menu Item Manager===
+
'''The Menu Item Manager enables the creation and editing of menu items'''
The Menus normally reflect the content structure, although there may be occasions when they do not. The key is to avoid muddling Categories and Menus. The Sample data is not helpful here as the list of Menu Items under the Main Menu is the same as the list of Categories. You will find sites where there are Menus that do not relate to a Category. (cross ref if I use the example of Links in the U3A site)
 
  
Joomla! adds the Main menu to your site automatically. It already contains a Section for the Front page, so the Main Menu displays the Home page.
+
[[Image:GSMenuItemManSample.png|frame|left|'''The Menu Item Management page from the Sample site. Default means that the marked menu is the Front page of the site.''']]
  
Some sites stick to the Main Menu and add a heirachy of Menu Items (as sub-menus) beneath the Main Menu. Other sites use more menus, for example the Sample site uses 6 Menus, each with a few Menu Items (or sub-menus) under them.
+
==Design of the Menus for a new site==
  
Using the Sample web site - if you move away from the Home page, the Login Menu no longer displays. (Mildly irritating - but this can be altered).
+
Note that the position and layouts of Menus can be very varied and is controlled by the Templates controlling the deisgn of the whole web site. This section deals with the structure of the Menus. Their appearance is dealt with in the part about the appearance of the whole web site.
  
picture of menu edit on sample site
+
===Exploiting Menu Item choices for Blog, List and other layouts ===
  
====Menu Item Manager====
+
This is worth knowing about before you think about what sort of menus to have on a new site because different layouts can be exploited to make the content more approachable and attractive.
picture as menu items on sample site
 
 
 
===Exploiting the Menu Item layouts for Blogs and Lists ===
 
This is worth knowing about before you think about a site.
 
  
 
There are built-in layouts in Joomla! that take advantage of the organization of content in Sections and Categories. These make it possible to list articles that belong to Sections or Categories. When a new article is created and assigned to a Section and Category, it is automatically placed under a menu.
 
There are built-in layouts in Joomla! that take advantage of the organization of content in Sections and Categories. These make it possible to list articles that belong to Sections or Categories. When a new article is created and assigned to a Section and Category, it is automatically placed under a menu.
Line 64: Line 57:
 
*Category List
 
*Category List
  
Category Blog Layout
+
'''Category Blog Layout'''
 
 
The Home page on the Sample web site is in Blog layout. Here there is an introductory article across the page and the rest are in two columns. At the end - there is an area for links to older articles that are not listed on the page - More Articles. (This should be in the background article)
 
 
 
(see Category Blog Layout under Help clicked in the Menu Item [New] screen.
 
 
 
  
Example - sample data - blog mode for the Home page. Also uses the facility to use the whole width of the screen for the first entry. (cross ref to Help screen under - - )
+
This can give a very good layout for relatively short articles that can be viewed on the same page. News items are often done like this. The Home page on the Sample web site is in Blog layout. Here there is an introductory article across the page and the rest are in two columns. At the end - there is an area for links to older articles that are not listed on the page.
  
screen of a U3A list - here is makes good use in organising a varied site. Sometimes there are a lot of articles for one menu - others have only a few. the list handles this well.
+
There is useful further help about Category Blog Layout under Help clicked in the Menu Item [New] screen.
  
 +
'''Category List layout'''
 +
Here the articles are listed with a link. So longer articles can be displayed in this way. It is useful for accumulating a series of reports or contributions on a sinlge subject and avoids a plethora of single menu items with single articles. Sometimes there are a lot of articles for one menu - others have only a few. the list handles this well.
  
 
When you add a new Article to a Section or Category (depending on which one you have chosen), it will automatically show on the page so you do not have to do anything other than add the Article and assign it to the appropriate Section or Category. This also means that you can create Categories specifically for displaying in List or Blog mode.
 
When you add a new Article to a Section or Category (depending on which one you have chosen), it will automatically show on the page so you do not have to do anything other than add the Article and assign it to the appropriate Section or Category. This also means that you can create Categories specifically for displaying in List or Blog mode.
 
==Design of the Menus==
 
Note that the position and layouts of Menus can be very varied. This deals with the structure of the Menus. Their appearance is dealt with in the part about the appearance of the whole web site. (Cross-ref.)
 
  
 
===Plan the Menu and Menu Items===
 
===Plan the Menu and Menu Items===
  
 
:* Look at the likely Articles and Categories that the site will have
 
:* Look at the likely Articles and Categories that the site will have
:* Decide on the Menu items you want at the Top level. It is imortant to give them sensible and meaningful names.
+
:* Decide on the Menu items you want at the Top level. It is important to give them sensible and meaningful names.
 
:* Decide what sort of menu item it can be (will it be a Blog or a List or an Article for example).
 
:* Decide what sort of menu item it can be (will it be a Blog or a List or an Article for example).
 
:* Decide on any other menu items below the main items. Again they should have sensible names to indicate what is there.
 
:* Decide on any other menu items below the main items. Again they should have sensible names to indicate what is there.
:You can have quite deep structures, but users find two layers easiest to use to find things.
+
:Menu items can also be created underneath sub-menus; whether you want to do this depends on the site. You can have quite deep structures, but users find two layers easiest to use to find things.
 +
 
 
It is not difficult to alter the Menus after the site is established so this list can be seen as a starting point. No-one gets it right first time.
 
It is not difficult to alter the Menus after the site is established so this list can be seen as a starting point. No-one gets it right first time.
  
Write them down and indicate what sort of Menu, for this will be needed when you create them.
+
Write them down and indicate what sort of Menu, for this will be needed when you create them. Use names that makes sense to anyone visiting the site - an obvious point - but not always done.
  
Name the menus
+
<div style="border:thin solid black; margin-left:50px; margin-right:50px; background: #f5f5f5; width:55%">
+
:'''An example of some of the menus for a site about a club'''
Use names that makes sense to anyone visiting the site - obvious but not always done.
+
:In this example (to be further explored in creating a new web site) the Main Menu acts as the Top level with Menu Items created beneath it. And further items created beneath  the item About the Club to give two levels of menu.
The Main menu acts as the Top level for this example.
 
*Menu Items are created underneath it.
 
*Menu items can also be created underneath sub-menus; whether you want to do this depends on the site.
 
  
 
+
:{| border="1" cellpadding="2" cellspacing="0"
{| border="1" cellpadding="2" cellspacing="0"
 
 
| width="154" | '''Top level'''
 
| width="154" | '''Top level'''
 
| width="154" | '''Second level'''
 
| width="154" | '''Second level'''
Line 141: Line 125:
 
| width="266" | Article Submission layout, so that people with the right permissions can add articles
 
| width="266" | Article Submission layout, so that people with the right permissions can add articles
 
|}
 
|}
 +
 +
 +
</div>
  
 
==Modules==
 
==Modules==
Line 149: Line 136:
 
The Module Manager is found under the menu Extensions > Module Manager
 
The Module Manager is found under the menu Extensions > Module Manager
  
[[Image:GSModuleMan1.png|'''The Module Manager is selected from the menu. There is not an icon for it because it is not used as much as the other manager screens.''']]
+
:::::[[Image:GSModuleMan1.png|'''The Module Manager is selected from the menu. There is not an icon for it because it is not used as much as the other manager screens.''']]
 
*Open the Module Manager
 
*Open the Module Manager
  
:::::[[Image:GSiconHelp.png]]Module manager Help is good.
+
[[Image:GSiconHelp.png]]Module Manager Help is good.
  
'''Site Modules''' are pre-defined Modules that ship with Joomla! and are added to a site as part of the development process . They include some essential things for a new site, including:-
+
'''Site Modules''' are pre-defined Modules that ship with Joomla! and are added to a site as part of the development process.</br>
 +
They include some essential things for a new site, including:-
  
 
;Breadcrumbs
 
;Breadcrumbs
Line 160: Line 148:
 
;Login
 
;Login
 
:This provides the Login form to allow users to login into the site.
 
:This provides the Login form to allow users to login into the site.
 +
  
 
[[Image:GSModuleMan2.png|frame|center|'''Here there are several Site Modules installed. The only one that comes pre-installed is Main Menu.''']]
 
[[Image:GSModuleMan2.png|frame|center|'''Here there are several Site Modules installed. The only one that comes pre-installed is Main Menu.''']]
  
 
<div style="border:thin solid navy; margin-left:50px; margin-right:50px; background: #F0F8FF; width: 70%;">
 
<span style="color:#000080"> '''Cross Reference:''' There are more detail about these in the document about creating the site.</span>
 
</div>
 
  
 
Menu Modules are closely tied to the menu system because each Menu has its own Module. These are created automatically by the system when a new Menu is created. For example, the default in the sample data is that the main menu is assigned to the left of the page.
 
Menu Modules are closely tied to the menu system because each Menu has its own Module. These are created automatically by the system when a new Menu is created. For example, the default in the sample data is that the main menu is assigned to the left of the page.
Line 172: Line 157:
 
==Where Next?==
 
==Where Next?==
  
==Further information==
+
[[Design appearance using default Templates: Joomla! 1.5|Background: design appearance using default Templates]]
  
==Index to other documents in this series==
 
{{:GSFooter}}
 
  
 
--[[User:LornaS|Lorna Scammell]] February 2011
 
--[[User:LornaS|Lorna Scammell]] February 2011

Revision as of 10:36, 23 September 2012

The "J1.5" namespace is an archived namespace. This page contains information for a Joomla! version which is no longer supported. It exists only as a historical reference, it will not be improved and its content may be incomplete and/or contain broken links.

The aim of this document is to discuss the design of a Menus system for a new site and to introduce Modules.

Background to creating a new Joomla! 1.5 web site[edit]

Designing a Joomla! Website

There are four aspects to designing a new Joomla! web site. These also apply to planning to make alterations(including upgrading versions J1.5 to J2.5+) to an existing site or planning for transferring a site that already exists in another form into the Joomla! CMS.

  • The content hierarchy:
    • Joomla 1.5 The content hierarchy is defined as Sections with Categories. (Another way of visualising this, Sections are the labeled drawers of a filing cabinet and Categories are the file folders in each drawer.)
    • Joomla 2.5 The Sections have been removed and now the content hierarchy is Categories and Subcategories.
  • Who you expect to use the site and what you want them to be able to do
  • The layout of the menus and the position of some functionality on the page
  • The graphical design of the whole site
These should all be based on the purpose and expected content of the site, so you do need a clear idea of what you are trying to communicate and plan accordingly. Easier said than done!

Who is it written for?[edit]

Everyone: who is going to create a Joomla! site.

It will also be useful to someone who is going to alter a Joomla! site.
It is written on the assumption that you do not have experience of the structure of a Joomla! site.
It assumes that you have explored adding and altering Articles

You should already be aware of the vocabulary of Sections, Categories, Articles and Menus from other documents in this series.

Overview[edit]

Menus and Menu Items are used to create the main navigational links on the pages of the web site. They are not part of the content heirachy in the background. The Menus are themselves a hierachy and there can be confusions between the underlying content organisation of Sections/Categories/Articles and the hierachy of the Menus. Sometimes the Menus reflect the Sections and Categories closely. On other sites the Menus do not exactly match the content structure, so a bit of care is needed here to think about the right things.

Menus are used for site navigation and are not part of the content heirachy. For example, the menus on the sample site are placed to the left of the main content and give a viewer a means of finding information.

Menu items are grouped under the Menus and are displayed on the site page. Some sites use a few main menus and a lot of menu items. Others, such as the sample site, group things under menus and make less use of Menu Items used as sub-menus. This is a matter of style and taste; both work.


An example of a menu and Menu Items from the Sample site

Menu Manager[edit]

The Menus normally reflect the content structure, although there may be occasions when they do not. The key is to avoid muddling Categories and Menus. The Sample data is not helpful here as the list of Menu Items under the Main Menu is the same as the list of Categories. You will find sites where there are Menus that do not relate to a Category.

Joomla! adds the Main menu to your site automatically. It already contains a Section for the Front page, so the Main Menu displays the Home page.

Some sites stick to the Main Menu and add a heirachy of Menu Items (as sub-menus) beneath the Main Menu. Other sites use more menus, for example the Sample site uses 6 Menus, each with a few Menu Items (or sub-menus) under them.

The Menu Manager allows the creation and editing of menus.

The Menu Management page from the sample site

Menu Item Manager[edit]

The Menu Item Manager enables the creation and editing of menu items

The Menu Item Management page from the Sample site. Default means that the marked menu is the Front page of the site.

Design of the Menus for a new site[edit]

Note that the position and layouts of Menus can be very varied and is controlled by the Templates controlling the deisgn of the whole web site. This section deals with the structure of the Menus. Their appearance is dealt with in the part about the appearance of the whole web site.

Exploiting Menu Item choices for Blog, List and other layouts[edit]

This is worth knowing about before you think about what sort of menus to have on a new site because different layouts can be exploited to make the content more approachable and attractive.

There are built-in layouts in Joomla! that take advantage of the organization of content in Sections and Categories. These make it possible to list articles that belong to Sections or Categories. When a new article is created and assigned to a Section and Category, it is automatically placed under a menu.

There are:-

  • Section Blog
  • Section List
  • Category Blog
  • Category List

Category Blog Layout

This can give a very good layout for relatively short articles that can be viewed on the same page. News items are often done like this. The Home page on the Sample web site is in Blog layout. Here there is an introductory article across the page and the rest are in two columns. At the end - there is an area for links to older articles that are not listed on the page.

There is useful further help about Category Blog Layout under Help clicked in the Menu Item [New] screen.

Category List layout Here the articles are listed with a link. So longer articles can be displayed in this way. It is useful for accumulating a series of reports or contributions on a sinlge subject and avoids a plethora of single menu items with single articles. Sometimes there are a lot of articles for one menu - others have only a few. the list handles this well.

When you add a new Article to a Section or Category (depending on which one you have chosen), it will automatically show on the page so you do not have to do anything other than add the Article and assign it to the appropriate Section or Category. This also means that you can create Categories specifically for displaying in List or Blog mode.

Plan the Menu and Menu Items[edit]

  • Look at the likely Articles and Categories that the site will have
  • Decide on the Menu items you want at the Top level. It is important to give them sensible and meaningful names.
  • Decide what sort of menu item it can be (will it be a Blog or a List or an Article for example).
  • Decide on any other menu items below the main items. Again they should have sensible names to indicate what is there.
Menu items can also be created underneath sub-menus; whether you want to do this depends on the site. You can have quite deep structures, but users find two layers easiest to use to find things.

It is not difficult to alter the Menus after the site is established so this list can be seen as a starting point. No-one gets it right first time.

Write them down and indicate what sort of Menu, for this will be needed when you create them. Use names that makes sense to anyone visiting the site - an obvious point - but not always done.

An example of some of the menus for a site about a club
In this example (to be further explored in creating a new web site) the Main Menu acts as the Top level with Menu Items created beneath it. And further items created beneath the item About the Club to give two levels of menu.
Top level Second level Type and comment
Home Default blog layout
About the Club Article layout
How to join an article with suitable information
Find the club an article with a map
Subscriptions an article with the list of how much it costs
Contacts an article with a list of contacts and details
History of the Club a blog layout with READ MORE articles
Newsletters a list layout so that more than one newsletter can be seen
Add a new Article Article Submission layout, so that people with the right permissions can add articles


Modules[edit]

Modules can seem a bit of a puzzle because you do not actually see them; you just see the effect they have.

Modules are associated with the menus because Joomla! uses Modules to display content on areas of the page other than the main content area. The menus are thus displayed on particular locations on a web page through the positioing of the menu modules. However, for design and set up of a Joomla! site using the default settings from the installation, there is not much need to consider the finer points of modules. You do, however, need to appreciate that there are a number of Site Modules that can be added to enhance the functionality of the web site. To do this - use the Module Manager in the Administrator Back-end.

Using the Module Manager[edit]

The Module Manager is found under the menu Extensions > Module Manager

The Module Manager is selected from the menu. There is not an icon for it because it is not used as much as the other manager screens.
  • Open the Module Manager

GSiconHelp.pngModule Manager Help is good.

Site Modules are pre-defined Modules that ship with Joomla! and are added to a site as part of the development process.
They include some essential things for a new site, including:-

Breadcrumbs
A breadcrumb trail is a position marker which shows users where they are in the site and provides a means of navigation up to higher levels in the heirachy.
Login
This provides the Login form to allow users to login into the site.


Here there are several Site Modules installed. The only one that comes pre-installed is Main Menu.


Menu Modules are closely tied to the menu system because each Menu has its own Module. These are created automatically by the system when a new Menu is created. For example, the default in the sample data is that the main menu is assigned to the left of the page.

Where Next?[edit]

Background: design appearance using default Templates


--Lorna Scammell February 2011