Web Design All-in-One for Dummies®

Web Design All-in-One for Dummies®

by Sue Jenkins
Released May 2009
Publisher(s): For Dummies
ISBN: 9780470417966

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.

Start your free trial

Book description

Web designers must wear many hats. Among books on Web design, Web Design All-in-One For Dummies is the one that helps you successfully wear all those hats without losing your head.

Full-color illustrations and five self-contained minibooks show you how to be a graphic designer, creative organizer, visual communicator, markup language technologist, and cutting-edge trendsetter, all in one. This book helps you lay the groundwork, follow design rules, test your site, register a domain name, and much more.

  • Getting Started covers planning, defining your target audience, choosing the right software, and more

  • Designing For the Web acquaints you with HTML, CSS, and JavaScript, plus how to choose a layout and optimize graphics

  • Building Web Sites gets down to nuts and bolts: putting text, images, hyperlinks, and multimedia files together, organizing content, and building navigation systems

  • Web Standards & Testing teaches you how to test and validate so everyone can enjoy your site

  • Publishing & Site Maintenance helps you get your site online and keep it current

    • Web Design All-in-One For Dummies also helps you learn how to choose a Web editor and graphics program, how to make your site accessible to the widest possible audience, and when it’s time to call in a pro like author Sue Jenkins. It’s just what you need to start and manage a great site.

    Table of contents

    1. Copyright
    2. About the Author
    3. Author's Acknowledgments
    4. Publisher's Acknowledgments
    5. Introduction
      1. 0.1. About This Book
      2. 0.2. Foolish Assumptions
      3. 0.3. Conventions Used in This Book
      4. 0.4. How This Book Is Organized
        1. 0.4.1. Book I: Getting Started
        2. 0.4.2. Book II: Designing for the Web
        3. 0.4.3. Book III: Building Web Sites
        4. 0.4.4. Book IV: Web Standards and Testing
        5. 0.4.5. Book V: Publishing and Site Maintenance
      5. 0.5. Icons Used in This Book
      6. 0.6. Where to Go from Here
    6. I. Getting Started
      1. 1. Starting with a Plan
        1. 1.1. Understanding the Different Phases of a Web Project
        2. 1.2. Determining the Site's Purpose
          1. 1.2.1. Checking out the competition
          2. 1.2.2. Gathering information
          3. 1.2.3. Developing a statement of purpose
        3. 1.3. Building a Site Image
        4. 1.4. Determining Site Content
          1. 1.4.1. Minimum requirements
            1. 1.4.1.1. Home page information
            2. 1.4.1.2. Contact information
            3. 1.4.1.3. Privacy policy
            4. 1.4.1.4. Site map
            5. 1.4.1.5. Footer
          2. 1.4.2. Marketing and sales content
            1. 1.4.2.1. Company information
            2. 1.4.2.2. Biography
            3. 1.4.2.3. Product/service information
            4. 1.4.2.4. News and press information
            5. 1.4.2.5. Video and podcasts
            6. 1.4.2.6. Portfolio
            7. 1.4.2.7. Frequently Asked Questions (FAQs)
            8. 1.4.2.8. Site search
            9. 1.4.2.9. Terms of service
            10. 1.4.2.10. Shopping cart
            11. 1.4.2.11. Customer service (Help)
            12. 1.4.2.12. Site credits
            13. 1.4.2.13. XHTML, HTML, CSS, and 508 compliance information
            14. 1.4.2.14. RSS feeds
        5. 1.5. Diagnosing the Site's Dynamic Requirements
        6. 1.6. Defining Ways to Attract Visitors
          1. 1.6.1. E-newsletters
          2. 1.6.2. Free tips and articles
          3. 1.6.3. Blogs
            1. 1.6.3.1. Understanding what a blog is
            2. 1.6.3.2. Using a blog on your site
            3. 1.6.3.3. Choosing a blogging tool
            4. 1.6.3.4. Adding a profile
            5. 1.6.3.5. Examining the pros and cons
          4. 1.6.4. Polls and calculators
          5. 1.6.5. Contests and sweepstakes
      2. 2. Defining the Audience
        1. 2.1. Defining the Target Audience
          1. 2.1.1. Doing informal market research
          2. 2.1.2. Gathering Internet usage statistics
            1. 2.1.2.1. Finding statistics online
            2. 2.1.2.2. Interpreting statistics
          3. 2.1.3. Sizing up the competition
            1. 2.1.3.1. Performing keyword searches for similar companies
            2. 2.1.3.2. Evaluating competitors' sites
            3. 2.1.3.3. Summarizing your results
        2. 2.2. Defining the Ideal Site Visitor
        3. 2.3. Determining Benefits to Site Visitors
          1. 2.3.1. Defining the true benefits
          2. 2.3.2. Taking the visitor's perspective
      3. 3. Gathering Content
        1. 3.1. Defining Site Content Requirements
          1. 3.1.1. Gathering content
          2. 3.1.2. Crafting the vision of the site
            1. 3.1.2.1. In addition to a home page, what other main pages do you want on the site?
            2. 3.1.2.2. Do you want an About page or section to provide company information?
            3. 3.1.2.3. What do you want to include on the Contact page?
            4. 3.1.2.4. Do you want to have a Clients page that lists past and current clients?
            5. 3.1.2.5. If you're selling products, do you want to have a Products page?
            6. 3.1.2.6. Will you have an e-commerce component on the site and, if so, what kind of shopping cart will be used?
            7. 3.1.2.7. Do you need a Services page to list all the services your company provides?
            8. 3.1.2.8. Do you want a page that describes what the company produces?
            9. 3.1.2.9. How about a page for news or press releases?
            10. 3.1.2.10. What about an Events page?
            11. 3.1.2.11. What about other industry-specific pages?
            12. 3.1.2.12. What about including an RSS feed?
            13. 3.1.2.13. Will the site need any other pages?
            14. 3.1.2.14. Does the text on the site need to appear in multiple languages?
            15. 3.1.2.15. What elements — text and graphical — should appear on every page?
            16. 3.1.2.16. Who will provide all the graphics, photos, and illustrations for the site as well as branding information?
            17. 3.1.2.17. Does anything else need to go on the site?
        2. 3.2. Building Wireframes
        3. 3.3. Gathering Text and Graphics
          1. 3.3.1. Hiring a copywriter
          2. 3.3.2. Hiring freelance artists
          3. 3.3.3. Licensing stock images
          4. 3.3.4. Choosing page titles and meta-tag data
            1. 3.3.4.1. Page titles
            2. 3.3.4.2. Meta tags
        4. 3.4. Organizing Site Content
        5. 3.5. Building a Site Map
      4. 4. Choosing the Right Tools
        1. 4.1. Working with Web Editors
          1. 4.1.1. Selecting a Web editor
          2. 4.1.2. Understanding HTML and CSS structure
          3. 4.1.3. Looking at Web page structure
          4. 4.1.4. Building a Web page
          5. 4.1.5. Saving Web files
        2. 4.2. Choosing the Right Graphics Software
          1. 4.2.1. Graphics programs
          2. 4.2.2. Web graphic optimization programs
        3. 4.3. Working with Color
          1. 4.3.1. Using Web-safe colors
          2. 4.3.2. Using hexadecimal colors
        4. 4.4. Choosing a Shopping Cart
          1. 4.4.1. Using PayPal shopping carts
          2. 4.4.2. Checking out Google Checkout
          3. 4.4.3. Looking into third-party and Web-hosted shopping carts
          4. 4.4.4. Building custom shopping carts
          5. 4.4.5. Planning for secure transactions
        5. 4.5. Knowing When to Hire a Programmer
          1. 4.5.1. Taking a look at your dynamic content needs
          2. 4.5.2. Finding a good programmer
    7. II. Designing for the Web
      1. 5. Defining the Look and Feel
        1. 5.1. Working with the Client to Make Design Choices
        2. 5.2. Defining a Site Theme Using Target Data
        3. 5.3. Making Basic Layout and Design Decisions
          1. 5.3.1. Choosing a size for your site
          2. 5.3.2. Selecting a fixed-width or flexible layout
          3. 5.3.3. Choosing a method for printing the layout
          4. 5.3.4. Picking a color palette
          5. 5.3.5. Choosing the right fonts
        4. 5.4. Selecting a Navigation System
          1. 5.4.1. Choosing a location and style
          2. 5.4.2. Determining how to handle submenus
        5. 5.5. Organizing the Site's Look and Feel
          1. 5.5.1. Positioning the brand
          2. 5.5.2. Designing layouts on the grid
          3. 5.5.3. Making a layout checklist
      2. 6. Mocking Up the Design
        1. 6.1. Understanding the Value of a Mock-up
        2. 6.2. Working from a Site Map
        3. 6.3. Creating the Mock-up
          1. 6.3.1. Blocking out the parts of the page
          2. 6.3.2. Designing "above the fold"
          3. 6.3.3. Unifying the layout with design elements
        4. 6.4. Finalizing the Mock-up
          1. 6.4.1. Showing the subnavigation
          2. 6.4.2. Presenting the mock-up to the client
        5. 6.5. Creating Additional Web Graphics
          1. 6.5.1. Header graphics
          2. 6.5.2. Rollover graphics
          3. 6.5.3. Background images
          4. 6.5.4. Other graphics
      3. 7. Slicing and Optimizing Web Graphics
        1. 7.1. Web Graphics 101
          1. 7.1.1. Color mode
          2. 7.1.2. Color gamut warnings
          3. 7.1.3. Resolution
          4. 7.1.4. Unit of measure
          5. 7.1.5. File and page size
        2. 7.2. Optimizing and Slicing Graphics
          1. 7.2.1. Understanding optimization
          2. 7.2.2. Choosing an optimization program
          3. 7.2.3. Optimizing using Save for Web & Devices
          4. 7.2.4. Slicing up graphics
        3. 7.3. Selecting the Right Web Format
        4. 7.4. Choosing Web Optimization Settings
          1. 7.4.1. GIF and PNG-8 optimization
          2. 7.4.2. PNG-24 optimization
          3. 7.4.3. JPG optimization
        5. 7.5. Optimization Output Options
    8. III. Building Web Sites
      1. 8. Adding Text, Images, and Links
        1. 8.1. Setting Up Basic HTML
          1. 8.1.1. Adding the title, DOCTYPE, and metadata
          2. 8.1.2. Adding a page title
          3. 8.1.3. Adding a DOCTYPE
          4. 8.1.4. Adding metadata
          5. 8.1.5. Coding pages by hand
        2. 8.2. Coding Your Pages
        3. 8.3. Adding Page Content
          1. 8.3.1. Inserting text
            1. 8.3.1.1. Headings
            2. 8.3.1.2. Bold and italic emphasis
            3. 8.3.1.3. Text alignment
          2. 8.3.2. Adding graphics
            1. 8.3.2.1. Alternate text
            2. 8.3.2.2. Size
            3. 8.3.2.3. Border
            4. 8.3.2.4. Image padding
            5. 8.3.2.5. Alignment
        4. 8.4. Creating Hyperlinks
          1. 8.4.1. Understanding local and global links
          2. 8.4.2. Linking targets
          3. 8.4.3. Linking graphics
          4. 8.4.4. Creating other link types
            1. 8.4.4.1. E-mail links
            2. 8.4.4.2. Image map links
            3. 8.4.4.3. Named anchor links
        5. 8.5. Labeling Content for CSS Markup
        6. 8.6. Making Content Accessible
      2. 9. Organizing Content with Tables and Lists
        1. 9.1. Inserting Tables on a Page
          1. 9.1.1. Discovering what you can do with tables
          2. 9.1.2. Understanding the structure of a table
          3. 9.1.3. Adding content to table cells
        2. 9.2. Formatting Tables
          1. 9.2.1. The id attribute
          2. 9.2.2. Table widths and heights
          3. 9.2.3. Table and cell alignment
          4. 9.2.4. Table borders
          5. 9.2.5. Cellpadding and cellspacing attributes
          6. 9.2.6. Table headers
          7. 9.2.7. The nowrap attribute
          8. 9.2.8. Splitting and merging table cells
          9. 9.2.9. Background and border colors
          10. 9.2.10. Tiling background images
          11. 9.2.11. Nesting tables
        3. 9.3. Inserting Lists on a Page
          1. 9.3.1. Examining the two list types
          2. 9.3.2. Nesting lists
          3. 9.3.3. Adding content and formatting a list
      3. 10. Styling with Cascading Style Sheets
        1. 10.1. Understanding CSS Basics
          1. 10.1.1. Using CSS as a Web standard
          2. 10.1.2. Taking a look at the anatomy of a style
          3. 10.1.3. Exploring inline, internal, and external CSS
            1. 10.1.3.1. Inline CSS
            2. 10.1.3.2. Internal CSS
            3. 10.1.3.3. External CSS
            4. 10.1.3.4. Combining different types of CSS on your site
          4. 10.1.4. Linking external CSS to a page
          5. 10.1.5. Setting CSS media types
            1. 10.1.5.1. Exploring different media types
            2. 10.1.5.2. Creating separate CSS files for different media types
            3. 10.1.5.3. Adding media-dependent style sheets to your HTML files
          6. 10.1.6. Linking CSS with Dreamweaver
        2. 10.2. Working with CSS Style Selectors
          1. 10.2.1. Applying custom class styles
          2. 10.2.2. Making CSS tag redefine styles
          3. 10.2.3. Creating ID styles
          4. 10.2.4. Building compound styles
          5. 10.2.5. Creating a master CSS file
      4. 11. Understanding CSS Style Properties
        1. 11.1. Working with the CSS Box Model
        2. 11.2. Exploring the Eight Style Property Categories
          1. 11.2.1. The type properties
          2. 11.2.2. The background properties
          3. 11.2.3. The block properties
          4. 11.2.4. The box properties
          5. 11.2.5. The border properties
          6. 11.2.6. The list properties
          7. 11.2.7. The positioning properties
          8. 11.2.8. The extension properties
        3. 11.3. Styling the Content on Your Pages
          1. 11.3.1. Styling paragraphs, headers, and footers
          2. 11.3.2. Styling lists and tables
            1. 11.3.2.1. Lists
            2. 11.3.2.2. Tables
          3. 11.3.3. Styling images and AP elements (layers)
        4. 11.4. Finding CSS Resources Online
      5. 12. Creating Web Layouts
        1. 12.1. Creating Standards-Compliant, Accessible Layouts
        2. 12.2. Working with Layers
          1. 12.2.1. Discovering the benefits of layers-based layouts
          2. 12.2.2. Understanding what layers are
        3. 12.3. Creating a Layers-Only Layout
          1. 12.3.1. Adding a layer to a page
          2. 12.3.2. Building a CSS layers-based layout
          3. 12.3.3. Styling a CSS layers-based layout
        4. 12.4. Building an Old-School HTML Tables-Based Layout for HTML E-Mail and Newsletters
          1. 12.4.1. Understanding the benefits of tables-based layouts
          2. 12.4.2. Building an HTML e-mail or newsletter
        5. 12.5. Finding Online Resources for Layers-Based Layouts
      6. 13. Constructing Navigation Systems
        1. 13.1. Assessing the Navigational Needs of Your Site
        2. 13.2. Discovering the Basic Principles of Navigation Systems
          1. 13.2.1. Wide versus deep menus
          2. 13.2.2. Single-tier menus
          3. 13.2.3. Multitier menus
        3. 13.3. Choosing the Right Menu for Your Site
        4. 13.4. Creating Text Navigation Menus
          1. 13.4.1. Exploring your layout options
          2. 13.4.2. Creating a rollover text-based navigation bar
        5. 13.5. Creating Rollover Button Graphic Navigation Menus
          1. 13.5.1. Understanding how to build rollovers
          2. 13.5.2. Outputting rollovers in Fireworks
          3. 13.5.3. Creating rollovers in Dreamweaver
        6. 13.6. Creating Multitier Spry Menus in Dreamweaver
        7. 13.7. Creating CSS List Navigation Menus
      7. 14. Designing Web Forms
        1. 14.1. Deciding What Visitor Information to Collect
        2. 14.2. Encrypting and Processing Collected Form Data
          1. 14.2.1. Deciding whether to purchase an SSL digital security certificate
          2. 14.2.2. Understanding how data encryption works
        3. 14.3. Understanding the Structure of Web Forms
        4. 14.4. Creating a Web Form
          1. 14.4.1. Creating the structure of the form
          2. 14.4.2. Adding individual form fields
        5. 14.5. Validating Web Forms
          1. 14.5.1. Understanding what a validating form is
          2. 14.5.2. Adding a Validate Form behavior to a form
        6. 14.6. Building Spry Web Forms in Dreamweaver
          1. 14.6.1. Taking a look at the Spry validation widgets
          2. 14.6.2. Adding Spry validation fields to a form
        7. 14.7. Testing Validated Web Forms
      8. 15. Making Your Pages Interactive
        1. 15.1. Getting to Know JavaScript
        2. 15.2. Creating Multipart Rollover Effects
        3. 15.3. Launching a New Browser Window
          1. 15.3.1. Deciding when to launch a new browser window
          2. 15.3.2. Hand-coding the script to launch a pop-up window
          3. 15.3.3. Adding a pop-up window to your page with Dreamweaver
        4. 15.4. Building Image Maps
          1. 15.4.1. Adding an image map to a graphic
          2. 15.4.2. Building complex image maps
        5. 15.5. Adding Multimedia Files
          1. 15.5.1. Adding a multimedia file to your page
          2. 15.5.2. Creating slide shows
          3. 15.5.3. Adding sound with Dreamweaver
        6. 15.6. Providing Daily Interactive Content on Your Pages
          1. 15.6.1. Daily tip or news item
            1. 15.6.1.1. Adding a daily tip or news item to your page
          2. 15.6.2. Converting a daily tip JavaScript into an external .js file
            1. 15.6.2.1. Daily word game
          3. 15.6.3. Daily blog entries
      9. 16. Building Web Sites
        1. 16.1. Building the Master Page
        2. 16.2. Building Web Sites with Templates
          1. 16.2.1. Using Dreamweaver templates
          2. 16.2.2. Preparing a page to become a template
          3. 16.2.3. Creating a Dreamweaver template
          4. 16.2.4. Creating templates with editable regions
          5. 16.2.5. Creating and editing template-based files
        3. 16.3. Working with Server-Side Includes (SSIs)
          1. 16.3.1. Understanding what SSIs are
          2. 16.3.2. Including an SSI file inside a page
          3. 16.3.3. Editing an SSI file
          4. 16.3.4. Ensuring success with SSIs
        4. 16.4. Creating, Including, and Testing SSIs
        5. 16.5. Editing Paths to Work with SSIs
          1. 16.5.1. Understanding the different path types
            1. 16.5.1.1. Document relative paths
            2. 16.5.1.2. Site-root relative paths
          2. 16.5.2. Adjusting paths in an SSI file from document relative to site-root relative
        6. 16.6. Comparing Templates and SSIs
    9. IV. Book IV Web Standards and Testing
      1. 17. Following Web Standards
        1. 17.1. Working with Web Standards
          1. 17.1.1. Understanding the importance of writing standards-compliant code
          2. 17.1.2. Taking a look at W3C recommendations
          3. 17.1.3. Exploring the W3C Web site
        2. 17.2. Using DOCTYPEs (DTDs)
          1. 17.2.1. Selecting a DOCTYPE
            1. 17.2.1.1. HTML DOCTYPEs
            2. 17.2.1.2. XHTML DOCTYPEs
          2. 17.2.2. Adding a DOCTYPE in Dreamweaver
        3. 17.3. Writing Semantic HTML and XHTML Code
        4. 17.4. Formatting with CSS Instead of HTML
          1. 17.4.1. Comparing CSS and HTML formatting
          2. 17.4.2. Taking a look at the benefits of CSS
          3. 17.4.3. Exploring pages styled with CSS
        5. 17.5. Finding Out about Accessibility Standards
      2. 18. Testing, Accessibility, Compliance, and Validation
        1. 18.1. Understanding the Process of Validating Your Code
        2. 18.2. Performing Prelaunch Testing
          1. 18.2.1. Creating a Web-testing checklist
          2. 18.2.2. Testing on multiple platforms, browsers, and devices
            1. 18.2.2.1. Deciding which platforms and browsers to test
            2. 18.2.2.2. Testing a page
        3. 18.3. Cleaning Up Your Code
          1. 18.3.1. Finding and replacing errors
          2. 18.3.2. Checking spelling
          3. 18.3.3. Removing unwanted formatting
          4. 18.3.4. Applying consistent (X)HTML syntax
          5. 18.3.5. Applying source formatting
          6. 18.3.6. Converting syntax by DTD
        4. 18.4. Fixing Common Code Errors
          1. 18.4.1. Validating your markup
          2. 18.4.2. Checking browser compatibility
          3. 18.4.3. Verifying internal and external links
          4. 18.4.4. Generating site reports
        5. 18.5. Validating HTML and CSS Markup
          1. 18.5.1. Using free online validation tools
            1. 18.5.1.1. Discovering what these tools test
            2. 18.5.1.2. Using the W3C Markup validator
          2. 18.5.2. Fixing noncompliant code
          3. 18.5.3. Retesting and failing acceptably
          4. 18.5.4. Obtaining proof of validation
    10. V. Publishing and Site Maintenance
      1. 19. Domain Registration and Hosting
        1. 19.1. Understanding How to Get Your Site Online
        2. 19.2. Selecting a Domain Name
          1. 19.2.1. Understanding what a domain name is
          2. 19.2.2. Finding a domain name for your client
          3. 19.2.3. Using domain name generators
          4. 19.2.4. Checking domain name availability
        3. 19.3. Registering a Domain Name
          1. 19.3.1. Using a domain registrar
          2. 19.3.2. Using a host provider
          3. 19.3.3. Activating your domain
        4. 19.4. Finding the Best Hosting Plan
          1. 19.4.1. Researching host providers
          2. 19.4.2. Evaluating hosting plan packages
        5. 19.5. Creating a Custom Placeholder Page
          1. 19.5.1. Designing a placeholder page
            1. 19.5.1.1. Creating the page
            2. 19.5.1.2. Styling the page
          2. 19.5.2. Uploading a placeholder page
      2. 20. Publishing Your Site
        1. 20.1. Uploading Files with File Transfer Protocol
          1. 20.1.1. Choosing the right FTP program
          2. 20.1.2. Setting up a remote connection
        2. 20.2. Setting Up a Test Directory
        3. 20.3. Getting and Putting Files
          1. 20.3.1. Putting files on the remote server
          2. 20.3.2. Transferring files with Dreamweaver
        4. 20.4. Performing Final Site Testing
        5. 20.5. Creating Custom 401 and 404 Error Pages
          1. 20.5.1. Creating the error pages
          2. 20.5.2. Editing the .htaccess file
        6. 20.6. Publishing Your Site
      3. 21. Search Engine Optimization and Site Maintenance
        1. 21.1. Understanding Search Engine Optimization
        2. 21.2. Practicing Ethical SEO Techniques
        3. 21.3. Optimizing Your Site for Search Engines
          1. 21.3.1. Maximizing keywords
          2. 21.3.2. Including descriptive text and hyperlinks
          3. 21.3.3. Embedding object and image descriptions
          4. 21.3.4. Adding keyword and description meta tags
          5. 21.3.5. Updating bland page titles
        4. 21.4. Submitting a Site to Search Engines
          1. 21.4.1. Hand-submitting the URL
          2. 21.4.2. Waiting for the site to be listed
        5. 21.5. Giving Your Site an HTML Site Map
          1. 21.5.1. Deciding what to include on the HTML Site Map page
          2. 21.5.2. Creating a Site Map page
          3. 21.5.3. Making the site map accessible
        6. 21.6. Keeping the Site Relevant
          1. 21.6.1. Performing site maintenance
          2. 21.6.2. Scheduling site updates
          3. 21.6.3. Adding new content regularly
          4. 21.6.4. Moving on

    Product information

    • Title: Web Design All-in-One for Dummies®
    • Author(s): Sue Jenkins
    • Release date: May 2009
    • Publisher(s): For Dummies
    • ISBN: 9780470417966