You are on page 1of 47

A4DeskPro

Creating a New Project

Creating a Flash Website using the A4DeskPro Flash Website Builder basically
involves creating a project. You can create as many projects as you wish. Each new
website requires creating a new project. In this example, we will provide you with
instructions to create a basic website. We will then explain further how to tweak and
modify other attributes of the website in the subsequent topics.

To create a new project

1. From the File menu click New. (Speedkey: Ctrl + N)

- or-

2. Click the New button from the Toolbar. The Create New Flash
Website dialog opens where you can select your new Flash template for
your website.

Note: By default, all templates are displayed as thumbnails. In all there are 6
themes including Business, Artworks, Cyber, Clean, Leisure and Standard. You can
jump to a particular page by choosing the page number from the Jump to Page
Spin box and then clicking the Go button. You can also display the templates in
List View. Once you click on a template on the left, it can be previewed in the
window on the right.

3. Select a template for your website in the gallery and click Open.
4. The selected template is instantly inserted into the Preview panel.

1
Note: To use an A4DeskPro template you will have to register it. See the
Registration topic for more details.

5. You can now build the template to suit your requirements for your website
by using the Menus/Design/HTML/Edit Item panel and the Main
Information/Menu Header/Text panels. For modifying the main information of
your website template, please see the Creating and Editing Main Information
topic.

6. To save the project, select Save As (Save if the project has already been
saved) from the File menu or click the Save button on the Toolbar.
7. If you are saving the project for the first time, the Windows Save As dialog
opens where you can save the project file. Otherwise, clicking the Save from
the File menu or the Save button on the Toolbar saves the file without
prompting for file name.

Note: The default filename extension of the project file is *.a4p and it is stored
in the Projects folder by default.

8. To close a saved project, select Close from the File menu or click the Close
button from the Toolbar. (Speedkey - Ctrl+W) If changes to a project
file hasn't been made, the project file is closed. Otherwise the following
dialog is displayed.

2
9. Click Yes to close the project.

Opening and Editing Existing Projects

You can open existing projects and then modify or edit them at later stages. There
are two common methods of opening existing projects.

To open an existing project using the Wizard

When you open the A4DeskPro application, the Starting Wizard prompts you
to create or open saved projects. Existing projects are displayed in the
Recent Projects box. You can open saved projects either by using the Open
Project radio button option or the Recent Projects radio button option.

1. Select the Open Project radio button. The Project Browser dialog is
displayed.

3
2. Browse through the folders for your project. By default the browser opens
the file in the folder where you last saved the file.
3. Select the project file and click Open and the project file is opened.

Tip: The Starting Wizard opens every time you open the A4DeskPro Flash
website builder.

4. To open a project file listed in the Recent Projects box, select the Recent
Projects radio button and select the project you wish to open from the box,
and then click Next . The project file is opened inside the Preview and
Workspace panel.

To open an existing project using the Menu bar and Toolbar

1. From the File menu, select Open. (Speedkey - Ctrl+O) Or click the
Open button on the Toolbar.
2. The Open Dialog opens. Navigate to the location of your project file
(of type *.ppl) and select it.
3. Click Open. The project file is opened in the Preview and
Workspace panel.

Tip: Instead of the above option you can also click the down arrowhead of the
Open button and it will display the Open Dialog in 2. above. You can also
position your mouse over the Recent Projects option from the File menu and
select the most recently opened project file that is displayed.

4. Edit the project file as per your requirements. For more information on
how to edit the project file see the topic Creating a New Project.

Creating and Editing Main Information

When you select a template for creating your website by default Main Info is
selected in the folder tree under the Menus tab. The associated Main Information
panel is also opened at the bottom of the program main screen. Using this panel

4
you can edit or modify your website's main page title, description, contact e-mail
displayed, footer, images, set background music (by default, it plays at start) and
set colors to fonts, site and scroll bar. Also, you can choose to skip the introduction.

