Content Management System (CMS) for Schools. Release 1. Date: October 2008

Transcription

1 Content Management System (CMS) for Schools Release 1 Date: October 2008

2 Table of Contents 1 Introduction Purpose About the CMS How content is organised Understanding the Menu system How the menu system is maintained Getting Started Navigation Configuration Requirements Web Address for your CMS installation Interface Tips Support Login Screen Logging in to CMS front end CMS Administration CMS Administration Homepage Menu Bar Control Panel User Management New User Content Submitting New Content as administrator Submitting New Content as Author, Editor or Publisher from front end Uploading Images Using the Joomla! Media Manager To upload an image to the currently selected directory Where to find images Menus To create a new menu To add or edit the menu items in a menu Menu appearance and assignment To edit the properties for a menu Modules and Positions Providing Staff or Parents only Areas Templates To select a single template for use with the whole website: Installing New Templates To install a new Joomla! template Similarly Templates can be deleted Editing Installed Templates These items can be edited as follows: Creating New Templates The Preinstalled Templates Creating and editing content Using the TinyMCE Editor Using the JCE 1.5 Editor Additional functions available when editing an Article in any editor Image Pagebreak Read more Linkr Glossary:...29 Mike Jupp October 2008 page 2 of 2

3 1 Introduction 1.1 Purpose All Bexley schools can be provisioned with a simple Content Management System (CMS) to help publish content for their LGfL hosted school websites. The Administration Tool for the CMS is a web-based application available to authorised users. This CMS Guide provides a simple guide to accessing and using the CMS Administration Tools. 1.2 About the CMS The CMS is a preconfigured customized installation of Joomla!, an open source content management system. Further information can be found about Joomla! at Additional documentation can be found about Joomla! at This version has been customised for schools and is available from the edugeek website 1.3 How content is organised See diagram Drawing 1. The content is divided into Sections which contain Categories which in turn contain Articles. You can think of this like a filing cabinet consisting of drawers, folders and documents. It is just a logical way of storing and accessing the content of the website. The content is pre-arranged for school use but you can add Sections, Categories and Articles to customise it for your school. Additionally there are Modules which do helpful things, like display Menus, show who is logged in, or produce statistics. The web pages displayed are controlled by a template which dictates the layout of the page, colours, fonts etc. So pages that we see are the result of articles and Modules arranged by a template. All this can be controlled and altered by the administrator Understanding the Menu system Access to the content is controlled by the menu system see Drawing 2 It is important to understand the principle here. Menus contain a list of articles which they link to. In turn menus appear on pages, in articles, to make the system work. To illustrate this consider the parents pages; these consist of a collection of articles which are listed on the parents menu (Admissions, Activities, Aims etc.). For consistency when you click on

4 an item in the parents menu you will display that article and you would expect to find the same menu offering links to all the other parents pages. Therefore the principle is : All pages in in the parents section appear on the parents menu and the parents menu appears on all parents pages! How the menu system is maintained Menus can be created and deleted in Menus, Menu Manager. Under Menus all the Menus currently existing are listed, clicking on a name brings up that Menu for editing. Here Articles can be added to a menu (New, Articles, Article Layout). Similarly Clicking on a menu name in Extensions, Module Manager brings up a list of Modules including Menus. Clicking on the Menu name allows you to edit the menu item. Under Menu Assignment there is a list, Menu Selection, that shows on what Articles this menu will appear. We will look at these options in more detail later for now it is the principle that is important!

5 Categories Articles Term Dates School Newletter Urgent Nursery Categories Articles Sections Results Student Council News Nursery School Announcements Governors News School News Information for Parents Categories Awards School Events Curriculum Info for Parents Front page message Articles General School News Information for Parents Nursery Drawing 1: How Sections, Categories and articles are related

6 Nursery Menus can appear in articles; assigned in Extensions, Module Manager module name e.g. Parents Menu Menu Manager can create and delete menus Menus Articles appear on menus; assigned in Menus, Menu Name e.g ParentsMenu Nursery Drawing 2: How menus relate to articles Mike Jupp October 2008 page 6 of 6

