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:
- Go to the Windows button (labled Start in some versions of Windows).
- Find and click the Control Panels link.
- Find and click the Folder Options link.
- In the dialogue box, find and click the View tab.
- Scroll down to the line that says “Hide extensions for known file types.” UNCHECK this option.
- Click OK.
Most Macintosh computers show the file suffixes by default. If you do not see file suffixes on your Mac:
- Go to the Finder menu, then to Preferences.
- Find and click the Advanced tab.
- You should see a link that says something like “Show all file name extensions.” This line should be CHECKED.
- Click OK
2. Set up a production folder
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:
- ONLY THOSE THINGS NECESSARY for your Web pages belong in your production folder:
- HTML documents
- Cascading Style Sheets
- additional folders (or directories, as they are called)
- downloadable files
- You will BUILD YOUR website ONLY IN YOUR PRODUCTION FOLDER. You will not build your Web pages directly in your MyWeb directory.
- You will back up your production folder, but you will WORK ON FILES ONLY IN YOUR ACTIVE PRODUCTION FOLDER. This is why you might want to keep your active production folder on a flash drive.
- Non-Web files DO NOT BELONG IN YOUR PRODUCTION FOLDER, such as:
- Illustrator files
- PhotoShop files
- raw, unprocessed images
- Word or other Office documents
- other files that do not contribute to making your website work properly
To set up your production folder:
- create a new folder and give it a simple, meaningful name of one word
- put the folder in a convenient location, such as on your flash drive
- 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.
- when you name things, take the KISS APPROACH
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:
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.