WebCreator6 Manual

Quick Start Users Manual

Web Creator Pro 6 - Quick start manual

Page 2 / 61

Table of contents

Introduction to Web Creator Pro 6 ................................................................................................. 5

Quick start Guide ............................................................................................................................. 6

Opening a Template .................................................................................................................... 6

Modifying an image ..................................................................................................................... 9

Adding an element to the page ................................................................................................. 10

Modifying the menu .................................................................................................................. 12

Create a link to another page .................................................................................................... 12

Test your site in a browser ........................................................................................................ 15

Introduction to Blocs ................................................................................................................. 15

Using Blocs ................................................................................................................................. 18

Finalizing the project ................................................................................................................. 18

1. H1...H6 Header Tags .......................................................................................................... 18

2. Metatags ............................................................................................................................ 18

3. Google Analytics ................................................................................................................ 18

SiteMap ..................................................................................................................................... 18

Uploading the site ..................................................................................................................... 19

1. Optimise ............................................................................................................................ 19

2. Regenerate ........................................................................................................................ 19

3. Upload ............................................................................................................................... 19

Detailed Interface Presentation .................................................................................................... 19

The Quick access bar ................................................................................................................. 20

The Ribbon................................................................................................................................. 21

File tab ................................................................................................................................... 21

Home tab ............................................................................................................................... 22

Project tab ............................................................................................................................. 23

Page tab ................................................................................................................................. 23

Refresh....................................................................................................................................... 23

Device Detection ....................................................................................................................... 24

Insert tab ............................................................................................................................... 24


Page 3 / 61

Selection tab .......................................................................................................................... 25

Format tab ............................................................................................................................. 26

Web tab ................................................................................................................................. 26

Page weight ............................................................................................................................... 26

Metatags .................................................................................................................................... 27

Optimize, ................................................................................................................................... 27

Tools tab ................................................................................................................................ 27

Help tab ................................................................................................................................. 28

Elements toolbar ....................................................................................................................... 28

Inserting an element ............................................................................................................. 28

Element Properties ................................................................................................................ 29

Element Hierarchy ................................................................................................................. 29

The Common Section ............................................................................................................ 29

The Layout Section ................................................................................................................ 31

Panel .......................................................................................................................................... 31

Popups ....................................................................................................................................... 34

The Social Section .................................................................................................................. 34

The Multimedia Section ........................................................................................................ 35

The Data Section .................................................................................................................... 36

Element List ............................................................................................................................... 37

Elements tab .......................................................................................................................... 39

Blocs tab ................................................................................................................................ 40

The properties toolbar .............................................................................................................. 40

Elements tab .......................................................................................................................... 41

Options tab ............................................................................................................................ 41

Actions tab ............................................................................................................................. 41

Rollover tab ........................................................................................................................... 41

Link tab .................................................................................................................................. 41

Position tab ............................................................................................................................ 41

Properties tab ........................................................................................................................ 42

Container elements: Boxes and Panels ......................................................................................... 42

Containers ................................................................................................................................. 42


Page 4 / 61

Differences between Panels and Boxes .................................................................................... 42

Creating a layout with containers ............................................................................................. 42

Adding elements to a container ................................................................................................ 42

Adding an element to a container ......................................................................................... 42

Adding multiple elements to a container .............................................................................. 43

Blocs .......................................................................................................................................... 44

Box and panel properties .......................................................................................................... 44

Panels ........................................................................................................................................ 44

Boxes ......................................................................................................................................... 45

Boxes ......................................................................................................................................... 45

Alignment and positioning tools ................................................................................................... 46

The grid ...................................................................................................................................... 46

Positioning guides...................................................................................................................... 47

Float and clear behaviours ............................................................................................................ 49

Understanding float................................................................................................................... 50

Positioning restrictions .............................................................................................................. 51

Getting the most out of the float behaviour ............................................................................. 54

Adding a floating element ......................................................................................................... 54

Moving floating elements.......................................................................................................... 55

Uses for the float behaviour ...................................................................................................... 56

The Clear behavior .................................................................................................................... 58

Using groups .................................................................................................................................. 58

Using blocs ..................................................................................................................................... 59

Introduction to blocs ................................................................................................................. 59

Blocs .......................................................................................................................................... 59

Creating a bloc ........................................................................................................................... 59

Reusing a bloc ............................................................................................................................ 61

Precautions for using blocs ....................................................................................................... 61

In summary: ............................................................................................................................... 61

Ideal bloc size ............................................................................................................................ 61

Luminosity and Transparency ....................................................................................................... 62


Page 5 / 61

Introduction to Web Creator Pro 6 Web creator Pro 6 is a powerful application that allows users with little to no computer skills to

create professional looking websites in very little time. It’s so quick; you can measure it in

minutes.

Web Creator was designed to fill the need users had for a simple and powerful website creation

tool. With the average user in mind we set out to empower them by allowing them to let their

creativity flow, free of tedious programming and long-winded mark-up languages.

Little by little, our solution has evolved, closely guided by user feedback and the need to provide

an enthralling end-user experience, all the while maintaining our focus on simplicity.

Web Creator Pro 6 is by far our most advance version ever. It takes into account recent

technological innovations, like the fast rising number of Smartphone and mobile browser users,

the quickly growing social network world, and secured payments through PayPal and makes

them easy to implement. It makes it even easier to display and rearrange them with our brand

new Containers, reposition them effortlessly with our Float options, and dress them up using

tabs and accordions.

Creating a web site is invitingly simple; you can create a web site from scratch, or you can use

one of the many full featured templates if you need some help getting started. Once that is

taken care of, putting your site online requires only the touch of a button.

We invite you to take a look at this starter guide for Web Creator Pro 6 which will help you get

familiar with modifying various elements, creating links and managing pages. In it you will create

your first 2 pages and use powerful organisation tools like the Bloc, Containers and the Float

option. At the end we’ll show you how to get the most out your site and put it online.

Throughout this guide, you will see this symbol.

It indicates a new feature or improvement unique to Web Creator Pro 6.


Page 6 / 61

Quick start Guide To begin, let’s take a look at our virtual canvas.

The Detailed Interface Presentation will give you a full explanation of everything seen above.

Opening a Template

Open Web Creator Pro 6 if you haven’t already done so, travel to the File tab and select New

Project. A tip window will appear, detailing the use of Blocs and Templates. After reading it,

close it and you will be presented with the Site creation wizard loaded with templates for Web

Creator Pro 6.


Page 7 / 61

The wizard offers 8 templates containing all the elements essential to a complete website, as

well as the option to start with a blank page.

At the top of the window there are four tabs: Style, Page, Themes, and Color/Preview. We’ll get

to the other tabs in a moment, but for now let’s focus on this one.

Just below there are three radio buttons labelled “Version 6”, “Version 5” and “Previous

versions”. Clicking on them will grant you access to different templates.

Meanwhile, brand new functions have been added to Web Creator Pro 6, so they aren’t

included in the older templates. We would recommend using them after having mastered the

core concepts of using Web creator Pro 6 so that you can truly make the most out of these

templates.

