TABLE OF CONTENTS

ACEEXPERT PRESENTATION	2
STANDARD TOOL BAR	2
COMMON TOOL BAR	2
SPECIALIZED TOOL BAR	3
TABLES, FRAMES AND LISTS TOOL BAR	3
FORMS TOOL BAR	3
EXTENSIONS TOOL BAR	3
JAVA TOOL BAR	3
JAVASCRIPT TOOL BAR	4
DHTML TOOL BAR	4
CUSTOM TOOL BAR	4
STEP 1: CREATING AND SAVING A NEW DOCUMENT	5
Create a new document	6
Personal, Business-Frames, Business and Custom Templates	7
STEP 2: ENTERING TEXT IN YOUR HTML DOCUMENT	7
CENTERING TEXT	9
INSERTING A LINE BREAK	9
STEP 3: DISPLAYING RESULTS IN THE BROWSER	10
STEP 4: INSERTING AN IMAGE IN YOUR DOCUMENT	12
To insert an image in your document:	12
STEP 5: INSERTING A HYPERLINK IN YOUR DOCUMENT	14
To insert an EXTERNAL LINK in your document:	15
To insert an INTERNAL LINK to your document:	15
STEP 6: ADDING A BACKGROUND IMAGE OR CHANGING THE BACKGROUND COLOR OF YOUR WEB PAGE	17
STEP 7: INSERTING A TABLE IN YOUR DOCUMENT	18
To insert a table in your document:	18
STEP 8: INSERTING A PREDEFINED JAVA APPLET IN YOUR DOCUMENT	20
To insert a PREDEFINED Java applet in your document:	20
STEP 9: INSERTING A PREDEFINED JAVASCRIPT OR DHTML SCRIPT IN YOUR DOCUMENT	23
Description of AceExpert’s Predefined Javascripts:	24
To insert a PREDEFINED DHTML script::	26
Description of AceExpert’s predefined DHTML scripts:	26
STEP 10: TRANSFERRING YOUR WEB PAGE TO YOUR SERVER WITH ACEFTP	27
How to use AceFTP in four easy steps:	28
CONCLUSION	31
USEFUL ADDRESSES	31

CREATE A WEB PAGE IN TEN STEPS USING ACEEXPERT

This tutorial describes each of the steps necessary to create a Web page with AceExpert.  It is aimed mainly at new users who have little or no knowledge of using an HTML editor such as AceExpert.  The tutorial is an easy-to-use tool for developing Web pages.  It is recommended that you print the manual so that you can refer to it with ease.

ACEEXPERT PRESENTATION

AceExpert has a very user-friendly interface. The graphic tool bars makes it easy to develop your Web pages.  The tool bars are  found under different tabs grouped according to categories which facilitate navigation among them.

STANDARD TOOL BAR

		       FTP Manager			          Paste					   File Manager
     New								     Right indent
	         Save 		Search			             Redo	        Start Spell Check
				                      Cut				            Start HTML syntax checking

		Close file 		Extended Replace	Copy	 Undo		Start internal browser	           Image Browse
	Open		Show Project Manager					Start external browser			    						         

COMMON TOOL BAR

	          Bold     Italics	       Align left	    Justify	    Preformatted	Paragraph     Font color

    Font			Underline		Align right		   Line Break	Comment
	Heading styles		  Center		Block quotation

SPECIALIZED TOOL BAR

				                   Document Header	
 Document Body           External link   Horizontal line     Properties                   HTML tags summary

Document		    Image map   		    Embedded Module 
Meta Properties		      Internal link    Style Sheets           Special Characters
	Image

TABLES, FRAMES AND LISTS TOOL BAR

Insert a Quick Table        Ordered List
Insert a Table 

             Insert Frames	    Definition List
		Unordered List

FORMS TOOL BAR

	       Radio button		          TextArea				  File Attach
Form Definition	    ListBox	     Text Box		        Reset button

	Check box           Combo box 	Password 	     Button	   Submit	     Hidden entry        Form Image
               		  		    button