7 2 Getting Started To get started with an installation of the CMS for your school, please contact the IS team on who will arrange for the installation of the Joomla system. Throughout this guide terms such as author, publisher etc. which have Special meaning in Joomla will be italicised e.g. author, publisher. 2.1 Navigation The CMS interface is web-based and navigation is through conventional mouse and keyboard actions. The CMS interface has a combination of static displays and various menu structures such as dropdown, panel and expandable menus that can only be accessed by clicking (with the mouse) on the desired menu item. Normal Windows features such as window scrolling, minimizing and maximizing are used by this application. Other features are listed below: Feature Example Explanation Buttons Perform an action. Web links Entry fields Checkboxes Radio buttons Drop-down lists Joomla! May take you to another web page, display a 'compose' screen, or start a file download. Allow you to enter information. Click in the field and then type in details. Let you select one or more options. Let you select a single option. Let you select from a list of predefined options - a list of countries, for Mike Jupp October 2008 page 7 of 7

8 example. 2.2 Configuration Requirements The following software and configuration should be used when operating the CMS. Although this is a guideline, variations from these recommendations may produce adverse effects. Microsoft Windows 2000, XP or Vista Microsoft Internet Explorer Version 6 Service Pack 1 or above Mozilla Firefox Version 2.0 or above Cookies and Javascript allowed. 2.3 Web Address for your CMS installation Unless you have moved your tag elsewhere your CMS should be available at: where yourschoolname is your school's name or suitable abbreviated version. The administration website for your CMS installation is available at: / Where the school has another URL e.g this can be used instead by switching its 'Tag' to Synetrix However, this document will always refer to your website domain as yourschoolname.bexley.sch.uk 2.4 Interface Tips The following tips apply to the entire CMS system. To search for a word or phrase on a web page, use the Find option from the browser's Edit menu (or press Ctrl-F). An automatic timeout will apply to logged in users when the CMS hasn't been used for 30 minutes. You will then have to log back in. Note that any unsaved operations, such as managing groups, will result in the loss of modified data. Some lists can have multiple items selected. Individual items can be selected and deselected by holding the Ctrl key and selecting the item with the mouse cursor at the same time. A block of multiple items can be selected, where this is allowed, by selecting the first item in the list, then holding the Shift key selecting the last item in the list, all the items will be selected. 2.5 Support If you require assistance please contact the IS Service Desk on Mike Jupp October 2008 page 8 of 8

9 2.6 Login Screen About the Login screens Content Management System (CMS) for Schools Issue 1.0 There are three ways to log into the CMS. The first is by way of the CMS Administration link, and the other two are via the website front end. Only Managers, Administrator s and Super Administrator s of a school will be able to log into the CMS via the CMS Administration link (normally referred to as the back end). A user can be assigned rights to manipulate the CMS content from the normal view (referred to as the front end) the roles are: Role Registered Author Editor Rights This group allows the user to login to the Front end interface. Registered users can't contribute content, but this may allow them access to other areas, like a forum or download Section if your site has one. Not enabled by default on this implementation. However schools might want to make a member s only area in which case this can be used see Parents/Staff only Section further on. This group allows a user to post content, usually via a link in the User Menu. They can submit new content, select options to show the item on the front page and select dates for publishing but they cannot directly publish any content. When content is submitted by an Author level user, they receive the message, Thanks for your submission. Your submission will now be reviewed before being posted to the site. They can edit only their own Articles but only when that Article has been published and is visible. This group allows a user to post and edit any (not just their own) content item from the Front end. They can also edit content that has not been published. If your site uses the default installation s menu option News, which is a Table List Content Section type, Editors will see unpublished Articles in the list that they can select for editing, where as an Author or Public (unregistered) user will not even see the unpublished items in the list. Still, Editor users cannot, publish or change the publishing status of any Articles, even their own. Mike Jupp October 2008 page 9 of 9

10 Role Publisher Rights This group allows a user to post, edit and publish any (not just their own) content item from the Front-end. Publishers can review all Articles, edit and change publishing options but the can also determine when an Article is ready for publication, making it visible to Registered, Author and the Unregistered Public (depending on what visibility was chosen in the Article, of course!) Mike Jupp October 2008 page 10 of 10

11 The following screenshot shows the login screen for the administrator Initially the login Username is Admin and password supplied by the IS team. You should change passwords as soon as possible. The following screen shot shows the Front page (Front end) login, as presented: Mike Jupp October 2008 page 11 of 11

