Website Style Guide
Rev. 3 4th November 2011
The basic elements of our visual identity
3
Template Styles
3
Text Styles
6
Documents
6
Image Styles
7
Date Style
8
Link Style
8
Page Style
8
Extract from House Style Guide
9
Website Page Editing Guide
15
Website Image Editing Guide
41
Rev. 3 4th November 2011
The basic elements of our visual identity The Inland Waterways Association is an organisation which, like all other voluntary, public and commercial organisations, has to compete for public recognition and support in a very crowded environment. A clear and consistent visual identity is an essential part of our strategy to gain that support. The large number of different editors and the 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 A series of templates are used and these have particular applications. The screen-shots of these templates 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. They are: 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 contains a list of the waterways in the branch and links to the appropriate waterways pages, that already exist in the ‘Waterways’ section. Waterways under restoration and derelict waterways are also listed here, with links, where appropriate, to underlying existing pages.
!
Note: Events should not be listed in the navigation as this will become overlong, messy and unattractive. Events are listed in the appropriate box with a link to an underlying page in the calendar.
Rev. 3 4th November 2011
3
Sub-page with navigation and with optional banners
This template looks the same as the two column template. The right-hand column has a ‘banner’ or banners – links to the shop site. •
Banners are adverts which draw their content from IWAShop and are constructed so as to provide relevant sales information to the user. An example would be say, when viewing a page on the Trent & Mersey Canal might have banners with the various different canal guides in them relevant to that part of the system, which the user could buy.
•
Optional banner pages only display the banner column if the page contains an actual banner. If no banner is placed then the page expands to fill the space where the banner would otherwise be.
Sub-page without navigation and with optional banners
This page has no left hand navigation. Navigation is via the ‘breadcrumbs’ trail – ‘You are here:’ (see above). The left column is for rich text (text and pictures). The right column contains optional banners 4
Rev. 3 4th November 2011
Two column sub-page with optional banners
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
Is used where information or links related to the main text are required. Rev. 3 4th November 2011
5
Subpage
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 Styles 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 all capitals). Only use bold for occasional emphasis, such as paragraph headings..
Documents Documents are generally uploaded only as pdf’s. This is a ‘universal’ format, and doesn’t involve problems, such as the version conflicts that occur in MS Word and MS Excel. Pdf’s are uploaded to the relevant pdf folder for the region or branch and are accessed via an internal link. 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 51). 6
Rev. 3 4th November 2011
Image Styles These are uploaded to the relevant images folder for the region or branch. The images used at: • • • • • •
In page headers in the branch/region home page In page headers for pages below the branch/region home page Images embedded in text Images used in right-hand columns below the branch/region home page Images used as links to magazines uploaded to the underlying screen reader system Map links
Are at the following sizes, in pixels:
Branch home page left and right columns 236x80
Branch home page central column 466x80.
Other pages are at 220x80 for ‘narrow’ columns
Images in right hand columns below the branch/region homepage can be 220 wide by whatever size is suggested by the image manipulation programme when ‘maintain aspect ratio’ is selected.
Maps used to give directions must be 120 along their longest edge. If a larger map is required then a page not shown in the navigation, containing the larger image can be accessed using the smaller map image as a link
440x80 for central columns.
Rev. 3 4th November 2011
7
710x80 for ‘broad’ columns
Links to underlying magazines on the Issuu screen reader system are 80x113. This is in proportion to an A4 or A5 original
Images within text articles are either120 wide by whatever size is suggested by the image manipulation programme when ‘maintain aspect ratio’ is selected (if a ‘portrait’ type), or 120 high by whatever size is suggested by the image manipulation programme when ‘maintain aspect ratio’ is selected (if a ‘landscape’ type)
Photo gallery images are sized automatically.
Date Style Dates are always written using ordinals: 21st March 2010
Link Style Links provide much of the navigation for users once the reach their destination or landing page. Text links take the form of the actual words of the link i.e. Anderton Boat Lift, not Anderton Boat Lift here. Text links are all in the same colour as the text, with only underlining to distinguish them. Image links provide a useful and user-friendly way of linking to an underlying service or page. Map links can be used to link to a larger image of the map on a page not shown in the navigation. Events links, (from within the events section of the branch homepage template), are text links, linking to a page in the calendar, giving details of the event, but not shown in the branch navigation. (See ‘Events System’ on page 36 for more details). Navigation links (left column) should be kept within the visible screen. To avoid these link lists becoming too long create additional pages to allow links to be grouped together logically.
Page Style Do not use long pages. It is better to increase the number of pages – with links if necessary, rather than extending the page far below the visible edge of the screen. Page breaks may be suggested where different subjects are to be covered. 8
Rev. 3 4th November 2011
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. Rev. 3 4th November 2011
9
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 twentyone 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. 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’ 10
Rev. 3 4th November 2011
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
Rev. 3 4th November 2011
11
Rev. 3 4th November 2011
Website Page Editing Guide Website Style Guide
Rev. 3 4th November 2011
3
Accessing the Login Page and logging In
15
Accessing the CMS
15
Accessing the Site Explorer
16
Navigating to your Branch Page
17
Creating a New Page
18
Page Contents Area
20
Inserting a Link
21
Uploading an Image
23
Inserting a Table
24
Saving Pages
25
Uploading Files and Images
26
Video Streaming
28
Discussion Forum
32
Photo Gallery
34
Events System
36
Website Image Editing Guide
41
Rev. 3 4th November 2011
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
!
Note: Usernames and Passwords are case sensitive
You should now be logged in.
Accessing the CMS Now that you are logged in you should be able to see tabs displayed in the top left hand side of your webpage. The tabs visible 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.
Rev. 3 4th November 2011
15
The Home screen is divided into three sections: 1. Pages for approval This section displays all pages in the site that have been „saved as a draft‟. The user is able to preview and edit pages from this area. The pages will be approved for the „live‟ site by an IWA Administrator.
!
Note: Once a page has been approved it is considered to be a „Live‟ webpage and is viewable on the front end of your website.
2. Pages/Files for Review This section displays all pages that have had a „review date‟ set. The page name is displayed in this section as a notification to 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 purely 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. 3. Recently edited Pages This section displays the names and the „last modified by‟ of all pages that have recently been edited in your branch. The last 10 pages edited are displayed.
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.
16
Rev. 3 4th November 2011
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 Regions & Branches folder, then click on your region, and finally click on your branch page.
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â€&#x; 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.
Rev. 3 4th November 2011
17
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.
You are now asked to complete certain fields required to create a New Page. Fields with a * are mandatory.
18
Rev. 3 4th November 2011
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 (_). 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 in „dd/mm/yyyy‟ format, or select a date from the calendar and click to set a review date. 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 you tick this 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 deleted and then re-created.
Permissions This box allows specification of who will be able to see pages if access is restricted. This is only relevant for pages created within the Private areas of the site, and therefore branch editors can skip over this option.
!
Note: Clicking Cancel will cancel the creation of the page or any additions added to these fields for this Page since your last save.
Rev. 3 4th November 2011
19
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 fields that have been created for the page, Date Automation and Keywords. 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 actually about 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â€&#x;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.
Page Contents Area
The area in the picture above is where you will place the copy/content for the page that you have created. You can make use of the toolbar to edit the content that you type. The „Formatâ€&#x; drop down box in the toolbar helps you to organise the content into a uniform look and feel by using pre-determined heading and paragraph styles.
20
Rev. 3 4th November 2011
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 (use for dates). 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 the same as the main headings on your page with the line underneath, although you won‟t be able to see the effect properly until you preview the page.
Ordered/Unordered Lists If you want to create 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 „Inserting a Link‟ section below for more information. Add an image Click the button to add an image. Please see section „Uploading an Image‟, page 23. 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 „Inserting a Table, page 24.
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.
Rev. 3 4th November 2011
21
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 and a pop up box will appear.
Make sure that the „Link Type‟ is set to Internal Link and then select the page that you wish to link to. The Directory field will show all available directories and once you have selected the suitable directory the „Page/File‟ field will show all the available pages in that directory. Click Insert to create the link. This text should now appear in blue and underlined.
!
Note: Links appear blue and underlined in the „back-end‟ as an aid to editing. When the links are viewed in the „front-end‟ they do NOT appear as blue and underlined, but as black underlined text
External Link An external link is used to link a page from within your site to an external web page 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 and a pop up box will appear.
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 into this field and click insert. This text should now appear in blue and underlined. e.g. of the correct URL format: http://www.waterways.org.uk.
22
Rev. 3 4th November 2011
E-mail Link To create a link to an e-mail address, delete the http:// and instead enter mailto: followed by the e-mail address. For example, to create a link to the address gemma.bolton@waterways.org.uk, enter: mailto:gemma.bolton@waterways.org.uk. Anchor Link An anchor is used to take the user from one point (usually at the top) 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 create the anchor on the text that you want the user to be taken to (i.e. the answer) and then you create the anchor link on the text for the user to click on (i.e. the question). To insert an anchor link, highlight the word that you wish to use as the „answer‟ and then click on the anchor button and a pop up box will appear.
Give the anchor a name and click Insert. The text will now appear with a little anchor symbol next to it. Next highlight the text that you wish to use as the link, „the question‟, and then click the solid 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 named in the first step 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.
Uploading an image You are able to upload images into the page content area by using the (See also „Uploading Files/Images‟, page 26)
button. You now have two options.
Insert existing image Upload new image
Inserting 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‟ drop down list and then select the image name from the „Available images‟ drop down list. Branch images should be found within the images directory (folder) of the branch directory. Once selected, the image will appear in the „Preview‟ pane and you can choose to have it left, centred or right aligned on the page.
Rev. 3 4th November 2011
23
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 then click the button. Click the „Upload new image‟ tab and then select the Directory that you wish to store the image in, and type in a brief description that will appear when a user hovers over the image. To upload the image click the „browse‟ button and select the image from where ever it has been stored. Click „Upload‟ for the image to be uploaded to the site and then click „Insert‟ to insert it onto the page.
Inserting a Table Click Insert Table.
You will be prompted for the number of rows and columns in the table.
Enter the number of rows and columns required and click
an empty table will be inserted.
Type text into the table cells as required:
Resize the table by dragging a white selection handle; in this case we are dragging at the bottom-right corner:
24
Rev. 3 4th November 2011
The following icons are available to modify the table:
Saving Pages You have two options available to you when saving a page. 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 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.
Rev. 3 4th November 2011
25
Uploading files/images In the site explorer - click on the „Upload Fileâ€&#x; icon at the top of the page.
You are now asked to complete certain fields required to create a New Page. Fields with a * are mandatory.
26
Rev. 3 4th November 2011
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 (e.g. Google). Upload new file Click the button to search for the image/file on your computer hard drive. When you have found the file you are looking for, 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 As before, 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. To do so, navigate to the page you want to add the link to. Then in the „page contents‟ section, 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, this text should now appear in blue and underlined.
Rev. 3 4th November 2011
27
Video Streaming Create a new page (see page 18). In the new page screen, select video_page and then „Nextâ€&#x;
In the page contents area you have the ability to enter 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. IWA has accounts at You Tube www.youtube.com and at The Video Channel www.thevideochannel.net. Both accounts are accessed by using the username: waterwaysassoc and password: iwahp51wa. You Tube currently accepts videos up to 15mins duration. The Video Channel will accept longer videos subject only to storage limits.
28
Rev. 3 4th November 2011
On YouTube sign-in using the link and enter the username and password then click „Sign In‟.
Once signed in either search for an uploaded video...
... or upload a video
And 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.
Rev. 3 4th November 2011
29
On The Video Channel - sign in
Once signed in click on „Upload a new video‟, or if already uploaded on „Manage My Uploads‟
On the upload screen, fill in the details required and then click on „Browse‟ to locate the video for upload on your hard drive
Once you have either uploaded or found the video you require, you must now obtain the embed code to insert into the „embedded video‟ box in the page content area.
30
Rev. 3 4th November 2011
In You Tube - clicking on the „embed‟ tab allows us to highlight and then copy (right click) the embed code. You may need to click on the „Share‟ tab first.
In The Video Channel - click the „Links‟ link for the video you want to embed...
...and on the embed screen highlight and then copy (right click) the „Code to embed this video into your page‟
Going back to your page content area you then 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‟ and check that everything works before sending your e-mail to approvals@waterways.org.uk to get the page public facing.
Rev. 3 4th November 2011
31
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 making a „post‟, usually in reply to other people‟s posts. This allows a discussion to build up without 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 (libellous) posts are allowed to be viewable. Where something is found to be inappropriate after moderation an administrator can remove it. Forum topics can be restricted 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 discussed 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.
32
Rev. 3 4th November 2011
The URL of a thread or an individual post can be used to link to the forum from your branch page.
The link is an external link made by typing in the linking text in the page content area in the back-end and using the URL to link this text to the forum as described in „Inserting a Linkâ€&#x; on page 21 Rev. 3 4th November 2011
33
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. The form can be accessed from www.waterways.org.uk/photoup
2. Click ‘choose’ and navigate to the image stored on your hard drive.
1. Complete the details requested for up to 5 images at a time.
4. 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. An administrator will then create the category and attribute the images to that category.
34
Rev. 3 4th November 2011
Image Gallery Template Like other templates, the Image Gallery template can be selected from the list of available templates when making a new page. Create a new page as described on page 18. In the „Template‟ box select „Image Gallery‟ or „Image Gallery WRG‟ as appropriate.
After saving the page, you will see in the „Page Contents‟‟ that the only thing available to complete is the „Image Category‟. Select the image category created by the administrator for your images to display them 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.
Rev. 3 4th November 2011
35
Events System To access the events system go to /events. This will display the IWA Calendar Module.
To upload an event, select the „Add Event‟ tab The add event dialogue is shown below Complete the information requested noting that a valid e-mail address is required in case of any query about the event uploaded before it is set to live. It is possible to „geo-locate‟ the event on Google Maps by 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 feature to work. Once you are happy with your event upload details click on „Continue‟ to complete the event upload.
36
Rev. 3 4th November 2011
Add event dialogue
Rev. 3 4th November 2011
37
Rev. 3 4th November 2011
Website Image Editing Guide Website Style Guide
Rev. 3 4th November 2011
3
Website Page Editing Guide
15
Guide to Image Editing
41
Guide to PDF Creation
48
Guide to Issuu Screen Reader
51
Rev. 3 4th November 2011
Guide to Image Editing Irfan View – Image Manipulation (www.irfanview.com) This guide uses the example of creating a 220 x 80 pixel image. You only need to substitute other 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
Click the open folder icon, or go to File →Open
Rev. 3 4th November 2011
41
With the image open go to Image → Resize/Resample
42
Rev. 3 4th November 2011
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
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
Next go to Edit → Crop selection
Next go to File → Save for Web
Rev. 3 4th November 2011
45
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
You will now see 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 than that permitted can be found by web crawlers employed by image libraries. The first that is known about any copyright infringement is when an invoice arrives!
Images may be distributed under a ‘Creative Commons Licence’. This licence may allow either unrestricted use, or may place restrictions on the use of the image. The codes used are: • • • • • •
Attribution (CC-BY) Attribution Share Alike (CC-BY-SA) Attribution No Derivatives (CC-BY-ND) Attribution Non-Commercial (CC-BY-NC) Attribution Non-Commercial Share Alike (CC-BY-NC-SA) Attribution Non-Commercial No Derivatives (CC-BY-NC-ND)
CC - Creative Commons, BY - Attribution required, SA - Share alike, ND - No derivatives, NC - Non-commercial.
All images must be attributed where the copyright holder allows the image to be used. Where the image is intended for cropping, none of the ND images are suitable, as the cropped image would be a derivative of the original. BY and BY SA images can be cropped. Any image used by any trading entity (e.g. IWE, Essex Waterways) can not be only for NC use. 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
Guide to PDF Creation PDF Creator PDFCreator http://sourceforge.net/projects/pdfcreator/ is what is known as an ‘open source’ application. It can create PDF's from just about any program that prints using windows printers. Using PDFCreator you can create PDF's, and combine documents into 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
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
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 These include: PDF Edit http://sourceforge.net/projects/pdfedit/ Cute PDF http://www.cutepdf.com/products/cutepdf/Writer.asp 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 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
Guide to Using Issuu Screen Reader The Issuu screen reader is used to display newsletters and magazines using an underlying full colour pdf. The link to the magazine is both an image link, (as detailed on page 8) and, beneath the image a text link. These are arranged in a table to facilitate alignment. (Please see pages 23 & 41). The image goes in a table cell above another table cell containing the text. Before going through this process first create the 80 x 113 image for the link and place it and the text in the table on the appropriate page. This is because the final step in Issuu is to copy the link to your clipboard, and any cut & paste operations after copying the link will mean you will need to recopy the link. To upload to Issuu go to www.issuu.com and login to the IWA account using username: waterwaysassoc and password: iwahp51wa
Click ‘Log In’
Rev. 3 4th November 2011
51
Once logged in... 1
2 ...Go to ‘Upload Document’
Click ‘Browse’, then in the dialogue that opens, locate the file on your computer
1 2
3
52
Rev. 3 4th November 2011
Then click ‘Open’
Now complete the details in the upload file dialogue
Insert keywords Complete the Info Link and test it And complete the ‘drop down’ boxes. Our target audiences are as seen here
Click ‘Upload File’
Wait for the upload to complete...
...and load
Rev. 3 4th November 2011
53
You will then see a bookshelf with the upload on it, with ‘Converting’ highlighted. Wait...
...until ‘All documents have been processed’ appears on the bookshelf. Then click ‘Published’
You will then see the IWA bookshelf with your upload on it at the top left
54
Rev. 3 4th November 2011
2
Click the document once – so that a blue border appears round it.
1
Ensure that only one document is highlighted and then click ‘Copy Link’
1 2 3
In the dialogue, ensure ‘Two-up (browsing) is selected and ‘Open link on Issuu.com’ is de-selected. Then click ‘Copy link address’
You will see a message saying, ‘Link copied to clipboard’
Rev. 3 4th November 2011
55
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