Mexabet Website Builder End User Guide

Building Your Site With Our Website Builder:

Table of Contents: INTRODUCTION. GETTING STARTED. BUILDING YOUR SITE WITH SITE BUILDER. WORKING WITH IMAGES. WORKING WITH FLASH MOVIES. WORKING WITH MEDIA FILES. ADDING A PAGE TO YOUR WEB SITE. CREATING A NEW FOLDER. RENAMING A FILE OR FOLDER. COPYING A FILE. DELETING A FILE. UPDATING SITE OPTIONS. UPLOADING A FILE. GLOSSARY.

BUILDING YOUR SITE WITH WEBSITE BUILDER:

One of the most powerful features available to you is the integrated Mexabet Website builder. If you do not have a web site already, then you can use the web site builder to get your own web site up and running in under 10 minutes.

If you haven’t already built your web site and your administrator has enabled the site builder, you will be shown the following message when you first login:

When you use Mexabet Website Builder, you should start by filling out the form in the left frame, as shown below:

Web Site Name: Enter a name for your web site here, such as ‘ACME Web Site’. It’s a good idea to enter your company name if this is a corporate web site, or your own name if this is a personal web site.
Layout Category: Before your web site can be built you need to choose a layout template for the design. To start, choose a category from the “Layout Category” dropdown box to see a list of templates in that category. Every time you choose a different category the list of template images will be updated in the “Layout Template” section.
Layout Template: Click on a layout template for your web site. Use the “Layout Category” list from #2 to browse the list of available categories.

Remember, you can always come back later and choose a different template for your web site if you can’t decide on one right now. When you have entered a name for your web site and chosen a template that you like, click the “OK” button. You will then see the following message:

Click the “OK” button and your web site will be built and automatically uploaded to your web server. This normally takes anywhere from 10 seconds to 2 minutes, depending on the speed of your connection. When the web site is built you will then be able to create your first page, which is what we will look at next.

Creating your first page in the site builder:

Each and every page on your web site will contain a few similar pieces of information: a page name, a file name, optional page keywords and a description. These are the first details you fill in when you create a new page using the “Create New Page” form in the left frame, like this:

Your home page should always have the file name “index.html” – so you should not change this. Details of each field are shown below:

Page Name: Enter a name for your new page, such as “Home Page” or “About Us”. This will be displayed in the web browsers title bar and menu navigation when viewing the page.
File Name: Enter a file name for your new page. Generally, all file names should end in “.html”. Your home page should be called index.html. It’s also a good idea to make your file name similar to your page name, such as “about.html” for your “About Us” page.
Page Keywords: Also known as META keywords, these are used to help search engines index your web page. Enter keywords separated with commas, such as “our products, our music, our books”.
Page Description: Also known as a META description, this is used to help search engines index your page. Enter a brief description of your new page, such as “Learn about our books and music”.

When you have filled out all fields, click the “Next >>” button. After a few seconds the editor will load on the right hand side of the page. You will notice areas of the page outlined in blue. These are the areas of the page you CAN modify in the editor:

Type your page content into the editor and click the “Save” button in the left frame when you are done. Your page will be automatically saved and published to your web site for you.

Congratulations, you’ve just created your very first page with the site builder!

FEATURES WITHIN MEXABET WEBSITE EDITOR

The Editor Toolbar:

The tool for editing your web pages is the editor. The editor has a toolbar – this is a row of icons on along the top of the editor page and each activates different commands or functions when clicked. Some have drop-down lists which allows you to view all the functions associated with the icon.

When moving your mouse over each icon, you will notice that text will appear which indicates the function and title of the icon. To get information on the functionality of this icon, look up the name (that appears on the icon) in the following section on editor commands.

Editor Commands:

This section will list all the icons listed in the editor toolbar. You will find the command title in bold, a description of the command in italic below the title, followed by the icon that appears in the toolbar for that command (left) and a step-by-step outline on how to perform the particular command.

Some commands have shortcut keys. Shortcut keys are usually a combination of holding the ‘ctrl’ (control) key on your keyboard down with another key. These are handy shortcuts for when you become more familiar with the commands and want to perform the more common ones quickly without going through the editor. A full list of shortcut keys are provided in the section titled ‘Shortcut Keys Index’ and you will notice the shortcut keys noted in bold in the following list of commands (where applicable).

