Learning Web Design, 3rd Edition

Learning Web Design, 3rd Edition

by Jennifer Niederst Robbins
Released June 2007
Publisher(s): O'Reilly Media, Inc.
ISBN: 9780596527525

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Buy on Amazon
Start your free trial

Book description

Everything you need to know to create professional web sites is right here. Learning Web Design starts from the beginning -- defining how the Web and web pages work -- and builds from there. By the end of the book, you'll have the skills to create multi-column CSS layouts with optimized graphic files, and you'll know how to get your pages up on the Web. This thoroughly revised edition teaches you how to build web sites according to modern design practices and professional standards. Learning Web Design explains:

  • How to create a simple (X)HTML page, how to add links and images

  • Everything you need to know about web standards -- (X)HTML, DTDs, and more

  • Cascading Style Sheets -- formatting text, colors and backgrounds, using the box model, page layout, and more

  • All about web graphics, and how to make them lean and mean through optimization

  • The site development process, from start to finish

  • Getting your pages on the Web -- hosting, domain names, and FTP

The book includes exercises to help you to learn various techniques, and short quizzes to make sure you're up to speed with key concepts. If you're interested in web design, Learning Web Design is the place to start.

Table of contents

  1. Cover Page
  2. Title Page
  3. Copyright Page
  4. CONTENTS
  5. PREFACE
    1. Acknowledgments
    2. O’Reilly Would Like to Hear From You
  6. PART I GETTING STARTED
    1. CHAPTER 1 WHERE DO I START?
      1. Am I Too Late?
      2. Where Do I Start?
      3. What Do I Need to Learn?
        1. Graphic design
        2. Information design
        3. Interface design
        4. Document production
        5. Scripting and programming
        6. Multimedia
      4. Do I Need to Learn Java?
        1. HTML/XHTML
        2. CSS (Cascading Style Sheets)
        3. JavaScript/DOM scripting
        4. Server-side programming
        5. XML
        6. Java
      5. What Do I Need to Buy?
        1. Equipment
        2. Software
          1. Web page authoring
          2. HTML editors
          3. Graphics software
          4. Multimedia tools
          5. Internet tools
      6. What You’ve Learned
      7. Test Yourself
    2. CHAPTER 2 HOW THE WEB WORKS
      1. The Internet Versus the Web
      2. Serving Up Your Information
      3. A Word About Browsers
      4. Web Page Addresses (URLs)
        1. The parts of a URL
        2. Default files
      5. The Anatomy of a Web Page
        1. HTML documents
        2. A quick introduction to HTML
        3. But where are the pictures?
      6. Putting It All Together
      7. Test Yourself
    3. CHAPTER 3 THE NATURE OF WEB DESIGN
      1. Browser Versions
        1. Coping with various browser versions
      2. Alternative Browsing Environments
        1. Users with disabilities
        2. The mobile Web
        3. Dealing with diversity
        4. For further reading
      3. User Preferences
        1. Coping with user preferences
      4. Different Platforms
        1. Coping with different platforms
      5. Connection Speed
        1. Coping with unknown connection speed
      6. Browser Window Size and Monitor Resolution
        1. Go with the flow
        2. Web page dimensions
        3. Coping with browser window size
      7. Monitor Color
        1. Brightness
        2. Number of colors
        3. Coping with monitor color variation
      8. Know Your Audience
      9. Keeping the Big Picture in Mind
      10. Test Yourself
  7. PART II HTML Markup for Structure
    1. CHAPTER 4 CREATING A SIMPLE PAGE
      1. A Web Page, Step by Step
      2. Before We Begin, Launch a Text Editor
        1. Creating a new document in Notepad (Windows users)
        2. Creating a new document in TextEdit (Macintosh users)
      3. Step 1: Start with Content
        1. Learning from step 1
      4. Step 2: Give the Document Structure
        1. Introducing... the HTML element
        2. Basic document structure
      5. Step 3: Identify Text Elements
        1. Introducing...semantic markup
        2. Block and inline elements
        3. Default styles
      6. Step 4: Add an Image
        1. Empty elements
        2. Attributes
      7. Step 5: Change the Look with a Style Sheet
      8. When Good Pages Go Bad
      9. Test Yourself
      10. (X)HTML Review: Document Structure Elements
    2. CHAPTER 5 MARKING UP TEXT
      1. Building Blocks
        1. Paragraphs
        2. Headings
        3. Long quotations
        4. Preformatted text
        5. Addresses
      2. Lists
        1. Unordered lists
        2. Ordered lists
        3. Definition lists
      3. Adding Line Breaks
      4. The Inline Text Element Round-up
        1. Semantic inline elements
          1. Adding emphasis to text
          2. Short quotations
          3. Abbreviations and acronyms
          4. Citations
          5. Defining terms
          6. Program code elements
          7. Inserted and deleted text
        2. Presentational inline elements
      5. Generic Elements (div and span)
        1. Divide it up with a div
        2. Get inline with span
        3. Element identifiers
          1. The id identifier
          2. The class identifier
      6. Some Special Characters
      7. Putting It All Together
      8. Test Yourself
      9. (X)HTML Review: Text Elements
    3. CHAPTER 6 ADDING LINKS
      1. The href Attribute
      2. Linking to Pages on the Web
      3. Linking Within Your Own Site
        1. Linking within a directory
        2. Linking to a lower directory
        3. Linking to a higher directory
        4. Site root relative pathnames
        5. It’s the same for images
        6. Linking to a specific point in a page
          1. Step 1: Naming the destination
          2. Step 2: Linking to the destination
        7. Linking to a fragment in another document
      4. Targeting a New Browser Window
        1. A new window with markup
        2. Opening a window with JavaScript
      5. Mail Links
      6. Test Yourself
      7. (X)HTML Review: The Anchor Element
    4. CHAPTER 7 ADDING IMAGES
      1. First, a Word on Image Formats
      2. The img Element
        1. Providing the location with src
        2. Providing alternate text with alt
        3. Long descriptions
        4. Providing width and height dimensions
          1. Match values with actual pixel size
      3. Imagemaps
        1. The parts of an imagemap
        2. Creating the map
        3. Interpreting a map
      4. Test Yourself
      5. (X)HTML Review: Image and Imagemap Elements
    5. CHAPTER 8 BASIC TABLE MARKUP
      1. How Tables Are Used
      2. Minimal Table Structure
      3. Table Headers
      4. Spanning Cells
        1. Column spans
        2. Row spans
      5. Cell Padding and Spacing
        1. Cell padding
        2. Cell spacing
      6. Captions and Summaries
        1. The caption element
        2. The summary attribute
      7. Table Accessibility
      8. Wrapping Up Tables
      9. Test Yourself
      10. (X)HTML Review: Table Elements
    6. CHAPTER 9 FORMS
      1. How Forms Work
        1. From data entry to response
      2. The form Element
        1. The action attribute
        2. The method attribute
          1. The POST method
          2. The GET method
      3. Variables and Content
        1. The name attribute
        2. Naming your variables
      4. Form Accessibility Features
        1. Labels
        2. fieldset and legend
      5. The Great Form Control Round-up
        1. Text entry controls
          1. Single-line text field
          2. Password text entry field
          3. Multiline text entry field
        2. Submit and reset buttons
        3. Radio and checkbox buttons
          1. Radio buttons
          2. Checkbox buttons
        4. Menus
          1. Pull-down menus
          2. Scrolling menus
          3. Grouping menu options
        5. File selection control
        6. Hidden controls
      6. Form Layout and Design
      7. Test Yourself
      8. (X)HTML Review: Forms
    7. CHAPTER 10 UNDERSTANDING THE STANDARDS
      1. Everything You’ve Wanted to Know About HTML But Were Afraid to Ask
        1. HTML gets muddied...
        2. ...and back on track
        3. HTML in three flavors
          1. Transitional
          2. Strict
          3. Frameset
        4. Meet the DTDs
      2. Enter XHTML
        1. Rewriting HTML
        2. XHTML Syntax
        3. Namespace and language requirements
      3. From the Browser’s Point of View
      4. Declaring the Document Type
        1. Available DOCTYPE declarations
          1. HTML 4.01 DTDs
          2. XHTML 1.0 DTDs
      5. Which One Should You Use?
        1. Transitional or strict
        2. HTML or XHTML
        3. What the pros do
      6. Validating Your Documents
      7. Character Encoding
        1. Unicode
        2. Specifying the character encoding
      8. Putting It All Together
        1. HTML 4.01 strict
        2. XHTML 1.0 strict
      9. Test Yourself
  8. PART III CSS FOR PRESENTATION
    1. CHAPTER 11 CASCADING STYLE SHEETS ORIENTATION
      1. The Benefits of CSS
        1. The power of CSS
      2. How Style Sheets Work
        1. 1. Marking up the document
        2. 2. Writing the rules
          1. Selectors
          2. Declarations
        3. 3. Attaching the styles to the document
      3. The Big Concepts
        1. Inheritance
          1. Document structure
          2. Parents and children
          3. Pass it on
        2. Conflicting styles: the cascade
          1. Specificity
          2. Rule order
        3. The box model
        4. Grouped Selectors
      4. Moving Forward with CSS
        1. Books
        2. Online Resources
          1. Inspirational CSS showcase sites
          2. Informative personal sites
      5. Test Yourself
    2. CHAPTER 12 FORMATTING TEXT
      1. The Font Properties
        1. Specifying the font name
          1. Font limitations
          2. Generic font families
          3. Font specifying strategies
        2. Specifying font size
          1. Working with keywords
          2. Working with percentages and ems
        3. Font weight (boldness)
        4. Font style (italics)
        5. Font Variant (Small Caps)
        6. The shortcut font property
      2. Changing Text Color
      3. A Few More Selector Types
        1. Descendant selectors
        2. ID selectors
        3. Class selectors
        4. Specificity 101
      4. Text Line Adjustments
        1. Line height
        2. Indents
        3. Horizontal Alignment
      5. Underlines and Other “Decorations”
      6. Changing Capitalization
      7. Spaced Out
      8. Test Yourself
      9. CSS Review: Font and Text Properties
    3. CHAPTER 13 COLORS AND BACKGROUNDS
      1. Specifying Color Values
        1. Color names
        2. RGB color values
          1. A word about RGB color
          2. Picking a color
          3. Writing RGB values in style sheets
          4. About hexadecimal values
        3. Summing up color values
      2. Foreground Color
      3. Background Color
      4. Introducing.... Pseudoclass Selectors
        1. Anchor pseudoclasses
        2. Love, HA!
      5. Pseudoelement Selectors
        1. First letter and line
      6. Background Images
        1. Adding a background image
        2. Background Tiling
        3. Background Position
        4. Background attachment
      7. The Shorthand background Property
      8. Finally, External Style Sheets
        1. Using the link Element
        2. Importing with @import
        3. Modular Style Sheets
      9. Style Sheets for Print (and Other Media)
      10. Test Yourself
      11. Review: Color and Background Properties
    4. CHAPTER 14 THINKING INSIDE THE BOX (Padding, Borders, and Margins)
      1. The Element Box
      2. Setting the Content Dimensions
        1. Specifying height
        2. Handling overflow
      3. Padding
        1. The shorthand padding property
      4. Borders
        1. Border style
        2. Border width (thickness)
        3. Border color
        4. Combining style, width, and color
      5. Margins
        1. Margin behavior
          1. Collapsing margins
          2. Margins on inline elements
          3. Negative margins
      6. Assigning Display Roles
      7. The Box Model in Review
      8. Test Yourself
      9. Review: Basic Box Properties
    5. CHAPTER 15 FLOATING AND POSITIONING
      1. Normal Flow
      2. Floating
        1. More floating examples
          1. Floating an inline text element
          2. Floating block elements
          3. Floating multiple elements
        2. Clearing floated elements
      3. Positioning Basics
        1. Types of positioning
        2. Specifying position
      4. Relative Positioning
      5. Absolute Positioning
        1. Containing blocks
        2. Specifying Position
          1. Pixel measurements
          2. Percentage values
        3. Stacking order
      6. Fixed Positioning
      7. Test Yourself
      8. Review: Basic Layout Properties
    6. CHAPTER 16 PAGE LAYOUT WITH CSS
      1. Page Layout Strategies
        1. Liquid page design
          1. How to create liquid layouts
          2. Dealing with line lengths
        2. Fixed Layouts
          1. How to create fixed-width layouts
        3. Elastic Layouts
          1. How to create elastic layouts
        4. Which one should I use?
      2. Page Layout Templates
        1. Using the templates
        2. Multicolumn Layouts Using Floats
          1. Two-column with footer Method: FLOAT Layout: LIQUID
            1. The Markup
            2. Markup Notes:
            3. The Style Sheet
            4. Style Sheet Notes:
          2. Three-column with footer Method: FLOAT Layout: FIXED
            1. The Markup
            2. Markup Notes
            3. The Style Sheet
            4. Style Sheet Notes
        3. Layouts Using Absolute Positioning
          1. Two-column with narrow footer Method: POSITIONED Layout: LIQUID
          2. The Markup
          3. Markup Notes
          4. The Style Sheet
          5. Style Sheet Notes
          6. Three-column (narrow footer) Method: POSITIONED Layout: LIQUID
          7. The Markup
          8. Markup Notes
          9. The Style Sheet
          10. Style Sheet Notes
          11. Three-column with rules and padding between columns Method: POSITIONED Layout: FIXED
          12. The Markup
          13. Markup Notes
          14. The Style Sheet
          15. Style Sheet Notes
      3. Centering a Fixed-Width Page
      4. CSS Layouts in Review
      5. Test Yourself
    7. CHAPTER 17 CSS TECHNIQUES
      1. Style Properties for Tables
        1. Separated and collapsed borders
          1. Separated border model
          2. Collapsed border model
        2. Empty cells
      2. Changing List Bullets and Numbers
        1. Choosing a Marker
        2. Marker position
        3. Make your own bullets
        4. The list-style shorthand property
      3. Using Lists for Navigation
        1. Inline list items
        2. Floated list items
        3. More list and tabbed navigation tutorials
      4. Image Replacement Techniques
      5. CSS Rollovers
        1. Swapping background images
        2. Shifting the background image
      6. Wrapping Up Style Sheets
      7. Test Yourself
      8. Review: Table and List Properties
  9. PART IV CREATING WEB GRAPHICS
    1. CHAPTER 18 WEB GRAPHICS BASICS
      1. Image Sources
        1. Creating your own images
        2. Stock photography and illustrations
        3. Clip art
        4. Hire a designer
      2. Meet the Formats
        1. The ubiquitous GIF
          1. 8-bit, indexed color
          2. GIF compression
          3. Transparency
          4. Interlacing
          5. Animation
        2. The photogenic JPEG
          1. 24-bit Truecolor images
          2. Lossy compression
          3. Progressive JPEGs
          4. Decompression
        3. The amazing PNG
          1. Multiple image formats
          2. Transparency
          3. Progressive display (interlacing)
          4. Gamma correction
          5. Embedded text
          6. When to use PNGs
        4. Choosing the best format
        5. Saving an image in your chosen format
      3. Image Size and Resolution
        1. Goodbye inches, hello pixels!
        2. Resizing images
      4. Working with Transparency
        1. How binary transparency works
        2. How alpha transparency works
        3. Making transparent GIFs and PNGs
          1. Avoiding “halos”
          2. Adding transparency to flattened images
      5. Web Graphics 101 Summary
      6. Test Yourself
    2. CHAPTER 19 LEAN AND MEAN WEB GRAPHICS
      1. Why Optimize?
      2. General Optimization Strategies
      3. Optimizing GIFs
        1. Reducing the number of colors
        2. Reducing dithering
        3. Using the lossy filter
        4. Designing for GIF compression
          1. Keep it flat
          2. Horizontal stripes
        5. Summing up GIF optimization
      4. Optimizing JPEGs
        1. Getting to know JPEG compression
          1. Avoid detail
          2. Avoid flat colors
        2. Be aggressive with compression
        3. Weighted optimization (selective JPEGs)
          1. Using weighted optimization (Photoshop)
          2. Using selective quality (Fireworks)
        4. Choose optimized JPEGs
        5. Blurring or smoothing the image
        6. Summing up JPEG optimization
      5. Optimizing PNGs
        1. PNG-24
        2. PNG-8
      6. Optimize to File Size
      7. Optimization in Review
      8. Test Yourself
  10. PART V From Start to Finish
    1. CHAPTER 20 THE SITE DEVELOPMENT PROCESS
      1. 1. Conceptualize and Research
      2. 2. Create and Organize Content
        1. Content creation
        2. Information design
      3. 3. Develop the “Look and Feel”
        1. Sketch it
        2. The art direction process
      4. 4. Produce a Working Prototype
      5. 5. Test It
        1. Basic quality check
        2. Browsing environment testing
        3. User testing
      6. 6. Launch the Site
      7. 7. Maintain the Site
      8. The Development Process in Review
      9. Test Yourself
    2. CHAPTER 21 GETTING YOUR PAGES ON THE WEB
      1. www.“YOU”.com!
        1. What’s in a name?
        2. Registering a domain
        3. Is it available?
      2. Finding Server Space
        1. In your own backyard
        2. Professional hosting services
        3. Free hosting options
      3. The Publishing Process
      4. Transferring Files with FTP
        1. FTP software
        2. Using FTP, step by step
      5. Test Yourself
  11. Appendix A Answers
    1. Chapter 1: Where Do I Start?
    2. Chapter 2: How the Web Works
    3. Chapter 3: The Nature of Web Design
    4. Chapter 4: Creating a Simple Page (HTML Overview)
      1. Exercises 4-1 through 4-5
    5. Chapter 5: Marking Up Text
      1. Exercise 5-1
      2. Exercise 5-2
      3. Exercise 5-3
    6. Chapter 6: Adding Links
      1. Exercise 6-1
      2. Exercise 6-2
      3. Exercise 6-3
      4. Exercise 6-4
      5. Exercise 6-5
      6. Exercise 6-6
      7. Exercise 6-7
    7. Chapter 7: Adding Images
      1. Exercise 7-1
    8. Chapter 8: Basic Table Markup
      1. Exercise 8-1
      2. Exercise 8-2
      3. Exercise 8-3
      4. Exercise 8-4
    9. Chapter 9: Forms
      1. Exercises 9-1 through 9-3: Final source document
    10. Chapter 10: Understanding the Standards
      1. Exercise 10-1
    11. Chapter 11: CSS Orientation
    12. Chapter 12: Formatting Text
      1. Exercises 12-1 through 12-3:
    13. Chapter 13: Colors and Backgrounds
      1. Exercise 13-1
      2. Exercise 13-2, page 247
        1. Extra credit:
      3. Exercise 13-2, continued on page 248
        1. Step 2:
        2. Step 3 (vertical repeat):
        3. Step 3 (no repeat):
      4. Exercise 13-2, continued on page 251
        1. Step 1:
        2. Step 2:
        3. Step 3:
        4. Step 4:
      5. Exercise 13-2 (pages 253 and 254)
      6. Exercise 13-3
    14. Chapter 14: Thinking Inside the Box
      1. Exercise 14-3
    15. Chapter 15: Floating and Positioning
    16. Chapter 16: Page Layout with CSS
    17. Chapter 17: CSS Techniques
      1. Exercise 17-1, Design A
      2. Exercise 17-1, Design B
      3. Exercise 17-2, Design A
      4. Exercise 17-2, Design B
    18. Chapter 18: Web Graphics Basics
    19. Chapter 19: Lean and Mean Web Graphics
    20. Chapter 20: The Web Development Process
    21. Chapter 21: Getting Your Pages on the Web
  12. Appendix B CSS 2.1 Selectors
  13. INDEX
  14. About the Author
  15. Colophon
  16. Footnotes
    1. Chapter 3
    2. Chapter 4
    3. Chapter 15

Product information

  • Title: Learning Web Design, 3rd Edition
  • Author(s): Jennifer Niederst Robbins
  • Release date: June 2007
  • Publisher(s): O'Reilly Media, Inc.
  • ISBN: 9780596527525