Content Management System (CMS) CMS-2

Transcription

1 Content Management System (CMS) CMS-2 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-2 CMS-2 is Content Management System(CMS) for Advanced Users. Must have taken the CMS for Beginners class (CMS-1) and have CMS credentials. Class guidebook Materials available online Content Management System Training 4

5 Supported Browsers Mozilla Firefox Google Chrome Operating Systems Win 7 Mac Review: Browsers and OS options Content Management System Training 5

6 Review: CMS Environments CMS Staging site: Note: Your published content will go live on the production server at every hour CMS Production site: Content Management System Training 6

7 Review: Logging in Content Management System Training 7

8 Logging Out Review: 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 8

9 Review: Key learning from CMS-1 Understanding of CMS Basics - Access department folders and content in the Work Area Understanding of CMS Editors - Aloha & Inspector Upload files and images to the Document Management System (DMS) - ADA Compliance for section 508 (Alt Tags) - Override existing documents (Class Schedule) Create hyperlinks - External Links & Internal Links Preview and publish web content Content Management System Training 9

10 Review: Templates Department Template Single/static left navigation shared by all subpages Best for basic sites Content Management System Training 10

11 Review: Template Choices Department2 Template Top/static menu with changing left navigation for each subpage Best for more complex sites Content Management System Training 11

12 Key Learning from CMS-2 Create and Edit Headers Create and Edit Menus Embedding videos Montgomery College YouTube videos Adding Bookmarks Viewing content using source code Content Management System Training 12

13 Working with Headers Header { Department Header Area consists of 3 content blocks Department Banner Image Department Title Department SubTitle Content Management System Training

14 Headers Caution: Content block names must not be changed! Our CMS templates use the exact names when loading headers into a browser. If you change the names of these content blocks, your header will not display! Content Management System Training 14

15 Headers: Department Title & SubTitle Department Title & SubTitle have default font, size, and color which cannot be changed. DO NOT delete the Department Title & SubTitle content block. Leave the content blank if you do not want to display a Department Title & SubTitle. Content Management System Training

16 Headers: Folders & Subfolders Header is associated with folder; all pages in a folder will display same headers. Pages in sub-folder can have different header. If there is no header in sub-folder, pages in sub-folder will display header in the parent folder. Content Management System Training 16

17 Headers: Folders & Subfolders Content Management System Training 17

18 Headers: Banner & Content Block The maximum width of banner is 950 pixels, however, height can vary. The width of the Content Block area is 700 pixels. Content Management System Training 18

19 Exercise 1: Headers Editing the Department Header Area Changing a Department Header Image Changing a Department Title & SubTitle Content Management System Training 19

20 Templates & Menus Depending on the template, your web page may have one or multiple menus Department template One menu on left hand side Department2 template Left menu and top menu Available Templates Content Management System Training 20

21 Templates & Menus Department Template (one menu left menu) Single/static left navigation Shared by all subpages Best for basic sites Department2 Template (multiple menus left menu & top menu) Top/static menu with changing left navigation for each subpage Best for more complex sites Content Management System Training 21

22 Department Template: left menu Content Management System Training 22

23 Department Template: left menu Content Management System Training 23

24 Department2 Template : left & Top Menus Content Management System Training 24

25 Department2 Template : left & top Menus Content Management System Training 25

26 Headers: Folders & Subfolders Menu is associated with folder; all pages in a folder will display same menu. Pages in sub-folder can have different menu. If there is no menu in sub-folder, pages in subfolder will display menu in the parent folder. Some templates allow left-menu only. Some templates allow both left menu and top menu. Content Management System Training 26

27 Menus Start in the Workarea to create a menu Must first create a menu before you can add menu items Once a menu is created, you can remove and reorder menu items Caution: Delete will delete the entire menu. To remove individual menu items use the Remove Items Option Content Management System Training 27

28 Menu Items Menu items can be one of the following: Content Item External Hyperlink Sub Menu Note: When working with menus, it might take up to 20 minutes for everything to show up properly on your site Content Management System Training 28

29 Menu Items Toolbar Depending where you are at in the process of adding menu items, your toolbar can look different. Content Management System Training 29

30 Exercise 2: Menus Creating and Editing Menus Adding a Menu to a Content Folder Edit and View a Menu Item Adding a Content Item Adding an External Hyperlink Adding a Sub Menu Content Management System Training 30

31 Embedding Videos Embed videos from YouTube Only use Montgomery College produced and approved YouTube videos Part of our agreement with YouTube Content Management System Training 31

32 Embedding Videos/YouTube Get embedded code from YouTube Open a New Browser Go to youtube.com and search Montgomery College Select a video Click Share link Click Embed link Right Click, Copy embedded code (CTRL+C) Content Management System Training 32

33 Embedding Videos/YouTube Insert YouTube embedded code into your page Edit your My Practice Content Block Place cursor where you want media embedded On Aloha Editor, click Insert tab Click the Insert Embedded Media icon Right Click, Paste(CTRL+V) the embedded code Click Save and Preview your webpage Content Management System Training 33your

34 Embedding Videos/Podcast Go to Find a video you want to embed into your website Click the video Under each video podcast is a link to the embed code Copy and paste the code following the same steps as YouTube videos Content Management System Training 34

35 View Source Code familiar with HTML?? can edit code directly using View Source button Content Management System Training 35

36 Exercise 3: Source Code and Embedded Videos Embedding a Montgomery College YouTube video in your content block using View Source Code icon. Content Management System Training 36

37 Working with Bookmarks Bookmarks (or anchor tags) Allow visitors ways to easily navigate to areas of your web page Particularly helpful on very long pages Most common bookmarks are Top and Bottom You can name them whatever you want Content Management System Training 37

38 Working with Bookmarks Two parts to create bookmarks: Creating a bookmark destination (destination) Creating a link to that destination (source) Content Management System Training 38

39 Working with Bookmarks Two parts to create bookmarks: A destination - the bookmark location to which the cursor jumps when the source is clicked A source - text a user clicks to jump to the bookmark ( Top, Bottom ) Content Management System Training 39

40 Working with Bookmarks Part 1: Creating Bookmark destination a. Insert Bookmark icon using Aloha toolbar Insert tab on the Aloha Toolbar click the Add Bookmark icon Content Management System Training 40

41 Working with Bookmarks Creating Bookmark destination b. Change the name of bookmark icon using Inspector toolbar double click the bookmark icons in the content block click the Inspector under the Inspector s Advanced tab, change the name from NewBookmark to PageBottom and PageTop Content Management System Training 41

42 Working with Bookmarks Part 2: Creating the Links to the Top & Bottom of the page a. At the top of the page, enter the word Bottom b. At the bottom of the page, enter the word Top c. Double click the word Bottom that you placed at the top of the page d. Click the Insert Link button on the Aloha Toolbar Content Management System Training 42

43 Working with Bookmarks Part 2: Creating the Links to the Top & Bottom of the page e. Change the to #PageTop or #PageBottom Content Management System Training 43

44 Working with Bookmarks Part 2: Creating the Links to the Top & Bottom of the page f. Click on SAVE button to save your content g. Click on Preview button preview your content h. See if your Top and Bottom bookmarks work Content Management System Training 44

45 Working with Bookmarks This is what your page should look like in Edit mode once you ve added the bookmarks and links. Content Management System Training 45

46 Exercise 4: Adding Bookmarks Create a top and bottom bookmark in the content block Bookmarks are a nice way to allow visitors to jump from one place in a content block to another Particularly helpful on very long pages Content Management System Training 46

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

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

49 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 49

50 Feedback Please take a few minutes to give us feedback! Thank you for attending! Content Management System Training 50