Professional ASP.NET 2.0 Design: CSS, Themes, and Master Pages

Professional ASP.NET 2.0 Design: CSS, Themes, and Master Pages

by Jacob J. Sanford
Released September 2007
Publisher(s): Wrox
ISBN: 9780470124482

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

This book is for anyone who wants to learn about using .NET for web interface design. Beginner or hobbyist .NET developers can certainly get a good foundation of .NET web interface design by going through this book from cover to cover. However, more seasoned .NET professionals, especially if they tend to steer away from the GUI of their projects, can also pick up a thing or two by focusing on certain chapters that appeal to them. This book is meant to take a reader from the beginning of a project to the completion of the interface design. Along the way, concepts are illustrated to show how the different pieces play together. So, anyone who really wants to understand the concepts presented in this book will be able to do so by reading the entire thing. However, this book should also serve as a good reference after you have read it or, in some cases, in place of reading it.

All of the early chapters provide useful information and examples for any web developer. Many of the concepts presented after Chapter 4 are more specifically targeted at .NET developers. In the later chapters, the target audience is .NET developers or, at least, people who want to become .NET developers. In those chapters, you should probably have at least a basic understanding of the .NET Framework and some experience with Visual Studio 2005 (or possibly Visual Studio 2003). If you are completely new to .NET, you may find it useful to pick up a beginning ASP.NET 2.0 book before delving too deeply into those chapters. If you want to learn about .NET 2.0 web interface design, you are the intended audience.

It should be noted that all of the .NET code samples in this book are in C#. However, this shouldn't limit other developers, such as VB.NET developers, from understanding the concepts or being able to replicate the code in their own projects. The actual managed code examples are pretty limited and, when they are used, they should be fairly easy to port over to VB.NET.

This book covers the concepts serious developers need to begin designing cool and consistent web layouts. The early chapters focus on general web design standards that you need to grasp in order to move into the later chapters. Specifically, these concepts are:

  • Basic web design considerations (colors, fonts, images, accessibility, and so on) (Chapter 2)

  • Photoshop basics to get you started making your own graphics and color schemes (Chapter 3)

  • Cascading Style Sheets (CSS) and their use in web design layout (Chapter 4)

When you finish these chapters, you will have the basic shell for the project that you will continue to develop throughout the book. You will have the header graphic, color scheme, and CSS layout that you will begin to incorporate .NET-specific concepts to in the later chapters. This includes:

  • How to make .NET controls render accessible CSS code rather than their default: tables (Chapter 5)

  • Using the built-in controls of .NET to create easily maintainable and consistent site navigation (and how to make them render CSS divs instead of tables) (Chapter 6)

  • Creating your web site template with Master Pages (Chapter 7)

  • Creating themes and skins to style your .NET controls (Chapter 8)

  • Applying themes to your projects through various approaches, including base classing (Chapter 9)

The final "regular" chapter ends with you building an entirely new mobile device theme using all of the concepts learned in the previous chapters. In Chapter 10, you will start with modifying your graphic to better fit the resolution of your mobile devices. You will also learn how to modify your stylesheets and apply them programmatically to be used only for this theme. You will have a new Master Page and an entirely new theme. You will also see one way of switching themes based on your criteria (in this example, your criterion will be whether your client browser is a mobile device).

Beyond these chapters, you will get a "forward look" at some of the new technologies coming down the pipeline that affect these some of the material you learned in the preceding chapters. In Appendix A, you will get a glimpse at the upcoming release for Visual Studio, codenamed "Orcas." This will almost exclusively focus on the new CSS features because they are the most relevant to the other chapters of the book, and there are so many new features regarding CSS management in this release that they warrant their own chapter (nested Master Pages are also included, but CSS takes up most of the appendix).

Finally, with Appendix B, the Visual Studio Codename "Orcas" discussion is extended to include Microsoft Silverlight. You will learn how to create drawing object, incorporate images, animate your objects, and affect the rendered output through your managed code.

If you read this book from cover to cover, you should end up with a really solid understanding of the current technologies for .NET developers to create consistent and accessible web interfaces, as well as a feeling of excitement for the new stuff that should be coming soon to a computer near you.

