Corporate Web CMS Quick Guide

Transcription

1 Corporate Web CMS Quick Guide August Version 1 The purpose of this document is to assist web authors in everyday tasks using the CMS. It can also be used as a training guide to ensure key tasks are covered. For further queries, please Web Enquiry.

2 Remember: Plan ahead, organise your content (images and text) before commencing and familiarise yourself with the process Page 1

3 Contents CMS Tips... 3 Content... 3 Images... 3 Use features strategically... 3 Navigation/site architecture... 3 Use formatting styles and features correctly... 4 Styling... 4 Filing... 4 Review your work... 4 General Comments... 4 CMS Guidelines... 5 How to create a form... 6 Image Editing Slideshows two step process Creating a container page type Creating the landing page for your slideshow Calendar Calendar Events Event page Small thumbnail (appears on Calendar homepage) Uploading YouTube clips Dynamic Properties Granting Permissions Access Granting Temporary Access Set of 3 Action Boxes Four column call to action boxes Publishing compulsory steps Post Publishing Requirements Re-direct process Styleguide examples of page types Page 2

4 CMS Tips Content Consider and always remember your audience. What are the key calls to actions? o Search for a program o Contact Us o Apply now o Register for an event Keep information succinct and try not to convey too many messages at once. Use active, well-constructed sentences. Internal content should now be accessed through the Portals. The Corporate Website is not an archiving tool, please do not use to store years of documents. Images Aim for images: o Of people in action o That capture our target demographic o That are in focus and clear o That are of high enough quality to resize 72 dpi) Avoid images: o That are poor quality (Eg photos from a phone) o That appear too staged people posing o That could be considered culturally insensitive o Stock photography should match our major target audience groups Use features strategically Use Action boxes for key calls to action - use them sparingly or their impact is reduced. Navigation/site architecture Left hand menus should link to pages in your website exclusively. Link to other destinations with hyperlinks in the copy or in supplementary page features (Eg. composer blocks and action boxes) Page 3

5 Use formatting styles and features correctly Assign the correct heading style for headings (Eg. H1, H2, H3, H4). Don t use tables for layout purposes. Styling Let the CMS apply our official corporate styles (Eg. Text colour, font, size) Avoid adding inline styling. Filing Avoid punctuation marks, symbols and spaces in file names. They may work today but they might not in the future. Keep filing system neat and tidy. Other people may need to access and use the same filing system. Files that are linked to from multiple pages should go into the global filing space to avoid duplicating them. Review your work Check your work once published. Long text can break the display in some circumstances. General Comments There are numerous tool tips and notes throughout this document, please read them carefully to help your perform the task at hand All new systems require a settling in period ; implementing a CMS for the corporate web is very new to the University. Allow adequate time to become familiar with the system. This interface has been selected to make maintaining the website easier. As much as possible please restrict the number of web authors you have publishing content. Workflows have been established so that content goes through fewer channels to ensure accuracy and consistency. If you have any feedback, or feel the CMS is not working as it should, please Web Enquiry. Thank you for your patience as we work through this transition phase Page 4

6 CMS Guidelines Please do not use simple URL s. If you feel one needs to be used consult with the MDU Digital Marketing Team so they can provide guidance and ensure the URL is not already in use for a University wide promotion/campaign The CMS has an inbuilt image editor, it is strongly suggested you use this for image editing purposes, step by step instructions can be found in this document Error messages appear in the grey toolbar, this is not always obvious Pages can be moved in the left hand site structure by dragging and dropping, if utilising this feature, please ensure broken links are not created Be sure to review and edit prior to publishing, once a page is published it is live to the public Please allow adequate time to make web updates. Event requests and web changes require 2 weeks notice consult with the MDU Digital Marketing Team if you require clarification on web process times If you have any questions please Web Enquiry webenquiry@unisa.edu.au Page 5

7 How to create a form 1. Forms are created in the form template (08 Form Left Hand Nav) there is only one template to select 2. Fill out the name of the form in the main body (this content will sit above the form) Page 6

8 3. Click on the form button (the field under the main body). This will open the form interface which lists all forms in the system. 4. a. Existing form Select form from list (press select, then use) This page can be saved, ready for review and pbulishing 4. b. Non existing form Press create Give the form a name If you have a folder already created (ie Divisions) file the form in the folder, if you don t, select no folder When the form is submitted, select what page the user will go to. This will often be a Form Confirmation page thanking the user for their registration. (Please note: you will need to create this page in advance of creating your form) Ensure form can be sent without logging in is checked this allows non-authenticated/regular users to be able to submit a form Send multiple times option have this checked for testing purposes, unchecked for publishing Page 7

9 5. Table layout a. 2 column, select insert column for the number of columns you need b. Insert the number of rows to match the number of required fields c. Select the Form Fields tab d. Left hand column add headings (select the the heading button, add text and press save) e. Leave CSS classes blank f. Right hand column place required fields (ie. Drop box, text box, text area etc) i. Name box this appears as the name of the field in your data output. There should be no spaces in this field. eg. FirstName ii. Leave heading blank iii. Tool tip = information provided when you hover over field, for instance, enter your name iv. If validation is required, select Page 8

10 6. At the end of the form add submit button a. Select what you need done with the data i. Save to database OR ii. Send and save to database 1. If using and database option you will need to fill out the 3 remaining fields a. Where you want the to go b. Who the appears to come from c. NOTE: if the above two fields are the same, UniSA filters will view this as spam, therefore make sure they are different and the subject line is relevant 7. Save and close 8. Ensure you select your form from the previous window (click on the green tick) 9. Select use a. Title should appear in form area 10. Save and view to preview page 11. Test and submit to ensure form is working as expected prior to publishing 12. Publish Note: If you selected to receive the data via , it will be sent to your 13. If you selected the database to receive the information a. Retrieve information by navigating to the page that contains the form b. Click on the Form Data tab c. Select form on page d. If you want a subset of data, you can put in the start/end date etc, press search and it will retrieve the results e. Exporting data from the CMS i. Select the results you want to export ii. Export to excel and follow the prompts Page 9

11 Page 10

12 Image Editing Note: double clicking on an image allows you to preview it To edit an image you first need to have an image in the system. There are two options: 1. File Manager a. Select global or page file b. Add new file c. Select fiile from local drive d. Save e. Navigate to the image you want to edit i. Right click ii. Click edit (brings up the same interface as per step 2d below) File is uploaded to the system and ready for editing Insert/edit image Page 11

13 2. Editing interface through the WYSIWIG (what you see is what you get) a. Insert/edit image button b. Click browse button next to the image URL (this will open the interface as per first method) c. Select the image d. Right click on the image file name, and click Edit. This will open the image editing interface 3. Editing process (same for both options as you are in the same interface) a. CROP i. Select the pre-set size that suits your needs ii. Click and drag the crop box to crop as you require iii. Press apply to commit to the crop iv. Save options 1. Keep on high quality 2. save as a new copy (this keeps the original) OR 3. save which will save over the original (WARNING this means you will lose the original image!) b. Resize i. Same process as above c. Transform i. This merely flips, or rotates etc Page 12

14 TIP: use the resize and crop functions in conjunction with one another ie resize the image first and then crop what you need. (If you use this option, do not select a pre-set. Only do this if you are comfortable at editing images) Page 13

15 Slideshows two step process Creating a container page type Create a new page container (this template can be found in the standard page types section) Name the container and save In the container create the slides o Ie. Select container, right click, select new page (select 07 content slideshow item slideshow) o Name o Select image (note, you may need to follow the image editing step at this point) o Give alt text name (this relates to the image URL and describe what the image depicts). This is compulsory for accessibility compliance. o Give it a title (this appears on the slide) o Type in the slide body text (also appears on the slide) o Each slide has a link link text needs to be added o Each slide needs a destination (select link to the related page) o Save and view Review content and appearance Create a slide for each slide needed in the slideshow (minum of 3, maximum of??). Repeat the process as above. Note: the minimum number of slides is crucial otherwise your slideshow will not work Ensure your slideshow slides are published before publishing your main page Creating the landing page for your slideshow Select the page type that allows slideshows to be inserted o (02 Division page OR 06 Institute page) Save and view Click edit Click composer (note: slideshows are composer blocks) Select Content Blocks (blue square) Note: Slideshow sits in the composer block under uncategorised Page 14

16 Drag content slideshow into composer block area located at the top of the page Click on edit (down arrow at in the top left tab) - a new dialogue box will open o Click on more tab in slideshow container field o Select container that stores your group of slideshow items Save dialogue Publish page/sites, slide container Page is now live Page 15

17 Calendar Calendar Events Refer to Event page Refer to Small Thumbnail Refer to Event details on Event page Page 16

18 Event page Name Event details: Location Address Line Further information text Event website Large image: 413px X 264px Main description Found under Categories Tab Page 17

19 Small thumbnail (appears on Calendar homepage) Listing image: 190px x 80px Title Short description Page 18

20 Uploading YouTube clips 1. Place your curser in the body text where you want your video to be 2. Click dynamic content a. Select drop down arrow under type b. Select YouTube video 3. There will be two displays to choose from a. Full detail lists the thumbnail, title and description (description is taken from what is currently on YouTube) 4. In video URL, copy and paste the URL from YouTube 5. If you don t put the title and description in the required fields it will automatically pull this information from YouTube. If you add it in, your description will override the YouTube description. Either option is fine. 6. Thumbnail you can insert your own thumbnail if you are not satisfied with the YouTube thumbnail 7. Press ok 8. Save and view 9. Review and edit if required 10. Publish Page 19

21 Dynamic Properties Dynamic properties are found in the toolbar under edit mode and reports, the fourth button in from the right (3 coloured cubes) Two tabs Content and Site Configuration Content tab refers to anything that appears within the main content area of a page. Site Configuration refers to all other items that cannot be found within the main content of a page o Area title the large title which appears next to the degree programs search box (see below). Tick the area title check box ONLY if you want all child pages to have the same title in that space. If not, leave it unchecked Page 20

