Web Pages Design and Structure

.

Web Site Structure

[ Design Home Page ] The structure of the web site is one of the most important things to get right! Without good structure, the management of your web site will be difficult to say the least, and once you start to have a lot of web pages, then it will become almost impossible to manage them.

Mine will never become that complicated, and so I don't need to bother with it, and any case, if it did, then I can think about it later.

No ! Do it now ! The longer you leave it, the more time consuming and awkward it will be to do it at all.

So.... what do we mean by structure? Well, think of filing pieces of paper - pages. There's a way to do it so that you can find them easily, and add more sheets (pages) as required, or, you can simply throw all the sheets into a room and sort them out later. People happily use filing cabinets, drawers and folders to file pages, but when it comes to computers, they often just throw the pages all into one room !

It just happens that the correct structure for filing pages, is the best structure for filing web pages too ! Your computer can do it very easily indeed.

Let's start with a simple system, and continue the analogy of the filing cabinet. The filing cabinet is the hard disk on your computer, (usually called drive c: ). We'll consider just one drawer in the cabinet. Your web pages drawer. Lets name it web

so we start with:

c:\web

We may need to have more than just Rootsweb FreePages web pages at some time in the future too, for example something to do with business, or something on a different Internet file server, so lets create a folder called freepages now.

c:\web\freepages

Now let's make some more folders, inside the freepages folder. The Rootsweb FreePages allows you to have lots of different topics: computers, genealogy, pets, etc. So let's create folders for them:

c:\web\freepages\computers_html
c:\web\freepages\genealogy_html
c:\web\freepages\pets_html

Why did we name them like that? Because the hard disk on the Rootsweb computer names them like that, and we want the system to be identical on our hard disk. This is where it starts to get important, because if the filing structure is exactly the same on your computer as it is on the Rootsweb computer (where you will be putting your web pages) then management of your web pages will be a piece of cake!

That's the basic structure. Now let's look more carefully at that genealogy folder (genealogy_html).

What sort of things will we be putting in there? Web pages, button and background graphics, photos of ancestors, and so on. So create sub folders for them.

FOLDER NAME WHAT GOES IN THERE
c:\web\freepages\genealogy_html Your index.htm file (the front page) goes here.
(It must be here!)
Perhaps some other pages too if you wish.
c:\web\freepages\genealogy_html\common\ Some special files which will need to be looked at by your page files will go here. They are common to all pages.
c:\web\freepages\genealogy_html\graphics\ This is where you will put all of your general graphics files, the buttons, logos, background images, etc., and as photos are also graphics, then we can put them here too.

Hang on... do we really want to mix up our photos and the button graphics? No, of course not. So let's create two sub folders inside graphics:

\general\
\photos\
\maps\

yes... may as well keep maps in their own folder too. If you need more graphics categories, just create them, or add them later when and if they are needed.
c:\web\freepages\genealogy_html\people\ This is where we put our web page files about families and individual people. But your web pages are about more than one family surname? Fine ! make separate sub folders for each family.

\smith\
\robinson\
\mills\

and so on.

All Smith family people web page files can go in the \smith\ folder. Furthermore, the Smith family can have its own front page with an index - a file called index.htm ! So can the other families.
c:\web\freepages\genealogy_html\places\ If your family history pages are going to include pages for places, for example information and photos of towns, etc. Let's put those in a separate folder. You're starting to think ahead of me now... yes, we need sub folders for England, USA, and perhaps other countries too. Easy.

\england\
\usa\
\ireland\

and to keep things really tidy... sub folders of \usa\ for

\usa\ca\
\usa\fl\
\usa\ny\

You can even have county folders inside the state folders too if you wish. The same thing for the \england\ folder with separate counties. You don't need to create all of them now, just add them as you need them.

The folder structure of my Rootsweb FreePages web site

(at the time of writing this - more will be added when needed)

c:\web\freepages\

and sub folders for:
\computers_html \index.htm front page with index
\design\ index.htm
\ftp\ index.htm
\structure\ index.htm this page
\graphics\
\genealogy_htm index.htm
home.htm		 the front cover page
the home page with the index
\01-to1699 index.htm general description files
\02-1700-1799 index.htm general description files
\03-1800-1900 index.htm general description files
\04-1900-2000 index.htm general description files
\common special files common to all pages .css
\events index.htm events in history files
\graphics \certs certificates and register copies
\general buttons, logos, backgrounds .gif & .jpg
\maps map graphics .gif & .jpg files
\pics \nfk \terrington
\tilney-as		 pictures of places .jpg files
\ntt \epperstone
\newark
\nottingham
\southwell		 pictures of places .jpg files
\maps index.htm web pages with maps
\people index.htm all people pages here
\aus (Australia) general pages, emigration, etc.
\usa
\stories anecdotes, stories, newspapers, etc.

Now I have a filing system, a filing cabinet with drawers, folders and sub folders, where I can store files neatly and where they can be found easily. What's more, I can add extra folders now whenever I need them.

If you don't have a good structure right from the start, then it will be a nightmare to change it later. That's because each web page file has links to other web page files, and if I move one page, then I would have to edit every page that has a link to it!

If I create a new web page file, then I create it in it's correct folder right from the start. Also, any graphics in that new page, buttons or photographs, are always where I can find them easily. The links from the web page to call the graphic are easy. All buttons are in \graphics\general\ and they always will be.

And I can easily have a link from here on this page:

back one folder to the main computing front page at \computers_html\index.htm
the link above is simply <A HREF="../index.htm">main computing front page</A>
(that's back one folder ../ and its index.htm file)

Note: on this page where I write about my own hard disk on my own computer, I use folder names and file names with \ separators, and when I refer to files on the Rootsweb computer I refer to them with / separators. (They are just the "dividers" between the folders). It just happens that that is the conventional way of writing them down. In html web page code for web pages, links are always written the UNIX way with / dividers, because the Rootsweb computer runs on the UNIX system, and that's where your actual live web pages live.

But you keep an exact mirror copy of all of the web pages files on your own computer and on the Rootsweb computer.
Your computer Rootsweb computer
\genealogy_html\ /genealogy_html/
\genealogy_html\index.htm /genealogy_html/index.htm
\genealogy_html\graphics\general\ballgreen.gif /genealogy_html/graphics/general/ballgreen.gif
etc.

You edit the page file on your own computer, test it with your web browser on your own computer, and then when you are satisfied, send it using FTP over to the Rootsweb computer. OK... I'm happy (I think!), so I'll upload this page using FTP. In any case, if I need to alter something, then I can do it easily on my copy on my computer, and then send it again, which will simply over-write the old version of the file on the Rootsweb computer. Quick final spellcheck using AOL Press.... here we go.

also see:

About this page

This page was created using AOL Press 2.0

It has virtually all of its content in a table with two columns. A narrow column 20% screen width (that only has a link in it to the home page, and the main column with all the main text in it. That's because I didn't want the length of the lines of text to be too long. Shorter lines are more easily readable.

Inside this column, there are a couple of places where I have "nested" another table, one with borders showing, and the other (describing my folder structure) without. That's how I managed to get the layout of that section correct. It is a table with six columns and lots of rows.

If you want to see the source code, and "borrow" it if you wish as a template for your own page(s), then on your web browser, on the top menu click on view | source. You can save that to your own hard disk if you wish.

[ Top of this Page ]
[ Computers Home Page ]

Copyright ©2000 Rod Neep