CONTENTM WEBSITE MANAGEMENT SYSTEM. Getting Started Guide

Transcription

1 CONTENTM WEBSITE MANAGEMENT SYSTEM Getting Started Guide

2 Table of Contents CONTENTM WEBSITE MANAGEMENT SYSTEM... 1 GETTING TO KNOW YOUR SITE...5 PAGE STRUCTURE...5 Templates...5 Menus...5 Content Areas...5 DISTINGUISHING PAGES AND MENUS...6 What is a Page?...6 What is a menu?...6 GETTING STARTED WITH CONTENTM...9 HOW TO ADD A BASIC PAGE TO YOUR SITE...9 HOW TO EDIT A PAGE...9 HOW TO CREATE A PANEL PAGE...10 HOW TO CREATE A MENU OR SUB-MENU ITEM...11 HOW TO ATTACH A PAGE TO A MENU...12 HOW TO ACTIVATE AND DEACTIVATE A MENU ITEM...13 LEARNING THE IN-TEXT EDITOR...15 RICH TEXT EDITOR FEATURES...15 Formatting...15 Text Effects...16 Tools...16 HTML Editing...17 LINKS...17 URL...17 Anchor in this page AllofE Solutions. All Rights Reserved Page 2

3 Existing Page...19 Document...19 Existing Document...20 Upload Document...20 Editing and removing links...21 IMAGES...21 URL...21 Existing Image...21 Upload Image...22 Other Options...22 TABLES...23 SPELL CHECKER AllofE Solutions. All Rights Reserved Page 3

4 Getting to Know Your Site In this section: Intro to Site Structure Intro to Page Structure Distinguishing pages and menus 2010 AllofE Solutions. All Rights Reserved Page 4

5 Getting to Know Your Site ContentM helps you maximize the usability of your site by providing a range of navigational tools on every page. With these tools, users and visitors can navigate to any page on your site in less than three clicks! Your page structure will aid you in maintaining internal control over your site by restricting which areas of each page can be updated or modified by which users. Page Structure Each page of your site consists of three components: Templates, Menus and Content Areas. The combination of these three features helps your site to maintain consistency while multiple users and administrators are updating content. Templates Templates are pre-determined features of your website that function to ensure that each of your pages is presented in a consistent format. In the examples above, the picture bar at the top and the right-hand panel are templates. They are present in every page included in the site. Menus Menus are representations of the structural hierarchy of your site. They help to navigate users to the major areas of your site and also through the subsections of these areas. Generally, your template will include the main menu. It is also common to see sub-menus on the page (as in the example on the right) to help guide users as they advance deeper into your site. Menus are usually editable only by administrators. Content Areas The Content Areas of your site are the areas where your text, images, headlines, etc. can be edited using ContentM s Edit in Place technology. All users with permission can update content in these areas. When updated, the new content can be put on a holding page for administrative approval. The changes will not be visible on the site until approval is given AllofE Solutions. All Rights Reserved Page 5

6 Distinguishing Pages and Menus As you create your site with ContentM, you will deal extensively with menus and pages that are created in you system. For that reason, it is important to understand the difference between the two. What is a Page? In ContentM, a page is the actual structure and content that is visible in your web site (See page 9). Pages are created with three components: templates, menus and content areas. The combination of these elements into pages results in the visual representation of your web site. A simple way to understand a page is to think of it as the content in your site. What is a menu? Unlike a page, a menu in ContentM is a navigational feature of your web site. Each menu represents and links to a page of content (see page 11), but in itself, is nothing more than a 2010 AllofE Solutions. All Rights Reserved Page 6

7 directional tool. Use the menus in your web site to quickly and easily steer your visitors in and between different sections of your site. To best understand a menu, remember that it is the navigation in your site AllofE Solutions. All Rights Reserved Page 7

8 Getting Started with ContentM In this section: How to create a page How to edit a page How to create a menu item How to create a submenu item How to attach a page to a menu How to edit a menu item 2010 AllofE Solutions. All Rights Reserved Page 8

