* Please note that some services and features may not be available to some levels of membership. If you have any questions or difficulties, please contact customer support by selecting ‘help’ from your Filestore.

Getting Started

Before you start to create your web site we recommend that you print a copy
of this tutorial and follow it through to see how ZyWeb works. This will help you get a feel for the possibilities available when you start to create your own pages.

There are 2 primary sections in this tutorial.

1. How to create a single page
2. How to create your website

----------------------------------------------------------------------------

1. Creating a single web page

Your FileStore

Each time you sign in to your ZyWeb account, you will be taken to the Welcome
Noticeboard page, where you will find the latest ZyWeb news and information.

Selecting the start here button will take you into your FileStore. This is your
central store where all your ZyWeb pages, graphics and photos will kept. This is
also the central access point for all other options such as changing your
password, executing your search engine submission, registering your Domain
Name and Help. Each time you create a page it will be stored here. You can also
store photos, clipart or graphics ready for use in your pages. If you are a ZyWeb
Personal or Business user you could also use your FileStore to store a range of computer files, such as word documents, spreadsheets or important back-ups for easy access from anywhere in the world.

This example shows a FileStore after creating a web site. Notice the different
folders set up to store different items much as you would on your computer.

Click on image for a closer look

Creating a web page (top)

From your FileStore in the create a new…... box on the left, select web page.
This will take you to a template selector page. Select the style of template you
would like to use.

Remember that this is only a template and that your final web pages will look
very different once you have personalized it with your own colors and elements. Choose a template for the layout and its components rather than its look and colors.

After you have chosen your template you will be taken to the Customize Page editor. The Customize Page editor is extremely powerful and the center of your page creation. The top part of the screen is the editor for the selected item. The page you are creating appears in the bottom part of the screen. The Customize Page allows you to alter the details of the layout, appearance of your page and to insert and remove items.

Click on image for a closer look

Initially, all items on the page are underlined or outlined in blue. There's also an Edit marker beside or beneath each item. You can select an item you want to alter or delete, or near which you want to add a new item, by clicking on the item or on the Edit marker. Once you have selected an item, it will be marked with a flashing red arrow.

There is also a drop down menu on the top bar that can be used to edit features such as backgrounds or themes.

The Customize Page editor has three main sections:

• The first section allows you to edit, delete or change the style of an item.
• The ‘Align’ section allows you to change the way the item is aligned with other items on the same part of the page by either aligning left, center, right, flush right or flush left.
• The ‘Insert new’ section gives you the option to insert an extensive range of module add-ons to give you a more dynamic web page that will ‘wow’ your visitors. Click on ‘more info’ on modules to see all the available Modules. From this Module Information page you can select ‘preview’ to see what the Modules look like.

For our test page we will simply change the heading and button styles and enter some text.

Customizing the Heading (top)

Headings can be customized by changing the style, text, size, color or image quality. You can also change the size of the graphic for faster download time. Incredibly, all this can be done in a few minutes.

Select the heading by clicking on the edit marker next to it. Then select ‘full edit’ to edit the current style. You can change the font, the size, the colours, add a drop shadow and even link the heading to another web page – but more on that later.

Click Show me to see how your selection will appear on your page. Once you are happy, click accept.

Click on image for a closer look

If you wish to change the style then select Change style then heading image which will take you to a screen of popular heading styles. You can access styles of headings by categories, eg. 2D or 3D. Then you can edit the features of the heading style.

You can have fun experimenting with headings before settling on the final choice, simply use the Show me button to see your changes. Once you are happy, click Accept

Customizing the page buttons (top)

Buttons are the easiest way to navigate between web pages and are, therefore, very important to the overall look and feel of your web pages.

ZyWeb allows you to change the features of your buttons easily. You can select to change the graphic style and features of the single button or you can edit the features of the whole group of buttons by clicking on the relevant full edit. You can also add new, delete or copy buttons and nudge them up or down the page

You will need to select each button in turn to edit its name. When you are happy with your button style and text then click Accept.

You will learn how to link pages in section 2 when you create a full web site.

