Step-by-Step Guide to Editing TMS

The preferred tool for creating and publishing content on the University's websites, the Template Management System (TMS), has been developed to complement the Reputation, Brand & Visual Identity Guide while ensuring our websites are more accessible, functional, easily maintained and consistently branded across the Faculties and Divisions.

Contents

Please click on one of the links below to jump directly to the information you require.

About TMS
Editing Access and Log In
Editing: Pasting Text From Other Documents | Headings | Linking | Tables
Saving Changes
File Management
Deleting Pages

About TMS

The Template Management System, developed by the University of Adelaide's Online Media team, provides a means of editing the content of a website separately from the design of the site, allowing you to maintain your website(s) easily. The design of the website, or the template, can only be modified by the Online Media team.

The TinyMCE online editing tool is built into the TMS, allowing changes to be made directly to a webpage on the development server, webdev. When you are satisfied with your changes, you can then upload the amended page to the production server, making the new version of the page live on the website and therefore accessible to users of the Internet.

Websites using the TMS are made up of files with the extension .html. These .html files contain the content of each webpage. Therefore, to change the contents of a page, you will need to edit the .html file that contains the relevant page content. This can be done from any computer that is connected to both the Internet and the University network, as long as you have editing access.

Note: you can access your development website from home or elsewhere outside of the University's campuses by connecting to the University network via Virtual Private Network (VPN).

Editing Access and Log In

To be able to make changes to your website, you must have been granted editing access by the Online Media team and must be accessing the development server from within the University's firewall (security that blocks unauthorised access). This means that your computer must be located either within the University network (i.e. on campus) or you must be using your staff/student dialin or VPN.

You can find your website on the development server by using WebAccess:

• Log In to WebAccess using your university ID and password
• If you only have editing access to one website, the site should appear on screen. If you have access to two or more websites, search for, and click on, your website name.
  Please note: if you are searching for a sub-site, you will be taken to another page displaying all sub-sites within the main site. Click once on the relevant sub-site name.
• On the page displaying your website information, click on the first URL in the Development section
• The website that you want to edit should now appear on your screen.

When browsing through your website on the development server, two boxes will be displayed at the bottom of the page that show functions that may be performed on pages throughout the site. Initially the top display box will only allow the option to login.

Click on the log in link and enter your university ID and password to gain access to the maintenance functions.

The top blue display box will then change to show the allowed options including: edit, upload, access and files.

Editing Pages

Browse through the site to find the page that needs changing and then click on the edit link in the maintenance options box.

The page will be redisplayed with the editable content in a smaller scrolling box. Below the content area is a toolbar, showing icons similar to those in Microsoft Word. These icons enable you to make a number of changes to the content.

Making changes is similar to editing a document in Word. The text content of the pages can be changed by using the icons to bold and italicise text, align your content to the left (as standard) and use numbered or bulleted lists if required. The page content can also be enhanced by creating links, using tables or inserting images where appropriate.

Pasting Text From Other Documents

Text should not be copied directly from a Word document into a webpage.

Pasting text from Word or using the Word option to "Save a Word file as .html" both cause Word's formatting to be transferred with the text and some special characters may not be translated correctly. Therefore, neither of these options should be used.

Instead, please use one of the following two options to copy text from a Word document:

1. Copy the text from Word, and then go back to your editable webpage screen. Place the cursor where you want to insert your text and then click on the 'Paste as Plain Text' icon in the editing toolbar. Then paste the text into the pop-up window and click Insert; or
2. Copy the text from Word and then paste it into a Notepad document. Notepad can usually be found within the Accessories folder on your computer. You are then able to copy the Notepad text and paste it into the edit window of your webpage.

Please note: tables created in Word cannot be pasted in to your webpage whether using the above options or not.

Headings

The best way of formatting text to ensure your page is accessible and looks professional and consistent with other University of Adelaide webpages is to apply a heading format. Heading formats are applied to the whole of the paragraph where your cursor is located. To set a heading format, select an option from the drop-down list circled below.

The basic format applied to the majority of the text is the paragraph format. The heading options available are Heading 1 through to Heading 6. These have predefined styles set for the templates. The top heading for the page should be defined as a Heading 1 and this should be the only text using the Heading 1 format. All other headings in the page should use Heading 2 through Heading 6, preferably in order of importance, for accessibility.

Linking

There are several types of links which can be entered on a webpage:

