F r e e l a n c e W e b m a s t e r &I T C o n s u l t a n t

e Wa l l z S o l u t i o n s

w w w . e w a l l z s o l u t i o n s . c o . c c

Joomla! Training Manual

Introd uction: Joomla! is an on line content management system that keeps track of all content on your website including text, images, links, and documents. This manual includes several tutorials to teach the client some basic content management skills on Joomla!, including updating text, uploading images, building menus, and creating links. Please note that Joomla! is an extensive system and this document only covers basic operation. To learn more about Joomla!'s advanced functionality, please visit the documentation section of www.Joomla.org.

Table of Contents: asic !verview #. $ogging #nto Joomla! ##. %rticle &anager '. !verview ". )reating an %rticle (. +diting and +xisting %rticle *. -yperlinks in an %rticle ,. /ploading and 0isplaying #mages ###. &enu &anager '. !verview ". )reating a &enu #tem (. +diting an +xisting &enu #tem #2. &odule &anager '. !verview ". )reating a &odule #tem (. +diting an +xisting &odule #tem 2. 3" - Not Included '. !verview ". &enu (. &odules 2#. 4TP with 4ile5illa - Not Included '. !verview ". Transferring 4iles (. 6ote about 4ile Paths (" (" (( "' "" "( ', '. '1 '' '" '( ( * , . 1 " "

August 25, 2010

Page 1 of 34

Joomla! Training Manual

Overview 4or content management, Joomla! divides into two basic components7 the %rticle &anager and the &enu &anager. Article Manager is the place you will make changes to each individual page on your site. -ere you can change the text on your pages, upload images, or add links. It is important to remember that all content changes will take place in the Article Manager. Menu Manager is where you make changes to the navigation menus of the website. %ll your menus can be edited here. It is important to remember that all navigation changes will take place in the Menu Manager.

I. Logging In to Joomla! #n order to make changes to your website using the Joomla! )ontent &anagement 8ystem, you must access the administrative portion of the website. The administrative section is where all site maintenance and development takes place. #n order to access this portion of your site, you need to type a special web address into the address bar of your browser7

1. Type the address www.yoursitesname.com/administrator into your web browser. 9:yoursitesname; should be replaced by the name of the website you are editing.<

. 8ince the administrative portion of the website is where important and irreversible changes take place, you need a user name and password to access it. +nter your user name and password when prompted to do so. Note: only users with Administrative Access can access this section. !nce you successfully login to the administrative section of your website,
August 25, 2010 Page 2 of 34

Joomla! Training Manual

you will see the %dministrator )ontrol Panel. 4rom this page, you will access the %rticle &anager and &enu &anager to make your content changes.

6otice that you can access the %rticle &anager and the &enu &anager from the large icons on this screen. =ou can also always find the %rticle and &enu &anagers in the top bar under the headings Menus and Content.

II. Article Manager 1. Overview The %rticle &anager is the place to make changes to the content on each individual web page. +ach content page is called an Article, and you will have a separate Article for each page on your site. 4rom here, you can add text, links, images, and whatever else you might want to the content portion of your web site. !n the top bar menu, drag your mouse over Content. >hen the drop down menu appears, click on the Article Manager.

The %rticle &anager has two areas to be concerned with, the Article Manager Menu and the List o Articles. #n the Article Manager Menu, there are several buttons that are essential to understand, and some that are not. The essential buttons are marked in bold below.

August 25, 2010

Page 3 of 34

Joomla! Training Manual

1. !n"arc#ive$Arc#ive: %ot necessar& to understand for basic use. . Publish/Un-publish: Ma'es t#e selected article visible ()ublis#ed* or not visible (un)ublis#ed* on t#e front end web site. +. Move7 6ot necessary to understand for basic use. ,. Copy: Ma'es a new article t#at is a co)& of an e-isting selected article. To co)& an article. first select it b& c#ec'ing t#e bo- ne-t to t#e article title in t#e List of Articles. t#en clic' co)& on t#e Article Manager Menu. 5. Trash: /eletes a selected article. To delete an article. first select it b& c#ec'ing t#e bo- ne-t to t#e article title in t#e List of Articles. t#en clic' delete on t#e Article Manager Menu. 6. Edit: O)ens a selected article for content editing. (%ote: Articles can also be edited by clicking directly on their na e in the Article !ist.* ". #e$: Creates a brand new article item. %. !arameters: 6ot necessary to understand for basic use. &. 'elp: Clic' for on line #el) regarding t#e Article Manager.