Table of contents

  1. Copyright
  2. About the Author
  3. Credits
  4. Acknowledgments
  5. Introduction
    1. Who This Book Is For
    2. What This Book Covers
    3. What You Need to Use This Book
    4. Conventions
    5. Source Code
    6. Errata
    7. p2p.wrox.com
  6. 1. aesthNETics
    1. 1.1. What Is aesthNETics?
    2. 1.2. Why Is aesthNETics Important?
    3. 1.3. Evolving Expectations of Employers
    4. 1.4. Creating a Consistent Look and Feel for Your Website: aesthNETics Essentials
    5. 1.5. Prerequisites
    6. 1.6. Summary
  7. 2. Web Design 101
    1. 2.1. Design Basics
      1. 2.1.1. Screen Resolution
      2. 2.1.2. Browsers
      3. 2.1.3. Color Depth
      4. 2.1.4. Images
      5. 2.1.5. Text
      6. 2.1.6. CSS vs. Tables
        1. 2.1.6.1. CSS Is the Way to Go!
        2. 2.1.6.2. No Way. Tables Are Where It's At!
        3. 2.1.6.3. Who Wins?
    2. 2.2. Accessibility
      1. 2.2.1. Why Accessibility Matters
      2. 2.2.2. The Cost of Noncompliance
      3. 2.2.3. Ensuring Accessibility
      4. 2.2.4. Testing for ADA Compliance
      5. 2.2.5. AJAX 508 Compliance
      6. 2.2.6. The Importance of Accessibility
    3. 2.3. Summary
  8. 3. Photoshop: Cool Tips and Tricks for Developers
    1. 3.1. Prerequisites
    2. 3.2. Project Guidelines
    3. 3.3. Photoshop: An Overview
    4. 3.4. Your First Graphics
      1. 3.4.1. Image Size and Manipulation
      2. 3.4.2. Translucent Boxes
      3. 3.4.3. Layers
      4. 3.4.4. Text
      5. 3.4.5. Saving the Image
      6. 3.4.6. Picking a Color Scheme
    5. 3.5. A Second Graphic
      1. 3.5.1. Selecting and Extracting Images
      2. 3.5.2. Background
      3. 3.5.3. Silhouettes
      4. 3.5.4. Text
      5. 3.5.5. Optional Modification
      6. 3.5.6. Saving the Image
      7. 3.5.7. Color Scheme
    6. 3.6. A Mobile Browser Graphic
    7. 3.7. Extending Your Photoshop Skills
    8. 3.8. Summary
  9. 4. Cascading Style Sheets (CSS)
    1. 4.1. Prerequisites
    2. 4.2. That Looks Like Table-Based Design
      1. 4.2.1. CSS Basics
      2. 4.2.2. DOCTYPEs
    3. 4.3. Creating a Stylesheet
      1. 4.3.1. Laying Out Your Page for CSS
      2. 4.3.2. The Holy Grail of CSS
        1. 4.3.2.1. Option 1: The Negative Margin Approach
          1. 4.3.2.1.1. Pros and Cons
        2. 4.3.2.2. Option 2: The Faux Column
          1. 4.3.2.2.1. Pros and Cons
      3. 4.3.3. Formatting the Footer
      4. 4.3.4. Which One Should You Use?
    4. 4.4. Browser Check
    5. 4.5. Your Final CSS File
    6. 4.6. Summary
  10. 5. ASP.NET 2.0 CSS Friendly Control Adapters
    1. 5.1. What Is a CSS Friendly Control Adapter?
    2. 5.2. Installing the Control Adapters
    3. 5.3. Integrating the Control Adapters
      1. 5.3.1. A New Project
      2. 5.3.2. Adding the Control Adapters to an Existing Project
        1. 5.3.2.1. Step 1: Installing the CSS Friendly Control Adapters
        2. 5.3.2.2. Step 2: Creating a Reference Directory
          1. 5.3.2.2.1. Option 1: Installing a Dummy Project
          2. 5.3.2.2.2. Option 2: Unzipping the Project Files
          3. 5.3.2.2.3. The Final Template Folder
        3. 5.3.2.3. Step 3: Importing the Directories and Files
        4. 5.3.2.4. Step 4: Using the Adapters!
      3. 5.3.3. Using the Control Adapters in Your Project
      4. 5.3.4. Is It Working?
      5. 5.3.5. Stylin' and Profilin'
    4. 5.4. For More Information
    5. 5.5. Summary
  11. 6. Consistent Navigation
    1. 6.1. Overview: ASP.NET Navigation Controls
    2. 6.2. Getting Started
    3. 6.3. The SiteMapDataSource Control
      1. 6.3.1. The web.sitemap File
      2. 6.3.2. SiteMapDataSource
      3. 6.3.3. A Different Sitemap File
      4. 6.3.4. Lock Down!
      5. 6.3.5. Hello = Hola
        1. 6.3.5.1. Step 1: Setting Up the Sitemap File
        2. 6.3.5.2. Step 2: Adding Your Resources
        3. 6.3.5.3. Step 3: Telling the Page to Look for the Language
        4. 6.3.5.4. Step 4: Test!
    4. 6.4. Using the CSS Friendly Control Adapters
      1. 6.4.1. Adding a New web.sitemap File
      2. 6.4.2. Setting Up the web.config File
      3. 6.4.3. Adding the Menu Control and the SiteMapDataSource
      4. 6.4.4. Testing and Tweaking
      5. 6.4.5. Making It Pretty
    5. 6.5. Browser Check
      1. 6.5.1. But Is This Enough?
    6. 6.6. Extra Credit: Breadcrumbs
    7. 6.7. Summary
  12. 7. Master Pages
    1. 7.1. How Did We Get Here?
    2. 7.2. What is a Master Page?
    3. 7.3. Enough Talk; Time to Code
    4. 7.4. Partial Classes
    5. 7.5. Passing Data between Master and Child
      1. 7.5.1. First Things First
      2. 7.5.2. Option 1: Just Bring it in
      3. 7.5.3. Option 2: Changing Your Class Name
      4. 7.5.4. Option 3: MasterType
    6. 7.6. Setting the Master Page Globally
    7. 7.7. Programmatically Setting Master Pages
      1. 7.7.1. Consideration #1: Design-Time Support
      2. 7.7.2. Consideration #2: The @MasterType Directive
    8. 7.8. Nested Master Pages
      1. 7.8.1. Enough Theory, on to Coding!
      2. 7.8.2. No Problems, Right?
    9. 7.9. One Last Concept
    10. 7.10. Bringing It All Together: Updating the surfer5 Project
    11. 7.11. Summary
  13. 8. Themes
    1. 8.1. What Are Themes?
    2. 8.2. Your First Theme!
      1. 8.2.1. Okay, Time for the Details . . .
    3. 8.3. CSS in Themes
      1. 8.3.1. Problem: The Way Themes Apply Included Stylesheets
      2. 8.3.2. Adding a CSS File to Your Theme
        1. 8.3.2.1. Is This a Good Thing?
      3. 8.3.3. One Solution
        1. 8.3.3.1. Adding Back the Theme
        2. 8.3.3.2. The CSS Files Rendering Order
        3. 8.3.3.3. Incorporating style.aspx in Themes
          1. 8.3.3.3.1. Option 1: The Querystring Approach
          2. 8.3.3.3.2. Option 2: Page Inheritance
          3. 8.3.3.3.3. Other Options
        4. 8.3.3.4. Pros and Cons to style.aspx
          1. 8.3.3.4.1. Pros
          2. 8.3.3.4.2. Cons
      4. 8.3.4. Other Potential Solutions
      5. 8.3.5. A Final Thought on CSS in Themes
    4. 8.4. Skins
      1. 8.4.1. Adding a Skin File
      2. 8.4.2. Selectively Applying Skin Attributes
        1. 8.4.2.1. Solving Conflicts
        2. 8.4.2.2. Turning Off Theming
        3. 8.4.2.3. Turning On IntelliSense
      3. 8.4.3. Final Thoughts on Skins
    5. 8.5. Images
      1. 8.5.1. Referencing from CSS
      2. 8.5.2. Integration within a Skin File
      3. 8.5.3. Hard-Coding a Path to the Theme Image
    6. 8.6. Updating the surfer5 Project
      1. 8.6.1. Adding the Images to Your Theme
      2. 8.6.2. Adding the CSS to Your Theme
      3. 8.6.3. Updating Your Root Files
      4. 8.6.4. Pulling It All Together
    7. 8.7. Browser Check
    8. 8.8. Summary
  14. 9. Applying Themes
    1. 9.1. Before You Begin: Setting the Theme in the Master Page
    2. 9.2. The Default Approach: A Refresher
    3. 9.3. Partial Resolution #1: Setting Themes Programmatically
      1. 9.3.1. Theme
      2. 9.3.2. StyleSheetTheme
      3. 9.3.3. The Downside to the Programmatic Approach
      4. 9.3.4. Who Wins the Rendering War?
    4. 9.4. Partial Resolution #2: Setting It Globally
      1. 9.4.1. web.config
        1. 9.4.1.1. Is One Theme a Waste?
      2. 9.4.2. machine.config
        1. 9.4.2.1. machine.config is Special
      3. 9.4.3. The Downside to the Global Approach
    5. 9.5. Partial Resolution #3: The Inherited Base Class
      1. 9.5.1. Less Talk, More Code
      2. 9.5.2. The Hierarchy of the Base Class
        1. 9.5.2.1. A Quick Note about StyleSheetTheme
    6. 9.6. Updating the surfer5 Project
    7. 9.7. Summary
  15. 10. Bringing It All Together — A New Theme
    1. 10.1. Browser Check
    2. 10.2. Before You Begin
    3. 10.3. Step 1: Back to the Drawing Board
    4. 10.4. Step 2: A New Master
    5. 10.5. Step 3: The Mobile Theme
    6. 10.6. Step 4: Wiring It Up
    7. 10.7. Step 5: Adding Style
    8. 10.8. Step 6: Adding the Navigation
    9. 10.9. Browser Check: A Final Look
    10. 10.10. Summary
  16. A. Microsoft Visual Studio Codename "Orcas"
    1. A.1. Feels Like Home . . . Sort Of
    2. A.2. CSS and Orcas
      1. A.2.1. The CSS Properties Window
      2. A.2.2. Adding New Style Definitions
      3. A.2.3. CSS Properties Windows Buttons and Settings
      4. A.2.4. Conflicts and Resolution
      5. A.2.5. Manage and Apply Styles
        1. A.2.5.1. Manage Styles
        2. A.2.5.2. Apply Styles
      6. A.2.6. Themes and the New CSS Tools
      7. A.2.7. Modifying a CSS Document
      8. A.2.8. The CSS Outline Window
      9. A.2.9. A Final Tip
      10. A.2.10. So What's Coming Next?
      11. A.2.11. Summary of CSS and Orcas
    3. A.3. Nested Master Pages
    4. A.4. Summary
  17. B. An Introduction to Microsoft Silverlight
    1. B.1. Prerequisites
    2. B.2. About the Project
    3. B.3. The Tick Tock Clock Project
      1. B.3.1. Step 1: Creating Your Project in Orcas
      2. B.3.2. Step 2: Setting Up the Dimensions
      3. B.3.3. Step 3: Drawing the Clock
      4. B.3.4. Step 4: Adding the Tick Marks
      5. B.3.5. Step 5: Adding the Clock Hands
      6. B.3.6. Step 6: Animating the Clock Hands
      7. B.3.7. Step 7: Setting the Time
      8. B.3.8. The Clock Project Code
        1. B.3.8.1. Page.xaml
        2. B.3.8.2. Page.xaml.cs
        3. B.3.8.3. TestPage.html
        4. B.3.8.4. TestPage.html.js
    4. B.4. Silverlight Considerations
    5. B.5. Summary

Product information

  • Title: Professional ASP.NET 2.0 Design: CSS, Themes, and Master Pages
  • Author(s): Jacob J. Sanford
  • Release date: September 2007
  • Publisher(s): Wrox
  • ISBN: 9780470124482