Buku panduan wysiwyg web builder 8

3 Push Button Radio button TextArea ActiveX File Publisher Flash HTML Java Inline Frame Layer Master Page Embedded OLE Object Quicktime Real Player Windows Media Player Go Menu Menu Bar Navigation bar SiteTree Tab Menu Text Menu ClipArt Curve Line Polygon Scribble Shape Banner Blog Image Map Photo Gallery Ready to use Java Scripts Rollover image RSS Feed Slide Show PayPal ecommerce Tools PHP Login Tools PUBLISH YOUR WEBSITE LINKS SITE MANAGER OBJECT MANAGER PROPERTIES INSPECTOR iii

4 STYLE MANAGER GRADIENT STYLE MANAGER EVENTS FORM VALIDATION GDI+ INFORMATION INDEX iv

5 WYSIWYG Web Builder 6.0 Introduction WYSIWYG Web Builder 6 is a WYSIWYG (What-You-See-Is-What-You-Get) program used to create complete web sites. WYSIWYG means that the finished page will display exactly the way it was designed. The program generates HTML (Hyper Text Markup Language) tags while you point and click on desired functions; you can create a web page without learning HTML. Just drag and drop objects to the page position them 'anywhere' you want and when you're finished publish it to your web server (using the build in Publish tool). Web Builder gives you full control over the content and layout of your web pages. Key Features: Drag & drop of HTML objects: Text, Lines, Images, Marquees, Tables and much more! Site Management. Easily add, edit, clone and structure your web pages. Customizable menus, toolbars, keyboard accelerators, dockable windows, tabs, autohide unused windows. Form wizard, create forms in less than 4 steps plus many Ready-to-use Forms! Supports all common form controls: Editbox, TextArea, Checkbox, Radiobutton, Combobox, Button and File upload. Form validation tools for most form elements. Built-in CAPTCHA for PHP forms. Many Shape objects (Rectangle, Round Rect, Ellipse, Hexagon, Octagon, Arrows, Signs, Stars, Talk Bubbles and more) with many fill effects such as solid, gradients patterns and glass. Support for YouTube, JAVA, Flash, Windows Media player, Quicktime, Real Audio and other Plug-Ins. Build-in banner creator. Rollover images and Slide Show images. Photo gallery object with photo frames. Ready-to-use Java scripts. Navigation bars, Text Menus, Tab Menus, Slide Menus, SiteTree and Menu bars. Bulleted Lists (Circle, Disc, Square, Numeric, Alpha, Roman and custom images). Image maps Import existing HTML pages. Customize hyperlink colors/format using cascading style sheets. Template support. Already more than 100 free templates available! Publish your entire web site, a single page or a group of pages in one action (to local drive or a web server). Master page object. This allows you to re-use objects from other pages. Layer Object for advanced layout possibilities Free angle rotation for shapes and images Table support. Properties Inspector window for quick object manipulation. Ability to group/ungroup objects Image tools: Contrast, Brightness, Flip, Rotate, Resample, Hue/saturation, Stencils and Crop. Image effects: Grayscale, Negative, Sepia, Blur, Soften, Sharpen, Noise, Emboss and more! Drawing tools: Line, Line + Arrows, Scribble, Polygon, Curve and Closed Curve. Implement Events for Images, Shapes and form controls! Image reflection effect and the ability to add shadow to images. RSS Feed and built-in Blog tool. PHP Login Tools/Page Protection. and much more v

6 Getting Started, a quick introduction WYSIWYG Web Builder is a Web site building tool that helps you design and build full-featured Web sites without knowing HTML. When you preview or publish a page, Web Builder automatically generates the HTML code your Web browser needs to display pages. This chapter helps you get started in a few simple steps. You can find more details about each item elsewhere in this document. How is WYSIWYG Web Builder different from a regular HTML editor? The idea behind this application is to hide HTML from the user. WYSIWYG Web Builder is not an HTML editor, but an HTML generator. You don't even have to know there is HTML involved. Just drag & drop images, text and other objects on your page and your page is ready to be published! Web Builder does not edit the HTML directly, but it uses its own file format (.wbs) to store the information of the website. You can even store your complete website into one single file! By not using HTML internally, Web Builder can do much more than just generate standard HTML objects: it supports shapes, drawings, navigation bars, RSS feeds, blogs, photo galleries, ready to use javascripts and much more advanced objects. Tip: To export your pages to HTML you must use the built-in publish tool! If you like you can insert existing HTML to your page using the HTML tools (Page HTML and the HTML object. You can also insert custom attribute or other code to almost any object. FrontPage, Dreamweaver etc use a document (word processor) method for layout, where you can not pick up objects and drag it where you want it to go on the web page. In WYSIWYG Web Builder you can drag and drop the objects anywhere you want, giving you full control over the layout. You can even put objects on top (or below) other objects! Traditional HTML editors use Dynamic Page Layout, which means that the first object on the page will also determine the position of the second object. Resizing or moving the first object will affect the complete layout of the page. You can't overlap objects when using Dynamic Page Layout. WYSIWYG Web Builder generates Fixed Page Layout. All objects have a fixed position which is not affected by other objects. This also allows you to overlap objects and give you much more control over the layout of the page. Tip: For step by step instructions to the basic features of WYSIWYG Web Builder please visit the online tutorials: 6

7 Start Web Builder Click the WYSIWYG Web Builder icon to launch the application. When you startup WYSIWYG Web Builder the main screen will look something like this: 7

8 Standard Tools With the 'Standard Tools' toolbar you can execute basic commands like: Create a new web site, Open an existing web site, Save, Cut, Copy, Paste, Undo, Redo. It also has icons to insert or edit hyperlinks (9th icon from the left) or add special characters when you're in text edit mode. The last two icons are for previewing and publishing. You can easily add new browsers to use for preview using the 'Edit Browser List' option. Toolbox The toolbox can be used to add new objects to your web pages. To insert a new object, select one of the available items and draw a box to indicate the position of the object. The new object will now be inserted to the page. Another way to add objects to your page is by simply dragging them out of the toolbox onto the workspace. Tabs When you have opened multiple pages you can used the tabs to switch between the pages. To close the active page press the small 'x' in the upper right corner of the tabs strip. Workspace The center of the screen is the workspace, where you can drag and drop objects from the toolbox. Formatting Tools The formatting tools are only active when you are in text edit mode. To insert text simply drag the text icon on the workspace. A new object with the text "Double click to edit' will be displayed on the page. To switch to text edit mode double click this text and the formatting tools will become active. For some of the tools you need to highlight the text before they can be used (just like in a regular text editor). 8

9 Site Manager The Site Manager can be used to manage the structure of your web site. The Site Manager has its own toolbar to add, edit, clone or remove pages. There is also a button to open the properties of the selected page. In the picture above you see an example of a web site structure. The filename of this example web site is called 'mywebsite.wbs', this name is always displayed at the root of web site tree. The root can have one of more pages and each page can have sub pages. Web sites always have a home page, which is often called index, so for this reason Web builder automatically adds this page to each new project. The names of the items (pages) in the site tree are the actual file names of the target HTML files, so if you named a page 'index' is will publish as index.html. Do not add the file extension in the site manager! Tip: Make sure all pages of a website are part of the same project, this way Web Builder will 'know' that the pages belong together and generate optimal HTML for your website. Tip: Every time you insert a new page to your website it will be added to the Site Manager. To edit previously created pages you can double click the page name to open it in the editor.. You will find more information about the Site Manager later in this document. 9

10 Properties Inspector Use the Properties Inspector window to view and change the properties of selected objects. You can also use the Properties Inspector window to modify page properties. The changes will be visible immediately. The Properties Inspector window displays different types of editing fields, depending on the needs of a particular property. These edit fields include edit boxes, drop-down lists, and links to custom editor dialog boxes. It is also possible to manually modify the size and position of the selected object by changing the Position and Size properties. 10

11 Adding text to the page One of the first steps in creating a web page is often adding text. Select Insert->Text from the menu and draw a box to indicate the position of the text. Then double click the box to start editing the text. Type some text and (press Enter to go to the next line). The box automatically changes its size to fit the text. Next, you can change the text attributes by highlighting the text you want to modify with the mouse and then choose the new attributes from the Format Toolbar. From the toolbar you can change font type, size, bold, italic, underline, text color and highlight color. There are lots of other formatting options available from the Format menu: Click anywhere in the page to stop editing. 11

12 Adding an image to a web page Select Insert->Image from the menu and draw a box to indicate the position of the image or select Image in the toolbox. The size of the box doesn t matter; Web Builder automatically adjusts the box to fit the image after you place it. The Image File Open dialog appears so you can locate the image you want to place in the image box. Select the image you want to add and click Open to add it to the page. To resize the image drag the borders (handles) of the image object. 12

13 Rotate an image You can rotate image and shape objects. To rotate an object: 1. Select the Rotate tool on the Toolbox or click Edit->Rotate. 2. Click to select the object, hover over one of its handles until you see the rotate pointer. 3. Hold the mouse button down and drag in the direction in which you want to rotate the object, then release. Use the Shift key for 15 rotation intervals. Apply effects to an image In WYSIWYG Web Builder you can apply effects to images without having to open a separate image editor! A few of the available effects are: Contrast, Brightness, Blur, Grayscale, Emboss, Negative, Sepia, Sharpen, Soften, Stencils and much more! Adding other objects to the page There are many other objects you can place on the page. Check out Insert Menu for a description of the other objects. Tip: Another way to add objects to your page is by simply dragging them out of the toolbox onto the workspace. 13

14 Linking your pages together (Creating hyperlinks) Hyperlinks are text or images that can be clicked to bring the user to another web file such as a web page, images or any other file. They are the essence of the World Wide Web as they link pages within sites and web sites to other web sites. To create a hyperlink in Web Builder, follow the instructions below. Linking text Highlight the text you want to link and select Insert->Link from the menu bar, click the link button on the toolbar or press CTRL+K on your keyboard. This will display the Insert Hyperlink window. Linking an image, shape or rollover image. Please read the chapter Links of this document for more details about linking. Saving your web site To save your web site, select Menu->File->Save Web Site from the menu and enter a name for the project. Web Builder uses the extension.wbs (Web Builder Site) to save the project files, to save your page as HTML you ll have to Publish your pages. 14

15 Preview a page Select File->Preview in Browser->Default Browser (F5) to preview the current page in your default browser. It is also possible to change the browser that is used for previewing. Go to File->Preview in Browser->Edit Browser List to add/edit the list of browsers that can be used to preview the pages you are working on. Depending on the preview scope (Tools->Options->Misc), you can preview either a single page or the entire web site. Holding down the SHIFT key while previewing will 'invert' the current preview scope. Important note: Internal links do not work in Preview, unless you have set the Preview Scope to Entire Web Site! If you only preview a single page, your browser will not be able to find all the other (internal) pages unless you also generate them! Another note: You cannot preview pages that use PHP in your local browser. PHP pages can only be viewed through a web server with PHP support. 15

16 Publishing your web pages The final phase of creating a web site is publishing your pages. To place your pages on the Web, you need a Web server. Commonly called hosts, Web servers allow you to transfer and store files, including HTML documents, images and multimedia files. Unless you own your own Web Server, you need to find a server to host your pages. Some examples of web hosts are: but of course there are many more! Make sure you choose a web host that supports FTP; this makes it much easier to publish your pages from Web Builder. Publish to a remote FTP server. Once you have registered to a web host, you will receive a server address, username and password. Enter this information into Web Builder by selecting: File->Publish. Click Add and select Type Remote. Sometimes you also need to specify a remote folder. Common remote folders locations are: /www, /public_html, /html, but unfortunately this value can be different for each webhost, so consult your webhost's documentation for more details! If you have a firewall/router, select 'Use passive mode for transfers'. Click OK to save. Now you can publish each page simply by selecting Publish. Publish to a local folder If your web host doesn't support FTP or you want to use your favorite FTP client to transfer the files to the server, you can use the option 'Publish to a local folder'. Click Add to add a new location to the list. Enter a name for the location a select Local as type. Enter the folder where you want to publish the active document. Click OK to save the data and then click Publish to save the files to the specified folder. Now you can take these files from the local folder and publish them using your preferred FTP utility. Pages to Publish Select which page or pages you want to publish. Entire Web Site, publishes all pages of the web site (except the pages which have enabled 'Don't Publish this Page' in Page Properties) Select Page Only, publishes the select page, click Select to specify the page to be published. Select Page and Sub Pages, publishes the select page and all of its sub pages (if any). 16

17 What to do in case of publishing errors? Make sure your ftp address (host) is correct. Is your username and password ok? Make sure the remote folder is correct (very important!) If the files don't show up on your website you've probably specified the wrong remote folder. Does your firewall block the FTP connection of Web Builder? Enable 'Use passive mode for transfers' Increase the connection timeout to 120 seconds (Tools->Options->Publish) If the transfer takes a long time then you've probably used (very) large images. If your website doesn't look to be updated, select 'Refresh' in your browser multiple times! For a list of all possible error codes and their descriptions go here: Why aren't my images displayed a published page? Did you upload the images to the web server? By default, Web Builder places all images in a sub folder called images; you can change this through Tools->Options->Publish->Image Sub Folder. If you leave this field empty, the images will be published in the same folder as the published page. Some web hosts do not support sub folders, so make sure you have permissions to create folder on the server. If not, then you must tell Web Builder to publish the images in the same folder as the HTML. Make sure the image names are valid, most web servers are case-sensitive and/or do not support special characters in the filenames of images. Do your image filenames contain whitespaces or other special characters? Image names with spaces can cause problems in some browsers and/or web servers, use underscores to connect words instead of spaces. What is Next? This manual has a description of pretty much all of Web Builder's features. Scroll down to learn all the exciting features of WYSIWYG Web Builder! Tip: For Frequently Asked Questions or other support please visit: 17

18 The WYSIWYG Web Builder Menu All of WYSIWYG Web Builder s features are available through the menu bar. The menu bar has the following items: File Edit View Page Insert Format Table Arrange Tools File Menu New Web Site Creates a new empty web site project. All pages of a web site are saved in one file. New Web Site From Template Creates a new web site based on a template. Web Builder has a very handy feature called 'Templates'. Templates can later be used by you (or someone else) to use a basis for a new page. When you save a web page to a template it will include all of the images and other objects in the template file. So there is no need to copy these files separately. So you simply copy one file from one computer to another and you can start or continue working on your web pages. Web Builder Templates have the.wbt extension and are saved in the sub folder \Templates of the Web Builder folder. To add a new category to the template selection window, so you can organize your templates, simply create a new folder and put the template files in this folder. The name of the folder will then be displayed in the Category dropdown list. You can also download templates created by other Web Builder users from the web site: 18

19 Open Web Site Opens an existing web site project. Close Close the active page. Closing the last open page will also close the web site project! Close Web Site Close the active web site project. Save Web Site Save the active web site project. Note that in order to save your pages as HTML you need to publish or export your pages! Web Builder stores the information of all your pages in one project file. Save Web Site As Save the active web site project with a new name. Save Web Site As Template Save the active web site project to a template. See New Web Site From Template for more details about templates. Export to HTML Export the active web page to an HTML file. To generate more than one file at a time, please use the Publish option. Preview in Browser Preview the active web page in your default Browser. Depending on the preview scope (Tools->Options->Misc), you can preview either a single page or the entire web site. It is also possible to change the browser that is used for previewing. Go to File->Preview in Browser->Edit Browser List to add/edit the list of browsers that can be used to preview the pages you are working on. Tip: You can also use the menu item 'Preview entire web site' to toggle between single page or entire website preview. Publish Publish the active page, a group of pages or the entire web site. You can choose to publish to a local folder or a remote FTP server. Check out the chapter Publish of this document for more details. Print Print the active web page. Print Preview Show a Print Preview of the active web page. Print Setup Change the printer and printer options. Exit Quits the application. 19

20 Edit Menu Undo Undo the last action. Redo Redo the previously undone action. Cut Cut the selection and put it on the Clipboard. Copy Copy the selection and put it on the Clipboard. Paste Insert Clipboard contents. Delete Erase the selection. Select All Select the entire document (all objects). Find You can search for words or characters in the active page or your entire website. On the Edit menu, click Find. In Find in, select Current Page or Entire Web Site. In Find what, type the characters or words you want to find, and then click Find Next. To find additional instances of the same text, continue to click Find Next. Replace You can search for and replace words or characters with text that you specify. On the Edit menu, click Replace. In Find in, select Current Page or Entire Web Site In Find what, type the characters or words you want to find. In Replace with, type the text you want to replace it with. Click Find Next, and then click Replace. To replace all instances of the text, click Replace All. 20

21 Lock/Unlock This will 'lock' the selected objects, so that they can not be moved or resized accidentally. Note that this will also prevent you from editing the objects properties unless you enable the option 'Allow locked objects to be edited' in the Tools->Options->Advanced configuration. To unlock the object again, repeat the same command. Lock All This will lock all objects in the active page. Unlock All This will unlock all objects in the active page. Rotate This command will activate the rotate mode. You can rotate image and shape objects. For more information see also: Rotation Restore Original Size Can be used to restore an image or flash object to its original size. Search in Google When you are editing text this command will search the selected word on Google. Your computer must be connected to the Internet. Look Up in Dictionary When you are editing text this command will look up the selected word on the website: Your computer must be connected to the Internet. Properties Edit properties of the selected object. See the chapter WYSIWYG Web Builder Object for more details about object properties. HTML View generated HTML of the selected object or insert your own HTML code! Please note that this option is for advanced users only. Inserting invalid HTML code might cause unexpected results. 21

22 View Menu Menubar: Show or hide the menu bar. Toolbars->Standard Tools. Show or hide the standard toolbar. Toolbars->Advanced Tools: Show or hide advanced tools. Toolbars->Align Tools: Show or hide align tools. Toolbars->Drawing Tools: Show or hide drawing tools. Toolbars->Form Tools: Show or hide form tools. Toolbars->Format Tools: Show or hide format tools. Toolbars->Full Screen Mode toolbar: Show or hide the full screen toolbar. This toolbar has only one button which toggles between full screen and normal screen mode. Toolbars->HTML Tools: Show or hide HTML tools. Toolbars->Image Tools: Show or hide Image tools. Toolbars->Navigation Tools: Show or hide the navigation tools. Toolbars->Table Tools: Show or hide the table tools. Toolbox: Show or hide the toolbox. Object Manager Show or hide the Object Manager window. Site Manager: Show or hide the Site Manager window. Layer Manager: Show or hide the Layer Manager window. Properties Inspector: Show or hide the Properties Inspector window. Refresh: The 'Refresh' option to reloads all images of the current page. This can be useful if you have edited images outside of Web Builder. Grid: Show or hide grid. Snap to grid: Enable or disable snap to grid. Use the Snap to Grid feature to align objects exactly. Web Builder creates a "magnetic" attraction between the selected object and the grid. Rulers: Show or hide rulers. Object Outlines: Show or hide object borders. Full Screen mode: Normally, when you edit a webpage in WYSIWYG Web Builder, some of the screen is taken up with toolbars, a menu bar, a status bar, and other windows. To temporarily hide all of this extraneous information to solely work on your page, click "View" and select "Full Screen Mode". Everything will disappear except your currently edited page. To go back, press the F11 key or click the Full Screen toolbar button. 22

23 Page Menu The page menu holds all the commands related to page management. New Page Adds a new page to your web site. The new page is automatically opened so you can start editing it right away. The new page (with a unique page name) with be added to the Site Manager tree. New Page from Template Create a new page based on a template. Pick any page from a template and insert it into the current project. The new page (with a unique page name) with be added to the Site Manager tree. Clone Page To make an exact copy of the active page, select Clone Page from the menu. A new item (with a unique name) will be added to the Site Manager. Remove Page Remove the active page from your web site. You can not remove the last page in your web site. Rename Page Rename the active page. Note that the Site Manager must be visible to be able to rename your page. The name of the page will be highlighted in the Site manager, where you can change its name. Note: When you have linked to the page you are renaming (from any page within the web site), Web Builder automatically updates all the links for you so you don't have to redo all the internal links. Notes about page names While building your web site, Web Builder saves the project file with the.wbs extension. This is a project file used by Web Builder to simplify the building process. One project file can contain multiple web pages. Once your pages are ready you must export or publish them as HTML. The name of the output HTML file is taken from the name you have specified in the Site Manager. So if you named the page index then the output file will be called index.html. If the page needs another extension like.php, you can configure this in the Page Properties. Here are a some guidelines how to name your web pages: 1. Do not add.html or.htm extension to the page name. Web Builder will automatically add the.html extension (or.php,.asp) when it publishes (or exports) the HTML code. 2. Always name your homepage: "index", this is the most common name for a homepage. 3. Always use lowercase filenames, most web servers are case sensitive and might fail to find your page if you have called it "Index" or "INDEX" 4. Do not use space or other special characters in the name, keep them simple like: "page1" or "my_products" 5. Use underscores to connect words. 23

24 Import HTML Page Although Web Builder is NOT an HTML editor, you can import existing HTML pages. Select Page->Import->Import HTML Page from the menu to display the Import HTML page window. You can either select an HTML page from your local drive or specify a URL of an online website. Click OK to start importing the page. Web Builder will automatically copy all images to your local drive. Important notes about importing HTML: WYSIWYG Web Builder is not an HTML editor, but an HTML generator! Web Builder imports the HTML by rendering the contents of an existing page and then attempts to convert the layout to Web Builder's internal object format. The import feature currently only imports text, images, form elements and body attributes (link colors, background images, meta tags). Tables, scripts, style sheets and multimedia components are not imported. But in most cases this is good enough to get you started. Web Builder does not parse style sheets, so is some cases the text may look different than the original page. Web Builder currently doesn't support framesets. If you want to import a web page that is using frames you'll have to import all individual pages separately. It is very difficult to support all different types of HTML. Even the popular browsers will interpret HTML differently, so don't expect miracles. If a page fails to be imported it probably contains code that Web Builder doesn't understand and you still have to start from scratch. Importing web pages created with WYSIWYG Web Builder will give the best results! Import Web Builder 2.x page The file format of Web Builder 2.x is completely different than the current format. You can however import existing 2.x files into this version of Web Builder using this option. Import page from another project This option makes it possible to import page from another WYSIWYG Web Builder project. Page HTML In this window, the HTML generated by Web Builder is displayed. To insert your own code, select the appropriate Tab. Select if the code should be inserted at the Start of Page, Between Head tag, Inside Body tag, Beginning of Body, End of body or End of page. The custom code will be displayed in the color blue. Warning: When you insert code in the Page HTML window, make sure you do not include the , or tags! WYSIWYG Web Builder already generates these tags. 24

25 Page Properties Set or edit the properties of the active page. The property window of a page is subdivided into these categories: General Formatting Meta Tags Scrollbars Page Transitions Misc Events Site Properties Change the page properties of all pages within the current web site project. These values will also be used as the defaults for new pages. 25

26 Page Properties - General Title Enter the title of the web page. This title will be displayed in the title bar of the browser's window. Menu Name This name will be used for the item names in navigation bars and menu bars which have enabled the option 'Synchronize with Site Manager'. By default, the page name (as specified in the Site Manager) and the button name are the same, but this field allows you to use an alternative name for the button. Page Width Specifies the workspace width of the page. Notes: 1. This value is not used by the browser, it's only an internal value used by Web Builder to indicate the available workspace and to control the scrollbars when your screen size is not large enough to display the content of the page. 2. The Center in browser option uses this value to calculate the absolute center of your page, so if you've designed your page for a resolution of 800x600, make sure this value is set to 800 or else your page will not be centered! Page Height Specifies the workspace height of the page. Note: This value is not used by the browser, it's only an internal value used by Web Builder to indicate the available workspace and to control the scrollbars when your screen size is not large enough to display the content of the page. Target screen size This option helps you determine the optimal page size for a specific screen resolution. It controls the page width/height properties. For example if you select '800x600', then the page width/height will be set to 770x600. Why? Because you will have to leave some space for the vertical scrollbar, so you can't use the full 800 pixels for the page content. File extension Normally your web page will be published using the.html extension. In some cases it might be necessary to specify another extension like.php of.asp in case your page uses PHP or ASP. Note: If you set the file extension to something other than.html, then your browser may not be able to preview the page. In order to preview PHP or ASP page, you must publish the page to a web server which can handle these page types! Document Type The doctype declaration is an instruction for the web browser about what version of the markup language the page is written in. Currently WYSIWYG Web Builder supports 2 document types: HTML 4.01 Transitional (default) The generated output will be HTML and compliant to the HTML 4.01 specification of W3C (just like in previous versions of WYSIWYG Web Builder). XHTML 1.0 Transitional The generated output will be XML and compliant to the XHTML 1.0 specification of W3C. Select document type 'None' if you don't want to include the doctype declaration in the page output. The generated output will be HTML 4.01 Transitional in that case. 26

27 Character Set The character set tells the browser how to interpret and display the characters on your webpage. Depending on the language of the text on the page it might be necessary to force the browser to another character set. The most common used character sets are: ISO (ANSI) and UTF-8 (UNICODE). Page Language Specifies the language (Content-Language) of the page. Search engines may use this tag to categorize pages by language. Favorites Icon You can use favorites icons (also known as shortcut icons) to display your logo or some other small graphic on the Favorites menu, address or page tabs of your browser. They are a great way to add brand recognition to your Web site. A shortcut icon must be square in size, and at least 16 x 16 pixels. Consider creating both a 16 x 16-pixel icon as well as a 32 x 32-pixel icon (and larger, bandwidth permitting), since on high-dpi displays, the browser may stretch the icon to fit the available space. To create the icon, use an icon editor, such as Axialis IconWorkshop, IcoFX or Microangelo Toolset and save the icon in the.ico file format. 27

28 Center page in browser window Enabling this option will center the published page in the browser window. Most professional web sites are designed so they will look good on different screen sizes. Because Web Builder uses absolute positioning for all elements, they can not be stretched over the full width and height of a page, because that would 'scramble' the contents of the page and this wouldn t look good;) Here are a few tips for the designing your pages so they are displayed in the center of the browser: Set the Page properties to 800x600. Enable the Guide Borders and set them to the same size. Make sure all page contents stays between the guide borders. Enable 'Center to browser' in Page Properties. Center page horizontally and vertically This option allows you to center the web page both horizontally and vertically in the browser window. If the content of the page is larger than the screen size, it will not be centered. See also Center page in browser window. Don't Publish this page Enable this option if you don't want this page to be published if your select Publish Entire Web Site. Possible reason for this can be: 1. This page is currently not part of the website or still under construction 2. The page is only used as part of your other pages eg. Master Page. 3. The page is not changed so there's no need to publish it again. Don't synchronize this page in Navigation Objects When this option is enabled the page will not appear in navigation objects which automatically synchronize with the Site Manager. Make Default Saves the current values as defaults for new pages. 28