Cut

If you need to remove a section of text (either to paste somewhere else or delete), you would use this feature.

To cut a portion of the document (image or text):

Highlight the desired portion and click the Edit menu then click the 'Cut' option (keyboard shortcut – Ctrl + x),
or
Click the right mouse button on the desired portion and choose ‘cut’

Copy

If you want to copy of a certain section of text, and you don’t want to re-write it, or if you want a copy of an image that is already on the page and don’t want to go through the process of inserting it,
then you can use the copy command.

To copy a portion of the document:

Highlight the desired portion and click the Edit menu then click the ‘Copy’ option (keyboard shortcut - ctrl+c), or
Click the right mouse button on the desired portion and choose ‘copy’

If you want to copy multiple items that can’t be highlighted together with the cursor, then hold down the control key and highlight the areas you need copying with the mouse cursor.

Paste

This command allows you to paste the last copied item or items to the position of your cursor.

To paste a portion that has already been cut (or copied):

Click where you want to place the desired portion on the page and
Click the “Paste” menu and choose one of three options. “Paste” will perform a normal paste. “Paste as Plain Text” will strip formatting from HTML and “Paste from MS Word” will preserve all formatting made to the content by Microsoft Word (keyboard shortcut – ctrl+v), or
Click the right mouse button on the desired portion and choose ‘paste’

Undo

This command allows you to undo the last operation you performed (unless it’s a ‘save’). This is useful if you have performed an incorrect operation or one that you don’t want to save.

To undo the last change:

Click the 'Undo' button on the toolbar (keyboard shortcut – ctrl+z).

Each consecutive click will undo the previous change to the document.

Redo

This command allows you to undo your last undo, hence redo it. It is essentially the opposite of an undo.

To redo the last change:

Click the 'Redo' button on the toolbar (keyboard shortcut - ctrl+y).

Each consecutive click will repeat the last change to the document.

Bold

Bolding text makes it stand out from normal body text. It increases the thickness of the lettering. For example ‘edit’ is not bold, and ‘edit’ is bold. You can bold text that you want to stand out such as headings and keywords.

To bold text:

Select the desired portion of text & click the 'Bold' icon (keyboard shortcut – ctrl + b).

Each consecutive click will toggle this function on and off.
To find out whether existing text is bold, highlight the text with the cursor. If the ‘bold’ button is indented, then the text has been formatted to ‘bold’

Italic

Making text italic makes the letters of the selected text slant to the right. E.g. ‘edit’ is italic, ‘edit’ is not.

To convert text to italic:

Select the desired portion of text and click the 'Italic' icon (keyboard shortcut – ctrl+ i).

Each consecutive click will toggle this function on and off.
To find out whether existing text is italic, highlight the text with the cursor. If the ‘italic’ button is indented, then the text has been formatted to ‘italic’

Insert Number List

This command is useful when you have rows of print in sections and you need to number and list them. Text being typed is inserted into a bulleted list. In the following example:

“the document comes in two formats:
filename.doc
filename.pdf”

‘.doc’ and .’pdf’ can be highlighted and a numbered list inserted to create, where a number prefixes each listed item:

“the document comes in two formats:
1. filename..doc
2. filename.pdf”

To start a numbered text list:

Click the 'Insert Numbered List' icon. If text has already been selected, the selection will be converted to a numbered list.

Each consecutive click will toggle this function on and off.

Insert Bullet List

As in the previous command, the highlighted consecutive items are sorted into a list. Text being typed is inserted into a bulleted list. In the previous example they were sorted with numbers, in this command they are numbered with bullets which are defining dots that prefix each listed item. From the previous example, inserting a bulleted list would produce:

“the document comes in two formats:

filename..doc
filename.pdf”

To start a bullet text list:

Click the 'Insert Bullet List' icon. If text has already been selected, the selection will be converted to a bullet list.

Each consecutive click will toggle this function on and off.

Outdent

This command enables you to remove an indent (or tab) of text.

To decrease indent of a paragraph:

Highlight the portion of text needing indenting.
Click the Format menu and then click the 'outdent' option.

Each consecutive click will move text further to the left.

Align Left

