PDST WEBSITE LAYOUT AND

CONVENTIONSTraining Day

(Athlone Education Centre)26-11-16

TABLE OF CONTENTSTable 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

This document provides an overview of:

1. the layout of the PDST Website;

2. a description of standardised web pages (and standardised content) within each sub

section of the website;

3. standardised conventions (font type, colour, alignment, table properties, headings, etc.)

to be used throughout the website;

4. how to perform common tasks needed to update the section of the website you are

responsible for.

2 Website Hierarchical Layout

The PDST website is divided into two sections (Primary and Post Primary).

1. Both sections of the PDST website contain webpages that are used for both Primary and

Post Primary (Figure 1).

(FIGURE 1)

2. Both sections of the PDST Website (Primary and Post Primary) contain separate landing

pages detailing news and events, new resources and featured projects (Figure 2). News

and events can be unique to each sector or can display on both pages according to the

item in question. There is a section relating to PDST Technology in Education and

associated sites on both landing pages only. Clicking on any links in this section takes the

viewer out of the PDST site and links to these other sites.

1

PDST Home Page

About Us Recruitment Publications Links Conferences Contact Us

(FIGURE 2)

3. Both sections of the PDST Website (Primary and Post Primary) are then divided into primary and post primary nodes detailing relevant PDST support structures, documentation, calendars, etc. (Figures 3 and 4).

(FIGURE 3)

(Figure 4)

Each node is further divided into generic subpages detailing relevant support

structures/material relating to this particular node.

2

Primary landing page

News and Events New Resources

Featured Projects

Post Primary landing page

News and Events New Resources

Featured Projects

PDST Primary Pages

Curriculum Literacy Numeracy Child Protection Leadership SSE Anti Bullying

PDST Post Primary Pages

JC Subjects SC Subjects JCSP/TY/LCA/LCVP

Literacy and

NumeracySSE Leadership Anti Bullying

3 Website Layout – Primary

3.1 Introduction

Primary has eight main sub sections:

Curriculum; Literacy; Numeracy; Child Protection; Leadership; SSE; Anti-bullying and ICT.

With the exception of the Curriculum section, the contents are managed by teams within

PDST. The curriculum section contains content from a variety of sources.

3.2 Curriculum

The Curriculum section contains pages for all curricular subjects with the addition of pages for

Learning Support and EAL. The sub-pages for each subject are dictated by the Strands of the subject

as well as unique requirements. There is a planning section for each subject and further sub sections

if required for resources/initiatives supported by PDST related to the subject in question.

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. It has a

planning page. It has pages for Active School Flag and PSSI lessons – legacy initiatives supported by

PDST.

This will be decided by the team leader responsible for a particular subject area. SESE and

The Arts are sub-divided into discrete subjects on their respective landing pages. For the

most part, this section of the site provides a range of curricular resources for teachers but

3

should not be copies of the curriculum. Viewers can get this on the NCCA site. Rather, it

should contain resources to assist with the implementation of the curriculum. In the past

there were teams dedicated to the support of each subject and the resources have been

drawn from their work. There is a need to decide what resources warrant inclusion on the

PDST site and which ones are no longer relevant. Only relevant resources should be on our

site.

3.3 Subject landing pages

The subject landing pages should contain current information relating to the subjects in question. If

there is no activity taking place to support this subject, then it is better to state explicitly that the

resources are archived ones and are there to assist teachers anyway.

3.4 Other Primary pages

The remaining Primary pages are aligned with teams and their structure and content are

dictated by the relevant team leader.

4

4 Website Layout – Post Primary

4.1 Introduction

Post Primary has eight main sub sections:

With the exception of the JC SUBJECTS and SC SUBJECTS section, the contents are managed

by teams within PDST. The curriculum JC SUBJECTS and SC SUBJECTS section contains

content from a variety of sources.

JC SUBJECTS

SC SUBJECTS

JCSP-TY-LCA-LCVP

LITERACY AND NUMERACY

SSE

LEADERSHIP

ANTI-BULLYING

ICT

4.2 Other Post Primary pages

The remaining Post Primary pages are aligned with teams and their structure and content

are dictated by the relevant team leader.

5

4.3 Website Layout – Post Primary – JC and SC Subjects

Each subject node at Junior and Senior Cycle level contains a series of web pages that are

common to all subjects listed on the PDST Web site (Figure 5).

(Figure 5)

Each subject subpage MUST ONLY CONTAN INFORMATION that is consistent across all subjects

a description of which is provided in the following sections.

NEWS This subpage must only contain subject specific information on the following:

.

LATEST NEWS

 This section provides latest news relevant to each subject (e.g. where another web page

has been updated, where an event has been added or cancelled, etc.)

REGISTRATION  

This section provides information on how to register for support in a particular subject. CONTINUOUS PROFESSIONAL DEVELOPMENT (CPD)

This section provides information on other CPD opportunities outside of PDST core

