J1.5

Difference between revisions of "The mechanics of creating a Joomla! 1.5 web site"

From Joomla! Documentation

(147 intermediate revisions by 3 users not shown)
Line 1: Line 1:
{{:GSheader}}
+
{{version/tutor|1.5}}{{:Getting Started Page Index/1.5}}
 +
It is one of a series of documents introducing Joomla! 1.5 and is the last of five documents about designing and creating a new web site.
  
This page is about the mechanics of creating a new web site using Joomla! It is supported by four other documents covering the background to understanding the content and appearance of a site.
+
The aim of this document is:-
 
+
:* to set up the 'no frills' web site using Joomla! 1.5
The aim of this document is to:-
 
* help you to set up a 'no frills' site
 
* be useful to someone altering an existing site
 
* to demonstrate how to create new Sections, Categories and Menus
 
* to demonstrate how to include a couple of Site Modules
 
  
 
===Who is it written for?===
 
===Who is it written for?===
Line 14: Line 10:
  
 
===Introduction===
 
===Introduction===
There are four pages with essential background information which are aimed at helping you to understand what is going on, whether you are going to create a new site or update an existing one. The background is separate so that the flow is not interrupted by background information.
+
There are five 'background' pages with essential information about different aspects of designing a site. The background is separated so that the flow of creating the site is not interrupted by asides. The documents are all aimed at helping you to understand what is going on, whether you have a large or a small site.
  
:#[[How to use the Administrator Back-end|Background: get to know the Back-end]]
+
:#[[Get to know  the Administrator Back-end of Joomla! 1.5|Background: get to know the Back-end]]
:#[[How content is organised: Sections, Categories and Menus|Background: design the content - Sections and Categories]]
+
:#[[How permissions work in Joomla! 1.5 |Background: controlling user access to a Joomla! Site]]
:#[[How to organise appearance: Menus and Modules|Background:design appearance using Menus and Modules]]
+
:#[[Design the content: Sections and Categories: Joomla! 1.5|Background: design the content - Sections and Categories]]
:#[[How to control appearance: Templates|Background: using default Templates]]
+
:#[[Design appearance using Menus and Modules: Joomla! 1.5|Background: design appearance using Menus and Modules]]
 +
:#[[Design appearance using default Templates: Joomla! 1.5|Background: using default Templates]]
  
 
If you have little experience with web sites, you will need to make more use of the background material than if you are an experienced developer. They are there to be used according to your needs.
 
If you have little experience with web sites, you will need to make more use of the background material than if you are an experienced developer. They are there to be used according to your needs.
  
 
===Before you start===
 
===Before you start===
Give thought to content and design, as recommended in the background documents. Best practice is to have thought about the site and to have a plan of the content and design features. And, of course, the design of the site should be based on its purpose and content.
+
Give thought to content and design, as recommended in the background documents. Best practice is to have thought about the site and to have a plan of the content and design features before you create the site.
  
 
==The mechanics of creating a web site==
 
==The mechanics of creating a web site==
This can be done on any instance of Joomla! and the detail will depend on the facilities you have available. It is useful to use 'localhost' to get familiar with the processes involved.
+
This can be done on any instance of Joomla! running Joomla! 1.5 but the detail will depend on the facilities you have available. It is useful to use 'localhost' to get familiar with the processes involved.
 
===Using 'localhost'===
 
===Using 'localhost'===
Another document in this series tells you how to download an instance of Joomla! on your own computer and install it both with and without sample data. This is a very good way to explore how to create new content because you can try things without doing any harm to an established site. An instance of Joomla! with no data is particularly valuable here.
+
This is a very good way to explore how to create new content because you can try things without doing any harm to an established site. An instance of Joomla! with no data is particularly valuable here.
<div style="border:thin solid navy; margin-left:50px; margin-right:50px; background: #F0F8FF; width: 90%;">
+
{{ref|Another document in this series tells you how to download an instance of Joomla! on your own computer and install it both with and without sample data. [[Use Joomla! 1.5  on your own computer|Localhost installation of Joomla! on your own computer.]]}}
<span style="color:#000080"> '''Cross Reference:''' [[A demonstration web site on your own computer|Localhost of Joomla! on your own computer.]] </span>
 
</div>
 
  
===Login to the Back-end of your Joomla1 site===
+
===Login to the Back-end of your Joomla! site===
 