12 2.7 Logging in to CMS front end You must enter a Username and Password in the login Area. Editors/Authors/Publishers will have access to registered and Special content of that website. Registered users will, as the name suggests only have access to the registered content. 1. Enter your Username in the Username field. 2. Enter your password in the Password field. 3. Click the Login button If login is successful, access to content of the website is granted. If login is unsuccessful, the following message will appear: 'Incorrect Username, Password. Please try again' Select the OK button and try again. 3 CMS Administration 3.1 CMS Administration Homepage This is a screenshot of the homepage for an Administrator. Over to the right there is a Section with various statistics and, a count of how many users are logged in, and a drop down of recently added Articles. Articles which are added by authors will appear here waiting to be published so an administrator should look at these regularly Menu Bar The top menu bar shows a drop down menu off all the functions available to the user. The Site menu item contains links to various administration functions for core CMS functionality. The Menus menu item contains a link to the Menu Manager, and a short cut to each menu that has been setup. The Content menu item contains core CMS functions concerned with the content that is displayed for the website. Mike Jupp October 2008 page 12 of 12

13 The Components menu contains links to component specific functionality. Many components are pre-packaged with Joomla! to provide enhanced functionality for the website. Some components are not pre-packaged, but have been installed to achieve specific goals such as Documentation Manager (DOCman), Linkr; an easy way of linking content, RSS news feeds and a plugin to enable polls. The Extensions menu the Plugin Manager submenu, which will give access to all installed Site Plugins. The Extensions menu also contains the Templates Manager submenu, which will allow you to install Templates for the website. The Modules Manager submenu gives access to all installed Modules. The Tools menu contains the Global Checkin option, which will allow Administrator s to check in locked content and Modules The Help menu item will provide a link to the Joomla! Help Site. This is a good reference for core Joomla! functionality. The right hand side of the top bar will show the icons (Save, New etc.) for any menu items relevant for the component being used Control Panel The Control Panel contains a set of short cuts to primary CMS functions, and a tab of content related functions. The availability of short cuts will be dependent on the user's access rights. 4 User Management Note: you might like to read the Section below entitled Providing Staff or Parents only Areas before setting up your users. Your first step should be to set up another Super administrator in case the first account becomes disabled for any reason. 4.1 New User To set up a user the process is: a) Click Site, User Manager or Click the User Manager icon on the control panel. b) Click the New button. c) In the User Details panel fill in the boxes for Name, Username, , New Password, Verify Password and select the group for the new user. d) Block user and Receive System s options are only applicable to Administrator s and Super Administrator s. e) In the parameters panel select the Front and back end languages, by leaving out support for other languages the only choice is English (UK).which it defaults to anyway! f) Next choose the Editor: Mike Jupp October 2008 page 13 of 13

14 g) No Editor means you just get a standard text HTML text area. h) TinyMCE is the default WYSIWYG Editor installed. i) JCE is a more capable and therefore complex WYSIWYG Editor. j) Local is the default for Help Site and is very good. Selecting English (GB) will launch a web browser popup to the Joomla web site when the user clicks on help. k) Time zone should default to the local time. l) Click Save to save the user. Note: although the Editor for the user is specified here it is possible for the user to choose for themselves from the user menu by clicking User Details (if this enabled), where they can also change their password, address etc. 5 Content 5.1 Submitting New Content as administrator This feature allows users to submit new content for displaying on the website To access this feature, select Add New Article from the Control Panel. There are other places that new content can be added from, but this is the simplest. a) Enter a title for the new content item. b) The title alias is optional and may be used for automatic friendly URL generation, don t worry it s not important now. c) Select a Section for the content item to appear under. d) Select a Category of the selection Section for the content item to appear under. e) Using the WYSIWYG Editor below, enter the Main Text either by typing or by cut and paste from another document e.g. Word.. f) If you wish to insert an image click the Image button at the bottom of the editing window. A pop up window will appear. Allowing you to browse the images uploaded by the media Manager (see below) or by clicking the Browse Files button to select new images off the local computer. After selecting as many images as you want click Start Upload to upload those files. The pictures will appear in the thumbnail gallery. Either way, select the image to be inserted, some text will appear in the Image URL box. Now fill in the Image Description and Image Title boxes (text entered here will appear when the picture is hovered over with the mouse) which will help partially sighted people to understand what is being portrayed. Finally click the Insert Button to put the picture in the Article. With the image selected clicking on the Image icon on the top menu allows control over many aspects, click the appearance tab to set: Mike Jupp October 2008 page 14 of 14

