You will always have access to the training area if you want to experiment or repeat this tutorial.

Transcription

1 EasySite Tutorial: Part One Welcome to the EasySite tutorial session. Core Outcomes After this session, you will be able to: Create new pages and edit existing pages on Aston s website. Add different types of links to pages. Upload new images or reuse existing images on pages. Upload files/documents for visitors to download (e.g. PDF). Format for this session This tutorial contains all the steps to create your first EasySite page, and you are free to work through this at your own pace. An instructor will be present for guidance. This tutorial is also online, where video demonstrations are also available. Please feel free to ask questions at any time. Why do I need to attend this tutorial? We prefer to be on hand when people first encounter EasySite. We want to check your account and permissions are correct, assure you in the event of any errors, ensure you develop good practice and to answer any questions that might arise. What to do after this session If this is your first EasySite session, you will currently only have edit permissions for the training area of the website. After this session, please contact us to let us know which areas of the website you need to be able to maintain. You will always have access to the training area if you want to experiment or repeat this tutorial. If after the tutorial you do not feel confident using EasySite, or need a refresher, please contact us or book on to another training session. If you are not familiar with the web or comfortable with computers, a single session may not always be enough. Further information and support contact Please keep this handout for future reference. Our website has the most up to date information, including more advanced topics not covered today: You can contact the web team via the address web.issues@aston.ac.uk We recommend you use this team address, as it helps us formally record problems, and it allows us to pick up on existing queries if anyone from the team is away. Please also contact us if you have any feedback about this tutorial. 1

2 Introduction: A brief overview of EasySite What is EasySite? EasySite is the content management system (CMS) for the majority of Aston s website. It is a produced by EIBS, based in Nottingham. It is designed to be like using software such as Microsoft Word, and everything is done within the web browser. No other software is needed, and no special web designing skills are required. Examples of what isn t hosted on EasySite EasySite only handles the main Aston website. The university uses many other selfcontained applications, such as PURE, MAP and Agresso, although there may well be EasySite pages with information about these systems. What you can edit With EasySite, you are only editing the content of a page, such as the title, text, and images. We have a pre-defined template that keeps the design consistent with the rest of the site, and the EasySite software manages links and the menu automatically. Page elements and structure Pages are made up of elements, building blocks that you can edit, re-arrange and combine to create the page you want. Figure 1: Example of elements on a page labelled with their type, with dummy text All new pages start off with several standard elements which will be enough for most pages. A separate editing view allows you customise the elements. 2

3 Menu and page organisation Every new page needs to have a link title. This is often set the same as the page title. A page s link title will be the text used to create the menu entry for that page. Our menu can have pages grouped together, creating sub-menus that are only shown on certain pages. This is achieved by specifying new pages as children or siblings of current menu entries, explained in the diagram below. Every page has to be located somewhere in the menu of our site, however you can specify certain pages not to be displayed on the menu if necessary. Introduction to the user interface The welcome bar You will see a line that starts Welcome followed by your username. On this small menu there are usually three or four options: Browse Site / Edit Page switches between seeing the site as a regular visitor and an author. New Page allows you to create a new page in the current area of the website you are viewing. Note this option will not be available if you do not have permission to make a new page in the current location. Administration contains mostly options for advanced administration, and you won t need to go in there for your day-to-day editing. Logout will log you out as an author, and return you to the current page. 3

4 The author tabs Below the welcome bar are several tabs: Edit is the editor interface which loads the latest revision of the page, whether it s published or not. From here you can also make changes to some page options such as menu text in the sub menu below the tabs. Live displays the currently published page, as seen by a regular web site visitor. Properties has information about the page, its history and permissions. Options contains some basic page functions such as copy, move, reorder menu and delete page. Interaction / Activity contain advanced options for comments and moderation not covered in this tutorial. Editor controls The editor controls appear when you are in draft mode. The top row contains some important controls that are used to change the edit view and publish or preview pages: (from left to right). Save Publish Revert Page Preview Edit Content Edit Content (show element outlines) Edit Structure / Template Save changes as a revision of the page, but changes will not be published Save changes and then publish the page to the public site Cancel any changes made, with options for what to do next Displays the page as a visitor would see it (nothing editable) Similar view to the preview, but editable (can be confusing) The main editing view you should use Edit how content is displayed The bottom row controls are similar to features in applications like Microsoft Word. New page options exploded Page Title [required] Page Title is the document title, not a heading. This is displayed at the top of the browser window and used in places such as search results (e.g. the link you click on Google) Page Summary [optional] Page Summary is not required but useful to fill in, and again can be used in search results. 4

