Introduction

You have been asked to design the main page for a hobby company. Your client has asked you to post a sample Web page on a server so she can review the page design. She has asked that you include a title graphic with an interesting font, a relevant image, and 4 buttons. (The buttons don't have to link to anything.) You should also include some text to show how that will look on the page. Be sure to view the presentation on design before doing this assignment and apply the CARP principles.

Be sure that the content and graphics are appropriate for a college course - something we'd be proud to share with the college president or a potential employer.  Your topic must be different from other project topics (including your final project).

If this doesn't inspire you, here are some alternative topics:

You'll demonstrate your ability to:

Useful resources:

What to Do

  1. Think of a topic & catchy Hobby company name.
  2. Make a paper sketch of how you want your page to look. Use a 2 or 3 fixed column layout (960 pixels wide or less) with header and footer.
  3. Find an appropriate picture (clip art or photo) on the Web.
  4. Choose an interesting font and color that coordinates with your image and create a title image in a graphics program like Fireworks or Photoshop.
  5. Create 4 separate button images with your graphics application. Pick one style and color scheme and stick with it! Not too BIG! If you prefer, you may use CSS rollovers (review listamatic instructions if necessary).
  6. Open Dreamweaver and create a folder named hobby in your root folder.  Move your title, picture, and button image files into this folder.  Create a new file within this folder named default.html . Your page should use a 2 or 3 column fixed layout with header and footer.
  7. Insert the images into your hobby/default.htm page.  Your title, picture, and button images should fit within a 960 pixel wide browser window and all should include alt tags and a page title.  
  8. Make sure all the images are optimized in gif or jpg format so the file sizes are small. This ensures that the page will download quickly (this is what you did in the Images Lab).
  9. Add text to the page. It's ok to copy and paste here -- we just need to get a sense of how it will look.
  10. Your design should demonstrate good usability and design principles covered in your textbook and the screen design presentation.
  11. Add your footer information to the bottom of the page. Include your name, date, a link to your portfolio page, and a link to the CIS 212 site.
  12. Open your portfolio page (212portfolio.html) and add a link to hobby/default.htm. Add a sentence or two explaining what you learned.
  13. Upload your work (PUT) to the studentweb.gcccd.net server. Check your work on the server.  You should see your work at http://studentweb.gcccd.net/YourUserName/hobby

 

Submitting work

Grading - 50 points

Points
Requirements
5 Includes picture and title image with interesting, readable font
5 Includes CSS navigation OR 4 separate button images that look good, are jpg or gif, and are appropriate size, and demonstrate consistent design
5 Images are optimized
5 Includes page title and meaningful alt text for all images. The alt text helps blind users understand what is in the images, sit alt text should repeat the text in the image. (e.g. "Harry's Pub" instead of "title")
5 Includes text content and contact information
5 File is named default.htm and is in the hobby folder
5 2 or 3 column CSS layout
5 212 Portfolio page links to hobby/default.htm
5 Colors coordinate
5 Design follows principles outlined in design textbook and screen design presentation.