Return to the version 6 radio button and scroll down using the bar on the right.

For our example, we will be using Style 5 from Version 6. Select it and press the Next button or

double click the template. You should now be in the Page tab.

There are a few fields located at the top of the window. Page Name pertains to the “internal”

name of that page, the file name essentially. Title on the other hand, is what will show in the

topmost position of a web browser. With the Language field, you have the option to change the

language of your site, by default it is the same as the one on your operating system.


Page 8 / 61

In the main area you have a choice between a blank page, and various page Layouts.

Templates A and B are fairly simple and contain but a few empty blocs. The Home and

Presentation pages are for the most part comprised of text and are more suited for business

oriented sites. Meanwhile, the Product and Products pages are more detailed with a picture

bloc and combination blocs containing text and a photo, lending itself more to displaying

galleries and lists requiring uniform structuring.

The name of the project and its folder on disk are at the foot of the window. If you let the

mouse hover about the folder field, you can see the full path, which by default is Web Creator.

The web creator folder is located in My Documents on your Windows platform, but you can

change this if you would prefer to keep your project elsewhere.

For the purposes of this walkthrough, choose the Home page.

You will then be taken to the Themes page, which should be empty. This tab has the function of

adding banners or backgrounds to pages, but has been disabled. New options like image

luminosity and transparency allow for stunning effects that were not available before (See

Luminosity and Transparency chapter).

Move on to the next and final tab: Color/Preview. From here you can change the palette, which

is the color pool that will be applied across all your pages. The Style field on the top left depicts

the general tone your page elements will adopt. You can open up the list in the style field,

allowing you to choose from over 170 color combinations. It is key to choose a palette that

works well with the kind of site your creating, and that it reflects the idea behind it.

For our example we chose the Honolulu Style.

Below, you can see the pallet’s filename as well as the colors that make up the pallet. It is

important that you know that you can modify the colors, save, duplicate and delete any given

pallet using the buttons located on the right of the color list.

Finalize your choices by hitting the Finish button. A small dialog box showing a progress bar will

pop up momentarily while your first page is stitched together.


Page 9 / 61

Modifying an image

On the top left there is a LOGO image, if you click on it a selection border will appear allowing

you to resize it on one of four corners. This border lets you know that the object has the focus,

and every element in Web creator Pro 6 can be manipulated in this manner.

If you look on the right side of your interface, you should see the words LogoEdit. That is the

name of the element, and this pane will always show you what element is selected. Beneath this

lies tabs filled with options to modify the element. When you select an element, the Elements

tab is always what will open first. In the topmost part of this tab we find a File field with 4 icons

next to it. You gain access to the image library packaged with Web Creator Pro 6. The second

will open a dialog box which will ask you to browse to an image file located on your PC and

replace the logo image. If you don’t have a logo ready, try one from the image library.


Page 10 / 61

Under the File field, there are options for the picture’s behaviour and attributes.

By default, the Keep aspect ratio checkbox is checked. This allows you to resize images while

maintaining the original look and proportions. However, there are instances where you may

wish to stretch images and this can be accomplished by unchecking the box. With this option

turned off, new controls will appear allowing you to resize freely.

Adding an element to the page

Let’s say we want to add a slogan next to our logo, it’s as easy as can be. On the far left of Web

Creator Pro 6, is the Elements Toolbar. Containing virtually all the elements that can be inserted

into a page, it is always on hand. More context specific elements can be found in the Insert tab

via the Ribbon. From the ribbon, the Common elements are available here as well, but library

elements are separated into 4 easy to access categories: Images, Video, Sound and Flash

animations.

Let’s turn our focus back to the Elements toolbar. Click on the Text button located in the

Common section. A transparent text area will insert itself into the center of the page with the

caret in position, awaiting your input.

Once you have entered some text, it is easy to customize it; select some text and from the

Home tab in the ribbon, you can change the font, the font size, the font weight, its alignment, its

indentation, even add a link. Let’s go with Brush Script MT and a 40 point font for maximum

legibility.


Page 11 / 61

On the rightmost region of the Home tab, there is a button to remove formatting and return

your text to its default settings should you need it.

Now that you’re done modifying the text, resize the element to fit the text using the green

handles. You can click the Text element again if you need to edit its contents.

Introduction to Container elements

Let’s place our text element next to the logo by clicking on its border and dragging

it close by. The surrounding area should line itself green indicating that you are placing an

element in a Container. Behind the scenes you are actually adding your Text element to an

element called a Panel. Panels, like Boxes, are a special class of elements called

Parents/Containers. For a more detailed explanation about this, head to the Container

Elements: Boxes and Panels chapter.

Introduction to the Float behaviour

Floating is an important function behind the power of Web Creator Pro 6, that

when used in tandem with Containers, can really boost productivity. Floating has to do with the

automatic placement of elements in a web page and is closely linked with CSS (Cascading Style

Sheets for web pages).

Select your logo and try to move it a tiny bit to the right (straight across so as to not disrupt

other elements). Notice how it pops back into place? Having moved the text box, you know the

text element does not behave like this.

This is because the two have different Behaviours. Float, Float Left to be perfectly accurate,

pushes the logo to the up and to the left in whatever container holds it. Our Text element is not

bound to this rule because it does not have this behaviour enabled.

Select the Text element and head to the Position tab and turn on the Float Left Behaviour area

at the bottom. Your Text element will position itself right up against the Logo. Should you try

and move the Text element to the right, it will return to its place next to the logo.

This kind of functionality when used correctly can cut down editing time substantially. With that

in mind, we highly recommend reading the chapter Float and Clear Behaviours to gain a better

understanding of their use and connection with Blocs and Containers.


Page 12 / 61

Modifying the menu

There is a menu just below the logo with entries written Menu1, Menu2, Menu3, etc. Select the

menu by clicking on it, and then travel to the Properties Toolbar on the lower right. Here you

will see the various headings the Menu contains. If you click on one of the headings, you will be

given a space to change the title. Say we change it to “Presentation”, a sub menu will appear

beneath it titled New. Click on it and change it to “Our society” and society and so on. Click on

Menu 2 and change it to Products, make some sub menus as well to familiarize yourself with

menu creation. For deeper customization, there is a crayon icon next to the Visual Style that can

open a dialog filled with parameters to modify both the Main menu and the sub menus.

Create a link to another page

Once you choose the menu heading text, Products for example, beneath the text field there is

another field for links. Should you click on the crayon icon next to this field; the link creation

dialog box will appear.

Normally, you would fill in a description as a reminder to yourself of what this link points to,

then choose one of the various link options according to your needs. Go ahead and choose the

first option from the Create a Link to section: A new page or an existing page.


Page 13 / 61

Since you do not yet have a page other than the Home page, create one on the fly by clicking

the Create a new page Button. You’ll find yourself back at the Page tab from when you created

the project, presented with pages matching your theme. Go ahead and choose the Products

type page, confirm the Theme and Color/Preview pages and click Finish. You will be brought

back to the page selector where you can now select your freshly created page.


Page 14 / 61

After pressing Ok the name of your page will appear in the Link dialog box’s link field.

Press Ok and you will be back at the editor.