15 g) Alignment left, right etc. h) Dimensions (if it is too big or small) Note the constrain proportions option will not allow distortion of the height versus width, deselecting it will allow a football to look like a rugby ball! i) Vertical and Horizontal space allows the specification of the white space around the picture. j) Border places a border of the width in pixels specified around the picture. k) Class is normally not set, choosing caption displays the title text under the image as a caption. l) On the right hand side of the top panel are a couple of options. m) The Publishing option is used to control publishing of the content item. By default the option Published is selected. If you are not ready for the content item to be displayed, then uncheck this option. n) Show on Front page option allows the item to appear on the Front page of the website. o) On the right is a panel with a first heading of Parameters (Article). Clicking each of the headings toggles the content to appear or be hidden. p) On the Parameters (Article): q) Select an Access Level of Registered to restrict access to registered users. Otherwise use the default of Public. r) The Access Level of Special restricts the item to registered users who have the role of Author, Editor, Publisher, Manager or Administrator. s) The Author Alias can be used to provide an alternative author name for the content item. For example, Webmaster or The Principal. t) A start date for publishing can be given so that a content item will only start appearing after a certain time and date. u) A finish date for publishing can be given so that a content item will only display until a certain time and date. v) Select the Parameters (Advanced) by clicking to expand this Section and note the options. We will leave these alone for the moment. Likewise we will ignore the Metadata Information. w) Note: x) If an Article (or module) is abandoned while editing without selecting Save, Cancel or Close, then it can become locked. Only the editing author will be able to continue to edit this item. All locked items can be released by the Administrator selecting Global Check in from the Tools menu. Mike Jupp October 2008 page 15 of 15

16 y) If you re happy with your Article, you can select Save and be forwarded to the Content Article Manager. Otherwise you can select Apply, which will allow you to save, but remain editing the Article. 5.2 Submitting New Content as Author, Editor or Publisher from front end Authors or above can submit new content to be considered for publishing. To do this they need to: a) Login with their credentials at the front page by clicking on the login button on the main menu. b) From the User Menu Select Submit School News. c) Enter details of the Article; Title body text etc. using the WYSIWYG Editor (see below for Editor user guide). d) Enter the Section and Category that s/he recommends this Article is placed in. e) Enter the Author alias as appropriate. f) Click Save to submit the Article. g) Note: An Author will not be able to edit a content item once it has been saved. h) The submitted Article will appear in the Recent added Articles list on the administrator s control panel. By clicking on it the administrator can edit the Article, place it in a Section/Category, limit access to certain users and publish it to make it visible to users. 6 Uploading Images There are several methods to uploading images for use with content. We have already looked at the method available within the Article Editor. 6.1 Using the Joomla! Media Manager To access the Media Manager click Site, Media Manager or select the Media Manager icon from the control panel. The Joomla! Media Manager is a core Joomla! component and provides the following features: A simple preview of all media in the images directory. Navigation to sub directories and parent directories. Creation of sub directories. Uploading of images. Generation of HTML code for use with content items. Viewing the full size image. Mike Jupp October 2008 page 16 of 16

17 6.2 To upload an image to the currently selected directory a) In the Media Manager, Select the Browse files button and select the local image file you wish to upload, typically found in My Documents, My Pictures. b) Select the Start Upload button next to upload the image. c) Clicking on an image s icon will preview the image at full size; click the close X to return. 6.3 Where to find images Some Joomla! components make use of Special directories within the images directory. For Example: The Random images module uses the stories, random_images directory to store it s images. The stories directory is used as a starting place by the Images tab in the Content screen. The stories, banners directory is used by the Banners component. The stories, default_header directory contains the pictures which change on the front screen. 7 Menus 7.1 To create a new menu a) Select Menu Manager from the Menu o the top menu bar b) Select New from the tool bar. c) Enter a Unique Name for the new menu. This is the internal menu name that CMS Administrator s can see. Do not include spaces in this field, underscores _ are OK. d) Enter a Title for the new menu. This is the menu name that users will see if you display the title for the menu. e) Enter a description, although optional this will be useful for other people or even yourself when you forget what it was about! f) Enter a Module Title; this can be the same as c) above. g) Select Save. h) Note: Although the new menu has been created it will not appear anywhere until the Module created above in f) is Assigned to pages through the Extensions, Module Manager route. 7.2 To add or edit the menu items in a menu a) Select the Menu Items icon on the same row as the Menu you wish to edit. b) Select New from the tool bar. c) Select the menu item type. To add a content item, select Link - Content Item Mike Jupp October 2008 page 17 of 17