9 Getting Started with ContentM With ContentM, you are using a powerful content management tool. Using the program, you d never guess it was designed to handle thousands of users and tens of thousands of pages. ContentM s intuitive controls allow users at any technical level to make individual contributions to your website. How to Add a Basic Page to Your Site To create a page using the menu structure interface, navigate to the menu level you would like the page added to: 1.) Click the Create button. 2.) The Menu Setup screen will appear. 3.) Enter a Name and Description for the menu item. 4.) In the Type field, select New Page. 5.) Select Basic Pages from the New Page drop-down. 6.) Click the Save button. 7.) The Page Setup screen will appear. 8.) Click the Advanced Options link at the top of the screen to select a Template and Theme for the page. 9.) Enter a Title and Description. 10.)Create the page content using the Rich Text Editor. 11.)Click the Save button. How to Edit a Page 1.) To edit the information or text available on any page, open the page and click Edit Page on the Navigation Bar. Editable areas will appear as text boxes AllofE Solutions. All Rights Reserved Page 9

10 2.) Insert or remove text and images as desired. 3.) When finished, click the Submit button. 4.) To view your changes on the live page, click the Refresh button from the control panel. How to Create a Panel Page Starting Your Page 1. Add the Class to the My Classes List 2. Enter the Page Settings (These can be changed at any time.) Title: This Page Title will appear at the top of you page and does not have to be the same as the Class Name. Theme: The Page Theme controls the appearance of your page, including the header and background. Layout: There are two Page Layouts you can choose from, two columns or three columns. 3. Click and Drag the Panels to Arrange Your Page 2010 AllofE Solutions. All Rights Reserved Page 10

11 Setting Up Your Panels 1. Add New Panels Basic Panels: The variety of Basic Panels allows you to control and refine the look of your page while displaying new, important information. My Panels: The use of My Panels allows you to display your multimedia and advanced content on your page. 2. Edit Panel Content Each panel s content will be setup a little differently. Most Panels are edited through a text editor or a list. 3. Edit Panel Appearance Heading Style: The panel Heading Style dictates the font style and color used on the heading of a panel. Selecting complimentary Heading Styles is a way to unify your page s content and theme. Body Style: The font used to display your content and the appearance of the content portion of panels is controlled through the panel Body Style. Icon: You can further customize your panels through the use of Icons. Icons appear in the heading of a panel next to the panel title. How to Create a Menu or Sub-Menu Item 1.) From the Control Panel, click Site Admin 2.) Click Menu Structure 3.) Select the menu and click the View Items button. 4.) Menu items are shown for the level along with the number of submenus (children) beneath them 5.) To view children, select the menu item (parent) above them, click the View Items button AllofE Solutions. All Rights Reserved Page 11

12 6.) When you have reached the menu level you wish to add to, click the Create button. 7.) Enter a name and description for the menu item 8.) Select a menu type from the drop-down menu 9.) Enter any additional information required for the menu 10.)Click the Save button. 11.)For menus connected to pages within ContentM, you will be taken to the create or update page screen. Once that screen is saved, the system will return you to the Menu Listing. How to Attach a Page to a Menu Each menu item in ContentM provides navigation to a page, document, or external web site. To attach a page to a menu: 1.) On the Menu Properties screen, select New Page to connect the menu item to a page that you are going to create OR Existing Page to connect the menu item to page that has already been created. 2.) When you select your page type, information fields will appear to help you select the correct page to attach to the menu item. To view the page you have selected, click the Preview Page button. 3.) The example below shows the steps to attaching an existing page. 4.) When you have selected the page you wish to attach, click the Save button AllofE Solutions. All Rights Reserved Page 12

13 How to Activate and Deactivate a Menu Item 1.) From the Control Panel, click Site Admin 2.) Click Menu Structure 3.) Select the menu and click the View Items button. 4.) Menu items are shown for the level along with the number of submenus (children) beneath them 5.) To view children, select the menu item (parent) above them, click the View Items button. 6.) Select the menu item(s) to activate or deactivate and click Activate or Deactivate found in the More drop-down. Deactivated Menu Items Deactivated Menu Items will not be included in the menu structure 2010 AllofE Solutions. All Rights Reserved Page 13

