Webteam CMS directions updated 8/18/14

Transcription

1 Webteam CMS directions updated 8/18/14 Each website may have different options in their administrative areas. These directions pertain to adding and editing content to pages in the 'page editor', 'page updater' or any other CMS admin page on your website. Depending on the time of your website build these tools may vary. If you have How do I get to the page I want to edit?: NOTE: In order to add/edit a page the menu option for the page will need to exist FIRST. If you need a page added to the website please contact your main website administrator. Login to the website admin. From the website admin page click on 'Page Editor' or 'Page Updater'. From there you should see a list of all pages on the website. If necessary narrow down the number of pages by clicking the dropdown arrow in the 'View Pages by Menu Type' area, selecting the area you are going to edit, and click 'view' to see only those pages. Locate the page you would like the edit and click 'edit'. (For more about the Menu Title, Type, and Page Title, please view information below the HTML Editor area) Using the HTML editor to update your page content: The CMS content editor is fairly easy to use and edits the content of the page. The tools are outlined below. By now you should be in the admin, have clicked 'edit' and are looking at the page you wish to edit. Find the area for 'Content'. Once you click in the field for this area you will see the HTML tools available to you. Many of these are similar to MS Word such as bold, italics, font color, alignment tools, ordered and unordered lists. CMS Tools Description: Starting with the upper left icon 1. Source This link will show you the source code for the page. If you are having issues with the html editor doing what you like and are familiar with html, editing using this view may help. If you are not familiar with html you may want to stay away from this tool. 2. Templates The CMS offers a couple of template styles for you to integrate into your page. Click one of the templates to use that layout on your page. 3. Cut In order to use the 'cut' tool you must first highlight a segment of text or select

2 an image, then click 'cut'. 4. Copy In order to use the 'copy' tool you must first highlight a segment of text or select an image, then click 'copy'. 5. Paste In order to use the 'paste' tool you will have to have text copied first. 6. Paste as Plain Text Paste text as plain text and ignore Microsoft Word formatting 7. Paste from Word Paste text from MSWord. This will paste in the MS Word formatting. 8. Undo Undo last action 9. Redo Redo last action 10. Find Use to find text 11. Find/Replace Use to find and replace text on your page 12. Select All Selects all text in your 'content' area 13. Spellcheck See spellcheck options in your CMS 14. Bold Select text, then click this icon to 'bold' 15. Italics Select text, then click this icon to italicize 16. Underline Select text, then click this icon to underline 17. Strikethrough Select text, then click this icon to strikethrough text 18. Subscript Type number, then highlight and select this icon to move number to subscript position 19. Superscript - Type number, then highlight and select this icon to move number to superscript position 20. Remove Formatting This command will remove misc formatting from your content. You must first select all the text in the content area (select all icon) then click this icon. If you have copied text from MSWord this tool may be helpful to try to correct formatting issues. 21. Numbered List (Ordered List) Click this icon to create a numbered list 22. Bulleted List (Unordered List) Click this icon to create a bulleted list 23. Decrease Indent Position your cursor where you would like to decrease the indent. Clicking this icon will move your text to the left. If the text is already at the left it will not move. 24. Increase Indent Position your cursor where you like to increase the indent. Clicking this icon will move text in the paragraph to the right. 25. Blockquote Position your cursor in a paragraph. When you click 'blockquote' the text in the paragraph will increase it's left and right indent. 26. Create Div container A little complicated to explain if you aren't familiar with divs just ignore this icon. 27. Left Align Self explanatory 28. Center Align Self explanatory 29. Right Align Self explanatory 30. Justify Self explanatory 31. Text Direction from Left to Right Self explanatory 32. Text Direction from Right to Left Self explanatory 33. Link add a web, file, or mailto link to text or an image 1. Insert Web Link to create a text based link please follow these steps: 1. type in the text for the link 4. a new window will pop up 5. 'link type' should be 'URL' 6. select the correct 'protocol' by default linking to another webpage is 'other' 7. type/paste in the URL for the link

3 8. target tab: 1. if this is an 'offsite' link, click the 'target' tab, click in the 'target' field and select 'New Window (_Blank)' 2. if this is an 'insite' link, don't change the target 9. click OK the link will now show on your editor as underlined and will be a link. To edit the link highlight the link and click the 'insert web link' icon again. 2. Insert File Link Follow these steps to include a file (.doc/.pdf, etc) on your page: 1. type in the name of the file you want your users to see on the page, that they will click on to access this file. 4. To connect a file: 1. If you need to upload the file to the server - click the 'upload' tab to browse your computer and find the file on your computer then click 'send it to the server'. 2. If the file already exists on the server on the 'link info' tab click the 'browse server' button. This will bring up a listing of all files that have been uploaded in the CMS. Double click the file you wish to link. 5. Click the 'target' tab and select 'New Window (_blank)' so the file opens in a new browser tab. 6. Click 'OK' your file should now be linked. 3. Add link to an address follow these steps to create a link to an address: 1. type in the text for the link ( address) that shows on the page 4. a new window will pop up 5. 'link type' should be ' ' 6. add the address into the ' address' field 7. If you wish to add a subject or body text to the when someone sends it, add it to the respective fields. 8. click OK the link will now show on your editor as underlined and will be a 'mailto:' link. 4. Add link to an image follow these steps to make an image clickable to a web page or file 1. Image linked to webpage: 1. After the image is added to the page, click on the image to 'select' it. Then click the 'Link' icon. a new window will pop up 2. 'link type' should be 'URL' 3. select the correct 'protocol' 4. type/paste in the URL for the link 5. target: 1. if this is an 'offsite' link, click the 'target' tab and select 'New Window/Blank' 2. if this is an 'insite' link, don't change the target 6. click OK your image should now be a link. 2. Image linked to a file 1. After the image is added to the page, click on the image to 'select' it. Then click the 'Link' icon. a new window will pop up 2. To connect a file: 1. If you need to upload the file to the server - click the 'upload' tab to browse your computer and find the file on your computer then click 'send it to the server'. 2. If the file already exists on the server on the 'link info' tab click the 'browse server' button. This will bring up a listing of all files that have