18 d) Enter the name that should appear on the menu. e) Select the content item to link from the Content to Link list f) Select the On Click, Open in option. It is recommended to select the default of Parent Window with Browser Navigation g) Select the Parent Option. The default is Top. Submenus can be created by selecting an existing menu item as the parent. h) Select the Access Level of the menu item. Registered menu items will only be available to users who are logged into the website. i) Select Published as Yes to allow the Menu Item to be viewed immediately. j) Select Apply to save the menu item and continue editing. Select Save to save the menu item and return to the list of menu items for the menu. Notes: When a couple of menu items have been created for a menu, ordering can be controlled from the Menu Manager for the menu, or from the individual menu items. The Special Access Level is used to restrict access to registered users with the user type of Author, Editor, Publisher, Manager or Administrator. 7.3 Menu appearance and assignment Each menu has many menu properties that can be edited To edit the properties for a menu a) Select Extensions, Module Manager Menu bar. b) Look for the name of the menu in the Module Name list note that it can be enabled or disabled (the module equivalent of published) from this list by clicking on the tick or cross icon. c) Select the menu name of the menu you wish to edit by clicking on the name. d) There are many properties to edit. Starting in the Details panel: e) Title - the title of the menu f) Show title option used to display the title of the menu g) Enabled option to show on the page or not same as above from list h) Position - used to display the menu in a particular module position as defined by the current template. Select from pre-defined options e.g. left, right, or it is possible to specify your own User1 etc. i) Order - The Order that this Module will be displayed within the Position. If more than one Module is displayed at the same position, this will determine the order of display. The drop-down list box shows all Modules displaying at the current Position. Select the Module that you want the current Module to follow. Mike Jupp October 2008 page 18 of 18

19 j) Access Level - used to restrict the menu to author or higher - Special, Registered users - Registered, or make available to all users - Public. k) Moving to the Module Parameters Panel: l) Menu Name a drop down list of all menus which use this Module to display. m) Menu Style - the style of menu to display. This can be Vertical, Horizontal or Flat List (default). n) Start and End Levels - Used to fully expand the menu or only show top level menu items until a menu item with a sub menu is selected. Not for beginners see Help for fuller description. o) Always show sub-menu Items used to control the fly out sub-menu effect, can be used in conjunction with the above, again not for beginners. p) Moving to the Menu Assignment Panel: q) Menus. "All" means show the current Module on all Menu Items. "None" means don't show the Module on any Menu Items. "Select Menu Item(s) from the List" allows you to select which Menu Items to show the Module on. r) Menu Selection. If "Select Menu Items(s) from the List" above is selected, select individual Menu Items that will display the Module. s) Use Ctrl+Click to select multiple Menu Items. t) Use Shift+Click to select a range of Menu Items. u) If you want to select most of the Menu Items, first click "All" above under Menus and then click "Select Menu Items(s) from the List". All of the Menu Items will be selected. Then use Ctrl+Click to deselect the Menu Items you don't want to include. v) Select Save to save your changes and exit or Apply to save the changes and carry on editing. 7.4 Modules and Positions Modules are small extensions in functionality that have a physical presence in the display of a website page. The Menu module we have seen above some of the others are, Latest News, Mini Calendar, Latest Events and Content Item links. To be displayed, a module must be enabled and it must have a position. A position is a region in a template into which the Modules will be display. Typical positions are left, right, top, banner, user1, user2 and user3. You can see the module positions by appending &tp=1 to a normal address. Supposing you are looking at: Then modify this to: Mike Jupp October 2008 page 19 of 19

20 Next press return or click the Go button. The page should be overlaid with red text showing the position of the available positions. Modules can be reordered within a position by using the Order field in the Module Manager. So if you have two menus in the same position you can make one appear before the other. Modules can be temporarily hidden by disabling, just click on the tick icon in the list. This is a preferable action to deleting. A module can appear in two positions by making a copy, and assigning the copy to the other position. To copy a module a) Select the checkbox next to the module to be copied from the Module Manager. b) Select the Copy icon from the menu bar. A copy of the module will be created c) Select the copy of the module. d) Change the title of the module. e) Change the position of the module. f) Select Save to commit the change to the title and position 8 Providing Staff or Parents only Areas The CMS does not currently have the ability to restrict registered content to a particular user group, such as staff members. For a Parents Only area use the registered user facility, Joomla has a plugin that allows online applications from parents to be registered that can be granted by the administrator, once verified. Then use the access level of registered for all the parent pages which are not available to the public If a Staff Only area is required, the effect can be achieved doing the following: Make all teachers and members of staff Authors or above then mark the access level of restricted pages as Special. All items with the Special access level are only viewable by users with the Author, Editor, Publisher, Manager or Administrator user type. 9 Templates Templates are used to display the content, arrange the positions used for module display and provide the overall look and feel of the website. A single template can be used to display the whole website, or specific Templates can be assigned to particular menu items to add depth and variety to the website. 9.1 To select a single template for use with the whole website: a) Select Extensions, Template Manager item on the menu bar. b) Select the radio button next to the template you wish to use. Mike Jupp October 2008 page 20 of 20

