MANUAL

All the doumentation of this web site is licensed under a Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Unported License

W3studioCMS manual

W3studioCMS is a web application you can use to manage a website through a full ajax interface. You can interact with the program interface to add pages, languages, contents without the pain to reload the page. A user that visit your website browses the page you've created using the CMS which resides in a restricted area. To enter in the backend you have to sign in, providing a username and a password. As mentioned above the interface is totally managed through ajax, so contents are edited in place, languages, pages, metatags are added directly on the page and you can really see what you are doing in real time.

Users and signin

The standard installation of W3studioCMS comes only with the administrator user. To signin type:

  • User: admin
  • Password: admin

Remember to immediatly change the administrative passwords when you go to production. Refer to "User management" paragraph to learn how to do. To enter the backend, click the "Edit site" button, choose the admin user and sign in.

The interactive menu

After you signed in, W3studioCMS loads the same page you were browsing. Now you are ready to start editing your website.

It's very easy to understand how the editor's interface works. When you move the mouse cursor through the page, you will notice that when the cursor pass over a content that is editable, the content is surrounded by a sort of rectangle that usually has two icons on the left side, but sometimes that icons are displayed on the right side, depending on the content's position on the page. This is the tool used to add, edit or delete a content in the page, and it is called Interactive Menu.

Page structure

Every page comes with a template that must be designed using the x-html markdown language. To use W3studioCMS you don't need to know how to design a template using that language, but if you want an unique design for your website and you don't know how you can design a new one, you can ask a web-designer to draw a new one for you.

To use the CMS, the only information you need to know is that every html element that constitute the template can be edited directly with the CMS, by a special configuration which is well explained in the ######## chapter. This element can contain one or more contents inside, but it is possible that some elements haven't any content inside, because they are used only for design purpose. When an element is editable is called Slot.

Add a new content

To add a new content you have to highlight it and click the icon with a plus image on the Interactive Menu. This operation opens the menu that contains the available types of contents you can use on your website. Choose the content you need by clicking the appropriate type. The content is added under the content you have highlighted.

When you delete all the contents from a slot an icon will be placed inside the slot to let you insert the first content. To add the content from this icon, you have to do the same operation you made for a normal content, so click the image to open the content types' menu and choose the one you need.

Delete a content

To delete an existing content, highlight it and click the button with a minus icon in the interactive menu. You will be prompted to confirm your request. Press the Ok button to confirm the content deletion.

Edit a content

To edit an existing content, highlight it and click inside the area of the Interactive Menu. W3studioCMS will open the appropriate editor to manage the content you chose.

Text editor

W3studioCMS uses tinyMCE as default text editor. This tool will give you the ability to manage a text using an editor that is very similar to Microsoft Word or Open Office Writer, so if you know how to use one of them it will be easy to use tinyMCE. Infact it's very easy to format your contents with bold, italic, underline and similar formatting commands. But there's a big difference between this editor and a document editor like the ones named before: this is a web editor and manages different elements than the ones managed by a word processor and it manages them in a different way. For example you can set a link that points a page that belong the website or you can set a link that points an external site, you can insert an image but it can be positioned only in some standard positions, you can set titles but they are already formatted with a predefined format that comes with the template you are using. This can sound not very encouraging but with a little bit of practice, it will be very easy to use.

Scripts manager

This tool let's you insert a script into your page. The script can be everything you want: it can be a javascript to make a special behaviour on your page, for example the moving pictures you can see in the homepage of the W3studioCMS website, or you can use a code from another website, for example the google's ad-sense link as you can see on the right column of the W3studioCMS website, or a PHP code to have some dynamic contents on your page for example a products' list read from a database.

The interface is very simply: in the textarea field you can write or paste the code and then insert it into the page with the appropriate button. Notice that the result of that script is not displayed on the page but it is replaced with a standard image. When the page will be published it will be displayed. If you want to see it you can enter in preview mode. This will be discussed straight forward in this chapter.

Image editor

