Building Web Sites All-in-One Desk Reference For Dummies®

Table of contents

1. Copyright
2. About the Authors
3. Dedication
4. Authors' Acknowledgments
5. Introduction
   1. About This Book
   2. Foolish Assumptions
   3. Conventions Used in This Book
   4. What You Don't Have to Read
   5. How This Book Is Organized
      1. Book I: Preparations
      2. Book II: Site Design
      3. Book III: Site Construction
      4. Book IV: Web Graphics
      5. Book V: Multimedia
      6. Book VI: Audience Interaction
      7. Book VII: E‐Commerce
      8. Book VIII: Site Management
      9. Book IX: Case Studies
   6. Icons Used in This Book
   7. Where to Go from Here
6. I. Preparations
   1. In this part . . .
   2. 1. Planning a Web Project
      1. Defining the Audience
         1. Internal stakeholders
         2. External audience
      2. Setting Goals
      3. Creating a Scope Document
      4. Preparing to Get Started
         1. Defining why you're doing the project
         2. Brainstorming and evaluating your ideas
         3. Looking at budget and timelines
         4. Considering collaborations
      5. Selling the Idea
      6. Holding a Kick‐Off Meeting
      7. Revising Your Original Plans — Using Feedback to Improve
         1. Receiving feedback
         2. Giving feedback
      8. Preparing to Redesign an Existing Site
   3. 2. Build a Web Team or Go It Alone
      1. Flying Solo: Skills You Need to Go It Alone
         1. Managing the project
         2. Serving your customer
         3. Dealing with HTML, CSS, and other scripting
         4. Using Photoshop, Fireworks, and other graphics applications
         5. Developing content
         6. Considering basic computer and Internet skills
         7. Incorporating multimedia in your project
         8. Handling a solo project
      2. Hiring Members of the Team
         1. Project manager
         2. Web designer/new media designer
         3. Web developer/programmer
         4. Content developer/writer
         5. Webmaster/host
         6. Other professional help
         7. Managing the team
            1. Giving feedback that helps
            2. Keeping the team on track
      3. Handing Off a Project to a Client
   4. 3. Developing the Content
      1. Knowing What to Put on Your Site
         1. Finding out what your client's visitors need
         2. Finding out what your client needs from site visitors
         3. Reconciling the content with the goals
      2. Keeping It Fresh: An Ongoing Process
         1. Assigning content development tasks
         2. Keeping the graphics fresh
   5. 4. Creating Relevant Site Content
      1. Portraying Your Client's Company
         1. Defining your client's voice
         2. Developing your client's look
      2. Selling Goods or Services
         1. Emphasizing key points
         2. Highlighting the product
      3. Providing Information
         1. Handling large amounts of content
         2. Presenting information
         3. Including e‐learning materials
      4. Using Personas to Develop Content
         1. Defining your client's customers
         2. Delivering what they want
7. II. Site Design
   1. In this part . . .
   2. 1. Conceptualizing Your Site
      1. Deciding What Types of Pages You Need
         1. Considering static Web pages
         2. Freshening the content with dynamic Web pages
         3. Evaluating multimedia element choices
      2. Choosing the Right Delivery Method
         1. Knowing when static pages suit your purpose
         2. Using dynamic pages to manage complex information
         3. Considering multimedia
      3. Handling Printable Materials
   3. 2. Creating Effective Layouts
      1. Content Is Key: Making Sure It's All Included
      2. Creating Order from Chaos: Consistency Is Your Friend
      3. Including Things That Every Page Needs
         1. Banner
         2. Page headline
         3. Global navigation
         4. Page title
         5. Page description and keywords
         6. Page footer
      4. Planning How to Emphasize Important Information
      5. Understanding the Basics of Usable and Accessible Design
      6. Creating a Layout Wire Frame
   4. 3. Organizing Your Content
      1. Considering File Management
      2. Keeping It Tidy
      3. Implementing Information Architecture
         1. Developing section‐level information architecture
         2. Arranging page‐level information
      4. Avoiding Content Problems
   5. 4. Ensuring Visual Appeal
      1. Colors on the Web
         1. CMYK color
         2. RGB color
         3. Hexadecimal colors
         4. Making nice with established color schemes
         5. Web‐safe colors
      2. Getting Familiar with Graphics File Formats
      3. Using Fonts Effectively on Web Sites
      4. Implementing Stock Images and Other Elements
      5. Facelifting an Existing Site
         1. Choosing a new color scheme
         2. Figuring out which graphics to replace
         3. Creating a new prototype
         4. Applying the new colors to your CSS file