21 c) Select Default. The selected template has now become the default template for the entire site. d) A template can be specifically assigned to particular menu items to give it a different look and feel from the rest of the website. You could use this to differentiate between public, registered and Special pages for instance. e) Select Extensions, Template Manager item on the menu bar. f) Click on the name of the template you wish to use. g) Alter the option from None if this is selected by clicking Select from List. In the Menu Selection drop down select the pages you wish to use the template for from the Pages list. The list is a multi select list, so Ctrl and select can be used to select / unselect particular items, or use Shift to select a range of items. h) Select Save to save the assignments. 9.2 Installing New Templates The default CMS installation comes with a set of custom built Templates. However, you may find a Joomla! compatible template that you would like to use with your school website To install a new Joomla! template a) Download the template as a single zip file. b) Select Extensions, Install/Uninstall from the menu bar. c) Select Browse and select the template zip file. d) Select Upload File & Install to upload the file and install the new template. e) The template will be uploaded and ready for use from the Site Template Manager Similarly Templates can be deleted. a) Select Extensions, Install/Uninstall from the menu bar. b) Click on the Templates option. c) Select the tick box next to the template you wish to delete. d) Select Uninstall. The selected template will be deleted Editing Installed Templates A basic Joomla! template has two components that can be edited by Administrator s. Warning: be sure you know what you are doing or have a backup before trying to alter the template The first item is the HTML template used to generate the web pages for the template and position module positions within the template. Mike Jupp October 2008 page 21 of 21

22 The second item is the CSS style sheet that is used to give standard Joomla! classes and ids the look and feel for the template These items can be edited as follows: Select Extensions, Install/Uninstall from the menu bar. Click on the of the template you wish to edit. In the Heading for Template appear some new buttons preview, Edit HTML and Edit CSS along with the normal Save etc. To edit the HTML click the Edit HTML button. Alter with care and Click Save to save the changes. To edit the CSS click the Edit CSS button. Alter with care and Click Save to save the changes. Note: Many Templates contain additional template artefacts such as images, additional style sheets, JavaScript files and menu Templates. If you wish to edit these, you will need to get the original template package, edit it and reinstall the template. 9.3 Creating New Templates Since you can install Templates for your website, you can also create your own Templates. Creation of Joomla! Templates for your whole website is simple but not trivial. After all, you only need a single index.php and template_css.css to change the entire look and feel of the whole website. The best course of action is to download and install your own installation of Joomla! on to a locally installed version of Apache with PHP and MySQL and experiment before uploading your custom template to the school website. Just remember that a packaged template is a zip file contain the following three basic components index.php - Used to control module position of the website. css/template_css.css - Used to control the look and feel of the website. templatedetails.xml - Used to describe the template package and destination of packaged files. A good tutorial for creating W3C valid Joomla! Templates can be found at Compass Designs ( ). 9.4 The Preinstalled Templates The package comes with seven pre-installed Templates: Eg_brown 1.5 Eg_default 1.5 which is blue Eg_green 1.5 Mike Jupp October 2008 page 22 of 22

23 Eg_red 1.5 Eg_simple 1.5 Beez Rt_rokwebify Template the first four are the same in all but colour. The simple template is much the same but devoid of colour. Beez is a bit of fun with a Bee motif and RT_rokwebify is the basis for the first four in case you want to play around editing it. 10 Creating and editing content Content can be directly typed into the WYSIWYG editor or produced off line (i.e. in something like Word or other editors) and then just pasted into the editor. Pasting in content is useful in a few ways: Content already in existence need not be retyped It is easier to plan how long documents should be split up into categories or separate pages using the 'page break' button in the WYSIWYG editor. Typing long tracts into the WYSIWYG editor is not very safe because the time-out on the web site will log you off after 30 minutes and the work will be lost! When pasting in existing content split the text and images, paste the text then upload the images and put them back into the text using the Image button. This way the images are available for any future revision. If pasting from Word the JCE editor offers a special paste button which helps avoid some of the 'funnies' that this can otherwise cause. Alternatively paste the text from Word into Notepad, re-copy from there and then paste into Joomla. Mike Jupp October 2008 page 23 of 23

