Website Style Guide Section A
The Thebasic basicelements elementsofofour ourvisual visual identity identity
3 A-1
Template TemplateStyles Styles
3 A-1
TextStyles Styles Text
A-3 6
Documents Documents Image Styles Image Styles Date Style Date Style Link Style Link Style Page Style
A-3 6 A-4 7 A-5 8 A-5 8 A-5
Page Stylefrom House Style Guide Extract
8 A-6
Extract from Guide Website PageHouse EditingStyle Guide
9 Section B
Website Image Website Page Editing EditingGuide Guide
Section C 15
Website Image Editing Guide
Rev. 3 4th November 2011
Revised 8th March 2012
41
TheThe Basic Elements Identity basic elementsofofour ourVisual visual identity The Inland Waterways Association is an organisation which, like all other voluntary, public and commercial organisations, has to compete for public recognitionAssociation and support is in an a very crowded environment. andvoluntary, consistent visual is an The Inland Waterways organisation which, like Aallclear other publicidentity and commercial essential part of our strategy gain that support. Therecognition large numberand of different and crowded the de-centralised committee and organisations, has totocompete for public supporteditors in a very environment. A clear branchand structure of our visual Association makes it even more part important that we havetoa gain look and to our web-site, we canof consistent identity is an essential of our strategy thatfeel support. The largethat number presentdifferent consistently, acrossand the the entire site to the world. editors de-centralised committee and branch structure of our Association makes it even
more important that we have a look and feel to our web-site, that we can present consistently, and across the entire site to the world.
Template Styles Template Styles A series templates are used and applications. screen-shotsThe of these templates are detailed in the A ofseries of templates are these used have and particular these have particularThe applications. screen-shots of these templates following pages, apart from the ‘Master’ templates - IWA, IWAShop and WRG (only editable by site administrators).
are detailed in the following pages, apart from the ‘Master’ templates - IWA, IWAShop and WRG (only editable by site administrators).
For the purposes of this document we will refer only to the IWA site throughout, although the templates also exist in the WRG site. For the purposes of this document we will refer only to the IWA site throughout, although the templates
also exist in the WRG site.
They are:
They are:
Branch Page
Branch Page
This is the Branch/Region ‘Home’ Page and has a particular structure, allowing for an introduction to the branch or region, followed by an events listing and then by a discussion forum listing. The right column This is the Branch/Region ‘Home’ Page and has a particular structure, allowing for an introduction to the branch or region, contains a list of the waterways in the branch and links to the appropriate waterways pages, that already followed by an events listing and then by a discussion forum listing. The right column contains a list of the waterways in the exist in the ‘Waterways’ section. Waterways under restoration and derelict waterways are also listed here, branch and links to the appropriate waterways pages, that already exist in the ‘Canals & Rivers’ section. Waterways under withand links, where appropriate, tolisted underlying existing pages.appropriate, to underlying existing pages. restoration derelict waterways are also here, with links, where
!!
Note: should Eventsnot should notinbethelisted in theasnavigation as thisoverlong, will become overlong, messyEvents and are listed Note: Events be listed navigation this will become messy and unattractive. unattractive. in the appropriate with a link to an underlying page in the calendar. in the appropriate boxEvents with a are link listed to an underlying page in thebox calendar.
Rev. 3 4th November 2011
Revised 8th March 2012
3
A-1
This page allows the arrangement of text and images into two columns – a bit like a newspaper, with the optional banner in the right column.10 Sub-page with right column
Sub-page with right column
where information links to the main text ThisIsisused the most popular template or used on related the website. Images, text andare linksrequired. can be added to the right column to embellish the main text or direct the user to a related part of the site. Subpage Subpage
This page is used where the page information is necessarily uncluttered.
Rev. 3 4th November 2011
5
Reviseduncluttered, 8th March 2012 like A-2 This is the default page style. This page is used where the page information is necessarily the example given here – it is giving very specific and targeted information.
Text Styles
Subpage
Photo-Gallery Page
The photo-gallery page template can be used to display images of branch events and activities. (Please see ‘Photo Gallery’ on page B-19)
This is the default page style. This page is used where the page information is necessarily uncluttered, like the example given here – it is giving very specific and targeted information.
Text Text Styles Styles
A number of text styles are available within the content management system. These are:
A number of text styles are available within the content management system. These are: Paragraph
Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6
Preformatted
Use paragraph format for most text. Heading 1 does not appear as listed, but as shown above; it can be used, for instance, to add a similar title to the main page title in the right hand column. Do not SHOUT Use paragraph format for most text. Heading 1 does not appear as listed, such but asas shown above; headings.. it can be used, for instance, (use all capitals). Only use bold for occasional emphasis, paragraph to add a similar title to the main page title in the right hand column. Do not SHOUT (use all capitals). Only use bold for occasionalDocuments emphasis, such as paragraph headings..
Documents are generally uploaded only as pdf’s. This is a ‘universal’ format, and doesn’t involve problems, Documents such as the version conflicts that occur in MS Word and MS Excel.
Documents are generally uploaded only as pdf ’s. This is a ‘universal’ format, and doesn’t involve problems, such as the version Pdf’soccur are uploaded theMS relevant conflicts that in MS Wordtoand Excel. pdf folder for the region or branch and are accessed via an internal link.
tofolder the Issuu system as accessed a pdf and Pdf ’s are Magazines uploaded toare the uploaded relevant pdf for thescreen regionreader or branch and are viaaccessed an internalvia linkanorexternal via Issuu.‘embed’ link to the IWA account in Issuu. (Please see the ‘Guide to the Issuu Screen Reader’ on page 51).
Magazines are uploaded to the Issuu screen reader system as a pdf and accessed via an external ‘embed’ link to the IWA account in Issuu. (Please see the ‘Guide to the Issuu Screen Reader’ on page C-11). 6 Rev. 3 4th November 2011 Revised 8th March 2012
A-3
Image Styles
Image Styles These are Styles uploaded to the relevant images folder for the region or branch. Image Image Styles
ion or branch. These are uploaded The images used: to the relevant images folder for the region or branch. or branch. These are uploaded to the relevant images folder for the region or branch. These are uploaded The images used at: to the relevant images folder for the region or branch. • In page headers The images used inat:the branch/region home page The used at: pages • images In page headers in the branch/region home pagepage • In page headers for below the branch/region home ome page • In page headers in the branch/region home page home page • In embedded page headers for pages below the branch/region • Images in text • In page headers in the branch/region home page page • In page headers for pages below the branch/region home • Images used in right-hand in columns pagepage • Images embedded text below the branch/region home /region home page • In page headers for pages below the branch/region home page • Images used as linksintoright-hand magazines the underlying screen reader system Images embedded in textuploaded • • Images used columns to below the branch/region home page nderlying system • reader Images embedded in text on home screen page • Map links Imagesused usedasinlinks right-hand columns below the branch/region • • Images to magazines uploaded to the underlying home screenpage reader system • Images used in right-hand columns below the branch/region home page ying screen reader system Images system • • Map linksused as links to magazines uploaded to the underlying screen reader system Images used as links to magazines uploaded to the underlying screen reader system Are••at the following Map links sizes, in pixels: • Map links Are at the following sizes, in pixels: Are at the following sizes, in pixels: Are at the following sizes, in pixels: Branch home page left and right columns 236px x 80px
Branch home page left and right columns 236x80 Branch home page left and right columns 236x80 Branch home page left and right columns 236x80
Branchhome home page central Branch page central column Branch home page central column 466x80. 466px x 80px Branch home page central column 466x80. column 466x80.
Other pages are at 220x80 for ‘narrow’ columns Other pages columns are at 220px x 80px for ‘narrow’ columns Other pages are at 220x80 for ‘narrow’ Other pages are at 220x80 for ‘narrow’ columns
mepage age ge lected. d.
Images in right hand columns below the branch/region homepage Images right hand branch/region can bein220 wide bycolumns whateverbelow size isthe suggested by the homepage image Imagesin in right hand columns below the branch/region homepage Images right hand columns below the branch/region homepage can be 220px can be 220 wide by whatever size is suggested by the image manipulation programme when ‘maintain aspect ratio’ is selected. can be 220 wide bysuggested whatever size is suggested by the image when wide by whatever size is by the image manipulation programme manipulation programme when ‘maintain aspect ratio’ is selected. manipulation when ‘maintain aspect ratio’ is selected. ‘maintain aspect programme ratio’ is selected.
edge. If Maps used to give directions must be 120 along their longest edge. If gation, e. If Maps used to isgive directions must benot 120shown along their longest edge. If a larger map required atopage in the navigation, Mapsthen used give belongest 120px along er Maps used to give directions must be directions 120 alongmust their edge.their If longest edge. If a larger map is required then n, map a larger map is required then a page not shown in the navigation, containing the larger aimage canshown be accessed using thecontaining smaller map pagethen not innot the shown navigation, the larger image can be accessed using the smaller map a larger map is required a page in the navigation, ap containing the larger image using the smaller map image asbea accessed link as can acan link containing the largerimage image be accessed using the smaller map image as a link image as a link
440x80 for central columns. 440x80 for central columns. forcentral central columns. 440px 440x80 x 80px for columns.
Rev. 3 4th November 2011 4th November 2011
Rev. 3 4th November 2011
7
7
7
Rev. 3 4th November 7 2012 Revised 2011 8th March Rev. 3 4th November 2011 7 Rev. 3 4th November 2011 7
A-4
710px x 80px for ‘broad’ columns
710x80 for x80 for ‘broad’ columns ’ columns
een reader system are 80x113. or A5 original Links tounderlying underlying magazines on Issuu the Issuu screen reader system 80x113. Links to magazines on the screen reader system are 80pxare x 113px. This is in proportion to to underlying magazines on the Issuu screen reader system are 80x113. an A4 or A5 original This is in proportion to an A4 or A5 original This is in proportion to an A4 or A5 original
by
Images within text articles areby either120 wide by s within text articles are either120 wide ct whatever size is suggested by the image hatever size is suggested by the image igh manipulation programme when pulation programme when ‘maintain aspect ‘maintain aspect is selected (if aor ‘portrait’ is selected ratio’ (if a ‘portrait’ type), 120 hightype), or 120 high ct whatever size is suggested by the image whatever sizeby is suggested by the image manipulation programme when ‘maintain aspect pulation programme when ‘maintain aspect ratio’ is selected (if a ‘landscape’ type) atio’ is selected (if a ‘landscape’ type)
Images within text articles are either 120px wide by whatever size is suggested by the image manipulation programme when ‘maintain aspect ratio’ is selected (if a ‘portrait’ type), or 120px high by whatever size is suggested by the image manipulation programme when ‘maintain aspect ratio’ is selected (if a ‘landscape’ type)
Photo are sized automatically. gallery images aregallery sized images automatically. Photo gallery images are sized automatically.
e Style Date Style
arch 2010
Date Style
st March areusing always written ordinals: are alwaysDates written ordinals: 21using 2010 21st March 2010
Dates are always written using ordinals: 21st March 2013
Style Link Style
once the reach their destination or landing page.
Link Style
Links much of the navigation forreach userstheir oncedestination the reach their destination provide of provide the navigation users once the or landing page. or landing page. f the linkmuch i.e. Anderton Boat Lift,fornot Anderton Boat Lift he only underlining distinguish them. Links provide the navigation for users their destination or landing page. Text links theofto form of the actual words ofthey the reach link i.e. Anderton Boat Lift, not Anderton Boat Lift nkstext, takewith the form of take themuch actual words of the link i.e. once Anderton Boat Lift, not Anderton Boat Lift
here. links arecolour all in the same colour as theunderlining text, with to only underlining to distinguish them. Textoflinks are all Text in the same as the text, withlinks only distinguish them. way linking to an underlying service page. Map cani.e. Anderton Text links take the form of theor actual words of the link Boat Lift, not Anderton Boat Lift here. Text links are all in the same colour as thea text, with only underlining to distinguish them. nlinks a page notImage shown in the navigation. links provide useful and of linking to an underlying service orcan page. Map links can provide a useful and user-friendly wayuser-friendly of linking to way an underlying service or page. Map links
used to provide link to larger image of thenot map on a in pagetonot shown in the navigation. to link tobe ahomepage larger of aathe map a links, page shown navigation. Image linksimage useful andon user-friendly way of an underlying service or page. Map links can be used to link to a fdthe branch template), are text linking tolinking a the larger image of the map on a page not shown in the navigation. , links, but not shown inlinks, the navigation. (Seebranch ‘Events Events (from theofevents section of the branch homepage template), are text (from within the branch eventswithin section the homepage template), are text links, linking to a links, linking to a
page in links, thedetails calendar, giving details of the shown in the branch navigation. Events (from within the events section ofevent, the branch homepage template), are text links, linking(See to a‘Events page in the calendar, n the calendar, giving of the event, but not shown inbut thenot branch navigation. (See ‘Events giving details of the event, but not shown in the branch navigation. (See ‘Events System’ on page B-21 for more details). System’ on page 36 for more details). m’ on page 36 forscreen. more details). within the visible To avoid these link lists becoming
to belinks grouped together logically. Navigation links (left bethe kept withinwithin the visible avoidlink these linkbecoming lists becoming toobecoming long create Navigation links (leftcolumn) column) should bevisible kept the visible screen. To lists avoid these link lists tion (left column) should be keptshould within screen. Toscreen. avoidTo these additional pages to allow links to be grouped together logically. too long create additional pages linkstogether to be grouped ng create additional pages to allow links to to be allow grouped logically.together logically.
e Style Page Style
Page Style
the number of pages – with links if necessary, rather than oft use the long screen. Page breaks suggested where different Do notItuse longmay pages. It is better to increase the number of pages – with links if necessary, rather than pages. is better to be increase the number of pages – with links if necessary, rather than
Try not to use long pages. It is better to increase the number of pages – with links if necessary, rather than extending the page
extending thethe page far below the ofmay the screen. breaks may be suggested different ding the page below visible edge thevisible screen. Page breaks may Page be where suggested where different farfar below the visible edge of theof screen. Pageedge breaks be suggested different subjects are to where be covered. subjects are to be covered. ts are to be covered. 8
An exception to this rule might include a news or blog style page where the user would expect the full article to be on one page. th Rev. 3 4th November82011Rev. 3 4 November 2011 A-5 Revised 8th March 2012
Extract from House Style Guide The following pages are reproduced from the IWA ‘House Style Guide’
Writing style When writing any content ‘on behalf of The Inland Waterways Association’ that will be read by anyone else, this note sets some guidelines for good practice and outlines some rules that should be followed. It highlights recurring errors, gives advice on writing style and includes lists of preferred spellings. The Association’s members and others who use our web site are alert to the misuse of the English language, misspellings and incorrect grammar. Such offences to good writing can risk undermining the subject matter and any information that we may be trying to get across.
Abbreviations Abbreviations should be avoided wherever possible, and always where there is any doubt as to whether all readers know what the abbreviations stand for. There are few abbreviations that should be frequently used; AGM, BW and IWA will probably be understood by most people familiar with the inland waterways, but even AWCC, DEFRA, EA, IWAAC, NABO and RYA will not be understood by all. Beware of abbreviations of names that begin with ‘The’ (eg ‘The Inland Waterways Association’ [IWA] and ‘The Waterways Trust’ [TWT]). The phrase ‘the IWA’ means ‘the The Inland Waterways Association’. Do not use full stops in abbreviations, except where they aid clarity: IWA (not I.W.A.), BW (not B.W.), Mr (not Mr.) and 8pm (not 8p.m.) Don’t invent abbreviations for your publication. IWA’s Secret Code List (available on the website) is a good source of the full proper names of organisations.
Capital Letters Proper names should always begin with capital letters, for example: • British Waterways • Oxford Canal (not Oxford canal) • Anderton Boat Lift (not Anderton boat lift) • Thames Lock (not Thames lock) • Oxford and Grand Union canals (not Canals) • Thames or river Thames (the name is ‘Thames’ not ‘River Thames’, but see below) • the rivers Trent and Soar • spring, summer, autumn, winter - but January, February, March, etc. • north, east, south, west, southeast, northwest etc - but South Yorkshire Note: The Oxford Guide to Style clearly advises the use of a small ‘r’ for ‘river’ when used in ‘river Thames’, ‘river Trent’, etc, but this is considered by some to be archaic, and ‘River Severn’ or ‘River Trent’, etc, is acceptable where the context is clear that the word ‘River’ is intended to be part of the proper name.
Clarity Say what you mean. If you don’t mean it; then don’t say it. Short words are usually better than long words. Short sentences are usually better than long sentences. Keep it simple. Avoid phrases like ‘it is thought’, ‘it was agreed’ and ‘it was decided’ when what you really mean is ‘we thought’, ‘the committee agreed’ and ‘The panel of judges decided’, etc.
Clichés, Jargon, Metaphors and Tired Language There are too many overworked words and phrases in common use. Try to avoid words and phrases like bottom line, breakthrough, clamp down, crisis, cutbacks, dramatic, fuelled, giant, hit back, huge, key, massive, meaningful, overall, prestigious, problem, sources, track record and unprecedented unless you really mean them in their literal sense. Jargon that may not be understood by everyone likely to read your work should be avoided.
Revised 8th March 2012
A-6
Computers and Word Processors Automatic spelling and grammar checkers on personal computers and word processors are a great aid to writing, but need to be treated with some caution. Care is needed that the language setting on spelling checkers is set to UK English (rather than American English) and the grammar checker is switched on. To check these settings in Microsoft’s Word software, follow the following tabs: Spelling: Tools > Language > Set Language (select: English (UK)) Grammar: Tools > Spelling & Grammar (check correct boxes are ticked) In Office 2007 follow Office > Word Options > Proofing (check correct boxes are ticked) Be wary that automatic changes suggested by automatic checkers do not distort the intended meaning of your writing. If the grammar checker thinks your writing needs changing then your readers will be likely to agree and you should change it - but not necessarily to what the grammar checker suggests.
Confused Words The following words are often used in the wrong context, or confused with other words: • it’s means ‘it is’ • its is a possessive pronoun (ie something belongs to it) • meet people meet each other; they do not meet with each other • practicable means capable of being effected • practical means adapted to actual conditions • practice is a noun • practise is a verb • precipitate means rash or hasty • precipitous means very steep • presently means soon, not at present • to introduces a noun or an infinitive (eg to walk, to run, etc.) • too means ‘also’ or ‘in addition’ (eg it is an old canal too) • A good rule to follow is: ‘which’ defines, while ‘that’ informs; a comma usually precedes ‘which’.
Decorations Decorations are usually only mentioned in recording those favoured in the twice-yearly honours list. Remember that someone is appointed an OBE, etc, not awarded one.
Figures Numbers up to twenty should always be written as words and not numerals. Numbers between twenty-one and one hundred are usually better written as words, but may be written either way. • 800mm not 800 mm • 6ft 10in not 6’10 or 6ft 10ins • 34km, 42mm not 34 km or 42 mm • ‘2 - 4’ or ‘from 2 to 4’ not ‘from 2 - 4’ • 1960s not 1960’s (unless possessive) • 972-yard tunnel not 972 yard tunnel or 972yard tunnel
Italics Italics should be used, for example, to refer to books, films and television programmes. Italics can also be used to make words stand out and are usually preferable to bold print or underlining.
Revised 8th March 2012
A-7
Organisation and Company Names Beware of singular names ending in the letter ‘s’. There is only one organisation called British Waterways. British Waterways is a single organisation (not ‘are’). Company and organisation names are always singular. ‘IWA is’ not ‘IWA are’ ‘The Broads Authority has’ not ‘The Broads Authority have’ ‘The committee has’ not ‘The committee have’ ‘Members of the committee have’ not ‘Members of the committee has’
Proof Reading Always read through everything you have written before making it public facing, no matter how careful you have been in preparing your work. You should always get someone else to check anything that is being published, or sent to more than a handful of people.
Punctuation Punctuation is used as an aid to making the meaning of words clearer. As a general rule: if the addition of commas, hyphens, colons and semi-colons do not make a sentence clearer, then they are best left out. ‘The twenty-odd canals’ has a different meaning from ‘The twenty odd canals’
Spelling Some examples of tricky words that often catch people out: • Standedge Tunnel • Stoke Bruerne • towing path not towpath • ‘Narrow boat’ is usually preferable to ‘narrowboat’ even when referring to the type of boat, though the latter is acceptable. The well-known waterways author John Gagg would always write to Head Office to complain if ever he spotted ‘narrowboat’ in an IWA publication.
Tautology ‘A canal society officer said the decision would kill dead plans to restore the canal’ - As opposed to only partly killing it! Tautology is the use of words that merely repeat what has already been said. Weather conditions is tautological; so are burn down, close down, cut back, end up, equally as, finish up, in between, join together, joint co-operation, link together, mutual agreement, mutual co-operation, new departure, now remains, open up, outside of, pair of twins, past history, punctuation mark and temporary respite. Be careful also not to write successive sentences or paragraphs that merely repeat what has already been said. (Old school teacher trick: say anything three times, and it might get heard once). See ‘Unnecessary words,’ below.
Unnecessary Words Always review whether all the words you have written are necessary. Try to edit down what you have written and to remove words that convey no additional information. Change lengthy explanations for something that is sharp and to the point. Favouring the full stop above all other punctuation can sharpen text up. Short succinct sentences are more likely to retain a reader’s attention than longer sentences. This brief note covers only a selection of rules for good writing; there are many different styles and many other guides published. The following publications are recommended for further reference: • The Financial Times Style Guide • The Penguin Guide to Punctuation • The Penguin Guide to Plain English • The Oxford Guide to Style • The Economist Style Guide
Revised 8th March 2012
A-8
Website Page Editing Guide Section B
Rev. 3 4th November 2011
Revised 8th March 2012
Website StyleGuide Guide Website Style
3 Section A
Accessing Accessingthe theLogin LoginPage Pageand andlogging logging In In Accessing the CMS Accessing the CMS Accessing the Site Explorer Accessing the Site Explorer Navigating to your Branch Page Navigating to your Branch Page Creating a New Page Creating a New Page Page Contents Area
15 B-1 15 B-1 16 B-2 17 B-3 18 B-4 20
Page Contents Inserting a Link Area
B-6 21
Uploading Image Inserting aanLink
23 B-7
Uploading an Image Inserting a Table
B-9 24
Saving Pages Inserting a Table
25 B-10
Uploading Files and Images Saving Pages
26 B-11
Video Streaming Uploading Files and Images
28 B-12
Discussion Forum Video Streaming Photo Gallery Discussion Forum Events System Photo Gallery Website Image Editing Guide Events System
32 B-14 34 B-17 36 B-19 41 B-21
Website Image Editing Guide
Section C
1 Accessing the Login Page and logging in. • Type the website URL into the browsers address bar and add /admin to the end of the website address (http://www.waterways.org.uk/admin) • Press Enter • The CMS Login screen is displayed.
• Enter your Username and Password • Click . • You should now be logged in.
!
Note: Usernames and Passwords are case sensitive
2 Accessing the CMS ow that you are logged in you should be able to see tabs displayed in the top left hand side of your webpage. The tabs seen N here are determined by the permissions that you have as a user of the system. Your Username is displayed to the left of the Premier IT logo. • Click on the CMS2 tab.
• The CMS2 Home screen is now displayed.
Revised 8th March 2012
B-1
The areas of the CMS2 dashboard that you need to be aware of are: 1. Site Explorer - The site explorer is where you create Pages, upload Files and re-order the way your web pages are displayed in the page. 2. Reports - This is split into two sections, ‘Pages/Files for Review’ and ‘Recently Edited Pages’. Pages/Files for Review his section displays all pages that have had a ‘review date’ set. The page name is displayed in this section as a notification to T show you that its review date is nearing. The actual date that the page has been set for a review is displayed in the right hand column. This is for informational purposes only and you are able to edit pages at any stage. The page for review generally displays here about a week before the due date. It is useful so that your users never see content that is out of date and updated pages generally perform better in web searches. Recently Edited Pages his section displays the names and the ‘last modified by’ of all pages that have recently been edited in your branch. This T section offers another way of locating pages that you have been working on, as well as using the Site Explorer.
3 Accessing the Site Explorer The site explorer is where you create Pages, upload Files and re-order the way your web pages are displayed in the page navigation. • To access the Site Explorer, click on the Site Explorer menu.
Revised 8th March 2012
B-2
4. Navigating to your branch page. To see the existing pages in your branch area, you will need to navigate to them using the site explorer. You can open each of the directories by clicking on it. To find your branch page, click on the Branches & Regions folder, then click on your region, and finally click on your branch folder.
In the site explorer you will see the following options next to the pages you have permission to edit. Preview page Click this to preview an existing page in the sitemap. Edit page Click this to edit an existing page in the sitemap. Check box If you want to delete an existing page, check this box and then at the top of the sitemap page, click the button. Demote page If you have more than one branch page and have chosen to show it in the navigation, you will be able to see a list of pages in the left hand navigation of your branch pages. To alter the order of the pages, you can use the promote and demote page buttons to move your pages up or down in the sitemap. This will be reflected in the ‘front-end’ of the site. The demote page button moves pages down in the left hand navigation. Promote page This button does the opposite of the demote button, by moving pages up in the sitemap and in the left hand navigation of your branch area.
Revised 8th March 2012
B-3
5. Creating a new Page Pages are used to display the content that you create for your site. • To create a new Page you can either hover your mouse over the Site Explorer menu and click on New Page.
OR • From the Site Explorer page click the New Page icon. • You are now asked to complete certain fields required to create a New Page. Fields with a * are mandatory.
Revised 8th March 2012
B-4
The core options are: Title: Give your Page a name that is relevant to the content that you are going to write for this page. Try to keep the page focused on one topic and create links to other pages where necessary. Reference for URL: This is usually automatically suggested by the CMS based on the title given to the Page. The reference is used in the web address that appears in the address bar in the web browser. It is recommended that you keep the reference the same as the Page title or short and easy to remember if it differs from the title. It should be written in lower case only with no spaces. If you need to create a space then use a hyphen(-) or underscore(_). The URL cannot contain ‘reserved’ characters like ? or £ or $ or %. Directory: the Directory is the location of where you want your Page to be stored. You should store the page in your branch directory. Review Date: It is important to keep your website up to date, both for the benefit of the users of your site and your sites performance in the search rankings. You are able to use the calendar to set a date to review/update the content on this page. When the review date is nearing a notification will appear on the CMS Home screen. You are able to change the dates for review as often as you require. Type in the date dd/mm/yyyy or click to set a review date.
!
Note: If the review date for the page you are editing has passed, you will be unable to save any changes you make to the page until the review date has been deleted or updated.
Owner: If the System Administrator has set up users with the permission to be a directory/ page owner then you can select their name from here. This person will be the only person able to edit content on this page besides System Administrators and Page Approvers. Advanced Options Short Name (For Navigation): You may type a short title in here if your Page title is too long. The short title will be the title that is displayed on the front end of the website if you choose to enter a title in this field. Show in Navigation: If ticked then the page will be displayed on the front end of your site. If there is no tick in the check box then the page will remain hidden from the front end of the website, unless a link to the page is created manually. Description: This is currently used for an internal reference so that administrators know what the page should be used for. Template: All pages used in the CMS are built on pre-defined templates. This is to separate the design and content. Please refer to the website style guide for a list of templates. You are able to check how it appears in a ‘preview’ mode before you make it ‘live’.
!
Note: Once a page has assigned a certain template, it cannot be changed. The page would need to be deleted and then re-created.
Permissions: This box is where users can specify who will be able to see their pages if they want to restrict access. This is only relevant for pages created within the Private areas of the site, and therefore branch editors can ignore this option.
Revised 8th March 2012
B-5
• Clicking Cancel save.
will cancel the creation of the page or any additions added to these fields for this page since your last
• Click Next to save the Page and begin adding content. You have now created a page based on a certain page template and can now input content. Before/ or after you input content depending on which way you prefer, it is worth paying attention to the new optional fields that have been created for the page, Date Automation and Keywords. Advanced Options Date Automation (optional): You have the ability to set a date and time for your page to become viewable on the front-end of the site. This will only affect an approved page. You can also set the Auto Archive Date, which is the date and time the page will be automatically archived, and disappear from the front-end. This is useful for events pages, although please be aware that if you have created a text link to the page, when the page auto-archives the link will break, but the text will need to be manually deleted.
Keywords (optional): These are words that Search Engines use to help users find your site when searching. If you place a keyword in this field then it is important to use that keyword in the text of your page a few times. This lets the Search Engine know that the content on your page is consistent with the keyword that you have chosen. There are no limits to the amount of keywords that you can use but keep them relevant to your content and don’t overuse them or the Search Engine might consider your page to be Spam and negatively rank it. When inputting keywords imagine that you are the user looking for something that your organisation offers but are not aware that they exist or offer it.
5.1 Page Contents Area:
The area in the screenshot above is where you will place the content for the page that you have created. You can make use of the toolbar to edit the content that you type.
Revised 8th March 2012
B-6
Toolbar Options Bold & Italicise You can highlight sections of the text and use these buttons to make the text bold or italic. Subscript & Superscript Superscript is useful for things like dates, and fractions. You can highlight parts of the text and make it smaller. The subscript button will make the smaller text appear towards the bottom and the superscript button will make the text appear towards the top in relation to other text. Format The default format of your text will be paragraph. To create a heading within your text click here and select one of the heading options.
!
Note: The ‘Heading 1’ option will format your text in the same way as the main headings on your page, with the underline, although you won’t be able to see the effect properly until you preview the page.
Ordered/Unordered Lists If you want to created a numbered/bulleted list, simply highlight the text and click the relevant option. Undo/Redo If you make a mistake and want to undo what you have just done click the button. The button will redo whatever you have just undone. Please note that you can only use these buttons when they are highlighted in blue. Links You can add internal, external and anchor links to your page by highlighting the text/image you want to add a link to and selecting the appropriate option. Please see section 5.2 ‘Inserting a Link’, page B-7.. Add an image Click the button to add an image. Please see section 5.3 ‘Uploading an Image’, page B-9. Adding a table You can use tables to layout data in parts of your page or you can use it for laying out your whole page. Please see section 5.4 ‘Inserting a Table’, page B-10.
5.2 Inserting a link: There are three types of links available, they are: Internal Link - used to link two pages within your site. External Link - used to link a page from within your site to a web page that is external to your site. Anchor - used as a link to take the user from one point on a page to another specific point on that same page. It is generally used in Frequently Asked Questions pages.
Revised 8th March 2012
B-7
Internal Link: An internal link is used to link two pages within your site. • To insert an internal link, highlight the word that you wish to use as a link and then click on the link button box will appear.
and a pop up
• Make sure that the ‘Link Type’ is set to ‘Internal Link’. • Click the ‘Directory’ dropdown and select the directory/folder that contains the relevant page. • The ‘Page/File’ field will show all the available pages in that directory. • Select the page you want to link to from the Page/File dropdown list. • Click ‘Insert’ to create the link. • The linked text in the content area should now appear in blue and underlined. The linked text will actually appear in black and underlined in the front-end of the website. External Link: An external link is used to link a page from within your site to a web page that is external to your site i.e. an affiliate of yours. • To insert an external link, highlight the word that you wish to use as a link and then click on the link button box/modal window will appear.
and a pop up
• Make sure that the ‘Link Type’ is External Link. The area below this field will now change to show a ‘Link URL’ field. • Type the URL/page address (eg. http://www.waterways.org.uk) into this field and click insert. Make sure you include the ‘http://’ prefix. • This text should now appear in blue and underlined in your content area. • To create a link to an e-mail address, delete the ‘http://’ and instead enter ‘mailto:’ followed by the e-mail address. For example, ‘mailto:gemma.bolton@waterways.org.uk.’ Revised 8th March 2012
B-8
Anchor: An anchor is used as a link to take the user from one point on a page to another specific point on that same page. It is generally used in Frequently Asked Questions pages. This is a two part process. First you should create the anchor on the text that you want the user to be taken to (i.e. the ‘answer’ to the FAQ) and then you create the link on the text for the user to click on (i.e. the FAQ) to take them to the anchor. • To insert an anchor link, locate the first word of the sentence that you wish to use as the ‘answer’, click your cursor in the space just before the word and then click on the anchor button and a pop up box will appear.
• Give the anchor a name and click ‘Insert’. A little anchor symbol will appear next to your ‘answer’. • Next, highlight the text that you wish to use as the link, ‘the question’, and then click the ‘create link’ button. The pop up box used for inserting links appears. • Select ‘Anchor Link’ from the ‘Link Type’ drop down box. The area below this field changes to show a list of all anchors on this page. • Select the anchor that you want to use and then click ‘Insert’. The text should now appear underlined and in blue. Deleting a link: To delete a link without removing the text select the underlined (linked) text and click unlink.
5.3 Uploading an image You are able to upload images into the page content area by using the 6. Uploading Files/Images, page B-12)
button. You now have two options. (See also section
Insert existing image: If the image you want to use is already uploaded onto the CMS then you can use this option to locate and load it. • Select the directory that the image is stored in from the ‘Directories’ Note: Branch images should be found within the drop down list. images directory (folder) of the branch directory. • Select the image name from the ‘Available images’ drop down list. • Once selected, the image will appear in the ‘Preview’ pane. • Choose to have it left, centred or right aligned on the page via the ‘Style’ drop down list.
!
Revised 8th March 2012
B-9
2. Upload a new image: If you need to load a new image onto the system then use this option. • Make sure that your cursor is in the correct place that you want the image to appear. • Click the button in the toolbar. • Click the ‘Upload new image’ tab at the top of the pop up box. Note: If the ‘Title (URL)’ field contains any spaces, • Insert a ‘Title’ for the image. the upload will fail. • Select the directory that you wish to store the image in. • Type in a brief description (optional) that will appear when a user hovers over the image. • Click the ‘Browse’ button and select the image from where it has been stored on your computer. • Click ‘Upload’ and wait. • Once the image has uploaded the pop up box should display a preview. Click ‘Insert’ to add it to your page.
!
5.4 Inserting a Table You may wish to insert a table to display data or format the content of your page. • Click the ‘Insert Table’ icon in the toolbar.
You will be prompted for the number of rows and columns in the table.
• Enter the number of rows and columns required. • Click . • An empty table will be inserted into the content area of your page. Type text into the table cells as required:
• Resize the table by dragging a white selection handle, in the example below, we are dragging at the bottom-right corner:
Revised 8th March 2012
B-10
The following icons are available to modify the table:
5.5 Saving Pages There are icons which appear at the top and bottom of the page form. Save as a draft This allows you to save the page you are working on as a draft version so that you can come back and edit it at a later time. The changes that are saved as a draft will not appear on the live site. Save and Preview This option allows you to save the page as a draft and preview how it will look if you were to make it live. When you click on this button you are presented with the page preview screen and some further options. Edit allows you to return to the page edit screen from preview mode and make changes to the page. Page History allows you to compare two various versions of the page that have been saved in the past. Full Screen Preview allows you to view the page as if it were a live webpage.
!
Note: Edited pages do not automatically appear on the front-end of the site. The page will need to be made live by an administrator once editing changes are complete. Please email page approval requests to approvals@waterways.org.uk.
Revised 8th March 2012
B-11
6. Uploading files/images • To upload files or images, click on the ‘Upload File’ icon at the top of the site explorer as in the image below.
• Fill in the required fields. • Images should be added to the /images folder in your branch directory. PDFs should be added to the /pdfs folder in your branch directory.
Revised 8th March 2012
B-12
The core options are: Proposed URL: This is the ideal URL for the file/image. The actual url is automatically suggested by the CMS based on your proposed URL. The actual URL is used in the web address that appears in the address bar in the web browser. It is recommended that you keep the URL short and easy to remember. It should be written in lower case only with no spaces. If you need to create a space then use a hyphen(-) or underscore(_). Directory: the ‘Directory’ is the location of where you want your file/image to be stored. You should store images in the / images folder and PDFs in the /pdfs folder within your branch directory. Description: The description of the image/file helps to be found by search engines (eg. Google). Upload new file: Click the button to search for the image/file on your computer hard drive. When you have found the file, click and your file will be selected. Review Date: It is important to keep the website up to date, both for the benefit of the users of our site and our sites performance in the search rankings. You are able to use the calendar to set a date to review/update the content on this page. Permissions: This box is where users can specify who will be able to see their pages if they want to restrict access. This is only relevant for pages created within the Private areas of the site, and therefore branch editors can ignore it. Saving Files: When you have filled in the relevant fields click the save
button, and the file/image will upload.
Linking uploaded files: Once you have uploaded your file, you will need to create a link to it on your page. • Navigate to the page you want to add the link to using the site explorer. • In the ‘page contents’ area, add the text you want to use as the link (for example, “Download venue map”) and highlight it. • Click the button and using the internal link option, find your file in the relevant directory as you would if you were creating an internal link to another page. • Click insert to create the link, the text should now appear in blue and underlined.
Revised 8th March 2012
B-13
7.Video Streaming • Create a new page (see page B-4). • In the new page screen, fill out the relevant fields and select video_page as the template in the dropdown list. • Click the ‘Next’ button.
In the page contents area you have the ability to enter rich text both before and after the video clip you wish to place on the page. In the central dialogue you enter the embed code from the video you wish to use on the page. This can come from any video hosting site that permits the use of an embed code, in this example we have used YouTube.
You next need to obtain the embed code from a video hosting site. An example of this is YouTube www.youtube.com. You Tube currently accepts videos up to 15mins duration. • Open a new window/tab and navigate to www.youtube.com.
Revised 8th March 2012
B-14
If you want to upload your own content you will need to set up a YouTube account and sign in. • Once your account has been set up sign-in by clicking the link and entering your username and password then click ‘Sign In’.
• Click the ‘Upload’ Link to upload a video
• Locate the video for upload on your hard drive, and click ‘Open’ to upload the video.
• You can also upload from a smart phone - see your smart phone instructions.
Revised 8th March 2012
B-15
Once you have either uploaded or found the video you require, you must obtain the embed code to insert into the ‘embedded video’ box in the page content area. • Click on the ‘Share’ button underneath the video. • Click on the ‘Embed’ button. Some code will be displayed. • Highlight and then copy (right click or ctrl+c) the embed code.
• Go back to window/tab where you were editing your page content on the IWA website. • Right click inside the ‘embedded-video’ box and paste in the code.
Once you are happy with your text before and after and with the embed code click ‘Save and Preview’ to check that everything works before sending your e-mail to approvals@waterways.org.uk to get the page public facing.
Revised 8th March 2012
B-16
8. Discussion Forum The discussion forum is an area which allows members and others, who are registered for the forum, to participate in an online discussion, or share information by typing messages into the topic area. They do this by make a ‘post’, usually in reply to other people’s posts. this allows a discussion to build up withou everyone being on-line at the same time. Discussion forum topics are generated by administrators on request. This process also determines who the topic moderator(s) will be. The moderator has to ensure that no rude, abusive or actionable (libelous) posts are allowed to be viewable. Where something is found to be inappropriate after moderation an administrator can remove it. Forum topics can be resticted to certain groups: planning, for instance. The structure of data in the forum is hierarchical, with three levels, working from the general to the specific as follows: •
Topics: the core subjects being disussed on the forum (e.g British Waterways) • Threads: each topic may have several threads. A thread is a discussion by several members of the forum (e.g. Future management of the waterways, Use of Volunteers) • Posts: Individual messages posted by forum members (e.g. “Will anything change under these new arrangements? How are we insured if we volunteer?
Forum threads and posts can be generated by any forum registered user (members of the public can see unrestricted topics, but must register to post.) The discussion forum is accessed either through using the extension www.waterways.org.uk/discussion, or /forum where a complete list of forum topics can be found, or by following the links to forum topics from other pages.
Revised 8th March 2012
B-17
The url of a thread or an individual post can be used to link to the forum from your branch page. • Highlight the URL in the address bar. • Paste as an external link into your page (See page B-7)
There is an area on the main branch template where links to specific forum posts can be inserted.
Revised 8th March 2012
B-18
9. Photo Gallery The photo gallery has two main features: • •
Photo upload Image Gallery Template
It is necessary to upload images via the on-line form before images can be displayed on the website. The form can also be used by any web-site registered user to upload images for use by the association. • Navigate to the upload form www.waterways.org.uk/photoup
1. Complete the Title, Description and Contact details.
2. Click ‘choose’ and navigate to the image stored on your hard drive.
4. Upload up to 5 images at a time.
5. Tick the box and click ‘Upload’. 3. choose the image and click ‘Open’.
• E -mail approvals@waterways.org.uk specifying which images you have uploaded and what category you would like created for them. A gallery for branch events can be created for each branch. There are also categories and gallery pages for each waterway in the ‘Canal and Rivers’ section of the website. • An administrator will then create the category and attribute the images to that category.
Revised 8th March 2012
B-19
Image Gallery Template: Like other templates, the Image Gallery template can be selected from the list of available templates when creating a new page. • Create a new page (See page B-4). • Fill in form fields as usual • In the ‘Template’ drop down box select ‘Image Gallery’ or ‘Image Gallery WRG’ as appropriate.
• Click the ‘Next’ button. • There should be an ‘image_category’ dropdown in the ‘Page Contents’ area. • Select the image category created by the administrator for your images, to display the images on your page.
• Click ‘Save and Preview’ and check that everything works before sending your e-mail to approvals@waterways.org.uk to get the page public facing.
Revised 8th March 2012
B-20
10. Events System There is an events calendar to which events can be uploaded from the front-end of the website. Users do not need to be logged in to upload events. • To access the events system go to www.waterways.org.uk/events. This will display the IWA Calendar. • To upload an event, select the ‘Add Event’ tab
• Complete the information requested by the form (the add event form is shown on the next page). • Make sure you enter a valid e-mail address in case of any query about the event uploaded. • It is possible to ‘geo-locate’ the event on Google Maps by zooming into the map and clicking on the location of the event. This marker can also be placed by completing the’Venue Address’ box and clicking the link, ‘Find Using Above Address’. The address needs to contain a postcode for this to work. • Once you are happy with your event upload details click on ‘Continue’ to complete the event upload.
!
Note: Events cannot be edited from the back-end of the website. If event information needs amending or updating please email the details to gemma.bolton@waterways.org.uk
Revised 8th March 2012
B-21
Add event form
Revised 8th March 2012
B-22
Website Image Editing Guide Section C
Rev. 3 4th November 2011
Revised 8th March 2012
Website StyleGuide Guide Website Style
3 Section A
Website PageEditing Editing Guide Website Page Guide
15 Section B
GuidetotoImage ImageEditing Editing Guide
C-1 41
Guide to PDF Creation Guide to PDF Creation Guide to Issuu Screen Reader Guide to Issuu Screen Reader
C-8 48 C-11 51
Guide Editing GuidetotoImage Image Editing Irfan View – Image Manipulation (www.irfanview.com)
!
Note: If you are downloading Irfanview, you will also need to download the plugins from http://www.irfanview.com/plugins.htm to enable you to save images for the web.
Irfan View – Image Manipulation (www.irfanview.com)
This guide uses the example of creating a 220px x 80px image. You only need to substitute other desired sizes at each step to This the guide uses the example of creating a 220 80 Style pixelGuide. image. You only need to substitute other achieve different images sizes contained in the WebxSite
desired sizes at each step to achieve the different images sizes contained in the Web Site Style Guide
On opening Irfan View you must first open a file
On opening Irfan View you must first open a file
Click the open folder icon, or go to File →Open
Rev. 3 4th November 2011
41
Revised 8th March 2012
C-1
With the image open go to Image → Resize/Resample
42
Rev. 3 4th November 2011
Revised 8th March 2012
C-2
The existing image size is shown (in pixels)
Ensuring that ‘Preserve Aspect Ratio’ is selected, enter the desired width of the image – in this case 220. Then click OK
2
1
3
Rev. 3 4th November 2011
43
Revised 8th March 2012
C-3
Next go to Edit → Create custom crop selection
Enter the height required – in this case 80. Then click Apply to image
A crop mask appears at the top of the image. Right click the image and keeping the right mouse button down drag the mask to the desired part of the image
44
Rev. 3 4th November 2011
Revised 8th March 2012
C-4
Next go to Edit → Crop selection
Next go to File → Save for Web
Rev. 3 4th November 2011
45
Revised 8th March 2012
C-5
You now need to attribute the picture with copyright information Left click in the picture near the bottom left hand corner and draw a small box. Then click ‘Edit’ and select ‘Insert text into selection’
In the dialogue box click ‘Append Copyright’ and then type in the name of the copyright owner and the conditions and date of copyright. Set the Text alignment to ‘Right’ Then click ‘Choose Font’ In the Font dialogue box choose ‘ Gill Sans’ (if available – or similar sans serif font) Size ‘4’ Choose the colour – this will normally be white unless this will not be seen on the image – then choose black Click ‘OK’ and ‘OK’ again. 46
Rev. 3 4th November 2011
Revised 8th March 2012
C-6
You will now see the attribution on the photo. You will now set the attribution on the photo.
Note: Download images from the web with some circumspection. Many images available this way have ‘copyright’ set against them, and you would therefore need permission to us the image. Use other Note: Note: Download images from the web with some circumspection. Many images available this way have ‘copyright’ than that permitted can be found by web crawlers employed by image libraries. The first that is known set against them, and you would therefore need permission to us the image. Use other than that permitted can be about copyright infringement is when anfirst invoice found by webany crawlers employed by image libraries. The that isarrives! known about any copyright infringement is when an
! !
invoice arrives!
Images may be distributed under a ‘Creative Commons Licence’. This licence may allow either use, or maya place restrictions the use the image. Theeither codesunrestricted used are: use, or may place Imagesunrestricted may be distributed under ‘Creative Commonson Licence’. Thisoflicence may allow restrictions on the use of the image. The codes used are: •
Attribution (CC-BY)
•
Attribution Non-Commercial No Derivatives (CC-BY-NC-ND)
• Attribution • (CC-BY) Attribution Share Alike (CC-BY-SA) • Attribution Share Alike (CC-BY-SA) • No Attribution Derivatives (CC-BY-ND) • Attribution DerivativesNo (CC-BY-ND) • Non-Commercial Attribution Non-Commercial (CC-BY-NC) • Attribution (CC-BY-NC) • Attribution Non-Commercial Share Alike (CC-BY-NC-SA) • Attribution Non-Commercial Share Alike (CC-BY-NC-SA) • Attribution Non-Commercial No Derivatives (CC-BY-NC-ND)
CC - Creative Commons, - Attribution required, - Sharealike, alike,ND ND- -No Noderivatives, derivatives, NC NC -- Non-commercial. CC - Creative Commons, BY -BY Attribution required, SASA- Share Non-commercial.
All images must bemust attributed where thewhere copyright allowsholder the image to bethe used. Where image Where is intended All images be attributed theholder copyright allows image to the be used. thefor cropping, none of the ND images are suitable, as the cropped image would be a derivative of the original. BY and BY SA image is intended for cropping, none of the ND images are suitable, as the cropped image would be images can be cropped. Any image used by any trading entity (e.g. IWE, Essex Waterways) can not be only for NC use.
a derivative of the original. BY and BY SA images can be cropped. Any image used by any trading (e.g. IWE, Waterways) can not be only for NC use. Finally entity save the image for Essex the web. Finally save the image for the web.
Original and new (smaller file size)
It is possible to ask the programme to compress to a file size... ...and to select the format (normally jpeg)
Finally click the floppy disk icon to save Rev. 3 4th November 2011
47
Revised 8th March 2012
C-7
Guide PDF Creation Guide to to PDF Creator PDFCreator http://sourceforge.net/projects/pdfcreator/ is what is known as an ‘open source’ application. It can create PDF’s PDF Creator from just about any program that prints using windows printers.
PDFCreator http://sourceforge.net/projects/pdfcreator/ is what is known as an ‘open source’
Using application. PDFCreator you cancreate create PDF’s, combine documents into a single It can PDF'sand from just about any program thatpdf. prints using windows printers. The interface is very simple you and involves simply addingand documents be convertedinto to pdf. Using PDFCreator can create PDF's, combinetodocuments a single pdf.
The interface is very simple and involves simply adding documents to be converted to pdf.
Once the programme has opened choose ‘Add’ from the document window or click on the document plus icon
48
Rev. 3 4th November 2011
Revised 8th March 2012
C-8
In the file ‘Open’ dialogue change the file type from ‘Post Script’ to ‘All Files’ Then select your file to add
Rev. 3 4th November 2011
49
Revised 8th March 2012
C-9
3 2 1
You have the option of 1 immediately printing to pdf 2 adding more files for conversion 3 saving to a Post Script file
Other PDF Editors
Other PDF Editors These include:
These include:
PDF Edit http://sourceforge.net/projects/pdfedit/
PDF Edit http://sourceforge.net/projects/pdfedit/ Cute PDF Cutehttp://www.cutepdf.com/products/cutepdf/Writer.asp PDF http://www.cutepdf.com/products/cutepdf/Writer.asp Do PDF http://www.dopdf.com/
Do PDF http://www.dopdf.com/
Open Office: Open Office - www.openoffice.org is a fully functioning office suite including word processor (that opens and saves in MS Word doc format), a spreadsheet (that opens and saves in MS Excel xls format), as well as a presentation graphics Open Office utility (that opens and saves in MS Powerpoint ppt format). Otherwise it saves in its own Open Document Format (ODF). It also includes built in- pdf converter. Open aOffice www.openoffice.org is a fully functioning office suite including word processor (that
opens and saves in MS Word doc format), a spreadsheet (that opens and saves in MS Excel xls format), as well as a presentation graphics utility (that opens and saves in MS Powerpoint ppt format). Otherwise it saves in its own Open Document Format (ODF). It also includes a built in pdf converter.
!
Note: All these products are what are termed ‘open source’, and are free to download and use.
50
Rev. 3 4th November 2011
Revised 8th March 2012
C-10
Guide to Using Issuu Screen Reader The Issuu screen reader is used to display newsletters and magazines using an underlying full colour pdf. To add a branch newsletter, you will need to have a page for your branch newsletters. These are arranged in a table to facilitate alignment. • Check whether you branch already has a page for this. If so, skip the next two steps. • If you do not have an existing page for branch newsletter, add a new page - please see page B-4. • Add a table with 4 columns and 2 rows - please see page B-10. • Resize the front cover image to 80px x 113px using Irfanview, and save it on your computer - please see page C-1. • Click in the top-left table cell (or the next empty cell if there is already content) and insert your resized cover photo - please see page B-9 • In the cell underneath the image, type in the month/season and year of the publication. • Save and preview the page, it should look similar to the screenshot below. • Click the edit button to continue editing.
The next stage of the process involves uploading your document to the Issuu website. • To upload your file to Issuu, go to www.issuu.com and login to the IWA account using username: waterwaysassoc and password: iwahp51wa
Click ‘Log In’
Revised 8th March 2012
C-11
• Click the ‘Upload’ button.
• Click the ‘Browse’ button • Locate the file on your computer and click ‘Open’ • Complete the rest of the fields as appropriate
Revised 8th March 2012
C-12
• Complete the details in the form
• Insert Keywords • Insert Info Link and test
• Complete target audience information
• Click ‘Upload File’
Your file will then upload
Revised 8th March 2012
C-13
You will then be asked if you want to advertise your publication. • Click ‘No thanks. Go to my Library’
!
Note: Sometimes you will get an error message because the Library has failed to initialise and you may need to reload the page.
You should then be able to see your publication on the bookshelf at the top left-hand side. • You can file your publication into one of the folders listed down the left hand side by clicking on the document and dragging it to the relevant folder. If you need to create a new folder for your branch, right click on the ‘Folders’ icon at the top of the list and click ‘New Folder’. • Click on a branch folder to see the documents in that folder.
Revised 8th March 2012
C-14
• To obtain the link for your recently uploaded document, click the document once so a blue border appears round it. • Ensure that only one document is selected and then click ‘Copy Link’
• Click on ‘Double Page’
• You should then see the message ‘Link copied to clipboard’
Revised 8th March 2012
C-15
Now go to the web site back end and open the page containing the table in which the image and text links are located Insert an External Link on the image, with an appropriate title, and paste the link, from the clipboard into ‘Link URL’ Then click ‘Insert’
Then repeat this process with the text link...
Then view the front end (in preview) and check the links work...
56
Rev. 3 4th November 2011
Revised 8th March 2012
C-16