To create or edit the main information about your website

1. In the Main Information panel (image displayed above) enter a title for
your website in the Site Title field. You can also access this field by
selecting the Site Title option of the Edit menu.

Note: When you move to another field the title is instantly reflected on your
template in the Preview and Workspace panel after a refresh. This process takes
place for all fields that you create or edit. Most of the fields you edit is already pre-
filled with the contents that are already displayed on your template in the Preview
and Workspace panel.

2. Enter a brief description or caption about your site in the Description 1


field. You can also access this field by selecting the Description 1 option of
the Edit menu.
3. Enter your e-mail of your company or yourself by modifying the contents of
the Description 2 field. You can also access this field by selecting the
Description 2 option of the Edit menu.

Note: As you enter information into the two fields mentioned above you can also
alter their color, font size and other attributes. For this the text editing buttons
appear below when you are filling or editing these fields. These are described in the
table below.

Button Description
Makes the text bold. Highlight and click the button.
Text in the field is enclosed in <b> and</b> tags.
Makes selected text in Italics. Text in the field is
enclosed within <i> and </i> tags.
Underlines selected text. Text in the field is enclosed
within <u> and </u> tags.
Click on it to invoke the Color dialog from where you
can choose or create custom colors for your text.
Click this button to invoke the Size dialog and set
the size for your text.
Click this button to invoke the Font dialog and set
the font for your text.
Positioning your cursor between a pair of tags and
clicking this button removes the tags.
Click this button to break a new line.

5
Click this button to make a list.
Click this button to insert a link to file or URL.
Click this button to make an alignment to left, center
or right.

Note: For more control on the web pages styles and fonts of the various
elements of the web page click the Font Settings button. For
more details on the Font Settings button click here.

To add background music into your website

1. To add background music, you can select a music file (*.mp3) from the drop-
down list under Background Music. The page refreshes and the selected
music file begins playing.

There are some options you can choose for Background Music :

o No Music (selected by default) : Not to associate a music file to the


web page.
o Import music : Open the windows Open dialog using which you can
browse for music files on your computer and have them added to
your Flash site.
o Browse music folder : Display the contents of the music folder.
2. You can set the volume of the music being played by sliding the Volume
control slider to the desired volume level.

To set colors for the various segments of your website

1. To set colors for the various segments of the website select the appropriate
element from the drop-down list under Site Colors.
2. Enter a hexadecimal color code in the Color field or click the color button
adjacent to the Color field. The Color palette dialog opens from where you
can choose or create custom colors.
3. To set the opacity for the color slide the slider in the Opacity field right or
left according to your requirement. Sliding to the right increases the opacity
and sliding the slider to the left decreases the opacity.
4. To set colors for the scroll bars of the website select the appropriate scroll
bar from the drop-down list under ScrollBar Colors.
5. Enter a hexadecimal color code in the Color field or click the color button
adjacent to the Color field. The Color palette dialog opens from where you
can choose or create custom colors.
6. You can also set colors for the Scroll bars and Site using the Design tab of
the Menus/Design/HTML and Edit Item panel as it also features the same
Site Colors and ScrollBar Colors options.

To change the display size of your website

You can display the contents of your web page in a variety of ways using the radio
buttons and choices adjacent to Display Size located at the bottom. The folowing
buttons and checkbox are used to change the display size of your website :

6
• Best Fit (Auto Scale) : Display your web page in the web broswer in a best
fit manner.
• Fixed : Display your web page in a fixed width and height scale. You can
enter your desired display size in the Width and Height boxes.
• Center Vertically in Page : Display the contents of your web page
vertically with center alignment.

To auto-refresh preview of your website

You can also set the web page to auto refresh by making sure you enable the
Enable/Disable Auto-refresh button on the Toolbar.

To refresh, preview or publish your website

The following buttons are used to refresh, preview or publish your website :

