Creating Templates with Artisteer: Why pay for a professional website when you can do it yourself with this hands-on guide to Artisteer? With no need for HTML, web-programming, or drawing skills, this book is all you require to create fantastic CMS templates.

A hobbyist is somebody who wants to have a website because of his/her private passion. It's not his/her job, it's not his/her business, he/she won't gain any money on it. It may be a private blog on Blogger or WordPress, or just a simple family website, often based on the cheapest hosting service possible. For such a person, hiring a professional web development company or freelancer is usually not an option because of the cost. Usually, the only available option is to try to prepare the page on his/her own (the results will be adequate to his/her skills), or to buy a ready-made template (accepting the fact that there are a lot of different websites that look the same). Artisteer gives such people a third option: buy the program and prepare a unique and good-looking site all alone. The cost will be less than the usual price for a ready-made, standard layout on the market.

A designer is an artistically talented person who can use the graphics editors and create good-looking designs for web pages. In a team, a designer usually does the first stage of work, creating an overall concept of how the site will look, and preparing the graphics. While a designer is good at drawing, he/she can't code. To create a website a designer needs the help of a web developer. But with Artisteer, he/she can design the template and enrich it with his/her own custom graphic elements, which he/she can prepare. He/she can even enter the content and transfer this all into a CMS skin, offering the end user a complete solution.

The frontier that divides web developers and programmers is often very thin, and various companies use different names for the same jobs. In this book, we assume that a web developer is someone with the skills for creating HTML/CSS code. Additionally, he or she often has good knowledge of administrating the CMSs, can install and configure various extensions, and is able to prepare the whole website, including stylesheet modifications, as there's no requirement of individual programming. The programmers are usually "next-level web developers", with programming skills. Usually, they code the core of the CMS systems or its additional functionality (create extensions). In short, we can assume that a web developer is someone who builds websites using the things that a programmer codes.

Web developers and programmers are able to build the whole website on their own, if not for one problem—they can't draw. They may be great technicians, but not graphics designers, and even the most technically advanced site without graphics does not impress anybody. That's why they often use ready-made templates as a basis for further work. The problem arises when there is a need to modify not the functionality, but the look of the site. In that case they have to cooperate with the designers.

Designers are the people who have an artistic taste. They can assess what looks good and what doesn't, even if they couldn't draw it on their own. Artisteer offers them the possibility to design a template independently, by determining the look of the site and its various elements, by changing their parameters such as colors, position, size, and so on. As you will see later, working with Artisteer resembles a situation wherein the designer is sitting next to you, listening to your suggestions, making the changes on the fly, and presenting the results immediately.

One of the main reasons that people work together is that nobody is perfect, nobody possesses all the talent. It would seem that for an individual, Artisteer may be a good option, because it allows him to avoid cooperation (which can be costly) with other specialists and to create the whole project alone. But in case of a team consisting of people with different complementary skills, there's no need to use such a tool at all. Based on my personal experience, I disagree with such a thought, and I can quote several arguments to support my words as follows:

The previously discussed examples of why Artisteer can be useful for various groups of people doesn't mean that everything can be done with Artisteer, of course. For example, you can't add any logic to the site, as this would demand a programming work. Similarly with the graphics, even the best automated generator won't replace the real artist. Like with every other thing, the custom and handmade products are the best, and websites are not an exception to this. For example, cars. Do you agree that a representative, handmade limousine, or a sports car is better than a popular compact from serial production? You probably do, but do you have a handmade sports car? Millions of people everyday drive the cheap compacts to commute, and they are pretty happy with it. Price is the factor. The same is with websites.

After you start the program, the first screen you will see is a window titled New Project. Here you can decide whether you want to open a previously saved project, or start a new one. The main part of this window consists of three rows. In the first row you can filter among the available, pre-made templates (if you want to start by modifying one of them). The pre-made templates are presented in the third row, according to which category and sorting rule you choose.

The second row always contains only one icon. Click on it when you want to start with a Blank template and style everything from scratch.

In the column to the right-hand side of the window, there is a list of recently opened projects, as in the following screenshot:

The startup window in Artisteer

You may say, "Wait a minute! You have said that in Artisteer I can design not only static websites, but also templates for various CMSs. Where can I set up what exactly I'm going to do?" Yes, you are right. What's more, in the previous versions of Artisteer, there was an additional field in the startup window where you could set it up. But with the current version, you don't have such an option. It's not a restriction of functionality, but rather a change in the philosophy of working with the application. You are just designing, no matter which platform you will choose later. That's because you choose the platform at the end, not at the beginning. It also highlights the fact that Artisteer enables you to focus on the design, and not the platform that you choose. Think of design as something that is platform independent.

Because we want to start with a blank template, let's click on the solitary icon in the second row. Artisteer will load its default data. In the following steps we are going to turn it into our custom layout.

What you see in the next screenshot is Artisteer's default interface. If you're familiar with modern applications, you will feel right at home. The main menu is in the form of a ribbon (introduced in Microsoft Office 2007), and the main options, such as Edit, Colors & Fonts, Layout, Content, Background, Sheet, Header, Menu, Blocks, Vertical Menu, Controls, and Footer correspond to the main stages while designing a layout (we will talk about those things in detail in the next chapter). The first option, called Home, contains the options that affect the whole site in general.

Are you a little bit confused about how to start? Don't worry! Before we use the more advanced options, we will start with a very simple and intuitive tool: the Suggest Mode function.

Program interface

Suggest Mode is a function that suggests a look of the element you are currently working on. Because the Home tab refers to the scope of the whole project, using this function at this level suggests the whole design with all the dependent elements. Let's click on the icon. It's the yellow bulb, first on the left, with the Suggest Design label.