4 been uploaded in the CMS. Double click the file you wish to link. 3. Click the 'target' tab and select 'New Window/Blank' so the file opens in a new browser tab. 4. Click 'OK' your file should now be linked to your image. 34. Unlink To unlink a link, highlight the text of the link and click this icon. 35. Anchor This icon allows you to create links that 'jump' down the current page. 36. Image to add an image please place your cursor on the line you would like the image to align with, then click this icon. 1. To upload a new image: 1. Click the 'upload' tab 2. Click 'browse' to select a file from your computer 3. Click 'Send it to the Server' the image is now on the server and should show on your page 2. To select an image already on the server: 1. on the 'image info' tab select 'browse server' 2. a listing of all images on the server in the CMS system will appear. 3. Double click your image and click 'OK' to save 4. if the image needs to be resized when you are back out on the CMS admin page, click the image once to select it, then 'grab' one of the corner handles and drag to resize. Some browsers will do this proportionally, some won't. 3. Image alignment you can align images by selecting the image after it has been added to the page, then clicking the left or right alignment icons, or by 'dragging' the image over the page. If you choose to 'drag' the image it will align with wherever your cursor is showing. 4. Image resizing once the image is showing on the page you can click once on the image to select it, then click on the corner handles to resize the image. 5. To make an image a link please see 'Add link to an image' above. 37. Table Click this icon to add a table to a page. Tables can be used for positioning text and graphics, or for positioning data on a page. A popup will appear asking how many rows and columns you would like in your table. There are also options for alignment, width, borders, and padding. 38. Insert Horizontal Line (HR) - this will insert a horizontal line across the entire page. Use as a separator within a page. 39. Insert Smiley Place your cursor and click this icon to see the smiley faces available 40. Insert Special Character Place your cursor and use this option to add special characters 41. Insert Page Break for printing Place your cursor and use this option to create print friendly pages 42. Iframe To insert code within your page use this option. You may want do a test using this tool before adding to a live website. 43. Insert youtube video Use this icon to either embed a youtube video onto a page, or add a youtube link to a page, then click OK 44. Styles There are some predetermined styles set for fonts within the CMS. To use these styles, highlight the desired text, then select an option from this dropdown. 45. Format Predetermined font styles used for text 'headers' on the website. Select text and select a style from the dropdown. 46. Font A default font will be picked and used for your site. If you would like to change the font in an area of text, highlight the text and click the arrow to select a new font from this list. 47. Fontsize to change the text size highlight some text and select a different size from this list. 48. Text Color Highlight text and select this icon to choose a color for the text. 49. (Font) Background Color Highlight text and select this icon to choose a background

5 color for that text area. 50. Maximize Maximize the size of the html editor in your browser 51. Show Blocks Shows how the pages is created using styles 52. About CKEditor About the html editor included in the Webteam CMS And what about all the other stuff on that 'Edit Page'? There are a few fields on the 'Edit Page' that determine what the title of that page is in the menu, what the actual page title is on the page, and some other fields that help the page with Search Engine Optimization (SEO). Please read on for more info. From the top of the page: 1. Standalone Page = No. This means that the page you are looking at is a page that is linked in the menu of the site. Standalone = Yes means it is a page that was created that is NOT linked in the menu, but is 'standalone' and there is a link somewhere that links to it. Most pages on your site are NOT standalone pages. If you want to create a page for a timely marketing plan you can create that new page as 'standalone', then copy the link and send it out to people, or put that standalone link on the home page for promotion. 2. Parent Menu Item If the page you are viewing has 'None' in this blank it means that it is a 'primary menu item'. Pages that are submenu links of a main menu item will show the main menu item name here. 3. Menu Title = The menu name 4. Type 'Content' by default all pages are 'content'. If you want a page to go directly to a link, change this to 'Link'. The 'link' scenario would be good if you were adding only a PDF you wanted to open when the user clicked on the link. 5. Page Title this is the title that will show on the top of the page when the user views it, before the content. 6. Tags Using tags on the site helps to group the content on your site and helps with SEO. Not required. 7. Meta-Title a field used for SEO that doesn't show to users. Enter a sentence that describes the product or service you are promoting on this page. Limit to characters 8. Meta-Description a field used for SEO that doesn't show to users. Enter a sentence that describes the product or service you are promoting on this page. Limit to characters 9. Meta-Keywords List the products and services you are promoting on this page. As a rule, these terms should match what you have entered in the meta-title and meta-description for this page. These terms should also be very dominant in your content text.