Creating a website with Artisteer

Exclusive offer: get 50% off this eBook here
Creating Templates with Artisteer

Creating Templates with Artisteer — Save 50%

Design professional-looking websites and CMS templates, on your own!

€13.99    €7.00
by Jakub Sanecki | April 2013 | Joomla! WordPress

The article, Creating a website with Artisteer, helps you develop a good-looking, professional website using Artisteer without the need to learn programming languages. This article by Jakub Sanecki, author of Creating Templates with Artisteer, explains the process of designing templates for websites using Artisteer.

(For more resources related to this topic, see here.)


The first thing that we should set up while designing a new website is its width. If you are interested in creating web pages, you probably have a monitor with a large widescreen and good resolution. But we have to remember that not all of your visitors will have such good hardware. All the templates generated by Artisteer are centered, and almost all modern browsers enable you to freely zoom the page. It's far better to let some of your visitors enlarge the site than to make the rest of them use the horizontal scroll bar while reading.

The resolution you choose will depend on the target audience of your site. Usually, private computers have better parameters than the typical PCs used for just office work in companies. So if you design a site that you know will be viewed mostly by private individuals, you can choose a slightly wider layout than you might for a typical business site. But you cannot forget that many nonbusiness websites, such as community sites, are often accessed from offices.

So what is the answer? In my opinion, a layout with a width of 1,000 pixels is still a good choice for most of the cases. Such width ensures that the site will be displayed correctly on a pretty old, but still commonly used, nonwide 17'' monitor. (The typical resolution for this hardware is 1,024 x 768 and such a layout will fill the whole screen.) As more and more users have now started using computers that are equipped with a far better screen, you can consider increasing the resolution slightly, to, for example, 1,150 pixels. Remember that not every user will visit your site using a desktop. Many laptops, and especially netbooks and tablets, don't have wide screens either.

Remember that the width of the page must be a little lower than the total resolution of the screen. You should reserve some space for the vertical scrollbar.

We are going to set up the width of our project traditionally to 1,000 pixels. To do this, click on the Layout tab on the ribbon, and next to the Sheet Width button. Choose 1000 pixels from the available options on the list.

The Sheet Options window is divided into two areas: on the left you can choose from the values expressed in pixels, while on the right, as a percentage. The percentage value means that the page doesn't have a fixed width, but it will change according to the parameters of the screen it is displayed on (according to the chosen percentage value). Designing layouts with the width defined in percentage might seem to be a great idea; and indeed, this technique, when properly used, can lead to great results. But you have to remember, that in such a case, all page elements have to be similarly prepared in order, to be able to adapt to the dynamically changing width of the site. It is far simpler to achieve good results for the layout with fixed values (expressed in pixels).

It is a common rule while working with Artisteer that after clicking on a button on the ribbon, you get the list containing the most commonly used standard values. If you need a custom value, however, you can click on the button located at the bottom of the list to go to a window where you can freely set up and choose the required value. For example, while choosing the width of a layout, clicking on the More Sheet Widths... button (located just under the list) will lead you to a window where you can set up the required width with an accuracy up to 1 pixel.

We can set the required value in three ways:

  • We can click on the up and down arrows that are located on the right side of the field.
  • We can move the mouse cursor on the field and use the slider that appears.
  • We can click on the field. The text cursor will appear. Then we can type the required value using the keyboard. For me, this is the most comfortable way, especially since the slider's minimal progress is more than 1.

Panel mode versus windows mode

If you look carefully at the displayed windows, on the bottom-right corner you will see a panel mode button. This button switches Artisteer's interface between panel mode and windows mode. In the windows mode, the advanced settings are displayed in windows. In the panel mode, the advanced settings are displayed on the side panel located on the right side of Artisteer's window. If you are using a wide screen, you may find the panel mode to be more comfortable. Its advantage is that the side panel doesn't cover anything on your project, so you have a better view to observe the changes. Such a change is persistent and if you switch to the panel mode, all the advanced settings will be displayed in the right panel, as long as you decide to go back into the windows mode. To reverse, find and click on the icon located in the top-right corner of the side panel (just next to the x button that closes the panel).


This article has covered some features exclusive to Artisteer. It has also explained a brief process of how to create stunning templates for websites using Artisteer.

Resources for Article :

Further resources on this subject:

Creating Templates with Artisteer Design professional-looking websites and CMS templates, on your own!
Published: March 2013
eBook Price: €13.99
Book Price: €22.99
See more
Select your format and quantity:

About the Author :

Jakub Sanecki

Jakub Sanecki is an experienced web developer and programmer, with over 11 years of experience. He was born in 1977 in Poland. In 2001, right before graduation (he graduated in company management) he founded Fregata—a company where he works until today, and took up his true passion, information technology. Starting with providing services related to a popular ERP system, the company evolved in the direction of programming services and custom software development. With the increasing popularity of the Internet, it concentrated on web applications' and websites' development. Author of many web and desktop applications, Jakub works as an independent IT consultant and freelancer, realizing projects of various size and complexity, for companies of various sizes. He also provides training courses related to IT and web technologies and the techniques to use them in the company environment. For some years he worked as a university teacher, teaching web and desktop programming.

Fregata is an authorized reseller of Extensoft. You can visit, as it provides support and additional information about this software tool.

Privately, a husband and father of two children, Jakub lives with his family in Sosnowiec (in Poland), spending little moments of free time playing piano or reading books.

Books From Packt

Drupal 7 Theming Cookbook
Drupal 7 Theming Cookbook

Creating Concrete5 Themes
Creating Concrete5 Themes

Drupal 7 Themes
Drupal 7 Themes

OpenCart 1.4 Template Design Cookbook
OpenCart 1.4 Template Design Cookbook

 Magento 1.4 Themes Design
Magento 1.4 Themes Design

 Joomla! 1.5 Template Design
Joomla! 1.5 Template Design

WordPress Theme Development - Beginner's Guide
WordPress Theme Development - Beginner's Guide

 Mastering TypoScript: TYPO3 Website, Template, and Extension Development
Mastering TypoScript: TYPO3 Website, Template, and Extension Development

Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software