You will need Super Administrator permissions.
 
You will need Super Administrator permissions.
  
===The Template to use for the appearance of the site===
+
==The Template to use for the appearance of the site==
Decide which of the Templates to use.
+
*Decide which of the Templates to use.
<div style="border:thin solid navy; margin-left:50px; margin-right:50px; background: #F0F8FF; width: 90%;">
 
<span style="color:#000080"> '''Cross Reference:''' [[How to control appearance: Templates|'''Background: using default Templates''']] </span>
 
</div>
 
 
The examples here use JA_Purity. Joomla! ships with RHUK_Milkyway
 
The examples here use JA_Purity. Joomla! ships with RHUK_Milkyway
  
Make the one you have chosen the default Template. Reminder
+
*Make the one you have chosen the default Template. Reminder:-
  
 
In the Back-end, use Template Manager:-
 
In the Back-end, use Template Manager:-
Line 58: Line 50:
 
::This shows the only menu on the site with the Default Template
 
::This shows the only menu on the site with the Default Template
  
===Add a couple of Site Modules===
+
==Add some Site Modules==
 +
It is useful to add these before adding the content hierachy. The login module is essential to allow you (and anyone else) to login to the site to view any content with more than public permissions.
 +
{{ref|There is more about the Site Modules here - [[Design appearance using Menus and Modules: Joomla! 1.5|Background:design appearance using Menus and Modules]]}}
 +
*Open the Module Manager
 +
:Extensions / ModuleManager
 +
GSModuleMan1
 +
 
 
===Login Module===
 
===Login Module===
 
This is needed before articles and menus can be restricted to Registered users.
 
This is needed before articles and menus can be restricted to Registered users.
  
 
This Module displays a username and password Login form. It also displays a link to retrieve a forgotten password.
 
This Module displays a username and password Login form. It also displays a link to retrieve a forgotten password.
<div style="border:thin solid green; margin-left:50px; margin-right:50px; background: #f5f5f5; width: 90%;">
 
'''An aside:''' If User registration is enabled in the User Settings of the Global Configuration screen, then the link "Create an Account" will be shown to invite Users to self-register.
 
</div>
 
  
Click Login option
+
*Choose New for a new module
Click Next on the Header
+
From the list of Site Modules displayed:-
 +
*Click Login option
 +
:Click Next on the Header
 
The Module Edit page displays
 
The Module Edit page displays
:Enter:-
+
*Leave most of the settings as they are, but enter these:-
*Title - Login
+
:'''Title''' - Login
*Position - Left (try Right if you want to see the effect of doing this)
+
:'''Position''' - Left (try Right if you want to see the effect of doing this)
*Menu Selection - leave this as All unless you want to have the login on selected pages.
+
:'''Menu Selection''' - leave this as All unless you want to have the login on selected pages.
Save the Module
+
 
Preview to see the result
+
When the person logs out, they are re-directed to the Home page. Remember these can be altered later.
 +
[[Image:GSLoginParams.png|frame|center|'''You can alter a few display options - here there is some text above the login boxes.''']]
 +
 
 +
*Save the Module
 +
To see the result:-
 +
*Click Preview
 +
There should now be a Login displayed to the left, beneath the Menu
 +
[[Image:GSLoginModule.png|frame|center|'''If User registration is enabled then the link "Create an Account" will be shown to invite Users to self-register.''']]
 +
Note that this is set so that visitors can create a user account for themselves. You can disable this in the User Settings of the Global Configuration screen. See [[Start to manage a Joomla! 1.5 site|Starting to manage a Joomla! site]]
 +
 
 +
----
  
 
===Breadcrumbs===
 
===Breadcrumbs===
 
This module displays a 'breadcrumb' trail of where you are in the menu.
 
This module displays a 'breadcrumb' trail of where you are in the menu.
  
Module Management
+
Using Module Management:-
New
+
*Choose New for a new module
Choose the Breadcrumbs type
+
:Choose the Breadcrumbs type
Position: Left
+
Parameters:-
 +
:'''Position:''' Left
  
 
Other Modules can be added later
 
Other Modules can be added later
<div style="border:thin solid navy; margin-left:50px; margin-right:50px; background: #F0F8FF; width: 90%;">
 
<span style="color:#000080"> '''Cross Reference:''' cross ref back to Module background</span>
 