5 Link Text [required] Link Text refers to the entry the page will have in the navigation menu. It is often set to the same as the 'Page Title'. Meaningful URL [required] Meaningful URL allows you to specify an easy to remember web address. It also does away with page extensions, e.g. html or jsp. This will be automatically filled in based on your Link Text, but can be edited. We recommend you keep it as short yet descriptive as possible, with no punctuation or case variation, using only hyphens in lieu of spaces between words. Create Page as [required] Create Page As offers the option of either child or sibling. A child is a page to be added at a level below the currently highlighted menu entry (e.g. indented). A sibling page will be added at the same level as the currently highlighted menu entry. Publication Date [optional] Publication Date allows you to set the date on which the page will be automatically published. This is often left blank. Publishing pages: draft and live When saving your pages, you have two options: Save or Publish. Pages will not be live until they are published, either manually or automatically. While editing a page, you can Save the page as often as you like. The saves will be visible as the draft version of the page, something only authors will see while on the Draft tab. Everyone else will see the Current Page version. Clicking Publish will save the current draft plus any edits as the current page. If there are no restrictions in place, the page will become immediately live on the public facing website. Note: you should save your work often as you would if you were editing a word processing document. EasySite does automatically save your changes, but only at 10 minute intervals. In particular, you should save your work before navigating to another web page. If you have made many changes, and wish to revert back to an older saved version of the page, click Revert. Publication dates Pages can be automatically published, deleted or archived to a specific schedule. For example, news articles or press releases can have a Go Live date for them to appear on the 5

6 site, and then be moved to a news or press archive at another specified time. You can see the settings for this feature by clicking Scheduling under the Draft tab. A guide to scheduling can be found at Workflow A workflow in EasySite is a series of steps that allow some editorial control over content before it is published. The workflow can be completely customised, and if this is something you are interested in, please contact us. Asset library Everything is an asset EasySite treats everything that isn t page content as an asset. This includes images and all other files such as PDF and Word documents. Every asset goes into the Asset Manager (sometimes referred to as the asset library), even if an asset is only used once on one page. However, if an image or file is needed on more than one page, it only has to be uploaded once, and subsequent links can be made via the Asset Manager. There are two main ways to incorporate assets on to a page: via an Asset element (for images, videos, flash etc) and via an Asset Link (for files you want people to click to download). During part two of this tutorial we will create an example of both. Copyright You must check that you have the permission of the copyright owner of the material before you add any content in to EasySite, be it text, images or other files. You should also be aware that if you deposit any content in the asset bank other people can see this and would be free to use it if it is not protected. Please ensure that you only use material which you have permission to use. Marketing image bank Over 2,000 photographs have been pre-loaded onto EasySite for you to use on your webpages. These photos cover all aspects of life at Aston as well as generic "stock" images. Categories, Groups and Permissions Category information can be used to restrict viewing, using or editing certain pages or assets to specific groups of people. For example, restricting a downloadable file to staff members, or ensuring no one else uses images that have strict licensing conditions. Categories can also be used to group similar pages or assets together to create RSS feeds or dynamic areas on web pages. All pages and assets should be in at least one category, but they can be in more than one. Groups define groups of users, in this case members of staff and students at Aston University. We can use groups to restrict editing specific pages to specific sets of people. For example, perhaps LHS wants certain people to maintain their programme information, so we could set up a group called LHS Programme Editors ES. If they wanted other people to manage postgraduate content, we could create LHS Postgraduate Editors ES. 6

