You can also find this example document in the Designs Gallery. Click the button, open the Introduction category and just double click on the first document.

Remember you can undo any change you make using the undo button or Ctrl+Z. If you hold the button down you can race back through all your actions, right back to the beginning.

This section gives an overview of the main functionality of Web Designer. Later sections go into more detail about each tool.

Program Layout

The main controls are highlighted above 

There are seven buttons in the top bar that relate to website functions

There are two ways to create a new website. Either by starting with a pre-designed template and then customizing this with your own text, photos and color scheme. Or by creating a website from scratch, placing all the required elements, text, graphics and photos on the page where you require.

Zooming / Scrolling / Pushing your page

These common operations are made very easy:

• To Zoom in or out, hold Ctrl and use the mouse-wheel
• To push the page, press your mouse-wheel and push (yes it's a button as well)
• To scroll use the mouse-wheel (or the scroll bars of course)

Zoomed out View

All your pages in your website are presented one below the other, in a word processor like style. This makes it very convenient to view your whole website, especially zoomed out. You can drag and drop items between pages in this way. When you make site-wide Theme color changes, you can see how the changes affect all pages.

The current page is marked with 4 corner brackets. 

In this example you can see some items have been placed on the pasteboard area beside the pages. These are not exported as part of your website.

The pasteboard area is useful as a place to keep temporary or working graphics, photos or other objects.

Objects On The Page

Whether you customize a template or create your own graphics from scratch, you can rotate, resize and position anything on the page, anywhere you like.  You can easily resize the page to be any required size and add new web pages as required. Certain features, such as changing color schemes, work across all pages simultaneously.

 

There are just three basic types of page element:

 

Text: Using the Text tool you can create anything from single word headings to columns of text or even blocks of text that flow from one block into another. The Text tool InfoBar provides controls over the font, size, line spacing and more. You can resize text either by using the Selector tool or by selecting the text in the usual fashion and choosing alternative point or pixel sizes. Perhaps surprisingly you can even rotate text by any angle, and by using the Repel text feature you can automatically flow text around objects on the page, such as photos.

 

Graphics: Any type of logo, heading and most buttons that appear on your website are graphics. Web Designer is a vector graphics program which means you can edit the shape, rotate and resize your graphic objects with no loss of quality (unlike pixel photo editing tools such as Photoshop). And although there is no vector graphics standard for web pages (for websites all graphics have to be either JPG, GIF or PNG formats) Web Designer creates the correct format and resolution automatically. For example, if you want to create a colored panel to place behind your text, you'd do this by drawing a rectangle or rounded rectangle object on the page, and placing this behind your text. When you save your website, this is automatically converted into a PNG graphic image of the correct resolution.

 

Photos: There are few websites that do not contain photos of some sort. Xara Web Designer has a great range of photo editing tools. You can drag and drop photos directly from your camera or File Explorer window onto the page, rotate, enhance, crop, and Web Designer automatically generates the correct resolution JPG image. Replacing existing photos in templates is as easy as drag and drop - and you can alter the size and angle of photos 'inside' their frame very easily. You can easily create clickable photo thumbnails that pop-up an enlarged version.

 

There is a fourth type of object, which is really just a special type of graphic - a placeholder:

Placeholders: These are graphic objects on the page which will be substituted in the final website for a range of other web page elements such as Flash animations, embedded YouTube videos, Interactive Maps, HTML snippets and 'widgets' of all kinds.

Object Based Web Design

The Selector tool  can  be used to select any object on the page, and to move (just drag it), resize and rotate the objects.  You can adjust the stacking order (that is whether an object appears in front or behind others on the page) using the Arrange menu options. With the Selector tool you can resize objects by dragging on the corner resize handles.  You can rotate any object by dragging just inside the corner selection handles.  And although websites do not support rotated text, Web Designer knows to automatically create the appropriate graphic image so the resulting page will always look exactly right.

To add some text to your website, select the Text tool and click anywhere on the page and start typing. You can also create text columns, by clicking and dragging horizontally in the Text Tool, or text boxes by dragging horizontally.  See the Text section below for more details or the more detailed Text chapter in the Help.

You can use the drawing tools to create rectangles, rounded rectangles, circles and ellipses, and just about any shape you like using the Shape Editor tool . See the Drawing tools section for more detail.

The Selector Tool 

Drag on any corner handle to resize an object. Drag just inside the corner handles (shown left) to rotate.

Rectangles and Rounded rectangles have eight handles so you can stretch them as well as resize.

Other objects, such as groups, blocks of text, photos show only 4 handles and can't be stretched (because they would distort).

When an object is selected, the InfoBar - just above your document - shows all the relevant controls for the current tool.  This bar changes depending on which tool is selected. This is the InfoBar in the Selector tool:

 

The InfoBar, just above your document, shows controls for the selected tool.

 

You can enter numeric values into any field. e.g. to reduce the size of an object by 20% you can enter 80% into the W field (which is a % size). The little padlock selects whether both the width and height change together.

Copying Objects

You can use the usual Copy (Ctrl+C) and Paste (Ctrl+V) options, but a really quick way to copy any item is drag on it with the right mouse button.

Click the Export & Preview button on the top button bar to open a browser window that shows you exactly what your final website will look like.

 

Using Templates & Clipart

Open the Designs Gallery by choosing the File -> New from Designs Gallery menu or clicking the Designs Gallery button on the top button bar. This shows folders containing collections of website designs and associated graphic files that each follow a specific theme. Browse through the folders and double click to open any file as a new document. Each theme section has a collection of alternative page layouts and some other useful page elements such as buttons or expanding text panels. 

To add a new page of the same design, the easiest way is to use the 'copy page'  button on the top bar. This replicates the current page below. You can then just delete or edit the elements as required. This has the advantage of keeping the same navigation structure.

All the templates use a small set of theme colors, and various shades of those theme colors. These can be edited as a way to very quickly and easily re-color your whole website. These are called 'Named Colors' and appear on the left side of the Color Line along the bottom of the window. 

The Color Line displays Theme Colors on the left, and a variety of other controls.

Simply click on any of the Named Colors and select the Edit option (if you hover the mouse pointer over the color you will see a tooltip name).

The Color Editor provides easy way of choosing any color. Click the Extended Controls to enter RGB values.

Note that when you change a Theme Color in this way, all the related shades used throughout the document will change as well.

Coloring Shapes

You can fill any drawn shape with a color, either by dragging the color from the Color Line and dropping it on to the shape, or by first selecting the object and then clicking on the Color Line and choosing 'Set Fill Color'. Alternatively click the small Color Editor icon (or press Ctrl+E) to display the Color Editor, where you can set any color you like. You can give drawn objects a graduated color fill using the Fill Tool.

Note: If the photo is inside a group, as many of the photo objects in the templates or clipart are, then you will have to select the photo inside the group first. You can do this by holding Ctrl down when clicking on the object in the Selector tool. Another way of directly selecting the photo is to click on it in the Photo tool.

Background Colors

Most of the page designs in the Design Gallery have two types of background. A wide page background that extends across the background of the whole browser window. On top of this is drawn the web page elements, that usually consists of various colored panels.

A typical web page in a browser window with the common named colors marked

On the Color Line there is usually one color named 'Background Color', another 'Panel Color', and by editing these you can control the various background colors. The other colors used are typically Theme Color 1, 2 etc

The advanced section contains more details on the following elated areas;

Setting page background of a blank page
Creating graduated color backgrounds
Creating your own Named Colors
Linked Shades

You can replace any photo by dragging and dropping it from your File Explorer onto any photo in Web Designer. If you drop it onto the background then it is imported and placed on the the page where you dropped it. All imported photos are shown as 500 pixels, but you can of course change this to be any size in the usual way with the Selector tool.

Drag and drop your photo over any existing picture to replace it. Drop onto the background to import as a new photo

When you replace an existing photo, the Fill tool is selected and a pair of Fill Arrows are shown at right angles on the photo. This is because the photo is really a fill inside a shape. You can drag on the picture to re-position it, or drag on the ends of the Fill Arrows to resize and rotate the picture inside its outline shape.

Drag on photo to re-position inside its frame. Drag on end of arrows to resize and rotate. 

The Photo tool  provides a range of ways to enhance and crop any photo. With the enhance tool in the Photo tool selected you can just click on any photo and adjust any of the controls on the InfoBar.

You can very easily create small thumbnail photos that when clicked will show an enlarged version. Simply resize you photo to be small, the usual way. Then open the Link dialog (click the Link icon  on the top bar) and select the 'Popup photo' option. See left.

You can optionally show a short caption below each popup photo. Just set the Image Description (Alt text) for the thumbnail on the Image tab of the Web Properties dialog. In Internet Explorer the Image Description will also show a tooltip pop-up as you mouse-over the image.  To show different text, typically something like 'Click to enlarge' as you move over the thumbnail image, go to the Mouse-over tab and set the 'Show pop-up text' to be 'Click to Enlarge'

You can edit the text by selecting the Text tool and clicking on the text. You have all the usual word processing facilities, and can paste text from the system clipboard.  Double click will select a word, triple click will select a whole line - which can be useful for selecting all the text in a button. As usual the InfoBar provides a wide range of controls for this tool. 

The font menu displays a list of fonts and is split into three sections. The top section shows fonts already used in the document, the next section shows web safe fonts, and finally the lower section shows all fonts installed on your computer.

The three sections of the font menu. In this example Courier New is selected showing the available bold and italic variants.

Not all fonts have such variants.

The panel background changes to accommodate longer or wider blocks of text.

On the Text tool InfoBar is a button  that selects the spell checker options and language. If you select 'Check Spelling as you type' is will also mark all unrecognised words with a red dotted underline. Right click on any marked word to be presented with suggested alternatives.

The pages in the Designs Gallery are designed to be a width that is known to fit the vast majority of computer screens.  Creating web pages is not recommended, even though you will probably have a wider computer screen, experience shows most viewers prefer to have a fixed width page. However you can adjust the page size to be anything. You can also create a new blank page to be any size. See here for more details.

Adjusting the page height

You can directly adjust the height of your page by just dragging on the bottom margin of the page. Go into the Selector tool and hover the pointer over the bottom edge of the page, and it will change to indicate you can now drag resize the page up or down as required.

Drag the bottom edge of the page to resize

Saving Your Work. Creating A Website 

Use the Save or Save As menu options to save your work in progress. This saves a file with the .web extension, which is the native file format for Web Designer (this is not a website).  You are recommended to regularly save your work as you go along. If you want to edit or update your website in future, you must save a .web file this way and use to do further updates.

To save your website, that is the HTML and associated files for publishing to the web, use the Export Website menu option or click the on the top bar. This saves a .htm file for each page and a folder alongside these which contains all the graphic files that make up your website.

When you export a website, all the pages are exported together, and each page has _1, _2 ... appended to the end of the name you give when you export. The _files folder contains all the graphics and other files that make up your website. You can name each page individually if you wish using the Page tab of the Web Properties dialog.

The default name given to your website is index.htm as this is the usual name for the first page of a website.

You can preview your saved website in any web browser, by dragging the index.htm (or any .htm) file from your Windows File Explorer onto a browser window.

Stretchy Objects 

Many of the graphic objects, such as buttons and text panels, can automatically adjust their size depending on the size or length of text.  For example some of the buttons are called 'stretch buttons' which means that the length of the button adjusts to accommodate the label text on the button. Most template sets, and all of the buttons in the Button folder in the Designs Gallery, have both fixed width and stretchy versions. It's recommended that if building a set of navigation buttons (typically either a horizontal or vertical collection of links or buttons) that you use fixed width so they are all the same size.

Buttons, some heading style and other graphics can automatically adjust their size to accommodate the text

Similarly many of the side or text panels in the templates, and sometimes the main text area, can also adjust their vertical, and sometimes their horizontal size.  In the case of text panels you can adjust the width of the column in the Text tool by dragging on the left or right end of the column indicator. See Text Panels above for an example of this.

Groups

Many of the items in the template designs from the Designs Gallery such as buttons, text panels, and photo objects are grouped items. Groups act much like a single object, in that you can drag them around the page, resize and rotate them as if they were one object.

There are two types of groups commonly used in the page designs, Groups and Soft Groups. (As usual the Status line shows what is selected.) They both perform similar purposes, enabling you to treat a complex group of objects as a single item.  To find out more about Groups and Soft Groups see here.

To group together any selection of objects on the page, select them all and press Ctrl+G, or the menu Arrange -> Group

Converting Text To Be A Graphic

Links, Buttons & Button Bars

You can add a web link to any object, a button, graphic or some text. Select the object and just click the link icon at the top to enter the web address that you want to link to.

   Enter the Web Address you want to link to in the highlighted field.

So to set one of your buttons to be a link, just select it, (click on it in the Selector tool), click the icon, and enter the web address, or just select one of your pages from the drop-down list and click Apply. That's it.

Highlighting (rollover) buttons, pop-ups and layers

Drawing Tools 

I addition to the pre-designed graphical elements provided in the Designs gallery, Web Designer provides all the graphics tools you need to create just about any graphical object, as well as tools to edit the shape and fill styles of existing graphic objects.

To find out more about using the drawing tool refer to the More Details section here.

Repeating Objects

It's common to have items like navigation buttons, headers or logos repeating on all pages of your website. Web Designer provides the ability to repeat any item in the same place on any of your web pages. When you update one of the copies, you can then quickly replicate those changes across all pages.

 

On most of the Design Gallery designs the main navigation buttons are repeating.  When you change any button, such as the text or web address, you can select the menu item:

  Arrange -> Update Repeating Objects, and the buttons on all the pages will be updated.

Note: This uses the current page as the source of the repeating items to update across all the other pages. So make sure you're on the right page before you choose this menu. The selected page is the one you're working on, and is shown with    markers around the page corners. Just click anywhere on the page (even outside it) to make the page current.

It's easy to to create your own repeating items, just select any object, and choose

  Arrange -> Repeat on all pages

The object will be copied to to the same place on all pages. If you make any further changes to this item select Arrange -> Update Repeating objects again to update all the copies.

If you don't want a copy on a page, just delete it from that page. Further 'Update repeating objects' will only update the items that already exist on the page.

Footers

If you want a common footer to appear at the bottom of every page, you can use this Repeating  Objects system. Select the item (can be an individual item, groups or multiple items) and use the 'Repeat on all pages' option.  This is smart about positioning, so items at the bottom of the page will appear at the correct position irrespective of the page length.

There is more information on repeating objects in the Advanced section here. 

Creating Buttons, Banners And Other Web Graphics

Web Designer is great tool for creating any standalone web graphics for use with other programs or other web authoring tools. You can draw these objects from scratch using the drawing tools, or use ready made web clipart from the Designs Gallery.

 

Just draw, design or import an item from the Designs Gallery onto a blank page. Manipulate as required - size it, color it and change the text or fonts as required, and then export the item as a PNG or JPG.

 

For example this is how to create a standalone button graphic from a template:

1. Open the Designs Gallery and then the Button category (or Icons or Headings - whatever category you require)
2. Double click on a design to open this in a new document. Edit this as required e.g. you can:
   • Resize it (or rotate) it using the Selector tool
   • Change the color by clicking on the appropriate colors on the left end of the Color Line and choosing 'edit'
   • Change the text with the Text tool
3. When you're happy, select the object and export it as a PNG or JPG using the options on the top bar.

 

For almost all graphics, such as buttons, headings, icons and other non-photographic objects you should use PNG format.  For items that contain photos or that have large textured parts made from photos, then JPEG is a better format.  If you're saving a rotated photo, or one with a soft shadow, or soft edge, then this should be in a PNG format, but be warned this will be a lot larger file than JPEG.

If you click the Settings button you can access an advanced control panel that lets you optimize the image.

 

Here you can compare side-by-side two different versions of the same image. For example you can compare a JPEG against a PNG version of the same graphic to compare the quality and / or file size, or you can compare two differently optimized PNG images. Refer to the reference chapter on the Export dialog.  The in the above example the JPEG compression is being adjusted to produce the optimum file size.

 

Publishing Your Website

You will need a web hosting company to host your website. There are thousands of these available, and quite often your existing Internet provider will include 'web space' as part of your normal subscription.  Google for 'Web hosting' to find a great many companies offering the service. For home users and small businesses this typically costs very little. Most companies also offer the ability to purchase your own domain name (e.g. like www.xara.com) and have this set to point to your web pages.

You require three bits of information in order to publish your website;

1) The FTP Host Address. If you have a domain name this is often the same as your domain name

