The Buttons in the Designer Window - XSitePro Website Design

Home Previous  Next


Brought to you by XSitePro Website Design Software

professional website design made easy      






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.



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



button_designer_toolbar_spell Spell Checker


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.



button_designer_toolbar_cut Cut


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.



button_designer_toolbar_copy Copy


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.



button_designer_toolbar_paste Paste


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.



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



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



button_designer_toolbar_link Link


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



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.





button_designer_toolbar_anchor Insert Anchor


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.



button_designer_toolbar_image Image


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



button_designer_toolbar_table Table


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.





button_designer_toolbar_horiz_line Insert Rule


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.



button_designer_toolbar_special_character 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_special_character_close button to return to the designer window.





button_designer_toolbar_numbered_list Numbered List


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.





button_designer_toolbar_bulleted_list Bulleted List


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.





button_designer_toolbar_indent Indent


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.



button_designer_toolbar_outdent Outdent


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.



button_designer_toolbar_justification Justification


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.



button_designer_toolbar_strike_through Strikethrough


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.





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





button_designer_toolbar_select_all Select All


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.



button_designer_toolbar_style_selector Style Selector


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.





button_designer_toolbar_font_selector Font Selector


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.





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





button_designer_toolbar_font_color Font Color


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.





button_designer_toolbar_background_color Background Color


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.





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



button_designer_toolbar_design_wizards Design Wizards


Clicking the design wizards button pops up a menu from which you can launch any of the following design wizards:



Test Box

Bulleted List



Highlighted text


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.



button_designer_toolbar_snippets Snippets


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



button_designer_toolbar_advertising Insert Advertising


Clicking the Insert Advertising button pops up a menu from which you can launch any of the following advertising tools:


Google Adsense

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:


Google Adsense

Amazon Product Advertising


PayPal Integration



button_designer_toolbar_audio Insert Audio


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.



button_designer_toolbar_video Insert Video


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.



button_designer_toolbar_widgets Widget Wizard


Clicking the Widget Wizard button launches the Widget Wizard, more details on which can be found in the 'Widget Wizard' section of this manual.



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



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



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



button_designer_toolbar_forms Forms Wizard


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.



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



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

Home  Previous  Next