7 (We use the ES suffix to signify an EasySite specific group, so they can be differentiated from other user groups the University maintains.) People can be in more than one group, and pages can be assigned to Read or Write to a different groups as well, so there can be a lot of flexibility over who sees and edits what content. A special permission called Everyone can be applied to pages on a Read basis, essentially meaning it is a public page. Removing this permission will stop people who are not logged in from viewing the contents. We will need to set up categories and groups for you before you can use them. Please ask us for any help you may need in this area. Logging in to EasySite [Video available: The main login address for EasySite is You need to use the same Aston University username and password that you use to log in to your computer. Select the appropriate area to log in to (e.g. Training area) from the side menu Enter your username and password, and click Login If a security warning pops up, click Yes 7

8 The training area The training area is located here: You will continue to have access to the training area after this session. Feel free to experiment or repeat parts of the tutorial again in this area. The training area is not publically accessible, and you should not be able to break anything, so please do not be afraid to explore the options in this area. Managing pages and page information Clicking the Properties tab on a page allows you to see the various information and options available. Page information Information should be the default view when you click the properties tab. On this page you can see various statistics, including authors and key dates. Page Revisions Click Versions on the properties submenu to see various different versions of the page, listed by Publication Date. Older versions of a page can be viewed by clicking the date. Copying and moving pages From the Options tab you can copy or relocate the current page to a new area. Copying pages can be useful when you want to replicate the layout of a complex page without having to modify the structure of a brand new page. Deleting pages From the Options tab, click Delete to remove the current page. There is a safety net step, and you need to click Yes to confirm. Deleting a page will also delete all children pages. We should be able to restore a page if you tell us within 28 days of deletion. Reordering the menu From the Options tab, you can click Reorder to rearrange the current level of menu options, i.e the current page s siblings. Scroll to the bottom and click Save Page Order to save the new menu arrangement. 8

9 EasySite Tutorial: Part Two This part of the tutorial contains all the steps to complete a new page from scratch. Please follow the numbered steps to incrementally build a complete page with several regularly used page elements. Accessing EasySite [Video available: 1. Open in a browser window 2. Click Training Login from the side menu 3. Enter your username and password, and click Login 4. If a security warning pops up, click Yes You should now be in the training area of the content management system. Creating new pages [Video available: To start this tutorial, we re going to create a simple page. Please follow the steps closely as you ll build up a page demonstrating all the basic functions which may rely on earlier steps. If you used the Training Login page ( you should automatically be directed to the right page. Training area: 9

10 5. Click New Page on the welcome bar. 6. Select Training from the Page Template dropdown at the top of the page: 7. Click the Training Page link from the list of options, which should take you to the next stage a. For normal pages after this training, use the Standard Template from the Standard drop down option. b. Templates in the future may be used for structured content pages, e.g. programme details, staff pages 8. Complete the basic page details into the form. Example information shown below, substitute your own name! 9. Click You have now created a dummy page with some example content ready to edit. It will not be live until you publish it (notice, no Live tab available yet.) Training Page template The training template features a heading element, two content editor areas, and two empty image placeholders. The heading is limited in text style to that of the university heading style. It can be anything, but setting it the same as the document title or link text will cause the least confusion to visitors. Empty elements, e.g. image placeholders, are never visible on published pages. 10

11 Categorize a page Everything has to be in at least one category before it can be saved. 10. Click Categories from the submenu under the main options tabs 11. Select the Training category checkbox and click Publish to continue. You have just made your first EasySite page live. 12. Click on the Edit tab to return to the page editing screen. 13. You may need to click Edit Content (Show Element Outlines) to get back to the screen with the familiar outlined boxes (6th icon along the top row). Adding links [Video available: There are 3 types of link covered here: external, internal and page jump. External link The first type of link we are going to add is a link to an external site, e.g. the BBC. 14. First, select some text in the content editor that you want to turn into a link. 15. Click the Create Link button from the top bar of the edit controls. 16. The Link Properties window will pop-up. 17. For the Link Type select External Link. 18. Select from the dropdown menu that appears next to URL. 19. In the text box to the right, enter the rest of the URL, e.g You can ignore the Port and Querystring settings. 21. You will need to supply some brief yet descriptive Alternative Text for accessibility reasons, e.g. BBC 22. Click OK to save these details, and you should see your link has been created. 23. Links will not work in editor mode. To test your link, you can click the Page Preview button. 11

12 Internal The second type of link is an internal link, which in this case means linking to a page also in EasySite. As not all university pages are hosted on EasySite, it may mean treating some university links as external. 24. Select some more text in the content editor that you want to turn into a link 25. Click the Create Link button from the top bar of the edit controls. 26. For the Link Type select Internal Link. (This is the default for new links) 27. Click the Update button that is to the right of the URL option. 28. The Select Internal Link pop-up should appear, with the site hierarchy on the left hand side. You can click the plus symbol to expand areas of the site to reach subpages. 29. In this example, let us link to the ISA webpage about EasySite: a. Expand IT Services (towards bottom of list) b. Expand Staff ICT services c. Expand Business Services d. Expand Aston Website e. Click EasySite CMS to select the page (it should highlight in blue) f. Click OK 30. Alternative Text should be filled in automatically, but you can edit this if you want. 31. Click OK to save these details, and you should see your link has been created. 32. Remember, links will not work in editor mode. To test your link, you can click the Page Preview button. Page jumps Page jumps refer to links that link to another part of a page. This usually links to further down the same page in cases of very long pages. An example would be a staff page broken down into several headings, e.g. Research Interests, Publications, Modules Delivered. Page jumps involve two separate links: an Anchor (Bookmark) link that serves as the destination (created first), and the Page Link (Jump) which is the link visitors will click to be taken to the anchor link. We re going to create a link in the top content editor that links to a heading in the second content editor area. Ensure you are in edit mode on your page before beginning. First, create the target heading for the jump 33. Enter some text at the start of the second/lower content editor, e.g. Jump Heading and press the return key so it is on its own line. 34. Highlight the new text, and from the Style drop down menu on the left on the editor controls, select Header With the text still highlighted, click the Create Link button. 36. The Link Properties window will pop-up. 37. Select Anchor (Bookmark) as the 12

13 Link Type 38. Complete the Name field with a short reference for this heading. a. As this reference will become part of the URL, it cannot have any punctuations, spaces, and should be completely lowercase, e.g jumpheading 39. Click OK to save this anchor. Now to create the link a visitor will click 40. Select some text in the first/upper content editor. 41. Click the Create Link button from the top bar of the edit controls. 42. Select Page Link (Jump) for Link Type. 43. Select the reference you previously gave the heading from the Page Links drop down menu. a. Top of the Page is a preset anchor for every page. 44. Supply some Alternative Text ; using the heading text is fine. 45. Click OK. 46. To test your link, you can click the Page Preview button. 47. You may need to switch to Browse Site mode to see the jump work correctly. Editing links is a very similar process to adding links. To edit a link, click (no need to highlight) the link text in edit mode to select it, and click the Create Link button again to access the Link Properties pop-up. To delete links, click the link to select it, and click the button next to the Create Link button, which is Unlink. We will come to how to add links to files at the end of the next section. Adding images and downloads [Video: Adding an image from the library to a page We are going to add an image already in the library to your training page. As every image is stored in the library, over time the library will grow and hopefully become a useful resource for images for your web pages. Marketing also add images regularly to a category called the Image Bank suitable for use across the entire site. 48. Click the first one of two Asset Placeholders to select it. It should highlight in purple. (If you cannot see the placeholder, ensure you are in show element outlines mode). 49. Click the Show Asset Properties button. It is located on the top bar of the edit controls, fourth from the right. 50. You should now be looking at the Asset Manager: a. You can filter the type of assets you are looking at by selecting an option from the Type drop down menu, e.g. Images. The results should change once a selection is made. b. You can search for more relevant assets by expanding and selecting categories on the left hand side, e.g. Training to find the sample image. 13

14 51. Click any asset to select it, then click Select. This will bring up the properties for the selected asset as it will appear on your page. c. Alternative Text should be filled in by default, but can be changed. d. Caption is optional, but is the easiest way to add text underneath the image without editing the page structure. 52. Click Save to select the asset. You will be returned to your page with the image in place. Adding a new image to a page Now we re going to add an image to your page that isn t in the library. First we need an image file, so download the sample image from the training index page to your computer. 53. Go to the training page, EasySite training on the side menu. 54. Right click the sample image, and select Save Picture (this command is called Save Image if you are using the Firefox web browser) 55. Save the file to the desktop so you can find it again shortly. Adding a new asset is very similar to selecting an asset from the library, but with an extra step built into the process to add the asset to the library before selecting it. 56. Return to your new page, in edit mode. 57. Click the remaining Asset Placeholder to select it. 58. Click the Show Asset Properties button, which will bring up the Asset Manager as before. 59. Click the Add button which is towards the top left of the window, then select Photo. 60. You should now be looking at the Add New Asset window. a. Binary File refers to the file on your computer that you want to add. In this case, click Select File, then Browse and select the sample image file you downloaded earlier. Click Upload to upload the file to EasySite, then click OK once the upload is complete. b. Fill in an Asset Title, e.g. Sample Image File c. Alternative Text also needs to be completed for accessibility reasons. It should be a fairly brief description of the asset. d. The descriptions are optional, but may be useful for other authors if you fill them in. e. Click the Categories tab to select a suitable category for this asset. f. Expand All Categories and put your new asset in the Training category. g. Click Publish. Your asset is now in the library. 61. Click Select to return to the asset properties for the asset as it will be on your page. 62. As before, a caption can be added. 63. Click Save to return to your page with the new image in place. 14

15 Adding links to assets, downloads (e.g. a PDF to download) 64. Select some text that you want a visitor to click to download the file. 65. Click the Create Link button. 66. Select Asset Link for the Link Type. 67. Click Update to open the asset manager. 68. You should see a list of recently added files. If you were adding a link to an existing asset, you would click on it here. a. This interface should look familiar as it is very similar to browsing/adding images. b. As before, you can filter the current list by clicking categories at the top, or selecting an asset type from the top drop down. 69. Click the Add button on the top left of the window, then Photo in the pop-up window. 70. Select the file you want to be the file to download by clicking Select File for binary file, e.g. a PDF, then Browse, select your file, click Upload then OK. In this example we can use the same sample image we used earlier. 71. Complete the Asset Title and Alternative Text with suitable dummy text. 72. Click the Categories tab before saving to ensure it goes in the right category. c. In this example, click the Training checkbox. 73. Click Publish to save your asset into the library. 74. Click Select to use this asset for your link on your page. 75. You should be returned to the Link Properties pop-up with the asset details filled in. 76. Click OK to return to your page with the asset link in place. 77. Test your link by going into Page Preview mode. Deleting and replacing assets Please do not upload lots of different or updated versions of the same asset. You can replace the file of an asset by editing it in the library. This allows all links to the asset to point to the updated asset, even for pages hosted away from EasySite. Tables Two buttons on the top right of the editor controls are for adding and managing tables of data. The Insert Table button brings up the Table Properties window. Clicking the Table Options button brings up a menu of options that can be used to alter a table s structure, or delete the table entirely. You can copy and paste from Word if you re more comfortable using that interface to create tables. 15

16 Editing page structure [Video available: Before now, we ve been editing the contents of the page elements, e.g. filling in a page heading, a content editor, inserting an image into a placeholder. The next edit view we are going to see allows you to see the building blocks of the page without the content. 78. Make sure you are in Edit mode of your page. 79. Click the Edit Structure / Template button. 80. You should now see all the building blocks of your page in this order. a. Heading b. Content Editor c. Asset d. Content Editor e. Asset Moving existing elements You can move the various elements around to change how the page is laid out. In this example, we will move the title below the first content editor. 81. Click and hold on the dark blue bar labelled Heading. 82. Drag the element to the light grey drop area underneath the dark grey bar labelled Content Editor. 83. If you can drop your element, a small green tick icon will appear near your mouse pointer. 84. Click Page Preview mode to see the result. Adding new elements 85. Click the Edit Structure / Template button. 86. There should be a blue Element Palette on the right side of the screen. These are the elements you can use for your page. 16

17 87. Find the Content Editor icon and drag it as before to the light grey area, this time under the bar labelled Heading. 88. You can click the outline box edit mode to confirm you ve added a new element that you can add text to. Deleting You can delete elements as well, but be careful as there is no undo. 89. Make sure you are in Edit Structure / Template mode. 90. Click the white cross to the right of the bar labelled Content Editor that you just edited, then click OK. 91. The page will reload and the element will be deleted. Columns There is a special column element to allow you to place things next to each other, rather than just linearly. For example, you may want an image next to text. 92. Make sure you are in Edit Structure / Template mode. 93. Drag the Columns element as before to the light grey area under the Heading element (the columns icon is under the layout tab). 94. The page will reload, and where you dropped the columns should now be two light grey drop areas. Dropping or moving elements into either side will affect the page layout. 95. Drag the first Asset element to the right hand side drop area under columns. 96. Drag the first Content Editor (currently above the heading) to the left hand side drop area. 97. Click the Publish button to save and view your new page structure. Columns have a default width of 50%, e.g. two equal columns. To change this setting, click the Configure icon on the column element in the Edit Structure view, and enter a number into the Split at (%age / pixels) field. You re finished! What next? Ask for advice on anything in the tutorial, or about things you think you d like to do but were not covered. Confirm that your editing permissions are set up on the live site before you leave, and remember you always have access to the training area Remember to contact web.issues@aston.ac.uk for easysite support Do check the how to part of our website for more advanced topics: 17