1. external links: from one page to another external site;
2. internal links: from one page to another within your current site;
3. anchor links: from one point on the page to another pre-defined point within a page;
4. email links: to allow the user to send an email to a particular recipient; and
5. file/document links: to allow the user to download/access a particular document.

External Links

It is possible to create an external link from one page to another by following the steps below:

• Open a new browser window and go to the external page you want to link to
• Copy the whole URL from the address bar at the top of the screen (to make sure you are linking to the correct address) e.g. http://www.adelaide.edu.au/
• Go back to your webpage editing screen and highlight the text to be used as a link
• Then click on the Insert/edit link icon (see below)

• A window will be displayed allowing you to enter the link URL that you have just copied.

• Once you have entered the link URL into the field, complete the link by clicking the Insert button.

Internal Links

To create an internal link from one page to another within your current site, it is recommended that you only use part of the URL that specifies the path of the file within the site. The part of the URL you use depends on whether the site is located in the main University site or within a virtual host. The options are detailed in the table below:

A similar process to that for creating an external link can be used:

• Open a separate browser window and go to the page you want to link to
• Copy the whole URL from the browser address at the top of the screen
• Go back to your webpage editing screen and highlight the text to be used as a link
• Then click on the Insert/edit link icon (see below)

• Paste it into the Link URL field

• Delete the first part of the URL specifying the base/external part of the site i.e. everything before and including the "edu.au".
  Note: your link must begin with the "/".
• Complete the link by clicking the Insert button.

Anchor Links

Anchor links are links from one point of the page to another pre-defined point within a page. These are especially useful if you have a lot of content on a page, as the anchor link will allow the user to jump to the relevant content rather than having to scroll through.

To create an anchor link:

• Place the cursor on the screen next to the content you want users to jump to
• Then click on the anchor icon in the editing toolbar

• Enter a name in the anchor field. The anchor name should ideally be one word and contain only lower case letters and numbers.
• Then click the Insert button. You should now see an anchor appear on the editing screen where your cursor was located (this will not appear on the live version of your web site).
• Next you need to create a link on text at the top of the page.
• Highlight the text that will be the link
• Click the link icon and in the link URL field enter a # symbol and the name that you gave to the anchor e.g. to link to an anchor you called "heading1" the link field should contain #heading1.
• Click Insert to activate the link

Notes:

1. To link to an anchor in another page, put the URL of the page in the link field followed by a # and the name of the anchor e.g. http://www.adelaide.edu.au/#heading1
2. You can only create anchor links in your own pages or if you know the anchor in a page on another site exists.

Email Links

It is possible to create a link that will open an email window when it is clicked. To create an email link, follow the steps below:

• Search for the name of the person you want to create the email link to using the Phone Directory
• Copy the email address listed for that person
• Go back to your webpage editing screen and highlight the text to be used as a link
• Then click on the Insert/edit link icon (see below)

• In the link URL field type in mailto: and then paste in the email address after that. For example, if the email address is 'staff.member@adelaide.edu.au' then the link URL field should contain the link mailto:staff.member@adelaide.edu.au
• Once again, click the Insert button to activate the email link.

File/Document Links

To create a link to a file, such as a PDF or Word document, please follow the steps below:

Step 1: Make the file available on the development server

• Click once on the files option listed in the top blue editing box (see below)

• Click on the relevant folders within the files view to navigate to the page the document link will appear on
• When you are in the correct page (e.g. Index of webguide/tech/tms) click on the Browse button under the 'Upload a file to the current directory' section. This will allow you to search for the relevant document on your hard drive. Note: please ensure your files are named correctly by reading the Naming Files page.

• Select the document and click open. This will display your chosen document in the field next to the browse button. Then click Submit.
• Your document/file will then appear in the alphabetical list with the rest of the files. Then right click on the name of the document/file and click Copy Shortcut.

Step 2: Create the link to the file

• In your development site, go to the page that is to contain the link (by navigating through the file list, navigation menu or breadcrumb trail) and click Edit in the toolbox to open the page for editing.
• Highlight the text that is to contain the link and click the Insert/edit link icon (chain). In the link URL field, paste in the path of the document you are linking to and delete all of the link text before and including 'edu.au'. This should leave you with the link e.g. /website/folder/file.pdf. Then click Insert.
• Preview the page and save changes BEFORE checking the link or your changes will be lost.

Note: When creating a document link, TMS previously indicated that the link was working by automatically displaying the document type and size in brackets after the link e.g. This is a test link (pdf 17kb).

Now, to help make the University's webpages look neater, the document type and size are automatically inserted into the link title so is shown when you hover the cursor over your document link and not on the page itself (see below):

