The following section covers each of the buttons on the Designer toolbar. Some are described in detail whereas others, such as bold and italic, are given less attention as most people reading this are likely to already be familiar with what they are and how they are used.
Find & Replace
This button will allow you to find and, if necessary, replace text that appears on the current page. Clicking on it will bring up a window that asks for the search word or phrase. Behind this simple search box is another tabbed screen in which you may also enter a replacement text string. Searching will find the text on your Web page, while replacing will replace the search text with the ‘replace’ text.
XSitePro Designer comes with a powerful 140,000 word spell-checker that will help to ensure you do not publish Web pages with spelling errors in them. To check a page for spelling just click on the spell checker button at any time. The checking will always commence from the top of the current page and the checking will be restricted to the page you are currently working on.
The cut button lets you cut some text or an image from the document and paste it in another location, which might be another Web page or it could be into a text field. To use the cut button highlight the text or image you want to cut using your mouse and then click on the button.
The copy button is similar to the cut button (see above) but instead of cutting the selected text or image from the existing document, it simply takes a copy. You can then use the paste button (see below) to paste the contents of the clipboard to another location.
The paste button pastes whatever is in the clipboard to the point where your cursor is currently situated. The paste button is usually used in conjunction with the cut and copy buttons described above.
Paste from Word
The paste from Word button pastes whatever text is in the clipboard to the point where your cursor is currently situated, just like the regular paste button, but as well as doing this it strips out any erroneous HTML code (in the process) that Microsoft Word has a tendency to add to HTML pages created in the word processor application.
Undo and Redo
The Undo button lets you undo the last action you carried out. For example, if you had just made some text bold it would unbold the text, and if you had just deleted a paragraph of text clicking on the undo button would return the paragraph text to how it was, before you deleted it.
The Redo button will reverse an Undo action. So, for example, if you deleted a word and then clicked on the Undo button to get it back you could then click on the Redo button to get rid of it again. The undo and redo buttons do not cover all design features and circumstances, but they will help with basic text and document styling.
To make some text (or an image) into a clickable link, you must first highlight the text, by selecting it using your mouse, (or by clicking on an image) and then by clicking the link button on the toolbar in the designer window.
Clicking the link button will cause a small menu to appear with the option to insert a link, either to an existing Web page (on your current site) or to a number of other locations, including:
Another Page in XSitePro – Selecting this option will load a page selection screen, as shown below:
In the list of Web sites, shown in the ‘Select Page’ window, above, you can expand your Web sites’ page lists until you find the page to which you would like the selected text/image to link. Make a selection from the list, and then click the button to apply the link properties to your text/image.
Other Files – Selecting this option will present a sub-menu list of the other files that are currently in the root folder of your resources for this Web site. Using this link option you will be able to quickly navigate to, select and link to files you have previously added to your site. Selecting a file from the list will cause your currently-selected text/image to link to that file.
Other – This menu option will load the custom link properties dialog window, shown below:
This window contains a number of settings for our link – some specific to the link itself (on the first tab) and some general properties, which are covered in their own section: Advanced object properties. The main link settings (those you will need to set) are listed below.
Type - Enter the type of link, e.g. http (if it is another Web page), ftp, mailto.
URL - This is the url of the Web page you are linking to, e.g. http://www.yahoo.com/broadcast/sport.html
Target - Select from the drop down how you would like the link displayed. If you leave this blank the new page will load into the existing browser window. If you want the link to open in a new window select _new.
Title - The text you type in this field will appear as a ‘tool-tip’ when people hover their mouse over the link. It will also be read out to anyone using a screen reader so it can be worth typing something explanatory such as “Click here to go to the order page”.
Remove Link – if at any time you return to the properties screen for an existing link (you can do this by right-clicking an existing link and selecting ‘Link Properties’, shown below), you may click this ‘remove link’ button to strip the text of its link characteristics. The link text will revert to regular (non-linked) text in your page design.
The Anchor button lets you quickly create ‘Anchors’ (like a bookmark) anywhere on a page, that you can subsequently link to. To create an anchor, position your cursor where you want the anchor to be and then click the Insert Anchor button. You will be prompted to enter a name for the anchor. When entering the name it is best not to use spaces. Instead of Order Here you could enter Order_Here or Order-Here.
To link to this anchor use the link button as described above, but instead of entering a Web page URL in the URL field you would instead enter the name of the anchor after the ‘#’ symbol.
For example, if you had created an anchor and called it ‘More-Details-On-This-Product’ the text you would enter in the URL field of the Link Properties box (ie. the box that appears when you click on the link button) would be as follows:
When a visitor clicks on that link, their browser will jump immediately to the anchor. This is a great way of providing quick navigation within a page – it’s often used in long pages, such as FAQs.
There are two ways of adding images onto your Web pages with XSitePro. You can use the image button or you can use the powerful right-click functionality that is described elsewhere in this document. We will review the image button method here.
By default, clicking the image button has the action of loading the ‘Image Library’ tool, described in detail in its own section in this manual entitled 'Image Library'.
The table button lets you insert tables into your Web pages. When you click on the table button you will see a grid prompting you to select how many columns and rows you would like to include in your table. Move your mouse to the appropriate square and then click once.
You can further customize the table by right clicking on any of the cells with your mouse. This will bring up a Pop-up menu that includes such options as inserting rows and columns, merging and dividing cells and individual cell properties.
There is also a table properties window you can access by moving your mouse to the edge of the table so that the cursor changes to a "move" cursor (see screenshot below) and then right click and select Table Properties.
The horizontal line button inserts a horizontal line across your Web page. It is a quick and easy way of creating a visual break in your pages.
Insert Special Character
Clicking this button loads a very useful set of special characters in a new window, shown below. To select a character from the list simply click it once – the character will be inserted into the Web page, behind this open window. When you are finished entering your special character(s), click the button to return to the designer window.
The numbered list button will convert any paragraphs you have selected into a numbered list. It will number each paragraph consecutively and will apply an appropriate indent.
To create a numbered list select the text you wish to use with your mouse and then click once on the numbered list button. Your text will then be converted into a list similar to the one below.
The numbered list button will convert any paragraphs you have selected into a bulleted list. It will put a bullet before each paragraph and will apply an appropriate indent.
To create a bulleted list select the text you wish to use with your mouse and then click once on the bulleted list button. Your text will then be converted into a list similar to the one below.
The indent button will indent any selected text by a single tab space. You do not need to select the text using the mouse or keyboard, just positioning the cursor in the paragraph you wish to indent and then clicking on the indent button is sufficient. You can indent one or more paragraphs simultaneously.
An outdent is the exact opposite of an indent. If you have indented a paragraph and decide you do not want the indent, or you want less of an indent, just click on the outdent button and the paragraph or paragraphs will be moved back, towards the left margin.
The justification buttons will cause the selected text or image to be justified left, in the center, right or fully justified depending on which button you select.
The following screen shot illustrated the four different justification formats.
Left justified – means the text is justified so that it is flush with the left hand margin and the jagged edge will be on the right hand side.
Center justified – means each line of the paragraph is centered so that jagged edges will be seen on both the left margin and the right margin.
Right justified – means the text is flush with the right margin and that there will be a jagged edge on the left margin.
Fully justified – means that the text is justified neatly on both the left and right margins. This is the kind of justification that you will usually see in books and newspapers and magazines.
To apply any of the four different kinds of justification simply select the text you want to justify and then click on the appropriate justification button.
To apply a ‘strikethrough’ effect to your text, simply select the text to which you would like to apply this effect, then click the strikethrough button. This effect is often used on ‘pre-discount prices’ to emphasize savings. The below example shows some text with the strikethrough style applied.
Superscript and Subscript
Clicking on the superscript button will result in the selected text being reduced in size and moving above the normal text flow. Conversely, clicking on the subscript button will result in any selected text being reduced in size and moving below the normal text flow. This will become clear from the examples below.
The select all button allows you to select all of the different elements (e.g. text and images) that make up your Web page. This is useful for such tasks as applying a font style to all of the text, justifying everything in a certain way (e.g. centered or left justified) or cutting and pasting everything from one location to another.
The style selector lets you quickly apply a style to any of the text on your Web page. You should use this frequently to apply heading styles to your headlines and subheadings. To apply a new style highlight the text using your mouse, click on the down arrow next to the style drop down and select the style you wish to apply.
The font selector lets you quickly apply a font to the text on your Web page. XSitePro limits the number of fonts you can choose from to the safe fonts, i.e. the ones that work with all browsers and on all different computer systems (e.g. PC, Mac and Linux).
You can choose from over twenty fonts using this selector. It is highly recommended that you stick with only the supplied fonts when designing Web pages as using other fonts can, unless configured correctly, lead to unpredictable results.
To apply a font, select the text using your mouse then click on the down arrow, next to the font selector, and choose the font you would like to apply.
Font Size Selector
Using the font size drop down you can make text as small or as large as you want. The smallest size catered for in XSitePro is 6pt and the largest is 48pt. This gives you plenty of scope to create the look and feel you desire.
To apply a size to your text select the text using your mouse, click on the font size selector drop down and choose the size of text that you require.
To choose a color click on the down arrow to the left of the Font Color button. This will display a list of the basic colors. Once you've selected a color you can apply it to any text you like by selecting it with your mouse and then clicking on the Font Color button.
The background button lets you set a background color for selected text items and also for table cells/rows/columns.
Applying a background color (or ‘highlight’) to text – To apply a background color to your text you must first select the text to which the background will be applied, using your mouse, and then click on the arrow next to the font background button to select the desired highlight color.
Once you have chosen a color you can apply it to as many different text selections as you like subsequently, by just clicking on the font background button, i.e. you do not have to go through the color selection process each time.
Using highlights like that described above can be a very effective way of drawing attention to a special message. Here's an example in which the words "Hello Home Owner" have had a bright blue background applied. This helps draw attention to the start of this sales message, in this example.
Bold, Italic and Underline
To make text bold, add italics, or underline a single word, sentence or paragraph just select the text you wish to apply the style to and then click on the appropriate button.
Clicking the design wizards button pops up a menu from which you can launch any of the following design wizards:
Simply choose the appropriate design wizard from the menu and the appropriate window will appear.
You can read more on the design wizard tools themselves in the Design Wizards section of this manual.
Clicking the Snippets button loads a menu from which you may choose to:
Insert New - Insert a new snippet
Snippet Library - Load the snippet library
To read more on the Snippet Library tool, visit the section in this manual entitled 'Snippets'.
Clicking the Insert Advertising button pops up a menu from which you can launch any of the following advertising tools:
Amazon (three different types of adverts)
Simply choose the option from the menu that relates to the type of advert you wish you insert, and the respective tool will appear. Each of the different types of advertising has its own detailed section in this manual. The shortcuts below will take you to the respective topics:
Amazon Product Advertising
Clicking the Insert Audio button launches the Streaming Audio tool, more details on which can be found in the 'Audio Wizard' section of this manual.
Clicking the Insert Video button launches the Video insertion tool, more details on which can be found in the 'Video Wizard' section of this manual.
Clicking the Widget Wizard button launches the Widget Wizard, more details on which can be found in the 'Widget Wizard' section of this manual.
RSS Feed Wizard
Clicking the RSS Feed Wizard button launches the RSS Feed Wizard tool, more details on which can be found in the 'RSS Feed Wizard' section of this manual.
Insert XML Link
Clicking the Insert XML Link button launches the XML Syndication Insertion tool, more details on which can be found in the 'XML Syndication' section of this manual.
Insert Social Networking Link
Clicking the Insert Social Networking Link button launches the Social Networking Links tool, more details on which can be found in the 'Social Networking Links' section of this manual.
Clicking the Forms Wizard button launches the Forms Wizard tool, more details on which can be found in the 'Forms Wizard' section of this manual.
Site Search Form
Clicking the Insert Site Search Form button launches the Site Search tool, more details on which can be found in the 'Site Search' section of this manual.
Insert Page Breaks
Clicking the Insert Page Breaks Link button launches the Page Breaks tool, more details on which can be found in the 'Auto Page Generation' section of this manual.