29 Properties - Formatting Background Color Specifies the color of the background. Gradient Color Specifies the color of the gradient effect (in combination with the background color). Note: The gradient effect is not a feature of the HTML specification! WYSIWYG Web Builder will generate a (small) image and set it as the background image when the page is published. Gradient Style Specifies the style of the gradient effect. The gradient can either be horizontal or vertical. Background Image Specifies the optional background image. If the image is smaller than the page size it will be tiled. Repeat Sets the tiling attributes for the background image. Possible options are: Repeat in both directions Repeat in horizontal direction Repeat in vertical direction Do not repeat Fixed Background A fixed background is a background image that will stay in one place while the rest of your text and images scroll over the top of it. Horizontal Align Sets the horizontal position for the background image. Vertical Align Sets the vertical position for the background image. Link Color This specifies the default, unvisited hyperlinks color. Visited Link Color This specifies the color of a followed link. Active Link Color This specifies the color of an active link. Hover Link Color This specifies the color of all hover links of the active page. Note: You can also control the colors of hyperlinks by using Hyperlink Style Sheets. For more information, see the description in the chapter Links. Default Font, Size and Color Specifies the default font, font size and text color that will be used for text you enter in the page. Make Default Saves the current values as defaults for new pages. Apply to All The 'Apply to All' command will apply the current formatting settings to all pages in your website! 29

30 Page Properties - Meta Tags Author The author meta tag is used to indicate who the author of the web page is. Keywords The keyword meta tag can be important when it comes to some search engines. When these auto robot search engines index your site, some will look for a keyword meta tag to use as index words. When someone uses their search engine and searches on a word that is in your keyword meta tame list, your site will be included in the output search results. Description The description meta tag can be important when it comes to some search engines. There are many search engines that will index your site automatically. Some of these search engines allow for a short description to be placed in their web page. If the search engines is looking in your web page for a description meta tag, it will use this description in the search index. Categories Specifies to which Categories the page belongs to. This meta tag is used by the SiteTree object to categorize pages. Example: downloads, products, fun, business, personal etc. Tip: You can assign multiple categories to a page. The categories should be separated by a comma (,) Generator Typically the name of the application used to create the page. Make Default Saves the current values as defaults for new pages. Apply to All The 'Apply to All' command will apply the current meta tags settings to all pages in your website! Properties - Scrollbars Microsoft Internet Explorer allows web designers to adjust the colors of the scrollbars to make them match with the rest of the page content. All you have to do is select the colors you like and WYSIWYG Web Builder will add the HTML code for you! Properties - Page Transitions Page transitions allow you to manage the page entry and page exit transitions of your web pages. These transitions will only work in Internet Explorer 4 and above. Other browsers are unaffected by these page transitions. To change a page transition, selecting the Event and assign one of the effects from the list. You can also modify the duration of an effect. 30

31 Properties - Misc The Redirect property redirects the user to another page after a specific delay (by using the 'refresh ' meta tag). Redirect To Do no redirect Disables the redirect feature. Web Site Redirect the user to an external page. Internal page Redirect the user to a (internal) page of your website. Redirect URL Specifies the URL where the user will be redirected to. Redirect Delay Specifies the redirect delay. 0 (zero) means no delay. Sound If you want to play a background sound when your page is displayed in the browser you can specify a background sound. Most common audio types are supported. Specify the number of times you want to repeat the sound clip by setting the Loop value or select Forever to play it continuously. Disable Internet Explorer's image toolbar Normally Internet Explorer will place an Image Toolbar above images on a webpage that allows the user to save or print the image. To stop the Image Toolbar from appearing on the images of your site, enable this option. Properties - Events For more information about events please go read the chapter Events. 31

32 Insert Menu The following objects can be inserted into your web page. More information about the individual object is available in the chapter WYSIWYG Web Builder Objects. Select The Select object is used to select objects. To select multiple objects, drag a selection box around them, or hold down the Shift key while you click them one at a time. Bulleted List You can add a bulleted list to your web page to set apart a list of items from the rest of the page pf text. The bulleted list is a combination of ordered (numbered) lists and unordered lists and supports the following styles: Circle, Disc, Square, Numeric (1, 2, 3), Lower Alpha (a, b, c), Upper Alpha (A, B, C), Lower Roman (i, ii, iii), Upper Roman (I, II, III) and custom images. Horizontal Line The Line object is used to insert a horizontal line across the page. Image To add images use the Image object. Drag the object to the page and a file dialog will popup to select the image. Web Builder supports jpg, gif, bmp files and png. You can insert any other web image file, but it probably will not correctly display in document. You can also apply effect to images like Contrast, Brightness, Flip, Emboss, Blur, Grayscale and more! Marquee The Marquee object is used to introduce text that scrolls horizontally. Text Probably the most used object is the Text object. It allows you to add text to the web page. Just drag the object to the page and double click it to start typing your text. Symbol Insert a symbol (special character) into a text object. This option is only enabled when you are in text edit mode. Link Opens the link dialog for the selected object or text. Check out chapter Links for more details. Bookmark Bookmarks (also called anchors) mark a specific location on a page. With a bookmark a visitor of the page can go directly to a particular part of the page without having to scroll to it. You can place the Bookmark icon anywhere in the page. Make sure you give the bookmark an unique name. You link to a bookmark from the link dialog. 32

33 ClipArt ClipArt uses dingbat fonts and converts them to vector shapes. It has all the features of shapes, but it allows you to insert any type of shape to your page! Curve The Curve tool lets you draw curved lines. Closed Curve The Closed Curve tool lets you draw curved lines with borders and several filling methods. Line The Line can be drawn using any angle, color, style and can even have arrows on the start or end of the line! Polygon The Polygon tool lets you draw polygons with borders and several filling methods. Scribble The Scribble tool lets you sketch curved lines and shapes in a freeform way. Shape The Shape object can be used to 'draw' an ellipse, rectangle, star or many other shapes on your webpage. When you publish a page with shapes, Web Builder generates each shape as a.gif file. Text Art Text Art can be used to create amazing logos, banners or headers. Form Area The Form Area object is a container for FORM objects like buttons, edit boxes and checkboxes. You can add any standard form object to a form, including single- and multiple-line text fields, check boxes, radio buttons, scrolling lists, and drop-down lists. You add objects to a form using the Form toolbar (Form Tools). You must place form objects inside a form to make them work as part of the form. Advanced Button (Form Control) Inserts a Advanced Button object on a form (HTML 4 and higher). The Advanced Button gives you much more control over the appearance and behavior of a button. You can change the background color, use different fonts for the text or even activate JavaScript commands. Captcha The CAPTCHA object was designed to work in combination with (PHP) forms. It helps to stop spammers from submitting form data automatically. Checkbox (Form Control) Inserts a Checkbox object on a form. Checkboxes are on/off switches that may be toggled by the user. Use Check boxes if want to allow more than one item to be selected. Combobox (Form Control) Inserts a Combobox object on a form. Used to allow users to make a selection from a number of different options. Editbox (Form Control) Inserts a Editbox object on a form. Single-line field that can be used to add name/ address fields. File Upload (Form Control) This provides a means for users to attach a file to the contents of the form. Image Button (Form Control) Inserts an Image Button object on a form. 33

34 Push Button (Form Control) Inserts a Button object on a form. Radio button (Form Control) Inserts a Radio button object on a form. Radio buttons are like checkboxes except that when several share the same name, they are mutually exclusive: when one is switched "on", all others with the same name are switched "off". Text Area (Form Control) Inserts a TextArea object on a form. Multi-line edit box, which can have as many characters wide and lines tall as you want. Form Wizard You can use the Form Wizard to create complete forms in just a few steps! Go Menu You can use the Go Menu component to easily create a drop-down navigation menu, with each menu item corresponding to a single URL or page in your web site. When the user presses the Go button the select link will be activated. Menubar Inserts a menu bar into your page, you can create simple single level menus or advanced drop down menus with multiple levels. Navigation Bar The Navigation Bar (also called link bar or menu bar) is a set of buttons with hyperlinks that enable site visitors to navigate to the pages in your Web site or other parts of the Internet. SiteTree The SiteTree can display an overview of your website (a Site map) so visitors can quickly find what they're looking for Tab Menu The Tab Menu is yet another way to implement your website navigation. Text Menu The Text Menu is a text-only version of the Navigation bar. Text menus can speed up the navigation through your website, because no images need to be loaded first before the user can navigate to another page. HTML An HTML object can be used to add custom HTML code (or JavaScript) to your webpage. The HTML code that you enter will not be checked for correctness. Notes: For most objects you can also add extra HTML before, inside of after the automatically generated HTML. Select an object and select Edit->HTML from the Web Builder menu. To add extra HTML before, inside of after the HEAD and BODY tags, select View->Page HTML from the Web Builder menu. Inline Frame Inline Frame or an iframe is allows you to open new pages inside main pages. Inline frames are also referred to as Floating frames. 34

35 Layer Layers can be used to create advanced layouts. A layer is a container for other objects. Objects can be dragged and dropped on a layer just like on a form. Some of the features of layers are: % transparency. Show/Hide a layer (and all its contained objects) using the layer manager. Position and size a layer relatively. Position a layer absolute to the right and/or bottom border of the browser window. Several background repeat and alignment options. ActiveX You use ActiveX controls to embed an application in a Web page. Embedded OLE Object You can use linking and embedding to exchange information between documents created in different programs. File Publisher This component automatically uploads the specified files to your web site once you publish this page. Flash With Macromedia Flash files (.swf), you can create multimedia, graphics, and audio that downloads quickly. To view these files, site visitors must install the Flash plug-in appropriate for their browser and platform. These plug-ins are available from the Macromedia Web site at Java Java applets are an efficient way to add sound and animation, such as scrolling messages and other cool effects, to a page. Master Page The master page object is a very cool feature, which allows you to re-use objects from another page within a page. Plug-In Although Web Builder supports a wide variety of media files, you might have other formats, such as Adobe Acrobat PDF files, Real Audio files etc. that you want to include in your site. You can place other files using the Plug-in object. QuickTime Use this object to add QuickTime media files to your page. RealPlayer Use this object to add RealPlayer media files to your page. Windows Media Player Use this object to add media files to your page. YouTube The YouTube object provides an easy way to add YouTube videos to your pages. Banner A banner is an image that displays the title of a web page. A banner helps visitors understand what the page is about. Blog A blog is a journal that's posted on the web for other to read. The word blog is short for web log. The Blog object provides an easy way to implement a blog on your website without special requirements on the web server. 35

36 Image Map You can create an (client-side) image map that divides an image into different areas that each link to a different web page. Creating an image map is useful for images such as a floor, campus map or world map that you want to contain links to different pages. You can define each clickable area (hotspot) on the map using three shape values: rectangle, circle or polygon (irregular shape). Photo Gallery The Photo Gallery object is gives you a tool to create a simple Photo gallery with only a few mouse clicks. Rollover Image Rollover images change swap images on rolling over it and reverts back to the original image on rolling out of the object. Ready-To-Use Java Scripts This feature can be useful if you want to brighten up your web pages with some cool Java Scripts. RSS Feed With the RSS Feed object you can add a RSS Feed to your website in only a few mouse clicks. Slide Show You can use the Slide Show object to display different images in succession in the same place on the web page. For example, you could rotate among several images that advertise new products or display advertisements for other web sites. It's also possible to use Events to display the next or previous image! Format Menu Web Builder allows you to make all the same attribute changes you can make in (for example) MS Word. The first step in changing text attributes is to highlight the text you want to modify with the mouse. You can then make the following changes: Font Type Font type is the font family of text, such as Comic Sans, Times New Roman, and Courier New. To change the font type, select the font you want from the Font Type List Box on the toolbar. Font Style The style of the text can either be bold, italics, or underline. To change the font style, select one or more of the Style Icons on the toolbar. Font Color The color of the text can also be changed. To change the font color, select the Text Color Icon on the toolbar. The Color Dialog Box appears. Choose the color you want and click OK. Background Color To change the background color of the selected text, click the Background Color Icon on the toolbar. The Color Dialog Box appears. Choose the color you want and click OK. Font Size To change the font size, select one of available HTML font sizes. Text Alignment You can change the alignment of the selected text object by using one of the alignment buttons: Left, Center, Right or Justify. Remove formatting Sometime it can be useful to remove all formatting from a piece of text at once. Highlight the text and select Remove Formatting to reset all styles to its default values. Formatting removed from the text include bold, italic, underline, subscript, superscript, strikeout, text color and background color. 36

37 Remove link Removes the link that was assigned to the selected text. Styles In the Style Manager you can manage the styles of a project. By using styles you can modify the style of the entire website all in one place. General Styles In the General Style page HTML/CSS styles can be defined, such as text header styles (H1, H2, H3...) or form element styles. See also: Style Manager. Hyperlink Styles By default all hyperlinks in your webpage use the default HTML link colors (link:blue, visited:purple, active: red). But since CSS (Cascading Style Sheets) where introduced, more and more websites use different colors to create better looking layouts. Web Builder gives you the option to customize the way hyperlinks will be displayed in the browser by introducing the Hyperlink Styles. Gradient Styles Use the Gradient Style Manager to add/edit and remove global (multi color) gradients effects. Gradient effect can be used by Shapes, ClipArt, TextArt and other drawing tools. Websafe fonts Websafe (or "web safe", "safe for the web") fonts are fonts that are common among all versions of Windows, Mac, and Linux. We recommend using websafe fonts if you want your web pages to look the same on all computers. List of web safe fonts: Arial Bookman Old Style Comic Sans MS Courier Courier New Georgia Impact Lucida Console Lucida Sans Unicode MS Sans Serif MS Serif Palatino Linotype Symbol Tahoma Times New Roman Trebuchet MS Verdana Webdings Wingdings You can enable the option 'Tools->Options->Misc->Display websafe fonts only', so WYSIWYG Web Builder will only display websafe fonts. This may also increase the speed of the user interface, because not all fonts need to be loaded into memory everytime you want to select a different font. Of course this font limitation is only for text based objects. So you can use other fonts for navigationbar buttons, banners and other image based objects. Web Builder's text object also has an option to publish the text as an image. 37

38 Table Menu The Table Menu contains all the operations related to creating and modifying tables. Tables have columns and rows of cells that can contain text (images, forms, or other page elements are not supported at the moment). Tables are useful for the layout of data; they can be used to simulate columns of text. When you type text in a table cell it expands horizontally and vertically to accommodate the text that are typed or inserted. You can edit, format, and specify properties (background color or image) for the text, as well as for the table cell, row, column, or table itself. You can easily resize cells, columns, rows, or the entire table by the dragging borders. Insert Table Draw a box where you want to position the table. The Insert Table dialog appears. Enter the number of cells and rows required. Enter layout and size details and click on OK Insert Rows or Columns Select this option if you need to insert additional rows and columns after a table has been created. Specify if you want to insert Rows of Columns and enter the number of rows/columns to be added. To insert a column to the left of a selected column, choose Left of selection. To insert a column to the right of a selected column, choose Right of selection. To insert a row above a selected row, choose Above Selection. To insert a row below a selected row, choose Below Selection. Merge Cells Merge two or more adjacent cells This command is only available when two or more adjacent cells are selected on the same row. Split Cell Split the selected cell into columns. Delete Column Select this option to delete the selected column. Delete Row Select this option to delete the selected row. Table Properties Border Size Enter how wide you want the border to be, in pixels. Cell Padding Enter how much space you want between the contents and inside edges of cells, in pixels. Cell Spacing Enter how much space you want between the cells in the table, in pixels. Background color Specifies the color of the form background. If set to 'Automatic' the webpage background will be used. Background image Specifies the optional background image. Border color Specifies the color of the table's borders. If set to 'Automatic' the table will have a 3d border. Table HTML View generated HTML of the table. You can also insert your own HTML code! 38