Click on image for a closer look

Inserting your text (top)

Select a paragraph of text by clicking on the text or on the edit marker alongside. Now you will see the text editor at the top of the screen. Simply select the existing text by pressing the ctrl and A keys and then delete it. Then type in your required text or ‘cut’ and ‘paste’ some existing text into the box. You will learn more about the features of the text editor in section 2. When you have entered the text select OK. You will now see your text in place. Select the other paragraphs to insert your text.

Click on image for a closer look

Inserting and Deleting paragraphs (top)

To insert a new paragraph go to the Insert new.. section on the right of the editor. From the drop down menu select paragraph and then select either above or below to insert it where you require it.
To delete a paragraph simply click on the text or on the edit marker alongside. Then select delete.

Saving your web page (top)

When you are happy with your web page select finish to save it.
Enter in the name of your web page and also its category. This will be used by the search engines to classify your page. Select save and publish and your page will be published to the web. On the next screen you will see the web address and if you click on it then it will open another window so you can see your web page.

Congratulations – your first web page and it was so easy!

Now select continue and you will be returned to your Filestore.
If this page was purely a test page then we suggest that you unpublish it from the web. To do that – simply ‘check’ the box under the page icon and select unpublish from the Actions menu on the left of the Filestore.
You can now appreciate the power of the graphics generators in ZyWeb. You can produce web pages with stunning, professional quality graphics in minutes.
Now let’s go on and create a complete web site.

2. Creating a complete web site (top)

Planning

Before building your web site it is essential to spend time planning it on paper.
Write down the purpose of the site and what the content of each page will be as
this will save time and headaches later.

Firstly, define your Home Page, introduction and site index, and then list the
other pages noting the content including paragraphs, lists, photos and logos or
clipart. Now work out how your individual pages will link together to produce your
web site. A simple flowchart is a useful way to plan how your pages will link to each other to make it easy for readers to navigate through your site.

Having your copy already typed and edited and ready to use in a word document
is an excellent idea that will save you lots of time later when you are ready to
start adding content to your web pages. You will be able to copy and paste your
text wherever appropriate.

Creating Your Master Theme (top)

When creating an entire web site, we suggest that your first step should be to create a Master Theme web page. The properties from this can then be copied into your new web pages.

This is an important step to maintain consistency of look and feel across your web site each time you create a new web page.

From your FileStore in the create a new…... box on the left, select web page.
This will take you to a template selector page. Select the style of template you
would like to use.

Remember that this is only a template and that your final web pages will look
very different once you have personalized it with your own theme colors and
elements. Choose a template for the layout and its components rather than its
look. Pick a page template that best represents the general layout you plan to
use on your site. Choose one that has as many of the features you plan to use as possible, e.g. buttons, paragraph headings and page headings, etc.

After you have chosen your template you will be taken to the Customize Page editor. This is where you customize your web pages. You can set up your master theme page from here, however, you might find it quicker in the Page Properties editor where you can set your page theme heading and button styles, backgrounds, colors and type fonts. Remember that you can always change or edit your individual page properties later in the Customize Page editor.

From the top drop down menu select Page Properties. Go to the Theme Colors section.

Click on image for a closer look

Theme colors

You will see a set of color-pickers where you can select the various colors that will be used on your page, such as background color, theme color, main text color etc (the exact selection depends on your choice of template). To change any of these, simply click on the color of your choice. If the color you are setting is one that will be used as a background color then you can also choose to use a texture. To switch between a flat color and a textured color, click the color or texture buttons. When you click the texture button you will be able to pick a texture either from the built-in ZyWeb textures or from one you have created and stored in your FileStore. If you pick a built-in texture it will be colored according to the color you have chosen.

Theme Elements

You should now set the master theme elements for your web pages, i.e. Heading and Button Styles. Remember that you can later change individual pages within your web site if you wish. Now set your styles.

The Main Heading Text is the text for the main heading text of your page. It
might be a good idea to type ‘Master Page’ so that it is instantly recognizable to
you later as your Master Page. Some heading styles have a sub-heading below
the main heading, so if you have chosen one of these then you will be able to
enter the sub-heading here too.

