Xara Xtreme 4 introduced some tools and functions for creating a web page or small website. These tools worked and with a few workarounds were quite effective. Roll over buttons and pop up images could be created by creating  some special layers. And workarounds were found to provide more flexibility.

Then Xara introduced Xara Web Designer, which built upon these tools. Many functions such as pop up images, mouse over buttons and effects, and automatic updating of certain items on all pages became simpler and more direct. A lot of thought went into Web Designer and all these innovations found in Xara Web Designer are also been included in Xara Xtreme 5.0. But Xara Xtreme 5.0 has moved the bar higher introducing new features and new capabilities as the Xara R & D team continues to make Xara a powerful website creation tool.

For openers, there are two new settings in the General tabbed section of the Options dialog (Utilities > Options... or right click on the page and select Page Options ). The two options shown above set up Xtreme 5.0 for website creation and make subtle changes designed to optimize web page creation. The second checked item, Show Windows Compatible Text Lengths takes into account how most browsers display text and inherent browser limitations and makes adjustments to the text to ensure that what you design is what you get.

Your editor (still me) has to admit to being a throwback as you can see in the settings above. He has always used Ctrl D instead of Ctrl K (Clone) to make an in place duplicate. Old habits die hard as they say. Except in Xtreme 5, Ctrl D is now consistent with Photoshop’s Remove Mask command so your editor has had to change the keyboard shortcut back using the Customize Key Shortcuts in the Utilities dialog. Such a bother!

There is a special Website Control Bar for website work which will be familiar to users of Web Designer. By default, this is disabled. But if you open the Control Bars dialog (Window dialog), and scroll down a bit, you will see it. Check the Website check box and close the dialog. The tool bar, shown above top right, containing a set of tools for working with your website design will be added to the Infobar.

The functions are explained below.

Export and Preview Website creates a temporary HTML document and displays your page in a special browser. This is useful for seeing how your page will look in a browser and for testing your buttons and other effects.

Export Website Use this function when you have completed your page to create a permanent set of HTML files. These files will later be uploaded to your website host’s server via FTP (File Transfer Protocol).

Link A menu of link options.

Website Properties The main dialog of tools and settings and effects including Link.

Export Selections as JPEG and PNG These buttons are probably redundant. In Web Designer, there is no Create Bitmap Copy function, so you need these buttons to export a selection as a JPEG or 8-bit PNG.

Publish to FTP Site Once you have created your web page or website, and you have entered your web host log in information, user id, password, and so forth in the Publish tabbed section of the Web Properties dialog, this button uploads your page or website to your web host’s computer.

Here is the Web Properties dialog. In the Link tabbed section you can link to a web address, http://www.xaraxone.com for example, or you can link to an image that is posted on the web. If you enter an e-mail address, Xara creates a link that opens the visitor’s e-mail program and inserts your e-mail address in a new message. If you have checked Correct Address Automatically, Xtreme will automatically add things in the HTML file such as mailto: in front of an e-mail address. Your editor has added to the e-mail address a short bit of code ?Subject= and a short line of text that will be inserted in the users e-mail message.

TIP: If you add an e-mail link to text such as Send e-mail instead of the actual e-mail address, Xtreme encodes the e-mail address to hide it from those insidious spambots that scour the web harvesting e-mail addresses to add to Spam lists.

You can add a link to another page, to an anchor (text or an image), to a Pop Up Layer or to a larger version of a small thumbnail image (Popup Photo). You can also specify alternate website link colors (usually blue) and designate an optional place in which to Open link in, such as in a new window.

IMPORTANT: Xtreme will not automatically apply any links or information until you press Apply. So always remember to press APPLY. If necessary, affix a post-it note to that effect on your forehead or glasses.

Here’s a sample of FTP information entered in the Publish tabbed section. Your web host can tell you what needs to go here if you are not sure. Please do not use this information.

Placeholders are a very convenient way to add predesigned content to your website. For example, you can create a form on websites such as Jotform.com or emailmeform.com, generate a script for that form on the website, then copy and paste the script into the Replace with HTML Code text entry box. You need a placeholder, which is just a simple rectangle to the approximate size of what will replace the placeholder on export. Select the placeholder object then link to a replacement file or add a replacement script.

You can also create a placeholder for a Flash animation or a graphic image which will replace the placeholder image in your visitor’s browser.

Remember to press APPLY.  A  P  P  L  Y