39 Cell Properties Edit properties of the selected cell: Background Color Specifies the color of the text background. If set to 'Automatic' the webpage background will be used. Background Image Specifies the optional background image. Repeat Sets the tiling attributes for the background image. Possible options are: Repeat in both directions Repeat in horizontal direction Repeat in vertical direction Do not repeat Horizontal Align Sets the horizontal position for the background image. Vertical Align Sets the vertical position for the background image. Cell HTML View generated HTML of the selected cell. You can also insert your own HTML code! Table Tips: 1. While resizing the table hold down the Ctrl-key to resize last column/row of a table with affecting the size of the other columns/rows. 2. To select multiple cells hold down the Ctrl-key while selecting the cells. 3. To select the whole row, move the mouse cursor to the left border of the first cell. 4. To select the whole column, move the mouse cursor to the top border of the first cell. 5. To change the properties of multiple cells in one action, first select the cells and then click Cell Properties. 6. To center an image in the middle of a cell, open Cell Properties, specify the background image, set Repeat to 'Do not repeat' and set Horizontal/Vertical Align to 'Center'. 39

40 Arrange Menu The arrange menu contains all operations related to the layout of the current page. Align Lefts Aligns the left edges of the selected objects with the dominant object. Centers Aligns the centers of the selected objects with the dominant object Rights Aligns the right edges of the selected objects with the dominant object Tops Aligns the top edges of the selected objects with the dominant object Middles Aligns the middles of the selected objects with the dominant object Bottoms Aligns the bottom edges of the selected objects with the dominant object Space Evenly Across Evenly spaces the selected controls horizontally Down Evenly spaces the selected controls vertically Center in Page Vertical Centers the controls vertically within the web page Horizontal Centers the controls horizontally within the web page Make same size Width Resizes the selected objects to have the same width as the dominant object Height Resizes the selected objects to have the same height as the dominant object Both Resizes the selected objects to have the same size as the dominant object Arrange Move To Front Move object to front of the page Move To Back Move object to back of the page Move Forward Move object to next position in z-order Move Back Move object to previous position in z-order 40

41 Grouping Group You can group multiple objects, so that they stick together when you move them. When you select one object of a group, the other objects will automatically be selected too. Grouped objects can not be edited until you ungroup them. Ungroup Ungroup objects. Guide settings Snap to ruler guides Enable or disable snap to ruler guides Show Table Cell Outlines (if border = 0) When this option is enabled Web Builder will draw table cell outlines even if the border is zero. Show Guide Borders Guide border can be useful when designing a web page for specific resolutions. If you make sure all objects stay between the guide border, the final page will fit in the desired window size. Lock page size (no automatic page adjustment) Normally Web Builder will automatically update the page size if you place an object outside the page borders. When this option is enabled the page width will be locked even if you place objects outside the border. If you want a larger workspace you will need to update the page width/height manually in that case (using Page Properties). Show Grid Show or hide grid. Snap to grid Enable or disable snap to grid. Use the Snap to Grid feature to align objects exactly. Web Builder creates a "magnetic" attraction between the selected object and the grid. Grid Spacing Specifies the spacing between the grid dots. Ruler guides Horizontal and vertical ruler guides are used to align objects on the page. Typically ruler guides are placed on the page by dragging them from the horizontal and vertical rulers or by specifying precise positions using the 'Format Ruler Guides' dialog box. Alternatively you can use the menu option 'Add Horizontal Ruler Guide' or 'Add Vertical Ruler Guide' to insert a new guide. To move the ruler guide, position the mouse pointer over the guide, until you see the vertical or horizontal Adjust pointer and then drag the guide to its new position. You can remove a single ruler guide or all ruler guides from a page Position the mouse pointer over the ruler guide you want to delete until you see the adjust pointer and then drag it back to the ruler. Or you can use the 'Format ruler guide' dialog box to delete the ruler.. To remove all ruler guides in a page, select the Arrange menu, point to Ruler Guides, and then click Clear All Ruler Guides. Objects which are placed close to a guide "snap to" the guide for easy alignment. 41

42 Tools Menu Asset Manager The Asset Manager can be useful to modify the location of one or more assets (images, movies, sounds etc) without the need to open the properties of each item. You can select which group of items will be displayed in the Asset Manager (Filter). To change the location of only 1 asset, simply select the item, click the 'Update' button and select the new location. To change the location of multiple assets, select the items, click the 'Update' button and select the new location. This means that you can update the location of all assets with just a few clicks! It is also possible to move assets to another location. In that case Web Builder will make a copy of the assets to the specified location and update the path in the editor. Note that the original file will not be deleted! Page Weight The Page weight tool helps you determine the estimated size and download time of a page. The tool will list all files which are part of page and their sizes. By selecting the connection speed you can get an idea how long it will take to download the complete page. Note: Please keep in mind that some files (like scripts, images) are used by multiple pages. They will be downloaded only once! 42

43 Site Map The sitemap tool creates an XML sitemap that can be submitted to Google and other search engines to help them crawl your website better. A Sitemap is an XML file that lists the URLs for a site. It allows webmasters to include additional information about each URL: when it was last updated, how often it changes, and how important it is in relation to other URLs in the site. This allows search engines to crawl the site more intelligently. It's important that you specify the full URL to your website, for example This URL must begin with the protocol (such as http) and end with a trailing slash, if your web server requires it. You can specify the change frequency and priority for each page in your website. Change frequency How frequently the page is likely to change. This value provides general information to search engines and may not correlate exactly to how often they crawl the page. Valid values are: always, hourly, daily, weekly, monthly, yearly, never The value "always" should be used to describe documents that change each time they are accessed. The value "never" should be used to describe archived URLs. Please note that the value of this tag is considered a hint and not a command. Even though search engine crawlers consider this information when making decisions, they may crawl pages marked "hourly" less frequently than that, and they may crawl pages marked "yearly" more frequently than that. It is also likely that crawlers will periodically crawl pages marked "never" so that they can handle unexpected changes to those pages. Priority The priority of this page relative to other pages on your site. Valid values range from 0.0 to 1.0. This value has no effect on your pages compared to pages on other sites, and only lets the search engines know which of your pages you deem most important so they can order the crawl of your pages in the way you would most like. The default priority of a page is 0.5. Please note that the priority you assign to a page has no influence on the position of your pages in a search engine's result pages. Search engines use this information when selecting between pages on the same site, so you can use this tag to increase the likelihood that your more important pages are present in a search index. Also, note that assigning a high priority to all of the pages on your site will not help you. Since the priority is relative, it is only used to select between pages on your site; the priority of your pages will not be compared to the priority of pages on other sites. 43

44 Verify Links This option scans your documents for links and displays them in a list. You can choose to edit them or press the Verify button to validate their current state. Possible states: Not verified Validated URL URL not found - not verified yet - URL is valid - URL is not valid (or currently not reachable) This tool can be handy when you want to verify all your links so you don't have to verify them one by one. Customize This command will display the Customize window. This option is for advanced users only and allow you to customize almost every menu, toolbar or keyboard shortcut of the application. Users who are familiar with Microsoft Office products, will probably recognize most of the available settings. Options This command displays the configuration window of WYSIWYG Web Builder. General Options Most advanced options speak for themselves. Just try them out and see what happens... Create blank document at startup Application windows maximized at startup. Open the most recent used file at startup Allow locked objects to be edited. Locked objects can not be moved of resized, but you can still edit their properties. Determine Flash Movie size by finding the largest frame This option tries to find the largest frame within a Flash Movie. Note that some Flash Movie may have invisible frames which are larger than the actual movie size! Initial Text: Specifies the initial text of a text object. Default: Double click to edit Do not show initial text, but directly go into edit mode when created. Check for updates online at startup. This option will connect to the Web Builder website to check if there is a new version of the software available. You can also check for updates in the Help menu: Menu->Help->Check for updates online. HTML Options Force word-wrap (using whitespaces) in table cells. Helps to prevent word-wrapping problems in tables. This option was introduced because FireFox does not support word wrapping styles. Include pngfix.htc which allows IE to properly render PNG alpha transparency. This option enables the PNG fix for Internet Explorer 5.5 and 6 on Windows. The fix allows IE to properly render PNG alpha transparency. Why only versions 5.5 & 6? Because Windows IE versions prior to 5.5 do not support the filter which fixes the PNG problem, and version 7 finally supports tranparency for PNGs. Note: Many of the Web Builder objects (like shapes, drawing tools, images, navigationbars) generate transparent PNG files so if you want your website to be compliant with IE 5.5 and 6 you should enable this option. Preload images used by javascripts. Enabling this option will preload all images of a pages used by the javascript (like the navigationbar and the slideshow) when the page is loaded. This will result in smoother mouse over effects. However the loading of the page may take a little long since all images will be downloaded. 44

45 Folder Options In the Folders tab you can specify where your Web Builder documents will be saved by default. Web Builder includes an option to make a copy the images in your document when documents are saved. This can be useful if you want to keep all your Web Builder related files in one place. This folder will also be used to save images from imported HTML pages. If you enable Keep all assets used by a website project in a folder relative to the document, then Web Builder will make a backup copy of all assets (images, movies, sounds) which are part of your website to a folder relative to the project file, so all files will be stored in one place. The name of the folder will be the same as the project name. This means that if your project is called 'mywebsite', then all assets will be stored in the sub folder 'mywebsite'. Copying or moving your project to another computer is now as easy as copying the project file and its sub folder the another PC! In the Preview Folder field you can change the default folder which is used for the preview files. This can be useful if you want the files to be copied to a folder of your local web server in case you generate PHP or ASP pages. If the option Remove preview files is enabled, Web Builder will remove all previously generated files the next time you select the preview option. This prevents that old files will be left behind and only new files exists in the preview folder. Warning: This will remove all files from the specified folder! (not only the files that where previously generated by Web Builder). Publish Options Connection Timeout, increase this value if you experience timeouts while connecting to the FTP server. Default is 30 seconds. Enable Logging, enable logging when you have problems while publishing your web site. The log might contain useful information about the problem. Images Sub Folder, Web Builder can publish the image of your web site to a different folder than the HTML files. If the server does not support sub folder, make this field empty, so all images are published to the same folder as the HTML files. Images name prefix. Some objects such as shapes, navigation bar buttons will be published as (dynamically generated) images. These images do have an unique name within the website (eg img0001.gif, img0002.gif). With this option you can control how the images will be named. For example if you specify wbimage as prefix, the images will be named 'wbimage0001.gif' or 'wbimage0002.png' It is also possible to make the name of the page part of the filename by enabling the option Use page name for image prefix, this makes it easier to keep track of which images belong to a specific page Misc Options Language: Use this option to specify the language used for the user interface. Default is English. Before a certain language is available from the dropdown list, you need to install the appropriate language module. Visit the website of WYSIWYG Web Builder to check for the available languages. Docking algorithm for resizable bars: Default or Visual Studio 2005 style. When Visual Studio 2005 style is selected, so called Dock Markers are displayed when you reposition windows like the Site Manager or Toolbox. Display websafe fonts only You can enable this option so WYSIWYG Web Builder will only display websafe fonts. Preview Scope, this option specifies the preview scope of Web Builder. Select Current Page to only preview one page or Entire Web Site if you want to test your complete web site. Tip: Holding down the SHIFT key while previewing will 'invert' the current preview scope. 45

46 Backup folder: WYSIWYG Web Builder can automatically make backups of your projects, before overwriting a previous version of the project. Backup folder specifies the folder where the backup will be stored. Total number of site backups. Specifies the number of backup to keep before overwriting them with newer versions. Enter 0 is you do not want Web Builder to create backups. Web Builder will name the backups like this: myproject_01.wbs myproject_02.wbs myproject_03.wbs The highest numbered file will always be the latest backup. If the maximum number of backups is reached, the oldest backup will be deleted and all other backups will be renamed. Extensions Extensions (also called add-ons or plugins) are components which enhance the functionality of WYSIWYG Web Builder. Extensions can be accessed through the Toolbox or via the Insert menu just like the standard objects. We already have a long list of official extensions and in the future we plan to release a wide range of extensions to make WYSIWYG Web Builder even more powerful than it already is. Some extensions are simply components with few parameters while other are almost complete applications by themselves! See also: In previous versions of Web Builder you would have to install new extensions manually, but in version 6.0 we've made it a lot easy! The Installed page displays all extensions which are currently installed. If you do no longer need a specific extension you can remove it by clicking the 'Uninstall' button. Note: Please make sure that none of your projects uses the extension if you decide to remove a specific extension, otherwise you will no longer be able to load that project until you re-install the extension The Available page displays all extensions available for download and installation. If a new version of an extension that you already have is available online, then you have the choice to update it. Each time you open this window, Web Builder will ask if you wish to download the most recent list from the website. Normally you will have to do this only once a week. Notes: The built-in Extension Manager only works correctly if the software can access our web server! If for some reason your firewall or virus scanner blocks access the Internet connection then you will not be able to use this feature. To fix this problem make sure WYSIWYG Web Builder is on the exception list of your firewall/virusscanner! If you've recently purchased your license, it's possible that your registration information is not yet in the online database. IT MAY TAKE SEVERAL HOURS BEFORE YOU CAN DOWNLOAD THE EXTENSIONS! Please be patience. See also: If you wish to manually install the extensions, then that is still possible. Just like in previous versions all you will have to do is copy the.wbx file to the program folder of WYSIWYG Web Builder. Related FAQ topic: 46

47 WYSIWYG Web Builder Objects In WYSIWYG Web Builder your web pages are build up out of objects. Most of these objects represent a standard HTML element. There are 2 ways to insert object to your page: 1. By using the Insert menu. 2. By using the Toolbox To insert a new object, select one of the available items and draw a box to indicate the position of the object. The new object will now be inserted to the page. To change the properties double the object or select Edit->Properties from the menu bar. It s also possible to call the object s properties using the keyboard shortcut Alt+Enter. Tip: Another way to add objects to your page is by simply dragging them out of the toolbox onto the workspace. The WYSIWYG Web Builder toolbox contains the following objects: General Bookmark Bulleted List Horizontal Line Image Marquee Table Text 47

48 Forms Form Wizard Form Area Advanced Button Captcha Checkbox Combobox Editbox File Upload Image Button Push Button Radio button Text Area Advanced File Publisher Flash Java Applets HTML Inline Frame Layer Master Page Embedded OLE Object Plug-In QuickTime Real Player Windows Media Player YouTube Navigation Go Menu Menu Bar Navigation Bar SiteTree Slide Menu Tab Menu Text Menu Drawing Curve Closed Curve ClipArt Line Polygon Scribble Shape TextArt Extra Banner Blog Image Map Photo Gallery Ready to use Java Scripts Rollover Image RSS Feed Slide Show 48

49 PayPal ecommerce Tools Buy Now Button Add to cart Button View cart Button Subscription Button Donation Button Login Tools Admin Login Logout Protected Page SignUp Password Recovery Change Password WYSIWYG Web Builder Extensions Extensions (also called add-ons or plug-ins) are components which enhance the functionality of WYSIWYG Web Builder. Extensions can be accessed through the Toolbox or via the Insert menu just like the standard objects. In the future we plan to release a wide range of extensions to make WYSIWYG Web Builder even more powerful than it already is. Some extensions are simply components with few parameters while other are almost complete applications by themselves! For a list of the currently available extensions please visit our website: 49

50 Bookmark Text and images can be set as bookmarks (also called "anchors") that can be linked to within a page. For example, if a page has several new items, the news titles for each item can be set as bookmarks and a row of links can be added to the top of the page that will each skip down to those bookmarked sections. This method of using bookmarks allows visitors to your site to quickly access information by not having to scroll down the page to view the information they want. You can create a Bookmark by using the Bookmark tool from the Insert menu and place it anywhere in the page. Make sure you give the bookmark a unique name. Once you have placed the bookmark icon on your page, it can be selected from the Bookmark dropdown list. You can read more about bookmarks in the Links chapter. 50

51 Bulleted List You can add a bulleted list to your web page to set apart a list of items from the rest of the page pf text. The bulleted list is a combination of ordered (numbered) lists and unordered lists and supports the following styles: Circle, Disc, Square, Numeric (1, 2, 3), Lower Alpha (a, b, c), Upper Alpha (A, B, C), Lower Roman (i, ii, iii), Upper Roman(I, II, III) and custom images. To insert a bulleted list into your page select Insert->Bulleted List. Next select the initial number of items and the bullet style. Note that you can always change the bullet style to something else through the object's properties. Other properties of the bulleted lists include Font, size, color and spacing and padding for the individual items. How do I edit the text of a item? Double click the item to edit the text. Formatting of the text works the same way as in a regular textbox. How do I insert a new item? Right click the bulleted list to display the context menu and select Insert Item. How do I remove an item? Right click the bulleted list to display the context menu and select Delete Item. How do I select the next item using the keyboard? Use the Tab key to go to the next item How do I change the space between the bullet and the text? When you move the mouse cursor between the bullet and the text you can drag the (invisible) border to increase of decrease the spacing. Why does Web Builder not use 'real' bullet tags in the output HTML? Bulleted list are not cross browser compatible. This means that all browsers have their own way of displaying lists all with their own padding, line-spacing and other specific offsets. It is impossible to generate a bulleted list using the standard

tags in a way that is looks the same in all browsers. For this reason, we have decided to use tables to simulated look and feel of bulleted lists. This way we have much more control over the layout of the bulleted lists and we can be sure it looks (almost) the same of every browser. 51

52 Horizontal Line The Line object is used to insert a horizontal line across the page. Height Specifies the line height in pixels. Line Color Solid Line (no shade): By default, the line is transparent with a shaded border. To specify your own color check this box. Color: the color of the line. Note: HTML does not have a vertical line object, but in Web Builder, you can use the shape object or draw tools instead. 52

53 Image To add images use the Image object. Drag the object to the page and a file dialog will popup to select the image. Web Builder supports jpg, gif, bmp and png files. Filename: enter the path and filename of the image/picture or select Browse to find an image on your local drive. Notes: 1. This property specifies the location of the local image, when you publish the page the image will automatically be copied to location as specified in Tools->Options->Publish->Images Sub Folder. 2. You can also specify absolute URLs like this 3. To make a (backup) copy of the images used in your page enable Tools->Options->Folders->Make a copy of images to this folder when documents are saved. This will copy all images to the specified folder, so they're all stored in one place. It also prevents having duplicate image names in your web site. Alternate text This text, usually a short description, appears in place of the object in browser when images are unsupported or have been disabled. In some browsers it appears as a ToolTip when you move the mouse over the image. Title In modern browsers this title appears as a ToolTip when you move the mouse over the image. Use original size Select this if you want the image to appear at its original size. Fit to layout rectangle Select this if you want to manually specify the image size. Border thickness Specifies the thickness of the border around the image. Set this to 0 (zero) for no border. Border Color Specifies the color of the border around the image. Reflection Specifies the amount of reflection. Opacity Change the transparency (0-100%) of the image. Enable Shadow Specifies whether to enable the shadow effect. A shadow with an x and y offset of 0 (zero) will produce a glow-like effect. Decreasing the blur factor of the shadow will make the edges more sharp. Shadow Offset X Horizontal shadow offset Shadow Offset Y Vertical shadow offset Shadow Opacity Sets the transparency of the shadow. Shadow Color Specifies the shadow color 53

54 Shadow Blur Softens the shadow's edges. Rotation See also the description Rotate an image earlier in this document. Links For more details about linking please read the chapter about Links. Events For more information about events please read the Events chapter. Image Tools & Effects In WYSIWYG Web Builder, you can apply effects to images without having to open a separate image editor! Available tools are: Rotate Rotate the image 90 degrees left or right. Flip Flip the image horizontally or vertically. Contrast Adjust the contrast of the image. Brightness Adjust the brightness of the image. Resample Re sampling an image will change the number of pixels and therefore the physical file size of an image. Re sampling will be done based on the current size of the image on the page. If the size is smaller than the original size, the physical file size is decrease. It it's larger the physical file size will increase! Crop By cropping an image, you can remove areas of the image that you don't want to use. While in crop mode drag the handles of the cropping box to resize and include the part of the image that you want to keep. Click Crop again to remove the area outside of the cropping box. Hue/Saturation Adjust the hue or saturation of the image. Add/Replace stencil Stencils are a cool way to change the appearance of your images. Stencils can convert your images into any shape! Basically stencils replace the alpha channel information (transparency) of the the image with the one from the stencil. You can create your own stencils and place the stencils in the sub folder \stencils of the program. 54

55 Available effects are: Blur Colorize Cylinder Edge Linear Edge Non Linear Emboss Erode Fish Eye Inner bevel frame Jitter Gold/Ice/Metallic effect Grayscale Median Mosaic/Pixellate Negative Noise Pinch Punch Sepia Sharpen Soften Soft Edges/Feather Splash Twirl Some things that you should know about effects: 1. You can apply multiple effects to an image. 2. Effects are non-destructive, which means they are not apply to the original image. A copy of the original image will be published to your website using an unique name (.png format). 3. Effects are applied to the image 'on-the-fly' when the images are loading into workspace and in the order you've added them. So for example if you apply Brightness 3 times, the images will be processed 3 times the next time you load your page. 4. Plan your effects! Do not add to many effects to images. This will slow down loading times of the image in Web Builder. Before applying effects test which impact the effect has on the image, if you do not like it use undo the restore the original image. 5. Do not apply effects to very large images! The bigger the image, the longer it will take before the effect has been processed (just like in any other image editor!). 6. Resample can be used to decrease the size of the published image and therefore can increase the loading speed of your website. Of course resampling will also reduce the quality of the image. 55

