Page #89 (Index)

Chapter 1: Understanding Structured Markup

Figure 1.1: eBay's Home Page with all table borders turned on

Figure 1.2: Document tree with parent, child, and leaf nodes

Figure 1.3: The colors in this page are all generated using HTML color attributes

Figure 1.4: The range of fonts, colors, and sizes in this image are generated by HTML.

Figure 1.5: .This early web page still looks great because of its background.

Figure 1.6: HTML defines the borders, padding, and spacing of page elements.

Figure 1.7: This site uses tables rather than CSS for layout, a common current practice.

Figure 1.8: IE's marquee tag-not only proprietary, but annoying, too.

Figure 1.9: A portion of the HTML 4.01 Transitional DTD as seen in the Opera browser

Figure 1.10: Studying logical structure, unstyled.

Figure 1.11: The same document, styled.

Figure 1.12: Unstyled markup

Figure 1.13: The styled entry at Molly.Com

Chapter 2: Learning CSS Theory

Figure 2.1: Using inline style

Figure 2.2: Previewing the print style

Figure 2.3: The @import style is ignored in this noncompliant browser.

Figure 2.4: Resolving conflicts within the cascade.

Figure 2.5: The child element inherits from the parent.

Figure 2.6: The box model

Chapter 3: Writing CSS

Figure 3.1: The unstyled content

Figure 3.2: Examining a portion of the document tree

Figure 3.3: A portion of the unstyled content within a browser window

Figure 3.4: Examining the styled margins

Figure 3.5: Styling the body of with margins, fonts, line height, color, and background colot

Figure 3.6: Using the element box to assign interesting style to a header

Figure 3.7: Comparing the styles for h1 and h2 headers

Figure 3.8: A portion of the document as it looks with the current style sheet in place

Figure 3.9: Using pseudo classes to apply a hover style to a link

Figure 3.10: Using classes to apply style

Figure 3.11: The final style sheet as applied to the document

Figure 3.12: The W3C's CCS validator

Figure 3.13: The style sheet passes validation! The full style sheet will be displayed as you scroll down the page.

Chapter 4: CSS Typography

Figure 4.1: The type on the WaSP home page is easy to read and therefore very functional

Figure 4.2: While still readable, the type on this page is used for aesthetics, too.

Figure 4.3: Type within this design is largely experimental rather than specific to verbal communication

Figure 4.4: Examples of font styles

Figure 4.5: Examining font variants

Figure 4.6: Compare these weight samples with the standard weight. Note that many typefaces cannot adequately render the differences in the numeric values.

Figure 4.7: Condensed (top) and expanding (bottom) examples using non-CSS glyphs

Figure 4.8: Sizing type from baseline to baseline

Figure 4.9: Exploring font families as defined in CSS

Figure 4.10: The default font compared to the Arial font displayed by one browser and computer

Figure 4.11: The heading style is serif, and the body text in sans-serif, creating a nice contrast between heading and body.

Figure 4.12: Family and sizing used to style headers and paragraphs

Figure 4.13: Using font-style and font-variant to create styles for heading

Figure 4.14: Using the text-indent property, you can indent the first line of text in each paragraph.

Figure 4.15: Using text-align with left, right, center, and justify values for the paragraphs within our sample

Figure 4.16: Letter and word spacing. Compare this to earlier examples of the same document without the spacing rules in place

Figure 4.17: Using text-transform on headings to control capitalization.

Figure 4.18: Using line-height values

Chapter 5: Color, Backgrounds, and Borders

Figure 5.1: The familiar color wheel

Figure 5.2: CMYK color

Figure 5.3: RGB color

Figure 5.4: The 216 colors of the web-safe palette

Figure 5.5: The simply styled document

Figure 5.6: Adding color using a hexadecimal value

Figure 5.7: Using shorthand to apply color to headings

Figure 5.8: using specific RGB values

Figure 5.9: Every means of specifying color is used to create the colors within this page

Figure 5.10: Adding a few background colors starts to perk this page up

Figure 5.11: This small image tiles to fill the canvas, creating a seamless effect.

Figure 5.12: Adding the background to the document

Figure 5.13: Adding a background to only the paragraph elements

Figure 5.14: Repeating a background tile horizontally-notice how the background color appears where the background ceases to tile.

Figure 5.15: Repeating the background along the y-axis only

Figure 5.16: Here, the background doesn't repeat

Figure 5.17: Adding a background to an element

Figure 5.18: Positioning a background using a percentage

Figure 5.19: using pixel values to position the background

Figure 5.20: Positioning backgrounds using keywords

Figure 5.21: Using paired keywords for background positioning

Figure 5.22: Visible border options

Figure 5.23: Creating border styles

Figure 5.24: Adding color, style, and width to borders

Chapter 6: Working with CSS Layouts

Figure 6.1: Box offset: top

Figure 6.2: Box offset: bottom

Figure 6.3: : Box offset: right

Figure 6.4: Box offset: left

Figure 6.5: An absolutely positioned box

