WebCreator6 Manual

Quick Start Users Manual
Web Creator Pro 6 - Quick start manual
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. 2. 3. H1...H6 Header Tags .......................................................................................................... 18 Metatags............................................................................................................................ 18 Google Analytics ................................................................................................................ 18
SiteMap ..................................................................................................................................... 18 Uploading the site ..................................................................................................................... 19 1. 2. 3. Optimise ............................................................................................................................ 19 Regenerate ........................................................................................................................ 19 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 2 / 61
Web Creator Pro 6 - Quick start manual 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 3 / 61
Web Creator Pro 6 - Quick start manual 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 4 / 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. Its 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 well 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 5 / 61
Quick start Guide

To begin, lets 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 havent 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 6 / 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. Well get to the other tabs in a moment, but for now lets 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 arent 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 7 / 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 pallets 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 8 / 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 dont have a logo ready, try one from the image library.
Page 9 / 61
Under the File field, there are options for the pictures 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

Lets say we want to add a slogan next to our logo, its 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. Lets 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. Lets go with Brush Script MT and a 40 point font for maximum legibility.
Page 10 / 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 youre 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

Lets 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 11 / 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 12 / 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. Youll 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 13 / 61
After pressing Ok the name of your page will appear in the Link dialog boxs link field.
Press Ok and you will be back at the editor.
Page 14 / 61
Test your site in a browser

So youve 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 youre 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 15 / 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 its 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 16 / 61
But lets 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 17 / 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 its 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 18 / 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 Explorers 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 Creators interface.
Detailed Interface Presentation

Lets 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 19 / 61
If you have had the chance to get familiar with Microsofts 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 20 / 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 Microsofts 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. Lets 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 21 / 61
Web Creator Pro 6 - Quick start manual 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 22 / 61
Web Creator Pro 6 - Quick start manual 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 23 / 61
Web Creator Pro 6 - Quick start manual 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 24 / 61
Web Creator Pro 6 - Quick start manual 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 25 / 61
Web Creator Pro 6 - Quick start manual 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 26 / 61
Web Creator Pro 6 - Quick start manual 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 Googles 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 27 / 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 28 / 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 29 / 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 30 / 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 31 / 61
Web Creator Pro 6 - Quick start manual 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 32 / 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(H1H6) Elements
The Label(H1H6) 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 33 / 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 34 / 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 35 / 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 36 / 61
Web Creator Pro 6 - Quick start manual 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 37 / 61
Web Creator Pro 6 - Quick start manual 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 38 / 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 39 / 61
Web Creator Pro 6 - Quick start manual 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 40 / 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 41 / 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 42 / 61
Web Creator Pro 6 - Quick start manual 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 panels 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 43 / 61
Web Creator Pro 6 - Quick start manual 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 44 / 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 45 / 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 46 / 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 47 / 61
Web Creator Pro 6 - Quick start manual 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 48 / 61
Web Creator Pro 6 - Quick start manual 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 49 / 61
Web Creator Pro 6 - Quick start manual 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 50 / 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 51 / 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 52 / 61
Web Creator Pro 6 - Quick start manual The center panel has once again been reduced in width, causing the fourth button to move to the next line. One button fours float left property kicks in, it shifts towards the last but gets caught on button twos 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 ones 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 53 / 61
Web Creator Pro 6 - Quick start manual 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 54 / 61
Web Creator Pro 6 - Quick start manual 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 55 / 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 56 / 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 57 / 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 58 / 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 59 / 61
Web Creator Pro 6 - Quick start manual 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 60 / 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 blocs 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 61 / 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.
Page 62 / 61

WebCreator6 Manual

Hochgeladen von

Dokumentinformationen

Originalbeschreibung:

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

WebCreator6 Manual

Hochgeladen von

Copyright:

Verfügbare Formate

Quick Start Users Manual

Web Creator Pro 6 - Quick start manual

Web Creator Pro 6 - Quick start manual

Introduction to Web Creator Pro 6

Web Creator Pro 6 - Quick start manual

Quick start Guide

Web Creator Pro 6 - Quick start manual

Web Creator Pro 6 - Quick start manual

Web Creator Pro 6 - Quick start manual

Web Creator Pro 6 - Quick start manual

Adding an element to the page

Web Creator Pro 6 - Quick start manual

Introduction to Container elements

Introduction to the Float behaviour

Web Creator Pro 6 - Quick start manual

Modifying the menu

Create a link to another page

Web Creator Pro 6 - Quick start manual

Web Creator Pro 6 - Quick start manual

Press Ok and you will be back at the editor.

Web Creator Pro 6 - Quick start manual

Test your site in a browser

Web Creator Pro 6 - Quick start manual

Web Creator Pro 6 - Quick start manual

Web Creator Pro 6 - Quick start manual

Finalizing the project

Web Creator Pro 6 - Quick start manual

Uploading the site

Detailed Interface Presentation

Web Creator Pro 6 - Quick start manual

The Quick access bar

Web Creator Pro 6 - Quick start manual

Web Creator Pro 6 - Quick start manual

Web Creator Pro 6 - Quick start manual

The Common Section

Web Creator Pro 6 - Quick start manual

Web Creator Pro 6 - Quick start manual

The Layout Section

Web Creator Pro 6 - Quick start manual

Web Creator Pro 6 - Quick start manual

The Social Section

Web Creator Pro 6 - Quick start manual

The Multimedia Section

Google map element

Web Creator Pro 6 - Quick start manual

The Data Section

Web Creator Pro 6 - Quick start manual

Searching for groups

The properties toolbar

Web Creator Pro 6 - Quick start manual

Web Creator Pro 6 - Quick start manual

Container elements: Boxes and Panels

Differences between Panels and Boxes

Creating a layout with containers

Adding elements to a container

Adding multiple elements to a container

Box and panel properties

Web Creator Pro 6 - Quick start manual

Web Creator Pro 6 - Quick start manual

Alignment and positioning tools

Web Creator Pro 6 - Quick start manual

... and here's a resize

Format tab functions