Code Comparison
Here is the difference between what a site builder (or a template) might give you, and a hand coded template. Don’t worry if you don’t understand any of it, but at a glance you can probably tell which is simpler.
Website Generated using a website builder tool (Xara)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="XAR Files" content="index_htm_files/xr_files.txt"/>
<title>Xara Web Designer - A demo website</title>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1252"/>
<meta name="Generator" content="Xara HTML filter v.4.1.0.665"/>
<link rel="stylesheet" type="text/css" href="index_htm_files/highslide.css" />
<!--[if lt IE 7]><link rel="stylesheet" type="text/css" href="index_htm_files/highslide-ie6.css" /><![endif]-->
<script type="text/javascript" src="index_htm_files/highslide.js"></script>
<link rel="stylesheet" type="text/css" href="index_htm_files/xr_main.css"/>
<link rel="stylesheet" type="text/css" href="index_htm_files/xr_text.css"/>
<script type="text/javascript" src="index_htm_files/roe.js"></script>
<script type="text/javascript" src="index_htm_files/prs.js"></script>
<script type="text/javascript">var xr_nextpage="photos.htm"; var xr_transition=0; var xr_transitiontime=500;var xr_prevpage=""; var xr_btransition=0; var xr_btransitiontime=0;</script>
</head>
<body style="background-color: #C1CCCE">
<div class="xr_ap" id="xr_xrii" style="width: 100%; height: 100%; top:0%; left:0%;">
<div class="xr_ap" id="xr_xr" style="width: 770px; height: 1376px; top:20px; left:50%; margin-left: -385px;">
<script type="text/javascript">var xr_xr=document.getElementById("xr_xr")</script>
<img class="xr_ap" src="index_htm_files/0.png" alt="" title="" style="left: -5px; top: -5px; width: 790px; height: 1396px;"/>
<!--[if IE]><div class="xr_ap" id="xr_xri" style="width: 770px; height: 1376px; clip: rect(0px 770px 1376px 0px);"><![endif]-->
<!--[if !IE]>--><div class="xr_ap" id="xr_xri" style="width: 770px; height: 1376px; clip: rect(0px, 770px, 1376px, 0px);"><!--<![endif]-->
<img class="xr_ap" src="index_htm_files/1.png" alt="" id="LiveCopy:58Beta2:58Heading.MouseOff" title="" style="left: 0px; top: 0px; width: 770px; height: 127px;"/>
<img class="xr_ap" src="index_htm_files/2.png" alt="" id="LiveCopy:58Beta2:58Heading.MouseOff.1" title="" style="left: 70px; top: 46px; width: 333px; height: 60px;"/>
<img class="xr_ap" src="index_htm_files/3.png" alt="" id="LiveCopy:58AutoRepeat4.MouseOff" title="" style="left: 564px; top: 1135px; width: 179px; height: 192px;"/>
<img class="xr_ap" src="index_htm_files/4.png" alt="" id="LiveCopy:58BetaFooter1.MouseOff" title="" style="left: 0px; top: 1344px; width: 769px; height: 32px;"/>
<span class="xr_s0" style="position: absolute; left:21px; top:1365px;">
<span class="xr_tc" style="left: 111px; top: -10px; width: 507px;"><span class="xr_s1">Website made using only </span><span class="xr_s1">Xara Web Designer</span><span class="xr_s1">, and no other graphics or software tools.</span></span>
</span>
<img class="xr_ap" src="index_htm_files/5.png" alt="" title="" style="left: 442px; top: 4px; width: 51px; height: 23px;"/>
<a href="photos.htm" target="_self" onclick="return(xr_nn());">
<img class="xr_ap" src="index_htm_files/6.png" alt="" title="" onmousemove="xr_mo(this,0,event)" style="left: 492px; top: 4px; width: 58px; height: 23px;"/>
</a>
<a href="publishing.htm" target="_self" onclick="return(xr_nn());">
<img class="xr_ap" src="index_htm_files/7.png" alt="" title="" onmousemove="xr_mo(this,0,event)" style="left: 549px; top: 4px; width: 78px; height: 23px;"/>
</a>
<a href="widgets.htm" target="_self" onclick="return(xr_nn());">
<img class="xr_ap" src="index_htm_files/8.png" alt="" title="" onmousemove="xr_mo(this,0,event)" style="left: 627px; top: 4px; width: 64px; height: 23px;"/>
</a>
<a href="advanced.htm" target="_self" onclick="return(xr_nn());">
<img class="xr_ap" src="index_htm_files/9.png" alt="" title="" onmousemove="xr_mo(this,0,event)" style="left: 690px; top: 4px; width: 75px; height: 23px;"/>
</a>
<img class="xr_ap" src="index_htm_files/10.png" alt="" title="" style="left: 562px; top: 91px; width: 176px; height: 15px;"/>
<span class="xr_s2" style="position: absolute; left:63px; top:161px;">
<span class="xr_tl" style="top: -19px;"><span class="xr_s3">Read Me First</span></span>
<span class="xr_tl xr_s4" style="top: 9px;">This is a short tutorial, and a working website document you can experiment on.</span>
<span class="xr_tl xr_s5" style="top: 26px;">If you’re reading this in Designer Pro then feel free to experiment and explore the </span>
<span class="xr_tl xr_s5" style="top: 43px;">features of the program. If you’re reading this as a web page, then this is an example </span>
<span class="xr_tl xr_s5" style="top: 59px;">of what you could be producing with Xara Web Designer or Xara Designer Pro.</span>
<span class="xr_tl xr_s5" style="top: 93px;">This is how to create a great looking website in 6 easy steps, using Xara Designer Pro.</span>
<span class="xr_tl xr_s6" style="top: 126px;">1) Open the Designs Gallery and select a design</span>
<span class="xr_tl xr_s5" style="left: 29px; top: 168px;">based on the template design called ‘Beta’. You can see all the templates by </span>
<span class="xr_tl xr_s5" style="left: 29px; top: 185px;">moving your mouse over the ‘Designs Gallery’ label on the right side of the </span>
<span class="xr_tl xr_s5" style="left: 29px; top: 202px;">window.</span>
<span class="xr_tl xr_s5" style="left: 29px; top: 152px;">OK we don’t actually need to do this because this document is already open. It’s </span>
<span class="xr_tl xr_s5" style="left: 36px; top: 269px;"><span class="xr_s7">Preview your website:</span> Select <span class="xr_s7">File -> Preview Website</span> or just click this icon on </span>
<span class="xr_tl xr_s5" style="left: 36px; top: 285px;">the top bar. This button has a ‘fly-out’ showing two options. The first previews just the current page (quickest) </span>
<span class="xr_tl xr_s5" style="left: 36px; top: 302px;">the other previews the whole website. Try it now to see what this website looks like in a web browser. </span>
<span class="xr_tl xr_s5" style="top: 336px;">In the Preview window check out the buttons along the top, and move over the various objects, such as the photo </span>
<span class="xr_tl xr_s5" style="top: 352px;">above right, or click the links, such as the one immediately below here to see various layer effects.</span>
<span class="xr_tl xr_s6" style="top: 386px;">2) Edit the Theme Colors</span>
<span class="xr_tl xr_s5" style="top: 771px;">You can change button text the same way. Some buttons are ‘stretchy’ and can accommodate </span>
<span class="xr_tl xr_s8" style="top: 411px;"><span class="xr_s9"><a href="javascript:xr_cpu(4)" onclick="return(xr_nn());" onmousemove="xr_mo(this,0)" >Click to find out more about the Color Editor.</a></span></span>
<span class="xr_tl xr_s5" style="top: 428px;">Move the mouse pointer over the left end of the Color line at the bottom of the screen and click on any of the square </span>
<span class="xr_tl xr_s5" style="top: 445px;">color patches. Select ‘Edit’ to display the color editor, and you can now select different colors. For the best results </span>
<span class="xr_tl xr_s5" style="top: 461px;">we suggest making Theme Color 1 and 2 similar or matching colors. There are theme colors for all the main design </span>
<span class="xr_tl xr_s5" style="top: 478px;">elements of this design.</span>
<span class="xr_tl xr_s5" style="left: 151px; top: 512px;"><span class="xr_s7">Color Schemes. </span>To make color editing even easier we provide some ready-made color </span>
<span class="xr_tl xr_s5" style="left: 151px; top: 528px;">schemes that you can drag ‘n’ drop onto the page. Open the <span class="xr_s7">Designs Gallery</span>, go to </span>
<span class="xr_tl xr_s5" style="left: 151px; top: 545px;"><span class="xr_s7">Examples -> Example Web Templates</span> folder and scroll down to the bottom and you will </span>
<span class="xr_tl xr_s5" style="left: 151px; top: 562px;">see a variety of Color Scheme thumbnails. Drag any onto this page to see all the website </span>
<span class="xr_tl xr_s5" style="left: 151px; top: 578px;">colors change in an instant.</span>
<span class="xr_tl xr_s6" style="top: 662px;">3) Edit the text on your website</span>
<span class="xr_tl xr_s5" style="top: 688px;">Click the big T icon on the left set of tools (the Text Tool). Now click on any text and start editing. Try the heading </span>
<span class="xr_tl xr_s5" style="top: 704px;">and replace it with your own. When using the Text Tool, the bar across the top allows you to change font, size, etc. </span>
<span class="xr_tl xr_s5" style="top: 721px;">The ABC icon at the end is a spell checker control. Text editing is like in any word processor, for e.g. drag to select </span>
<span class="xr_tl xr_s5" style="top: 738px;">text.</span>
<span class="xr_tl xr_s5" style="top: 788px;">any text label. Try this button to the right. Using the Text Tool, click on the ‘stretch button’ </span>
<span class="xr_tl xr_s5" style="top: 805px;">text and edit it, and you’ll see the button graphic change.</span>
<span class="xr_tl xr_s6" style="top: 838px;">4) Re-arrange your objects</span>
<span class="xr_tl xr_s5" style="top: 864px;">Now let’s try some object moving and resizing. Choose the Selector tool (the large arrow at the top) and drag on the </span>
<span class="xr_tl xr_s5" style="top: 880px;">photo on the top right of this page. See how the text flows around it. Try dragging on the headings or the ‘Stretch </span>
<span class="xr_tl xr_s5" style="top: 897px;">button’ above and Preview your website again. What you see in Designer Pro is exactly what you get on your web </span>
<span class="xr_tl xr_s5" style="top: 914px;">page. Anything, anywhere.</span>
<span class="xr_tl xr_s5" style="top: 947px;">To resize an object drag on one of the corner handles shown around the selected object. Try it on this pale flower </span>
<span class="xr_tl xr_s5" style="top: 964px;">symbol under the text. Click on it with the Selector arrow, then drag a corner handle.</span>
<span class="xr_tl xr_s5" style="top: 997px;">This flower is special in one other way - it’s a Repeating Object and appears at the same position on every page of </span>
<span class="xr_tl xr_s5" style="top: 1014px;">your website. There is more information about Repeating Objects on the <a href="advanced.htm" onclick="return(xr_nn());" onmousemove="xr_mo(this,0)" >Advanced</a> page.</span>
<span class="xr_tl xr_s5" style="top: 1047px;">To rotate an object click on it again so you get rotate handles in the corners. Drag on these to rotate the object. Try </span>
<span class="xr_tl xr_s5" style="top: 1064px;">it with the petal shape or a text heading even. This way you can easily move, resize and rotate just about anything on </span>
<span class="xr_tl xr_s5" style="top: 1081px;">the page.</span>
<span class="xr_tl xr_s5" style="top: 1114px;">Step 5 continues on the next page:</span>
</span>
<img class="xr_ap" src="index_htm_files/11.png" alt="" title="" style="left: 63px; top: 433px; width: 31px; height: 29px;"/>
<a href="http://www.xara.com/link/" onclick="return(xr_nn());">
<img class="xr_ap" src="index_htm_files/12.png" alt="" title="" onmousemove="xr_mo(this,0,event)" style="left: 599px; top: 941px; width: 115px; height: 24px;"/>
</a>
<img class="xr_ap" src="index_htm_files/13.jpg" alt="" title="" style="left: 63px; top: 664px; width: 135px; height: 126px;"/>
<img class="xr_ap" src="index_htm_files/14.png" alt="" title="Click to enlarge" style="left: 544px; top: 149px; width: 205px; height: 286px;"/>
<img class="xr_ap" src="index_htm_files/15.png" alt="" title="" onmousemove="xr_mp(5,0)" style="left: 329px; top: 551px; width: 193px; height: 36px;"/>
<a href="http://www.xara.com/products/webdesigner/" onclick="return(xr_nn());">
<img class="xr_ap" src="index_htm_files/16.png" alt="" id="LiveCopy:58BetaFooter1.MouseOff.1" title="" onmousemove="xr_mo(this,0,event)" style="left: -1px; top: 1348px; width: 65px; height: 27px;"/>
</a>
<img class="xr_ap" src="index_htm_files/17.png" alt="" title="" style="left: 65px; top: 314px; width: 22px; height: 100px;"/>
<a href="index_htm_files/38.jpg" class="highslide" onmouseover="hs.headingText=''" onclick="return hs.expand(this, { headingText: '' } )">
<img class="xr_ap" src="index_htm_files/18.jpg" alt="" title="" onmousemove="xr_mo(this,0,event)" style="left: 560px; top: 165px; width: 166px; height: 249px;"/>
</a>
<a href="photos.htm" onclick="return(xr_nn());">
<img class="xr_ap" src="index_htm_files/19.png" alt="" id="LiveCopy:58AutoRepeat1.MouseOff" title="" onmousemove="xr_mo(this,0,event)" style="left: 382px; top: 1301px; width: 38px; height: 38px;"/>
</a>
<img class="xr_ap" src="index_htm_files/20.png" alt="" title="" style="left: 446px; top: 5px; width: 41px; height: 21px;"/>
<div id="xr_xo0" class="xr_ap" style="left:0; top:0; width:770px; height:100px; visibility:hidden;">
<a href="" onclick="return(false);">
<img class="xr_ap" src="index_htm_files/20.png" alt="" title="" style="left: 446px; top: 5px; width: 41px; height: 21px;"/>
<img class="xr_ap" src="index_htm_files/21.png" alt="" title="" style="left: 496px; top: 5px; width: 48px; height: 21px;"/>
<img class="xr_ap" src="index_htm_files/22.png" alt="" title="" style="left: 554px; top: 5px; width: 68px; height: 21px;"/>
<img class="xr_ap" src="index_htm_files/23.png" alt="" title="" style="left: 631px; top: 5px; width: 55px; height: 21px;"/>
<img class="xr_ap" src="index_htm_files/24.png" alt="" title="" style="left: 695px; top: 5px; width: 65px; height: 21px;"/>
<img class="xr_ap" src="index_htm_files/25.png" alt="" title="" style="left: 683px; top: 172px; width: 41px; height: 41px;"/>
<img class="xr_ap" src="index_htm_files/26.png" alt="" title="" style="left: 599px; top: 941px; width: 115px; height: 24px;"/>
<img class="xr_ap" src="index_htm_files/27.png" alt="" title="Click to enlarge" style="left: 559px; top: 164px; width: 167px; height: 251px;"/>
<img class="xr_ap" src="index_htm_files/28.png" alt="" id="LiveCopy:58AutoRepeat1.MouseOver" title="" style="left: 392px; top: 1309px; width: 17px; height: 18px;"/>
<img class="xr_ap" src="index_htm_files/29.png" alt="" id="LiveCopy:58AutoRepeat1.MouseOver.1" title="" style="left: 364px; top: 1309px; width: 18px; height: 18px;"/>
</a>
</div>
<div id="xr_xd0"></div>
<div class="xr_ap xr_prl1010" id="xr_xp4" style="left:0; top:0; visibility: hidden; display: none;">
<div class="xr_ap" onmousemove="xr_mpc(4)">
<img class="xr_ap" src="index_htm_files/30.png" alt="" title="" style="left: 117px; top: 190px; width: 589px; height: 537px;"/>
</div>
<div class="xr_ap" onmousemove="xr_mpc(4)">
<img class="xr_ap" src="index_htm_files/31.png" alt="" title="" style="left: 251px; top: 247px; width: 216px; height: 231px;"/>
</div>
<span class="xr_s5" style="position: absolute; left:253px; top:517px;" onmousemove="xr_mpc(4)" >
<span class="xr_tl" style="top: -11px;">Drag here to change the hue to be any color of the spectrum</span>
</span>
<span class="xr_s5" style="position: absolute; left:506px; top:256px;" onmousemove="xr_mpc(4)" >
<span class="xr_tl" style="top: -11px;">Click here to see more </span>
<span class="xr_tl" style="top: 3px;">advanced controls</span>
<span class="xr_tl" style="top: 17px;">such as showing the hex </span>
<span class="xr_tl" style="top: 31px;">RGB color values.</span>
</span>
<span class="xr_s5" style="position: absolute; left:506px; top:347px;" onmousemove="xr_mpc(4)" >
<span class="xr_tl" style="top: -11px;">Drag in here to change the </span>
<span class="xr_tl" style="top: 3px;">shade of the selected color,</span>
<span class="xr_tl" style="top: 17px;">to be lighter or darker.</span>
<span class="xr_tl" style="top: 44px;">When changing Theme </span>
<span class="xr_tl" style="top: 58px;">Colors, it’s normally best to </span>
<span class="xr_tl" style="top: 72px;">not adjust the shade by too </span>
<span class="xr_tl" style="top: 86px;">much.</span>
</span>
<div class="xr_ap" onmousemove="xr_mpc(4)">
<img class="xr_ap" src="index_htm_files/32.png" alt="" title="" style="left: 261px; top: 458px; width: 73px; height: 45px;"/>
</div>
<div class="xr_ap" onmousemove="xr_mpc(4)">
<img class="xr_ap" src="index_htm_files/33.png" alt="" title="" style="left: 462px; top: 261px; width: 34px; height: 21px;"/>
</div>
<div class="xr_ap" onmousemove="xr_mpc(4)">
<img class="xr_ap" src="index_htm_files/34.png" alt="" title="" style="left: 396px; top: 355px; width: 98px; height: 12px;"/>
</div>
<span class="xr_s5" style="position: absolute; left:143px; top:257px;" onmousemove="xr_mpc(4)" >
<span class="xr_tl" style="top: -11px;">You can drag the </span>
<span class="xr_tl" style="top: 3px;">eye-dropper </span>
<span class="xr_tl" style="top: 17px;">anywhere on </span>
<span class="xr_tl" style="top: 31px;">screen to pick </span>
<span class="xr_tl" style="top: 44px;">colors from the </span>
<span class="xr_tl" style="top: 58px;">screen</span>
</span>
<div class="xr_ap" onmousemove="xr_mpc(4)">
<img class="xr_ap" src="index_htm_files/35.png" alt="" title="" style="left: 194px; top: 314px; width: 69px; height: 12px;"/>
</div>
<span class="xr_s10" style="position: absolute; left:142px; top:226px;" onmousemove="xr_mpc(4)" >
<span class="xr_tl" style="top: -17px;">The Color Editor</span>
</span>
<span class="xr_s11" style="position: absolute; left:143px; top:557px;" onmousemove="xr_mpc(4)" >
<span class="xr_tl" style="top: -10px;">This panel is created as a pop-up layer which, for the more advanced users, you can see in the Page & </span>
<span class="xr_tl" style="top: 4px;">Layer gallery. The round-cornered panel background was created with the Rectangle Tool, and made </span>
<span class="xr_tl" style="top: 18px;">very slightly transparent with the Transparency Tool. It was given a soft shadow using the Shadow </span>
<span class="xr_tl" style="top: 32px;">Tool. The arrows were drawn as simple straight lines with arrow heads using the Straight Line </span>
<span class="xr_tl" style="top: 46px;">drawing tool.</span>
<span class="xr_tl" style="top: 74px;">Web Designer includes all tools to create just about any graphics and photo effects you’re likely to </span>
<span class="xr_tl" style="top: 88px;">require. And no HTML or JavaScript knowledge required at all.</span>
<span class="xr_tc" style="left: 156px; top: 116px; width: 207px;">Click anywhere to hide this layer. </span>
</span>
<div class="xr_ap" onmousemove="xr_mpc(4)">
<img class="xr_ap" src="index_htm_files/36.png" alt="" title="" style="left: 336px; top: 535px; width: 129px; height: 2px;"/>
</div>
</div>
<div id="xr_xo4"></div>
<div id="xr_xd4"></div>
<div class="xr_ap" id="xr_xp5" style="left:0; top:0; visibility: hidden; display: none;">
<div class="xr_ap" onmousemove="xr_mpc(5)">
<img class="xr_ap" src="index_htm_files/37.png" alt="" title="" onmousemove="xr_mp(5,5)" style="left: 318px; top: 538px; width: 282px; height: 75px;"/>
</div>
</div>
<div id="xr_xo5"></div>
<div id="xr_xd5"></div>
</div>
</div>
</div>
<script type="text/javascript">xr_prifs();</script>
<img class="xr_ap" src="index_htm_files/04.gif" alt="" id="xr_qsq0" style="visibility:hidden;"/>
<!--[if lt IE 7]><script type="text/javascript" src="index_htm_files/png.js"></script><![endif]-->
<script type="text/javascript">xr_aeh()</script>
<script type="text/javascript">
if(document.URL.indexOf("http://designer.xara.com") >= 0)
{
var A="00000979";
var P="DetectName";
var U="DetectUrl";
document.write(unescape("%3Cscript src='http://www.3dstats.com/cgi-bin/3dstrack.cgi?usr=00000979' type='text/javascript'%3E%3C/script%3E"));
}
</script>
</body>
</html>Could you see any of the content in there? did it make sense?
The Same Site, Hand Coded
<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="./css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="wrapper">
<header>
<nav role="navigation">
<ul>
<li><a href="#" class="active" title="Go back to the home page">Home</a></li>
<li><a href="#" title="How to handle photos and other media">Photos</a></li>
<li><a href="#" title="How to publish to the web">Publishing</a></li>
<li><a href="#" title="Adding widgets and extras">Widgets</a></li>
<li><a href="#" title="Advanced features and options">Advanced</a></li>
</ul>
</nav>
<hgroup class="logo">
<a href="#">
<img src="" alt="Xara Designer Pro">
<h2>Xara Designer Pro</h2>
<h3>A demo website</h3>
</a>
</hgroup>
</header>
<section>
<aside class="right">
<img src="" alt="Guy looking up at apple on a string">
</aside>
<h1>Read Me First</h1>
<p>This is a short tutorial, and a working website document you can experiment on.If you’re reading this in Designer Pro then feel free to experiment and explore the features of the program. If you’re reading this as a web page, then this is an example of what you could be producing with Xara Web Designer or Xara Designer Pro.</p>
<p>This is how to create a great looking website in 6 easy steps, using Xara Designer Pro.</p>
<h2>1) Open the Designs Gallery and select a design</h2>
<p><img src="" alt="Designs Gallery" class="left"/>OK we don’t actually need to do this because this document is already open. It’s based on the template design called ‘Beta’. You can see all the templates by moving your mouse over the ‘Designs Gallery’ label on the right side of the window.</p>
<p><img src="" alt="Preview File" class="left"/><strong>Preview your website: Select File -> Preview Website</strong> or just click this icon on the top bar. This button has a ‘fly-out’ showing two options. The first previews just the current page (quickest) the other previews the whole website. Try it now to see what this website looks like in a web browser.</p>
<p>In the Preview window check out the buttons along the top, and move over the various objects, such as the photo above right, or click the links, such as the one immediately below here to see various layer effects</p>
<h2>2)Edit the Theme Colors</h2>
<aside class="right">
<a href="#" title="more about the color editor"><br/>
<img class="right" alt="color pallet">Click to find out more about the Color Editor</a>
</aside>
<p>Move the mouse pointer over the left end of the Color line at the bottom of the screen and click on any of the square color patches. Select ‘Edit’ to display the color editor, and you can now select different colors. For the best results we suggest making Theme Color 1 and 2 similar or matching colors. There are theme colors for all the main design elements of this design.</p>
<p><img class="right" src="#" alt="A screenshot of several templates"><strong>Color Schemes.</strong> To make color editing even easier we provide some ready-made color schemes that you can drag ‘n’ drop onto the page. Open the <strong>Designs Gallery</strong>, go to <strong>Examples -> Example Web Templates</strong> folder and scroll down to the bottom and you will see a variety of Color Scheme thumbnails. Drag any onto this page to see all the website colors change in an instant.</p>
<h2>3)Edit the text on your website</h2>
<p>Click the big T icon on the left set of tools (the Text Tool). Now click on any text and start editing. Try the heading and replace it with your own. When using the Text Tool, the bar across the top allows you to change font, size, etc. The ABC icon at the end is a spell checker control. Text editing is like in any word processor, for e.g. drag to select text.</p>
<p><img src="#" class="right" alt="Stretch Button">You can change button text the same way. Some buttons are ‘stretchy’ and can accommodate any text label. Try this button to the right. Using the Text Tool, click on the ‘stretch button’ text and edit it, and you’ll see the button graphic change.</p>
<h2>4)Re-arrange your objects</h2>
<p>Now let’s try some object moving and resizing. Choose the Selector tool (the large arrow at the top) and drag on the photo on the top right of this page. See how the text flows around it. Try dragging on the headings or the ‘Stretch button’ above and Preview your website again. What you see in Designer Pro is exactly what you get on your web page. Anything, anywhere.</p>
<p>To resize an object drag on one of the corner handles shown around the selected object. Try it on this pale flower symbol under the text. Click on it with the Selector arrow, then drag a corner handle.</p>
<p>This flower is special in one other way - it’s a Repeating Object and appears at the same position on every page of your website. There is more information about Repeating Objects on the Advanced page.</p>
<p>To rotate an object click on it again so you get rotate handles in the corners. Drag on these to rotate the object. Try it with the petal shape or a text heading even. This way you can easily move, resize and rotate just about anything on the page.</p>
</section>
<section class="prefooter">
<p>Step 5 continues on the next page:</p>
<a href="#" alt="Next Page">Next Page</a>
</section>
<footer>
<small>Website made using only Xara Web Designer, and no other graphics or software tools</small>
</footer>
<div>
<!-- Add any javascript here-->
</html>Notice how this version is much shorter, and easier to read (as in you can actually see the content). This helps the site load faster. We’ve also provided search engines with more context. All of this helps improve how search engines see your site, which in turn helps improve your rankings. The end layout will end up being the same, so for the person seeing the website they might not notice the difference, but for a search engine, the bottom one is much easier to understand.