Joomla!WebsiteManagementandEditingInstructorforthisWorkshop
WebDevelopment
SchoolofArtsandSciences
Joomla!WebsiteManagement&Editing-January5,2017
2
TABLEOFCONTENTS
Welcome.........................................................................................................................................................................................3WhatisJoomla?............................................................................................................................................................................3JoomlaAdministratorOverviewLogin.................................................................................................................................4JoomlaBackendInterface.............................................................................................................................................................................5
HowisJoomla!Organized?.........................................................................................................................................6
CreateContentinJoomla!...........................................................................................................................................8WorkwithCategories.................................................................................................................................................................9CreateCategory.................................................................................................................................................................................................9CategoryPageDetails.....................................................................................................................................................................................9CreateCategory-Practice.........................................................................................................................................................................10
WorkingwithArticles.............................................................................................................................................................11CreateNewArticle........................................................................................................................................................................................11NewArticleDetails.......................................................................................................................................................................................12CreateArticle-Practice..............................................................................................................................................................................12FindArticleinArticleListing...................................................................................................................................................................13FindArticlewithinaCategory.................................................................................................................................................................13
ArticleEditing............................................................................................................................................................................13AddStylestoTextinArticles...................................................................................................................................................................14UseParagraphHeadingStyles.................................................................................................................................................................15CopyTextfromMSWord...........................................................................................................................................................................16UsingImagesinJoomla!.............................................................................................................................................................................16
CourseAccessibilityGuidelines...........................................................................................................................................19CreateMultipleArticles–GroupPractice........................................................................................................................19
WorkwithMenusinJoomla.....................................................................................................................................20Whatisamenu?........................................................................................................................................................................20CreateaNewMenuItem.........................................................................................................................................................21CreateaSingleArticleMenuItem..........................................................................................................................................................21CreateSingleArticleMenuItem–GroupPractice..........................................................................................................................22CategoryBlogMenuItem...........................................................................................................................................................................22CreateaCategoryBlogMenuItem........................................................................................................................................................22CreateaCategoryListMenuItem..........................................................................................................................................................23
OrderMenuItems.....................................................................................................................................................................24AddReadMore–TeaserText..................................................................................................................................................................25
HideIntroText..............................................................................................................................................................26Purpose:.......................................................................................................................................................................................26Howtoimplement:...................................................................................................................................................................26ClassRecap..................................................................................................................................................................................28
Page 3
Joomla!WebsiteManagementandEditing
WELCOMESchoolofArts&Sciences,WebDevelopment
Onceyouarrive:
1. LogintotheworkstationwithyourNetID2. Openawebbrowser(FirefoxorChrome)
3. Gotothewebsite:http://www.sas.rutgers.edu/cms/sandbox3
WHATISJOOMLA?Joomla!isContentManagementSystem(CMS)softwarethatrunsonawebserver,andallowsyoutoupdateyourunit'swebsitethroughabrowser(suchasGoogleChrome,MozillaFirefox,orSafari).
Acontentmanagementsystemisolatestheprocessofupdatinginformationfromthemoretechnicalaspectsofupdatingawebsite(suchasadministration,configuration,anddesign),andeliminatestheneedtoeditHTMLorusewebdesignsoftware.
Visitwww.joomla.organdhelp.joomla.orgformoreinformationonJoomla!
Joomla!WebsiteManagement&Editing-January5,2017
4
JOOMLAADMINISTRATOROVERVIEWLOGINJoomlahasa‘backend’anda‘frontend’.
Thefrontendallowsyoutoviewthewebsite,andalsomakesomebasiceditstothesite.TheAdministratorBackendgivesyoumuchmorecontrolofthesystem.
Openanewtabinyourbrowserto:(openaFRONTENDVIEWofthewebsite)
http://www.sas.rutgers.edu/cms/sandbox3/
Toopenanewtab:Ctrl+T(Windows)orCommand+T(Mac)
2.OpenthenewbrowserwindowtotheBACKENDview
administrator
1.ClickontheNEWtaboption
2.IfyouDRAGthe‘tab’outsideofthebrowser,youwillcreateanewbrowserwindow.
2
ClickLoginButton
Someofouroldersystems,haveaslightlydifferentlogindisplay
LoginwithyourNETIDusernameandpassword.
Page 5
JOOMLABACKENDINTERFACE
TopMenu
PreviewWebsite
Joomla!WebsiteManagement&Editing-January5,2017
6
HOWISJOOMLA!ORGANIZED?InformationinJoomla!isorganizedasfollows:1.Categories
• ConsideraCategorysimilartoaFOLDER.Eachcategoryshouldexistifyouhavemorethan3‘articles’or‘pages’toputinsideofit
• CategoriescanbeNESTED(meaningeachcategorycanhaveaparentcategory)2.Articles
• Anarticlecanbeconsideredapageora‘pieceofpaper’thatwillbeplacedinsideofafolder(orcategory).• JustbecauseyoucreateanArticledoesNOTmeanyouwillseea‘link’toitonthewebsite!
3.Menus
• A‘Menu’isacompletemenusuchas:MainMenumaygoacrossthepage,FooterMenumightbeatthebottomofthepage
• EachMenuITEMisanindividuallinktosomething.• Amenuitemcanbealinktomanydifferentthingssuchas:
1.AnIndividualArticle 2.ACategoryBlog/CategoryList 3.Aspecific‘tool’,suchasanEventCalendar4.Modules
• AModuleisa‘miniprogram’thatcanbeplacedinpositionsonthepage.• AModulecandisplayonspecificpages;onpageswhereitisnotdisplayed,the‘content’willspreadout
appropriately.
Page 7
MainMenu(ActualMenu)
FooterMenu
ContactUsàMenuITEM
WhoWeAreàMenuITEM
Article(WhoWeAre) SampleModule
Joomla!WebsiteManagement&Editing-January5,2017
8
CREATECONTENTINJOOMLA!
TodayourfocusisworkingwithCONTENTinJoomla:
-Categories,ArticlesandMenuItems
The“CAM”Method
Usingthissequencewillassistyouinbuildingyourcontenteffectively.
Iforganizedproperlyyoucandosomeveryexcitingthingsonyourwebsite.
Page 9
WORKWITHCATEGORIESCategoriescanbethoughtofasfoldersthatholdyourarticles.Categoriescancontainnotonlyarticles,butadditionalcategories(calledsubcategories).Acategorythatcontainssubcategoriesissaidtobethe"parent"ofthosesubcategories.
CREATECATEGORYClickonCategories,clickAddNewCategoryfromthetopmenu,orclickontheNEWbuttononceontheCategoriespage.
CATEGORYPAGEDETAILSWhencompletedworkingwiththecategory,clickSAVE&CLOSE.
TopMenu:
ContentàCategories
ClickonCategoriesontheLEFTSide
TitleofCategory
CategoryDescription
(Cannoteditfromfrontend)
Alias:LeaveBlank(willauto-generate)
Verifywhereyouare,bylookingattitleontopofpage.
ParentCategory
Determinesthe‘hierarchy’or‘nesting’ofthecategories.
Joomla!WebsiteManagement&Editing-January5,2017
10
CREATECATEGORY-PRACTICE
GroupPractice–CREATECATEGORY:
1. CreatenewCategory2. NameCategory:YOURNAME–MONTH–YYYY3. ParentCategory:ADMINISTRATORWORKSHOPS4. Save&Close(TopLEFT)
Page 11
WORKINGWITHARTICLESThearticleisthebasicbuildingblockofyourJoomla!Website.Itcanbethoughtofasanindividualwebpage.Anarticlecancontainformattedtext,images,embeddedvideo,andlinkstootherarticlesorexternalwebsites.Articlesareorganizedbybeingsavedintotheappropriatecategories.
• Note,justbecauseanarticleiscreated,itwillNOTautomaticallybedisplayedonthewebsite.
CREATENEWARTICLE
ContentàArticles,clickAddNewArticle
OnLeftside,clickNewArticle
Joomla!WebsiteManagement&Editing-January5,2017
12
NEWARTICLEDETAILS
CREATEARTICLE-PRACTICE
EnteraTitleFortheArticle LeaveAliasBLANK
SelectaCATEGORYforthisarticle
AddDescriptiontoTextArea,thisisyourtextforthearticle
GroupPractice–CREATEARTICLE:
5. CreatenewARTICLE6. NameArticle:YOURNAME–Article#17. ParentCategory:Thecategoryyoujustcreated8. Save&Close(TopLEFT)
Page 13
FINDARTICLEINARTICLELISTINGFindyourarticleinthearticlelistingscreen(Content!Articles).Ifyouknowapartofthearticletitle,itcanbetypedintothesearcharea.
FINDARTICLEWITHINACATEGORYIfyouknowofthecategorythatthearticleisin,ithelpstosearchbythecategory.Changethecategorytothecategoryyouarelookingin,onlythosearticleswillappear.
ARTICLEEDITINGSelectthearticlebyclickingonthearticletitle,thiswillbringyoutotheArticleEditpage.
TypeArticleName
ClickSEARCH
ClickSearchTools
ClickonSelectCategorytofindCategory
ClickonArticleTitletoEDITarticle
Joomla!WebsiteManagement&Editing-January5,2017
14
ADDSTYLESTOTEXTINARTICLESWhileeditinganarticleitispossibletochangebasicformattingofyourtext.Forexampletomakethetextred,highlightthetextandselect,‘red-text’or‘red-phrase’fromtheparagraphdropdown.Allofthesestylesaredefinedatthetemplatelevel,sotheyareeasytoapply,andwillkeepastandard‘look’onyourpages.
Aguidetoalleditorbuttonscanbefoundbelow:
https://www.joomlacontenteditor.net/support/documentation/56-editor/340-editor-buttons
Highlightthetextyouwanttoapplythestyleto.
ClickontheSTYLESdropdownandselectthestylethatyouwouldliketouse.
Page 15
USEPARAGRAPHHEADINGSTYLES
HeadingStylesshouldonlybeusedtodefinea‘hierarchy’ofinformationinyourarticle.Userswithdisabilitiesoftenrelyonscreenreaderstonavigateawebpagebasedontheplacementofheadingswithinthetext.
Forexample:
Selecttextthenclickonthe‘Paragraph’dropdowntoselectaheadingstyle
UsingHeading3,thesedefinethedifferentareasofthearticle.
Joomla!WebsiteManagement&Editing-January5,2017
16
COPYTEXTFROMMSWORDDon’tdoit!!!HereisanexampleofwhathappenswhenyoucopyandpastedirectlyfromMSWord:
Ifyoulookatthe‘code’ofthearticleitaddsmanycodesthatcan’tbeeasilyeditedbyyou…
Herearethestepsofhowtocopyandpastecorrectly…
1.CopyfromMSWordtheinformationthatyouneed
2.AnotheroptionistocopytheinformationfromMSWordthenPasteitintoNotePadonyourlocalPC.ThencopyandpastefromtheredirectlyintoJoomla!
USINGIMAGESINJOOMLA!1.Besureyouhavecopyrighttousetheimagesonapublicwebsite
2.Ifyouareusingimageswithstudents,besureyouhavetheauthoritytousethoseimagesonthewebsite.
ClickonPasteasPlainText
Hit<CMD><V>or<CTRL><V>onyourkeyboard,andpasteyourtextintothepopupscreen.
ThenclickInserttoinsertthetext.
Page 17
3.ThereareimagesavailabletousethroughSASCommunicationsDepartment
4.AsasuggestionImagesshouldberesizedPRIORtouploadingthemtoawebsite.Asa‘max’width1200px,mostimagesshoulddisplaymuchsmalleronawebpage.
5.Imagesmustbeonyourcomputeroronanetworkdriveinordertoaddimagestothewebsite.
HowtoAddimagestoyourJoomla!article
WorkingwiththeimageinyourArticle
Placecursorwhereyouwanttheimagetogo.
ClicktheInsert/EditImagebuttonontheeditorbar.
Image‘popup’displaysallofthedifferentoptionsyoucansetforanimage.
Clickon‘upload’touploadanewimage
BesuretoclickonthefolderFIRST,thisiswheretheimagewillgetuploadedto.
ClickBrowsetoselectanimagefromyourcomputer.
Or‘DROP’filesfromyourcomputerdirectlyintothispage
ClickUPLOADtouploadtheimage
OnthenextpagebesuretoSELECTtheimage,thenclickinserttoaddittoyourarticle.
Joomla!WebsiteManagement&Editing-January5,2017
18
Selectimage(YouhavetoSELECTITTOAFFECTIT!)
ClickontheInsert/EditImageIcon
1.ALTERNATETEXT:Veryimportanttomakethismeaningful(forSEOandAccessibility)
2.Alignment:SettoLEFT
3.UnlocktheMarginLock
4.SetRight10,Bottom10(suggestion)
4.Noticethepreviewonthetopright
Page 19
COURSEACCESSIBILITYGUIDELINESIfyourunit'swebsitecontainsanycoursemanagementmaterials,pleasebeawareofthenewlyissuedCourseAccessibilityGuidelines,whichyoucanfindat:
https://accessibility.rutgers.edu/wp-content/uploads/Rutgers-Course-Accessibility-Guidelines.pdf
SomeoftheguidelinesrelevanttoJoomla!articlesare:
• Useboldoritalictexttoconveyemphasisinsteadofusingunderlines,colors,orwritingwholesentencesinallcaps
• Createbulletedornumberedlistsbyusingthetoolbarinsteadofmanuallytypingthecharactersornumbers• InsertactivehyperlinksforallURLsinyourdocument.Insteadofusing“Clickhere”,theanchortextshouldbe
descriptiveofwherethelinkwilltaketheuser.
CREATEMULTIPLEARTICLES–GROUPPRACTICE
GroupPractice–CREATEARTICLES:
1. CreatenewARTICLEs2. NameArticle:YOURNAME–Article#2–Article#33. ParentCategory:Thecategoryyoujustcreated4. Save&Close(TopLEFT)5. Createatleast3articlesinthiscategory
• Addimages• Addalink• Trydifferentstyling
Joomla!WebsiteManagement&Editing-January5,2017
20
WORKWITHMENUSINJOOMLA
WHATISAMENU?MenusinJoomlarepresenttheLINKSthatyoucanseeinthefrontendtoaccessdifferentpagesinyourwebsite.
Keepinmind,justbecauseyoucreatean‘Article’inJoomlaalinkwillNOTautomaticallydisplay.
AMenuisa‘group’oflinkstovariousplaces.EachLinkisaMenuItem
TypesofMenus:
• MainMenu–Themenuacrossthe‘mainbar’• RutgersMenu–Themenuontheverytopofthepage• FooterMenu–Themenuattheverybottomofthepage
AMenuITEMcanlinkto:
• Article• CategoryBlog(MultiplearticlewithTeasers)• CategoryList• EventsCalendar• ExternalURLorWebsite
RutgersMenu
MainMenu
MenuITEM–TEST(AmenuITEMisanindividual‘link’toaplace.
Page 21
CREATEANEWMENUITEMClickAddNewMenuitem,oronceontheMenuItemManager,clicktheGreenNewButton.
CREATEASINGLEARTICLEMENUITEM
DefineyourSingleArticleMenuItem
Clickon:
MenusàMainMenu
NormallyyouwillbeaddingmenuitemstotheMAINMENU
ClickonGreen‘NEW’ButtonfornewmenuItem
SelectMenuItemType
SelectSingleArticle
SelectyourArticle
MenuItemTitle(DisplayedintheMenu)
ParentItem
Thisdefineswhatmenutheitemis‘placedunder’
Joomla!WebsiteManagement&Editing-January5,2017
22
CREATESINGLEARTICLEMENUITEM–GROUPPRACTICE
CATEGORYBLOGMENUITEMAcategoryBlogMenuitemtypecanbeconsideredatypeofpagethatshowsseveral
articlesandincludes‘teaser’textforeacharticlethatisinthecategoryselected.
Thispagecanbeusedforanycategorythathasseveralarticlesinit.
CREATEACATEGORYBLOGMENUITEM
CategoryBlogDefinitions
1.SelectMenuItemType
2.SelectCategoryBlogorCategoryList
GroupPractice–CreateSingleArticleMenuItem
o CreateNewMenuITEM–InMainMenuo MenuTitle–YourNameo ParentItem:Jan5Class
#LeadingArticles:Articlesthataredisplayed,willalwaysbein1column.
#IntroArticles:#Articlesdisplayedin‘columns’,if2columnsareselectedthesearticleswillbedisplayedin2columns.
#Links,linksdisplayedtomorearticlesthatarenotshownfromabove.
Page 23
SampleCategoryBlogviewwith2columns
CREATEACATEGORYLISTMENUITEM
DisplayofCategoryListItem
OntheListLayoutsTabthereareseveraloptions
1.Candeterminewhatfieldsaredisplayedinthelist
2.TheArticleOrdering(Whichcanbedoneatthebloglevelaswell)canbedetermined.
Joomla!WebsiteManagement&Editing-January5,2017
24
ORDERMENUITEMS
1.Placemouseon‘3blackdots’
2.Dragtheitems
3.ThiswillonlyRESEQUENCE,NOTCHANGETHEPARENTITEM.
4.TochangethePARENT,editthemenuitem.
Page 25
ADDREADMORE–TEASERTEXTIfyourarticlehasasignificantamountoftext,andyouwanttodisplaymultiplearticlesonthesamepageusingaCategoryBlog(Discussedinthemenussection),addinga‘READMORE’linemeansthatanythingabovethelinewillbedisplayedonthe‘blogview’,andtheentireariticlewillbedisplayedonceyouclick‘ReadMore’.
AddReadMoreinyourArticle
WithoutReadmore
WithReadmore/teaser
Placecursorwhereyouwantthereadmore
ClickontheReadmoreButton
Joomla!WebsiteManagement&Editing-January5,2017
26
HIDEINTROTEXT
PURPOSE:Ifyouwantyour‘teasertext’tobedifferentthanwhenyoulandontheactualpage,itispossibletoHIDEtheintrotext.Thismeansyoucanhaveadifferentimageonthe‘teaser’thanontheactualpage.Forexamplethe‘teaser’canhaveasmallimage,andonthelandingpageyoucansetupalargeimage,anddifferenttext.
Endresult:
1.SeesamplecategoryBLOGview
2.SeesampleCLICKREADMOREview
HOWTOIMPLEMENT:1.adda‘readmore’lineinthearticle
2.AnytextABOVEthereadmorelineisconsideredINTROTEXT
Page 27
3.AnytextBELOWthereadmoreisconsidered‘mainbodyTEXT’
4.AttheARTICLElevel,settheoptions(clicktheoptionstab)
Introtext!HIDE
Joomla!WebsiteManagement&Editing-January5,2017
28
CLASSRECAPo JoomlaBackendInterfaceo HowisJoomla!Organized?o CreateContentinJoomla!
o WorkwithCategorieso WorkingwithArticleso CreateNewArticleo NewArticleDetailso FindArticleso ArticleEditing
" AddStylestoTextinArticles" UseParagraphHeadingStyles" CopyTextfromMSWord" UsingImagesinJoomla!
o CourseAccessibilityGuidelineso WorkwithMenusinJoomla
o CreateaSingleArticleMenuItemo CategoryBlogMenuItemo CategoryListMenuItemo OrderMenuItemso AddReadMore–TeaserTexto HideTeaserText