</div>
 
  
 
==Create the content heirachy==
 
==Create the content heirachy==
You should have an inital idea of what Sections and Categories you are going to use. If not - then re-visit the background on this. [[How content is organised: Sections, Categories and Menus?|Linked here.]] The rest of this part is about the mechanics of creating Sections and Categories, followed by Menus and Articles.
+
You should have an inital idea of what Sections and Categories you are going to use. If not - then re-visit the background on this which is  [[Design the content: Sections and Categories: Joomla! 1.5|Linked here.]] The rest of this part is about the mechanics of creating Sections and Categories, followed by Menus and Articles.
  
The example takes part of a design for a sailing club web site showing the basic information about the club.
+
The example below takes part of a design for a sailing club web site showing how the basic information about the club could be designed in Section and Categories.
 +
<div style="border:thin solid black; margin:50px; background: #f5f5f5; width:40%">
 +
:'''An example: '''
  
;About a sailing club
+
:{| border="1" cellpadding="2" cellspacing="0"
::Contacts
+
| width="205" | '''Section'''
::Find Us
+
| width="205" | '''Category'''
::How to join
+
|-
::Newsletter
+
| width="205" | About
::Subscriptions
+
| width="205" | About the club
::History
+
|-
 
+
| width="205" |
General information about the club, a welcome message for example, will go on the Front page and does not need a separate Category here.
+
| width="205" | Contacts
 
+
|-
===Create Sections===
+
| width="205" |
 +
| width="205" | Find Us
 +
|-
 +
| width="205" |
 +
| width="205" | How to Join
 +
|-
 +
| width="205" |
 +
| width="205" | Subscriptions
 +
|-
 +
| width="205" |
 +
| width="205" | Newsletters
 +
|-
 +
| width="205" |
 +
| width="205" | History
 +
|}
 +
</div>
 +
===Create the Sections===
 
In the Administrator Back-end:-
 
In the Administrator Back-end:-
 
*In Section Manager
 
*In Section Manager
 
:Select New
 
:Select New
GSAddSection
+
The New Section page is displayed. Simply add the Section Title (About the Club) at this stage. The Alias is added automatically.
Simply add the section name at this stage. The Alias is added automatically.
+
[[Image:GSAddSection.png|frame|center|'''Create a new Section. Other options are covered in Help.''']]
(aside Other options are covered in Help.)
 
  
===Create Categories===
+
===Create the Categories===
 
In the example here, there are several Categories for this Section
 
In the example here, there are several Categories for this Section
 
*In the Category Manager
 
*In the Category Manager
 
:Select New
 
:Select New
Here you need also to enter the Section. Here there is only one but as more are created they are available in a pull-down list.
+
Here you need also to enter the Section. There is only one but as more are created they are available in a pull-down list.
GSAddCategory
+
[[Image:GSAddCategory.png|frame|center|'''Creating Categories. Note that there are brief instructions about the use of the page, planned to have a list of Newsletters. Other options are covered in Help.''']]
Descriptions are useful if you need to display information about a Category on a page. Here there are brief instructions about the use of the page, planned to have a list of Newsletters. In localhost data - the menu More about Joomla! . The Project is organised like this. (May have a cross reference)
+
Here the Description allows a brief instruction about the use of the page, planned here to have a list of Newsletters.
(aside Other options are covered in Help.)
+
 
 +
==Create Menus and some Articles==
 +
Remember:-
 +
* Nothing shows on the site until it has been linked to a Menu Item
 +
* Joomla! adds the Main menu to your site automatically to  display the Home page.
  
===Create Menus and some Articles===
+
You should already have thought about the Menu and Menu Items you are going to need. Make sure that you use names that makes sense to anyone visiting the site. If not - [[Design the content: Sections and Categories: Joomla! 1.5|look again at the Background information.]]
Remember that nothing shows on the site until it has been linked to a menu item.
 
  
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.
+
In the example the Menu Items are closely related to the Categories, although not necessariily displayed in the same order or with the same names.
 +
<div style="border:thin solid navy; margin:10px; background: #F0F8FF; width: auto; padding:5px;">
 +
'''An aside on layouts:'''
 +
*For the blog and list layouts you do not need any articles available before you create the menu.
 +
*To create a Menu Item for an Article layout, you do need to have an Article to use in the Menu definition, even if it is not complete.
 +