The whole design has changed. Amazing, isn't it? It's not just switching to the next available template from a collection. When you clicked on the icon, Artisteer generated a whole new layout, consisting of randomly generated elements. What you see is unique. If you don't believe it, you can very easily test it on your own. Just restart the program and try to do it once again. You will probably never see exactly the same layout twice.

Click over and over on the Suggest Design icon, until you really like what you see.

At any time, you can see the live preview of your project in the browser. To get it, perform the following steps:

After a while the selected browser will open, showing your project in its current state. Look at the address bar. You will notice that what you see is a real HTML file that was generated by the program (in your system's temporary directory). It's important because you can be sure that you see exactly the same file that will be generated while exporting the project.

If you are satisfied with the project, double-click on the Enter Site Title text (sometimes it can also be Best Idea or something else, but it's always the biggest text in the header). You will see the blinking cursor, like in any word processor. Delete the text and type Hello World!. Do the same with the site slogan below the header, replacing the original text with My first Artisteer template. After you have finished typing, just click on any other element to apply the changes.

On the left-hand side of the screen you can see a panel named the Pages section. That is where you define the number and titles of pages your entire site contains. Please note that the content of this panel is strictly connected with the menus in your project. By default, every project has two menus—a horizontal and a vertical one. Both the menus are pretty interactive even while designing. For example, if you move your mouse cursor over the first position of the horizontal menu, it will expand, showing all containing subpositions. The vertical menu behaves similarly, but you must click on the position to expand it.

When you click on the menu item, the corresponding page in the Pages section on the left panel will be selected. The panel presents all the pages in the form of a tree. You can click on the little triangle on the left of the Home page to expand its child elements. You can observe that at the beginning, Artisteer creates both the menus with two positions in them, and the first position contains tree subpositions.

Pages are presented in the form of a tree, showing the structure of the project

A small website usually has only one menu—vertical or horizontal. If there's a need to use two (or more) menus, the first one is usually the main menu, and the second acts as its subordinate, displaying options on the lower levels. In our first project we don't need two menus, so we will preserve only the horizontal menu.

Let's change the titles of the menu's positions and the titles of the subpages of the site.

In the left panel, do the following:

The structure of your project should now be as shown in the following screenshot:

Structure of our project after changes

The structure of menus has also changed according to the changes we made. The horizontal menu should look like the following screenshot:

Horizontal menu immediately presents the current structure of the page

Now, click on the Vertical Menu group on the ribbon and click on Position. A list with the possible positions, where the vertical menu can be displayed, will expand. The vertical menu is displayed as the filled square. Let's choose the first option called No Block. This option does not display the vertical menu at all:

We set the vertical menu to not be displayed

Ok, we have finished our first design. It didn't take more than 10 minutes, did it? If so, try to do it once again. When you know what you're doing, I'm sure you can do it this time even more quickly.

You should archive every project (since you know that an Artisteer project not only contains a design, but also the content, we should call it a project rather than just a template) you have made. This simple principle may sound trivial, but there are many reasons to follow it, as follows:

In all of the discussed situations, it will be suitable to have a copy of your work to modify or restore the website. The simplest (and I think the best) way to achieve this goal is to save the project in the native Artisteer binary format. That's right. Although Artisteer generates the templates as a set of HTML/CSS/JavaScript/PHP files (or one ZIP archive), it also has its own native binary file with the .artx extension. Those files contain all the components of your project design and its content.

To save your project, click on the icon on the shortcuts menu on the ribbon, or expand the File menu and choose the Save or Save As… option. Then type the name of your project, set the target location of the file (the default saving path is C:\users\YourUser\Documents\Artisteer Templates), and click on Save.

Note that Artisteer shows a list of the recent projects on startup; so the next time you start Artisteer, you will see your project on the list.

As I mentioned earlier, if you choose to store your projects in the form of HTML files, you can't open and edit the project with Artisteer anymore, and you'll have to code all the possible modifications manually. Even if you have a good understanding of how to do it, you can be sure that manual coding takes a lot more effort and time than working with Artisteer. There is also one more reason in favor of choosing the native files for your archive. The .artx files are independent of the CMS platforms. Let's say you run your site with WordPress and want to port it into Joomla! (or vice versa). No problem, you just open the .artx file and export it once again, choosing Joomla! as the target. If you had only the exported template files, to do such a migration, you would need to recode the whole template. Of course, here we skip the situation that you work on a more complicated project, in which Artisteer is used only as a middle tool, and the exported template undergoes further modifications to add some additional functionality. But in such cases, I'm sure you will decide to archive everything possible, for example, .artx files, source graphic files, read template, and so on.

Now that we have designed and saved our project, it's time for exporting. To export the project, click on the Export icon on the shortcuts area of the ribbon, or choose File | Export | Website Template from the menu. We are going to export the project as a Website Template form. What it means is that this will be a static and normal website, not powered with any CMS system.

Exporting a project

In the window that appears as shown in the following screenshot, we have to set some parameters:

In the Export window, you set up export parameters

Before we click on the Export button, we navigate to Options (click on that button). By default, Artisteer inserts a note in the footer, informing that this template was created with Artisteer. Since this is a clever marketing move from Extensoft (the company that produces Artisteer), in most cases you will not want to include such information.

In the Options window, click on the last position on the left-hand side (Footnote) and uncheck both the Include a backward link to the Author and Include backward links to the CMS and the Artisteer options as shown in the following screenshot:

Remove the note about Artisteer,that is, Created with Artisteer, from the footer

Click on OK to return to the previous window, and click on Export to export the template. After a while, the process will be finished and you will find a new folder on your desktop: myFirstTemplate.

Congratulations! You have just designed, saved, and exported your first template in Artisteer. Open this folder and double-click on the index.html file. After a while, you'll see your site in your default browser.