As we examined in the Text editor paragraph, an image can be inserted into the content directly with the text editor tool, but this behaviour belongs to the specify editor and every editor can manage this function in a different way. For this reason when you need to manage a single image, for example it can be the logo of your website, it's better to use this tool instead the text editor. This editor has several sections: in the top there is the toolbar which contains the buttons needed to manage the image, under it there is the image's list which contains all the images uploaded. In the middle there is the image preview box and on the right there is the property box. Let's start examining them.

Toolbar

The toolbar has three bottons:

  1. Upload - Upoads images from your hard disk to web site

  2. Delete - Deletes an image from your website

  3. Insert - Inserts the image into the page

Upload an image to the website

The upload button transfers an image from the hard disk of your PC to the website. When you click this button, the upload tool will open in a new window. Click the browse button to choose an image from your hard disk, then click the upload button to transfer it to the website. This tool can upload several images once in a time, so you have to choose more images than one with the browse button than upload them.

This sounds really simple but a technical note is required. Let's suppose you take a picture with your photo camera that represents the new article a customer can buy in your shop. Usually a photo made with a camera has an higher quality. This means that it uses a lot of space on the hard-disk, so its size is very big. This can have a bad consequence on performances if you don't threat that image before uploading.

Infact if you transfer the image to your website without any modification when a user loads the page that contains the image, a long time is required to display it because the size is too higher. You can get some problems in the backend too. After you uploaded it into the website, and you insert it into the page, you will immedialty understand that it takes a lot of space into the web page. You can made a trick to bypass this problem, so you can decide to delete it and to use the Text editor to insert the image inside the page. It appears very big inside the text editor too, but with this tool you can resize it using the handles that surround the image. Now it fits! Ok, it's done you think, but that is a great mistake, because the resize operation you made in that way, has changed the image's width and height, but not the size that remains the same.

The only way you have to prevent that behaviour is to resize the image before transferring it to the website, using a free image editor like Image Resizer to correctly resize the images. After that operation you can safety transfer the image to your website.

Usually an image should haven't a size bigger than 40Kb.

Image editor

Choose an image

The image list in the left of the panel contains all the images uploaded in your website. Every image is represented by small preview and reports the image name, dimensions and size. You can choose an image simply clicking it. When you choose one, it changes its background colour to indicate that the one you have chosen is the current image selected, it is showed into the preview box with bigger dimensions and its properties are displayed.

Preview window

In the preview window is displayed the selected image with a large size. If it is too big to fit into the window it is automatically resize to fit into.

Properties

The properties box let's you change some attributes of the selected image. Some attributes, like size and dimensions, cannot be modified and they have only an information scope.

Title and Alt attributes

These attributes are hidden attributes so if you set them nothing is displayed on the screen, but they are very important because they are internally used by the browser to describe the image for people that have some handicaps. For example a blind person cannot see the image but he can understand its scope if these information are provide, and these twos have this pourpose. If you don't provide them your website won't match accessible parameters. You can use some free tools to test the accessibility of your website as the w3c validator. To set the atributes simply type a descriptive text inside the input box. The descriptions you enter are saved when you insert the image and displayed again when you choose it.

Link an image

Sometimes is useful to link an image that point an url address, so the user that visits your website can reach an internal page or a page of another website when he clicks it. Every image you insert can be linked to get an internal page, choosing it from the "Int. link" combo box or typing the url to reach to an external site into the "Ext. link" input box. Take care that one option exclude the other. This means that you can set an internal link and an external link both together.

Insert the image into the page

To insert the image into the page simply choose it and click the insert button after you have selected it. When you open an image that you have been already inserted, its background will be coloured in Gray and the saved properties will be automatically loaded.

Menu builder

Menu builder is the editor used for building the navigation menus, that are used for moving through the pages of your website. A navigation menu is simply a list of links and this tool manages exactly this kind of elements. A link is made by two elements: an address and an element that represents it. This element can be a text or an image. This tool has a main section on the left where the links are displayed, while on the right there are the link's properties and some other options that will be examined in the next paragraphs.

Adding, editing and deleting links