</div>
  
You should already have thought about the Menu and Menu Items you are going to need. Make sure that you use names that makes sense to anyone visiting the site. If not - [[How content is organised: Sections, Categories and Menus?|look again at the Background information.]] (Make sure that there is a description of the types of menu there - blog, article and list)
+
===Plan of the Menu Items===
 +
<div style="border:thin solid navy; margin:10px; background: #F0F8FF; width: auto%; padding:5px;">
 +
:'''An example of some of the menus for a site about a club'''
  
In the example the Menu items are closely related to the Categories, although not necessariily displayed in the same order or with the same names.
+
:{| border="1" cellpadding="2" cellspacing="0"
<div style="border:thin solid green; margin-left:50px; margin-right:50px; background: #f5f5f5; width: 90%;">
+
| width="154" | '''Top level'''
'''An aside on layouts:''' For the blog and list layouts you do not need any articles available before you create the menu. To create a menu for an article layout, you do need to have an Article to use for the Menu definition, even if it is not complete.
+
| width="154" | '''Second level'''
 +
| width="266" | '''Type and comment'''
 +
|-
 +
| width="154" | Home
 +
| width="154" |
 +
| width="266" | Default blog layout
 +
|-
 +
| width="154" | About the Club
 +
| width="154" |
 +
| width="266" | Article layout
 +
|-
 +
| width="154" |
 +
| width="154" | How to join
 +
| width="266" | an article with suitable information
 +
|-
 +
| width="154" |
 +
| width="154" | Find the club
 +
| width="266" | an article with a map
 +
|-
 +
| width="154" |
 +
| width="154" | Subscriptions
 +
| width="266" | an article with the list of how much it costs
 +
|-
 +
| width="154" |
 +
| width="154" | Contacts
 +
| width="266" | an article with a list of contacts and details
 +
|-
 +
| width="154" |
 +
| width="154" | History of the Club
 +
| width="266" | a blog layout with READ MORE articles
 +
|-
 +
| width="154" | Newsletters
 +
| width="154" |
 +
| width="266" | a list layout so that more than one newsletter can be seen
 +
|-
 +
| width="154" | Add a new Article
 +
| width="154" |
 +
| width="266" | Article Submission layout, so that people with the right permissions can add articles
 +
|}
 
</div>
 
</div>
  
Proposed menus for the example
+
===Creating the Menu Items===
;Home: the default is a blog layout
 
::Find the club: an article with a map
 
::How to join: an article with suitable information
 
::Subscriptions: an article with the list of how much it costs
 
::Contacts: an article with a list of contacts and details.
 
::Newsletters: a list layout so that more than one newsletter can be seen.
 
::History of the Club: a blog layout with READ MORE articles
 
::
 
::Create an article: Article Submission layout, so that people with the right permissions can add articles.
 
  
*Create Articles for any that you are going to define as having Article Layout. You can leave them as Uncategoriesed as they are positioned in the right place by the menu definition.
+
To create a menu for an Article layout, you need to have an Article to use for the Menu definition, even if it is not complete.
<div style="border:thin solid navy; margin-left:50px; margin-right:50px; background: #F0F8FF; width: 90%;">
+
*Create Articles for any that you are going to define as having Article Layout.
<span style="color:#000080"> '''Cross Reference:'''to article creation. </span>
+
:You can leave them as Uncategorised as they are positioned in the right place by the menu definition. But if they really belong to a Category, then select the right one.
</div>
 
  
The Main menu acts as the Top level for this example.
+
{{ref|For creating new Articles see: [[Hands-on adding a new article: Joomla! 1.5|Hands-on how to create a new Article]] and [[Manage articles using the Front-end of Joomla! 1.5|Manipulating articles using the Front-end]]. You can also use the Article Manager in the Back-end.}}
*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.
 
*Deep menus are found harder for navigation that a couple of levels.
 
  
 
In the Control Panel for the site:-
 
In the Control Panel for the site:-
 
:Choose Menu Manager
 
:Choose Menu Manager
:Click on Menu Items
+
:Find the Main Menu
 +
:Click on Menu Items for the Main Menu
 
There is one already there - this is the Home menu page that comes with Joomla! by default. (This can be altered but not here)
 
There is one already there - this is the Home menu page that comes with Joomla! by default. (This can be altered but not here)
 
:Select New
 
:Select New
 +
