Basics
|
- Click and drag blue bar to move element. |
|
- use to resize element |
|
- use element actions to edit element |
|
- click this icon for more help |
Color
Color sets the background color of the selected element.
If multiple elements are selected then the chosen color will be applied to all of the selected elements.
Setting the color to transparent will make the element appear as "see through".
If the element color is set to transparent and the element border is set to 0px width then the element will
have a dashed grey border around it (in the editor only) otherwise it would be invisible.
Page Title
Page title is very important for search engines to find your page easier. It is also important for your visitors to know what page they are on.
If you leave the page name blank it will default to the website name.
Metadata
Metadata is used to describe your website page. It is primarily used for search engines to properly index your website to allow your page to show up in the search results.
Border
Sets the border of element. If multiple elements are selected then the border for each selected element will be set.
If the element border is set to 0px width and the element color is set to transparent then the element will
have a dashed grey border around it (in the editor only) otherwise it would be invisible.
Multiple Selection
You can select multiple elements at once allowing you to make the same change to multiple elements at once. Very useful for aligning two or more elements.
To select multiple elements clink on your web page element and while holding the button down drag the mouse. You will get a blue highlighted area and as you move over each element it will become selected.
Likewise, you can hold down the "ctrl" key and click on each element you want to select.
Align Elements
To align two or more elements you have to select the elements.
Once the elements are selected go to the "Align" tab in the top menu and choose the appropriate alignment option.
All the elements will be aligned to the first element that was selected which is represented by a red dashed border.
Background Image
Used to set an image from your image library as a background for an element (square, text, menu). Repeating an image lets you create interesting designs.
For example an image:
can be turned into a header:
simply by setting a background image on a
Square element and repeating the background horizontally.
Page Alignment
There are two page formats available:
1) Full Page- page spans the entire width of the browser.
2) Centered Page - page is centered in the browser. Notice that when you center a page another element, "Page Background", appears behind the main page. In the editor, only the main page element can be resized by the user. Page background element will be automatically adjusted based on the size of the main page.
Page Dimensions
Page dimensions are set in pixel (px) sizes. If the page alignment is set to "Full Page" then your page will span the entire width of the browser regardless of what the width in the editor is set to.
If you position an element outside the page, the page size will automaticall adjust to encompass the element.
Most common browser widths are approx. 1000 pixels. Use the page size in the editor as an indicator as to what your common website visitors will see without having to scroll.
Top Margin
Top margin is only available when the page alignment is set to "Centered Page". Set a value in pixels (px) to move the main page down from the top.
This feature can make the web page appear that it is floating in the middle of the screen.
Rounded Corners
Quick and easy way to create intersting designs such as tabs or pictures with rounded corners. Only works for Square element.
Once the corner has been rounded the border width can be either 0px or 1px.
Setting a background image on a Square element and then rounding the corners allows you to have photos with rounded corners without any image editing.
Cursor
Setting a cursor on an element will change the mouse cursor in the browser to the chosen style every time a user moves over the element.
Scroll Bars
Scroll Bars are used for Text elements. Text in a text element will be adjusted based on the size of the text element. If the text is longer than the size of the element if will be cut off.
Setting scroll bars on a text element will allow you to have text thats longer than the text element by providing a scroll bar for users to scroll to see the cut-off text.
Bookmark Name
You can set your own name for each bookmark element. Custom names are easier to recognize when setting internal links for the web page.
Upload Flash Files
You can upload flash animations, files ending in .swf, in the editor by selecting a file from your computer and pressing the "Upload" button.
Uploaded files will go straight to your flash library where you can select them to use in your website.
Flash Library
Holds all the flash animation files (.swf) that you have uploaded to your account.
In the library you can upload new animations and select ones you have already uploaded to use in you website.
Image Library
Holds all the images you have uploaded for your website.
In the library you can upload new images. You can also delete current images.
Clicking on an image in the library will highlight it. Clicking on the "Set Image" button will set the image in the editor.
Acceptable file formats are gif, jpeg, jpg, png, bmp and tiff. Maximum size for an image is 1 megabyte.
Insert Embed Code
Embed code is html code provided by other sites to include in your own website.
Most common example is embedding a video. A site like YouTube will provide the "embed code" for you to embed their video in your website.
Paste the embed code into the text area of the
embed element and click the "Set" button to activate the embed code.
For more information
click here
Insert Page
You can insert one website page into another page. This is useful for the organization of your website.
For example say you have a menu in the header that is repeted in multiple pages. If you wanted to make a change to this menu you'd have to open every page and make the same change for each page.
A simpler way of doing this is creating a separate page that only has the header and the menu in it, call it the "header" page. Then you can insert the "header" page into all your other pages.
If you need to make a change to the menu now you would do it only once in the "header" page. This change will then be visible in all the other pages.
Element Dimensions
Element dimensions are represented in pixels (px) or percent.
If you set an element to 80% then the size of that element will be 80% of the size of its parent element. If the parent element is the web page than the element size will be 80% of the page.
Element Position
Element position is represented in pixels (px).
Top and left coordinates are based on the position of the parent element.
Parent Elements
Adding one element to another makes one element the parent element.
Square element is often used to hold other elements. If you were to move the square element then all the elements inside it (child elements) will move with it.
If you copy an element, the elements inside it (child elements) will be copied as well.
Element position and element size is based on the parent element.
Adding elements
You can add one element to another, creating a
parent element.
To add a
new element to an existing element click on the
in the element actions.
To add an
existing element to another element select the element first. Click on
"Add To..."in the top menu. Then choose
"Another element" from the drop down menu. Finally, click on the element you wish to add the selected element to.
Simple Text Element
Simple text is used for menu heading titles.
Its a simple way to insert a title for a menu heading. It doesn't offer rich text edditing capabilities but does have it own text properties for editing the style of the text.
See also standard Text.
Text Properties
Used to style the Simple Text element.
The properties allow you to change the font, set the size of the font, set the bold, underline and italics properties and change the color of the text.
Setting Links
There are 3 types of links you can set:
1) Internet link - under the "www" tab lets you create a link to another website.
2) Web page link - under the "my pages" tab lets you create a link to other pages that are part of your website.
3) Bookmark link - under the "bookmarks" tab lets you create a link to a bookmark element within your web page.
(Rounded) Square Element
There are two types of Square elements. Standard and Rounded Square. Rounded Square has rounded corners.
Most commonly used to hold other elements, set repeating backgrounds or divide a web page into sections.
Known as a div element in html.
Text Element
There are two types of text elements. Standard text and
Simple Text.
Click on
to edit the text. That will open up the text editor where you can type in your text.
Image Element
You can upload images from your computer through your image library.
To open the image library double cilck the image element or click on
. Once the image library is open you can upload, delete and select the images that you want to see on your page.
Video/Embed/Insert Page
You can embed a video or any other object by copying and pasting the
embed code provided by an external site.
You can also
insert another one of your web pages and add an external javscript as well.
Once the external object has been added to your page a blue see-through film will cover it so that you can edit it in your page. If you need to access the embedded element click on the "Activate" button or click on
to remove the blue cover.
For more information
click here
Flash Element
You can add flash animations to your webapage by uploading Adobe Flash files to your account.
You can find your uploaded flash files in your flash library.
Bookmark Element
Bookmarks are links to a location in the same web page.
Position a bookmark element anywhere on your page and then you can set a link to that location.
Note Element
This element allows you to leave a note for others who are working on the same website.
Click on
to edit/view the notes.
Users who are part of your website will be notified when they next log in or open the web page to edit.
Collaboration
Multiple people can work on the same website.
To share a website with other users who will be working with you go to your list of websites (in your main account) and select "sharing".
Moving Elements
You can move an element by clicking and dragging the blue bar that appears above each element when the element is selected.
You can also move a selected element by 1 pixel by using the arrows on the keypad.
Holding down the "shift" key and using the arrow keys will move an element by 20px.
Element Actions
Element actions apear below the element when it is selected.
Edit Text
Add an element
Copy an element
Insert an image
Insert flash animation
Create a link
Delete an element
Display help section
Active Embed Element
Menu Element Actions
Add a heading
Switch Menu layers
Preview Menu
End Preview
My Colors