14 Learning the In-text Editor In this section: Features of the rich text editor Tools in the rich text editor How to insert/edit an image How to insert/edit a table How to insert a link 2010 AllofE Solutions. All Rights Reserved Page 14

15 Learning the In-text Editor ContentM uses AllofE s revolutionary edit in place technology making it intuitive and comprehensive. This innovative tool allows users of all skill levels to easily update or add content from the web page using a rich text editor that includes all of the basic functions of a word processor. This feature helps to eliminate the bottleneck on your IT department by empowering the end-users to perform any minor updates or additions to your web site content. Rich text editor features Formatting - Select Text Style - Select Text Format - Font Family - Font Size - Change Text Color - Insert Bullets - Insert Numbers - Increase Indent - Decrease Indent - Change Background Color - Insert Horizontal Line - Left Align Text - Center Align Text 2010 AllofE Solutions. All Rights Reserved Page 15

16 - Right Align Text - Justify Text Text Effects - Bold - Italic - Underline - Strikethrough - Subscript - Superscript Tools - Spell check - Cut - Copy - Paste - Paste Text - Paste from Word Document - Undo - Redo - Insert/Edit Image - Insert/Edit Table - Insert Link 2010 AllofE Solutions. All Rights Reserved Page 16

17 - Remove Link - Insert Anchor HTML Editing - View Source Code Links A link allows a user to click on either some text or an image that will then perform an action. There are several actions that can be performed with links. For example a link can lead to another webpage, another location on the same page, or to a Word or PDF document. To add a link to a HTML document first select either some text or an image by dragging the mouse over the text or image. Once the desired text or image has been selected click the Link button, this will popup the window below. There are several Link Types to select from, each of which will be discussed in the following sections. URL The URL link type creates a link that directs the browser to another webpage. The manner in which the browser opens the URL can be set using the Target option. The example below creates a link to that will be opened in a new window. Note: The Protocol drop down allows for the selection of which protocol to use (advanced) AllofE Solutions. All Rights Reserved Page 17

18 Anchor in this page Links can also lead to another position on the current page instead of redirecting to another webpage altogether. To do this there must be an anchor on the current page to link to. To add an anchor, place the cursor at the desired position of the anchor and click the Anchor button. This will cause the window below to appear. The anchor s name can be any arrangement of letter, number, and underscore (_) characters. Each anchor on a page must have a unique name. Anchors are not visible on a web page, but for convenience they are shown as a in the rich text editor. To change the name of an anchor that has already been placed, right-click on the and select Anchor Properties After an anchor has been placed it can be selected as the destination of a link. Note: Anchors can also be selected by their id attribute (advanced). Another link type is the link type. This type links to an external client such as Outlook Express. When the link is clicked the client is opened and a new is created. There are three fields available when selecting the link type: Address, Message Subject, and Message Body. Of these three fields only the Address field is required AllofE Solutions. All Rights Reserved Page 18

19 Existing Page The Existing Pages link type is similar to the URL link type in the sense that it links to another webpage. The drop-down list allows for the selection of any of the pages that have been created using ContentM. Document The last available link type is the Document link type. This link type will behave differently based on the type of file linked, the user s browser, and the browser plug-ins that the user has installed. When a document link is clicked the browser will first attempt to find a browser plugin that it can open the document with. If it finds an appropriate plug-in then the document will be opened in the browser (For example Word documents will open in Internet Explorer if the Microsoft Word has been installed on the user s computer). If the browser cannot find an appropriate plug-in it will prompt the user with a popup giving the user the option to open the file directly from browser or download the file onto their computer AllofE Solutions. All Rights Reserved Page 19

20 There are two different ways of selecting a document to link to: selecting an existing file to link to, or uploading a new file to link to. Existing Document Existing documents are documents that have already been uploaded to the ContentM system. These files maybe selected using the Document Search at the bottom of the link window. To search for a particular document type the file name in the left hand side of the Document Search. A list of uploaded documents can be browsed on the right hand side of the Document Search; these documents will appear in alphabetical order. Upload Document A document can also be uploaded using the Browse button on the Link interface. After a document has been selected click the Upload button. Once a file has uploaded a pop up will appear, click OK to continue with the link setup. If the Open in new window checkbox is selected then the document will be opened in a new browser window AllofE Solutions. All Rights Reserved Page 20

