Installation 

I installed Joomla! 1.5 using the Fantastico installer available from my web host. It is available from many web hosting services and makes installing various bits of software on your site quite easy.

I would recommend installing Joomla! with the sample data first and playing around with it to get a feel for it. Oce you decide you want to go with Joomla! then uninstall it and reinstall it without the sample data (this just leaves you with a bare skeleton). I had tried deleting the sample data, but ran into problems because it seems I also managed to delete all the online help files.

If your web host does not provice the Fantastico installer, or you choose to rough it and install it yourself, then you are on your own.

Setting up your data organization

Joomla! organizes data in a hierachical fashion Sections -> Categories -> Articles.

Sections are the top level of organization. The broad categories you see in your website. For myself, I wanted to (1) continue to blog (2) showcase my photographs, (3) share my experiences on web development, (4) showcase my writing. These form my four sections: Blog, Web Design, Photography and Writing.

All sections require at least one category, though you can have more. For me, my Blog section has a blog category, since I have no intention to categorize it any further. My photography section has three categories: (1) Albums - where I put my pictures, (2) GIMP - where I write about using GIMP for image manipulation, and (3) Articles - where I write about photography. The Web Design section has a category for Joomla! and will feature my experiences with it. I also have plans for an HTML category later on. My Writing section has a single category called Stories - perhaps, later, I will divide my writing up into different categories, but, for now, a single story category is sufficient.

You can access the Section and Category editor from the Content menu item. First add some sections, then add some categories.

Always feel free to consult the Help. It is quite well written.

To add a section or category, select the New icon.

(Clikc for larger image)

Enter a title and some optional description for the section. The section description text will be displayed when the section is displayed.

(Click for larger image)

Creating a new category is pretty much the same, except that you must assign a category to a section. For some reason, I have been unable to display the description text for a category on my website - so, I wouldn't bother entering a description, unless it is for your own edification.

(Click for larger image)

Look and Feel

Joomla! has many web templates available for it (thousands as far as I can tell) - it can be quite overwhelming. I simply stuck with the ja_purity template that comes with the default install (other templates may be included with other installations).