This steps through a couple of choices
 
:Select Menu Item Type
 
:Select Menu Item Type
This shows the one for Article Layout.
 
  
GSarticlelayout
+
[[Image:GSarticlelayout.png|frame|center|'''The Menu Item Type controls how articles are displayed. This shows the one for Article Layout.''']]
  
Fill in the name of the menu and Select the right article to display
+
::Fill in the name of the menu
 +
::Select the right article to display
  
GSarticlelayout2
+
[[Image:GSalayout.png|frame|center|'''Selecting the Article and other Parameters''']]
  
 
Preview or go to the Site to see the result.
 
Preview or go to the Site to see the result.
  
====List and blog layouts====
 
  
This shows a list layout for the Newsletters.
+
----
  
GSaddMenu2
+
====List and blog layouts====
  
aside - the Parameters can be altered to show fewer things in the Table Headings. cross ref - to something about settings.
+
Choose the approprate layout from the first screen
  
 +
The other Parameters can be altered to show fewer things in the Table Headings.
  
an aside to tell them that if they create a new Menu (not menu item)- a new module is needed
 
  
This shows choice of a blog layout
+
[[Image:GSaddmenu3.png|frame|center|'''Here the Menu Item is located beneath another Menu Item, namely About the Club''']]
  
Other things needed - ordering the menus
+
==Adding Articles==
 +
Most content is added after suitable Menu Items have been created.
  
Sub-menus
+
Each site has its own policies about who creates Articles and maintains the content. One advantage of a system such as Joomla! is that Articles can be created by  numerous people if they have the right permissions.
  
===Articles===
+
<div style="border:thin solid navy; margin:10px; background: #F0F8FF; width: auto; padding:5px;">
<div style="border:thin solid navy; margin-left:50px; margin-right:50px; background: #F0F8FF; width: 90%;">
+
<span style="color:#000000"> '''Cross Reference:''' for creating Articles.
<span style="color:#000080"> '''Cross Reference:'''to article creation. </span>
+
::*[[Hands-on adding a new article: Joomla! 1.5|Hands-on how to create a new Article.]]
 +
::*[[Manage articles using the Front-end of Joomla! 1.5|Manipulating articles using the Front-end]]
 +
::*You can also use the Article Manager in the Back-end.  
 +
</span>
 
</div>
 
</div>
  
Much content can be added after the menus have been created.
+
==Adding Users==
 +
Part of thinking about a site is to decide what kinds of users you will need to give specific permissions to. This also influences the levels of access you allowed on Sections, Catagories and Articles.
 +
{{:NewUser}}
 +
 
 +
<div style="border:1px solid green; margin:35px; background: #F0F8FF; width: auto; padding:5px;">
 +
*'''Self-registration:''' Some sites allow self-registration. In other words, new users register themselves. Make sure that the default Group is Registered so that no edit permissions are given!
 +
*'''Contact management:''' This is beyond the scope of this document.
  
==Add users==
+
::See [[Start to manage a Joomla! 1.5 site|Starting to manage a Joomla! site]]
  
<div style="border:thin solid navy; margin-left:50px; margin-right:50px; background: #F0F8FF; width: 90%;">
 
<span style="color:#000080"> '''Cross Reference:''' to permissions.</span>
 
 
</div>
 
</div>
  
 +
==Transfer an existing site into Joomla!==
 +
Sometimes there is already some material on an existing site and it seems a good idea to use this as a basis for a Joomla! site so that the content can be managed more flexibly.
 +
*There is no automated way to press a button and transfer a static site into Joomla!
  
 +
There are various strategies for doing this. A simple conversion is useful if you have very little content or the site has a simple structure. For the best result, it is better to re-think the design of the site and then transfer the content.
 +
===A simple conversion===
 +
Here you do not re-think the structure of the site.
  