• Refresh : Refresh the contents of the Preview and Workspace panel. You
can also do it by clicking the Refresh Preview button on the toolbar or
select Refresh Preview from the View menu (Speedkey: F5).
• Preview : Preview how the website will look while creating or editing the
Main Information or performing similar activities. You can also do it by
clicking the Preview in Browser button on the toolbar, or select
Preview in Browser from the View menu (Speedkey: F11), in which case
the web page will be opened in a new instance of your default web browser.
• Publish : Publish your web page. For more details on using the Publish
button, please refer to the Publishing a site topic.
• FTP : Publish your web page to a site on the internet via FTP. For more
details on using the FTP button, please refer to the Publishing a Site to FTP
topic.

To save the information about your website

To save the information that you have created or edited click the Save Project
button on the toolbar or select Save from the File menu. (Speedkey: Ctrl +
S)

Note: Saving for the first time using File -> Save opens the Save As dialog
where you can browse and select the folder and file to save. You can save the
project at any time during Creating and Editing the Main Information or while doing
the same for other parts of the project.

Inserting Site and Content Page Image

You can insert an Site Image e.g. Logo Image into your website. Also, you can put
some Content Page Images into different parts of your website to make it
attractive. There are two ways of inserting the images into your website. You can do
it eihter by using Images Resizer or Image Manager.

To insert an image into your website

By using Images Resizer

7
1. To insert an image into the web page, under Site Images, select either
Image 1 or Image 2 from the drop down list.

Note: Usually, Image 1 refers to the logo image on the web page and Image 2
refers to the banner image on the page. To display the image grids of the images on
the web page, check the Show Image Grids checkbox. You can also activate or
deactivate grid lines using the Show Image Grids option from the View menu.

2. To associate an image for Image 1 or Image 2 click the folder button .


The Images Resizer dialog opens. Note that the folders and files are listed
in separate boxes. Once an image is selected it is displayed in the bigger box
on the right. By default all image file types are displayed for the folders but
you can filter for the types you want by selecting the appropriate image type
from the File Type drop-down list. You can choose to have a best fit image
or original image size. Also, you have four methods to display the image
including None, Ratio, Bestfit and Full.

3. Browse through the folders to select an image of your choice and click
Import Image to import the image into the field. The image of the template
in the Preview and Workspace panel is refreshed to display the imported
image.
4. If you wish to resize the selected image (to fit the size of the image
displayed on the web page), you can click the Resize Image button.
5. The Resize Image dialog is displayed.

8
Note: You can also invoke the Images Resizer dialog after you have imported a
image by clicking the Images Reziser button next to the image's name in the
field. However this time the Save button is displayed instead of Save & Import in
the dialog.

6. Set the size of the image by setting values for width and height in the
appropriate fields for User Image Size in pixels. Or you may click Load
best fit setting to fit the image within the confinements of the limitations
on the page.
7. Set the quality of the image to be High, Standard or Low.
8. Check the auto scale check box to auto scale the image.
9. Click Apply to instantly apply the changes.
10. Select the suitable brightness, contrast and choose your desired method to
display the image.
11. Click Save & Import to import the image. The image of the template in the
Preview and Workspace panel is refreshed to display the imported image.
12. Proceed similarly to associate and import the image for Image 2 for the web
page.
13. To delete an imported image you can disassociate the imported image file to
the Image 1 or Image 2 by first selecting either of them in the drop-down list
and then clicking the Remove File button.
14. To set the opacity for the image slide the slider in the Opacity field right or
left according to your requirement. Sliding to the right increases the opacity
and sliding the slider to the left decreases the opacity.

9
By using Image Manager

(You can find the "Imager Manager" by selecting Edit-->Image Manager in the menu
bar or pressing the "Image Manager" icon in the toolbar)

