1. Sitecore Basic Training Drexel’s full-featured web content management system (CMS) Web Support Information Resources & Technology (IRT)

2. Topics  What is Sitecore?  Login/Change Password  Content Editor (editing text)  Media Library (uploading images/PDFs)  Save and Approve for Publication  Additional Resources/Training  Live Demo  Q&A  Contact Info/Support

3. What is Sitecore?  Content Management System (CMS)  Reuse of information  Can be used in most commonly used browsers: Internet Explorer (IE), Firefox, Chrome, Safari, and Opera.

4. Your temporary password is “passlastname” (i.e., passsmith or passjones). The first time you log in with your temporary password, click “Change Password” instead of the “Login” button. Logging In: webedit.drexel.edu/sitecore *Note: no “www” or “http://” required when typing in the login URL. Choose Desktop Interface so you can tab between Content Editor & Media Library

5. Main Areas in Sitecore  Media Library  Stores Images, non HTML files, etc  Content Editor  Page creation, editing

6. Content Editor: How to Begin Click on Content Editor Click on Sitecore to Begin

7. Content Editor: Content Tree  Content Tree > Find Site Site Sections that appear in top navigation of site

8. Section - Top Navigation and Side Navigation Header Section Page – Drop Down Menus and Side Navigation Categories Basic Page – Section Side Navigation Sub Pages Content Tree

9. Sitecore Page: Live Example Section Top Navigation and Section Navigation Header Section Page Drop Down Menu and Section Navigation Categories Basic Page and Side Navigation Sub Pages

10. Content Editor: Editing Pages 1.Lock and Edit - c reates version to keep track of edits 2.Sections to Edit  Identity page title – web browser title menu title – menu title breadcrumb – appears under nav bar as navigation aid. Example:  Content – body text

11. Content Editor: Editing Pages  Show Editor - opens WYSIWYG editor Heading 1 automatically added – no need to add styling Opens WYSIWYG Editor

12. Content Editor: WYSIWYG (Show Editor)  Do not bold headings– use heading tags HTML (Hypertext Markup Language) Heading tags are used for outlining body text, not just for labeling. For example, Heading 1 (largest heading) - automatically inserted in Headline (title of page) Heading 2 – used for next level headings in body text Smaller than Heading 1 Heading 3 – used for headings below h2. Smaller than Heading 3 and so on.

13. Inserting an Image/File Opens Insert Sitecore Media Window Find Site where image or file is located Add Alt Text Click on Image Note: Uploading Images is converted in Media Library Section Note: Alt text describes images for viewing by screen readers – Essential for Web Accessibility

14. Adding Classes to Images Images need classes applied to them. Otherwise, they will appear very large taking up 100% width of their container. Basic classes applied to images float-left - pushes image to the left allowing other elements (usually text) to wrap around it. percent-50 - reduces the size of the image to 50% of the width of its parent container. The "percent" classes can be applied in multiples of 5 from "percent-5" to "percent-95". Add classes directly to img tag in HTML. Before class: After add class:

15. Adding a Sitecore Link Insert Sitecore Link Linking to Internal Sitecore Pages. Links to Internal non- HTML documents (PDFs, docs, PPT) in Medial Library

16. Inserting an External Link Links to external websites/e-mail links

17. Pasting from Word into Sitecore  Copy from Word  Click the “Paste from Word” Icon  Strips Out Unnecessary Word Styling  Do NOT paste directly from word into Sitecore.

18. Cleaning up Content Format Stripper

19. Example: Content Stripped of Word Styling Example of clean HTML code stripped of unnecessary styling by using Paste from Word or Format Stripper tools.

20. Example: Content with Unnecessary Styling Should be simply text. Unnecessary styling and spacing tags were inserted when copied and pasted from Word without using the Paste from Word or Format Stripper Tools.

21. Finished Editing When finished editing, make sure you accept or reject the changes.

22. Locked Items and Workflow State Right click on left gutter to see locked items Review > My Items shows a user’s locked pages. Note: A user cannot open a page that is locked by another user. Left gutter shows locked items and workflow state Right clicking on left gutter displays this pop- up window. Check off the items listed.

23. Display/Approve for Publication Review > Display Review > Approve for publication Sitecore Contributor Save > Submit for Review Needs Approval by Sitecore Manager Sitecore Manager Save > Approve for Publication Publishes pages live Order of Operations 1.Lock & Edit 2.Launch WYSIWYG Editor to make changes 3.Accept/Reject Changes 4.Save Changes > Preview with Display 5.Approve for Publication / Submit for Review

24. Media Library: Adding files & Images  Files  PDF  PPT  Images  jpg  gif  png 2. Click Media Library 1. Click on Sitecore to Open Menu Window Opens Media Library Find Site

25. Media Library: Upload File Alt Text Warning Alt Text Text added to describe an image. Viewed by screen readers to assist blind in accessing web pages. Essential for Good Web Accessibility

26. Media Library: Additional Ways to Access  With Content Editor open, click on arrow at the top right of page to access the Media Library Access Media Library by selecting tab at the bottom of the screen. Note: Desktop View (selected at login)

27. Media Library – Adding ALT Text Best Practices – Alt Text The alt text should describe the image (for example, "Statue of the Drexel Dragon"). If text in an image is used instead of true text, the alt text should say exactly what the image does. (for example, if an image is used instead of the words "Student Open House" the alt text should also say "Student Open House“). In the rare instance in which an image is purely decorative, use empty quotation marks ("") for the alt text to indicate that there is no meaning.

28. Media Library Upload File – Approve All images and files/folder must be approved for publication to display live Note: Images will show in editor but not in live site if unpublished

29. Additional Resources  Workshops/Training  www.drexel.edu/irt/services/workshops/ Web Content/Sitecore SharePoint University Calendar www.drexel.edu/irt/services/workshops/ Image Editing Additional Resources  www.drexel.edu/irt/services/websites/ www.drexel.edu/irt/services/websites/  http://webedit.drexel.edu/galleryV2 http://webedit.drexel.edu/galleryV2

30. Contact Information Web Support Team Information Resources & Technology (IRT) http://drexel.edu/irt/services/websites/ websupport@drexel.edu websupport@drexel.edu 215-895-0202