You are previewing Web Design Garage.
O'Reilly logo
Web Design Garage

Book Description

Tinker with the tools of Web design—in the Garage!

Learn how to construct cool and interactive Web sites with this hands-on guide to the world of Web design and usability. In this title from Prentice Hall PTR’s Garage Series, author Marc Campbell shows you the “ins and outs” of designing sites with HTML, JavaScript, and CSS as core technologies. Using layout diagrams and graphics to illustrate your journey, Campbell takes you through every step of designing Web sites, from basic layout and usability to uploading your site onto the Web. Want to learn more on a specific topic? Flip to one of the book’s “links” that help you delve deeper into certain areas, allowing you to browse the text quickly and easily!

Specific topics covered include

  • Managing pop-up windows

  • Working with scripts and style sheets

  • Controlling design space with HTML and CSS

  • Making rollover graphics

  • Using text elements properly

  • Creating e-mail links and hyperlinks

  • Embedding media in Web pages

  • Choosing a Web host

  • Testing and uploading Web sites

  • Whether you’re new to Web design or you “speak” HTML as a second language, Web Design Garage will help you discover the solutions you need to create fun and effective Web sites.

    Table of Contents

    1. Copyright
    2. The Garage Series
    3. Preface
    4. Design and Usability Topics
      1. Designing to Aid Navigation
      2. Grouping Similar Functions
      3. Designing Graphics for Clicks
      4. Achieving Balance
      5. Choosing Colors
        1. Choosing Text and Background Colors
        2. Choosing Link Colors
        3. Choosing Interface Colors
      6. Designing for Accessibility
        1. Making Images Accessible
        2. Making Multimedia Accessible
        3. Managing Your Use of Color
      7. Leaving Breadcrumb Trails
      8. Using Jump Menus
      9. Managing Popup Windows
        1. Making Popups
      10. Creating Popup Menus
        1. Understanding Layers
        2. Laying Out Popup Menus
      11. Providing a Way Back
      12. Working with Scripts and Style Sheets
        1. Embedding Scripts
        2. Embedding Style Sheets
        3. Attaching Scripts
        4. Attaching Style Sheets
      13. BLOG: Embedding or Attaching?
      14. Launching Scripts with Links
      15. BLOG: JavaScript Links or onClick Links?
    5. Layout Topics
      1. Creating Fixed-Width Layouts with Tables
      2. BLOG: HTML or CSS for Layout?
      3. Creating Fixed-Width Layouts with CSS
      4. Centering Fixed-Width CSS Layouts
      5. Creating Liquid Layouts with Tables
      6. Creating Liquid Layouts with CSS
      7. Slicing Images for Layout Tables
      8. Creating Multicolumn Layouts with Tables
      9. Creating Multicolumn Layouts with CSS
      10. Preventing a Nav Bar from Breaking
      11. Coloring Table Cells
      12. Coloring and Formatting CSS Divs
      13. Controlling Design Space with HTML
      14. Controlling Design Space with CSS
    6. Image Topics
      1. Choosing the Right Image File Type
      2. Optimizing Web Images
        1. Optimizing Resolution
        2. Optimizing Image Size
        3. Optimizing the Palette in GIFs and PNGs
        4. Optimizing the Compression in JPEGs
      3. Transforming Images with HTML Attributes
      4. Positioning Inline Images with HTML
      5. Floating Inline Images with CSS
      6. Designing Button States
      7. Making Rollover Graphics
      8. Making Images More Accessible
      9. Creating Image Maps
      10. Making Image Maps More Accessible
      11. Using Background Images in Table Cells
      12. Using Background Images in CSS Divs
      13. Using Background Images on Web Pages
    7. Text Topics
      1. Using Text Elements Properly
        1. Working with Header Tags
        2. Marking up Paragraphs
        3. Using Quote Elements
        4. Displaying Addresses
      2. Using Phrase Elements Properly
      3. Adding Cascading Style Sheets
        1. Writing CSS
      4. Replacing Formatting Tags with CSS
      5. Creating Custom Formatting Styles
      6. Changing the Look of a Text Element
        1. Defining Contextual Selectors
        2. Defining Child Selectors
        3. Defining Sibling Selectors
        4. Mixing It Up
      7. Defining Class Styles
        1. Forming an Exclusive Club
      8. Controlling the Typeface
        1. Troubleshooting Fonts
        2. Choosing the Best Typeface
      9. Controlling Type Size
        1. Using the Font Tag
        2. Using the Font-Size Attribute
      10. BLOG: Sizing up Type Sizing
      11. Controlling Spacing
        1. Controlling Space around Elements
        2. Controlling Space inside Elements
        3. Controlling Space between Lines of Type
        4. Controlling Space between Words
        5. Controlling Space between Letters
      12. Controlling Justified and Ragged Type
      13. Controlling Indents
      14. Building Lists
        1. Nesting Lists in HTML
        2. Adjusting List Properties with CSS
      15. Highlighting Text with Color
      16. Rehabilitating Horizontal Rules
        1. Creating End Signs
      17. Adding a Dateline and Timestamp
      18. Designing Data Tables
        1. Making the Most of the Grouping Tags
        2. Working with Colspans and Rowspans
        3. Adjusting Cellpadding and Cellspacing
        4. Changing the Border
        5. Improving Accessibility
      19. Using Pseudo-Elements
      20. Defining ID Styles
    8. Link Topics
      1. Applying Styles to Hyperlinks
      2. BLOG: In Defense of the Hyperlink Underline
      3. Making Rollover Hyperlinks
      4. Choosing the Right Path
        1. Using Absolute Paths
        2. Using Document-Relative Paths
        3. Using Root-Relative Paths
      5. Changing the Color of a Single Hyperlink
        1. Changing the Default Color for All Link States
        2. Changing the Default Color for Individual Link States
      6. Choosing the Right Text for a Hyperlink
      7. Creating ScreenTips for Hyperlinks
      8. Opening a New Browser Window
      9. Using Named Anchors
        1. Setting Named Anchors
        2. Linking to Named Anchors
      10. Creating Email Links
    9. Form Topics
      1. Working with Form Widgets
        1. Working with Generic Buttons
        2. Working with Checkboxes
        3. Working with File Fields
        4. Working with Hidden Fields
        5. Working with Image Fields
        6. Working with Lists
        7. Working with Menus
        8. Working with Password Fields
        9. Working with Radio Buttons
        10. Working with Reset Buttons
        11. Working with Submit Buttons
        12. Working with Text Areas
        13. Working with Text Fields
      2. Applying Styles to Text Widgets
        1. Changing the Text Style
        2. Changing the Colors and the Border
      3. Validating Form Input
      4. Setting the Tab Order
      5. Working with Fieldsets
      6. Working with Labels
    10. Tricks Topics
      1. Embedding Media
      2. Automatically Refreshing the Page
      3. Automatically Redirecting the Browser
      4. Displaying Random Content
      5. Displaying a Browser Alert
      6. Displaying a “You Are Now Leaving” Popup
    11. Basic Training Topics
      1. Creating HTML Documents
        1. Organizing Your Web Site
      2. Adding Keywords and Page Descriptions
      3. Blocking Parts of Your Site from Search Engines
      4. Testing Your Site
      5. Choosing a Web Host
        1. Finding a Web Host
        2. Considering Features
      6. Uploading Your Site
      7. Validating Your Source Code
    12. Glossary
    13. Index