What is an index page?

show more What is an index page? provides you with in-depth training on Web. Taught by Garrick Chow as part of the Dreamweaver CS3 Essential Training show less
please wait ...

What is an index page?

Okay, one last thing I'd like to discuss before we jump into {italic}Dreamweaver.{plain} Let's take a look at what a website actually consists of, and what happens when you type a web address into your browser. You probably spent plenty of time visiting web sites before, but I think it's important to start here, especially if you've never created your own web site. Anyone who's spent any time at all on the web knows how to type a site's address into the browser window. You just open up your browser, type in an address, and the page comes up. But, not everyone knows exactly what happens when you do this. So, I just want to take a couple of minutes here to give you the basic rundown and to explain where {italic}Dreamweaver{plain} figures into this process.

I have a folder here on my desktop called teacloud, which is a website for a fictitious tea company. If you have access to the exercise files you can examine this folder on your own, but I'm really not going to do anything with these files in this movie. I'm just using it to point out a few things. Notice this folder contains several files that contain the extension of .html. Like this and this. And it also contains several folders. A web site is really just a collection of files and folders. Think of the main folder, meaning the folder containing everything that appears on your site, as the site folder, also called the root folder. The concept of the site folder is very important when working in {italic}Dreamweaver,{plain} as you'll see very shortly. Looking in this site folder I can see files like abouttea.html, brewingtea.html, contactus.html, and so on. Files that end in .html, or .htm if that's the extension you're using, are the actual web pages of the site. The folders found here contain additional web pages as well as the images and animations and other media files used on those pages.

Now, notice this file here called index.html. This is a very important file name. For the most part, you're free to name your web pages whatever you want, as long as you follow the basic rules we looked at in the previous movie. But, when you name a file {italic}index,{plain} you're basically declaring this page to be the default go-to page for the entire folder. Now, I have a version of this teacloud website already on the web, so let me fire up my web browser again. And, I'll type in And, up pops the web page. Anytime you go to a world wide web address, you're connecting to a computer somewhere on the Internet that hosts the web site you're looking for.

Now, in this movie I'm not going to go into the details about how you go about associating the web address with an actual location on the web. That's something that your web hosting provider will help you with, and I'll be talking much more about this subject in the chapter on publishing your site. Right now my concern is explaining the default page that appears when you type in a web address. When I type, I'm telling the browser to find the folder on the web containing the teacloud site. And, since I didn't specify which page to open, it's going to open the default page, often called the home page, or the front page. This default page is the one named index, and it will have the extension of .html, or .htm. Notice if I type, the exact same page shows up.

This page is called index.html, and the point is, since I didn't specify a particular page in this folder, I got the index page when I typed Now, if I do specify a page in the main site folder, for instance I can see there's a page in my main directory here called brewingtea.html, So, if I come back to my browser and type, that's the page that comes up. Or, if I go back and look in this folder again, I can see there's a folder here called abouttea, and inside that folder is a file called teatypes.html. So, I can specify that page as well by going to, which is the name of the folder, slash (/), which tells the browser to look inside that abouttea folder, teatypes.html, specifying the page. And, there's that page. Of course, you rarely have to type page addresses into your browser like this. This is why we have links on our web pages; so visitors can just click to go to the pages that they want to look at. We'll get to creating links later. Let me give you one other example of the index page concept.

I roll over this About Us link right here, if you look at the status bar down here when I do that, notice it says down there that it's going to go to So, when I click on that page, there's the About Us page. Now, because this page is also called index.html, and it just happens to be sitting inside the aboutus folder, which you can see right here, I don't need to have index.html in here. If I wanted to go to this page, I could just type us, hit return, and that page shows up anyway. So, you can see that each folder in your site can have it's own index.html page, and the browser will always default to this file if you don't specify a different page.

So, when you create your site you can basically store your files however you like. You can have every single one of your pages sitting in the main folder, which probably isn't a good idea if you're going to have a fairly large site. It's best to arrange your site into subfolders, like abouttea, aboutus, assets, to hold all your images and media files, ourproducts, and so on. And, within each of these folders, you can have an index.html page, if you like. If not, you can just name them whatever you like. For instance, this abouttea folder has no index page. It has fromthefields.html and teatypes.html. But, this is just an example of how you can set up your sites file structure.

This is not the only way to set up your site. We'll be getting more into these concepts as we go along, and we'll talk a little bit more about site structure. But, I'm showing you all this now because I think it will help make sense of{italic} Dreamweaver's{plain} files panel, which is the window in {italic}Dreamweaver{plain} where you manage all aspects of your site's files and folders. Okay, so that's a quick overview of what's going on in the background when you call up a web page in your browser. That should give you enough foundational information to jump right into {italic}Dreamweaver.{plain} So, let's get started.

What is an index page?
Video duration: 6m 2s 10h 21m Beginner


What is an index page? provides you with in-depth training on Web. Taught by Garrick Chow as part of the Dreamweaver CS3 Essential Training

please wait ...