XSitePro Tips, Page 1

Get XSite Pro Tips Delivered to Your Inbox! Sign up right here...
Email:
First Name:
We promise not to share your information with anyone!

1. Can I paste content into XSitePro from MS Word?
2. How to link an external CSS file to your XSitePro Web site
3. How to add a header and footer that stretch 100% of the browser's width
4. How to left align your Web site in XSitePro
5. How to search and replace
6. Fitting banner ads into your XSite Pro Web site
7. How to put a border around one panel in XSite Pro
8. How to put a border around your entire Web page in XSite Pro
9. How to put a border around a picture using CSS
10. Why doesn't my CSS style show up when I "Preview" my Web site in XSite Pro?
11. How to display articles using tokens in XSitePro
12. Can I edit my template graphics?
13. How should my CSS be formatted in XSite Pro?
14. How can I find the ASCII codes for symbols like copyright, registered sign, angle quotes, etc.?
15. How do I create an "Add to Favorites" (Bookmark) link in XSitePro?
16. My background image repeats so that I can see part of it more than once. What can I do?
17. How can I add a gradient to my left, right and main panels?
18. Free online tools to add rounded corners, borders and other effects to images
19. Free Color Picker tool
20. How to create your own header
21. How to create templates that look unique (removing the XSitePro footprint)
22. How do I decide if a clipart image or photo will work with my header design?
23. Tutorial to add a shadow to photos using CSS and a transparent PNG image
24. How do I make printer-friendly pages in XSite Pro?
25. How to upload PDF's and other files to your XSite Pro Web site

More XSite Pro Tips and Tricks Here!

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

---

1. Can I paste content from MS Word into XSitePro?
   
   NO! Never, ever, ever paste anything from MS Word into XSitePro! It will introduce a crapload of garbage code that will mess up your Web pages and cause you horrible frustration trying to figure out what's wrong. Type directly into XSitePro or copy your MS Word content into NotePad first and then into XSitePro. NotePad will strip out all the MS Word formatting. top
   
2. How to link an external CSS file to your XSitePro Web site.

   Go to Other > Global Scripts. In the HEAD section, paste the link to your CSS file, e.g. <link href="mystyle.css" rel="stylesheet" type="text/css">. This will link your external CSS file to ALL your pages.

   Then use FTP or XSite Pro's Resource Manager to upload your external CSS file to the same folder as the rest of your XSitePro files. After the initial upload via XSite Pro, you will have to manually upload your external CSS file using FTP every time you make a change to it. top
   

3. How to add a header and footer that stretch 100% of the browser's width.

   HEADER:
   
   Create a background in Photoshop or another graphics editor that will tile horizontally (x axis) behind the main header for your Web site. It only needs to be about 10px wide (or less), although some tiles are much wider as they repeat a skyline or other kind of image. Make sure the image tiles seamlessly no matter what size it is. The background can be the exact same height as your header, or it can be any height you want as long as it complements your overall design. Make sure you take into account whether your main header is flush with the top of the browser window or not. (You may need to set Page Layout > Page Margins > Size and Position > Top to zero. Otherwise, you may need to add some pixels to the top of your background image or it might not line up properly behind your header.)
   
   In Page Layout > Page Margins add your background image, e.g., bg.gif.
   
   Go to Other > Web Site Settings > Advanced Image Tiling > Page Margins. Set it to "Tile horizontally - with scroll."
   
   Set Page Layout > Header Panel > Background > Color to "transparent." Just type in the word "transparent" instead of a color value. Add your main header image using the Basic or Advanced option.
   
   If all you want to do is add a 100% width background behind your header, then stop here! If you want to add a 100% wide footer, keep going...
   
   FOOTER:
   
   Create a footer background in any graphics editor that will tile seamlessly horizontally (x axis).
   
   Go to Other > Global Scripts. Add the following CSS code to the HEAD section, using the name of your own footer image:
   
   <style>
   
   #footerRepeat {
      background-image: url("images/footer-bg.jpg");
      background-repeat: repeat-x;
      background-position: center bottom;
      margin-left: 0px;
      margin-top: 0px;
      margin-right: 0px;
      margin-bottom: 0px;
   }
   
   </style>
   
   Then put the following code in Other > Global Scripts > Immediately after the opening <BODY> tag:
   
   <div id="footerRepeat">
   
   Finally, put the following code in Other > Global Scripts > Immediately before the closing <BODY> tag:
   
   </div>
   
   In Page Layout > Page Footer, set "Height" to the height of your background image. Note: You can set this height to less than the image height, but not more!
   
   Set the background colour for the Page Footer to "Transparent."
   
   Need More Help? $7 Training Video for Adding a 100% Wide Footer in XSitePro
   
   Important: The background image may not show up in your Preview until you create at least one Web page in XSitePro. You can just create an empty Home page, for example.
   
   top

