COURSE CALENDAR | WEEK 06 CLASS OUTLINE | Homework

  1. Review Class Projects and Finalized Mockups.
    • Discuss what is required for Midterm Project and Exam.
    • Your Project should look like this.
  2. EXERCISE: Review Intro to CSS
    • Attach your style sheet to the rest of the pages in your site.
    • Open your resume.html in the Firefox browser. From the Web Developer Toolbar in Firefox, choose Information > Display Topographic Information. Then choose Outline > Outline Current Element. Hover your mouse over each element. Notice the status bar at the bottom of the browser window.
    • Make a box model drawing of your resume page on piece of paper. Include the elements: body, h1, h2, h3, h4, h5, h6, p, ul, li and a and indicate the margins around each element in pixels or ems.
    • CSS review: http://css.maxdesign.com.au/selectutorial/rule.htm
    • CSS issues and bugs:
    • Typography | Margins
      • General: Control text element margins by setting top margins to 0px and set spacing via bottom margins
      • Lists: List margins and padding are displayed differently by different browsers. A good starting point is to set ul margins and padding to 0 and li margins to 0. Adjust the indent by increasing the ul margin-left.
    • Pseudo-classes: a:link, a:visited, a:hover, a:active

    link states

  3. Color on the Web:
  4. Optimizing Web Images (pdf): Optimizing images for the web is an important skills to master. The goal is to get the right balance between file size and picture quality. On any webpage you will see that most of its load time comes from images. Your website will be needlessly slow if your images are not properly optimized.
    • Choosing the right Graphic File Format: GIF, JPG and PNG are three common file formats used on for web site design. GIFs are generally used for flat graphic images, like logos. JPEGS are used for continuous-tone or photographic images. PNGs were invented to replace the GIF format, but some browsers don't support them.
      • GIF: Graphics Interchange Format (GIF) is the file format commonly used to display indexed-color graphics and images in hypertext markup language (HTML) documents over the World Wide Web. GIF is an LZW-compressed format designed to minimize file size and electronic transfer time. GIF format preserves transparency in indexed-color images.
      • JPEG: Joint Photographic Experts Group (JPEG) format is commonly used to display photographs and other continuous-tone images. Unlike GIF format, JPEG retains all color information in an RGB image, but compresses file size by selectively discarding data. A JPEG image is automatically decompressed when opened. A higher level of compression results in lower image quality, and a lower level of compression results in better image quality. In most cases, the Maximum quality option produces a result indistinguishable from the original.
      • PNG: Portable Network Graphic (PNG, pronounced "ping") is an image format developed by a consortium of graphic software developers as a nonproprietary alternative to the GIF image format. PNG graphics were designed specifically for use on Web pages, and they offer a range of attractive features that should eventually make PNG the most common graphic format. These features include a full range of color depths, support for sophisticated image transparency, better interlacing, and automatic corrections for display monitor gamma. Unfortunately, the PNG graphic format is not yet widely supported all some browsers.
    • Anti-Aliasing- The apparent smoothness of the edge of a graphic, by blending the color of an object with the color of the background. Very important for text-based image legibility.
  5. EXERCISE: Creating banner and bullet images for your site
    • Images folder: Make a folder in your root directory called images.
    • Site Title/Banner-- Your logo, photograph or digital image is used to identify the "brand" of your site. This should also embody your Site Persona and work with your color scheme and graphic style. The branding area is 767px wide by 126px high (the height can be adjusted to your choice). Include the title of your site in this banner.
    • Custom bullet: Your own custom bullet should be consistent with and reinforce your graphic style and color scheme. Keep in mind the size of the bullet should be about 12px. Here are some samples, for reference, please CREATE YOUR OWN.
    • Working from your Mockup:
      1. Open your mockup in Photoshop and save it as a copy.
      2. Use the Crop Tool to crop your banner.
      3. Using the optimizing techniques demonstrated in class, use File > Save For Web and save the file to your images folder in your root directory.
      4. Repeat for bullet.
  6. Adding images to CSS:

Homework | Week 6

Next Week:

Midterm Project is DUE Week 08!!

Review the Midterm Project Description on the Course Documents section of this site.