Now we are going to prepare our first layout. We will do this together, one step at a time, explaining every step we go through. But before we begin, let me first explain what we are going to achieve.
We are going to prepare a website advertising you as a web designer. The structure of the site is shown in the following diagram:
As you can see, our site will consist of eight pages. The first page (drawn a little bit above the other pages in the diagram) is the Home page. This is the first page that the visitor will see on coming to our site, and also the first page that we have to design. Logically, it is on the same level as the other pages from the first row. The second row shows the subpages for the Offer page. For our project we will create a two-column layout, with the first column on the left side, showing a vertical menu and a block with the contact information. Our site will have also a horizontal menu. Are you ready? If so, start Artisteer on the startup screen, click on the Blank template, and follow the next part of this chapter!
Unfortunately, in Artisteer you cannot set one menu to act as the submenu of another. Neither can you decide on which pages should the menu be displayed. Both the menus are displayed on all the pages. All you can do is decide which pages should be presented on which menu (after you add a new page into your project, it immediately appears in both the menus, but you can then exclude some of the pages). In our project, the ideal solution would be to make our vertical menu act as a submenu of the horizontal menu and show only the pages with our offer. This menu should be visible only when the Offer page is selected in the horizontal menu and is invisible on all the other pages. Such a thing is, alas, something that we are not able to achieve. Let's hope that the next version of Artisteer will be extended for such possibilities. Because we cannot do it this way, we are going to design both menus, and then you can decide which one you prefer to use and which should be deleted. We will also prepare a compromise solution that you may also find acceptable in this case.
Note
To make the vertical menu act as a submenu is possible, but it requires a manual change of the exported code. In Chapter 4, Tips and Tricks, you can find a description of how to do this.
Fortunately, this limitation has no importance at all while using any old supported CMS platform.
To start with, our template looks like this:
We are now on the first tab of the ribbon, called Home. It contains the Design Ideas area, Website, and Export. In Design Ideas, you can find different scopes of Suggestion Tool. The first button on the left is Suggest Design, and it fires automatic suggestions for the whole design. The next few buttons, Suggest Colors, Suggest Fonts , Layout , Background, and Styles fire automatic suggestions that change the appearance of the corresponding parts of the page.
Note
The tabs on the ribbon group functions are logically connected with the tab's name. For example, all the buttons on the Background tab apply to the background of the page. The first tab, Home, is the parent tab.
It is also a rule that the first button on every tab is always Suggestion Tool for the elements that apply to the tab.
It so happens that the same function is available on different tabs. This is because some buttons logically apply to more than one tab. For example, the Sheet Width (on the Layout tab) and Width (on the Sheet tab) buttons are the same. Setting the width of the page is something that applies equally well to Layout and Sheet, so Artisteer's authors decided to put this option on both tabs.
Other buttons are used to add and delete pages and blog posts, insert special blocks, and to export the template quickly.
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.
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.
Note
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).
The next step while designing a template with Artisteer is usually to decide how many columns should the layout contain. In our project, we are going to use the two-column layout, with the bigger column for the content and the other, narrower one, on the left. In this column, we want to display a vertical menu and put a block with the contact information. These two elements will be displayed on all pages.
Note
When you add a special block to your project, it is displayed on every page. Unfortunately you can't exclude a block from being displayed on specific pages. That's why we have to choose the blocks whose display on every page makes sense.
Fortunately, this limitation has no importance when you're designing for CMS.
We are beginning with setting up the number of columns. Click on the Columns button in the Layout tab on the ribbon. From the available options, choose the one with two columns, with the narrower one on the left.
Now have a look at the content of the left column. There is a vertical menu with a search block. We wanted a vertical menu there, but we didn't plan for a search block. We have to delete this block and replace it with one presenting our contact information. Perform the following steps:
- Move the mouse pointer over the search block. According to the location of the pointer, Artisteer will highlight various elements inside the block. Place the mouse pointer a little below the block's title to make the program frame the whole block.
- In the top-right corner of the block, you will find two icons. The first one, which looks like a bulb, is used to start Suggestion Tool, whose scope is limited to the elements inside the border. The second one, which looks like a list with a red cross, removes from the project all the elements inside the border. If you click on that icon, the whole block will disappear. You will have to confirm your decision in a confirmation dialog box that Artisteer displays to make sure you are not removing anything by mistake.
- Click on the New Block button (we are still in the Layout tab). Artisteer will put a brand new block under the vertical menu:
Now we have to change the title of our new block and write some content in it. Perform the following steps:
When all the changes are done, your new block should look similar to the following:
The way we have changed the text inside our new block is the standard way for editing content in Artisteer. Up to Version 2.6 of the program, content editing was impossible. Starting from Version 3.0, you can freely edit the content on all pages of the project. Starting from Version 4.0, this is possible not only in HTML templates, but also when designing for CMS. The content can be exported along with the design and imported into the CMS.
Note that while you write the content, the ribbon automatically switches to the Edit tab, where you can find typical editorial functions. Here you can, for example, set the font, alignment, and insert pictures or tables. The symbols used to designate the various options are similar to those you find in any popular word processor—if you have experience with MS Word, this will be very intuitive.
The default Blank project is in white. Before we start designing the various elements of our template, we are going to change the color theme, by choosing one of the available themes in blue. To do this, follow these steps:
- Choose the Colors & Fonts tab on the ribbon.
- Click on the Color Themes button.
- Find the Sky Blue group on the list, and choose the Depth theme.
After we have chosen the color scheme, it's time to set up the background of our site. Choose the Background tab on the ribbon to see the available options.
At the beginning, we must decide whether our background should be a solid color, gradient, a texture, or maybe a picture. Some of these options are mutually exclusive, while some can coexist. The relationships between them are shown in the following diagram:
If you set up a color for your background, it doesn't exclude the use of a gradient. But the simultaneous use of a texture and picture is impossible. If you want your background to be a solid color or a gradient, you have to choose No Texture in the Picture or Image list. Otherwise, the chosen picture or texture will override the chosen color.
The last group of tools include Light Effect, which adds to your background a delicate effect that resembles a light glow. The options from the Light Effect group relate to both the colors and gradients, and the textures and pictures.
For our project, we are going to set up a color background with a gradient. Click on the Fill Color button, and from the Theme Colors list, choose the third color from the left in the second row. Then click on the Gradient button and in the Light to Dark group choose the first option from the left, in the second row:
For the light effect, choose the first option in the Classic group.
We should now add the pages to our project according to the schema. We have to delete the pages that Artisteer has inserted by default and replace them with our set of pages, maintaining the relationship among them. You can manage the pages with the help of the side panel on the left side.
In the first step we will remove the redundant pages. If you look at the Pages panel, you will see that the first page contains two subpages. But in our project (look at the schema again), the first page does not contain any subpages. We are going to remove these subpages, since we don't need them. Follow these steps:
- Click on the small triangle symbol on the left of Page 1 to expand its subpages (another way to do it is to just double-click on the page name).
- Right-click on Page 3 and from the context menu choose Delete (you can also select the page with a single left mouse click and pressing Delete on the keyboard).
- Repeat this procedure for all subpages of Page 1 to remove them.
Now we are going to add the missing pages. Our project assumes four pages on the top level, so we need to add two more pages:
- Right-click on Page 2 and from the context menu choose New Page. Artisteer will add a new page and name it as Page 3. The name of this page will be highlighted to enable you to rename it.
- Type
Offerand press Enter.Similarly, add the Contact page and rename the first two pages by choosing from the Rename context menu. You should have following pages: Home, About Me, Offer, and Contact.
- Right-click on the Offer page and from the context menu choose New Child Page. Name the new subpage as Websites. Analogically add the other missing subpages.
OK, our project now contains all the pages we wanted. You can observe that all the pages are displayed as items in both our menus (the horizontal menu expands by hovering, while the vertical menu expands on clicking, by default). We have renamed the pages, but the names we have given them are not the names of the files that will be generated during the export process, but only the names that appear in the menu.
Note
The name of the page that you see in the Pages panel is the name shown in the menu. It is neither the name of the file that will be generated, nor the page title that will be shown in the browser. These parameters have to be defined in the Properties window. In this window, we can also define the menu in which the page should be displayed.
Let's define the properties for the Home page:
- In the Pages panel, right-click on the Home page, and from the context menu choose Properties. It will display the Properties window.
- Make sure that the General tab (from the list on the left side of the window) is active.
- In the Name/URL field, type:
index. - In the Title field, type:
Welcome to my page. - Click on the OK button to close the window.
The Name/URL field
defines the name of the file that will be generated during the export process, and this name appears in the browser's address bar. Because it's a filename it cannot contain characters that are forbidden in filenames (for example, "?"). Also, it cannot contain any spaces. If the desired name consists of two or more words, you can use the "-" character instead of a space (for example, for our About Me page, a good name would be: about-me). Remember that Linux is case-sensitive (in most cases, the server where you have your hosting account is powered by Linux), so to avoid any trouble, a good practice is to use only lowercase letters.
The Title field contains the title of the page that is displayed in the browser's window (and in the browser's tab). In this field, you can use any character you want. This title is also displayed by the search engines, such as Google, Bing, and Yahoo!. As you can see, it's an important property.
Note
For most web servers, the default file that is displayed when no specific file is specified is index.html or index.htm. That's why you should insert index in the Name/URL
field for the main page of your website. Artisteer will generate this page as the index.html file. Thanks to this, your home page will be displayed by default when the visitor puts only your domain name into the browser's address bar (without specifying the concrete page).
Similarly, define these parameters for the rest of the pages in our project.
Now that we have designed the overall layout, page width, and background, and added pages, it is time to design the various elements of our template. We are going to start with the header. First of all, we want it (the header) to be a little higher. Click on the Header tab on the ribbon and look for the Height button. Click on it and from the list of available options choose 150px. The header will adopt the new size.
Next, we will define the header's background. Just like the background of the page, the header's background can be a solid color, a gradient, a texture, or a picture. Expand the Background Image list, and from the Abstract group choose the first option from the left in the second row.
In Artisteer, the template's header contains two standard texts: Title and Slogan.
Title is just the title of your website presented in the header (do not confuse this text with the title you defined in the Page Properties window). Slogan is the second standard text in the header and usually contains a motto.
Title and slogan editing is done in the same way as editing the rest of the text in the page (remember how we edited the block with the contact information?). To edit the slogan and title, perform the following steps:
- Double-click on the title Enter Site Title.
- Using the keyboard, delete the existing text and type:
Stunning Web Design. - Click on anything other than the header to apply the changes.
The title gets deactivated when you click on something else. If you click on it once, a delicate border will appear around it, and you will be able to freely move and rotate the text. Note that it's impossible to move the title outside the header.
Now we will add the slogan to our header:
- Click on the Slogan button on the ribbon. In the header's area a new text Enter Site Slogan will appear.
- Delete the original text and replace it with
We design your needsin the same way that we modified the title. - Place the slogan under the title.
Note that while editing the title and the slogan, the ribbon does not switch automatically to the Edit tab, and even if you do it manually, all the options located on the Edit tab are unavailable. Does it mean that you can't influence the appearance of these elements? Oh no! If you want to change the look of the title or slogan, you have to use the Text button that is located in the Edit Shape group, on the Header tab on the ribbon. This group of options is displayed only if the title or slogan is selected. Experiment with all the available options and make these two elements look exactly like you want.
Besides the title and slogan you can insert images into the header. We are now going to insert a picture into the header:
You can freely move and resize the inserted picture with the mouse (while resizing, the Artisteer program maintains the aspect ratio of the picture). Note that while a picture is selected, a new group of options, Edit Shape, is displayed on the ribbon. It's at the same place where we found the Edit Image group, while we were editing the title and the slogan. This group contains the options by which you can align a picture, convert it to grayscale, or add the glow effect.
Shapes are graphic objects (in the form of geometric figures) that you can insert into the header. You can also move and rotate the shapes like you did with the title and the slogan, and you can resize them just like you did with the picture (even better because you can resize the shapes with or without maintaining the aspect ratio). You can also type text inside them by double-clicking on the shape and enabling the text cursor in it. The background of the shape can be a solid color, gradient, or texture.
Each shape can have one of the several predefined forms. The available forms contain simple geometric figures and also some more advanced shapes. The list of available forms is displayed after clicking on the Shape button on the ribbon:
The last option on this list (Form) expands another list, with more advanced forms:
Using shapes can be very handy. They are especially useful when combined with images:
Example of the combination of a shape (on the left, with phone number) and an image
One of the most interesting features offered by shapes is the ability to use masks.
A Mask is the transparent area within the shape. Because shapes are always displayed over images, moving a shape with a mask over the image makes the image visible through the shape. The possibility of uncovering only a part of the image allows you to achieve interesting effects, as in the following screenshot:
If you use many pictures and shapes in your header, sooner or later you will come across the problem of deciding which one of them should be on top of the other and which one should be covered. In Artisteer, you can set the order of these objects by choosing the Send to Back or Bring to Front option from the context menu that appears when you right-click on the shape/image:
If you want, you can add one of the available Flash effects to the header. To do this, click on the Flash button (it's on the right side of the ribbon, on the Header tab) and choose one of the effects from the list (I chose the second effect from the Special group). You can also insert your own Flash movie (in the swf format) from the disc.
The characteristic feature of the Flash effects that Artisteer offers out-of-the-box is that they don't replace the content of the header, but display the rather delicate additional effects over it.
The next elements we are going to design are our menus. We will style their look and also decide which pages they should display as their items.
All the options that Artisteer provides to design the horizontal menu are located on the Menu tab on the ribbon. Click on it.
Currently our horizontal menu is located inside the header and is aligned to the right. Because this place is now occupied by an image, the menu isn't clearly visible. The first thing we are going to do is find a better place for our menu. We will put it under the header and align it to the left.
The position of the vertical menu is determined by the Position option, located as the second icon from the left, next to Suggest Menu. Expand the available positions and see how the position of the menu changes according to each one. For our project, choose the second position in the Inside Sheet group. The menu will move under the header.
If you want to have some space between the menu and the header, use the Margin option. The Length option lets you set the menu's width to be equal to the header or as wide as the whole screen.
Our next step is the alignment of menu items to the left. It's a little bit tricky because the correct option is located not inside the Menu Area group, but in Item. (I must admit it's logical, since you don't align the menu area but the menu items. On the other hand you can't align a single item, but all of them at once. Anyway, it took me some time to find this option when I started my adventure with Artisteer.) To change the alignment of the menu, do the following:
If you want to quickly change the look of the whole menu, use one of the options available in the Menu Styles list. Each one of the options listed there changes the look of the whole menu, including all of its elements. If you want to define each menu element separately, you should use the options available in the Menu and Submenu groups.
The Menu group contains options to modify the top level of the menu. The group is divided into four main options, each of which has its own, more detailed properties.
Menu Area is a container (rectangular area) in which the menu is displayed. It doesn't define the look of the menu items. The items are located inside the menu area. In other words, the menu area is just the menu bar.
This option lets you set up the style in which the active item is marked.
The last three options (Active, Passive, and Hovered) let you precisely design the look of menu items according to the three states that they can be in:
- Active menu item: It's an item that represents the page currently being displayed. It's a good idea to make the active item look different than the others, because it allows the visitor to quickly find out which page he is currently viewing.
- Passive menu item: It's an item that is neither active nor hovered.
- Hovered menu item: It's an item under your mouse pointer. Featuring an item using mouseover is commonly used for a decorative effect.
You may wonder, what is the sense of using the Item option, and when will you design the look of the items separately for each of their three states? Well, I must say that you have a point. The options you find in the Item list have more of a general character and apply to all the menu items at once (please note, that they don't give you the possibility to choose something basic such as color). In case the basic setting from Item interferes with the settings defined for a particular state (active, passive, or hover), then the priority has the more detailed settings.
The Submenu group contains the options that are analogous to those from the Menu group, except that they apply not to the top-level items, but to subitems. This group has Passive and Hover, but there's no Active here—and this is not a mistake. The horizontal menu expands by mouseover, and when the mouse pointer is moved out it collapses, and is shown again only to the top-level items. So the active subitem is never visible, it is always collapsed. That's why the subitems are never in the active state.
Have a look at the first button called Items in the Submenu group. This is the one of the most important buttons in the Menu tab. It defines the look and feel of the whole menu. Click on it, and you will see a list of the following five options:
- No submenu (no subitems)
- One column
- Multilevel
- Extended
- Multi-column
- Megamenu
- Megamenu extended
To better understand the meaning of these variants, let's consider a site with the following structure:
We have three items on the top level. Each of these items has three of its own subitems, and each of those subitems also has three of its own subitems. Let's see how each variant of the the horizontal menu will look for a site with the structure as presented in the previous diagram.
This is the first and most basic variant of the horizontal menu. In this variant, the horizontal menu displays only the top-level items. Subitems aren't displayed at all:
In this variant, our menu shows the top-level items and also the subitems. The subitems are presented in a column, just below the parent top-level item. The next level items are presented in the column on the right (or on the left if the parent item is displayed on the right edge of the screen). This menu resembles the standard menu of the classic desktop applications:
This kind of menu is very similar to the one described in the previous section. The only difference is how the top-level item is marked when expanding. While in the previous example the column containing subitems was separated from its parent (top-level item), in this case they together make a simple unit:
This kind of menu (introduced in Artisteer 4) presents the subitems in many columns. The second-level items are displayed in a row (they are in bold), and the third-level items are displayed below in the form of columns. If the menu includes further levels, they are displayed just like in the previous variants (new column to the right of the parent item):
The difference between Megamenu and Megamenu Extended is analogous to the difference between Multilevel and Extended in one-column styles. Megamenu Extended is Megamenu with those difference, that is, the top-level item is joined with subitems.
For our project, we will choose One-column | Multilevel.
We will also define the look of our menu, but instead of designing every aspect individually, we will use the Menu Styles option. Click on the button and choose the first option in the fifth row. Our template should currently look like this:
Even if you are satisfied with our horizontal menu, we can't forget about our vertical menu. Click on the Vertical Menu tab on the ribbon and we can start.
The available options located in the Vertical Menu tab are ordered similar to the those on the Menu tab. First on the left (as always) we have Suggestion Tool , followed by the Layout group (don't confuse it with the Layout tab!), which contains only one button (it's rather a small group, isn't it?). This is an important button, which determines the location of the vertical menu. Let's click on it.
This list that is displayed is divided into two groups: No block and Block Position . The second group contains several options that change the location of the vertical menu. The target position is marked as filled area on the icon. Switch among the options and observe that the vertical menu is moving from one position to another. Note that you don't have to necessarily display the vertical menu in a side column, although in most cases displaying the vertical menu above or below the content is not the best idea.
The first group (No Block) contains only one icon. By enabling this option you decide not to display the vertical menu at all.
Note
Choosing the No Block option is the same as if you delete the vertical menu using the icon located on its top-right corner (remember how we removed the search block?). If you remove the vertical menu, you can restore it to the project at any time by choosing any other position in the Position list.
The Styles button works analogically to the Menu Styles button from the Menu tab. It lets you define the look of the whole menu very quickly, by choosing one of predefined options. Similarly, the options from the Menu Area, Item, and Submenu groups work analogically to their equivalents, which we used while designing the horizontal menu. As they are very similar, we won't describe them one by one, but rather focus on the differences between the vertical and horizontal menus (of course, the main difference is that one is vertical, and the other horizontal).
The vertical menu is actually a kind of block (anything displayed in the side column is a block). Like any other block, the vertical menu may or may not have a header (title text). You can hide (or show, if it's already hidden) this header, and also choose one of the predefined styles of the vertical menu with the list of options on the Menu Block button. Note that there is no other way to remove the header. You can edit and change its text, but even if you remove all the characters, you will still have a header (although an empty one). You also cannot remove the header from a block using the icon in the top-right corner. Even if the border or frame encloses only the header and not the whole block, clicking on the icon removes the whole block.
The horizontal menu always expands on mouseover and collapses automatically. The vertical menu may behave differently, depending on the settings. The active subitems may be visible, so it makes sense to design the look for all the three states (active, passive, and hovered). That's why Active, Passive, and Hovered buttons are present for both the items and subitems of the vertical menu.
The possible options for defining the vertical menu behavior are available with the Levels button, which is located in the Submenu group.
Available styles that define the vertical menu behavior
We can choose from six kinds of vertical menu behavior:
- One Level is the most basic kind of menu that you can choose. It displays only the top-level items. No subitems are displayed at all.
- The Expand with Reload menu shows both items and subitems. The items containing subitems expand on a mouse click. After the click, the page is reloaded.
- The Expand on Click menu is very similar to Expand with Reload with the difference that the items expand without reloading.
Note
You may think that Expand on Click is better than Expand with Reload (it looks the same, but without the need of reloading the page). But the most important difference is not about reloading. Rather, it is that in Expand with Reload, the item containing subitems is a link to the page, while in Expand on Click it's only the menu item without any corresponding page. Consider our project: we have an Offer page that contains three subpages. Set the vertical menu as Expand on Click and export the page, then open the exported folder and click twice on the
index.htmlfile. The page will open in your system's default browser. Click on the Offer item in the vertical menu. The page is reloaded and you may see that the Offer page is displayed (look at the address bar of your browser, where you will seeoffer.htmlat the end of the address). Then go back to Artisteer, change the vertical menu, typeExpand on Click, export the page, and run again. You will see that when you click on the Offer item in the vertical menu, the menu expands, but you can't access the Offer page at all.I don't mean to tell you that Expand on Click is bad. There certainly are projects where it will be far better than Expand with Reload and vice versa.
- In the Expand on Hover menu, the item containing subitems expands on hover, without the need to click. The parent item is still a link to a page.
- The Popup on Hover menu expands on hover, just like a horizontal menu, but vertically.
Example of Expands on Hover vertical menu in action
- The All Open menu always displays all of its subitems (it is never collapsed).
We are going to design the look of our menu very quickly using one of the available options in Styles. Click on the Styles button, and from the list choose the second option in the second row. We would also like to hide the header of this menu. Click on the Menu Block button, and from the Simple group choose the second option. As the menu type, choose All Open by clicking on the last option from the list on the Level button. The last thing we want to change is the radius of an item. Click on the Item button (in the Menu group), expand the Radius option, and choose 10% of Height.
In both the Menu and Vertical Menu tabs on the ribbon you can find the Pages group containing only one button, Show in Menu. Clicking on this button displays the Select pages in menu window in which you can decide which pages should be displayed in the menu, and which should not. We want all the pages to be displayed in the horizontal menu, and only the Offer page (with all of its subpages) to be displayed in the vertical menu. Check the appropriate pages.
For vertical menu we want to display only Offer page with its subpages
Note that you cannot check the subpages without checking their parent page too (or more precisely, you can; but if you do that, they won't be displayed although you have checked them). That's why we have to not only check the Websites, WordPress, Joomla!, and DotNetNuke pages, but also their parent page Offer.
By now, your vertical menu should look like the following screenshot:
We have designed the look and feel of the horizontal and vertical menus and have also set up the pages to be displayed in each of them. Our next step will be designing the content area.
Before we start writing our content, we must design the overall layout of our content. In Artisteer, the content area can be divided into any number of rows and columns. Skilful identification of rows and columns is the key to achieve well-designed content.
The first thing to plan is the look of the site. We are going to design the main site with following content:
At the top of the content we want to have the title. In the large area below it we want to have a description about who we are and what we do (remember that we are creating a site advertising you as a web designer). We want to enrich the text with a photo. Below it we want just a one row of text: Look at our latest projects…. The last area will contain three pictures with a thumbnail of your latest projects. If you haven't done any projects yet,
don't worry! Design something quickly using the Auto Suggestion tool and customize it using the information you have read up till now. Actually, it will be a good exercise to get some practice with the program. If you feel you can't do that yet, you can just insert any pictures from Artisteer's library here and replace them later.
In our case, the combination of rows and cells should be similar to the following picture (for better clarity, the rows and cells are bordered):
We need three rows for our content. The first row is for the biggest section of text (description), the second is for the short text below it, and the last row—divided into three cells—to is for inserting three logos.
You may wonder why we don't create a row for the page title. It's because Artisteer creates the container for the title automatically. It's a similar situation to that of the vertical menu header. You can hide the page title, but you cannot design any page without it. We will learn how to hide the page title a little later in this chapter.
You may wonder why the first photo isn't placed into a separate cell while the next three logos are. It's because the photo in the first row is not a separate element of our content. The first row contains an article, and the photo is a part of it.
Before we can set up the layout for our content, we have to remove the actual content that the program put here automatically. And to do that efficiently, we have to know the tools that Artisteer offers for creating the content layout.
All of the tools to design the content layout are located in the Content pane on the ribbon. Click on it. There are not too many options. But when you click anywhere in the content area, the number of tools (displayed in the Content pane) increases and many new buttons appear. You will see that many new buttons appear.
The tools applied to the layout design are located in the Content group.
The first button, Content Layout, displays a list of the most used content layouts. You may think of it as a kind of template that you can assign to your page with just one mouse click. Choosing one of the available options will replace your current layout with the chosen one, and all of your content will be automatically updated to the new structure of rows and cells.
The second button, Styling, lets you style your content. While in the previous list you could define the layout, this is the place where you can define how it looks. The Styling options define various borders and backgrounds for your rows and cells.
The last option in the Styling list lets you define the layout for your current row and also defines some settings that apply to all pages, such as the border of the cells, margins, and radius.
We have to remove the current content. We could, of course, click on every row and cell and remove the text one by one, but we will make it faster and a little tricky. If you change the layout, the content is preserved and automatically adopted to the new layout. So, we can use this feature to delete all the content at once. Perform the following steps:
- Click on the Content Layout button.
- From the list, choose the only available option in the One Column group. The current content layout will be replaced with only one row, which will contain all the content.
- Click anywhere within the content and press Ctrl + A. All the content will be selected.
- Press Delete to remove the current content.
Now we can start designing our layout. Because there's no such layout on the Content Layout list, we will design it manually. Click on the Layout… button to display the Layout Editor window:
In the previous window you can almost freely design your own layout. The frames on the left side represent the rows and cells. The first button to the right (in the shape of an inverted triangle) allows you to change the style of the row (the number and proportion of the cells) by displaying a list with the available options. The second button (the red minus sign) removes the whole row.
We are going to modify the layout from scratch. Do the following:
- Delete all the rows using the buttons with the red minus sign. Actually we could just modify the existing rows, but we want to design it from scratch.
- Add a new row by clicking on the button with the green plus sign, and from the list of the available row variations choose the first option—the row that is not divided into more cells. We want to have the article with photo in this first row.
- Add a second row to the content layout. This one will contain our
Look at our latest projects...statement. This is also a single-cell row. - Add the third and last row. This row will contain our three thumbnail pictures. Because they will be put as separate elements (and not inserted into the article), we need to have three cells in this row. Choose and click on the correct option.
- Click on OK to close this window. Apparently nothing has happened. But if you move your mouse cursor over the content area, you will see the borders appearing on the new areas. Thus, Artisteer has indeed modified the layout.
Now that we have defined the areas in our content layout, we can start filling our site with content.
We will first change the title. Right-click on the Home page on the left panel, and from the context menu choose Show Article Title:
The title will be shown above the first row in the content area. We haven't edited it yet so it still contains the text Page 1. Click on the title and change it to Welcome to my site!.
Now we are going to write our article. It wouldn't be very useful to write all the articles in the book. Instead of this, we will copy and paste some dummy text.
To get dummy text just go to http://www.lipsum.com and find the Generate Lorem Ipsum button. Change the number of generated paragraphs to three and click on it. Then copy the generated text to the clipboard and return to Artisteer. In Artisteer, click on the first row in your content area and press Ctrl + V to paste the text. From the Paragraph group on the ribbon click on the icon that will justify the text:
You can type the text just like in any text editor. If you would like to change the font or start a list, all the tools you need are located in the Style and Font and Paragraph groups.
While writing the content you should remember one particular rule: if you need to change the font (that is, you want to write a header), you should use the styles instead of manipulating the font property directly. Thanks to this, your content will look consistent throughout the site. Remember that all the typography, including six levels of headers, links, and button texts is defined with your layout. On a regular basis, there's hardly ever a need to use something other than the defined styles.
We have our first row filled with text, so now it's time to enrich the article with a picture. We want the picture be placed at the beginning of the article. To achieve this, do the following:
- Click on the beginning of the article. The text cursor will blink right before the first word in the article.
- Click on the triangle under the Image button (it's in the Insert group on the ribbon) and from the available options choose Clip Art. Another list presenting thumbnails of the pictures provided by Artisteer will expand.
- Choose the fourth image in the second row.
The image is inserted, but not exactly as we expected. Firstly, it's far too large. Secondly, we would like the text to flow around the picture, and what we have is the picture with an empty space on the right!
Don't worry! We are going to correct this. Right-click on the image and from the context menu choose Image Options…. The Image Options window will appear. This window has three tabs on the left: Image, Layout, and Link. Make sure that the first tab is selected. Do the following:
- Set the width of the picture to 150 px. The values in the Height and Scale fields will change automatically.
- In the Alt Text field, type
My photo(remember that we are designing your site, so you can exchange this picture with your real photo). - Click on the Layout tab on the left.
- From the Position combobox choose left. Also, set the bottom margin to 0 px and the border to 2 px. Click on OK to close the window.
After the changes your site should look like this:
Note
You should never leave the Alt Text field empty. Alt Text is the text that will be displayed when it's impossible to display the picture. For example, people with disabilities, who use a screen reader, will get only the alt text. Putting an image without any alt text may also cause problems with site validation.
There is another important feature that we have to discuss when talking about inserting images. By default, when an image is clicked, the bigger, overlaid version of this image is displayed on top of your page. This effect is called Lightbox Style (the name comes from the famous JavaScript library that had introduced this effect). It's perfect for creating image galleries, but sometimes you don't want the picture to behave like that.
To check whether the picture should have the Lightbox effect or not, you have to change the Preview settings in the Image Options window. It is the last option in the Image tab and contains two options: Yes and No. Set this value to No to turn off this effect for the image.
To finish our first page, we have to complete the content in the rest of our cells.
Click on the row below, and from the Style and Font group choose Header 2 as the style (we want this text to be larger than the default text in the paragraphs). Type Look at my latest project..., click on the first cell in the third row, and click on the Image button. An Open dialog will appear. Select the file with a screenshot of any other project that you did in Artisteer (if you didn't, you can select any other image from your disk). Similarly, insert images into the last two cells. This time we won't turn off the Lightbox effect, because it's good that the visitor can click and enlarge these thumbnails.
In the end, our site should look like this:
Besides inserting images and image galleries (with the Lightbox effect), Artisteer also offers the possibility of creating slideshows. A slideshow is a set of images, displayed one by one, at the same place. The slides that are shown change according to one of the predefined transition effects. You can create a slideshow in the content area and in the header.
We start preparing a slideshow by inserting a single image. This image will be the first slide to show, and it sets the dimensions of the overall slideshow. Every slide has the same size, so it's good practice to prepare the set of images and resize them accordingly before you start preparing the slideshow. You can insert several images into one slide, making a collage, or even combine pictures with shapes.
After you have inserted an image, click on it once with a left mouse click. The ribbon will show the Edit tab, and the New Slide button in the Slideshow group will be enabled. Click to insert a new slide from one of the available sources: you can insert a blank slide, duplicate the current slide, add an image from a file, add an image from Artisteer's library, or add an image from Flickr:
If you decide to insert a new slide from a file, you will also have the possibility to resize the image. The available options are:
- Resize collage to image: This option resizes the whole slideshow according to the dimensions of the new picture. Works only for those images that are smaller than the slideshow.
- Resize image to collage: This option adjusts the size of the inserted picture to fit the actual slideshow dimensions.
- Use original size: This option doesn't change the size of the inserted image. If the image is larger than the slideshow, only a part of the image will be displayed. If the image is smaller than the slideshow, it will be surrounded with a background.
You can also insert new images and shapes into an existing slide. To do that, use the Add Image or Add Shape buttons, which are located on the right side of the New Slide button that we used to insert a new slide. They work in a very similar fashion, but instead of inserting a new image (or shape) as a new slide, they just add it into the current one. You can create interesting effects by combining several images and shapes in one slide.
Two images and a shape combined into one slide
The Background button lets you choose a background for the slide. The background will be visible if the displayed picture (or pictures) is smaller than the dimensions of the slide. You can set up a different background for each slide.
The last three buttons in the Slideshow group are: Play, Motion, and Navigator.
- The Play button starts the slideshow and lets you see how it will look on the live site.
- The Motion button lets you choose one of the available transition effects. By default, the slides change with a fade effect. You can also set up the speed of the transition effect, the delay (for how long each slide is displayed), and whether the slideshow will be repeated or not.
- The Navigator button lets you design the navigator. A navigator is a group of pointers displayed in the bottom-right corner of the slideshow by default. It indicates which slide is currently displayed and lets you click and go to another one:
Creating a slideshow in the header is very similar to the process of placing a slideshow in the content. The difference is that you can have only one slideshow, and every slide covers the whole header. In fact, it's not a slideshow in the header, but rather a slideshow of headers.
In the Header pane on the ribbon, you will find the Slide Show group with buttons analogous to those we saw before in the Edit pane.
To create a slideshow, design your header as usual. Set up the background and insert images and shapes. This header will be the first slide. When everything is ready, click on the New Slide button and choose the image. A new slide (new header) will be inserted, and the chosen image will become its background. Design the header once again, and this will be the second slide, and so on.
We have talked a little about typography. You know that you can use the styles instead of changing fonts for every header, and that the typography contains definitions for links, button text, and so on.
Now we will take a closer look into this template's parameters.
The typography tools are located on the Colors & Fonts tab on the ribbon. Click on it. As the name suggests, this tab contains the tools for typography and for working with template colors. The typography tools are placed on the Fonts group (beside Suggestion Tool). On this group you can find three buttons: Font Sets, Typography, and Font Scale.
The Font Sets button lets you choose the set of fonts to be used in your project. Every set consists of two fonts: the first font is the one that is used for headers, and the second is the font used for paragraph text. When you click on this button, you will see the list with the available font sets. Every list item displays the name of the font set, and also the names of the fonts used. The names of the fonts used are displayed with those fonts, giving you a preview of how they look.
At the bottom of this list there's a button called Edit Font Set. Clicking on this button displays the Edit Font Set window, in which you can change the fonts used in the active state.
Let's pretend that we want the heading to be written in Arial, and the paragraphs in Times New Roman. We have to:
- Display the Edit Font Set window.
- Choose Arial in the Heading Font field.
- Choose Tahoma in the Text Font field.
- Click on the OK button to close the window.
Artisteer has changed the font, and if we click on the Font Sets button again, we will see that our set is now displayed in the Custom group as Unsaved. Indeed, this is our custom set, and we haven't saved it yet. Click on the Save Font Set button at the bottom (now that it's active) and save the file with the name My favorite fonts. Our new set will be displayed in the Custom group.
Note
The font we have saved is not stored with only our template, it's stored in Artisteer on the application level. You can restart the program, open any other layout, or start creating a new one, and you will see that our My favorite fonts font set is available. This way the sets that you prepare can be reused in your future projects.
But typography is far more complex than the definition of font for headers and paragraphs. We have six levels of header, so it is obvious that there should be a possibility to define more properties. To edit the advanced features of typography, click on the Typography button. The list that will expand contains the available typographies. The active one is probably Unsaved on the Custom group.
Click on the Edit Typography… button at the bottom of the list to show the Typography window. In this window you can see all the text elements of the template. Below the list there's a Modify button, a Preview field where you can see how the selected element looks, and the element's CSS definition:
We will do the following modifications to our typography:
- We will modify the Heading 6 element
- We will change the style of our text "Look at my latest projects..." from Heading 2 to Heading 6. As a result, the look of our text should change.
To make these changes, do the following:
- Click on the Heading 6 element on the list to select it.
- Click on the Modify button. A new window will appear.
- In the Font tab of this window, set the font name as Aguafina Script, choose Bold as font style, and choose 28 as Font Size.
- Click on the OK button to return to the previous window. Again, click on the OK button to close the window.
- Click on our text. You don't have to select the entire text, it's enough if the text cursor blinks somewhere within the text.
- The Edit tab of the ribbon should be automatically selected. Expand the list with the styles (you can find it in the Style and Font group) and choose Heading 6. The style of our text will change and look as we have designed.
Note
We have changed the definition of the Heading 6 element and applied it to Look at my latest projects… text. In our case this is acceptable, because we don't use the full typography in our project. If the structure of the content of our site is so complicated that we need all six heading levels, we cannot waste the header style for just text. Instead, we should set the text with the Paragraph style and then change the font manually. The overall rule for designing the header levels is that every next level should be a little smaller than the previous one, to visually illustrate the logical hierarchy of headers.
We are going to modify the paragraph text and make it a little larger, in the same way that we have changed the Header 6 element. Similar to the Header 6 element, edit the typography again, and in the Typography window, set the font size of the Default element to 14 px.
You can similarly modify any element of typography. Creating a good typography is not a trivial task, but an important factor of the overall template.
If you want to use our modified typography in the future, you can save it by any name using the Save Typography button.
The last button in the Fonts group is Font Scale. Using this button lets you change the size of all the text elements very quickly, all at once. The Options… button leads you to the window, where you can set the scale of text manually.
We have chosen the color theme for our template, but we didn't go deeper into this topic. This was because we wanted to start with designing quickly, and also because we needed to know more about using Artisteer before we could take care of this problem.
Color theme is a set of colors used in a template. Logically it is similar to font sets and typography. Typography defines the text used in various template elements while a color theme defines their color.
To modify the color of the theme you can use the three buttons located in the Paints group (we are still in the Fonts & Colors tab). These three buttons, in the form of rectangles filled with a particular color, let you choose the color for paints.
Paints are the main colors used in a color theme. You may think of them as the basis on which the whole color theme is built. Every color theme in Artisteer has three paints.
With the last button, having the label Adjust, you can change the brightness and saturation of all paints in the color theme. The available options are divided into four groups, whose names suggest the changes (Basic, Normal, Contrast, and Pastel).
If you have modified the paints in a color theme and you are happy with the changes, you can save it under any name, and use it in your future projects.
The last thing we need to design is the footer. All the tools that apply to the footer are located on the Footer tab—although, you will see that's not so evident in this case. The problem is that many of the things you can define with the tools from the Footer tab, you can also achieve using the analogous tools from the Edit tab. What's more, the settings made by the tools from the Edit tab have a higher priority than the settings made from the tools located in the Footer tab. For example, you can align the footer text to the right using the Align button in the Footer tab, and at the same time align the same text to the left, using the align icon from the Edit tab. As a result, the text will be aligned to the left.
Note
If the settings from the Footer tab are in conflict with the settings from the Edit tab, the settings from the Edit tab have a higher priority.
If you feel that the options in the Footer tab are not working at all, check if you have set the same property that with use of tool located in the Edit tab. For example, if you have set the color of the text in the Edit tab, changing it with the button in the Footer tabwon't have any effect because this property is covered by the setting with a higher priority, coming from the Edit tab tool.
The tools on the Footer tab are divided into two groups: Layout and Footer Styles. The first button in the Layout group, Length and Position, lets you choose one of the three types of footers. (To have a better understanding of how they work, you can temporarily set a different background color for the whole footer using the Fill button.)
The Inside Sheet footer is located inside your template. There's some site background on the left, on the right, and under the footer:
Inside Sheet footer: there's some background below and on both sides of the footer
The Sheet Width, Screen Height footer fills the whole space up to the bottom of the screen. There is no empty space (background) under the footer:
Sheet Width, Screen Height footer: the footer fills all the space below
The Page Width, Screen Height footer fills all the space under the content, and it's as wide as the whole page. There are no empty spaces (background) on the left, on the right, and below the footer:
Page Width, Screen Height footer: the footer fills all the places under the content
The Margin button lets you define the vertical space between the bottom edge of the content and the top edge of the footer.
For our project, choose the Inside Sheet option.
With the Fill button you can define the color of the footer pane. The list of available colors presents the colors belonging to the color theme. You can also click on More Colors... and freely choose from the full palette. The last button on this list lets you set up the transparency of the footer pane.
For our project, choose the first color from the second row (from the Theme Colors group) and set the transparency to 50 percent.
The Separator button lets you define the look of the line that separates the footer. You can set the width (Weight), the style, and the color of this line.
You shouldn't have any problem with the rest of the buttons, since they behave like analogical tools placed on the other tabs. The only surprise waiting for you is when you click on the Text button. Click on it and you will be redirected to the Edit tab on the ribbon bar!