Web Development School of Arts and Sciences · Page 3 Joomla! Website Management and Editing WELCOME School of Arts & Sciences, Web Development Once you arrive: 1. Login to the workstation

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!


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


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


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.


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


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


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.


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.


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


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’


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.


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


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


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

Documents

Web Development School of Arts and Sciences · Page 3 Joomla! Website Management and Editing WELCOME School of Arts & Sciences, Web Development Once you arrive: 1. Login to the workstation