How This Book Is Structured
In ten projects, I present a variety of ways to approach the implementation of one feature. The various projects are outlined in detail in the following list:
Chapter 1, "Tabs": In the first chapter I describe a variety of methods used to create tab-based navigation. The main project focuses on how to create a no-frills tab navigation using simple HTML lists and CSS. In the alternative approaches I present how to evolve the same design to include background images, background images that include text, and liquid tabs that stretch and contract to fill the area available to them. I also introduce Dean Edwards' IE7 JavaScript and explain how this JavaScript is bridging the CSS compatibility gap between more CSS-capable browsers like Mozilla Firefox, and Microsoft's Internet Explorer 5, 5.5 and 6 browsers.
Chapter 2, "Multi-column Layouts": In the second chapter I present how to create a multi-column design vis-a-vis CSS and XHTML. The main project describes how to create a multi-column design using CSS positioning. I also describe how to correct rendering in Internet Explorer 6 with either with or without the IE7 JavaScript. In the alternative approaches, I describe how to modify the design to get a two-column layout instead of three, how to use floating instead of positioning to lay out the columns, and how to make the secondary columns liquid.
Chapter 3, "Dynamic Drop-down Menus": In the third chapter I elaborate on a variety of methods available to create dynamic drop-down menus. In the main project I present how to create drop-down menus using the CSS :hover dynamic pseudo-class. In the alternative approaches I discuss why the :hover dynamic pseudo-class alone is not the best approach, and present how the project can be modified to use a JavaScript-driven menu system that falls back on the CSS approach if CSS is not available. I also present how to modify the drop-down menus so that they have custom borders and backgrounds, in addition to presenting how to create menus that drop sideways instead of down. Chapter 3 also introduces how a CSS 3 pseudo-class, :target, can play a role in anything from drop-down menus to popup dialogs to slide shows.
Chapter 4, "More Dynamic Drop-down Menus and the Incredible, Versatile :target": In the fourth chapter I discuss yet another approach to the dynamic drop-down menu system that I presented in Chapter 3.
Chapter 5, "Slide Show": In the fifth chapter I present a web-based slide show that largely relies upon the use of the :target pseudo-class to function. Because the :target pseudo-class works only in Safari and Mozilla Firefox, I also present the steps you need to take to get a functioning slide show in Internet Explorer and Opera.
Chapter 6, "Custom Borders and Rounded Corners": The sixth chapter elaborates on a common desire among web designers: how to customize borders and corners. I present two popular techniques for making custom borders and rounded corners.
Chapter 7, "Applying CSS to a Webmail Application": In the seventh chapter I present a more complex application of CSS, styling a web-based mail application. Although you do not create a fully functional webmail application, you see the steps and challenges associated with setting up the user-interface for one. I also present a few alternative approaches in the design, including an optional message preview pane, and how to modify the webmail application so it mimics Microsoft Outlook 2003's three-column view.
Chapter 8, "Styling Input Forms": In the eighth chapter I discuss how to style the Wrox P2P web site registration form, updating the original from legacy presentational HTML to more modern CSS and XHTML. I also present a technique that you can use to customize the look and feel of text input fields.
Chapter 9, "User-Interface for a Web-based File Viewer": In the ninth chapter I present a complex project called "hFinder," an open source web-based file management application that I originally developed for my company's corporate intranet as part of a content management system (CMS). As was the case for project 7, you won't have a fully functioning file management system when you complete the project, but you will learn more about the challenges associated with the aesthetic aspects of making a web-based file viewer. I discuss techniques that help the web-based file viewer look and function like its desktop counterparts, Windows Explorer and Mac OS X Finder. You learn how to implement different methods of viewing files and directories, like details, icons, list, and tiles views. I also discuss techniques for creating pseudo-popup windows and dialogs, using only markup and CSS.
Chapter 10, "Calendar": In the last chapter I elaborate on how to style a web-based calendar. I discuss techniques that enable you to create either a static calendar, where you enter in events manually, or how to prepare the application for a more sophisticated application, where the calendar and events are generated by JavaScript or a server-side programming language.
Throughout CSS Instant Results I discuss techniques and challenges that you'll face with the world's most popular browser, Microsoft Internet Explorer, which consequently also has the worst support for CSS among the most popular browsers. Included within each chapter are the hacks and workarounds that you'll need to make all ten projects function in Internet Explorer.
No comments:
Post a Comment