Some templates will also give you the option to change a theme font which will
be applied to any graphic containing text.

There are lots of professionally designed graphics to choose from for the Main
heading Style of your page. First click on Change Style and then simply click
on your choice from the wide range of images available.

Click on image for a closer look

Now you can choose the Button Style on your master page. Click on Change
Style to choose from the range of button styles and click the image of your
choice.

You have now finished setting up the properties which make up your master
Theme. Click on finish or done to save your page. Notice that a preview appears so you can check what you have done. Give your master theme a meaningful name so that you remember it, e.g. MasterPurple (if you have done a theme in purple). Click save to confirm and your master theme page will be saved to your
FileStore.

Copying your theme (top)

You are now ready to start creating your home page and we will copy the theme
colors and elements from your master theme page. From your FileStore in the
create a new…... box on the left, select web page. This will take you to a
template selector page. Select the style of template you would like to use and on
the next screen select the layout of your choice.

You are now in the Customize Page editor. We wish to copy the page theme onto this page so go to the top drop down menu and select Page Properties. The first option allows us to copy a theme. Select the drop down menu which will display a list of all of the pages in your filestore. In this case, there is only likely to be one page listed as we have not created any other pages. Select your Master and then select the copy button. Now select Next or Customize Page from the top drop down menu. You will now see a draft of your page with your chosen themes applied.

Click on image for a closer look

Customizing Your Home Page (top)

You are now ready to customize your web page. The Customize Page editor is extremely powerful and the center of your web page creation. The top part of the screen is the editor for the selected item and the page that you are creating appears in the bottom part of the screen.

You can customize any item on your web page by clicking on the underlined text
or outline or on the Edit marker beside or beneath it. (Note that the markers, outlines and underlines seen in the Customize Page editor won't appear on the
finished version of your page!)

Customizing your Heading Text (top)

First, we are going to change the Heading Text. To select the heading click on the Edit marker or click on the heading itself. A Text Box appears where you can enter the heading for your page. We deleted the text that appears and entered “A-Z Financial Services”. We are happy with the size of the image so left it at 100% but changed the quality to ‘medium’ as it will be slightly quicker to view than the ‘high’ resolution. Now click on OK to see the result.

At this point, should you wish, you can also change the style for the graphic used for your page heading. It may be that on this page you want a different graphic to the one chosen for your Master Theme. Click on Change Style then Headings and you can choose from a wide range of graphic headings styles. Select the heading of your choice and it will now replace the original graphic.

If you go into the full edit option then you can change all elements of the heading, e.g. size, colour, font style and you can also put a drop shadow on it.

Click on image for a closer look

Inserting / Deleting Buttons (top)
For our home page we want 4 buttons which will link to other pages that make
up our web site. The template we chose has 5 buttons so first we need to delete
one of them. Click the Edit marker next to the 5th button to select it and then Delete to remove.

Changing The Button Text (top)
The text on each of our 4 Buttons needs to be changed to indicate the page
that the visitor will be taken to. For our A-Z Financial Services home page we
want buttons to take visitors to other pages with information on ‘Pensions’,
‘investments’, ’About Us’ and ‘Contact Us’.

Click the Edit marker next to the first button to select it. You now have the option to enter your own text for the button. Delete the text in the Text Box and replaced it with the word ‘Pensions’. At this point we will ignore the Link
information. We will discuss setting the links for your pages later as it is easier to
create all your pages first and then link them together later. Click OK and you will see a preview of the button.

Repeat this procedure for the remaining 3 buttons. In our case we had 4 buttons
with the text ‘Pensions’, ‘investments’, ’About Us’ and ‘Contact Us’. When creating the buttons for your own web pages, you should use the text which best describes the function of your button in the shortest phrase.

