Web Design and Graphics Room. Thread, Sky's Web Page Tutorials. Part One

HOW WEB PAGES WORK
Part One.


It's an easy mistake to think that laying out a web page is just like laying out a page for a printed publication, when the "Design View" in Dreamweaver appears so similar to desk top publishing programs like Quark Express. The finished web site layout can also appear similar to printed content in many cases. But web page content is very different stuff indeed, and requires a totally different approach.
So I'm going to begin by explaining exactly what we are dealing with when we assemble web content, and what we must bear in mind as we build web sites.


RESOLUTION
One way where the "printed page layout" idea falls down straight away is due to different SCREEN RESOLUTIONS. I'm going to try to explain this clearly, as it's essential to understand how your user's monitor affects how they will see your page. (By "user" I mean the person who will be downloading and looking at your webpage on their computer.)

You may well have just gone out and purchased a brand new 22 inch monitor. (Well, I have! ) Or maybe you've just got a 17 inch monitor, or a 19 inch... It's irrelevant. All those inches refer to is the physical size of the monitor box that sits on your desk. Measured corner to diagonal corner, it's the size of the glass only, and bears no relation to what's actually ON the screen. Get one point clear in your mind... THERE IS NO SUCH THING AS INCHES ACTUALLY ON YOUR COMPUTER SCREEN.

What you are looking at are millions of tiny squares of coloured light called PIXELS. As you look at the screen, that's what you are seeing. There are a certain number across the screen, and a certain number down the screen. (And if you multiply those numbers together, you get the total of all of them on your screen... and that's as far as I'm going where arithmetic is concerned!!!) And that's how whatever is ON your screen is measured... by how many pixels you have across by how many down.

If you could look at your screen with a powerful magnifying glass, the little beggars would look like this...







So can this total number of pixels across and down the screen differ on the same physical sized monitor? YES.

It's not your actual monitor that decides how many pixels you see, but your graphics card. It's known as your screen resolution, and it can be changed. (Though most new flat screen monitors advise a specific resolution that they work best at, and it's best to use that resolution.)

So where do you see what resolution you are using ? Right click on desk top, select 'Properties' then the Settings tab, and you can see what resolution your screen is set to. Here's mine...


...so you can see I've got 1680 pixels across my new wide screen, and 1050 down it... (and an old graphics card!!!) Most of you will have 1025px by 768px.


How does this affect what you see?

Well, with more pixels across, you've got more screen space, you can get more on there, but all the elements appear smaller. A few years ago, 800px x 600px was a common screen resolution, and a 32px icon appeared quite large and blocky. (Blocky because the actual pixels were bigger... being fewer of them.) The icons on my screen appear quite small, because they are 32px out of 1680px.
Another example, take a photo measuring 600px width. On a screen resolution of 800px wide, the photo will take up most of the screen. On a resolution of 1024px, there will be space either side of the photo, and on a screen resolution of 1680, the photo will only take up a small area. But in each case, the photo is still 600px in size.


Right, before we go on to the next step, be clear in your mind. On screen measurements are in pixels, and how many pixels you have is down to your graphics card resolution, irrespective of how many inches your monitor glass is!

___________________________



SO HOW DOES THIS EFFECT YOUR USER VIEWING YOUR WEB PAGE?


One thing that is users hate on web pages is having to scroll sideways to see all the page content. Up and down scrolling is happily accepted, but having page content wider than the screen is always to be avoided. (That's your USER'S screen... which I hope you now realise, isn't necessarily the same as yours!)

A few years ago, a most common resolution for monitors was 800px by 640px. So sites were constructed to fit comfortably into an 800px width, which meant content was designed to fit into an area of about 760px wide. (Leaving room for window edges and scroll bars.) Many sites still are. Have a look at the BBC News site here, the top brown banner is 760px wide exactly, and all the content fits in that width.
Most of us have higher resolution screens now, and will see an area of blank space to the right. (Hopefully by now, you should have sussed that the higher your monitor's resolution is, the greater area of blank space you'll see!) This is the BBC being very user friendly, and making sure that the few users who still have screen resolutions of 800px by 640px can view the site with no side scrolling.

In fact, it's estimated that now only about 8% to 9% of internet users are still using a resolution of 800px by 640px, and it's becoming normal to fit your content into a width of about 970px, like the Sky News site here. This site will sit happily in the most common resolution size of 1024px width, (but the 9% with an 800px resolution would have to scroll sideways.) But this space gives the web designer more room to play with.


Next tutorial, I'll be explaining the most important reason why web page content differs from a desk top publishing approach, and how it all gets to your user's computer. Then we can start looking at Dreamweaver.
Meanwhile, please post any questions you may have about the above. :wink:

Were you waiting for me Sky!?....if so, I got all that please carry on with the next lesson.
craig

__________________
Please feel free to visit my personal carp fishing website at www.ayorkshirecarper.co.uk
or the sites for my Sheffield based Guttering and Roofing business's at www.a1gutterclean.co.uk and www.a1roofingservices.co.uk

No, it's okay, I've been held up by having a horrible cold.

As long as what I've put so far is understandable, as I want these to be general web tutorials for everyone.
Your specific questions I'll reply to on the thread.

Number 2 here will be along in due course. :wink:

ok, but won't my posting questions on here like this spoil the 'layout' of the tutorials or am I missing the point!?
craig

__________________
Please feel free to visit my personal carp fishing website at www.ayorkshirecarper.co.uk
or the sites for my Sheffield based Guttering and Roofing business's at www.a1gutterclean.co.uk and www.a1roofingservices.co.uk

Yorkshire Carper
No your posting questions will not spoil the flow of the tutorials.
Some of your questions may be relevant to the tutorial.

A copy of every tutorial will be placed in the IDF Archives for safe keeping.
Also Sky can edit or delete any post in this thread if it should detract from the main tutorial OK

__________________
Knowledge is not knowing all the answers,
but knowing where to find the answers.
www.smitheram.co.uk

Moderator of, Web Design/Graphics Room.
P4-XP pro-IE7-B/B-ZA-AVG

Oh right, thanx for explaining that pete.
craig

__________________
Please feel free to visit my personal carp fishing website at www.ayorkshirecarper.co.uk
or the sites for my Sheffield based Guttering and Roofing business's at www.a1gutterclean.co.uk and www.a1roofingservices.co.uk

Part one now saved in the IDF50 Archives.

__________________
Knowledge is not knowing all the answers,
but knowing where to find the answers.
www.smitheram.co.uk

Moderator of, Web Design/Graphics Room.
P4-XP pro-IE7-B/B-ZA-AVG

The very first Topic in this room is the IDF50 Archive page open it and click the Big Red Here.
This takes you to the Archive index, under the Graphics heading at the bottom is Sky's tutorial link.

Direct link
http://www.idf50.co.uk/webhost/members/info/index.htm

Note I will delete some of the posts relating to this subject not required.

__________________
Knowledge is not knowing all the answers,
but knowing where to find the answers.
www.smitheram.co.uk

Moderator of, Web Design/Graphics Room.
P4-XP pro-IE7-B/B-ZA-AVG

Sorry but that's too big a gap between the first tutorial and the second.

I am lost already, are these tutorials for beginners, :shock:

PS..... maybe I am too thick for this it took more than one go to find the tutorial,

Why not call it Sky's tutorial. :?: :?: