Taft Information Technology High School, Cincinnati Public Schools Enroll at TAft IT High School
Academics    College Access    Related Services    Activities
Parents/Community    Students    Staff    Partnerships
Link to Cincinnati Public Schools Home Page Link to Taft IT home pagei

 

Group of students

 

Web Style Guide

Type Styles

The appearance of all the text and links in this website are controlled by the stylesheet.

Body Text - Arial/Helvetica/sans-serif, 0.5 ems. The size is specified in ems -- a variable size specification that enables users to change the text size if they wish.

Headings - Headings in inside pages are default HTML styles, except for the color.

Colors - The following colors are specified:

  • Dark green: #006633
  • Light green: #61AD87
  • Dark orange: #CC9900
  • Light orange: #E1A53A
  • Tan: #F8EEDC

Link Styles

  • The default unvisited link is green, underlined. Visited links are also green underlined.

  • The appearance of the navigation links in the header and footer is determined by special style classes: homebody, topnav1, topnav2, and bottomnav.

back to top

"Library" files

The site header and footer information are in Dreamweaver "Library" files. To change those links, edit the Library files. Everything about the Library files is the same as what you see on the website -- except for the type faces and spacing. Library files do not show the styles in the css stylesheet and appear as plain html.

When you save changes to a Library file, you will be asked to update all files that contain that Library. You should do this, then upload all the updated files to your web server.

  • "header.lbi"
    • This file contains all the elements in the header section, including the CPS logo, school name and two levels of navigation at the top.
    • There are two image maps in the header. The CPS logo is linked to the CPS home page and the Taft IT school name is linked to the Taft IT home page.
  • "footer.lbi"
    • This file contains the content in the footer.
    • The school name in the footer is a link to the school home page.

    back to top

About the Source Files (PhotoShop files)

There are several source files for this site:

  • Taft_IT.psd is the master file for the site. The header image and enroll button were derived from this file, and all the colors were matched to this file. Most site elements were recreated using HTML code.
  • Taft_IT_slideshow.psd is the master file for the slideshow images. It has two layers: the arrow layer and the photo layer. The arrow layer is locked so that it cannot be moved, which is extremely important to maintain a seamless transition from this image to the tan background in the left column. Replace only the photo to create new images for the home page.
  • Taft_IT_inside.psd is the master file for the inside template. It shows how the designer intended the site to look, but it was not used to create any images on the site.
  • Taft_IT_page-background.psd is the background of the pages. It was derived from the Taft_IT master file and adapted so that you can create pages that are longer than the original design, if needed.
  • Taft_IT_inside_bullet.psd is the master file for the triangular shaped bullet used in the inside page navigation.
  • Taft_IT_inside_photo.psd is the master file for the inside page photos. Any jpg or gif image that is 195 x 195 pixels can be used. These photos do not need to be made from this mater file.

back to top

About the Slideshow

The slideshow is created with javascript. You do not need to -- and should not -- edit the script at all. All you need to do to update the slideshow is to replace the photos in the images-slideshow folder with new images that have the same names.

Use the Taft_IT_slideshow.psd Photoshop file to make new slideshow photos.

back to top

 







bulletType Styles

bulletLibrary files

bulletSource files

bulletSlideshow



Link to Cincinnati Public Schools home page