In the main section there are displayed the links that build the menu. Every row represents a single link. To add a link click the add button placed under the list of links. This operation adds a new row, which represents a new link, to the list. To edit the link you have to provide the address to reach and the representation element of the link on the page. Click the link you want to edit. The backgroung changes to indicate that the one you have selected is the one you are editing. Its properties are displayed in the properties box on the right.

A link that may be represented by a text or by an image and this image can have a rollover image, which is an identical image to the first which usually has different colours to display it in a different way when user puts the cursor over it. If you want to use a textual link type something in the "Link" input box, for example type Home page. The destination, so the url to reach, is setted choosing the internal page from the "Int. link" combo box or typing the address of an external page in the "Ext. link" input box. Let's assume that there is a page called index in your website. Choose it from the combo box then click the save button in the bottom of the editor. This last operation saves the menu into the page.

In detail, what you have done, is that you have created a link to the index page of your site, and it will be displayed on your page with the text "Home page". If you want to use a menu composed by images you can click the three dots button placed on the right of the "Image" input box to open a window where you will find all the loaded images in your website. Choose the image you want and click it: it's name is written into the input box. That's all. But if you want that the image changes when the mouse is placed over it, you need a second image, a rollover image, that is chosen in the same way explained for the main image. You can change the position of each single row simply dragging it and then dropping where you need. You can delete a link choosing it and press the delete button.

Sometimes, when you browse some websites, you will notice that in a navigation menu the link that represents the current page is highlighted in several ways. You can do the same effect with W3studioCMS, using the options provided in the Options box. To deeply understand the way to create this effect and how these options works, it is necessary understand how a link is made behind what you see on the page, inspecting the x-html code. If you already know how it's made, you can skip the next paragraph.

Menu builder (pt. 2)

Additional options - How a link is made

The first thing I said is that a navigation menu is simply a list of links. What does it means? It means that every link that compose a menu is coded as follows:

<li><a href=[address]>[Element]</a></li>

I know it can be difficult to understand if you don't know anything of x-html, but I try to explain what you need to know. The LI element, coded by the LI tag, represents one row of a list of elements, the A element, coded by the A tag, is the link. Every tag can have some attributes. As you can see, the tag A has the attribute href and the LI element hasn't any attribute. At this point you can understand that the [address] is the address of the page to reach when the link is clicked and the [Element] is what you see on page to represent the link. It is contained between the element, so the content of the LI element is all the A tag.

Highlight a link

To make the effect we talked about on the head of this paragraph, we have to assign a class that changes the aspect of the displayed link. A class is a CSS rule that formats all the elements which it is assigned. A class is defined in the template, and when there are some classes available, they are displayed in the "Set as active class" combo box. So if there are some classes available, we must decide if the class has to be assigned to the LI tag or to the A tag, using the "Assign active class to" combo box. This because the displayed effect is different if the class is assigned to one tag or to the other and depends on how a template, and more in detail, how this class has been implemented by the web designer. So if you haven't designed your template, ask to the person that has designed it, or simply try.

The last available option is "Set the class on each page". When this option is checked the class is assigned to all the pages that constitute the menu. I will explain this concept in detail with an example. Suppose that your menu has three pages: Home, Products, Contacts and every page has to be highlighted when the user is browsing that page. The operation you should do to highlight the link, is to enter on every page and manual assign the class to the link that represents the browsed page. For example if a visitor is on the Products page, the link must be formatted with a different style to indicate that "Products" is the current page. This can be made when a menu is small like that, but can be very boring when you have to manage a menu with several links. This option does automatically this job for you.

Menu manager

At the top of the page there is placed the main menu, that is called Menu Manager and contains all the commands you need to manage your website. It is contained into a particular box which can be opened by clicking the tab which contains the Menu Manager title. When you scroll down your page it still remains in that position so you can have it always on hands.

The default buttons for the Menu manager are: User interface, Themes, Move, Preview, Publish, Logout.

User management

W3studioCMS has implemented a user management strategy based on the sfGuardPlugin, that gives the ability to the website's administrators to assign the rights on the several functions of the CMS to the users that can edit the website. There are four types of users, the administrators, the publishers, the web-designers and the editors. The administrator user has the total control on the website. He can do every operation on website. For example only an administrator can add users and sets their rights. The publisher user can edit the website and publish it. The web-designer user can edit the website and add new projects to the site. The editor user is placed at the low level of users rights and can only edit the website.

