Magenta CMS Training: RAF Station/ RAF Sport websites



Similar documents
Web Ambassador Training on the CMS

Content Management System User Guide

Terminal Four (T4) Site Manager

Go Kiwi Internet Content Management System Version 5.0 (K5) TRAINING MANUAL

Starting User Guide 11/29/2011

Where do I start? DIGICATION E-PORTFOLIO HELP GUIDE. Log in to Digication

How to Edit Your Website

NJCU WEBSITE TRAINING MANUAL

UH CMS Basics. Cascade CMS Basics Class. UH CMS Basics Updated: June,2011! Page 1

JOOMLA 2.5 MANUAL WEBSITEDESIGN.CO.ZA

Index. Page 1. Index

OU Campus Web Content Management

User Guide. Chapter 6. Teacher Pages

Ingeniux 8 CMS Web Management System ICIT Technology Training and Advancement (training@uww.edu)

Content Management System User Guide

Managing your Joomla! 3 Content Management System (CMS) Website Websites For Small Business

Support/ User guide HMA Content Management System

NDSU Technology Learning & Media Center. Introduction to Google Sites

USERS MANUAL FOR OWL A DOCUMENT REPOSITORY SYSTEM

Google Docs A Tutorial

Quick Guide to the Cascade Server Content Management System (CMS)

SiteBuilder User Guide

Umbraco Content Management System (CMS) User Guide

Create your own teacher or class website using Google Sites

Chapter 14: Links. Types of Links. 1 Chapter 14: Links

