Week 3 Summary

This week focused on two aspects of web site design: graphics and CSS. When designing a site, it is important to design for the medium: the computer monitor, which displays color by mixing the three basic colors of light: red, green, and blue (RGB). Because colors vary widely from one monitor to another, based on both the user’s preferences and the exact brand of equipment, content assessiblity requires several important considerations. For example, to ensure the greatest portability of Web pages restrict the color palette to the colors available in the browser-safe palette. It is also better to specify colors with RGB or the more common hexadecimal values instead of color names, which are variable in nature.

It is also important to consider and control background colors and elements. For example, remember that the element border defaults to the element color unless you specifically state a border color. Background colors affect any padding areas in the element. They can be applied to both blocklevel and inline elements. Use the background-repeat and background-position properties to control the appearance of images in the background, choosing background images that do not detract from the legibility of your content. In addition to testing for different browser, it is also important to test at different color depths as well.


I also studied about different types of graphics, and how to use them effectively and wisely. Most interesting to me was finding out the two types of graphics available: raster and vector. Raster, or bitmap images include the following file formats: BMP, GIF, JPEG, JPG, PNG, PICT, PCX, TIFF, PSD. Common vector formats include: AI (Adobe Illustrator); CDR (CorelDRAW); CMX (Corel Exchange); CGM Computer Graphics Metafile; DXF AutoCAD; and WMF Windows Metafile.This week, I learned how to use Cascading Style Sheets to manipulate a variety of text properties and achieve professional-quality typography on your Web site. Some of the key principles to follow are:

Use type to communicate information structure, and use fonts consistently and design for legibility.

Because HTML text downloads faster than graphics-based text it is consistently a good choice to use whenever possible.

When choosing fonts, it is important to use browser-safe fonts that appear as consistently as possible across operating systems.

Building external style sheets and linking them to multiple documents standardizes styles.

It is important to choose the correct measurement unit based on the destination medium. For the computer screen, ems, pixels, or percentage measurements can scale to the user’s preferences.

Because different browsers and computing platforms render text in different sizes, testing a site in different browsers is vital

Specifying font-substitution values to ensure that your text is displayed properly across different platforms is another consideration when designing web sites/pages.

Bitmap images can be summarized by the following key points:

• pixels in a grid

• resolution dependent

• resizing reduces quality

• easily converted

• restricted to rectangle

• minimal support for transparency


.The broad rules of thumb for bitmap images are:

~ For photographic type images, JPG is best
~ For logos or images with blocks of flat colour and no gradients, GIF or PNG8
~ For images using effects such as drop shadows or glows, which also require transparency, choose PNG.

Vector images can be summarized by the following key points:
• scalable
• resolution independent
• no background
• cartoon-like
• inappropriate for photo-realistic images
• metafiles contain both raster and vector data
Graphics best suited for the vector format are:
page layout       type         line art or illustrations.

Additionally, I learned more about the concepts of the CSS box and visual formatting models. CSS has three border characteristics: style, color, and width. Style must be stated to make the border appear. The special box properties let you create floating images or text boxes. The margin, border, and padding properties of CSS can create novel effects; however, legiblility of content is the first and most important consideration of good web design.This is important to know because judiciously use of these properties enhances the legibility of site content. I learned how the margin, padding, and border properties control the space around block-level elements on a Web page, with the CSS list-style properties. The CSS box model allows control spacing around the element content, such as the values of margin, border, and padding for all four sides of the box or individual sides and making customized lists. To ensure scalability of Web pages, choose relative, rather than fixed, length units such as ems or pixels.

4096 Color Wheel Hover over the wheel to view colors.
Click to choose a web-smart color.
Reload to clear.