EXTENSIONS TOOL BAR

Marquee	    Spacer 

ActiveX 	   Background sound 

JAVA TOOL BAR

Insert Java Applet 		Java Menus
	        Java Tools    	         Custom Applets

Java Banners     Special Effects

JAVASCRIPT TOOL BAR

	       Javascript Command	
		     Summary		
		              Scrolling List	            Alternatives	Explanation Window
Define a script 	       of URL ’s	            Link images	             News Box	Password

	          Banner          Text gradation	Rotating images	Screen Flash
		    Time/date	Select images			         Window

DHTML TOOL BAR

Style Effects    Menu	    Text Transition

Special 	               Image
Effects                     Transition

CUSTOM TOOL BAR

Configure custom buttons

STEP 1: CREATING AND SAVING A NEW DOCUMENT

To create a new HTML document (or a new Web page), you must go to the “File” menu and choose the “New” option.  You can also access this option by clicking on the New file icon  in the “Standard” toolbar. A window called “New Document” will open that allows you, via the menus, to create several styles sheets and an HTML document based on a personal template, a business template or a template that you can customize.

Create a new document

To create a new document,  click twice on the HTML document icon.   Once you have entered a title and a description for your document, the following HTML code is inserted in the edit window: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 TRANSITIONAL//EN">
<!-- CREATION DATE: 18/01/99 -->
<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
<META NAME="Description" CONTENT="Creating a Web page">
<META NAME="Keywords" CONTENT="page, web">
<META NAME="Author" CONTENT="Visicom Media">
<META NAME="Generator" CONTENT="AceExpert">
</HEAD>
<BODY>

Contents of document

</BODY>
</HTML>

The text found between the "<!--" and " -->" tags represents comments and will not be displayed on  your Web page.

At this point, you can save your document in order to create an HTML file.  To save your document, go to the "File" menu and select the "Save" option.  You can also save your document by clicking on the  Save File icon  found in the standard tool bar.  Enter a name for  your document in the "File Name" dialog box.

Once you have saved your document, the file name will appear in the tab at the top of the edit screen.  Don't forget to save your document regularly so you don't lose new information.

Personal, Business-Frames, Business and Custom Templates 

These templates of  Web pages serve as guides to create pages where you can then insert your own text and images.  You can also modify the information contained in them.

STEP 2: ENTERING TEXT IN YOUR HTML DOCUMENT

In order to enter text to be displayed by the browser, you must type the text between the <BODY> AND </BODY> tags.  In fact, all the contents of your Web page must be placed between these tags.  All other information entered before or after the <BODY> AND </BODY> tags will be used to describe your document to the browser and to the server.

If you want to make text bold, first selected the text and then click on the  Bold icon found in the Common tool bar.   In the edit window you will find that the tags <B> AND </B> are inserted to indicate that the selected text will be displayed in BOLD letters. 
<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
<META NAME="Description" CONTENT="Creating a Web page">
<META NAME="Keywords" CONTENT="page, web">
<META NAME="Author" CONTENT="Visicom Media">
<META NAME="Generator" CONTENT="AceExpert">
</HEAD>
<BODY>
<B>Creating a Web page with AceExpert.</B>

</BODY>
</HTML>

If you want to display text in italics, first selected the text and then click on the   Italic icon found in the Common tool bar.   In the edit window you will find that the tags <I> AND </I> are inserted to indicate that the selected text will be displayed in ITALICS.

<HTML>
<HEAD>
<TITLE>Document title</TITLE>
<META NAME="Description" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Author" CONTENT="">
<META NAME="Generator" CONTENT="AceExpert">
</HEAD>
<BODY>
<I>Creating a Web page with AceExpert.</I>

</BODY>
</HTML>

You can add or modify text attributes such as size, color, and font.  To do so, select the text to be modified and then click on the  Font icon found in the Common tool bar.

CENTERING TEXT