Page 15 / 61

Test your site in a browser

So you’ve already learned how to insert and modify Elements, Menus, Links and Pages. You

must want to test it all out!?

Simple!

Head to the Web tab located in the ribbon, browsers that are on your PC will be in the first

section. Web Creator Pro 6 automatically adds Internet Explorer, Mozilla Firefox, Google

Chrome, Opera and Safari to the browser section. You will be asked to save your work, which

you should in order to see any changes that have been made, after which your browser of

choice will proceed to load your page.

Introduction to Blocs

If you head to the Products page via the link you created in the menu, you will

notice the stock Logo is there and not the one you chose. It would be great to have the same

logo on each page, to do this fast and efficiently you’re going to want to know about Blocs.

We saw before that our logo image was actually a part of a Container called a Panel. Just above

the Properties toolbar on the rightmost part of the interface, you will find the elements list. This

list contains every element contained in a page placed in a tree structure that shows the

relationship elements hold with each other as well as the order in which they were created.

Resize the area so that you can clearly see the first 5 elements it holds like so:


Page 16 / 61

On top you can see the first Panel we mentioned called PanelHeader, which contains the Logo

the slogan text and another image. Just beneath that panel is another called PanelMenu,

containing only the menu.

Click on PanelHeader as seen above to highlight it. Notice how it also selects the item in the

page. Seeing as you have selected a panel with Child elements inside it, they are inherently

selected as well even though it’s not visible.

Click on the blocs tab above the elements list. A list of pre-packaged Blocs will appear, these can

be dragged onto your page to make adding new content a snap. For now go to Custom which

will be empty.


Page 17 / 61

But let’s change that shall we? Seeing as the panel in your editor is still selected, clicking on the

+ symbol will create a new bloc called Item 1. A thumbnail showing what your bloc is comprised

of will be generated containing: the panel, the logo, the text, and the image.


Page 18 / 61

Using Blocs

Open the Page Tab in the ribbon. Click on the Manager icon in the Pages section. A window will

appear showing the two pages you have created. Here you will see some icons on the right. The

X icon allows you to delete pages while the third icon will duplicate pages and the second will

rename pages. We are going to use the first icon which creates pages (creating a new page can

also be done using the Create page button from the pages Section). Once the wizard shows up,

keep the “empty page” choice and click on the Finish Button.

With the Blocs pane still open, choose Item 1 from the Manager section and press Add to page.

The bloc will automatically place itself in the top left corner of the page. The page itself is a

Container of the highest order and the inserted Panel has the Float behaviour switched on,

causing it to find position it’s automatically.

Save your project using the diskette icon in the Quick access bar located at the top left of the

interface. The quick access bar also contains the browser list used for testing and the undo icon.

Finalizing the project

Once you have created all your pages, you will want to make sure your site is easily found in

search results. Web creator Pro 6 has various tools that make this easy.

1. H1...H6 Header Tags, can be used during web site creation. They are available to you

from the Elements toolbar, in the layout section. This means they can be customized

just like any other element from the Properties toolbar, but also from the Web tab

under the Referencing section

From the Web>Referencing area there are three other tools at your disposal:

2. Metatags; Invisible on your site and integrated into the code of your page/site, these

are also Search Engine Optimization tags.

3. Google Analytics: this is a Google specific tool which is also tag based. Web creator can

generate these for you.

SiteMap: the Info generated is based on the structure, and predicted update schedules

that search engines will fetch from your site.

More information on this subject can be found in the chapter covering “The Web tab”


Page 19 / 61

Uploading the site

In the Web output section of the Web tab, there are three useful tools for the steps leading up

to sending your site to the server.

1. Optimise: this tool will scan through all the files on your site and create a list containing

pages with dead links, unused elements etc.... You can then decide whether to keep

these files or remove them. Be careful with this, as some pages may simply need to be

“repaired” and are not necessarily useless. It is unlikely that you will want to rid yourself

of all the pages shown as it is much worse to accidently delete a needed page than to

keep an unwanted one.

2. Regenerate: this will do the cleanup work of your entire site after having done an

Optimisation. After clicking, you need only to sit back and relax as your site is scrubbed

of imperfections.

3. Upload: this will put your site out on the World Wide Web. You will need to fill in the

host address, log in name and password.

A useful option available to you is the ability to set a filter that will only send files

modified starting from a certain date. This can greatly speed up a site upload even on

the fastest of connections, by only sending relevantly new things the server. This tool is

stark in comparison to our feature rich site upload software FTP Site Manager, which is

reminiscent of Windows Explorer’s due to its ability to display what is currently on your

server. The FTP Site Manager also allows drag and drop operations and integrates itself

directly info Web Creator’s interface.

Detailed Interface Presentation Let’s take an in-depth look at the main components Web creator Pro 6 has to offer. In order to

keep this brief, we will not talk about the more straightforward elements such as the Image,

Text or Button elements because these will seem easy to use almost immediately.


Page 20 / 61

If you have had the chance to get familiar with Microsoft’s more recent versions of Office, you

are going to feel right at home with Web Creator Pro 6 as they share very similar organization

principles.

The Quick access bar

The quick access bar on the top left groups together oft used functions: (from left

to right) Save, Undo, Project Page list and several available Browsers.

The Page list icon will allow you to move to another page found in the displayed list in a single

click.

Browsers installed on your PC populate the right side of the Quick access bar. Web Creator Pro 6

will automatically add internet Explorer, Mozilla Firefox, Google Chrome, Opera and Safari to

this list so that you can quickly test out your web page in a selected browser. If you use a

browser that is not mentioned above, you can add it manually by going to the

Web>Browsers>Add located in the Ribbon.


Page 21 / 61

The Ribbon

The always available Ribbon is located at the top, just below the Quick access bar.

The ribbon replaces the original menu, making its many options available to you across the

length of the ribbon. Options are thematically grouped using pictures and text to make

navigating the menu simple.

If you are not familiar with Microsoft’s recent Office suites, this menu structure may unhinge

you at first, but once you poke around a bit, finding “that one thing” you are looking for

becomes effortless.

On the far right there are 4 buttons. The leftmost button collapses the Ribbon to give more

space. Starting off as an upward arrow, it becomes a downward arrow to expand the collapsed

Ribbon.

The other three buttons are Project focused. The second puts the project in a windowed mode,

and the third will close the project but will ask you to save if necessary.

Let’s move on to the various tabs found in the Ribbon.

File tab

Here you will find options that help you manage projects; Open project, New project, Close,

Save, Save as, Print and Exit.


Page 22 / 61

Open gives you two ways to proceed

One option is to load a recently opened project. Note: this list is updated only after having

closed Web Creator Pro 6.

Another way to open projects is to use the Browse functionality. This will show a folder tree, the

“Web creator” project folder is the default folder: “C:/Users/Username/Documents/Web

creator”.

Home tab

This is the tab you will be working in most of the time


Page 23 / 61

It contains functions pertaining to editing; Cancel, Cut, Copy, Paste, Select and Delete.

The other functions handle The Font, Page Formatting, Alignment, Bulleted and Numerical

