Joomla Website User Guide

Transcription

1 Joomla Website User Guide

2 Table of Contents Introduction... 3 Editing pages... 4 Styling content... 5 Hyperlinks... 6 Inserting an image... 7 DOCman Glossary of terms

3 Introduction Your website is built using a content management system (CMS) called Joomla. Joomla is one of the world s most popular CMS. With millions of websites running on Joomla, the software is used by individuals, small & medium-sized businesses, and large organisations worldwide to manage a variety of websites and web-enabled applications. Your site is using a WYSIWYG content editor called JCE (Joomla Content Editor) which has Office-like functions and familiar buttons. If you have queries that are not answered by this guide, ask for help from the CSU digital team via Robert Smith (robert.smith26@nhs.net) or visit JCE s site at Your site is using a document management system called DOCman. DOCman is a document and download management solution for Joomla. It has an intuitive and simple to use administration interface. For more information on DOCman visit their site at Frontend/Backend Frontend refers to all interactions that take place through main public interface of your website. Backend refers to all interactions within the administration section of your CMS that is not publicly accessible. Articles In Joomla, an Article is a piece of content consisting of text (HTML), possibly with links to other resources (for example, images). Articles are the basic units of information in the content system and the bottom level in the content hierarchy. Categories A Category is a collection of Articles. Categories can contain child categories. Categories are maintained using the Category Manager which can be reached in the Administrator (Backend) by clicking on the Content menu, then the Category Manager menu item. If you would like to know more about this, please go to 3

4 Editing pages To add a new article to your site you will need to do the following Log in to Joomla by entering the web address in the address bar of your browser followed by /administrator. Login using your username and password: From the dashboard click on Articles on the left. Here you can either click on New to create a new article or click in search and type the name of an existing article. When your article opens it will look similar to this: Here you can edit the text in the Word style text editor. Once you have added your content to the page simply click on the Save & Close button at the top. 4

5 Styling content Styling the content is similar to using Word. For bullet points and number points simply click on the button you want to use. You can also do other similar Word-type styling like justification, bold and italics. Copy and paste content You can copy and paste content from other documents like Word, Powerpoint and s. Copy your content using Ctrl + C and paste into the text editor field. Next, highlight the text and if you are copying from Word or Powerpoint, click on the Remove formatting button. This will then remove any rogue code that may have been brought across. Alternatively, if you are copying from an , click on the Cleanup HTML button. Again, this will remove any rogue code that was in the . If you do not use one of these buttons when copying over from another application, it can cause problems with formatting and you may find the text appears in the wrong font, wrong font size and that numbered points and bullet points are thrown out, etc. 5

6 Hyperlinks If you need to add hyperlinks to a page, highlight the text that you want the link to be and click on the hyperlink button. A pop up will appear. Here you can insert an external hyperlink or link to an existing page in the site. To add a hyperlink simply type or paste in the URL you want to use in the URL field. If it s an external hyperlink, click on the Target dropdown and select Open in new window and click on the insert button. The pop up will close. Click on Save. 6

7 Inserting an image If you need to add an image to a page then click on the insert/edit image button. A pop up will appear. Here you can use an existing image or upload a new one. To upload a new image first off make sure you have a folder called Images. If not, then create a new one. You can do this by clicking on the new folder button. A new pop up will appear. Type the name of the folder, for example, Images and click OK. Please do not use any spaces in the folder name because you will encounter problems later. If you do need a space, use an underscore _. 7

8 The folder will now appear on the left hand side under Folders. Click on the folder and then click on the upload image button. 8

9 Click on the browse button and then locate your image on your system and click Open. Then click on Upload. You should then see the image listed in the directory and ticked showing the image details. Click on the image you have just uploaded so the URL is populated with the image path. 9

10 If you insert an image into your text and it appears too large or doesn t fit, then you will need to change the image properties. The first and most important are the Dimensions. As a general rule, it s always better to resize your image before you upload it to your site. If you don t have an image processing application, you can use a web based one at This application will allow you to resize, crop and add special effects to your image. An appropriate size for an image would be roughly 250 pixels wide. The size of course depends on the type of layout you are using. Therefore, if your uploaded image is too big then the easiest way to change the size is by changing its Dimensions. Make sure that the Proportional box is ticked and add the desired width. The height will adjust too. In general, it is best to place an image on the right hand side of an article/page. To do this choose Right under the Alignment dropdown box. It is also good to have some space between the image and your text so put 10 into the appropriate Margin field and it will create the space for you. 10

11 DOCman Add a file To add a new file you will need to log into Joomla. From the Control Panel, click on the Components dropdown at the top of the screen and select DOCman. DOCman consists of 3 parts Files, Documents and Categories. Files these can be in many formats, i.e., Word, Excel, Powerpoint, PDF, etc. Documents this is where you can change the title of the file you ve uploaded to make it say something more meaningful to a web visitor and you can also choose what category your document belongs to. Categories these are the sections where your documents will belong to. For example, Governing Body Papers. To begin with, ensure that your file is in an easily accessible place such as your Desktop. Then in DOCman, click on Files in the top left of your screen and click on the green Upload button. A pop up will appear. Drag your file on screen and click on the blue Start upload button. 11

12 The file will start to upload and when finished will say 100% under the Status column and the Create documents button at the bottom of the screen will turn blue. Click on Create documents. On the next screen that appears you can choose the Category you would like your document to appear in, give it a more meaningful Title and add a description if you wish. Once you re finished click on Save & Close. 12

13 Inserting a DOCman file into an article/page To insert a document that has been uploaded to DOCman simply follow these steps: In the text editor highlight the text you want to become the download link and click on the Document button beneath the text editor. The following screen will appear. On the left, is a tree showing all of the different DOCman categories. Select the Category that your document is in. Once selected, the right hand pane will display the list of documents in that Category. Select your document and click on the Insert document link button. This should have inserted the hyperlink in the content. Click on Save & Close on the article. 13

14 Glossary of terms Term Joomla Content Management System (CMS) HTML Articles WYSIWYG editor Document management Frontend/Backend Definition Joomla is a free and open source CMS or content management system for publishing content on the World Wide Web and intranets. A web content management system or CMS is a bundled standalone web application to create, manage, store and deploy content on webpages. Web content includes text and embedded graphics, photos, video, audio and code (e.g., for applications) that displays content or interacts with the user. HyperText Markup Language (HTML) is the main markup language for creating webpages and other information that can be displayed in a web browser. In Joomla! an Article is a piece of content consisting of text (HTML), possibly with links to other resources (for example, images). Articles are the basic units of information in the content system and the bottom level in the content hierarchy. A WYSIWYG editor is a system in which content (text and graphics) displayed onscreen during editing appears in a form closely corresponding to its appearance when printed or displayed as a finished product, which might be a printed document, webpage or slide presentation. WYSIWYG is an acronym for what you see is what you get. A document management system (DMS) is a computer system (or set of computer programs) used to track and store electronic documents. Frontend refers to all interactions that take place through the main public interface of your website. Backend refers to all interactions within the administration section of your content management system that is not publicly accessible. 14