56 Marquee The Marquee object is used to introduce text that scrolls. Text Enter the text to scroll. Text can include formatting and links. Direction This attribute controls the direction of scrolling. Repeat Number of times to repeat the scrolling (0=Continuously). Delay This controls the delay (in milliseconds) between the successive displays that give the impression of animation. Amount This controls the amount of movement (in pixels) between the successive displays that give the impression of animation. Behavior This attribute controls the behavior of the displayed text. Marquee Style Settings: Font Type Lists available fonts that you can apply to the text. Size Lists available sizes that you can apply to the text. Text color Specifies the color of the text. Background color Specifies the color of the background. Bold Apply bold formatting to the text. Italic Apply italic formatting to the text. Underline Apply underline formatting to the text. 56

57 Text This object allows you to add text to the web page drag the object to the page and double click it to start typing your text. Use the Format Toolbar to change the font, size, color and other properties of the text. To insert a link in the text use the Link option. For more information about hyperlinks please read the Links chapter of this document. Most text properties can changed using the format toolbar or using the menu bar s format item. Note: You must first highlight text before you can change the formatting. These are the available formatting options: Font Type - font family of text, such as Arial, Times New Roman, and Courier New. Font Size - font size. Bold - bold format Italic - italic format Underlined - underlined format Strikethrough - draws a line through the text Superscript - superscript format Subscript - subscript format Text Color - color of the text Background color - highlight color of the text Align Left Align Center Align Right Align Justify - Left alignment - Center alignment - Right alignment - Justify alignment The following properties can be changed using the Text Properties window (right click context menu): Background Color Specifies the color of the textbox s background. If set to 'Automatic' the webpage background will be used. Background Image Specifies the optional background image of the textbox. Hyper linking For more details about linking please read the chapter about Links. Publish this text as an image Converts the text to image when your page is published. This option can be useful if you want the text to be displayed exactly as in WYSIWYG Web Builder, even when you selected fonts, which are not web-safe. The text will be converted in an GIF image, using a transparent background. You can use the Advanced option to change the color of the transparency color. 57

58 Form Wizard Creating forms has never been so easy! Create complete forms in just a few steps. One of the many ways in which you can interact with people who visit your website is to get feedback from them through forms. Creating a form from scratch can be a rather difficult, so we've implemented the Form Wizard to make this task a little easier. Step 1: How do you want to create the new form? The WYSIWYG Web Builder Form Wizard has 3 methods to create a form: 1. Create a new form based on a template This option allows you to select a template form, which you can use as the basis for own form. 2. Create a new form from scratch using the wizard Manually insert controls and labels to the form. 3. Create a blank form so you can add controls later This inserts a blank form to your page with no controls on it. Basically this is the same as manually inserting an empty form area. Step 2: Select a template form We've included several ready-to-use forms to get you started. Please take your time to study the properties of each of these form to get an idea how we've implemented them, so you can use this knowledge to create your own forms. For some forms you will need to modify the pre-defined values such as the specified address or website URL. There are 2 form processor templates where external websites are used to process the form data. Before you can make use of the services of these websites you will need to register first! These examples can be useful if your website does not support PHP or any other type of form processing. 58

59 Step 3: Add Control to the form In this step you can insert controls to the form. Each control can have a label which will be displayed in front of the control. Click Add and select one of the items from the drop down menu to insert a new control. In most cases the wizard will ask you to enter a label name. To modify the properties of the controls, select it in the list and click Edit to show the control's properties. You can re-arrange the items using the Move Up and Move Down buttons. Tip: Make sure your form contains a Submit button. Without this button the user will not be able to submit the entered data! 59

60 Step 4: Where should the data be sent to? When the user presses Submit, the browser sends the form data to a web server, so we need to specify where the data should be sent to. One of the possibilities is 'Submit the data to an address', although this is a very common method, it doesn't work reliably for all visitors to your site. Whether or not a visitor can use this method depends on the mail client installed on their computer. And unfortunately, there's no way to test if that's the case for each of your visitors. We do not recommend using this method! Instead of using the Submit the data to an address ("mailto") method, try using a remotely hosted CGI script like PHP, ASP or remote hosted solutions like or These services let you access a CGI script run off of their servers. You build your form as you normally would, but now you select Submit data to a script on an external server and fill in the URL of the remote CGI script. The CGI script translates your form into an message and sends it on to the address you provide. Alternatively you can create your own form processor and make the form processor script part of your Web Builder website. In that case select Submit data to a page within your website. In the tutorial section of our website you can find an example how to implement this using PHP: Use Built-in PHP form processor to send data to an address. Enable this option if you want to use the built-in form processor. For more details about this feature in the Form chapter. Encoding type The required encoding type depends on the form processor script, so please consult the documentation of the CGI script for more info. In case you have selected a pre-defined form, the correct encoding type will be selected. 60

61 Form A form provides a way you to collect information from the people who view your web pages. A viewer enters data or makes choices among several options and then submits the form. The results can be sent to you by . If your web server has the right software, you can save the form results in a database. The Form Area object is a container for FORM objects like buttons, edit boxes and checkboxes. You can add any standard form object to a form, including single- and multiple-line text fields, check boxes, radio buttons, scrolling lists, and drop-down lists. You add objects to a form using the Form toolbar (Form Tools). You must place form objects inside a form to make them work as part of the form. Browsers display form objects differently, so test your form on all the browsers and platforms you plan to support. How do I create a form in WYSIWYG Web Builder? 1. Drag the Form object to the page and a draw a box to indicate the position of the form. 2. Design your form by adding some Form controls to the form, for example: Button, Image Button, Advanced Button, Checkbox, Radio button, Editbox, Text Area or Combobox. You can also make text and images part of the form. You'll notice that all objects become a part of the form, so when you change the position of the form all those objects move along. 3. Make sure your form contains a Submit button (push button). Without this button the user will not be able to submit the entered data. 4. Once you have designed your form, you may need to set some properties. Select the form and choose Edit->Properties from the Web Builder menu. The most important thing you need to do is specify the form action. For example to send the entered data to your address, when the user presses the submit button: Note: Much more information about forms is available in the Frequently Asked Questions section of the website, in the online tutorials and in the support forum: 61

62 Form name Enter a name for the FORM. This name is primarily used for advanced scripting. Action Required attribute, specifying the URL of a CGI script which processes the form and sends back feedback. There are two methods to send form data to a server. GET will send the form input in an URL, whereas POST sends it in the body of the submission. The latter method means you can send larger amounts of data, and that the URL of the form results doesn't show the encoded form. For example: This will the results to your address using the visitors default client. Note: We do not recommend using the HTML s mailto feature. It is very unreliable and its behavior strongly depends on the type of browser and user preferences. When possible use the built-in PHP form processor or create your own processing script. While WYSIWYG Web Builder has all the tools that you need to add the form to your website, it can't handle the form processing for you and you'll need a server-sided form handling tool to do this. if your server supports PHP then you can write a simple form handling routine in PHP as explained in this tutorial: If your server is not PHP-enabled, then you should contact your web host and ask them for the details on processing forms. Some servers offer server-side scripts that you can use, and if this is the case you'll need instructions setting this facility up. Alternately you can use a remotely hosted solutions like or These services let you access a CGI script run off of their servers. You build your form as you normally would, but now you fill in the URL of the remote CGI script. The CGI script translates your form into an message and sends it on to the address you provide. Encoding type Here you can specify an encoding type the default of "application/x-www-form-urlencoded" is most widely supported. An alternative is "text/plain", which is typically used in combination when the Action attribute points to a mailto: URL. If a browser supports both, the contents of the form is sent in plain text to the indicated recipient. Use Built-in PHP form processor to send data to an address. Enable this option if you want to use the built-in form processor. This feature automatically generates a PHP script that will process the fields of your form and send it to an address you specify. The form processing script will be inserted into the same page and you will be able to select a 'thank you' or successful page that will be displayed after the user has submitted the data. 62

63 address The address where the results of the form will be send to. Subject The subject of the message. Message A short message that will be added to submitted data. Success page The page that the user will be redirected to after the data has been submitted (after the 'submit' button has been pressed). Error page The page that the user will be redirected to if an error occurred while processing the data. Write form data to a.csv file. This option will save the submitted form data to a comma separated data file on the web server. You open this file in Microsoft Excel, a text editor or import into a database. Note that the data file must exist on the server and it must be writable! WYSIWYG Web Builder has a very useful option to automatically create this file for you and set the appropriate permissions. Simply click the 'Create' button next to the filename field and follow the onscreen instructions. Step 1 Enter the name of the data file. For example 'formdata.csv' Step 2 Select the publish location where the file will be created. Web Builder will list all profiles you've created in the publish manager. Step 3 Web Builder will connect to the selected location and display the folder structure on the web server. Select the remote folder and click 'Finish' to create the data file. Upload files to a folder on the server. If this option is enabled the built-in form processor will upload files to a folder on the server instead of sending them as attachment via . The files will be saved with an unique filename. The location of the uploaded file(s) will be included in the message. Important notes about the built-in PHP form processor: If the form contains an editbox named ' ', then this address will be used as the 'from' address for the message. This field name is case sensitive! So do not call it or . If the form contains one or more 'file upload' objects then the script will automatically attached these files to the message. You MUST change the file extension on the page to php (in Page Properties), because PHP will be added to the page. You cannot preview/test a PHP page on your local computer unless you have a PHP web server installed. PHP scripts can only be tested once the page has been published to the server. Your hosting account must support PHP and the mail() function must be enable, otherwise it will not work. You can have only one form per page. 63

64 Hidden Fields You can also add hidden fields that are not rendered but whose values are submitted with a form. Generally hidden fields are used to store information between client/server exchanges that would otherwise be lost due to the stateless nature of HTTP. Enable grid Enables a grid especially for this form. Background color Specifies the color of the form background. If set to 'Automatic' the webpage background will be used. Background image Specifies the optional background image. Events For more information about events please read the Events chapter of this document. 64

65 Advanced Button Inserts an Advanced Button object on a form (HTML 4 and higher). The Advanced Button gives you much more control over the appearance and behavior of a button. You can change the background color, use different fonts for the text or even activate JavaScript commands. General Name Name of the button. Value Initial value of the button. Button Type Normal: Normal (Push) buttons have no default behavior. Submit: When activated, a submit button submits a form. A form may contain more than one submit button. Reset: When activated, a reset button resets all controls to their initial values. OnClick: With this option you can associated a client-side script to the button. Select one of the actions at OnClick action OnClick action Here you can specify which action if associated with the button OnClick event: Navigate to the specified URL; enter an URL as OnClick value Open a new window and load the specified URL Close the current browser window; enter an URL as OnClick value Reload; reload the current page (same as Refresh in the Internet Browser). Go to the previous page; the same as Back in the Internet Browser. Go to the next page; the same as Forward in the Internet Browser. Execute Java Script function; specify a script function you've defined elsewhere in the page. OnClick value Depending on which OnClick action you've selected you enter the associated value here. For example for Navigate to the specified URL you enter an URL. Access Key This attribute assigns an access key to the object. An access key is a single character. Pressing the access key gives focus to the element. Disabled The disabled option disables the control for user input. Disabled controls do not receive focus. Disabled controls are skipped in tabbing navigation. The value of disabled controls will not be submitted with the form. Tab Index All elements (except hidden elements) in a form are part of the form's tab order. When the user presses the Tab key, the browser shifts the input focus from element to element in order the elements appear in the HTML code. However, sometimes you want the tab order to flow a little differently. In that case, you can number the fields using tabindex attribute. Usually the first tabindex start on with value '1'. To exclude an element from the tab order, set the value of tabindex to 0. In that case the element is skipped when the user tabs around the form. 65

66 Title Specifies the tooltip displayed by the browser Style Predefined Style Here you can select one of the global site styles. This option will overwrite all custom style settings for this object. You can add or edit styles in the Style Manager. Background color Specifies the color of the form background. If set to 'Automatic' the standard (system) button color will be used. Background image Specifies the optional background image. Border style Specifies the style of the border: Dotted,Dashed, Solid, Double, Groove, Ridge, Inset or Outset. Border size Specifies the thickness of the border around the button. Set this to 0 (zero) for no border. Border color Specifies the color of the border around the button. Events For more information about events please read the Events chapter of this document. Note: This control is normally part of a form. 66

67 Checkbox Checkboxes are on/off switches that may be toggled by the user. Use Check boxes if want to allow more than one item to be selected. General Name Name of the checkbox. Value Value of the checkbox when it's switched on. Initial state Initial state of the checkbox. Access Key This attribute assigns an access key to the object. An access key is a single character. Pressing the access key gives focus to the element. Disabled The disabled option disables the control for user input. Disabled controls do not receive focus. Disabled controls are skipped in tabbing navigation. The value of disabled controls will not be submitted with the form. Tab Index All elements (except hidden elements) in a form are part of the form's tab order. When the user presses the Tab key, the browser shifts the input focus from element to element in order the elements appear in the HTML code. However, sometimes you want the tab order to flow a little differently. In that case, you can number the fields using tabindex attribute. Usually the first tabindex start on with value '1'. To exclude an element from the tab order, set the value of tabindex to 0. In that case the element is skipped when the user tabs around the form. Title Specifies the tooltip displayed by the browser Events For more information about events please read the Events chapter of this document. Note: This control is normally part of a form. 67

68 Combobox Used to allow users to make a selection from a number of different options. General Name Enter an identifier for the field. Type Combobox: this will make the object a drop-down list. Only a single line is displayed at once. Listbox: this will make the object a standard list box. Multiple lines are displayed at once. Allow multiple selections Allows the user to select multiple items at the same time. Elements You can Add, Edit and Delete items that will appears in the list. Add Add a new item to the list. Edit Edit an existing item in the list. Delete Remove the selected item from the list. Move Up Moves the selected item up one position in the list. Move Down Moves the selected item down one position in the list. Tip: You can also rearrange items with the mouse by using drag & drop. Disabled The disabled option disables the control for user input. Disabled controls do not receive focus. Disabled controls are skipped in tabbing navigation. The value of disabled controls will not be submitted with the form. Tab Index All elements (except hidden elements) in a form are part of the form's tab order. When the user presses the Tab key, the browser shifts the input focus from element to element in order the elements appear in the HTML code. However, sometimes you want the tab order to flow a little differently. In that case, you can number the fields using tabindex attribute. Usually the first tabindex start on with value '1'. To exclude an element from the tab order, set the value of tabindex to 0. In that case the element is skipped when the user tabs around the form. Title Specifies the tooltip displayed by the browser 68

69 Style Predefined Style Here you can select one of the global site styles. This option will overwrite all custom style settings for this object. You can add or edit styles in the Style Manager. Font Type Font type is the font family of text, such as Comic Sans, Times New Roman, and Courier New. Text Style Style of the font such as Bold, Italic or Regular. Text Size Size of the text. Text Color Color of the text. Background color Specifies the color of the background. If set to 'Automatic' the standard (system) color will be used. Background image Specifies the optional background image. Validate For more information about validation please read the Form validation chapter. Events For more information about events please read the Events chapter of this document. Note: This control is normally part of a form. 69

70 Editbox Single-line field that can be used to add name/ address fields. General Name Enter an identifier for the field. Initial Value Value that is initially display in the field. Max. Length Specifies the maximum number of characters a user can enter into the editbox. Password field Makes the editbox a password field so any text entry is displayed as asterisks ('Yes'). 'No' means a plain text field. Disabled The disabled option disables the control for user input. Disabled controls do not receive focus. Disabled controls are skipped in tabbing navigation. The value of disabled controls will not be submitted with the form. Access Key This attribute assigns an access key to the object. An access key is a single character. Pressing the access key gives focus to the element. Readonly The readonly option prevents the user from changing the value of the field, but not from interacting with the field. The user can still highlight the text for copying for example. Readonly elements receive focus but cannot be modified by the user. Readonly elements are included in tabbing navigation. Readonly elements will be submitted with the form. Tab Index All elements (except hidden elements) in a form are part of the form's tab order. When the user presses the Tab key, the browser shifts the input focus from element to element in order the elements appear in the HTML code. However, sometimes you want the tab order to flow a little differently. In that case, you can number the fields using tabindex attribute. Usually the first tabindex start on with value '1'. To exclude an element from the tab order, set the value of tabindex to 0. In that case the element is skipped when the user tabs around the form. Title Specifies the tooltip displayed by the browser Style Predefined Style Here you can select one of the global site styles. This option will overwrite all custom style settings for this object. You can add or edit styles in the Style Manager. 70

71 Font Type Font type is the font family of text, such as Comic Sans, Times New Roman, and Courier New. Text Style Style of the font such as Bold, Italic or Regular. Text Size Size of the text. Text Color Color of the text. Background color Specifies the color of the background. If set to 'Automatic' the standard (system) color will be used. Background image Specifies the optional background image. Border style Specifies the style of the border: Dotted,Dashed, Solid, Double, Groove, Ridge, Inset or Outset. Border size Specifies the thickness of the border around the edtibox. Set this to 0 (zero) for no border. Border Color Specifies the color of the border around the editbox. Validate For more information about validation please read the Form validation chapter. Events For more information about events please read the Events chapter of this document. Note: This control is normally part of a form. 71

72 File Upload This provides a means for users to attach a file to the contents of the form. The element is rendered as a text field and an associated button, though in some browsers it may appear differently. General Name Enter an identifier for the field. Disabled The disabled option disables the control for user input. Disabled controls do not receive focus. Disabled controls are skipped in tabbing navigation. The value of disabled controls will not be submitted with the form. Access Key This attribute assigns an access key to the object. An access key is a single character. Pressing the access key gives focus to the element. Tab Index All elements (except hidden elements) in a form are part of the form's tab order. When the user presses the Tab key, the browser shifts the input focus from element to element in order the elements appear in the HTML code. However, sometimes you want the tab order to flow a little differently. In that case, you can number the fields using tabindex attribute. Usually the first tabindex start on with value '1'. To exclude an element from the tab order, set the value of tabindex to 0. In that case the element is skipped when the user tabs around the form. Title Specifies the tooltip displayed by the browser Style Predefined Style Here you can select one of the global site styles. This option will overwrite all custom style settings for this object. You can add or edit styles in the Style Manager. Font Type Font type is the font family of text, such as Comic Sans, Times New Roman, and Courier New. Text Style Style of the font such as Bold, Italic or Regular. Text Size Size of the text. Text Color Color of the text. Background color Specifies the color of the form background. If set to 'Automatic' the standard button color will be used. Background image Specifies the optional background image. 72

73 Border style Specifies the style of the border: Dotted, Dashed, Solid, Double, Groove, Ridge, Inset or Outset. Border size Specifies the thickness of the border around the input fields. Set this to 0 (zero) for no border. Border Color Specifies the color of the border around the input fields. Validate For more information about validation please read the Form validation chapter. Note: This control is normally part of a form. 73

74 Image Button Inserts an Image Button object on a form. An image button is just like a Submit button. When the visitor of the page clicks on the Image it will perform the action associated with the form. General Name Name of the button. Image: enter the path and filename of the image/picture. Use original size: Select this if you want the image to appear at its original size. Fit to layout rectangle: Select this if you want to manually specify the image size. The Image button acts the same way as a Button with the type set to: Submit Disabled The disabled option disables the control for user input. Disabled controls do not receive focus. Disabled controls are skipped in tabbing navigation. The value of disabled controls will not be submitted with the form. Access Key This attribute assigns an access key to the object. An access key is a single character. Pressing the access key gives focus to the element. Tab Index All elements (except hidden elements) in a form are part of the form's tab order. When the user presses the Tab key, the browser shifts the input focus from element to element in order the elements appear in the HTML code. However, sometimes you want the tab order to flow a little differently. In that case, you can number the fields using tabindex attribute. Usually the first tabindex start on with value '1'. To exclude an element from the tab order, set the value of tabindex to 0. In that case the element is skipped when the user tabs around the form. Title Specifies the tooltip displayed by the browser If you want more control over the appearance and behavior of the button you can also use the Advanced Button Note: This control is normally part of a form. 74

75 Push Button The push button will usually be used as submit or reset button on a form. If the push button isn't part of a form it doesn't do anything by default. General Name Name of the button. Value/Label Caption of the button. Button Type Submit: When activated, a submit button submits a form. A form may contain more than one submit button. Reset: When activated, a reset button resets all controls to their initial values. Normal: Normal (Push) buttons have no default behavior. Each push button may have client-side scripts associated with the element's event attributes. When an event occurs (e.g., the user presses the button, releases it, etc.), the associated script is triggered. Disabled The disabled option disables the control for user input. Disabled controls do not receive focus. Disabled controls are skipped in tabbing navigation. The value of disabled controls will not be submitted with the form. Access Key This attribute assigns an access key to the object. An access key is a single character. Pressing the access key gives focus to the element. Tab Index All elements (except hidden elements) in a form are part of the form's tab order. When the user presses the Tab key, the browser shifts the input focus from element to element in order the elements appear in the HTML code. However, sometimes you want the tab order to flow a little differently. In that case, you can number the fields using tabindex attribute. Usually the first tabindex start on with value '1'. To exclude an element from the tab order, set the value of tabindex to 0. In that case the element is skipped when the user tabs around the form. Title Specifies the tooltip displayed by the browser Style Predefined Style Here you can select one of the global site styles. This option will overwrite all custom style settings for this object. You can add or edit styles in the Style Manager. Font Type Font type is the font family of text, such as Comic Sans, Times New Roman, and Courier New. Text Style Style of the font such as Bold, Italic or Regular. 75

