CSC170 Final Web Project

Project outcome: Create a four page attractive website on a central theme of your choosing. Make something that is useful to you or to some organization, group or individual you know. This one assignment is completed over 3 weeks, but you can work ahead if you want:

• week #13: navigation bar of all pages with nothing else on the pages
• week #14: fill in 2 pages of your site
• week #15: fill in the last 2 pages of your site

Project goals: By working on a larger site, you can consider the design and take on the challenge of getting the site to look exactly as you want and debugging issues. This will give you an ease with creating links of many types that can transfer to many other applications you may use in the future. It will also help you understand how either tables or CSS can be used to layout your page. You will also be dealing with many files that must be in the same folder and have names that match links exactly, so this cements your ability to manage files on your operating system. You will have a full understanding that an internet server is another computer that hosts your pages. A side benefit for some people is a site that helps you in some way, either supporting a small business, your job search, or a club, so that you will continue to edit it for years and retain all these web design skills.

Possible themes/topics:

• website for a small business of a friend (normally including about us, contact us, location, and some product pages)
• ebay site listing products for sale (normally including about us, contact us, location, and some product pages)
• site for a sports team (often including some player profiles, standings, etc. If there is an official site, place the word "unofficial" on your site)
• club or sorority or fraternity site (often including mission statement, events, etc. If there is an official site, place the word "unofficial" on your site)
• friends site (pages of memories, friend profiles, etc)
• event planning site (pages of location, dates, directions, etc.)
• favorite show site (pages of actors, favorite quotes, favorite scenes, video links, etc)
• whatever topic you want
• Special circumstance - changing an existing site.
  • If you want to update an existing site and can copy it to panther- Copy the site to panther and make the changes there. Add a page that has a link to the old site and list the changes you made that fulfill the qualifications of all the links and picture types the final project requires.
  • If you want to update an existing site: email me to make arrangements.Send me screenshots of all the screens you intend to change and the web address. Send a document listing all the changes you plan to make and schedule an appointment to discuss it together.
    

Note: Please do not include personal information you do not want available to the world, and please no pictures of alcohol. Also remember to delete this after class if you don't want it online 10 years from now.
 
The completed site must contain all these requirements:

1. Where does your site go:
   • It will be in your same Adelphi web server account as your pro/con and webcard.
   • Your home page can be the home page for your site, or a very easy to see link to the final added to your webcard or index.
   • (If you want to move your webcard to become a link to your website, see here)
2. Navigation bar: You will need 4 pages each with a navigation bar which links the pages together.
• The navigation bar should stay about the same on each page. It can be as simple as a table you repeat at the top of each page.
  • Easier: If you do not want to use CSS, create a navigation bar by placing the exact same table with the same navigation links at the top of each page.
    • See this video for instructions on creating the navigation bar using tables in Seamonkey.
  • Harder to code: If you liked using CSS, create your navigation bar as you did in your codeacademy course, or look at these CSS Navigation Bar instructions::
    • CSS is easier because it only needs to be maintained in one place, but either method is fine
• The first week's work is complete if the requirements above are fulfilled.
3. What does your homepage need?
   • Navigation bar with links to at least 3 other pages , which you did above
   • Must not be titled “index”, but rather use a title that describes the site. (see movie)
   • A background picture (see movie)
   • Your homepage should be visible on a single computer screen (so a user won’t have to scroll down to see the whole page).
4. What has to be found somewhere on your entire site?
   • At least one link to an email using mailto: (see movie)
   • At least one link to another website (external) (see movie)
   • At least one clickable image (See movie)
   • At least one "top of page" link at the bottom of a page (see movie)
   • At least one table (just insert table)
   • No background should make the words too hard to read on any page, even when a link has been clicked and the word color changed.
     • You can use GIMP to lighten your pictures
     • OR You can use google drawing to lighten your pictures.
   • It should look good on many window sizes and not expect the background to stay in a certain position.
     

Here is a reminder of your web skills

You can optionally use other advanced features such as embedding YouTube movies, javascript, or even making pictures of words using fireworks. If you want to use some advanced features, learn about them here.

Grading Guidelines:

• Reach a 90 by showing all elements correctly. Missing or incorrectly implemented elements deduct points
• Reach 100 by creating a site that serves the purpose of a web site. It is clear the creator asked themselves what is the purpose of the web site and included a nice combination of pictures and text, and the text is easy to read through the background. The audience will clearly understand the purpose and find the information they need to make the web site useful. For example, a portfolio would have some background on each visual. Strategic use of visuals helps as well.

Here are some examples of good final projects:

• http://home.adelphi.edu/~ma21563/ by Marina Pantelidis
• http://home.adelphi.edu/~ad21216/ (but do not underline non-links) by Addler Pierre-Louis
• http://home.adelphi.edu/~as21547/ by Ashley Worthey

Extra help if you were unable to install Filezilla on your mac:

• You can use cyberduck instead of filezilla. You can download cyberduck from here. This movie gives a brief intro to cyberduck.