chishtianwahab

Website made using only Xara Web Designer, and no other graphics or software tools.

Read Me First

This is a short tutorial, and a working website document you can experiment on. If you’re reading this in Web Designer then feel free to experiment and explore the features of the program. If you’re reading this as a web page, then this is an example of the type of website you could be producing with Xara Web Designer. This is how to create a great looking website in 6 easy steps:

1) Open the Designs Gallery and select a design

OK we don’t actually need to do this because this document is already open. It’s based on the template design called ‘Free Example’ in the Website Template Themes folder. You can see all the templates available when you purchase the product) by moving your mouse over the ‘Designs Gallery’ label on the right side of the window. Preview your website: Select File -> Preview Website or just click this icon on the top bar. There are two similar buttons. The first previews just the current page (quickest) the other previews the whole website. Try it now to see what this website looks like in a web browser. In the Preview window check out the buttons along the top, and move over the various objects, such as the photo above right, or click the links, such as the one immediately below here to see various layer effects.

2) Edit the Theme Colors

Move the mouse pointer over the left end of the Color line at the bottom of the screen and click on any of the square color patches. Select ‘Edit’ to display the color editor, and you can now edit your website Theme Colors. For the best results we suggest making Theme Color 1 and 2 similar or matching colors. There are theme colors for all the main design elements of this design. Click to find out more about the Color Editor. Color Schemes. To make color editing even easier we provide some ready-made color schemes that you can drag ‘n’ drop onto the page. Open the Designs Gallery, go to Website Template Theme -> Free Example folder, scroll down to the bottom and you will see a variety of Color Scheme thumbnails. Drag any onto this page to see all the website colors change in an instant.

3) Edit the text on your website

Click the big T icon on the left set of tools (the Text Tool). Now click on any text and start editing. Try the heading and replace it with your own.  When using the Text Tool, the bar across the top allows you to change font, size, etc. The ABC icon at the right end is a spell checker control. Text editing is like in any word processor, for e.g. drag to select text. You can change button text the same way. Some buttons are ‘stretchy’ and can accommodate any text label. Try this button below. Using the Text Tool, click on the ‘Stretch button’ text and edit it, and you’ll see the button graphic change.

4) Re-arrange your objects

Now let’s try some object moving and resizing. Choose the Selector tool (the large arrow at the top) and drag on the photo on the top right of this page. See how the text flows around it.  Try dragging on the large page heading and Preview your website again. To resize an object drag on one of the corner handles shown around the selected object.  Try it on this pale flower symbol under the text. Click on it with the Selector arrow, then drag a corner handle.  This is what makes Web Designer unique - place anything, anywhere on the page, and you get a pixel accurate website, without any of the usual HTML constraints. This flower is special in one other way - it’s a Repeating Object and appears at the same position on every page of your website. There is more information about Repeating Objects on the Advanced page. To rotate an object click on it again so you get rotate handles in the corners. Drag on these to rotate the object. Try it with the petal shape or a text heading even. This way you can easily move, resize and rotate just about anything on the page. Step 5 continues on the next page:

Drag here to change the hue to be any color of the spectrum

Click here to see more advanced controls such as showing the hex RGB color values.

Drag in here to change the shade of the selected color, to be lighter or darker. When changing Theme Colors, it’s normally best to not adjust the shade by too much.

You can drag the eye-dropper anywhere on screen to pick colors from the screen

The Color Editor

This panel is created as a pop-up layer which, for the more advanced users, you can see in the Page & Layer gallery.  The round-cornered panel background was created with the Rectangle Tool, and made very slightly transparent with the Transparency Tool. It was given a soft shadow using the Shadow Tool. The arrows were drawn as simple straight lines with arrow heads using the Straight Line drawing tool. Web Designer includes all tools to create just about any graphics and photo effects you’re likely to require.  And no HTML or JavaScript knowledge required at all. Click anywhere to hide this layer.