2) An FTP username

3) And associated password

Simply enter these details into the Publish Tab of the Web Properties dialog.

The optional Sub-folder lets you publish your website into a sub-folder. e.g. if you're publishing to the xara.com domain (of course you can't do this) and want the web address to be;

    xara.com/products/web_designer

Then you'd set a sub-folder to be 'products' and the page name of 'web_designer'. If you set a sub-folder this way then all the pages in your website will be published to this folder.

Once you've set your Publish details, you can then click the Publish icon  on the top bar. (Note: you must have exported your website first). Your website will now be published. A progress bar will show you the progress of the upload of the pages to the web server.

Note: Xara Web Designer remembers your FTP Publish details so you do not need to enter each time you want to update your website. However if you have multiple websites, then you will need to remember to change the publish details for each of your websites.

Note: Many web servers use case sensitive filenames. So, for example, the web address xara.com/products.htm is not the same thing as xara.com/Products.htm.

To reduce confusion and the likelihood of errors Web Designer enforces that all page names are all lower-case and contain only allowable characters. This means that spaces are not allowed in page names. We suggest using an underscore as an alternative separator. 

Important: If you have not set any specific page name, then the name you exported to last will be used for all the pages in your website. E.G. If you open a template website, and export this as 'test' to your file system, and now publish this, it will be published as test.htm to your web server, and all additional pages will be test_2.htm, test_3.htm etc.

