Copyright: Copyright ©Xara Ltd. 1998
Citation: WebStyle 1.0 ©1998 Xara Ltd.


Colors (101)
Tell me more about...

I don't like the new color. How do I return to the existing color?

how do I change a color?

the colors shown in the list

what's special about the colors shown?

how do I create my own colors?

the Advanced color options

the Themes button

the Revert button

my color chart shows a color as EEAD00 - how can I create this?

3D Headings and colors

recoloring backgrounds

recoloring shadows

textures and colors

selecting this button from the keyboard

general information on WebStyle

Click a button to find out more.


Create texture (250)
Creating your own textures

You can create extra textures by modifying the Background templates.

To create a new texture:

1.	Click the Graphic Type button. (You can do this now. WebStyle remembers all the details of the graphic you're working on so you won't lose anything.)

2.	Click Backgrounds.

3.	Click the Background you want to use for your new texture.

4.	Modify it as required. (For example by changing the colors.)

5.	Right-click on the preview window. This pops-up a menu.

6.	Choose Save as foreground texture or Save as background texture (depending on the type of texture you want to create.)

This adds a new foreground or background texture to the list of textures

7.	You can now return to the graphic you were working on.

You can also import GIFs and JPEGs as textures - more details


Duplicate GIF (203)
Duplicate GIF or JPEG

WebStyle could not save this file because a file with the same name already exists.

Your options:

Overwrite the existing file. This destroys the existing file contents.

Let WebStyle allocate a filename by adding a number to the end. (So name gets saved as name1.)

Don't overwrite the existing file. You need to resave this graphic and type in a different name.


Duplicate file (201)
Duplicate file message

When WebStyle saves a graphic it creates two files:

a gif or jpeg file for use on a web page,

and an xws file which you can reload into WebStyle.

WebStyle saved the gif/jpeg file correctly.

WebStyle could not save the xws file because a file with the same name already exists.

Your options:

Overwrite the existing xws file. This destroys the existing file.

Don't overwrite the existing file. If you want to save this file for reloading into WebStyle, click Save Work on the Save page. For more information click Tell me more.


Duplicate file (202)
Duplicate file message

XWS is WebStyle's own (native) file format. WebStyle could not save this xws file because a file with the same name already exists.

Your options:

Overwrite the existing xws file. This destroys the existing file.

Let WebStyle allocate a filename by adding a number to the end. (So name gets saved as name1.)

Don't overwrite the existing xws file. If you want to save this file for reloading into WebStyle, click Save Work on the Save page. For more information click Tell me more.


Fill Texture (108)
Fill Texture

This feature is not implemented in the current release of software.


Furniture (107)
Tell me more about...

the button strip (on the left of the window)

Prompts (top of the window)

Preview (center of the window)

Options (lower part of the window)

System Menu (icon in the top left corner)

Click a button to find out more.


Introduction (100)
Introduction

Some basic information about WebStyle.

Tell me more about...

how to use WebStyle

the different types of graphic

purchasing WebStyle

unlocking WebStyle

the WebStyle window

some common questions

using the keyboard to select options

installing the fonts supplied with WebStyle

the right-click menu

the System Menu

copying using the clipboard

creating your own graphics templates

how to contact Technical Support

WebStyle license terms

how to find my way around these pages. (Hint:click the [image] button.)

run the Tutorials

Click a button to find out more.

Click here to visit the WebStyle web site [image] for the latest information.

Xara's home page


Introduction 2 (114)
Tell me more about...

how to use WebStyle

the WebStyle window

reloading my work

what is Saved Work?

what are More Designs?

left-click/right-click on the template graphics

some common questions

selecting this button from the keyboard

general information on WebStyle

Click a button to find out more.

Click here to visit the WebStyle web site [image] for the latest information.


Line Width (103)
Line Widths

This feature is not implemented in the current release of software.


Options (110)
Options

This feature is not implemented in the current release of software.


Save (113)
Tell me more about...

saving a graphic

previewing before saving

getting the best results

what folder are my files saved in?

why two Save options?

the Output Type options (GIF/JPEG)

the File Size options

the Advanced options

Browser Preview

the Revert button

why is there a noticeable edge around my saved graphic?

why isn't my GIF transparent/the right size?

saving backgrounds

copying using the clipboard

I clicked this button by mistake. I don't want to save right now. What do I do?

selecting this button from the keyboard

general information on WebStyle

Click a button to find out more.


Saved Styles (115)
Tell me more about...

how to use WebStyle

the WebStyle window

what is Saved Work?

loading Saved Work

what are More Designs?

returning to the Previews

general information on WebStyle

Click a button to find out more.


Shadow (104)
Tell me more about...

I don't like the new shadow. How do I return to the existing shadow (if any)?

applying a shadow

removing a shadow

creating my own shadows

changing the color of a shadow

creating "halo" or "glow" effects

getting the best results

the Advanced options

the Themes button

the Revert button

why everything is gray and I can't select a shadow?

selecting this button from the keyboard

general information on WebStyle

Click a button to find out more.


Size (111)
Tell me more about...

I don't like the new size. How do I return to the existing size (if any)?

the three Scale buttons

changing the size of a graphic

creating a series of buttons all the same size

Lock button size

the Themes button

the Revert button

selecting this button from the keyboard

general information on WebStyle

Click a button to find out more.


Text (105)
Tell me more about...

I don't like the new font or text. How do I discard these changes?

how can I change the text?

I can't select any text options - why?

the Themes button

the Revert button

why do some fonts in the list show the name and others show a name then some symbols?

why everything is gray and I can't change the text?

typing in accented characters

installing the fonts supplied with WebStyle

what fonts can I use with WebStyle?

where can I get more fonts?

selecting this button from the keyboard

general information on WebStyle

Click a button to find out more.


Texture (109)
Tell me more about...

I don't like the new texture. How do I return to the existing texture (if any)?

what are textures?

why two categories of texture? (Some graphics show only one category of texture.)

why everything is gray and I can't select a texture?

