Style Guide

Navigation

  • Position and Size: right below the header, horizontal, always a quarter an inch with a bottom padding of 74 pixels, top padding of 2 pixels, right padding of 36 pixels, and an internal padding of 8 pixels
  • Color: pink (#B72E3E) for background of navigation bar, light green (#8FB52B) for text, and dark green (#7A991A) for when mouse hovers over text
  • Text: Verdana,Arial,Helvetica,sans-serif; 16 pixels; centered, bold, all uppercase, no text decoration, and line height at 200%
  • List: no bullets and text is in-line
  • Navigation Links (in this order): HOME, BIRTH AND EARLY CHILDHOOD, MOVING TO AMERICA, TEENAGE YEARS, COLLEGE LIFE, MARRIAGE, PHOTO GALLERY, ABOUT THE SITE, CONTACT ME

Typography

  • Heading 1: font Blackadder ITC in style, 76 pixels in size, display in-line, color black
  • Heading 2: default setting; important words capitalized
  • Heading 3: default setting; important words capitalized
  • Paragraphs: default setting
  • Lists (in content): default setting
  • Lists (in navigation): no bullets and display is in-line
  • Footer Text: font Verdana,Arial,Helvetica,sans-serif in style, 12 pixels in size, color black, and centered

Color

  • Header: #1E796A
  • Navigation: #B72E3E
  • Content: #FFFFCC
  • Footer: #8FB52B
  • Text: All text is black, except for in the main navigation bar

Logos

The logo of the website will be located in the header on every webpage. It will be two pictures of Huan-Chen Tang, one to the right side of the website title (Huan-Chen Tang), one to the left. The one on the left will be a childhood picture of Huan-Chen Tang, while the one on the right hand will be a more current picture.

Graphics

The only graphics that will appear on the webpage will be pictures of or relating to Huan-Chen Tang. Photos in the photo gallery will be no bigger than 228 in width and 171 in height for horizontal pictures, and 171 in width and 228 in height for vertical pictures. Photos in other pages may very in size, depending on the picture, the content and the design of the particular page.

Content

The content of the webpages will vary from page to page, but will always in some way relate to Huan-Chen Tang or her CIT 230 Web Design and Layout Class.

Best Practices

Some Guidelines to Follow:

  • Always provide alt tags and width and height information
  • Keep the sections and headings of webpages simple and easy to follow
  • Use CSS for all major style and formatting of webpages
  • All webpages are to be created using XHTML and must validate