21 Editing and removing links To edit a link that has already been placed right-click on the link and select Edit Link from the menu, or select the link by highlighting it and click the button. To remove a link that has already been placed right-click on the link and select Remove Link from the menu, or select the link by highlighting it and click the button. Images To add an image to a HTML document place the cursor in the desired position and click the button. There are three different ways of selecting an image to add: typing in the URL of the image, selecting an existing image, or uploading a new image. URL Type the URL of the desired image into the URL textbox. For the example below the URL to the Google logo has been typed into the textbox. Notice that URL has become selected and the Google logo appears in the image preview area. Existing Image Existing images are images that have already been uploaded to the ContentM system. These files maybe selected one of two ways: Browsing the available files or searching for a particular file AllofE Solutions. All Rights Reserved Page 21

22 To select an image first click the Search button in the Image Search. Click on different images to preview them. After an image has been selected from the image list, click Okay. To search for a particular image enter the file name of keywords in the File Name Contains text box then click Search. Clicking on the images returned by the search will allow you to preview them. When the correct image is selected from the image list, click Okay. Upload Image An image can also be uploaded by selecting the Upload New Image option in the Image interface. After the selected image is uploaded a pop up will appear, click OK to continue setting up your image. Other Options Besides displaying an image preview, the image interface has a number of options that can be set for the image AllofE Solutions. All Rights Reserved Page 22

23 Alternative Text: The text that is placed within this textbox will be displayed, as a caption, when the user s mouse is held over the image. Height and Width: The height and width of the image can be set here. The aspect ratio of the original image will be kept. Border: This allows for a border to be placed around the image. The number that is entered will determine the thickness, in pixels, of border around the image. Hspace: The amount of padding, in pixels, that the image has to the left and right of it. Vspace: The amount of padding, in pixels, that the image has above and below it. Align: This option allows for the selection of the image s orientation when placed into the HTML document. Tables Tables are necessary for the organization of content in a HTML document. Tables can be placed within tables for greater design freedom. To create a table, first click the toolbar to bring up the window below. button on the The only fields in the Table Properties window that need a value are rows and columns (the other fields are optional). After a table has been created a table s properties can be changed by right-clicking on the table and selecting the Table Properties option from the menu (Note: After a table has been created the number of row and columns cannot be change through the Table Properties window) AllofE Solutions. All Rights Reserved Page 23

24 To access a specific cell s properties right-click on that cell and select the Cell Properties option from the menu or click the button. Right-clicking on a table will also provide a number of other table operations. Inserts a row above the right-clicked row. Inserts a row below the right-clicked row. Deletes the row at the right-clicked location. Inserts a column to the left of the right-clicked column. Inserts a column to the right of the right-clicked column. Deletes the column at the right-clicked location. Merges together multiple cells. Splits apart a cell in to multiple cells AllofE Solutions. All Rights Reserved Page 24

25 Spell Checker To run the spell checker simply click the button on the toolbar. The Spell Check window will then popup and load the editor s html as shown below. The HTML content appears in the frame on the right side of the screen. All text that has a dotted underline is text that the spell checker is working with. If the color of the dotted line is red it means that the spell checker believes that the word is misspelled. Once a word has been acted upon the dotted line turns green. The word of interest is displayed in the upper left hand portion of the spell checker window (Original word). Beneath the word of interest is a textbox label Replace with. This textbox can either be pre-populated by a word selected form the list of Suggestions, or the user can type in a replacement word. There are four options available for every word: Replace, Replace all, Ignore, and Ignore all. Replace : Replaces the word of interest with the replacement word. Replace all : Replaces every occurrence of the word of interest with the replacement word. Ignore : Leaves the word of interest as it is and moves to the next. Ignore all : Leaves every occurrence of the word of interest as they are. At any time any of the words of interest can be selected and the action on that word can be change AllofE Solutions. All Rights Reserved Page 25