Приглашаем посетить
List of Figures
List of Figures
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
-
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.
-
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 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
-
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