Inserting Page Text (top)
Now, we are going to enter the introductory / welcome text for our home page.
Start by clicking on the underlined text of the first paragraph. This takes you to a
screen with a text box showing the text which currently appears. To replace this
text, select all the existing text, delete it and type in your own. Alternatively, you may have already prepared your text in a text document, in which case simply copy and paste this in the box and click OK. Repeat these steps as necessary until you have all the text required on this page. You will need to delete any surplus text paragraphs from the template by selecting the paragraph and clicking on delete.

Click on image for a closer look

The Text Editor (top)
To have greater control on customizing your text users of Internet Explorer 5.5 and above on Windows computers can use the Rich Text Editor. To see this you will need to have javascript enabled.

The simple editor will enable you to cut and paste and copy whereas the Rich Text Editor give you access to additional controls such as:

text attributes such as font type and sizes, bold, italic and the colour,
layouts for bullet points, numbered lists and indents links to other pages and also the ability to insert HTML code.

As an example - to change your text size simply select your text and then click the font button, marked A. Now select the font style and size.

More Content (top)
It is worth noting that you can customize your page further by adding in photos
and really impressive animated text or photo effects. More information on this
can be found at Inserting Photos and Inserting A Module.

Saving your Home Page (top)
Now click on Finish. Give your page a name and set its category which will be used later in the search engine submission. Then Save to save your newly created home page in your FileStore. At this stage we will not publish the web page until we have created all of our pages.

Creating More Pages(top)
We now suggest that you practise and create a few more web pages.

Linking your Pages Together (top)

Once you have created all your pages, you will need to link them all together.
Linking your pages together and ensuring the buttons take your visitors to the
correct page is the final step in creating your web site. Starting with your home
page, from your FileStore, select it and click Edit from the Actions box, or simply double click on the page icon. You are now in the Customize Page editor.

Click on image for a closer look

Click the Edit marker next to the first button to select it. Now select where you want this button to link. Clicking on the drop-down menu displays a list of all
previously created pages in your FileStore. Select the appropriate page and click
OK. Remember that you will need a button on each page to link back to your
home page so that visitors to your web site can get back to where they started.
You can also use this option to link any item on your page to an external web site
or an email address.

Publishing your Web Pages (top)

Having created all your web pages and checked that the links are all correct you
should now publish all your web pages.

From your FileStore, select all the pages which make up your complete web site, by checking the small box. Then, from the Actions box, select Publish. A list of the pages you are about to publish with its category now appears. Click on Publish and your web site is now published on the World Wide Web!

Click on image for a closer look

You have now experienced the ease and speed that you can create a professional looking web site. We have shown you the basics so now you can continue and experiment with changing styles, adding photos and even some text and photo effects. For the more adventurous the Help pages includes HTML tips where you can try changing the font and font sizes of the text on your pages.

Uploading Photos to your FileStore (top)

Before you can use a photo in your web pages, you will need to have it in your
FileStore. It is better to load them before editing your webpage, although you can upload a photo whilst in the Customize Page editor if you have forgotten to upload it beforehand.

You might have these already scanned into your computer, copied them from the
resource center of ZyWorld, or loaded them from a digital camera. These are
generally installed in your computer as JPEG's (the universally used web graphic
file).

To get pictures into your FileStore they must be either in a GIF, JPG or JPEG
format and ideally, for best results we recommend they are between 50dpi and 100dpi and should not be more than 90K each. Note that a typical photo from a digital camera is about 2MB so you will need to reduce it in size before you upload it into ZyWeb.

For more information on photo sizes see here

Click on image for a closer look

From the FileStore, select Upload from the Actions Box. Now select browse to
find your picture on your computer, then get files. Your photo has now been
uploaded to your FileStore.

Editing Photos In Your FileStore (top)

From your FileStore, ‘check’ the box next to the photo you would like to edit and
from the Actions box, choose Edit. This will take you to the Photo Editor
where you can perform a wide range of tasks to improve or alter your photo
ready for your web pages. You can crop margins and change the, contrast,
quality, brightness, sharpness or size of the image. Don’t worry if you have scanned the photo in upside down or sideways. You can also change the orientation by using the Rotation tool.