4. How to left align your Web site in XSitePro.
   
   On the Page Layout tab, go to the very bottom section called Page Margins. Check "Right Margin Only." top
   

5. How to search and replace.
   
   To search and replace on an individual page, click on the Design tab for the page you want to modify. At the top left of the Design tab's menubar, click on the binoculars icon.
   
   The global search and replace option is on the Main Menu under Tools > Find and Replace on All Pages. top
   

6. Fitting banner ads into your XSite Pro Web site.
   
   If you want to put full-sized affiliate banner ads on XSite Pro Web pages, make sure that you consider the width of the banners when BUILDING your site. Banners are generally 468 pixels wide so your main panel must be at least this wide. If you are adding padding to your main panel, then you must take that into consideration, too. Padding of 10 pixels reduces the display area of the panel by 20 pixels, so a panel with a 10 pixel padding would need to be 488 pixels wide to accommodate a 468 pixel banner. top
   
   

7. How to put a border around one panel in XSite Pro.
   
   If you want to set off your left or right panel with a nice, neat little border, here are two ways to do it.
   
   Option #1:
   
   Version 1 of XSitePro
   
   This example is for the left panel. Just change the word LEFT to RIGHT if you want to outline the right panel. To outline both panels, add both sets of code. Go to Other > Global Scripts. Add the following CSS code in the HEAD section:
   
   <style>
   
   td.XSP_LEFT_PANEL_SPC
   {
   border-top: solid 1px black;
   border-left: solid 1px black;
   border-right: solid 1px black;
   }
   
   td.XSP_LEFT_PANEL
   {
   border-left: solid 1px black;
   border-right: solid 1px black;
   border-bottom: solid 1px black;
   }
   
   </style>
   
   Version 2 of XSitePro
   
   <style>
   
   td.XSP_LEFT_PANEL_SPC
   {
   border-top: solid 1px black;
   border-left: solid 1px black;
   border-right: solid 1px black;
   }
   
   td.XSP_LEFT_PANEL_2
   {
   border-left: solid 1px black;
   border-right: solid 1px black;
   border-bottom: solid 1px black;
   }
   
   </style>
   
   Change the size of the border by editing the pixels (px) and change the colour by editing the colour. You can used named colours like "red" or HEX colours like #0000FF. Make a dashed border by changing "solid" to "dashed." Put 0px for any side of the panel you want to leave without a border on it.
   
   Other sections you can put borders around:
   
   TD.XSP_RIGHT_PANEL_SPC
   
   TD.XSP_HEADER_PANEL
   
   TD.XSP_INFO_BAR (XSitePro V2)
   
   TD.XSP_MAIN_PANEL_HEADER (XSitePro V2)
   
   TD.XSP_MAIN_PANEL
   
   TD.XSP_MAIN_PANEL_FOOTER
   
   TD.XSP_FOOTER_PANEL
   
   Option #2:
   
   You can put a table into any panel and add the border around the table instead of around the panel. You can use the same code to put a border around an image, too. Here's an example of the CSS class for a one pixel black border:
   
   <style>
   
   .myBorder {border: 1px solid #000000;}
   
   </style>
   
   Don't forget to add the class to the table! Example:
   
   <table border="0" class="myBorder">
   <tr>
   <td>CONTENTS OF TABLE HERE
   </td>
   </tr>
   </table>
   
   Make sure you put the element border="0" into the table tag. Why not use the default table border? The default table border looks awful, especially at wide widths because it simulates beveling. We've all seen those older or amateur Web sites with the big, ugly grey borders around tables. Shudder! top
   

8. How to put a border around your entire page in XSite Pro.
   
   Sometimes you need to outline your Web page so it doesn't look like it's floating in space. I actually use this technique quite often. Go to Other > Global Scripts. Add the following CSS code in the HEAD section:
   
   <style>
   
   TABLE.XSP_OUTLINE {border: 1px solid black;}
   
   </style>
   
   Change the size (width) of the border by editing the pixels (1px) and change the colour by editing the named colour (black), or you can use HEX colours like #0000FF. Change the style by editing the border style (solid). For instance you can change "solid" to "dashed," etc. top
   

9. How to put a nice border around an image using CSS.
   
   Here's an example of the CSS class for a one pixel black border:
   
   <style>
   
   .myBorder {border: 1px solid #000000;}
   
   </style>
   
   Don't forget to add the class to the image! Example:
   
   <img src=http://www.mywebsite.com/images/myphoto.jpg width="100" height="150" border="0" class="myBorder">
   
   Make sure you put the element border="0" into the image code tags. Why not use the default image border? Because the default image border is blue and looks amateurish if left on. top
   

10. Why doesn't my CSS style show up when I "Preview" my Web site in XSite Pro?
    
    Let's say for example that you've added a border around a panel using CSS in XSitePro. You click on the Preview button to view your handiwork, but your nice border doesn't show up. Here's how to solve that...
    
    To see your CSS styles in XSitePro, you need to add at least one page to your Web site. (Note: If the page you add is your Home page, remember to designate the page as the Home page by checking the box under the Page Settings tab that says "Make this is my Home Page." This isn't required to get your CSS to show up, just a reminder for when you take your site live!)
    
    Preview your Web site again and your CSS styles should now show up! top
    

11. How to display articles using tokens in XSitePro.
    
    Read this section carefully. There's a lot of information packed into the next few sentences!
    
    Divide your articles into topics. Create a separate Web page for each topic.
    
    Now create Web pages for each article and move the articles for each topic below the topic page. Highlight each article and use the right arrow beside the list of Web pages to make the article a sub-page of its topic page.
    
    Then, on each topic page, right click and select "Insert Links to All Subpages." Choose Numbered List or Bulleted List > With Descriptions. This inserts a token into the topic page. Note: The "Descriptions" are taken from the "Description for sitemap and meta tags" box for the appropriate page under Web Pages > Info.
    
    Example: http://www.xsiteprodesigns.com/xsite-pro-tips.html
    
    Put links to the topic pages only (not the individual articles) in the left hand navigation panel. Do this by NOT selecting any checkboxes (on the Info tab) for article pages except "Publish this page" and possibly "Show on Site Map." top
    

12. Editing your XSite Pro template.
    
    Yes, you can make changes to your XSite Pro Web site by replacing any graphic with one of your own or by removing the graphic and using a coloured background for that column/section instead. This works if you are using a default XSite Pro template or a custom template*.
    
    *If you own an application that will open the .psd file that we provide as part of your custom template, you will have full control over your header/footer and other graphics. The .psd file will contain the layers that make up your graphics, e.g., the text will be on a separate layer that you can edit or delete. This makes it easy to replace or edit elements in your template graphics.
    
    After editing, you need to slice the image and save the part you want to change. Then simply use that graphic in place of the one currently in use in your template. Adjust your column widths accordingly. All columns should add up to the same number of pixels as the full width of your header graphic. top
    
    These software applications will allow you to edit a .psd file:

13. • Adobe PhotoShop - http://www.adobe.com/
    • Corel PhotoPaint and Paint Shop Pro - http://www.corel.com/
    • Ulead PhotoImpact - http://www.ulead.com/
      
14. How should my CSS be formatted in XSite Pro?
    
    Opening and closing tags: When you add CSS elements directly into XSite Pro, you use Other > Global Scripts and add it to the HEAD section. The opening tag for that section will be <style>. The closing tag for that section will be </style>. ALL your CSS will go between those two tags.
    
    On this tips page I show the opening and closing tags with each example of CSS because I don't want to assume that you already have the opening and closing tags in place. However, if you have already put in the opening and closing tags, do not add them again when you add new CSS. Just make sure your new element is BETWEEN the existing opening and closing tags. top
    
    
15. How can I find the ASCII codes for symbols like copyright, registered sign, angle quotes, etc.?
    
    XSite Pro has several ASCII characters you can choose from. On the Design tab menu bar, click on the Insert Special Characters icon.
    
    If the symbol isn't available from the Insert Special Characters icon in XSite Pro, you will need to add the ASCII code directly into the HTML using the Source view.
    
    If you want to find the actual ASCII and HTML Character Entities for many symbols, check out these Web sites: http://www.bbsinc.com/iso8859.html, http://www.intuitive.com/coolweb/entities.html.
    
    

    Name	Symbol	ASCII	HTML Character Entity
    Right angle quote	»	»	»
    Left angle quote	«	«	«
    Right double quote	”	”	”
    Left double quote	“	“	“
    Middle dot, centered dot	·	·	·
    Round filled bullet	•	•	•
    Pound sign	£	£	£

    • The dots and bullets are useful to put in phone numbers instead of dashes, or to separate items in your header, like this:
      Lakeview Cottages · Full Kitchens · Canoe Rentals
    • Symbols that you may not have on your keyboard like the pound sign or yen sign, etc. can be rendered using ASCII codes.
    • For your header: To create these kinds of symbols in your graphics program, like Photoshop, you will need to load some dingbat fonts. Dingbats produce small images instead of letters when you type. You will need to load several fonts to get all the symbols that are available. If you have WP TypographicalSymbols (a Word Perfect font), you may have quite a bit of what you'll need. This font works fine in Photoshop. top
      
      
16. How do I create an "Add to Favorites" (Bookmark) link in XSitePro?
    
    On the Design view, right click on the page where you want to insert the link. Choose Widget Wizard > Text Click Events > Add to Favorites. Type the text you want the link to read into the "Text for the link" section. It can say "Bookmark This Site," "Add to Favorites," or whatever you choose as long as it's a recognizable call-to-action for the visitor. You can make the link bold by wrapping some HTML around the token in the Source view. Example: <strong><<SCRIPT_0000000043>></strong>.
    
    If you want more control over this script, here's another way to do it. Add the following JavaScript to your Other > Global Scripts tab (top section before or after any CSS code you already have there).
    
    <SCRIPT LANGUAGE="JavaScript">
    <!-- Begin
    function addbookmark()
    {
    bookmarkurl="http://www.mywebsite.com/"
    bookmarktitle="My Website - What I Offer"
    if (document.all)
    window.external.AddFavorite(bookmarkurl,bookmarktitle)
    }
    //  End -->
    </script>
    
    Of course, change the bookmarkurl and the bookmarktitle to your own! Now, wherever you want to add an "Add to Favorites" link, type the following in the Source view:
    
    <a href="javascript:addbookmark()">Bookmark This Site! (or whatever you want)</a>
    
    Now you have full control over the link. You can change the font. You can use CSS to format the link. You can even wrap the anchor tag around an image and make the image your "Add to Favorites" link. top
    
    
17. My background image repeats so that I can see part of it more than once. What can I do?
    
    Repeating background images cause some ugly problems and look very unprofessional. I see it often with footers in XSite Pro templates. It happens when the Web site owner adds more content to the footer than expected by the designer. This pushes the container holding the background image deeper than the image itself and the image then repeats. A similar thing happens frequently with headers.
    
    The first step is to make sure that all your panels add up to the width of the header in pixels. For the most part, you can ignore the padding in this calculation since padding affects the inside of the cell; it doesn't make the cell bigger unless it pushes the contents (an image, for example) beyond the limits of the cell. Example: the panel is 125px wide, the padding is 20px (which means it takes up 40px in width) and an image inside the panel is 125px...now you could have a problem.
    
    Once the panel widths are correct, try removing text or images that you have added to a panel or table cell. The answer will usually be that something you have added is pushing the panel or table cell open further than the height or width of the background image, causing it to repeat. If you fix this, you will fix your problem. One way to get to the root of this is to load your template into a blank Web site and start adding things from your current Web site one at a time until you see the problem happen. Common culprits are: 1. too many lines of text and/or large-sized text in a footer, 2. graphics (like banner ads) that are too wide in a panel or too deep in a footer.
    
    CSS can make this problem go away even when things do get pushed out too far. At least it can mitigate the damage considerably.
    
    You'll need to use the background-repeat element to prevent repeating images. Below are some examples. 1. The first two elements tell the browser not to repeat the image at all (in the info bar and footer). 2. The second set of elements tell the browser to repeat the background image down, but not across (in the left panel). 3. You can also create your own class and apply it to table cells holding background images. The .repeat class below tells the browser to repeat the image across, but not down. Of these three, you will find "no-repeat" to be your most useful tool in avoiding those unsightly repeating images.
    
    <style>
    
    TD.XSP_INFO_BAR {background-repeat: no-repeat;}
    TD.XSP_FOOTER_PANEL {background-repeat: no-repeat;}
    
    td.XSP_LEFT_PANEL_SPC { background-repeat: repeat-y;}
    td.XSP_LEFT_PANEL {background-repeat: repeat-y;}
    td.XSP_LEFT_PANEL_2 {background-repeat: repeat-y;}
    
    .repeat {background-repeat: repeat-x;}
    
    </style>
    
    top
    
    
18. How can I add a gradient to my left, right and main panels?
    
    Create a gradient image that is about 300 pixels high and about 10 pixels wide. Use a pale colour so your text will show up well. You want the gradient going from top to bottom so that it fades to white as it goes down. Import the gradient into XSite Pro using Other > Resource Manager. Now add the CSS below to Other > Global Scripts in the top section. Make sure that you add "background-repeat: repeat-x" or your image will repeat down as well as across.
    
    <style>
    
    TD.XSP_CENTER_PANEL {BACKGROUND-IMAGE: url('images/gradient.gif'); background-repeat:repeat-x;}
    
    TD.XSP_LEFT_PANEL_SPC {BACKGROUND-IMAGE: url('images/gradient.gif'); background-repeat:repeat-x;}
    
    TD.XSP_RIGHT_PANEL_SPC {BACKGROUND-IMAGE: url('images/gradient.gif'); background-repeat:repeat-x;}
    
    </style>
    
    Tip: the images directory is only used in V2 of XSitePro, not V1. In V1 leave out images/ in the CSS. top
    
    
19. Two free online tools to add rounded corners, borders and other effects to images.
    
    http://www.online-image-editor.com/
    
    

    With this tool, you can add multiple borders to graphics you want to add to your XSitePro header or template by simply creating the borders one after another on the same image. This photo of me has three rounded borders: 5px white, 1 px black, 3 px silver.
    
    http://www.picnik.com 
    
    New! Picnik is an awesome online tool that allows you to edit your images like a pro! You can add rounded edges with a background colour that matches your Web page, crop, resize, rotate, sharpen your images, change your image into sepia tones, add borders, and do all kinds of great effects and fun stuff. And it's way easier to use than Photoshop, believe me!
    
    Photoshop® Hints: If you have Photoshop, you can add multiple strokes one after another to an image using Edit > Stroke. Note: On the Layers palette in Photoshop the Stroke feature only allows you to add one border to an image, so use the menu option instead. To preserve your original image, copy it to a new layer and add strokes to the copy only. top
    

20. Free Color Picker tool
    
    Ever wanted to find out the Hexadecimal or RGB value for a colour you see on a Web site on your desktop or in a software application? I use an old, old colour picker that you can't get anymore, so I thought I should look for something more current. Here's what I found: http://www.iconico.com/colorpic/. To me it's overkill for most purposes and more awkward to use than my old colour picker, but it's fun, has a lot of features and certainly does the job.
    
    To capture a colour, you simply click on the ColorPic box to make sure it is active, then run your cursor over the colour you want to capture. Click Ctrl-G to grab and add the colour chip to the palette. You also click Ctrl-G on a colour chip to delete it from the palette, so it's kind of a toggle.
    
    Copy and paste the Hexadecimal or RGB values into Photoshop or XSitePro and voila! Now you can duplicate any colour you see online or on your computer.
    
    top
    
    
21. How to create your own header
    
    We have created two tutorials for you on creating your own header.
    
    Tutorial #1: Create a Classy Header for Your XSitePro Web Site
    Tutorial #2: Use a Simple Filter to Create a Professional Header
    
    top
    
    
22. How to create templates that look unique (removing the XSite Pro footprint)
    
    We have created a tip page for you that shows you ways to create unique, professional Web sites using XSite Pro. Click here...
    
    top
    
    
23. How do I decide if a photo or clipart image will work with my header design?
    
    Keep the following ABC's in mind when searching for clipart or photos online, or looking at photos in your personal collection for use on your site.
    
    A. Arrangement: The main person or animal in the image should be looking straight ahead or into the centre of the header. Cars, planes, boats and any object that has a "front end," like a teapot's spout, should also be pointing straight ahead or into the centre of the header. Flipping a clipart image to change its orientation might work, but flipping a photo will not always work due to shadows and highlights. The photo will just look "wrong."
    
    B. Background: Look for photos with a high degree of contrast between the background and the main image. While you can crop a photo or clipart image to remove a lot of the background, this option doesn't always suit your header. You may need to erase the background partially or completely. However, in photos where there is little contrast between the background and the main image this can be a very tricky proposition.
    
    Note: There are special images called "photo objects" that come with a plain white background or "clipping path" so you can easily extract the image. InZones.com, Clipart.com and PhotoObjects.net have these, but these sites require a subscription fee. The last two sites are owned by JupiterImages, which also owns Photos.com.
    
    C. Colour: While the colour of things on a clipart image or photo can be changed using the Hue/Saturation tool in Photoshop, this isn't something you may be prepared to learn. It's best to choose images that are neutral, pastel or match the colour scheme in your header design. Another option is to design your header and its colour scheme around the photo you choose.
    
    Tip: Cheap photo sites don't always have the kind or quality of photo you need, but quality photos can be expensive. Here's a tip for you: check out Web template sites like Template Monster®. Often you can buy a template with great photos for less than you could buy the photos themselves!
    
    Here are some places to get decent quality, cheap photos ($1 - $5 per photo; no subscription fee, but you may have to buy credits to get started):
    
    • Dreamstime.com
    • Fotolia.com
    • BigStockPhoto.com
    • iStock.com
    • Crestock.com
      
      top
      
      
24. Tutorial to add a shadow to photos using CSS and a transparent PNG image.
    
    Here is a link to the tutorial. Note that Internet Explorer doesn't play well with this CSS, so you must make sure your photo is on a white background. Then it will look nice in Internet Explorer, too. top
    
    
25. How do I make printer-friendly pages in XSite Pro?
    
    Thanks to Chris and Hadrian on the XSite Pro Forum for this idea!
    
    Note: This code is only active when printing or using the "Print Preview" option in your browser. The centre panel has been widened to 700px.
    
    <style>
    @media print {
    TD.XSP_HEADER_PANEL{display: none;}
    DIV.XSP_LEFT_PANEL{display: none;}
    TD.XSP_LEFT_PANEL{display: none;}
    TD.XSP_LEFT_PANEL_2{display: none;} (XSitePro V2)
    TD.XSP_LEFT_PANEL_SPC{display: none;}
    DIV.XSP_RIGHT_PANEL{display: none;}
    TD.XSP_RIGHT_PANEL{display: none;}
    TD.XSP_RIGHT_PANEL_2{display: none;} (XSitePro V2)
    TD.XSP_RIGHT_PANEL_SPC{display: none;}
    TD.XSP_CENTER_PANEL{width: 700px;}
    TD.XSP_MAIN_PANEL_HEADER{display: none;} (XSitePro V2)
    TD.XSP_MAIN_PANEL{body {color: #000000; background: #ffffff;
    font-family: verdana, arial, sans-serif; font-size: 10pt; width: 700px; }
    a {text-decoration: underline; color: #0000ff;}
    TD.XSP_MAIN_PANEL_FOOTER{display: none;}
    TD.XSP_FOOTER_PANEL{display: none;}
    }
    </style>
    
    You can alternatively add this code (between the style tags above) to an external CSS file (e.g., print.css), but when you make changes to it, you will need to remember to upload it to your server again. And don't forget to link to it in Other > Global Scripts (HEAD section), like this: <link rel="stylesheet" type="text/css" href="print.css" media="print">.
    
    I am using this code on XSitePro Designs. This Web page is long, so, to save a tree, just use "Print Preview" to see what a printer-friendly page looks like. top
    
    
26. How to upload PDF's and other files to your XSite Pro Web site.
    
    To upload PDF's and other files, like MP3's, video files, etc. to your XSitePro Web site, go to Other > Resource Manager, click Add and browse to find the file on your hard drive. Add the file to the root folder or to another folder of your choice. Next time you upload your pages, the PDF will get uploaded, too. Now simply link to the file from your Web page like this <a href="myfreereport.pdf">Click here</a> to download My Free Report. Choose Insert Link > Other Files and locate your PDF in the list.
    
    If you want to show an image of your PDF, create a screen capture and resize it in a graphics editor like Photoshop. You can also open PDF files in Photoshop and extract images or the cover page and save that as an image. Make sure you resize it so it loads quickly.
    
    Add a link to the PDF from the image. Include a text link to the PDF to make your page more user friendly.
    
    <a href="myfreereport.pdf"><src img="myfreereport.jpg"></a>
    <br>
    <a href="myfreereport.pdf">Click here</a> to download My Free Report.
    
    Want to make your images and links more SEO-friendly? Try this:
    
    <a href="keywords.pdf"><src img="keywords.jpg"></a>
    <br>
    Download My Free Report on <a href="keywords.pdf">keywords</a>.
    
    Replace "keywords" with YOUR keywords, like this:
    
    <a href="puppy-training.pdf"><src img="puppy-training.jpg"></a>
    <br>
    Download My Free Report on <a href="puppy-training.pdf">puppy training</a>.
    
    Tip: You might also want to give your visitors more explicit instructions like, "Right click and Save As or Save Target As to save My Free Report to your hard drive." You might also want to put a link to the application people will need in order to access your file, e.g. Adobe Reader®, Windows Media Player®, etc. Often the company will allow you to use a small image for linking purposes, so check their site.
    Here's the page to get logos for Adobe Reader.
    Here's the page to get logos for Windows Media Player.
    
    top
    

---

More XSitePro Tips and Tricks Here!

XSitePro V2 Tips!

Click here for more information on XSitePro

Get XSite Pro Tips Delivered to Your Inbox! Sign up right here...
Email:
First Name:
We promise not to share your information with anyone!