1. Select the image from the list box in Site Image or Content Page Image
2. Click Load Image to open the Images Resizer.
3. Follow the steps in Images Resizer to insert an image into your website.
4. You can also click Edit Image to edit an imported image.
5. Or click Clear Image to clear the selected site image or content page
image.
6. If you select an item in Content Page Image, and it show "Not applicable",
probably this content page is not in the "Text" or "External Image/Swf" Type

Create a Contact Form

Having an online contact form allows web visitors to fill out their feedback,
questions and provide suggestions for improvement. You can create a contact form
directing the message to your desired email address in your A4DeskPro project with

10
a few easy steps. The contact form could be opened from a hyperlink within a page,
or directly from the menu.

Note: Your server should support PHP.

To create or edit a contact form

1. Click the Contact Form Settings button on the Toolbar, or select Contact
Form from the Edit menu.

2. The Contact Form Settings window opens.

11
3. In the Display Information section, the company name and baseline has
already been filled. Enter a title of your form in the Form Title field, and
provide a short description of your form in the Description field. The
description will be shown below the title of the form.
4. In the Send to section, enter your desired email address in the Your Email
field for the submitted forms, and set the title of the email in the Subject
field. When the form is submitted, the message will send to the desired
email address with your predefined subject.

5. Click the Preview button or select Preview in the Display Information


section to preview the form. Your default web browser will be launched and
show you how the form looks like.
6. Click the Apply button and the contact form is set.

7. You can further adjust the caption of the fields and the warning messages by
clicking More Settings to the bottom right side of the Contact Form
Settings window. This is useful if you want the form to submit other
information, or to localize your form with another language.

8. In the Contact Form Caption section, you can replace the standard names
with your captions. For example, you would like to know the State where

12
your visitors come from. Then you may replace the caption Country with
State and the form will show State instead of Country in that caption.
9. In the Other Message section, you can replace these standard warning
messages with your own version of messages.
10. Click the Preview button to launch an instance of your default browser to
see the result, and click Apply to finalize the form.

Adding the form

There are 2 ways to add the contact form to your project:

• by adding as a hyperlink in the page content, or


• by pointing a menu item to the form page

Adding as a link within the page

1. Select the desired page in the item tree under the Menus tab of the
Menus/Design/HTML and Edit Item panel and click the Text radio button
in the Edit Item panel below. The Text tab is opened in the Main
Information/Menu Header and Text panel.
2. Use your mouse to put the caret on the place where you want to add the link
to the form.
3. Click the Form button under the panel and it opens the Insert a Link dialog.

4. The Link Address field has been automatically filled with the hyperlink to
the form, and enter a short description of the link in the Link Description
field.

5. Under the Show Link In section, you can specify how the form page is
displayed in your default browser:

13
• Same window: the form will be opened in the same browser window.
• Popup window: the form will be opened in a new popup window.

Note: Some browsers may block popups by their default popup blocker.

• Target window: enter the name of the target window and the form will be
opened to the desired window. This is useful if you have created a website
using Frames.
• Javascript Popup with custom size: similar to popup window but it needs
Javascript support. You can specify the width and the height of the popup
window here.

Note: Javascript is required to be supported and turned on in your


browser.

Adding the form as part of the menu

1. Select the desired page in the item tree under the Menus tab of the
Menus/Design/HTML and Edit Item panel and click the Link radio button
in the Edit Item panel below. The Link tab is opened in the panel below.
2. Click Set as Contact Form and the Location field is automatically
populated with the hyperlink to the form.

3. You may select the Target Window by using the arrow to the right of the
field, or enter your desired target directly in the box.

Adding multiple music tracks using built-in music player

A4DeskPro allows users to add mutliple MP3 songs using its built-in music player.
Putting music or audio recordings accessible on your website can effectively spice
up your site, which in turn keeping your visitors stay longer and explore the service
and offerings your site provides.

The steps of creating a built-in music player is very easy, you can follow the steps
below:

1. Select Edit-->Music Player Settings or click button on the


toolbar.

14
2. A pop up window is now displayed, click to insert music tracks.