Click on image for a closer look

You can experiment with the controls on your photo so that you enhance it to its maximum. The photo editor will always keep a copy of the original so if you mess it up or decide to change it again later then you can simply select Reset to get your original photo back. If you want to revert to the one on your web page then you can select cancel. When you’re happy with the way your photo looks on your page, select Save.

As a rule you should target for a photo of approximately 200 pixels wide for small illustrations and thumbnails, and 600 pixels wide for larger images. The editor will display the size of the image. You can crop the edges by entering the number of pixels to be removed from the desired edges and then selecting show me or alternatively, a quicker method enables you to simply click on the image in the position where you want it cropped.

Inserting Photos Onto Your Web Page (top)

When you are in the Customize Page editor decide where you want to insert your photo and select an existing item on the page next to the position where you want your photo. For example, you may want to insert a photo under the main introductory paragraph of your home page. Select that paragraph. Then, on the right hand side tool box choose Insert New option, select Image by clicking on it and then click the above or below button to insert the new item above or below the selected paragraph on your page.

You are now in the Image Picker. Select to use an image from your Filestore. All the photos previously uploaded to your FileStore will be displayed. Click on the photo you want to insert and it is now inserted onto your web page.

Inserting Photos with Photo Frames (top)

The frames option allows you to display your images in a ‘picture frame’. When you in the Customize Page editor decide where you want to insert your photo and select an existing item on the page next to the position where you want your photo. Go to the Insert New option, on the right hand side and select Image from the drop down menu, then click the above or below button to insert the new item above or below the selected paragraph on your page.

From within the Image Picker, you will then select the use frames to display photos option.

Select this and you be taken to an area where you can select from the range of
Picture frames available. Click on the frame of your choice and then select OK. You will then need to select the photo to go in the frame. This can be from your filestore or from a range of stock photos. Click on the photo you want to insert and it is now inserted onto your web page. You can also add a link from the photo, if you wish.

Click on image for a closer look

Creating a Gallery with Thumbnails linked to larger Images (top)

Creating a Gallery web page with thumbnails all linked to a larger image is done
automatically for you within ZyWeb.

First you need to create a special Gallery Folder to store your pictures in. This
folder also manages the size and creates your thumbnails.

From your Filestore selected Gallery from the Create a new… Panel.
Enter a name for your new gallery in the box provided.

Now pick suitable sizes for the thumbnails and the larger pictures in the gallery.
We recommend that you pick smaller thumbnails if you are planning to have
more across the page in the grid. Recommended sizes are: 'small' for a four-across grid, 'medium' for a three-across and 'large' for a two-across grid. Then click Create to create a new Gallery Folder in your Filestore.

Now, from the Filestore, click on the gallery icon to select the gallery folder. You will then be in your special Gallery Folder you’ve created ready to receive your gallery pictures. From the left hand Actions panel, select upload to upload your pictures to be used into this folder and follow the prompts.

Click on image for a closer look

Alternatively, you can use pictures you've already uploaded to your central
Filestore, by moving them to the newly created gallery folder. To do this, from
the central Filestore, select each of them by clicking on the white box next to it
and then select move from the left hand actions panel and select the Gallery
Folder to where they need to be moved from the drop-down menu.

You are now ready to create a gallery page using the Gallery feature which
automatically inserts the thumbnails linked up to the larger image. Return to your main Filestore by selecting home in the folder name or select the up arrow next to the folder name.

For your Filestore select Web Page from the Create A New… panel and select a gallery style template from the range available – you will see that the gallery templates are identified with a flash in the top right corner. Then from within the Customize Page editor go to the drop-down options menu and select Gallery. You can choose the gallery you wish to place on your page from the list of gallery folders shown in the drop down list. Select the Gallery you wish to use and click OK. ZyWeb will import the pictures you’ve previously uploaded to your gallery folder in a thumbnail format automatically linked to the larger image.

At this point you can edit the text that will appear beneath your thumbnail photo by clicking on the default text which will take you into the Text Editor. When you are happy with your text select OK.

