JWG Website Tutorials:
Site Structure
I have been asked to write this tutorial as an add-on to the webhosting and ftp guides, as it seems many people are a bit bewildered, and unsure where to start with their website structure.Consequently, they can end up with their site getting into a disorganized, unstructured mess, when it becomes a nightmare trying to find anything at all! Sound familiar? Yes, me too... So let's do it right from the start, and avoid this happening to you :-)
OK, so you have read the webhosting guide, gone off and found yourself some webspace with a hosting company, and maybe you are even the proud owner of a brand new domain name. So, now what? Well, the first thing to realise is that the website that people visit when they type your url into their browser, is nothing more than a collection of files and folders held on a computer by your webhost, which is exactly the same as the files and folders you have on your computer. The only difference is that their computer (called a server) is much bigger than yours, and is permanently connected to the internet, so that everyone can download these files, and view your website in all it's glory: You have to organize these files and folders on your own computer, and then transfer these files to your webhost, preferably using ftp (file transfer protocol).
Right: On to Site Structure Proper!
Make a folder on your computer, on C Drive (if you only have one hard drive), or on to the drive holding your data/files if you have more than one. (My hard drive is partitioned, so I use C Drive for my operating system, and D Drive for my files, etc). Don't put it on the Desktop, or your My Documents folder (because that is generally somewhere else, and the path to it can become long-winded and confusing), so for ease of use, just put it in the root of the Drive. If you are familiar with your computer's directory structures, you can put it anywhere you like, but this tutorial aims to keep the file-path as simple as possible, to assist newbies to directory structure and paths.
In this example, we have a folder called "My Webs" and inside that there will be separate folders for each website, so if you are likely to have more than one site in the near future, name your folder "My Sites" "My Webs" whichever you prefer, and inside that make a new folder for your site, and name it properly.
We are working with examplesite1 today, but you will work with your own site name of course. Double click on the site folder to open it, and begin creating new folders inside like so:
These are the top 3 directories you will need: files: images: pages. You do not need any more main directories at the start, as you will create everything else inside these 3 main folders.
So, let us begin with the pages directory. Double click on this to open it, and have a look at the address bar of your window:
This shows you the beginnings of your site structure: I am in Drive D, My Webs, examplesite1, pages... NB: always use lowercase lettering for directories, page names etc..It is a good habit to get into, and makes it much easier when typing urls as they tend to be case-sensitive. Capitals are not necessary.
Right click within this folder and choose "New Folder"
Begin creating folders for the separate areas of your site. You can always add to this later, as your site grows and you add new sections, but if you dont start with separate folders, all your pages will eventually get mixed up, and wont be easy to locate.
Here is an example:
If you only have a homepage to begin with, dont worry, just add these folders as you begin to fill up your site. As you make your pages in your html editor (more about this later), you will be saving them into these folders.
OK, now let's move back up to our top 3 directories, and open "images" this time.
Create separate folders in here too:
These folder names are only examples of course, as your website is likely to be very different from mine, but the principle remains the same whatever your website contents, and a sitewide folder within images is always useful, as you can put into that folder any backgrounds, banners or logos that you may be using throughout the site:
So, we are now going to go deeper into the directory structure. Still with me? Good :-)
We are going back up to images, and into tutorials:
Inside tutorials, we have created more folders for the different images we are going to use for our tutorial pages:
If we go into screenshots, we can create different folders for each individual tutorial, so that the screenshots for one tutorial do not get mixed up with the screenshots from another tutorial, and become hard to locate:
Ok, we are now going back up to our 3 main directories, and we click on files:
We can create folders in here for our music files, and any zipped files of fonts, tubes, or whatever that we may want to offer for download etc..
Now that our site has a structure, we need to be able to create webpages to upload to it. There are several HTML editors available to purchase, and some people like to handcode their pages in Notepad. The choice is yours; I have used Dreamweaver, and I love HTML-Kit, and another popular choice is Microsoft Front Page. Have a look in my directory for some free editors, and you can always use the search facility at download.com to find more.
So, open your chosen HTML Editor, and click on create new site/web, whatever they name them in your editor. (In FP2002, you click on File :new page or web, and then you browse your computer until you find the site that we have just set up). (In Dreamweaver, you click on Site: new site, and you will be asked to name it. Name it the same as the one you have just set up, and then you will be asked for the "root folder" of your site. This is where you browse to the site in question). When you have done all this, your site will appear in your editor as you have created it:
You can now begin creating your pages. Your home page must always be named index.html, and must be placed in the "root directory" ie: not inside any of the folders you created. All other pages will go in the pages directory, inside their relevant folders:
You can see in the example above, that the page "aboutme.html" has been placed in pages, and inside pages, in "personal". similarly "resources1.html" is in pages, and then resources.
The screenshot also shows how the structure that we have just created, looks in your editor.
When you make each page, remember to save your images into the correct folders as you add them. If they do go into the wrong place, however, it is easy to move them by cutting and pasting from one folder to another. *It is much easier to use lowercase letters for page names and NO spaces.* They look horrible in the address bar with % and stuff in them. If you need to separate words, use the underscore eg: jewels_graphics.html
Finally, you have created your site, with a few pages ready to go, and so the next thing to do is upload to your webhost.
Open your ftp client, and set it up with your site details and info (this will be given to you by your webhost). When you connect to your host, copy everything from your site on your computer, to your webhost. Basically, you just select all files, folders etc, and copy them across. The directory structure of your site will be exactly the same on your webhost's computer as it is on yours.
Once the structure is up on your "remote site" (remote = website on webhost's computer) (local = website on your own computer) you just add new files as you need them- new images, pages and so on...and you can simply copy and paste into the relevant folders.
If you have a look at my ftp tutorial, you will get a clearer idea of what I mean. I make all my pages in an html editor, but I use an ftp client to upload everything, as it is quicker and easier, once you have learned how to use it. Don't worry, my tutorial explains how to do that too.
If you have any questions on this or any of my tutorials, please post in the jwg blog and I shall be pleased to help you further if I can.
©jewelswebgraphics.com 2001-2006