3. The song name would be the same as file name by default, feel free to modify it
according to your preferences. Set the size of music player by typing pixels in width
and height. If you want to auto-play music when page opens, check the box 'Auto
play when start music player' Select the menu page where you would like to display

the music player. Click to apply the settings.

15
Another option to add the player to the page you want:

Select the Menu item and choose [Image/Album/Video] in Edit Item Panel, then
select [Load A4DeskPro A4DeskPro Music Player]

16
5.You can always preview the website with the built-in music player by clicking
[Preview] button and select the page where you insert the player.

6. Save and publish the A4Desk Pro site.

Adding1 multiple photos using built-in photo gallery

A4DeskPro allows users to insert multiple photos using its builit-in gallery. The
gallery is the perfect tool for sharing joyous and memorable moments with families
and friends, while it can also showcase the product and service of the company.

The steps of creating a built-in gallery is very easy, you can follow the steps below:

1. Select Edit-->Built-in Gallery Settings or click button on the


toolbar.

2. A pop up window is now displayed, click [Add] to insert images in jpg, gif or png
format.

17
3 Add description in Description field to make the photo informative, a hyperlink can
also be inserted in the photo. Choose where the link will be displayed. Click [Close]
when finish adding photos.

4.Select the Menu item and choose [Image/Flash] in Edit Item Panel, then select
[Load A4DeskPro built-in gallery]

18
\

5.You can always preview the website with the built-in gallery by clicking [Preview]
button, and click the back and next arrow buttons to see other photos.

19
6. Save and publish the A4Desk Pro site.

Adding multiple videos using built-in video player

A4DeskPro allows users to add mutliple videos in FLV format using its builit-in video
player. The video player can introduce the brand to the customers in a more
interactive manner, that's why it is considered to be one of the best marketing tools
these days. With the built-in video player, users can add FLV video and capture the
video thumbnails easily.

The steps of creating a built-in video player is very easy, you can follow the steps
below:

1. Select Edit-->Video Player Settings or click button on the


toolbar.

2. A pop up window is now displayed, click [Add Video] to insert videos in FLV
format.

20
3. Add description in Description field to make the video informative. Set the video
player size.

Click the play icon and click to capture video thumbnail. Select the
menu page where you would like to display the video player.
Click [Close] to apply the settings.

Another option to add the player to the page you want:

Select the Menu item and choose [Image/Album/Video] in Edit Item Panel, then
select [Load A4DeskPro built-in gallery]

21
5.You can always preview the website with the built-in video player by clicking
[Preview] button and select the page where you insert the player.
To browse other videos, you can click the thumbnail images or the previous/next
button .

6. Save and publish the A4Desk Pro site.

Create a shopping cart using A4DeskPro

22
A4DeskPro features a rich set of shopping cart to assist people making purchases
online, it makes setting up your own online store easy and affordable.

Creating a shopping cart is very easy and simple, you can follow the steps below:

1. Select Edit-->Shopping Cart Settings or click button on the


toolbar.

2. A pop up window is now displayed, you can set the shopping cart size, title,
footer, modify the text of purchase button, etc., under General Settings tab in
Shopping Cart Settings.

23
3. You can click on 'Background Settings' tab to change the background color or add
a background image.

4.Click on 'PayPal Settings' tab, type in PayPal account, select default currency and
currency symbol.

5. When Miscellaneous tab is clicked, users can style the text for item title, price,
button text, etc.

24
6. Click or button to add the item(s). Fill in the
name, item name and description, image description tooltip, item price as well as a
purchase link of the item. You can also make use of the text style icons at the top to

change the style of the text. Select an item image by pressing . You can
generate a PayPal link for each product by clicking

5.Select the page that you want to display the shopping cart, and click
to apply the settings.

25
6. Select 'View->Preview in Browser', then click the menu page with the shopping
cart added to view the shopping cart.

26
7. Save and publish the A4Desk Pro site.

Creating a pop-up window of a specific size