The Image tabbed section is where you can add Alt text to an image that will appear when the visitor lets her or his mouse hover over the image for a moment or two. This is a good place to add a copyright line to your image (for all the good in the world it will do!).

By default, Xtreme will determine what format to export your selection. But in some cases you may wish to override this.

Did I remind you to press APPLY to apply your changes?

In the Mouse-over section you can have text appear when the visitor mouses over an image, or you can activate a popup layer. This is a good way to pop up a small shape containing explanatory text.

This is different from linking to a pop up layer in that a mouse over disappears as soon as you mouse off the image. With a link to a popup layer, the popup layer remains until the visitor clicks another link or object.

In the Page and Website tabbed sections you can add a title for your page and for your home page, add meta tags such as Description and Keywords to help search engines find your site, author’s name and copyright and other important information.

And what do you need to press to APPLY each change?

In the File menu is an option to Import Graphics from Web... This imports all of the images on the specified page into your Xtreme page. This is a useful function if you need to recreate an existing website. Xtreme however does not import the HTML script. So you need to place the images on the page yourself. And if the website has mouse over buttons or pop up images these will not import.

There are some very powerful new features that have been added to the Arrange menu.

Soft Group Let’s say you have a navigation button with three different button states: (MouseOff, MouseOver, MouseDown). Each of the button states is a group consisting of a rectangle and some text. You can Apply Soft Group to these three groups which lets you edit all three buttons at one time. For example, if the button text reads Contact Information and you decide to change the text to Contact Us, if you change the text once, the text for the other buttons in the soft group will automatically change at the same time.

Repeat on All Pages places a copy of a selected object, a banner or a navigation bar for example, on all the pages of your site. This automatically becomes a “repeating object”. If you edit the color, position, link, or text and press Update Repeating Objects, all instances of that object are automatically updated throughout your site.

In the past, you could hold down the Shift key, and drag a bitmap image from a folder or from the desktop and drop it onto another photo, a rectangle, some text, or an irregular shape, and the bitmap image would replace or be applied to that photo or object.

I use Shift drag and drop all of the time to replace a cloned photo with a new photo. This not only resizes the dropped photo to the desired size, it retains  attributes such as transparency type.

Not so any more. Now if you have a photo of a Chevrolet, and you clone that photo (two Chevrolets), and then hold down the Shift key, drag and drop a photo of a Ford on top of the Chevy, you will have two copies of the Ford. The Chevy will be replaced. Ouch!

There’s a good side to this as well. Let’s say the photo appears on each page inside the banner. When you Shift drag and drop a new photo onto the banner, it is automatically replaced in every instance of that photo. Not only that, but if the photo is used as a fill in a variety of different shapes and sizes, it is resized accordingly. On every page in which it appears. Cool.

OK, you ask, and well you might, what if I do not want to replace even so much as one instance of the existing photo? I want my photos of both the Chevy and the Ford. Not a problem. Instead of holding down the Shift key, hold down the Ctrl key before you drop the photo. A requester such as the one shown above (in two halves to fit on the page) appears with the options to: Replace All, Replace All on this Page (presuming the image appears on other pages too), or Replace Just This Photo. It is a win win situation.

I wanted to test out some of the new features and as it so happens, I needed a new artist’s gallery format for a local artist website that I handle. Here’s a link to the new gallery format. Normally, each artist’s gallery consists of a home page, an artist’s statement, a contact information page, and 8 gallery pages. That’s 11 pages in all. I got it all down to one page.

The thumbnail images link to larger images on separate pop up layers. The artist’s statement and the contact information are also on separate pop up layers and linked to with the navigation buttons. The last button links back to the main website. Very tidy if I do say so myself.

Shoutouts! Giving credit where credit is due, Minimiro from the TalkGraphics conferences is responsible for the exceptional product identity and package design. Hats off to you, Miroslav! And major kudos and heartfelt thanks to all of the designers and product developers at Xara for giving us such excellent and innovative products year after year.

So, what do you think? Are you as excited as I am? Xara has really pumped up the power in this release. But your editor (me) would like to hear from you. Your questions, comments, and such are always treated in the utmost confidentiality and I would never sell your name (unless the price is right--just kidding) to anyone.

And if you have not already done so, press the download image to the left and download your free copy this very minute. Do not put this off. Do it NOW! OK?

Gary W. Priester
Your Editor
Click here to send me your feedback.