- Chapter 3: What You Need to Get Started
- Other Tools You'll Want
- Finding a Web Server
- Organizing a Web Site's Files
- Summary
This chapter is from the book
This chapter is from the book
This chapter is from the book
Organizing a Web Site's Files
You may recall from Chapter 1 that a URL is composed of a protocol, a server address, and a path to a particular document. All of those components are important. When you're creating and organizing your Web site's files, however, the most important is the path statement. If you have a system for how you store files when you're creating them on your computer (locally), you'll have less trouble later when you store your files on a Web server computer.
Although a Web site can be arranged in a number of different ways, you should keep in mind some rules of thumb. For the most part, you should organize your Web site files to make it easy to update your pages in the future. If you have to move all your files around every time you change something on a single page, you are also forced to change all the hypertext links on many other pages—and that can be incredibly time-consuming. Early on in the process, you should consider how your site's files will be organized. This is true even if you're only planning one page or a few pages. Organizing the images and multimedia feeds that go along with those pages is still important.
Types of File Organization
These are different types of organization for Web sites:
Single-directory sites: Smaller sites, with just a few HTML pages and images, can often get by with a single directory on the Web server. All your graphics and HTML pages go in this one directory. One of the biggest advantages of this system is that links to local files and graphics require no special path statements. The disadvantage is that this sort of system can be unwieldy as your site grows, making it more difficult to update in the future.
Directories by function: One way to organize more complicated sites is to put each section of related Web pages in the same directory. For example, in your main directory you might only store the index page and its associated graphics. For a business site you'd have subdirectories for sections called About, Products, Support, and so on. In each of these subdirectories, you'd include all the related HTML files and the image files for those pages.
Directory by file type: Some people prefer to create subdirectories according to the type of file, as opposed to the content of the page. Your main directory may have only the index page of your site. Other subdirectories might be called Images, Pages, Downloads, and so on. The main advantage of organizing this way is that files generally have to be replaced only once. If you use a graphic on a number of different pages, for example, you can replace it once in the Images subdirectory and all the HTML pages that access the graphic use the new one.
-
Hybrid: The best way to organize a large site is to use a hybrid of the two preceding methods. Creating separate subdirectories for nonrecurring items (such as individual Web pages in each category) while creating other subdirectories for items used multiple times (such as graphics) enables you to get at all the files in an efficient way. A hybrid file organization is shown in Figure 3.5.
){kind=link}
Figure 3.5 In this hybrid site (displayed in Windows Explorer), different functions are organized into different folders, but a single image folder is also used for all images.
The other thing to remember when determining how you're going to organize your Web directories is that the directories themselves become part of the URL when you create them and store files using them on the Web server. So, if you go with the hybrid approach, your URLs might make more sense to the user. For example:
http://www.fakecorp.com/products/mousetrap.html
This is as opposed to a straight "functional" organization, which would result in an URL like this:
http://www.fakecorp.com/webpages/mousetrap.html
In this case, the products directory tells the user what he will see and how the Web site is organized.
Creating the Hierarchy
Once you've selected a system, the next step is to create local folders that mirror the directories you're using on your Web server. If you create a folder called images where you plan to store image files, you'll need that folder in the same relative location on your local hard disk and on the Web server computer.
Note
In some operating systems they're called folders, and in others they're called directories. It's just two names for items that are functionally equivalent. You'll often hear folders used when referring to local hard disks (particularly in Windows and Mac OS) and directories used when referring to the server computer (which is often running Unix or a Unix-like OS).
For each Web site, create a folder somewhere on your computer. The name of it isn't important, since it will be the equivalent to the nameless root directory (/) on your Web server. For instance, if you're creating a new personal site, start by naming a folder mysite. That's where your main index.html page will be stored. Inside that folder, add other subfolders that you plan to use as part of your organizational hierarchy, such as images or products, depending on the approach you're taking. Remember that these folders need to be the same names you plan to use for subdirectories on your Web server. In fact, a good rule of thumb is to use all lowercase letters for them, in both places, just to avoid any problems with case-sensitive servers.
This organizational structure will do two things for you. First, it keeps you from accidentally placing files in the wrong directories when you're uploading them to your Web site. Second, it makes it easier to create relative URLs, which is a topic you'll dig into in Chapter 7, "Building Hypertext Links."
Naming Your Files
You've already seen that file extensions are an important part of all the filenames you use for your Web site. Because other Web browsers may rely on a file's extension to know what sort of document or file it is, you need to include the appropriate extensions with all your Web site files.
Your Web site almost always begins with a file called index.html or index.htm. Most Web server software programs load this page automatically if the URL of your site is accessed without a specific path and file reference. For example, typing http://www.fakecorp.com will probably result in the page http://www.fakecorp.com/index.html being loaded into your browser. Your Web site's first page (whether it's a "front door" page or the first page of your site) should be designed with this in mind.
The thing to consider when naming your files is how you plan to organize your site. If you're using a single-directory organization, your filenames should be as unique as possible, and graphics and other files should probably have names that relate to their associated Web pages. For instance:
These names help you determine which files are associated with which HTML pages when you go to update those files. If you have more structure to your site (for instance, if you've created an about directory on the Web server), names such as company.html might be more appropriate because the ultimate URL path you're creating would be about/company.html.
Updating Your Web Site
If you organize your site well, updating it is simply a matter of replacing an outdated file with a new file using the same filename.
You need to check with your company's system administrator or your ISP's technical staff to figure out exactly how you update files. (When you sign up for service, most ISPs will tell you how to do this or provide you with documentation that explains the process.) With an ISP, you can usually use an FTP program to put new files in your directory organization on the Web site, as shown in Figure 3.6. (Some HTML editors include the built-in ability to upload pages via FTP.) The process is simple:
){kind=link}
Your Web space provider requires you to enter a username and password to gain access to the Web server. In most cases, you point your FTP program to the Web server itself (for example, http://www.isp.com), although sometimes you'll log into a computer with an address that starts with ftp. If your Web site has its own domain name, you might need to sign into that, such as http://www.fakecorp.com or ftp.fakecorp.com.
If the server recognizes your username and password, you'll be connected to the server. Most likely, you'll be in your personal Web site's main directory. (If not, you need to use the cd command or otherwise change directories in your FTP program.)
You can add files using the put command in your FTP program. If you're uploading new files, remember to place them in the same relative locations that you used on your local hard disk. (Put the image files in the image directory on the server, and so on.) You may need to create the directories on the server the first time you log in.
To replace an existing file, you use the put command again, this time uploading the replacement file with the same name as the file you want to replace (including the upper- or lowercase letters). This will overwrite the file, so consider whether you want a backup of the older file before you replace it. You won't be able to recover the older version unless you've created a backup of it.
Figure 3.6 An FTP client program is being used to transfer Web site files from my local hard drive (bottom) to the Web server computer (top).
As you can see in Figure 3.6, it's a good idea to maintain a folder or directory on your own hard drive that is as identical as possible to the Web site and its directory structure. That way FTP updates are easy, as is testing to ensure that your filenames and local hyperlinks have been built correctly.