using textures

the Themes button

the Revert button

the Plain, Color Editable option

textures and colors

adding my own textures to the list

selecting this button from the keyboard

general information on WebStyle

Click a button to find out more.


Theme (112)
Tell me more about...

what are themes?

loading a theme

creating and saving a theme

selecting this button from the keyboard

general information on WebStyle

Click a button to find out more.


Transparency (106)
Transparency

This feature is not implemented in the current release of software.


3D colors
Coloring 3D Headings

Three colored lights shining onto a colored text surface create the colors of 3D Headings. One light (Light 1) shines on the face of the text; the other two lights (Lights 2 and 3) shine on the sides.

Using the simple color options:

You can change the color of Light 1 (which shines on the face of the text) and the color of the background.

Using the Advanced color options:

(Click Advanced to display these options.) You can change the colors of all three lights, the color of the text, and the color of the background.

Color of textures

The colors of the lights change any texture you apply to the text. For example a yellow light makes the texture appear more yellow and darker. Textures usually look best with light colors close to white.

Sales plug:

The Xara3D package gives you even more control over the lights and the angle of the text. For more details visit the Xara3D web page [image].


Bold/pu
Select this to make text bold (like this.) 3D headings usually look best in bold.


Clipboard copying
Copying graphics using the clipboard

Right-clicking on the Preview Window pops-up a menu. This lets you copy WebStyle graphics to other programs using the clipboard. The sequence is:

1.	In WebStyle, copy the bitmap or file to the clipboard using the pop-up menu.

2.	In the other program paste the bitmap/file. Usually you just right-click on the window for the other program and choose Paste.

Check the documentation for the other program if you have problems. (Not all programs support paste from the clipboard - this is beyond the control of WebStyle.)

Also note that copying the bitmap can produce a solid (instead of transparent) background behind the graphic. This is controlled by the other program. (This is not a problem when copying the file.)

Copy file:

This uses the current Save settings and so you have full control over the copied graphic. (For example whether the file is a GIF or JPEG.) If you have changed the Advanced settings check that the current settings are suitable for this graphic.

Copying to the clipboard creates a temporary file on disc. (This file gets deleted when you quit WebStyle.) Most programs create their own permanent copy of this file.

You can paste the WebStyle file into an Open, Import, Insert graphic (or similarly named) dialog box for the other program.

Note on FrontPage: unusually you can paste files directly into an HTML page in FrontPage. However, FrontPage does not copy the temporary file and so the link is broken when you quit WebStyle. For FrontPage we recommend pasting the graphic to the Open File dialog box (in Insert Image.)

Copy bitmap:

For the inexperienced user this is easier than copying the file but you have less control. For example, you cannot specify a file format. Also you cannot create a transparent background as you can with GIF format files.

You can paste the bitmap directly into programs that support clipboard copying.

Tip:

You can also copy bitmaps by dragging from the preview window onto the window for the other program. (This is called "drag-and-drop".)


Color - Drag create color (forceOT)
Creating a custom color by dragging:

1.	Select the name of the color you want to change.

2.	Select the basic color from the colored strip. This represents the edge of a color circle which has red at both ends.

3. 	Select the shade from the main color panel.

Note:

You can drag the pointers or click on the colored strip and color panel.


Color - Themes (forceOT)
The Themes button

See What are Themes? for information on Themes.

Using Themes:

1.	On the Themes page open the Theme you want to use.

2.	On this page select the name of the color you want to change.

3.	Click the Themes button. This pops-up a menu.

4.	From the menu choose the name of the color you want to use. You can use any of the colors in this menu. For example, you could use a color called "Text color" to change the color of the background.


Color - background & color
Textures and colors

Many graphics can use either a flat color or a texture to color them. Also you can use colors or textures as backgrounds to a graphic.

for a flat color click the Color button and change the texture color or background color (as required)

for a texture click the Texture button. Select Background, Foreground, or Text and then click a texture.

In Textures click Plain, color editable to use a color.


Color - backgrounds
Recoloring backgrounds

You can recolor any of the background styles. Some backgrounds use a single color, others two or more colors.

Some backgrounds have a semitransparent white overlay to give a textured look. This overlay lightens any color you use to recolor the background.


Color Chart
Click the Advanced button, select RGB then type in these values.

More details


Colors - Change color (forceOT)
How do I change a color?

1.	If there's more than one color listed, click on the name of the color you want to change.

2.	Click on one of the color patches. If you don't like the result, choose another color.


Colors - Listed colors
The list shows the basic colors used in the graphic. The other colors in the graphic are shades and tints of these basic colors. A few graphics have some colors you cannot change - these are used only in small areas such as highlights and shading.


Colors - advanced options
The advanced color options

This lets you create your own custom colors. Click the Advanced button to show these options.

You can create colors by either:

dragging the pointers on the colored panel and the color strip

or, for defining exact color mixes, typing in values.


Colors - color picker
The 216 colors shown exactly match the color palette used in Netscape Navigator and Microsoft Internet Explorer. These colors give the best results when viewed in 256 color screen modes; other colors are "dithered" and don't look as good.

Displayed separately are black, white and a range of grays.


Colors - custom
Click the Advanced button. This displays a more complex Color Picker that lets you create your own custom colors.


Colors - custom color
Creating a custom color using the text boxes:

You can define colors using either HSV (Hue-Saturation-Value) or RGB (Red-Green-Blue) values. Both let you create the same range of colors. Use the one you are familiar with.

You may see colors defined as a set of six digits (EEAD00 for example) - you can create these colors using RGB.


Colors - define in RGB
Defining colors in RGB

You can define RGB values as 0-255, 0-100% or as hex digits (00-FF). Use the range you are familiar with.

You sometimes see colors defined as six digits (EEAD00). To define this color, select hex then type:

EE (or ee) into the Red text box,

AD (or ad) into Green,

00 into Blue.


Colors shadows (forceOT)
Recoloring shadows

After applying a shadow to a graphic, you can change the shadow color.

