14/10/2015
SEECAN
Creating a Page Course
Presented By SEECAN Officers:
Phil Coley
Frank Gamble
Bob Stephen
Course Outline
•
•
•
•
•
•
•
•
•
Session 1 – Introduction
Session 2 – Creating a page
Session 3 – Adding links
Session 4 – Adding Images
Session 5 – Adding Videos
Session 6 – Adding Documents and Maps
Session 7 – Arranging Images
Session 8 – Working with Categories
Session 9 – End of Course
Copyright Phil Coley 2015
1
14/10/2015
Session 2 – Creating a Page
How to insert and edit text.
• Naming a page.
• Loading text.
• Editing text.
• Adding headings.
• Formatting text.
• Saving a page.
• Publishing a page:
– Placing it into what’s new.
– Un-publishing a page.
Creating a Page
• Press “Edit the site” button.
• Press “Add a page” button.
1. Press
“Edit the site”
Copyright Phil Coley 2015
2. Press
“Add a page”
2
14/10/2015
Naming a Page 1
1. Enter a
page name
2. Enter a suitable
Sub-title
This will be
automatically created
3. Press
“Next >>>”
Use this if you wish to link directly
to another site
Naming a Page 2
Copyright Phil Coley 2015
3
14/10/2015
Copying Text
This slide is only for use during
the course to get text into the
training page
1. Double click “Base
text.txt” to open it
2. Highlight all the
text
3. Use Ctrl-C to copy
it all
Loading Text 1
1. Open up and copy text
from Base.txt
Copyright Phil Coley 2015
2. Use ctrl-v to paste
text onto page
4
14/10/2015
Loading Text 2
Edit, Format, Add Text
2. Use format
and other
buttons
1. Highlight
Text
Copyright Phil Coley 2015
5
14/10/2015
Saving a Page
1. Press
“Save“ tab
2. Press
Appropriate button
Publish a Page 1
Ignore these
You can put a page in more
than one category by
holding down the “ctrl” key
1. Press
“Publish” tab
2. Select category. We are
using “Training”
3. Unclick
“What’s new” box
Copyright Phil Coley 2015
6
14/10/2015
Publish a Page 2
Adverts are what appears
on side of page. Leave as
“[Inherit from category]”
Ignore other fields
1. Press
“Publish” button
Unpublish a Page
Un-publish to take a page off the system.
Re-publish to put it back on and at the top of
the “What’s new” list
2. Press
“Re-publish” button
1. Press
“un-publish” button
Copyright Phil Coley 2015
7
14/10/2015
Logging In
1. Enter
User name
2. Enter
Password
3. Press
“Log in”
• Log into Library Machines
• Open browser
• Enter:
www.benfleethistory.org.uk
• Enter User Name: TrainOne
(or Two etc)
• Enter Password
• Press “Log in” button
Session 2 – Exercise
• Log In, select “Edit the Site” and edit “Course”
page.
• Copy in text from Base text.
• Add Subheadings and Format them.
• Use Bullets, Bold, Italics and Underlines as
appropriate.
• Play with other Format options
• Position text Left, Right and Justified.
• Publish page into “Training” category with “Show
on ‘What’s New’ List” unset.
Copyright Phil Coley 2015
8
14/10/2015
Session 3 – Adding links
How to link text to other information
• Adding links:
– Internal links within a page (anchors).
– Internal links within an archive (anchors).
– External links to other sites.
Internal Links in a Page 1
2. Press the
Anchor icon
1. Select the point
to put an Anchor
Copyright Phil Coley 2015
3. Enter the
name for an
Anchor point
4. Press the
“Update” button
9
14/10/2015
Internal Links in a Page 2
2. Press link icon
1. Highlight text you
want to link from
3. Select internal
link name from
drop down list
4. Press “update”
button
Internal Links in Archive 1
1. Click
“Pages” Tab
Copyright Phil Coley 2015
2. Set “By status” to
“Already published”
10
14/10/2015
Internal Links in Archive 2
2. Enter a search term
for text in the
heading of a page
3. Use arrow
keys to find
page
1. Click “3 bars”
dropdown and
select “Find...”
4. Click “View”
link
Internal Links in Archive 3
1. Copy the last part
of the name e.g.
page_id__245.aspx
Copyright Phil Coley 2015
11
14/10/2015
Internal Links in Archive 4
1. Highlight text you
want to link from
2. Press link icon
If you want to unlink then highlight
link text and press unlink icon.
3. Enter page is and tag.
In this case:
page_id__245.aspx#Stleger
4. Press the “update”
button which is lower
on the page
Internal Links in Archive 5
1. Set “By User” back
to your User Id
Copyright Phil Coley 2015
12
14/10/2015
External Links 1
First find your page on Google.
In this case Nellie melba
External Links 2
2. Press link icon
3. Enter full html address. In this case:
https://en.wikipedia.org/wiki/Nellie_Melba
4. Press “update”
button
1. Highlight text you
want to link from
Copyright Phil Coley 2015
You also use this
method to directly link
videos including those
from YouTube and
other video sites
13
14/10/2015
Session 3 – Exercise
• Find “Just before the war Dennis’s brother”,
Insert an Anchor before it with a name.
• Find “His brother Douglas Francis Warham”,
Highlight it and link to the Anchor.
• Link “2nd Lieutenant” to
“page_id__245.aspx#Stleger”
• Search Google and find “Dame Nellie Melba”.
• Link her name on the page to the article.
• Find a YouTube video and link it to some text.
• Preview and save page.
Session 4 – Adding images
How to add images to a page.
• Importance of getting the right size for an
image.
• Uploading an image.
• Adding text to an image.
– Hiding an image.
– Arranging order of images.
• Connecting to an image on another site e.g.
Wikipedia.
Copyright Phil Coley 2015
14
14/10/2015
Right Size
• If you put a large image
of say 3 mb in sizeit will
only slowly download.
• Also people will pinch it.
• We use medium images.
• Use an image resizer such
as
https://imageresizer.code
plex.com/
Uploading an image 1
1. Press
“Add photos” tab
2. Press
“Choose file”
button.
Then navigate
to the folder
which has the
picture in it
Copyright Phil Coley 2015
15
14/10/2015
Uploading an image 2
1. Select image
2. Press “Open”
button
Uploading an image 3
Note that the file name of
the image is shown
1. Press
“Upload this image”
button
Copyright Phil Coley 2015
16
14/10/2015
Adding text to an image 1
1. Click image you
want to add text to
Adding text to an image 2
1. Enter a suitable
caption for the
picture
2. Enter who should
be credited with the
picture
3. Select if you want a
larger version of the
picture to display
4. Click if you do not
want to display the
picture on the page
Copyright Phil Coley 2015
17
14/10/2015
Adding text to an image 3
Ignore this field
These fields will be dealt
with in session 6
Click the “Move” buttons to
change the order of the
images on a page
1. Click “Done”
button
Click the “Delete” button
to remove an image from
a page
Adding an external image 1
1. Find an
external image
Copyright Phil Coley 2015
2. Copy the URL
18
14/10/2015
Adding an external image 2
1. Press
“Add photos” tab
2. Enter the URL of the external
image and add a space at the end
3. Press
“Link this image”
button
Adding an external image 3
2. Enter a
suitable caption
for the picture
3. Enter who
should be
credited with
the picture
Click the “Move” buttons to
change the image order
4. Click “Done”
button
Copyright Phil Coley 2015
Click the “Delete” button
to remove an
1. Click photo to
edit text.
19
14/10/2015
Session 4 – Exercise
• Add the three images in the course pack to
your page and edit the text.
• Find a suitable image on Wikipedia and add it
to the page. Edit the text.
• Move the images up and down in the page.
Session 5 – Adding Videos
How to add Getty Images, video and sound to a
page.
• Getty Images.
• YouTube Videos (Including Pathe).
• Sound clips.
Copyright Phil Coley 2015
20
14/10/2015
Inserting Getty Images 1
1. To embed Getty Images go to
http://www.gettyimages.co.uk/embed
2. Search for a
term. In this case
“18-pounder”
Note: the Getty
image search is not
that good and gives
different results in
different places.
Inserting Getty Images 2
1. Select and
image and click it.
This pop-up will
then appear.
2. Press the
embed button:
“</>”
Copyright Phil Coley 2015
21
14/10/2015
Inserting Getty Images 3
1. This pop-up will
appear. Copy the
code. The best way is
to right-click and
select copy
Inserting Getty Images 4
2. Point to
box and paste
code. (Rightclick and
select paste.)
Add a space
at the end.
1. Press
“Add multimedia”
tab
3. Press
“Add this code”
button.
Copyright Phil Coley 2015
22
14/10/2015
Inserting Getty Images 5
1. Press
“Edit” link
Do NOT edit any of the code!
2. Enter a title
3. Enter a
description
Inserting Getty Images 6
Do not use any other boxes shown on
this slide.
Click the “Move” buttons to change the
multimedia order. This does not change
the order within images.
Click the “Remove from Page” button to
remove an item from the page.
1. Click “Done”
button
Copyright Phil Coley 2015
23
14/10/2015
Inserting Getty Images 7
This is how the item now displays. You
can edit it and move it around in order
with other multimedia items
Inserting YouTube Videos 1
1. Search for
suitable video
Copyright Phil Coley 2015
2. Click on it to
run the video
24
14/10/2015
Inserting YouTube Videos 2
1. Click
“Share” link
2. Click the
“Embed” button
This panel displays. The
option here is a straight
link to be used by
highlighting text and
adding as described in
“External Links 2 “
Inserting YouTube Videos 3
4.Copy the code. The
best way is to rightclick and select copy
3. Select from the drop
down menu the size of the
video you wish to display.
2. Unset the “Show
suggested videos when the
video finishes.
1. Click “Show More”
button to display this panel
Copyright Phil Coley 2015
25
14/10/2015
Inserting YouTube Videos 4
2. Point to
box and paste
code. (Rightclick and
select paste.)
Add a space
at the end.
3. Press
“Add this code”
button.
1. Press
“Add multimedia”
tab
4. The rest of the
processing is
identical to
“Inserting Getty
Images” slides 5, 6
and 7.
Inserting Sound Files 1
2. Press
“Choose file”
button.
Then navigate
to the folder
which has the
sound clip in
it.
Copyright Phil Coley 2015
1. Press
“Add multimedia”
tab
We do not use this option.
If we have external clips
then it is beater to link
them to text.
26
14/10/2015
Inserting Sound Files 2
1. Select sound
clip
2. Press “Open”
button
Inserting Sound Files 3
Note that the file name of
the clip is shown
1. Press
“Upload this clip” button
We can upload video files directly.
We do not do this now as the
method is insecure. Always upload
video files to YouTube or Vimeo
etc. and link from there
Copyright Phil Coley 2015
27
14/10/2015
Inserting Sound Files 3
1. Press
“Edit” link
2. Enter a title
3. Enter a
description
We do not fill this is. It takes
a long time to transcribe an
audio clip and we do not
have the resource.
Inserting Sound Files 4
You can select a picture to be displayed with
your sound clip. The process is similar to
what was used to upload the sound clip
Do not use any other boxes shown on this
slide.
Click the “Move” buttons to change the
multimedia order. This does not change the
order within images.
Click the “Remove from Page” button to
remove an item from the page.
1. Click “Done”
button
Copyright Phil Coley 2015
28
14/10/2015
Session 5 – Exercise
• Find a suitable image at
http://www.gettyimages.co.uk/embed and
embed it into your page.
• Find a suitable video on YouTube and embed it in
the page
• Add the sound clip in the course pack to your
page, edit the text and add a picture from the
course pack.
• Move the media up and down in the page.
Remember to click “Done” when finished.
Session 6 – Adding Other
How to add documents and Google Maps to a
page.
• Adding documents:
– Uploading documents.
– Type of document to show.
– Displaying or downloading.
• Inserting a Google Map.
Copyright Phil Coley 2015
29
14/10/2015
Adding Documents 1
2. Press
“Choose file”
button.
Then navigate
to the folder
which has the
document in
it.
1. Press
“Add documents”
tab
It is best if PDF documents are used as
most people can read them. Word and
Excel files can be included and they do
work in an embedded Google Viewer
Adding Documents 2
1. Select
document
2. Press “Open”
button
Copyright Phil Coley 2015
30
14/10/2015
Adding Documents 3
Note that the file name of
the document is shown
1. Press
“Upload this document”
button
Alternatively add the full
address of a document on
this or another site into
this box. Add a space
afterwards and press “Link
this Document” button.
The rest of the editing is
the same
Adding Documents 4
1. Press
“Edit” link
2. Enter a title
3. Enter a
description
4. Select either
“Link to Download File” or
“Embedded in Google Viewer”
Click the “Delete” button to remove a
document from the page.
Copyright Phil Coley 2015
5. Click “Done”
button
31
14/10/2015
Add a Google Map 1
1. Press
“Add Map” tab
2. Enter search
term
3. Press
“Search” button
4. Add a caption
Add a Google Map 2
These controls do not
have much affect.
In practise you are better
adding picture maps then
using this option.
To remove a map set this
field to “No”
Copyright Phil Coley 2015
32
14/10/2015
Session 6 – Exercise
• Add the document and the spreadsheet in the
course pack to your page and edit the text.
• Play around with the
“Link to Download File” and
“Embedded in Google Viewer” options.
• Add a Google map to the Page
Session 7 – Arranging
How to position images where you want them.
• Using Preview options:
–
–
–
–
–
Text.
Text and Photos.
Photo Gallery.
Images side by side.
Slideshow.
• Positioning images exactly in text.
• Advanced placement (Ask your system
administrator)
Copyright Phil Coley 2015
33
14/10/2015
Using Preview 1
1. Press
“Preview” tab
2. Select:
“Text”
“Text “Option works well if
you only have text and
pictures. Then the
pictures line up on the
right hand side. As here.
Using Preview 2
1. Press
“Preview” tab
2. Select:
“Text”
“Text “Option does not
work well with complex
pages as we have.
Here the images are a
mess!
Copyright Phil Coley 2015
34
14/10/2015
Using Preview 3
1. Select:
“Text and photos”
“Text and photos” brings
the text up to the top and
puts everything else
below it.
Using Preview 4
1. Select
“Photo Gallery”
and Save.
2. On page select and
click a picture
“Photo gallery” only works
with plain text and photo
pages not complex pages.
Copyright Phil Coley 2015
Note: Any comment left on individual
pages of a gallery do not show on the
main page for the gallery.
35
14/10/2015
Using Preview 5
1. Select “Next”, “Previous”, or
“Menu” to navigate through pictures.
“Photo gallery”
only works with
plain text and
photo pages not
complex pages.
It does not
appear to offer
many benefits
Using Preview 6
1. Select:
“Slideshow”
“Slide show ”
only works with
plain text and
photo pages
not complex
pages.
It does not
appear to offer
many benefits
Copyright Phil Coley 2015
2. Press start for a
slideshow of pictures
to run
36
14/10/2015
Exact Positioning 1
1. For each image:
2. Give each a unique name in
“Replace this token” e.g ***Pic1***
4. Select from
“And Position it”:
Without alignment
Left-aligned
Right-aligned
3. Select from
“With this version of the image”:
Scaled
Full-size
Thumbnail
Original
5. Press “Done” button
Exact Positioning 2
Pictures are
placed where you
want in the text.
Keep each token
on a separate
line.
Copyright Phil Coley 2015
37
14/10/2015
Exact Positioning 3
Pictures are placed where
you want in the text
Using Preview 7
A good example of side by side is at
http://www.benfleethistory.org.uk/page_id__345.aspx
1. Select:
“Images side by side”
2. For each image:
2.1 Give it a token.
2.2 Set version to “scaled”
2.3 Position it “Left aligned
3. In text:
3.1 Place tokens together
e.g. ***Pic1******Pic2***
3.2 Use the
“Insert horizontal line”
button to separate photos
from text.
Copyright Phil Coley 2015
38
14/10/2015
Insert Horizontal Line
2. Click “Insert horizontal line” icon
1. Put the cursor where
you want the line and
throw a space
3. Enter a width
in pixels or %
4. Select height
5. Set
“No Shadow”
6. Press “Insert”
button
Line is then
displayed
Advanced Placement 1
1. It is possible for
your system
administrator to allow
you to place two
multimedia files
exactly by inserting
HTML. Ask them to
set it up for a page.
2. You can then place
them by inserting
tokens”$rawcontent”
and “$rawcontent2”
Copyright Phil Coley 2015
39
14/10/2015
Advanced Placement 2
This is how they are
displayed within the text
Session 7 – Exercise
• Play with the “Text” and “Text and photos”
options in “Preview”
• Give tokens to photos and arrange the
pictures exactly in the display.
• Use the $rawcontent and $rawcontent2
tokens.
• Get two of the photos to display side by side.
Copyright Phil Coley 2015
40
14/10/2015
Session 8 – Categories
How to add and use categories.
• What a category is.
• Creating a category.
• Creating sub-categories
• Arranging categories in order.
• Arranging pages in order within a category.
Add a Category 1
1. Press “Categories”
tab
Categories are a hierarchical
way of organising the pages
on the site into order
Copyright Phil Coley 2015
2. To Create a new category
press the “new
category” button
41
14/10/2015
Add a Category 2
1. Ensure “Add title”
tab is selected
2. Enter a title for
the category
Ignore the “Add extras” tab
You can add pictures in the
“Add graphics” tab
3. Enter optional information in the
“Short description” and
“Introduction” fields
Add a Category 3
4. Press the “Preview” tab to
see what it looks like
Copyright Phil Coley 2015
42
14/10/2015
Add a Category 4
1. Press
“Publish” tab
Ignore these
Set this box if you want to
hide category from the
public
2. Select category. We are
using “Training” so this
will be a sub-category
Adverts are what appears
on side of page. Leave as
“[Inherit from category]”
3. Press “Publish”
button
Arranging Categories 1
1. Press “Categories” tab
2. Click the category to organise
Copyright Phil Coley 2015
43
14/10/2015
Arranging Categories 2
1. Categories with sub-categories or
pages in them will have a “Organise” tab.
Press it.
Arranging Categories 3
1. Select “Custom”
from “ordering”
dropdown
2. Highlight category
to move
Copyright Phil Coley 2015
Options in “Ordering” are:
Default
Date added – most recent first
Date added – most recent last
Title, then sub-title
Sub-title, then title
Custom
3. Use the “Top”,
“Move up”, “Move
down” and “Bottom”
buttons to move
category
44
14/10/2015
Arranging Categories 4
1. Press
“Publish” tab
3. Press “re-publish”
button
Arranging pages 1
1. Get to “Organise” as in
“ Arranging categories”
slides 1 & 2
If a category has both subcategories and pages under it then
both change order boxes will show
on the “Organise” tab.
2. Select “Custom”
from “ordering”
dropdown
3. Highlight page to
move
Copyright Phil Coley 2015
Options in “Ordering” are:
Default
Date added – most recent first
Date added – most recent last
Title, then sub-title
Sub-title, then title
Custom
4. Use the “Top”,
“Move up”, “Move
down” and “Bottom”
buttons to move page
45
14/10/2015
Session 8 – Exercise
• Create a 3 new sub-categories under one of
the training categories e.g. Train01, Train02
etc.
• Change the order of these sub-categories.
• Change the order of the pages in the training
category.
Session 9 – End of Course
• Text edit as you will.
• Link extensively to add value to a page.
• Images try to use uploaded pictures for greater
control.
• Add videos and documents in moderation
• Arrange your pages using preview and exact
positioning.
• Create and arrange categories to order the
information.
Copyright Phil Coley 2015
46