24 10.1 Using the TinyMCE Editor Taking them in turn left to right from the top! Bold Italic Underlined Strikethrough left justified centred right justified fully justified. Styles - caption and System Pagebreak styles can be set. Highlight the desired text and select the style. This will allow this text to be formatted based on CSS rules Format - Select pre-defined formats for Paragraph, Address, Heading1, and so on. Font Family - Select the desired font family. Note: because the font displayed to anyone browsing the page depends on what fonts are installed on their computer what they see may not be what you specified here, but it will be the same family e.g. You specify Helvetica but they don t have this and therefore get Arial which is a similar sans serif font. Unordered List, Ordered list, Outdent (move left) and Indent (indent right). Undo (Ctrl+Z) Re-do (Ctrl+Y). Insert/Edit Link. To insert or edit a link, select the linked text (or picture) and press this button. A popup dialog displays that lets you enter details about the link. Note: these are not as easy to use as the linkr option below because you have to know the URL of the target and if it is within the site these can be pretty long and convoluted! Unlink. To remove a link, highlight the linked text and press this button. Insert/Edit Image. To insert and image, place the cursor in the desired location and press this button. A popup dialog displays that lets you enter in the Image URL and other information about how the image will display. Note: The Image button at the bottom of the screen is an easier option as for this way you need to know the URL. Cleanup Messy Code. This button allows you to clean up HTML code, perhaps from HTML text that you copied in from another source. Edit HTML Source. A popup displays showing the HTML source code, allowing you to edit the HTML source code. If you understand a little about HTML this can help you where all else fails! Find and Find/Replace. Insert Date, Time Emotions. It s easy to get carried away with these! Insert Embedded Media. To insert embedded media (such as Flash), place the cursor at the desired location and press this button. A popup dialog will display that allows you to enter the Type, File or URL, and other information about the media. This could be used for inserting short film clips or podcast items. Direction Left to Right and Direction Right to Left. These buttons allow you to enter or change the text direction, for example for languages that read right to left. Insert New Layer, Move Forward, Move Backward, Toggle Absolute Position. For working with layered items. This can be quite useful for overlaying text on a diagram or adding names to picture. Select Text Color. Insert Horizontal Ruler. Remove Formatting. Toggle Guidelines/Invisible elements. E.g. the box around a table or layer Subscript Superscript Insert Custom Character Insert New Table, Table Row Properties, Table Cell Properties, Insert Row Before, Insert Row After, Delete Row, Insert Column Before, Insert Column After, Delete Column, Split Merged Table Cells, Merge Table Cells. Toggle Full Screen Mode. Edit CSS Style. A popup dialog box displays that allows you to enter CSS style information for the selected text. Used sparingly to make text different from the surrounding. Mike Jupp October 2008 page 24 of 24

25 10.2 Using the JCE 1.5 Editor The Help button your first stop if you want to know how to do things! New Document - Clears the Editor contents to create a new document Undo Redo Bold - Shortcut Key - CTRL+B Makes selected text bold Italic Underline StrikeThrough Left Justify Center Fully Justified Right Justify Style Select Format standard HTML formats H1 etc. Numbered List Creates a numbered (ordered) list Bulleted List or unordered list Indent moves text in by one tab Outdent reverse of above Subscript Superscript Code Cleanup - highlight text and click this if you start getting strange things Remove Format removes, bold, underline etc Copy, cut and paste Paste from Word - Cleans Word HTML before pasting. Paste as Text - Removes all formatting before pasting. Select All - Selects all Editor contents. Find and Find/Replace Creates anchor links Character Map for inserting unusual characters e.g. widgets Select Font family - Select the desired font family. Note: because the font displayed to anyone browsing the page depends on what fonts are installed on their computer what they see may not be what you specified here, but it will be the same family e.g. You specify Helvetica but they don t have this and therefore get Arial which is a similar sans serif font. Select Font Size try to use the format to adjust the font size. Doing it this way prevents users from altering the size of the text and therefore can disadvantage partially sighted people. Font Background Colour Font Colour Directionality.useful for Arabic or similar languages which go right to left. Table commands Insert table, delete column, delete row, insert column to the right, Insert column to the left, insert row below, insert row above, row properties, cell properties, split merged cells, merge cells and delete table. Insert new layer, move layer forward, move layer back, toggle absolute postion. Mark text as:- abbreviation (for text readers), acronym (for text readers), Citation, deleted or inserted (for XHTML), Edit HTML attributes Styles - edit CSS style for highlighted item Emoticons Unlink Basic Link insert Image Manager upload, search for and manage images Advanced Link shows HTML Spell Checker Full screen Preview Print Show formatting Characters returns Read More Horizontal Rule See ghosted lines around table cells to help format Insert non-breaking space

