My screen resolution is 1024 x768 and my webpage displays full in my own screen. Everything looks nice.

But when I change the resolution to 800 x 600. There is a horizontal scroll bar at the buttom of my screen and the webpage off center.

What is the proper way to design the webpage when I need to take the screen resolution into consideration.

But let's take this website as an example. The webpage well centered and only the fonts, images, tables got larger, but everything is still centered.

How can I do that?

I ran into that problem a few times, and im still trying to get the hang of it, for the fonts, try using the basic fonts, i believe there are a standard of about roughly 30 fonts that everyone should have, about the resolution of the site, if you havent already done so, keep your percentage on tables try not to use actual pixel sizes, tables can be your friend in some cases, images are another issue, you have to design images that will work with most resolutions, keep in mind the table factor, if they somehow dont work then try again. i usually constantly switch back and forth resolutions to see if everything matches up 85% of the time they do, sometimes they dont, it takes a little practice but im sure it will all work out..

I hope this helps a little!

Do a search on keywords: web design liquid. The principles you'll read regarding fluid design will answer your questions about screen resolutions, browser window size, etc. Put into good use, those principles will solve all of your problems.

Here, I did the search for you :)
http://www.google.com/search?hl=en&lr=&safe=off&c2coff=1&q=web+design+liquid&btnG=Search