More Tips for XSite Pro Users (Updated for V2)
- 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
one in XSitePro V1?
- 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 XSitePro V1?
- 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 one
in XSitePro V1?
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 XSitePro?
XSitePro V1: On your computer, browse to Programs
> XSite Pro > Sites.
XSitePro V2: On your computer, browse to
Documents and Settings > Your User Name > My
Documents > XSitePro-Data > Sites.
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="center">
<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="center"
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 XSitePro V1?
XSitePro V1 doesn't
have a form creation wizard. 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 XSitePro V1?
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 in XSitePro V1?
On parent pages in XSitePro
V1, 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 XSitePro?
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(images/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(images/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 > Advanced Design >
Designer.
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,
search box, etc. Finally, right-click on
your header in the Design view and linkit to
your Home page.
30
More XSite Pro Tips and Tricks!
|