26 10.3 Additional functions available when editing an Article in any editor Underneath the editing window there are three buttons which give access to additional editing functions: Image This preferable to using the image button in the Editor which may require you to know the URL of the image you are inserting. Clicking on the Image button brings up this screen: As you can see the top section allows the user to navigate through the images directory. In the main body thumbnails of the current directory contents are displayed. Clicking on an image fills in the URL box automatically. The user should fill in the other two boxes; the first is used by text readers and makes the site more usable by partially sighted people and the second is the pop up that appears when the picture is hovered over. When happy set the alignment (default is left) and tick the caption box if the title is to appear under the picture. Finally click the Insert button and the image will be placed at the cursor position in the Article being edited. If no pictures are suitable by scrolling down the Upload Section becomes visible: Click the Browse files button to find a suitable file on the local computer, select the file and Click Start Upload to move the file into the current directory (selected as above). Once the file is uploaded the procedure for inserting is the same as above.

27 Pagebreak Clicking this prompts for a name for the new page which will be displayed by default top left of the page. The effect on the Article is to break up the text into pages which the browser can then move through using next, previous navigation buttons. This is useful where an Article would be so long that the viewer would have to scroll down to read it all Read more As space on the front page of the site is limited this feature allows a teaser of a few lines to appear with a link to the complete text. Clicking this puts a line across the page to indicate where the split will occur. To use this make sure you choose the option to publish the Article on the front page! Linkr First highlight the text you want to hyperlink then click on this button; this screen appears: As you can see the default is to link to Articles. If you know where the Article is filed then use the pick drop down to find the folder containing it. A further set of boxes appears and by selecting from them you get to the Article of your choice which is displayed below so that you can be sure it is the right one. Note: if the folder structure is quite complex it might be necessary to choose from several boxes before getting to the right file, here I have only gone down one level but the process is the same.

28 Now clicking on Get Link will close the popup box and insert a hypertext link at the cursor position. For more control over the appearance of the link click the Configure Link alternative Text is the text displayed which will be hyper linked. Page target enables the hyper linked content either to be displayed on the same page i.e. replacing the current page or to appear as a new page. Probably the latter is safer because in the first case closing the page will most likely close the browsers link with the site whilst the second option when closed will just return the browser to the previous page. Title/Tooltip is the text displayed when the link is hovered over. Class is the CSS class to be used to display the link, leave this blank unless you have added a class. Rel is a way of categorising (Related) links that linkr uses, by default this functionality is not enabled. The Menu link puts special characters in the HTML to enable linking again not normally used. The above dealt with putting an Article in, by clicking the Files, Menus or Contacts links at the top of the linkr screen it is possible to hyperlink these resources with much the same process. If you don t know where the Article you are trying to link to be situate, put a bit of text which appears in the desired Article in the right hand box and click the Search button. Linkr will display all the Articles which have that text with a Pick button against each entry. Just click on the one you want and then proceed with the Get Link or Configure link as appropriate.

29 11 Glossary: Article (Item) - a blog-like text entry that may include photos and hyperlinks. Every Article/Item must have a Title and a body of content. Publication dates, Keywords, and other parameters are useful but optional. The Article can have a read more break so that the introductory text is shown on the front page and the rest of the Article is included elsewhere. Back end a complex user interface reserved for the site s administrator for the management of all details of the site s look, feel, features, content, security, etc. Category a subset of Section content. Think of it as a capital-letter item in your site s content outline. All Articles must belong in a Category. If you do not see an appropriate one, contact your site s Manager. Document a resource that is intended for download. PDF, Word, Excel and PowerPoint files are examples of files. They are organized in Folders (also called Categories). They can be easily managed with DocMan a Joomla plugin already installed on the site. Front end a familiar streamlined web interface used by contributors to manage their content. Section major content heading. Think of it as a Roman numeral item in your site s content outline. Public, Registered, Special the three levels of users for restricting viewing of pages: User level Users who can view Public Everyone Registered Special Registered and all those in Special Just Author, Editor, Manager, Administrator and Super Administrator