Course Exercises for the Content Management System. Grazyna Whalley, Laurence Cornford June 2014 AP-CMS2.0 University of Sheffield
PART 1 1.1 Getting Started 1. Log on to the computer with your usual username and password. 2. Start Mozilla Firefox (web browser) and log into MUSE 3. Click on My services from the menu at the top left of the screen. 4. If CMS (training) is not listed, click on View all services and locate the link in the C section. 5. Click on CMS (training) link.sw 1.2 Creating a Page 1. Click on mysite on the left hand side of the screen, in the Content tree. 2. In the right hand window, under create a page select the standard template and click on 3. In Page Name provide the following: Page Name CMS Page Web address cms 4. Go to the WYSIWYG (What You See Is What You Get) Editor (the big white box under the heading Page content). Select the paragraph block (a dotted box with a p in it in the Editor) and enter text: The Polopoly Content Management System Select it as Title h1 in the Format box 5. To create your next paragraph click on the dotted box underneath and type in: A Content Management System is a method of publishing web pages. The writer inputs the content, which is then stored in a database and combined with a layout and design to produce a web page. Whilst pressing the Enter button gives you a new paragraph, it might be that you need to write something on the next line. To do this you need to hold down the Shift key and press Enter. This will take you to the next line. Please don t fake paragraph breaks by putting in 2 line breaks rather than a paragraph. A well structured web page is an accessible web page.
Course Exercises for CMS 6. Click on the Preview button at the top of this tab to have a look at your web page. (If you don t see a preview page you could have pop-ups blocked. Allow pop-ups from the cms-training2.shef.ac.uk server and press the Preview button again.) 7. Press x on that tab to close the preview page. 8. Click on Insert 9. You will now see a list of pages within your folder. Click on the title of your page (blue text) to view and can the update your page content if you need to (it will not be a web page until you publish the page as outlined in 10.). 10. Under Published state on the page, click on the Publish button to publish your page now it will be live on the Webs. 1.3 Editing the Page 1. Press the Edit button to begin editing the page 2. Scroll down to the WYSIWYG Editor again. Click at the end of the last paragraph (dotted box with a p in it in the Editor) in the Editor and hit Enter to add a new paragraph, then type into the new paragraph the following information: By separating the design from the content of each page we can: 3. Press Enter to make a new paragraph, then click on the Insert/remove bulleted list button to change this into a bullet list and type, pressing Enter each time to make a new bullet entry : Achieve a consistent look and feel Improve navigation Manage information more effectively 3. Click on Save and View which will save the latest information that you have typed in and return the page to View mode. You will now get a message at the top of the screen saying: Content was saved 4. Under Published state click on the Publish button to publish your page. Every time you Edit a page it goes back into Draft state. While in Draft the previous version will remain the live version until you publish the new Draft version. Then it will become the new live page (there may be a delay between pressing the Publish button in the back-end and the page appearing on the live front-end, try viewing the page in a browser and refreshing your browser to speed things along.) 3
At the end of editing your page should look like this: Course Exercises for CMS 1.4 Adding resources to the CMS When adding files and pictures to the resources tab of a folder, do this in the folder closest to where you will use the resource. Try to keep your resources as close as possible to the pages you are adding them to. This will spread the resources out over the site, which is actually more manageable than making 1 folder hold thousands of resources, which would become unmanageable. Resources will be shared across the whole site, so that common resources are available to everyone. This means that multiple resources of the same file or image need not be made. 1.4.1 Adding a picture Open up a new browser tab and go to this web page to access some pictures and files: http://www.shef.ac.uk/web/training/files 1. Right click on the picture the-edge.jpg 2. Select Save image As 3. This should open a local Folder on your machine 4. Click on the Save button 5. Leave the browser tab open (we will come back to it later). Go back to the CMS by selecting the Content Management System tab at the top of the browser window. 6. Select the tab mysite at the top of the screen. 4
7. Select the Resources tab towards the middle of the screen. Course Exercises for CMS 8. Under the heading Resource creator, click on the Create button next to Image. 9. Click on the Browse button 10. Find your picture and left click on it 11. Press Upload 12. The picture will appear, underneath type in Picture of The Edge in the Name 13. Type in Picture of The Edge Building in the Alt text 14. Click on Insert this has now been added to your resources section of this folder. The Alt text shows the information you type in there when the mouse is held over the picture. It is also used for screen readers. Someone who has vision impairment and can t see the screen, will use software (Jaws or Window-Eyes) that will read everything on the page including pictures. So, whatever is written in the alt-text, that is what will be read out. This is the default text which will be used for this picture, but it can be amended on a page to fit with the context of that page. 1.4.2 Adding a file 1. Go back to the web page with the pictures (http://www.shef.ac.uk/web/training/files ) to find the file lorem-ipsum.pdf to upload (note: file names should not include spaces or uncommon symbols like @ $!? & / as these can cause problems) 2. Right click on Lorem Ipsum.pdf at the bottom of the page 3. Click on Save Link As 4. Click on Save 5. Go back to your Content Management System (CMS) tab 6. Make sure you have the resources tab on the mysite tab selected 7. In the resource creator section, select file and click on create 8. Click on Browse 9. Select the file you downloaded 10. Click on Upload 11. Type in the title Lorem Ipsum to go with your file 12. Click on insert no need to add other info 5
Course Exercises for CMS (We will use the document inserting-a-picture.doc on the web page to copy text from for exercise 1.5, so don t close the web page, click on the Content Management System tab to begin exercise 1.5, leaving this tab open.) There is a description box where you can, if you want, type in a description of the document. This can be useful to let people know what the document is in case someone else needs to link to the document or booklet. It s not necessary, but useful. 1.5 Creating a second page 1. Under the mysite folder, click on the Folder Contents tab, select standard template under Create a Page and click on Create. 2. Under Page Name type Inserting a picture. 3. Under Page web address type insertpicture 4. Go back to the web page with the pictures, scroll down to the bottom of the page and left-click on the Inserting A Pciture Text (Word) link to open the file inserting-a-picture.doc in Word. Select all the text and copy it. Go back to the Content Management System tab. 5. Go to the New content tab, click in the paragraph box in the Editor, and click the Paste as plain text icon. Paste the text from the Word file into the dialogue box (Ctrl+V, or Paste from menu). 6. Once the text has appeared in the box click on the OK button. This will add the text on to the WYSIWYG editor. 7. You need to separate the text out into paragraphs first, before formatting any text to a heading or sub-heading, as the format will change the whole paragraph. To break the text into separate paragraphs click at the end of the heading, hit Enter, and you ll see the heading appear in its own paragraph. Also, the next paragraph ends up with a line of spaces at the top. As the cursor is in the paragraph with the spaces just press delete to get rid of the spaces. Go down to the where the next paragraph should be, click on Enter, hit delete to get rid of the spaces etc.. etc.. 8. Format the paragraphs of text to match the Word file: heading in H1, minor sub-title in H4. 9. Click on the tab with mysite on. 10. Select the resources tab within this tab. 11. On the right hand side of the screen of The Edge resource, select the copy to clipboard icon 12. Go back to your page by selecting the New Content tab at the top. 6
Course Exercises for CMS 13. In the WYSIWYG Editor select the words [Put picture here] and delete them (they are only place-holder text a guide to where things should go). 14. Click on the paste image resource icon 15. Your picture will now appear on the screen at this point. If you right click on a picture in Edit Mode, you will get a pop-up menu. Select image properties. This will give you a dialogue box in which you can change the Alt text to fit the page, add a caption below the image, align the image left (text wraps around on the right); right (text wraps around on the left); and centre (centre s image with text above and below) or leave it on the blank default (align left, no text wrapping) 16. Click on the Insert button at the top or bottom of the screen to save the page. 17. Click on the Folder contents tab to see your new page 18. Click on the page Inserting a picture 19. Under Published state click on the Publish button to publish your page. 20. Press Close. At the end of editing your page should look like this: 7
1.6 Creating a new Folder Course Exercises for CMS You need to have administrator access to be able to create a folder. This used to be available to everyone when the system was first used, but too many folders were created and became confusing, so this is now only available to the administrators in the department. If you need a folder creating, please speak to your departmental web co-ordinator. 1. On the mysite tab, click on the Folder Contents tab if you re not already there. 2. Click on the Create a folder button. 3. Type in folder name Using the CMS 4. Type in web address usingthecms 5. Click on the insert button at the top to save the folder into the My Site folder. 6. Click on your Using the CMS folder to open it in a tab you ll see there are no pages in there (like the My Site folder was at the start, before we started making pages). 7. Use the Create a page button within the Using the CMS folder, create a new standard page called Introduction. Give it the web address index. Type the following words: Introduction [Title - h1 format] Welcome to the Poloply Content Management System (CMS) used at the University of Sheffield. Follow steps 1 to 3 to get started using the system to make pages. The topmost page in a folder is the index page for that folder (the page displayed if the folder is requested), so be careful to keep the right page at the top of the Folder contents list. Avoid having an unpublished page at the top. Even if other pages are published, it will still try to show the unpublished page (and fail) and therefore throw up an error. 8. Click on the Insert button to save the page. 9. In the Folder contents tab, click on the page you just created to open it. 10. Under Published state click on the Publish button to publish your page. 11. You can close that page now. 12. Create another standard page called Step 1, with an appropriate web address. Type the following words: Step 1 [Title - h1 format] 8
Course Exercises for CMS Start your web browser, then log in to MUSE, then log in to the CMS by clicking on the CMS (Training) link. 13. Click on the Insert button. 14. Click on the page you just created to open it 15. Under Published state click on the Publish button to publish your page. 16. You can close that page. 17. Create a new standard page called Step 2, with an appropriate web adress. In the Page Content area type the following words: Step 2 [Title - h1 format] Create a new page by selecting a template from the menu in the Content tab. Or, edit an existing page by clicking its title. When you have edited or added text, publish the page. 18. Click on the Insert button. 19. Click on your page. 20. Under Published state click on the Publish button to publish your page. 21. Close the page. 22. Create a new standard page called Step 3, with an appropriate web alias. In the Page Content area type the following words: Step 3 [Title - h1 format] You can organise sections of web pages by creating folders. In the local navigation, on the website, clicking the folder name displays the first page in that folder. 23. Click on the Insert button. 24. Click on the page. 25. Under Published state click on the Publish button to publish your page. 26. Press Close. (Note: If you don t want the Introduction page to appear in the local navigation because it is already accessible from the Using the CMS folder link, then open the page, click the Edit button, untick the Show in local navigation tick box. Save and publish the page.) 9
Course Exercises for CMS If by any chance you need to move the links in the local navigation menu, you need to go to the folder where the page is and click on the Edit button, you ll see that to the left of each page name you ll see 2 parallel lines. If you hover your mouse over the lines you ll see a 4 arrow cursor. Hold down the left mouse button and drag the link to wherever you want it to be, up or down the Folder content list. Once the pages are in the order you want, click on Save and View to keep the arrangement. Don t leave the Folder in Edit mode. You will have noticed the relationship between the Content Tree structure and the local navigation menus on the web page. You can untick the show in local navigation option to make the link disappear in the local navigation menu (the navigation for your site). The page will still be there but the link will not. Make sure that the page you want to go to when selecting the folder is the page at the top of your list of pages in that folder. 10
PART 2 2.1 Links Course Exercises for CMS 1. Go back to the mysite tab at the top of the screen. 2. Create another page in your folder using the standard template. Title: Links Web address: linking 3. a) In the Page Content write the heading and paragraph: Links [Title - h1 format] Email links set up an email message to a specified address. b) Press Enter to add the next paragraph and click on the Insert/Edit link button. c) Select email under Link Type and type in your email address. d) Press OK e) Deselect the mail address (click away from it so it s not highlighted). When adding your email address to the web page you are given the opportunity to put information in to the subject field and main message box. This only works if the user has an email client installed on their machine, which prepopulates with the information you type in. If the user uses web mail such as Hotmail, then this might not not work. So, please don t rely on it. 4. a) Press the return key to go to the next paragraph and type: External links lead to other people s pages. b) Press Enter to add the next paragraph and click on the Insert/Edit link button. c) Make sure the Link type is URL. d) Type in the URL www.bbc.co.uk. e) Press OK f) Deselect the link 11
5. a) Press Enter to add the next paragraph and type: Course Exercises for CMS Internal folder links lead to your own sections. b) In the Content Tree on the left hand side of the screen, click on the down arrow next to the folder you created (Using the CMS) c) Select copy to clipboard. d) Go back to your WYSIWYG pane on the right hand side and type Using the CMS e) Highlight it and click on the paste link resource button on the toolbar. Internal links are to items in your web site, because you need to be able to copy the item to the clipboard to make an internal link. So, if it s in your Content Tree, please use the internal linking. There is link checking on internal links. Internal links will know when a page is unpublished and will follow links if a page moves web address, avoiding lots of broken links. Departments outside of your Content Tree will be external links, although on our server you can give the address as /cics rather than http://www.sheffield.ac.uk/cics which you would have to do if it was not on our server. (Note of there is anything before the Sheffield that is not www then it s not on the main web server and will need a complete web address). 6. a) Press Enter to add the next paragraph and type Internal page links lead to your own pages. b) On the left hand pane find the page you want to link to. (Inserting a picture) c) Click on the down arrow d) Select copy to clipboard button e) Go back to your WYSIWYG page and at the place where you want the link to be, put the cursor and click on the paste link resource button add the name of the page you ve linked to as the link text.. This will f) Press the insert button - this saves your page and takes you to the list of pages you ve created g) Click on the title of the page Links in the Folder contents list. h) Click on the Edit button 7. To add secondary links:- a) At the top of your page, where the tabs are, click on Secondary content tab 12
Course Exercises for CMS b) Under Create widget there is a drop-down option box and a Create button. By default it is set to Links widget. (a widget is just a little application which allows extra functionality to be added to a page). Click on the Create button. c) In the Title of the widget type See Also d) In the Link text type in BBC Website e) Make sure link type is external link f) In the Link (URL) box type in http://www.bbc.co.uk/ g) Click on the insert button at the top or bottom h) Click on the preview button to see your page i) Close the preview page. 8. To add internal link in the links widget: a) Select Links widget and click the Create button. b) Type in Further information in the Title of the widget c) Click on the down arrow next to CMS in the left hand pane (Content Tree) d) Select copy to clipboard button e) In the Link Text box type in a link to the CMS page f) Select Internal Link in Link Type g) Click on the paste Content Reference button to add the link h) If you want to add another link just click on the one more tab at the top i) When happy with link, click on the Insert button j) Press Save and View. (Note: You can have more than one link in a link widget. Use the Set count button or One more button to add more link block, up to a maximum of 20 links per widget. There is also a Remove button on the right which will remove a block, and when you have more than one link, there are also Up and Down buttons which allow you to reorder the links.) 13
9. To add a download widget: Course Exercises for CMS a) Go to the Resources tab in the MySite folder and to the right of the file Lorem Ipsum, click on the copy to clipboard icon to the right of the file. b) Go back to the page you were updating (Links) by clicking on the page in the left hand menu c) Click on the Secondary content tab d) Select Downloads widget from the drop-down list and click the Create button. e) The widget should already be called Downloads f) Enter a title for your download e.g. Lorem Ipsum (PDF, 24Kb) g) Select Internal link h) Click on the paste content reference link i) Click on insert the downloads widget now appears at the bottom of the Widgets list you can click on it and drag it up to the top of the list if necessary by clicking on the vertical lines to the left of the widget title j) Click on Save and View k) Make the page Live by clicking on the Publish button at the top of the Content tab l) Click on the Preview button to view your page. At the end of editing your page should look like this: 14
2.2 Layouts - Columns Course Exercises for CMS 1. In your mysite folder, click on the Folder contents tab. 2. Select Standard template. 3. Click on the Create button. 4. In Page Name provide the following: Page Name Layouts Page Web address layouts 5. Go down to the WYSWIG Editor and select the layouts button (first button on the left on the top row of the tool bar). This will open a pop-up window. 6. In the pop-up window, scroll through the layouts and select 3 columns equal width. (A framework will appear in the Editor with the place-holder text in it. ) 7. Remove the place-holder text by selecting and deleting it. 8. Return to http://www.sheffield.ac.uk/web/training/files, scroll down to the Downloads section, and open the file Lorem ipsum (Word) (lorem-ipsum.doc) in Word, select all the text and copy it. 9. Go back to the Content Management System tab and click on the New Content tab. 10. Click in the paragraph box at the bottom of the page and click on the Paste as Plain Text button. Paste the text into the box and press the OK button. (Note: in this case the text will be inserted as separate paragraphs. The formatting of the Word document will affect what text is formatted in the CMS when inserted for the first time.) 11. Use the Maximise editor size button to make the WYSIWYG Editor fill the whole of the right-hand pane of the screen. This gives you a better view of the contents. (Clicking the Maximise editor size button a second time will return the Editor to it s normal size and give you access to the buttons.) 12. Select each paragraph from the pasted text. Holding the mouse button, drag-anddrop each of the four paragraphs into the first four of the boxes, putting the heading Lorum Ipsum at the top of the page and making it a Title h1. 13. Reformat as needed if the text loses its paragraph box when moved, then put each paragraph back into a paragraph format. 14. Click in the paragraph of the top left layout box and click on the Styled box button. This will open a new dialogue box. 15. Choose Highlight box (complementary) 16. Click on OK 15
Course Exercises for CMS This will add a shaded box under the paragraph in the colour of the University section you are in (most often this will be blue). 17. Click in the next paragraph of the layout box to the right of that one (i.e. top middle box) and click on the Styled box button. 18. Choose Highlight box (neutral). 19. Click on OK. This will add a grey shaded box under the paragraph. 20. Click in the paragraph of the layout box to the right of that one (i.e. top right box) and select the Styled box button 21. Choose Feature box.. This will open the dialogue box. 22. Click on OK. This will add a key-line around the paragraph with a thicker line at the top. (This will be the colour of the section the page is in). 23. Click on the Preview button to view the page. (Try looking at some of the alternative views: Mobile portrait, Mobile landscape, Tablet portrait, Tablet landscape. Check the page works in different formats and make any changes needed if it does not.) 24. Click on the Insert button if you are happy with it and Publish the page. Right clicking on a layout will give you more options to modify the layout. You can have more than one layout on a single page, but don t over complicate your pages. Think about your users. Also remember that on mobile phones the grid collapses back into a single column, and this happens in the order: left to right, top to bottom. Be aware of this when adding text which is meant to be read in a particular order. Styled boxes are applied to paragraphs, not to boxes, so they can be used outside of layouts, and should not cross cell boundaries. When used in a layout, the styled box will expand to fill a layout box, so that the boxes line up and look consistent. To remove a styled layout, right-click on a styled box and from the pop-up menu select Remove styled box. You can find more advice on the use of styled boxes, as well as other types of secondary content at: http://www.sheffield.ac.uk/web/effective/cms-guidelines The page should look something like this: 16
17 Course Exercises for CMS
PART 3 3.1 Removing pages Course Exercises for CMS 1. a) In the Content Tree (left-hand menu) click on Inserting a picture page b) Click on the Properties button at the top of the page tab. c) Click on the Referring content tab, and press the Show referring content button. This now shows the pages, folders and resources which link into this page. It will normally show the folder which the page is inside (known as its parent folder ). If more than one folder shows up, then it is probable that the page has been pasted into that folder s contents as well. Any other pages which show up on this list will have links through to this page, so to avoid broken links, we need to remove these links before removing the page. d) Open the Links page, and click on the Edit button. e) Click on the Inserting a picture link (at the bottom) f) Click the Remove link button g) Click Save and view. h) Click on Publish for Published state, then Close. i) Back on the Properties for Inserting a picture tab click the Show referring content button to refresh the information. The Links page should now have disappeared. j) Press Close and return. k) Unpublish page l) Then Close the Inserting a picture page. m) Back on the mysite folder tab, find the Inserting a picture page. n) On the right there is a Remove button. Clicking this will remove the page from the folder. It will disappear from the site. If the page is copied anywhere else, in another folder and its Published state is Published, then it will remain active. It should be obvious from the Referring content tab that it is copied in several folders if several folders are in the list. Rather than clicking on the red cross to delete a page, you could always just unpublish a page if you know you re going to re-use it. It s the unpublishing which takes the page off the web; once it s gone, the page can be re-used as editing the page will return it to Draft state and allow it to be re-published, but if you don t need to re-use the page, then remove it or it will just clutter up the Folder Content list. 18
Course Exercises for CMS One of the features of the Draft/Publish/Unpublish workflow states is that you can leave a page in Draft while getting it ready. It only goes live when you press the Publish button and pressing the Unpublish button removes it from the web (so it won t be found by Google searches). Every time you Edit a page it goes back in to Draft state and the previous version remains live until you Publish the new version. This is also true of Unpublished pages; editing will return the page to Draft and then it can be republished. This means that you can recycle pages, say for Freshers Week, Edit the page, Publish it for the week, Unpublish it, then Edit it in the run up to the next year, Publish that version, then Unpublish it etc. So you can leave unpublished pages in the Folder Content List if you know you will be reusing them, but if you don t need the page then remove it or it will clutter up the Folder Content List. Generally, it is good advice to save and close tabs as you finish with them. Pages are locked down when in Edit mode to stop others trying to simultaneously edit the same page. If the page is not then saved, it will time out after about half an hour of inactivity (having the page open in a tab in the background does not count as activity), and this can then cause problems and may result in changes being lost. The Save and Edit button allows you to save changes up to that point while remaining in Edit mode, or you can Save and Close the page if you re called away. Everytime you edit a page it will return to Draft state. The previous version will remain the live version until the draft is published by clicking on the Publish button when the page is in View mode. 3.2 Logging Out 1. First close all the open tabs except the My Start Page tab. If the tab has a Save option, save the page rather than clicking Close first. If it doesn t have a Save option, then it s safe to close. Publish any pages that need publishing before you close them. Basically just tidy everything away before you log out. 2. In the top-right hand corner there is a Log out link. Always log-out to avoid problems. 19