8. III. Site Construction
   1. In this part . . .
   2. 1. Pulling Together Tools and Materials
      1. Matching the Tools to Your Needs
      2. Hauling Out the Hardware
         1. A computer
         2. Computer monitor
         3. Backups and storage
         4. Printers and scanners
         5. Cameras and camcorders
            1. Digital still cameras
            2. Video cameras
            3. Accessories
         6. Graphics tablet
      3. Setting Up Your Web Design Studio
      4. Desperately Seeking Software
         1. Researching software before you buy
         2. Graphics software
            1. Adobe Photoshop
            2. Macromedia Fireworks
            3. Adobe Illustrator
            4. Macromedia FreeHand
         3. Multimedia software
            1. Macromedia Flash
            2. Toon Boom Studio and Toon Boom Studio Express
            3. Electric Rain Swift 3D
            4. Apple Final Cut Pro and Final Cut Express HD
            5. Adobe Premiere Pro
         4. Web design software
         5. Browser software
   3. 2. Making a Web Page with HTML
      1. Getting Acquainted with the Basic Parts of an HTML Document
      2. Starting Your HTML Document Right
         1. The document type definition
         2. The head tag and what goes in it
         3. Now for some body!
            1. Adding headings
            2. Coding paragraphs
         4. The anatomy of a whole page
            1. Using bulleted and numbered lists
            2. Building tables for your site
            3. Coding a whole Web page
         5. Controlling layouts with CSS
      3. Helpful Development Practices
   4. 3. Creating a Web Page Layout with HTML and CSS
      1. Introducing CSS
         1. Understanding why CSS can help your site — and you
         2. Checking the source
         3. Using CSS with other tools
      2. Ways of Working with CSS
         1. Inline styles
         2. Styles embedded in the head of the document
         3. External style sheets
         4. Commenting your code
      3. Creating a CSS Document
         1. Setting default selectors
         2. Setting class and ID selectors
            1. Class selectors
            2. ID selectors
      4. Special Effects with CSS
         1. Styling your links
         2. Cool headlines
         3. Custom padding and margins
         4. Custom borders
   5. 4. Introducing Web and Graphics Software
      1. Choosing Graphics Software
         1. Adobe Photoshop
         2. Adobe Illustrator
         3. Other professional‐grade graphics software
      2. Considering Web‐Design Software
      3. Deciding on Multimedia Software
      4. Touring Photoshop CS2
         1. The Welcome Screen
         2. The default workspace
         3. The work area
         4. Layers and the Layer palette
         5. Tools and the toolbox
            1. Selection tools: Marquee, Lasso, and Magic Wand
            2. The Move tool
            3. The Crop tool
            4. The Slice tools
            5. The Brush and Pencil tools
            6. The Eraser tool
            7. The Paint Bucket and Gradient tools
               1. Putting the Paint Bucket tool through its paces
               2. Experimenting with the Gradient tool
            8. The Text tool and palette
            9. Vector tools: Shape, Pen, and Path Selection tools
            10. The Magnify and Hand tools and Navigator palette
   6. 5. Getting Started With Dreamweaver
      1. Exploring the Dreamweaver Interface
         1. The Start Page
         2. The New Document dialog box
            1. Basic Page starter files
            2. Dynamic Page starter files
            3. CSS Style Sheets starter files
            4. Framesets starter files
            5. Page Designs
         3. The Files panel
            1. Expanded view
            2. Collapsed view
         4. The Document window
            1. Code view
            2. Design view
            3. Split view
            4. Document Title
            5. Check and validate code
            6. File Management: Put and Get
            7. Preview in Browser
            8. Refresh Design view
            9. View options
         5. The Preferences dialog box
         6. The Properties inspector (panel)
            1. Making links with the Properties inspector
            2. Setting page properties
         7. The CSS Styles panel
         8. The Insert bar
      2. Creating a Web Site with Dreamweaver
      3. Testing Your Pages and Validating the Code
      4. Publishing Your Web Site with Dreamweaver
   7. 6. Using Dreamweaver: Advanced Techniques
      1. Creating a Site with Prebuilt Page Designs
      2. Creating Templates to Ease Site Maintenance
         1. Making a template
         2. Including editable regions
         3. Creating a page using a template
         4. Updating a template
      3. Exploring the Assets Panel and Library Items
         1. Touring the Assets panel
         2. Discovering library items
            1. Creating a library item
            2. Using a library item
            3. Updating library items
            4. Detaching library items
      4. Adding Functionality with Dreamweaver Behaviors
         1. Including the Open Browser Window behavior
         2. Editing a behavior via the Behaviors panel
         3. Creating a pop‐up message
   8. 7. Creating a Web Page from a Photoshop File
      1. Taking a Wire Frame to a Finished Design
      2. Finishing the Artwork
         1. Placing a photo in your banner
         2. Creating a clipping mask
         3. Implementing filters, adjustment layers, and blend modes
      3. Slicing a Photoshop Document
      4. Optimizing Graphics for the Web
      5. Making a Graphic Transparent
   9. 8. Meeting HTML's Powerful Friends
      1. Web Technologies Defined
         1. Vary your content with variables
         2. Conditional statements
         3. Here we go loop‐de‐loop
         4. Creating functional functions
      2. Looking on the Server Side
         1. ASP/ASP.NET
         2. .NET Framework
         3. JavaScript
         4. PHP
         5. CGI/PERL
      3. Checking Out the Client Side
         1. Java
         2. VBScript
   10. 9. Web Site Usability and Accessibility
       1. Ensuring Your Site Is Easy to Use
       2. Helping Users Access Your Site
          1. Images need alternate content
          2. Use more than one method to convey your information
          3. Pictures are important
          4. Orientation tools are helpful
       3. Creating Accessible Web Pages
          1. Using Dreamweaver to insert accessible elements
          2. Using Dreamweaver to check your site's accessibility
             1. Running reports
             2. Fixing mistakes
   11. 10. Publishing the Web Site
       1. Look Before You Leap: What to Do before Launch
          1. Develop a checklist
          2. Get opinions
             1. Do a beta test
             2. Get feedback
             3. Follow up with beta testers
             4. Tweak your design
       2. Going Live
          1. Using Dreamweaver to upload content
          2. Uploading pages with an FTP client
       3. What Next? The Launch Is Not the End of the Project
          1. Submitting the site to search engines
          2. Implementing marketing
          3. Requesting link exchanges
