Project 1

For project 1, you will be using the material given in lecture to design and create a basic business or advertisement website. Like in lab3, you will have a homepage, a products or services page, and a contact us page. Each page within the website will all have the same layout and theme. You might consider creating multiple style sheets: one for the layout/themes, text/font, photo gallery, etc.

For you products or services page, you will implement a 'photo gallery' which will include at least three local images that are 'clickable'. For each image that you include, you will create a corresponding page that will include the image and a description or details for that image. Have the user navigate to the corresponding page once an image has been clicked. You will have at least 6 html files total (ex: project1.html, products.html, contactUs.html, product1.html, product2.html, product3.html).

Layout requirements: layout.css

• a header across the top that changes for each page (Home, Products, Contact Us, ...)
• a static (i.e., never changes) navigation area on the left, which should have links to your home page, products, and contact us
• an area on the right for notes (visible on all pages)
• a content area between the left and right areas that changes content for each page
• a static footer at the bottom of the wrapper area - the footer can be a div area or a table
• areas must have a background color or a background image (no unstyled backgrounds)

Text style requirements: text.css

• text must have a font type, size, and color set by you (no default font color or default font type allowed)
• modify the list style type for the unordered list in the navigation menu

Additional requirements:

• Name the opening page project1.html.
• All pages in your project1 website must use the same page layout and text style as the opening page.
• Create a Products page that displays a photo gallery of 3 or more images, displayed horizontally in the content area. If you need to resize an image, open the image in Microsoft Paint. Select Image > Stretch/Skew. Reduce the image by the same percentage in both directions. Save it. After you get your images to fit, make one of the images clickable.
• When an image is clicked, display a new page that contains the image and information about the clickable image. Put this information in the content area of the page. You need a minimum of three additional pages for each image.
• Have a Contact Us page that will include dummy information such as a phone number, email, fax, location, business hours, etc.
• Extra Credit: use Google's Map API to embed a map view to display the location for CSU, Bakersfield within the Contact Us page.

Rubric

• Layout: Header, left menu, right menu, footer, content (10pts each) layout.css
• Background image (5 pts)
• Text: Font style, font size, font color, list item style (2.5 pts each) text.css
• Photo Gallery: Having three pictures, horizontal, and clickable (15 pts) products.html
• Three picture info pages that will include the same layout, the picture and a short summary of the image (20 pts) prod1.html, prod2.html, prod3.html

Submission

Create a directory in your public_html and label it project1. Have all of your files, including images, within this directory. Project 1 will be due 3/01 before midnight. No late submissions. Partial points will be given for incomplete criteria.