CMS Basic Training. Getting Started

Transcription

1 The (Content Management System), was designed to allow most people in an organization to contribute to or edit their website(s). Utilizing a set of templates and stylesheets, users can add or edit information on their web pages, without any formal web design or HTML training. Generally, the only skills needed to work with are the ability to type and to cut/copy and paste. Getting Started is governed by a set of permissions that allow for some control over what specific access is given to users of the program. That includes access to, editing, folders within, and pages within folders. The permission to Publish pages, (placing these on the internet), is given by department management. 1. Log into my.scranton.edu using your login name and password. Then, if initial access is allowed, click the pencil icon to open. 2. Click on the drop menu displaying Global, and then select from the list. Global 3. When opens, it will display the folders that you have been given permission to access. You may have editing permissions on some of these folders, and some you may not be able to edit. 4. On the right side of the screen is the Dashboard, which includes information about your site. Most of the information displayed is not recommended for new users, but drafts and the Recycle Bin are located here. 5. Folders are arranged similar to the Explorer Bar found on most Windows computers. A plus sign + indicates that there is content within the folder, and clicking on the (+) will open the folder. There are three important icons that are shown throughout. These are: Folders Pages Objects

2 Top Menus Cascade Utilities - for Site Administrators Home - returns user to Dashboard New - Add new pages, folders, images History - where you visited in Tools - Zip Archives, bulk changes Administration - For Administrators Working with Pages 1. In the your folders list, find your main folder. (for example: under the Academics folder, you would find CAS folder. When opened you would find Math folder, etc.) When located, open the folder and select the index page. The index page is your lead page, sometimes called the homepage, landing page, etc. This page is most important. Visitors to the page will create an impression of your site, which should be positive and informative. 2. Double-click on the index page to access it. Following are main components of the page: a. Top of page has the path to the page path Main Tab Bar Second Level Toolbar b. Tab Bar: View Tab - shows page as it looks in a browser. Editing the page is not available in View. Edit Tab - takes user to edit screen where changes, edits, etc. can be made to the page. Move/Rename Tab - allows changes to page name and location in folders you can access. Copy Tab - you can copy an image or the entire page inside. Publish - with permissions, user can take page (on-line) to the internet. Changes made to pages within must be published before they can be viewed on-line. Relationships Tab - where you can see relationships of this page to other assets that refer to it. You can publish all relationships at once. More Tab - Here you can Delete items, check versions, check audits, etc. c. Second Level Toolbar: Layout - shows the page as it looks now, with some visible editing marks. Preview - page shown as it would look in a browser. Live - page as it looks on the web. Properties - containing information about the page. Lock - check the asset in or out for editing control. Outputs - formerly called Configurations, under the hood various segments of the page showing Blocks, Formats and other mechanical issues about the page. (2)

3 Identifying page sections Note: Shown is a 3 column or Main Page, typically used for index pages. The more common page used in, is the 2 column or regular page. The sections of both 3 column and 2 column are basically the same, except that the 2 column regular pages do not generally have the related links column, and sometimes do not contain the main photo. Search the University s website links to main university pages MAIN PHOTO Left Navigation Related Links (pages within your site) Main Content area UnderGrad and Grad Links Note: The 2 column page would have a larger main content area, due to not having the Related Links column as on the 3 column Main Page Contact box Content in this area of the page can be text, pictures and other images, links to other pages, tables and other objects. (3) The Related Links column on a 3 col. page can be used to hold links, calendars, RSS feeds, images, logos, etc. Most of the difficult work of web design has already been done for the user. Using templates and stylesheets, the structure, location of data, fonts, sizes of text, colors on main elements of the page, Headers and Footers, are all set for users. In it s simplest editing form, users need only change text, pictures, etc., to update pages. A few options are available to use in editing pages, which can be used for emphasis.