You can center text by selecting the desired text and then clicking on the  Center icon found in the Common tool bar.  The text which you had selected will be placed between the <DIV ALIGN=CENTER> AND </DIV> tags.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 TRANSITIONAL//EN">
<!-- CREATION DATE: 18/01/99 -->
<HTML>
<HEAD>
<TITLE></TITLE>
<META NAME="Description" CONTENT="Creating a Web page">
<META NAME="Keywords" CONTENT="page, web">
<META NAME="Author" CONTENT="Visicom Media">
<META NAME="Generator" CONTENT="AceExpert">
</HEAD>
<BODY>
<DIV ALIGN=center>Centered text</DIV>

</BODY>
</HTML>

INSERTING A LINE BREAK

To insert a line break in your document, click on the  Line Break icon found in the Common tool bar.  This command will add the <BR>   tag to your document.
To insert a paragraph in your document, click on the  Paragraph icon found in the Common tool bar.  This command will add the <P> tag to your document.

STEP 3: DISPLAYING RESULTS IN THE BROWSER 

To display the results of your HTML document, you can use the internal browser included with AceExpert.  By default, the internal browser appears at the bottom of the edit screen.
To view the results of your HTML document, click on the  Start Internal Browser icon on the standard tool bar.  Click on the  Refresh icon to update your browser window.  This icon is found between the edit window and the internal browser. You can close the internal browser by pressing F4.  Press F4 again to open it.

Please note that the internal browser is not as complete as the external browser.  Therefore, it is suggested that you use the external browser to preview the final changes to your HTML document before you publish it on the Web.
To use the external browser, you must click on the  Start External Browser icon found in the Standard tool bar.  This command will open either Netscape   or MS Internet Explorer  browser and load the HTML document automatically.
If you have not specified a browser, the "Start External Browser" command will call the “General Preferences” menu, where you will be able to specify the directory in your hard disk which contains the browser you want to use to display your HTML document.   If you don’t know exactly in which directory you have your browser, select the desired browser, Netscape  or Microsoft Explorer  .  Click on the   Search button.  Once AceExpert finds the desired browser, the complete directory path appears on the text box in the lower part of the General Preferences window.  
Just click twice on the path and then click on OK.  

STEP 4: INSERTING AN IMAGE IN YOUR DOCUMENT 

To insert an image in your document:

Place the cursor in the desired position and  click on the  Image icon found in the "Specialized" tool bar. In the text box Source, search for the desired image by clicking the  Open icon found to the right of the text box.  The “Open a graphic file window” opens.
 For example, you can find images in AceExpert’s folder in the following directory: 

c:\Program Files\AceExpertFTP\adv\adv2.gif

	The preview window displays the chosen image.  The image must be in GIF or JPG. format.  The text boxes Alternative Text and Name are optional.  

Click on the OK button.

The following command is entered in your document:
 
<IMG SRC="path to image file" BORDER=0 WIDTH=value HEIGHT=value>

	In order to minimize the risk of errors, it is recommended that you store all your images in the same directory as your HTML document.  This way the directories for your image files will not be written in your HTML document's code.

STEP 5: INSERTING A HYPERLINK IN YOUR DOCUMENT 

A hyperlink represents a link which makes reference to an HTML document or to an image.  The following is an example of a text link:

Active Link

As shown in the example, a hypertext link is usually underlined.
There are two types of hyperlinks, external and internal.  External links make reference to another HTML document, while internal links make reference to a destination within the HTML document. 

	HTML1 Document		HTML 2 Document	
	hypertext link

			

The internal link references a destination inside the same HTML document.

	HTLM Document	
	
Hypertext link

Contents

Destination

To insert an EXTERNAL LINK in your document:

Create a second HTML document that will serve as the destination for the external link.  In your first HTML document, select the text or image that you will use as a hyperlink.  On the Specialized tool bar, click on the  External link button.  In the text box Reference to an external link, search for the file using the   Open button.

Note:	The destination filename must not contain any special characters or spaces because some browsers do not display filenames of this type.

