Download pdf - Xsitepro Tutorial

Transcript
Page 1: Xsitepro Tutorial
Page 2: Xsitepro Tutorial

Welcome to the XSitePro Tutorial! Whether you are an Internet newbie or a well established Internet Entrepreneur you are sure to find XSitePro an incredibly useful and feature-packed tool to have at your disposal, and this tutorial will help to get you up-to-speed in the shortest possible time.

Read this if you are an Internet newbie If you are a newcomer to building web sites, or exploiting the commercial aspects of this wonderful medium, we highly recommend that you follow the XSitePro tutorial from start to finish. This will, without a doubt, teach you the most in the least amount of time. Once you have worked your way through the tutorial, which should take you only a couple of hours at most, you will have experienced many of the exciting features that the software has to offer. You can then take a look through the main manual to expand your knowledge and discover many of the features that are not mentioned in the tutorial.

How to use this tutorial This written tutorial has been kept as brief as possible, while at the same time trying to impart as much knowledge as possible. To work your way through the complete tutorial should take you less than two hours, but it will be time well spent. It will take you from being a novice XSitePro user to a power user in the shortest possible time. Along the way, you'll learn about many of the powerful tools that XSitePro puts at your disposal, and also many shortcuts that will save you time once you start using the software for your own projects.

The structure By the end of the tutorial you will have created a professional looking web site from scratch AND uploaded it to the Internet. Once you have done this, you will be able to take what you have learned to create your own web sites with ease, confidence and speed.

One lesson at a time The tutorial has been designed to be worked through in order. If you jump straight into later chapters you are likely to struggle as you will not have done the ground-work and you will not benefit from the structured approach that the tutorial takes.

Do exactly what it says You are advised to do exactly what the tutorial says, step-by-step. If you follow the instructions exactly as they are written, you will be amazed at how quickly and easily your web site is created. If you choose to deviate from the instructions, you are likely to take far longer to complete the tutorial, as you will have to spend time going back over what you have done to correct any errors made.

Standalone XSitePro comes with a comprehensive manual, but you will not need to refer to this at all during this tutorial. Everything you need to know to complete this practice web site is included in these pages. This will allow you to progress quickly through the lessons from complete novice to expert-in-the-making.

If you get stuck We can all make mistakes from time to time so if you do find yourself struggling at any point during this tutorial you are advised to retrace your steps. Go back a few lessons, or right back to the beginning if necessary, and then rework your way through each lesson and each step. If you are still having difficulties, and need any help at all, please take a look at the chapter at the end of this tutorial covering Help & Support.

Page 3: Xsitepro Tutorial

Before We Start – Some Common Tasks Below you will find a small selection of very basic shortcut terms, relating to using a computer. These terms are used regularly throughout this tutorial, and so it's important that you are familiar with them (and comfortable with them) before you get going on the tutorial. If you are already familiar with these simple terms, listed below, then please do feel to skip this small section and jump right to the first lesson.

The “Select All” command This term refers to a method of "selection" of text (or other elements) in a document or page. In most applications there is an "Edit" menu, within which you will find an option: "Select All". This action is often required ahead of the “Copy” or “Paste” actions, described below:

Copying Text Once selected, you can copy text or other content (including images, tables and so on), using the 'Copy' option – either selected from the “Edit” menu of the application you are using, or from a contextual “right-click” menu. Once 'copied' the text is place on what's called a "Clipboard". This Clipboard is a temporary storage space to which you copy items, in Windows, and from which you may then paste those same items. In this way you can transfer text (and other elements) from one windows application to another.

Pasting Text To paste some text which you have copied to the Clipboard, you need to select the "Paste" option - either from the "Edit" menu of the application you are using, or from a "right-click" contextual menu.

Click To 'click' on something, a button for example, means that you position your mouse cursor over that object and click your left mouse button once.

Double-click 'Double-clicking', as the name suggests, means clicking twice (in quick succession) on an object, a file for example.

"Browsing" for a file Microsoft Windows organizes files and folders in a particular way. To find, and open, files in Windows you have to use Windows Explorer to navigate your filing system and to locate files. "Browsing" to a file is another way of saying "finding, using the Windows filing system".

Opening files Opening files means to double-click on a file (within Windows Explorer) or to select and open a file using a menu (such as a "File" menu, shown below):

Closing dialog windows Most windows that open when you are using software can be closed, either using an aptly-name button (e.g. "Close") or by clicking the orange cross, in the top-right corner of the window. So, if you’re happy to get started, let’s begin with Lesson 1, over the page!

Page 4: Xsitepro Tutorial

Lesson 1 - Creating a Project and Adding New a Web Site What you will be doing

In this lesson you will be learning the following: 1. How to create a new project. 2. How to add a new web site to a project. Approximate time to complete: 10 minutes

Adding a New Project Step 1 - Open XSitePro by double-clicking on the shortcut on your desktop or via the Start menu on your computer. The

icon looks like the following graphic:

Once loaded, you will see the screen below - NOTE: Your screen may be blank, if this is the first time you have run XSitePro:

Step 2 - Add a new project by clicking on the "Add Project" button, shown below:

Step 3 - A New Project window will pop-up, as shown over the page.

Page 5: Xsitepro Tutorial

Step 4 - In this 'New Project' window enter a title for your new project. In this tutorial we will be creating a web site for a fictional business named "Central Carpets" so type the following words:

Carpets and Floor Coverings

The reason we have entered Carpets and Floor Coverings rather than just Central Carpets is that our 'long term plan' might be to create several sites all focusing on carpets and floor coverings, e.g. Luxury Carpets, Industrial Floor Coverings, Value Laminates, etc.

Step 5 - Still within the 'New Project' window enter some keywords for this project. You need to enter a small selection of

half-a-dozen or so appropriate keywords that will be relevant for sites within this project. The XSitePro software will automatically make use of the keywords you enter here to form the basis for keywords for sites, and subsequently pages, which you create within this particular project. Entering the keywords at the project stage saves a lot of time having to enter them individually for every site and every page you create. In the Project Keywords box enter the following text. Enter each word or phrase on a separate line.

carpets

floor coverings

rugs

flooring

laminate

Step 6 - In the New Project window enter a description for this project. This information is for your own personal use only

- it is not visible to visitors to sites created within this project. For this project, enter the following text:

This project contains all of my sites relating to Carpets and Floor Coverings.

Step 7 - Click the "OK" button, shown below, to complete the data entry on this screen:

Page 6: Xsitepro Tutorial

Step 8 - After adding a new project you will see a new project appear in the list on the left hand side of the Project Selection

Tree page, as shown below.

