Site structure for COMS 326 directories

To organize your work for this course, you will create at least three directories ("folders") in your H-drive's public_html folder as described below. Your "H-drive" space should already include the public_html folder. Never delete or rename it!

Eventually you will make an index.html file inside almost every folder. To avoid confusing one index.html page with another, I recommend using a temporary name while a page is under development, copying the finished version to the correct folder on the Web server, previewing it, then renaming it "index.html" when you are sure it is in the right place.

Your main folders for this class:

  1. coms326 (Your course home page)
  2. coms326/images (optional, but a good organizational tool)
  3. coms326/reviews (The midterm project)
  4. coms326/final (The final project)

The Web addresses (URLs) for other people to see your pages consist of three things: Radford's server address, your e-mail login name, and the folder address. Put together, they would look like this: http://www.radford.edu/~yourRUlogin/coms326/

You will create other folders and pages as class exercises, some of which will be converted into parts of the midterm and final projects, while others will be experimental, educational or personal. If you do a lot of work with photos or graphics, you may want to have an "images" folder for each project; if your projects are complex, you may want to give each page its own folder full of images.

In the process, you should learn to navigate the file systems on all the computers you use. For example, the Macintosh's OS-X operating system uses English-language names for disc drives ("Macintosh HD" or "Bob's Flash Drive"). The Windows operating system uses a "Drive letters" system inherited from earlier MS-DOS machines ("Drive C:" and "Drive H:" for example). OS-X and Web servers use the slash character (/) to indicate the start of a new folder or directory. Windows computers use the "backslash" (\) to navigate its local folders.

Your workstation's Web browser can view your own pages through the computer's file system ("file:///Volumes/rstepno/public_html/coms326/" or "h:\public_html\coms326\")

If I am working on my office Macintosh, the file:/// address above is my course Web space; if I am working on a PC at the library, the same space is an "H:\" drive folder.

Your Web page code should NEVER use "file:///" or "H:\" addresses. They only work when previewing pages while you are logged in. Double-check pages you create with Dreamweaver to make sure it did not insert those codes anywhere.

Your personal home page: The index.html page in your main public_html folder is viewable by the world as your personal home page (www.radford.edu/~yourname). That page isn't part of this course, but because it is the standard address used by most university Web servers, anyone who knows your e-mail address may go there looking for samples of your work.

I do recommend that you have some kind of page at that address. In addition to "advertising yourself," it's good Web housekeeping to have something there to block visitors' view of your files and directory structure. Your public_html folder may have come already suppled with a filler page that said something like "This student has not created a home page."

Possible home page contents: Your name and links to your Facebook page, other home page, any course projects that you might want friends, strangers or future employers to see, etc. It could be a portfolio of your work, with links to your resume and your best work samples. Or you could put a "refesh" code in that index.html to automatically send visitors to your blog or Facebook page.

Recommendation: Whether it's a /~yourname page, a blog or Facebook, do NOT include the beer pong, beach party or bong pix, or anything you don't want mom, dad, a future spouse or a future employer to see.  Keep those shots in your wallet and only show people you trust.

Folders for this course

To hold all your work for this course, create a folder inside your public_html space, and name it "coms326" (without the quote marks). Inside it, make folders named "images," "reviews" and "project"; others may come later, looking something like the list below.

Site structure

/public_html/index.html -- This is your "personal home page"
/public_html/coms326  -- Its "index.html" document is your "course home page"
/public_html/coms326/images -- for pictures or graphics that you use on that page 
/public_html/coms326/sandbox -- a public space to play in and experiment (optional)
/public_html/coms326/exercise1 -- a space for a classroom exercise (or another name) /public_html/coms326/reviews -- a space for the midterm site-review project /public_html/coms326/reviews/images -- a possible part of the midterm project /public_html/coms326/final -- a space for the final project (with subfolders, as needed) /public_html/coms326/final/images -- a space for the final project images, if needed /coms326docs -- copies of PDF or DOC files, cheat sheets, class notes, etc.

(Note that the "coms326docs" folder is just in your H-drive space,
not a "public_html" subfolder, because you may not have
copyright permission to "republish" the documents.)

If a directory does not have its own "front page" content, it should have a blank or "refresh" index.html page sending visitors back to your home page. Many developers use "images" folders to keep pictures or graphics organized. Some sites put all images in one folder in the home directory, but I prefer project-specific image locations for simpler coding. On a small project, there's nothing wrong with having images and html files in the same folder, but it's good to make "being organized" a habit.

For both folders and documents, use simple lower-case filenames that are just long enough to remind you of their contents.

This is what a directory for the midterm site-review project might look like: (red on ivory lines indicate required pages)

/public_html/coms326/reviews/index.html -- the home page for the review project

/public_html/coms326/reviews/review.css -- a stylesheet all pages have in common

/public_html/coms326/reviews/uncray.html -- first review

/public_html/coms326/reviews/nytpoet.html -- etc.

/public_html/coms326/reviews/rsband.html

/public_html/coms326/reviews/brmuse.html

/public_html/coms326/reviews/floyd.html

/public_html/coms326/reviews/images/ -- a folder to put images in (if wanted)

/public_html/coms326/reviews/images/ray1-front.jpg -- image for first review

/public_html/coms326/reviews/images/ray2-menu.jpg -- image for first review (etc.)

public_html/coms326/reviews/images/floydbanjo.mov -- video clip for last review

/public_html/coms326/reviews/images/boblogo.jpg -- a "branding" pic for home or all pages

When you use smaller versions of the images on your index page, you may want to store them as "thumbnails" with related names; for instance, here I've added "th" for "thumbnail" to each filename:

/public_html/coms326/reviews/images/ray-th.jpg
/public_html/coms326/reviews/images/floyd-th.jpg

Midterm Site Review Assignment for COMS 326