Content Management System (CMS) CMS-1

Transcription

1 Content Management System (CMS) CMS-1 Last edited on February 03, 2016 by Haesung Park

2 Welcome! Analyst Programmer Web Tech. Trainer Web Services Office of Information Technology Content Management System Training 2

3 Web Services Team Web Services Team Joseph Bilzor, Analyst Programmer, x73044 Marc Bolea, Web Graphic Designer, x73134 Sharon Burke, Analyst Prog. Web Architect, x74301 Haesung Park, Analyst Prog. Web Tech. Trainer, x73123 Tzu-Yin Shiau, Analyst Programmer, x73041 Content Management System Training 3

4 Class Description: CMS-1 CMS = Content Management System CMS -1 Introduction to CMS Learn the most essential skills required to create and maintain department Web sites Requires CMS credentials to login to CMS Class guidebook Materials available online Content Management System Training 4

5 Key learning from CMS-1 Understanding of CMS Basics Understanding of CMS Editors Upload files and images to the Document Management System (DMS) Create Hyperlinks Preview and Publish web content Content Management System Training 5

6 Browsers and OS options Supported Browsers Mozilla Firefox Google Chrome Operating Systems Windows 7 Mac Content Management System Training 6

7 New Website New website Submit a request CMS Accounts and CMS Web Space Request Form Review Resource Requirements with IT Approval for a New Folder for website info to requestor Create your website Content Management System Training 7

8 Where CMS Work is Done CMS Staging site: Your published content will go live on the production server at every hour CMS Production site: Content Management System Training 8

9 CMS Key Terminology Assets - Graphics or documents you have uploaded to the CMS Content Blocks - A web site consists of several pages - Each page is made up of one or more blocks of content Content ID - Each content block has a specific content id Document Management System (DMS) - Assets management system Workarea - Central location to perform most tasks managing your website Content Management System Training 9

10 Web Content Text as Web Content: Written for the Web Have good internal links Written for a global audience Multimedia Web Content: Animation Images Sound Video Content Management System Training 10

11 Views in CMS Four Main Views Workarea Folder-View Workarea Content-View Content Block Edit-View Staging Site Preview & Production Site View Content Management System Training 11

12 Four Main Views in CMS Workarea Folder-View When you click on your folder, you will find a list of your Content Blocks and Assets (pdfs, docs, images, etc.) Content Management System Training 12

13 Four Main Views in CMS Workarea Content-View When you click on a content block title in the folder area, the Workarea Content View for that item will display. This is a preview only. Content Management System Training 13

14 Four Main Views in CMS Content Block Edit-View When you open a content block in the editor, all of the text and image styles will be displayed and you will be able to edit the page. Content Management System Training 14

15 Four Main Views in CMS Staging Site - Preview and Production Site View These views will accurately represent your content. It is best to develop the habit of checking page layout on the Staging site. Note the grey Ektron toolbar at the top of the window. Content Management System Training 15

16 Six tabs at the top The Workarea Content tab is where content editors create and manage content for their website

17 Creating a new Content Block How to create a Content Block? In Workarea Click New Click HTML Content Provide Title Click on PUBLISH Content Management System Training 17

18 Searching for Content Its easy to find your content in CMS if you know the content ID (ie., 57895) Use content ID to do an advanced search for a specific webpage s content ID, ie., How? Click on the Action button to begin your search Then choose Advanced Search and Content ID Content Management System Training 18

19 Content ID Unique identifier for a content block Content Management System Training 19

20 Search for Content ID Content Management System Training 20

21 Editing Content After creating new HTML content, to make changes to existing HTML content, you will need to EDIT it To edit existing content, click the desired content you wish to edit from your work area and click on the EDIT button Content Management System Training 21

22 Logging in Logging In Need login credentials: User Pwd Content Management System Training 22

23 Logging Out Logging Out Close the Workarea window Click on the logout button on the Ektron toolbar OR if you are given the original menu, click on the logout button. Content Management System Training 23

24 Your Practice Folder Your Practice Folder for this class (Good for next 6 Months!) Content tab EDU CMS Training Today s date (YY-MM-DD) Your Name opens content-blocks displayed in the right panel Content Management System Training 24

25 Your Practice Folder Content Management System Training 25

26 Editing Content Open the Editor Click on your content block, the content block edit-view will appear Click on the EDIT button, the editor will open Content Management System Training 26

27 Editing Basics 6 Buttons Publish Check In Undo Checkout Save Cancel Preview Content Management System Training 27

28 Editing Basics Button Descriptions Publish Check-In Undo Checkout Save Cancel Preview Publish the content to the website Will copy to CMS production in hour Save and check-in content This updates content in DB and exits editor Allows you and other uses to continue changing content Close editor without saving changes Return content to its state prior to checkout Saves content WITHOUT leaving editor Close editor WITHOUT saving changes Leaves content in checked out state & returns to Workarea view Preview current content within its template in a new browser Only available once you are in edit mode Content Management System Training 28

