How sites are structured

- When I first started to design websites, one of the things that really frustrated me was that everyone just seemed to assume that I already knew how to do certain things. For example, no one ever really told me the proper way to structure my websites. It was just one of those things, I guess, that everyone just sort of assumed I knew how to do. So I want to make sure that I showed you the basic structuring and anatomy of a simple site. This is going to help you, I hope, plan and structure your own projects. As well as ensure that you are structuring things in the most efficient way possible.

You can see, on my desktop, I have a folder called explore. I've got a little website in here. By the way, I don't develop on the desktop. It's just the cleanest way to show this to you. So when I open this up, here are my files and folders. And this is actually a website. Not a very complex one, but it is a website. Now there are a couple of things that I want to point out to you. Number one, it's really just a collection of files and folders. For example, right here inside the folder, I've got index.htm. Index.htm is the homepage of any site.

We used to have one of either two files, index.htm or default.htm. I know that there are some people out there still using default, but index is certainly the most popular of those now. It's just if you place index.htm or .php or .cfm or whatever webserver you're using. If you place that in what they call the root folder, and the root folder is just the folder that contains your website, then that's your homepage. That's the page that browsing to that particular site will go to. You will also notice that I have other files that are what we call top level files.

In this case, mission, tours, resources. And that means they are in the same directory as the index file. However, we do have some files in subdirectories. In this case, there's a directory called resources. And if I open that up, I can see that I have an faq file in there and a links file in there. So what does that have to do with the structure of the actual site? Well, let's go ahead and check that out. Let me rearrange these and what I'm looking at right here is the live Explore California site. Now this is a site that I did years ago. For one of the Dreamweaver courses.

It's just a nice sample site, it's still online. It serves the purpose of what we need to take a look at here. As I mentioned before, we have a subdirectory called resources, right? So if I click on resources, I can see that it goes to the resources.htm file. Well, that's this file right here, that's perfect. However, if I click on the FAQ link right here, notice that that now goes into a resources directory and finds the file faq.htm. So if I open up that directory, you can see the correlation between the structure of the site and the address bar up top.

So it's just mirroring that against nothing more than a collection of files and folders. Now you may have noticed some of the directories are named slightly differently. For example, all these directories up top have underscores in front of their names and they have things like css, images, video, scripts. Those are all resources, that means that they are not individual webpages themselves. They're resources that those webpages are using. For example, the css directory includes the site's css files. The images folder, as you would imagine, contains all of the images that are being used by the site.

There's a couple of reasons why we name folders that way. Number one, the underscore indicates to me that that is a resource and not a section of the site. So it's not me trying to organize the site into logical sections. It's actually resources that the site is using. The other thing is, by giving them an underscore it moves them all up to the top of any directory listing. So it's very easy for me to find and filter out my resources so that I can access them quickly or even ignore them if I really want to focus on the rest of the site.

I can either just flip the order around or just ignore all those underscore directories. It makes it very, very simple to separate those. Now, this as I mentioned before is a really simple site. One of things you're going to notice is that if you develop a site like this or a nice simple static site and you get a webhost and you link to the root directory of your webhost in anticipation of uploading this file, there's going to be some files already there that you may not recognize or might not know what those files are doing. So I'm going to really quickly jump over to my control panel for this particular site and take a look at the site as it's live online.

Now, you're going to notice that there are a few directories and things over here that aren't actually in this folder. As I mentioned before, in that folder I've got a stripped down version of the site. The other thing is, the live version of this site, I'm not the only instructor that's been adding to this over time. So there's a good bit of cruft in here that I could probably go in and get rid of some of this stuff. However, what I'm really wanting you to focus on right now, if I scroll down, here we go, it's files like these. We have the htaccess file. We have these 400, 401, 403, 404 files.

Those types of things. So if you create a brand new site in a hosting company, chances are, if you open up the directory, you're going to find a default index.htm page that you can get rid or overwrite. And then you're going to find a bunch files like this. The 400, the 500 files, the 403s, the htaccess file, and those type of things. The htaccess file is a configuration file that allows you to set certain things for your server. Such as caching and things like that. Typically, you won't need to modify that. If you do need to modify it, you're probably going to know a good bit about websites at that point and be equipped to do it.

But if not, you might want to just research what the htaccess file is, the things that you need to do in order to modify it and what it can do for you. It's one of those things that you shouldn't be scared to touch but it can have some dramatic impact on your site performance. So you want to make sure that you're doing the right thing. Okay, I want to turn our attention a little bit closer to these error pages. So that's exactly what these are, they are error pages. If I go, for example, let's say I go back to my tour and let's say I try to look inside the images directory. Now we did this in the last movie and you can see I have indexing turned off, no indexing.

Essentially, I get a 403, a permission denied. Now if I look at the site, I'm seeing this file right here, the 403 file. Now the file that I'm actually seeing this page that's just the default. If you don't ever touch them, that's what people are going to see. You're probably used to seeing things like that because there are a lot of sites out there that don't take these files and modify them. But if you want to, you can. You can download these files and do something a little different with them and actually integrate them into your site a little better. If, for example, I go to my Resources and let's say I click on the privacy policy.

Okay, I don't have a privacy policy, I on purpose didn't upload one. What I'm looking at right here, this is what they call the 404 file. And this is if I downloaded the 404 file from the server and modified it, added my stuff to it, and then overwrote it. And this is now what I'm getting. Essentially, in addition to structuring your own files within your site, be aware of the fact that there are other files in here, default files like favicon things like that, that you're going to need to modify yourself.

When you get a new site, take a look at the existing structure of it. Research some of those elements and think about what you might want to change before you come in and override it with everything in your file. Not all sites are simple as the one I am showing you. But for the most part, that's really how the majority of all sites online are structured. Understanding why sites are structured a certain way is really going to help you as you organize, plan and create your own sites.