Note:
For further information on preparing your photos for the web see www.zyworld.com/webphoto

There is a further tutorial on building a photo album at www.zyworld.com/zyexamples/tutorial

Making your web site ‘Accessible’ (top)
You should attempt to make your web site ‘accessible’ to disabled users. ZyWeb has incorporated features such as ‘alt-tags’ for images so that when a visitor to your site moves their mouse over an image, the text will describe the image. When you are editing a photo you will notice an entry area for the description.

You can find out more about making your web site ‘accessible’ for our guide at www.zyworld.com/quickguides/articles_2/accessibility.htm

Inserting a Module (top)
You can insert modules into your webpage to give it extra functionality such as scrolling messages and button bars that change colour when the mouse passes over them. Some of these modules have been provided by third party companies, eg Xara Online. You will need to contact them directly for any support.

We shall experiment with by inserting a button bar.
When you are in the Customize Page editor decide where you want to insert your module and select an existing item on the page next to the position where you want it. Then, on the right hand side tool box choose the Insert New option, select Button Bar by clicking on it and then click the above or below button to insert the it above or below the selected item on your page.

You will be taken to the Button Bar Selection. There are vertical and
horizontal button bars available and some are free to use. Select one which best
suits the style of your page by clicking on it.

Now you can customize this button bar. Enter the text for each button in the text boxes. To change the color of your Button Bar first click 'color to edit' on the left then select the color on the color patch or type in the RGB value on the right. You can make the buttons link to any web page you want. In the URL fields, type in the web address of the page you want to link to or use the drop down list to select from an existing web page in your ZyWeb Filestore.

Once you are happy with your Button Bar click on 'save and publish' to insert
your Module add-on into your page.

Note:
For more information please see the QuickGuide on Inserting a Module into your web pages at: http://help.xaraonline.com/articles/zyweb/default.htm

Advanced use - Inserting HTML code into your web page (top)

Some users may wish to include their own HTML to expand the functionality or add features onto their web page. When you in the Customize Page editor decide where you want to insert your HTML and select an existing item on the page next to the position where you want it. Then, on the right hand side tool box choose the Insert New option, select HTML Object by clicking on it and then click the above or below button to insert the HTML above or below the selected item on your page.

Domain Names (top)

Having your own Domain Name for your web site and email address is really
important especially if you are a business. ZyWeb makes it so simple that
everyone can now enjoy this. ZyWeb users can get their own unique domain name including hosting plus unlimited page hits. (free to ZyWeb Business users and a small charge to ZyWeb Personal users)

From your FileStore, select the extra services. You will be taken directly to a
screen where you can follow a few easy steps to registering your very own
domain name.

If you already have a registered Domain Name managed by another company you can make it refer to your ZyWeb pages by clicking the Existing Domain Name button.

If you would like to register a new domain name, click on register domain name.

On this screen you can also check whether a domain name you might be interested in is available before you try to register it.

Submitting your Web Site to Search Engines (top)

Registering your web site with the search engines is an important step in
promoting your newly completed pages and making sure that lots of people see
your web site. It means that people searching the Web will find it when they
type in certain keywords that match yours.

You will need to set up the search engine properties. From your FileStore select your home page and then click info. You will see all the information relating to the web page. From here you can change the page category and set the Title, Description and Keywords that will be used by the search engines.

Decide which level of Search Engine Submission you require and click the relevant button. It’s as simple as that!

Additional useful information on generating traffic to your web site can be found
in the Web Knowledge section of www.zyworld.com

Your web site (top)

Congratulations! You have now completed your test website. Now you can plan your own web site in the full knowledge that you can build a truly professional web site with your own customized graphics in less time than it would take a professional web designer to do one for you. What’s more you can edit it as often as you like, whenever you like. Now you have a website that you can be proud of so don’t forget to tell your friends how easy it is with ZyWeb.

Further information and Tutorials

We have provided some useful and interesting articles along with some How To.. quick guides so that you may maximize on your enjoyment of ZyWeb.
See www.zyworld.com/quickguides/