Introduction

Hello again! We're back in the Tees X5 Store, our sample web site that we use to show you how all the great new additions to WebSite X5 version 9 work.

We've already explained how to display the template at full screen, and change its background according to the page/section that is being looked at [http://answers.websitex5.com/post/4449 ]. But we've still got a few other things to say about the template so let's get going!

The buzz word: Customization

Once we've chosen our template or, as in our case, created a template using the Custom Template option, we can use the built-in editor to add all the elements we need to the header and/or footer.

BEWARE! Don't underestimate the importance of this part of the work!. The template isn't just a pretty background that makes our web site look nice. The design is fundamental to the web site but the template also constitutes a vital part of the interface that visitors use to interact with our web site and so it must be clear, compete and functional, as well as pretty.

So, considering that the template's header and footer are sections that do not change with the pages, unlike the actual page contents, let's start to add some essential elements of our web site's interface.

Header: Logo and slogan

Obviously, one of the essential elements in any web site's header is the title: after all, you wouldn't see a book without a title printed on its cover, would you? If the web site is not commercial then the title may be the name of the author. But if it is commercial, then you're going to need a logo, a name and, if you have one, a slogan. You may already have a file containing all three elements, but if you don't, then we can add them individually, as separate images and text.

For our Tees X5 Store web site, we've worked in the Header section of the Edit Template Graphics window as follows:

• We used the Insert Image command to import the logo.png file and we placed it in the correct position. We used a file in .png format so that we can maintain the transparency, which means that the writing blends perfectly on the template background. Alternatively, we could have used the option provided by the program to set colour transparency.
• We used the Insert Text command to add the slogan (Your Favourite Tee Store). To make sure we used exactly the same colour for the text that is used in the logo image, we used the dripper tool in the Color window to pick up the red. Then we chose the shadow from the list of special effects to give a bit of depth to the letters.

You may think that the logo and slogan just happen to be next to the face of the girl shown in the picture of the template background, but that is not so! When we look at a picture, we are naturally attracted to a face, and the eyes in particular. We are also used to reading from the top left hand corner of the page (or screen). So we should aim to place our logo and slogan in a strategic area, where the reader's attention is attracted. This is just one example of how we need to pay attention to all sorts of detail when planning our web site: the position of each element, the colour, and everything that determine the final aspect of each page.

Header: Search field

If our web site has a lot of content, a blog with lots of interesting posts, or a shopping cart with a vast assortment of products in the catalog, we are going to need a built-in search engine. Don't forget that not everybody uses the navigation menu to explore a web site: many people use the links in a page to move around the site and they don't want to waste time getting lost and not finding what they're looking for straight away. So that's why they often use the search engine. One of our aims is, therefore, to give visitors the maximum choice in finding the information they're interested in.

It's very easy to add a search engine to your web site with WebSite X5. This is what we did for the Tees X5 Store site, in the Edit Template Graphics | Header window:

• First of all, we clicked on the search field button to add a search field.
• We wanted a special look for our search field so we initially designed it as a part of the image that was used for the template. Then we re-sized the search field to 168x21 px and placed it over the field that was already drawn in the template (coordinates 775,14).
• To make the search field invisible we set the Background of both the field and button to Transparent.
• We set the text colour as white so that the text entered in the search field would be legible.
• To get the effect of a transparent “Search” button that is superimposed over the magnifying glass in the background image, we replaced the text of the Button label option with three dots, using the dripper tool to give them the same gray colour as the item they are placed over.

And that's all you need to do to get the built-in search engine going! The update to version 9.0.4 has significantly improved the search engine. Have a look at this FAQ for more information: http://answers.websitex5.com/post/6654

A little EXTRA: Banner roundabouts in the template header

An interesting possibility that we could have used in the Tees X5 Store site is that of creating a banner roundabout so that each banner in it is displayed only on certain pages: this means we could have had a banner for fashion accessories on the Shop pages for womens wear, and maybe one for DIY tools in the mens section.

To add a banner roundabout, open the Edit Template Graphics | Header window and then follow these instructions:

• Click on the button to add a SlideShow.
• Use the buttons to import the images you need for the various banners you want displayed on your web site (remember that a banner can be made up of just one image or a short sequence of images) and position them in the correct order.
• One at a time, select each image that you have added to the SlideShow and click on the Effects button to set the special effects for each one: these can be the entry effect and display time for the image (Effect Type tab), zoom and position (Zoom and Position tab), and the pages in which it is to appear (tick the names of the pages in the map that appears when you click on the Page tab).
• If you want, you can also create a specific link for each image in the SlideShow: select the image, click on the Add Link button and then specify the link's action.

Footer: Section buttons

You may have noticed in other web sites that the footer is considered an important part of the page: it's consistently larger, with  an increasing amount of information and functionality in it.

In the footer of our Tees X5 Store site, we've chosen to add four big buttons that are shortcuts to both areas of particular interest to us (and that's the Shop and the special offers section) and to the visitor (and here we have the online Help and and Facebook page).

This is how we created the four buttons:

• First of all, we prepared two image sfor each button: one for the button when it is released, and one for when it is pressed.
• In Edit Graphic Template | Footer we clicked on the Insert Image button and imported the shop.png file that contains the released button image for the first button.
• Still with the shop.png image selected, we used the Image file on mouseover option to import the shop_hover.png image, which is the one for the button when the mouse pointer passes over it.
• Finally, we clicked on the Add Link button and created a link with Site Page to the page in our site that displays the Shop.
• We positioned the button in its final place and then created the other three buttons in the same way.

Footer: Credits and Policy

The footer is the ideal place for displaying the notices that every web site should have (and, in some cases, are required by law), such as the name and VAT number of the company that owns the site, policies regulating use of the web site, sensitive data management, how the online store operates and any useful contact details.

In the footer of the Tees X5 Store, we've included some general information directly n the template background image and then we have also created a series of links to the official Incomedia web site and our various policies.

We have chosen to insert our policy information as PDF documents and so when we created the link to these we used the File or URL option and selected the PDF file using Local file on PC.

Conclusions

Our template is gradually taking shape and becoming more interesting and complete. Compared to the web site you can see published (http://tees.websitex5.com ), there are still some things that are missing in the header: the language choice buttons, the login button and the counter for articles that have been added to the shopping cart. Don't worry! We'll be talking about these, and other topics, soon.

Stay tuned!

If you want some hands-on practice with the topics we've talked about here, download this project:  http://bit.ly/utEjit

Download the .iwzip file and import it in WebSite X5 Evolution 9: remember to install the updates to version 9.0.4 first!