. Creating a %ew Article

'. !n the %rticle &anager &enu, click the New button. ". efore you do anything else, you must give your article a title, an alias, and a section.

#n the title box, give your article a good name such as "#ome
!age$. =our article also needs an alias. >e recommend using the same name as your title.

8et the article's section to "%n&categori'ed$ &ake sure the article is set to !ublished and the category is
August 25, 2010 Page 4 of 34

Joomla! Training Manual

set to %n&categori'ed$

#f the article is going to appear on the main front page of the

site, set 4ront Page to (es) otherwise, leave it at No.

(. )lick the *ave button located on the top menu.

+. 0diting an 0-isting Article #n this tutorial the basic functions of the )ontent &anagement 8ystem 9)&8< +ditor will be outlined. The )&8 +ditor is the tool you will use to edit the content of your articles including text, images, and links. #n the %rticle &anager, click on the title of an article that you would like to edit. !n the next screen, you should see a large text area box with this tool bar at the top7

This tool bar contains a number of ways you can manipulate the content of your article. 8ome of them should look familiar to you, such as the bold, italic, underline and ?ustification buttons at the top left of the tool bar. !ther tools will re@uire an explanation7 1t&les /ro) /own Menu " This dropAdown menu is for making headings on your article. To make text appear as a main heading, set this box to #eading +. To make the text
August 25, 2010 Page 5 of 34

Joomla! Training Manual

appear as a secondary heading, set this box to #eading ,. Note: #eadings are prede ined by MM- .echnology. 2ont 2amil& /ro) /own Menu 3 This menu is used to choose the font family. The default font is %rial, but there are several options to choose from. Insert $ 0dit Image 4utton 3 This button will allow you to insert and edit images. 98ee '., #mages< Add $ 5emove 6&)erlin' 3 These buttons are used to add, edit, and remove hyper links. Please see the #yperlinks in an Article section for more information on the use of these buttons. 4ullets $ %umbering 4utton 3 These buttons allow you to put bulleted points or numbered lists on your article. !ndo $ 5edo 3 #f you make a mistake that you do not like, click the %ndo button to return to the previous state, canceling the changes that were made. C#ange 2ont Color 3 This button allows you to specify a font color for your text. 6ori7ontal 5ule 3 This button places a horiBontal divider on your article.

8our Turn... )lick in the field located below the tool bar and type something. >hatever you type in here will appear on your web page. =ou will also learn to put pictures and links in here to make things more attractive. Play around with the different buttons in the tool bar to get a feel for how the )&8 editor works.

,. 6&)erlin's in an Article Creating a 6&)erlin' " #n Joomla!, inserting hyper links into your web content is easy. 4ollow these steps7 '. -ighlight the text that you wish to make into a link by clicking and dragging7

August 25, 2010

Page 6 of 34

Joomla! Training Manual

". )lick on the #nsertC+dit -yperlink button on the )&8 Tool bar. (. #n the %/L box, type the full web address of the page you want to link to7 0-am)le: http://www.yourhyperlink.com/sectiona

6ote7 :-TTP7CC; is D+E/#D+0 for the link to work properly. *. #n the .itle box, type the title of the web site you are linking to. ,. #n the .arget drop down, choose behavior of the link. >e recommend links to other websites always open up in a new window. .. )lick Insert.

/eleting a 6&)erlin' " To delete a hyper link, place the cursor somewhere in the middle of the link by singleAclicking. Then, push the 0elete #yperlink button located on the toolbar in the second row from the top, seventh from the left.

August 25, 2010

Page 7 of 34

Joomla! Training Manual

