webworks.ie webme tutorial

1. WebMe content management systems capabilities Webworks.ie WebMe CMS provides the following key features: Automated templates Webworks created a standard set of templates that can be automatically applied to new and existing pages, creating one central place to change that look across a group of pages in your site. This Template was generated from the approved design generated in photoshop at the early stage of this project. We have supplied a number of Templates that can be linked to different pages ie for News and Publications, these can be found under the Advanced Options tab which is explained later . Style Sheets CSS are a part of HTML 4.0 and gives authors the ability to suggest how their documents are styled.This style sheet can change the look of an entire Web site by changing one file. By separating layout from content, CSS makes it easier to create and maintain websites. One style sheet can even be used to style an entire site. By updating that one file you instantly update your site. Easily editable content Once your content is separated from the visual presentation of your site, it becomes much easier and quicker to edit and manipulate. Our WebMe CMS software includes a WYSIWYG editing tools allowing non-technical individuals to create and edit content. Scalable feature sets Most CMS have plug-ins or modules that can be easily installed to extend an existing site's functionality. These can be added to the site through your panels which is explained later.

2. A General orientation of the admin area Main Navigation area to access various feature of the WebMe CMS This is a list of your pages which reflect your navigation on the public side of your Website Notice there are sub pages these reflect the drop down navigation on your website You can make a page a sub set of another page by clicking on the parent dropdown and selecting a page You can generate a new page by click here or click an existing page to open it The page name is the name of the navigation button for this page on your website The page title will produce this in your browser window Page titles are important for a search engine friendly web page Here is the content of your page This is the WYSIWYG editing tool, this will be explained later You can select a page to have different functions also, this will be explain later You can access your template selection under this tab As well as your page description and keywords

3. Keywords: A keyword is a word or phrase that a Google user types into the search box – this is what triggers your page to be shown. Seperated by commas Description: Give a concise description of the content of the website (approx. 20 words). This description, together with the title, is often the first part of your website that surfers see in a search engine. So consider it carefully. Preparing information for search engines Before registering your website with search engines (Google, etc) it is advisable to make it search engine-friendly. You can do this by putting metatags on your website which are instructions for search engines. If you fill in the details below then the correct metatags will be generated and added (behind the scenes) to your website. You may also make you page hidden from your navigation By checking this box. You can generate a page for testing, or for private view etc Select different template styles here Advanced Tabs Options Keywords Descriptions Templates Advanced Options tab

4. By clicking on administrators you select a group of people to view this page You can create this group of users By going to site options>Users This area will be throughly explained later on in this slide show Privacy Tab

5. Adding Content Using the editor Toolbar Standard Text editing tools: Like B for Bold and left right alignment. Highlight a word you would like to make bold and click on the B icon in the toolbar You my cut and paste text from a word document only if you click on this icon first Adding Text: Click in the center area and start typing to add content to your page Full Screen: click on this to enlarge the editing area Linking: A hyperlink is a graphic or piece of text that links to another web page, website, document or image Highlight a word or image and click on this icon a window will popup. Type in a “/” + name of page to link to a page in your site Or to link to another site Or click browse to link to a document or image Something extra for links If you are linking to another website You may want to send the viewer to another tab on clicking the link Thus keeping your tab still open for the viewer to return to To do this click on New Window(_blank) after clicking on the target tab Email Linkling To link a word or name to a email Select E-mail from the link type dropdown Type in the email address you want to send to This window popups up you can browse through your folders for a document already loaded Or browse your desktop to upload a new document Click on the browse button to the left of this popup window Here another window will popup which is your desktop Browse your folders for the document or image And click open Then click upload after selecting the folder you want it to be place in Select folder Click upload

6. Placing an Image Place your curser where you want the image to appear and click on the image icon A popup window will appear Click on the browse button to browse through the KFM file manager for the image you want or browse your desktop as describe in the previous slide Here you can change the sizes of your image Border: Place a border around your image Hspace is placing a white area to the left and right of the image Vspace is placing a white area to the top and bottom of theimage Aligment-Left: Lets you wrap text around the image where the image is placed left on the page If you need to ajust this at a lter stage doble click on your image and this popup will appear again

7. Table Properties Width can be in pixels or a % of the webpage Specify the number of rows and columns here Border can be set to 0 as well Cell Padding places a white space In side each cell Cell Spacing places a white space Outside each cell. Place your curser where you want your table to appear and click on this icon in the toolbar

8. Style Sheet To change the text from normal paragraph text to a heading place your cursor anywhere on a line or word and choose from the format dropdown the style you want How it will look on your website

9. Page Types A brief description You can change the function of a page By selecting a type from the drop-down menu shown here to the left Page Summaries: Gives you a list of any pages that fall directly beneath the page that was converted in to a page summary Table of Contents: Gives you a list of pages that fall directly beneath the page that was converted plus a brief description and a link to that page. Search Results: If you provide a search on your site you must generate a search page to accommodate the feedback of that search facility Image Gallery: When a page is converted to an image gallery you can upload images that is automatically generated in to a gallery Forms: If you required a page to have a form on it you must turn that page function into a forms page News: Any page place under a news page is automatically feed into the news scrowl and news listing only the parent page needs to have a news function the news pages under this page are normal pages . Privacy: If you turn on a pages privacy It will automatically ask the viewer for a username and password.

10. Forms Pages This is a page where its function has been changed into a form The head is anything you want to place above the form. Likewise the footer is anything below the form This is where you place the email address for the person who will receive the information filled out in the form If this is blank you will get an error It will be blank only if you leave out the email type from the form fields in the next tab This is the error message If you get this message go to the form fields tabs and Add an email field by changing the type to email Input box: is a box where only one line is needed ie name Text area: When more than one line is need ie and address or comments Email: This traps the email address of the form applicant you will get an error message when updating the page if you leave this out This is the message that returns to the form applicant once they pressed submit

11. News pages and feeds This page has been converted into a news page Any normal pag e placed as a sub page of the news page will become automatically a news page. These pages do not have to be changed to News function All news pages have their own template So click on the advanced tab and select the appropriate template This is a normal news page Text and images are placed here like an ordinary page

12. Image Gallery To Create an Image Gallery click on this browse button To create an image gallery convert your normal page in to image -gallery from the drop-down And click the Update Page Details button A popup window will appear which is your desktop browse to the folder where you images are and select the images you require (multi select by holding the shift key) Then click open. Click here to add a caption This popup window appears just type in your image caption and then click edit

13. Panels and their components These are your panels The next slide shows your the positioning of your panels Panels can be accessed along the top navigation bar under Misc > Panels

14. Navigation area Banner Panel Footer Panel Left Panel Content Right Panel Middle Panel Councils Panel Bread Crumbs Top Panel Panel Positions

15. You need to click on a panel to open it Then click on a widget And drag it into the Panel Please name your widgets For easy reference How to Open and add plugin widgets

16. Open a Widget here and edit it like a normal page To make it visible on a particular page click here and choose the page If none is choosen then it appears on all pages Clicking on Enable means to keep it there but don't show on any page it will change to disable when clicked

17. These are the different Plugin widgets you can have Not all Plugins are suitable for your site You can access then under Site Options > Plugins Turning on and off plugin wdgets