So this is the last session on FreeSiteDesigner. If you have missed the first 2 parts, you can check them out here for part 1 and here for part 2. If you still do not have a hosting server for your website, you may want to sign up one from Bluehost. In this last part, I am going to show you some advanced functions to further customize your website.

Body Components

The body of each page consist of mainly three types of components – text, image and web tool. Web tool is like a javascript handler that allows you to plug-in a javascript tool to your website. For example, you can add a counter to your website. There are some pre-defined body layouts that let you re-arrange these 3 components on the page. To change the body layout, follow the steps below:

1. Select the page you want to change and click on “Edit Page”.
2. Click on the “Edit Body Layout” tab.
3. Click on the layout that you want and then click “Save”.

So you can setup a page that may contain all 3 components or just some of them. You can also customize the properties of background, font and links such as color and size. You can edit all these properties by clicking the “Edit Body Properties” tab.

Web Tool

The web tool component allows you to add any javascript codes to it. You can search on the Internet for some free javascript tools, copy the code, and paste it into the web tool component. For example, I went here and copied the code of a button for viewing the HTML source codes of a webpage. Below are the steps to insert the javascript codes:

1. Under “Edit Page” mode, click on the “add custom scripts” icon. If you don’t see the icon, then you need to change the body layout.
2. In the new window, click on the icon next to “Custom Scripts”.
3. Click on “Add new items”.
4. Paste the javascript code into the box and give it a name in the “Script Name” field.
5. Click “Save”.
6. Click on “Insert”.
7. You have now inserted the script. Remember to click “Save” to apply the changes.

Footer

The footer is very similar to the body. You can do pretty much the same things as you did for the body section. You can change the layout, change the properties such as color, font and background, and you can include a web tool as well. One tool you may want to add to this section is the counter. If you want all your pages to have the same footer, remember to check box next to “Apply this layout to all web pages’ footer”.

Sidebar

The sidebar is just another area under the menu where you can add text, image, and web tools. It is very useful for showing your visitors some tips, a quick view of your photos, or anything you can think of. You may also want to add a tool to this area such as setting up a poll. You can create a mixture of your like with the 3 components. You need to edit the sidebar individually for each page.

My FreeSiteDesigner Webpage

Here is what my FreeSiteDesigner webpage looks like before (left) and after (right) this tutorial. You can also check it out here.

So this is the end of my tutorials on FreeSiteDesigner. If you have any questions, feel free to let me know.

By the way, do you know any tools similar to FreeSiteDesigner that you have experienced with?