In the  “Link Content” window, you can view the contents of the referenced link.  

Click the OK button.

The following command will be added to the document:

<A HREF="Path/Filename"> Text or image acting as the hyperlink </A>

To insert an INTERNAL LINK to your document:

Select the text or image that will act as the hyperlink.  In the Specialized tool bar, select the   Internal Link button.

If the destination for the hyperlink was not previously identified:

In the text box “Name of the new link” enter a name for the internal link.  In the “Choose the destination line of the link” window  you can view the contents of the document.  Select a line in the document from the window that will serve as the destination line.

If the destination for the hyperlink was already identified:

Select the “Existing Destination” tab.  From the “Existing Destination” window, choose the desired destination for the link.

The following commands are inserted in the document:

<A HREF="#AnchorName"> Text or image acting as the hyperlink </A>
(location of hyperlink in your document).

Note:	the  #  symbol indicates the link is internal.

<A NAME="AnchorName"> Text or image acting as the hyperlink </A> 
(location of hyperlink in your document)

STEP 6: ADDING A BACKGROUND IMAGE OR CHANGING THE BACKGROUND COLOR OF YOUR WEB PAGE 

When you want to add a background image, change the background color, or change the color of the text and of hyperlinks in your Web page, you must click on the  Document Body icon found on the "Specialized" tool bar.  The BODY command affects the complete body of the document.  When you click on this icon, the program will open the “Document Body” menu.

It is important to note that there is only one BODY command in an HTML document.  It is not possible to have two BODY commands in the same document. 

If you want to add a background image, click on the  BODY button and then search for the desired file by clicking on the  Open button to the right of the text box “Background image”.  You can view the image you choose on the Preview window.  The image must be in GIF or JPG format.

In the Color options window select the desired color by pressing the  Color button.  The color chosen appears on the button.

Whenever you want to make changes to your Web page, click once more on the  Body button.  The parameters will be automatically modified according to the changes you choose.

The background image must be in GIF or JPG format.  It is important that its size in Kilobytes (Kb) not be very large, otherwise it will take very long to download.  Ideally, a background image should not be larger that 5 Kb.  You must also make sure you do not select an image which will make reading text difficult.  It is recommended that you do not use background images that prevent visitors from reading the contents.

STEP 7: INSERTING A TABLE IN YOUR DOCUMENT 

Tables are generally used to compare data or to format a page (column or row alignment).  

To insert a table in your document: 

Position the cursor the location where you want to insert a table.  Click on the  Insert Table icon found in the “Tables, Frames and Lists” tool bar. 

You must select the number of columns and rows for the table.  Once you have made this selection, the “Table window” will be displayed.  Here you can indicate the different properties for the table (length and height of cells, colors, borders, etc.).  You can also enter text directly in each of the cells.

If you want to modify the contents of cells or change certain properties of the table, place your cursor inside the <TABLE> tag in the edit window, press the right mouse button and select the first option “Edit Table”.

You can view the table you created using the internal or external browser.

Following is an example of the display in the internal browser:

STEP 8: INSERTING A PREDEFINED JAVA APPLET IN YOUR DOCUMENT 

A Java applet is an application that runs directly from your Web page and is displayed on the browser.  With an applet you can insert a banner, text with special effects or a drop-down menu.  Java applets are compatible with all platforms (Windows, Mac and Unix).

AceExpert comes with 50 predefined Java applets.

To insert a PREDEFINED Java applet in your document:

First you must save your HTML document.  From the “Java” tab, you can choose from several categories of predefined applets.

Following is a window displaying different applets:

			

From the “Java” tab, select an applet from the different categories of banners, tools, special effects or  menus. When you click on the icon of any of these categories, a window opens and you can choose an applet from the list displayed.

The appletHelp button found in all the windows of the different categories brings up a description of the parameters and displays examples of how to use them.

If you want to modify some of the applet’s parameters, click on the “Parameters” tab.  Click on the “Show Preview”  button found at the bottom of the window, in order to preview the applet. 