Lists, Indentation and Link management. The last function completely Strips text formatting,

returning it to plain unedited text.

Project tab

This tab pertains to the current project as a whole.

The first section; Browser Alignment, allows you to set which area of the browser your web site

will occupy. Your site can maintain a Left, Right or Centered position in any given browser.

The Homepage section defines the first page web surfers see once they reach your site.

Page tab

This tab pertains to the current page being edited.

The first section, Pages allows you to change pages, either by creating a new one or by switching

to one you have already created.

The third icon, Manager , opens a list of the pages available within the project with the option to

show or hide page previews and perform operations such as changing page, renaming, deleting,

duplicate, and creating a page.

The Current section contains a Properties icon that will allow you to modify options linked to

the current page from the Properties toolbar. This comes in handy when your page is filled with

elements that obscure the background, making it difficult to gain access to its properties.

Refresh redraws the page and its elements from stored memory. Reload on the other hand

locates the elements from your hard drive to redraw the page, which will cause Web Creator to

ask you to save before-hand.

These tools are very useful to remove stray “artefacts” that may appear after numerous edits to

the open page and on slower computers.


Page 24 / 61

Device Detection allows you to easily choose how the page is displayed should it be visited by a

mobile device. This will require you to create a mobile version of said page in advance and select

it as the preferred display option for mobile browsers.

Setting up a Password will prevent others from being able to access this page during your

testing phase.

The Colors section allows you to change the current color pallet by choosing one from the list.

Element that use colors from the pallet will change color according to what you chose.

The Configure Colors button allows you to modify color elements in the Template use in the

page

Insert tab

This tab groups all the available elements from Web Creator in one place.


Page 25 / 61

The Common section contains the same elements found in the always available Elements

toolbar and is categorized in the same way.

The Library section conveniently allows you to choose Multimedia files provided by Web

Creator Pro 6 directly from 4 categories: Images, Videos, Sound and Flash animations

Selection tab

As the name implies, these functions have to do with elements that are selected in the page.


Page 26 / 61

The Actions and Z-Order sections are pretty straight forward, and we have already covered

Links.

The Group section has functions that will allow you to add or remove elements from a Group or

create an entirely new Group with the hopes of adding elements to it.

The Parent section allows you to transfer selected elements into a Container type element

available on the page or create a Container (Panel or Box) element for that immediate purpose.

Containers will be looked at in greater depth in the Container Elements: Boxes and Panels.

Format tab

This tab gives you a plethora of options for aligning one or more elements and is closely linked

to the Parent/Container concept (Boxes, Panels, or Page) in terms of behaviour

For a more in-depth explanation of this, it is available in the Alignment and Positioning

paragraph.

Web tab

This tab contains all the functions linked to finalizing your site and putting it online.

The first section, Browsers, displays the navigators installed on your machine and can be used to

see what your site will look like through the eyes of a visitor.

The icons located in the rightmost part of this section allow you to add remove or modify a

reference to a browser that is installed on your computer but that was not recognized by Web

Creator Pro 6

In the Page section, Custom Code will allow you to place Javascript or HTML code in the current

web page with a text editor.

Page weight calculates how every single element in your web page will affect the load time of

your page and informs you how long it would take a user on a 256 kilobits/second connection to

download and view your page.


Page 27 / 61

In the Referencing section, four tools are made available to you to help make your site stand out

in search engine results.

Metatags, provide descriptions and keywords to search engines. You can create the tags

yourself, or simply feed the information to Web Creator and have it create the tags for you.

With the Headers icon you can help search engines identify important information on your web

pages. You can insert these into your page using the ribbon or using the Elements toolbar. For

more information on this, consult the chapter titled The Layout section.

By clicking on Google Analytics you can define keywords used by Google’s keyword search

engine.

The Web Output section is all about the final steps to uploading your site.

Optimize, scans your whole site for components that are no longer in use. Regenerate will then

rebuild your site minus all the accumulated clutter. Upload will then send your site the server

where it will be visible to the whole world. You will of course need to provide Web Creator Pro 6

with all the necessary credentials to connect to the server and transfer your files. Keep in mind

that the credentials entered are linked to the project loaded, this makes it easy to work on

multiple servers with corresponding projects.

Tools tab

This tab gives you access to additional resources that come with Web Creator Pro 6

The first section has resources coming straight from LMSOFT.

The second section contains spelling and grammar checkers created by Druid Informatique

The Grid section provides you with methods to simplify the positioning of in-page elements.

And lastly, the Toolbar section allows you to hide and show the Elements box on the left. This is

useful for when you have already placed a large majority of the elements you will need on the

page and want more space to work with. The Reset to default icon will return your Web Creator

Pro 6 interface back to factory settings.


Page 28 / 61

Help tab

The functions in this tab a fairly straight for. Mind you, you will need an internet connection to

use most of them.

Elements toolbar

This toolbar gives you access to the main elements Web Creator puts at your

disposal for the creation of your site. We call them elements because they are the foundations

of each page. Some are for displaying information, others collect it, and all are customizable.

The elements toolbar has been divided into 5 sections to make it easier to place yourself:

Common Layout, social, Multimedia, Data.

Each section can be collapsed and expanded by using the arrows on the right of its name. a

scroll bar is available should the lower elements be obscured or if your screen resolution is too

low.

Inserting an element

To insert an element on the current page simply click on the corresponding icon/name, after

which it will appear in the center of the page on the top most layer.

To avoid any faux-pas, inserting elements into the page will never disrupt selected elements on

the page. Grouping and Parenting will never occur without you choosing to do so either. To find

out more about elements, you can take a look at the following chapters: Container Elements:

Boxes and Panels, Creating and using Blocs, and Groups.


Page 29 / 61

Element Properties

When you add an element to the page the Properties toolbar will have opened the elements

tab to allow the immediate customization of the element.

Every element you add to the page can be customized in terms of color, shape, dimensions.

Some have much deeper options to set like the PayPal, Blog and Form elements.

All of these settings can be accessed from the Properties toolbar on the right hand side of the

interface. Find out more in the Properties toolbar chapter.

Element Hierarchy

We mentioned how every element, upon creation, is placed in the center of the page and is

independent of every other element (except the page of course, because it is a part of the

page). When added to the page, elements enter a hierarchical order determined by the order in

which they were created. From that point on elements can be modified by using Containers,

Blocs and Groups.

This hierarchical relationship between elements is see in the Elements list that we will cover in

the chapter The Elements List

Right now we would like to cover the various sections of the Elements toolbar, as well as cover

their underlying functions. Some of the elements are self-explanatory so going into to great

detail may not be the best approach for all of them. We will however, make sure that you fully

understand how to use all of them.

The Common Section

Text Element

From the moment you insert the text element you can immediately start typing text, modifying

its appearance and adding partial or full text links(Link button on the Ribbon in the Home

tab),etc..

Hyperlinks are very easily configured via the Link button in the Ribbon.

Background transparency and luminosity can be applied to the text from amazing layered visual

effects (Properties toolbar>Elements tab> Background color).


Page 30 / 61

Image Element

Inserting an Image creates a rectangle with a placeholder image. To put change it to an image of