76 Text Size Size of the text. Text Color Color of the text. Background color Specifies the color of the background. If set to 'Automatic' the standard (system) button color will be used. Background image Specifies the optional background image. Border style Specifies the style of the border: Dotted, Dashed, Solid, Double, Groove, Ridge, Inset or Outset. Border size Specifies the thickness of the border around the button. Set this to 0 (zero) for no border. Border Color Specifies the color of the border around the button. Events For more information about events please read the Events chapter of this document. Note: This control is normally part of a form. 76

77 Radio button Radio buttons are like checkboxes except that when several share the same name, they are mutually exclusive: when one is switched "on", all others with the same name are switched "off". General Group Name The Radio Button will be part of this group. Radio buttons with the same group name will force the user to select one choice. Text Text that appears on the right of the radio button. Value Value of the radio button when it is selected. Initial state Initial state of the radio button. Disabled The disabled option disables the control for user input. Disabled controls do not receive focus. Disabled controls are skipped in tabbing navigation. The value of disabled controls will not be submitted with the form. Access Key This attribute assigns an access key to the object. An access key is a single character. Pressing the access key gives focus to the element. Tab Index All elements (except hidden elements) in a form are part of the form's tab order. When the user presses the Tab key, the browser shifts the input focus from element to element in order the elements appear in the HTML code. However, sometimes you want the tab order to flow a little differently. In that case, you can number the fields using tabindex attribute. Usually the first tabindex start on with value '1'. To exclude an element from the tab order, set the value of tabindex to 0. In that case the element is skipped when the user tabs around the form. Title Specifies the tooltip displayed by the browser Events For more information about events please read the Events chapter of this document. Note: This control is normally part of a form. 77

78 TextArea Multi-line edit box, which can have as many characters wide and lines tall as you want. General Name Enter an identifier for the field. Initial Value Value that is initially display in the field. When the form is submitted the new or edited text is entered. Disabled The disabled option disables the control for user input. Disabled controls do not receive focus. Disabled controls are skipped in tabbing navigation. The value of disabled controls will not be submitted with the form. Access Key This attribute assigns an access key to the object. An access key is a single character. Pressing the access key gives focus to the element. Readonly The readonly option prevents the user from changing the value of the field, but not from interacting with the field. The user can still highlight the text for copying for example. Readonly elements receive focus but cannot be modified by the user. Readonly elements are included in tabbing navigation. Readonly elements will be submitted with the form. Tab Index All elements (except hidden elements) in a form are part of the form's tab order. When the user presses the Tab key, the browser shifts the input focus from element to element in order the elements appear in the HTML code. However, sometimes you want the tab order to flow a little differently. In that case, you can number the fields using tabindex attribute. Usually the first tabindex start on with value '1'. To exclude an element from the tab order, set the value of tabindex to 0. In that case the element is skipped when the user tabs around the form. Title Specifies the tooltip displayed by the browser Style Predefined Style Here you can select one of the global site styles. This option will overwrite all custom style settings for this object. You can add or edit styles in the Style Manager. Font Type Font type is the font family of text, such as Comic Sans, Times New Roman, and Courier New. Text Style Style of the font such as Bold, Italic or Regular. 78

79 Text Size Size of the text. Text Color Color of the text. Background color Specifies the color of the background. If set to 'Automatic' the standard (system) color will be used. Background image Specifies the optional background image. Border style Specifies the style of the border: Dotted, Dashed, Solid, Double, Groove, Ridge, Inset or Outset. Border size Specifies the thickness of the border around the text area. Set this to 0 (zero) for no border. Border Color Specifies the color of the border around the text area. Validate For more information about validation please read the Form validation chapter. Events For more information about events please read the Events chapter of this document. Note: This control is normally part of a form. 79

80 ActiveX You use ActiveX controls to embed an application in a Web page. ActiveX controls can add custom capabilities such as audio/movie players, calendars, custom buttons or other features to your pages. When using ActiveX controls make sure your site visitors use a browser that supports this. Draw a box to indicate the position of the ActiveX control. The Insert ActiveX Control dialog appears, listing the ActiveX controls currently installed on your system. At the bottom the selected ActiveX control's path (which has an.ocx or.dll extension) is displayed. To change the properties of the Active Control choose Properties. Available properties will be displayed in the window and can be changed by selecting the item and edit the value. Most ActiveX controls also have a native property page, which your can call using the Properties-button. Some ActiveX controls do not support HTML as programming language and will behave unexpected, so be sure you test it extensive before you publish your page. File Publisher This component automatically uploads the specified files to your web site once you publish this page. The files will be published to the same location as the page itself. This object can be helpful if you want to include extra files, which are part of the page (like scripts or multimedia files). 80

81 Flash With Macromedia Flash files (.swf), you can create multimedia, graphics, and audio that downloads quickly. To view these files, site visitors must install the Flash plugin appropriate for their browser and platform. These plugins are available from the Macromedia Web site at Web Builder creates all of the code you need to add a Flash files to your site. Movie Enter a filename of the movie (.swf). Version This specifies the minimum Flash version number that the movie needs to play correctly. Quality To control the display quality, select a Quality option. Low favors playback speed over appearance and never uses anti-aliasing. Autolow emphasizes speed at first but improves appearance whenever possible. Playback begins with anti-aliasing turned off. If the Flash Player detects that the processor can handle it, anti-aliasing is turned on. Autohigh emphasizes playback speed and appearance equally at first but sacrifices appearance for playback speed if necessary. Playback begins with anti-aliasing turned on. If the actual frame rate drops below the specified frame rate, anti-aliasing is turned off to improve playback speed. Use this setting to emulate the View > Anti-alias setting in Flash. Medium applies some anti-aliasing and does not smooth bitmaps. It produces a better quality than the Low setting, but lower quality than the High setting. High favors appearance over playback speed and always applies anti-aliasing. If the movie does not contain animation, bitmaps are smoothed; if the movie has animation, bitmaps are not smoothed. Best provides the best display quality and does not consider playback speed. All output is anti-aliased and all bitmaps are smoothed. Scale To determine how the movie fits in the frame, select a Scale option. Default (Show all) makes the entire movie visible in the specified area without distortion, while maintaining the original aspect ratio of the movie. Borders may appear on two sides of the movie. No Border scales the movie to fill the specified area, without distortion but possibly with some cropping, while maintaining the original aspect ratio of the movie. Exact Fit makes the entire movie visible in the specified area without trying to preserve the original aspect ratio. Distortion may occur. Autostart To play the movie automatically when the site visitor opens the page, select Auto Start. Loop To replay the movie when it ends, select Loop. Display Full Menu When checked it will display the full menu, allowing the user a variety of options to enhance or control playback. When not checked it will only display a menu that contains only the Settings option and the About Flash option. Window Mode Specifies the window mode of the flash. Select Transparent if you want to display the flash movie with transparency. Otherwise select Window or Opaque. 81

82 Allow Script Access The AllowScriptAccess parameter of the Flash Player controls the ability to perform outbound scripting from within a Flash SWF. When AllowScriptAccess is "never", outbound scripting will always fail. When AllowScriptAccess is "always", outbound scripting will always succeed. When AllowScriptAccess is "samedomains", outbound scripting will only succeed within the same domain. Allow Fullscreen Enable this option to allow full-screen display of the Flash application. This option is supported by Flash 9.0 or higher. Embed Adobe Flash Player conetn using SWFObject SWFObject is a W3C standards-friendly method to embed Flash content, which utilizes one small JavaScript file. If you enable this option, then Web Builder will use the SWFObject script instead of the W3C incompliant andtags. Flash Variables Flash variables (FlashVars) it a way to pass data or variables from html to a Flash application. FlashVars is supported by Flash Player 6 and newer. Please check the documentation of the Flash application for more details. 82

83 HTML This object can be used to insert custom HTML code or JavaScript. When you add HTML using this object it will be place at the location where you positioned the object. Description This is used for display in Web Builder only. It can help you identify the code block you've added. HTML Enter your custom HTML code here Notes: 1. For most objects you can also add extra HTML before, inside of after the automatically generated HTML. Select an object and select Edit->HTML from the Web Builder menu. 2. To add extra HTML before, inside of after the HEAD and BODY tags, select View->Page HTML from the Web Builder menu. 3. If you need to add 'global' HTML to your page, it is better to add it using the Page HTML option. Java Java applets are an efficient way to add sound and animation, such as scrolling messages and other cool effects, to a page. Java applets are platform-independent applications with compact file sizes. Most browsers are Java-compatible, so site visitors don t need special plug-ins to run a Java applet. The Java Object makes it easy to insert Java Applets to you page and set their properties. To choose appropriate properties settings, you should be familiar with Java before you add these types of application files to your site. You can download JAVA applets from one of these web sites: Follow the instructions that come with these applets for more information about the parameters and other settings. 83

84 Inline Frame Inline Frame or an iframe is allows you to open new pages inside main pages. Inline frames are also referred to as Floating frames. General Name Used to set a name for the inline frame. Link to Web Site: display a page from an external web site. Syntax: Internal Web Page: display one of the pages of your web site. Click 'Select' to choose a page. The Select Page window will show all the pages which are part of the current web site project. Web Builder will automatically create to correct (relative) URL when you publish your pages. Show border Used to specify the whether to have a border for the inline frame or not. Scrollbars Used to specify whether the inline frame should have scrolling capability or not. Possible values: If Needed, Never or Always. Alternate text This text will be displayed by browsers which do not support inline frames. Appearance Scrollbars Used to specify whether the inline frame should have scrolling capability or not. Possible values: If Needed, Never or Always. Border Color Specifies the color of the border around the inline frame. Set the color to 'Automatic' to display the standard 3D border. Border Size Specifies the size of the border around the inline frame. Set this to 0 (zero) for no border. See also this online tutorial: 84

85 Layer Layers can be used to create advanced layouts. A layer is a container for other objects. Objects can be dragged and dropped on a layer just like on a form. Some of the cool features of layers are: % transparency Show/Hide a layer (and all its contained objects) using the layer manager or through events. Position and size a layer relatively Position a layer absolute to the right and/or bottom border of the browser window Several background repeat and alignment options. Opacity Change the transparency (0-100%) of the layer (and all its children) Relative horizontal position Instead of using absolute coordinates, the position of the layer will now be relative to the page width. This property only has effect when the page is displayed in the browser! Relative vertical position Instead of using absolute coordinates, the position of the layer will now be relative to the page height. This property only has effect when the page is displayed in the browser! Relative horizontal sizing Instead of using absolute dimensions, the width of the layer will now be relative to the page width. This property only has effect when the page is displayed in the browser! Relative vertical sizing Instead of using absolute dimensions, the height of the layer will now be relative to the page height. This property only has effect when the page is displayed in the browser! 85

86 Right Sets the position of the object relative to the right edge of the page. This will replace the 'left' attribute. Bottom Sets the bottom position of the object in relation to the bottom of the page. This will replace the 'top' attribute. Background Color Specifies the color of the background. Background Image Specifies the optional background image. If the image is smaller than the layer's size it will be tiled. Repeat Sets the tiling attributes for the background image. Possible options are: Repeat in both directions Repeat in horizontal direction Repeat in vertical direction Do not repeat Fixed Background A fixed background is a background image that will stay in one place while the rest of your text and images scroll over the top of it. Horizontal Align Sets the horizontal position for the background image. Vertical Align Sets the vertical position for the background image. Layer Manager The Layer Manager can be used to show/hide layers or to change the transparency of the layer (and all of the objects which are part of the layer). If the Layer Manager is not already visible you can select View->Layer Manager to display it. The Layer Manager can be docked to any side of the screen. The Layer Manager has its own toolbar with the following commands: Add Layer Inserts a new layer to the active page (Note that you can also drag and drop and new layer from the ToolBox!) Delete Layer Removes the selected layer from the active page Properties Displays the properties window of the layer Opacity Change the transparency (0-100%) of the layer (and all its children) Use the Visible column to hide the selected layer or make it visible. 86

87 Master Page The Master Page object is a very cool feature, which allows you to re-use objects from another page (from your web site) in the current web page. Let's say you have a certain layout which is the same for all your pages and you don't want this copy/paste it between all your pages; then simply create the layout once in page and insert the layout of that page in all your other pages using the master page object. When you want to update the layout you will only have to do this once in the original page. Here is an example: 1. Create a new website, Web Builder automatically add the first page called 'index'. 2. Insert a new page using the Site Manager and rename it to 'master_page. 3. Now let's add a navigation bar to the master_page. Insert->Navigation->Navigationbar. 4. Switch back to the index page (click on the index tab) and insert a Master Page object. 87

88 5. Double click the object you have just inserted to select a page. Next click the Select-button to display the Select Page window and choose master_page from the list. Click OK to return to the page. You will notice that the navigation bar of your master_page now has become a part of the index page. If you go back to the master page and you modified something in that page, it automatically is updated in the index page as well. Of course, this feature is not limited to navigation bars only; you can add any element to the master page. Notes: 1. Place all objects on the master page aligned to the left and top border, so you do not have any margins. 2. If you use the master_page only for master page purposes and not as standalone page, you can enable 'Don't Publish this page' in Page Properties, so the page won't be published when the entire website is published. 3. In contrast to inline frames, when using the Master Page object, all objects from that page are merged in the current page as if they are really a part of the page. You must however edit them in the master page. 4. Master page objects do not clone the properties of a page! Only objects on the master page will be cloned. 5. Since the objects are cloned "AS IS", make sure the IDs of objects on the master page are unique. You can change the ID in the Properties Inspector. It's good practice to give them a prefix, like master_. This will prevent duplicated IDs on a page. 6. Forms do not work on a master page. 7. Layer can be used on a master page. However you cannot use internal links on that layer. 88

89 Embedded OLE Object You can use linking and embedding to exchange information between documents created in different programs. Embedding means inserting information, such as text or a graphic, into another document in another program. The embedded information, or object, becomes part of the new document. To edit an embedded object, double-click it; the program in which the object was created opens. When you finish editing the object and return to your document, the document reflects all of the changes you've made; but, the original object remains unchanged. Linking means inserting information, such as spreadsheet data, that retains a connection to the information stored in another file. Use linking when you want the information to be updated dynamically as the data in the source file changes. To link selected information, use Copy and Paste Special. Some programs do not support linking. Use embedding when you want to edit the information separately from the source file or if you think the source file will be unavailable. When you publish a page, which includes an embedded OLE object, Web Builder generates each object as a.gif file. So the data becomes static once it is published. Tip: When you double click the object while holding down the CTRL key, it will open the embedded application in a new window. 89

90 Quicktime Use this object to add Quicktime media files to your page. File Enter the filename of the movie. QuickTime media has a.mov or.qt extension. Hide Select this option if you don t want to show the movie, but want to use it only as background sound. Controller Select this option to display a control bar that site visitors can use to start or stop the movie. Autostart To play the movie automatically when the site visitor opens the page, select Auto Start. Loop To replay the movie when it ends, select Loop. Keep movie in user's cache Select this option to store the movie in the cache on the site visitor s system. If the visitor leaves the page and comes back, the movie doesn t have to be downloaded again because it is already in the system cache. 90

91 Real Player Use this object to add RealPlayer media files to your page. Filename Enter the filename of the audio or video file. A RealPlayer media file can have one of these extensions:.ra,.rm,.rv,.rmvb,.rmj,.rms,.ram,.rmm,.rax,.rvx,.rp,.rtx,.rt,.rmx. Controls Sets the visible components of the RealPlayer Plug-in. ImageWindow Displays the image window. All Displays the basic RealPlayer control panel. ControlPanel Displays a compact RealPlayer control panel. PlayButton Displays a play/pause button. PlayOnlyButton Displays a play button. PauseButton Displays a pause button. StopButton Displays a stop button. FFCtrl Displays a fast-forward button. RWCtrl Displays a rewind button. MuteCtrl Displays a mute button. MuteVolume Displays a mute button and volume slider. VolumeSlider Displays a volume slider. PositionSlider Displays a clip position slider. TACCtrl Displays a clip information field. HomeCtrl Displays the Real logo. InfoVolumePanel Displays presentation information along with the volume slider and mute button. InfoPanel Displays the presentation information panel. StatusBar Displays the status panel, which shows informational messages. StatusField Displays the message text area of the status bar. PositionField Displays the position field, which shows the clip's current place in the presentation timeline and the total clip length. Console Sets a console name used to link multiple RealPlayer Plug-in instances. All RealPlayer Plug-ins with the same console name work together. For example, if you have multiple Play and Stop buttons on the same page, the console name would enable them to control the same RealAudio clip. Set this property for each instance of the Play or Stop button you want to link. The console name master links to all instances. The console name unique links to no other instances. Autostart Sets whether or not the RealPlayer Plug-in will automatically start playing once the source data is available. Loop To replay the movie when it ends, select Loop. Linking Multiple Controls The console property defines a name that unifies RealPlayer objects so that multiple controls work together. For example, you could create three separate RealPlayer objects to define an image window, a play button, and a stop button. By using three different object, you can set the size of each control separately. To tie controls together, define the same CONSOLE name within RealPlayer, or use one of these predefined names: _master links the control to all other embedded controls on the page. _unique links the control to no other embedded controls on the page. 91

92 You can have multiple console names for separate presentations. For a page showing two video clips, for example, you can define the console names video1 and video2. All controls linked by video1 interoperate, as do all controls linked by video2. However, a video1 volume slider, for example, will not affect the volume of a video2 clip. Example 1: You want to add a video file without any controls to your page 1. Add one instance of the object to your page 2. Specify the filename 3. Set the controls property to ImageWindow 4. Set the console property to video1 Example 2: You want to add a video file with all controls visible 1. Add two instances of the object to your page 2. Specify the filename for both objects 3. Set the controls property of object 1 to ImageWindow 4. Set the controls property of object 2 to All 5. Set the console properties of both objects to video1 Example 3: You want to add a video file with only a playbutton 1. Add two instances of the object to your page 2. Specify the filename for both objects 3. Set the controls property of object 1 to ImageWindow 4. Set the controls property of object 2 to PlayButton 5. Set the console properties of both objects to video1 For more information about the RealPlayer object visit the official website: 92

93 Windows Media Player Use this object to add media files to your page. This is the most common way to add media files to your web page. Supported types are: Audio Files (*.wav,*.snd,*.mp3,*.wma,*.au,*.aifc,*.aiff) Midi Files (*.mid,*.midi) Movie Files (*.mpg,*.mpeg,*.m1v,*.mp2,*.mpa,*.mpe,*.mpv2) Video Files (*.avi,*.wmv) Windows Media Files (*.wm,*.wmv,*.asf,*.asx,*.wax,*.wma) Although this object is called Windows Media Player it will actually use the default media player (for the selected media type) to play the file in the visitors browser. Autostart To play the movie automatically when the site visitor opens the page, select Auto Start. Hide Select this option if you don t want to show the movie, but want to use it only as background sound. Loop To replay the movie when it ends, select Loop. You Tube The YouTube object provides an easy way to add YouTube videos to your pages. URL Specifies the URL of the youtube video. The URL should look like this: Size Here you can select from a few predefined sizes. However, this still allows you to manually change the size of the YouTube object in the workspace. This option is just a helper tool to quickly set a specific size. Show related videos Specifies whether display a list of related videos. 93

94 Go Menu You can use the Go Menu component to easily create a drop-down navigation menu, with each menu item corresponding to a single URL or page in your web site. When the user presses the Go button the select link will be activated. Select Add to insert a new item. Text: Text of the item in the list URL:The URL (Internet Address) to which the item will link. For more information about hyperlinks please read the chapter Links in this document. Select Edit to modify the properties of an exiting item. To remove a button from the Go Menu select Remove. You can rearrange the item order by using Move Up and Move Down. Initial Text This is the initial text which will be displayed in the dropdown menu. Button Text The text of the button Do not use button Select this checkbox to hide the go button. Is this case a dropdown menu selection will trigger the link. 94

95 Menu Bar The Menu bar in Web Builder is based on Heng Yuan's JSCookMenu ( This is a very powerful JavaScript-based menu script that can mimic complex menus found in popular GUI applications. Web Builder provides a menu builder so you can easily add menu items, assign the links and set the style for the menu using the style tab. Select Add to insert a new item to the menu bar. Text: text of the item Link type: type of link usually http: URL: the URL (Internet Address) to which the button will link Target: Enter the window to which the link is targeted. For example: _blank (opens the link in a new window). Select Edit to modify the properties of an existing item. To remove an item from the Menu Bar select Remove. The Insert Split button inserts a splitter/divider in the menu. Layout: The Menu Bar can be either Vertical or Horizontal. Style: To change the appearance of the menu bar either select a predefined theme of select Default to edit the menu bar colors and text formatting. Note the effect of the selected theme will only be visible in the browser. So you'll have to preview or publish the page first. Synchronize with Site Manager When this option is enabled, Web Builder automatically synchronizes the items with the content of the Site Manager. So if for example you add a new page, then an item is automatically added to the menu bar. or if you rename a page the text of the item will also be updated. Move Up Move the selected item up amongst its siblings. Move Down Move the selected item down amongst its siblings. Move Left Make the selected item a sibling of its parent. Move Right Make the selected item the child of its preceding sibling. Tip: You can rearrange the items in the menu you can use drag and drop to move the items around. Adding your own themes: The menu bar also can be customized using Cascading Style Sheets (CSS) and custom images. The Web Builder program folder contains several predefined themes in the 'menu bar' subfolder, but you can also add your own themes. Just create a new sub folder in the menu bar folder and copy the new style definitions in there. Take a look at the existing themes to figure out how it works;). Web Builder automatically detects new themes when there are added. 95