9. !)loading and /is)la&ing Images #llustrating your articles with images is a good way to make them more attractive and informative at the same time. #n order to place images on the web in your article, there are two steps that must be completed. 4irst, the image must be uploaded to the web. This is followed by actually placing the image in your article. oth of these functions are completed with the )&8 +ditor in the %rticle &anager. Note about image ile si'es: #t is important that you check the file siBe of the image and make sure it is not too large before uploading. !ften times the images taken directly from digital cameras are too large for web display, so be sure to ad?ust the file siBe to 'FF 3 or less using photo editing software. Note about image pi1el si'es: =our image will always display best by resiBing it to the siBe you want +4!D+ uploading it. Taking a large image and resiBing it once it is in the browser will often cause it to look grainy or distorted. %lways use an image editor before uploading to make sure your image is the right siBe and @uality. 9This is not outlined in the manual.< !)loading Images " 1. !pen up the %rticle you wish to put an image in. . #n the tool bar at the top of the )&8 +ditor window, click on the #mage button.

+. #n the middle rightAhand side of the #mage +ditor window, there are three small buttons in a row. )lick on the middle button to upload an image.

August 25, 2010

Page 8 of 34

Joomla! Training Manual

,. #n the menu that appears, click Add 2ile. 8elect as many images as you wish to upload, then click %pload.

Adding an Image to an Article " !nce the image is uploaded, insert it into an article. 1. &ove the blinking cursor to where you want to put the image in your

article and click on the same Image button you initially clicked on when
August 25, 2010 Page 9 of 34

Joomla! Training Manual

you uploaded the file. . #n the directory at the bottom of the screen, find your image and click on it. +. %ll images need a description and a title. This is entered in the Alternate .e1t field. >e recommend a complete description of the image. ,. 8et the alignment to your preference. 9. )lick the Insert button located at the bottom of the window.

2urt#er Mani)ulating 0-isting Images " 8ometimes, images need further manipulation for correct viewing. 1. )lick once on the existing image in the article to select it. . !n the tool bar at the top of the )&8 editor, click the Image icon . +. #n the #mage +ditor box that appears, you can further manipulate your image. =ou can set the space between your image and the surrounding material with the Top, Dight, ottom, and $eft margin fields. Try setting each of these to 'F 9pixels<. ,. =ou can also ad?ust the alignment of the image in the frame, and the dimensions of the image. 98ee note on image siBes at beginning of the Images section in this tutorial<.

August 25, 2010

Page 10 of 34

Joomla! Training Manual

III. Menu Manager 1. Overview " The &enu &anager is where the navigation for the website is built. The navigation is the system of menus on the top and left hand side of the page that will let the user navigate through all the different Articles. The &enu &anager is grouped by individual menus, and in each one of these groups there is a list of Menu Items, or the individual links that will appear on the navigation.

A. 0rag your mouse pointer over the Menus label on the top bar navigation as pictured. #n the drop down menu, you can see each separate menu grouping on the site. )licking on one will produce a list of each individual menu item located on the menu. )lick on Main Menu.

August 25, 2010

Page 11 of 34

Joomla! Training Manual

4. #n the Main Menu section, you will see a list of items on the left side of the page. These are the various &enu #tems, or links that will appear on the &ain &enu navigation. %t the top right of the frame, you will see a list of actions you can take on these &enu #tems. To keep things intuitive, the buttons are similar to those in the %rticle &anager. 4or an explanation of what these buttons do, consult the %rticle &anager !verview on page four of the manual.

. Creating a Menu Item " #n order to make menus for your website, you have to decide what pages 9%rticles< the menus should link to. +ach one of the links is called a &enu #tem. 4or this tutorial, make sure you are in the Main Menu group of the &enu &anager. A. )lick the New button at the top left of the &enu &anager.

4. 6ext, you must select what your &enu #tem will be linking to. )lick the Articles tab and then Article Layout. This will always be the proper choice to select as long as you are linking to one of your %rticles.
August 25, 2010 Page 12 of 34

Joomla! Training Manual

C. Give your &enu #tem a name in the Name field, and an alias in the Alias field..

/. =ou will also need to specify which %rticle the menu will link to. 0o this by clicking the *elect Article button on the !arameters tab. 0. !nce this is completed, click 8ave. #f you take a look on your public website, you should see the new menu item on the &ain &enu of the site, linking to your content item.