your liking simply use the now open elements tab of the Properties toolbar and use one of the 4

icons provided next to the text field. The first icon will let you access images from the WC6

library. The second will allow you browse to an image on your PC. The third will allow you to link

to an image located on a website (You will need to know the full path to the image in order for

this to work).

Expand image on click is a very useful space saving feature. If you want to place a

very large image on you page you can simply size it down to fit comfortably on you page and

give your visitors the option to view it in its full size by clicking on it (you can even select how big

it gets).


Page 31 / 61

Button Element

Once you insert a button, you can double click on it to change the text it displays, or do it in the

text field provided in the Properties toolbar. In the elements tab you can change the appearance

of the various states the button goes through; Raised, Pressed, and Rollover. You can also see a

preview of what they look like at the bottom.

Menu Element

Upon adding a menu, a square icon will appear symbolising a menu. To fill your menu, head to

the properties toolbar and go to the Items area and click Add. The focus will shift to the text

field where you can add the title for that section. You can add sub menus following the same

method and add links using the field below the title field.

The Layout Section

Panel and Box Elements

Panel and Box elements have the special designation: Container. They are

designed to house all other forms of elements, even other containers.

A container object exists as a Parent: when other elements are placed within a container, other

elements become its child/children. This relationship heavily influences behaviour because

whenever the parent element is moved, so are the child elements. This goes for deletion as

well, if you delete a panel with buttons in it, the buttons will be lost. The page itself is a

container actually, parent to all the elements you place in it. Should you delete the page,

everything is deleted with it.


Page 32 / 61

The main difference between boxes and panels is that panels only really maintain an

organization role, while boxes are used for presentation as well. You will notice how deeply

customizable a box is in comparison to its panel counterpart.

Each of these elements requires an in depth look and we encourage you to find out more at the

Container Elements: Boxes and Panels chapter, which covers these extensively.

IFrame Element

The IFrame element allows you to include an entire webpage within your page, be

it your own or one found on the web. You can change the size and color of the viewport as well

as its name. When you add it to the page you will see a place holder image representing where

the page will display as well as it current dimensions. You can choose what page will display

using the icons found in the elements tab of the properties toolbar.

Accordion Element

The Accordion element can be compared to an animated stacked menu. When you

click on a section it expands, displaying whatever you included for that section. You can change

the color of the accordions multiple states just like the button element

In WC6, you must prepare pages beforehand and assign them to a section of your choosing.

Tab Element

The Tab element gives you the opportunity to insert multiple web pages in an area,

and access them with the menu-like buttons provided. The pages can be your own or ones you

reference from a web site online.

The size of the pages shown will remain normal and a scroll bar will be provided in order to

navigate the pages.


Page 33 / 61

Some differences between the Accordion and the Tab are that the Accordion only displays

internal pages and the menu is stacked and animated.

Label(H1…H6) Elements

The Label(H1…H6) lets you insert referencing tags from H1 to H6.

They are oft used to define the organisation of your site and represent the importance of certain

pieces of information you provide on a page. From most important to least important (1 to 6)

they tell search engines about key information about you page.

As a result they are useful to make sure that search engines do not overlook important

information on your site when a query is made by users seeking relevant information. Therefore

these can greatly improve your websites presence on the web.

These are quite different from Text elements and should be used with care.

Once added to your page, you can choose the level of importance the following block of text will

hold in the properties toolbar. Each header has a predefined style, color, and font, but you can

change it to better match your pages. On a project wide level, you can change all of the headers’

styles by using the Header icon in the Web tab of the Ribbon. If you only want to change it for

the current page, use the current page section to make your modifications.


Page 34 / 61

Popup Element

Popups will enable you to show another webpage above that of your own. The

popup must be triggered by an event in order to become visible. When the popup activates, the

page it was on will turn dark to shift the users focus to the newly opened page.

The Social Section

Social networks Element

The Social networks element will allow you to quickly integrate links to a

predefined list of popular social sites: Facebook, Twitter, Google+, Delicious, Reddit,

Stumbleupon, Tumblr, LinkedIN and Digg. You can make a few stylistic changes to this element

to better mesh with your page.

Blog Element

Once placed in your page, click the New button in the Properties toolbar and the default name

Blog will appear.

If you wish to receive the responses from visitors, you will need to provide and email address

from which you can receive them.

In the area provided below you can write your very first entry by using the + icon on the right.

The date will show with “New entry” just beneath it. In the fields that follow, you can add links

to other page articles or pages in your project. Every time you add and entry the time will reflect

when it was created for your readers to see. You can modify your text using the four icons

located just above the text area.


Page 35 / 61

The Multimedia Section

Gallery Element

The gallery element allows you to display a collection of images on your web page. The initial

view can either be a mosaic showing the collection in small thumbnails, or a slide show showing

one after the other. Mind you this is only affects how it is displayed initially and the mosaic

setting will revert to a slideshow once a photo is selected by a visitor.

Sound and video elements

The sound and video elements work almost exactly the same, each will display a Player exactly

as it will appear in a browser. You can preview the video or sound you choose directly from the

Properties toolbar. Many of the popular formats are supported and will give you the option of

choosing a player to play them with.

Google map element

Thanks to the Google map element, you can add an interactive map to your web

site of any given address. By simply adding an address in the Elements tab of the Properties

toolbar, you are given access to the Map, Satellite and Street views of the area.


Page 36 / 61

The Data Section

PayPal Element

The PayPal element allows you to insert a link towards a PayPal account to set up

an online Secured payment. In the Element Tab of the properties toolbar you can choose the

type of link: Add to cart, View Cart and Buy now. You can then link it to the PayPal account, set

the price and choose if the selected item can be purchased in multiples.

Web Element

For people who may have some experience with coding and scripting, the Web element will

allow the insertion of Javascript, PHP, and other web based programming languages. We cannot

guaranty the result obtained using this object as it will only work as good as the code being put

in it, the browser that reads it, and the server that handles it. So before using it we would ask

you to make sure that you are well informed and that you perform tests. This element is closely

tied to the Custom code function in the Page section of the Web tab on the Ribbon.

Google Translate Element

The Google translate element gives your users the chance to instantly see your

website in any language of their choosing. You need only add the element to your page and

visitors can choose the langue they want from the dropdown list.

Form and Form Field Elements

The Form and Form field elements must work in tandem. They allow you to use an often

sought-after service that we, LMSOFT, provide to you free of charge. Provided you supply a

recipient address, the form you create will collect information that you visitors can send in. The

data collected will be processed on our servers and sent to you so that you may do whatever

you wish with it.

You start by creating a Form and selecting an Action type from the Properties toolbar. The first

two actions result in an email being sent to you with the collected info, however, users will

greatly prefer the first selection as they will have to do less work and it will not interrupt their

browsing.

The third option is to send the data to a web page, which will then parse the information using

scripts or server-side code (you would be responsible for this). Adding information to a database

is one of the reasons this option is very useful.

With the fourth option, the information is send to a Javascript function you created either in a

Web Element (seen before) or in the Custom code area located in the web tab of the Ribbon.


Page 37 / 61

Once the form is submitted, the Javascript function will be called with whichever information

you decide to give it.

Once the form is created you will need to create inputs using the Form field element. Upon

insertion, it will take on the appearance of a white text field but can be changed to one of

several other Types of inputs. Makes sure to try them all out to see what they have to offer.

Counter Element

The Counter element allows you to tally how many visitors have been to your page. As many

different counters exist, you will need to fill this element with code. You can write the code

yourself if you are familiar enough with it, but there are many widely available snippets of

Javascript code on the internet that are ready for use.

Element List

The Elements list is located on the rightmost part of the interface just above the

style normal bar.


Page 38 / 61

This list can be detached at any time. In order to do so, simply double-click the bar located

above and you'll be able to move it as you like. To put it back in its original position, double-click

the top bar again. The Elements list holds two tabs: Elements and Blocs.


Page 39 / 61

Elements tab

Inside Elements, you will find a list of every element contained in the current page

organized into a tree structure. The structure illustrates their respective place in terms of order,

creation, the relations and dependencies they hold with other elements, and whether or not

they belong to or hold other elements(this topic will be covered in the chapter Container

elements: Boxes and Panels).

By using the icons placed next to each elements name, you can hide or show elements as well as

collapse or expand the contents of the Container.

Searching for an element

The Search area will allow you to easily find an element based on its name or even part of its

name. By clicking on the arrow, you will cycle through the results and they will be highlighted in

red in the elements list as well and selected on the page.

Changing the order of elements

Just on the right of the search function, there is a label written Z- Order followed by two vertical

arrows. This function concerns the order of the element in the page. Elements are ranked by

order of creation by default, and may change ranking if added to a parent (as items in the parent

may have been created before the element in question). The vertical arrows provided allow you

to change the Z-order of an element in the page.

Displaying elements and groups

Above the list, there is a drop box with the words hierarchical view of the page elements. If you

click on it, you can choose the option to view element groups and their contents.

Searching for groups


Page 40 / 61

Just like elements, the search field allows you to easily Search for groups based on their name or

part of their name. By clicking on the arrow, you will cycle through the results and they will be

highlighted in red in the elements list as well as selected on the page.

Blocs tab

By clicking on the bloc tab, a new area will appear with two new tabs titled: Library

and Custom.

A drop-down menu located inside of the Library tab, will allow you to select blocs from different

templates. The Custom tab will allow you to store blocs that you will undoubtedly create. For

more information on Blocs, please read the chapter in titled Creating and using blocs.

The properties toolbar


Page 41 / 61

The Properties toolbar regroups multiple tabs, all of which pertain to the currently

selected item.

Thanks to the pin icon located on the top right, you can undock the Properties toolbar and

around freely. You can even close it using the cross on icon. Once closed, a simple title bar

labelled Properties will be placed at the bottom of the interface which you can use to display

the Properties bar.

Elements tab

Depending on the element selected, you'll find tools to modify elements ranging from changing

their color to inserting pages.

Options tab

In this tab you can rename the selected element. For an image you can declare an “alt” text,

which is used by search engines to replace a missing image or for users who have disabled

images in their browser. You're even able to change the behaviour of elements upon page load,

appearance affects for example.

Actions tab

This tab will allow you to add an element of interactivity to your elements. It will allow you to

track mouse clicks as well as the mouse entering or leaving an element. On this page you can

choose a host of elements to be linked to these actions.

Rollover tab

This tab pertains only to the mouse crossing over the selected element. However the actions of

this event can be applied to other elements in the page. Say you take a simple button and let it

be invisible when the page loads, you can make it appear once the mouse hovers over a certain

element in the page. You can even do this with a multimedia element, making it play only once

the rollover has occurred.

Link tab

The Link tab is as simple as it sounds, it will allow you to link towards pages on the Internet or

pages within your project. There are also other options you can tweak such as automatic

redirection and where the link will open.

Position tab

This tab regroups all the information on an element concerning its position in the page and its

size. This is also where you would go to set the Behaviour for Floating and Clear (see chapter

Float and Clear Behaviours).


Page 42 / 61

Properties tab

This last tab regroups all the properties of the other patents, only categorized in a list.

Container elements: Boxes and Panels

Web Creator Pro 6 introduces a new type of element which, like a page, is a

Container: the Box and Panel elements.

Containers were designed specifically to hold common elements and are used exactly as a

physical box would: any element put inside becomes a sub element. Therefore once you move

the container, you move what's inside of it.

Thanks to these containers, you can very easily create templates for pages by combining a series

of containers. You can also assemble complex layouts and keep a more homogenous look.

Differences between Panels and Boxes

The main difference between boxes and panels is that panels only really maintain an

organizational role, while boxes are used for presentation as well. You will notice how deeply

customizable a box is in comparison to its panel counterpart.

Essentially whenever you need an invisible box purely for organizational purposes, you would

use a Panel.

If the Container will also need to be graphically appealing in terms of form, color, border, a Box

would be more appropriate. We will cover the customization options for a Box further down the

line.

Next you will see that both objects work almost the same.

Creating a layout with containers

You can find these elements inside of the Layout section of the Elements Toolbar under Panel

and Box.

Click on one of the elements will place one in the center of the page. Boxes will appear in blue

and panels appear transparent with a dotted border (the border will not be visible in a browser).

Adding elements to a container

Adding an element to a container

So as not to confuse anyone, there is no way to create an element directly in a container.


Page 43 / 61

Start by creating a container by going to the Layout section in the Elements Bar. Choose a Panel

or a Box and it will center itself in the page.

Now create an element, let's choose an image by clicking on the icon located in the Common

elements section of the Elements Toolbar. This will appear in the center of the page as well.

If you select the Panel and try moving it, the Image does not follow the panel; this is because

elements are created independent of other elements by default. This prevents the accidental

adding of elements to containers found in the center of the page.

Try doing this: choose the element and then place it on top of the panel. As soon as the entire

element is within the confines of the panel, the panel’s border will become purple. This

indicates that the panel has become the Parent of the element placed inside, and you can now

release the element. If you were to try to move the panel again, the element will move with.

Another way to place an element inside of a container is to right-click on the element to open

the Context menu. Once the menu is open simply choose Add to parent and select the name of

the container.

The element will immediately position itself in the top left of the container.

Adding multiple elements to a container

There are many ways to go about adding multiple elements to a container.


Page 44 / 61

Once the container has been created, the simplest way to add multiple elements to it would be

to select the different elements and open the context menu using the right click of your mouse.

Once the menu is open, select add to parent can then choose the container you want. The

elements will then place themselves in the top left of the parent container.

Another way would be to drag and drop the selected elements into the container you want to

house them in. Once the border of the parent becomes purple, you know that the elements

have all been accepted into the container.

A longer way consists of dragging and dropping each element over one by one.

Select the container by clicking on it or by selecting it from the Elements List. If you move it you

will notice that the elements inside of it move at the same time. If this does not happen then

one or more elements were either not selected when you performed the drag or simply did not

make it into the container. Simply press undo, and try the operation again.

Using the containers provided to you in conjunction with other components available to you