29 Content Status Indicator In Workarea, make note of the Status column A: Published O: Open I : Checked in

30 Content Status Indicator Unique identifier for a content block Content Management System Training 30

31 Website Templates What is website template? A website template is a pre-designed webpage (Ready-Made) Allow to quickly build a website without the need to create webpages from scratch (Save-Time) Consistency throughout all College departments Websites (Unity, Professional) Content Management System Training 31

32 Templates Types Department Template Single/static left navigation shared by all subpages Best for basic sites Department2 Template Top/static menu with changing left navigation for each subpage Best for more complex sites Content Management System Training 32

33 Templates: Department Content Management System Training 33

34 Templates: Department2 Content Management System Training 34

35 Template Basics Header Menu Area Main Content Area Content Block Content Management System Training 35

36 Content Blocks: Header Department Header consists of 3 content blocks Department Banner Image Department Title Department SubTitle Content block names must not be changed! CMS templates use the exact names when loading headers into a browser! Content Management System Training 36

37 CMS Editing Toolbars CMS have two editing toolbars Aloha Simple / basic editor actions Inspector Advanced editing actions Content Management System Training 37

38 The Inspector Tool Inspector hides at the bottom of your screen when you re editing content Content Management System Training 38

39 Editing Basics: Aloha Aloha Toolbar (Simple and Basic actions) Bold Italic Font sizes for headings/paragraph Create/manage hyperlinks Pin the toolbar anywhere in your work area

40 Applying Styles: Aloha Editor Aloha Toolbar (Simple and Basic actions) Unordered lists Bullets Arrows Dashes Squares Ordered lists Numbers Letters

41 Editing Basics: Inspector Inspector (Advanced actions) - Text manipulation Underline, strikethrough, uppercase, lowercase, Text alignment, left/right, center, justify Text color - Image manipulation Sizing, deletion, position, Add borders to images Changing spacing

42 Editing Basics: Inspector Span The inspector Style Selector in the Basic tab enables you to chose styles you can apply to the <span> tag. Click anywhere in a paragraph, and then apply styling properties Working with Span is tricky and takes some practice Hint: Look for the Tags in inspector to make sure you re within the span you just created

43 Editing Basics Spacing Double Spacing is default. SHIFT+ENTER for single space ENTER for double space If you make a mistake, CTRL-Z works as an Undo

44 Exercise 1: Text Styling Change size of text Using Aloha s toolbar Change color of words / SPAN Using Aloha s toolbar and the Inspector Practice using styling Double-spacing / single-spacing Enter for double-space Shift + Enter for single-space Creating and style bullets Unordered and Ordered lists Content Management System Training 44

45 Working with Images Images and files are called Assets Assets are uploaded and stored in the Document Management System (DMS) Remember to include ADA compliance: All graphics should have alternative text (ALT-tags) to be accessible to people with disabilities. Content Management System Training 45

46 Working with Images Inspector modify image size, position text wrapping around the image to delete an image Content Management System Training 46

47 Exercise 2: Inserting & Editing Images Insert an image into the Document Management System (DMS) Insert the image into a content block Edit the image using Inspector Delete an image using Inspector Content Management System Training 47

48 Working with Documents Documents that change often should be overwritten by updated documents Example: Academic Calendar PDF document for 2014 Academic Calendar would be overwritten by 2015 Academic Calendar PDF Eliminates need for rebuilding links Only works with PDF Content Management System Training 48

49 Exercise 3: Uploading Documents Insert a document into the Document Management System (DMS) Overwrite an existing document with a new document Content Management System Training 49

50 Working with Hyperlinks What is hyperlink? something you click on (word, image or graphic), when you click on it, it automatically sends the viewer to another destination provide a convenient way to connect information so that readers can find their way around the Web <a href=' >Title of Link</a> Content Management System Training 50

51 Working with Hyperlinks Types of Hyperlinks: External Hyperlink Links to a page outside of the Montgomery College web site Internal Hyperlink Links to a page within the Montgomery College web site Content Management System Training 51

52 Working with Hyperlinks Documents/files or images can be hyperlinked to the following: Web pages outside the CMS (external links) Another MC Unit s CMS content block and document asset (internal links) address Your other CMS content blocks and document assets Content Management System Training 52

53 Exercise 4: Practice Hyperlinks Make an external hyperlink that opens in a new browser window Make an internal hyperlink Remove the hyperlink using Inspector Create a hyperlink and apply a button style using Inspector Content Management System Training 53

54 CMS Resources Process checklists, request forms, help documentation, style guides, web standards, training schedule, project blog, etc Content Management System Training 54

55 EDU Redesign OmniUpdate Status Timeline Training / Workshop Planning & Writing Your Web Content Class Web Content Migration Edu re-design blogs Content Management System Training 55

56 Feedback Feedback Thank you for attending! Content Management System Training 56