You may have a slightly different list of projects on the left hand side depending on when you installed the software (e.g. you may not have any other projects listed - that's perfectly normal, and nothing to worry about).

Well done! You just created your first XSitePro project. Easy, wasn't it?

Adding a New Web Site Step 1 - Make sure you are in the Project Management Screen, within XSitePro and select the Carpets and Floor Coverings project by clicking on it once with your mouse, as shown in the illustration above

Step 2 - With the project now selected, we can now add a new web site, into that project folder.

To add a new web site to the Carpets and Floor Coverings project just click on the "Add Web site" button, shown below:

Step 3 - The "Add New Web Site" window will appear, as shown in the below illustration.

You will be offered a choice of creating a blank web site or creating a site from one of a selection of ready-made template-types. For this tutorial we are going to create the site from scratch, without the use of a template.

Page 7: Xsitepro Tutorial

Click on the Blank Web Site button, at the top of the list of buttons, to proceed - as shown below:

Step 4 - The "Add New Web site" window will now appear asking you to enter some information for your new web site.

The window will look like the illustration below:

Step 5 - In the Add New Web site screen, enter a Title for your new web site. For this tutorial site, enter the following text

for your web site title:

Central Carpets, Rugs, Laminates and Quality Floor Coverings

Page 8: Xsitepro Tutorial

Step 6 - In the Add New Web site screen you will notice that there are already some keywords listed. These are the

keywords you specified when you created your project - they are a good head-start for this site, but we will need to add a key-phrase to make the list right for this web site. Enter the following keyword phrase at the bottom of the list of keywords:

Central Carpets

Step 7 - In the Add New Web site screen you should now enter a description for this web site. This description is for your

own personal use only. It is not visible to anyone visiting this site when it is published. Enter the following text:

This is my site dedicated to "Central Carpets" - a fictional carpet store. I will be adding

lots of general floor-covering information, pricing details, articles and more in the

pages of this web site.

Step 8 - The Add New Web site window should now look like this (obviously without the lines around your text):

Step 9 - Click the button to add this as a new web site. You will now be taken straight into this new website, within the Site Design part of XSitePro, ready to get working on the site itself.

Great Job! You just created your first blank XSitePro Web site - now let's start customizing the site, in Lesson 2...

Page 9: Xsitepro Tutorial

Lesson 2 - Page Layout What you will be doing In this lesson you will be learning the following: 1. How to set-up an overall page layout for your site 2. How to customize the different Page Layout Panels 3. How to preview your Page Layout Approximate time to complete: 25 minutes

A quick word about web page design Before getting started on the layout let's just have a quick look at the basic layout that is followed by over 90% of sites. Most well-designed web sites follow a common layout that has a left column that includes a site menu, a right column that features miscellaneous content, a main panel in the middle for the body copy, a header panel that often includes an attractive graphic, and finally a page footer that sometimes includes a graphic and often a horizontal menu bar with the same items on it as the left hand menu.

To explain this graphically take a look at the following web page.

XSitePro offers a lot of flexibility to create exactly the layout you want. for example you can dispense with the right or left columns if you want, or you can choose not to have a header graphic if you want - it is completely up to you. However, in our experience research has clearly shown that this standard layout works better than any other for the simple reason that it is instantly familiar to people. Familiarize yourself with the above layout and you'll find XSitePro to be as simple as can be.

Page 10: Xsitepro Tutorial

The Page Layout tab screen The Page Layout tab is a crucial part of the process of creating a web site. The settings in this screen will determine the overall style that the rest of the site follows. These centralized design settings not only ensure your site looks consistently attractive, but also mean you can add new pages (or edit existing pages) whenever you like with the minimum of fuss. Click on the Page Layout tab. Below is a screen shot of how the Page Layout tab screen will look when you first visit it.

On the right panel of the Page Layout tab screen you will see the Preview Panel. This where you'll see a simulation of what the overall style of your site will look like. To start with this will look rather dull, but by the time you get to the end of this lesson you'll have the makings of an attractive, professional web site. On the left hand side of the page are all of the settings and controls for the different page layout panels. These controls can be expanded and contracted as required (so that you only see the controls for the panel you are currently working on. To expand or contract respective panels' controls, use the 'up' and 'down' arrow buttons accordingly, shown below:

The work we will now be undertaking, in the following sections, will all take place on this left hand side. You will see the changes made reflected instantly within the right hand Preview Panel.

Let's get started!

Page 11: Xsitepro Tutorial

Header Panel Step 1 - The Header Panel is highlighted in the illustration below:

Step 2 - Make sure you are still in the Page Layout Tab in XSitePro.

Step 3 - If it is not already expanded, click the button for the Header Panel settings. The settings will look like the

image below:

Step 4 - Click on the "browse" button next to the "Image" drop-down box, shown in the image overleaf.

Page 12: Xsitepro Tutorial

Step 5 - When you have clicked the browse button, as shown above, the "Image Library" window will appear, after a few

seconds. It looks like the illustration below:

In this "Image Library" window you need to click the button labeled "Select from Hard Drive", as shown in the diagram above.

Step 6 - From the windows explorer window that appears (when you click the "Select From Hard Drive" button, as described above) you need to browse to the tutorial folder on your hard drive. You will find it in the following location: ...My Documents\XSitePro-Data\ So, to clarify this part: You want to find your "My Documents" folder, using the explorer window that appears... Then, double-click that folder to open it. Once inside that folder, find the double-click the "XSitePro-Data" folder, and then finally find and double-click the "Tutorial" folder itself... So, you should now be looking at the contents of the "Tutorial" folder, which will resemble the folder contents shown overleaf:

Page 13: Xsitepro Tutorial

Step 7 - In this tutorial folder you will see a header graphic file, named: Header_Graphic.jpg. Select it (by clicking it once with your mouse) and then click the "Open" button at the bottom of the window, shown below.

Well Done! Your header will now be displayed in the preview panel on the right of the screen, as shown below:

Info Bar Step 1 - The Info Bar is highlighted in the illustration below:

Page 14: Xsitepro Tutorial

Step 2 - Make sure you are still in the Page Layout Tab within XSitePro.

Step 3 - In the left side of your screen, expand the settings for the Info Bar by clicking the down-arrow button: next to the Info Bar label. When expanded, the Info Bar section will look like the following screen-shot:

Step 4 - Activate the Info Bar by checking the "Include Info Bar" checkbox.

Step 5 - We can start by selecting a color that will look nice with our design. To select a color, first click the color browse

button to launch the color picker tool. This button is shown below:

On clicking the browse button, as described above, the color selection window will load, and will look like the illustration overleaf:

Page 15: Xsitepro Tutorial

Make sure that the "Web" tab (in the color selection window) is selected, and then scroll down the list of colors until you see the color called "DarkSlateGray". Click this color once, to select it, and then click the "OK" button, shown below:

Step 6 - In the preview window you should now see your Info Bar appear, with the selected color as its background.

Step 7 - Activate the Navigation Menu for this panel by checking the "Include Links on Info Bar" checkbox. Your settings

will now look the same as these below:

Step 8 - The last thing we'll do, in our Info Bar settings, is make the text color white. To do this, just type the word "White" into the text color box, as shown below:

Page 16: Xsitepro Tutorial

Step 9 - Your site preview, on the right hand side of your screen, should now resemble the image below:

Next, we'll set some Left Panel options.

Left Panel Step 1 - The Left Panel is highlighted in the illustration below:

Step 2 - Make sure you are still in the Page Layout Tab, within XSitePro

Step 3 - In the left side of your screen, expand the settings for the Left Panel by clicking the down-arrow button: button next to the Left Panel label. When expanded, the Left Panel section will look like the following illustration:

Page 17: Xsitepro Tutorial

Step 4 – In the “Size & Padding” Width box, enter the value: 160

Step 5 - In the “Size & Padding” Padding box, enter the value: 25

Step 6 - We want to include a menu in the left column so make sure that the Include Navigation Menu checkbox is

checked, as shown below:

.

Step 7 - Next, we are going to change the background color of the left panel. To do this, click the color browse button, shown below, to launch the Color Picker window.

Page 18: Xsitepro Tutorial

When you have clicked the color browse button, as described above, the Color Palette window will appear.

Step 8 - From the Color Palette window (making sure the Web tab is selected) select "PaleGoldenrod" as shown below:

Having selected the PaleGoldenrod color from the list, click the "OK" button as shown below:

The left panel should now show the selected color as its background color.

Step 9 - Your site preview (on the right side of the screen) should now look just like the illustration below:

Main Panel (skipping past the “Main Panel Header”) Step 1 - The Main Panel is highlighted in the illustration overleaf:

Page 19: Xsitepro Tutorial

Step 2 - Make sure you are still in the Page Layout Tab, within XSitePro.

Step 3 - In the left side of your screen, expand the settings for the Main Panel by clicking the down-arrow button: next to the Main Panel label. When expanded, the Main Panel section will look like the following illustration:

Step 4 - In the Width box, enter the value: 450

Step 5 - In the Padding box, enter the value: 20

Page 20: Xsitepro Tutorial

Right Panel Step 1 - The Right Panel is highlighted in the illustration below:

Step 2 - Make sure you are still in the Page Layout Tab, within XSitePro.

Step 3 - In the left side of your screen, expand the settings for the Right Panel by clicking the down-arrow button: next to the Right Panel label. When expanded, the Right Panel section will look like the following illustration:

Page 21: Xsitepro Tutorial

Step 4 - In the Width box, enter the value: 140

Step 5 - In the Padding box, enter the value: 10

Step 6 - Exactly as we did with our Left Panel we will now select an attractive color to use as a background for our Right

Panel. To do this, click the color browse button, shown below, to launch the Color Palette window.

When you have clicked the color browse button, as described above, the Color Palette window will appear.

Step 7 -From the Color Palette window (making sure the Web tab is selected) select "LightBlue" as shown below:

Having selected the LightBlue color from the list, click the "OK" button as shown below:

The right panel should now show the selected color (LightBlue) as its background color.

Step 8 - Your site preview, on the right hand side of your screen, should now look just like the illustration below:

Page 22: Xsitepro Tutorial

Step 9 - We will now add some interesting content to this Right Panel, by making use of the "Designer" tool.

To access the Designer for the Right Panel, click the "Designer" button, as shown below:

Clicking the "Designer" button, as described above, will load the designer window, shown below:

Page 23: Xsitepro Tutorial

Note: You will see from the illustration above that our right panel is displayed exactly as it will appear on the published webpage, only in isolation (so we can focus on this section of the page design without distraction).

Step 10 - We will now insert some text into our right panel, to make it look a bit more interesting to visitors.

For purposes of demonstration, we will insert some testimonials from fictitious customers of the Central Carpets store. To help speed up this process we've already written some testimonials for you - so you can simply copy and paste them into your design. In an Internet Browser, go to the following web address (URL): http://www.xsitepro.com/right-panel-text.html

Step 11 - Once that page has loaded, select the "Edit" menu, in your browser, as shown below:

And then, from the "Edit" menu, choose the "Select All" option, as shown in the above illustration.

Step 12 - With all the text now selected (highlighted in your browser window), select the "Edit" menu once again, and then choose the "Copy" option from the menu, as shown below:

Page 24: Xsitepro Tutorial

Step 13 - With the text now safely on your clipboard, you may now return to XSitePro (to the right panel designer window).

Back at the designer window, right-click in the light-blue area, with your mouse and then, from the menu that appears, select "Paste" to paste the text you copied earlier, into this panel. The right-click menu is shown below:

Step 14 - The panel should now look just like the illustration below:

Page 25: Xsitepro Tutorial

Now you can click the "OK" button, shown below, to commit these changes to your page layout design.

Step 15 - Your Page Layout Preview should now update to reflect the changes you just made. The screen will look like this:

Great! Nearly there now... next we'll set up our Page Footer and Margins.

Page Footer Step 1 - The Page Footer is highlighted in the illustration below:

Page 26: Xsitepro Tutorial

Step 2 - Make sure you are still in the Page Layout Tab, within XSitePro.

Step 3 - In the left side of your screen, expand the settings for the Page Footer by clicking the down-arrow button: next to the Page Footer label. When expanded, the Page Footer section will look like the following illustration:

Step 4 - Activate the Page Footer by checking the "Include Page Footer" checkbox, as shown below:

Step 5 - In the Height box, enter the value: 78

Step 6 - In the Padding box, enter the value: 30

Step 7 - Activate the Navigation Menu for this panel by checking the "Include Links on Page Footer" check-box.

Page 27: Xsitepro Tutorial

Step 8 - We could simply select a background color for our footer, but to make our site look incredibly professional we'll use

an image file, just as we have done with our Header panel. To do this, start by clicking on the "browse" button next to the "Image" drop-down box, as shown below:

Step 9 - When you have clicked the browse button, as described above, the "Image Library" window will appear after a

few seconds. It looks like the illustration below:

In this "Image Library" window you need to click the button labeled "Select from Hard Drive", as shown in the diagram above.

Page 28: Xsitepro Tutorial

Step 10 - From the windows explorer window that appears (when you click the "Select From Hard Drive" button, as

described above) you need to browse to the tutorial folder on your hard drive. You will find it in the following location: ...My Documents\XSitePro-Data\ So, to clarify this part: You want to find your "My Documents" folder, in the browse window that appears... Then, double-click that folder to open it. Once opened, find and double-click the "XSitePro-Data" folder, and then finally find and double-click the "Tutorial" folder itself... So, you should now be looking at the contents of the "Tutorial" folder, which will resemble the folder contents shown below:

Step 11 - In this tutorial folder you will see a header graphic file, named: Footer_Graphic.jpg. Select it (by clicking it once

with your mouse) and then click the "Open" button at the bottom of the window, shown below.

Well Done! Your footer will now be displayed in the preview panel on the right of the screen, as shown below (note:

you may need to scroll down the preview window a little, to see the footer graphic):

Step 12 - Now we will change the default text settings for this panel - we're going to do this so that any menu items shown

in this panel will be visible against our graphical background. We'll be changing the text options in the Footer Panel settings shown again, below: Note: Until we add menu items to our footer, there will be no visible text in your footer.

Page 29: Xsitepro Tutorial

Instead of loading the color selector this time (by clicking the color browser button, as we have done previously in this Tutorial) we're going to use a shortcut and simply type the word "White" right into the Color box itself (in place of the existing word, "Black"). This will change the font color setting immediately for us - as shown below:

Step 13 - Now click the "Bold" button, shown below, to make the default font setting Bold for this panel.

Your Footer is done! Now let's set up our Page Margins.

Margins Step 1 - The Margins are highlighted in the illustration overleaf:

Page 30: Xsitepro Tutorial

Step 2 - Make sure you are still in the Page Layout Tab, within XSitePro

Step 3 - In the left side of your screen, expand the settings for the Page Margins by clicking the down-arrow button:

next to the Page Margins label. When expanded, the Page Margins section will look like the following illustration:

Step 4 - We will now select a small image file which XSitePro will repeat as a background. Effectively this small graphic will

be 'tiled' to form a background for the web site design. To do this, start by clicking on the "browse" button next to the "Image" drop-down box, as shown below:

Page 31: Xsitepro Tutorial

Step 5 - When you have clicked the browse button, as described above, the "Image Library" window will appear after a

few seconds. It looks like the illustration below:

In this "Image Library" window you need to click the button labeled "Select from Hard Drive", as shown in the diagram above.

Step 6 - From the windows explorer window that appears (when you click the "Select From Hard Drive" button, as

described above) you need to browse to the tutorial folder on your hard drive. You will find it in the following location: ...My Documents\XSitePro-Data\ So, to clarify this part: You want to find your "My Documents" folder, in the browse window that appears... Then, double-click that folder to open it. Once opened, find and double-click the "XSitePro-Data" folder, and then finally find and double-click the "Tutorial" folder itself... So, you should now be looking at the contents of the "Tutorial" folder, which will resemble the folder contents shown below:

Step 7 - In this tutorial folder you will see a header graphic file, named: Background.gif. Select it (by clicking it once with your mouse) and then click the "Open" button at the bottom of the window, shown below.

Back in the Page Layout screen, in XSitePro you will see the background of your web-page has updated (in the preview window) to show your new background image.

Page 32: Xsitepro Tutorial

Step 8 - We now just need to set the margin height, above and below our web page design. To do this we will set the

values in the two boxes (in the Page Margin Settings) labeled: "Top" and "Bottom". In the Top box, enter the value: 27 as shown below (this is the height of the space, in pixels, above the header graphic that

you would like)

Step 9 - In the Bottom box, enter the value: 7 (this is the height of the space, in pixels, below the footer graphic that you

would like). The below illustration shows this setting:

Step 10 - Your site preview, on the right hand side of your screen, should now show the selected image tiled in the

background of your page layout design. The preview window should look like the illustration below, with the thin strip of background visible just above the header graphic:

Page 33: Xsitepro Tutorial

Preview your Page Layout Well done. You've successfully entered all the details necessary to get the example site off to a flying start.

Before moving on to the next lesson, let’s just take a moment to have a quick glance at how things look so far. We can do this by opening our newly created template page in a browser.

Step 1 - Click the "Preview" button in the bottom left of the screen - shown below:

When you click on the Preview button your default browser will open and you'll see a full sized version of your template page. At this point there will be very little text in it (we'll get onto that in the next lesson), but you will get a good feel for what the finished site will look like. Here's how your site will look, in the web browser. After you have viewed this screen you may close the window and return to XSitePro to continue

Page 34: Xsitepro Tutorial

Lesson 3 - Web Pages What you will be doing In this lesson you will be learning the following: 1. How to add new web pages 2. How to enter essential information regarding your web pages 3. How to edit web pages in Designer Approximate time to complete: 10 minutes

Introduction to Web Pages The Web Pages tab is where you go to add, edit and manage your web pages. The below illustration shows where this tab is, within your XSitePro Web site:

Before creating the first of our Web pages, let's look at a quick overview of the Web Pages screen.

On the left hand side you'll see three buttons: Add Page, Other and Delete, and below them there is a blank white box. We will refer to this blank white box as the Web Page List. As we add new web pages you will see them appear in this list automatically.

Page 35: Xsitepro Tutorial

Let's get started with our "home page".

Creating the Home Page Step 1 - Click on the "Add Page" button located in the Web Page List section of the screen.

Step 2 - A window will appear, prompting you for some information about your new web page. The window will look like the

illustration below:

In this window, shown above, we need to enter some essential information for this web page. Start by entering the following text in the Page Title box:

Home

Step 3 - In the Keywords box there should already be a number of keywords that you originally entered when you created

the web site. The XSitePro software suggests these as keywords you may want to use, given the site's overall topic. You can edit and add to these as much as you like at a page level - to refine individual pages for specific keywords as required...

Page 36: Xsitepro Tutorial

As this is only an example, and to save time, we will accept the keywords that have already been suggested - so you don't need to change anything in that box.

Step 4 - In the Description box, enter the following text by way of a description for this particular page:

Home Page for the Central Carpets web site.

Note: You might normally enter more information to describe your pages, but we’ll keep it brief for this demonstration.

Step 5 - Next you must specify the menus (if any) on which you wish to display a link to this web page. For the purposes of this tutorial check only the boxes "Show on Info Bar" and "Show on Left Navigation Menu".

Step 6 - We must also specify whether or not we would like this page to appear on our site-map. We will check this box, in

this example, to confirm we would like to display this page on our site-map, as shown below:

Step 7 - Our New Web Page screen will now look like the following illustration:

Page 37: Xsitepro Tutorial

Step 8 - Finally on this screen, click the "Create" button, as shown below, to create your new Web page:

Step 9 - You will now be taken to the Page Settings Tab for this new web page. You will immediately notice that pretty

much everything has been set in accordance with the settings we just entered. If you want to change any of your page settings at any future point, this Page Settings tab is where you need to come to do it. The only additional setting we will adjust for this page in particular is that we will make this page our 'home page' by checking the "Make this my Home Page" checkbox, as shown below:

Let's do some design work Now that we have created our first page lets start to add the page content.

Step 1 – Make sure that the page labeled Home is selected in the Web Page list on the left of the Site Design screen.

Step 2 – Click on the Design Tab and you'll be taken to a blank page screen similar to the one shown overleaf. At the top

are several toolbar buttons that allow you to add text styles (e.g. bold and italics), justify the text, add tables and images, etc. These buttons have much the same effect as those you would find in standard word processor software.

Page 38: Xsitepro Tutorial

Step 3 – We're now going to enter some text in this design window.

To save you time entering this text manually we have already written some text out for you. Just go to the web-address below to load the web page, first of all: http://www.xsitepro.com/v2-home-page.html

Step 4 - Once that page has loaded, select the "Edit" menu, in your browser, as shown below:

And then, from the "Edit" menu, shown above, choose the "Select All" option, as illustrated in the picture above.

Step 5 - With all the text now selected (highlighted in your browser window), select the "Edit" menu once again, and then

choose the "Copy" option from the menu, as shown below:

Page 39: Xsitepro Tutorial

Step 6 - With the text now safely on your clipboard, you may now return to XSitePro (to the web page designer).

Back at the web page designer window, right-click in the white page-area with your mouse and then, from the menu that appears, select "Paste" to paste the text you copied earlier, into this space. The right-click menu is shown below:

Step 7 - The page design window should now look just like the illustration below:

Page 40: Xsitepro Tutorial

Step 8 – The text you have just pasted into the Home Page of your new web site looks pretty plain, so let's make a few

tweaks to 'bring it to life' a little. First, select the first two lines starting "Ever wondered..." and ending "...REALLY go?" using your mouse (to do this,

'click-and-drag' with your mouse pointer, over the text, to select it).

Step 9 - Change the highlighted text to the Courier New font by clicking on the font selection box in the toolbar (see

screenshot below) and selecting Courier New from the drop-down list. Then make the text bold, as shown below:

Step 10 - Let's underline these two lines. Click on the underline button, and then the center button, as shown below.

Page 41: Xsitepro Tutorial

Step 11 – Next, highlight the three lines starting "Busting the myth..." and ending "...your quality flooring" using

your mouse. We're going to make this into our page headline. Once you've selected this text, click on the text style drop down box on the left side of the toolbar and select Heading 3 from the drop-down list. Then, click on the "Center" button on the toolbar to center the headline on the page - all shown below.

Step 12 - We'll also change the color of the headline to make it stand out. To do this, making sure first that your heading text is selected, click on the Font Color button, then select dark red – that's the color on the left hand side, second row down, as shown below:

Step 13 - Now we're just going to bold some text further down in the copy. Find the following text in the copy and make it

bold using the "Bold" button, as shown in the illustration below:

"Hello Home Owner"

Page 42: Xsitepro Tutorial

Do the same with the following text:

"Pete Stirling" and "Robert Jefferson"

Step 14 - Well Done! Things should look much better now. You can get a better impression by clicking on the Preview

button at the bottom of the page as shown below:

This will open your new page in your default web browser, which should resemble the screen-shot shown below. Your site is now really starting to take shape!

Now that we have seen how to create a simple web-page, we'll take a look in the next lesson at how you can shortcut the process of creating great-looking pages using one of the many powerful tools in XSitePro.

Page 43: Xsitepro Tutorial

Lesson 4 - Creating Content With QuickPages What you will be doing

In this lesson you will be learning the following: 1. Creating an Article Page, using QuickPages 2. Creating a Contact Details Page using QuickPages 3. Creating a Privacy Page using QuickPages 4. Organizing pages Approximate time to complete: 20inutes

Creating Article pages Articles are a great source of relevant content for your site and can often be copied from free article directories. In this example, we'll be using the QuickPages tool to create two different Article Pages.

Step 1 - In XSitePro, make sure you are looking at the Web Pages tab:

Step 2 - Click the "Other" button, shown below, and from the drop down list that appears, select QuickPage:

Step 3 - A window will load showing a list of different QuickPage templates, grouped together in folders (on the left hand side of the window). In the list of folders you need to expand the folder named "Articles Page" to view its contents. The window should look like the one below, at this point:

Page 44: Xsitepro Tutorial

Step 4 - From the list of available templates, in the Articles Page folder, choose "Classic". When selected you will see a

preview of the selected style in the preview panel, to the right of the list of templates.

Step 5 - Click the "Next" button to proceed, as shown below:

Step 6 - The next screen to appear requires that we fill out some basic information:

In the Heading box, enter:

Crushmaster

In the Subheading box, enter:

No carpet bounces back better

In the Author Name, enter:

your own name

In the Date box, enter:

December 8th, 2009

In the Resources box, enter:

For more information, visit

www.carpetcentral.org

In the About box, enter:

Central Carpets has been trading since 1987 and

is a proud employee of 16 staff across its three

stores. We have been involved in carpets for 36

years and play an active role in the Carpet

Retailers' Association.

In the Source box, enter:

www.carpetcentral.org

So, having entered this information in the boxes provided, your screen will now resemble the illustration above: For the Body box, on the right side of the window, refer to the next step, below.

Page 45: Xsitepro Tutorial

Step 7 - Now we need to enter our article content. Rather than ask you to enter your own article text, we have supplied you with some text pre-written text that you can use. To view this text, enter the URL below, in your Internet Browser. http://www.xsitepro.com/article1.txt

Step 8 - Once that page has loaded, select the "Edit" menu, in your browser, as shown below:

And then, from the "Edit" menu, shown above, choose the "Select All" option, as illustrated in the picture above.

Step 9 - With all the text now selected (highlighted in your browser window), select the "Edit" menu once again, and then choose the "Copy" option from the menu, as shown below:

Step 10 - With the text now safely on your clipboard, you may now return to XSitePro (to the Quick Page window).

Page 46: Xsitepro Tutorial

Back at the Quick Page window, right-click inside the "Body" text-box with your mouse and then, from the menu that appears, select "Paste" to paste the text you copied earlier, into this space. The right-click menu is shown below:

Step 11 - The page design window should now look just like the illustration below:

Step 12 - Now we have completed our data entry, click the "Next" button shown below:

Page 47: Xsitepro Tutorial

Step 13 - In the next screen you can preview how your page looks. You could, if you wanted, make changes to the fonts

and styles, but for the purposes of this tutorial we're going to accept the defaults. Click the "Create Page" button, shown below, to complete the QuickPage wizard and actually generate your web page.

Note: Now that your Article Page has been created you can edit it as you would any other page in your site.

Step 14 - With your page created, just take a moment to ensure that the "Show on Left navigation Menu" check-box is

checked (in the Page Settings tab). The illustration below shows you where to look:

Step 15 - Having successfully created one article page, now repeat the steps 1-14 above to create another article Page.

When you repeat the process, vary the values inputted into the data entry screen (in Step 6), just so that the articles appear a little different in your Web site. You'll find a second piece of article body content over at the web page below. You can use the text on that web page for your body text this time around. http://www.xsitepro.com/article2.txt

Creating a Central Articles Page Having lots of articles on your site is a great way to quickly build a content-rich web site, but it is often not practical to have all the article titles listed on the left hand menu of our Web site. To get round this we shall create a Central articles page that automatically links to every new article you add to your site.

Step 1 - Make sure you are on the Web Pages tab, and click on the "Add Page" button as shown below:

Page 48: Xsitepro Tutorial

Step 2 - Clicking the "Add Page" button, as described above will load the "New Web Page" window. In the "Page Title"

text-box, enter the name Articles as shown below:

Step 3 - Having entered our Page Title, as described above, simply click the "Create" button at the bottom-right corner of

this window, to create the new Web page.

Step 4 - With our page now created, we now need to position this new page correctly in the Web page list. To do this, click

on this new Articles page in the web pages list on the left of the page and use the up-arrow key as shown below, to move it up above the two articles we entered in the previous section of this lesson.

Step 5 - Once you have done that click on the Article Page entitled 'Crushmaster' and then press the "right-arrow" button,

shown below, to make it into a sub page of the Articles page and then do the same thing for the second article page that

you created.

Page 49: Xsitepro Tutorial

Here's what the list will look like when you've finished.

Step 6 - Next we will enter a description for our Crushmaster Article page. Make sure you have the Page Settings tab selected and that the Crushmaster page is selected in the left hand Web pages list, as shown below:

Page 50: Xsitepro Tutorial

Now, in the "Description" text-box (in the Page Settings screen) enter the following text:

Central Carpets has been trading since 1987 and is a proud employee of 16 staff across its three

stores. We have been involved in carpets for 36 years and play an active role in the Carpet Retailers'

Association.

Step 7 - Make sure that the Show on Left Navigation Menu check-box is checked.

Here's what your page settings should look like at this point:

Step 8 – Next, we need to enter some text in the Design window for our Articles web page (so make sure that page is

selected, in your Web pages list). Click on the "Design" tab for the Articles web page, as shown below:

Step 9 - Now we need to enter some page text. Once again, to make it easy for you, we have already entered created

some text for you to use. Start by going to the web link, below: http://www.xsitepro.com/article-page.html

Step 10 - Once that page has loaded in your Web browser, select the "Edit" menu, in your browser, as shown below:

Page 51: Xsitepro Tutorial

And then, from the "Edit" menu, shown above, choose the "Select All" option, as illustrated in the picture above.

Step 11 - With all the text now selected (highlighted in your browser window), select the "Edit" menu once again, and then choose the "Copy" option from the menu, as shown below:

Step 12 - Back at the Designer window, right-click inside the white page area with your mouse and then, from the menu

that appears, select "Paste" to paste the text you copied earlier, into this space. The right-click menu is shown below:

Page 52: Xsitepro Tutorial

Step 13 - Once you have pasted the text, the page design window should now look just like the illustration below:

Step 14 - Position your cursor immediately after the text you just pasted into Designer (i.e. after the text "...contact us at

the usual address.") and then press the Enter key, on your keyboard.

Step 15 - Right click with your mouse, at this cursor position, and from the context sensitive menu that appears select

"Insert Links To All Subpages", then select "Bulleted List", then select "With Descriptions".

Step 16 - When you click that menu-option, the Sub-page List Settings window will appear, as shown below:

Page 53: Xsitepro Tutorial

We're just going to accept the default list-text styles, so simply click the "OK" button, as shown below

This will insert a marker at the cursor saying BULLETED SUB-PAGE LINKS WITH DESCRIPTIONS, shown below:

Step 17 - Let's now see what effect this has on your Web page. Click the "Preview" button, bottom-left of your screen, as

shown below:

This will load your web page into your browser, and show you what it looks like, with this "Sub Page List" that you inserted a moment ago. Your page will resemble the one shown below:

Page 54: Xsitepro Tutorial

As you can see from the above screen-shot the articles pages themselves appear neatly under the main heading "Articles", on the left hand menu. In the main part of the body you will see links to the articles along with the brief descriptions you entered for each article on the Page Settings Tab. The great thing is that once you have set up the Central articles page in this way, you can continue adding articles whenever you like and the appropriate link, and descriptive text, will be added automatically into the main articles page list for you.

Creating a Privacy Policy Page A Privacy Policy page is essential on any site collecting information belonging to its visitors (even if this information is just an e-mail address). In this section we'll look at how we can quickly create a Privacy Policy page using the QuickPages tool.

Step 1 - In XSitePro, make sure you are looking at the Web Pages tab:

Step 2 - Click the "Other" button, shown below, and from the drop down list which appears, select QuickPage:

Step 3 - A window will load showing the list of different QuickPage templates. In the list of folders you need to expand the

folder named "Privacy Statement" to show the different QuickPage styles within it. – as shown below:

Page 55: Xsitepro Tutorial

Step 4 - From the list of available templates, in the Privacy Statement folder, choose "Classic". When selected you will see

a preview of the selected style in the preview panel, to the right of the list of templates. The screen should look like this:

Step 5 - Click the "Next" button, shown below, to proceed.

Step 6 - The next screen to appear requires that we fill out some basic information:

In the Page Title box, enter: Keeping your Information Safe

In the Last Updated box, enter: 30th March 2010

Step 7 - Now we have completed the data entry. Click the "Next" button, shown below to proceed.

Step 8 - We don't wish to make any further changes to this Privacy Policy Page, so simply click the "Create Page" button to complete the QuickPage wizard and generate your page. The illustration below shows this "Create Page" button:

Note: Now that your Privacy Policy Web page has been created, you can edit it as you would any other page in your site.

Page 56: Xsitepro Tutorial

Lesson 5 - Site Maps and Links Pages What you will be doing In this lesson you will be learning the following: 1. Activating your Site Map and changing Site Map settings 2. Previewing your Site Map Approximate time to complete: 5 minutes

Site Maps In earlier lessons you created a number of web pages:

Home Page Articles page, with two article sub-pages Privacy Policy While you were busy creating the pages above, XSitePro was working in the background creating a number of other pages automatically. Some of these pages relate to the site map, which we'll be looking at right now.

Step 1 - Click on the Other Tab (circled in the screenshot below) and then click on the "Site Maps" button (which has a box

around it, in the screen-shot below).

Step 2 - The screen which then loads will look similar to the screenshot overleaf.

Page 57: Xsitepro Tutorial

Step 3 - By default the screen will show the top Site Map format ("Style 1: Alphabetical") selected - that means that by

default your site map will be in Alphabetical order. We will leave this setting as it is in this example. If any of the other check-boxes are checked, un-check them.

Step 4 - At the top of this window you will see a second tab, called 'Step 2: Style'. Click this tab now, to load the style

settings.

Step 5 - The screen should now resemble the one shown below:

Page 58: Xsitepro Tutorial

Step 6 - In this tabbed screen, the only change we will make is to change the Title Text to the words "Central Carpets

Site Map" as shown below:

Step 7 - There are many other settings we could adjust for our site map, but to keep things simple we're going to leave it at that for now. Simply click the "OK" button, shown below, to complete your Site Map settings and to close the window.

Great! You have now added a Site Map to your Web site. If you look at your Web pages list, in the Web

pages tab (as shown below) you will see the Site map is actually listed.

Previewing your Site Map With our Site Map now created we can now preview it very easily.

Page 59: Xsitepro Tutorial

Step 1 - Select the Web Pages tab in XSitePro and, in the list of Web Pages, left-of-screen, you will see a new page called

"Site Map", shown in the below screenshot:

Step 2 - To preview this Site Map, select the Site Map page in the Web Pages list and click the "Preview" button in the

bottom left corner of your screen, as shown below:

Step 3 - This will load your web page at the newly-created Site Map, showing the pages featured on your site, neatly listed.

Your page will resemble the following screen shot:

Page 60: Xsitepro Tutorial

Lesson 6 - Enhancing your Site - Graphical Menus What you will be doing In this lesson you will be learning the following: 1. Making sure your pages are all showing on the right menus. 2. Creating a Graphical Menu. 3. Working with your Horizontal Menu. Approximate time to complete: 10 minutes

Making Sure Your Pages Are Showing on Menus XSitePro features a powerful menu designer which allows you to create complex graphical menus in just a few minutes. We will apply one of the menu designs to our site structure in this lesson.

Step 1 - Select the Web Pages Tab as shown below:

Step 2 - In the left side of your screen, select the "Home" page, within your Web pages list, as shown below:

Page 61: Xsitepro Tutorial

Step 3 - With the "Home" page selected, look at the Page Settings screen, shown below:

Step 4 - In the Page Settings screen, you will see check-boxes, on the right side of the screen. These check-boxes

determine whether or not the selected page appears in the different "navigation menus" featured on your current site. Make sure that the top two check-boxes are checked. This will make sure that these pages are shown on the navigation menus for our site. The check-boxes should look like the illustration below:

Step 5 - That's great - the "Home" page will now show on both menus we have featured on our Web site. Now we need to

make sure the other pages are set to appear too. So, first, select the next page in your Web pages list, as shown below:

Step 6 - With this next page selected, again make sure that the two menu check-boxes are checked (in the Page Settings screen) as shown below:

Page 62: Xsitepro Tutorial

Step 7 - Repeat the process described above (making sure the menu check-boxes are both checked) for the other Article

pages and the Site Map, in your Web pages list. Click on each page then, in the Page Settings screen, make sure the two menu check-boxes are checked before moving onto the next page in the Web pages list.

The reason we have just done this, is so that these three pages also appear on our menus, which we will be editing in the next part of this tutorial.

Creating Graphical Menus XSitePro features a powerful menu designer which allows you to create complex graphical menus in just a few minutes. We will apply one of the menu designs to our site structure in this lesson.

Step 1 - Select the Page Layout Tab. Once selected, the Preview panel will resemble the image shown below:

Page 63: Xsitepro Tutorial

Step 2 - As you can see from the illustration above, the pages of your Web site are currently shown on both the "Left

Navigation" menu and the "Info Bar" menu. Note: normally you wouldn't duplicate pages across both menus, but for demonstration purposes this is fine. To get started, we're going to create a Graphical Menu for our Left Panel, following the steps below.

Step 3 - In the left side of your screen, expand the settings for the Left Panel by clicking the down-arrow button: button next to the Left Panel label. When expanded, the Left Panel section will look like the following illustration:

Page 64: Xsitepro Tutorial

Step 4 - Within these settings, you need to click the "Menu Settings" button, shown below:

Step 5 - When you click the "Menu Settings" button, as described above, the Navigation Menu System screen loads,

shown below.

Step 6 - Scroll down the list of Menu Styles, on the left side of the screen, until you see the style called "Royal". Select the

style by clicking once on the name, in the list. The screen should now look like the below illustration:

Page 65: Xsitepro Tutorial

Step 7 - Click the "Next" button, shown below, to proceed to the next step.

Step 8 - You should now be looking at the customization options for this choice of menu style, as shown below:

Step 9 - We will be making only a few small changes to the menu settings, so that the menu fits the overall look-and-feel

of our site design. We will start by setting the menu background color to DarkSlateGray. To do this, first click the Color browse button, next to the "Menu Background Color" setting, as shown below:

Page 66: Xsitepro Tutorial

Step 10 - The Color Palette window will now appear, as shown below:

Make sure that the "Web" tab (in the color selection window) is selected, and then scroll down the list of colors until you see the color called "DarkSlateGray". Click this color once, to select it, and then click the "OK" button, shown below:

The background color box will update, and so will the 'Preview' of your menu (right-of screen) to reflect the new color you have specified. The window will now resemble the illustration below:

Step 11 - Now scroll down until you see the box for the Sub Menu Background Color, shown below:

Page 67: Xsitepro Tutorial

We're going to repeat the exact same process as we carried out a moment ago, changing the color to "DarkSlateGray". Let's run through the steps again:

Step 12 - To start, click the Color browse button, next to the "Menu Background Color" setting, as shown below:

Step 13 - The Color Palette window will now appear, as shown below:

Page 68: Xsitepro Tutorial

Make sure that the "Web" tab (in the color selection window) is selected, and then scroll down the list of colors until you see the color called "DarkSlateGray". Click this color once, to select it, and then click the "OK" button, shown below:

The background color box will update, to reflect the new color you have specified. The window will now resemble the illustration below:

Step 14 - The last change we'll make is to the "Menu Separator" color, situated just below the color setting we just

updated. The illustration below shows where it is:

Step 15 - This time, just to make things even quicker, we're just going to type the word "DarkSlateGray" into the "Sub

Menu Separator Color" text box, in place of the existing text ("#758CC9"). When you've done that, hit enter (on your keyboard), and the screen will update to look like the illustration below:

Page 69: Xsitepro Tutorial

Step 16 - We're done making changes to our menu design now, so go ahead and click the "Next" button (shown below) in

the bottom-right corner of the window.

Step 17 - And finally, on the screen that follows, simply click the "Finish" button (shown below) to complete the menu

settings changes, and return to the Page Layout tab in XSitePro.

That's it... now, all your new pages will adopt this great looking graphical menu style, making your site look incredibly

professional, yet without any complicated design work involved on your part. Your Page Layout preview will now look just like the illustration overleaf:

Page 70: Xsitepro Tutorial

Working with Horizontal Menus Just as with our Left Navigation menu, if we wanted we could add a professional-looking graphical menu into our Info Bar, too. But to keep things simple, we're just going to make a quick change to our existing (text-style) links menu. We are going to center the links in our page design, following the steps below.

Step 1 - Make sure you are still in the Page Layout Tab as shown below:

Page 71: Xsitepro Tutorial

Step 2 In the left side of your screen, expand the settings for the Info Bar by clicking the down-arrow button: next to the Info Bar label. When expanded, the Info Bar section will look like the following screen-shot:

Step 3 - Within the settings for your Info Bar, click the "Designer" button. It's right at the bottom of the Info Bar settings, as

shown below:

Step 4 - When you click the "Designer" button, as shown above, the WYSIWYG Designer window will appear, ready for

us to edit the Info Bar panel, as a discrete part of our Page Layout design. The WYSIWYG Designer window will look like the below screen shot:

Page 72: Xsitepro Tutorial

Step 5 - All you need to do now is click the "Center" button in the tool-bar. That's it! The illustration below shows where this

button is:

Step 8 - Having finished our changes, click the "OK" button, in the bottom-right corner of this window, as shown below:

Step 9 - You'll now be back at the Page Layout screen, in XSitePro. You'll see from the Preview area that your Info Bar

menu is now neatly centered, which looks a lot better. The screen should resemble the illustration below:

Page 73: Xsitepro Tutorial

And that's all you need to do for your horizontal menu. Now, any pages that you specify you want to appear on the Info Bar menu will appear in this horizontal menu.

Page 74: Xsitepro Tutorial

Lesson 7 - Simple Site SEO What you will be doing In this lesson you will be learning the following: 1. Identifying SEO tasks needing carrying out on your site. 2. Printing your site To-Do list. 3. Where to find more advanced SEO and Page Analysis tools in XSitePro Approximate time to complete: 5 minutes

Using the To Do report to identify tasks When creating a web site it is very easy to forget to do some things which may well have a detrimental effect on the search-engine-friendliness of your site's pages. At some stage you'll need to check that you haven't overlooked some really obvious page elements. The great news here is that XSitePro makes it simple to find out what needs to be done and can even produce a checklist with check-boxes that you can print out and work your way through. In this section we'll use the site "To-Do" list to give us a snapshot view of what tasks need carrying out on our current site.

Step 1 - Within XSitePro, click on 'Reports' on the menu bar and then select 'Site To Do List', as shown below:

Step 2 - After a few moments the Site To Do Report will appear on your screen, as shown below:

Page 75: Xsitepro Tutorial

Step 3 - From the report details you can see exactly what needs to be done on this web site, to improve the general

performance of the site, and you can also see which tasks are 'critical'. Let's now test out exactly how this report can help us. To start, scroll down the report detail until you see the heading "Part 3: Page Breakdown", as shown below:

Step 4 - As you can see in the screen-shot above, there is a critical task that needs carrying out for our central articles page: It needs a description. So, we need to enter one! To get started doing this, close the report window by clicking on the "Close" button as shown below:

Step 5 - With the report window now closed, head over to the Web Pages tab, in XSitePro, as shown below.

Step 6 - Select the Page called "Articles" in your Web pages list, left of this screen. The illustration below shows this page

selected, in the list:

Page 76: Xsitepro Tutorial

Step 7 - If you look at the Page Settings screen over on the right, you will notice that there is no description entered, just

like the report told us. The screen will resemble the image below:

Step 8 - In the Description text-box, shown above, enter the following text:

This section of the Central Carpets site is where you can find and read informative

articles and features - all about how to look after your flooring, and how to avoid common

care mistakes.

The screen will look like the illustration below, when you're done:

Page 77: Xsitepro Tutorial

Step 9 - So now we've corrected this glaring omission, we will head back to our report, and see whether it's been checked

off the list for us. Repeat the process of loading the report, starting by clicking on 'Reports' on the menu bar and then select 'Site To Do List', as shown below:

Step 10 - When the report loads again, scroll back down to the section headed "Part 3: Page Breakdown", as shown

below:

Page 78: Xsitepro Tutorial

As you can see, you have no further 'Critical' tasks needing carrying out on the "Articles" page - very reassuring to know.

Step 11 - One final thing you need to try, before closing this report, is how to print out your report so you can work through the critical tasks without having to continually reload the report. Printing the report is simple - just click the "Print" button, shown below, to print it.

A quick look at the more advanced SEO tools in XSitePro: Although, in the steps you have just completed above, you have established some basic SEO tasks needing carrying out on your site's pages, there is another much more powerful SEO tool within XSitePro. The "Page Analysis" tab, within the Web Pages screen (shown below) contains a number of tools that will help you optimize your pages. The Page Analysis tool:

1. Analyzes your page content against a build-in set of optimization rules/criteria 2. Analyzes the make-up of your site across the different content-types 3. Assesses the "readability" of your page content using the Flesch Kincaid scoring system 4. Reviews your page content against Accessibility criteria

You can see, from the illustration below, what the Page Analysis tool looks like:

We won't be making use of this tool in this tutorial, but if you'd like to experiment with what it can do, then please refer to page 416 of the Tools Manual, or the online help for XSitePro: http://www.xsitepro.com/help/page_analysis.htm

Page 79: Xsitepro Tutorial

Lesson 8 - Publishing Tab What you will be doing

To give you a complete insight into how XSitePro works we have provided all XSitePro users with access to some free web space with full FTP access. If you follow the steps below you will soon be uploading the work you have done to some real Web space, on a real Web server, at XSitePro. In this lesson you will be learning the following: 1. What information is necessary to publish to the Internet 2. How to enter the essential publishing information 3. How to publish your tutorial site to the web Approximate time to complete: 5 minutes

Filling in the Publishing Details tab Step 1 - Click on the Publishing Details tab, in XSitePro, as shown below:

Step 2 - We now need to enter our FTP Details, into the boxes provided.

Note: FTP details like the ones we will be using below, are supplied to you by your Web Host (or ISP) from whom you purchase a Web Hosting account. You may already have a web hosting account, or perhaps you haven't - either way, once you do buy a web hosting account you'll be provided with the exact same sort of information as we'll use in a moment. Fill out the details as listed, below. The text-box name is on the left of the below list, and the value to enter in that box is on the right: Domain Name: www.xsitetest.com

Home Directory: /yourownname/

FTP Server: ftp.xsitetest.com

FTP Directory: /yourownname/

FTP Username: testusername

FTP Password: testpassword

Enter the details exactly as they appear in the above list, except for the "/yourownname/" value which you should adapt to include your own name, e.g. /petersmith/

Page 80: Xsitepro Tutorial

Once entered, the screen will resemble the one shown below:

You are now ready to publish your site. Note that these settings need only ever be entered once. XSitePro will now store these details within this web site, to make publishing as easy as clicking a button.

Publishing to the web Step 1 - Click on the "Publish" button on the main toolbar, shown below:

Page 81: Xsitepro Tutorial

Step 2 - A small window will appear asking you if you want to publish or not. Click on the "Yes" button to publish, as shown

below:

Step 3 - The Publishing Progress window will open and start to display the status of your uploading.

Step 4 - When all the files have finished uploading you will hear a sound, notifying you of completion. Assuming you have

followed these instructions carefully, and you have a working Internet connection, your site will have published successfully. If your site published successfully you may now view your live Web site. To do this, simply click the "Open Web site" button:

Congratulations! You have just published your first XSitePro web site.

Your example web site should look similar to the screen-shot on the following page.

Page 82: Xsitepro Tutorial
Page 83: Xsitepro Tutorial

And Finally… Other Features This tutorial was designed to give you some hands-on experience of using this powerful software. Hopefully you have created the example site and published it to the test Web space on the Internet. If you followed the instructions along the way you should now be much more confident about creating Web sites using XSitePro. You will have experienced for yourself how the software assists you in creating professional quality web sites. XSitePro has been designed to cope with almost any kind of web site. Whether you want a small mini-site consisting of just half a dozen pages or a large content rich site consisting of tens of thousands of pages XSitePro is more than capable of the task. The example site you have just built has demonstrated just a tiny portion of the software's feature-set - there are hundreds of other features that have not been discussed at all, so as to keep this tutorial focused on some basic points. The best way to learn about these additional features is through practice and by reading the manual that comes with the software. You may want to keep the example site you have just created on your computer so that if you ever want to test out a feature you can return to the Central Carpets site in XSitePro and experiment. That way you won't run into any problems with your live projects.

Help & Support We want you to get the very most from the XSitePro software. We've designed it to be as easy and intuitive as possible, but we realize that there will be features within the software that you may want help with. If you need any help at all please follow the steps below, in order to make sure you find the answers to your questions as quickly as possible.

Step 1 - Check the XSitePro Tools manual that accompanies your copy of XSitePro. You can find this manual from the "Help" menu, as shown below:

Step 2 - If you check through that manual, and still cannot find the answer to your question, try our context-sensitive help system - XSitePro comes with an extensive context-sensitive help system built right in to the application. If you press "F1" on your keyboard at any time or click on any of the help buttons you will, in almost all situations, be taken directly to an appropriate help screen. If that doesn't answer all your problems you can even search the help system, as it's thoroughly indexed on hundreds of keywords, so you will usually be able to find help on whatever you are looking for. For example, the illustration below shows a contextual help window that appears when you press "F1" while you are looking at the Publishing Details tab:

Page 84: Xsitepro Tutorial

Step 3 - If neither of the above methods answers your questions, then please visit our comprehensive Knowledgebase,

which is packed full of answers to most of the questions we've been asked before. It's highly likely that you'll find the answer to your question in the hundreds of suggestions in this searchable knowledge resource. To jump to the Knowledgebase, go to: http://xsitepro.helpserve.com/index.php?_m=knowledgebase&_a=view The knowledgebase will then appear, as shown in the illustration below:

Step 4 - And if you still cannot find the answer to your question, if all else fails, then please do submit your support ticket to

us via our support ticket system. You can access the support ticket system via the URL overleaf:

Page 85: Xsitepro Tutorial

http://xsitepro.helpserve.com The support ticket system is really your point of last support - we're very happy to help you get the most out of XSitePro but since we don't make any charge for this ongoing support we respectfully ask that you take a moment or two to try and find the answer in the comprehensive resources we've made available, before submitting a ticket to our staff - thank you. Following the support link, shown above, will load a screen in your browser resembling the one shown below:

And don't forget our wonderful XSitePro Forum! Our growing community of users are a constant surprise when it comes to the extents they will go in helping new users. Feel free to drop by the forum at http://www.xsitepro.com/messageboard and pick up plenty of answers to your questions.


Recommended