Content Management System User Training

Transcription

1 Content Management System User Training October 14, 2010

2 Logging In Log in using the following URL: Use UNI and password 2

3 Editing Existing Content Once logged in, navigate to the page you d like to edit and click on Edit at the bottom of the page: 3

4 Two types of editing: APC and Intranet All Purpose Content (APC) can be edited or created inline right on the page. Content such as announcements and news is edited/created in the Intranet. Announcements will not appear in site search results APC: Will always show [ Edit ] Microcontent [ Publication Manager ] Only 4

5 Editing All Purpose Content Click the [Edit] button above the content Initial view will be of HTML code version Note: the Title* field appears in site search choose name appropriately To edit HTML, copy and paste into Notepad or other plain text editor. DO NOT USE MS WORD. To use WYSIWYG (what you see is what you get) editor, click the icon to the right of the body field 5

6 Using the WYSIWYG Editor WYSIWYG Editor offers Word-like features (bold, font styles, headline styles, etc.) Again, paste your text as plain text only. Do not use MS Word. When complete, click Save Changes. Then, from the APC content page, click Submit. 6

7 Create New All Purpose Content Same rules apply as editing; you may use the code editor, or the WYSIWYG editor. 7

8 Create New All Purpose Content Same rules apply as editing; you may use the code editor, or the WYSIWTG editor. Set permissions Set for public or limit by group (password protect) Set owner who can edit this page? 8

9 Re-ordering All Purpose Content Click the Publication Manager link; select content and use arrows to re-order 9

10 The Intranet To create and edit content such as news and microcontent, you will use the Intranet. 10

11 Intranet: News B Module The News B module is used to create news stories that can appear on your site in a sidebar on the right hand side of your front page. Click arrow for WYSIWYG editor 11

12 Intranet: News B Module Be sure to select correct setting so your news story is seen by as many users as possible. Your center/program Topics/categories Request home page promotion Set as Public 12

13 Intranet: News B Module Once you ve created a news story, you will use the Publication Manager to publish news stories to your page, re-order them and remove old stories: Add/remove from page Find your article 13

14 Announcements Micocontent is also created in the Intranet, and added to your page using the Publication Manager. Micocontent is not revealed in site search. It is typically used to communicate information that is not considered news, e.g. announcements, deadlines, contact, related links. Examples of microcontent 14

15 Editing microcontent Intranet -> Micocontent Search for existing microconent using the manage tab: To edit existing microcontent: Select desired microcontent, then click Edit tab. To create new microcontent: Select Create/Edit Content tab. 15

16 Creating a New Page The easiest way to create a new page is to copy a current page that shares the attributes and navigation that you would like for your new page. For instance, if your page will be located in /marketing/about, select a page from that section to copy. NOTE: This process should be executed using Mozilla Firefox browser. STEP 1: Click [ Edit ] then the small notepad icon (next to the keys) 16

17 Creating a New Page STEP 2: A new window will pop up. Add your new page name and other information: 17

18 Creating a New Page STEP 3: Open the Advanced tab by clicking the +. There, you will see a check box for System Page if you select this box the page will not appear in your site navigation (hidden): Setting the page to System Page can be helpful when you creating the page, and not ready to display it as part of the site s navigation. STEP 4: Click the + between Cancel and Draft, select and Save as Copy. 18

19 Creating a New Page STEP 5: Be sure the page has the correct parent: After saving as copy, re-open the page and change the parent page if necessary. If it does not, place your cursor in the box to the right of the parent page (with the magnifying glass) and type in the correct parent, e.g.: Hit the enter button; a list of parent pages will then appear in a drop-down menu: 19

20 Uploading a document To upload a PDF, Word, Excel, etc. file, you must first go to the Intranet. Then, click on Web Tools -> Main File Room -> Your site s folder* Select [ Upload File ] * Note: some newly-created site folders are in the Columbia Business School folder 20

21 Uploading a document You may select ( Upload Multiple Documents ), or choose to upload one at a time: Name and Description should be the same 21

22 Creating a link In the Intranet s fileroom, find the file you d like to link to and click on the file. A page showing the file information will appear: 22

23 Creating a link Hover over [ Download ], right click, and Copy Link Location : 23

24 Creating a link Paste (ctrl+v) link into your code view: Remove the text (/download) from the link: The link is now: Use this link on your page, e.g.: <a href= >Documentation for Instructors</a>. It will appear like this: Documentation for Instructors. 24

25 Importance of link architecture Use descriptive anchor text Writing descriptive anchor text, the clickable words in a link, is a useful signal to help search engines and users alike to better understand your content. The more Google knows about your site through your content, page titles, anchor text, etc. the more relevant results we can return for users (and your potential search visitors). For example, if you run a basketball site and you have videos to accompany the textual content, a not-very-optimal way of linking would be: To see all our basketball videos, <a href="videos.html">click here</a> for the entire listing. However, instead of the generic "click here," you could rewrite the anchor text more descriptively as: Feel free to browse all of our <a href="videos.html">basketball videos</a>. Re-printed from: "Importance of link architecture," Google Webmaster Central Blog, Monday, October 06,

26 The perils of Microsoft Word Pasting text from MS Word into your site will cause unwanted styling to appear, and may break the site s functionality. Always strip your Word text using NotePad or another plain text editor: Add styling (such as headlines, bold, bulleted lists) in the code view or WYSIWYG editor. 26

27 HTML Basics Text Tags Note: Do not insert tags to change font style, size, color, etc. These elements are determined by the style sheet and will occur automatically. The text tags below are for creating headlines and emphasis. <h2></h2> Creates the largest headline (not available on every page) <h3></h3> Creates the smaller headline <h4></h4> Creates the smallest headline <em></em> Emphasizes a word (italic) <strong></strong> Emphasizes a word (bold) 27

28 HTML Basics Links <a href="url"></a> Creates a hyperlink <a href="mailto: "></a> Creates a mailto link <a name="name"></a> Creates a target location within a document <a href="#name"></a> Links to that target location from elsewhere in the document 28

29 HTML Basics Formatting <p></p> Creates a new paragraph <br /> Inserts a line break <blockquote></blockquote> Indents text from both sides <ol></ol> Creates a numbered list <ul></ul> Creates a bulleted list <li></li> Precedes each list item, and adds a number 29

30 HTML Basics: Adding an image Upload your image to Intranet -> Web tools -> Images fileroom -> [your folder] Image will then take on this path: /ipimages/yourfolder/yourimagename.gif <img src=" /ipimages/yourfolder/yourimagename.gif"> Adds an image <img src=" /ipimages/yourfolder/yourimagename.gif" border= 1 > Adds border to image <img src=" /ipimages/yourfolder/yourimagename.gif align= left > Moves image to left; wraps text <img src=" /ipimages/yourfolder/yourimagename.gif width= 105 height= 97 > Sets width and height Put it all together: <img src="/ipimages/yourfolder/yourimagename.gif border= 1 align= left width= 105 height= 97 > 30

31 Commonly Used Special Characters To display different text styles, accented letters, and other characters, you must insert the correct encoding in your HTML. Below is a short list of special characters you may commonly use on your Web site. For a complete list of special characters, visit 31

32 Questions? Contact Information Technology Group (ITG) Phone: Admin Support: Faculty Support: Online Resources CMS Notebook: Brand Identity: HTML and Special Characters: 32