If you have not set an Export filename, when you first Publish you will be asked to enter a filename. index.htm is the usual name for the first page of a website.

Embedding YouTube, Flash And Other Widgets

You can embed a wide variety of interactive widgets; YouTube videos, Picasa photo slideshows, Google Maps, Flash files or any HTML snippet.  This is done using placeholders, which are objects (simple rectangles or photos) that have an associated piece of HTML or Flash file that is substituted for the placeholder when saving your website.

Adding a Google Map

Go to Maps.Google.com and locate the map you want to embed. Click the Link icon in the top right of the window, this opens a small window offering some HTML which will embed the map into a website. Copy this HTML.

The top right link opens a window showing the HTML snippet for this map

If you click the Customize option you can customize the size, and various other options.

You'll see that the HTML contains a width and height value (in the above case 425 by 350). In the Rectangle tool, create a rectangle that is this size, 425 by 350 pixels. You can enter the pixel size on the Rectangle InfoBar.

Now open the Web Properties dialog (Ctrl+Shift+W) and go to the Placeholder tab, and paste the HTML snippet into the 'Replace with HTML code' field.  Click OK and Preview your website. You should see a working Google Map.

Adding a Flash File

Flash Files (with a .swf file extension) can be embedded using the same method. First create a graphic that is the size you want your Flash to be. Select the Placeholder tab of the Web Properties dialog and select the 'Replace with Flash' option.

