53
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. 1

A4DeskPro

Embed Size (px)

Citation preview

Page 1: A4DeskPro

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

Page 2: A4DeskPro

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

Page 3: A4DeskPro

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

Page 4: A4DeskPro

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 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.

4

Page 5: A4DeskPro

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.

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.

5

Page 6: A4DeskPro

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 :

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

6

Page 7: A4DeskPro

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

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.

7

Page 8: A4DeskPro

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

Page 9: A4DeskPro

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.

9

Page 10: A4DeskPro

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.

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

10

Page 11: A4DeskPro

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 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

Page 12: A4DeskPro

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.

12

Page 13: A4DeskPro

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 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.

13

Page 14: A4DeskPro

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:

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.

14

Page 15: A4DeskPro

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.

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

15

Page 16: A4DeskPro

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.

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

Page 17: A4DeskPro

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.

17

Page 18: A4DeskPro

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.

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.

18

Page 19: A4DeskPro

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

\

19

Page 20: A4DeskPro

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.

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.

20

Page 21: A4DeskPro

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

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:

21

Page 22: A4DeskPro

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

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 .

22

Page 23: A4DeskPro

6. Save and publish the A4Desk Pro site.

Create a shopping cart using A4DeskPro

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.

23

Page 24: A4DeskPro

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.

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

24

Page 25: A4DeskPro

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.

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

25

Page 26: A4DeskPro

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

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

26

Page 27: A4DeskPro

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

Page 28: A4DeskPro

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

Page 29: A4DeskPro

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 enterthe specific width and height. Click "Add" button to apply the settings.

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

29

Page 30: A4DeskPro

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

Option 2: Insert a text link

1. Select "Text" option under Edit Item box

30

Page 31: A4DeskPro

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, andclick "Generate Payment Link" button, then a URL will be displayed in "Link Address". Click "Add" buttonto apply the settings.

31

Page 32: A4DeskPro

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".

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.

32

Page 33: A4DeskPro

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

33

Page 34: A4DeskPro

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.

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.

34

Page 35: A4DeskPro

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.

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 thegallery or add the text link in Menus edit item panel.

35

Page 36: A4DeskPro

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

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

36

Page 37: A4DeskPro

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.

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.

37

Page 38: A4DeskPro

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.

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.

38

Page 39: A4DeskPro

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.

39

Page 40: A4DeskPro

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.

40

Page 41: A4DeskPro

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. )

2. Using this dialog you can browse for folders and navigate to a folder of choice or even create a new folder.

41

Page 42: A4DeskPro

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

42

Page 43: A4DeskPro

Result will be shown on the 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

43

Page 44: A4DeskPro

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.

44

Page 45: A4DeskPro

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 "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)

45

Page 46: A4DeskPro

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)

46