22 Site Configuration tab o Main menu container this is for the Mega Menu (PLEASE DO NOT TOUCH) Menu Marker where the left hand menu starts within a site structure Require HTTPS: does your website require a secure connection (eg PayPal/online payments etc.) o Tick the check box if you want this for all of the child pages Page 21

23 Granting Permissions Access Staff members who will be making changes to the website will need to fill out the web access form and send it to Web Enquiry. All fields must be complete before access can be granted. The form requires the trainer to confirm they have trained the relevant staff member before access can be granted. Staff members who require temporary access to individual pages for editing/review purposes can be granted access by the Senior Digital Officer in the Division Digital Marketing Team. Administrative Units can contact DMT or their main web author. This ensures a comprehensive list of all staff members who have been trained and have access to the CMS is maintained centrally. Granting Temporary Access 1. Click the key icon (5 th from the right) change access rights 2. Add users or groups Page 22

24 3. Ensure users is selected when adding individual staff members (this is in the type field) 4. Name a. add UniSA username b. press search c. click on the arrow pointing towards the right to add d. select ok e. Tick the required boxes (keep CMS-LeadWebAuthors ticked, then the other boxes as required) f. Save Note: if you add staff members to a particular page, this does not give them automatic access to the child pages. You will need to add them to each page individually. It is best to webenquiry@unisa.edu.au if a staff member requires access to an entire website to avoid granting permissions for every single page Page 23

25 Set of 3 Action Boxes Note: there are several compulsory fields that need to be completed first. Therefore, source the images and text before plan this from the beginning, as you cannot save during the process. This feature is only available when using [01 general content template] 1. Go to the page you want the action box to be under 2. Make the container a. Click new, select template container Page 24

26 b. Name it 3. Under the page extension create your page (01a action box group) find this under Standard page types a. Name the page 4. Action Box 1 a. Title b. Image (refer to image editing process if necessary, there is also a pre-set image size action box 1) c. The main body box is for text only, not images d. Fill in the link text and provide the URL of where you want the link to go 5. Follow the same instructions for Box 2 and 3 (please note, these are different size images to Action Box 1) 6. Save and publish once Action Box 3 is finalised 7. Go to the original page where you want the action box to be displayed a. Open the page and click edit Page 25

27 b. Click page extension c. Select the chooser button for the action box group d. Select the page container just created e. Save and view for editing purposes f. Save and Publish Page 26

28 Four column call to action boxes Note: All four columns are required when using this feature 1. Follow the same process in Action Boxes to create the page extensions a. Action Box Group 01a 2. Create a new page as per previous process a. Select template 01b b. Create c. Name 3. All four columns are required to be filled in a. Follow the same process as above for action boxes Page 27

29 Publishing compulsory steps 1. Publish all the child pages a. Always go in to the versions tab when publishing each page to ensure the latest version is being published Note: Pages may have been worked on in a number of different ways, meaning the go live process may be different. 2. When icon is a thumbs down, the page is a draft: Go into the page and click publish 3. When the icon is a clock with little red square: Go into the edit/scheduling, remove stop publish date, save and publish 4. At times the unpublished page will be a new draft version of a page which is currently working as a shortcut. If this is the case, go into the versions tab of the shortcut page, select the latest not ready version and publish 5. If there is no icon at all the page is already published. a. Alternatively, it may be that the site is already being worked on as published, but with limited reader access. If this is the case access rights for each page will have been altered so that everybody cannot read the pages. If this is the case, undertake the following steps:: i. Add everyone to access rights, giving them read access. ii. Right click on the page name to go into access rights. iii. Add the group everyone (make sure it is a group, not a user; then search for it, select it, click OK, assign read access and save) 6. Publish the landing page: select the latest not ready version and publish Post Publishing Requirements 1. Navigate around the site and check all links 2. Delete old left hand navigation shortcuts where necessary 3. Check menu titles are correct 4. Consider whether any other sections of the website are linking to this section s pages and need to be relinked 5. Move old content boxes to recycle bin and rename new ones if necessary (sometimes the new version of a page will be connected to a new set of content boxes. These will be clearly named as Content boxes new. It is best to rename them once pages are live and delete the old ones 6. Delete redundant left hand navigation shortcuts. This must be done. 7. Remove all shortcuts to the old w3 environment 8. Redirect the old pages to the new. Note: Redirects may affect the way users navigate through the staff portal Page 28

30 Re-direct process Note: This is the process to create a re-direct on the old w3.unisa.edu.au pages to the new website Please contact the DMT team directly if you have any questions about the re-direct process: 7. In Sharepoint Designer, open up the website and the page that you want the redirect on 8. Edit the page in code view 9. At the very top of the page insert the following script (please copy and paste from below) <%@ Language=VBScript %> <% Response.Status="301 Moved Permanently" Response.AddHeader "Location", " %> 10. Change the URL above to the page you want to redirect to (this should be the newly created page in the CMS) 11. Save the page 12. Test in a browser before publishing the page Page 29

31 Style guide examples of page types Styleguide.pdf Page 30