2.2: Setting up your computer

Get in the habit of keeping your files in order. You will find that wasting effort and losing track of your work are suprisingly easy to accomplish. What follows is a set of best practices.

1. File suffixes must be visible

Look over the files on your computer. Do you see file “suffixes” attached to each file name? In the picture to the right, all files have visible suffixes, such as .html or .css.

What to do if you see no suffixes:

On a Windows computer:

  1. Go to the Windows button (labled Start in some versions of Windows).
  2. Find and click the Control Panels link.
  3. Find and click the Folder Options link.
  4. In the dialogue box, find and click the View tab.
  5. Scroll down to the line that says “Hide extensions for known file types.” UNCHECK this option.
  6. Click OK.

Most Macintosh computers show the file suffixes by default. If you do not see file suffixes on your Mac:

  1. Go to the Finder menu, then to Preferences.
  2. Find and click the Advanced tab.
  3. You should see a link that says something like “Show all file name extensions.” This line should be CHECKED.
  4. Click OK

2. Set up a production folder

The desk-top production area

Your production folder is simply a folder on your computer where you develop content for your website. When you are satisfied with your Web pages, you will transfer the contents of your production folder to your MyWeb directory.

Your production folder is a special place where you assemble files for your website. First a few rules, and these rules are not made to be broken:

To set up your production folder:

  1. create a new folder and give it a simple, meaningful name of one word
  2. put the folder in a convenient location, such as on your flash drive
  3. open the folder and create a new folder; name it img
    • All of your image files, such as GIF and JPG files, go in the img folder. This will keep your production folder neat and easy to navigate.
    • We use the name img because it is compatible with WordPress and other content management systems.
  4. when you name things, take the KISS APPROACH
  5. In any folder or subfolder, such as a separate section of your website, the first page is always named index.html
    • Web browsers automatically search for an index.html page when the URL does not specifiy a specific page.
    • This makes for shorter URLs. These two hyperlinks work exactly the same:
      • http://courseweb.stthomas.edu/mjodonnell
      • http://courseweb.stthomas.edu/mjodonnell/index.html

Take a look at the image at the top of this page. It represents a properly arranged production folder. The CSS (Cascading Style Sheet) pages control text styles and layout. We will learn how to create CSS pages in future chapters.