How To Write A Cq5 Authoring Manual On An Ubuntu Cq (Windows) (Windows 5) (Mac) (Apple) (Amd) (Powerbook) (Html) (Web) (Font

picocms Client Training - A pico-cms.com

Lions Clubs International e-district House Content Management System (CMS) Training Guide

Sitecore InDesign Connector 1.1

CMS Basic Training. Getting Started

Virtual Exhibit 5.0 requires that you have PastPerfect version 5.0 or higher with the MultiMedia and Virtual Exhibit Upgrades.

Google Docs Basics Website:

How To Manage Your Website On A Webmaster.Com (Webmaster) On A Pc Or Mac Or Macbook Or Macintosh (Web) On Pc Or Ipa (Web).Com (For Mac) On Your Pc Or Pc Or Your

UW WEB CONTENT MANAGEMENT SYSTEM (CASCADE SERVER)

Frog VLE Update. Latest Features and Enhancements. September 2014

Content Author's Reference and Cookbook

CWU Content Management System (CMS) User Guide

RIT Message Center Compose and Send Messages

Student guide to creating and sharing a webfolio

Jadu Content Management Systems Web Publishing Guide. Table of Contents (click on chapter titles to navigate to a specific chapter)

HOW TO USE THIS GUIDE

Personal Portfolios on Blackboard

Web CMS Forms. Contents. IT Training

Windows 10: A Beginner s Guide

Saving work in the CMS Edit an existing page Create a new page Create a side bar section... 4

Agile ICT Website Starter Guides

How To Create A Website In Drupal 2.3.3

UNIVERSITY COLLEGE CORK CMS. Content Management System

Teacher Training Session 1. Adding a Sub-Site (New Page) Editing a page and page security. Adding content cells. Uploading files and creating folders

Creating a website using Voice: Beginners Course. Participant course notes

BulkSMS Text Messenger Product Manual

Using the Content Management System

Joomla! 2.5.x Training Manual

USER GUIDE. Unit 2: Synergy. Chapter 2: Using Schoolwires Synergy

EBOX Digital Content Management System (CMS) User Guide For Site Owners & Administrators

Client Admin Site Adding/Editing Content Under Site Builder/Site Navigation Tutorial by Commerce Promote

Content Management System (CMS) Training Document for LexisNexis Web Visibility Websites. October 6, 2013

UHR Training Services Student Manual

UCL INFORMATION SERVICES DIVISION INFORMATION SYSTEMS. Silva. Introduction to Silva. Document No. IS-130

WEBSITE CONTENT MANAGEMENT SYSTEM USER MANUAL CMS Version 2.0 CMS Manual Version

Cascade Server CMS Quick Start Guide

QUICK START GUIDE

Human Resources Website Drupal User Guide

Mura CMS. (Content Management System) Content Manager Guide

css href title software blog domain HTML div style address img h2 tag maintainingwebpages browser technology login network multimedia font-family

Website Manual Team Page Owners

CMS Training Manual. A brief overview of your website s content management system (CMS) with screenshots. CMS Manual

Course Exercises for the Content Management System. Grazyna Whalley, Laurence Cornford June 2014 AP-CMS2.0. University of Sheffield

SoftChalk. Level 1. University Information Technology Services. Training, SoftChalk Level Outreach, 1 Learning Technologies and Video Production

Cascade Content Management System Training

Google Sites: Site Creation and Home Page Design

Texas Woman s University RedDot Webspinner s Manual Revised 7/23/2015. webteam@twu.edu

SmallBiz Dynamic Theme User Guide

USC Aiken CMS Manual. A manual on using the basic functions of the dotcms system. Office of Marketing and Community Relations-USC Aiken

Creating an with Constant Contact. A step-by-step guide

+ Create, and maintain your site

Content Management System

State of Nevada. Ektron Content Management System (CMS) Basic Training Guide

Content Management System Help. basic tutorial on Evergreen s CMS

Decision Support AITS University Administration. Web Intelligence Rich Client 4.1 User Guide

Password Memory 6 User s Guide

The Home link will bring you back to the Dashboard after. Workflows alert you to outstanding assets waiting for approval or review.

Document OwnCloud Collaboration Server (DOCS) User Manual. How to Access Document Storage

WIX: Building a Website with a Template. Choosing a Template First you will need to choose a template from the Create section of the Wix website.

Intro to Web Development

Content Management System User s guide English version v2.3

User Guide. User Guide Title Page Page i

FORM SIMPLICITY QUICK REFERENCE GUIDE PROFESSIONAL/ULTIMATE EDITION

SiteBuilder E-Shop User Guide

Create a Simple Website. Intel Easy Steps Intel Corporation All rights reserved.

Drupal Web Content Management System (WCMS)

at Bradford - Outlook

Blackboard 9.1 Basic Instructor Manual

Cascade Server. End User Training Guide. OIT Training and Documentation Services OIT TRAINING AND DOCUMENTATION.

University of East Anglia Liferay Training Admissions, Recruitment and Marketing Department

Login: Quick Guide for dotcms & Accessibility November 2014 Training:

Transcription:

Magenta CMS Training: RAF Station/ RAF Sport websites ktownsend@binaryvision.com 0207 490 1010

Introduction What is a website content management system? The content management system, or CMS, is software that enables all users to easily update content on a website. Content includes text, images, video, downloadable files etc. You do not need to have any prior technical knowledge other than to be familiar with using a web browser and with MS Word style editing controls. BINARY VISION 2 of 83

Overview of the CMS Layout The main menu is at the left hand side which gives the key features grouped into sections. Sections Within each you can edit, add new, view, search and delete. Users in this section you can add new users and edit user details. Pages you can create a new page and change settings on existing pages; and edit or add content to a page. Media media items include images, video and audio files, and downloadable documents. You can view items, add new, or edit an existing. Mini apps are self contained programs that provide extra functionality on a page. This includes right hand column panels, intro boxes, news articles, galleries and forms. Navigation in this section you can add, remove, or move a page within the website structure. BINARY VISION 3 of 83

Logging into the CMS You can log into the CMS from any computer that has an internet connection. Your browser will need to be Internet Explorer version 5.5 or higher. (You can check which version of Internet Explorer you are using by selecting Help/About Internet Explorer.) There are two logging in procedures: 1. Whilst building your pre-launch site Log into the CMS: URL: Username: Password: View the website: URL: http://www.raf(hockey).co.uk/rafcms Your first Initial then surname e.g. ktownsend Stat10ncms9 (You can change your password from the one supplied to one of your choosing. Passwords should be at least nine characters long and include at least one number and one upper case letter.) http://www.raf(hockey).co.uk 2. When your site is live (When you have finished building your site it will be moved to the url below.) Log into the CMS: URL: Username: Password: https://cms.raf.mod.uk/raf(hockey)/rafcms Your first Initial then surname e.g. ktownsend Stat10ncms9 (You can change your password from the one supplied to one of your choosing. Passwords should be at least nine characters long and include at least one number and one upper case letter.) View the website: URL: http://www.raf.mod.uk/raf(hockey).co.uk BINARY VISION 4 of 83

Manage users In the Manage users section you can: Edit your password and other user details Reset a user that has been locked out due to 3 or more incorrect login attempts Add a new user BINARY VISION 5 of 83

Technical terms Some of the technical terms you may encounter when building or updating your website include: URL the website address. Section navigation/ top menu bar links to the section landing pages. Crumb trail shows the location of the page. Header image the image above the body copy. Body copy the main body of text. Header and footer bars the horizontal strips at the bottom and top of the page containing links etc. Left hand navigation the navigation bar on the left hand side of the page. See the following page for more information on this. Templates A website template is what decides how a given page will look this includes the layout of the page, size and position of images, type of font etc. The templates all contain a page title and a header image (of varying size). Some of the templates contain body copy (text plus images) or mini-apps (intro boxes, a right hand column, a gallery, news, or a form.) The available templates are: Home body copy, intro boxes and right hand column. Section home/ landing - body copy and intro boxes. Editorial body copy and a right hand column. Gallery - an enlargeable thumbnail for each gallery image. News section home/ landing - a thumbnail image and teaser text for each news article. News article body copy and a right hand column. Contact form body copy and a form for the user to fill in. Footer - a simple template with a header image and body copy. Which template is chosen will depend on the type of content and location of the page. On the following pages you will find an example of each type of template. BINARY VISION 6 of 83

Technical terms Title bar Url Header bar Section navigation/ top menu bar Crumb trail Left hand navigation Footer bar BINARY VISION 7 of 83

Station home page template Page name Header image Station crest image Station commander image Body copy Right hand column Intro boxes BINARY VISION 8 of 83

Section home/ landing template Page name Header image Body copy Intro boxes (up to 6) BINARY VISION 9 of 83

Editorial page template Page name Header image Body copy Right hand column BINARY VISION 10 of 83

Gallery template Gallery title Header image Thumbnail images Image title BINARY VISION 11 of 83

News section home/ landing template Calendar control Thumbnail image Teaser text News article title BINARY VISION 12 of 83

News article template News article title Header image Right hand column Body copy insert image Body copy Photographer/ Editor credit BINARY VISION 13 of 83

Form template Pre-form copy Form fields Submit form After-form copy BINARY VISION 14 of 83

Footer page Page name Header image Body copy BINARY VISION 15 of 83

Manage pages In this section you can: Search for a page. View both live and archived versions of a page. Change the page settings such as the page title. Add a new page. Edit a live page. Adding a new page To add a new page, complete the following steps: 1. Select add a new page and fill in the page settings information. 2. Add the page to the navigation. 3. Add content to the page (copy and images etc.) 4. Set up any mini-apps. 5. Preview the page. 6. Make the page live. We will now look at each of these steps in more detail. BINARY VISION 16 of 83

Adding a new page First select manage pages and add new page BINARY VISION 17 of 83

Adding a new page page settings Then add the page settings information: 1. Select a template 2. Choose one section for the page to go in 3. Enter the page name 4. Enter the page published name (same as page name but lower case with no spaces.) 5. Fill in the page description: Royal Air Force (RAF) [Website] [Page name] 7. Select create page 6. Page in navigation menu and Site map (leave ticked unless not needed) BINARY VISION 18 of 83

Manage navigation The structure of a website is comprised of the different sections and pages within each section. It is like a family tree with the home page being the top section, followed by the level one section landing pages and then the sub pages. A parent page has one or more children or sub pages. See the following page for an example of RAF Station website structure. The navigation of a website is what enables users to move around the website from one page to another. This is achieved by the top menu bar (for the section landing pages), left hand navigation, crumb trail and also internal links on a page. When we add a page to the navigation in the CMS it will appear in the left hand navigation of the website (as long as the navigation menu option in page settings has been ticked.) If you do not want the page to appear in the left hand navigation (for example as a page accessed by an internal link from another page) it should still be added to the navigation in the CMS so that the page is added to the crumb trail (and is therefore part of the website structure.) Note that in RAF Station and RAF Sport websites, pages should be in alphabetical order within each section where possible. BINARY VISION 19 of 83

Home Utility Navigation Ancillary Navigation Primary Navigation Contact Us Visiting Us Site Map About RAF [station name] Why we are here? Who is based here? Station Facilities Childcare Accomodatio n Local area information What's it like? Health and welfare News and Weather Station News [Search] [News Article List] Events [Search Results] [Events Details] Flying Schedule Contact Details FAQs Gallery [Search/Filter Results] [Image Results] [Image] Terms and conditions Accessibility Freedom of Information Wings Squadrons Other Units People Health and Welfare Messes Social Activities Education Property Local Jobs [News Article] Station Magazine Local Weather History Sports Things to do Local Radio 1st Level Navigation Aircraft and Equipment Schools* Public transport Local News Utility Navigation 2nd Level Navigation Visiting Us * Only for Stations with Schools 3rd Level Navigation 4th Level Navigation Page specific/supporting Navigation Content on separate site BINARY VISION Content in 20 separate of 83 section

Manage navigation Pages available to be added to the website structure Pages already added to the website structure Adding a page to the navigation: 1. Click and drag the page icon from the list of available pages to the website structure. 3. Select save navigation 2. A blue line will appear move this to the required position for the page and then release the click. Page will then be added to the navigation. BINARY VISION 21 of 83

Moving a page: And drag to the required position Click on the page icon Deleting a page: 1. Click on the page icon to highlight the page and select delete on your keyboard. Page will then appear in list of available pages. 2. Select save navigation BINARY VISION 22 of 83

Manage media The media library contains all the media items used on the website. Media items include images, video and audio files and downloadable documents such as pdf, word docs or excel spreadsheets. All media items need to be added to the media library first before they can be added to a page, except for gallery images which are uploaded directly into the gallery section. Images All images should be re-sized to the correct dimensions and saved for web use (for example as a jpeg or gif file) before adding to the media library. (See the following page for details of image sizes.) To find out the size of an image on a website, right click on the image and go to properties. The correct naming convention should be followed when adding images to the media library. (See the following page.) Alt tags: An alt tag is a description of the image which is used by people who require a non-visual way of browsing a web page. It is the text you see when you hover your mouse over an image. Provide an alt tag where possible or revert to the default. Video and audio files Video and audio files can be viewed by the user in Windows Media Player. Video files should be in mpg or wmv format, audio files should be in mp3 or wav format. These files are accessed by the user from a link on the page (for example in the body copy) when the link is clicked on the video or audio will play in a Windows Media Player pop up box. BINARY VISION 23 of 83

Image sizes Image Size Home page header 730 x 187 Home page squadron crest 117 x 176 Home page Stn Cdr 117 x 176 Section landing page header 556 x 245 Intro boxes 122 x 85 Editorial page header 556 x 131 Right hand column feature box 165 x 50 Footer page header 556 x 131 News landing page header 556 x 245 News article header 555 x 151 News article thumbnail 128 x 94 Gallery images 556 x any depth Image naming conventions News header News teaser News article - 1 st image in article News article - 2 nd image in article All other images headers, copy insert etc. News_20080529_01_header News_20080529_01_teaser News_20080529_01_01 News_20080529_01_02 [date]_[name of image] eg. 20080529_Typhoon aircraft BINARY VISION 24 of 83

Adding an image to the media library Enter the image name use the correct naming convention Fill in the alt tag Choose the image type and then browse for the file on your computer BINARY VISION 25 of 83

Adding content to a new page 1. Search for the page and select versions 2. Select containers 3. Select editor container Containers are determined by the template chosen. There are three types of container: editor, image and mini-app. BINARY VISION 26 of 83

4. Add copy 5. Format text: Bold Bullet/numbered lists Heading sizes Links: internal, external and media 8. Return to containers 6. Insert images 7. Preview page (some features eg page title are not visible on page preview) Remember to save frequently Switch between WYSIWYG and HTML mode BINARY VISION 27 of 83

9. Add header image 11. Return to versions 10. Set up mini-apps 12. Preview page 13. Publish page Note that there is up to a 20 min delay between pages being published in the CMS and appearing on the live site. This is because content on the CMS server is automatically copied over to the live server every 20 minutes. (An exception to this rule is some of the mini-apps, such as RHC, which go live straight away.) BINARY VISION 28 of 83

Editing a page 1. Search for the page and select versions 2. Clone a new editable version 3. Select containers 4. Edit content in the editor, change the header image or update mini-apps 5. Return to versions BINARY VISION 29 of 83

6. Preview page 7. Publish page BINARY VISION 30 of 83

Deleting a page To remove a page from the site and delete from the CMS - select delete To remove a page from the site but leave in the CMS - retire the page and setup another page for redirect. If a user tries to access the old page from a link they will then be re-directed to another page rather than get an error/ page not found. 1. Select versions 2. Select retire BINARY VISION 31 of 83

3. Select the page to redirect to 4. Page is now retired. BINARY VISION 32 of 83

3. Select the page to redirect to 4. Page is now retired. BINARY VISION 33 of 83

Useful tips You can have more than one window of the cms open at once. Look at a similar page for guidance. To archive an open editable version of a page from the cms simply republish the live version. To email a preview link, copy the url of the page preview and drop into an email. The recipient will be able to view the page preview without having to log into the CMS. Always check any edits on the live site after publishing. Remember that there will be up to a 20 min delay between a page being published in the CMS and appearing on the live site (except for some of the miniapps, such as right hand columns, which go live straight away.) BINARY VISION 34 of 83

Exercise 1 Add two new pages: Who is based here section landing page. Aircraft and equipment editorial page (a sub page of Who is based here.) Remember to put the copy into notepad first. Have a go at formatting the page with bold, heading sizes etc. Try out the different types of links and insert an image into the body copy. Add to the media library - a section landing header image; a level 2 header image and a body copy insert image. Remember to follow the correct image naming convention. BINARY VISION 35 of 83

Website copy Copy for websites needs to be much more concise than in a print medium. Users are more likely to scan the page for key points than read in detail. Also bear in mind that websites are all about linked content a link to another page or a link to a form. The key points to bear in mind when writing or editing web copy are: Content should be concise. Consider using a downloadable pdf doc if the page would otherwise be very long. Key words should be highlighted in bold for easier scanning. Stick to one idea per paragraph this makes it easier for users to skip content that does not interest them without missing any that does. Create structure to the page by using different size headings. Don t use italics except for book, magazine or journal titles. Don t underline text to avoid confusion with link text. Use meaningful link text avoid click here, see here etc. eg Find out about events, Visit us on our open day. Try to give the user at least one choice of action at the end of a piece of content fill out a form, download a document, follow a link to another page etc. There is a Style Guide for RAF websites available; this covers the correct tone to use along with punctuation guidelines. You will be emailed a copy after this training session. BINARY VISION 36 of 83

Mini apps Mini-apps are self contained programmes that provide extra content on a web page. This includes: Intro boxes Right hand column Galleries News Forms We will now look at each of these mini-apps. BINARY VISION 37 of 83

Intro boxes Intro boxes can be added to any page that is using a section landing template. You can have up to six intro boxes on a page, in three rows of two. Intro boxes are comprised of a title, image, copy and a link. Title Copy Image Link Adding new intro boxes Complete the following steps 1. Select intro boxes from the list of mini-apps. 2. Select add new intro box setup. BINARY VISION 38 of 83

3. Fill in the Intro box set up title (this does not appear on the website and is for your reference within the CMS) 4. Fill in the information for each box: Title Image (add to media first) Link and link text Body copy (can be left blank) 5. Select submit when you ve finished 6. Clone an editable version of the page and select the intro boxes container BINARY VISION 39 of 83

6. Select intro boxes from the list of mini-apps, then select the required intro boxes from the drop down list 7. Preview the page 8. Publish the page BINARY VISION 40 of 83

Editing an intro box 1. Select intro boxes from the list of mini-apps 2. Select edit for the required intro boxes 3. Update the information as required and then select submit There is no need to republish the page after editing intro boxes on a live page. BINARY VISION 41 of 83

Exercise 2 Create two intro boxes for the Who is based here page 1. Choose two intro box images and add to the media library (using the correct naming convention). 2. Add the new intro boxes with title, link etc of your choice. 3. Add these boxes to the page. BINARY VISION 42 of 83

Right hand column A right hand column is comprised of a panel which contains individual feature boxes. Feature boxes can be re-used in different combinations on more than one panel. There are two types of feature box: Generic with image Title Copy Image Link (internal or external) Multiple links Title Up to 6 internal or external links BINARY VISION 43 of 83

Adding a right hand column To add a right hand column first create any new feature boxes, add these feature boxes to a new or existing panel and then add the panel to the page. Complete the following steps: 1. Select right column from the list of mini-apps 2. Select manage feature boxes 3. Select add new feature box BINARY VISION 44 of 83

4. Select the type of feature box generic with image or multiple links 5. Generic with image fill in the details: Title (does not apper on the website) Heading Image (add to the media library first) Copy (or leave blank) Link text Internal or external link Select submit 6. Multiple links enter the details for each link: Title (does not appear on the website) Heading Link text Internal or external link Select submit Repeat steps 3-6 until all the new feature boxes are added. BINARY VISION 45 of 83

7. Select manage panels 8. Select add new panel 9. Enter the panel title and select add new panel BINARY VISION 46 of 83

10. Select add feature box and choose the box you want at the top of the panel from the drop down list. Repeat until all the required feature boxes are added. 11. Re-order boxes if necessary by selecting the up and down arrows 12. Search for the page and select versions 13. Select clone to new and then select containers BINARY VISION 47 of 83

14. Select right column container 15. Select right column mini-app 16. Choose the required panel from the drop down list and then select setup mini-app 17. Return to versions and preview the page 18. Publish the page BINARY VISION 48 of 83

Editing a right hand column Editing a feature box: 1. Select right column mini-app 2. Select manage feature boxes 3. Select edit for the required feature box 4. Update details as required then select submit. If the box is on a live page there is no need to re-publish the page for changes to appear. BINARY VISION 49 of 83

Editing a panel: 1. Select right column mini-app 2. Select manage panels 3. Select edit for the required panel 4. Update details as required: If the panel is on a live page there is no need to re-publish the page Change the panel title edit the title and then select update panel title Move or delete a feature box Add a feature box Clone the panel (for example to make a similar panel to use on another page) BINARY VISION 50 of 83

Exercise 3 Create a RHC for the Aircraft and equipment page containing the following two feature boxes: 1. Generic with image Title: Open day Text: Come and visit us on our open day Image: Choose one image and add to the media library (using the correct naming convention) Link: Choose a page/ or website to link to Link text: Visiting us 2. Multiple links Title: Travel information Links: Find us on Google maps (http://maps.google.co.uk) Arriving by train (http://www.nationalrail.co.uk BINARY VISION 51 of 83

Galleries Gallery images do not need to be re-sized or added to the media library first. They are uploaded directly into the gallery mini-app and resized by the CMS. Adding a new gallery First set up the new gallery and add the images; then add a new page using the gallery template; add this page to the navigation; then link up to the gallery and publish the page. Complete the following steps: 1. Select galleries from the list of mini-apps. 2. Select add gallery 3. Enter the gallery title and select add gallery BINARY VISION 52 of 83

4. Select view images for the required gallery 5. To upload multiple images in a zip file, browse for the file and then select upload zip 6. Select upload selected files While you are waiting for the images to upload do not close the window or go to a different section of the CMS using this window or the images will not upload. (You can have more than one window of the CMS open at once). BINARY VISION 53 of 83

7. When the images have uploaded select return to gallery 8. To add a single image select add item to gallery, fill in the details below and select add image: Image title Item description - Optional Copyright details where known (or leave blank) Select add image Browse for image Date automatically set to the date of upload but can be changed if required 9. Re-order or rename images as required When images are uploaded from a zip file the image titles are the image filenames. Select edit item to change the image title. To re-order images type the new number position and select update BINARY VISION 54 of 83

10. Add a new page using the gallery template: 11. Add page to the navigation in the Gallery section BINARY VISION 55 of 83

12. Select versions 13. Select containers 14. Select the gallery mini-app container 15. Select galleries from the list of mini-apps then choose the required gallery from the drop down list and select setup mini-app BINARY VISION 56 of 83

16. Select the gallery title editor container 17. Enter the gallery title with heading size 2 18. Add an editorial size header image 19. Return to versions 20. Preview and then publish the page BINARY VISION 57 of 83

Editing a gallery 1. Select galleries from the list of mini-apps 2. Select view images Or select edit gallery to change the gallery title BINARY VISION 58 of 83

3. Edit the gallery as necessary: Edit an individual image Delete an image Change the order type the number and then select update Add a zip file of images Add a single image 4. Or edit an individual item and save changes by selecting update image: If you edit a live gallery there is no need to re-publish the page Edit the image title Change the file BINARY VISION 59 of 83

Exercise 4 Add a new gallery using images from your desktop: 1. Add the new gallery. 2. Add a zip file of 4 images of your choice. 3. Add another single image of your choice. 4. Re-name and re-order the images. 5. Set up a new page using a gallery template. 6. Add the page to the navigation. 7. Add the gallery, header image and gallery title. 8. Preview and publish the page. BINARY VISION 60 of 83

News When a news article is added to the CMS and is made live, the teaser text and thumbnail image are automatically added to the News section landing page. To add a news article first add the set up information (this includes the teaser text, thumbnail image and header image) and then add the body copy. When the article is complete change the status from draft to live. 1. Select news from the list of mini-apps 2. Select add news article BINARY VISION 61 of 83

3. Add set up information: News article title Header image (add to media library first using correct image naming convention) Leave status as draft Date (automatically set to the current date but can be changed if required) Teaser text (the first paragraph or a summary of the article 4. Select add news article Thumbnail image (add to media library first using correct naming convention) 5. Preview news teaser 6. Select body copy 7. Add body copy in the editor: Remember to save article Format text, add images etc Include details of editor and photographer when known 8. Preview news article then select back to all articles BINARY VISION 62 of 83

9. Select setup 10. Change status from draft to live and select update news article BINARY VISION 63 of 83

Editing a news article 1. Select news from the list of mini-apps 2. Search for the article and select setup or body copy as required 3. For setup, change the information as necessary then select update news article BINARY VISION 64 of 83

4. For body copy, change as required and then save BINARY VISION 65 of 83

Exercise 5 Add a news article Title: RAF Halton do triathlon for Help for Heroes Use the copy and images on your desktop. Remember to use the correct naming convention when you add the images to the media library. BINARY VISION 66 of 83

Form Generator A form enables you to collect information from a user eg their name or email address. When a user fills in the form you will receive an email containing the information, but your email address remains hidden from the user. To set up a new form complete the following steps: 1. Select form generator from the list of mini-apps 2. Select add a new form BINARY VISION 67 of 83

3. Add form setup details: Form name (doesn t appear on the site) Recipient email addresses Email subject 4. Select save form details 5. Select add form fields BINARY VISION 68 of 83

6. Enter the field details: Field name Select the type of field (single or multi line) Max characters 7. Select add this field to the form 8. Repeat steps 5-7 until all the required fields are added Re-order as necessary BINARY VISION 69 of 83

9. Add a new page using the form template 10. Add to the navigation BINARY VISION 70 of 83

11. Search for the page and select versions 12. Select containers 13. Add body copy before or after the form using the editor containers 14. Select the mini-app container 15. Select forms from the list of miniapps, select the required form from the drop down list and then select set up mini-app BINARY VISION 71 of 83

16. Add the header image (add to the media library first) 17. Return to versions 18. Preview the page 19. Publish the page BINARY VISION 72 of 83

Editing a form 1. Select Form generator from the list of mini-apps 2. Select edit for the required form BINARY VISION 73 of 83

3. Edit the setup details as required and select update form details Edit a field Or add a new field When editing a live form there is no need to re-publish the page BINARY VISION 74 of 83

Contact details Thank you for attending the RAF CMS Training session at Binary Vision. We hope you found the training session informative and it will enable you to make good progress with building or updating your website. If you need any further help please get in touch as below: Email: ktownsend@binaryvision.com Phone: 0207 490 1010 BINARY VISION 75 of 83

CMS Flowcharts On the following pages you will find some flowcharts detailing the procedure You should find these a useful tool when updating your website for remembering the steps to follow and order to complete (i) (ii) (iii) (iv) (v) (vi) Adding a new page Editing a page Adding into boxes Adding a right hand column Adding a gallery Adding a news article (vii) Adding a form BINARY VISION 76 of 83

Adding a new page Page management: Add new page Select template Enter the page name and page published name Select section the page is to be added to Enter other page details New page is added to navigation Move page up or down if necessary until in the correct position Select parent of published page and create navigational relationship Add page to navigation: go to Navigation management Create page Add content: go to Page management and search for page Select Versions and then select Containers Add content to containers: -Editor -Image -Mini apps Return to Versions and preview page (all mini apps must be linked up for preview to work) Make live publish page BINARY VISION 77 of 83

Editing a page Page management search for the page you want to edit Select Versions Select Clone to new to create an editable version of the live page Select Containers Select Editor container Insert images add to the media library first Format text Add copy cut and paste or type in Put any new content into notepad first to remove formatting Save content Preview page Return to Containers Return to Versions Make live publish page BINARY VISION 78 of 83

Adding intro boxes Mini-app management: Intro boxes Select - Add new intro box setup Enter the intro box copy: Title, link, image (add to Media library first) etc. Then select Submit. New intro box setup is added Make live and publish Return to versions and preview the page Select: -Edit intro boxes mini-app -Choose Intro boxes from mini-app management -Select the intro box set up from the drop down list -Set up mini app Versions Clone to new - Containers Page management Search for the page you are editing BINARY VISION 79 of 83

Adding a right hand column Mini-app management: Right column First add any new feature box/es Select Manage feature boxes -Add new feature box. Then select type of box: Image only Image only with pop up Fill in the details and submit Updated panel is complete (you don t need to re-publish the page) Add, remove, and reorder feature boxes as necessary If there is already a panel for the page: Search for the panel and select Edit Feature boxes added New panel is added Add the feature boxes to the panel and move up or down if necessary Enter the Panel title and then select Add new panel If there is no panel for the page select: -Manage panels -Add new panel Page management: Search for the page you are editing Versions Clone to new - Containers Edit Right column container Select Right column from mini app management Choose the panel Setup mini-app Return to Versions and preview the page Make live and publish BINARY VISION 80 of 83

Adding a gallery Mini-apps management: Galleries Add Gallery Enter the Gallery name Add images Bulk upload with a zip file (images are re-sized by the cms) Individual image upload (images are re-sized by the cms) Link up to navigation Add a new page to house the gallery, using the Gallery template. (Choose whether the page is to appear in the navigation menu.) Gallery is created Re-name or re-order images Containers - Link to the new gallery in Gallery Container and add header image. Publish page If necessary, add a link to the new Gallery on relevant parent page. Gallery is completed. BINARY VISION 81 of 83

Adding a news article Enter the Title and teaser text Mini apps management: News Select - Add news article Add the Header and thumbnail images (add to Media management first) Select - Add news article Preview news teaser Leave status as Draft Save and then preview news article Add the news article copy (put into notepad first to remove formatting) Format text and add images Search for the news article and select Body copy Teaser is complete Select Back to all articles - Search for the article and select Set up Change the status from Draft to Live News article is live BINARY VISION 82 of 83

Adding a form Mini-apps management: Form generator Add a new form Enter the form name (only appears in the cms) Enter the email details: To, cc, subject Save form details Add form fields Field name eg Name or Address Form is complete Add all the required fields Add field to form Type Single line or multi line Enter the field details Max characters Add text before or after the form or leave blank Add a new page using the Form template Add page to navigation Search for the new page. Select Versions- Containers and content to the page containers: Add the header image Publish the page Link up the form mini-app to the new form BINARY VISION 83 of 83