The Xara Xone Workbook
H  1  2  3  4  5  Download Zipped Tutorial 
Creating a Banner and Buttons

Creating Website Buttons and Banners

When you create your web page, Xara automatically centers it on the screen so whether the visitor's screen is a small laptop or one of those giant screen jobs, the page is neatly centered.

Our web page is going to be small and manageable. From the File menu, select New and from the fly out menu, select 800 by 600 Drawing.


Creating Website Buttons and Banners

If you have been to the newly refurbished, you have noticed that black is "in" this year. As we all want to be Au Courant, we will make our page black too. Xara will apply the page color to the entire web page.

Hold down the Ctrl key. Click and drag the color Black from the screen palette and drop it onto the screen. (If you want to return to the white page later, right click on the screen and select Default page Background .

    NOTE: You can also use a repeating background tile for your background. Just import the bitmap pattern into Xara, or create a bitmap for your repeating background in Xara. A copy of the bitmap is automatically placed in the Bitmap Gallery. Open the Bitmap Gallery (F11), select the bitmap, and press the Background button. When you export your website, Xara will fill the entire screen as far as the eye can see, with your background pattern.

Creating Website Buttons and Banners

Place your banner on the page using the top and right side spacing shown above.

Vertically center the normal state button on the banner and bring it in from the left side 20 pixels.


Creating Website Buttons and Banners

Clone the HOME button and move the clone downward 50 pixels. If you have set up your Nudge distance as I suggested, hold down the Shift key and press the down arrow five times.

Repeat this three more times to create a total of five buttons.


Creating Website Buttons and Banners

One of the most very cool things about Xara is you can select type on a grouped shape with the Text Tool (F8) without having to ungroup everything first. Knowing this, change the text as shown above. You now have all of your Normal State buttons. The first four buttons will link to the four pages of the website. The last button will link to an outside website.


Creating Website Buttons and Banners

Select the first button HOME and the open the Web Address dialog (Utilities > Web Address... or Shift Ctrl w).

In the URL text entry box, key in ##1. This automatically links the HOME button to the first page of the document no matter what the page is called when you export it. Select the next button. ABOUT US, and make this address ##2. Make the next button ##3 and the CONTACT US button ##4. Do not add an address to the last button yet. We will do that in the next step.

    IMPORTANT NOTE: Be sure to click Add, after each link has been added. If in doubt, with the Web Address dialog open, click on each button to make sure they all have the right address.


Creating Website Buttons and Banners

The last button will link to an external website so we need the actual www address. Select the last button, XARA XONE, and open the Web Address dialog (Shift Ctrl w) if it is not already open.

In the URL Text entry box, key in To keep people from leaving your website and never coming back, hey it happens!, select New Window (Blank) from the Target Frame for URL drop down list. Press Add. When your visitor clicks this Xara Xone button, a new window will open to display The Xara Xone, but when the Xara Xone window is closed, your website will still be on the screen.

You will now have all your buttons (so to speak) but perhaps not all your marbles. But that is another story that we'll save for another day. The next step is to add the Mouse Over and Mouse Down states.


Creating Website Buttons and Banners

The Mouse Over and Mouse Down states will each be placed on a separate layer. It is important that you name these new layers correctly in order for the roll over buttons to work correctly. So please, don't get creative with the layer names.

Open the Layer Gallery (F10). Press New... Name your new layer MouseOver (no spaces and capitalized as shown). Press OK.

Copy all five buttons and make sure that the new MouseOver layer is selected (the title bar will be highlighted). Use Edit > Paste in Place (or Shift Ctrl v) to paste copies of the normal state buttons on the new MouseOver layer.


Creating Website Buttons and Banners

Ctrl click on the red elliptical filled capsule shape from the Mouse Over state button you created earlier and Copy it to the clipboard (Ctrl c).

One by one, Ctrl click on the gray elliptical fills (remember these are the duplicate buttons) then Edit > Paste Attributes or press Shift Ctrl a. You can delete the red button you copied from.


Creating Website Buttons and Banners

Create another new layer, MouseDown. With this new layer selected, copy and paste in place all five red buttons.


Creating Website Buttons and Banners

Ctrl click on the green elliptical fill from the three buttons you created earlier and copy it to the clipboard (Ctrl c). One by one, Ctrl click on the elliptical fill on the duplicate red buttons and Edit > Paste Attributes.

To be certain you still have all your buttons, marquee select all the buttons (drag a selection rectangle around them with the arrow pointer), and the Status Bar in the lower left corner of the screen should read 15 Groups Selected. If the Status Bar shows the word objects instead of groups, you are in big trouble.


Creating Website Buttons and Banners

A very important part of any website is the Title tags. This is what will appear if you or a visitor bookmarks the page. It will also help the search engines find your site. So calling your home page HOME is a surefire way to ensure nobody will ever find your page.

To add TITLE tags to the page you could edit the HTML script (not recommended) or add a Comment in the Document Information dialog (File menu). Your editor recommends this last method. Open the Document Information dialog and in the Comment: text entry box, key in My Excellent Website. When you export your website this will automatically be added to each HTML page script. Press Close . And remember, you can call your own website any thing you want. The more descriptive your comment is, the better the chance of having your page recognized by Google.

If you are selling your design services for example, your title comment could be My Excellent Website Design Services, Placitas, New Mexico USA. This gives the search engines something to sink their teeth into.


Creating Website Buttons and Banners

Add two gray vertical 1 pixel lines on either side of the banner and starting at the vertical center of the banner. These are for decoration only and serve no real practical purpose.


Creating Website Buttons and Banners

Our website will have four pages. Remember the last button links out to another website. I could ask you to repeat what you just did for the first page on the next three pages but I fear I would have an insurrection on my hands.

So, we'll do this the easy way. Since all of our buttons are named, linked, and we hope, on the correct layers, we do this the easy way and just duplicate the current page.

Open the Edit menu and from the Pages fly out menu, select Duplicate Current Page. Everything on the HOME page is duplicated onto the ABOUT US page. Do this two more times.


Creating Website Buttons and Banners

    DOUBLY IMPORTANT: Your editor learned something very important so pay close attention. If you name your web site Index.htm, as I have done in the example above, browsers will display a page of file names and not your website. This can be very embarrassing. But if you name your file index.htm (all lowercase) web browsers will find this file and automatically display the first page of your website.

    Ah, and while I'm at it, one more important bit of information. When a browser goes to a website, such as, it automatically looks for a file named index.htm or index.html (lowercase). If the browser finds either of these files, it automatically opens that page. If it does not find the index page, or if the index page has an initial cap or is in all caps, it displays the embarrassing page with your file directory.

From the File menu, select Export. From the Save as Type: drop down list, select Website (HTML) (*.htm, *.html).

Name your file index.htm (all lowercase) and press Export.

I like to export files like this to the Desktop so I can easily find them. As you can see in the example above, Xara creates four HTML pages and a folder. The folder contains all your images, plus a small Style Sheet document and a few JavaScript files.

You can test your navigation by double clicking on the index.htm file. You won't see any change in the different pages but the title bar at the top of the browser will display the correct page number. Oh, and if you did this right your buttons will show the three states.

Save your work and take a short break.