CS2623: Server-Side Programming
SSP01: Zodiac Theme

Objective:

• Plan the style for a web site
• Find royalty free graphics
• Create a template

Points

• Full Credit: 40 Points
• Late/Resubmit Credit: 36 Points

Situation

Throughout the semester, a comprehensive web site that incorporated PHP and MySQL will be created and modified. At the end of each chapter in the text, there are Discovery Projects related to a web site with a Chinese Zodiac theme. This web site will be updated as each chapter of the book is completed. There may be other assignments as the class progresses, but this will be the main activity. For the first assignment no actual PHP programming will be required so it can be done without and PHP expertise.

Although not required, it is highly recommended that you use Komodo Edit, Dreamweaver, or some other editor to complete the assignments. Some of their features can definitely help you with debugging PHP code which can be very challenging at times.

Specifications

• Use the standard HTML5 coding

  Also http://www.cheat-sheets.org/saved-copy/HTML-XHTML_Tag_Sheet.pdf especially pp. 4-6 should be helpful.

• Discovery Projects 1-1 to 1-4 on pp. 72 and 73.

• The site will have both button and text navigation. As indicated on p. 72, the text navigation may be at the side or the top.
• The banner and buttons can be created using Photoshop, another graphics program, or http://bannerfans.com . Use good web development techniques when determining the size of the images.
• When selecting a color theme for your site http://colorschemedesigner.com/ might be helpful
• The following site on the Chinese Zodiac may prove helpful. http://www.chinesezodiac.com/
• The Zodiac images (Project 1.4) MUST all be the same size and between 50x100 and 50x150 pixels.
  • Some potential sources for images:
    • https://commons.wikimedia.org/wiki/Main_Page
    • http://www.freepik.com/
    • If attribution is required, one way of handling it would be to add it as the last item in the footer of the webpage.
    • If you have other good free resources, consider sharing the URLs in the class Discussion area. I am sure other students would appreciate it.
  • Need to resize the images and do not own photo editing software? Try one of these.
    • http://www.picresize.com/
    • https://www.picmonkey.com/ (30 day free trial)
• When writing information about the Chinese zodiac be sure to include the 12 animals in proper order and characteristics of each. Again, this site may prove helpful but you are welcome to use others. http://www.chinesezodiac.com/signs.php
• If you find web sites that might be helpful to other students (maybe a site with free images) please post to the Discussion List.
• Discovery Project 1-2:
  • The images MUST all be the same size and between 50x100 and 50x150 pixels.
  • Only create 8 buttons with the following names
    1. Home Page
    2. Site Layout
    3. Control Structures
    4. String Functions
    5. Web Forms
    6. Files
    7. State Information
    8. Object Oriented
• Summary of Images (All must be gif, jpg, or png)
  • Web banner image with title The Chinese Zodiac and a subtitle of A Code Demonstration of PHP
    • Size with button navigation at left: 392x72
      
    • Size with button navigation at top: 468x60
  • Eight (8) navigation buttons images (all the same size approximately 150x30)
  1. Home Page
  2. Site Layout
  3. Control Structures
  4. String Functions
  5. Web Forms
  6. Files
  7. State Information
  8. Object Oriented
  • 12 images - one for each sign of the Zodiac
    • The images MUST all be the same size and between 50x100 and 50x150 pixels.
• Create a folder named zodiac which will contain this week's work.
• Create a basic page named draft.htm/l that displays the basic layout, banner, navigation, and theme. All styling must be done in an external CSS file. The content will be the 12 images that you have located for future assignments as well as a link to the ChineseZodiac.txt file. This actual page may not be used in future assignments, but it is being used to determine that the required work has been completed. Footer and meta tag information is not required, but it still must validate. This is just a "draft" of your site.
  Example of the layout (Note the Navigation buttons may be in the main content area or the header. Your choice)
  

Recurring Specifications:

• CSS must validate for CSS3 (or earlier) Standards
• Code must be easy to read and properly indented.
• Documentation must be appropriate and meaningful.
• CSS files must include a color and typography reference sections (CSS comments) similar to the following but expanded to include the content for the entire website. This will be useful when enhancing and/or expanding the site. (Note: #FF00FF can also be written #F0F. Examples of both are shown below)
  

  /*------------------------------------------------------------------
  COLORS

  Background: #FFFFFF (white)
  Content: #000 (black)
  Header h1: #F00 (red)
  Footer: #c6c6c6 (gray)

  a (standard): #0000FF(blue)
  a (visited): #0F0 ( bright green)
  a (active): #FF0000 (red)

  TYPOGRAPHY

  Body: 1em Tahoma, Verdana, Arial
  Headers: 2.7em/1.3em "Times New Roman", Georgia, serif;
  Navigation Buttons: .75em Tahoma, Verdana, Arial;
  

  Notes: decreasing heading by 0.4em with every subsequent heading level

  -------------------------------------------------------------------*/

Assignment Submission

• Follow the Assignment Submission requirements outlined in http://www.occc.edu/aphilipp/htm_ssp/CS2623_CodingStandards.htm.
• Upload the folder to your apollo1 account.
• View the web page in Firefox, Chrome, Safari, and Internet Explorer.
• Validate and double check to make sure all items are visible from all computers.
  
• Submit the URL of your web page in MoodleRooms. The URL will be http://apollo1.occc.edu/user#####/zodiac/draft.htm/l
• Submission links must open web page in a new window (not inside of MoodleRooms) and display the page (and not a directory)
• XHTML code must validate STRICT and CSS must also validate for CSS3 or earlier. The Web Developer Toolbar in Firefox will be used for grading.
• Assignments not meeting the previous requirements (opening in a new window and XHTML/CSS Validation) cannot be graded. If it is still within the late/resubmit period, they can be re-uploaded and resubmitted (10% penalty). If it is after the final deadline, the work can no longer be submitted.