Click the OK button.

A brief explanation of the text boxes found in the menu follows:

In the text box Code the file necessary to run the application is inserted.  This file contains the extension .class and must have a relative address.  The address cannot be an absolute address.

In the text box  Code Base URL you can enter the URL address that contains the Java applet.  If this attribute is not entered, the current URL of the current document is used.  This attribute is optional.

In the text box Alternative text you can enter a message that is displayed while the application is loaded.  It is specially useful to display a message in browsers that cannot run Java applets.  This attribute is optional.

In the text box Name you can write a name for the applet.  This is used as a reference for other applets found on the same page.  This attribute is optional.

In the text box Alignment you can indicate the alignment for the applet.  This option is mandatory.  The default value is centered.

The JavaScript Access allows access to the Java parameters using Javascript functions.

In the text boxes Width and Height,  you can enter the size of the window where the applet will run.  These values are mandatory.

In the text boxes Vertical space and Horizontal space you can enter the free space to be placed in  the top/bottom and left /right area around the applet.  These values are expressed in pixes and they are optional.

By selecting the “Parameters” tab, you can make changes to the applet’s parameters.  To do so, you have to insert a name and a value for the applet and press the “Add” button.  You can also edit and erase an existing parameter by pressing the corresponding buttons.  Click on “Show Preview” to view the applet.  Click on the OK button.

EXAMPLE:

<APPLET CODE="http://Site" WIDTH=value HEIGHT=value > 

  <PARAM NAME="applicationAttribute1" VALUE="value">
  <PARAM NAME="applicationAttribute2" VALUE="value">
  <PARAM NAME="applicationAttribute3" VALUE="value">
  <PARAM NAME="applicationAttribute4" VALUE="value">

</APPLET>

To modify the HTML code of an existing applet:

In the edit window, find the applet you want to modify and place the cursor inside the <APPLET…>  tag, then click with the right mouse button and select the first option, Edit APPLET.

STEP 9: INSERTING A PREDEFINED JAVASCRIPT OR DHTML SCRIPT IN YOUR DOCUMENT 

From the Help menu, choose Javascript Tutorial that brings up a clear and detailed description of how to use Javascript in Web pages.

The two buttons after the Tutorial button in the “Javascript” tool bar are used to insert a new Javascript function in your document and to obtain a list of objects, properties, methods and events found in the Javascript language.

The remaining buttons (12) are used to insert predefined Javascripts in your document.

Description of AceExpert’s Predefined Javascripts:

 Banner
Inserts a banner with text that scrolls from right to left inside a scroll box.

 Time/date
Inserts a text box in your document that displays the time or date.

 Scrolling List of URL’s
Inserts a box with  a scrolling list where each item makes reference to a URL.  When the user clicks in the scrolling list, he is presented with a list of addresses.  The user can then select a specific address and the browser displays the URL.

 Text gradation
Inserts in your document a message with text gradation that reflects the color of your choices (red, green or blue).  The line of text starts with the color chosen and ends with the color white.

 Select images
Inserts in the document a list box or a drop-down box.  Each option in the menu is associated with an image that is displayed to the left of the box when the user selects an option.

 Alternatives link images
Inserts an image that acts as a hyperlink and a second alternative image that is displayed after the first image, when the user moves the mouse over the hyperlink.

 Rotating images
Inserts in the document a series of images that are displayed one after the other.  These images are usually publicity ads.

 Explanation window 
Inserts a hyperlink in your document.  When the user clicks on the link, an explanation window is displayed.  You can enter the text that will appear on the window, the font, size and color.

 News box
Inserts a box with multiple lines in your document where you can insert one or several information messages.
 
  Screen flash
This Javascript creates a screen flash when the document is loaded.  You can indicate the starting color, the ending color and the number of color gradations between the two.

 Password
Inserts a box for a password (minimum security) in your HTML document.  The password corresponds to the name of a file without the extension.  The referred document must be placed in the same directory as the file that makes reference to it since the password includes the path and filename of said referred file.

  Window
