Bob's Sample | Bob's Tools Page | Bob's Menus Page | Bob's Real 326 Home

Bob's sample student Web Production home page

This is a demo of what a student COMS326 course home page might look like, including a picture and a screen capture or two. By the end of the second week of class, your page should have some information, a list or two, and an image or two -- showing that you know how to resize and optimize images for the Web.

In the second or third week, we will start using a technique called Cascading Style Sheets (CSS) to center the page, give it a background color, position your picture on it, and generally give it more personality. You eventually will create a new "tools.html" page and move to it the captured screen-images of the text editors you are learning.

If I were a student in coms326, this page is where I would explain what I am doing in this course, what skills I am practicing and what tools I am using. Along with the short introductory paragraph, I would eventually include a menu of other pages I have created and lists of sites I find useful or relevant to my projects, including the course home page, tutorials or lessons, the professor's blog, Web design magazines, etc.

Layout some of that information as a list or two, with links to other sites where appropriate. Like this:

My favorite websites are:

To build Web pages, I'm using these programs:

This page was created with
the Pico text-editing program
for Unix, after I connected to
our file server with the PuTTY
terminal and SSH program on a Windows PC.
After I move it to
my tools page I can delete the copy here.

As part of the in-class development process, you'll also add screen-image snapshots and combine them with your comments on learning how to use various editing tools. Then you'll move that "tools" discussion to a separate page and link the two pages together -- learning how to take, optimize and embed images, learning how to "clone" one page to make two, and learning how to do "relative" links between your own pages as well as "absolute" or "explicit" links to other folks' pages.

By "cloning" I just mean using a copy of your first page as the beginning of the second, editing both to eliminate duplication. Here's a screen image of a PICO editing session, an early draft of this page, which was later cloned to make the sample tools page.

I put a very simple text menu at the top of this page. As you experiment with more CSS styling, you will be able to replace it with a more interesting menus, such as the menus on this group of pages. Your "course home page" should evolve throughout the semester.

Starter pages:

index.html, your home page (something like this one) with some information about you and why you are taking this course. For your second page, move some of its contents to...
tools.html with your notes about using Terminal and SSH (and/or PuTTY on a PC) plus Pico, and TextEdit on a Mac or Notepad on a PC. You could even split the "tools.html" page into "unixtools.html," "mactools.html" and "windowstools.html" to show visitors that you are becoming a multi-platform expert!

Just to provide a sample page and menu, I've linked this to a second page with my screen-capturing notes. The third page is the one back at my course site with information about making menus. A separate menu at the bottom is another collection of Bob links. But you don't have to have a page about making menus -- just make your own menu in the third or fourth week of class and expand it as you add more projects and pages.

How much biography do you need to have on your "coms326" home page? Not much. Sample: I'm Bob Stepno, an old newspaperman who got into writing and editing with computers when they arrived at the newspaper in the late 1970s. I got involved with Web pages just as the Web got started. I've used many different computers and editing programs, and I keep learning new ones. I teach journalism and Web production classes here at Radford. Here are some other sites of mine:

Bob's Blog | Bob's Home | Bob's "Newspaper Heroes on the Air" site | Bob's other blog