Web development (CMS) software based on XML / XSL



Home Screenshots Features Download Purchase Support

WebsMill lets you separate the content of your website (list of products your company sells, your company address and so on) from its graphical appearance (layout). Thanks to that your designs are very flexible and easy to change.

In this walkthrough, I will take you step-by-step through the process of creating a Google®-like website containing some of my favorite bookmarks.

Note: You can click on a screenshot to get an enlarged version.

I'll first take care of the content of the website by manually adding information about a couple of my favorite bookmarks. It's easily done using the simple graphical interface you can see on the screenshot.

As you can see, an entry about a bookmark contains its description, rank (how cool I think the bookmark is) and the address of the page to link to.

I'll now move on to creating the page that will display my bookmarks. This step is all about the layout - graphical appearance - of your web pages. On the pages created with WebsMill you can use all standard HTML elements (e.g. <table>, <img>) plus several WebsMill extensions.

WebsMill extensions to HTML have been designed to easily use your data on the web pages your create.

This is how the initial version of my web page looks like. As you can see it has a basic but quite neat graphical appearance. Note how it uses the red stars to display the rank of a bookmark.

I haven't added all my bookmarks yet, but after I do there might be hundreds of them. It would be useful to put them into different categories; I want my entertainment-related bookmarks to go together on their own page, web development bookmarks on another one and so on. On the screenshot you can see how I have added some content elements to categorize my bookmarks.

There still are only three bookmarks but it doesn't matter; what we are doing here is creating an infrastructure that will make adding more bookmarks in the future in breeze.

I will now change the original page that displayed all bookmarks to a page that will display only bookmarks in a given category along with the name of the category.

The layout page will be used as a template to generate a number of HTML pages; one per category.

On the screenshot you can see how a page containing links in "Web Development" looks like. You may notice that not much changed but now the page is just one of the pages for different categories.

As I add more categories the additonal HTML pages will be automatically generated and uploaded to my website.

Now let's create the main index page listing all categories there are. I have added a new page to the layout for this purpose.

The page contains links to all categories; the links are generated automatically so anytime I add a new category the new page will be updated automatically. And the links are sure to be valid. I don't want to have to manually check the links if they're right.

Here's how the main page looks like after the changes. Neat, huh?

I have imported some links from the Open Directory Project website using Xtreeme SiteXpert and put them into an XML file.

Then it's a piece of cake to import the XML file into WebsMill so that I have some neat number of bookmarks to play with.

This is the final version of the website after some more changes (mostly to the layout of the pages) containing all the bookmarks imported from the Open Directory Project website.

I'm ready! I will now upload all pages to my web server. This amounts to filling in the address of the server, login, password and path where the pages should be uploaded and pressing a single toolbar button.

The built-in FTP client takes care of uploading the website to the server. If I add more bookmarks later on it will upload only those pages that have changed.

You can see the final version of the website here.

Below you will find some of the websites created using WebsMill:

The ReadSell website is a library of free articles about marketing on the Internet:

http://www.readsell.com

The My Bookmarks website is based on the layout of the ReadSell website (just so you could see how flexible WebsMill is):

My bookmarks

Pages about one of our products, Xtreeme FollowUpXpert, has been created using WebsMill:

http://www.xtreeme.com/followupxpert/

Last, but not least, we have created the whole WebsMill website based on FollowUpXpert website layout (it took just one day to create!):

http://www.websmill.com/

Click here to see the feature list...