This command enables you to align existing sections of text or text being written to a defined left border of the page or cell. This formatting can be used for headings and body text.

To align to the left:

Make a selection in the document and click the 'Align Left' icon.

Align Center

This command enables you to align existing sections of text or text being written, to the center of the page or cell. This formatting can be used for and body text but is mainly used for headings.

To align to the center:

Make a selection in the document and click the 'Align Center' icon.

Align Right

This command enables you to align existing sections of text or text being written to a defined right border of the page or cell. This formatting can be used for headings and body text.

To align to the right:

Make a selection in the document and click the 'Align Right' icon.

Create / Modify HyperLink

A hyperlink is a reference or link from one particular point in a web page file to particular point in another file OR another place in the same file. When a user clicks on the link in your web page with the mouse, the browser will display the target of the link This feature is useful for when you want to sort your website into different sections or pages and reference them easily or if you want your website to contain links to other pages in other sites. A URL is used to reference a section of another web page, a section of another website, or an anchor.

To create a hyperlink:

Select text/image to create the link on
Click the Insert Link' icon. The file manager will appear.
You can also type the full URL of the page you want to link to in the URL text box.
You can also enter the target window information (optional) and an anchor name (if linking to an anchor - optional). This is if you want to reference a different section of the same file.
You can specify the file extension you need.

The left section contains a cut-down version of the 'File Manager'. You can use this to navigate through your site's files and folders. When you have found the file you want to link to, click the 'Get Link Location' link next to that page. The information will be automatically updated in the 'Link Information' portion of the page.
When finished, click the 'Insert Link' button to insert the HyperLink you just created, or click 'Remove Link' to remove an existing link.
Clicking 'Cancel' will close the window and take you back to the editor.
To modify an existing hyperlink, select the link and click on the Insert Link' icon. The HyperLink window will appear.
Make your changes and select the 'Insert Link' button.
Select ‘remove link’ to remove an existing link.

Insert / Modify Image

This command allows you to browse the images you have available and insert them into a particular section of the page you are editing. This means that you can display any of the images available to you on your web page.

This will open the Image Manager. See the section titled Image Manager for more information.

Font

This menu allows you to choose the style of font for the text that you specify.

To change the font type of text:

Select the desired portion of text and click the 'Font' drop-down menu.
Select the desired font (choose from Default - Times New Roman, Arial, Verdana, Tahoma, Courier New, Georgia).

To find the type of font of existing text, highlight the specific text and look at the ‘font’ menu. The font menu will change to indicate the type of font used

Font Color

This menu allows you to choose the color of font for the text that you specify. It allows you to format the text in your page to match the style of your web page and distinguish heading from body text etc

To change the color of text:

Select the desired portion of text and
Click the 'Color' drop-down menu.
Select the desired color from the large selection in the drop-down menu.

Highlight Font

This menu allows you to choose the highlight text that you specify. It allows you to format the text in your page to distinguish sections that you want to stand out.

To highlight font:

Select the desired portion of text and
Click the 'Highlight' drop-down menu.
Select the desired color from the large selection in the drop-down menu.

Remove Text Formatting

This command allows you to select a specific portion of text and remove any of the formatting which it contains – leaving it with font style ‘Times New Roman’, format ‘Normal’ and font size ‘3’.

To any text formatting to the default Times New Roman, Normal, size 3 font:

Select the desired portion of text and
Click the Tools menu and then click the 'Remove Text Formatting' option.

Style

The values in this box are predefined styles that are called from a stylesheet. This allows you to keep styles for your site on hand to be reused throughout your website for consistency.

To change the style of text, images, form objects, tables, table cells etc:

Select the desired element and click the 'Style' drop-down menu, which will display all styles defined in the style-sheet. Select the desired style from the menu.

Note: this function will not work if there is no style-sheet applied to the page.

Insert Table

A table can be a collection of text or images arranged in rows and columns. You can add images or text to a table, shade it, use headings etc. Each row & column interval is called a cell. You can choose to use to use a table with the cells visible on the website, or invisible and only evident to you whilst editing for the sake of aiding the organization of its contents.

For example, a company may insert a table with 3 columns and x rows to display their products. The first column may contain images of the products, the next column on the same row may contain the product description, and the last column on the same row may contain the product price.