You can create a pop-up window of a specific size by inserting a text link or a link in
the menu item, which can be done by the following steps:

Step 1: Select the menu item in Menus edit item panel

With a project opened in A4Desk Pro,


select the menu item you would like to
open the pop-up window or add the text
link in Menus edit item panel.

27
Step 2: Link to the pop-up window

Option 1: Insert a link in the menu item

1. Select "Link" option under Edit Item box

2. The "Link" tab will be displayed at the bottom of the screen, click the "Custom
Link" button

Option 2: Insert a text link

1. Select "Text" option under Edit Item box

28
2. The "Text" tab will be opened, select the text you want to open the pop-up
window,
click the "Link" button at the bottom of the screen.

Step 3: Set the size of the pop-up window

1. Enter the URL in "Link Adress" box, select "Javascript Pop-up with custom size"
and enter
the specific width and height. Click "Add" button to apply the settings.

29
2. Save and publish the project. When user clicks the menu item or the text link,
the pop-up window of a specific size will be displayed.

Adding a Paypal link

You can add a Paypal link using a text link or a link in drop down menus, which can
be done by the following steps:

Step 1: Sign up a Paypal account

Go to http://www.paypal.com to sign up a Paypal account.

Step 2: Select the menu item in Menus edit item panel

With a project opened in A4Desk Pro, select the menu item you would like to open
the Paypal payment site or add the text link in Menus edit item panel.

Step 3: Link to the Paypal payment site

Option 1: Insert a link in the menu item

1. Select "Link" option under Edit Item box

2. The "Link" tab will be displayed at the bottom of the screen, click the "Custom
Link" button

30
Option 2: Insert a text link

1. Select "Text" option under Edit Item box

2. The "Text" tab will be opened, select the text you want to open the Paypal
payment site,
click the "Link" button at the bottom of the screen.

Step 4: Generate Paypal payment link

1. A pop-up dialog box will be displayed. Enter all the information under "Generate
apply the settings, and
click "Generate Payment Link" button, then a URL will be displayed in "Link
Address". Click "Add" button
to apply the settings.

31
2. Save and publish the project. When user clicks the menu item or the text link,
it will redirect to the Paypal payment site.

Building multi language websites

Does your website attract visitors who speak in different languages? Many websites
need to be developed in several languages to target different audiences. Thus, it is
very important to find a website building software that has multi language feature
with a user-friendly interface. This guide covers building the multi language website
(Italian and German)with A4DeskPro- the website builder which allows you to create
a flash website without any programming/coding skill required.

1. Download the A4DeskPro website builder software and install in your computer.

2. You should have the domain name for uploading the website to the server, e.g,
http://www.server.com and we are going to publish two folders in which the paths
can be http://www.server.com/Italian/ and http://www.server.com/German/.
Subfolders of Italian and German can be created via cPanel or other FTP tool such
as Filezilla.

3.Run A4DeskPro software , select "Create New Site" and then click "Next", choose
the template and click "Open".

32
4. The project is now opened and we are going to create an Italian site first. Click
the menu tab, fill the website with content and insert the image.

4. In "HTML and Meta Tag Settings", type the following HTML code in the text area:

33
5. Click "Preview" tag, the text link is created. When user clicks the link, it will
redirect to different page.

6. Select "File->Save Project" when it is done.

7. Select "File->Publish to FTP", a pop-up window is displayed. Fill in the information


for FTP settings. For details, please visit A4DeskPro User Guide.

34
Note: Please make sure you should upload the site to Italian folder as mentioned in
step 2.

9. For building a website for German, open a new project and repeat step 1-7.
Upload the site to German folder.

10. Please check our example by clicking here.

Linking other flash products into A4Desk Pro

You can link the flash products to the A4Desk Pro website using the link within the
content text or as a link in the menu item.

35
Just take A4Desk Flash Photo Gallery Builder as an example, you can follow the
steps below:

Step 1: Prepare the Photo Gallery Project

Create a project in A4Desk Flash Photo Gallery Builder first and publish the project.

The published files should include :


- photogallery.htm
- a4gallery (folder)

Upload all the above resource files to the server (e.g the root folder).

e.g http://www.server.com/photogallery.htm

Step 2: Select the menu item in Menus item edit panel

With a project opened in A4Desk Pro, select the menu item you would like to link
the
gallery or add the text link in Menus edit item panel.

Step 3: Link the A4Desk Flash Photo Gallery Builder into A4Desk Pro

Option 1: Insert a link in menu item

1. Select "Link" option under Edit Item box

36
2. The "Link" tab will be displayed at the bottom of the screen, click the "Custom
Link" button

Option 2: Insert a text link

1. Select "Text" option under Edit Item box

2. The "Text" tab will be opened, select the text you want to link the gallery,
click the "Link" button at the bottom of the screen.

Step 4: Link to the gallery

1. A pop-up dialog box will be displayed. Enter the URL in Link Address field,
you can select where the link will be opened in Show Link in section. Click Add
button to apply the settings.

37
2. Save and publish the project. When user clicks the menu item or the text link,
it will redirect to the gallery page.

For other flash products, they can also be linked to the A4Desk Pro
website using the above steps.

Using the Font Settings Button

The Font Settings dialog is a convenient option to set the fonts of several elements
of the web page from one convenient dialog.

To use the Font Settings dialog

1. Click the Font Settings button in the


Menus/Design/HTML and Edit Item panel or the Font Settings
button on the Toolbar or select Font Settings from the Edit menu . The
Font Settings dialog opens displaying the various styles for the various
elements of the page.

38
2. To change the font of a style click the Change Font button associated with
the style. The Font dialog opens using which you can change the font, font
size and font style.
3. To position the text click the button below the Change Font button and
select an option from the list.
4. To change the color of a style click on the color button. The Color dialog
opens from where you can select a color or create custom ones that you can
assign later.
5. To save a style click on the Save Font Settings button. The Save Font
Settings dialog opens.

39
6. Enter a name in the Style Name field and click Save.
7. To delete a style, select the style in drop-down box and click Delete. A
confirm dialog opens.

8. Click Yes to delete the style.


9. To apply the setting of styles to all new project check the Apply this
setting to ALL new projects checkbox.
10. To clear all font styles, select Remove font styles from the drop-down list
and click OK.

Working with HTML

A4DeskPro provides an easy method to work with the HTML source of your website.
The program lets you do this even without any knowledge of HTML. Creating meta
description and meta keywords can be done without tweaking the HTML code.

To use the HTML tab

1. Click the HTML tab in the Menus/Design/HTML panel. The HTML tab opens
to reveal the following.

40
2. Enter a title for the site in the Site Title field.
3. To create a meta description for the site enter a brief description related to
your site in the Meta Description field.
4. Enter a set of words related to your site in the Meta Keywords fields.

Note: Keywords are words or phrases that users use on the internet to search
for your site and are related to the contents of your site.

5. In the Memo Area field follow the instructions to create a memo. A sample
instruction is already included that can be changed to suit your
requirements. You can also remove it to remove the memo.
6. To change or set a color for the Background enter a hexadecimal color code
in the Color field under HTML Background Color or click the color button
adjacent to the Color field to open the Color dialog from where you can
select a color or create custom colors that can be assigned.
7. To import a background image for your web page click the folder button
associated with the HTML Background Image section and browse for the
image file on your computer using the Images Resizer dialog.. To edit or
resize the image use the Resize Image option of the dialog. For more
information on how to use the dialog refer the Creating and Editing Main
Information topic.

Note: All changes made under the HTML tab can be instantly viewed in the
Preview and Workspace panel. If the page does not refresh click the Refresh

button.

41
Publishing a Site

You can publish a site onto your computer or on a computer on a network.

