RCC Fall 2009 CIS-72A XHTML
Any final project not time-stamped will be considered late based on when it is picked up.
To complete this final project successfully, you should first read through all parts of this document so you know what you need to do. Then do each part as described below in the order given. There are sample printscreens at the very bottom of this document to use a reference to see what yours might end up looking like, but each person's site will look different.
Note that in developing your site's pages, you should always make backups of your work so that no problems can arise that would be a disaster for you. Save your work frequently and back up your entire final project folder after each each session of work. Loss of files will not be considered a valid excuse for missing work or accepting late work.
You may use any text editor you like but you may not use any HTML editors except for the CSE HTML Validator (so, for example, you can use TextPad, but not Dreamweaver.) All HTML appearing in your pages should be from your own keyboarding, or your CSE HTML Validator tag inserter choices, or copied and pasted from your own previous work.
To begin this project, you need to create the proper folder and copy some existing files. Then you'll be ready to get to work on creating and modifying the pages that will make up your personal site:
The 2 new pages, "home" and "other" need some content. Here are the guidelines for this content. Don't worry about the style or layout of these pages quite yet, just get some content created for them.
Home page: As described above, the home page should include an h1 heading containing the words "Your Name's World" (or something similar). Next create a paragraph introducing you and your site (several sentences). It should also include an ordered list of interests or hobbies or activities you like, an unordered list of short personal (possibly humorous) trivia items (such as "I'm obsessed with American Idol"), a small picture of yourself (or of a role model of yours or someone you admire) along with a paragraph about that picture and why you chose it. If you need more info to fill up the page, add other appropriate personal information, perhaps about your background, your family, etc. You can also insert a second image if you like, but these images must be small and not dominate the page (if necessary, bring in a picture of yourself to be scanned using the RCC MLK computer lab scanner.) See the sample printscreen below for a sample of what appropriate content could include.
Other page: Create one other page of your own choosing. It must conform to the HTML Style Guidelines given above, and it's content must be appropriate for this type of personal web site. The page should contain truthful, original information and be written with proper HTML coding style. Examples of possible pages include pages about your family, a favorite hobby, your travels, etc. Just make sure that it is a personal page -- for example if you are doing a page about your trip to Mexico, it should not contain information from a travel agent's site about Mexico, but instead should contain information about your trip, where you stayed, what you did, maybe with a picture of you there, etc. Likewise, doing a page about your favorite band or favorite game (etc.) only works if the page is mostly about what you like and why you like it and not just info and pictures about the band or game (etc.) as it might appear on the band's Web site or the game's Web site (etc.) This page cannot be dominated by pictures -- the page space should be mostly text and take up the required portion of the 1024x768 window.
The course Web site has an entry on the "handouts" menu for "Creating Logos And Buttons". You are required to create a logo of some kind for use at the top of your pages. The logo must include the text "Firstname Lastname's World" where you substitute your own actual first and last name, and you may also choose to substitute another word (or 2 or 3) for "world" (as indicated in the "Part 1" home page instruction section above.) You may use any of the Web sites indicated on the handout page, another similar Web site, or just use a graphics program of your choice (such as Photoshop or Fireworks) to create or modify an existing one. In addition to the required text, the logo can have (but is not required to have) some other artwork, photo(s), background, texture, etc. The logo should be placed toward the top of the home page using an <img> tag. It can either appear only on the home page, or can appear on all pages. In the sample home page printscreen shown below, the "Joe Student's World" logo at the top of the page was created for this purpose.
For this part of the final project, you will create a nav bar on your home page and then copy it to your other pages. This nav bar can either be text-based (as the one in the sample printscreens is) or be image based (you can use the same "Creating Logos and Buttons" handout to help you create your own nav buttons if you like.) Whether you are using text or image based buttons, follow the general guidelines below.
Open your home page and, below the existing "h1", create functional (text or image based) links to all 5 of the site's pages as follows. Below is a list of the 5 links you should have, in this order:
Home, Favorite Links, Resume, Other, Feedback
The "Other" link should not really say "Other", but should instead be appropriate for whatever kind of "other" page you end up having (as explained above). For example, if you end up doing a page about your favorite movies, the link (or button image) might read "My Movies". For another example, see the sample printscreens below, where the link is to a "My Family" page that we can imagine has some family pictures and descriptions of family members.
Test the navigation bar on your home page making sure each of the 5 links work properly. If it works, then copy and paste to all pages. Test all pages. If that all works, next remove the <a> tags from around the link on each page to itself. You should end up with 5 entries on each page, 4 of which are real clickable links and one of which that is just text (or a button) but not a clickable link. For example, on the home page "Home" is not a link, on the resume page "Resume" is not a link, etc.
On the feedback response page, you should have just one link that allows the person to click it to return to the home page (or you can have the full navigation bar if you like.)
Don't worry about formatting these links to look good with styles yet, there will be a separate section below that will indicate what the styling requirements are for the site.
By using either a layout table or CSS, create at least a 2 column layout for each page. As in the sample printscreen site, one column can be used for a (vertical) navigation bar and the other column can be used for all of your main content. Alternatively, your navigation can be horizontally positioned across the top area of your page and then you could use both columns below it to hold content -- the main content in the main column and some related info in the sidebar column.
There are examples in the book for creating multi-column layouts with both tables and CSS. There is also the hybrid video #4 on creating a layout table (the "Rooms" page.) If you choose to use CSS to create your multiple columns, use a separate style sheet named "layout.css" which each page links to.
You must come up with a color scheme (backgrounds and text colors) that is going to be consistently applied to all of your personal site's pages. To do so, create a separate style sheet who file name is "main.css" and then create a link tag to that style sheet in the "head" section of all 5 pages (plus the feedback response page).
Your styles must include a new background image somewhere (that has not already been used in this class), a background color, text colors, and link colors. Make sure that the text and links are easy to read against this background on all pages and that your use of colors on these pages is consistent and appropriately coordinated throughout the personal site's pages. Your logo color(s) should coordinate well with this color scheme also.
If your navigation is based on image buttons, you are not required to add any styles. But if your navigation consists of text-based links, you should target these links with some styles that help to make these links look more interesting and act more like a typical navigation bar, including some changes when the mouse moves over them. Use such selectors as a:hover to accomplish this. You could use background and text color changes for example. At the very least you must be sure that the links are easy to read against their background color. For example if you have a purple background color for your links area, then a visited link will become hard to read unless you change the default browser purple color for visited links to something with more contrast (do so using the "a:visited" selector in your stylesheet.) The book addresses some techniques for styling links on pages 216 and 217.
Any other styles that you would like to add to enhance your pages is fine as long as each page has a similar overall appearance.
Of course you have probably been testing your site as you work with each page, but you should also test the entire site again in the browser, using a maximized Firefox browser at 1024x768 resolution just like it will be graded. Test each navigation link (in both navigation pages). Make sure all images also appear as expected on any main or portfolio pages. Your feedback form page should display the feedback response page when the form is submitted.
All HTML created specifically for this project as well as all HTML created by you previously on assignments (unless it was the book's code) will be graded for quality of coding and should validate as XHTML. Use of the CSE HTML Validator's validation feature is highly recommended. After all, it will be used to check your work when it is graded! To see the actual CSE HTML validator settings that will be used for grading to test your pages for validity, see the "Validating With CSE" handout.
Your CSS should also be validated to make sure you do not have errors. You can use the W3C CSS Validation Service for this purpose by either copying and pasting your style rules into the "direct input" area, or by uploading your style sheet file using their "file upload" area. Be sure to fix any errors that their validator may find.
Each of the required pages for your personal Web site must be built so that they have appropriate content that fills most of the available screen space when displayed within a maximized browser (assuming a 1024x768 resolution screen) using reasonable and appropriate image and font sizes. Your pages will be graded by displaying your site in a maximized Firefox browser window at 1024x768 resolution, so be sure your site's pages work properly in that environment -- they should fill the screen appropriately and avoid a horizontal scroll bar (vertical scroll bar is ok if your page is long).
Be mindful of the file sizes of all images you add to your pages (no image should be larger than 200K please). Remember to insert your own name in an HTML comment just below the <html> tag of each of the pages in your personal site. Each page should have a "h1" heading (or image) at the top to identify it, such as "Joe Student's Resume", with your own name filled in.
Spell-check all of the text on your pages. The CSE HTML Validator has a spell-check feature on its "Tools" menu, as do most all other HTML editors.
It is possible to earn some extra credit points if you go above and beyond the basic requirements as follows. Each extra credit item is worth a maximum of 5 points. Quite honestly, the 5 points is probably not worth the effort involved for any of these, but if you have time or need the points, go for it.
There is a separate assignment sheet on the course Web site's "Assignments" menu called "Final Project Grading Sheet". This is a Word document summarizing the grading scheme that will be used to assess the points for your Web site. Be sure to get a copy of this grading sheet and use it like a checklist to be sure you don't leave anything out. You can also see how many points are being given for each task.
Carefully read through what is required to be turned in for this project. It would be a shame for you to lose points unnecessarily after all the work you put into it! Below are the printout and disk requirements.
All of your HTML code must show up on your code printouts, and it should be the exact code that matches its corresponding page's browser printscreen. Your code should demonstrate good HTML coding style. Your own pages will be tested to see if they validate in the CSE HTML validator so be sure to do this yourself before you turn them in!
Turn in and staple these printouts in the order in which they are listed below!
Turn in a CD (with a protective cover with your name clearly written on both the cover and the disk itself.) The CD must contain your "finalproject" folder and all of the files necessary to successfully display all aspects of your site. That includes not only the Web page files themselves, but also all of the image files and style sheet(s) they need. There should be no dead links from your navigation pages or you will lose points. That means you should test your disk to make sure all links are good before you turn it in. That testing should be on a machine other than the one you used to build the site to make sure that the disk is not trying to access files on your machine's hard disk that will turn into dead links when your disk is graded elsewhere.
This disk will be used to validate the code on all of the site pages using the HTML Validator settings indicated above and to check all main navigation links and images in the browser to make sure your site is fully functional.
The sample printscreens shown below may help you to see what is expected of your home page, resume page, and color scheme. You should not attempt to copy it though, it should be used to get some ideas of appropriate design, content and layout.
Note that a background image is in use on the navigation column only and just a background color in the main column. All other pages should share the same background color and background image.
Note that the "Other" link has been changed to "My Family" since it is assumed that Joe Student here is doing his "other page of choice" about his family. Whatever you decide to do yours on, make sure you adjust this "Other" text to something short and appropriate and use the same wording on both navigation pages. Regardless of the text you choose for this link though, the file's name should still remain "other.htm" so it can be easily found on your disk.
Note the home page's organization includes a nested 2 column table with the "trivial matters" in the left hand (first) column and the "my idol" details in the right hand (second) column. This is not a requirement but it can earn you some extra credit points.
Note the resume page's resume information has a two column table based layout with the resume headings in the left hand (first) column and the resume detailed data in the right hand (second) column. This is not a requirement but it can earn you some extra credit points.
