17
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

Webme Slide Tutorial

Embed Size (px)

DESCRIPTION

webworks.ie webme tutorial

Citation preview

Page 1: Webme Slide Tutorial

WebMe content management systems capabilitiesWebworks.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.

Page 2: Webme Slide Tutorial

A General orientation of the admin area

Main Navigation area to access various feature of the WebMe CMSThis is a list of your pages which reflect your navigation on the public side of your WebsiteNotice there are sub pages these reflect the drop down navigation on your websiteYou can make a page a sub set of another page by clicking on the parent dropdown and selecting a pageYou 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 websiteThe page title will produce this in your browser windowPage titles are important for a search engine friendly web pageHere is the content of your page

This is the WYSIWYG editing tool, this will be explained laterYou can select a page to have different functions also, this will be explain later

You can access your template selection under this tabAs well as your page description and keywords

Page 3: Webme Slide Tutorial

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 enginesBefore 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 OptionsKeywords Descriptions Templates

Advanced Options tab

Page 4: Webme Slide Tutorial

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

Page 5: Webme Slide Tutorial

Adding ContentUsing 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 toolbarYou my cut and paste text from a word document only if you click on this icon firstAdding Text: Click in the center area and start typing to add content to your pageFull 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 imageHighlight 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 siteOr to link to another site

Or click browse to link to a document or image

Something extra for linksIf you are linking to another website

You may want to send the viewer to another tab on clicking the linkThus 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 LinklingTo link a word or name to a email Select E-mail from the link type dropdownType 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 desktopBrowse your folders for the document or image

And click openThen click upload after selecting the folder you want it to be

place in

Select folder Click upload

Page 6: Webme Slide Tutorial

Placing an Image

Place your curser where you want the image to appear and click on the image iconA 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 imageBorder: Place a border around your imageHspace is placing a white area to the left and right of the imageVspace is placing a white area to the top and bottom of theimageAligment-Left: Lets you wrap text around the image where the image is placed left on the pageIf you need to ajust this at a lter stage doble click on your image and this popup will appear again

Page 7: Webme Slide Tutorial

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 wellCell Padding places a white spaceIn side each cell

Cell Spacing places a white spaceOutside each cell.

Place your curser where you want your table to appear and click on this icon in the toolbar

Page 8: Webme Slide Tutorial

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

Page 9: Webme Slide Tutorial

Page TypesA brief description

You can change the function of a pageBy 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.

Page 10: Webme Slide Tutorial

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 messageIf you get this message go to the form fields tabs andAdd an email field by changing the type to email

Input box: is a box where only one line is needed ie nameText area: When more than one line is need ie and address or commentsEmail: 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

Page 11: Webme Slide Tutorial

News pages and feeds

This page has been converted into a news page

Any normal page 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 templateSo 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

Page 12: Webme Slide Tutorial

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-downAnd click the Update Page Details button

A popup window will appear which is your desktopbrowse 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 captionThis popup window appears just type in your image caption and then click edit

Page 13: Webme Slide Tutorial

Panels and their components

These are your panelsThe next slide shows your the positioning of your panels

Panels can be accessed along the top navigation bar underMisc > Panels

Page 14: Webme Slide Tutorial

Navigation area

Banner Panel

Footer Panel

Left Panel

Content

Right Panel

Middle Panel

Councils Panel

Bread Crumbs

Top Panel

Panel Positions

Page 15: Webme Slide Tutorial

You need to click on a panel to open it

Then click on a widgetAnd drag it into the Panel Please name your widgets

For easy reference

How to Open and add plugin widgets

Page 16: Webme Slide Tutorial

Open a Widget here and edit it like a normal page

To make it visible on a particular page click here and choose the pageIf 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

Page 17: Webme Slide Tutorial

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