Home Improvement EssentialsHome Improvement For Unbeatable Prices

Tools Jquery

The One Page Website - How To Create A One Page Website Using Jquery!

Is it possible to create a one page website?

One that can provide relevant information on your chosen topic and yet still be lightweight and easy to write AND feature well in the search engines?

Well the answer is undoubtedly yes! And here's where I will tell you how.

We'll go through the entire site step by step.

1. Get jquery at www.jquery.com!

What is jquery?

Jquery is a super-lightweight multi-functional javascript library which allows you complete control over every aspect of your web pages (CSS and HTML).

It's a simple include that you provide in your web page...

eg. "<script type="text/javascript" src="jquery.js"></script>"

Check out the jquery.com website to get more details, but for the time begin, just understand that we need this to dynamically "call in" content to our one page site.

2. Get a template for your site!

Try http://www.freecsstemplates.org/ for some great free web templates.

Pick a template you like and create the file index.html.
This will be your "one page" site and all content will be "pulled" into this page.

3. Create your content area
You must now create the DIV tag where your content will be placed.

A line of code something like...

"<div id="content"></div>"

is required in the middle of your page.

This is where jquery will place your content.

4. Create small files to hold your content.

You'll need to create files that will hold your content in basic HTML format.

For example, aboutus.html may contain...

About Us

WebCom Systems has been in the internet business
for over 10 years now and has vast experience in developing
every type of site from basic advertising sites to large ecommerce software applications for a variety of businesses.

5. Create a menu to call in the content

Now this is where the jquery magic begins! We now need a simple menu to drive the website.

First we need a javascript function to call from our menu, here it is...

"<script>function Call_content(url){$("#content").fadeOut('fast').load(url).fadeIn('slow');}</script>"

So, your menu that call this javascript function should look a bit like this...

About Us

So there we have it! You can now add as many content files as you like and add them to your menu!

Easy eh?

Now to complete the whole setup, remember to

• -> add your site to Google webmaster tools
• -> add relevant keywords and description to your page
• -> add in Google Analytics for site stats
• -> maybe add in a few adsense adverts!

And there you have it, a one page website!

Please feel free to visit my company website at http://www.webcomsystems.biz to see a working example of this.

 

About the Author

WebCom Systems has been providing web design services for business in the UK for past ten years. Our approach has always been to offer clients an affordable presence on the web whilst maintaining the highest quality of web design using the latest internet tools.

How to check the CSS, Java script, JQuery & mootools code ? Is there any tool around ?

How to check the CSS, Java script, JQuery & mootools code ? Is there any tool around on which we type the code of these and that can highlight and explain the errors if any ?

OR are there different tools/softwares/utiliteis for each of these ? then kindly tell me those.

thanks

CSS:

http://jigsaw.w3.org/css-validator/#validate-by-input

http://jigsaw.w3.org/css-validator/

JavaScript:

http://www.javascriptlint.com/online_lint.php

Test jQuery and jQueryUI code online - by Google:

http://www.devcurry.com/2009/01/test-jquery-and-jqueryui-code-online-by.html

MooShell: Test your MooTools Code Online: http://techie-buzz.com/internet-tools/mooshell-test-your-mootools-code-online.html

Ron

JQuery TOOLS