By adding a new menu link to point to a section or categorya. When you want to set the layout and arrangement of the Front Page contents, you change the settings of the Main Menu Home
Trang 1TTThhheee pppooow w weeerrr ooofff D D Deeessscccrrriiipppti titiooonnnsss
IIInnn ttthhheee PPPaaarrraaam m meeettteeerrrsss (((B BBaaasssiiiccc))),,, yyyooouuu cccaaannn ssseeettt D D Deeessscccrrriiipppti titiooonnn,,, D D Deeessscccrrriiipppti titiooonnn IIIm m maaagggeee,,, aaannnddd
CCCaaattteeegggooorrryyy D D Deeessscccrrriiipppti titiooonnn tttooo ssshhhooowww TTThhhiiisss mmmaaakkkeeesss aaa bbbiiiggg dddiiiffffffeeerrreeennnccceee;;; aaaftftfteeerrr aaallllll,,, iiinnn iiitttsss
sssiiimmmpppllleeesssttt fffooorrrmmm aaa LLLiiisssttt LLLaaayyyooouuuttt pppaaagggeee iiisss ppprrreeettttttyyy bbbaaarrreee BBByyy aaaddddddiiinnnggg dddeeessscccrrriiippptititiooonnnsss yyyooouuu
cccaaannn mmmaaakkkeee ttthhheee pppaaagggeee aaa llliiittttttllleee mmmooorrreee iiinnnttteeerrreeessstititinnnggg aaannnddd eeexxxppplllaaaiiinnn wwwhhhaaattt ttthhheee ssseeeccctititiooonnn
aaannnddd cccaaattteeegggooorrriiieeesss aaarrreee aaallllll aaabbbooouuuttt YYYooouuu aaadddddd dddeeessscccrrriiippptititiooonnnsss bbbyyy eeedddiiitititinnnggg ttthhheee ppprrrooopppeeerrrtititieeesss
ooofff aaa ssseeeccctititiooonnn ooorrr cccaaattteeegggooorrryyy iiitttssseeelllfff (((ttthhhrrrooouuuggghhh CCCooonnnttteeennnttt ||| SSSeeecccti titiooonnn M M Maaannnaaagggeeerrr ooorrr
CCCooonnnttteeennnttt ||| CCCaaattteeegggooorrryyy M M Maaannnaaagggeeerrr;;; ssseeeeee CCChhhaaapppttteeerrr 555 ooonnn ssseeeccctititiooonnnsss aaannnddd cccaaattteeegggooorrriiieeesss)))
TTThhheee fffooollllllooowwwiiinnnggg ssscccrrreeeeeennnssshhhooottt ssshhhooowwwsss aaa SSSeeeccctititiooonnn LLLiiisssttt LLLaaayyyooouuuttt wwwiiittthhh aaa DDDeeessscccrrriiippptititiooonnn
ooofff bbbooottthhh ttthhheee ssseeeccctititiooonnn aaannnddd ooofff ttthhheee tttwwwooo cccaaattteeegggooorrriiieeesss iiinnn iiittt AAAsss yyyooouuu cccaaannn ssseeeeee,,, aaa
dddeeessscccrrriiippptititiooonnn cccaaannn aaalllsssooo cccooonnntttaaaiiinnn pppiiiccctttuuurrreeesss
Trang 2Parameters (Advanced)
The advanced parameters give you some more control over the order of categories on a section list page
alphabetically by title, reversed alphabetically,
or in the default order that the categories have in the
Category Manager.
one of the category names This means the Article Order doesn't have
an effect on the section list page itself (which contains no articles), but on the next page
Parameters (Component)
These settings apply to the articles your visitor arrives at through this overview page The options are exactly the same you as the ones you can set in the general preferences for
articles (Article Manager | Parameters, see Tweaking the details: Changing article settings in
Chapter 6) Here you can depart from the general settings for the articles and make different choices for this particular section or category
Parameters (System)
The Parameters (System) mainly give you some more control over the display of list pages.
to add an appropriate title for your section/category page If you don't fill this in, Joomla! displays the name of the menu link that points to this page as the page title
Page Title
design (such as font size and colors) Using the Page Class Suffix, you add a suffix to the name of all CSS styles used on this page You can read more about CSS in Chapter 11 on templates
link? You can use menu images to make the menu more attractive and easier to read You can, for example, have a 'house' icon next to
the Home link.
Trang 3Using Category Lists
The Category List Layout is very similar to the Section List Layout It's a simple list, too, in this case as it features the titles of all the articles in a category A Filter box (search box) makes it easier to find content should the list of titles be very long
The Category List parameters give you some control over the list presentation
Parameters (Basic)
The Parameters (Basic) allow you to set, in some detail, what you want to be displayed on
the category page
Category Choose the category you want to show
display in the list
Table Headings Select Hide to hide the column headers (Article Title, Author, and so on)
above the table
Date Column Do you want to show or hide the Date Column (with publication dates)?
Date format By default, Joomla! displays the date as in the following example:
Wednesday, 19 August 2010 If you want to format the date differently,
enter a date format code here For example, entering the code %Y-%m-%d
will change the article date format to 2010-09-19 To find out which codes are allowed, check http://php.net/manual/en/function strftime.php
Trang 4Filter In a long list of categories (more than a few dozen) it's useful to set Filter to
Show The filter gives the visitor the possibility to search the list by entering
a keyword in the Filter box
can specify that the search filter works by author name or number of hits
Parameters (Advanced)
The Parameters (Advanced) give you some control over the order of list items and the
appearance of the list page
alphabetically, and so on By default, the items are in the same order that they have in the Article Manager
the section consists of a very long category list that doesn't fit one page
how many items they want to see on the page This option turned
on by default, but it's only useful if the list contains at least a few dozen hyperlinks
Trang 5The Parameters (Component) and the Parameters (System) of the Section List
Layout are identical to those of the Category List Layout To see the Section List
options, have a look at the previous section on Category Lists
Pop quiz – test your knowledge of home pages and overview pages
1 How can you change the arrangement of items on your home page?
a By adding new content in the Front Page Manager
b By changing the Main Menu Home link settings
c By selecting 'Display on Front Page' in the Article editor
2 How do you create an overview page?
a By adding a new article in the Article Manager
b By adding a new section or category
c By adding a new menu link to point to a section or category
3 In what cases would you choose to present content in a Blog Layout?
a Blog Layout is used strictly for web logs
b You use Blog Layout to show a row of article titles
c You use Blog Layout to show teaser texts or full articles
Summary
In this chapter, you've learned all about two types of pages that Joomla! uses to draw the visitor towards the actual content of your site: home pages and overview pages
When you want to set the layout and arrangement of the Front Page contents, you change the settings of the Main Menu Home link These allow you to determine how many introductory article texts the home page shows, and how they are laid out
When you want a completely different home page, you can choose not to use
the Front Page settings You can set any Main Menu item to be the default home page contents
To show your visitor the contents of a section or category, you'll create menu links
to section and category overview pages These provide an intermediate level
between the home page and content pages; they're like "second level home pages"
Trang 6 There are two main formats for overview pages, Blog Layout and List Layout.
The Blog Layout is more versatile and is focused on content It provides a taste of the
article content Its purpose is to lure casual surfers
The List Layout is focused on organization It shows how sections or categories are structured It helps visitors quickly scan or search for article titles on sites with lots
of related content (such as elaborate FAQ sections, or large numbers of articles in a section with product reviews) This layout enables visitors to find information quickly
in long lists of items
In the previous chapter, you've created content; in this chapter, you've focused on presenting that content (through the home page and overview pages) In the next chapter, you'll master another critical aspect of web design: creating great navigation You'll learn how to design menus that guide your visitors and help them to easily find what they're looking for
Trang 7Helping Your Visitors Find What They
Want: Managing Menus
Menus and content in Joomla! are closely intertwined In the previous chapters, you have seen that menu links don't just point to existing pages, as you might
expect if you have experience building websites the old fashioned way When
adding a menu link, you don't just tell Joomla! what page the menu link should point to, but you rather instruct it to make that page When adding content to
your site in previous chapters, you've seen how this works By creating menu
links, you created different types of pages.
However, to your visitor, Joomla! menus are no different from other website
menus To your visitor, menus should provide an easy means of navigation
In this chapter, we'll concentrate on menus as a means to navigate We'll
focus on how you can make and tweak menus to design clear and intuitive
navigation, and also on how you can help the visitors find what they want
without difficulty.
Up to now, you've added menu links using mainly the default settings Let's find out how we can enhance menus and improve the navigability of the site.
This is what you'll learn:
Adding a new menu
Creating submenus
Adjusting menu module settings
Creating hyperlinks in article texts
Trang 8How many menus can you have?
On any Joomla! website you can create as many menus as you want The default sample site that you installed in Chapter 2 is a good example as it contains no fewer than six menus
On the home page four of those are shown: the horizontal Top Menu, the Main Menu, the
Resources Menu, and the Key Concepts Menu In the backend, all of the menus are listed in
the Menu Manager (Menus | Menu Manager).
At least one menu, the Main Menu, is needed for Joomla! to function properly The
other ones, such as the Top Menu (the top horizontal menu) and the User Menu (a menu
that's only visible after users have logged in), are only there to showcase Joomla!'s menu possibilities In real life you'll probably just confuse your visitors with that amount of navigation options popping up on different pages and places
However, it's great to be able to create as many menus as you like This allows you to set
up different menus for different functions and different users You can have a main menu (at the top of the page) containing primary links, and another menu (somewhere down the page) containing secondary links You might also want to have a special menu with action links (such as Login, and Register) and another menu that's only shown to visitors who have
Trang 9Menus are modules (and why that's important)
You've already seen some examples of modules in action, such as the Poll
module Remember, modules are Joomla!'s magic building blocks that can
contain all kinds of functionality Menus are modules too In fact, every new
menu you add is a new instance of the mod_mainmenu module This makes
menus very flexible Not only can you have as many menus (menu modules) on your site as you like, but you can also tell Joomla! exactly where (on what part
of the screen, in which module position) and when (on which specific pages, for
which specific users) you want these menus to show up
Sounds confusing? Don't worry, we'll practice adding and customizing menus in this chapter—and once you get the hang of it, you'll really appreciate Joomla!'s amazing menu flexibility
Creating user-friendly navigation: Cleaning up the
Main Menu
When building a site, you'll start by adding links to the Main Menu It's the mandatory menu that is always part of the Joomla! installation, even if you don't install sample data But as your site evolves, it can become a long and cluttered list of hyperlinks Even the menu of our SRUP example site already contains eight links When you find the Main Menu gets long and messy, what options do you have to improve site navigation?
Option 1: Change the order of menu items
By default, a new menu item is added to the end of the existing menu If you were to add a
new link called New Menu Item, it would show up at the bottom:
In our example site we've haven't paid much attention to menu item order However, the order in which you add items isn't necessarily the order in which you want them to be displayed to your visitor
Trang 10Time for action – change menu item order
On the SRUP example site main menu there are eight menu items (as you've just seen in the previous screenshot) Let's move things around to present the links in a more logical order The items that we want to get most attention should be in the top half of the menu; links to less important or static content should be placed down below
1. Navigate to Menus | Main Menu.
2. In the Order column, enter numbers to reflect the desired order of menu items.
3. Click on the little disc icon on the top row of the Order column to apply the
new order
What just happened?
The menu items now show up in the order that you've chosen News and Who are SRUP?
have been moved up from their humble position On the frontend you can see that the order
of items has changed: