Maintaining a University website in the CMS

Transcription

1 Maintaining a University website in the CMS Practical workbook Aims and Learning Objectives The aim of this course is to enable University web publishers to maintain a departmental website using the University Web Content Management System (CMS) and its built-in web editor edit-on Pro. After completing the course, you will be able to: understand how the CMS works; access your website using the CMS admin screens; create and add new folders and web pages; import and use images; import other file types (Word, PDF, etc); edit the left navigation menu links; edit page content using the in-browser editor edit-on Pro. University of Bristol IT Services document webcms-2

2 Document information Course files This document and any associated practice files (if needed) are available on the web. To find these, go to and in the Keyword box, type the document code given in brackets at the top of this page. Related documentation Other related documents available from the web: Managing and maintaining a CMS website - Reference guide Editing web content using 'edit-on Pro' Reference guide You may also want to consult the following pages for further information on the University templates and web accessibility best practice: Standards, guidelines and templates for University websites University house style guide This document is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 2.0 UK: England & Wales Licence ( Its original author is the University of Bristol which should be acknowledged as such in any derivative work. Maintaining a University website in the CMS (February 2014) 2014 University of Bristol. All rights reserved.

3 Introduction The University Web Content Management System (CMS) is a sophisticated tool for building, managing and maintaining University template-based websites through a single web-based interface. In the CMS you can easily create and edit web content using 'edit-on Pro', a Word-like web editor built into the CMS interface. Some of the CMS features and benefits include: Easy-to-use interface for non-technical staff Easy content publishing via a Word-like WYSIWYG editor Flexible workflow management to ensure quality control Flexible user rights and roles to control access to relevant areas of the website Easy to enforce template and consistent look and feel Built-in web accessibility and standards compliance Prerequisites Basic computer skills (use of keyboard and mouse, file management, etc), some word processing (eg, MS Word) and web browsing experience. Previous experience of web page creation and HTML is not required to attend this course.

4 Contents Document information Task 1 Getting started... 1 Overview of the folder contents tab... 2 Viewing an item... 3 Task 2 Adding new items... 5 Create folders (Folder items)... 5 Create web pages (Web Page items)... 5 Import MS Office, PDF and other documents (File items)... 7 Import images (Image items)... 7 Optional task... 7 Task 3 Publishing items... 8 As an Editor... 8 As a Reviewer... 8 As a Super Editor (ie Editor/Reviewer)... 9 Task 4 Editing the left navigation menu Create a link to a web page Re-ordering links Task 5 Basic page content editing Create a copy of the home page for re-editing Add content to the page Format the page Save and preview the page Create another page Task 6 Creating links Create links to external websites Create internal links Create links to other file types Create links to bookmarks in the same page Adding a Back to top link Task 7 Creating a table Create a data table from scratch Modify table properties Make your table accessible to all users Applying styling to a data table Task 8 Using images Inserting an image Align images with text Task 9 Bringing it all together... 31

5 Task 1 Getting started Objectives Comments To log into the CMS administration interface of the training website that has been allocated to you. For the purpose of this course we will be using a training site which allows you to see the CMS administration interface from three different points of view: as a site administrator, as a site editor and as a site reviewer (for a description of these different roles, refer to section 1, Introduction to the CMS in Managing and maintaining a CMS website Reference guide). Further information relevant to this section can be found in section 2 of the same document. Make a note of your training site and login details: Allocated training site: oenology Editor username: editor Reviewer username: reviewer Editor/Reviewer username: reved Password: 1.1 Open the site s public view Open your preferred web browser (Internet Explorer or Firefox) and, in the location bar, type in the URL of the training website that has been assigned to you: Replace NN with the number of your training website eg 01, 02, etc). Press the <Enter> key. The URL for a departmental website will look like if it is already live, or wwwdev.bristol.ac.uk/mydepartment if it is in development. 1.2 Accessing the site s administration screens Open a new browser tab by press <Ctrl> + T. In this new tab, type in the following URL in the location bar Again replace NN with the number of your training website. The URL for accessing the administration screens of a departmental website, whether live or in development, will look like cms.bristol.ac.uk/mydepartment. If you get a security certificate error, depending on which browser you use do one of the following: In Internet Explorer, click on Continue to this website (not recommended). In Firefox, click on Or you can add an exception at the bottom of the error message. Then click on the Add Exception button. In the Add Security Exception dialogue box click on the Get Certificate button followed by the Confirm Security Exception button at the bottom. 1

6 In the external login page, enter the editor login details given to you by the tutor (see above) and click on the log in button. When logging into your department CMS site you will be directed to the University s Single Sign-on (SSO) service, allowing you to use your UOB username and password. You should now see the CMS screen showed in Figure 1: folder contents tab navigation tab Figure 1 CMS administration screens default view By default you are taken to the folder contents tab showing the content of the site s root folder (i.e. your Institute of Oenology folder). This site has been partially set up for you, but you will need to create new folders and web pages, and add the content. Overview of the folder contents tab 1.3 The folder contents tab (Figure 2) is the tab you will be using most. It lists all the items contained in the current folder: This is where you add new items and manage (i.e. rename, move, delete and change state) existing ones. 2

7 Add new item drop down Editing buttons List of items showing item Title, Size, Modified date and State. Editing buttons Figure 2 the folder contents tab The list of existing items is shown in the table between the top and bottom rows of editing buttons. Items can be of different types: web page, folder, image, file, style sheet, etc. In your Institute of Oenology site there are currently five items, two web pages and three folders. The Title column shows the item Short Name followed by its Title in brackets. The icon on the left shows the item type (eg web page, folder, style sheet, image, etc). The Size column shows the item size. that folders don t have a size because they are merely containers. The Modified column shows the date and time when the item was last edited. Finally, the State column shows the status of the item in the publishing process (private, pending or published). Viewing an item 1.4 To view an item you simply click on its title in the Title column. Click on index.html (Institute of Oenology) at the top of the folder contents listing. Figure 3 preview of Institute of Oenology homepage in the view tab 3

8 You will notice that two new tabs have appeared (view and view source) and that the active tab view displays a preview of your site's homepage (Figure 3 above). The view source tab shows the XHTML code for the content area of the page. Click on the folder contents tab and then on the research (Research) folder link in the Title column. Notice that this folder also contains an index.html web page (with the title Research). This is because every folder/sub-folder that contains web pages needs to have an index page in it, this is the default page for that folder. Go back to your root folder by clicking the Up one level link or the link to your site in the you are here: breadcrumb trail (Figure 4). Figure 4 CMS navigational elements 4

9 Task 2 Adding new items Objectives Comments To create new folders, web pages, and import files and images to your site. Further information relevant to this section can be found in section 3, Adding new items in Managing and maintaining a CMS website Reference guide. Create folders (Folder items) 2.1 Create a new folder: Warning! Make sure you are in the top level folder (eg oenologynn) In the Add new item drop down list, select Folder and press the add new item button. This opens the Edit Folder screen. In the default FOLDER DETAILS box, type in people in the Short Name field, and a brief description (eg The Institute team) in the Title field. The Short Name is the name of the folder as it will appear in the URL (web address). You should stick to the following rules when naming folders (and web pages): - keep it short and meaningful; - use lower-case only; - do not use spaces, underscore or special characters (you may use the hyphen character to separate words if you wish). The Title is a brief description of the folder and is used by the template in a number of ways (eg as the text of the main page heading and in the breadcrumb trail). You can use a mix of lower and upper cases as well as spaces, but try to keep it relatively short (1 to 5 words). Click save. You are now back in the folder contents tab showing the content of the folder you have just created. Notice that an index page (named index.html) has been automatically created for you inside the new folder. 2.2 Create another folder: First go back to your oenologynn top folder (see Figure 4 above). Add another Folder item as before with the following properties: Short Name : newsletter Create web pages (Web Page items) 2.3 Create a new web page: Title: Institute Newsletter Make sure you are in your root folder and in the Add new item drop down list, select Web Page and press the add new item button. This opens the Edit Web Page screen. At this point the system will start loading up edit-on Pro, the built in editor. Wait until it has finished loading before moving to the next step. You may be prompted twice to accept the security certificates for edit-on Pro. In this case make sure you click on Always. 5

10 In the default WEB PAGE DETAILS box, type in contact.html in the Short Name field and Contact us in the Title field. The same Short Name and Title naming rules apply as for Folder items. In addition, the Short Name for a Web Page must include the extension.html. The Description field is optional. You may use it to enter a brief summary of the content of the page. For example General contact information for the Institute of Oenology at the University of Bristol. The Description text is invisible on the live page. However some search engines (eg Yahoo!) use it for indexing and ranking purposes. Type in a few words (for example Content goes here) in the Body Text field. The system will not let you save the page without some content in the Body Text field. By default, this field displays the WYSIWYG 1 content editor edit-on Pro. Click save. You will be taken to the view tab, showing a preview of the page in private state (Figure 5). Figure 5 the view tab for a web page in private state Notice the extra tabs for this item type: edit tab: use this tab to edit the page content, short name, title and optional description note that when the page is in published state this tab is not available. metadata tab: contains information used to categorise and describe the item, eg creator, publisher and review date (set to 6 months). view source tab: allows you to preview the content area without the header, footer and left navigation menu. redirects tab: allows you to create a link that redirects users from this page s URL to another URL (can be useful when you restructure your site and move content around). 2.4 Create another page: Go to the teaching (Teaching & learning) folder and add another Web Page item with the following properties: Short Name - links.html and Title - Useful links Don t forget to add a few words to the Body Text field before saving. 1 WYSIWYG: What You See Is What You Get 6

11 Import MS Office, PDF and other documents (File items) 2.5 Import a Word file from your PC: Go to the newsletter folder. In the Add new item drop down list, select File and press the add new item button. On the next screen, click on the Browse button and navigate to Computer > your username (O:)\UOB Training Materials\WWW\CMS. Select the file ioonsltr03.pdf, and click Open the path to this document will appear in the File field. In the Short Name field, enter the name of the document, ie ioo-nsltr03.pdf and in the Title field, enter a brief description of the file, such as Autumn 04 newsletter. At this point you could change the document Short Name (to get rid of spaces, upper case and special characters). You must also include a correct extension such as.doc,.pdf, etc. Click save. Import images (Image items) 2.6 Add an image: Before uploading images for your website, you must ensure that they have been optimised for the web. As a rule of thumb images a maximum width of around 600px should be sufficient, as well as a file size of up to 250 kilobytes. A convenient (and free) online tool for resizing images is Web Photo Resizer ( Go to the images folder. In the Add new item drop down list, select Image. On the next screen, click on the Browse button, select the file building.jpg (also in O:\UOB Training Materials\WWW\CMS), and click Open the path to this image will appear in the Image field. In the Short Name field, enter the name of the image, ie building.jpg and in the Title field, enter a brief description, such as Front view of Institute of Oenology building. At this point you could change the image Short Name (to get rid of spaces, upper case and special characters). You must also include a correct extension such as.jpg or.gif). Click save. Optional task Only do this task if you have time! 2.7 Add other items: In your root folder, add a new folder (e.g. with the short name consultancy and the title Consultancy services). Add other items (e.g. web page, folders) and try to move them to a different place and delete them. 7

12 Task 3 Publishing items Objectives Comments To move site items from private to published state. You will experience the publishing process from different user roles. As an Editor 3.1 Submit a Web Page item for review: Make sure you are in the folder contents tab view of your top level Oenology folder. In the item listing table, select the page contact.html by clicking on the corresponding checkbox on the left. Click on the change state button this takes you to the Publishing process screen. In the PUBLISHING DETAILS box, enter a brief comment (for example Page updated as discussed) in the Comments field and under Change state, select Submit. Comments are included in the notification sent to the Reviewer and/or Site Administrator, and are added to an item s publishing history. Click go. You are automatically returned to the folder contents tab where you can see the item now in pending state, waiting to be reviewed (Figure 6). Figure 6 Web page in pending state As an editor, Folder items are the only items you can publish directly. The reason is that folders are merely containers for other items. As such, they do not hold content themselves and therefore, even when published, are invisible on the live site. As a Reviewer 3.2 Log in again as a Reviewer: Click on the log out link in the blue utilities bar at the top. Re-type the URL in your browser Address bar (or use the drop down arrow on the right to access it). This time log in with the Reviewer details (eg User Name : reviewernn and the same password). You are now logged in with reviewer role and you should see a Review List on the right, showing the item(s) submitted for review (Figure 7): Figure 7 items in pending state, waiting to be reviewed 8

13 3.3 Options available to a Reviewer: In the Review List box, click on Contact us. This takes you to the item s view tab. In the case of a web page, you can read through the page content and decide if it can be published or not. As a reviewer you have three options (Figure 8): Click here to publish or reject. Click here to edit the item. Figure 8 review options Publish the item as it is. Reject the item. Edit the item and publish it Reviewers can only edit items that have been submitted to them for review. The advanced option allows you to add a comment which will be added to the item s publishing history. For example you may use it to explain why the item has been rejected. 3.4 Publish the item using the advanced option: In the status: pending drop down (see Figure 8 above), select advanced. At the bottom of the Publishing process screen, notice the publishing history with the comment you included when submitting the page for review (Figure 9): Figure 9 item publishing history including comments Leave the Comments field empty this time and under Change State, select Publish. Click go the page has now moved to published state. As a Super Editor (ie Editor/Reviewer) 3.5 Log in as an Editor/Reviewer: Click on the log out link in the blue utilities bar at the top. Re-type the URL in your browser Address bar (or use the drop down arrow on the right to access it). This time log in with the Editor/Reviewer details (eg User Name : revednn and the same password). You will see the same tabs as when you first logged in as a reviewer only. From now on you will be using this profile, which will enable you to publish directly without going through the review process. 9

14 3.6 Publish folders and their content: Make sure you are in the folder contents tab view of your top level Oenology folder. In the item listing table, select the newsletter and people folder items (both currently in private state) by clicking on the corresponding checkboxes on the left (Figure 10). Figure 10 selecting items Click on one of the change state buttons, select the Include subfolders option and under Change state select publish. Click go this may take a while, so be patient! As an Editor/Reviewer you do not have permission to delete published items directly. This is why after you have published the two folders above the cut and delete buttons have disappeared. However you can retract an item and then delete it. Go to the site s public view (wwwtrain.bristol.ac.uk/oenologynn) and try the links. 10

15 Task 4 Editing the left navigation menu Objectives Comments To group, create and order links in the left navigation menu bar. Further information relevant to this section can be found in section 6, Editing the navigation menus in Managing and maintaining a CMS website Reference guide Create a link to a web page 4.1 To add a link to your about.html page: First make sure that you are in your site s top level folder (ie oenologynn). Click on the navigation tab to access the navigation menus (Figure 11). Figure 11 navigation tab view By default you see the left navigation menu links. In the Add new item drop down list, select Navigation Link and press the add new item button. This takes you to the Edit Navigation Link tab view. Fill in the NAVIGATION LINK DETAILS fields as follows: make sure the Navigation type option is set to left this sets the location of the link, other options are top and bottom. In the Short Name field type about-lnk this field identifies the link in the CMS. In the Link text field, type About the Institute this is the text that will appear on the page. In the URL field, type /oenologynn/about.html links should be entered using the root relative path, ie starting from your department top folder preceded by a forward slash. The Title field is optional, you could use it for a brief description of the link text if you think it is ambiguous or requires further information: eg What we do, who we are. 11

16 Click save. This takes you to the view tab showing the link details (Figure 12). All you need to do now is to publish it. Click here to publish the link. Figure 12 view tab of the newly created link 4.2 Publish the link: Click on the drop down arrow next to status: private (see Figure 12 above) and select publish. 4.3 Preview your change: Switch to the browser tab with the live site and refresh the page you may have to clear the browser cache to see the change: In Internet Explorer, press the <Ctrl> key and click the Refresh icon (or press <F5>) at the same time. In Firefox, press the <Shift> key and click the Reload icon (or press <F5>) at the same time. Caching is a feature that allows web browsers to temporarily store visited pages and their components (e.g. images, style sheets, etc) locally (i.e. normally on your hard drive). This has the merit of making browsing the web faster, but it can have the undesired and often confusing result that recent changes seem to have been ignored. 4.4 Create another link to a page in a folder: Go to the teaching folder and select the navigation tab. Notice that the Add new item drop down list has been replaced by a single button labelled add new navigation link. (Figure 13). Figure 13 - add new navigation link The reason is that the left navigation is set to expand and a navigation link is the only type of link that can be added to a sub-menu. Click on the add new navigation link button. 12

17 This takes you to the Edit Navigation Link tab view. Fill in the NAVIGATION LINK DETAILS fields as follows: make sure the Navigation type option is set to left this sets the location of the link, other options are top and bottom. In the Short Name field type links-lnk this field identifies the link in the CMS. In the Link text field, type Useful links this is the text that will appear on the page. In the URL field, type /oenologynn/teaching/links.html. Leave the optional Title field empty on this occasion. Click save and publish the link using the status drop down arrow in the top right. To preview the page, click on the folder contents tab and then the index.html (Teaching & learning) link. The link now shows as a sub-link of the Teaching & learning in the left navigation menu (Figure 14). Figure 14 sub-link in the left navigation menu Re-ordering links At the moment your left navigation menu links appear in the order that they were created (Figure 15). Figure 15 left navigation menu in navigation tab view Using the up and down arrows in the Order column, re-order your links as you wish, for example as in Figure 16: 13

18 Figure 16 re-ordered left navigation links Preview your changes if you want, as described in task

19 Task 5 Basic page content editing Objectives Comments To add content to an existing page. Further information relevant to this section can be found in section 2 'Getting started' of Editing web content using 'edit-on Pro' Reference guide (editonpro-r1). Warning! As a University web publisher it is your responsibility to ensure that the information you provide on your website is up-to-date, professional and accessible. Also, it must comply with current Data Protection, Freedom of Information and copyright legislation, and with the University's accessibility policy. For further information on your responsibilities as a web publisher, please refer to Open a Word document: Open the document homepage.doc which you will find in your username (O:)\UOB Training Materials\WWW\CMS. Click on the Minimize icon (1) in the top right corner to minimise Word in the task bar for now. 1 Create a copy of the home page for re-editing 5.2 Open the page you want to edit: Make sure you are in the top level folder (ie oenologynn). Go to the folder contents tab and click on your home page link (ie index.html (Institute of Oenology)) in the Title column of the item listing table. This will display the page in the view tab. Notice that the edit tab is hidden. Normally you would expect to see it between the view and metadata tabs, but because the page is in published state you cannot edit it without first making a copy of it that can be edited safely in private state. 5.3 Create a private copy of the page: Click on the drop down arrow next to status: published and select re-edit (Figure 17). Figure 17 creating a copy of a published page You are now seeing a copy of the published page in private state, in the edit tab. If prompted to accept the licence conditions for edit-on Pro', select Always and accept the certificate (Run or OK buttons). Repeat when prompted again if necessary. You should now see edit-on Pro embedded within the Body text section: 15

20 Window Mode Figure 18 edit-on Pro embedded within the edit screen Click on the Window Mode icon (2) in the toolbar to detach edit on-pro from the browser window (see Figure 18 above), and click on the Maximize icon (3) in the top right corner to maximise the newly opened standalone edit on-pro window to the full size of your monitor. Add content to the page 5.4 Copy and paste content from a Word document: Maximise the Word document that you opened earlier (homepage.doc), select the content and copy it. Bring back edit-on Pro to the fore, delete the text that is already there (Content goes here) and paste using ONE of the following methods: click the toolbar icon (4), OR use the keyboard shortcut CTRL + V, OR go to Edit / Paste Special In all cases the Paste Special dialogue box (Figure 19) will pop up:

21 Figure 19 Paste Special dialogue box Select Pure HTML, if it's not already selected (it should be the default), and click OK. You should always use the Paste as Pure HTML option when copying and pasting from a Word (or other) document. This ensures that the source XHTML code generated is stripped of all unnecessary coding and therefore more compliant with web standards and accessibility requirements. Click on the Show All icon (5) to view the formatting marks. This is useful to identify and remove unnecessary elements (such as empty paragraphs). 5.5 Add some content of your own: Type a few lines of your own at the bottom of the page. Format the page 5.6 Apply formatting to text: Select the text The Institute of Oenology, at the beginning of the first paragraph and make it bold using the Bold icon. Select the text What we do and make it a Heading 2 using the drop down Paragraph Format list. Select the paragraphs Vineyard Management, Wine Tourism and Marketing, Wine Chemistry and Microbiology and Grape Genetics, and make them into a bullet list using the Unordered List icon (6). Select a phrase of your choice and make it italics using the Italics icon. 5.7 Add a horizontal rule: Place the cursor at the end of the second paragraph (after Find out more about us. ) and click on the Insert Horizontal Line icon (7). Right-click on the horizontal line and select Hard Ruler Properties in the context menu. In the Horizontal Line Properties dialogue box, change the properties as you wish (Figure 20)

22 Size sets the thickness of the line By default a horizontal line is centred this option is only relevant if the width is less than 100% Figure 20 Horizontal Line Properties dialogue box By default a horizontal line is styled in 3D - check this option if you want a solid line Save and preview the page 5.8 Save and publish the page: Click on the Window Mode icon to minimise edit-on Pro. Click the save button at the bottom of the edit screen. This takes you to the view tab where you can preview the page with the content you have just added. You can also click on the path link to see the page in a separate window. Notice that the page is in private state. Go to the folder contents tab and check the listing table. You should see that the page appears as published but that there is a comment next to the title indicating that a draft copy is being edited in private state (Figure 21). Figure 21 item listing showing published web page in draft private state Click on index.html (Institute of Oenology) to go back to the page view tab. Click on the drop down arrow next to status: private and select publish. The updated page has now replaced the previous version on the live site. A new tab called revert has appeared between the view source and redirects tabs; this is where old versions of a page are kept. Create another page Open the Word document about.doc (in your username (O:)\UOB Training Materials\WWW\CMS) and select and copy its content. In the CMS, go to the page about.html (About the Institute) and create a private copy as described in task 5.3 above. On the edit screen, scroll down to the Body text section, expand edit-on Pro and paste the selection as described in task 5.4 above. Notice that the section headings are already formatted as Heading 2; this is because the Word document was initially formatted using styles. 18

23 Tidy up the page by removing the extra spaces in the Research section bullet list and deleting empty paragraphs if necessary. Select the following words, located at the beginning of the page, and make them into a bullet (unordered) list: Background Mission Vision Functions Research Teaching and Learning Consultancy service Now select the last 3 list items (Research, Teaching and Learning and Consultancy service) and in the Paragraph menu select Increase (List) Indent to create a sublist of Functions. The list should now look as in Figure 22. Figure 22 nested list in about.html page Save and preview the page do not publish it yet. When writing content for an official University website, it is recommended that you adhere to the University house style guide ( in order to ensure greater consistency of writing style throughout the University web. 19

24 Task 6 Creating links Objectives Comments To create internal and external links, and links to bookmarks within a page. Further information relevant to this section can be found in section 4 'Creating links' of 'Editing web content using 'edit-on Pro' Reference guide' (editonpro-r1). Create links to external websites 6.1 Create links to other sites: In the CMS, go to the teaching folder and then the page links.html. Click on the edit tab (if you cannot see it, create a private copy of the page as described in task 5.3) and detach edit-on Pro from the browser using the Window Mode icon. Make sure it is maximised to occupy the whole screen, and that the formatting marks are showing (click the Show All icon if necessary). Create a bullet list with the following list items: Viticulture uk French Wine Guide Select Viticulture uk and click on the Insert Hyperlink icon (8) to open the Insert Hyperlink dialogue box (Figure 23). 8 Figure 23 inserting an external link In the Href field type in the URL after Leave the Target and Insert Bookmark fields blank and click OK. You could select New Window from the Target options if you wanted the site to open in a new browser window. In the same way, create the link to French Wine Guide (URL: Save and publish the page, and view it on the live site to try the links. 20

25 Create internal links 6.2 Link to other pages within your site: Go to your top level oenologynn folder and create a private draft (clue: re-edit) of the homepage index.html to edit it in edit-on Pro. Make sure it is maximised to occupy the whole screen, and that the formatting marks are showing (click the Show All icon). Select the word research in the second paragraph and click on the Insert Hyperlink icon. In the Href field, delete and type in the root relative path to the research homepage, eg /oenologynn/research/ Leave the Target and Insert Bookmark field blank and click OK (Figure 24). Figure 24 inserting an internal link In the same paragraph, create links to the teaching homepages, and to the about.html page (make the whole phrase Find out more about us the link to the latter). Save and publish the page, and view it on the live site to try the links. Create links to other file types 6.3 Create a link to a PDF document: Go to the newsletter folder and create a private draft of the page index.html (Institute newsletter) to edit it. Maximise edit-on Pro if you want Type in the following text: Autumn 2004 Newsletter (PDF, 482Kb) and select Standard from the Paragraph Format drop down. By default the formatting of the first block of text that you type is set to none, so you need to manually format it. Select the text Autumn 2004 newsletter (PDF, 482Kb) and click on the Insert Hyperlink icon. In the Href field, type the path to the Word file you imported earlier over eg /oenologynn/newsletter/ioo-nsltr03.pdf. Leave the Target and Bookmark field blank and click OK (Figure 25). 21

26 Figure 25 inserting a link to a Word file Save and publish the page, and view it on the live site to try the link. It is good practice when there are links to PDF documents on a web page to add a link to the Adobe Acrobat Reader download. 6.4 Add a link to the Adobe Acrobat Reader download: Select the Source View tab (next to the WYSIWYG tab) at the bottom left of the edit-on Pro window. Unfortunately the CMS template code for the Adobe Acrobat Reader download link (and similar snippets of code) has to be added in the XHTML Source View manually. Place the cursor right at the top of the page and press <Enter> to create a blank line above the XHTML code. Type in the following line of code to insert the Adobe Acrobat Reader include file: <include url="/includes/adobe.html" /> An include file contains a snippet of code that can be inserted into a page. Create links to bookmarks in the same page 6.5 Create the bookmarks: Open the draft page about.html that you edited earlier in the edit tab and maximise edit-on Pro. In edit-on Pro place the cursor just before the section heading named Background (ie not Background in the bullet list). Click on the Insert Bookmark icon (9) on the toolbar. In the Bookmark Name field, type in background (Figure 26). 9 Figure 26 insert bookmark dialogue box 22

27 Click OK and notice the blue flag indicating the position of the bookmark. Create bookmarks for the other section headings in the page, naming them: mission, vision, functions, research, teaching and consultancy respectively. 6.6 Create the links to the bookmarks: Select Background in the bullet list and click on the Insert Hyperlink icon. In the Insert Bookmark field, click on the drop down arrow and select background from the list (Figure 27). Figure 27 - create a link to a bookmark Click OK. Create links from the other list items to the corresponding section headings in the page. Save and publish the page, and view it on the live site to try the links. Adding a Back to top link Back to top links are useful on long pages, because they enable users to go back to the top of the page in one click instead of having to scroll all the way up. Pressing the <Home> key on the keyboard provides another quick way to go back to the top of a page, but not many users know this. 6.7 Create a Back to top link at the end of the Background section: Place the mouse cursor just before the Mission heading (not in the bullet list table of content at the top). In the bottom left corner of edit-on Pro, select the Source View tab (Figure 28): Figure 28 Accessing the page Source View In the XHTML code, move the cursor just before the <h2> tag and press the <Enter> key to create a blank line between the last paragraph of the Background section and the Mission heading (Figure 29): 23

28 Figure 29 creating a blank line in the XHTML Source View Type in the following line of code to insert the Back to top include file: 6.8 Add other Back to top links: <include url="/includes/backtotop.html" /> While in the Source View, look for the other level 2 headings (eg <h2>vision</h2> in the code and insert the previous line of code just above them. Also add the same line of code right at the bottom of the page, below the last paragraph. Go back to the WYSIWYG view, and you will see the include place mark (Figure 30): Figure 30 include place mark in the WYSIWYG view Save and publish the page, and preview it on the live site (ie wwwtrain.bris.ac.uk/oenologynn) notice that the Back to top links have been inserted and styled (Figure 31): Figure 31 Back to top link on the live page 24

29 Task 7 Creating a table Objectives Comments To create a table containing data. Further information relevant to this section can be found in section 4 'Creating a data table' of 'Editing web content using 'edit-on Pro' Reference guide' (editonpror1). Create a data table from scratch Edit-on Pro provides two methods for creating data tables that can be accessed through icons in the Toolbar: the Insert Table (10) dialogues box and the Table Wizard (11). 7.1 Create a 6 columns by 5 rows table: In the CMS, navigate to the research folder and create a draft copy of index.html if there is not already one. In Edit-on Pro, click on the Table Wizard icon and select the top left cell by placing the mouse cursor on it. Then, without clicking, drag the cursor diagonally towards the bottom right until you ve selected 5 rows by 6 columns. Click on the final cell to create the table (Figure 32) Figure 32 Creating a table using the Table Wizard If you use the Insert Table Dialogue Box instead, you will be prompted to enter the number of rows and columns you want, as well as other parameters (e.g. width, etc). 7.2 Enter column headers and data in the table: Fill in your table with the following information: Alsace Bordeaux Burgundy Rhone

30 Modify table properties 7.3 After creating your table, you may want to go back to change its properties: Right-click anywhere in the table and select Table / Table Properties from the context menu. In the Table Properties dialogue box (Figure 33), experiment with the properties and click OK when finished. Set the overall Table Width using a relative (%) rather than absolute (pixel) unit. Set the Border Width to 0 to hide it or 1 for a discreet border. By default a table is aligned left. Set Cell Padding to 4 and Cell Spacing to 0 to make the table more readable. The default Cells vertical alignment is Center It is a good idea to add a caption to a table. Table Background/Border Colors are best set in a style sheet. Figure 33 editing Standard Table Properties In the Table Caption property, enter French vintages By default the Table Caption will appear above the table and centred. Feel free to change this using the Table Caption Alignment property. Make your table accessible to all users Making websites accessible to disabled users is a legal requirement. Data tables present particular challenges to some disabled people, particularly to blind people using a screen reader. You will have noticed that the top row and the first column on the left define the data in the other cells. For example the table tells us that 2007 vintage for Burgundy wines was 6 (out of 10). This information would be difficult to extract for a screen reader user, unless the table contained some extra information in the background. Thankfully, Edit-on Pro makes it reasonably easy to make data tables accessible. 7.4 Add a table summary and designate row and column headers: Right-click anywhere in the table and select Table Properties from the context menu. Then select the Table Accessibility tab (Figure 34). 26

31 Figure 34 Table Properties, Table Accessibility options In the Table Accessibility options, enter a brief but accurate description of the table in the Summary box, for example French vintages marks out of 10 from 2006 to In the Designate row and column headers options, select 1 both for Rows and Columns this means the cells in the first row and first column will be formatted as table headers. Under Enter a unique ID for each header cell, type y2010, y2009, y2008, y2007, y2006, (these have to start with a letter, hence the y before the year) in the header row and Alsace, Bordeaux, Burgundy and Rhone in the header column, leaving the top left cell empty. Click OK when done. 7.5 Group rows in table head and table body: Right-click anywhere in the top row containing the header cells, and select Row Properties. In the Row Properties dialogue box (Figure 35), make sure the Row Group check box is selected and from the drop down list select thead. Figure 35 grouping rows in the Row Properties 27

32 Right-click anywhere in the remaining rows, select Row Properties again and this time choose tbody from the Row Group drop down list. If your table had a footer, you would need to repeat these steps but choose tfoot from the list. Click on the Source View tab in the bottom left of Edit-on Pro and examine the HTML code for a couple of minutes. Can you see the elements and attributes you have just added? Save your changes and preview the page in the view tab. Applying styling to a data table The table as it is does not look very pretty, so we are going to apply a style class which has been defined in the oenology.css stylesheet, located in the root folder (you can have a look at it, but as an editor/reviewer you cannot edit it). Go back to edit mode (i.e. select the edit tab at the top) and maximise the editor if you want. Right-click anywhere in the table and select Table Properties from the context menu. Then select the Advanced tab (Figure 36). Figure 36 linking to a style class in the Advanced Table Properties In the Attributes column, locate the class attribute and type data-table as the Value. Click OK, save your changes and publish the page. This default table styling is available on the production CMS, so you can use it on the website(s) you maintain. 28

33 Task 8 Using images Objectives Comments To insert and position images in your pages. Further information relevant to this section can be found in section 5 'Inserting an image' of 'Editing web content using 'edit-on Pro' Reference guide' (editonpro-1r). Inserting an image 8.1 Insert an image in your home page: Create a draft private copy of your homepage (index.html under oenologynn) so you can edit it. In edit-on Pro, place the cursor at the beginning of the first paragraph and click on the Insert Image icon (11). In the Source field, enter the root relative path to the image building.jpg for example /oenologynn/images/building.jpg It is not currently possible to insert an image by browsing the CMS file system. 11 In the ALT-String field, type in some brief description of the image, such as Front view of Institute of Oenology building. In the Size fields, enter 200 in the first box (width) and 163 in the second box (height) as in Figure 37. Figure 37 inserting an image and setting its properties To find the size of an image click on the image name in the images folder, then click on Edit under Options. Then right-click on the image and select Properties from the context menu. The width and height of the image are listed under Dimensions in the Properties pop-up box. Click OK. Save the page and preview it in the view tab. Do not publish it yet. Align images with text 8.2 Select the image you want to position: 29

34 Click on the image to select it. 8.3 Apply one of the predefined image styles: In the style drop down box (Figure 38), select one of the four predefined image styles: Figure 38 applying an image positioning style These four styles allow you to position the image to the left or right, with the subsequent text wrapping around it. You can also choose to have an enhancing silver border around the image. Style.image-left-border.image-left-noborder.image-right-border.image-right-noborder Click OK. Description Save and publish the page, and view it on the live site. Floats the image to the left and adds a border. Floats the image to the left without a border. Floats the image to the right and adds a border. Floats the image to the right without a border. 30

35 Task 9 Bringing it all together Objectives Comments To consolidate what you have learnt in the previous tasks. This is a review exercise. Try to use as much of what you have learnt with a particular focus on aspects that need more practice. 9.1 Carry on adding pages to the site as you see fit using the features learnt in the preceding tasks. You can find some dummy text on the following website: 31