Step 3: Check the page

• Once the changes to the page have been saved, check that the link to the file is working correctly.

Step 4: Upload both the file and the page

• Please remember to upload both the file/document you are linking to AND the page that your file/document link is displayed on. For details on how to upload, please read the instructions on how to upload.

Tables

Tables are recommended for presenting tabular information within webpages, and TMS has a number of inbuilt features allowing tables to be simply formatted and maintained.

• To create a new table, move the cursor to the point in the page where you want the table to be displayed and click on the icon to Insert a new table (see below).

• A pop-up window will then be displayed that allows the table parameters to be specified (i.e. number of columns and rows).

• Table widths should either be left blank to allow the browser displaying the page to determine the ideal width for displaying the tabular information, or if necessary, a percentage with can be specified to enable tables to be displayed in a consistent style, e.g. a width of 80% will force the table to be displayed across 80% of the window width. It is not recommended that exact pixel widths be specified as these are not likely to display well for all end users.
• The remaining parameters are determined by selecting one of the standard University table styles, "light" or "split" from the class drop-down field. Then click Insert to add the table shell to the page.
• Table cells and rows can then be formatted by placing the cursor in the appropriate table cell and then clicking on the table cell properties icon. The cell type can be specified as either a data cell or a header cell, and the formatting applied to the cell can be changed by selecting the "alt" option from the class drop-down field. The parameters entered can then be applied to the current cell, row or the whole table by choosing an option from the bottom drop-down list, located just above the Insert button.
• When you have finished choosing your format, click Insert and the table will appear on the page.
• By using the other table icons, you can also add or delete rows or columns and cells can be merged and split as required.

Note: Clicking on an existing table will enable options for updating the table to become active. The table style or width can then be changed by clicking the table icon and changing these values.

Saving Changes or Exiting From the Edit Window

When a page is being edited, it is locked on the server so that no other users can make changes at the same time. At the bottom of the editing page are two buttons which give you the option to Preview (and then save your changes) or Cancel. To unlock the page when you have finished editing or if you decide you no longer want to edit, it is important to exit from the page using one of these options.

Save Changes

• Click the Preview button at the bottom of the editing page
• Check the displayed preview page to ensure you are happy with the changes, but DO NOT check links at this time as the page is not yet saved. The following options are displayed at the top of the preview page
  
  

• Click Save Changes: if you want to accept the changes you have made to the page and exit
• Click Edit: if you want to return to the edit window and make more changes
• Click Cancel: if you want to lose your changes to the page and exit

• If you decide to Save Changes, this means that the page is saved on webdev, the development server. You can then:
  
  
  • Check all links in the page to ensure they are working correctly.
  • Upload it to the live website if you are happy with the page and are ready to put it live.

Cancel or Discard Changes

Clicking the Cancel button will exit you from the editing window and any changes will be lost. This is the option to use if you accidentally click edit on the wrong page or if you want to discard changes you have made.

Note: Please do not exit from the editing page by closing the browser window or using the back button.

File Management

Clicking on the files link in the options box will display the files for the current folder. These files represent either web pages [.html], documents [.pdf, .doc] or images [.gif, .jpg].

Sub-folders within the currently displayed folder are also shown in the file list (e.g. the secure folder shown in the screenshot below).

Clicking once on a folder will cause the contents of that folder to be displayed. To move up a folder level, click on the Parent Directory folder icon at the top of the files list.

Note: Keep an eye on the text at the top of the screen e.g. Index of webguide/tech/tms/, as this indicates where you have navigated to e.g. in this case, the tms folder within the tech folder on the webguide website.

By using these options, it is possible to navigate through all folders of the site and hence gain access to all files within the site.

Deleting Pages

When you are logged-in and viewing a webpage in webdev, one of the options shown in the top blue editing box at the bottom of the page will be a link to delete (see below).

Clicking on this link will cause a confirmation message to be displayed asking if you are sure you want to delete the file/page. Clicking Delete will delete the current page. Clicking Cancel will take you back to the page view.

Alternatively, you can click on the files link to display a full list of all files in the current folder. To the right of each of the filenames are a number of options, including delete.

Again, clicking the delete option will display the confirmation message asking if you are sure you want to delete the file/page. If you confirm the delete operation by clicking Delete, the current file will be deleted. Clicking Cancel will take you back to the files view.

Please note: if you acidentally delete a page, contact the Online Media team as soon as possible. The team is able to recover any pages that have been deleted within a week of deletion.