PDST WEBSITE LAYOUT AND
CONVENTIONS
TABLE OF CONTENTS Table of Contents ............................................................................................................ i
1 Introduction ................................................................................................................. 1
2 Website Hierarchical Layout ....................................................................................... 1
3 Website Layout - Primary
3.1 Introduction .............................................................................................................. 3
3.2 Curriculum ........................................................................................................... 3
3.3 Subject landing pages ............................................................................................... 4
3.4 Other Primary pages ................................................................................................. 4
4 Website Layout – Post Primary
4.1 Introduction .............................................................................................................. 5
4.2 Other Post Primary Pages ........................................................................................ 5
4.3 Website Layout – JC and SC Subjects .................................................................... 6
5 Updating a Web Page – Standardised conventions ................................................ 9
6 Updating a Web Page – Basic Tasks
6.1 Introduction .......................................................................................................... 11
6.2 Updating a web page using text ....................................................................... 14
6.3 Uploading and inserting a picture or graphic in a web page .............................. 15
6.4 Inserting a table ............................................................................................... 19
6.5 Adding an I-Frame
6.5.1 Introduction ....................................................................................................... 21
6.5.2 Embedding a file from google drive using I-Frames. ........................................ 21
1 Introduction
Thisdocumentprovidesanoverviewof:
1. ThelayoutofthePDSTWebsite;
2. A description of standardised web pages (and standardised content)within each sub
sectionofthewebsite;
3. Standardisedconventions (fonttype,colour,alignment, tableproperties,headings,etc.)tobeusedthroughoutthewebsite;
4. How to perform common tasks needed to update the section of the website you are
responsiblefor.
2 WebsiteHierarchicalLayout
ThePDSTwebsiteisdividedintotwosections(PrimaryandPostPrimary).
1. BothsectionsofthePDSTwebsitecontainwebpagesthatareusedforbothPrimaryand
PostPrimary(Figure1).
(FIGURE1)
2. BothsectionsofthePDSTWebsite(PrimaryandPostPrimary)containseparate landing
pagesdetailingnewsandevents,newresourcesandfeaturedprojects(Figure2).News
andeventscanbeuniquetoeachsectororcandisplayonbothpagesaccordingtothe
item in question. There is a section relating to PDST Technology in Education and
associatedsitesonbothlandingpagesonly.Clickingonanylinksinthissectiontakesthe
vieweroutofthePDSTsiteandlinkstotheseothersites.
AboutUs Recruitment Links Conferences ContactUs
PDSTHomePage
(FIGURE2)3. BothsectionsofthePDSTWebsite(PrimaryandPostPrimary)arethendividedintoprimary
and post primary nodes detailing relevant PDST support structures, documentation,calendars,etc.(Figures3and4).
(FIGURE3)
(Figure4)
Eachnodeisfurtherdividedintogenericsubpagesdetailingrelevantsupport
structures/materialrelatingtothisparticularnode.
Primarylanding
page
NewsandEvents
NewResources
FeaturedProjects
PostPrimarylanding
page
NewsandEvents
NewResources
FeaturedProjects
Literacy Numeracy SSEChildProtection Leadership
PDSTPrimary
Pages
Curriculum AntiBullying
SCSubjects
JCSP/TY/LCA/
LCVP Leadership
SSE
PDSTPostPrimaryPages
JCSubjects
Literacyand
Numeracy
AntiBullying
3 WebsiteLayout–Primary
3.1 Introduction
Primaryhaseightmainsubsections:
Curriculum; Literacy; Numeracy; Child Protection; Leadership; SSE; Anti---bullying and ICT.With the
exceptionof theCurriculumsection, the contents aremanagedby teamswithinPDST.
Thecurriculumsectioncontainscontentfromavarietyofsources.
3.2 Curriculum
TheCurriculumsectioncontainspagesforallcurricularsubjectswiththeadditionof
pages for LearningSupportandEAL. Thesub---pages foreachsubjectaredictatedby
theStrandsofthesubjectaswellasuniquerequirements.Thereisaplanningsection
for each subject and further sub sections if required for resources/initiatives
supportedbyPDSTrelatedtothesubjectinquestion.
For example, The PE section of the site contains sub sections devoted to the six
strands of the PE curriculum – Athletics, Dance, Games, Gymnastics, Outdoor and
Adventure,Aquatics. Ithasaplanningpage.IthaspagesforActiveSchoolFlagand
PSSIlessons–legacyinitiativessupportedbyPDST.
Thiswill bedecidedby the team leader responsible for aparticular subject area. SESE
andTheArtsaresub---dividedintodiscretesubjectsontheirrespectivelandingpages.
For themost part, this section of the site provides a range of curricular resources for
teachers butshouldnotbecopiesofthecurriculum.ViewerscangetthisontheNCCA
site. Rather, it should contain resources to assist with the implementation of the
curriculum. Inthepasttherewereteamsdedicatedtothesupportofeachsubjectand
the resources have been drawn from their work. There is a need to decide what
resourceswarrantinclusiononthePDSTsiteandwhichonesarenolongerrelevant.Only
relevantresourcesshouldbeonoursite.
3.3 Subjectlandingpages
Thesubjectlandingpagesshouldcontaincurrentinformationrelatingtothesubjectsin
question.Ifthereisnoactivitytakingplacetosupportthissubject,thenit isbetterto
state explicitly that the resources are archived ones and are there to assist teachers
anyway.
3.4 OtherPrimarypages
TheremainingPrimarypagesarealignedwithteamsandtheirstructureandcontentare
dictatedbytherelevantteamleader.
4 WebsiteLayout–PostPrimary
4.1 Introduction
PostPrimaryhaseightmainsubsections:
WiththeexceptionoftheJCSUBJECTSandSCSUBJECTSsection,thecontentsaremanaged
by teams within PDST. The curriculum JC SUBJECTS and SC SUBJECTS section contains
contentfromavarietyofsources.
JCSUBJECTS
SCSUBJECTS
JCSP---TY---LCA---LCVP
LITERACYANDNUMERACY
SSE
LEADERSHIP
ANTI---BULLYING
ICT
4.2 OtherPostPrimarypages
TheremainingPostPrimarypagesarealignedwithteamsandtheirstructureandcontent
aredictatedbytherelevantteamleader.
4.3 WebsiteLayout–PostPrimary–JCandSCSubjects
EachsubjectnodeatJuniorandSeniorCyclelevelcontainsaseriesofwebpagesthatare
commontoallsubjectslistedonthePDSTWebsite(Figure5).
(Figure5)
EachsubjectsubpageMUSTONLYCONTANINFORMATIONthatisconsistentacrossallsubjects
adescriptionofwhichisprovidedinthefollowingsections.
Thissubpagemustonlycontainsubjectspecificinformationonthefollowing:
.
Thissectionprovideslatestnewsrelevanttoeachsubject(e.g.whereanotherwebpage
hasbeenupdated,whereaneventhasbeenaddedorcancelled,etc.)
Thissectionprovidesinformationonhowtoregisterforsupportinaparticularsubject.
ThissectionprovidesinformationonotherCPDopportunitiesoutsideofPDSTcore
support(e.g.CPDinaparticularsubjectassociation,etc.
Thissectionprovidesthecontactdetailsoftheadministratorforeachsubject.
JuniorCycleSubjectPages
News Curriculum
ResourcesEvaluation
andAssessment
EventsCalendar
Literacyand
Numeracy
KeySkills Official
DocumentsSubjectAlive
ICTandLearning
WorkshopResources
Links
NEWS
ThispagecontainsCurriculumresourceswithseparatelinkstosubjectspecificPDSTCPD
resourcesforthevariousunitswithineachseniorcyclesubject.
ThispageprovidessubjectspecificCPDmaterialsrelatingtoevaluationandassessmentfor
eachseniorcyclesubjectlisted.EachsubjectEvaluationandAssessmentpagecontainsthe
relevantPDSTdesignedsubjectanalysisofstateexaminationsspreadsheetcoupledwithother
relevantsubjectspecificevaluationandassessmentmaterials.
This page provides information on subject specific PDST CPD opportunities and also
containsanin---builtcalendarofupcomingCPDeventsthatcanbesynchronisedwithyour
ownelectroniccalendar.Thispagewillbeupdatedbyeachcourseadministrator.
This page contains subject specific examples and relevant supportmaterials relating to
theintegrationofLiteracy ineachsubject.Itshouldbenotedhoweverthatthereisalso
another section of the PDST website titledLiteracy. This section of the PDST website
containsgenericLiteracymaterials,templatesandresourcesthatcanbeusedacrossall
subjects.
Thispagecontainssubject specificexamplesandrelevantsupportmaterials relating to
the integrationofNumeracy in each subject. It shouldbenotedhowever that there is
also another section of the PDST website titledNumeracy. This section of the PDST
website contains generic Literacymaterials, templates and resources that can be used
acrossallsubjects...
CURRICULUM RESOURCES
ASSESSMENT AND EVALUATION
EVENTS CALENDAR
LITERACY
NUMERACY
LINKS
ThispagecontainssubjectspecificCPDresourcesrelatingtoseniorCyclekeyskills
ForconsistencywithinthePDSTWebsiteandalsotoprovideforeaseofaccess; thispage
containssubjectspecificOfficialDocumentationrelatingtoeachsubjectandconsistsof,for
example,thefollowing:SyllabusGuidelines,CircularLetters,ApplicationForms,Equipment
List,RoomLayout,TeacherGuidelines,stateexaminationpapers/markingschemes,etc.
Thispageenablesteacherstodisseminatelivedteacher/studentvideostreamingof
teachingandlearningacrosseachseniorcyclesubjectlisted.
ThispageprovidesCPD/materialson the integrationof ICT for teachingand learning in
eachsubjectlisted.Aseparatesection(ICT)ofthePDSTwebsiteprovidesCPDmaterials
onhowtousespecificICTtools,Apps,etc.acrossallsubjects.
KEY SKILLS
ThispageprovidessubjectspecificonsiteandonlinePDSTWorkshopResourcesthat
have,willorarebeingusedforteachercontinuousprofessionaldevelopment.
OFFICIAL DOCUMENTS
SUBJECTS ALIVE
ICT AND LEARNING
PDST WORKSHOP RESOURCES
Thispageprovideslinkstovarioussubjectspecificwebsitesforeachsubjectlisted.Itmust
benotedhoweverthatexternalwebsitesareoutsideofthecontrolofthePDST.
5 UpdatingaWebPage–Standardisedconventions
For consistency across the PDSTWebsite, it is imperative that the following conventions are
adheredto.Inthisregard,ifyouhaveresponsibilityforaparticularsectionofthePDSTwebsite,
thefollowingstandardisedconventionsmustbeadheredtoacrossallWebPages.
FONTTYPESANDSIZEHeadings: ThefonttypeandsizeforallsectionheadingsmustbeArialsize18.
SectionText: ThefonttypeandsizeforallsectiontextmustbeArialsize12.
ALIGNMENTHeadings: Allheadingsmustbeleftaligned.
SectionText: Allsectiontextmustbejustified.
COLOURS
• Allsectiontextmustremainasdefaultblack.Wherethereisaneedtoemphasise
textusingcolours,theonlycolourthatcanbeusedisHex0C246F.Thiscolourcan
beaccessedinthecolourpalateofeachwebpageasshowninfigure6.
(Figure6)
• Theonlytimeanothertextcolourshouldbeusediswhenyouareinsertingtextin
theheaderofatable.Inthiscase,thetextissettowhite(Figure7).
TABLESAll tables must be justified to fit across each web page. The first row (or column where
appropriate)must be shaded to emphasise the headings in each table. Heading rows and or
columnsmustalsouseHex0C246Fasshowninfigure7.
(Figure7)
6 UpdatingaWebPage---BasicTasks
6.1 IntroductionThissectionprovidesinformationonhowto:updateaWebPageusingtext;uploadapictureor
graphic;insertatable;addshadingtoaheading;addaroworcolumntoanexistingtable;andadd
anI---frame(e.g.aGoogleDoc,GoogleSlides,PDF,Video,etc).
ToupdateanywebpageyoumustfirstlogintothePDSTwebsiteusingthesuppliedusername
andpassword(Figure8).
(Figure 8) When you are logged into the PDSTWebsite the same layout as that of the publicwebpage
appears apart from the upper part of the screen (Figure 9). NOTE: This part of the website
differsfromusertouserandmustnotbealtered/accessed.
(Figure 9)
Havingloggedintothewebsiteyoucanthennavigatetoanywebpageasyouwouldnormally.
Forcomparativepurposes,figures10and11showpublicandeditablewebpages.
(Figure 10) (Figure 11) WhenupdatingawebpageitisnotnecessarytoclickonTranslateorChildren.Theonlytables
thatarerequiredtoupdateawebpagearetheviewandedittabs(Figure12).
(Figure 12) WhenyouclickonEdit,thewebpageeditorappearsasinfigures13and14.
(Figure 13)
(Figure 14)
6.2 Updatingawebpageusingtext
Typingtext–ensureithastheformattingandsizedetailedINSECTION4.
Therefore,whenpastingfromanothersource(anotherwebpage/document),thesource
formattingshouldberemoved.
Pastetheimportedtext,highlightallofitandclickthebuttonbelowtoremoveallsource
formatting.Thenthecorrectformattingcanbeapplied(Figure15).
(Figure 15)
ClickonthisbuttontoremoveformattingfromtextfromaWorddocumentsource
NOTE: Some textmay be copied and pasted from another source. Even though it appears topaste into the texteditorcorrectly,a lotofhiddenformattingcomeswiththe textandbreakstheuniformityofthepageoncesaved.
6.3 Uploadingandinsertingapictureorgraphicinawebpage
Havingcheckedtheusagerightsoftherequiredimage,clickontheimageicon(Figure18).
(Figure 18)
NOTE: Before you upload any image, you must ensure that you have permission to use theimageandortheimagetheimagehasoneofthefollowingusagerights.
• freetouseorshare• freetouseorshare,evencommercially• freetouseshareormodify• freetouse,shareormodify,evencommercially.
InthecaseofGoogleimagesforexample,youcansetthesetthesearchimagesfeaturestooneof theaboveby clickingonsettings, advanced search and then choosing the required imageusagerights(Figures16and17).
(Figure 17)
(Figure 16)
Forexample,ifyouwantedtoinserttheScientiximageinawebpage(Figure19).
(Figure 19)
1. Clickontheimage iconandthefollowingscreenappears(Figure 20).
(Figure 20)
2. FromthisscreenclickonBrowseServerandascreenakintoFigure21willappear.
(Figure 24)
(Figure 21)
3. Clickonuploadandchoosethefilesizeandlocationofwhereyourimageisstored
(Figure22).
(Figure 22)
Inthisscenario,thescientiximageisstoredontheDesktopandtheuserclicksonchoosefile,Desktop,Upload(Figures23and24).
(Figure 23)
4. Afteruploadingtherequiredimage,thescreenrevertsbacktothesamescreenasthatin
figure19exceptwherethepropertiesoftherequiredimageisshown(Figure25).
(Figure 25)
5. Fromthisscreen(Figure26)youcanthenalterthewidthandheightoftheimage.You
canalsoformothertaskssuchasdecidingthealignmentofthe images,etc.Whenyou
havedecidedwhatpropertiestheimageshouldhave(Inthisparticularscenario,Width=
190,height=100.Alignment=noset)clickonokandtheimageisinsertedintothepage
asshowninfigure26.
(Figure 26)
6.4 Insertinga table
Toinsertatable,clickonthetableicon(Figure27).
(Figure 27) Forexample,ifyouwantedtoinsertatableakintoFigure28youwouldperformthefollowingsteps.
(Figure 28)
1. ClickontheTableicon.2. WhenyouclickontheTableiconascreenakintofigure29appears.
(Figure 29)
(Figure 30)
Inthisparticularscenario,wewould:
a) settherowsto3andcolumnsto3;b) haveaheaderinthefirstrow;c) makethebordersize1;d) makethewidthofthetable650px
3. Thetableisnowinsertedinthepage.However,theheader(Blueshadinginthefirst
column)willnotbevisibleuntilyouclickonsave,view(Figure30).
WhenyouclickonView,thetableappearsasinfigure31.
(Figure 31)
Fromhereyoucanaddintextandimagesasshowninsections5.1and5.2ofthisdocument.
6.5 AddinganI---Frame
6.5.1 Introduction
AnI---Frame(InlineFrame)isaHTMLfile(e.g.webpage,orvideo)embeddedinsideaHTMLdocument(webpage).ThemostcommonI---framesthatwouldnormallyembedwouldbeI---FramesfromaGoogleDoc,GoogleSlidespresentation,PDSTvimeochanneloraPDF.
6.5.2 EmbeddingafilefromGoogledriveusingI---Frames.
ToembedallI---FramesyoufirstneedtoclickonthelocationwheretheI---Framewillbeinsertedinyourwebpage.HavingdecidedwheretheI---Frameistobeinserted,youthenclickontheI---Frameicon(Figure32).
(Figure 32)
Youcanembedanyfilelocatedingoogledrive.However,ifyourfileise.g.aPowerPointfileyoufirstofallneedtoconvertittoaGoogleSlidespresentation
Scenario 1. Inthisscenario,theuserwantstoembedaPowerPointfilecalledAssessmentandICTWorkshopOnePrimary–PDST(Figure33)intoawebpage.
(Figure 33)
a) TheuserfirstclicksonthelocationinthewebpagewheretheI---frameistobeplaced.b) Followingonfromthis,theuserthenclicksontheI---FrameiconandtheI---Frame
propertiesscreenappears(Figure34).
(Figure 34)
In this screen (Figure 33), the usermust insert theURL (address ofwhere the file is located)togetherwith thewidthandheightof the I---Frame.Note:ThesepropertiescanbeadjustedatanystageevenafterthefilehasbeenembeddedintotheI---Frame.
c) TogetthefilelocationofthefilelocatedinGoogledocs,theusermustfirstopenthePowerPointfileasaGoogleSlide.Todothis,theuserclicksonthefileandthefollowingscreenappears(Figure35).
(Figure35)
d) Theuserthenclicksonopenwith,GoogleSlides(Figure36).
(Figure 36) e) Whenthisactionisperformed,thefollowingscreenappears(Figure36).
(Figure 36)
f) TogettheI---FrameCode,youclickonFile,PublishtoWeb(Figure37).
(Figure 37)
g) WhenyouclickonPublishtowebascreenakintoFigure37appears.FromhereyoucancopythelinkaddressofthepresentationtobeembeddedinyourI---Frameasdecidingotherproperties(Figure38).
(Figure 38)
h) YouthenpastetheaddressintotheI---Framespropertiespageandclickok(Figure39).
(Figure 39)
i) Whenyouclickokandthenclicksave,thepresentationisnowembeddedintoyourwebpageandwouldappearsomewhatakintofigure40.
(Figure 40) NOTE: Although Google has made significant strides towards making Google files crosscompliant with Microsoft products; this is not always the case and the formatting in someMicrosoftproductsmayattimesbealteredwhenconvertingtoaGooglefiletype.InthisregardyoushouldalwayschecktoseeiftheoriginalfilematchesthatoftheconvertedGooglefiletype.
Scenario 2 IfyouhaveaGoogleDocumentthatyouhavecreatedinGoogleDrive,quitenaturallythereisnoneedtoconvertthefileagainandyoumerelyfollowallstepsapartfromstepscandd.Toembedfilesfromotherthirdpartyproviders(Vimeo,etc.)youessentiallyfollowthesamestepsasthoselistedabove.