96 Using Theme Studio to create themes: One of the great features of the menubar object is the support for Theme Studio menubar themes. This tool make it relative easy to create advanced menubar themes. You can download Theme Studio here: How to add a theme created with Theme Studio to WYSIWYG Web Builder? 1. In the Theme Studio toolbar click 'Build' 2. Select Build Format 'Original Format' 3. Specify a Destination File, for example 'ThemeDemo.zip' 4. Unzip the theme to the menubar\ folder in the WYSIWYG Web Builder program folder. Note: The files from the 'example' folder are not needed! The structure will look something like this: c:\program Files\WYSIWYG Web Builder\menubar\ThemeDemo c:\program Files\WYSIWYG Web Builder\menubar\ThemeDemo\background-1.png c:\program Files\WYSIWYG Web Builder\menubar\ThemeDemo\background-2.png c:\program Files\WYSIWYG Web Builder\menubar\ThemeDemo\background-3.png c:\program Files\WYSIWYG Web Builder\menubar\ThemeDemo\background-4.png c:\program Files\WYSIWYG Web Builder\menubar\ThemeDemo\theme.css c:\program Files\WYSIWYG Web Builder\menubar\ThemeDemo\theme.js 96

97 Navigation bar Adding a Navigation Bar in WYSIWYG Web Builder is really easy. Just add a few buttons, assign the links and set the style for the buttons. Select Add to insert a new button. In the Name field enter the text you want to be displayed on the button. Alternate text: this text, usually a short description, appears in place of the object in browser when images are unsupported or have been disabled. In some browsers it appears as a ToolTip when you move the mouse over the image. Select one of the available Link To types: FTP: create a link to a FTP site. Syntax: Web Site: create a link to an external web site. Syntax: Address: Create a link to an address. Syntax: Internal Web Page: Create a link to one of the pages of your web site. Click 'Select' to choose a page. The Select Page window will show all the pages which are part of the current web site project. Web Builder will automatically create to correct (relative) URL when you publish your pages. Target: Enter the window to which the link is targeted. For example: _blank opens the link in a new window _self open the link in the current frame _parent open the link in the parent frame _top loads the linked document in the topmost frame For more information about hyperlinks please read the chapter Links in this document. Select Edit to modify the properties of an exiting button. To remove a button from the Navigation Bar select Remove. You can rearrange the button order by using Move Up and Move Down. Synchronize with Site Manager When this option is enabled, Web Builder automatically synchronizes the Buttons with the content of the Site Manager. So if for example you add a new page, then a button is automatically added to the Navigation bar. or if you rename a page the text of the button will also be updated. Level This value specifies which level of the Site Manager will be used to create the buttons. First Level Creates buttons that will link to the children of the root level. Parent Level Creates buttons that will link to all pages in the level above the current page in the Site Manager. Current Level Creates buttons that will link to the current page and all other pages that share the same parent page. Child Level Create buttons that will link to the children of the current page. Resize buttons horizontally Enable this option to be able to resize navigation bar buttons horizontally. Instead of the original button width, the button will now be stretched. 97

98 Navigation bar Style Font Type Font type is the font family of text, such as Comic Sans, Times New Roman, and Courier New. Font Style The style of the text can either be regular, bold, italic, or underline. Font Color The color of the text can also be changed. Font Size To change the font size, select one of font sizes. Text Alignment You can change the alignment of the selected text object by using one of the alignment buttons: Left, Center or Right. Layout Type The Navigation Bar can be either Vertical or Horizontal. Layout Space This settings specifies the space between 2 buttons. Style Select one of the available button styles from the dropdown menu. By default Web Builder includes a few example styles, but you can easily add your own styles: Copy your own styles to following subfolder: /navbar, so if you installed Web Builder in the folder: C:\Program Files\WYSIWYG Web Builder\ you need to copy the buttons images (gif, jpg or bmp) to C:\Program Files\WYSIWYG Web Builder\navbar You can select a separate image for when the mouse hovers over a navigation bar button. Mouse Over Sound Effect This sound file is played by the browser if the user moves the mouse cursor over a button. 98

99 SiteTree The SiteTree can display an overview of your website (a Site map) so visitors can quickly find what they're looking for. Tip: Do not confuse this object with the SiteMap option in the tools menu, which is purely meant for search engines! The SiteTree will display all pages of your website, with exception of the pages which you have marked 'Don't Synchronize this Page in Navigation Objects.'. This object has 3 display styles, each giving a completely different overview of your site: Alphabetical Displays an alphabetical list of all the pages of your website. Category Displays all the pages of your website grouped by category. In order for this style to work correctly, you must first assign one or more categories to a page. You can either do this in the Page Properties (meta tags) or in the General Properties of the SiteTree itself. Treeview Displays all the pages of your website in a tree view based on the structure of the site in the Site Manager. In the General Properties of this object you can quickly update the display name (is the same as the menu name property in Page Properties), the page description (Description meta tag) and the categories. You can assign one or more categories to a page (separated with a comma). 99

100 Tab Menu The Tab Menu is yet another way to implement your website navigation. The biggest difference between the navigation bar and the tab menu (besides its appearance) is that a tab menu item has 3 states: 1. Normal Idle state 2. Hover Mouse over or Roll over state 3. Activate The selected item is the current page. Select Add to insert a new tab item. In the Name field enter the text you want to be displayed on the tab item. Alternate text: this text, usually a short description, appears in place of the object in browser when images are unsupported or have been disabled. In some browsers it appears as a ToolTip when you move the mouse over the item. In the Link To field you can select the type of hyperlink and where to link to. See also the chapter about Links. Select Edit to modify the properties of an existing item. To remove an item from the Tab Menu select Remove. You can rearrange the order of the items by using Move Up and Move Down. Tip: You can also rearrange items with the mouse by using drag & drop. Synchronize with Site Manager When this option is enabled, Web Builder automatically synchronizes the items with the content of the Site Manager. So if for example you add a new page, then a button is automatically added to the Tab Menu or if you rename a page the text of the tab item will also be updated. Level This value specifies which level of the Site Manager will be used to create the items. First Level Creates items that will link to the children of the root level. Parent Level Creates items that will link to all pages in the level above the current page in the Site Manager. Current Level Creates items that will link to the current page and all other pages that share the same parent page. Child Level Create items that will link to the children of the current page. Tab Menu Style Theme WYSIWYG Web Builder includes several themes you can choose for the appearance of the tab menu. The default theme is text only and does not use any images. The other themes are defined in the sub folder \tabmenu and usually are made of 2 images. If you like you can modify these themes or create your own themes. 100

101 Text Menu The Text Menu is a text-only version of the Navigation bar. Text menus can speed up the navigation through your website, because no images need to be loaded first before the user can navigate to another page. Select Add to insert a new text link. In the Name field enter the text you want to be displayed on the link. Alternate text: this text, usually a short description. In some browsers it appears as a ToolTip when you move the mouse over the link. Select one of the available Link To types: FTP: create a link to a FTP site. Syntax: Web Site: create a link to an external web site. Syntax: Address: Create a link to an address. Syntax: Internal Web Page: Create a link to one of the pages of your web site. Click 'Select' to choose a page. The Select Page window will show all the pages which are part of the current web site project. Web Builder will automatically create to correct (relative) URL when you publish your pages. Target: Enter the window to which the link is targeted. For example: _blank opens the link in a new window _self open the link in the current frame _parent open the link in the parent frame _top loads the linked document in the topmost frame For more information about hyperlinks please the chapter Links of this document. Select Edit to modify the properties of an exiting text link. To remove an item from the Text Menu select Remove. You can rearrange the item order by using Move Up and Move Down. Synchronize with Site Manager When this option is enabled, Web Builder automatically synchronizes the item of the Text Menu with the content of the Site Manager. So if for example you add a new page, then a button is automatically added to the Text Menu. or if you rename a page the text of the button will also be updated. Level This value specifies which level of the Site Manager will be used to create the items. First Level Creates buttons that will link to the children of the root level. Parent Level Creates buttons that will link to all pages in the level above the current page in the Site Manager. Current Level Creates buttons that will link to the current page and all other pages that share the same parent page. Child Level Create buttons that will link to the children of the current page. 101