This script inserts a new browser window when your page is opened.

To insert a PREDEFINED DHTML script:

From the Help menu, choose DHTML Tutorial.  Here you will find all the necessary information on how to use DHTML scripts.  The other buttons, Style Effects, Special Effects, Menu, Text Transition and Image Transition are used to insert predefined DHTML scripts in your Web page. 

Description of AceExpert’s predefined DHTML scripts:

   	Style Effects

	This DHTML script changes the font, color or style of a line of text when the mouse is moved over it.

  Special Effects
This DHTML script makes text move from right to left of from left to write inside the HTML document.

  Menu
This  DHTML script displays a submenu when you move the mouse over an item in the menu.

  Text transition 
This DHTML script displays text in a transition with special effects.

  Image transition 
This DHTML script  creates a special transition effect between two selected images. 

STEP 10: TRANSFERRING YOUR WEB PAGE TO YOUR SERVER WITH ACEFTP

Introduction to AceFTP

AceFTP is a fully functional program that allows users to transfer files between their computers and the Internet server.  The program can connect to all types of servers.  Download AceFTP from the following address:
http://www.visic.com/aceftp/

The following is AceFTP’s main window:

How to use AceFTP in four easy steps:

First Step:

To start an AceFTP session double click on the AceFTP icon and the following dialog window is displayed:

You then have to supply the following information:

Name of site, 
Host address, 
User ID,  
Your password. 

Then click on the OK button.

To enter parameters for a new connection, click on the “New button”.  To remove a site, click on the “Delete” button.  To apply changes to an existing site, click the “Apply” button.

Select the “Additional” tab if you want to specify default directories to be opened when you start a connection.  It isn’t mandatory to enter the fields found in the “Additional” tab.

Second step:

How to upload files to the server

To transfer files to the server, you must start AceFTP and have the main window open.  From this window there are two methods you can use to upload files:
Method 1  : Use the arrow button 
Method 2 : Use Drag & Drop.

METHOD 1  : USE THE ARROW BUTTON 

	You must have established a connection with the server and have the main window open:
To upload your files:
Be sure you have displayed the correct directories that contain the files you want to transfer.  Select the file or files.  Click the  Upload arrow.

METHOD 2  : DRAG & DROP

	You must have established a connection with the server and have the main window open:
Be sure you have displayed the correct directories that contain the files you want to transfer. With the mouse, select the files you want to upload. Drag and drop the selected files to the host window.

Third step:
To download files from the server you must have the main window displayed.  There are two methods to download files:
Method 1  : Use the arrow button 
Method 2 : Use Drag & Drop.

Fourth step:
AceFTP integrates perfectly with AceExpert HTML editor.  Therefore, you can use the combination of both programs to create your Web pages.

While you are on AceFTP’s main window, you can edit a file found in your computer or on the server.  To edit a file with AceExpert working from AceFTP, simply select the desired HTML document and then click the  Edit with button.  Next, select AceExpert.

	Download AceFTP’s electronic manual at the following address:
		http://www.visic.com/AceExpert/ressources.html

CONCLUSION

	We are happy to see that you went through the tutorial and we hope it answered the main questions you had on creating Web pages.

	For comments and suggestions, please contact us at the following address:
sabinec@visic.com

USEFUL ADDRESSES 

Visicom Media inc.	http://www.visic.com/home.html
1170, Senecal St
Brossard, Qc
Canada J4X 1L2
Phone : (450) 672-0401
Fax : (450) 672-9586

Frequent Questions:	http://www.visic.com/aceexpert/faq.html

Customer Services:	http://www.visic.com/aceexpert/customer.html

Technical Support:	http://www.visic.com/aceexpert/help.html

Products :

AceExpert			http://www.visic.com/aceexpert/index.html

AceFTP			http://www.visic.com/aceftp/index.html

Web Clip Empire		http://www.visic.com/webclip250e/index.html