1.	Apply a shadow to the graphic. For more information on this click Tell me more... on the Shadows page.

2.	Click the Color button.

3.	One of the colors in the list is now Shadow color. Click on this to select it.

4.	Change its color.


Common problems
Some common questions...

what folder are my files saved in?

why isn't my GIF transparent/the right size?

why is there a noticeable edge around my saved graphic?

how do I Install the fonts supplied with WebStyle?

how do I create a series of buttons all the same size?


Contents
Welcome to Xara WebStyle

Normally this help is opened by clicking Tell me more.. on the WebStyle window. This page exists mainly for testing but you can use it to access the index or browse through the topics.

List of Topic pages:

Introduction

Purchasing

Unlocking

License terms

Loading templates

Text

Colors

Texture

Shadow

Themes

Size

Save

Release 1.2 October 1998

Copyright 1998 Xara Ltd.

Xara Ltd.

Gaddesden Place

Hemel Hempstead

Herts HP2 6EX

United Kingdom

www.xara.com


Create template/ov
Creating WebStyle templates

You can increase the range of WebStyle templates by creating your own.

We are always interested in expanding our range of templates so contact us if yours are useful to us. Email ws-suggest@xara.com

For all graphic types except 3D Headings:

You require CorelXARA 2.0 or Xara Webster 2 [or later]. These packages let you create Xara .WIX template files.

1.	In CorelXARA or Webster apply appropriate Wizard properties to the graphic. Creating WIX templates [image] gives more information. Please note that creating templates can be complex - we cannot offer Technical Support for this beyond the information on the web pages.

2.	Export the file as type .WIX.

3.	After creating the WIX file (or files) load it into a suitable folder inside the More Templates folder.

4. Finally use the System Menu to load these files into WebStyle.

3D Headings

1.	Use any version of Xara3D to create an .X3D file.

2.	Load the X3D file into a suitable folder inside the More Templates folder.

3.	Finally use the System Menu to load these files into WebStyle.

Click a link for more information on:

CorelXARA

Xara Webster

Xara3D

Creating WIX templates


Discard
Clicking Revert discards any changes you made since clicking this button on the button strip.

Swapping to another button on the button strip saves any changes.

Keyboard short cut: CTRL+Z


Example jump page
Example of jumping to another page


Example pop-up
This is called a "pop-up". It displays a small amount of extra information.

Clicking anywhere on the window closes a pop-up.


File size options

There is a tradeoff between file size and image quality. Often a reduction in quality isn't noticeable but makes the file much smaller. The smaller the file, the quicker it downloads over the Internet. If you want to attract people to your web site, you don't want them waiting for graphics to download slowly.

The Preview shows you how the graphic looks with the selected option. File Size (at the bottom of the window) tells you how large the file will be. Typically High Quality files are twice the size of Fast Download.

Related topics:

Saving a graphic

GIF and JPEG formats

Advanced saving options


Font install/pu
Installing WebStyle automatically installs the fonts supplied as part of the WebStyle package. Most programs show these fonts in their font list immediately. You may find a few programs that you have to close and then reload before they show the new fonts.

These fonts are from the large Xara collection of fonts available for individual download at www.xara.com/resources/fonts/

Geotype font kindly provided by Gary David Bouton; other fonts are copyright FontBank Inc. These are commercial fonts and you may not distribute them to third parties without permission.


Furniture - button strip/PU
Button strip

(On the left of the window.)

This is the main way of editing the graphic shown in the Preview area. Clicking a button shows the range of available options.


GT 3D
3D Headings

These look as though the text has been extruded backwards to give the impression of depth. WebStyle uses a simplified version of Xara's acclaimed Xara3D graphics package.

Three colored lights shining on the text give the variations in coloring. Using the simple color editor you can change the light shining on the face of the text. Using the Advanced color options you can change all three lights and the color of the text. For more information click the Color button and then click Tell me more.

You can also use a bitmap texture to alter the appearance of the text.

Visit the Xara3D web page [image] for more details of the full Xara3D package.


GT Dividers
Dividers

These are suitable for dividing your page horizontally. They are more eye-catching than a plain line across your web page.


GT Headings
Headings

As the name suggests these are intended as page or section headings.


GT background
Backgrounds

These are suitable for use as backgrounds on your web pages. Some are photographs of real life objects such as a brick wall or leaves, carefully converted so you can change the basic colors used.


GT bullets
Bullets

These are useful for highlighting items in bullet lists or as navigation buttons. Generally bullets are quite small. (Although you can scale WebStyle bullets to any size.) The difference between bullets and buttons is that buttons have text associated with them.


GT buttons
Buttons

There are several types of button available. There are arrow buttons that you can use to help readers navigate up and down and from page to page. There are buttons you can add your own text messages to. These automatically scale to fit the text you type in. There are also a few specialist buttons.

The difference between bullets and buttons is that buttons have text associated with them.


Graphic types

Tell me more about...

Headings

3D Headings

Backgrounds

Buttons

Bullets

Dividers


HSV
Defining colors in HSV

Hue is the angle around a color circle, 0-360 degrees.

Saturation is the amount of color pigment. 100% is saturated color; 0% is white.

Value is the brightness. 100% is pure color; 0% is black.


Italic/pu
Select this to make text italic (like this.)


Keyboard short cuts

F1	open this help file

The following are alternatives to pressing buttons on the Button Strip:

F2	select Graphic Type

F3	select Style

F4	select Text

F5	select Color

F6	select Texture

F7	select Shadow

F8	select Themes

F9	select Size

F10	select Save

F11	display right-click menu

To select one of the graphic types:

B	Buttons

D	Dividers

G	Backgrounds

H	Headings

L	Bullets

3	3D Headings

ALT+M	More Designs

ALT+S	Saved Work

CTRL+Z	discard changes (alternative to clicking Revert)


License terms
WebStyle license terms

The license distributed with WebStyle grants you the right to use the WebStyle software on a single client computer at a time and by a single user at a time, subject to the restrictions listed below and the disclaimer relating to warranties, support and damages.