Figure 6.6: Floating images

Figure 6.7: Flowing text around a floated element

Figure 6.8: Demonstrating the use of padding for white space

Figure 6.9: Floating can create a ragged-right margin

Figure 6.10: Justifying text to avoid a ragged right

Figure 6.11: Clearing to both sides of a float

Figure 6.12: Visualizing boxes along the z-axis

Figure 6.13: A three-column fixed and fluid layout

Figure 6.14: An example of a two-column layout using float

Figure 6.15: Anatomy of a correctly interpreted box

Figure 6.16: Web page with CSS layout styles

Figure 6.17: No layout, but some styles, and the logically structured test is completely readable in Netscape 4.x.

Chapter 7: Reconstructing a Table-Based Site

Figure 7.1: The original page

Figure 7.2: Examining the nested, complex layout tables

Figure 7.3: Even with all the font elements gone, the page looks basically the same

Figure 7.4: With the span element and related attributes gone, changes to fonts (A) appear.

Figure 7.5: Further deconstruction occurs at this stage.

Figure 7.6: With all presentation and spacer graphics within the table gone, the layout deteriorates.

Figure 7.7: The re-engineered layout using simple tables with no nests

Figure 7.8: Examine the re-engineered tables in this screenshot. The layout is incredibly simplistic compared to the original.

Figure 7.9: Applying temporary styles to visualize the layout effectively

Figure 7.10: Using backgrounds to denote areas of the page

Figure 7.11: Combining both temporary style sheets for border and field shading

Figure 7.12: The left navigation bar (A) is now effectively styled.

Figure 7.13: A link within the navigation bar

Figure 7.14: A link as the mouse passes over it

Figure 7.15: Here, the majority of the content area has been restyled, with the primary exception of the speaker list (A).

Figure 7.16: The top of the speaker list

Figure 7.17: The expert list is recreated with some compromise to text quality and size.

Figure 7.18: The speaker name stays the same color during hover, despite the fact that it is part of the link.

Figure 7.19: The document tree for the #expertlist section

Figure 7.20: The footer remains unstlyed, despite the look of the rest of the document.

Figure 7.21: The styled footer

Figure 7.22: The completed, simplified table and CSS design

Figure 7.23: Using floats for laying out the document CSS

Figure 7.24: Using CSS positioning for laying out the document

Chapter 8: CSS Design Gallery

Figure 8.1: The home page of WOW's Learning Center

Figure 8.2: The Career Center at WOW's Learning Center

Figure 8.3: The Business and Law section, with an appropriately austere color scheme

Figure 8.4: The Design and Usability page uses a bright, lively color scheme

Figure 8.5: The Programming section, with colors reflecting technology (silver) and progress (red)

Figure 8.6: The BlueRobot home page is a simple but attractive CSS design.

Figure 8.7: Bowman uses graphics effectively to produce a slick page appropriate for a visual designer

Figure 8.8: Bowman uses lighter colors for the article page

Figure 8.9: For the portfolio section, an artsy black is used

Figure 8.10: A combination of subtle grays and blues enhance the informatioin page

Figure 8.11: Pirouz opts for a sophisticated and consistent look.

Figure 8.12: Here, only two columns within the content area are used.

Figure 8.13: Only one central column in use

Figure 8.14: A portion of the complex spiral page

Figure 8.15: Kat's navigation link, normal state

Figure 8.16: Kat's navigation link, mouseover state

Figure 8.17: Navigation links, normal state

Figure 8.18: Navigation links, mouseover, with text based pop-ups

Figure 8.19: Navigation links, mouseover, with image-based pop-ups

Figure 8.20: The menus on this page look normal and innocent.

Figure 8.21: CSS-driven hierarchical menus

Chapter 9: Wired News: A Visual Tour

Figure 9.1: Wired News: Home Page

Figure 9.2: Nonstyled pages are still readable and useful (A).

Figure 9.3: Text sizing option

Figure 9.4: Normal text size

Figure 9.5: Large text size

Figure 9.6: Examining the style schematic for Wired News

Figure 9.7: Grayscale palette

Figure 9.8: Viewing the grayscale sample

Figure 9.9: Monday color palette

Figure 9.10: Monday color schemes

Figure 9.11: Tuesday color palette

Figure 9.12: Tuesday color scheme

Figure 9.13: Wednesday color palette

Figure 9.14: Wednesday color scheme

Figure 9.15: Thursday color palette

Figure 9.16: Thursday color scheme

Figure 9.17: Friday color palette

Figure 9.18: Friday color scheme

Figure 9.19: Weekend color palette

Figure 9.20: Weekend color scheme

Figure 9.21: Alternate color palette #1

Figure 9.22: Alternate scheme #1:

Figure 9.23: Alternate color palette #2

Figure 9.24: Alternate scheme #2

Figure 9.25: PDA style, home page

Figure 9.26: PDA style, business page

Figure 9.27: Color style, home page

Figure 9.28: Color style, business page