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


110 Browse
Stepping from page to page

At the top of each page there's two arrow buttons (<< >>)

Click >> to move on to the next page.

Click << to return to the previous page.

To return to the start of the Tutorial click Contents.


120 Load
Select the basic graphic

The first step in creating any graphic is deciding which type of graphic you want to create. WebStyle presents you with various templates you can choose from.

Details on next page...


121
1.	Click the button "Graphic Type" on the button strip

This displays the basic types of graphic you can create.

This stage of the tutorial shows you how to create a simple bullet so...

2. Click on "Bullets"

This shows you the range of bullets.

Continued...


122
3. Click on one of the thumbnails

This loads a copy of that bullet into WebStyle. You're never working on the original bullet just a copy. So there's no danger of overwriting the original.

This completes the process of loading a graphic.


123
What if I want more information about something?

Click the Tell me more button at the top of the window. This gives you background information or hints about using WebStyle.

(Don't click Tell me more right now though - you might close this Tutorial.)


130 Change Color
Change the color

Like everything in WebStyle, changing colors is easy.

Details on next page...


131
1. Click the "Color" button on the button strip

This changes the right hand part of the window to show you the colors used in the graphic.

For simple graphics there's only a background and one color name. More complex graphics show you more color names. Just click on a name to select it.

Continued...


132
2. Click on a new color for your bullet

(Click a colored square - choose any color you like.) The bullet immediately changes color.


133
What if I decide I don't like the color I've just chosen?

Easy. Either choose another color by repeating the previous step. Or, if you prefer the original color, just click Revert. This throws away any changes you've made since you clicked the Color button.


140 Resize
Resizing the graphic

Last stage before saving. You need specify what size you want the graphic to be on your web page.

Details on next page...


141
1. Click the "Size" button

This shows you the resizing options.

2. Set the size

For a button like this 20 pixels is a good size.

Drag the slider until either box shows 20.


150 Save
Saving the graphic

This is last step in this first tutorial. It covers saving the graphic to disc.

Details on next page...


151
1. Click the "Save" button

This shows you the save options. For more details of these options click the Tell me more button at the top of the window.

2. Click "GIF" in Output Type

GIF format files are suitable for simple graphics like this. JPEG is best for graphics with complex shading or for photographs.

Continued...


152
3. Click "Save Graphic"

This moves onto the second set of save options.

Continued...


153
4. Type in a name for your graphic

We suggest something simple such as Bullet

You can use letters A-Z a-z or numbers 0-9 or dash (-) or underscore (_) in file names.

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

Continued...


154
5. Click "Save" to save your graphic to disc

And that's it. You created a graphic ready for use on your web page.


190
That's it!

You've finished this first tutorial - well done.

Move onto the second tutorial

Quit these tutorials


200 Second Tutorial
Creating a button with text on it

This is the second tutorial. If you haven't used WebStyle before, you might find it useful to run the first tutorial before trying this one. Run the first tutorial.

This tutorial takes through the process of adding text to a button. This type of graphic is useful for navigating web pages. (The text might say 'News', 'Up-coming events', 'History'.)

You then complete the graphic by adding a shadow.

Start this tutorial


210 Load
First load a suitable graphic

The first tutorial described selecting a graphic so we'll just give basic details.

1. Click "Graphic type"

2.	Click on "Buttons"

This displays a selection of buttons.

Continued...


211
3. Click on the red button with "Text" on it

The preview window now shows this button.


220 Text
Change the text

First step is to type in the text you want.

Details on next page...


221
1. Click on "Text"

This displays the text options.

2.	Type in the new text

Type in what you like. As you type the button resizes to display your new text.

3. Change the font

WebStyle displays the fonts installed on your computer.

Click on a font you like the look of.


230 Shadow
Add a shadow

Shadows can give even simple graphics a feeling of being above the page.

Details on next page...


231
1. Click the "Shadow" button

This shows you the standard shadow options.

2. Click an option you like

As usual, if the result isn't quite right you can just select another option.


233
None of these shadows what you want?

Click Advanced for extra controls. That's beyond the scope of this tutorial though.


240 Save
Save

The first tutorial covered saving. Click here to see those pages again

You've now finished the second tutorial.

Move onto the third tutorial

Quit these tutorials


300 Third tutorial
Third tutorial

This is the third tutorial. If you haven't used WebStyle before, you might find it useful to run the first tutorial before trying this one. Run the first tutorial.

This tutorial takes through using a Theme to change a graphic. What are Themes?

Start this tutorial


310 Load
First load a suitable graphic

The first tutorial describes selecting a graphic so we'll just give basic details.

1. Click "Graphic type"

Continued...


311
2.	Click on "Headings"

This displays a selection of headings.

3. Click on a heading that uses two or more colors

The preview window now shows this heading.


320 Theme
Select the Theme to use

1.	Click the Themes button

This shows you the range of Themes. We will use Xample.

2.	Click on "Xample" to select it

Spend a moment looking at Xample. Knowing what it looks like helps you understand what you are doing in later steps.

Continued...


321
3.	Click "Open" to load the Theme

Loading a Theme doesn't change the display. You select later which settings in the Theme you want to use.


330 Shadow
Change the shadow

In this step we use the shadow associated with the Theme. Shadow is the easiest type of Theme property, which is why we'll start with it.

1.	Click the "Shadow" button

This swaps to the Shadows page.

2.	Click the Themes button at the bottom of the page

This pops-up a menu with one option on it.

3.	Select Shadow from the menu

This applies the same wall shadow as the Theme has. Easy isn't it?


340 Text
Change the text

Next we use the Theme for something a little more complicated, changing the text.

1.	Click the "Text" button

This swaps to the Text page.

2.	Click the Themes button at the bottom of the page

This pops-up a menu. This time there's two options on the menu; Text & Font.

Continued...


341
3.	Select Text from the menu

This applies the same text as the Theme has.

You can also select Font to copy the font, aspect ratio and bold/italic from the Theme.


360 Colors
Change the colors

This is the last step in this tutorial. Using colors from Themes is slightly more complicated than other problems which is why we've left it to last.

1.	Click the "Color" button

This swaps to the Colors page.

2.	In the list of colors click one of the text colors

So you know which which parts of the graphic use this color, click one of the color panels to change the color. Don't use Black as we use this later.

Continued...


361
3.	Click the Themes button at the bottom of the page

This pops-up a menu with several options on it.

You can use any color from the Theme to change any color in the graphic. To show you how this works....

4.	On the menu click "Theme color 1"

Parts of the graphic change to black which is the color of Theme color 1.

If you wanted to, you could use other colors from the Theme to change other colors in the graphic.


390
That's it!

You've completed these tutorials.

Go back to Tutorial 1

Go back to Tutorial 2

We hope you found these tutorials helpful but we always welcome feedback. Please email ws-suggest@xara.com [image] with your comments


C - First Screen (Topic 901)
Welcome to WebStyle

WebStyle lets you create stunning, professional quality web graphics in a matter of minutes.

The basics of using WebStyle:

You can create six different types of graphic: 2D headings, 3D headings, bullets, text buttons, page backgrounds, and page dividers.

Select the type of graphic you want to create (click Graphic Type) - this displays a wide range of templates to choose from.

Use the buttons down the left hand side of the window for options to customize the graphic

Finally select Save to preview and save the graphic for use on your web page.

For more information, there's prompts at the top of the window or click the Tell me more button.

However the quickest way to get to know WebStyle is run the Tutorials. (They only take a few minutes.)


Contents
Tutorial

These simple tutorials show you the basics of WebStyle. You can work through them at your own pace but they shouldn't take more than a few minutes.

Click one of the buttons to move to the next page:

First tutorial - creating a simple bullet

Second tutorial - adding text and a shadow to a button

Third tutorial - using Themes

I don't want to run the tutorial right now

We welcome feedback on these tutorials - please email ws-suggest@xara.com [image] with your comments.

This tutorial is © Xara Ltd. 1998 (v1.0)


Don't run
I don't want to run this Tutorial right now

You can run it another time by clicking the Tell me more... button at the top of the WebStyle window. This opens the information pages. If you can't see "Run the Tutorials" listed, click "General Information on using WebStyle".


Exit

This page is used only as an Exit to ensure all windows get closed. Users should never see it.


Orientation
The basics...

This page tells you what we've called the various items on the WebStyle window. Think of it as being shown round...

On the left is the Button Strip. You use this to select options for creating stunning pictures for your web pages. (We call the pictures you create 'graphics' - graphics can be anything you can create in WebStyle such as simple bullets, buttons with text on, headings... Anything.)

The main part of the window shows you a preview of your graphic as you create it. This part of the window also shows you the options available right now. For example, if you click the Color button on the Button Bar, you see the color options.

OK that's covered the basics. Now let's gets to the fun bit of actually creating a graphic.

Start this tutorial


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. Easy.


graphic
What's a graphic?

We use 'graphic' as an all purpose name for what you produce in WebStyle. You can think of 'graphics' as drawings, illustrations, images or any other name you like.