CONTENTS
Chapter 1 Overview of Web Development Today
Knowing the Seven Rules of Web Design
Understanding Three Web-Design Philosophies
Chapter 2 Designing for the Past, Present, and Future
Incorporating Usage Statistics
Building on Previous Design Weaknesses
Chapter 3 Things to Consider Before Beginning
Obtaining Front-End Requirements
Knowing Bandwidth Requirements
Designing Fixed Versus Relative Sites
Creating Versions of a Site to Satisfy Differing Resolutions
Use a Consistent Naming Convention
Avoid Linking the User Out of the Section
Create Cascading Architecture Versus Flat Architecture
Scrolling Versus Not Scrolling
Deciding Whether to Use a Horizontal or Vertical Structure
Understanding the Different Types of Menus
Chapter 5 Gathering Requirements and Creating a Comp
Gathering and Basing a Site on Requirements
Creating a Comp for the Client
Collecting and Documenting Stock Images
Receiving a Decision on the Chosen Comp and Making Edits
Chapter 6 What Is Needed to Build Mortised Sites
Understanding the Concept of Mortising Images
Using a Limited Number of Tags
Understanding the DocType Declaration
Chapter 7 Understanding Graphics
Learning about Vector and Bitmap Images
Learning about JPGs, PNGs, and GIFs
Knowing How PNG and GIF Compression Work
Understanding Graphics/Compression Software
Chapter 8 Creating CSS Designs
The Basics of CSS-Based Design Works Versus XHTML Table-Based Design
Testing Designs in Various Browsers
Chapter 9 Case Study: Low-Content CSS Design
Understanding the Design’s Structure
The Reasoning Behind Guides and Creating Slices in Photoshop Files
Understanding the Placement of CSS Containers
Creating the XHTML and CSS Framework
Adding <DIV> in Which to Nest Left and Right Columns
Adding the Center (Right) Column
Constructing Second-Level Pages
Adding a Floating Container for Additional Content
Chapter 10 Case Study: Medium-Content CSS Design
Understanding the Design’s Structure
Reasoning Behind Guides and Creating Slices in a Photoshop File
Understanding the Placement of CSS Containers
Creating the XHTML and CSS Framework
Adding <DIV> to Nest Center and Inside-Right Columns
Adding the Bottom, Center, and Right Content Areas
Constructing Second-Level Pages
Constructing a Second-Level Page with Three Columns
Constructing a Second-Level Page with Two Columns
Chapter 11 Case Study: High-Content CSS Design
Understanding the Design’s Structure
Reasoning Behind Guides and Creating Slices in Photoshop Files
Understanding the Placement of CSS Containers
Creating the XHTML and CSS Framework
Constructing Second-Level Pages
Constructing a Second-Level Page with Three Columns
Constructing a Second-Level Page with Two Columns
Chapter 12 Case Study: Full-Height Three-Column Layout
Understanding the Design’s Structure
Reasoning Behind Guides and the Creating of Slices in Photoshop File
Understanding the Placement of CSS Containers
Creating the XHTML and CSS Framework
Adding the Rows and Columns to the Framework
Populating the Header, Footer, and Columns with Content
Constructing Second-Level Pages
Chapter 13 Case Study: Background-Based Design
Understanding the Design’s Structure
Reasoning Behind Guides and the Creating of Slices in the Photoshop File
Understanding the Placement of CSS Containers
Creating the XHTML and CSS Framework
Adding the Header Area to the Framework
Adding the Body Content and Footer
Constructing Second-Level Pages
Chapter 14 Case Study: A CSS Form
Understanding the Form’s Structure
Explaining the Style Sheet Used for the Form
Adding the <FORM> Tag and Required Row
Adding the Region and Language Rows
Adding the Status and Unlimited Rows
Adding the Options to Select Rows
Adding the Submit and Cancel Buttons
Chapter 15 Tips and Techniques
Naming Rules and Properties Correctly
Removing Body Margins and Padding
Creating the Framework for a Fixed-Width CSS Design
Taking into Account Increasing and Decreasing Column Heights
Centering a Fixed-Width Design
Using Background Images as Design Elements
Using JavaScript Drop-down Menus
Remembering the Order of Margin and Padding Shortcuts
Using the Border and Background Properties for Troubleshooting
Commenting Out Code for Troubleshooting
Using Unique Naming Conventions
Avoiding Horizontal Scrollbars
Using Globally Driven <SPAN> and <DIV> Tags for Printing Purposes
Using Interchangeable Elements When Designing Rebrandable Sites
Including Hidden <DIV> Tags for Future Use
Positioning the Line-Height Property Correctly
Testing Continually and Consistently
Creating Source Image Files That Can Be Easily Customized and Resaved
Breaking Out Sections of Source Image Files
Chapter 16 Customizing the Designs Included in This Book
Steps to Customizing a Template
Step 1: Open the Main Photoshop File
Step 2: Customize Images and Colors
Step 3: Optimize and Save Necessary Images
Step 4: Open an XHTML (HTML), CSS, or JavaScript File
Step 5: Customize Text and Code