9. IV. Web Graphics
   1. In this part . . .
   2. 1. Finding Inspiration
      1. Finding Fresh Ideas
      2. Respecting the Copyrights of Others
      3. Protecting Your Own Copyrights
      4. Working with Colors (Web Safe versus Not Web Safe)
      5. Creativity Tools — Color Charts and More
      6. Font/Type Issues on Web Sites
      7. Print to Web — Making Your Web Site Work with Existing Materials
      8. Understanding Image Formats for Web Design
         1. Using the GIF image file format
         2. Using the JPEG image file format
         3. Using the PNG image file format
   3. 2. Bringing Your Vision to Life
      1. Introducing Fireworks 8
         1. Vector and raster images
         2. The PNG file format
         3. Fireworks interface mini‐tour
            1. The work area
            2. The toolbar
      2. Creating Art with Other Tools
         1. Adding Photoshop CS2 to your graphics toolbox
         2. Getting graphics ready for the Web with ImageReady
         3. Creating painterly images in Corel Painter
   4. 3. Workhorse Graphics
      1. Creating Buttons in Fireworks
         1. Introducing the Button Editor
         2. Creating a simple two‐state button
         3. Creating buttons with pizzazz
      2. Creating a Vertical Navigation Menu
      3. Creating a Pop‐Up Menu
      4. Recycling — Reuse Everything
         1. Making a reusable graphic template
         2. Organizing a site
      5. A Doodle to a Working Page — Concept to Completion
         1. Mind mapping
         2. Creating a client mockup
      6. Optimizing Artwork in Fireworks
         1. Optimizing GIF artwork
         2. Optimizing JPEG artwork
      7. Exporting Artwork from Fireworks
   5. 4. Creating Compelling Graphics
      1. Creating Banner Graphics
         1. Using Photoshop to create a banner
         2. Including all the important information
         3. Working with an existing logo
      2. Create Promotional Graphics
         1. Emphasize your point
         2. Complement your style
      3. Creating Fast‐Loading, Beautiful Photos
         1. Resizing your photos for the Web
         2. Using professional optimization techniques
      4. Creating a Photo Gallery
         1. Choosing your photos
         2. Putting the photos in order
         3. Using Photoshop to create a photo gallery
         4. Using Dreamweaver to create a photo gallery
