- Page setup
- Controlling your project
- Tables and text boxes
- Guestbook in WebCreator
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.
Web Page Title
The title of your website will be displayed in the browser’s title bar. By default this is your domain name.
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.
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.
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.
Here you can choose a color for your background. When done, click OK.
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.
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.
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.
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.
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:
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.
Note! The Sidebar and Organize button only works if you are working on a project (based on one of One.com’s templates).
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 FileManager.
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.
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.
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.
In order for the changes to take effect, click the OK button.
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.
When adding text to your website, you have a lot of possibilities, resembling those you will find in a normal word processing application.
When formatting text you can choose between some predefined styles, by marking the text and choosing a style in the Style drop down menu.
To change the font, mark the text with the cursor and choose the font from the Font drop down menu.
Setting font size
To change font size, mark the text with the cursor and choose the size from the Size 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.
To highlight text, mark the text with the cursor and choose a color by clicking the Highlight color icon and choosing the color.
This will make the text look like this:
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:
Inserting numbered or bulleted list
To make a numbered list, click the icon in the toolbar.
This will place the number 1. on the work space. Then write some text and press Enter to create the next line.
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:
To increase the indent of your text place the cursor to the left of the text, and click the Increase indent icon.
This will increase the indent. To decrease it again, place the cursor to the left of the text, and click the decrease indent icon.
Subscript and superscript
To make a text subscript, mark it with the cursor and click the Subscript icon.
This will make the text look like this:
To make a text superscript, mark it with the cursor and click the Superscript icon.
This will make the text look like this:
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.
Inserting link to page/file on the server
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...
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.
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.
Inserting link to web page
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.
This will open this dialog:
Type in the URL (e.g. http://www.anotherdomain.com ) to the website and click OK.
Creating sub page and inserting link
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.
This will open a dialog. First, choose the title for your new sub page, by filling in the Web page title field.
Then choose either to make the new page a copy of the current, a blank page, or a blank page with fixed-width layout.
Finally choose the File name for your new page. This has to end with .html or .htm.
Click OK. The new page will then load in a new window.
Removing a link
To remove a link without deleting the text/image, mark the link, click the link icon, and choose Remove link.
The text will not be deleted when removing links.
You have three possibilities, when you want to insert a picture on your web page, through the WebCreator:
Upload and insert image
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:
Image Component for Ilosoft web page Composer
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.
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.
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.
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.
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.
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.
Choose the number of rows and columns with the mouse and click to insert the table.
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.
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.
Deleting rows or columns
To delete a row or a column, right-click inside it, and choose either Delete Row or Delete Column.
To open the advanced table properties, right-click on the table, and choose 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.
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.
Next you can choose to set a margin for your table cells, by writing a number of pixels in the box.
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.
Next choose a background color for the table by clicking the color icon. By default the table is transparent.
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.
Table cell properties
To change properties for a single cell, right-click inside it and chose Table cell properties.
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.
Below choose the text alignment for the cell in both vertical and horizontal direction.
Next, choose a background color for the cell by clicking the color icon. By default the background is the same as the table.
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.
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.
Choose Draw transparent text box to make a text box with a transparent background.
Click and drag to the desired size.
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.
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.
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 settings for your new guestbook and give it a name.
If you want an initial message in your guestbook, you can enter it here. Or check the box for no initial message.
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.
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.
Lock or unlock your guestbook to control if posting should be possible or not.
By selecting a message you can hide it, delete it or edit it.
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.
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.
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.
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.
Embed album from gallery
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.