Master class booklet

2
Contents
Media By Pass…………………………………………………………………………………………………3
Multiple Uploading………………………………………………………………………………………….5
Photo Smarts – Aligning Images……………………………………………………………………….6
Photo Smarts – Text Wrapping………………………………………………………………………...9
Working with Articles……………………………………………………………………………………11
Working with Anchors………………………………………………………………………………..…16
Copy & Paste Techniques……..…………………………………………………………………......…20
Uploading Videos………………………………………………………………………………………..…21
Using the Calendar Smarts - Locations……………………………………………………………30
Using the Calendar Smarts – Event RSVP……………………………………………………..…32
Creating & Embedding a Form……………………………………………………………………….37
Easy to Load Web Apps – Translator……………………………………………………………...43
Easy to Load Web Apps – Interactive Map………………………………………………………48
Advanced e-Newsletter…………………………………………………………………………………51
Viewable PDF Newsletter – Scribd…………………………………………………………………55
e-Newsletter Using Articles……………………………………………………………………………60

3
Media by Pass
Currently most users are double handling their media. These steps will outline
how you can by pass the Media folder when you are loading information onto
your site.
1. Go to the page you wish your media to land.
2. Type the name of file that you would like to display on your site.
Highlight this name and click on the chain icon (insert/edit link)
3. Click on the browse button to take you to the Ajax File Manager. You will
notice that there is a button in the corner called “Upload”. When you click
on this you can browse your files from your computer and load them
directly into the media folder.

4
4. Once you have selected your file, click on upload. When the red spinning
wheel stops and your media bar is empty, you can hit close and this takes
you back to the Ajax File Manager.
5. In most cases the newly uploaded file will appear at the bottom of page 1.
If you have to search, use a part of the file name and click on search. Tick
the box and insert your media directly onto your page!
Handy Hint
This process works the same for images. Just use the tree icon (insert/edit
image).

5
Multiple Uploading
Using the media by pass – you will notice a green + located on the “File Upload
Form”
Click on this button and it will add another browse box. You can now browse
and upload multiple items at once.
Handy Hint
Remember the Ajax File Manager saves your files with the original name they are
given on your computer. If there are spaces use _!
It is often easier to search for partial names – instead of “athletics day 2013” you
might want to search for “ath” or “2013” to narrow down your results.

6
Photo Smarts – Aligning Images
Want to plant 3 images in a row on your site – all at the same height???
1. Load your media into the Ajax file manager (via Media folder or Media By
Pass)
2. Go to the page you wish to plant your photos and put your cursor where
you want your first image to appear.
3. Click on the tree button (insert edit image) and search for your first
image. Tick the box and select it in the Ajax File Manager.
4. In the next screen, click on the “Appearance” tab.
5. Dimensions – 200 px width. Vertical & Horizontal spacing at 2.

7
6. Click insert. You will land back on your page with your first photo.
Repeat the same process with your next two images.
7. The edit screen may display your images in two rows, ignore and update
your page.

8
8. Visit your site and check your handy work!
Handy Hint
You can change the dimensions of your images if you would like greater spacing
between the images or if you would like to line up more than 3 images in a row.
Vertical spacing: The space between the content directly above and below the
image.
Horizontal spacing: The space between the content directly beside the image.

9
Photo Smarts – Text Wrapping
Want to place an image with text wrapping neatly around it?
1. Go to the page you wish to plant your photo. Put your cursor exactly
where you would like the photo to land.
2. Click on the tree (insert/edit media) and select the image you wish to use
from the Ajax File Manager.
3. Click on the “Appearance” tab and select your alignment (in this case we
would like the photo to appear on the left).