10. V. Multimedia
    1. In this part . . .
    2. 1. Incorporating Flash Creations
       1. Introducing Flash 8
          1. Touring the interface
             1. Exploring the Toolbox
             2. Someone told me it's all happening on the timeline
             3. Panels not cast from wood
             4. Inspecting the Properties inspector
          2. Getting comfortable with Flash
             1. Creating a Flash document
             2. Creating an object
             3. Creating your first animation
          3. Setting up your workspace
             1. Setting Flash preferences
             2. Modifying the workspace
       2. Building Flashy Navigation
          1. Creating the navigation menu document
          2. Creating buttons in Flash
          3. Assembling your menu
          4. Adding functionality to the buttons
          5. Publishing your file and adding it to your page
       3. Flash as an Animation Tool
       4. Create a Flash Presentation
       5. Exploring the Many Tricks of Flash
    3. 2. Using Sound
       1. Exploring Audio Formats for the Web
       2. Adding Flash Audio to a Page
          1. Creating Flash audio
          2. Adding sound to a Web page
       3. Embedding a QuickTime Player in a Page
       4. Adding the RealMedia Player to a Page
       5. Adding the Windows Media Player to a Web Page
       6. Delivering Your Message
    4. 3. Using Web Video
       1. Exploring Web Video Formats
       2. Working with Digital Video
          1. Capturing video
          2. Encoding video
       3. Creating and Encoding Flash Video
       4. Adding Flash Video to a Web Page
       5. Adding QuickTime Player to a Page
       6. Adding Windows Media Player to a Page
       7. Avoiding DV Pitfalls
    5. 4. Slideshow Pro
       1. About Slideshow Pro
       2. Installing the Extension
       3. Creating a Slide Show
          1. Launching Slideshow Pro
          2. Adding slides to your show
          3. Adding text and sound to a slide
          4. Editing a slide show
11. VI. Audience Interaction
    1. In this part . . .
    2. 1. Adding Basic Interactivity with HTML Forms and JavaScript
       1. Understanding Interactivity
       2. Getting Ready to Code
       3. Building an HTML Form
          1. Form tags: <form> </form>
          2. Text fields: <input type="text">
          3. Submit buttons: <input type="submit">
          4. Creating a simple form in Dreamweaver
          5. Testing the form
       4. Adding Elements to Your Form
          1. Password fields
          2. Hidden fields
          3. Textarea form objects
          4. Multiple choice types (check box and radio)
             1. Check boxes: <input type=@@"checkbox">
             2. Radio buttons: <input type=@@"radio;">
             3. Radio groups
          5. Drop‐down lists
          6. Event handlers and JavaScript
          7. Making dynamic pages with server side technology
    3. 2. An Introduction to ASP
       1. Understanding ASP
       2. Creating ASP Pages and Testing Them on Your Local System
          1. Working with IIS
          2. Setting up the Web site
          3. Defining the site in Dreamweaver
       3. Creating ASP Pages in Dreamweaver
          1. Using variables
          2. Introducing VBScript functions
       4. Discovering Cool ASP Tricks
          1. Displaying a random image
          2. Create a rotating ad banner
    4. 3. Introduction to PHP
       1. What Is PHP?
       2. Fulfilling PHP Server Side Requirements
       3. Creating PHP Pages
       4. Declaring and Using Variables
       5. Working with Conditional Statements
          1. Putting conditional statements into action
          2. Using comparison operators
          3. Using logical operators
       6. Repeating Lines of Code Using Loops
          1. Using the while loop
          2. Using the for loop
       7. Generating a Random Image
    5. 4. MySQL and PHP
       1. Creating a Mailing List Form
       2. Creating the Database
       3. Creating the PHP Code
       4. Retrieving Information from a Database
    6. 5. Additional Site Interactivity
       1. Engaging Visitors with an Online Journal (Blog)
       2. Initiating Online Conversations: Forums and Message Boards
       3. Establishing an Online Community: Wiki
       4. Feeding Them Your Content: RSS
          1. Using an online feed reader
          2. Creating an RSS feed
          3. Validating your feed
          4. Getting your feed going
       5. Branding through E‐Mail
       6. Keeping Them Up to Date: Newsletters