I like the ja_purity template because it uses what is known as a liquid layout. In a liquid layout, the width of the webpag resizes automatically to the width of your browser window. The other form of layout is a fixed width layout. - the width of the web page stays the same regardless of the width of your browser window. Typical fixed width layouts seem to be 800 pixels wide and 960 pixels wide. If you look at most web pages, they are fixed width layout (you can tell because (1) at my resolution, 1600x1200, there is empty space on the left and right side of the page, (2) when you narrow your browser windows, the layout stays exactly the same and you get a horizontal slider on the bottom of your browser window - which annoys me because most people will scroll up and down in a page, but scrolling left and right is an uncommon operation (well, at least for me).

Page Organization

Joomla! has a basic page structure that looks like this:

Not all the components need to be there on all the pages. You can choose to have content on the left or right or both sides. Your navigation (menu) can also simply be on top and have no left and right content.

Menus

To provide access to content on your website, you need to create menu entry points.

After a basic Joomla! install, you should have a Main Menu containing a Home entry.

To allow access to the various sections, categories and article you have created, you need to create menu entries for them.

Always feel free to consult the Help. It is quite well written.

 (Click for larger image)

Select the Main Menu item from the Menus menu.

 (Click for larger image)

Select Internal Link from the options avalable. This will exapand the branch offering you a large number of internal link selections.

Choose what you want to link to: a section, a category, or an article. You will likely choose category if you have only one category in a given section. For example, I have only one blog category under my blog section, so I selected Category List Layout and editted it to link to my blog category. Since I have 3 categories under my Photography section, I selected Section Layout when creating a Photography menu link. You can also choose to link directly to an article (post) - I have chosen not to do so.

 (Click for larger image)

Once you have selected a category or section link, you will get an edit screen similar to the above (this one is for section links).

Enter a title. This is what will be displayed in the Main Menu.

Then select a section from the drop down menu (or category, if you are adding a category link) to link to. This is why you have to create your sections and categories first.

Hit Apply to save the changes without exiting this screen. You can then go to your webpage and have a look at how the menu appears. You can also just hit Save to save and exit this screen.

Creating a Sub-Menu

If you have noticed, clicking on the Photography menu item on my website, you go to the Photography section, as well, the Photography menu item gets 3 sub-menus: (1) Albums, (2) GIMP, and (3) Articles.

When you are editting your menu link, you have a choice of where the menu item will occur in relation to the other menu items. This is called Parent Item. When I created the Albums, GIMP and Articles menu links, I set their parent item to be Photography - which means they get displayed under the Photography menu item when Photography is selected.

You can select select multiple parent items by holding teh CTRL key down and selecting selecting multiple parents using the mouse (left click to select).

Creating a New Menu

On my blog section, I have a list of blogs I visit. This is a menu item that I created.

Go to Menus -> Menu Manager, then select New.

This will bring you to the New Menu editor. Enter a unique name, title, and description (these are internal and will not be seen by the rest of the world).

Feel free to hover your mouse ove the blue icons for a bit more information, or consult the Help for more information.

 (Click for larger image)

Once that is done, click Save.

Next go to Extensions -> Module Manager. Select New.

You now have a whole host of new modules you can add to your website. You can consult Help for more information. Right now, just click on Menu.

 (Click for larger image)

You are now brought to the Menu Module Editor. Give your menu a title.

This is the name displayed above your menu on your website.

Select the position of your menu. Left or right would be typical.

In the Parameters box, select the Menu Name to be associated with this menu module from the drop down list (this would be the menu you created up above).

In the Menu Assignment box, select the menu items this menu will be associated with. This will determine when your menu is displayed. You can have context specific menus. For example, in my blog section, I have a menu of external links to blogs I typically visit. To do this, I checked the Select Menu Items(s) from the List radio button. I then selected Blog from the list. This restricts the list of blog links only to the blog section (well, category) of my website. I have done a similar thing with photography links in my Photography section.

Hit Apply to save the changes, but not exit this screen (a good idea, since you will want to check that your website looks the way you want it to). Hit Save to save the changes and exit this screen.

Adding Content

In Joomla! content is called Articles.

Go to Content -> Article Manager. Select New.

As usual, feel free to consult the Help if necessary.

Enter a Title for your article.

Select the section to place the article from the drop down menu. If you have multiple categories in your section, you will also need to select the category to publish the article.

Select if you wish to publish the article on the front page of your website.

In the Parameters box, you can choose the creation date for your article, the date it is to be published (nice if you want to write up a bunch of articles in advance and just have them auto-publish themselves). As well, you can set an expiry date for your article.

The editor is reasonably friendly and you can type your content in it and apply various formatting to it.

Inserting images is not obvious. There is the little tree icon in the toolbar that says Insert / edit image, but you need to know the URL to your image.

What you really want to use is the Image button at the bottom of the editor. This will bring up a dialog that allows you to select from images already on your website or to upload an image.

Image Caveats

Using images in Joomla was not as easy as I had hoped. There are a few quirks you should be aware of.

When using a fluid layout (I cannot say if this is true for fixed width layouts), you can get overlapping images / text when using multiple columns. A way around this is to make your image small. Of course, then you need to provide a link so people can view the full sized image.

1. Select the image by right clicking on it. You will know it is selected because you will see nine little squares around. Then click on the little tree icon. WARNING - ensure the top three white boxes are below the toolbar, then clicking the tree icon will bring up a blank image edit window, instead of editting the image you selected. This is annoying.
2. Select and copy the image URL.
3. Go to the appearance tab and enter a horizontal width (I use 240). There is no need to enter a vertical height.
4. Select Update.
5. Click on the little chain link icon (ensure your image is still selected before you do this).
6. Paste in the URL.
7. Select Update.

Now you have a smaller image that hopefully will not mess up your layout. You also have a hypertext link to the large size of the image.