1. Disclaimer: This software is provided on an "as is" basis, without any other warranties, or conditions, express or implied, including but not limited to warranties of merchantable quality, merchantability or fitness for a particular purpose, or those arising by law, statute, usage of trade or course of dealing. The entire risk as to the results and performance of the Product is assumed by you. Neither we nor our dealers or suppliers shall have any liability to you or any other person or entity for any indirect, incidental, special or consequential damages whatsoever, including but not limited to loss of revenue or profit, lost or damaged data or other commercial or economic loss, even if we have been advised of the possibility of such damages or they are foreseeable; or for claims by a third party. You may have other rights which vary from state to state.

2. Restrictions: This license gives you the right to use this software but all rights not specifically mentioned in this agreement, including ownership rights, intellectual property rights, trademarks and copyright, are reserved by Xara Ltd. You may not decompile, reverse engineer, disassemble or otherwise reduce the software to a human perceivable form. You may not modify, rent or resell for profit the software, or create derivative works based upon the software.


Load right/left click/pu
Left and right-clicking

Left-clicking loads the template keeping the current shadow, background, and (for Headings & Buttons) text. This lets you see how the template looks with these settings.

Right-clicking loads the template and uses the settings defined in the template. That is, ignore any current settings.


More Designs

Click More Designs to see extra templates.

Supplied on the WebStyle CD are hundreds more style templates. The download version of WebStyle includes just a selection.

Keyboard short cut: ALT+M


Navigate
Finding your way around

This page tells you how to navigate from page to page. If you are familiar with Windows Help files, finding your way around should be easy.

If you are a novice, read on...

Some text is green and underlined like this. Clicking on the underlined text takes you to another page. (Try clicking on this text.)

Some text is green and has a dotted underline like this. Clicking on the underlined text pops-up a small box with more information. (Try clicking on this text.)

Some text is blue like this [image]. Clicking on the blue text (or the [image]) takes you to a page on the Internet. (You must have an Internet connection for this to work.) You may have to log onto your Service Provider (ISP) before the link can be made - this depends on your Internet connection.

The Tell me more pages have small buttons like the one on the left. Click the button for information about the topic.


Options

As you select the different buttons, this shows you what changes you can make to the graphic. For example, if you click the Text button, available options are the fonts installed on your computer, the text message, bold, italic, and aspect ratio.


Plain/PU
This lets you replace the texture with flat color. Click Color to change the color.


Preview

This lets you preview your graphic as you select different options.


Prompts

This area of the window gives you information about actions available to you. It's a useful way of learning more about WebStyle.


Reloading my work/OT
Reloading my work

WebStyle saves a copy of every graphic you create. Reload the graphic if you want to make further edits.

1.	Click Saved Work - this displays all your existing graphics for this type of template.

To see graphics for other types of template, click Graphic Type and select the required template type.

2.	Click the graphic you want to load.

3.	Click Open to load the graphic.


Return to preview
To return to viewing the previews:

Click Cancel.


Right-click menu

Right-clicking on the Preview Window pops-up a menu. This lets you:

Copy a bitmap to the clipboard (see Copying using the clipboard)

Copy a file to the clipboard (see Copying using the clipboard)

Save the current background as a texture (see Save background)

Discard all changes and redisplay the original template.


Save - Advanced options OV
Advanced Saving options

These options give you greater control over saving graphics. You will find them useful if you understand GIF and JPEG formats. Note that the current settings of these options also apply to the Simple saving options. This allows to select suitable options on this page and then use the Simple options to save your graphics - a great time saver.

GIF options

You may need to experiment with different settings to get the best compromise between small file size and image quality. (Smaller files download quicker over the Internet.) Only you can decide which combination gives the best results for a particular graphic.

Number of colors

Dithering

Palette

Transparent

Interlaced

Trim transparency (displayed only when Transparent selected)

JPEG options

Quality

Related topics:

Saving a graphic

GIF and JPEG formats

File Size options


Save - Advanced/dithering/popup
Dithering - controls the display of colors that are not in the palette. None displays the nearest color in the palette. This can produce "banding" where two colors blend together. The advantage is that this option produces the smallest file size. Ordered and Diffused use two different algorithms to "dither" between two colors to give the impression of the missing color. Diffused gives the best results but produces the largest file size.

For technical reasons you cannot use Ordered Dithering and an Optimized Palette.


Save - Advanced/interlace/popup
Interlaced - controls how the graphic appears as it downloads.

With this option selected, initially a low quality image appears. The quality improves as more of the graphic downloads.

With this option unselected, nothing appears until the complete graphic has downloaded.

Interlacing is useful for large graphics because the viewer can see the image as it downloads. The drawback is that files are slightly bigger. The minimum size for an interlaced GIF is 8x8 pixels.


Save - Advanced/palette/popup
Palette - controls the selection of colors in the palette. Browser uses the same 216 colors as the Netscape Navigator/Internet Explorer palette. This gives best results with areas of flat color in 256 color screen modes. Optimized selects the best set of colors for the particular graphic. This gives excellent results in high-color screen modes. (Often equal to 24-bit color.) The disadvantage is that colors might not match the Netscape/Internet Explorer palette in 256 color screen modes - non-matching colors are displayed "dithered" which may reduce quality.

For technical reasons you cannot use Ordered Dithering and an Optimized Palette.


Save - Advanced/quality/popup
Quality - JPEG format compresses files by discarding unnecessary information. Quality controls how much information is discarded. Low quality discards most information and so produces the smallest file sizes. However the quality loss may be noticeable and you may need to use a higher setting. Our advice for the best results is use the lowest quality setting that gives acceptable results.


Save - Advanced/transparent/popup
Transparent - controls the background behind a graphic. With this option selected, the background is transparent and you can see the web page background. With this option unselected, the background is the same as that shown in the preview window in WebStyle.


Save - Browser Preview
Browser Preview