through a Web Creator Pro 6, it is very easy to put together multiple pages or projects based on

the same template using our newest feature: the Bloc.

Blocs are also organizational components, but these are used to copy containers and their

underlying elements for later use. This way you can copy multiple containers and transport

them to another page under the guise of blocs. We will speak more about this in the chapter

titled Creating and using blocs.

Box and panel properties

Like we said before, the main difference between Boxes and Panels are a matter of appearance.

They're different properties are customizable from the Elements Tab located in the Properties

Toolbar.

Panels have only rudimentary customization options; you can only modify the color

transparency and luminosity by clicking on the field next to the Color label.


Page 45 / 61

Boxes on the other hand are heavily customized from the moment they are created; they have

rounded corners, a coloured border, a drop shadow, and a background color. Meanwhile,

Panels are initially transparent and can only be assigned one background color.

Boxes can also be given a header and a footer, each with their own color or even transparent.

This functionality allows you to place text on it or show underlying elements.

Here are a couple examples of rounded corners, headers, footers, border widths, and gradients

and transparencies.


Page 46 / 61

Alignment and positioning tools The aligning, positioning and resizing of elements in Web Creator Pro 6 has become extremely

efficient.

1) A fully customizable grid tool is available in the Tools tab of the Ribbon.

2) Guides appear for positioning and resizing operations.

3) A multitude of options available via the format tab.

The grid

All of the settings are available through the Tools tab.

From here you can completely customize how the grid works by default in Web Creator: you can

make it Visible or non-visible, Magnetic or non-magnetic, change the color of the alignment grid

using the Color selection tool, as well as the spacing of the grid (both the Height and the Width).


Page 47 / 61

Positioning guides

As soon as you begin to move an element, Web Creator Pro 6 will display

guidelines which will allow you to align the selected element relative to other elements on the

page. This can be extremely useful in many cases where you need to make perfect alignments

on a page containing many elements.

These guidelines activate when you're resizing as well.

Here is an example of an element being moved.

... and here's a resize

Format tab functions

Web Creator Pro six allows you to easily align many elements relative to a parent

element or one another: left, right, top, bottom, middle, and center.


Page 48 / 61

The first section of the format tab is used to position one or more elements not relative to each

other, but relative to the container the element is in (Page, Panel, Box).

The following example shows you the alignment of an element in a box first Horizontally, then

Vertically, followed by the combination of the two, i.e. Centered

The rest of the format tab concerns the relative positioning of elements to each other.


Page 49 / 61

Here is a visual summary of how the alignments and a resizes this is work starting from the three

boxes at the top.

Having selecting multiple elements, one of the elements will have green handles while the

others will be an icy blue. No one green handles will be considered as the reference point for

some of the alignment functions.

If you do not get the desired result after having aligned a group of elements proceed as follows:

cancel the alignment, choose the elements technique to be aligned, and then click once on the

element that will be the reference point. It will then be selected as the reference point, and you

can then apply an alignment.

After a short while you will instinctively find the referenced element.

Float and clear behaviours

Implementing the floating and clear behaviours will allow the automatic

repositioning of elements inside of the container be it a Page, Panel or Box. This concept should

not be daunting; it is simpler than it appears once you learn how to put it to good use.


Page 50 / 61

Essentially, this function can almost eliminate the need to manually edit your layout, facilitate

the resizing of pages, and make creating mobile websites a breeze. It is not mandatory to use

these functions, but we highly recommend taking advantage of its functionality.

These settings are available to you from Position Tab in the Properties Toolbar under the

Behaviour section.

Understanding float

An element with the Float behaviour will do just that, it'll float as if it were in water.

Like a piece of foam in an aquarium, the element will automatically bubble up to the topmost

area of the container (Page, Panel, Box).

Depending on if the float is to the Left or to the Right, the element will try to obtain that

position. If an element donning the float behaviour is encountered while you're newly placed

element floats to the top, your element. Next to it if there is place for it. If there is no room for a

floated element it will place itself directly beneath if possible. With float behaviour None

selected, the element can be placed manually and will remain and its position.

Turning on this setting will therefore allow for an automatic repositioning of elements on a page

should you modify the layout of the page, the orientation of the page or should you insert a new

element.

Important: the float behaviour manages the positioning of elements in their immediate

container. Therefore elements float relative to the elements in their own container.

Floats can be nested as deep as needed, meaning you can apply the float behaviour to all the

elements in a box as well and apply the float behaviour to the box containing those elements.

The elements within the box will float relative to each other inside of the box, and the box will

float relative to other containers in the page.


Page 51 / 61

Positioning restrictions

Elements carrying the float attribute position themselves according to the width of the space

available at the top of the container. If the element is too large, it will not resize itself and shift

into place.

This means that if an element is placed next to another it should snap into place, If not it'll find

the next line. It'll then justify itself according to which float, be it left or right, was chosen. The

floating object will then position itself next to the first element in counters. In the following

illustration, there are three buttons with the Float Left attribute with widths proportional to the

container. Therefore they are perfectly aligned.


Page 52 / 61

The panel of the center illustration has been reduced in width. With the panel too small to hold

all three in the first row, the third button has automatically shifted to the next line.

And in the third view, the third button has been resized to a larger width and as a result has

once again moved to the following line.

In the following illustration, images are placed in descending order.


Page 53 / 61

The center panel has once again been reduced in width, causing the fourth button to move to

the next line. One button four’s float left property kicks in, it shifts towards the last but gets

caught on button two’s edge.

The last panel illustrates what happens if the panel is reduced again. But in four places itself

directly beneath button two, having encountered button one’s edge.

In the following illustration, we've reduced the size of the panel yet again.

Button three of the first one to be affected by this change. No longer able to fit in its spot, it

moves beneath the two and runs into the edge of button one. And now, since iTunes four can

no longer sit next to button three, it slides beneath button three and runs into the edge of the

panel.

Notice the space left in the spies in one. The natural thing to think is that button for is too large

to fit into position beneath button one. But that is not the case.

The fact of the matter is, once an element has floated up as far as it can it'll then line itself up to

the element before it. The element before button four, is button three. Therefore, button four is

always going to want button three to be on the left side of it. If it cannot achieve this, it will

move to lower line.

So as the illustration depicts, this is reducing the size of button for one not allow it to slide into

the position beneath button one.

However, if you resize button four to fit in the small space behind button three it would line up

next to it.


Page 54 / 61

In the three following examples, whatever the height or width of the elements before four and

five, the order is the same: each element tries to remain to the right or beneath its preceding

element.

Getting the most out of the float behaviour

Given the explanations above, it becomes obvious that to get the most out of the float

behaviour you will want to use elements that share the dimensions. if you do not use elements

whose dimensions are exactly the same, you will want the elements that mentions to add up to

that of its container. By doing this, when the elements slide around they will maintain a uniform

appearance in the container without leaving gaps.

It could be tempting to fill gaps using elements that do not have the float behaviour activated.

But by doing that those elements would not be able to shuffle around automatically and would

therefore create new gaps down the line.

Adding a floating element

Once you have created or positioned an element above a group of elements using a Float