10
4. Check the dimensions of your image are a width of somewhere between
150 & 300 px (ideally) and change accordingly.
5. Horizontal and vertical spacing should be somewhere around 5.
6. Click on Update and view your image on your page.
7. You can play around with the alignment if you have several photos to go
in the same body of text, or if you want something different. (This image
is now aligned to the right.

11
Working with Articles
Articles are like the front page of a newspaper – a place to host your most
important information that changes often. You don’t want your articles to go
stale – changing your articles often ensures your users know that you are
constantly updating your site.
Create an article
WEBSITE CONTENT – Articles – Create new
Give the article a title, a date and select an author from the menu. If you need to
create an author – click on the + button and create an author. It is often best to
make an author with your school name.

12
The summary box is where you type a brief introduction to your article. The first
sentence or two is plenty. You only want to give the reader a teaser, as if you
have more than 2 or 3 articles, the reader has to scroll down their screen to view
the rest of the articles, the less text you have, the more articles you can fit
without scrolling!
The content box is where you place the body of your article. This appears as an
automatic read more button on your site.
Make sure you give your article a KEYWORD or else you won’t be able to publish
it! In this instance it will be “footy tipping”.
Once you have completed your article, save it as PUBLISHED and visit your site.

13
Using the Small Pic/Big Pic Option
Articles can be enhanced by images. You will notice when creating an article
there is an option to add a small pic or big pic. Choose the style that you prefer
and stick with this for all your articles. In this instance, we will use the small pic
style.
The dimensions of these photos can be found underneath the browse button.
You will more than likely need to resize your images to suit the dimensions
required, we recommend using http://www.resize.it/

14
Using www.resize.it you can browse your computer for the image you would like
to appear in your article.
Input the dimensions in both fields, in this case 70 height and 100 width.
Move the crop box to the area you wish to display in your article and then click
on CROP IT above your image.
You then right click on the image to Save As on your desktop.
CMS – Website Content – Articles
Edit the article of choice, and browse your computer for the small pic style
image, click on the “Crop Image” button and UPDATE your page.

15
Now that you have loaded the image style into your article, the final step is to
change the display style of your articles on your site.
SET UP – Site Layout
The last option in this area is “Manage Homepage Article Display Style”. In this
instance, tick the Small Pic option. UPDATE your changes and visit your site.
If you create an article without an image in the small pic section, your article will
display like this:

16
Working with Anchors
You may find yourself with a large page full of text with important details
throughout. The Sponsor-ed system has a way of indexing this information – so
that through the click of a button, the user is taken to the relevant information on
that page. This is done through the use of anchors. The important information is
indexed at the top of the page, and once clicked on, the user is linked to the area
of interest.
Step One – Creating and Index
Open your page – and create and index of important terms at the top. In this
instance, we are using the history of the various sport teams at a school.
Type your
Index at the
top of your
page like this

17
Step Two – Inserting Anchors
Once you have decided upon your index – you must find the relevant sections to
anchor.
Gold Team – is our first Anchor. Find the information that is relevant to
Gold Team (in this case, to the left of the heading “Gold Team” and click
on the Anchor button.
Insert your Anchor here
Give your anchor a simple, relevant name. In this case “Gold”
You will see the Anchor Icon once completed.
Repeat this step for the remaining indexed items.

18
Step Three – Linking your index to the anchors
Once you have inserted anchors for your index items, go back to your
index and highlight the first item then click on Insert/Edit link button.
You will see there is a drop down menu for Anchors – use this menu to select the
anchor for the index item you are currently working with.
Click on insert.

19
You will see that your first index item is now a hyperlink.
Repeat this step for remaining index items.
Step Four – Review your work
Now it’s time to save your changes and visit your site to see your Anchors in
action!
Click on your index items and be taken to the relevant area of the page!
In this instance I clicked on Green Team.

20
Copy & Paste Techniques
You may want to copy content from another document or web page but the
formatting just won’t work for you. Here are a few simple tricks:
On your toolbar there are some icons that will come in handy:
Eraser: removes all formatting
Paste as plain text : copies all text and no formatting
Paste from word: keeps the formatting from word when pasted into site

21
Uploading Videos
Videos on your site can maximise communication with your families and
prospective families. Some schools like to take the user on a virtual tour of the
school, others like to demonstrate a typical day in the school or highlight special
events that have taken place at school. Your sponsor-ed website can support
videos hosted by third-party sites such as YouTube, Vimeo, Teacher Tube and
School Tube.
Choose a site to host your video
School Tube: http://www.schooltube.com/
Teacher Tube: http://www.teachertube.com/
Vimeo: https://vimeo.com/
You Tube: http://www.youtube.com/
In this case we will use You Tube.
You Tube
YouTube Ad Blocking
You can block ads on your YouTube account by going to this address:
http://www.youtube.com/account?feature=mhum#playback/annotations
Select “Do not allow advertisements to be displayed alongside my videos” and
save your changes.

22
Disabling YouTube Recommended Videos
Watch this video to learn how to turn off recommended videos.
http://www.youtube.com/watch?v=T5pCXc_I2fQ
Assuming that you already have a You Tube account – login and upload the video
you wish to display on your site. Depending on the size of your video and the
speed of your internet connection, upload times may vary. This four minute
video took approximately 5 minutes to upload.
Click on the link to view your uploaded video.

23
Copy the URL of the video that you have just loaded.
Inside the CMS
Go to the page where you would like to host the video and click on “Insert/Edit
Embedded Media” icon.

24
Paste the copied URL where it says File/URL
Your page will then appear like this:
Make sure to SUBMIT or UPDATE your page, so the changes are saved.

25
Click on Visit Site to have a look at your video!
Vimeo
Assuming you already have an account, login and click on “Upload a video”

26
Choose the video you wish to upload and then click on “Upload Selected Videos”
While your video is uploading, you can enter information about your video.

27
You will see this screen once the video has been uploaded.
Vimeo will let you know via email when your video has been converted and
ready to load.
In the far right corner of your video (you may need to hover your mouse over the
top of the video) you will see a “Share button” click on this.

28
Copy the code underneath the heading “Embed”
Inside the CMS
Complete the steps outline above pasting this code into your page via the HTML
button.

29
Additional Information
Teacher Tube & School Tube
Some school’s have reported success using TeacherTube and SchoolTube. If
using these accounts – copy the “Embeddable Player” and paste this into your
page using the HTML button.
YouTube Ad Blocking
You can block ads on your YouTube account by going to this address:
http://www.youtube.com/account?feature=mhum#playback/annotations
Select “Do not allow advertisements to be displayed alongside my videos” and
save your changes.
YouTube Recommended Videos
Watch this video to learn how to turn off recommended videos.
http://www.youtube.com/watch?v=T5pCXc_I2fQ

30
Using the Calendar Smarts – Locations
Often overlooked – creating a location within your event calendar adds a bit of
“wow factor” for your audience. This location can be presented as an interactive
google map within your site, offering another layer of cleverness to your
audience.
Add a location
 SET UP – Events – Location
 Create New
 Fill in the details
 Tick the box “Show on Google Map”

31
Displaying the location within an event
1. EVENTS – Create New
2. Fill in the relevant details and use the drop down menu “Choose Location”
to select your newly created location.
3. Visit your site calendar to see your handiwork.

32
Using the Calendar Smarts – Event RSVP
Your Gen 2 site allows you to create an RSVP for your calendar events. The
RSVPs can then be exported to a .csv for use outside your site.
Create your event with RSVP function
1. EVENTS – Create New
Enter the relevant details for your event – if you have added a location,
choose this from your drop down menu.
2. It is preferable that you select a co-ordinator for the event. This will allow
enquiries to be directed to the appropriate staff member. If you don’t
already have the details in the CMS – you can “Create A New Co-
ordinator”

33
3. You can ignore much of the ticketing information and scroll down to
RSVP Required. Tick this box.
4. Submit your event and visit your site to check your event calendar.
Using the RSVP Function
1. The first 200 characters are shown on the landing screen – click on the
event name to view the rest.

34
2. You will notice the event co-ordinator’s email address is displayed. Your
audience can direct enquiries to them. To RSVP to the event – click on the
“RSVP Here button”.
3. When a user clicks on RSVP they will need to fill out the details below and
click “Proceed”.

35
4. A “Booking Details” page will pop up – click on submit.
5. They will then get the following confirmation message:
Viewing & Exporting RSVP in the CMS
1. EVENTS – scroll down to the event in question. In Attendees you will see
a bold number.

36
2. Click on the number, you will see the following details:
3. Up the top, click on “Export to CSV”
4. The file will open in exel for you to save or modify to your needs.

37
Creating & Embedding a Form
You may be inundated with telephone calls to report an absence. You may need
to ask for volunteers to help with the Parent Association. You may want to ask
for feedback. Creating a form and embedding it on your site is relatively easy
and all the responses can come directly to your inbox!
Creating and absentee form with Wufoo
1. We use Wufoo Form Manager – it’s free! www.wufoo.com
Go to wufoo and create an account.
2. Click on “New Form”

38
3. Using “Add a field” you can start creating your form.
4. When you have completed adding your fields – click on “Save Form”
4. Click on email notifications and fill in where you would like the form
responses to be sent.

39
5. Click on the “Forms” tab at the top and your newly created form will
appear.
6. Click on the “Code” button.
7. Choose “Embed Form Code” on the left and copy the “iFrame Version”

40
Embedding the form on your site
1. Now that you have the code from Wufoo, go to the CMS and edit/create
the page you wish your form to appear.
2. Click on the HTML button and paste in your code.
3. Your page will look like this – update your page.

41
4. Visit your site and try out your new form!
5. Once the parent has completed the form, they will receive this message
screen (you can modify the message to suit your needs).
6. As administrator – you will receive an email instantly when the form has
been filled out.

43
Easy to load Web Apps - Translator
HTML Code might sound a step ahead of you – rest assured, it is not! If you know
how to copy and paste – you can load HTML code into the CMS and see some
amazing widgets on your site!
Google Translator
Want to connect with your community – but you find that there is a language
barrier? Now you can share all information on your site with families that
speak/read a different language at home. Simply load the Google Translator
onto your site and it will translate each page to any language of choice!
Step 1: Visit the Sponsor-ed Website
Visit our website and click on SUPPORT – Short code
http://www.sponsor-ed.com.au/page/62/Short-Code
We have already got the code for the google translator on our site – highlight this
code and copy it.

44
Step 2: Inside the CMS
Google translator works best in a section – this way you can add it to multiple
pages easily.
WEBSITE CONTENT – Section – Create New
Name and description fields should be entered. You can add a category like we
did above, or you can select a pre-loaded category for your new widget.
In the content box toolbar – there is a HTML button. Click on this and
paste your copied HTML code into the editor.
Click on UPDATE.

45
You may not notice any difference on your page – just click on ADD SECTION.
Your section now appears on your Manage Sections list:
Step 3: Adding your section to pages
To add your section to the HOMEPAGE – click on: Website Content – Homepage
Section and select your Translator from the drop down menu.
You will have to give your section a number value to order it from top to bottom.

46
Step 4: Check your work!
Visit your site to see the translator section.
And now you can use the translator to translate all the text on the homepage!

47
Step 5: Adding the translator to pages within your site
The translator will only translate the page that it appears on. Once clicking
through the site – the text will revert to English. You will need to have the
translator placed on each page you would like to use it.
WEBSITE CONTENT – Pages
Choose the page you wish to add the translator to and click the pencil (edit) icon.
Scroll down until you reach a drop down menu titled “SECTION” and choose the
translator from your list of sections.
Now visit your site to check your translator!
Repeat this process for all relevant pages on your site.

48
Easy to load web apps – Interactive map
An interactive map on your website will make it easier for your site visitors to
find your school as they can enter their address and get directions directly from
your site!
1. Go to this site:
http://www.gmodules.com/ig/creator?synd=open&url=http%3A%2F%2
Fwww.gstatic.com%2Fig%2Fmodules%2Fmapsearch%2Flocalsearch_v2.
xml&lang=en
2. Change the title to your school name and change the default location to
your school address.

49
3. Click on Preview Changes. The map will now reside over your address.
4. Click on “Get the Code” and copy the code from the panel below.

50
5. Go to your site and edit your Contact Us page. Click on the HTML button
on your toolbar.
6. Pop your cursor on the line underneath all the code and paste the new
code in (this allows the map to appear underneath your contact
information typed on the page). Update your changes.
7. Visit your site to use your interactive map!

51
Advanced e-Newsletter
You have mastered the simple e-Newsletter and now you are ready to try some
of the smarts. Try the following steps to add a real “Wow Factor” for your school
community.
Attaching an article, webpage and calendar
Within the e-Newsletter, you will see a list of Usable Constants in Body Content.
Underneath your original text, you can use these constants to attach various
elements to your e-Newsletter.

52
Type @@articles@@ into the content. Scroll down to the drop down menu
beside “Attach Article” and select your article of choice.
Save your work. We can now SHOW or preview our e-Newsletter with attached
article.

53
You can brighten your article up by choosing a different display mode. Default is
set at words but you have the option of a small picture or large picture display.
These can be changed in:
o SET UP
- Site Layout
- Manage Homepage Article Display Style
If you choose to change your article display style – you will then have to go back
to your article and insert an image in the corresponding area.

54
Now that we have changed the display style to small pic and added our small
image into the corresponding area, we will also attach the calendar to our
newsletter.
Edit your mail. Underneath the code for attaching your article, copy and paste
the link to events code.
Save your work and SHOW.
The next time you send your e-Newsletter out you may not want to attach an
article, simply deselect the article. There is no need to delete the article code
[@@article@@], it will not attach an article unless one is selected.

55
Viewable PDF Newsletter - Scribd
Traditionally schools create their newsletter as a pdf and load it onto their site.
This method has been used for many years and you might not be ready to ditch
this just yet – but you are ready to take a baby step forward. You can load your
newsletter as a viewable PDF on your site – this means one less click for your
audience.
What is offers you is a lot more information in regards to your newsletter! You
can see how many people have opened the newsletter and when – information
that may surprise you! You can also see the average time spent reading the
newsletter, whether the newsletter was shared using social media and much
more.
Step 1: Loading your newsletter using Scribd
1. Create your newsletter and save it as a PDF.
2. www.scribd.com (Create an account – it’s FREE)
3. Once logged in, click on the UPLOAD button and browse your computer
for the file.

56
4. While your file is uploading you can give it a title and description.
5. Once it is loaded and converted (approximately 3-5 minutes depending
on size of newsletter) you will see a preview on the left. Click on
“Preview in a new tab” for more options
6. You will see this screen, click on “Embed”

57
7. Copy the code from the embed field.
8. Go to your CMS and edit the page you wish to display your PDF newsletter
and click on the HTML button.
9. Paste the HTML code into the page.

58
10. Update your page and visit your site to see your newsletter in it’s glory!
Scribd Analytics
You can login to scribd at anytime to view some analytics in regards to the
readership of your newsletter.

59
Keeping your Scribd Newsletters tidy
Having a viewable PDF newsletter is a great idea, however when you are ready
to publish your next newsletter, we suggest you remove your last Viewable PDF.
You might not be ready to hit the delete button yet – so you can create an archive
of these newsletters in a section on the newsletter page.
1. Create a section called Newsletters and type in the name of your existing
newsletter.
2. Hyperlink this name to your uploaded newsletter (via Media folder or
easy upload).
3. Delete your Scribd newsletter from your page (select it all and hit
delete/backspace).
4. Load you new newsletter into scribd and your site!
5. It will end up looking something like this:

60
e-Newsletter using Articles
Traditionally schools have been creating their newsletter using Word or
Publisher and then converting it to a PDF. The PDF is then pasted onto the
website. Whilst this step is a move away from distributing paper newsletters
which saves money, time and the environment, many schools still complain that
their newsletter readership is poor. We know why.
Have you ever tried reading a PDF newsletter on a computer? Invariably people
print them if they can find them which knocks out the sustainability feature of
going electronic. Have you ever tried reading a PDF on a mobile phone? Next to
impossible. The answer is to present your content in little bit size chunks
allowing people to find the content most relevant and then if they are interested,
they read more for the full article. Have a look at how a newspaper’s website
looks for a clue.
Our ambition for schools is to write everything in the website so only one
publishing medium is used. Today you’re managing two; creating your
newsletter in Word and then updating the website. But even if you don’t want to
drop your paper based newsletter, you can begin by using some of the smarts in
your sponsor-ed Generation 2 website. Use the ‘Articles’ feature.
Articles on your homepage are for displaying recent news and should be updated
regularly. You can work on your articles throughout the week because articles
can be created and marked as drafts so that they are not viewable on your site
until you are ready to send out your e-Newsletter.

61
‘Articles’ is the content that appears on your homepage under ‘Recent News’.
Whatever you write there can be automatically copied into your newsletter to
look like the sample further below.
Articles
Sample of e-newsletter with content automatically lifted from homepage Articles

62
Create your articles
WEBSITE CONTENT
o Articles
As mentioned previously, mark your article as a draft if you are not yet ready for
it to be published.

63
You can brighten up your articles by attaching an image for each article – decide
which option you prefer, small picture or large picture (must be the same for all
articles) and insert your images in to the corresponding area.
You will also have to change this option for your site:
SET UP
- Site Layour
- Manage Homepage Article Display Style

64
Launch e-Newsletter with Articles
Once you have created all your articles, it is time to launch your e-Newsletter.
COMMUNICATE – Newsletters – Add Mail
To attach articles as your main newsletter:
1. In the content box type your e-newsletter welcome and then:
@@articles@@
2. Select all the articles you wish to add using the attach articles menu. To
select more than one article you will have to hold down the shift key.
3. Select the group/s that you will be sending the mail to, and save.

66
And here is one without images:

Master class booklet

More Related Content

What's hot

Similar to Master class booklet

More from Denis Masseni

Recently uploaded

Master class booklet