The preview in WebStyle lets you select suitable save options for your graphic. But you can, as a final check, also preview the graphic in your regular browser. Click Browser Preview to load the browser (if not already loaded) and then display the graphic along with information on download times.


Save - GIF/JPEG/ov
GIF and JPEG formats

There are two main formats used on web pages: GIF and JPEG. All browsers should display these formats. What advantages (and disadvantages) do the formats have?

GIFs are best for graphics produced by an illustration package such as WebStyle unless the graphic uses complex color graduations and shading. GIF is particularly suitable for simple graphics with only a few colors.

With GIFs you have the option of saving only the area covered by the graphic. Other areas are transparent and you can see the page background. (These are called Transparent GIFs.) This is useful if the graphic is an irregular shape and your web page has a patterned background. It helps the graphic blend better into the page background. Transparency-enabled is the regular option in WebStyle; to change the setting use the advanced options.

JPEGs are best for photographs and graphics with complex color graduations. The JPEG format uses 16 million colors (GIFs have a maximum of 256 colors) and so graphics with a lot of colors look better in high color (more than 256 colors) screen modes.

JPEGs always have a solid rectangular background (unlike transparent GIFs.) If your web page has a colored or patterned background, you need to use the same color or pattern in WebStyle. With some patterns you might see the join between the graphic and the rest of the page. How do I give the background a color or texture?

However these are only recommendations - you may like to try both formats to find which is best for your graphic.

Related topics:

Saving a graphic

File Size options

Advanced saving options


Save - Threshold
Trim transparency - this is useful for advanced users who require greater control over the boundary between a graphic and the transparent background. With the slider to the right, the graphic is untrimmed. For some combinations of graphic and background, this can give a noticeable edge between the graphic and the page background. Moving the slider to the left trims the edge closer to the graphic.

Show trimmed - when selected, WebStyle displays in white the transparent parts of the graphic. This is a useful check on the shape of the transparent area.


Save - advanced/color depth/popup
Number of colors - controls the number of colors displayed in the graphic. The more colors used, the larger the file size. Often you get acceptable results using 32 or fewer colors - this depends on the graphic. For best results we suggest experimenting. For an optimized palette you can select from 2 to 256 colors; for browser palette 16 to 216 colors. (256 is the maximum number of colors in a GIF; 216 is the number of colors in the browser palette.)

Technical notes:

Colors are stored as either 4-bit (16-color GIF format) or 8-bit (256-color GIF format).

Transparency, if used, counts as an extra color. Thus, if the dialog box shows 10 colors, a transparent GIF contains 11 colors (10 true colors plus transparency.)


Save - background pu
You can set a background color by clicking the Color button.

You can set a background texture by clicking the Texture button.


Save - bad bad chars
Safe characters:

A-Z a-z 0-9 are safe to use. However some (not all) web servers are case sensitive - they see ABC and abc as two different file names. Be consistent in your naming convention - it can save you possible problems later on.

- (dash/hyphen) and _ (underscore) are safe for punctuating file names.

These are not safe:

spaces, commas, periods, / \ (slash). (Windows allows spaces in file names but some web browsers do not.)


Save - current folder
The current folder is the folder you last saved a file to. The first time you save a file, WebStyle uses a default folder called Export. You can find Export in the folder where you installed WebStyle.


Save - different folder (forceOT)
Saving to a different folder

If you don't specify a folder to save to, WebStyle uses the same folder as you last used. (Or a default folder if you have never specified a different folder.)

To save to a different folder:

1.	Select the save options you want. (See Saving a graphic for more details.)

2.	Click Save Graphic - this displays more options.

3.	Type in a file name as normal. (See Saving a graphic for more details.)

4.	Change the folder name in Save in: by browsing to the folder you want to use.


Save - edge fault
You probably created your graphic against the wrong color background. For best results, the background (or background texture) used in WebStyle should be roughly the same as used on your web page.

You can set a background color by clicking the Color button.

You can set a background texture by clicking the Texture button.


Save - folder
What folder are my files saved in?

If you don't change the folder, WebStyle uses a default folder called Export. You can find Export in the folder where you installed WebStyle.

Related Topics:

How do I save to a different folder?

Saving a graphic


Save - graphic (forceOT)
Saving a graphic

1.	Select the type of graphic you want to create (GIF or JPEG.) Tell me more about these formats

2. 	Select the required file size. Tell me more about these options.

The preview shows the actual GIF/JPEG bitmap (using the settings you selected) that will be saved to disc. This makes it easy to check that the settings are correct.

3. 	Click Save Graphic to open the Output dialog box.

Output dialog box

4.	Type in a suitable name for your graphic. Suggestions on characters to avoid in web file names.

5.	To save the graphic to the current folder click Save.

To save to a different folder change the name in Save in: at the top of the dialog box.

This saves the graphic to disc as a GIF or JPEG. It also saves a copy in WebStyle's own format - you can reload this file for further editing. As a reminder, WebStyle shows you the folder containing this reloadable file.

You can now continue editing the graphic.

Notes:

If you want greater control over saving, click Advanced. More information on the Advanced options.


Save - problems/pu
WebStyle creates two GIFs:

the file you want is in the Export folder (or the folder you selected during Save)

the low-quality thumbnail in the MyDocs folder.

Always use the GIF from the Export folder, not the thumbnail.


Save - two formats
Why two Save options?

WebStyle uses two types of file format:

An editable format. You can reload files in this format back into WebStyle for further editing.

The Style pages show a Saved Work folder. Click this to see a list of saved files. Just click a file name then click Load to reload the file.

Non-editable formats (GIF and JPEG.) All web browsers can display GIF and JPEG files but you cannot edit these formats in WebStyle.

Related Topic

The difference between GIF and JPEG formats.


Save backgrounds/pu
When you save a background you can also copy it into Textures. This lets you use that background when you create other graphics such as buttons.

You can also copy the current background by right-clicking on the preview window to pop-up a menu. Choose Save as Foreground/Background Texture from that menu.

See Text and background textures for more information.