Themes

A theme is constituted of a set of templates which represent the graphic layout of your website. This module gives you the ability to load new projects to change the graphic of your website or upgrading the theme you are currently using. W3studioCMS comes with the Jet30 template and you can use it to test the CMS, but for sure in a meantime you would change it with a new one for your site.

W3studioCMS supports x-html templates and you can learn how to design a new template and pack it to be loaded and used with W3studioCMS, reading this tutorial. When your template is ready to be used, click the "Import template" button to open the upload window. The tool used for loading the templates is the same used for loading the images, so it will be easy to use it to load your project. Upload the zip file and close this window. W3studioCMS loads the project and list it in the main section of the project's import interface. At this point the theme are not usable yet, because you have to add it to the CMS. Click the Add button placed near the template name to add it to the website.

You can make some changes to your theme so you need to upgrade the theme. First you have to import the theme as you make for a new theme, then a new button "Upgrade" will be available. Click it to upgrade the theme.

Control Panel

The Control Panel is the interface used to manage languages, groups and pages and all the elements related to the website, like slots and metatags. To open it simply click the Control-Panel tab always positioned on the left of the page. The Control Panel is composed by several sections that will be explained in detail in the next paragraphs.

Languages section

The first section contains the tools needed to manage the website's languages. All the website's languages are listed in a combo box. To change the current language select the desidered one and click the button Change.

To delete a language select it then press the Delete button. You will be prompted to confirm your decision. When you delete a language, W3studioCMS will delete all the pages that belongs the language, so be careful when you use this function.

To add a new language click the Add button and the interface opens in a new window. A language is made by the language itself and the country, so to properly define your language, you have to choose both of them. Down below this input box there is the Main language check box and if you check it, the language you are inserting will be used by W3studioCMS as the first language displayed when a user open for the first time your web site. To confirm the operation click the Add language button. For sure you notice that there is a message under that button that informs you on what this command does, so it copies all the actual Main language's contents and assign them to the new one. This will help you to translate it from the Main language. This operation can take a while. If you are working on a site which has a lot of pages, this operation can be slowly.

To edit a language you have to select the language from the combo box and click the edit button. The interface is the same used for adding a content but when you edit the language and the country are already selected. Notice that if you are editing the Main language of your website you cannot relegate it to a normal language. The only way you have to change the Main language to normal language is editing the language you want to promote as main language.

File manager section

You can browse the pages stored in the CMS by clicking the tab File manager. Here you can add groups and pages to website, moving through the existing pages and choose to manage them.

Groups section

A Group is a container of pages. It is an abstract element, where abstract means that it is not an element you can see in your web page, but to insert a page in W3StudioCMS you must assign that page to an existing group. Every page inherits its layout from the group which it is assigned. In fact in W3StudioCMS the templates are not assigned directly to pages but they are assigned to groups.

For example if you browse the W3studioCMS website you can see that the home page has one theme and all the other pages has a different one. This is because the home page belongs to one group and the other pages belong to different groups. In this specific case that is easy to see and understand: the templates are different and for sure they belongs to different groups. But you can use the same template for different groups, in fact the W3studiocms-manual belongs to the gr_documentation group, while the Download page belongs to the gr_download. This architecture is very useful because you can create different areas to talk about a specific argument and every area is represented by a group. In this way is simple to create menus for groups of pages, as you can see in the W3studioCMS' website.

The groups manager interface is placed under the file manager. All the website's groups are listed in a combo box.

To add a new group click the plus icon and the interface opens in a new window. The first information needed is the group name that must be unique in the website, then you have to choose the template the group's pages will use from the "Template name" combo box. Click the Add button to complete the adding operation.

To delete a group choose it from the combo box and click the minus icon. When you delete a group W3studioCMS will delete all the pages that belongs the group, so be careful when you use this function.

The function used to edit a group is not implemented yet.


Page 1 | 2 next >