Emily Grotta & Susan Harris Last Updated: May 3, 2018 Website Training May 2018 Emily Grotta & Susan Harris Last Updated: May 3, 2018

Goal Gain basic knowledge of structure of LLL website Learn to add text to an article Learn to add hyperlink – either website or email Learn to insert and format photo Be ready to practice at home on https://lisatest.cloudaccess.host/

An Introduction to Joomla Joomla is the software frame for www.lifelonglearningatpc.org Joomla is a CONTENT MANAGEMENT SYSTEM which means Multiple users have different permissions depending on need Web pages are built by bringing content into pre-designated areas of a web page that are pre-established through templates Content may be text, photographs, documents, web links, lists of events, calendar dates, etc. Joomla has a FRONT end (regular website) and a BACK end for administration For this session, work will be on the FRONT END ONLY

Modules on Home Page Top Menu Photo display Left Column Donate What’s New All Star Award Center Text – articles Search User menu Quick links

Building Web Pages – The Hierarchy This part will be done for you! Before content can be created, the following steps must happen: Articles categories created (classes, trips etc.) Article content created with WYSIWYG editor After article(s) created, web pages created Pre-designed templates for each section of the web Template will have module where article or other content is placed Once page is created and its position in menu determined, article is placed in its spot and can be edited.

Joomla Front End The site you know – the public face Depending on permissions, appearance may vary Not signed in Registered user

Let’s Get Started! Go to https://lisatest.cloudaccess.host Sign in with your user name and password Last item on menu is TESTING. Use dropdown to go to page with your name

Let’s Get Started! Click on “gear” and then the Edit menu to edit article Editing screen is similar to Word; a WYSIWYG editing software

Article Editing Template preset for text & headline font color Adding text: Basic “cut and paste” to notepad Then “cut and paste” to web Failure to do this creates messy html which is hard to correct

Article in html You do NOT need to know or understand HTML !

Basic Text Editing Functions Text Attributes Preset for heading 2 and text (paragraph) Preset colors may not be seen in the editor Bold Select text you want to have bold Click on the “B” icon

Adding Website Hyperlink In text of article, select text for name of site (i.e., LifeLong Learning, speaker’s website, etc.) Click on icon for web link Pop-up window appears: in first box add the url by copying and pasting the url from the target site Click “Insert” at bottom of window

Adding E-mail Hyperlink NEVER put email address directly into article to avoid “phishing attacks.” In text of article, select name of person. Click on icon for weblink. In the pop-up, in the first box click on the mail icon. In the “Create E-mail Address” box type the e-mail address. Type in subject and click “Create Email” Click “Insert” at bottom of window SAVE article and check hyperlink Adding E-mail Hyperlink

Adding Pictures Best to insert photos, not added as a URL Photos are stored in folders by topic Photos should be jpeg and minimized in size for quick display Go to area where photo is to be inserted and click on photo icon

Adding Pictures Image manager defines photo Chose image from folder Provide alternate text (name of person, place) Dimensions depend on placement, photo shape, etc. but first dimension generally 150-200 Alignment right or left; face should look into the text Type 10 in top margin Insert

Words of Caution Save, Save and Save your work! Practice in your designated area Practice and have fun! As long as you stay away from other pages, no problem!

More Resource Online demonstration site: http://demo.joomla.org/ You Tube videos How to edit in Joomla video How to edit existing article - website

Thank You!!!