In the editor the following attributes have the following properties:

Row: allows you to specify how many rows are required in your table
Column: allows you to specify how many columns are required in your table
Width: allows you to specify what percentage of the page section the width of the table will span
Bgcolor: allows you to specify the background color of the table
Cell spacing: allows you to specify the size of the spacing between each cells
Cell padding: allows you to specify the size of the space that will be left clear between the wall of the cell and the contents of the cell.
Border: allows you to specify the width of the border.

To insert a table:

Select the desired location, and click the 'Insert Table' drop down icon (ctrl + t).

A new window will pop-up with the following fields: Rows - number of rows in table; Columns - number of columns in table; Width - width of table; BgColor - background color of table; Cell Padding - padding around cells; Cell Spacing - spacing between cells and Border - border around cells.

Fill in table details then click the 'Insert Table' button to insert table, or click 'Cancel' to go back to the editor.

To access any of the following table features, either click on the ‘table’ drop down menu, or click the right mouse button ensuring that the mouse cursor is within the table.

Modify Table Properties

This command allows you to change the properties that were specified when the table was first created.

To modify table properties:

Select a table or click anywhere inside the table to modify, then click the 'Modify Table Properties' option from the tables menu. A pop-up window will appear with the table's properties.

Note: this function will not work if a table has not been selected.

Modify Cell Properties

This command allows you to modify the properties the cell of the table selected.

To modify cell properties:

Click inside the cell to modify, then click the 'Modify Cell Properties' icon. A pop-up window will appear with the cells' properties.
Click the 'Modify Cell Properties' button to save your changes, or click 'Cancel' to go back to the editor.

Note: this function will not work if a cell has not been selected and does not work across multiple cells.

Insert Row Above

You may find that after creating a table, you need to add an additional row. Instead of creating another table from scratch, you can add a row where you need.

To insert row above:

Click inside cell above which to insert a row,
Click the Table menu and ten click the 'Insert Row Above' option.

Each consecutive click will insert another row above the selected cell.

Note: this function will not work if a cell has not been selected.

Insert Row Below

You may find that after creating a table, you need to add an additional row. Instead of creating another table from scratch, you can add a row where you need.

To insert row below:

Click inside cell below which to insert a row
Click the Table menu and ten click the 'Insert Row Below' option.

Each consecutive click will insert another row below the selected cell.

Note: this function will not work if a cell has not been selected.

Delete Row

You may find that after creating a table, you need to delete row from a table that is no longer needed.

To delete a row:

Click inside cell which is in the row to be deleted
Click the Table menu and ten click the 'Delete Row' option.

Note: this function will not work if a cell has not been selected.

Insert Column to the right

You may find that after creating a table, you need to add an additional column. Instead of creating another table from scratch, you can add a column where you need.

To insert column after:

Click inside cell after which to insert a column
Click the Table menu and ten click the 'Insert Column After' option.

Each consecutive click will insert another column after the selected cell.

Note: this function will not work if a cell has not been selected.

Insert Column to the left

You may find that after creating a table, you need to add an additional column. Instead of creating another table from scratch, you can add a column where you need.

To insert column before:

Click inside cell before which to insert a column c
Click the Table menu and ten click the 'Insert Column After' option.

Each consecutive click will insert another column before the selected cell.

Note: this function will not work if a cell has not been selected.

Delete Column

You may find that after creating a table, you need to delete column from a table that is no longer needed.

To delete a column:

Click inside cell which is in the column to be deleted
Click the Table menu and ten click the 'Delete Column' option.

Note: this function will not work if a cell has not been selected.

Increase Column Span

After the table is created, you can increase the span of a specific column/s with this command

To insert column span:

Click inside cell who's span is to be increased
Click the Table menu and ten click the 'Increase Column Span' option.

Each consecutive click will further increase the column span of selected cell.

Note: this function will not work if a cell has not been selected.

Decrease Column Span

After the table is created, you can decrease the span of a specific column/s with this command

To decrease column span:

Click inside cell who's span is to be decreased
Click the Table menu and ten click the 'Decrease Column Span' option.

Each consecutive click will further decrease the column span of the selected cell. Note: this function will not work if a cell has not been selected.