Welcome to EasySite!

This tutorial will help you get started with the EasySite Content Management System. We'll create a very simple website, but you can use your own images and content, of course. A few months ago I created a website called "Taylor Professional Services" for one of my friends, and I'm using the that site as the example here. You can see the finished result at www.tps-inc.net

This tutorial assumes that you have already uploaded your files to your server using FTP, and you have already run the installation wizard (install.php). If you have not done so already, please review the installation tutorial. Also, after installation, you should be sure to delete the "install_files" folder, and the"install.php" file, or your site will not be secure.

During installation you inputted an admin username and password. This is the login that you should use to login to the content management tools, which are located in the "manage" directory. For example, if you installed EasySite at:

http://www.your_domain.com/

Then, your admin tools will be located at:

http://www.your_domain.com/manage/

Or, if you installed EasySite in a sub-folder, for example at:

http://www.your_domain.com/easysite/

Then, your admin tools would be located at:

http://www.your_domain.com/easysite/manage/

After login, you should see the Content Management Tools main page. The first things that we'll do is change the background template images. Then, we'll remove the two floating layers with "EasySite" and "Content Management System". Finally, we'll modify the menus and pages, which together comprise the bulk of the content on our website.

First, let's use the Layers tool to remove the site title and sub-title. Choose "EasySite CMS" from the Layers tool combo list, then click Continue. I've pointed out a few basic settings in the Layer tool, but the best way to learn about this is simply to experiment with it.

Scroll down to the bottom and then click the "Delete" button. The system will ask for confirmation of the deletion.

After you do this, the "EasySite Content Management System" text will disappear. EasySite is called the "Designer's Content Management System" because it allows near-infinite design flexibility. The layers tool allows you to position anything - text or graphics - anywhere that you want, including on top of other layers by changing the layer z-order.

At the top of the Layer tool, you will find some links that probably look like this (may differ slightly depending on the EasySite version that you are using). Click on the "Admin Index" link to return to the Admin index (the /manage folder index).

On the Admin index page, scroll down to the "Global Settings" option, then click Continue. We're going to change the template images - i.e., those blue borders that you see on the left, right and bottom of the page, as well as the image that appears at the very top of the page.

Then, within the Global Settings tool, click on the "Edit the Template Layout" link, as shown below.

There are 12 template sections altogether. We're going to edit each one separately. For each of the following template sections, you will delete the template image: A3, A4, A6, and A7. To do that, click on the appropriate template section link, then click the Remove" button to the right of the "Background Image" option, as shown below.

As you do this, you will see the template images will start to change. For example, when the A3 section image is removed, the bottom right corner image disappears, as shown below. Repeat this for the image sections specified above (A3 - A8, but not A5).

You should also remove any background colors from these sections. For example, in the A7 template area, the default background color is #999933. For this tutorial, we'll remove it since we want the template sections to use the screen color instead. Thus, your A7 Area Settings will look like this (be sure to click "Submit Updates" after deleting the Background Color):

Ok, now that we have some template section removed, our next step is to update some template sections so that we can apply our new site design. For the primary design template, we'll use the JPG image shown below. You can copy this image to your computer's desktop for uploading to EasySite. Of course, you should ultimately use your own template design.

First, go to the A1 Area Settings, then upload the backgroud JPG image, and ensure that "BG Image Vertical Repeat" and "BG Image Horizontal Repeat" are both set to "no". Also ensure that Width and Height are at 100%. After clicking Submit Updates, your website will look something like what I've shown here:

Of course, this is quite ugly... but we'll fix it now. The first step to fixing the template is to add horizontal and vertical "color bars". What is a color bar? Well, it's an image that repeats along the X or Y axis. Here are the images that we'll use:

Horizontal	Vertical

Upload the Horizontal color bar to the A5 Area Settings, and be sure to use Z-index = 0, and Height = 100%. Then, upload the Vertical color bar to the A8 Area Settings, and be sure to use Z-index = 0, and Width = 100%.

Make the following additional changes:

1) In the "Footer" area, remove the "Background Color" property completely, as shown below.

2) In "Main Area" settings, remove the "Background Color" property completely, and change "Horizontal (x) offset of main body" to 200. Also change the "Vertical (y) offset of main body" to 130. Removing the background color will make the page text difficult to read (since it will be black on blue), but we'll fix that soon.

3) In the "Visible Area" settings, change the "Background Color" property to "#082D73" so that it matches the background blue color of our A1 Area background image. Also change the "Width" to 100% in the Visible Area settings. Change the "Height' to "At least screen height".

