Example of using Snippets - XSitePro Website Design

Home Previous  Next


Brought to you by XSitePro Website Design Software

professional website design made easy      




While surfing the Internet you come across a site such as Accuweather.com that provides some code for displaying weather information on your site for free. You decide to add this to your site. The site provides you with the code you need. To grab it, go to:


http://netweather.accuweather.com/signup-page1.asp? and then follow the instructions.



When you get your code it will look something like this:


<div style='width: 120px; height: 60px; background-image: url( http://vortex.accuweather.com/adcbin/netweather_v2/backgrounds/clouds_120x60_bg.jpg ); background-repeat: no-repeat; background-color: #;' ><div style='height: 48px;' ><script src='http://netweather.accuweather.com/adcbin/netweather_v2/netweatherV2.asp?partner=netweather&tStyle=normal&logo=1&zipcode=10001&lang=eng&size=7&theme=clouds&metric=0&target=_self'></script></div><div style='text-align: center; font-family: arial, helvetica, verdana, sans-serif; font-size: 10px; line-height: 12px; color: #;' ><a style='color: #' href='http://www.accuweather.com/us/NY/NEW YORK/10001/city-weather-forecast.asp?partner=netweather&traveler=0' >Weather Forecast</a></div></div>



Don't worry about what all this code means - you do not need to know!



The normal process for adding this code to a Web page would be to view the source code of your own page and insert this at the point where you want the information to appear. However, when you use the snippets feature of XSitePro you do not need to worry about looking at the source code for your page. All you need to do is follow the steps below.




Load the page on which you want the weather information to appear.




Go to the Designer tab so that you can see a WYSIWYG (what you see is what you get) view of the page.




Position the cursor at the point where you want to insert the weather information.




Right click with your mouse and select Snippets and the Insert New. The New Snippet window will appear on your screen. By default the Snippets window will open with the Source tab active. If you want to add code this is fine, but if you’d prefer to add something using Designer, just click on the Design tab.






Go to the Accuweather site at http://netweather.accuweather.com/signup-page1.asp? and then follow the instructions on screen to grab your weather page-code.




Return to XSitePro and paste the code into the Source tab on the New Snippet window.






Leave Add to Library unchecked and click the button_add_new_snippet_insert button.



If you preview your Web page you should now see the weather information being fed directly from the Accuweather.com site into your page. The information will be at the exact point where you had the cursor positioned before you inserted the snippet.



Home  Previous  Next