There is one important difference with Flash placeholders - you can resize them to be any size you like and the Flash will scale to fit the placeholder.  Secondly you can have transparent or semi-transparent Flash and this will also work on top of your website. Most other Widgets are fixed size and will always appear at the given size on your web page irrespective of the size of the placeholder.

Whenever you select a Flash file to be associated with a placeholder in this way, the Flash file is copied into a _files folder saved alongside the .web document.  If you move or copy the .web file  you should also copy the _files folder to ensure the Flash files are copied as well.

Adding HTML Snippet

Create a placeholder graphic, as above, which can be any object, such as a simple rectangle. Go to the placeholder tab on the Web Properties dialog and choose 'Replace with HTML Code' and insert the HTML.  When the web page is displayed in the browser the graphic is replaced with the HTML code.

Tip: WYSIWYG Widgets. Instead of using a simple black rectangle as a placeholder you can do a screengrab of the actual Widget as shown in the browser and use this, so that your placeholder looks exactly like the real embedded object.

Inserting a Picasa Photo Slideshow

Go to the Album page of the Picasa album you want to embed. On the right side click the 'Link to this album' which opens a few more options. Do not use the HTML shown there (that will embed only a static image), but click the 'Embed slideshow' link which opens a dialog where you can customize various sizes and options for your slideshow. Copy the HTML and use this on your placeholder (as described above).  In the HTML you will see a width and height parameter which you should use as the size of your placeholder rectangle.

Note: At the moment this works only if the Language setting of the Picasa web album is set to English (US).

---

More Advanced details

This section contains more detailed information on many of the Web Designer features.

Alternative Browser Preview

To preview your website in different web browsers, export it using the File-> Export menu, or the export icon   on the top bar and then open the .htm file in whichever browser you prefer. You can often right click on the saved .htm file and select Open With, or you can just drag and drop the file onto an open browser window.  Once you have exported then each time you click the Preview button, the last exported version is updated as well, and so it's just necessary to press the Reload in your browser (or press F5).

Drawing Tools

All graphic elements (apart from photos) in Web Designer are vector graphics, which means you can edit the shape (sometimes called the path), rotate, resize with no loss of quality. You can zoom in to see almost infinite detail, and all edits can be undone.

Soft Vectors

Unlike most traditional vector illustration tools such as Adobe Illustrator, Web Designer includes 'soft' vectors which can have soft or blended edges. e.g. the Soft Shadow tool and the Feather Tools. These tool create a higher quality more realistic look

Import

You can import just about any type of graphic, including most vector graphic files (either EPS or PDF as well as WMF).  There are stock graphics libraries, such as iStockPhoto that provide very wide range of vector graphic files (as well as stock photography) and Web Designer can import such vector files.

The Tools

There are three basic drawing tools that let you create rectangles, ellipses, or any shape you like.

 

Web Designer provides vector drawing tools which means you can resize, edit the outline shape and re-color with no loss of quality. 

 