You may need to refresh your browser window after saving to observe all of these changes in effect.

After making all of these changes, your template should look like this. You'll notice that there are no more "white areas" - all template colors and background images should fully extend horizontally and vertically. You'll also notice that the template is left-aligned now. That is because our Visible Area width has been changed to 100%, although there are other ways to accomplish the left-alignment.

At this point, we really need to change two things: text colors and the menu. Let's make the text white, so that it shows up better against a dark blue background. Go to the Admin index (using the top navigation links), then click on "Styles". Of course, the text is still black at this point, so the text is a bit hard to read.

Change the normal, small, subtitle, and title font colors to white, so that they show up better against the dark background, then click Ok to save your changes and see the result. For this example, leave the input, select, and textarea styles black, since we're not changing the field background colors here. For the anchor "a" tag, use a light-blue, like 88AAFF. The a:hover style refers to what the text will look like when the mouse hovers over the link.

Now, return to the Admin index, and click on the Menu Manager tool. This tool allows you to easily change the left-side menu content. The asterisk (*) adds a menu item, and "x" deletes the menu item. <, >,and ^ are used to reposition existing menus. It's fairly self-explanatory, so go ahead and test this out for yourself. Be careful that you do not delete the entire menu, though! This is a very powerful menu tool, which allows you to add and configure infinitely-many DHTML menus.

Click on "Edit Settings" to cofigure the settings for the menu. Change the following values to achieve a design similar to the tps-inc.net menu:

Menu Text Rollover Color: #00FF00
Menu Text Rollout Color: #FFFFFF
Menu Border Color: #0000FF
Background Rollover Color: #000000
Background Rollout Color: #000066
Font Weight Rollover: bold
Font Weight Rollout: bold
Font Size Rollover: 8
Font Size Rollout: 8
Menu Shadow Size: 7
Menu X Position (pixels): 4
Menu Y Position (pixels): 130
Menu Item Width (pixels): 180
Menu Item Height (pixels): 35
Menu Item Padding Left (pixels): 8

At this point, you can fill in the page content. Use the Page Editor to change the page sections. I've included some comments in yellow to help you better understand what these various options mean. Since the EasySite installer adds a lot of sample content in the form of many page sections, it might be faster for you to simply delete the existing pages, then re-add them.

In the tps-inc.net site, we'll have 4 pages with static data, and one form. Go ahead and use the Page Editor as needed so that you have all of the pages that you want. Our pages will be: Home, Who We Are, Our Services, and EH&S Web Links. The Contact Us menu item will link to a form, which is created in the Form Editor.

I strongly recommend that you name your pages as you create them, so that you can easily identify the pages later, when you have to link your pages to the menus. At the top of the page tool, you can also set META keywords to improve your search engine results, and quickly view which menus link to the page.

Take some time to create the various pages of your website. We haven't actually linked the pages to anything at this point, so to test your pages, you'll need to click on the URL link below the Page Title field. Once you have the pages that you want, you can link the pages to the left-side menu. Return to the Admin index, and click on the Menu Manager Continue button.

In the Menu Manager, you will use the "Link to" combo box to link the menu items to the pages that were recently created. If you named the pages well, then this will be easy to do. The page names appear after "page - ", and the form names appear after "form - ". You can also link to external URLs using the "new url" option, and to module categories using the "new module category" option. For example, if you have set up an e-commerce product gallery, you can link any menu to a gallery category.

The last feature of our web site is to add a few layers. The tps-inc.net website has an interesting feature: drop-quotes below the menu, which change depending on the page which is being viewed (i.e., the text below which starts with "A well managed..."). How is this accomplished? Click on the "Layers" tool.

In the Layers tool, add a new layer with the drop quote text, and position the layer below the menu. In my example, I used this text:

"A well managed EH&S program can reduce the cost of being compliant, improve employee morale, and enhance the business' marketing image. "

... with these settings ...

Top Offset: 300
Left: 10
Width: 180

Also, I created a new style in the Styles tool called "Italics", which is italic, slightly smaller, and light-blue text.

Since the "Edit Layers Visible on" is set to Home Page, this layer will only be visible on the homepage. You can now create additional layers, for each page on your site... i.e., each page can have a different quote below the menu, since the various layers have different visibility settings.

Ok, we're done! We now have a custom design with a powerful DHTML menu linked to the various pages of our site! You can see the result at Taylor Professional Services.

Good luck with EasySite,
Darren