+. 0diting an 0-isting Menu Item " #t is possible to edit all the attributes of existing &enu #tems as well. This is done by simply clicking on the name of the &enu #tem in the &enu &anager. The same interface appears as explained when creating a new &enu #tem

August 25, 2010

Page 13 of 34

Joomla! Training Manual

There are several options for editing and customiBing &enu #tems7 0isplay #n H This drop down menu specifies which &enu the &enu #tem will be displayed in. Parent #tem H The Parent #tem box will specify any subAmenus that exist. #t is possible to create a &enu #tem as a subAheading under another &enu #tem. This can create a nice, multiAtiered navigation structure. Published H This specifies whether or not the &enu #tem will be visible on the frontAend page.

.he other options in this window are not necessary to be amiliar with or basic use.

August 25, 2010

Page 14 of 34

Joomla! Training Manual

I:. Module Manager 1. Overview " The &odule &anager allows you to place content in areas other than the article section of your website. =ou can use the &odule &anager to add content above your articles, to the sides of your articles and below your articles. The &odule &anager allows you to place specialiBed miniA applications such as a 4acebook :$ike; button, general content and -T&$ code snippets into any module position on the template that your website is using.

A. 0rag your mouse pointer over the 31tensions label on the top bar navigation as pictured. #n the drop down menu, you can see the various extensions that you can manage. )lick on Module Manager.

August 25, 2010

Page 15 of 34

Joomla! Training Manual

4. #n the Module Manager section, you will see a list of items on the left side of the page. These are the various &odule #tems, or links are installed for your website. %t the top right of the frame, you will see a list of actions you can take on these &odule #tems. To keep things intuitive, the buttons are similar to those in the %rticle &anager. 4or an explanation of what these buttons do, consult the %rticle &anager !verview on page four of the manual. . Creating a Module Item " A. )lick the New button at the top left of the &enu &anager.

August 25, 2010

Page 16 of 34

Joomla! Training Manual

4. 6ext, you must select what type of &odule you will be creating. 6ormally you will be creating a Custom #.ML module. The Custom #.ML &odule allows you to create your own -T&$ module using a >=8#>=G editor. )lick on Custom #.ML 4or click on the small circle next to Custom #.ML and press N35.<.

C. Give your &odule #tem a name in the .itle field. /. )hoose if you want to show the T#T$+ of your module on the website 0. )hoose if you want the new module +6% $+0 9meaning do you want to display the content in it on the website< 2. )hoose which module P!8#T#!6 you want the module to be
August 25, 2010 Page 17 of 34

Joomla! Training Manual

displayed in. 6!T+ A 4or a visual indication of the module positions available to choose from enter the url of your website in your web browser followed by :CItpJ'; 9ie. #tt):$$www.m&website.com$;t)<1< =. )hoose the !D0+D you want the module to be in 9modules listed above this module will appear above it in the position you selected and modules listed below this module will appear below it in the position you selected<. 6. )hoose the %))+88 $+2+$. >ho do you want to make this content available tooI 6ormally you will choose P/ $#), meaning that anyone can see the content. I. )hoose the &enu9s< that you want the module to appear on. =ou can select the ALL button to display the module on all pages, the N6N3 button to display the module on no pages or the *3L3C. M3N% I.3M4*7 2/6M .#3 LI*. to pick the individual pages you want the module to appear on.

J. +nter the content for the module in the >=8#>=G editor >. )lick on 8%2+ to save the module

+. 0diting an 0-isting Module Item " #t is possible to edit almost all the attributes of existing &odule #tems as well. This is done by simply clicking on the name of the &odule #tem in the &odule &anager. The same interface appears as explained when creating a new &odule #tem. There are several options for editing and customiBing &enu #tems7 0isplay #n H This drop down menu specifies which &enu the &enu #tem will be displayed in.

August 25, 2010

Page 18 of 34

Joomla! Training Manual

Parent #tem H The Parent #tem box will specify any subAmenus that exist. #t is possible to create a &enu #tem as a subAheading under another &enu #tem. This can create a nice, multiAtiered navigation structure. Published H This specifies whether or not the &enu #tem will be visible on the frontAend page.

August 25, 2010

Page 19 of 34