support (e.g. CPD in a particular subject association, etc.

CONTACTS

This section provides the contact details of the administrator for each subject. 

CURRICULUM RESOURCES6

Junior Cycle Subject Pages

News Curriculum Resources

Evaluation and

Assessment

Events Calendar

Literacy and

NumeracyKey Skills Official

DocumentsSubject

AliveICT and

LearningWorkshop Resources Links

This page contains Curriculum resources with separate links to

subject specific PDST CPD resources for the various units within each senior cycle

subject.

 

 

ASSESSMENT AND EVALUATION This page provides subject specific CPD materials relating to evaluation and assessment for

each senior cycle subject listed. Each subject Evaluation and Assessment page contains

the relevant PDST designed subject analysis of state examinations spreadsheet coupled with

other relevant subject specific evaluation and assessment materials.

EVENTS CALENDAR This page provides information on subject specific PDST CPD opportunities and also

contains an in-built calendar of upcoming CPD events that can be synchronised with your

own electronic calendar. This page will be updated by each course administrator.

LITERACY This page contains subject specific examples and relevant support materials relating to

the integration of Literacy in each subject. It should be noted however that there is also

another section of the PDST website titled Literacy. This section of the PDST website

contains generic Literacy materials, templates and resources that can be used across all subjects.

NUMERACY  This page contains subject specific examples and relevant support materials relating to

the integration of Numeracy in each subject. It should be noted however that there is

also another section of the PDST website titled Numeracy. This section of the PDST

website contains generic Literacy materials, templates and resources that can be used across all

subjects...

7

KEY SKILLS This page contains subject specific CPD resources relating to senior Cycle key skills 

OFFICIAL DOCUMENTS  For consistency within the PDST Website and also to provide for ease of access; this page

contains subject specific Official Documentation relating to each subject and consists of, for

example, the following: Syllabus Guidelines, Circular Letters, Application Forms, Equipment

List, Room Layout, Teacher Guidelines, state examination papers/marking schemes, etc.

SUBJECTS ALIVE This page enables teachers to disseminate lived teacher/student video streaming of

teaching and learning across each senior cycle subject listed.

ICT AND LEARNING This page provides CPD/materials on the integration of ICT for teaching and learning in

each subject listed. A separate section (ICT) of the PDST website provides CPD materials

on how to use specific ICT tools, Apps, etc. across all subjects.

PDST WORKSHOP RESOURCES This page provides subject specific on site and online PDST Workshop Resources that

have, will or are being used for teacher continuous professional development.

LINKS This page provides links to various subject specific web sites for each subject listed. It must

be noted however that external websites are outside of the control of the PDST.

 

8

5 Updating a Web Page – Standardised conventions

For consistency across the PDST Website, it is imperative that the following conventions are

adhered to. In this regard, if you have responsibility for a particular section of the PDST website,

the following standardised conventions must be adhered to across all Web Pages.

FONT TYPES AND SIZE

Headings: The font type and size for all section headings must be Arial size 18.

Section Text: The font type and size for all section text must be Arial size 12.

ALIGNMENT

Headings: All headings must be left aligned.

Section Text: All section text must be justified.

COLOURS

All section text must remain as default black. Where there is a need to emphasise

text using colours, the only colour that can be used is Hex 0C246F. This colour can

be accessed in the colour palate of each web page as shown in figure 6.

(Figure 6)

The only time another text colour should be used is when you are inserting text in

the header of a table. In this case, the text is set to white (Figure 7).

9

TABLES

All 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

columns must also use Hex 0C246F as shown in figure 7.

(Figure 7)

10

6 Updating a Web Page - Basic Tasks

6.1 Introduction

This section provides information on how to: update a Web Page using text; upload a picture or

graphic; insert a table; add shading to a heading; add a row or column to an existing table; and add

an I-frame (e.g. a google doc or slideshare file.).

To update any web page you must first log in to the PDST website using the supplied username

and password (Figure 8).

(Figure 8)

When you are logged into the PDST Website the same layout as that of the public web page

appears apart from the upper part of the screen (Figure 9). NOTE: This part of the website

differs from user to user and must not be altered/accessed.

(Figure 9)

11

Having logged into the web site you can then navigate to any web page as you would normally.

For comparative purposes, figures 10 and 11 show public and editable web pages.

When updating a web page it is not necessary to click on Translate or Children. The only tables

that are required to update a web page are the view and edit tabs (Figure 12).

12

(Figure 11)

(Figure 10)

When you click on Edit, the web page editor appears as in figures 13 and 14.

13

(Figure 12)

(Figure 13)

6.2 Updating a web page using text

Typing text – ensure it has the formatting and size detailed IN SECTION 4.

NOTE: Some text may be copied and pasted from another source. Even though it appears to paste into the text editor correctly, a lot of hidden formatting comes with the text and breaks the uniformity of the page once saved.

Therefore, when pasting from another source (another web page/document), the source

formatting should be removed.

Paste the imported text, highlight all of it and click the button below to remove all source

formatting. Then the correct formatting can be applied (Figure 14).

14

(Figure 14)

(Figure 14)

Click on this button to remove formatting from text from a Word document source

6.3 Uploading and inserting a picture or graphic in a web page

NOTE: Before you upload any image, you must ensure that you have permission to use the image and or the image the image has one of the following usage rights.

free to use or share free to use or share, even commercially free to use share or modify free to use, share or modify, even commercially.

In the case of Google images for example, you can set the set the search images features to one of the above by clicking on settings, advanced search and then choosing the required image usage rights (Figures 15 and 16).

15

Having checked the usage rights of the required image, click on the image icon (Figure 17).

For example, if you wanted to insert the Scientix image in a web page (Figure 18).

16

(Figure 15)

(Figure 16)

(Figure 17)

(Figure 18)

1. Click on the image icon and the following screen appears (Figure 19).

(Figure 19)

2. From this screen click on Browse Server and a screen akin to Figure 20 will appear.

(Figure 20)

3. Click on upload and choose the file size and location of where your image is stored

(Figure 21).

17

(Figure 21)

In this scenario, the scientix image is stored on the Desktop and the user clicks on choose file, Desktop, Upload (Figures 22 and 23).

4. After uploading the required image, the screen reverts back to the same screen as that in

figure 19 except where the properties of the required image is shown (Figure 24).

18

(Figure 22)

(Figure 23)

(Figure 24)

5. From this screen (Figure 24) you can then alter the width and height of the image. You

can also form other tasks such as deciding the alignment of the images, etc. When you

have decided what properties the image should have (In this particular scenario, Width =

190, height = 100. Alignment = no set) click on ok and the image is inserted into the page

as shown in figure 25.

19

(Figure 25)

6.4 Inserting a table

To insert a table, click on the table icon (Figure 26).

For example, if you wanted to insert a table akin to Figure 27 you would perform the following steps.

1. Click on the Table icon.2. When you click on the Table icon a screen akin to figure 28 appears.

20

(Figure 26)

(Figure 27)

(Figure 28)

In this particular scenario, we would:

a) set the rows to 3 and columns to 3;b) have a header in the first row;c) make the border size 1;d) make the width of the table 650px

