Xara Webstyle 4 and Front Page

Validating Your Xara Templates in FrontPage

Are you using Xara's Webstyle 4 program to design your website? Cricket Walker of GNC Web Creations has an excellent tutorial 10 Steps to Set-Up Your Site With FrontPage and Xara - Xara Templates and FP2003. Once you have completed the tutorial and have your page  looking and functioning the way you want, have you tried to validate it? Xara Webstyle 4 and FrontPage Tutorial available in pdf format.

This is the original page I created using Xara Webstyle 4 with the Traveler Themeset. When validated, there are 12 errors - three that can be easily corrected. I have already moved the embedded style sheet created by Xara to an external style sheet and I have saved the page as index-revised.html so that if I make a mistake, I still have my original.

Since I will be moving back and forth between two pages and it may be confusing, I will refer to the index-revised.html as Page A.  The page where I will store my deleted Xara code, webstyle-elements.htm as Page B.

Step 1 - Move the left and top margin statements from Page A index-revised.html to the external style sheet

View Screenshot

and delete the extra <div> tag that comes before the closing <body> tag.

View Screenshot

Revalidate - there are now 9 errors, all having to do with the code Xara inserts. Rather than simply deleting the code, I am going to move it to a separate page so that I can still access my Xara template through FrontPage. I've named that page webstyle-elements.htm (Page B).

Step 2 - Screenshot of Xara code for masthead graphics left and right -

View Screenshot

Copy the line of code from Page A index-revised.html for the right graphic and paste it into the webstyle-elements.htm page B. Delete the line of code for the right logo from Page A index-revised.html.

Insert the graphic between the tags for <div class="right' id="logo"> </div>

View Screenshot

Step 3 - Copy the line of code for the left graphic from the index-revised.html (Page A) and paste it into the webstyle-elements.htm (Page B). Delete the line of code for the left graphic and insert the graphic between the tags for <span class="left1"> </span> on the index-revised.html (Page A).

View Screenshot

Validate again - 7 errors now.

Step 4 - Screenshot for Xara code for navigation menu.

View Screenshot

Copy and delete that line of code from index-revised.html (Page A) and paste it into your webstyle-elements.htm (Page B).  Insert the javascript code into Page A.

<script language="javascript1.1" type="text/javascript" src="index_files/xaramenu.js"></script>
<script language="javascript1.1" type="text/javascript" src="index_files/index_hnavbar.js"></script>

View Screenshot

Validate your revised page again and you are down to two errors.

NOTE: When using a javascript menu, you should also provide a text based navigation system as I have done at the bottom of the page.

Step 5 - The final code that is causing an error on this template is for the graphic image of a map inserted in the content area.

Screenshot of Xara code inserted for graphic image of map.

View Screenshot

Copy and delete that line of code from index-revised.html (Page A) and paste it into your webstyle-elements.htm (Page B).  Insert the graphic image and apply whatever class was originally applied - in this case left to index-revised.html (Page A).

View Screenshot

Make sure to use an alt tag on all of your images.

Step 6 -Validate your revised page again. No errors unless you have more Xara code than was created on the travelers template.

This page contains the original code inserted by Xara MenuMaker and has 12 validation errors.

This page contains the revised code for the Xara WebStyle4. This page validates.

If you try and validate both pages, you will see the difference.

Step 7 - There is still one last piece of code in the head section - a comment which I will also remove. I have  pasted this code into the webstyle-elements.html (Page B).

View Screenshot

Once you have changed the code on your page so that it validates, you can no longer access the Xara Webstyle program from within your page. To get around this, what I have done is save the original code in a new document and save it as webstyle-elements.htm. I use THAT page to make any changes to the Xara template. This will work in FrontPage - tested in FP2002 and FP2003. Editing from within the program will not yet work with Expression Web.

Once the page validates, I will then add the correct the doctype and meta tags and such and do a final reformatting and validation. Once everything is the way I want it to look and work, you can either save the page as template.html and use that page to create your new pages or  create a dynamic web template to use on the site.

NOTE: This can prove a little tricky depending on the template you have chosen. For this example, I made the two editable regions for the content are - one for the left hand main content and one for the right hand column. I left the right hand column divs content but because it is an editable region, I can remove it if I don't want to use it. The test-content.html will show the dwt attached to new content.

Pat Geary.
Copyright © 2007 Pat Geary of Genealogy Web Creations All Rights Reserved

Additional Resources -