More Tips for XSite Pro Users (XSite Pro V. 1)
- Tutorial for making rounded corners on photos and other images in Photoshop.
- How can I create a more modern looking navigation menu instead of the standard XSitePro
one?
- Should I "publish locally," "back up" or "export" my Web sites in XSite Pro? What's the difference?
- How do I recover if I have written over my good Web pages with a bad or corrupt file?
- Where are my images saved when I use Other > File Manager to import
them into XSite Pro?
- How can I spice up my opt-in form without hiring a programmer?
- Do empty alt tags affect my Search Engine ranking?
- How do I add Flash to my XSite Pro Web site?
- How do I get text to flow around my images?
- How do I create a form in XSite Pro?
- How can I link multiple templates' navigation in XSite Pro?
- How can I line up images in the left, right and main panels of XSitePro so they fit together without a gap?
- Can I have different headers on different pages in XSite Pro?
- How do I add a blog to my XSite Pro Web site?
- How can I get more click-throughs from parent pages to article and product sub-pages?
- How do I create sub-pages in XSite Pro?
- How can I delete all the sub-pages under a parent page?
- How can I change the hierarchy of parent and sub-pages in XSite Pro?
- How can I make a link open in a popup window in XSite Pro?
- How can I add my own bullet images to a list?
- How can I add a link to my Home page from my header image?
30 More XSite Pro Tips and Tricks!
Discover How to Use Borders, Separators
and Dividers to make your site look classy and professional. Increase the "trust factor" on your XSitePro Web site!
Find out more here...
- Tutorial for making rounded corners on photos and other images in Photoshop.
Nice, easy-to-understand tutorial that I found online. Click here to go to the Web page.
- How can I create a more modern looking navigation menu instead of the standard XSitePro one?
Go to Other > Navigation Bar and turn off Bold. Right away your navigation will look less XSP-ish.
Then you can change the default colours for Normal and Visited to the Web standard colours: blue and purple. Change the Hover to a colour
that complements your site but isn't too close to blue/purple. Try orange or green.
Check the Underline box so your links are underlined.
Now your links will attract more clicks as they look like normal links.
Change the font to Georgia for another way to disguise the XSite Pro footprint.
More modern navigation can be accomplished with CSS. You can create a mouse-over colour change of the text or the background colour of the
link. We have an example of that here. Mouse over the links to see it.
Finally, for an even more modern look you can disguise the default navigation with a graphic. There's usually some "layering" involved
with this, meaning you might have different background graphics in the panel, table and table cell. What you will require is a background
graphic that "expands" as you add more links. We have an example of that here. Even if I add another link to this navigation bar, the effect is maintained. I explain how to
do this on that page.
Tips on changing link colours.
There's another way to modernize your navigation and that's to put the token <<LINKS_MENU>> into a table and put a dotted line
around the table. This is accomplished using CSS, e.g., .border {border: dashed 2px red;}. Then add the class "border" to the table:
<table class="border" cellpadding="5" cellspacing="0">
<tr>
<td>
<<LINKS_MENU>>
</td>
</tr>
</table>
Another way you can make your navigation look more modern is to use bullets. You do this by going to Other > Navigation Links > Bullets
> Main. Choose the type of bullet you want from the drop down list.
You can see an example of these two methods combined here. Note: These menus do not use the XSite Pro token because this client wanted two tables and you can't do that
with the default XSite Pro navigation. So, your navigation links would all be in one dashed box, not two.
Another idea: If you want to put dividers between navigation links, put a horizontal rule <hr> in the Category name field instead of
text. You can make a thinner rule like this: <hr size="1">. Also in Internet Explorer, you can change the colour of the rule: <hr
size="1" color="0000ff">. Other browsers just show the default grey. I would use some CSS to try to reduce some of the space above/below
the horizontal rule, but there's a limit to what you can do with that.
-
Should I "publish locally," "back up" or "export" my Web sites in XSite Pro? What's the difference?
A customer phoned me today and asked how he could restore 600 pages of articles he had accidentally overwritten in XSite
Pro. He had published them locally to his hard drive and accidentally imported them into XSite Pro. All the articles in his Web site now
had 2 headers, 2 footers, etc. It was a mess. Unfortunately since he had not BACKED up and not EXPORTED his files at any time, there was
no way to recover from this, except to manually remove the extra HTML from every page. Even search and replace wouldn't work, because, in
the head section, the page title and keywords were different on every page.
I asked him if the articles were stored in a folder somewhere. But no, he had composed them directly in XSite Pro, all except a very few
that he had acquired from article directories. So, he couldn't use the Import Pages function to recreate the articles. It was going to
take him between 10 and 20 HOURS to fix his pages!
So, here's what you need to know:
- When you PUBLISH your pages to your hard drive, you cannot import them back into XSP.
- When you do a BACKUP, it backs up ALL the Projects and Web sites that you created in XSP. You can restore the backup, if you need
to, but EVERYTHING will be restored to the way it was at the time of the backup. If you need to do this to recover ONE Web site, this
would overwrite all your other Web sites, including any that you might have worked on since the backup. So, before you restore a
backup to recover one damaged Web site, EXPORT all your other Web sites FIRST so you can IMPORT them after the restore.
- When you EXPORT, you save ONE site at a time in a format that can be imported back into XSite Pro. You can also share the
exported file with a colleague who has XSite Pro or send it to a Web designer who has XSite Pro, etc.
Now, here's what I want you to do:
- Go immediately into XSite Pro and do a BACKUP of all your sites (a Backup automatically backs up everything in XSite Pro). Save a
copy on your hard drive and on CD. Having a backup only on your hard drive won't be much use if your hard drive crashes and your data
is not recoverable!
- Before doing any major work on a site, EXPORT it and save a copy on your hard drive and/or on CD (preferably both).
- Promise me you will BACK UP regularly and always EXPORT your sites before you do any major work on them!
- Sleep easy tonight!
- How do I recover if I have written over my good Web pages with a bad or corrupt file?
Very rarely your HTML editor (yes, even XSite Pro!) might corrupt one or more of your Web pages. If you accidentally upload
a corrupted page and write over your online copy, immediately check Google to see if your recent pages are still cached. If so, copy the
text. At least you won't have to re-write your sales letter or other important content. Now, if you follow my tip to back up
regularly, this won't ever happen to you, but Google's cache saved a client's neck recently so I thought I'd share this tip with
you.
- Where are my images saved when I use Other > File Manager to import them into XSite Pro?
Browse to Programs > XSite Pro > Sites on your computer. Each of your XSite Pro Projects is stored in a numbered folder.
Each Web site within that Project is also stored in its own numbered folder. If you open the Web site folder, you will see all of your HTML
files (Web pages), CSS file(s), image files, etc. If you have already published your Web site to the 'Net, you will also have a copy of your
images on the server provided by the hosting service you purchased. Tip: To be on the safe side, I personally also keep all
my images (including images I didn't end up using for that site) in another folder on my computer labelled with the actual Web site name and
the XSite Pro folder number, e.g., XSite Pro Designs - 110, as I have dozens of Projects and Web sites in XSite Pro. And don't forget to back
up your XSite Pro Projects regularly. See my tip on backing up!
- How can I spice up my opt-in form without hiring a programmer?
Thank you to Karen for posting this question in our forum. Here's my answer...
The first thing to do is to make sure you copy the HTML, not the JavaScript, version of your opt-in form code in Aweber. That way, you will
have full control over the form in XSite Pro.
I would start by learning a little about Cascading Style Sheeets (CSS). With CSS, you can put a fancier (and nicer) border around the opt-in
box than you can with HTML. You can colour the top and bottom one colour and the sides another colour, for example. You can make the sides
different widths. Say, top and bottom 2 pixels, right and left sides 1 pixel. Things like that.
Then you can actually affect the gray Submit button itself by using CSS to change the background colour, font type (Verdana, Georgia, etc.),
font colour, etc.
Examples
You can also change the text on the button so it doesn't say "Submit," but says something like, "Sign me up!" You can make the text bold, all
caps, etc. to add variety.
So, you can actually make a very stylish form using only CSS and a little creativity and practice.
But before embarking on this new adventure, there's something to be said for presenting a form that people recognize as a form, with a button
that is recognizable as "clickable." So you would have to test which worked best (got the most sign-ups), a fancy form or the plain old
boring one that was easily recognizable by your visitors. In most cases, design should stay in the background and take second place to
content and "clickability."
- Do empty alt tags affect my Search Engine ranking?
As far as I know, there's no penalty for having nothing in an alt tag, as far as the search engines go, but having relevant
keywords in the alt tags will help boost your ranking.
Alt (alternate) tags were originally used so the blind and people browsing with images turned off (in the days of slow dial-up connections)
could read the site. The blind use special readers that just read text on a Web page. So, for this reason alone, any image that is
consequential should have an alt tag. But some images don't require alt tags, like spacers, etc. Alt tags are also helpful if an image is
broken so at least there's a description of what should be there.
The Alt tag flag in the SEO tab will stay red until all images on that page contain alt tags. If there's one image without an alt tag, that
flag will be red. It's just telling you how many alt tags you have compared to the number of images. If some of your images don't warrant alt
tags, this flag will always stay red, because the number of alt tags and the number of images will never match.
Images 5 Alt Tags 0
Images 5 Alt Tags 1
Images 5
Alt Tags 2
Images 5 Alt Tags 3
Images 5 Alt Tags 4
Images
5 Alt Tags 5 (now the two numbers match, so XSitePro is happy!)
By the way, you can edit the alt tag for your header in Page Layout > Header Panel > Alt Text. Or, in the Design view if your header is
there instead of in Background.
-
How do I add Flash to my XSite Pro Web site?
You will receive some code from whomever created the Flash for you.
A. Put that code into your header or side panels in XSP wherever you want the Flash to show up. Check the size of the Flash image to make
sure it will fit wherever you plan to put it.
Your code will look something like the code below. Note: you can see the width and height in the code, as well as the
fact that this file is going to be uploaded to the root directory. If it were going in a subdirectory, the path would be something like
src="flashfolder/myfile.swf".
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/
pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
width="140" height="52" id="myid" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="myfile.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="myfile.swf" quality="high" bgcolor="#ffffff"
width="140" height="52" name="myfile" align="middle"
allowScriptAccess="sameDomain" type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer" />
<embed src="myfile.swf" width="140" height="52" autoplay="false"
controller="true" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</embed>
</object>
Note: To add Flash to your header, you will need to use the Design view under Page Layout > Header Panel. Put
the code in a table cell. Just make sure your panels (left/main/right) add up to the same width as your header.
B. Now upload your actual Flash file (it will probably end in .swf) to your server using a separate FTP program instead of using XSite
Pro's File Manager, if you prefer. This will cut down on upload times in XSite Pro. Make sure you put the file in the root directory or
you will need to change the code you received to reflect the path to the file. If you use File Manager to upload your file, XSite Pro
will automatically place it in the root directory.
A lot of good information on adding video to your Web site here.
-
How do I get text to flow around my images?
To get text to wrap or flow around an image, put the image in a table, and then left or right justify the table. You may want to add a
cell (column) to the table that adds some white space between the image and the text. If you do that, add a non-breaking space
( ) to the empty cell so it doesn't collapse in some browsers.
You can use <BR CLEAR="all"> after the text that belongs to the image, if you want the next line of text to start below, instead of
beside the image.
The trickier way to wrap text is to use Cascading Style Sheets (CSS). This requires use of the "float" attribute. Be prepared to
experiment quite a bit if you decide to use CSS to flow text around your images. While the effects can be very modern and stylish, this
comes at a price: time, effort and the willingness to accept that not all browsers will display your page the same way.
-
How do I create a form in Xsite Pro?
Unfortunately, Xsite Pro doesn't have a form creation wizard... at least not yet. If you belong to an autoresponder service like AWeber,
they will provide you with the HTML code to paste into your XSite Pro Web page (in the Source tab). Make sure you copy the HTML, not the
JavaScript version. Then you can tweak the HTML in XSite Pro. You can change the input field size, change the look of the table, add
text, add a link to your privacy policy, etc.
If you want to create a contact form to collect comments or gather information from a prospect or client, you will need to
know how forms work to be able to add them. FormMail is a method to send email from a contact-type form. A very popular and secure method
to do this is using Matt's FormMail script. (Following the Readme instructions, you should be able to get a working version of
FormMail up relatively easily.)
The FormMail script needs to be installed on the server, so you will need to check with your hosting service to see where you
should install it (Note: they may already have it installed, so ask first!), or, if they use a different script for this purpose,
you will need to know the path to where it is installed and the syntax it uses. (Tip: Here's a way to use FormMail without it being installed on your server.)
Now you will need to create the form on your Web page. It consists of three parts: the formmail code, the input fields (e.g., name, email
address, etc.) and the submit button. It will look something like this:
<form action="/cgi-sys/FormMail.pl" method="post"> [The path to the FormMail script on the server]
<input type="hidden" name="recipient" value="myname@mywebsite.com"> [The email you want the information sent to]
<input type="hidden" name="subject" value="Contact Form"> [The Subject line of the email]
<input type="hidden" name="redirect" value="http://www.mywebsite.com/thank-you.htm"> [The thank you page you want the person
directed to after submitting the form]
[The table neatly aligns the input fields, labels and submit button]
<table>
<tr>
<td colspan="3">Contact Form</td>
</tr>
<tr>
<td>First Name:</td>
<td> </td>
<td><input name="Name" type="text" id="Name" size="20"></td>
</tr>
<tr>
<td>Email:</td>
<td> </td>
<td><input name="Email" type="text" id="Email" size="20"></td>
</tr>
<tr>
<td>Comments:</td>
<td> </td>
<td><textarea name="Comments" cols="25" rows="4" id="Comments"></textarea></td>
</tr>
<tr>
<td><input name="Submit" type="submit" id="Submit" value="Submit"></td>
<td> </td>
<td> </td>
</tr>
</table>
</form>
If you find all this intimidating, you might want to try an online form building service. You create the form online using an easy interface, then you can
copy the HTML to paste into your XSite Pro Web page. JotForm has a free version that is more than enough for the average user!
Update: Here are two more contact form generators that are recommended by folks on the XSite Pro
forum: http://www.mycontactform.com/ and www.bestwebforms.com.
-
How Can I Link Multiple Templates' Navigation in XSite Pro?
If you have a project in XSite Pro that contains two or more templates (same Web site, but using different templates for different
directories, sections or other purposes), XSite Pro can update links to files in all templates automatically.
Example: If your About Us page is on Template #1, and you want to link to this page from Template #2, go to Web Pages > Add >
External Link. On the Info tab, choose "Link to." Then click on the folder icon, choose "Pages," right click and choose "Another
page in XSite Pro." Then select the About Us page in Template #1. The URL will now be greyed out. Do not type the URL manually in the
"Link to" field, as this will create a link, but XSite Pro will NOT automatically update the links.
Now, when you save Template #1, if the file name of the About Us page has changed, XSite Pro will automatically update the link to that
page in Template #2. Note: It only performs this operation when a file name changes.
NEW! In Version 1.60 of XSite Pro, you will get a message that allows you to say "No" to this operation if you have no
interlocking sites that need updating. This saves processing time.
- How can I line up images in the left, right and main panels of XSitePro so they fit together without a
gap?
To get an image in the Main Panel to line up flush with images in the right and left panels, you need to add this CSS to Other > Scripts
(top section). It enables you to set the cellspacing and cellpadding on the CENTER PANEL to zero, which is what is causing the 1 pixel
"gutter" around content/images in the main panel. It doesn't work in Internet Explorer prior to IE 5, but that will affect only a very, very
small number of your visitors.
<style type="text/css">
TABLE.XSP_CENTER_PANEL {border-collapse: collapse; }
</style>
CSS to the rescue! This means that you can actually eliminate the header panel and create pseudo-headers on each page that are different.
Until V. 2.0, and hopefully the ability to have different headers/templates on different pages, this is a workaround.
- Can I have different headers on different pages in XSite Pro?
With the above workaround, the answer is yes! Don't put anything in the header panel, or put a narrow generic header in
there that will blend with images that you put in the right/left and main panels. In each main panel, you can change the image and have a
unique "header" on different pages. I did a sample awhile back, but had to incorporate the 1px gutter from the CENTER PANEL into the design. I don't have to do
that anymore... and I will create a new sample design without any gutter! Yay!
-
How do I add a blog to my XSite Pro Web site?
Check with your hosting service. If they offer Fantastico, it usually comes with Word Press and it's
a one-click installation. It may require that you manually set up a MySQL database, but that's pretty straightforward. The
instructions are here (scroll down to "Using cPanel").
Once your blog is set up, just create an external link to it in XSitePro.
-
How can I get more click-throughs from parent pages to article and product sub-pages?
On parent pages in XSite Pro, the default link colour for the links to sub-pages is black. So, you will see a bulleted
or numbered list with a black underlined title. The title is a link to a sub-page with an article or detailed product information,
but because the link is not blue, visitors to your site might not realize that it's a link. On the Internet, blue, underlined
text = hyperlink and signals a "click here" compulsion in visitors' minds. You want to foster this compulsion as much as
possible. Here's how...
In Page Layout > Main Panel, change the font colour to "Blue" from the dropdown list. This step will change ALL text on your pages
to blue. To fix this, go to Other > Scripts > top section. Add the following CSS:
<style>
td, p, ol, ul, li {color: black;}
</style>
This will change the font colour for all text inside a <td>, <p>, <ol>, <ul> or <li> tag to black. This
does not affect the links, they remain blue! So we now have a workaround to the black link problem!
To see this tip in action, go to my main tips page where you will see the list of sub-pages with
blue links!
Hint: If you see any of the text on your pages showing blue when it should be black, simply wrap the text in a
<p> tag.
If for any reason using the <p> tag is not possible due to the formatting of your page, wrap the text in a <span> tag
instead and create a class called .color. Your CSS would look like this:
<style>
td, p, ol, ul, li {color: black;}
.color {color: black;}
</style>
Your text would look like this:
<span class="color">This is where your text would go.</span>
So now you can make your parent pages in XSite Pro attract more click-throughs to your articles and product sub-pages.
-
How do I create sub-pages in XSite Pro?
In the list of pages in your Web site, right click on the name of the parent page you want to add sub-pages under. A
menu will come up. Choose Add Sub-Page > Blank (for a regular page). You can create unlimited nested sub-pages this way (meaning
that a sub-page can be a parent page for sub-pages under it and so on and so on). IMPORTANT: All
sub-pages are shown at the same level on the navigation menu (i.e., all sub-pages under a particular parent page show as
sub-pages of that parent page no matter where they are in the hierarchy). However, if you right click in the Design view and choose
"Insert Links To All Sub-pages" on any page that has sub-pages under it, this will create a list of only that page's
sub-pages.
Nested sub-pages are shown below...
-
How can I delete all the sub-pages under a parent page?
You can delete all the sub-pages under a parent page as shown below. Right click on the parent page and a menu will come up. Choose
Sub-Page Settings > Delete All Subpages.
-
How can I change the hierarchy of parent and sub-pages in XSite Pro?
To change the hierarchy of pages, select the page you want to move and use the right/left arrows to place the page in the correct
hierarchical position. The right arrow moves the page to a lower position in the hierarchy; the left arrow moves the page to a higher
position in the hierarchy. Arrows are available or grayed out according to the position of the page you have selected.
Note: Pages located under a Category Heading or External Link will have grayed out right/left arrows. Move these
pages out from under the Category Heading or External Link using the up/down arrows. The right/left arrows will become available
again.
-
How can I make a link open in a popup window in XSite Pro?
In XSite Pro, highlight the text you want to link, for example a link to your contact information, product description,
privacy policy or a term you want to define, etc. Then right click and choose Script Wizard > Link that opens in a popup
window.
-
How can I add my own bullet images to a list?
The default CSS for bullets can be overridden by setting new properties for the <UL> HTML tag in Other > Scripts. Here are
two options for adding your own bullet images to lists.
1. The followng affects all unordered lists in your template.
<style type="text/css">
ul {list-style-image: url(mybullet.jpg)}
</style>
2. The following is a class that must be applied to the <ul> HTML tag each time you want to use it:
<style type="text/css">
.mybullets {list-style-image: url(mybullet.jpg)}
</style>
You apply it in the HTML (Source tab) like this:
<ul class="mybullets">
<li>Red</li>
<li>Blue></li>
<li>Green></li>
</ul>
As for alignment, I tend to build that right into the bullet image itself. Here is a closeup of the bullet I used in the template
below. I added a couple of empty pixels at the top of the image. I also added a grey matte to the GIF when I saved it in Photoshop so
it would blend in with my Main Panel colour (this image has no matte yet).
Tip: Don't forget to load your bullet image into your template by going to Other > File Manager > Add.
-
How can I add a link to my Home page from my header image?
Add your header using Designer instead of putting it in as a background. Go to Page Layout > Header Panel >
Designer (check the box "Use custom html").
Put your header image here, then look in Source view and remove any extraneous code like <p></p> or when
you're done. You can also place your header in a table cell and add a cell below it where you can put text, links, etc.
Finally, right-click on your header in the Design view and link to your Home page.
30 More XSite Pro Tips and Tricks!
|