==Transferring an existing site into Joomla!==
+
[http://docs.joomla.org/How_to_Convert_an_existing_Web_site_to_a_Joomla!_Web_site A method for doing this is covered here.]
Sometimes there is already some material on an existing site and it seems a good idea to use this as a basis for a Joomla! site where the content can be managed more flexibly.
+
:*It steps through a possible method, starting with creating new articles and copying the text from existing pages into them.
*There is no automated way to press a button and transfer a static site into Joomla!
+
:*It does not design a content hierachy to start with.
  
There are various strategies for doing it.
+
If you do this, you can modify the site as you get to know it better. You also need to:-
====A simple conversion====
+
:*Add users with appropriate levels of permission
Here you do not re-think the structure of the site. This is covered in this document. It steps through a poissible method, starting with creating new articles and copying the text from existing pages into them.
 
http://docs.joomla.org/How_to_Convert_an_existing_Web_site_to_a_Joomla!_Web_site
 
  
If you do this, you can modify the site as you get to know it better. You also need to:-
+
===Use the existing content in a newly developed Joomla! site===
*Add users with appropriate levels of permission
+
Here you go through the design processes suggested in these documents, just as if you were going to create a new site. But you can use the old site as an indication of the likely Sections, Categories and Menus needed. It is also helpful to know that you can create the site with a default Template but alter the tempate (or use another Template) later. Thus you would decide upon and create:-
 +
:*Sections
 +
:*Categories
 +
:*Decide which Template to use
 +
:*Decide on the Menus. You do not have to stick to simple article menus - you could have blog or list layouts for example.
 +
:*Create Articles to match those in the existing site
 +
:*Copy and Paste the content from the existing pages into the editor.
 +
::You may need to alter layouts and do some editing.
 +
::You will also need to import any illustrations
 +
:*Add users with suitable permissions
  
====Redesign the site and use the existing content====
+
This would give a site with the functionality appropriate to Joomla! from the beginning for very little extra thought and a lot less muddle and chaos. Most of the initial work would be in transferring the content should it need a lot of extra editing.
Here you go through the thought and design processes covered in these documents. Thus you would decide upon and create:-
 
*Section
 
*Categories
 
*Decide which Template to use
 
*Decide on the Menus. You do not have to stick to simple article menus - you could have blog or list layouts for example.
 
*Create Articles to match those in the existing site
 
*Copy the content from the existing pages into the editor. You may need to alter layouts and do some editing. You will also need to import any illustrations (cross ref editing parts here)
 
*Add users with suitable permissions
 
  
This would give a site with the functionality appropriate to Joomla! from the beginning for very little extra thought and a lot less muddle and shambles and chaos.
 
 
==Where next?==
 
==Where next?==
Articles and other content
+
*There are day-to-day tasks involved in maintianing a web site after it has been set up. These are briefly covered here:- [[Start to manage a Joomla! 1.5 site|Getting Started with day-to-day Administration of a Joomla! site]]
  
 +
*There is a lot more to Joomla! than the basics - this will link to further information and concepts.
  
 
==Further information==
 
==Further information==
  
*[http://docs.joomla.org/Administrators Joomla! Administrator's Manual - on-line ]
+
*[[Administrators|Joomla! Administrator's Manual]]
 
*[http://help.joomla.org/ghop/feb2008/task048/joomla_15_quickstart.pdf Quick start guide]
 
*[http://help.joomla.org/ghop/feb2008/task048/joomla_15_quickstart.pdf Quick start guide]
====conversion of an existing site====
+
'''Conversion of an existing site'''
*http://docs.joomla.org/How_to_Convert_an_existing_Web_site_to_a_Joomla!_Web_site
+
*[[Converting an existing website to a Joomla! website]]
Copying a localhost site to a production site
+
'''Copying a localhost site to a production site'''
*http://docs.joomla.org/How_do_you_copy_a_site_from_localhost_to_a_remote_host%3F
+
*[[Copying a website from localhost to a remote host]]
 +
 
 +
:You need some computing background to understand this, especially file management and using FTP. You also need to be able to login to your hosting service management site.
 +
 
 
----
 
----
 
--[[User:LornaS|Lorna Scammell]] January 2011
 
--[[User:LornaS|Lorna Scammell]] January 2011

Revision as of 07:25, 6 June 2013

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.

It is one of a series of documents introducing Joomla! 1.5 and is the last of five documents about designing and creating a new web site.

The aim of this document is:-

  • to set up the 'no frills' web site using Joomla! 1.5

Who is it written for?[edit]

Everyone - who is going to set up a Joomla! site.

It is written on the assumption that you do not have much web experience.

Introduction[edit]

There are five 'background' pages with essential information about different aspects of designing a site. The background is separated so that the flow of creating the site is not interrupted by asides. The documents are all aimed at helping you to understand what is going on, whether you have a large or a small site.

  1. Background: get to know the Back-end
  2. Background: controlling user access to a Joomla! Site
  3. Background: design the content - Sections and Categories
  4. Background: design appearance using Menus and Modules
  5. Background: using default Templates

If you have little experience with web sites, you will need to make more use of the background material than if you are an experienced developer. They are there to be used according to your needs.

Before you start[edit]

Give thought to content and design, as recommended in the background documents. Best practice is to have thought about the site and to have a plan of the content and design features before you create the site.

The mechanics of creating a web site[edit]

This can be done on any instance of Joomla! running Joomla! 1.5 but the detail will depend on the facilities you have available. It is useful to use 'localhost' to get familiar with the processes involved.

Using 'localhost'[edit]

This is a very good way to explore how to create new content because you can try things without doing any harm to an established site. An instance of Joomla! with no data is particularly valuable here.

Cross Reference: Another document in this series tells you how to download an instance of Joomla! on your own computer and install it both with and without sample data. Localhost installation of Joomla! on your own computer.

Login to the Back-end of your Joomla! site[edit]

You will need Super Administrator permissions.

The Template to use for the appearance of the site[edit]

  • Decide which of the Templates to use.

The examples here use JA_Purity. Joomla! ships with RHUK_Milkyway

  • Make the one you have chosen the default Template. Reminder:-

In the Back-end, use Template Manager:-

  • Pull down the menu called Extensions
Choose Template Manager

Using Template Manager you can alter the Default.

  • Click on the radio button to select one of the Templates
  • Click the Default button on the menu

To see the result of this:-

  • Click Preview
This shows the only menu on the site with the Default Template

Add some Site Modules[edit]

It is useful to add these before adding the content hierachy. The login module is essential to allow you (and anyone else) to login to the site to view any content with more than public permissions.

Cross Reference: There is more about the Site Modules here - Background:design appearance using Menus and Modules
  • Open the Module Manager
Extensions / ModuleManager

GSModuleMan1

Login Module[edit]

This is needed before articles and menus can be restricted to Registered users.

This Module displays a username and password Login form. It also displays a link to retrieve a forgotten password.

  • Choose New for a new module

From the list of Site Modules displayed:-

  • Click Login option
Click Next on the Header

The Module Edit page displays

  • Leave most of the settings as they are, but enter these:-
Title - Login
Position - Left (try Right if you want to see the effect of doing this)
Menu Selection - leave this as All unless you want to have the login on selected pages.

When the person logs out, they are re-directed to the Home page. Remember these can be altered later.

You can alter a few display options - here there is some text above the login boxes.
  • Save the Module

To see the result:-

  • Click Preview

There should now be a Login displayed to the left, beneath the Menu

If User registration is enabled then the link "Create an Account" will be shown to invite Users to self-register.

Note that this is set so that visitors can create a user account for themselves. You can disable this in the User Settings of the Global Configuration screen. See Starting to manage a Joomla! site


Breadcrumbs[edit]

This module displays a 'breadcrumb' trail of where you are in the menu.

Using Module Management:-

  • Choose New for a new module
Choose the Breadcrumbs type

Parameters:-

Position: Left

Other Modules can be added later

Create the content heirachy[edit]

You should have an inital idea of what Sections and Categories you are going to use. If not - then re-visit the background on this which is Linked here. The rest of this part is about the mechanics of creating Sections and Categories, followed by Menus and Articles.

The example below takes part of a design for a sailing club web site showing how the basic information about the club could be designed in Section and Categories.

An example:
Section Category
About About the club
Contacts
Find Us
How to Join
Subscriptions
Newsletters
History

Create the Sections[edit]

In the Administrator Back-end:-

  • In Section Manager
Select New

The New Section page is displayed. Simply add the Section Title (About the Club) at this stage. The Alias is added automatically.

Create a new Section. Other options are covered in Help.

Create the Categories[edit]

In the example here, there are several Categories for this Section

  • In the Category Manager
Select New

Here you need also to enter the Section. There is only one but as more are created they are available in a pull-down list.

Creating Categories. Note that there are brief instructions about the use of the page, planned to have a list of Newsletters. Other options are covered in Help.

Here the Description allows a brief instruction about the use of the page, planned here to have a list of Newsletters.

Create Menus and some Articles[edit]

Remember:-

  • Nothing shows on the site until it has been linked to a Menu Item
  • Joomla! adds the Main menu to your site automatically to display the Home page.

You should already have thought about the Menu and Menu Items you are going to need. Make sure that you use names that makes sense to anyone visiting the site. If not - look again at the Background information.

In the example the Menu Items are closely related to the Categories, although not necessariily displayed in the same order or with the same names.

An aside on layouts:

  • For the blog and list layouts you do not need any articles available before you create the menu.
  • To create a Menu Item for an Article layout, you do need to have an Article to use in the Menu definition, even if it is not complete.

Plan of the Menu Items[edit]

An example of some of the menus for a site about a club
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

Creating the Menu Items[edit]

To create a menu for an Article layout, you need to have an Article to use for the Menu definition, even if it is not complete.

  • Create Articles for any that you are going to define as having Article Layout.
You can leave them as Uncategorised as they are positioned in the right place by the menu definition. But if they really belong to a Category, then select the right one.
Cross Reference: For creating new Articles see: Hands-on how to create a new Article and Manipulating articles using the Front-end. You can also use the Article Manager in the Back-end.

In the Control Panel for the site:-

Choose Menu Manager
Find the Main Menu
Click on Menu Items for the Main Menu

There is one already there - this is the Home menu page that comes with Joomla! by default. (This can be altered but not here)

Select New

This steps through a couple of choices

Select Menu Item Type
The Menu Item Type controls how articles are displayed. This shows the one for Article Layout.
Fill in the name of the menu
Select the right article to display
Selecting the Article and other Parameters

Preview or go to the Site to see the result.



List and blog layouts[edit]

Choose the approprate layout from the first screen

The other Parameters can be altered to show fewer things in the Table Headings.


Here the Menu Item is located beneath another Menu Item, namely About the Club

Adding Articles[edit]

Most content is added after suitable Menu Items have been created.

Each site has its own policies about who creates Articles and maintains the content. One advantage of a system such as Joomla! is that Articles can be created by numerous people if they have the right permissions.

Cross Reference: for creating Articles.

Adding Users[edit]

Part of thinking about a site is to decide what kinds of users you will need to give specific permissions to. This also influences the levels of access you allowed on Sections, Catagories and Articles. NewUser

  • Self-registration: Some sites allow self-registration. In other words, new users register themselves. Make sure that the default Group is Registered so that no edit permissions are given!
  • Contact management: This is beyond the scope of this document.
See Starting to manage a Joomla! site

Transfer an existing site into Joomla![edit]

Sometimes there is already some material on an existing site and it seems a good idea to use this as a basis for a Joomla! site so that the content can be managed more flexibly.

  • There is no automated way to press a button and transfer a static site into Joomla!

There are various strategies for doing this. A simple conversion is useful if you have very little content or the site has a simple structure. For the best result, it is better to re-think the design of the site and then transfer the content.

A simple conversion[edit]

Here you do not re-think the structure of the site.

A method for doing this is covered here.

  • It steps through a possible method, starting with creating new articles and copying the text from existing pages into them.
  • It does not design a content hierachy to start with.

If you do this, you can modify the site as you get to know it better. You also need to:-

  • Add users with appropriate levels of permission

Use the existing content in a newly developed Joomla! site[edit]

Here you go through the design processes suggested in these documents, just as if you were going to create a new site. But you can use the old site as an indication of the likely Sections, Categories and Menus needed. It is also helpful to know that you can create the site with a default Template but alter the tempate (or use another Template) later. Thus you would decide upon and create:-

  • Sections
  • Categories
  • Decide which Template to use
  • Decide on the Menus. You do not have to stick to simple article menus - you could have blog or list layouts for example.
  • Create Articles to match those in the existing site
  • Copy and Paste the content from the existing pages into the editor.
You may need to alter layouts and do some editing.
You will also need to import any illustrations
  • Add users with suitable permissions

This would give a site with the functionality appropriate to Joomla! from the beginning for very little extra thought and a lot less muddle and chaos. Most of the initial work would be in transferring the content should it need a lot of extra editing.

Where next?[edit]

  • There is a lot more to Joomla! than the basics - this will link to further information and concepts.

Further information[edit]

Conversion of an existing site

Copying a localhost site to a production site

You need some computing background to understand this, especially file management and using FTP. You also need to be able to login to your hosting service management site.

--Lorna Scammell January 2011