4 Working with Pages - Editing in To begin the editing process, click the Edit Tab on the Tab Bar to open the page so that changes can be made. Note: all page are in View (default) when accessed from the folders group or when changes are made and submitted. Inside the Edit screen (existing page) Inline metadata is important to help locate your pages with a search engine like Google. The system name of your file The title of the page is what you want people to see when they get to your page. Subtitle is used to separate your data if needed. Photos and captions are inserted here, you can choose left or right alignment on your page. The Edit Box where changes can be made. Text can be typed or pasted into the box from other sources. Action buttons Tabs View - The default view of the page in. Returns to View when a page is submitted for edit or when first opened. No editing here. Edit - opens the page in edit screen where changes, additions, deletions can be made to information on the page. Move/Rename - allows user to move the file to another location in the folder group, or to rename the file. Copy - allows user to copy a page or an image. Used when pages are relatively the same with minor changes. All copies must be renamed. Publish - If user has required permissions to publish, pages within the, can now be placed on the web (internet). Relationships - if established, shows the relationships of files, images, folders, etc., to each other. All can then be published together. More - allows user to delete files, change system name, revert to a former version of the page, and more. On the secondary menu bar: Layout - is the default view, which can show some program icons. Preview - shows the page as it would render in a browser without icons. Live - shows the Live page, or reasons why it does not show. Properties - shows most of the information about the page. Lock - allows users to check out/check in, any page to prevent editing from others. Outputs - the individual parts of the page, its elements, blocks and links to data. (4)

5 Working with Pages - Editing in The Edit Box Most of the changes users make to their pages are done in the Edit box. This is an HTML box, commonly referred to as a What You See Is What You Get (WYSIWYG) box. What that means is that unlike other web dialog boxes that show your data in code, this allows users to see exactly what they typed or copied/pasted without seeing that code. No prior web design knowledge is required. Users can type right into the box or copy information from other sources, like web pages, documents, etc., and paste that information into the WYSIWYG box. The information that users type or paste into the box is set to default type-style. Most users need to do nothing to render this data in an easy-to-read format, already made for the page. There are a few options for small changes within the box, but none are essential to make a professional looking page. See #3 below Add a subtitle, pre-formatted from stylesheet Create more paragraphs Add photo(s) Add photo caption Align photo to left or right of content area of page The Edit box allows users to type directly into the box, or copy text from an outside source and paste into the box. Once inside the box, edits to the copy can be made using the toolbar and the icons for formatting. Users can add tables, anchors, images, and videos, using the tools available. Editing tools include bullets and numbers, alignments, indents, and other standard editing tools. Several drop menus are shown that allow choices for fonts, sizes, and colors. A highlight tool is also available, along with spell-check. Notes: 1. Pasting directly from WORD may cause a problem with spacing. WORD has hidden spacial code that can transfer to the Edit Box when pasted. A tip is to copy your data from WORD, then paste it into NotePad on Windows, or TextEdit on Mac, (set to simple text). Then paste it into your Edit Box. All extra code is removed. 2. The default text formatting is the most commonly used. Although users can make some changes, the default text will render a professional and consistant look to pages within. 3. By default, users are editing a draft of their page. Note the blue bar at the top of the window. Here you can view or edit your original page and the draft, and when complete, users can Submit changes. 4. The Submit/Draft bar will allow users to Submit changes, update or discard drafts, or cancel the changes. Last operation by user (5) Submit - commits your changes Update Draft - updates your page prior to Submit Discard Draft - deletes the draft Cancel - discards any changes made

6 Adding New Pages The NEW Button At the top of the folders list is a blue toolbar which holds one of our most important tools, the NEW button. Here, users can see what new items can be used in their website. Those include, new page, new folder, and upload a file. Choices under the New button may be different for other users depending on their department ans their needs. Adding Pages to your site When adding a page, decide whether it should be a Main Page (3 column), or a New Page, the standard two column unit. 1. The first step is to select the folder where you would like the page. When clicked that folder will rise to the top of the folders bar, directly under the NEW Button. 2. Click the New button and navigate through the folders to your site and then the folder where you want the page. 3. Note the side arrow menu. Look for New Page from the list to create a 2 column standard page, (most common). 4. Note other choices: Main Page - 3 col. page (usually HomePage) Upload a File - allows user to go to their computer files to upload to (photos, PDFs, etc.) Folder - to hold pages, images or similar items Other items depend on department and need New Button Folder Selected Select New Page The New Page Dialog System name is the file name of the page Parent Folder is where the page will be stored It is important to include metadata in your page. This allows search engines to find the page. Always fill-in Keywords and Descriptions. Pre-Title may not work on most pages. The Title of the page is the headline that you want visitors to see when they navigate to your page. (Pre-formatted from the stylesheet) (Pre-formatted from the stylesheet) Edit Box (6)