12. VII. E‐Commerce
    1. In this part . . .
    2. 1. An E‐Commerce Primer
       1. Nailing Down E‐Commerce Concepts
          1. Establishing an online identity
          2. Researching domain names
          3. Purchasing domain names
          4. Choosing an e‐commerce‐friendly server
             1. To share or not to share
             2. Getting the best deal
          5. Planning a user‐friendly site
          6. Brainstorming the site
       2. Adding Basic E‐Commerce with PayPal
       3. Integrating with Credit Card Authorization Packages
          1. Solving the online payment maze
          2. Internet fraud: An e‐commerce merchant's worst nightmare
       4. SSL — What Is It?
          1. Using a secure server
          2. Sharing an SSL certificate
       5. E‐commerce Do's and Don'ts
    3. 2. Building An E‐Commerce Site
       1. Technological Considerations
       2. Usability: Thinking Like a Customer
       3. Legal Considerations — Call a Lawyer
          1. Cookies that don't crumble
          2. Spam, spam, spam, spam!
       4. Creating an E‐Commerce Site
          1. Setting up the e‐mail addresses
          2. Selling items with a PayPal account
       5. Using a Shopping Cart
          1. Creating a mailing list form
          2. Forwarding the information to a database
          3. Test, test, and then test again
       6. Selling Online
          1. If you build it they won't care
          2. Security concerns
          3. Following through on every sale
    4. 3. Maintaining An E‐Commerce Site
       1. When Technology Breaks Down
          1. When client‐side technology runs amuck
          2. Server‐side technology, or code sleight of hand
       2. Handling Customers
          1. Getting it in writing
          2. Documenting everything
          3. Handling e‐commerce customers
       3. Search Engine Optimization (SEO) and Marketing
          1. Optimizing the site for search engines
          2. Finding sites to link to the e‐commerce site
          3. Danger, Will Robinson! These do not compute
             1. Optimizing sites with frames
             2. Jumpin' Jack Flash is not such a gas
          4. Using search engine software
          5. Marketing the site to the world
             1. Using a pay per click promotion
             2. Other marketing techniques
       4. Figuring Out When to Upgrade
          1. Upgrading to a more robust Web hosting package
          2. Upgrading to another server
13. VIII. Site Management
    1. In this part . . .
    2. 1. Helping a Site Succeed
       1. Planning and Incorporating Search Engine Optimization (SEO)
          1. Seeing why SEO is essential
          2. Understanding the mechanisms: Meta tags, keywords, descriptions, and alt text
             1. What's in a name?
             2. Increasing site visibility with alt text
          3. Improving site searchability
             1. Clean up your code
             2. Create a title, alt tags, descriptions, and keywords
       2. Hiring the Right Professional Help
          1. Deciding between SEO and paid advertising
          2. Submitting your site to search engines
          3. Using a service to submit your site
       3. Determining If Your SEO Is Working
          1. Reading your Web stats
          2. Defining Web stat terms
          3. Adjusting the site and driving traffic
       4. Using Reciprocal Links to Boost the Site's Visibility
       5. Promoting a Site with Traditional Marketing
       6. Keeping Them Coming Back
          1. Ongoing content development
          2. Creating content to keep them coming back
    3. 2. Maintaining a Web Site
       1. Updating Pages without Destroying Them
       2. Sharing the Work with Contribute
          1. Creating a connection
          2. Administering the Web site
          3. Sending a connection key
          4. Editing Web pages
       3. Managing a Site with Dreamweaver
          1. Editing new pages
          2. Archiving pages
       4. Tips for Managing Tasks
          1. Simplifying repetitive tasks with Snippets
             1. Creating Snippets
             2. Using Snippets
          2. Taking advantage of your assets
          3. Using the Dreamweaver Library
             1. Creating Library items
             2. Using Library items
             3. Editing Library items
    4. 3. Expanding a Site
       1. Use It or Lose It: Should You Add On or Redesign?
          1. Adding on to an existing site
          2. Redesigning the site from scratch
       2. Headache‐Free Expansion
          1. Things to consider when redesigning
             1. Consultation
             2. Review
             3. Analysis
             4. Planning
             5. Implementation
             6. Testing
          2. Trauma‐free site expansion
       3. After Launching the Expanded Site
14. IX. Case Studies
    1. In this part . . .
    2. 1. Personal Web Sites
       1. Tailoring the Site to Your Client
       2. Creating the Home Page
       3. Creating Other Pages
          1. The photo gallery
          2. The discography page
          3. The events page
          4. The multimedia gallery
       4. Editing a Personal Web Site
    3. 2. Blog Site
       1. Examining Blog Software and Services
          1. b2evolution
             1. Introducing the b2evolution application
             2. Installing b2evolution
             3. Posting a blog entry in b2evolution
             4. Managing a b2evolution blog
          2. WordPress
             1. About WordPress
             2. Installing WordPress
             3. Modifying a WordPress blog
             4. Posting a WordPress blog entry
             5. Managing a WordPress blog
          3. Exploring other options: Blogger.com
       2. Adding a Blog to an Existing Web Site
    4. 3. Online Newsletter
       1. Building a Mailing List
       2. Making It Easy to Add People
       3. Managing the Mailing List
       4. Give Subscribers Something Useful
       5. Case Study: Newsletter for an Acupuncture Clinic
    5. 4. Photographer/Portfolio Site
       1. Defining Goals for the Site
       2. Designing the Site
          1. Creating the navigation menu in Fireworks
          2. Optimizing images in Fireworks
          3. Creating thumbnails in Fireworks
          4. Creating the other assets
          5. Putting it together in Dreamweaver
          6. Creating the portfolio pages
          7. Showing off without snootiness