To draw a rectangle, select the Rectangle tool  and just drag across the page. This creates a black rectangle. Click the 'curved corners'  button on the InfoBar to make this a rounded rectangle - and you can drag on the curved corner handle to adjust the roundedness.

You can drag on any corner handle to resize an object.

Drag and drop a color from the Color Line onto your shape to re-color it. See Coloring Shapes. With the Selector tool you can drag it, resize it and rotate it as required. See Selector Tool.  You can put this rectangle behind all other objects as a background image, by pressing Ctrl+B for 'Put to back'. Alternatively if it's in front of all other objects (Ctrl+F) then you can right click on it and select 'Repel text under' to make the text on your page repel around the outside of this shape (another Web Designer first for any web authoring tool.)

The Shape Editor tool  allows you to create detailed vector based shapes, and also to edit the outline of any shape.  For preset shapes such as rectangles or ellipses, or if you want to edit the outline of your text character shapes, you need to convert the object to an editable shape first. You can do this by selecting the Ctrl+1 key shortcut. You can then use the Shape Editor tool to perform various advanced vector editing.

Refer to the reference section of the Help on how to use this very powerful tool.

Fill Tool 
You can easily put a graduated color fill onto a shape using this tool (and a lot more besides).  Select the tool and just drag across your object. The fill arrow can be adjusted by dragging the ends to alter the direction, angle and extent of the graduation.

Rounded rectangle with a graduated fill.

Note: If you drag with the Fill Tool across a grouped item, such as a text panel, then everything in the group takes on the same fill style. To apply a fill to just an item inside the group (e.g. a text panel under some text) you must first select just the item you want to fill. You can do this several ways. A single click on the item with the Fill Tool will select just that item, as will a click in the Selector Tool with the Ctrl key pressed (this is called 'select inside' because it selects just the one item inside the group).  Now when you drag it will fill only the selected object.

To edit the start or color of the fill just drag and drop a color from the Color Line onto the shape, or you can select the end of the Fill Arrow in the Fill Tool and use the Color Editor (Ctrl+E).

Find out how to create a multi-color graduated fill. 

There are different fill styles, for example this is a circle with a circular fill.

 

 

 

 

The shadow is another ellipse with a graduated color fill and feathered (see below)

Transparency Tool 

Modern browsers support advanced transparency effects, and so does Web Designer. You can adjust the transparency of any graphic or photo to make it see-through.  Try it on your rectangle example. Just select the Transparency tool, and adjust the large slider on the InfoBar.

More than this, Web Designer supports graduated transparency. It works very like the graduated color fill. In the Transparency tool just drag across your shape and you can see the transparency fades.  You can adjust the degree of transparency of each end of the fill arrow, by clicking on either end of the arrow, and adjusting the Transparency slider.

Preview this and you'll find this 'just works' in your browser as well.

Feather

This is a graphical term for blending the edges of objects.  Web Designer provides a feather control that enables any object, graphics, text or photo to be feathered - giving it a blurred edge that blends with the background.  The Feather control is not a tool on the left, but one of the controls on the top bar.  Try it on your rectangle shape. Select the shape and then click this Feather control on the top bar.

The shadow below the ball drawing above has a feathered edge. Combining all of these controls you can very quickly produce amazing layered graphics for your website, all directly in Web Designer without needing any other graphics tools.

This is an example of a Rounded Rectangle with grad color, grad transparency and feathered edges with some text placed on top of it.

 

This has a graduated color fill, light to dark green going left to right. It also has a vertical graduated transparency fading from top to bottom. The feather gives it a soft edge.

It takes a couple of seconds to create such an image, and it's automatically converted to the right graphic when you save your web page. In Web Designer you can create any type of graphic, photo, text with transparency, and it 'just works'. It can also import almost all graphics files, from Adobe EPS, to Photoshop PSD, Camera RAW and more.

Technical note: Web Designer automatically converts any vector graphics into PNG images, an alpha-channel PNG if transparency is used. It uses CSS layers to replicate the object layer stacking in Web Designer. This is compatible with all modern web browsers.

Shadow Tool 

A very popular graphics effect is to create a soft drop-shadow under a graphic or some text. This serves to lift the object away from the background.  The Shadow tool lets you add a soft shadow to any object, text, graphics or photo. Select the Shadow tool and just drag on the object. You can adjust the shadow blur and transparency using InfoBar controls.

Some text with a soft shadow. 

To adjust the position of an existing shadow, go into the Shadow tool and drag on the shadow.

Example Graphics

This is a perfect example of what can be created in Web Designer. This button combines many of the features described above - it's drawn by combining just a few feathered shapes, and using graduated transparency (the white reflection effect). The text has a slight soft shadow and the button has a glow shadow. The whole thing is grouped.  (You do not need to draw this button as it's provided in the Button category of the Designs Gallery).

 

The huge benefit of vector graphics, compared to 'bitmap' graphics created in pixel editing software such Photoshop, is that you can re-color, edit, rotate, and resize the button with no loss of quality. Make it huge and it remains pin sharp:

On top of that you can re-color using the Named Color system, and it will even stretch as required - everything in Web Designer remains non-destructive (which means you can always edit it, with no loss of quality).

Something that would take skill and time to produce using alternative graphics software, is trivially easy in Web Designer.

Advanced Color Control

Setting the page background color

When you open a new blank page (File -> New -> ) the page default to being white. This is the background on which you place all the elements of your website.

If you drag a color from the Color Line over the page, and hold the Ctrl key when you drop it, it will set the page background to that color. In the Web Browser this background color is shown over the the whole area of the window background.

 

 