3. The table is now inserted in the page. However, the header (Blue shading in the first column) will not be visible until you click on save, view (Figure 29).

When you click on View, the table appears as in figure 30.

From here you can add in text and images as shown in sections 5.1 and 5.2 of this document.

21

(Figure 29)

(Figure 30)

6.5 Adding an I-Frame

6.5.1 Introduction

An I-Frame (Inline Frame) is a HTML file (e.g. web page, or video) embedded inside a HTML document (web page). The most common I-frames that would normally embed would be I-Frames from a google doc, PDST vimeo channel or from slideshare.

6.5.2 Embedding a file from google drive using I-Frames.

To embed all I-Frames you first need to click on the location where the I-Frame will be inserted in your webpage. Having decided where the I-Frame is to be inserted, you then click on the I-Frame icon (Figure 31).

You can embed any file located in google drive. However, if your file is e.g. a PowerPoint file you first of all need to convert it to a google doc, form, file, etc.

Scenario 1.

In this scenario, the user wants to embed a PowerPoint file called Assessment and ICT Workshop One Primary –PDST (Figure 32) into a web page.

22

(Figure 31)

(Figure 32)

a) The user first clicks on the location in the web page where the I-frame is to be placed. b) Following on from this, the user then clicks on the I-Frame icon and the I-Frame

properties screen appears (Figure 33).

In this screen (Figure 33), the user must insert the URL (address of where the file is located) together with the width and height of the I-Frame. Note: These properties can be adjusted at any stage even after the file has been embedded into the I-Frame.

c) To get the file location of the file located in google docs, the user must first open the PowerPoint file as a Google Slide. To do this, the user clicks on the file and the following screen appears (Figure 34).

(Figure 34)

23

(Figure 33)

d) The user then clicks on open with, Google Slides (Figure 35).

e) When this action is performed, the following screen appears (Figure 36).

f) To get the I-Frame Code, you click on File, Publish to Web (Figure 36).

24

(Figure 35)

(Figure 35)

(Figure 36)

g) When you click on Publish to web a screen akin to Figure 37 appears. From here you can copy the link address of the presentation to be embedded in your I-Frame as deciding other properties (Figure 37).

h) You then paste the address into the I-Frames properties page and click ok (Figure 38).

i) When you click ok and then click save, the presentation is now embedded into your web page and would appear somewhat akin to figure 39.

25

(Figure 37)

(Figure 38)

(Figure 39)

NOTE: Although Google has made significant strides towards making google files cross compliant with Microsoft products; this is not always the case and the formatting in some Microsoft products may at times be altered when converting to a google file type. In this regard you should always check to see if the original file matches that of the converted google file type.

Scenario 2

If you have a Google Document that you have created in Google Drive, quite naturally there is no need to convert the file again and you merely follow all steps apart from steps c and d. To embed files from other third party providers (vimeo, slideshare, etc.) you essentially follow the same steps as those listed above.

26