WebBlender Quickstart Guide

The WebBlender interface:

The Toolbar: contains buttons for the most common functions

The Tool Palette: contains tools for editing and previewing your pages

The Workspace: shows the page you are working on

The Editing Panel:

Options: Displays options for selected objects (such as font styles for

a text box)

Library: Contains folders of buttons, clip art and photos

The Storyboard: Displays thumbnails for each page of your project

Creating a New Page in WebBlender:

Click on the New button on the Toolbar.

Use the Tool Palette tools to create rectangles, text and add pictures.

To create additional pages, click the Pages button on the Toolbar. Then select New Blank Page.

Adding Clip Art:

On the Editing Panel, click the Library tab. Then select the category. You might then need to select a subcategory (Example: Food is the category, fruits would be the subcategory). Then click and drag the appropriate picture onto your page.


Opening pages in WebBlender: You can open pictures so they appear as the background of a page. You can open one picture or all the pictures in a folder. You can bring in images or pictures that were saved in Image Blender or Pixie.

To open pages: Go to the Toolbar. Click the Page button at the top. Then select the appropriate option.

From Image File: One picture

From Folder: Multiple Images

Note: Once you bring pictures in as pages, you will see them in the Storyboard. To move from page to page, click on the page. You can then use the Text tool on the Tool Palette to create text.

Adding Buttons to Pages: You can add navigation buttons to your pages. To add navigation buttons, select the Library tab from the Editing Panel. Then select Buttons.

You will then see several categories of buttons. Click and drag the buttons onto first page.

To make the buttons work, double click on a button to get the green handles. You will now see the tab at the top has switched from Library to Options. Select what you want the button to do. If you want this button on each page at the same location, select the Add to All Pages button.

To Preview your WebBlender Site: To preview your WebBlender site as it would act when published as an html page, click the Preview Mode Tool on the Tool Palette. The buttons will now be active.

Saving your Work: To save your work, go to File>Save As. Give your file a name. It will save as a WebBlender file. It will have a .wbs extension at the end. As a .wbs file, you can open and edit the file in WebBlender as often as you like.

Publishing your Work: You can publish your work as web pages. This process will save your files in html format. To do so, click the Publish button on your Toolbar. You will now be given the option to publish to local or ftp. Choose local. This will save the files to your computer. A save dialog box will appear, give your site a name and save the site. You are done! Once you have saved your site, a folder will be created with the name that you used to save your site. Your files will be located in this file. To launch your new html pages, double click the index.html page from within the folder.

Ryan McNavage

Department of Technology Consulting, January 2006

1