Home Guides & FAQ
print

Using WebCreator

Page setup

The page setup is the backbone of your website. It’s where you define the color of your background, the margins and your website’s title. You can also set an image as your background.

Click Files -> Page setup to open the Page setup dialog.

Using the WebCreator page setup dialog.

Web Page Title

The title of your website will be displayed in the browser’s title bar. By default this is your domain name.

Choosing the web page title to be shown in the browser title bar.

To change the title of your website open the Page setup dialog (see above). Then fill in the title you want in the field Web page title, and click OK.

Changing the web site title in WebCreator.

Page Margin

The page margin is the space between the borders of your browser and where the content of your web page begins. You can adjust the margin for top, bottom, left and right.

To change the margins of your web page, open the Page setup dialog (see above) and type, in pixels, the desired values, and click OK.

Adjusting the page margin in WebCreator.

Background Color

The background color is the color appearing at the back of your web page.

To change the background color of your web page, open the Page setup dialog (see above).

Click the square next to the hex color code (in this example #ffffff), to open a color palette.

Changing the background color of a web page in WebCreator.

Here you can choose a color for your background. When done, click OK.

Picking a background color from the standard palette.

Another way to change the background color is to click the background color icon on the toolbar. This will open the standard palette where you can choose a color.

Background Image

The background image can be either your own graphics or predefined images from the template. If a background image is defined for the template, it will be selected by default. The background image is repeated in the background, and is not just placed once.

To use or change a background image, open the Page setup dialog (see above) and check Use background image if not already checked.

Selecting or changing a background image for a web site.

Then either type the path to the new image, or click Browse Files to choose an image file from your server.

When done, click OK.

Browsing files to choose a background image file from the server.

Controlling your project

With the sidebar you are able to manage the web pages associated with the current project. In the sidebar, you can add new pages and control which of your pages should be published. Each page published in your project will be added to a menu on each page in the project automatically.

Controlling a project with the WebCreator sidebar.

You are able to choose whether you want to have the sidebar displayed on the left or not displayed at all by clicking this icon:

Organizing a project.

Through the sidebar you can organize your project. In your project you can have published and unpublished files. The name of each page listed in the sidebar, is the text displayed in the menu along with a link to the page.

Managing published and unpublished files in WebCreator.

Note! The Sidebar and Organize button only works if you are working on a project (based on one of One.com’s templates).

Add page

To add a new page to your project, click the Add... button in the sidebar. When adding a page, you need to fill out three fields.

Menu text is the text appearing in the menu with a link. If you change this text, it will automatically be changed on each page.

Filename will be the name of the file on your web space. You are able to access the file manually through the File Manager.

Web Page Title is the title appearing in the top of your browser. It can be different from your other web pages, for instance you can call it My website - Products, if the web page you are about to create, contains products.

Adding a new page to a WebCreator project.

Click OK and the new web page will be created.

To add a menu item that links to a page that is not a page in the project, click Add external Link... In the new window, give your new menu item a menu text and enter the location. Select how you want the menu item link to open (new window or same window). Then click OK.

Organizing

By clicking the Organize... button, you will get a list of the different sites in the project. Click on one of the files, and different functions will appear on the right side of the window.

You are able to move the pages up and down in the menu. The file in the top is the first link to appear in your menu.

If the page in your menu has not been published yet (and will appear under Unpublished in the sidebar) you need to select the file and click the Publish button at the right side of the window. By clicking Unpublish the page will be removed from the menu.

In order to change the menu text, change the text in the field underneath Change menu text and click Update.

In order to delete a page from the project, you will need to ’unpublish’ the page, save the document and make sure it is not opened in the WebCreator.

Select the correct file in the file list and click Delete page.

Publishing and unpublishing pages.

In order for the changes to take effect, click the OK button.

Changing filename

To change a file name, the file needs to be both unpublished and inactive.

1. Enter WebCreator via Filemanager, by selecting another file in the same project (not the file you wish to alter) and then click to edit using WebComposer (another name for WebCreator).

2. Click the Organize button.

3. Select the file you wish to alter, click Unpublish, and then the OK button to save your project.

4. Click The Organize button again.

5. Select the file, click Rename File, give the file the new name, click OKand then OKagain. Save project.

If you are experiencing problems with step 5, then the file is still either activated or published. Make sure the file is unpublished and save the project. Close down WebCreator and then repeat step 1 and then 4-5 again.

Formatting

When adding text to your website, you have a lot of possibilities, resembling those you will find in a normal word processing application.

Many possibilities for text formatting with WebCreator.

Setting style

When formatting text you can choose between some predefined styles, by marking the text and choosing a style in the Style drop down menu.

Choosing between predefined text styles.

Setting font

To change the font, mark the text with the cursor and choose the font from the Font drop down menu.

Choosing the font to use for the web page in WebCreator.

Setting font size

To change font size, mark the text with the cursor and choose the size from the Size drop down menu.

Changing the font size from the drop down menu.

Setting font color

To change the font color, mark the text with the cursor and choose the color by clicking the Font color icon and choosing the color.

Changing the font color in WebCreator.

Highlighting text

To highlight text, mark the text with the cursor and choose a color by clicking the Highlight color icon and choosing the color.

Highlighting text with the cursor and the color palette.

This will make the text look like this:

Appearance of highlighted text on a WebCreator page.

Bold, italic and underlined text

To use bold, italic and underlined text, mark the text with the cursor and click one of the following icons:

How bold text looks on a website. How italic text looks on a website. How underlined text looks on a website.

Inserting numbered or bulleted list

To make a numbered list, click the icon in the toolbar.

Inserting a numbered list in WebCreator.

This will place the number 1. on the work space. Then write some text and press Enter to create the next line.

Returning from a numbered list to normal editing.

When you are done, press Enter and then Backspace to return to normal text editing.

Creating bulleted lists works in the same way by clicking this icon:

Creating a bulleted list in WebCreator.

Decreasing/increasing indent

To increase the indent of your text place the cursor to the left of the text, and click the Increase indent icon.

Increasing indent.

This will increase the indent. To decrease it again, place the cursor to the left of the text, and click the decrease indent icon.

Decreasing indent.

Subscript and superscript

To make a text subscript, mark it with the cursor and click the Subscript icon.

Subscript and superscript in WebCreator.

This will make the text look like this:

Using subscript in WebCreator.

To make a text superscript, mark it with the cursor and click the Superscript icon.

Selecting superscript in WebCreator.

This will make the text look like this:

Using superscript in WebCreator.

Hyperlinks is one of the most important functions in web site building as it links together the pages you have created. Links can be either text or images on your web page.

To insert a link to a page or file on your server, mark the text or image you want to act as a link, click the link icon and select Insert link to file or HTML Document...

Insert link to file or HTML Document

This will open a dialog, where you can select the page or file to link to. If the file is not an .html file click to view all file types instead of only .html files. This requires that the file is already uploaded to the server. You can upload the file with Filemanager or an FTP program before doing this.

Select the page or file to link to

Click OK to insert a link.

How a file link opens varies greatly, depending on the file type (.doc .pdf .xls...), in combination with the browser that your visitors are using.

Some browsers have add-ons so files can be shown directly in the browser, whereas most browsers don’t have this, meaning that the visitor when clicking your link will be asked to download the file instead of being able to view it directly. You can not influence this in any way.

You can of course also link to pages outside your website. To do this, mark the text/image you want to act as a link, click the link icon and choose Insert link to website.

Inserting a link to a web page.

This will open this dialog:

Browsing linkable files.

Type in the URL (e.g. http://www.anotherdomain.com ) to the website and click OK.

Another option when creating links, is to create the sub page you want to link to at the same time. To do that, mark the text/image to act as a link, click the link icon, and choose Create new subpage and insert link.

Create a new sub page in WebCreator.

This will open a dialog. First, choose the title for your new sub page, by filling in the Web page title field.

Choosing the web page title.

Then choose either to make the new page a copy of the current, a blank page, or a blank page with fixed-width layout.

Select to create a copy of the current page or a new blank page.

Finally choose the File name for your new page. This has to end with .html or .htm.

Choosing the File name for the new page.

Click OK. The new page will then load in a new window.

To remove a link without deleting the text/image, mark the link, click the link icon, and choose Remove link.

Removing a link without deleting the content.

The text will not be deleted when removing links.

Images

You have three possibilities, when you want to insert a picture on your web page, through the WebCreator:

Upload and insert image
Insert image from server
Insert clipart

Upload and insert image

Uploading and inserting images.

Accepting the plug-in

In order to insert an image from your own computer, you need to install a plug-in for the image upload. The plug-in will have the following information:

Plug-in name:

Image Component for Ilosoft web page Composer

Plug-in author:

One.com A/S

Accepting the One.com image upload plug-in. Installing the ActiveX control image component from One.com. Clicking to confirm the plug-in install.

Find image

After installing the plug-in, choose the button Open... in the upper right corner of the opened window.

Find the image file on your computer, you wish to add to your web page. All image types are accepted, including PNG and GIF.

Finding the image file to upload on your computer.

Rotate image

If you want, or need, to rotate the image you are able to do that with the two buttons underneath the Open... button. You can rotate both left and right.

Rotating the image left or right. Image rotated to the left.

Choose size

You can choose 4 different picture sizes when uploading:

  • Small Image - 180x135
  • Normal - 320x240
  • Large Image - 640x480
  • Original size

If the file is larger than 80 kb you won’t be able to choose Original Size. When inserting multiple pictures Original Size is not recommended.

Insert image from server

When choosing Insert image from server... a window appears with a list of all the image files in the specific directory.

Inserting a picture from the server.

You are able to browse through your directories and find the image you want to insert on your web page.

After finding your image, simply click OK and the picture will be inserted where the cursor is placed.

Insert clipart

The WebCreator offers clipart in more than 70 different categories, from simple black/white drawings to colorful images. Feel free to use them on your web page.

Inserting clipart in WebCreator.

After choosing your clipart, simply click Insert and the clipart will be inserted where the cursor is placed.

Images in templates

Most images in the WebCreator templates can be replaced by selecting them with the cursor, and pressing the Delete key on your keyboard. However some pictures are inserted in the templates as background images in table cells. See the chapter Table cell properties to see how these images can be replaced.

Tables and text boxes

Inserting a table

To insert a table, click the table icon on the toolbar.

Inserting a table.

Choose the number of rows and columns with the mouse and click to insert the table.

Choosing the number of table rows and columns.

To open the advanced table dialog click either Insert -> Table or Advanced after clicking the corresponding icon on the toolbar. The advanced menu is described in the Table cell properties chapter below.

Adding rows or columns

To insert a row to a table, right-click inside the row above the place where the new row should be inserted, and choose Insert Row.

Adding table rows or columns in WebCreator.

To insert a column to a table, right-click inside the column to the left of where the column should be inserted, and choose Insert Column.

Inserting a table column.

Deleting rows or columns

To delete a row or a column, right-click inside it, and choose either Delete Row or Delete Column.

Deleting rows or columns in WebCreator.

Table properties

To open the advanced table properties, right-click on the table, and choose Table properties.

Editing advanced table properties.

Choose the size of your table at the top. Click the %-button, to change into pixels. If the width or height is set to auto, the table will be as high or wide as its contents.

Choosing the size of a table.

Next choose the width and color of the table border. If width is set to 0, the table will be borderless. Write the Hex value for your color in the color field, or click the color icon to change the color.

Choosing the width and color of the table border.

Next you can choose to set a margin for your table cells, by writing a number of pixels in the box.

Setting table cell margin by number of pixels.

Below choose a text wrapping for your table. If you choose In front of text the table can be moved around freely over text and images.

Selecting text wrapping for a table in WebCreator.

Next choose a background color for the table by clicking the color icon. By default the table is transparent.

Choosing a background color for a table.

Finally you can choose a background image for your table by checking Use background image. Then click either Browse Files to choose a picture from your web space, or write the path in the text box. Then click OK to change the properties for the table.

Choosing a background image for a table.

Table cell properties

To change properties for a single cell, right-click inside it and chose Table cell properties.

Changing properties for a single cell.

This will open a dialog.

In the top you can choose a fixed width and height of the cell. Click the %-button to change into pixels.

If either is set to auto, the cell will have the width and height as the contents inside it.

Choosing width and height of the cell.

Below choose the text alignment for the cell in both vertical and horizontal direction.

Choosing the vertical and horizontal text alignment for the cell.

Next, choose a background color for the cell by clicking the color icon. By default the background is the same as the table.

Choosing a background color for the cell.

Finally you can choose a background image for your cell by checking Use background image. Then click either Browse Files to choose a picture from your web space, or write the path in the text box. Then click OK to save the changes.

Choosing a background image for the cell.

Text boxes

Text boxes are used as single table cells, which can be moved around. Text boxes can be either transparent or with a background.

Drawing a text box

To draw a new text box, click either Draw -> Draw text box or the corresponding icon in the toolbar.

Drawing a text box in WebCreator.

Choose Draw transparent text box to make a text box with a transparent background.

Click and drag to the desired size.

Drawing a transparent text box in WebCreator.

Moving a text box

A text box can be moved freely around. To move a text box, click and drag it to the desired location.

Moving a text box.

Resizing a text box

To resize a text box, click on it. You can now resize the text box to any size and in any direction by clicking and dragging the white boxes.

Resizing a text box.

Formatting a text box

To format a text box (background color, border color etc.) please look in the Table cell properties chapter above.

Guestbook in WebCreator

Creating a guestbook

Click Insert and then Guestbook

Select appearance for your guestbook.

Select Guestbook appearance

Select settings for your new guestbook and give it a name.

Select settings and a name for your new guestbook

If you want an initial message in your guestbook, you can enter it here. Or check the box for no initial message.

Enter an optional initial message in your guestbook

Click Install, then click Finish.

You can now click and drag the guestbook to wherever you want it.

Change settings in the guestbook

Right click the guestbook in WebCreator and you can see a number of options for changes you can make.

Right click to see the options in the WebCreator guestbook

Guestbook Properties

Guestbook Properties

Tip! Setting the width to 100% will make the guestbook adapt its size automatically and thereby easier for you to click and drag into any table cell you want it in - if your page has tables.

Overview

Lock or unlock your guestbook to control if posting should be possible or not.

Lock or unlock your guestbook

Messages

Guestbook messages

By selecting a message you can hide it, delete it or edit it.

Hide or delete or edit a guestbook message

Preferences

Guestbook preferences

Under the tab Appearance you can change some of the choices you made during the guestbook installation.

Under Quotation you can edit how it is announced, that a person has posted in the guestbook.

Under Form Link you can select what the write in guestbook link says and if it should look like a hyperlink or a button.

Under Form Design you can select appearance for the form, that appears when someone selects to write a post in the guestbook.

Under Customize you can change colors for the different text parts of the guestbook.

Keep in mind to click Update after every change you make under any tab under Preferences, or the change will not take effect.

Adding an existing guestbook

You can show the same guestbook on more pages than where it was installed. Click View and then Manage guestbooks. Mark the guestbook you wish to insert and click the Insert button.

Show your guestbook on more pages

Removing or uninstalling guestbook

If you merely want to remove the guestbook and still keep the messages.

Simply mark the guestbook and click the Delete key on your keyboard.

To uninstall your guestbook click View, then Manage guestbooks. Mark the guestbook you wish to uninstall and click Manage.

Select Delete to the left and follow the instructions to permanently uninstall your guestbook.

Uninstall instructions for the guestbook

Removing images

How to remove an image depends on what type of image it is.

With a regular image you just mark the image and then click to delete, just as you would do with text.

If the image is a table background image you need to right-click the table cell, then select Table Cell Properties and then remove or change the background-image under Background image .

To remove a page background image click File, then Page Setup and remove or replace the image under Background Image.

Embedding

Embedding objects

You can embed videos and other objects in WebCreator.

To embed click the Embed Flash or insert Guestbook button, and select Embed Flash. Insert the Flash code and click OK.

If you can’t program the Flash code yourself, a tip is to upload the video to YouTube. They will then create all the code you need for you. Copy the code and paste it into the Embed Flash window in WebCreator.

To get the embed code out of the gallery you first need to permit sharing. Log in to your Control Panel, click on Gallery and click Edit for the album in question and set sharing to On.

When you have made sure that sharing is enabled in your gallery, enter the album in the gallery so you can see the images inside the album in question.

Click the Embed link and copy the embed code. Click Insert and paste the code into the Embed Flash window in WebCreator.