How to update the Fay Johns website
Contents
Page
Overview
1
Accessing the Content Management System
1
Editing the Artist’s Details
2
Add an Artwork
- Resize the image
-
2-5
Complete the Add an Artwork form
View / edit the Artworks
- Overview
-
-
Edit Text
Reserved
Sold
Delete
Change the image
5-6
Editable Pages – Home Page
-
-
Overview
Save a backup
Restore a backup
Editing the text
7-8
How to use the Text Editor
-
-
Add new text
Delete text
Format text
Font and font size
Coloured text
Bullet points
Add a hyperlink to an external website
Add a link to another page on the site
Insert a table
Delete a table
Save changes
9 - 12
Adding pictures to the Editable Pages
-
-
Resize the image
Upload the image
Add the image to the page
12 - 13
Changing the date on the website
13
Logging off
13
(c) WesternWeb Ltd 2011
How to update the Fay Johns website
Overview
The website is built around a content management system which enables you to add new artworks
and to view and edit existing artworks. You can also update the home page and change the date
displayed on the website.
Accessing The Content Management System
1. To access the content management system, open Internet Explorer and enter the following
web site address:
www.fayjohns.co.uk/data/admin/admin_page.php
or click on the (c) symbol at the bottom of the home page (http://www.fayjohns.co.uk/)
2. A dialogue box appears asking for a user name and password which have been supplied
separately.
IMPORTANT NOTE: The username and password should be kept secure to avoid
unauthorized access to the administration pages.
3. Enter the username and password and click OK.
4. The Main Menu appears as shown below.
© WesternWeb Ltd 2011
1
Editing your details
Click on the ‘Edit Artist’s Details’ link on the Main
Menu and the page illustrated on the right appears.
The text in the boxes can be edited.
To save the changes, click on the Save button.
A message will appear confirming that the changes
have been made and with a link back to the Main
Menu.
Add an Artwork
Prepare the image
First, in order to ensure the best image quality and quickest download time, the image needs to be
resized and step by step instructions are given below.
The picture should be a digital image saved as a jpg. The file size should not exceed 40KB and an
image width not exceeding 500 pixels would best suit the layout of the website. You may
already have a graphics programme which you can use to resize the image but if you do not, you
can download IrfanView which is a free basic graphics programme. It can be downloaded from
www.irfanview.com The instructions below explain how to use IrfanView to resize images.
Step 1
 Open Irfanview and click on the File menu and on Open to display the Open dialogue box.
 Click on the down arrow and select Desktop from the drop down list.
 Then click on ‘Fay’s Artwork’ and then click on the name of the image file you wish to resize
and click on the Open button.
Step 2
 Depending on the size of the image, you may need to Zoom Out to see the whole
image on your screen. To do this, click on the Zoom Out icon on the IrfanView
toolbar along the top of the screen. You may have to click the Zoom Out icon
several times before you can see the whole image on your screen.
Step 3
 Remove any unwanted areas from the
image by cropping. To crop, point with the
mouse to the top left corner of the area you
want to keep and then, holding down the
left mouse button, drag diagonally to create
a rectangle around the area you want to
keep. Note that the dimensions of the crop
rectangle are displayed in the title bar.
 Click on the Edit menu and on Crop
Selection. This crops the picture (you may
need to Zoom Out again to view the whole
image on your screen).
© WesternWeb Ltd 2011
2
Step 4
Next, to resize the image,
click on the Image menu and
on Resize/Resample to open
the dialogue box shown on
the right.
Make sure that the ‘Set new
size’ option is selected
In ‘Units’, ‘Pixels’ should be
selected.
Make sure that the ‘Preserve
aspect ratio’ checkbox is
ticked.
Then enter the required width
e.g. 350 and click OK.
As aspect ratio is preserved, when you enter the width, the height is entered automatically to ensure that the image
remains in proportion.
Step 5
 Having resized the image, you may find it necessary to sharpen the image. This can be
done by clicking on the Image menu and then on Sharpen. If you wish to undo this effect,
click on the Edit menu and Undo.
Step 6
 If the image is dark, you may wish to lighten it. This can be done by clicking on the Image
menu and then on ‘Enhance colors’. The dialogue box shown on the right appears.
 Slide the arrow in the Brightness row slightly to the right and the effect will be shown in the
‘New Image’ in the dialogue box. When you are satisfied with the result, click OK.
 If you wish to undo this effect, click on the Edit menu and Undo.
Step 7 Save the image
 Click on the File menu and on Save As to open the Save Picture As dialogue box.
 The Save In box on your computer normally shows ‘My Documents’ and the folder ‘Pictures
for Website’ will be listed. Click on ‘Pictures for Website’.
Then in the ‘File Name’ box
type a suitable file name, e.g.
Summer Pansies Small, to
help you identify the file when
you come to upload it to the
website.
In the ‘Save as type’ box
click on the arrow and select
‘JPG – JPEG Files’
Click on the Save button
.
© WesternWeb Ltd 2011
3
Complete the Add an Artwork form
Once you have saved the resized image, you are ready to add the artwork to be displayed on the
website. Click on the ‘Add Artwork’ link on the Main Menu and the form shown below appears for
you to complete.
Click on the Browse button to open the
‘Choose File to Upload’ dialogue box. The
Look In box normally displays My
Documents. In the list of files and folders in
My Documents, click on the ‘Pictures for
Website’ folder. Then find the image file
you wish to add and click the Open button.
If you do not know the price,
leave the price box blank and
POA will be displayed on the
web site by default.
An example of a completed form is shown below.
© WesternWeb Ltd 2011
4
When you have completed the form, click on the Submit button. If you have failed to enter all of the
mandatory fields, a message will appear reminding you to do so.
If you have entered all the required fields, the page illustrated below will appear confirming that the
image has been uploaded and that the new artwork has been added – it will now be displayed on
the live website. The image and details of the artwork will also be displayed.
If you want to make any changes, click on the link to ‘Main Menu’ and click on the ‘View/Edit
Artwork’ link. Editing an artwork is explained below.
View/Edit the
Artworks
To view or edit an
artwork, click on the
‘View/Edit Artwork’
link on the Main
Menu and the page
illustrated on the right
appears listing the
artworks each with
Edit Text, Edit Image,
Reserved, Sold and
Delete Artwork
buttons.
Instructions on how
to use these buttons
are given overleaf.
© WesternWeb Ltd 2011
5
The Edit Text button
The Edit Text button takes you to
another page illustrated on the right.
The text in the boxes can be changed.
To save the changes, click on the
Save button.
The page then displays the amended
entry.
The Reserved button
This is a quick way of changing the status of the picture to Reserved. The word ‘RESERVED’ is
then displayed before the price on the live website.
The Sold button
This is a quick way of changing the status of the picture to Sold. The word ‘SOLD’ is then
displayed instead of the price on the live website.
The Delete button
The Delete button deletes the artwork permanently – a warning
message appears when you click on the Delete button giving you the
chance to Cancel if you do not want to continue with the deletion.
The Edit Image button
The Edit Image button opens a form which enables you to change or delete the image of the
artwork. (You cannot use this page to edit the text.) Remember to use a prepared image file in ,jpg
format, not exceeding 40KB and being, preferably, 350 pixels wide. For instructions on resizing
images, see pages 2 - 3.
Use the Browse button to locate the prepared image file in your computer file system and click on
the Change Image button. A message will appear confirming that the picture has been changed
and displaying the new image along with the artwork details.
Note: If the image you have selected exceeded the permitted file size, it will not be uploaded.
Note: if you click on the Change Image button without choosing an image using the Browse button,
the current image (if any) will be deleted.
© WesternWeb Ltd 2011
6
Updating the Editable Pages
Any pages listed in the Editable Pages section on the Main Menu
are editable. Currently there is only one editable page – the
Home Page.
To update the Home Page, click on the Home Page link in the Editable Pages section of the Main
Menu. This opens a page showing the existing content of the editable page.
Save a backup
It is a good idea to save a backup of the page before you edit it. To do this, just click on the Save
Backup button. Each backup is automatically given an ID number and the date and time of the backup
is recorded.
Click on the View Backups
button to view a list of the
backups as illustrated on the
right. The most recent backup
is always at the top of the list.
There is a Delete backup
button to enable you to delete
old backups if you wish.
To view the contents of a
backup, click on the View
backup button for the relevant
© WesternWeb Ltd 2011
7
backup. This opens the page illustrated below which contains the option to overwrite the existing page
with the backup by clicking on the Restore backup button.
Tips on using the Backup Facility

Save a backup before you edit the page.

If, after changing the page, you want to go back to the previous version, use the View Backups
button to look at the list of backups for that page. The most recent backup is at the top of the list.
Click on the View backup button to look at the backup to make sure it is the one you want to go
back to. Then click on the Restore button – once you have clicked on the Restore button the
existing content of the page is overwritten and cannot be recovered unless you had saved a
backup of it before doing the restore.
Editing the page
When you have created a backup, click on the Edit Page Content button to open the text editor.
General instructions on using the text editor and on formatting text and using other features of the text
editor are given overleaf.
Warning: Do not copy and paste direct into the text editor from a Word
or other document – see overleaf for further instructions.
© WesternWeb Ltd 2011
8
How to use the text editor to edit text
The text displayed in the text editor can be edited as
follows:
Warning: Do not copy and paste direct into the
text editor from a Word or other document –
instead copy and paste into Notepad
(Programs/Accessories) and then copy and paste
from Notepad into the text editor.
To add new text, click with the left mouse button
where you want the new text to appear and type in the text. If you want to move down to a blank line,
press the Enter key on your keyboard.
Note: if you do not want to leave a blank line above the new line, hold down the Shift key (located
below Caps Lock on the keyboard) as you press the Enter key.
To delete existing text, select the text you want to delete and press the Delete key on your keyboard.
To format existing text, select the text you want to edit and click on the relevant icon on the text
editor toolbars
Text colour
Bold Italics Underline
Undo button
Left – Centre – Right
Alignment
Bullets
Numbered List
Insert Table
Tips:
 Avoid using underlining as visitors may think the underlined text is a link.
 Avoid overuse of CAPITALS or italics, as the text may be difficult to read.
To change the font and font size
The 'Select Font' and the 'Size' drop down lists provide a range of web safe fonts and sizes for you to
use. (Remember to select the text before you click on the 'Select Font' or ' Size' drop down arrow.)
NOTE: There is no need for you to change the font or color in the text editor as the editable page
on the live website will automatically take care of this.
The font used on the
website is Verdana size 2
Note: If you are just viewing these lists and wish to close the list, simply click on the drop down arrow again.
© WesternWeb Ltd 2011
9
To change the text colour
To change the colour of text, select the text and click on the
text colour icon. Click on the colour of your choice.
Note: the blue text colour used on the website is #333399
The text colour used in the Home Page is black #000000 and
this colour will be applied automatically unless you override it
by choosing another colour.
To add bullet points
This is easy to do using the bullet point icon on the text editor toolbar.
- To create a list with bullet points, first type the list in the text editor with each line as a separate
paragraph. (i.e. you use the Enter key at the end of each line). Then select the list and click on the
bullet point icon.
- To remove a bullet point, click in the line with the bullet point and then click on the bullet point icon
on the toolbar.
- If you want to add bullet points to an existing list of bullet points, click at the end of the last line
of bullet points and press the Enter key. This creates a new line starting with a bullet point. Just type in
the text you want next to the bullet point.
To add a hyperlink to an external website:
 Type the text you want to use as a link, e.g.
Plymouth City Council, and highlight that
text.
 Then click on the hyperlink icon and
a dialogue box will appear as
shown on the right.
 Enter the address of the website page you want to link to (include http://) and select _blank from
the Target drop down list. Click Submit.
Note: it is important to select the target _blank as this ensures that
the website you link to opens in a separate window.
© WesternWeb Ltd 2011
10
To add a hyperlink to another page on the website:
 First, you need to know the address of the page you wish to link to. The best way to find out the
address is to go to the page on the website and copy the address from the browser e.g.
http://www.fayjohns.co.uk/enquiries.php
 Then return to the text editor and type the text you want to use as a link, e.g. contact me, and
highlight that text.
 Then click on the hyperlink
icon and a dialogue box will
appear as shown on the right.
 Paste or type in the address of the
website page you want to link to
(include http://) in the URL field.
e.g. http://www.fayjohns.co.uk/enquiries.php
 Leave the target as no target as you do not want the page to open in a separate window. Click
on the Submit button.
Using tables in the text editor
Tables are a useful way to place text and images side by side. When a table is inserted, the borders of
the table and the columns are shown in the text editor as dashed lines. These dashed lines do not
appear on the live web page – they are only visible in the administration pages so that you can see
what you are doing. (Note also that the font size displayed in tables in the text editor is larger than the
font actually shown in the table on the live website.)
The table structure cannot be altered after the table has been inserted so if you are creating a new
table, make sure that you know how many columns and rows you will need before you insert the table.
To insert a new table:
 Click in the text editor where you want the table to appear.
 Click on the table icon
and a dialogue box appears as shown below.
 You need to enter values for the Rows, Cols, Padding, Width and Alignment.
A typical setting would be:
Row 1
Cols 2
Padding 5
Width 100%
Alignment Centre
(Note: it is best to specify a width of 100% - if you do specify a width in pixels do not exceed 560 pixels
as otherwise you may distort the overall page structure.)
 Click the Submit button and the table will appear with dashed lines showing the borders (as
mentioned above these dashed lines do not appear on the live web page).
© WesternWeb Ltd 2011
11
Once you have inserted the table, you can click in a cell in the table and enter text. You can also insert
a picture – see below for further instructions. Note that as soon as you enter text or insert an image in
the first cell, that cell may extend in width, pushing the other cell(s) to the right. When you enter text or
an image in the other cell(s), the column widths will readjust automatically. When placing images side
by side in columns in a table, bear in mind that the maximum recommended width for the table is 560
pixels.
To delete a table, click on the dotted border of the table. A frame of white boxes appears round the
table to indicate that it is selected. Then click on the Delete key on the keyboard.
Saving the changes
When you have completed the changes, click on the Save button. A message box appears confirming
that if you click on the OK button the changes will go live on the website. If you are happy with this, click
on the OK button.
If you do not want the changes to go live, click on the Cancel button – you can then continue editing the
page or you can leave the text editor without making any changes by clicking on the Main Menu link at
the bottom of the text editor.
When you have saved the changes, a page is displayed showing the contents of the page. If you want
to make further changes, click on the ‘Return to Edit’ link at the bottom of the page.
- Adding images to an editable page
Prepare the Image
You can add pictures to an editable page (i.e. the Home Page) but the pictures need to be resized first.
The picture should to be a digital image saved as a jpg. The file size should not exceed 50KB and it is
recommended that the image should measure no more than 300 pixels wide. See pages 2 and 3 for
instructions on resizing pictures.
Upload the Image
Once you have a prepared image file saved on your computer, the next step is to upload it as follows.
1. Click on the link ‘Upload an Image’ link on the Main Menu.
2. This link opens the form illustrated below.
Note: If you try to
upload an image file
which exceeds the
permitted file size, a
message will appear
stating that the
image has not been
uploaded.
3. Use the Browse button to locate the prepared image file on your computer and click on the Upload
button.
4. A message will appear confirming that the image has been uploaded and displaying it together with
details as to its unique file name, dimensions and file size.
© WesternWeb Ltd 2011
12
A list of all uploaded images is displayed if you click on the ‘View
Uploaded Images’ link in the Main Menu or above the text editor.
Any image which is on the list of uploaded images can be inserted
into an editable page.
Insert the image into the editable page using the text editor.
 Open the text editor for the page
 Click on the ‘List of uploaded images’ button above the text editor and find the image you want
to insert. Make a note of its name – this will be a unique number, which was automatically
assigned to it when the image was uploaded, followed by the file extension e.g. .jpg
 Click in the text editor where you want the image to appear (this may be in the cell of a table,
see page 11, or it could be in a blank line between two paragraphs of text).
 Click on the Insert Image icon
and the
dialogue box shown on the right will appear.
 Insert the Image URL – this is the name of
the image file (don’t forget to include the
correct file extension e.g. .jpg).
 Then type in Alternate Text (i.e. a short
description of the image – this is read by
Google when searching for key phrases as
well as by software for the visually impaired)
 Then click Submit and the image should
be displayed in the text editor. (If it does
not appear, you may have made a
mistake in entering the file name and
extension. In that case, click on the
image and press the Delete key on your
keyboard and try again.)
Remember to
include the correct
file extension eg
.jpg
 If you wish, you can centre align the
image using the alignment icons on the
text editor toolbar.
 Remember to save your changes so that the picture appears on the live website.
Changing the date on the website
A date appears at the foot of the pages on the live website. It is advisable to change this date every
time you update the website as this shows that the website is being regularly maintained. To do this,
click on the ‘Change Date on Website’ button on the Main Menu.
Logging off
Remember to close your browser (e.g. Internet Explorer) when you finish using the Website
Administration Pages as those pages remain accessible without entering the password until your
browser is closed.
© WesternWeb Ltd 2011
13