To set any color background, open the Color Editor (Ctrl+E), and drag the second small color patch from the right side of the dialog and hold Ctrl key as you drop the color patch on the page background.  Now as you edit the color in the Color Editor, the background will change in sync.

To set a repeating background texture, drag the photo or bitmap onto your document. Open the Bitmap Gallery,  scroll to the photo you just loaded, click on it to select it, and then click the Background button on the Gallery.

To Create a Graduated Color Background

The easy way to create a graduated color background is to draw a rectangle over the whole page, put it to the back, and give it a graduated color fill with the Fill Tool - just drag across the rectangle. (See here for more about the Fill Tool.)

Advanced backgrounds: Web Browsers do not allow a graduated color background over the whole visible window (i.e. as a real HTML background), but they do support repeating, tiled, bitmaps as backgrounds.  So you can use this to create a full-window graduated background, by creating a bitmap, which is then tiled (repeated) across the page.

This is very easy to create in Web Designer, and if done right can be a very small, efficient file.  Because web background images tile - that is they repeat horizontally and vertically - you can create a long thin bitmap, and because this tiles across the page, it gives the effect of a graduated color fill across the whole page.

By creating a long thin strip as on the left, when set as a background, 

you get a graduated color background across the whole page.

 

1. Draw a tall thin rectangle. This needs to be as tall as any user is likely to make their browser window so it doesn't repeat vertically. A value of 1000 pixels or more is recommended, which is much taller than your page. You may need to zoom out to draw one large enough. It should be very narrow.
2. Make sure your rectangle has no outline: Click it in the Selector Tool and set it to have no outline. Click on the 'no color' cross-hatch patch on the Color Line (or select 'none' from the Line Width drop down menu on the top button bar).
3. Ensure the rectangle is a few whole pixels wide, and then ensure it is on exact whole pixel X and Y coordinates: In the Selector tool select the rectangle, edit the Width (W) value, press Enter, then edit the X and Y positions to be whole numbers.
4. Using the Fill tool, give it a graduated color fill as required: Just drag on the rectangle. Make sure it's graduated top to bottom by adjusting the fill arrow if necessarily.
5. Export the rectangle as a PNG image: Click the 'Export as PNG' icon.  Once exported drag it back onto the page from your File Explorer.
6. Open the Bitmap Gallery  scroll down to see the graphic you just loaded (it will be a very thin, almost invisible thumbnail in the Gallery), and select it (click on it in the Gallery) and then click the Background button on the Bitmap Gallery.  You can now delete the original rectangle from the page.

Note: You can use the point 6 method to set any photo to be repeating background to your web page. You are recommended not to use this for photos or any high-contrast image, as it generally results in difficult to read, poor looking websites.

 

Creating Your Own Named Colors

If you want to use a color many times throughout a document, you can create your own Named Color by clicking the Name label on the top of the Color Editor.  This color will now appear on the Color Line.

 

 

The power of a Named Color is that when you edit it later (click on the color, select Edit) all objects using this color are instantly changed.

Linked Shades

You can create colors that are lighter or darker shades of another color, so that when you alter the 'parent' color, all the lighter and darker shades change to match the new hue.  For example a graduated color shade on a button, such as this:

This is a simple rounded rectangle with a graduated color fill created with the Fill tool. In the Fill tool you can click on the either end of the arrow to set the color.

If you create the main green color as a Named Color, and then make a lighter or darker shade of the color, as a Linked Shade, when you now edit the the Named Color the shades change as well, so you get simple re-coloring of complex shaded objects.

 

 

To create a linked shade open the extra controls in the Color Editor and select the 'Normal Color' drop-down menu and choose 'Shade of another color'.

 

 

You can also create a Linked Shade that appears on the Color Line (so you can easily apply it to other objects). When you create a new Named Object you can choose to make this a linked 'Shade of another color'.

Embedded Fonts

