Project 1: Class home page

Before creating your project 1 home page, you will need to set up your CMS 3710 web space by following the directions on the Creating Your Site study guide.

Your home page for this class will be developed in three stages (with three separate due dates). At each stage, the files should be on your Clayton State Web site, readable using Mozilla Firefox, by the beginning of class on this day.

At every stage, your page should be easily readable and navigable. By stage C, your page also should reflect a well-defined persona.

Stage A

Create your home page

If it is not already open, open your site in Dreamweaver. Make sure that the "Local view" is selected in the Files panel. Right-click on the "Site" folder in this panel and select New File. A blank html page will open in the page window.

Your CMS 3710 home page will eventually provide links to your online projects. At present, it should include the basic "who, what, when, and where" information necessary to make Web pages freestanding, as specified by the Web Style Guide. This includes the course title of our class.

In class, we will download the following files to get started. Right-click to download.

[If you have advanced knowledge of HTML/CSS and do not want to use these files as the basis of your project 1 page, see me for permission.]

You must save your home page file with the file name "index.htm," and you should save it in the "3710" folder on your local computer along with the subfolders you have already created. When you are done, the files--viewed in Dreamweaver's "Files" panel--should look like the graphic below. [You can ignore the "print.css" file until stage B.]

Dreamweaver folders image

Upload your home page and folders to the server

Once your home page is complete and saved to your local drive, you will upload the files and folders to your CSU web space. To begin, click once on the "3710" folder to select it.

Next, click the blue arrow to "Put" the files and folders on your local drive to your account on the student server. This copies the entire site from your local drive to the server. You will be prompted for your password.

[If you are using something other than Dreamweaver to create files on your laptop, you will have to copy them to the server using a separate FTP program.]

Note that this creates the identical file structure on the server that you have created on your local drive or disk (otherwise the page links won't work).

Once you have set up the folders and moved your home page file ("index.htm"), test your page by following the "home" link next to your name on our class roll.

Stage B

By this point, your home page should include an 8-10 sentence description of the web site that you use most frequently. Describe the site and your expectations for it using the terms and concepts outlined on the Web Style Guide's (WSG) Site Structure and Presenting Information Architecture pages. Answer this question: Is the site's design appropriate for your particular needs?

In addition, by this point your home page should use Cascading Style Sheets (CSS) to control the layout of all text, links, and any images on the page. As the WSG notes, readability requires that the text of your home page not extend beyond 12 words per line (Page Width and Line Length). By Stage B, the page also must include a link to the home page for our class.

Finally, your page should now use a separate CSS file, called "print.css," to control the page's print layout. When printed, you page should look like the print layout for this sample page. Right-click to download a copy of the template file, print.css, that controls this sample page.

Stage C Design

The "persona" conveyed by a text is the sense of its author's character and personality. This textual persona is communicated by all aspects of the text's content and design. 

By Stage C, your home page should communicate a well-defined authorial persona. In other words, your page's chosen color scheme, illustrations, language, and layout should reflect your personality. (At the same time, your page also should conform to usability standards, including standard English.)

Stage C Format

All physical aspects of your home page's display (e.g. backgrounds, colors, fonts and font sizes) must be handled using a separate (i.e. external) cascading style sheet (CSS). You must create your own sheet, although you may use the Stage B examples as a starting point.

In addition to the links required at stage B, your home page should include working links to the opening pages of your web site analysis and your professional portfolio.

By this point, your home page should validate as "XHTML 1.0 Transitional," "XHTML 1.0 Strict," or "XHTML 1.1" using the Web Consortium's markup validation service. Your page should include a link directly to this service, similar to the link on our class home page. More information about XHTML is available on our Links page under Standards.

Dreamweaver includes several tools that covert files with MS Word and other nonstandard HTML to compliant XHTML. Start with the "File > Convert" command.