7 Working with Images/Photos Images/photos enhance website content and interest. A more positive experience for people visiting your site is had when graphics are added to your pages. In adding images to your site is easy and does not require any advanced graphics knowledge. First, select the type of images you d like on your page. Then, make sure the images are available to use. Downloading images from the internet is illegal without proper permissions. Images are available free from the Public Relations Dept. or from our Web Resources page: Getting Images into After the image/photos are obtained, users must upload the images to. In your folder group, create an images folder if one does not already exist. (NEW Button >your folder>folder). Steps to follow: 1. Have your images local to your computer, (on your desktop, on a flash drive, CD/DVD, or on RoyalDrive. 2. Select your images folder. This will be the place where your images will be located after uploading. 3. Go to the NEW Button, find your folder and any side menu. 4. Select Upload a file from the list shown. This will open a dialog box where you can navigate to your images. Upload a file - dialog box Add a name for the image (start with lowercase letter) Check location for file Add a display name for the image Drag a file from its source or navigate to its location Click Submit when finished Special Note: All images, photos, PDFs, or other objects, that are not pages, must have a file extension. For example, a JPEG photo (brennan-hall.jpg), or a PDF (schedule.pdf). Photo Sizes The main or banner photo usually on the top of index pages, (homepage, landing page, etc.), must be sized to 1280 pixels wide X 361 pixes deep, to conform to our formatting. Photos inside page content area should fit so that text will flow around them easily. Inside body area photo sizes should not exceed 300 pixels wide. (7)

8 Working with Images/Photos (continued) The Main photo is the large banner photo across the top of many pages in the university s site. Although it is optional to all departments, the main photo can add visual enhancement to even the most text-laden pages and can add a touch of identity to otherwise very similar looking pages within. The Main Photo is sized at 1280 pixels wide X 361 pixels deep. There are many photos available to use, already sized for you, on the Web Resources page: Thes can be saved and then uploaded to your images folder, as explained on the previous page. The Main photo asset is found in your Assets Folder. It can be changed easily, by opening up the asset, selecting Edit Tab, click and delete the present one, and replace it with another. Photo Reminder: Upload multiple pictures by importing a Zip Archive Almost ALL photos/images on the web are copyrighted. Downloading these files, without proper permissions, is illegal and can subject you and the university to severe penalties. Photos are available from the Public Relations office or can be purchased from image vendors, like Getty Images, Shutterstock, and istock. Users can take their own pictures. Using a higher resolution photo (150 ppi or higher), will return better results. Set camera for JPEG images and a slightly lighter image in. A zip archive consists of multiple files or pictures that were packaged together in a folder. To create a zip archive in Windows XP/7 right click on any folder. From the side menu choose the menus Send To and then choose Compressed (zipped Folder). The file is now ready to import. In, go to the Tools menu on top of the window and choose the Tools menu. Select Zip Archive to open dialog box. Navigate to the zipped folder and upload. Tools Menu Using the Image Editor in Inside, there is an image editor that can be used to make minor changes to images that are already uploaded. When a photo is double-clicked in the images folder, it opens in the photo editor. Here modifications can be made. Picture Formats Jpegs are the most common image/picture format we use in. These are compressed files that have small file sizes. Other formats like PNG files can also be used. All image/pictures used in must have a file extension, such as.jpg or.png, etc. To enhance photos PRIOR to upload to, users can download a copy of GIMP, an image adjustment program free of charge. For those staff having access to Photoshop, a more professional image enhancement can be achieved. Width and Height boxes Undo Redo Rotate Flip Crop Apply Resize (Must be clicked to accept change) Sample Photo When finished, click Submit (8) Note: Making your image larger may cause loss of quality. Images should be at correct size, prior to uploading to.

9 The ASSETS Folder When editing your pages, most of the changes you make are within the content or body area of the page. These changes can be made by selecting the Edit Tab, and accessing the WYSIWYG or Edit box, and using the tools provided here. However, there are areas of the page that can be edited, added to, or items deleted, that are not found under the Edit Tab. These items are left navigation, (pages within your site), Main Photo, (large banner photo on top of page), Contact Information, and Related Links, to name a few. To edit these items, they are accessed from the ASSETS folder, found in your folders list. Click on the + sign to access the assets within the folder. In this example, the CAS left-navigation asset is selected. When opened the asset is shown in View, the default. Much like editing in pages, the Edit Tab must be selected to make changes to the asset. Linking/Unlinking Tools Linking: Type a name of the page for the link Select the entire name Click the Linking Tool Choose Internal or External Links (see note) Navigate to the page you want to go to Click Submit To Add a new link item to your list: Place cursor after last letter of previous link item Click Enter or Return A new bullet will appear for a sub link, click Enter then Indent tool Type the name of the link target Select the entire name Click the Linking Tool Note: Sublinks show on your page as items within a drop menu. Most of the information found in the left navigation box, are links to other pages within your site. The Linking and Unlinking tools are found on the toolbar. Note: Internal vs. External Internal refers to links you can make, if you have access to those pages within your folders list. Navigate to the page, click on it and then Submit. External refers to anywhere else. You can use external links to go to pages within the university, not accessable to you; or links to pages anywhere else in the world. Use a browser to open a page you d like to link to, select the URL or address of the site, then copy that link into the external link dialog box. Main Link Sub Links (9)

10 Publishing in The final step to getting our information on-line, is to publish. Publishing your pages will place them on the World Wide Web, not just in our environment. We should take extreme care when publishing, making sure the pages, links, images, etc., are exactly how you would want them to be. It is a good idea to have second eyes, (someone in your department, or otherwise), look over your work, to see if there is anything you have overlooked. In most cases, all your edits, additions, deletions, etc., are done on servers here on the ground. Only when Published can these pages be seen by some using a browser, who can navigate to the URL, or web address ( of your site. If an error is noticed when your pages are already published, edits must be made in and then re-published, even if only a single character, or an entire page. Special Note: If changes are made to a page in, already Published and existing on the web, you Must UnPublish that page, prior to Publishing the page with your new edits/changes. See the Publishing procedure below: Publishing Procedure: Un -Publishing First: 1. Find and select the Publish Tab on top toolbar of the page you would like to publish. 2. Make sure Un-Publish is selected. 3. Leave all other setting as they are, unless you have a change. 4. Press Submit. Publish Tab When you see the Green Bar on top of the page, that indicates that the Un-Publish was successful, it s now time to Publish. Publish: Repeat the procedure from above, except: Make sure Publish button is selected, then click Submit. When you see the Green Bar on top of the page, that indicates that Publish was successful. Un-Publish Publish Submit The publishing procedure above, applies to the content area of all pages. However, Assets, such as left-navigation, related links, main photo, and other assets must be published along with all pages that are affected by the change or edit. Publishing Assets: When there is a need to publish assets, it is a good idea to choose a date to publish made known to all others working on your pages. That way all other changes to pages, files, uploading images, etc., can be done and your site can be published, all at once. For Training go to: Contacts: For questions relating to, contact: Jack Williams, IT Training Specialist jack.williams@scranton.edu ext. # 4026 (10) Working with PDFs PDFs like any other file, need to be uploaded to, much the same as an image file. (New button > Your Folder > Upload a file) Like images, PDFs need to have their file extension included in the file name: (MyFile.pdf ). Create a link in one of your pages, it can be text or an image, and select it. Then, click on the Linking tool in the toolbar. Navigate to the location of the PDF and link it as you would an image file. When clicked on, the link for the PDF will usually open the PDF in Adobe Reader, which is a common program on most computers.