Web Designer stores the character shapes of all the fonts used in your document. This means if you give someone else your .web file, or transfer the file to another computer they will see exactly what you see, even if the correct fonts are not installed on that computer.  But this only embeds the characters that are used in the document (it's not a full font that is included). So on computers with the fonts missing, any text that is added in the missing fonts may be missing the correct character shapes.

New Page Size

When creating a new website from a blank page you can select File -> New -> and select from a small range of common website page sizes.

You can alter the current page size to be any size you like by selecting the Page tab of the Options dialog (File->Page Options). It's not recommended that you make the page width more than 990 pixels, as that's the maximum width for many computer screens (1024 minus a small amount for the scroll bar). A more common page width is typically around 800 pixels.

 

 

Select the Custom page size option to enter any pixel size you require

Groups - more details

Groups and Soft Groups enable complex items on your web page to be treated like a simple single object. For example, most buttons consist of multiple parts (various graphic shapes, and text label on top). Many of the Photo Objects consist of a actual photo on top of a background.

For example, you can draw a simple button from scratch by drawing a rectangle with the Rectangle tool, and then placing a text label on top of this with the Text tool. These are separate objects and you can move them around independently in the Selector tool.  But if you select both in the Selector tool (you can lasso drag around to enclose them both, or hold Shift and click on additional objects) and then press Ctrl+G (or the menu Arrange -> Group) these now become a grouped object (Hint: the status line at the bottom always tells you what is selected).  Now when you drag, resize, rotate this object, all component parts of the group are moved and transformed as if they are one object.

 

Important: Grouped objects are usually converted into a single graphic object when you export your web page.

 

By un-grouping (Ctrl+U) you can access all the parts of your group again to make any changes. An alternative is that you can sometimes edit items directly inside a group, for example when using the Text tool to edit text or the Photo tool to edit a photo, a click will automatically select the item inside a group.

Soft Groups

There is another type of group, called a 'Soft Group', which is a more loosely connected set of objects. The difference between Groups and Soft Groups is;

• When you Group items they must all be on a single layer (if they are not they are moved to a single layer when you group the items). Soft Groups retain their layers, so you can tie together items across multiple layers.

• Groups are usually converted into a single graphic on the exported website. Soft Groups are not and each object is exported as a separate item. Text inside a soft group is kept as text in the HTML, whereas text in Groups is converted into a graphic (with some exceptions).

• You can nest groups inside other groups. For complex drawings consisting of many, sometimes thousands of shapes, creating a hierarchy of nested groups is a good organisational technique, just like having folder inside other folders.  Soft Groups however cannot be nested and are designed primarily a way of tying multiple objects on different layers together.

Because Soft Groups can contain items on different layers, when select a Soft Grouped item on one layer it will automatically select the corresponding 'soft grouped' item/s on other layers, often a layer that is not even visible.  See the section on Layers below to understand more about this.

 

Most buttons are Soft Groups, that is when you select, move or resize a button you are in fact performing these operations on two copies of the button, one called the 'MouseOff' version and another 'MouseOver' version.

Some of the more complex panel objects in the Designs Gallery are Soft Groups. This is so that you can move it around as a single object, but the component parts, the photos, background shapes, are all exported into the HTML as separate items for maximum efficiency. 

 

Synchronized Text

There is another useful feature of Soft Groups. If you have the same text on two or more objects within a Soft Group, the text will be synchronized when you edit it. This is the mechanism used to keep the button text the same on both the normal and MouseOver buttons - see below.

Multi-stage graduated color fills

You can create a multi-stage graduated fill by making sure the fill arrow is visible (select it with the Fill Tool), now just drag a color from the Color Line and carefully drop it on the arrow line where you want the new color.  You can now drag this fill point, or select Ctrl+E to adjust the color using the Color Editor.

Alternatively, in the Fill Tool, you can double click on the fill arrow to insert a new color stop. Bring up the Color Editor to edit the color of this point. You can drag

JPG and PNG graphics

Because a soft shadow is semi-transparent (part of the objects below show through the shadow) objects with shadows are converted to PNG images when saved on a web page (it's the only image format that supports transparency). PNG images can be quite large, especially for photos. It's perfect for images such the above shadow graphic.

You may find you can convert the whole graphic to a JPEG to save space. Whether this works or not depends on what's behind the shadow. If it's a plain or static non-text background you can probably use a JPEG which is a much smaller file size (quicker website download). To force an object to be a JPEG use the Image tab of the Web Properties dialog.

JPEG images cannot have semi-transparent parts, so when creating a JPEG of a semi-transparent object Web Designer includes the background (what's behind the semi-transparent part) as part of the JPEG image, but because of the pixel perfect positioning on the web page you can't tell this. This doesn't work if the shadow or semi-transparent object is placed over some text, as the text will be included as part of the graphic.

Advanced use of Repeating Objects

In addition to using the Arrange -> Repeat on all pages menu, you can also make any item a repeating item by giving it a special special 'repeating:' name.

• Select the object, or objects, and click the 'Apply name' button on the right end of the Selector Tool InfoBar 
  
  

Give it a name that starts 'Repeating:'. This must be followed by a unique name for that item.

Click the Add button to apply the name. 

If you want this object to be updated on many pages, first manually copy it to all the pages you require it on. Or use the 'Arrange -> Repeat on all pages' menu.

Now when you edit or make any change to that item and select Arrange -> Update Repeating Objects, all copies will be updated.

Note: This feature updates all repeating items from the current page onto all other pages that contain those same repeating items. I.E. Only pages that contain the repeating item will be updated (it doesn't place the items on blank pages)

 

It's important to understand that such repeating items do not update automatically, but only when you select the menu: Arrange -> Update repeating objects.

 

Technical note: This feature works by identifying items with the 'Repeating:' name and then replacing them with the corresponding items from the source page (the selected page). 

If you use the 'Repeat on all pages' menu option this automatically creates an appropriate Repeating:AutoRepeat name and applies it to all copies, so from this point on it will be updated when youu select 'Update repeating objects'

You can apply the Repeating name to any selection, for example, a group of buttons, by selecting all the buttons and applying the name to the whole selection at once. But note that if you want different objects in different parts of the page to be treated separately, such as headers and footer, they should each have a different Repeating name e.g. Repeating:footer

Headers / Footers 

You may have pages in your site of varying lengths and want some repeating objects to be positioned relative to the top of each page and others (e.g. footers) positioned relative to the bottom of each page. This is handled automatically by Web Designer.

The position of a repeating object on the page determines whether it is considered to be a header or footer. Repeating objects in the top half of the page are moved to the same position relative to the top of each page. Other repeating objects, (those which do not cover any part of the top half of the page) are moved to be in the same position relative to the bottom of each page.

How do mouse-over buttons work?

The mouseover effect is created using Named Layers. In fact the buttons are Soft Groups that consist of two styles, the mouse-off and the mouse-over styles on separate layers. The Soft Group means that both layers are changed at the same time when you do anything to the button, such as change the text, or move or resize it. See the following Layers section for more detail.

Layers, Mouseover (Rollover) & Pop-ups 

As mentioned earlier all objects have a stacking order on the page - from the backmost to the frontmost item.

In addition, all items are grouped into Named Layers.  Each layer can have any number of objects, and has the ability to be turned on or off. When the layer is turned off all objects on that layer become invisible. The layers are controlled from the Layer Gallery  icon on the top bar.

 

In Web Designer layers are used to provide mouseover (sometimes called rollover) features on your website. These include highlighting buttons and also other pop-up effects such as text panel containing a detailed product description.

 

Mouseover Effects

There are two types of mouseover effect you can control. Firstly the one used by mouseover buttons, where any object with a web address can display an overlapping graphic object that appears on a layer called MouseOver. See below for more detail.

 

There is a more powerful mouseover ability where you can make the contents of any layer appear as your mouseover, or click any object on your page. This pop-up layer can contain text, graphics, photos or any combination of these things. More below.

 

The MouseOff and MouseOver Layers

All the main objects on your website are placed on the bottom layer, usually called MouseOff. Buttons that highlight when you move the mouse over them on the web page have an alternative graphic on the layer called MouseOver.

 

If you open the Layer Gallery you can show or hide any layer by checking or un-checking the visibility check box (left column under the eye symbol). This is a way of showing what your MouseOver elements will look like on your page.

 

The current layer is always highlighted in the Layer Gallery - the MouseOff layer in the above diagram - and this is the layer that all new objects are drawn on.  To place objects on any other layers just click the required layer in the Layer Gallery, ensure both the Visibility and Edit check boxes are checked for that layer (as they are for the MouseOff layers shown above).

Note: The MouseOver layer must always be above, that is no top of, the MouseOff layer, as shown in the above example.

To edit the objects on a layer tick both the 'eye' and 'pointer' check boxes - this means you can see and edit the layer.

 

Mouseover (Rollover) Buttons

Almost all the ready-made buttons from the Designs Gallery have a mouseover effect in Web Designer.  These are created by having two versions of each button, the main one on the MouseOff layer and a 'highlight' one on the MouseOver layer.  Normally you do not need to know or care about this because both buttons behave as one - the changes you make to one, such as editing the label text, are reflected on the other version. If you move, drag or resize a button on the MouseOff layer, the other version on the MouseOver layer will change as well, even if you can't see it. This is done using Soft Groups.

 

Creating Your Own Mouseover Buttons

You can create your own mouseover buttons by drawing the necessary elements from rectangles, text, etc. Just draw the main parts of the button on the MouseOff layer (remember to group it) and place the corresponding 'highlight' version on the MouseOver layer. As long as the MouseOff version has a web address link, then the MouseOver version will automatically be displayed as you move the mouse over it on the web page. (The MouseOver layer must be on top of the MouseOff layer).

In other words you give the main object a Web Address using the link  option, and then select the MouseOver Layer in the Layer Gallery, and place the required mouseover versions of your button on this layer so it overlaps the linked object.

 

Technical note: Any graphic object on the MouseOver layer will be displayed as long as at least 50% overlaps with the object on the MouseOff layer. The two versions of mouseover buttons are kept in sync by using the SoftGroups feature. When you select the button on one layer, it automatically selects the Soft Grouped version on the other layer, even if the layer is switched off.  When you edit the text of the button on one layer, it's automatically synced with the other version of the button.

To ensure the text on both the Off and Over states changes when you edit either, Soft Group the buttons on both layers. To do this you will need to enable both layers in the Layer Gallery, and lasso select around both buttons. The status line should tell you if you have everything selected.  Select Arrange -> Apply Soft Group.  Now when you edit the text on the Off layer it will also change on the over layer, even if it's hidden.  (Note this only works if the Off and Over text are the same to start with, and relies on the objects being Soft Grouped).

Moving Objects From One Layer To Another

You can cut an object (Ctrl+X), select a new layer (click on its name in the Layer Gallery) and Paste (Ctrl+V).  A useful alternative is called 'Paste in Place' (Ctrl+Shift+V) which will paste it at exactly the same position you copied it from. You need to ensure the two Visibility and Edit check boxes are checked in order to see and edit the object on the new layer.

 

Pop-up Layers

A more powerful alternative allows you to display the contents of any layer as a result of mousing over, or clicking, any object.  This can be used for a range of different pop-up effects such as pop-up photos, menus or detailed object descriptions.

To do this, place all the objects you want to pop-up on a new layer (in the Layer Gallery click New - don't use the MouseOver layer), then set the Mouseover property (Web Properties dialog) of the original object to trigger the display this layer when you mouseover any other object. For example you can make a pop-up, like this, appear as you mouse over some text;

   

Here are the steps to create a pop-up text block like this:

1. Click New in the Layer Gallery to create a new layer.
2. Draw a rounded rectangle with the Rectangle Tool, click a (pale) color patch on the Color Line to give it a fill color. For good measure give it a soft shadow (select the Shadow tool and just drag on the rectangle).
3. Create a block of text on top of your rectangle. Select the Text tool and drag diagonally across the rectangle. Type your text. You probably want to hide the pop-up layer now, so just un-check the 'eye' checkbox of your new layer.
4. Back on the base (MouseOff) layer (click it in the Layer Gallery to set this as current layer) now select the text you want to trigger the pop-up, using the usual method (in the Text tool). Then open the Web Properties dialog (Ctrl+Shift+W) and on the Mouse-over tab select the new layer from the 'Show popup layer' drop down menu. Click OK.
5. Preview and test your mouseover effect.
   

   

If you want the pop-up to only appear when you click, then select the same option on the Link tab of the same Web Properties dialog instead.

 

Note:  The mouseover layer appears and disappears as you move the mouse pointer on and off the triggering object.

If you use a click method to display the layer (from the Link dialog), then the layer is revealed by a click on the object, and is hidden when you click anywhere else on the page.

Pop-up Photos

There is a second, easier, way of showing enlarged photos from thumbnails, that does not involve creating new layers. See here. This method is better for when you have large pop-up photos as the pop-up photos are not downloaded until the thumbnail image is clicked.