Table of Contents
CONTENTS
About the Author
About the Technical Reviewer
Acknowledgments
Foreword
Introduction
Chapter 1: An Introduction to Web Design
A brief history of the Internet
Why create a website?
Audience requirements
Web design overview
Why WYSIWYG tools aren't used in this book
Introducing HTML and XHTML
Introducing the concept of HTML tags and elements
Nesting tags
Web standards and XHTML
Semantic markup
Introducing CSS
Separating content from design
The rules of CSS
Types of CSS selectors
Adding styles to a web page
The cascade
The CSS box model explained
Creating boilerplates
Working with website content
Information architecture and site maps
Basic web page structure and layout
Limitations of web design
Chapter 2: Web Page Essentials
Starting with the essentials
Document defaults
DOCTYPE declarations explained
Partial DTDs
What about the XML declaration?
The head section
Page titles
meta tags and search engines
Attaching external documents
The body section
Content margins and padding in CSS
Zeroing margins and padding on all elements
Working with CSS shorthand for boxes
Setting a default font and font color
Web page backgrounds
Web page backgrounds in CSS
Web page background ideas
Closing your document
Naming your files
Commenting your work
Web page essentials checklist
Chapter 3: Working with Type
An introduction to typography
Styling text the old-fashioned way (or, why we hate font tags)
A new beginning: Semantic markup
Paragraphs and headings
Logical and physical styles
The importance of well-formed markup
Styling text using CSS
Defining font colors
Defining fonts
Using images for text
Defining font size and line height
Defining font-style, font-weight, and font-variant
CSS shorthand for font properties
Controlling text element margins
Using text-indent for print-like paragraphs
Setting letter-spacing and word-spacing
Controlling case with text-transform
Creating alternatives with classes and spans
Styling semantic markup
Creating drop caps and pull quotes using CSS
Working with lists
Unordered lists
Ordered lists
Definition lists
Nesting lists
Styling lists with CSS
List margins and padding
Inline lists for navigation
Thinking creatively with lists
Chapter 4: Working with Images
Introduction
Color theory
Color wheels
Additive and subtractive color systems
Creating a color scheme using a color wheel
Working with hex
Web-safe colors
Choosing formats for images
JPEG
GIF
PNG
Other image formats
Common web image gaffes
Using graphics for body copy
Not working from original images
Overwriting original documents
Busy backgrounds
Lack of contrast
Using the wrong image format
Resizing in HTML
Not balancing quality and file size
Text overlays and splitting images
Stealing images and designs
Working with images in XHTML
Using alt text for accessibility benefits
Descriptive alt text for link-based images
Null alt attributes for interface images
Using alt and title text for tooltips
Using CSS when working with images
Applying CSS borders to images
Using CSS to wrap text around images
Displaying random images
Chapter 5: Using Links and Creating Navigation
Introduction to web navigation
Navigation types
Inline navigation
Site navigation
Search-based navigation
Creating and styling web page links
Absolute links
Relative links
Root-relative links
Internal page links
Backward compatibility with fragment identifiers
Top-of-page links
Link states
Defining link states with CSS
Correctly ordering link states
The difference between a and a:link
Editing link styles using CSS
Multiple link states: The cascade
Enhanced link accessibility and usability
Link targeting
Links and images
Adding pop-ups to images
Image maps
Faking images maps using CSS
Enhancing links with JavaScript
Creating a pop-up window
Creating an online gallery
Collapsible page content
Creating navigation bars
Using lists for navigation bars
Working with inline lists
Graphical navigation with rollover effects
The dos and don'ts of web navigation
Chapter 6: Tables: How Nature (and the W3C) Intended
The great table debate
How tables work
Adding a border
Cell spacing and cell padding
Spanning rows and cell
Setting dimensions and alignment
Creating accessible tables
Captions and summaries
Using table headers
Row groups
Scope and headers
Building a table
Styling a table
Adding borders to tables
Adding separator stripes
Tables for layout
Chapter 7: Page Layouts with CSS
Layout for the Web
Grids and boxes
Working with columns
Fixed vs. liquid design
Layout technology: Tables vs. CSS
Logical element placement
Workflow for CSS layouts
Anatomy of a layout: Tables vs. CSS
Creating a page structure
Box formatting
CSS layouts: A single box
Nesting boxes: Boxouts
The float property
Advanced layouts with multiple boxes and columns
Working with two structural divs
Placing columns within wrappers and clearing floated content
Working with sidebars and multiple boxouts
Creating flanking sidebars
Automating layout variations
Scrollable content areas
Working with frames
Working with internal frames (iframes)
Scrollable content areas with CSS
Chapter 8: Getting User Feedback
Introducing user feedback
Using mailto: URLs
Scrambling addresses
Working with forms
Creating a form
Adding controls
Improving form accessibility
CSS styling and layout for forms
Adding styles to forms
Advanced form layout with CSS
Sending feedback
Configuring nms FormMail
Script server permissions
Sending form data using PHP
Using e-mail to send form data
A layout for contact pages
Using microformats to enhance contact information
Online microformat contacts resources
Contact details structure redux
Chapter 9: Dealing with Browser Quirks
The final test
Weeding out common errors
A browser test suite
Installing multiple versions of browsers
Dealing with Internet Explorer bugs
Outdated methods for hacking CSS documents
Conditional comments
Dealing with rounding errors
Alt text overriding title text
Common fixes for Internet Explorer 5.x
Common fixes for Internet Explorer 6 and 5
Fixing hasLayout problems (the peekaboo bug)
Targeting other browsers
Chapter 10: Putting Everything Together
Putting the pieces together
Managing style sheets
Creating a portfolio layout
About the design and required images
Putting the gallery together
Styling the gallery
Hacking for Internet Explorer
Creating an online storefront
About the design and required images
Putting the storefront together
Styling the storefront
Fonts and fixes for the storefront layout
Creating a business website
About the design and required images
Putting the business site together
Styling the business website
Working with style sheets for print
Appendix A: XHTML Reference
Standard attributes
Core attributes
Keyboard attributes
Language attributes
Event attributes
Core events
Form element events
Window events
XHTML elements and attributes
Appendix B: Web Color Reference
Color values
Web-safe colors
Color names
Appendix C: Entities Reference
Characters used in XHTML
Punctuation characters and symbols
Quotation marks
Spacing and nonprinting characters
Punctuation characters
Symbols
Characters for European languages
Currency signs
Mathematical, technical, and Greek characters
Common mathematical characters
Advanced mathematical and technical characters
Greek characters
Arrows, lozenge, and card suits
Converting the nonstandard Microsoft set
Appendix D: CSS Reference
The CSS box model
Common CSS values
CSS properties and values
Basic selectors
Pseudo-classes
Pseudo-elements
CSS boilerplates and management
Modular style sheets
Appendix E: Browser Guide
Firefox
Internet Explorer
Opera
Safari
Other browsers
Appendix F: Software Guide
Web design software
Graphic design software
The author's toolbox
Index
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z
