Project 1: Mini-Site

Scope:

This project is intended to give students experience in composing a small valid web site under the XHTML standard. The focus of this project is on the use of navigational elements to allow easy transition between the separate pages in a site, however other structural elements will also be required. The project will involve three separate web pages that are distributed between two different storage folders (one parent folder and one child). The precise content of the pages will be left to your discretion, but the subject matter must conform to the project constraints below. Your grade will not be based on narrative content. It will be based on correct, complete, and skillful use of XHTML structural and navigational elements as specified below.

You are not being provided here with a list of specific steps, as it is assumed that you already have acquired some skill in developing valid web pages. This project surrounds the concepts involved in linking those pages together. An [illustration of the site] has been provided as a separate Adobe® PDF file to help you visualize the site's structure and linkage. For specific help with XHTML elements, look in your textbook or in the [XHTML Tag Index] from [W3SCHOOLS.COM] or other online references.

Project Constraints and Objectives:

• Use Dreamweaver® (preferrably CS3) to create your XHTML pages and site. You must not use MS-Word, FrontPage, or any other web authoring software.
• Create a folder on your computer named "project1" to serve as the starting folder for your project files.
• Create another folder named "links" as a child of project1 to store future web pages containing links to recommended web sites.
• Each web page in your site must be created so that it:
  
  • will validate under under Transitional web document standards as defined by the [W3C Markup Validation Service]
  • displays a title on the browser's Title Bar consisting of the words "CGS 1821 Project 1: ", followed by the name of the file
  • is encoded using the Unicode (UTF-8) character set
• Create a web page named "home.htm" in the project1 folder to serve as the home page for your project.
• Create a web page "aboutme.htm" in the project1 folder to hold data about yourself as described below.
• Create a web page named "websites.htm" in the links folder to hold a list of links to web sites that you feel would be helpful to other students in this course.
• All hyperlinks between pages on your site must be written using relative references to the other files so that your entire site could be copied to a different folder and still function properly.
• Your home.htm page must contain a Level 1 Heading that appears horizontally centered on the page and contains the words "Home Page of" on the first line and your name on the second line.
• Your home.htm page must contain horizontal rule below the Level 1 Heading. Use other horizontal rules throughout the rest of the project to achieve an outcome similar to that shown in the [illustration of the site].
• Your home.htm page must contain a link to the IRSC Web Portal at: www.irsc.edu
• Your websites.htm page (in the links folder) must contain a Level 2 Heading that appears horizontally centered on the page and contains the words "Recommended Web Site Design Links".
• Your websites.htm page must contain an unordered bulleted list of no less than five links to useful resources for other students in this class. These must be links to sites other than IRSC or your instructor's web site.
• Your aboutme.htm page must contain a Level 2 Heading that appears horizontally centered on the page and contains the word "About" followed by your name.
• The bulk of the aboutme.htm page will contain two narrative sections; one about your academic history and goals and the other about your personal interests. The positions of these sections must be identified by h3 tags with "named anchor" attributes of "ACADEMIC" and "PERSONAL" (in uppercase) as described in the linking constraints below.
• Your home.htm page file must contain links to the other two XHTML files in an unordered bulleted list. The two most indented links in that list must jump directly to the narrative text areas identified by the named anchors in the aboutme.htm page. The [illustration of the site] shows how your home page should use an unordered list to link to the other two pages.
• Your aboutme.htm and websites.htm files must each contain relative links back to your home page using a graphic anchor as described in the next item.
• This project will involve only one image file. It is the image of the house that appears at to the right. It must appear on both your aboutme.htm and webprog.htm pages as it does at the bottom of the pages shown on the [illustration of the site], and it must serve as a hotlink back to your home page when activated. You will not store the image locally on your computer, but rather provide an absolute link to it in the src attribute of an img tag. This will prevent redundant storage of the image and eliminate the need to download and attach a copy of it to all submitted projects, but you will need to be connected to the Internet to test your web pages with the house image showing. The address of the file is:
  www.gibson.vero-beach.fl.us/classes/home.gif
  Note: The linked image must not be surrounded by a border (similar to the underline typically shown under linked text). You must define the image border to have a width of 0 pixels.
  
• Do not use any other images, color (other than link defaults) or other multimedia content on this project. Let your use of layout be the artistry.
• All of your web pages must end with a horizontal rule followed by a centered line containing a mailto link with your email address.
• Place an HTML comment (not rendered on the page) near the beginning of each file identifying yourself as the author and noting the date.
• Use the [W3C Markup Validation Service] to validate your code under transitional standards as identified by the DOCTYPE tag placed at the beginning of your page's source code.

Tips:

• Start working on your project as soon as possible. Do not wait until you believe that you have mastered all of the skills. If you encounter an obstacle that you cannot solve after checking your book and other reference materials, send me a copy of the source code for comment. But remember that I will need time to respond. So give yourself that time by starting early.
• Build the project one step at a time. Try to create a simple web page with just one paragraph on it; then validate it. If it validates, then try adding some more elements and validate again, etc.
• Many systems are "case sensitive", so pay attention to upper and lowercase when typing URL's and filenames in tags. Save your work after each change before trying to view it in your browser. Also, you must press the RELOAD (a.k.a. REFRESH) button on the browser's button bar to see any changes made to a page since the previous rendering of it.
• Finally, relax! Don't get stressed about this. Take it in small steps. Get as much of it working as you can. Some frustration can be a valuable motivator to reinforce lessons. But too much can inhibit learning. Schedule your time to allow some breaks between working sessions.

Submission:

Your web site should be submitted via the "Assignments" tool in the . After completing your project, make a new empty compressed zip folder outside of your project1 folder named "CGS1821_Project1.zip" (without spaces). To create a compressed (zipped) folder within any folder window:

• right-click on the background of the white folder panel to produce a context menu
• click on New, then Compressed (zipped) Folder.
• After a brief delay, a new compress folder should appear in the current folder window and the cursor will be automatically placed in a renaming mode by selecting (highlighting in blue) the initial folder name of "New Compressed (zipped) Folder.zip". Change the folder name by typing the new name on top of the old one and pressing the Enter key.

After completing your web site, copy the folder named project1 into the new zip folder by dragging it on top of the zip folder.

Then, login to the and click on the Assignments link on the left side of the screen. Select Project 1: Mini-Site and type your name in the Submission box. Use the Add Attachments button to attach your compressed (zip) folder to the submission and press the Submit button.