To publish a site on a computer or on a computer on a network

1. Click the Publish button or click the Publish button on the


Toolbar or select Publish from the File menu. The Publish dialog is
displayed.

If Project is not saved, a confirmation box will ask you to save Project. You can
click "No" to skip the box and continue to Publish.

(NOTE: We recommend you to save the project. )

42
2. Using this dialog you can browse for folders and navigate to a folder of
choice or even create a new folder.
3. You can also publish onto CD and to include an autorun.inf file for the CD by
checking the Create autorun.inf file for CD-ROM autorun checkbox.
4. Finally click the Publish button to publish the website.
5. A confirmation box indicating that the site was published is displayed.

6. Click Yes to view the published site in your browser.

Note: For more details about Publish a site to FTP, please go to the Publish a site
to FTP page.

Publishing a Site to FTP

You can publish and upload your site to FTP directly from A4DeskPro. It is easy,
simple and convenient.

To Open the Publish and Upload to FTP

1. Click the FTP button or click the Publish and Upload to FTP
button on the Toolbar or select Publish to FTP from the File menu.
The Default FTP Settings dialog is displayed. You can also set the default
FTP settings by selecting FTP Settings from the Options menu. Note: If
you have not put in the FTP information, the Default FTP Settings dialog will
pop up automatically. You can also open this dialog by clicking FTP
Settings from the Options menu.

2. You can choose an upload option :


o A4DeskPro Built-in FTP wizard
It is our A4DeskPro FTP program. It is a easy and user-friendly FTP
program for you to upload the A4DeskPro Template.
o Windows FTP (require installation of MSIE 5.x or 6.x)
Windows FTP program will connect to your FTP account and you can
upload files by drag & drop.
o External FTP software
You can use your own FTPsoftware to upload the A4DeskPro
Template. Click Browse and you can choose the FTP program.

3. Put in the FTP information under the Default FTP Settings (FTP Host/
Login/ Password/ Default Host Directory) and then click Test Connection to
test the connection. The Test Connection Result will be shown on the

43
bottom. When the connection is successful, click OK.

4. For Default Host Directory field, this is to fill in the server root directory path.
Normally, it will be "/" or "/htdocs/" or "/public_html/" or
"/var/www/html/". However, some share webhosting may use the
username or domain name as the path for easy management, you should
check this out with your webhosting company and ask them to give you the
full path to your root directory.

e.g. Yahoo Web Hosting will like "/{username}/".


5. In some case, you may still fail in uploading, this may due to your
webhosting server limitation, some webhosting may have limit in creating
folder, 2MB limit for each file, or filename naming, in that case, you
should contact your webhosting company about this issue and ask for
solution.

A4DeskPro Built-in FTP wizard

44
1. Once you can connect your FTP server, the Publish To FTP dialog opens.

2. You can select the remote folder


3. Click Upload to upload your files to web server.
4. Once you can upload the files successfully, it will tell you "Upload
Complete".
You should have the "index.html", "index.xml", "index.swf" and

45
"a4content" folder

5. If you have added built-in photo gallery, music player, shopping cart,
videoplayer, you should see the folders like "a4progallery", "a4promusic",
"a4provideo", "a4proshopcart" under the "a4content" folder.

6. Click Close to return.

Windows FTP (require installation of MSIE 5.x or 6.x)

1. You can use the Internet Explorer's FTP feature to upload files (Note: It
requires IE 5.x or 6.x)

46
2. You can find all your existing FTP files on the left window.
3. Select files you want to upload on the right and drag them to the left.
4. After upload is completed, click Return to A4DeskPro button to return.

External FTP software

1. You can choose your own FTP software by clicking Browse button and click OK.

2. It will start the choosen FTP software automatically.

Necessary file when upload manually using 3rd party FTP software

1. index.html

2. index.swf

3. index.xml

4. AC_RunActiveContent.js

5. a4content (whole folder include any files/subfolders inside)

47