Save best results
Getting the best results

You can select different settings for file size. Selecting Fast download gives you the smallest file sizes. For web graphics, small files download quicker. Use the preview to check the quality is acceptable to you.

Create your graphic against the same color background or texture as used on your web page. This ensures your graphic blends perfectly into the page. (You don't need an exact color match - a close color still gives excellent results.) How do I give the background a color or texture?


Save mistake
Click another button to exit the Save page. The graphic gets saved to disc only when you click Save Graphic and then Save.


Save preview
Preview before save

The preview you see is the actual bitmap that will be saved to disc using the current settings. This makes it easy for you to check that the quality is correct. (Only you can decide when you have the right compromise between quality and file size/download time.)

File Size is a useful check on the file size. It updates automatically as you change settings.

Technical note: you see the actual JPEG or 16/256 color GIF bitmap in the Save preview. For other options (Text, Color, etc.) you see a high-quality (24-bit, dithered down) preview which makes editing easier.


Saved Styles/pu
Saved Work are graphics you saved to disc. (For more details on saving click Save then click Tell me more...)

Keyboard short cut to open the folder: ALT+S


Shadow & background/PU
You cannot apply shadows to Backgrounds (because they cover the entire background of a browser window.)


Shadow - Advanced
Advanced Shadow options

Tell me more about...

the difference between a Wall Shadow and a Floor Shadow

creating a Wall Shadow

creating a Floor Shadow

what are pixels?

removing a shadow

Click a button to find out more.


Shadow - Floor Shadow piccy


Shadow - Theme (forceOT)
The Themes button

See What are Themes? for information on Themes.

Using Themes:

1.	On the Themes page open the Theme you want to use.

2.	On this page click the Themes button. This pops-up a menu.

3.	Click on the menu to use the shadow from the Theme.


Shadow - apply
Click one of the shadow options.


Shadow - best results
Getting the best results

WebStyle shadows are semitransparent. That means some of the background color shows through. For best results, set the background color or texture to be the same as will be used on your finished web page. You can set a background color by clicking the Color button. You can apply a background texture by clicking the Texture button.


Shadow - create Wall Shadow (forceOT)
Creating a Wall Shadow

1.	Click on Wall to select it (if not selected.)

2.	Move the sliders to change the position and distance of the light source. The Y offset moves the light source up and down. The X offset moves the light source left or right.

3.	Move the Darkness slider to make the shadow lighter (weaker) or darker (stronger.) This changes the strength of the light source.

4.	Move the Blur slider to set the size of the light source. A pin-point light source gives little blurring at the edges of the shadow. A larger source (such as the sun) gives more blurring. We recommend always blurring the edges slightly - this is more realistic than a sharp edge.

Note:

You can also type in values. This is useful if you want to create several graphics with common shadows.


Shadow - create floor shadow (forceOT)
Creating a Floor Shadow

1.	Click on Floor to select it (if not selected.)

2.	Move the Y Size slider to change the angle of the surface. The smaller the shadow, the greater the apparent angle between the object and the surface.

3.	Move the Tilt Angle slider to move the light source left or right.

3.	Move the Darkness slider to make the shadow lighter (weaker) or darker (stronger.) This changes the strength of the light source.

4.	Move the Blur slider to change the size of the light source. A pin-point source gives little blurring at the edges of the shadow. A larger source (such as the sun) gives more blurring. We recommend always blurring the edges slightly - this is more realistic than a sharp edge.

Note:

You can also type in values. This is useful if you want to create several graphics with common shadows.


Shadow - custom
Click the Advanced button. This displays further controls that let you create your own custom shadows.


Shadow - removing
Click the No Shadow option. (Or None in the Advanced options.)


Shadow Create Blur (ForceOT)
Create "halo" or "glow" effects

You can use shadows to create halos or glows effect around graphics.

1.	Click the Advanced button.

2.	Select Wall shadow.

3.	Set the X-Y offsets to 0. This positions the shadow directly behind the graphic.

4.	Set the Blur slider to near the top. This gives a large blurred shadow.

You can also create a colored halo - see Changing the color of a shadow.


Shadow Types
The difference between Wall Shadows and Floor Shadows

Wall Shadows

This is the shadow thrown by a object onto a vertical surface. An example of a Wall Shadow.

Floor Shadow

This is typical of the shadow thrown by a vertical object onto a sloping surface. You aren't limited to horizontal surfaces. By choosing suitable settings, you can give the illusion of almost any angle. An example of a Floor Shadow.


Shadow color (forceOT)
Changing the color of a shadow

After applying a shadow you can change its color.

1.	Apply a shadow to the graphic.

2.	Click the Color button.

3.	One of the colors in the list is Shadow color. Click on this to select it.

4.	Change its color. For more information on changing colors click Tell me more... on the Colors page.


Size - Theme (forceOT)
The Themes button

See What are Themes? for information on Themes.

Using Themes:

1.	On the Themes page open the Theme you want to use.

2.	Click the Themes button. This pops-up a menu.

3.	From the menu choose Width or Height to change the size of the graphic.


Size - scale buttons
What do the Scale buttons do?

They change the range of the slider to make it easier for you to set the size you want. If you want to set a size of, for example, 65 pixels it is much easier to use a slider scale of 100 pixels than 1000 pixels.

Small sets the range to a maximum of 100 pixels (about 1in or 2.6cm)

Medium sets the range to 500 pixels (5in, 13cm)

Large sets the range to 1000 pixels (10.4in, 26.5cm)


Size - sizing (forceOT)
Setting the size of a graphic

Before outputting the graphic to disc specify the size you want it to be on the final web page. Graphics always scale in proportion; changing the width also changes the height (and vice versa). This stops graphics appearing stretched or squashed.

Using the slider:

1.	If necessary, click a scale button to set the best scale for the slider.

2.	The slider can show either the width or height. The two buttons control this.

3.	Drag the slider until the graphic is the size you require. The maximum width or height is 1500 pixels.

Typing in values:

1.	Type a value (in pixels) into Width or Height in the Settings section. The maximum is 1500 pixels.


Size Lock
Lock Button Size

This is dimmed except for buttons (and other graphics) that stretch to fit the amount of text you type in. (We call these "stretchy buttons".)

This lets you create a series of buttons all the same size, something you often want on web pages.

Details of creating same-size buttons


Size equal width buttons (ForceOT)
Creating a series of same-size buttons

On web pages you often want a column (or row) of same design buttons, all the same size. Many of WebStyle's button designs stretch as you type in more text. (We call these "stretchy buttons".) You can use these designs to create a series of same size buttons.

To create same size buttons

1.	From Buttons select a suitable design. Generally those buttons where the text is inside the button or there is a line above or below the text are "stretchy". (Some Headings and Dividers are also "stretchy" - the process is the same.)

2.	Type in the maximum amount of text you may want. This gives the maximum width for the buttons.

3.	Click the Size button (on the left of the window.)

4.	If required scale the button until it is the size you want.

5.	Select Lock button size - this stops the button resizing as you change the text in it. This check box is dimmed if the button design isn't "stretchy".

6.	Create the other buttons by changing the text and saving the button. If you type in more text than in step (1), the text runs off the sides of the button.


Suitable fonts
There are two types of font used on PCs: TrueType, and Type 1 (also called ATM or PostScript fonts.) WebStyle uses TrueType fonts.


System Menu

Click the icon in the top-left of the WebStyle window to display this menu.

This is largely a standard Windows menu. Most options duplicate icons on the top-right corner of the window. (Minimize, maximize, and close.)

The two extra options are:

Default size: restores the window to the size that looks best on screen. For 800x600 (or smaller) displays this is the same as full screen (maximize.) For larger displays this sets the window size to 800x600 pixels.

Generate Templates: (for advanced users who have access to CorelXARA 2.0 or Xara Webster 2 [or later].) These packages let you create Xara .WIX template files. Or Xara3D [any version] lets you create 3D headings (X3D files.) Load the WIX/X3D files into a suitable folder inside the More Templates folder. Then click this option to generate the extra files that let WebStyle display and load these files.

Click a link for more information on:

CorelXARA

Xara Webster

Xara3D

Creating WIX templates


Technical Support
We hope you don't have any problems with WebStyle but if you do, you can contact our Technical Support department by emailing technical@xara.com [image].

Alternatively you can send feedback directly from our website on www.xara.com/support/


Text - Theme (forceOT)
The Themes button

See What are Themes? for information on Themes.

Using Themes:

1.	On the Themes page open the Theme you want to use.

2.	On this page click the Themes button. This pops-up a menu.

3.	From the menu you can choose either:

the text from the Theme

or the font, bold/italic and aspect ratio of the Theme.

Note: Themes based on backgrounds, bullets and dividers do not contain text. Such Themes cannot modify text.


Text - accented characters (forceOT)
Accented characters

(Also called the extended character set.)

To type in accented characters:

1.	Press and hold down the left-hand ALT key

2.	Type in 0 (zero) and then the number of the character you want. For example for ô (o circumflex) type in 0244. These numbers are standard for most programs but click here to view a web page [image] showing the complete list.

Note:

Some fonts do not include all the accented characters. This is a characteristic of the font and beyond the control of WebStyle.

You can use this method to type in any character, for example the Yen symbol ¥ (character 0190.)


Text - dimmed/pu
You selected a graphic that doesn't have any text associated with it.


Text Change the text/pu
Change the text

Edit the wording shown in the Text box. As you type, the preview automatically shows the new text.


Text change font/pu
Change font

Just look down the list of font previews until you find one that's suitable. Then click the preview.

With a font name highlighted, you can move up and down the font list using the up/down arrows on the keyboard. This is useful if you want to see how your text looks in different fonts.


Text options

Change the text

Change font

Bold

Italic

Aspect ratio


Text symbols/pu
There are two types of font: regular text fonts and symbols fonts. With regular fonts, showing the name displays what the font looks like. Symbol fonts don't include normal letters so we need to show the name in a regular font and then show some sample characters. Note that we rely on information contained in the font to decide on the font type. Some symbols fonts are marked internally as regular fonts - for these fonts you will see some characters but not the font name.


Texture - Themes (forceOT)
The Themes button

See What are Themes? for information on Themes.

Using Themes:

1.	On the Themes page open the Theme you want to use.

2.	On this page select the type of texture you want to change.

3.	Click the Themes button. This pops-up a menu.

Note: Themes based on backgrounds do not have textures associated with them. The menu is dimmed for such Themes.

4.	From the menu choose the texture you want to use.


Texture - add my own
Adding my own textures

You can use GIFs or JPEGs as textures. Background textures need to tile (multiple copies join together seamlessly.) Text textures do not need to tile.

To add textures:

1.	The easiest way is to drag-and-drop the new GIF or JPEG file onto the Textures window. A small "+" appears by the mouse pointer when correctly positioned. Adding textures like this makes them immediately available.

Alternatively copy the new textures into either the Background folder (for backgrounds) or Textures folder (for text textures.) Both these folders are in the folder where you installed WebStyle. This is the easiest method if you want to add a lot of textures. You need to restart WebStyle to see these new textures in the list.

When you save a Background you can also copy it into a texture folder. During saving a dialog box asks if you want to do this. (Or right-click on the preview window to save the current background.)


Texture - dimmed/pu
You selected a graphic that cannot use textures.


Texture - types/pu
Foreground and background textures

Foreground (or Text)  textures are  used on the graphic itself. (Text textures are used on the faces of text.)

Background textures are used behind the graphic. Usually you would used the same (or similar) texture as the background to your web page.

For technical reasons, there are differences between the two types.

Especially for 3D headings you get the best results with a dark background and light colored text.


Texture - what are they/pu
What are textures?

WebStyle has two types of textures - pictures of real life objects (leaves, walls, wood) and electronically generated random patterns.

Using textures instead of flat color can make your graphics more eye catching. You may find that using a texture creates a bigger file than using flat color. This can make the graphic slower to download over the Internet.


Textures - using
Using textures

The designer of the original graphic decided which areas of the graphic are suitable for textures. To apply a texture to these areas just click a name in the list (usually Text or Background) and then choose a texture from the list.


Theme load (forceOT)
Loading Themes

1.	The currently selected Theme has a blue border. To select a different Theme, click on the name of the Theme you want to use.

2.	Click Open.

Or double-click on the name of the Theme you want to load.

If you want to, you can browse to a different folder. Click the Home icon to return to the default folder.

Loading a Theme does not change the graphic. To change the graphic using the Theme:

1.	click a button on the Button Strip,

2.	click the Themes button and

3.	select the Theme property you want to use.


Theme save (forceOT)
Creating and saving a theme

See What are Themes? for details of how to use Themes.

Creating a Theme

1.	Create a graphic with the required settings. For example if you want a Theme that sets a color and a shadow, create a graphic with the right color and shadow. You are now ready to save the Theme.

Saving a Theme

1.	To save the Theme in a different folder, browse to the folder you want to use. Click the Home icon to return to the default folder.

2.	Type in a suitable name to remind yourself what the Theme is for.

3.	Click Save as Theme.


Theme what is?
What are Themes?

An example makes their use clear. Suppose you will create your web site over several weeks. You don't currently know what headings you need. But you know you want them all to be the same color, size, and font.

You could remember each of these settings and apply them next time.

An easier way is to create a sample heading and then save it as a Theme. You can name Themes so you can remember their use. Let's call this one "Heading".

Next time you want to create a heading just reload the "Heading" Theme. You can then use it to modify the current graphic. For example to modify the color, just go to the Color page, select the color name you want to change, then select the color you want from the Themes menu.


Unlock/ov
Purchasing over the Web uses two keys:

a nine letter Key code

a seven letter Unlock code

The Key code changes if you change or reformat your hard drive or change to a new computer. You will need a new Unlock code.

If you have already purchased WebStyle, you will not be charged for getting a new Unlock code. However, you will need your XaraClub user name and password. Forgotten your password? The XaraClub FAQ pages (www.club.xara.com/clubxarafaq.asp [image]) tells you how to get the password hint you typed in when you joined XaraClub.

To unlock WebStyle:

1.	If necessary, reinstall WebStyle.

2.	Run WebStyle and click Purchase.

3.	The Title Bar of the dialog box shows you the nine letter Key code. Make a note of this code.

4.	Click Purchase Online or type in the URL https://secure.commerce.xara.com/WebStyle/unlockmain.asp

5.	Follow the instructions for generating a new Unlock code.

6.	Type that seven letter Unlock code into the Purchase dialog box in WebStyle. Note: use upper case letters - type 'ABCDEFG' not 'abcdefg'.

Remember: this Unlock code applies only to your current set-up. Changing the hard disc or computer means you need a new Unlock code.

Related Topic:

Purchasing WebStyle


Using Widgets
Using WebStyle

If you just want a brief overview of using WebStyle, read on...

1.	First step is selecting the type of graphic you want to create

a.	Click the Graphic Type button. This displays the basic types of graphic.

b.	Click on the type of graphic you want to create. This shows the range of template graphics.

c.	Click the template graphic that you want to base your graphic on.

2.	Next step is altering the graphic to your specific requirements

You might change its color, apply a shadow, add text (if the graphic allows this.)

For example, to change its color:

a.	Click the Color button. This displays the Color Picker.

b.	Click one of the colors in the Color Picker.

3.	Last step is saving the graphic

a.	Click the Size button. This lets you specify the size you want the graphic to be.

b.	Click the Save button. This displays the save options.

c.	Select the type of file you want to create and the quality.

d.	Click Save graphic to display a regular Windows Save dialog box.

e.	Specify where you want to save the graphic and click Save. That's it - you've created a graphic for your web page.

You can then repeat the process to create more graphics. If you want to create another graphic of the same type, skip step 1 (for example, when creating two identical buttons, one red, one green.)

Tips

Want more information? Click the Tell me more button at the top of the window.

Don't like a change you've made? Click the Revert button at the bottom of the window.


Wall Shadow


Xara Fonts
There's a wide range of fonts available at budget prices from Xara Fonts.

Click here to visit our web site [image] for more details.


aspect ratio/pu
Changing the aspect ratio makes the text wider (aspect ratio above 100%) or narrower (below 100%) than normal.


load saved style (forceOT)
Loading Saved Work

1.	Click the name of the graphic you want to reload

2.	Click Open.

Keyboard short cut to open the folder: ALT+S


pixels/pu
Pixels are dimensions used for graphics intended for on-screen display. On the PC there are theoretically 96 pixels to 1in (2.5cm.) The actual on-screen size depends on the size of your monitor and the size of your desktop.


purchase/ov
This page applies if you are running the time-limited trial version of WebStyle:

When you start up WebStyle a dialog box reminds you that you are running the trial version - click Purchase on that dialog box. This lets you purchase WebStyle using a fully secure transaction process.

If you have already purchased WebStyle but get an 'Invalid Key Code' message or need a new Unlock Code:

Look at the Unlock page for more details.


sc F10/PU
Instead of clicking on the button you can press F10 on the keyboard.


sc F2/PU
Instead of clicking on the button you can press F2 on the keyboard.


sc F3/PU
Instead of clicking on the button you can press F3 on the keyboard.


sc F4/PU
Instead of clicking on the button you can press F4 on the keyboard.


sc F5/PU
Instead of clicking on the button you can press F5 on the keyboard.


sc F6/PU
Instead of clicking on the button you can press F6 on the keyboard.


sc F7/PU
Instead of clicking on the button you can press F7 on the keyboard.


sc F8/PU
Instead of clicking on the button you can press F8 on the keyboard.


sc F9/PU
Instead of clicking on the button you can press F9 on the keyboard.