Web Development School of Arts and SciencesSchool of Arts and Sciences ... software that runs on a...
15
Joomla! Frontend Editing Instructor for this Workshop Web Development School of Arts and Sciences
Transcript of Web Development School of Arts and SciencesSchool of Arts and Sciences ... software that runs on a...
Joomla!FrontendEditingInstructorforthisWorkshop
WebDevelopment
SchoolofArtsandSciences
Joomla!Front-EndEditing
2
TABLEOFCONTENTS
Welcome.........................................................................................................................................................................................3WhatisJoomla?............................................................................................................................................................................3JoomlaOverviewLogin..............................................................................................................................................................4
HowisJoomla!Organized?.........................................................................................................................................5
EditingContentinJoomla!..........................................................................................................................................7WorkingwithArticles................................................................................................................................................................8ArticleEditing...............................................................................................................................................................................8AddStylestoTextinArticles......................................................................................................................................................................8UseParagraphHeadingStyles....................................................................................................................................................................9CopyTextfromMSWord...........................................................................................................................................................................10UsingImagesinJoomla!.............................................................................................................................................................................11
CourseAccessibilityGuidelines...........................................................................................................................................15
Page 3
Joomla!WebsiteManagementandEditing
WELCOMESchoolofArts&Sciences,WebDevelopment
Onceyouarrive:
1. LogintotheworkstationwithyourNetID2. Openawebbrowser(FirefoxorChrome)
3. Gotothewebsite:http://www.sas.rutgers.edu/cms/sandbox3
WHATISJOOMLA?Joomla!isaContentManagementSystem(CMS)softwarethatrunsonawebserver,andallowsyoutoupdateyourunit'swebsitethroughabrowser(suchasGoogleChrome,MozillaFirefox,orSafari).
Acontentmanagementsystemisolatestheprocessofupdatinginformationfromthemoretechnicalaspectsofupdatingawebsite(suchasadministration,configuration,anddesign),andeliminatestheneedtoeditHTMLorusewebdesignsoftware.
Visitwww.joomla.organdhelp.joomla.orgformoreinformationonJoomla!
Joomla!Front-EndEditing
4
JOOMLAOVERVIEWLOGINJoomlahasa‘backend’anda‘frontend’.
Thefrontendallowsyoutoviewthewebsite,andalsomakesomebasiceditstothesite.TheAdministratorBackendgivesyoumuchmorecontrolofthesystem.
http://www.sas.rutgers.edu/cms/sandbox3/
1.ClickLogintologin
2.Clicktheloginbutton
3.LoginwithyourNetid
Page 5
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.
Joomla!Front-EndEditing
6
MainMenu(ActualMenu)
FooterMenu
ContactUsàMenuITEM
WhoWeAreàMenuITEM
Article(WhoWeAre) SampleModule
Page 7
EDITINGCONTENTINJOOMLA!
TodayourfocusisworkingwithCONTENTinJoomlaonthefrontend:
Onceineditingmode,thereare2importantpartstotheFrontEndEditor(content/publishing):
ClickontheEditIcontobegintheEditingSequence
Contentarea
TitleofArticle
Description/textinArticle
PublishingArea
Category,thisisthecategorythatitsitsin.
Status,itshouldbePUBLISHED,ifyouaregoingtoworkwithit.Ifitisn’tpublished,itwillbedifficultforyoutofindinordertoeditonthefrontend.
Featured:Onlyifinstructedtosetanitemtofeatured(canhavecertainarticlesappearinspecificplacesonthesite)
Joomla!Front-EndEditing
8
WORKINGWITHARTICLESThearticleisthebasicbuildingblockofyourJoomla!Website.Itcanbethoughtofasanindividualwebpage.Anarticlecancontainformattedtext,images,embeddedvideo,andlinkstootherarticlesorexternalwebsites.Articlesareorganizedbybeingsavedintotheappropriatecategories.
ARTICLEEDITING
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 9
USEPARAGRAPHHEADINGSTYLES
HeadingStylesshouldonlybeusedtodefinea‘hierarchy’ofinformationinyourarticle.Userswithdisabilitiesoftenrelyonscreenreaderstonavigateawebpagebasedontheplacementofheadingswithinthetext.
Forexample:
Selecttextthenclickonthe‘Paragraph’dropdowntoselectaheadingstyle
UsingHeading3,thesedefinethedifferentareasofthearticle.
Joomla!Front-EndEditing
10
COPYTEXTFROMMSWORDDon’tdoit!!!HereisanexampleofwhathappenswhenyoucopyandpastedirectlyfromMSWord:
Ifyoulookatthe‘code’ofthearticleitaddsmanycodesthatcan’tbeeasilyeditedbyyou…
Herearethestepsofhowtocopyandpastecorrectly…
1.CopyfromMSWordtheinformationthatyouneed
2.AnotheroptionistocopytheinformationfromMSWordthenPasteitintoNotePadonyourlocalPC.ThencopyandpastefromtheredirectlyintoJoomla!
ClickonPasteasPlainText
Hit<CMD><V>or<CTRL><V>onyourkeyboard,andpasteyourtextintothepopupscreen.
ThenclickInserttoinsertthetext.
Page 11
WORKWITHLINKSLinkscanbeaddedintoarticlestolinkto:
• InternalPage• ExternalSite(outsideofcurrentsite)
1.Typetextforthelink
2.Alwaysuse‘ACTION’withtypeoflink(VisitRutgersDayPage)
3.Trynottouse‘clickhere’,notgoodforaccessibility.
4.ClickontheLinkIcon
1.Typein:http://www.rutgers.edu
3.IfEXTERNALSITE,set
Target=“Openinnewwindow”
2.ClickInsert
Joomla!Front-EndEditing
12
CREATELINKAS‘BUTTON’
SampleDisplayasabutton:
1.Selectthelink
2.ClickonStylesandselect:
button:thisappearsasabuttononthesite
Page 13
USINGIMAGESINJOOMLA!1.Besureyouhavecopyrighttousetheimagesonapublicwebsite
2.Ifyouareusingimageswithstudents,besureyouhavetheauthoritytousethoseimagesonthewebsite.
3.ThereareimagesavailabletousethroughSASCommunicationsDepartment
4.AsasuggestionImagesshouldberesizedPRIORtouploadingthemtoawebsite.Asa‘max’width1200px,mostimagesshoulddisplaymuchsmalleronawebpage.
5.Imagesmustbeonyourcomputeroronanetworkdriveinordertoaddimagestothewebsite.
HowtoAddimagestoyourJoomla!article
Placecursorwhereyouwanttheimagetogo.
ClicktheInsert/EditImagebuttonontheeditorbar.
Image‘popup’displaysallofthedifferentoptionsyoucansetforanimage.
Clickon‘upload’touploadanewimage
BesuretoclickonthefolderFIRST,thisiswheretheimagewillgetuploadedto.
ClickBrowsetoselectanimagefromyourcomputer.
Or‘DROP’filesfromyourcomputerdirectlyintothispage
ClickUPLOADtouploadtheimage
OnthenextpagebesuretoSELECTtheimage,thenclickinserttoaddittoyourarticle.
Joomla!Front-EndEditing
14
WorkingwiththeimageinyourArticle
Selectimage(YouhavetoSELECTITTOAFFECTIT!)
ClickontheInsert/EditImageIcon
1.ALTERNATETEXT:Veryimportanttomakethismeaningful(forSEOandAccessibility)
2.Alignment:SettoLEFT
3.UnlocktheMarginLock
4.SetRight10,Bottom10(suggestion)
4.Noticethepreviewonthetopright
Page 15
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.