behaviour, the newly inserted element will place itself where you left it in the foreground(make

sure you have successfully added the element to the container by dragging and dropping it into

position or by opening the context menu and selecting Add to parent> parent name).


Page 55 / 61

If you turn on the float behaviour for this new element, it will automatically place itself in the

only available position as the last in this group of floating elements; Either to the left or the right

of the preceding element, or if there is no space it will go beneath it. You can then choose the

position of this element using the following instructions.

Moving floating elements

By now you have likely figured out that the order of floating elements holds a great deal of

importance when it comes to adding a new floating element. Click an element and begin

dragging it around as you normally would. The mouse cursor approaches the edges of the other

elements on the page a vertical blue line will appear showing you where the element will place

itself should you release it at that point. The bar is on the right the element will place itself after

it, it'll place itself before it if the bars on the left.

Keep in mind that adding one element to the container filled with other floating elements can

have quite a large domino effect on the layout of the container.


Page 56 / 61

Uses for the float behaviour

The float behaviour can be used in two major ways:

1) To present elements of the same type. The best example of this is for list of products.

You can use a single box and fill it with panels containing a picture and descriptive text.

This way you can make a list ranging from celebrity profiles to cookbook recipes, and

when the time comes the change them, you need only remove a panel or add one in the

layout will be preserved.

Here's an example of a gallery of composers showing how the layout remains uniform

even after having changed the parent containers

dimensions.


Page 57 / 61

This page contains two logos with an image and menu, the body of the page contains

four panels with the same width but complementing heights. These are actually

carefully measured Blocs.

Blogs are an important concept in Web Creator Pro 6, and is explained in the chapter

Creating and using blocs.


Page 58 / 61

The Clear behavior

The clear behaviour works together with the float behaviour. This behaviour tells a floating

object to always take the next line instead of lining up next to another floating element. So even

if there is space for the floating element to position itself into, regardless of if it's floating left or

right, it will opt to stack itself beneath other elements. This will allow you to automatically stack

elements as though you were using a “carriage return line feed” as well as choose which side

the elements will stack on.

If for any reason, such as space constraints, your elements are only able to stack this attribute

will ensure that elements always align themselves in a predictable manner.

This is particularly useful for phones that can change their orientation. The vertical orientation

will be thinner causing your elements to stack, but when put in landscape mode would normally

cause your elements to line up next to each other.

Using groups

Groups have been around for quite a while in Web Creator, and may soon be

phased out due to the introduction of containers. Groups are a symbolic collective of elements

that can be used to modify multiple elements. It was often used to belong to a group of

elements that you did not want to accidentally modify you need create a type of Z-order

hierarchy between elements. With the introduction of Containers, elements are already

grouped according to their placement on the page.

You can define a group by selecting multiple elements and opening the context menu with the

right-click button. You would then select Add to group and either create a new group or added

to an existing one.

To access the properties of a group, click on the Hierarchical view of the page elements is

located in the topmost part of the Elements list and change it to View element groups and their

content.


Page 59 / 61

Using the +/- you can expand or collapse the list of elements or even lock groups and element

using the lock symbol.

In the open Elements tab you can rename the group as well as change its visibility in the

navigator or even add and remove elements.

And if you select an element from the group, you can then directly access its properties, actions,

etc.

Using blocs

Introduction to blocs

Blocs are a natural evolution from Groups in Web Creator. A Bloc is an

organizational tool allowing you to store an ensemble of elements with the hopes of using them

later on in another page or project.

Creating a bloc

Even if it isn't necessary, we greatly recommend creating a bloc based on a container to make it

easier to reposition the bloc later. Also if elements inside of the bloc our house by a container

such as a panel or a box, you can then apply a float behaviour to the container which will allow

for the automatic repositioning of bloc on your page.


Page 60 / 61

Let's try an example. Go ahead and create a panel on your page and give it the float attribute

using the Properties Toolbar. Next you'll want to load it up with a few choice elements such as

an image, and text, and social bookmark.

Once you have something along the lines of the picture above, you can save the whole as a bloc

for future use.

In order to do this, select the box or panel containing all of the elements by clicking on an area

devoid of elements, each border, or its name in the Elements list. From the elements list, open

the Blocs tab. Next select the custom tab and click on the + symbol. You immediately see it

appear in the underlying window title Item X, where X represents the order in which it was

created in.

And that's all there is to it. By double-clicking on its name you can rename it.

If you were to create a header stored in a bloc, you could then drag it onto every page without

having to remake it multiple times.

If you make a slight variation in your bloc that you want tasks or use for another site, creating

blocs can save you a huge amount of time as well as help you avoid layout errors.


Page 61 / 61

Reusing a bloc

Easy change page or even project and return to the Custom Bloc area located in the Elements

list, you'll find all the blocs that you have previously created. If you use the Add to page button

while a bloc if selected, the whole bloc will be transferred to the page preserving the elements

and their properties.

Precautions for using blocs

If no container element is selected, a new bloc will always be inserted independent of other

elements. This will be useful for the larger blocs that you create to set the layout for the page.

On the other hand, you'll want to add smaller blocs to a page that already has a set layout. So

you can create one bloc which sets the layout for the page and then fill that page layout with

smaller blocs which will divide your content.

To save time, you should select the container you want the bloc to be inserted into beforehand,

else the bloc will simply be placed wherever it finds a free spot if the float behaviour is active, or

the center of the page if the float behaviour is off.

In summary: if a simple element is selected or no element is selected, the bloc will be inserted

into the page independent of everything else.

If a container, i.e. a Panel or a Box is selected, the bloc will appear inside of the container as a

Child.

Ideal bloc size

The templates provided in Web Creator Pro 6 are based on multiples of 240 pixels of width. So

blocs will have a width of 240, 480, 720 or 960 pixels. The height follows the same principle,

giving you 16 combinations for a bloc’s dimension.

Web pages, on average have a width of 960 pixels. As a result, this width was made to be the

default page size in Web Creator Pro 6. This will allow you to add a maximum of four blocs in a

single row, more than enough to add a variety of elements. You can of course create blocs with

an even smaller width to accommodate your needs.

As we saw in the chapters concerning containers and floating, you should keep in mind that the

width of your containers should add up to the width of your page. Also the height of the blocs

should be the same or decrease by proportionate multiples.


Page 62 / 61

Luminosity and Transparency

In addition to the color, which can be customized for most elements, Web Creator

Pro 6 allows you to manage Transparency in the Luminosity not only on Panels and Boxes but

on text, buttons, etc. This allows for superposition effects on other elements in the page like

Images for example, without having to directly modify them. This allows for site wide

modification by changing only a few elements.

Use the Elements tab located in the Properties toolbar for a selected element. From this point,

select the item resembling a painter's palette. In the lowest part of the window that appears,

you can modify both the Luminosity and Transparency of the selected color.

Try out different combinations for the sake of finding out what results it will have on an

element, especially in situations where elements are layered on top of each other.

WebCreator6 Manual

Documents

quick start manual page

quick start guide

quick access bar

table of contents introduction

h6 header tags

google analytics

file tab