102 Text Menu Style Font Type Font type is the font family of text, such as Comic Sans, Times New Roman, and Courier New. Font Size To change the font size, select one of font sizes. Background Color Specifies the color of the background. If set to 'Automatic' the webpage background will be used. Link Style All hyperlinks in your webpage by default use the default HTML link colors (link: blue, visited: purple, active: red). By defining Hyperlink Styles (CCS) you can adjust the colors and formatting of an hyperlink. Once you have defined a style you can attach it to the Text Menu by selecting it from the Link Style dropdown list. Click the Edit Styles button to add or modify the hyperlink style sheet. Alignment You can change the alignment of the Text Menu by using one of the alignment options: Left, Center or Right. Delimiters Here you specify special characters to put before and after the link text. Common characters include {, [ and (. 102

103 ClipArt ClipArt uses dingbat fonts and converts them to vector shapes. It has all the features of shapes, but it allows you to insert any type of shape to your page! You can download thousands of free dingbats fonts from the Internet. Search for 'free dingbat fonts' to find all large collection of new shapes. After you've downloaded one or more files you can copy them to the sub folder 'clipart' in the Web Builder program folder. Dingbats fonts have the file extension '.ttf'. There are also many tools available to create your own dingbat collections. The filename of the Dingbats font will be displayed as the category name in the clipart selection. For more details about the properties of the ClipArt object see Shapes. 103

104 Curve The Curve tool lets you draw curved lines. To draw a curved line: 1. Click the Curve Tool on the Toolbox or click Insert->Drawing->Curve. 2. Click and release the left mouse button where you want the Curve to start, while dragging the mouse press and press/release the mouse button to add points. 3. To end the curve, double click the left mouse button or press the ESC-key. When the curve is selected, the individual nodes can be changed by dragging them to a new position. The curve will be converted to an image when you publish the page. Alternate text This text, usually a short description, appears in place of the object in browser when images are unsupported or have been disabled. Anti Alias Enable this option to improve the quality of graphics. It may slow down the performance of the application. Fill Effect (Closed Curve only) Specifies the fill effect of the polygon: Solid, Gradient, Texture, Hatch or Transparent. Border Width Specifies the thickness of the line. Border Color Specifies the color of the line. Border Style Specifies the style of the line (Solid, Dash, Dot, Dash Dot or Dash Dot Sor). Link For more information about linking please read the chapter Links of this document. Events For more information about events please read the chapter Events of this document. Important note: The Curve tool is only available on systems with GDI+ installed. Read more about GDI+ in the chapter GDI+ Information of this document. 104

105 Line The Line tool of WYSIWYG Web Builder gives you much control over its appearance than the standard HTML horizontal line. The Line can be drawn using any angle, color, style and can even have arrows on the start or end of the line! To draw a line: 1. Click the Line Tool on the Toolbox or click Insert->Drawing->Line. 2. Click where you want the line to start, and hold the left mouse button down as you draw. To end the line, release the mouse button. The line will be converted to an image when you publish the page. Size Specifies the thickness of the line. Color Specifies the color of the line. Style Specifies the style of the line (Solid, Dash, Dot, Dash Dot or Dash Dot Sor). Arrow Start Specifies the arrow type of the start of the line (None, Arrow, Circle, Square, Diamond, Stealth or Open Arrow). Arrow Start Size Specifies the size of the arrow. Arrow End Specifies the arrow type of the end of the line (None, Arrow, Circle, Square, Diamond, Stealth or Open Arrow). Arrow End Size Specifies the size of the arrow. Alternate text This text, usually a short description, appears in place of the object in browser when images are unsupported or have been disabled. In some browsers it appears as a ToolTip when you move the mouse over the image. Anti Alias Enable this option to improve the quality of graphics. It may slow down the performance of the application. 105

106 Link For more information about linking please read the chapter Links of this document. Events For more information about events please read the chapter Events of this document. Important note: The Line tool is only available on systems with GDI+ installed. Read more about GDI+ in the chapter GDI+ Information of this document. 106

107 Polygon The Polygon tool lets you draw polygons with borders and several filling methods. To draw a polygon: 1. Click the Polygon Tool on the Toolbox or click Insert->Drawing->Polygon. 2. Click and release the left mouse button where you want the polygon to start, while dragging the mouse press and press/release the mouse button to add points. 3. To end and close the polygon, double click the left mouse button or press the ESC-key. When the polygon is selected, the individual nodes can be changed by dragging them to a new position. The polygon will be converted to an image when you publish the page. Alternate text This text, usually a short description, appears in place of the object in browser when images are unsupported or have been disabled. Anti Alias Enable this option to improve the quality of graphics. It may slow down the performance of the application. Fill Effect Specifies the fill effect of the polygon: Solid, Gradient, Texture, Hatch or Transparent. Border Width Specifies the thickness of the line. Border Color Specifies the color of the line. Border Style Specifies the style of the line (Solid, Dash, Dot, Dash Dot or Dash Dot Sor). Link For more information about linking please read the chapter Links of this document. Events For more information about events please read the chapter Events of this document. Important note: The Polygon tool is only available on systems with GDI+ installed. Read more about GDI+ in the chapter GDI+ Information of this document. 107

108 Scribble The Scribble tool lets you sketch curved lines and shapes in a freeform way. To draw a freeform line: 1. Click the Scribble Tool on the Toolbox or click Insert->Drawing->Scribble. 2. Click where you want the line to start, and hold the left mouse button down as you draw. The line will be drawn immediately and follows your mouse movements. Releasing the mouse button will draw a straight line from the point where you released the button to the current mouse position. 3. To end the line, double click the left mouse button or press the ESC-key. When the line is selected, the individual nodes can be changed by dragging them to a new position. The drawing will be converted to an image when you publish the page. Alternate text This text, usually a short description, appears in place of the object in browser when images are unsupported or have been disabled. In some browsers it appears as a ToolTip when you move the mouse over the image. Anti Alias Enable this option to improve the quality of graphics. It may slow down the performance of the application. Border Width Specifies the thickness of the line. Border Color Specifies the color of the line. Border Style Specifies the style of the line (Solid, Dash, Dot, Dash Dot or Dash Dot Sor). Link Because the drawing is published as image you can also assign a link to it. For more information about linking please read the chapter Links of this document. Events Because the drawing is published as image you can also assign events to it. For more information about events please read the chapter Events of this document. Important note: The Scribble tool is only available on systems with GDI+ installed. Read more about GDI+ in the chapter GDI+ Information of this document. 108

109 Shape The Shape object can be used to 'draw' a shape on your webpage. When you publish a page with shapes, Web Builder generates each shape as a.gif file. Type: Select the type of shape you want to be display on your web page. Rectangle Round rect Ellipse Diamond Hexagon Octagon Arrows Flag Heart Signs Stars Talk Bubbles and many more. Some shapes have a few variants that you can choose from. To add a border to the Shape select 'Enable Border' and specify the border width and color. You can select from several Fill Effects: 1. Solid Color 2. Gradient 3. Tiled or stretched image. 4. Transparent 5. Pattern (anti-aliased mode only) 6. Vista Glass (anti-aliased mode only) Anti Alias Enable this option to improve the quality of graphics. It may slow down the performance of the application. Note: If anti alias is disabled it is not possible to set the transparency of the shadow. Link For more information about linking please read the chapter Link s of this document. Events For more information about events please read the Events chapter of this document. 109

110 Shadow Offset X Horizontal shadow offset. Shadow Offset Y Vertical shadow offset. Shadow Opacity Sets the transparency of the shadow. ShadowColor Specifies the shadow color. Bevel This option will add an bevel effect (inner shadow) to the shape. The value '0' will disable the effect. Opacity Change the transparency (0-100%) of the shape. Add text to a Shape A new feature in version 5.0 is the ability to add formatted text to a shape! Now you can create cool logos, banners or even rotate text! Text can be aligned to any edge of the shape. The available space for text within the shape may vary depending on the type of shape you've selected. Note: Text will not be visible if the object is transparent! Rotation To rotate a shape: 1. Select the Rotate tool on the Toolbox or click Edit->Rotate. 2. Click to select the object, hover over one of its handles until you see the rotate pointer. 3. Hold the mouse button down and drag in the direction in which you want to rotate the object, then release. Use the Shift key for 15 rotation intervals. Notes: Rotating large shapes can take a long time. Rotating shapes may reduce the display quality of the object. 110

111 Banner A banner is an image that displays the title of a web page. A banner helps visitors understand what the page is about. General Banner Text Text that will be displayed on the banner. Use page title This option automatically uses the title of the web page as the banner text. Uncheck this if you want to enter custom text. Font Type Font type is the font family of text, such as Comic Sans, Times New Roman, and Courier New. Text Style Style of the font such as Bold, Italic or Regular. Text Size Size of the text. Text Color Color of the text. Banner Size The size of the banner. Select one of the predefined sizes or 'Fit to layout rectangle' if you want a custom size banner. Horizontal Alignment Horizontal alignment of the text. Vertical Alignment Vertical alignment of the text. Style Background effect You can select from several Fill Effects: 1. Solid Color 2. Gradient 3. Tiled or stretched image. Border size Specifies the thickness of the border around the banner. Set this to 0 (zero) for no border. Border Color Specifies the color of the border around the banner. Border Style Specifies the style (Solid, Circle, Disc, Square or Dash) of the border around the banner. 111

112 Effects Enable shadow Specifies whether to enable the shadow effect for text. Shadow Offset X Horizontal shadow offset Shadow Offset Y Vertical shadow offset Shadow Opacity Sets the transparency of the shadow. Shadow Color Specifies the shadow color Shadow Blur Softens the shadow's edges. Reflection Specifies the amount of reflection of the text. Reflection Offset Specifies the offset of the reflection from the bottom of the text. This value can be negative. 112

113 Blog The word 'blog' is short for web log. A blog is a journal that's posted on the web for other to read. The Blog object provides an easy way to implement a blog on your website without special requirements on the web server. General Comment Text, each blog entry will have a link on the bottom to allow readers to send comments. The default text is 'Send Comments', but you can change this to anything you like. If you leave this field blank, no link will be displayed. Comment , specifies the address where the comments will be send to. To add a new entry to your Blog, click the Add button. Give you blog entry a title and then type your blog's message in the text area. Optionally you can insert an image and a link to a related web page. Style The style page allows you to modify the style of the Blog, each individual item such as Comment, Date, Subject and background can have its own color and font. The Divider image can used to separate blog entries horizontally. RSS Feed Optionally you can enable to generate a RSS Feed for this blog. The RSS Feed Properties are identical to those of the RSS Feed object. 113

114 Image Map You can create an (client-side) image map that divides an image into different areas that each link to a different web page. Creating an image map is useful for images such as a floor, campus map or world map that you want to contain links to different pages. You can define each clickable area (hotspot) on the map using three shape values: rectangle, circle or polygon (irregular shape). To add images use the Image map object. Drag the object to the page and a file dialog will popup to select the image. Web Builder supports jpg, gif, bmp and png (XP only) files. Filename: enter the path and filename of the image/picture or select Browse to find an image on your local drive. Notes: 1. This property specifies the location of the local image, when you publish the page the image will automatically be copied to location as specified in Tools->Options->Publish->Images Sub Folder. 2. You can also specify absolute URLs like this 3. To make a (backup) copy of the images used in your page enable Tools->Options->Folders- >Make a copy of images to this folder when documents are saved. This will copy all images to the specified folder, so they are all stored in one place. It also prevents having duplicate image names in your web site. Alternate text: this text, usually a short description, appears in place of the object in browser when images are unsupported or have been disabled. In some browsers it appears as a ToolTip when you move the mouse over the image. Title: In modern browsers this title appears as a ToolTip when you move the mouse over the image. Use original size: Select this if you want the image to appear at its original size. Fit to layout rectangle: Select this if you want to manually specify the image size. Border thickness: Specifies the thickness of the border around the image. Set this to 0 (zero) for no border. Border Color: Specifies the color of the border around the image. 114

115 Adding Hotspots There are two ways to add hotspots to an image map: 1. Manually entering the coordinates in the hotspot tab of the image map properties 2. Visually modifying the coordinates using the mouse Manually entering the coordinates Open the image map properties and click the Hotspots tab to insert the coordinates of an hotspot. You can insert three types of hotspots: 1. Circle, here you enter the x and y coordinates of the center and the radius of the circle. 2. Rectangle, here you enter the x (left) and y (top) coordinates and the width and height of the rectangle. 3. Polygon (Irregular Shape), here you enter each point (x, y coordinates) on the polygon. Visually modifying the coordinates using the mouse A more efficient way to modify the coordinates of the hotspots is by visually dragging them. 1. Right click the image map to display the context menu 2. Select the hotspot type you want to insert (Add Circle Hotspot, Add Rectangle Hotspot or Add Polygon Hotspot) 3. A window will popup where you can set the initial coordinates, the URL and alternate text of the area. By default, Web Builder will insert the shape in the center of the image map. 4. After you have clicked OK, the shape will be inserted to the image map, you can now select it and drag it around or change its size using the size handles. 5. To edit or remove the hotspot, right click the area to display the context menu and select Edit Hotspot or Delete Hotspot. 115

116 Photo Gallery The Photo Gallery object is gives you a tool to create a Photo gallery with only a few mouse clicks. Add Add one or more images to the photo gallery. Remove Remove the selected image(s) from the photo gallery. Remove All Remove all selected images from the photo gallery. Move Up Move the selected image one place up. Move Down Move the selected image one place down. Thumbnail title Enter the text that will be displayed under the thumbnail image. To enable titles make sure you selected the 'Include title' option in the Text Page. Thumbnail size Specifies the size of the thumbnail images. Select 'Variable' to dynamically determine the thumbnail size. Columns The number of images per row. Horizontal alignment Alignment of the thumb images. This option has no effect when the Maintain aspect ration option is off. Vertical Alignment Alignment of the thumb images. This option has no effect when the Maintain aspect ration option is off. Cell Padding Enter how much space you want between the contents and inside edges of cells, in pixels. Cell Spacing Enter how much space you want between the cells in the table, in pixels. Maintain aspect ratio Select this option if you want to maintain the aspect ratio of the image in the thumbnail. If this option is not selected the thumbnail will be resized to fit whole rectangle. 116

117 Target Specifies the target where the larger version of the image will be displayed. Available options: Open in the same browser window Open in a new browser window Open in a popup window Open in another window (specify the name of the target window in the Name field) Generate thumbnail images By default Web Builder will generated a preview window which displays the original images. If the size of these images is large it can take a long time before the page is loaded in the browser. Instead you can enable Generate thumbnail images which will generate a smaller version of the images so the page will load faster. Prefix Prefix used for naming the thumbnail images. Include title Include the title of the image under the thumbnail. You can also change the font type, size, style and color of the title. Frame Specifies which style of frame to use. The 'Default' type adds a simply frame where you can specify the width and color. WYSIWYG Web Builder includes a few predefined frame styles, but you can easily add your own styles. Copy your own styles to following subfolder: /gallery, so if you installed Web Builder in the folder: C:\Program Files\Web Builder\ you need to copy the style images (gif, jpg or png) to C:\Program Files\Web Builder\gallery Frame Styles are made out of 8 images (note that you can also use the extensions jpg and png!): bottom.gif bottomleft.gif bottomright.gif left.gif right.gif top.gif topleft.gif topright.gif 117

118 Ready to use Java Scripts This feature can be useful if you want to brighten up your web pages with some cool Java Scripts. Click 'Insert JavaScript' and select one of the predefined scripts. Some of the scripts have properties to change the behavior of the script. To see the effect of the Java Script you will need to preview or publish the web page. Notes: These scripts are not created by. Where possible the appropriate copyrights are displayed. Depending on the configuration of the Internet browser some of these scripts might not work on all systems. It is not recommended to use more than one Java Script per page. You can create add your own Java scripts using the JavaScript editor which is available in the download section of our website. 118

119 Rollover image Rollover images change swap images on rolling over it (onmouseover event) and reverts back to the original image on rolling out of the object (onmouseout event). Initial image Select the image that will be displayed initially. Mouseover image Select the image that will be displayed when the mouse is over the object. Use original size: Select this if you want the image to appear at its original size. Fit to layout rectangle: Select this if you want to manually specify the image size. Link For more information about linking please read the chapter Links. 119

120 RSS Feed With the RSS Feed object you can add a RSS Feed to your website in only a few mouse clicks! What does RSS mean? RSS stands for Really Simple Syndication, and is used to describe the technology used in creating feeds. What is a feed (RSS)? Feeds, also known as RSS feeds, XML feeds, syndicated content, or web feeds, contain frequently updated content published by a website. They are usually used for news and blog websites, but are also used for distributing other types of digital content, including pictures, audio files, or video. At its most basic, RSS generates a list of links, to various resources on your site with a description of the content for each link. The contents of a RSS feed can be read in different ways. A variety of tools, both fee based and free, to read RSS feeds are available on the Internet. The latest browsers (Internet Explorer 7.0, Safari, FireFox 2.0 and Opera) also have build-in RSS feed support. The RSS Feed extension lets you define a RSS channel with a set of headlines. When you publish the web page, which includes the RSS extension, a RSS (XML) file will be generated in the same folder as the HTML page. A small RSS icon will be displayed on your web page with a link to this file. Some browsers will display a special icon in the toolbar, which lets the users easily subscribe to your RSS channel. General Title The name of the channel. It is how users refer to your service. If you have an HTML website that contains the same information as your RSS file, the title of your channel should be the same as the title of your website. Description Phrase or sentence describing the channel. URL The URL to the HTML website corresponding to the channel. For example: Include publication date for headlines. The extension can automatically update the publication date of the headlines (based on the creation or modification timestamp). To include the publication date in the RSS feed, enable this option. If you leave this option off, the publication date will not be included. Filename The filename of the generated RSS xml file. By default, this file is named rss.xml, but you can rename it to anything you like. Common file extensions for feeds are.xml and.rss Logo Specifies which logo will be displayed on the webpage. Headlines Add Add a new headline. The Subject and Description should be written to describe the content. The Podcast property provides a way of attaching multimedia content to the RSS feeds, such as an MP3 file. The URL field should reference the webpage that contains that actual content. This can be an internal of external link. 120

121 Edit Edit the selected headline. Remove Remove the selected headline. Optional Category, Specify one or more categories that the channel belongs to. Example: Newspaper Copyright, Copyright notice for content in the channel. Example: Copyright 2008, Editor, address for person responsible for editorial content Example: (Your Name) Webmaster, address for person responsible for technical issues relating to channel Example: (Web Master) Language, The language the channel is written in. This allows aggregators to group all Dutch language sites, for example, on a single page. Image, Specifies a GIF, JPEG or PNG image that can be displayed with the channel. Refresh time, Specifies the number of minutes that indicates how long a channel can be cached before refreshing from the source. 121

122 Slide Show You can use the Slide Show object to display different images in succession in the same place on the web page. For example, you could rotate among several images that advertise new products or display advertisements for other web sites. To add a rotating image, click the Add-button. You can also assign a link to each the image. Click Edit to change the properties of an image or Remove to remove it from the list. You specify the number of seconds to pause before displaying the next image in the sequence. Move Up Move the selected image one place up. Move Down Move the selected image one place down. Effect Specifies the effect that will be used for image transitions. Tip: To insert multiple images in one action hold SHIFT-key while pressing Add. 122

123 PayPal ecommerce Tools The PayPal ecommerce Tools are the quickest and easiest way to add ecommerce to your web site. You can easily create payment buttons and basic shopping cart functionality for your web site with only a few mouse clicks! Accept payments from anyone, all you need to set up a PayPal account is an address! PayPal is one of the leading and more respected payment services on the Web. Best of all, it costs nothing to set up an account. Sign Up for a PayPal Account now: The following tools are available: Buy Now Button Enable e-commerce on your website by letting customers quickly buy one item at a time. Add to cart Button View cart Button These buttons are part of PayPal's shopping cart solution. With the 'Add to cart' Button users can add one of more items to their shopping cart. The 'View Cart' button lets users check their cart whenever they'd like. Subscription Button Useful for subscriptions and recurring payments. Accept recurring payments with flexible, automated billing. Donation Button Accept credit card and bank account donations on your website or via . Options You can attach two optional form controls so the buyer can select (for example) the size or color of a product. An option field can be either a ComboBox or an EditBox. Step 1 Insert a ComboBox or EditBox to the page. Step 2 Select the ID of the object in the dropdown list above Notes: The selected options fields should not be part of another form. Web Builder will make sure they are attached to the PayPal button and rename the objects if necessary. 123

124 Buy Now Button When you use PayPal's Buy Now Buttons, you can sell individual items from your website. Buy Now Buttons is a low cost way for you to accept bank account payments, and can be fully integrated with your website in a few easy steps. General PayPal Account: address for your PayPal account. Button Image: Specifies the button image that will be displayed on your webpage. Select 'Custom Image' if you want to specify a custom image. Enable SandBox: PayPal provides a Sandbox to allow you to test your site without actually making payments. Uncheck this option when publishing the live version of your site! More information about the PayPal's sandbox: Target Window: Specifies the browser window where PayPal's website will be opened. Default: PayPal. Make this field empty if you want the PayPal website to open in the current window. Details Item name/service: Description of item. This field is optional. If omitted customers can enter an item name at time of purchase. Item ID/number: Pass-through variable for you to track purchases passed back to you at payment completion. This field is optional. If omitted no variable is passed back to you. Price: The price or amount of the purchase, not including shipping, handling, or tax. If omitted customers can enter an amount at time of purchase. Tax: Transaction-based tax override variable. Set this to a flat tax amount to apply to the transaction regardless of the buyer s location. This value overrides any tax settings set in your Profile. Default: Profile tax settings (if any) apply. Currency: The currency of the payment. Defines the currency in which the monetary variables (amount, shipping, shipping2, handling, tax) are denoted. Allow customers to edit quantity: When this option is enabled it allows the buyer to specify the quantity. Shipping Base shipping: The cost of shipping this item if you have enabled item-specific shipping costs. This field is optional. Extra shipping: The cost of shipping each additional item. This field is optional. Handling costs: Handling charges. This is not quantity-specific. The same handling cost is charged regardless of the number of items purchased. This field is optional. Require shipping information: Specifies whether to prompt the customer for a shipping address. Allow customer note: Specifies whether to prompt the customer to include a note with the payment. URLs Successful Payment URL: The URL to which the customer s browser is returned after completing the payment; for example, a URL on your site that displays a Thank you for your payment page. If omitted the customer is taken to the PayPal website. Cancel Payment URL: A URL to which the customer s browser is returned if payment is cancelled; for example, a URL on your website that displays a Payment Canceled page. If omitted the Browser is directed to the PayPal website. Buyer's Country: Defines the buyer s language for the Login page only. More information: 124

125 PayPal Shopping Cart When you use PayPal's free Shopping Cart on your website, your customers can purchase multiple items with a single payment, browse your entire selection, and view a consolidated list of all their items before purchasing. The PayPal Shopping Cart is a low-cost way for you to accept credit card and bank account payments, and can be fully integrated with your website in a few easy steps. When a buyer clicks the "Add to Cart" button, a new window will appear listing the contents of the buyer's PayPal Shopping Cart, including the item just added. To make the purchase, the buyer clicks "Checkout" from this window. Add to Cart Button The Add to Cart button can be used to add an item to the shopping cart. General PayPal Account: address for your PayPal account. Button Image: Specifies the button image that will be displayed on your webpage. Select 'Custom Image' if you want to specify a custom image. Enable SandBox: PayPal provides a Sandbox to allow you to test your site without actually making payments. Uncheck this option when publishing the live version of your site! More information about the PayPal's sandbox: Target Window: Specifies the browser window where PayPal's website will be opened. Default: PayPal. Make this field empty if you want the PayPal website to open in the current window. Details Item name/service: Description of item. This field is optional. If omitted customers can enter an item name at time of purchase. Item ID/number: Pass-through variable for you to track purchases passed back to you at payment completion. This field is optional. If omitted no variable is passed back to you. Price: The price or amount of the purchase, not including shipping, handling, or tax. If omitted customers can enter an amount at time of purchase. Tax: Transaction-based tax override variable. Set this to a flat tax amount to apply to the transaction regardless of the buyer s location. This value overrides any tax settings set in your Profile. Default: Profile tax settings (if any) apply. Currency: The currency of the payment. Defines the currency in which the monetary variables (amount, shipping, shipping2, handling, tax) are denoted. Allow customers to edit quantity: When this option is enabled it allows the buyer to specify the quantity. URLs Successful Payment URL: The URL to which the customer s browser is returned after completing the payment; for example, a URL on your site that displays a Thank you for your payment page. If omitted the customer is taken to the PayPal website. Cancel Payment URL: A URL to which the customer s browser is returned if payment is cancelled; for example, a URL on your website that displays a Payment Canceled page. If omitted the Browser is directed to the PayPal website. Buyer's Country: Defines the buyer s language for the Login page only. View Cart Button The View Cart button can be used to view the contents of the shopping cart. General PayPal Account: address for your PayPal account. Button Image: Specifies the button image that will be displayed on your webpage. Select 'Custom Image' if you want to specify a custom image. More information: 125

126 Subscription Button When you use PayPal Subscriptions and Recurring Payments, your customers can purchase automatically recurring subscriptions from your website. Subscriptions and Recurring Payments is a low-cost way for you to accept credit card and bank account payments for content site subscriptions, newsletter fees, club dues, or recurring donations, and can be fully integrated with your website in a few easy steps. Subscriptions and Recurring Payments are only available for Business or Premier accounts. General PayPal Account: address for your PayPal account. Button Image: Specifies the button image that will be displayed on your webpage. Select 'Custom Image' if you want to specify a custom image. Enable SandBox: PayPal provides a Sandbox to allow you to test your site without actually making payments. Uncheck this option when publishing the live version of your site! More information about the PayPal's sandbox: Target Window: Specifies the browser window where PayPal's website will be opened. Default: PayPal. Make this field empty if you want the PayPal website to open in the current window. Details Subscription name: Enter the name of the subscription you wish to sell in the Subscription name field. If you do not enter anything in this field, your customers can complete it. Reference Item Number: If you have an ID or tracking number for your item, enter it in the Reference Item Number field. This field will not be displayed to your customers at the time of payment, but they will see it in their transaction details on the PayPal website. Currency: Choose the currency in which you would like this payment to be denominated. This field will default to the currency of your primary balance. Bill the subscriber for: Enter your regular subscription rate. Length of each billing cycle: Specifies the regular billing cycle. Would you like to stop the recurring payments after a certain number? Enable this option if you would like to end your customers subscriptions after a certain number of payments at your regular rates. This means that once a customer has made the specified number of payments at your regular rate, his subscription will be completed. If you disable this option your customers subscriptions will continue unless it is cancelled manually or by payment failure. Trial periods (optional) You may enter a trial period and rates for your subscription. To create a free trial period, enter an amount of 0. Trial periods can be entered as a number of days, weeks, months, or years. Reattempt on Failure Enable this option if you would like PayPal to automatically reattempt failed payments. Payments will be reattempted three days after the failure date. After a second failure, PayPal will try once more five days later. A third failure will lead to an automatic cancellation of the subscription. Payments made with bank accounts are automatically reattempted once, three days after PayPal notifies the user that the payment failed. If you select No, failed payments will result in the automatic cancellation of the subscription. Require shipping information: Specifies whether to prompt the customer for a shipping address. More information: 126

127 Donation Button Collect donations from a button on your website. PayPal Donations is a low cost way for you to accept credit card and bank account donations. Integrate PayPal Donations with your website in a few easy steps. General PayPal Account: address for your PayPal account. Button Image: Specifies the button image that will be displayed on your webpage. Select 'Custom Image' if you want to specify a custom image. Enable SandBox: PayPal provides a Sandbox to allow you to test your site without actually making payments. Uncheck this option when publishing the live version of your site! More information about the PayPal's sandbox: Target Window: Specifies the browser window where PayPal's website will be opened. Default: PayPal. Make this field empty if you want the PayPal website to open in the current window. Details Donation name/service: Enter a description for the donation. If you do not enter anything in this field, your customers can complete it. Donation ID/number: If you have an ID or tracking number for your item, enter it in the Donation ID/number field. This field will not be displayed to your customers at the time of the donation, but they will see it in their transaction details on the PayPal website. Currency: Choose the currency in which you would like this payment to be denominated. This field will default to the currency of your primary balance. Require shipping information: Specifies whether to prompt the customer for a shipping address. Allow customer note: Specifies whether to prompt the customer to include a note with the payment. URLs Successful Payment URL: The URL to which the customer s browser is returned after completing the payment; for example, a URL on your site that displays a Thank you for your payment page. If omitted the customer is taken to the PayPal website. Cancel Payment URL: A URL to which the customer s browser is returned if payment is cancelled; for example, a URL on your website that displays a Payment Canceled page. If omitted the Browser is directed to the PayPal website. Buyer's Country: Defines the buyer s language for the Login page only. More information: 127

128 PHP Login Tools WYSIWYG Web Builder has a complete built-in (PHP) login system to password protect one or more pages. Key features: Protect a page simply by dragging the Protect Page object to the page. Login and Logout forms. An Administrator section to add, edit or remove user accounts. A Signup form to allow users to signup for an account. A Change Password form so users can change their password. A Password Recovery form, to reset the user's password. No database required. No custom coding needed, everything is 'drag & drop'! Requirements: The login tools require a web server with PHP support, so the first step to start using the login tools of WYSIWYG Web Builder is to check whether your web host supports PHP! A fully functional example template is included in the 'Demo' category of the standard Templates. User database The login tools use a database file on the server to store the user information. The data will be stored in a semicolon separated text file. The passwords will be hashed using md5 so they will be securely saved. The following login tools will use this database file: Admin Change Password Login Password Recovery Signup How do I create a user database on the server? All objects mentioned above do have a button in their properties window called 'Create database'. 1. Click the 'Create database' 2. Enter a name for the database, for example 'usersdb.php'. Click Next. 3. Select the publish location where you are going to publish this website to. Click Next. Note: If you do not see any publish locations, then you should add them first in the Publish window! 4. The wizard will make a connection with the server and show the folder structure. 5. Select the folder where the database should be created. 6. Click 'Finish' to create the file. WYSIWYG Web Builder will automatically change the permission of the file so that it's write enabled, so new users can be added. Tip: You should set the same database name for all login tools! 128

129 Admin The Administrator object allows you to add, edit or remove users from the user database online. To enable scrolling for a large list of users, the administrator form will be displayed inside an inline frame. Background Color Specifies the color of the background. BorderColor Specifies color of the border around the object. BorderWidth Specifies width of the border around the object. Font Specifies the font used to display text in the object. HeaderColor Specifies the header color. HeaderTextColor Specifies the header text color. Text Color Color of the text. AdminPassword Specifies the administrator's password. Database Specifies the user database. FrameName The 'FrameName' property specifies the name of this inline frame. 129

130 Change Password The Change Password object allows users to change their password. The user must be logged in to be able to change the password. Important Note: The page must have the File Extension 'php'! You can change the file extension of a page in the Page Properties. BackgroundColor Specifies the color of the background. BorderColor Specifies border color. BorderWidth Specifies border width. ButtonImage Specifies the image to be displayed for the button when the ButtonType property is set to 'Image' ButtonText Specifies the text to be shown for the button when the ButtonType property is set to 'Button' or 'Link'. ButtonType Specifies the type of the button. You can choose from 3 types: Button, Image or Link. ConfirmPasswordErrorText Specifies the text to be shown when the password and confirm password do not match. ConfirmPasswordLabelText Specifies the text that identifies the confirm password text box. Font Specifies the font used for text within the object. NewPasswordInvalidErrorText Specifies the text to be shown when the new password is invalid. NewPasswordLabelText Specifies the text that identifies the new password text box. NotLoggedInErrorText Specifies the text to be shown when the user is not logged in. OldPasswordInvalidErrorText Specifies the text to be shown when the old password is invalid. PasswordLabelText Specifies the text that identifies the password text box. Spacing Specifies the spacing between controls. TextColor Specifies text color. TitleBackColor Specifies background color of the title. 130

131 TitleColor Specifies text color of the title. TitleText Specifies the text shown for the title. Database Specifies the user database. DestinationPage Specifies the page that the user is directed to upon successful login. 131

132 Login The Login object provides a standard form to login to the protected pages. Important Note: The page must have the File Extension 'php'! You can change the file extension of a page in the Page Properties. BackgroundColor Specifies the color of the background. BorderColor Specifies border color. BorderWidth Specifies border width. Font Specifies the font used for text within the object. ButtonImage Specifies the image to be displayed for the button when the ButtonType property is set to 'Image'. ButtonText Specifies the text to be shown for the button when the ButtonType property is set to 'Button' or 'Link'. ButtonType Specifies the type of the button. You can choose from 3 types: Button, Image or Link. PasswordLabelText Specifies the text that identifies the password text box. RememberMeText Specifies the text to be shown for the remember me checkbox. Spacing Specifies the spacing between controls. TitleBackColor Specifies background color of the title. TitleColor Specifies text color of the title. TitleText Specifies the text shown for the title. UsernameLabelText Specifies the text that identifies the user name textbox. Database Specifies the user database. DestinationPage Specifies the page that the user is directed to upon successful login. ErrorPage Specifies the page that the user is directed to upon failed login. DisplayRememberMe True if the remember me checkbox is displayed. 132

133 Logout The Logout object gives the user the option to login. Important Note: The page must have the File Extension 'php'! You can change the file extension of a page in the Page Properties. BackgroundColor Specifies the color of the background. BorderColor Specifies border color. BorderWidth Specifies border width. Font Specifies the font used for text within the object. ButtonImage Specifies the image to be displayed for the button when the ButtonType property is set to 'Image' ButtonText Specifies the text to be shown for the button when the ButtonType property is set to 'Button' or 'Link'. ButtonType Specifies the type of the button. You can choose from 3 types: Button, Image or Link. TextColor Specifies text color. LogoutPage Specifies the page that the user is directed to upon log out. 133

134 Password Recovery The Password Recovery object allows users to reset their password. An message will be send with the new (random) password. If the user wants to change the password, he can use the Change Password form. Important Note: The page must have the File Extension 'php'! You can change the file extension of a page in the Page Properties. BackgroundColor Specifies the color of the background. BorderColor Specifies border color. BorderWidth Specifies border width. ButtonImage Specifies the image to be displayed for the button when the ButtonType property is set to 'Image'. ButtonText Specifies the text to be shown for the button when the ButtonType property is set to 'Button' or 'Link'. ButtonType Specifies the type of the button. You can choose from 3 types: Button, Image or Link. Font Specifies the font used for text within the object. Spacing Specifies the spacing between controls. TitleBackColor Specifies background color of the title. TitleColor Specifies text color of the title. TitleText Specifies the text shown for the title. LabelText Specifies the text that identifies the user name textbox. Database Specifies the user database. SuccessPage Specifies the page that the user is directed to after the action has succeeded. From Specifies the from address. Message Specifies the message. Subject Specifies the subject. 134

135 Protected Page To protect any page from your website, simply drag & drop the 'Protected Page' object to the page. If the user is not logged in he will be redirected to the 'Access Denied Page'. Important Note: The page must have the File Extension 'php'! You can change the file extension of a page in the Page Properties. Access Denied Page Specifies the page that the user is directed to if not logged on. 135

136 Signup The Signup object allows users to signup for a new user account. The new account will be created immediately after the user has completed the form. An message will be send to the specified address with the login details. Note that anyone can create an account, so use this object only for public pages! Important Note: The page must have the File Extension 'php'! You can change the file extension of a page in the Page Properties. BackgroundColor Specifies the color of the background. BorderColor Specifies border color. BorderWidth Specifies border width. ButtonImage Specifies the image to be displayed for the button when the ButtonType property is set to 'Image' ButtonText Specifies the text to be shown for the button when the ButtonType property is set to 'Button' or 'Link'. ButtonType Specifies the type of the button. ConfirmPasswordErrorText Specifies the text to be shown when the password and confirm password entered by the user do not match. ConfirmPasswordLabelText Specifies the text that identifies the confirm password text box. InvalidErrorText Specifies the text to be shown when the address entered by the user is invalid. LabelText Specifies the text that identifies the text box. Font Specifies the font used for text within the object. FullnameInvalidErrorText Specifies the text to be shown when the full name entered by the user is invalid. FullnameLabelText Specifies the text that identifies the full name text box. PasswordInvalidErrorText Specifies the text to be shown when the password entered by the user is invalid. PasswordLabelText Specifies the text that identifies the password text box. Spacing Specifies the spacing between controls. 136

137 TextColor Specifies text color. TitleBackColor Specifies background color of the title. TitleColor Specifies text color of the title. TitleText Specifies the text shown for the title. UsernameAlreadyUsedErrorText Specifies the text to be shown when the username already exists. UsernameInvalidErrorText Specifies the text to be shown when the username entered by the user is invalid. UsernameLabelText Specifies the text that identifies the user name text box. Database Specifies the user database. SuccessPage Specifies the page that the user is directed to after the action has succeeded. From Specifies the from address. Message Specifies the message. Subject Specifies the subject. 137

138 Publish your website You can publish your web pages using the build-in Publish tool. Select File->Publish to launch the publish dialog. There are two ways to publish your pages: 1. Publish to a local folder. 2. Publish to a remote FTP server. Publish to a local folder Click Add to add a new location to the list. Enter a name for the location a select Local as type. Enter the folder where you want to publish the active document. Click OK to save the data and then click Publish to save the files to the specified folder. If you do not want, to copy images or other components along with the HTML file, select the Only publish HTML files option. Otherwise, all images, ActiveX controls, java applets etc. will be copied the same folder. 138

139 Publish to a remote FTP server. Click Add to add a new location to the list. Enter a name for the location a select Remote as type and fill in the following fields: Host The Host Address field contains the location of the FTP server. You can either specify a URL or IP address. Port The default Port of a FTP connection is 21, but if necessary you can configure something else. PASV mode PASV mode is useful for certain types of firewalls that do not allow FTP servers to initiate data connections back to the connected client. Username This is where you enter the username of the FTP account that allows you to logon to the FTP Server (also see anonymous setting). Password Enter the password of the FTP account. Anonymous Some FTP sites allow you to logon with to a 'anonymous' account. When you select this option it will automatically fill in the username (=anonymous) and password (=your address). Remote Folder Specifies the folder on the FTP server where the files are uploaded. The default is your root directory. Common remote folders locations are: /www /public_html /html Important note: Unfortunately this value is different for each webhost, so consult your webhost's documentation for more details. Test Connection This command can help you determine if the specified hostname, username and password are correct. It also verifies if your firewall allows the connection to the server. The 'Explore' button in publish settings give you access to your published files. Clicking this button will launch the Built-in FTP Client to manage your online files. The built-in FTP client also introduces an easy way to find the remote publish folder. Simply login to your account, browse to the folder and click Make Home. WYSIWYG Web Builder will now use that folder as the root of your website! To modify the permissions of any file or folder. Select the file/folder and click the 'Permissions' button. This feature is only supported on UNIX based servers. 139

140 Pages to Publish Select which page or pages you want to publish. Entire Web Site, publishes all pages of the web site (except the pages which have enabled 'Don't Publish this Page' in Page Properties) Select Page Only, publishes the select page, click Select to specify the page to be published. Select Page and Sub Pages, publishes the select page and all of its sub pages (if any). Files Specifies which files will be published. Publish all files All files of the selected page(s) will be published Publish HTML files only Select this option if you do not want to upload images or other components along with the HTML file. Publish changed files only Select this option if you want to published the files that were changed since the last time you've published your web site. What exactly will be published depends on the changes you've made. For example, if you've only changed the position of an object, then only the HTML file was changed, but if you've changed the size of a shape, then the shape image needs to be regenerated and therefore the HTML and the image file will be published. More information about publishing To make your web pages available for other users you have to publish them to a web server. There are lots of hosting companies available, for example: Make sure you choose a web host, which supports FTP, which makes it much easier to publish your pages from Web Builder. Once you have registered to a web host, you will receive a server address, username and password. Enter this information into Web Builder by selecting: File->Publish. Click Add and select Type Remote. Sometimes you also need to specify a remote folder like 'public_html'. if you have a firewall/router select 'Use passive mode for transfers'. Click OK to save. Now you can publish each page simply by selecting Publish. If you want to view the results of the file transfer, you can view the log file via: Tools->Options->Publish->View Log. How to publish on host that offer free web hosting that do not support FTP? Instead of publishing your web pages directly via FTP, you can also publish your pages to a local folder. Click Add and select Type Local. Enter a Name and specify a location using the browse (..) button. Click OK to save. Now if you press the Publish button, the files will be generated to the local folder. Next select all the files in the local publish folder and upload them using the File Manager of your web host (e.g. geocities, yahoo...). What to do in case of publishing errors? 1. Make sure your ftp address (host) is correct 2. Is your username and password ok? 3. Does your firewall block the FTP connection of Web Builder? 4. Enable 'Use passive mode for transfers' 5. Increase the connection timeout to 120 seconds (Tools->Options->Publish) 6. For a list of all possible error codes and their descriptions go here: 140

141 Links (Hyper)links are text or images that can be clicked to bring the user to another web file such as a web page, images or any other file. They are the essence of the World Wide Web as they link pages within sites and web sites to other web sites. Highlight the text or image that will be the link and select Insert->Link from the menu bar or pressing CTRL+K. This will display the Insert Hyperlink window. Link to a page on another web site Set the Link To option to Web Site. Enter the full URL (Internet Address) of the destination page in the URL box. External URLs MUST begin with " or they will not work. For example, to link to the home page, type " instead of " Link to a page on your own web site Set the Link To option to Internal Web Page. Click 'Select' to choose a page. This will list all pages which are part of the current project. Select one of the pages and a relative link will automatically be created (eg./products.html). Notes: You must publish all pages you have linked to in order to be able to test relative links. Internal links do not work in Preview mode, unless you have set the Preview Scope to Entire Web Site (Tools->Options->Preview) Link to an address Select Address from the Link To dropdown list. The URL box will automatically be updated with the mailto: prefix. Now enter the destination address. For example: or Feedback Link to a file Set the Link To option to File. Browse for the file you wish to create a link for. WYSIWYG Web Builder will automatically upload the local file to your website, when you publish your page. Note: When linking to large files, it may take a while a while before the file is transferred to your website! 141

142 Smart Links Smart links can be used to link to the next, previous, parent or child of the current page. If you change the structure of your website, these links will automatically update to represent the current state. The following smart link options are available: Parent Page; Link to the parent of the current page. Child Page; Link to the first child of the current page. Next Page; Link to the sibling to the right of this page. Previous Page; Link to the sibling to the left of this page. Back; Go back to the previous page in the browser's history. Close the current browser window; Close the current browser window, this feature is not supported by all browsers! Print the current page; Clicking the link will print the current page. Reload Page; Clicking the link will reload/refresh the current page. Target Window or Frame Open in the same browser window, this option will set the target of the link to _self Open in a new browser window, this option will set the target of the link to _blank Open in another window or frame, this option lets you specify a custom target. Examples: _parent open the link in the parent frame _top loads the linked page in the topmost frame iframe1 specify the name of an inline frame, to open the linked page in an inline frame. Open in a popup window, this option will open the linked page in a (javascript) popup window. Click 'Settings' to specify the properties of the popup window: Left, Specifies the left position, in pixels. This value is relative to the upper-left corner of the screen. The value must be greater than or equal to 0. Top, Specifies the top position, in pixels. This value is relative to the upper-left corner of the screen. The value must be greater than or equal to 0. Height, Sets the height of the window in pixels. The minimum value is 150 for Internet Explorer! Width, Sets the width of the window in pixels. The minimum value is 250 for Internet Explorer! Status Bar, Enable the status bar at the bottom of the window. Tool Bar, Enable the standard browser toolbar, with buttons such as Back and Forward. Location Bar, Enable the Location entry field where you enter the URL. Menu Bar, Enable the menu bar of the window. Resizable, Allow/Disallow the user to resize the window. Scrollbars, Enable the scrollbars if the document is bigger than the window 142

143 Bookmarks (Jump to another part of the page) Text and images can be set as bookmarks (also called "anchors") that can be linked to within a page. For example, if a page has several new items, the news titles for each item can be set as bookmarks and a row of links can be added to the top of the page that will each skip down to those bookmarked sections. This method of using bookmarks allows visitors to your site to quickly access information by not having to scroll down the page to view the information they want. Step 1 You can create a Bookmark by using the Bookmark tool from the Insert menu Step 2 Move the bookmark icon to the position where you want the page to jump to if the user clicks the link. In this case lets jump to the top of the page. Step 3 Make sure you give the bookmark a unique name. 143

144 Step 4 Once you have placed the bookmark icon on your page, it can be selected from the Bookmark dropdown list. Appearance All hyperlinks in your webpage by default use the default HTML link colors (link: blue, visited: purple, active: red). By defining Hyperlink Styles (CCS) you can adjust the colors and formatting of an hyperlink. Once you have defined a style you can attach it to the hyperlink by selecting it from the Style dropdown list. Click the Edit Styles button to add or modify the hyperlink style sheet. Hyperlink Style Sheet By default, all text hyperlinks in your webpage use the default HTML link colors (link: blue, visited: purple, active: red). However, since CSS (Cascading Style Sheets) where introduced, more and more websites use different colors to create better looking layouts. Web Builder gives you the option to customize the way hyperlinks will be displayed in the browser by introducing the Hyperlink Style Sheet Editor. 144

145 Click Add to add a new hyperlink style. Each hyperlink style allows you to customize the colors for all four hyperlink states: Linked (default: blue, underlined) Visited (default: purple, underlined) Active (default: red, underlined) Hover (default: blue, underlined) Besides the colors, you can also change the bold, underline and italic formatting. Each style must be saved with a unique name. In the Link Properties window you can attach this name to a link. Click Edit to modify an existing style and Remove to delete it from the list. Example: Removing the underlining from a link. 1. Create a new style and clear the underline checkbox for all four states. 2. Name the style 'no_underline' 3. Click OK to save. 4. Select a link and change the Style from the dropdown list to 'no_underline' 5. Publish or preview the page to view the effect. Note: The link style becomes active when you publish or preview your page. Web Builder will always show links in blue. 145

146 Site Manager The Site Manager can be used to manage the structure of your web site. When your web site has more than one page they must all be part of the same Web Builder project file. The Site Manager can be used to add, edit, remove pages and organize your web site. There is also a button to open the properties of the selected page. The New Folder command give you the possibility to organize your pages in folders. In the picture above, you see an example of a web site structure. The filename of this example web site is called 'mywebsite.wbs', this name is always displayed at the root of web site tree. The root can have one of more pages and each page can also have sub pages. Web sites always have a home page, which is often called index, so for this reason Web builder automatically adds this page to each new project. The names of the items (pages) in the site tree are the actual file names of the target HTML files, so if you named a page 'index' is will publish as index.html. Adding a new page 1. Select the position where you want to insert the page, for example select the root (the top level item) to insert the page to the first level. 2. Click the first button on the toolbar (New Page) 3. Web Builder adds the new page to your project and will automatically open it, so you can start building the page. To insert a new page as child of an existing page or folder, first select the parent and click 'New Page' Tip: You can also use the context menu (right mouse click) to add new pages to the web site or you can select Page->New Page from the Web Builder menu. 146

147 Adding a new folder 1. Select the position where you want to insert the folder, for example select the root (the top level item) to insert the page to the first level. 2. Click the second button on the toolbar (New Folder) 3. Web Builder adds the new folder to your project. Open an existing page 1. Select the item (page name) your want to edit 2. Click the third button (from the left) on the toolbar (Edit Page). Cloning an existing page To make an exact copy of an existing page, select the item (page name) you want to clone and click the fourth button (from the left) on the toolbar to insert a copy of that page. Remove a page/folder Select the item (page or folder name) you want to remove and click the remove button on the toolbar or press the Delete key on the keyboard. You cannot remove the last page in your web site. Rename a page/folder Select the item (page or folder name) and press F2 to enter the new name. You can also use the context menu (right mouse click) to select and rename a page/folder. When you have linked to the page, you are renaming (from any page within the web site), Web Builder automatically updates all the links for you, so you don't have to redo all the internal links. Notes about page names While building your web site, Web Builder saves the project file with the.wbs extension. This is a project file used by Web Builder to simplify the building process. One project file can contain multiple web pages. Once your pages are ready you must export or publish them as HTML. The name of the output HTML file is taken from the name you have specified in the Site Manager. So if you named the page index then the output file will be called index.html. If the page needs another extension like.php, you can configure this in the Page Properties. Here are a some guidelines how to name your web pages: 6. Do not add.html or.htm extension to the page name. Web Builder will automatically add the.html extension (or.php,.asp) when it publishes (or exports) the HTML code. 7. Always name your homepage: "index", this is the most common name for a homepage. 8. Always use lowercase filenames, most web servers are case sensitive and might fail to find your page if you have called it "Index" or "INDEX" 9. Do not use space or other special characters in the name, keep them simple like: "page1" or "my_products" 10. Use underscores to connect words. Edit Page Properties To edit the page properties without having to open the page: 1. Select the item (page name) 2. Click the Properties button on the toolbar or right click for the context menu and select Page Properties. 147

148 Arrange Items You can arrange items by using drag and drop, select the item and drag it to the position where you want to move it to. Dropping an item on another item will automatically make it a child of this item. To prevent this you can hold down the CTRL key, this will move the item below the drop item. Another way to arrange items is using the context menu: 1. Select an item 2. Right click to display the menu. 3. Select Arrange and one of the available items: Move Up, Move Down, Move Left or Move Right. Import HTML Page Although Web Builder is NOT an HTML editor, you can import existing HTML pages. Select Page->Import->Import HTML Page from the menu to display the Import HTML page window. You can either select an HTML page from your local drive or specify a URL of an online website. Click OK to start importing the page. Web Builder will automatically copy all images to your local drive. Important notes about importing HTML: WYSIWYG Web Builder is not an HTML editor, but an HTML generator! Web Builder imports the HTML by rendering the contents of an existing page and then attempts to convert the layout to Web Builder's internal object format. The import feature currently only imports text, images, form elements and body attributes (link colors, background images, meta tags). Tables, scripts, style sheets and multimedia components are not imported. But in most cases this is good enough to get you started. Web Builder does not parse style sheets, so is some cases the text may look different than the original page. Web Builder currently doesn't support framesets. If you want to import a web page that is using frames you'll have to import all individual pages separately. It is very difficult to support all different types of HTML. Even the popular browsers will interpret HTML differently, so don't expect miracles. If a page fails to be imported it probably contains code that Web Builder doesn't understand and you still have to start from scratch. Importing web pages created with WYSIWYG Web Builder will give the best results! Import Web Builder 2.x page The file format of Web Builder 2.x is completely different than the current format. You can however import existing 2.x files into this version of Web Builder using this option. Import a page from another project This option makes it possible to import page from another WYSIWYG Web Builder project. Position and size of the Site Manager You can place the Site Manager anywhere you like (docked or floating): 1. 'Grab' the title bar of the site manager with your mouse to move the window to another location. 2. To make the Site Manager auto hide, click the pushpin in the top-right corner. When you move the mouse away from the window it will auto hide, only display a small tab where the windows hides. Move the mouse to that tab to make the window visible again. 148

149 Object Manager The Object Manager gives an overview of all objects in the current page; you can make object invisible, lock/unlock objects, change the z-order or remove a specific object. Double click an object in the list to select it in the workspace. More about the z-order of objects WYSIWYG Web Builder uses CSS positioning to create pixel perfect layouts in HTML. CSS operates in three dimensions - height, width and depth. In Web Builder each object (element) of your web page is placed on a separate layer, which makes it possible to overlap these objects something which can not be done using standard HTML/dynamic page layout). For that purpose, you can assign each element a number (z-index). Elements with a higher z-index overlap an element with a lower z-index. The z-order is the order in which objects will be displayed by the browser. WB automatically generates the z-index for each object you add to your page. So the first element will have z-index '0', the next object '1' etc. To change the z-index of objects you can use the arrange tools (Layout->Arrange) or the Object Manager. The following arrange tools are available: Move To Front Move object to front of the page Move To Back Move object to back of the page Move Forward Move object to next position in z-order Move Back Move object to previous position in z-order Let's say you want to display the objects in a particular order. 1. Select all objects one by one in the order you want them to be displayed. 2. After you have selected an object, click Layout->Arrange->Move to Front 149

150 Properties Inspector Use the Properties Inspector window to view and change the properties of selected objects. You can also use the Properties Inspector window to modify page properties. The changes will be visible immediately in the workspace. To display the Properties Inspector window click Properties Inspector on the View menu. The Properties window typically displays in the bottom right corner of WYSIWYG Web Builder, under the Site Manager, but you can move and resize the window. Object name (Drop-down box) Lists the currently selected object or 'Page' if no object is selected. Only objects from the active page are visible. When you select multiple objects, only properties of the first selected object appear. Categorized (Toolbar Button) Lists all properties and property values for the selected object, by category. You can collapse a category to reduce the number of visible properties. When you expand or collapse a category, you see a plus (+) or minus (-) to the left of the category name. Categories are listed alphabetically. Alphabetic (Toolbar Button) Alphabetically sorts all properties for selected objects. Property Page (Toolbar Button) Displays the Property Pages dialog box for the selected item. Property Pages displays a subset, the same or a superset of the properties available in the Properties window. Properties/Values Displays the properties and their values of the select object. Description pane Shows the property type and a short description of the property. Note: It's also possible to manually modify the size and position of the selected object by changing the Position and Size properties. 150

151 Style Manager The Style Manager (Menu->Format->Styles) is a central place to add, edit or remove style definitions for the entire website. Updating a specific style will affect all object using that style. For example you can update all fonts of your website in one operation. There are six standard heading styles (H1, H2, H3, H4, H5, H6), which normally are used for text headers only. Other styles can be used for all other objects that support them, like form elements and tables. When you add a new style all attributes of the style are empty (= default). You do not have to specify values for all attributes. It's also possible to define custom style attributes. You may have noticed that we did this for the header styles (CustomStyle is display: inline;), to make sure it is displayed correct in all browsers. Notes: Not all style attributes apply to all objects! For example margins and padding are current ignored by most Web Builder objects. These attributes where only added to fix browser incompatibility issues for header styles. Header styles (H1, H2...) can only be applied to text. Gradient Style Manager In the Gradient Style Manager you can add, edit and remove global (multi color) gradients effects. These effects can be used by shapes, cliparts, textart and the drawing tools. The definitions of the gradient styles are stored in a XML file 'gradients.dat' in the program folder. If you have defined custom styles and want to use the same styles on another computer, then you should copy this file. 151

152 Events In Web Builder 4.x images, shapes and form controls have an Events Property Page, to easily add actions to object events, like OnClick, OnMouseOver etc. Predefined actions include: Show, Hide, Move, Set Image, Play, Pause, Stop and JavaScript Function. Multiple events can be assigned to a single object. To add an event click Add. Next, select the event, action and specify the target. Based on the object one or more of these events can be selected: onblur Fires when the object loses the input focus. onchange Fires when the contents of the object or selection have changed. onclick Fires when the user clicks the left mouse button on the object. ondblclick Fires when the user double-clicks the object. onfocus Fires when the object receives focus. onkeydown Fires when the user presses a key. onkeypress Fires when the user presses an alphanumeric key. onkeyup Fires when the user releases a key. onload Fires immediately after the browser loads the object or page. onmousedown Fires when the user clicks the object with either mouse button. onmousemove Fires when the user moves the mouse over the object onmouseout Fires when the user moves the mouse outside the boundaries of the object. onmouseover Fires when the user moves the mouse pointer into the object. onmouseup Fires when the user releases a mouse button while the mouse is over the object. onreset Fires when the user resets a form. onscroll Fires when the user repositions the scroll box in the scroll bar. onselect Fires when the current selection changes. onsubmit Fires when a FORM is about to be submitted. onunload Fires immediately before the object or page is unloaded. 152