This content was uploaded by our users and we assume good faith they have the permission to share this book. If you own the copyright to this book and it is wrongfully on our website, we offer a simple DMCA procedure to remove your content from our site. Start by pressing the button below!
Associate Publisher Greg Wiegand Acquisitions Editor Stephanie J. McComb Development Editor Laura Norman Managing Editor Gina Kanouse Production Fast Pages Technical Editor Jennifer Ackerman Kettell Publishing Coordinator Cindy Teeters Multimedia Developer Dan Scherf Book Designer Anne Jones
6055_fm.qxp
12/7/2006
12:44 PM
Page iii
Contents at a Glance I An Overview
VIII Accessing Data in Expression Web
1 A Tour of Expression Web . . . . . . . . . . . . . . . 3
II Web Sites in Expression Web 2 3 4 5 6
Creating a Web Site . . . . . . . . . . . . . . . . . . . . . . . . . . 25 Importing a Web Site . . . . . . . . . . . . . . . . . . . . . . . . . 41 Web Site Management and Reporting . . . . . . 67 Publishing a Web Site . . . . . . . . . . . . . . . . . . . . . . . . 83 Using Personal Web Packages . . . . . . . . . . . . . . 93
III Creating and Editing Web Content 7 8 9 10 11 12 13 14 15 16
VII ASP.NET Development in Expression Web 27 28 29 30 31
Using the ASP.NET Development Server . 485 Using Standard ASP.NET Controls . . . . . . . . 495 Using ASP.NET Navigation Controls . . . . . . . 527 Using ASP.NET Master Pages . . . . . . . . . . . . . . 549 Developing a Login System Using ASP.NET . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 569 32 Implementing Form Validation Using ASP.NET . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 595 33 Using ASP.NET Web Parts . . . . . . . . . . . . . . . . . . 607
34 Primer on Data Access Technologies . . . . . 629 35 Accessing Data with ASP.NET 2.0 . . . . . . . . . 635
Appendices A Using Expression Web with Visual Web Developer Express Edition . . . . . . . . . . . . . . . . . B Taking Advantage of E-Commerce . . . . . . . . C The Future of Web Development . . . . . . . . . D Resources on Expression Web, Web Design, and ASP.NET . . . . . . . . . . . . . . . . . . . . . . . Index
Appendix B: Taking Advantage of E-Commerce . . . . . . . . . . . . . . . . . . . . . . . . . .677 Appendix C: The Future of Web Development . . . . . . . . . . . . . . . . . . . . . . . . . . .685 Appendix D: Resources on Expression Web, Web Design, and ASP.NET . . . . . . .695
xxiii
6055_fm.qxp
xxiv
12/7/2006
12:44 PM
Page xxiv
Special Edition Using Microsoft Expression Web
About the Author Jim Cheshire is best known as the owner of Jimco, the most popular producer of freeware add-ins for Microsoft FrontPage. Jim is also the author of Special Edition Using Microsoft Office FrontPage 2003, the highest-rated book on FrontPage 2003. In his real job, Jim works as an Escalation Engineer at Microsoft on the ASP.NET team. He has worked on the FrontPage, Visual Basic, ASP, IIS, and ASP.NET teams at Microsoft over the last 8 years. You can reach Jim by visiting one of his Web sites, www.jimcobooks.com or www.jimcosoftware.com. You can also e-mail him at [email protected].
6055_fm.qxp
12/7/2006
12:44 PM
Page xxv
Dedication
Dedication This book is dedicated to my lovely wife, Becky, and to my two children. I love you all very much.
xxv
6055_fm.qxp
xxvi
12/7/2006
12:44 PM
Page xxvi
Special Edition Using Microsoft Expression Web
Acknowledgments To Stephanie, Laura, Cindy, Camie, Jenn, Mary, Dan, and all of the folks at Que Publishing, thank you so much for your help and dedication to this project. It’s an honor to be associated with you and with Que. To my mother and father, thank you so much for your confidence and love, and thanks for the “Lagniappe” idea, Dad. To Joe Khalaf and Detra Newhouse at Microsoft, thank you so much for your help and for letting me bug you constantly with questions, even when you weren’t allowed to answer. Thank you, Lord, for my wonderful family and for this great country where one can pursue one’s dreams in freedom. Jim
6055_fm.qxp
12/7/2006
12:44 PM
Page xxvii
Reader Services
We Want to Hear from You! As the reader of this book, you are our most important critic and commentator. We value your opinion and want to know what we’re doing right, what we could do better, what areas you’d like to see us publish in, and any other words of wisdom you’re willing to pass our way. As an associate publisher for Que Publishing, I welcome your comments. You can email or write me directly to let me know what you did or didn’t like about this book—as well as what we can do to make our books better. Please note that I cannot help you with technical problems related to the topic of this book. We do have a User Services group, however, where I will forward specific technical questions related to the book. When you write, please be sure to include this book’s title and author as well as your name, email address, and phone number. I will carefully review your comments and share them with the author and editors who worked on the book. Email: [email protected] Mail: Greg Wiegand Associate Publisher Que Publishing 800 East 96th Street Indianapolis, IN 46240 USA
Reader Services Visit our Web site and register this book at www.quepublishing.com/register for convenient access to any updates, downloads, or errata that might be available for this book.
xxvii
6055_fm.qxp
12/7/2006
12:44 PM
Page xxviii
6055_INTRO.qxp
11/30/2006
8:47 AM
Page xxix
INTRODUCTION
Who Should Read This Book? Expression Web is an exciting new Web development product and there are going to be plenty of authors writing about it. That puts readers in a tight spot when trying to figure out which book to purchase to learn how to use Expression Web to its fullest. Let me tell you who should be reading this book. If you find that you fall into the category, then this is the book for you. I’m a tech addict. As such, I have read plenty of technical books, and I find many of them to be frustratingly light on any meaningful content. In fact, most of them are just complex rewrites of the documentation that ships with the product. I get the documentation with the product, and I’d rather not pay for it again from a third party. Instead, I want a book that tells me what the documentation doesn’t tell me. That’s exactly what this book will do. It will show you how to use the features in Expression Web for real-world Web design. I’ll give you pointers on how to effectively use several features together to achieve a common goal. I’ll give you a strong foundation in the technologies involved (for example, Cascading Style Sheets (CSS), Extensible Hyper-Text Markup Language (XHTML), ASP.NET, and more) so you aren’t working in a vacuum. The goal of this book is to equip you to be a better Web designer using Expression Web as one of the tools in your arsenal. If that sounds like something you’re interested in, keep reading!
Rest in Peace, FrontPage Let me start by saying that Expression Web should not be considered the next version of FrontPage, but neither is it a new application built from the ground up. Instead, it’s a mixture of some of the best elements from FrontPage and entirely new features that address just about every complaint FrontPage users have voiced over the years.
6055_INTRO.qxp
xxx
11/30/2006
8:47 AM
Page xxx
Introduction
Many Web designers have remained loyal to FrontPage over the years despite its shortcomings. There are forums and Web sites dedicated to teaching Web designers how to work around the issues encountered by FrontPage users. N OTE
I’m well aware of the problems FrontPage users encountered. I started Jimco Software in 1998 so I could distribute add-ins to work around some of the shortcomings in FrontPage.
When Microsoft designed Expression Web, one of the primary goals was to deliver a Web design tool that allows Web developers to create standards-compliant Web sites. If you followed the marketing hype that Microsoft issued prior to Expression Web’s release, you no doubt heard plenty of talk about this. I’m happy to say that Expression Web lives up to the hype and makes FrontPage completely obsolete. As you’ll see throughout this book, Expression Web marks a significant improvement in Web design tools. It stands poised to draw in users from all the other professional-level tools while still maintaining the ease of use for which FrontPage is so well-known.
The Need for Expression Web As soon as Microsoft opened a public forum for the discussion of Expression Web, people started asking why Microsoft needed a new Web development tool. After all, FrontPage (the legacy Web design tool from Microsoft) had spent the better part of a decade building up a committed user base. Why did we need a new product? Ask any professional developer who’s ever used FrontPage, and he or she will tell you exactly why. Microsoft desperately needed a Web design tool that would adhere to current Web standards, and they needed a Web design tool that would make creating and maintaining a standards-driven Web site easy. Not only that, but they needed a Web design tool created from the ground up to support ASP.NET 2.0 from a designer’s perspective. Expression Web meets all of those needs. You’ll not only be able to create dynamic, standards-compliant Web sites with Expression Web, but you’ll be able to do so in a way that allows you to take advantage of your creativity. The tool won’t drag you down with complex dialogs and frustrating code changes. After using Expression Web for a while, you’ll never consider going back to your previous Web design tool.
6055_INTRO.qxp
11/30/2006
8:47 AM
Page xxxi
How This Book Is Organized
A Comparison Grid Here’s a short comparison grid that shows how Expression Web (EW) compares to FrontPage (FP) 2003: Feature
FP 2003
EW
Produces XHTML 1.0/1.1 compliant code
No
Yes
Produces HTML 4.01 compliant code
No
Yes
Has full ASP.NET 2.0 support
No
Yes
Has full CSS 1.0/2.0/2.1 support
No
Yes
Is a standards-based designer
No (IE-based)
Yes
Relies on FrontPage Server Extensions
Yes
No
Has powerful XML/XSL support
No
Yes
Has a built-in Web server
No
Yes
Generates Section 508 compliant code
No
Yes
How This Book Is Organized This book is broken up into multiple sections so you can quickly find the information you need. Here is the rundown on all the sections: ■
Part 1, “An Overview”—Part 1 comprises an overview of Expression Web and discusses how it compares to Microsoft’s legacy Web design application, FrontPage. You’ll receive a complete tour of the Expression Web feature set, along with some tips and tricks on using the interface.
■
Part 2, “Web Sites in Expression Web”—The chapters in this section teach you how to work with Web sites in Expression Web. You’ll learn about creating sites, publishing sites, managing sites, and working with other site-related features.
■
Part 3, “Creating and Editing Web Content”—In this section, you’ll learn how to create Web pages and add content to them. I’ll not only talk about adding and formatting text, but also about how to add graphics and dynamic content. Finally, this section will cover the details of how to take advantage of some of the great productivity features in Expression Web.
■
Part 4, “Using CSS in Expression Web”—Instead of including CSS as an afterthought, I’ve dedicated two complete chapters to using this important design concept. You’ll
xxxi
6055_INTRO.qxp
xxxii
11/30/2006
8:47 AM
Page xxxii
Introduction
learn not only the details of CSS in general, but you’ll also learn how to use the powerful CSS tools in Expression Web. ■
Part 5, “Optimizing Your Web Site”—A good Web designer doesn’t just slap pages together. It’s important to make your site work well in all the major browsers, and it’s also important to pay attention to accessibility issues. You’ll learn about both in this section.
■
Part 6, “Scripting, DHTML, and Other Dynamic Content”—In this section, you’ll learn tricks to differentiate your Web site from the status quo. You’ll learn how to add dynamic components automatically in Expression Web. You’ll also learn how to read and write client-side JavaScript so you can understand what goes on under the covers when Expression Web adds code to your page.
■
Part 7, “ASP.NET Development in Expression Web”—Expression Web fully supports Microsoft ASP.NET 2.0. In this section, you’ll find out what ASP.NET 2.0 gives you as a Web designer and you’ll learn how to use Expression Web to create some pretty powerful site features, all without writing any code at all.
■
Part 8, “Accessing Data in Expression Web”—Connecting a Web site to external data has become commonplace. In this section, you’ll discover how to easily design a datadriven Web site with ASP.NET and Expression Web.
I’ve also included four appendices that cover the topics that Web designers are really begging for in the Web design community. These appendices will cover specific topics such as creating and debugging ASP.NET applications, combining Expression Web with Microsoft’s free Visual Web Developer Express Edition, and using Expression Web to make money on the Web with e-commerce solutions. ■
Appendix A, “Using Expression Web with Visual Web Developer Express Edition”
■
Appendix B, “Taking Advantage of E-Commerce”
■
Appendix C, “The Future of Web Development”
■
Appendix D, “Resources on Expression Web, Web Design, and ASP.NET”
Special Elements Throughout the book, you’ll find some special elements that are designed to make it easy to locate important information or special tips to help you get the most out of Expression Web. When an important term is used for the first time, it will be printed in italics and defined close by. When instructions require you to enter text or values into a dialog, the data you are to enter will appear bolded. Finally, for those of you who find it faster to work without a mouse, hotkey indicators will be given for all menu commands. Simply press Alt and the underlined character.
6055_INTRO.qxp
11/30/2006
8:47 AM
Page xxxiii
How This Book Is Organized
Cross-References Nothing’s worse than a technical book that assumes you will read it from beginning to end like a novel. Most folks use technical books like reference materials, so this book makes generous use of cross-references. If a feature is mentioned that is covered elsewhere in the book, it will have a cross-reference, directing you to where you can find details on that topic.
Notes, Tips, Cautions, and Sidebars You’ll find numerous bits of information in these special elements. N OTE
Notes will include additional technical information or links to important information.
TIP Tips will provide you with information to make using a feature easier, or provide you with information you might not have considered.
CAUTION Caution elements are designed to prevent you from shooting yourself in the foot. They’ll point out problems so you can avoid them and save yourself time and possible headaches.
Read Sidebars for the Big Picture You won’t find sidebars in every chapter. They’re designed to give you more insight into a particular topic. If you’re the kind of person who wants to know all the details, you’ll find sidebars to be extremely valuable.
Troubleshooting The Troubleshooting section is where you can go when things don’t quite work out right. Chances are you’ll find the solution to your problem there. I’ve included notes in the chapters to direct you to these sections. This is what a Troubleshooting note looks like. Text here will describe a possible problem and tell you where to look for the solution.
In keeping with the concept of this book as a reference book, it includes a complete table of all the troubleshooting topics from the entire book. You’ll find this table after the Table of Contents at the front of the book.
xxxiii
6055_INTRO.qxp
xxxiv
11/30/2006
8:47 AM
Page xxxiv
Introduction
Lagniappe (lan yap’) n.,
a gift or bonus
I always include a special section at the end of each chapter that gives you some bonus material. I wanted this section to have a name with character—one that truly illustrated the purpose of the section. I chose Lagniappe as the name of this section. Lagniappe is an American French word that refers to a special gift given out of gratitude by a merchant at the end of a transaction. I felt that lagniappe was the perfect name for this section because it truly denotes the intent. (Thanks, Dad, for the recommendation.) I sincerely hope you enjoy this book and find it to be an invaluable resource as you build Web sites with Expression Web. I think you’ll find, as I have, that Expression Web is a huge departure from the proprietary nature of previous Microsoft offerings. Thank you for purchasing this book, and I hope you enjoy reading it as much as I enjoyed writing it for you!
Jim
6055_Pt01.qxp
11/30/2006
8:55 AM
Page 1
PART
An Overview 1
A Tour of Expression Web
3
I
6055_Pt01.qxp
11/30/2006
8:55 AM
Page 2
6055_01.qxp
12/7/2006
11:41 AM
Page 3
CHAPTER
A Tour of Expression Web
In this chapter The Expression Web Interface Working with Web Sites Tools for Creating Pages Powerful CSS Tools Site Optimization Scripting and Dynamic Content ASP.NET 2.0 Controls Data Access Features Lagniappe: Extending Expression Web
1
6055_01.qxp
4
12/7/2006
11:41 AM
Page 4
Chapter 1 A Tour of Expression Web
The Expression Web Interface 1
The true measure of any design tool is how well the interface contributes to your productivity. Expression Web’s interface is designed specifically to make access to tools easy while maintaining maximum real estate for the design surface.
Task Panes Most of the tools you will use in Expression Web are available in task panes, as shown in Figure 1.1. Figure 1.1 Task panes are a flexible and convenient way to access tools in Expression Web.
Task panes can be maximized by clicking the Maximize button, as shown in Figure 1.2. You can also drag a task pane to any edge of the Expression Web interface to dock it on that edge or drag it away from an edge to make it a floating task pane that can be positioned anywhere within the user interface. Task panes can also contain tabs so that multiple task panes can be present within the same window. Figure 1.3 shows the Manage Styles task pane with several tabs inside it for other task panes. To activate one of the other task panes, simply click the tab. Arrow buttons are provided when there isn’t enough room to display all tabs.
6055_01.qxp
12/7/2006
11:41 AM
Page 5
The Expression Web Interface
5
Figure 1.2 A task pane can be maximized to see more of the tools inside it.
Figure 1.3 Task panes are extremely flexible. In this case, there are several task panes combined into one window. Tabs are provided for each task pane.
1
6055_01.qxp
6
12/7/2006
11:41 AM
Page 6
Chapter 1 A Tour of Expression Web
TIP In Figure 1.3, notice that if there are more task panes that can fit in the available area, a jagged line appears on the right edge of the window to indicate that more task panes are available. You can access the additional task panes by clicking the small arrow buttons.
1
To add a task pane as a tab within another task pane, simply drag one task pane on top of another.
The Folder List Expression Web displays all the files and folders in the current Web site inside the Folder List task pane, as shown in Figure 1.4. You can quickly locate any file or double-click on a file to edit it.
Figure 1.4 The Folder List provides a view of all the files and folders in your Web site.
The Folder List has many of the same features you would expect in a file manager, such as creating new folders, adding files, deleting content, and so on. Right-click on a file or folder in the Folder List for a menu of options. The Folder List is similar to the Web Site tab in the main Expression Web window, but the Web Site tab allows for sorting and more customized views than the rudimentary view provided by the Folder List. CAUTION When deleting files from the Folder List, keep in mind that deleting some files (such as CSS files, templates, script files, etc.) can affect many other files. There is no Recycle Bin in Expression Web, so be careful!
6055_01.qxp
12/7/2006
11:41 AM
Page 7
The Expression Web Interface
7
The Design Surface The design surface (shown in Figure 1.5) is the area in Expression Web where you create your Web pages. The view of your Web site matches what you will see when you view the Web page in a browser.
Figure 1.5 The design surface in Expression Web provides a complete view of a Web page as it will appear in your browser.
Contrary to what some people believe, the design surface in Expression Web does not use Internet Explorer for rendering. It is a browser-independent rendering of your Web page.
The Status Bar The Status Bar (see Figure 1.6) in Expression Web is extremely informative. It contains tools that warn you when incompatible or invalid code is detected. It also provides information at a glance concerning the schema of the page, and so on.
1
6055_01.qxp
8
12/7/2006
11:41 AM
Page 8
Chapter 1 A Tour of Expression Web
Figure 1.6
1
The Status Bar is an important tool. It lets you know if you have bad code in your page and informs you of many properties of a page.
➔
For more information on the status bar, see “Using Web Page Views,” p. 127 (Chapter 8).
Working with Web Sites Expression Web can easily work with single pages, but to get the most out of it, you’ll want to create a Web site.
Creating Web Sites Expression Web can create Web sites on your local file system or on a remote file system or server. You can use the FrontPage Server Extensions if you wish (although they are not required), and you can also use FTP to both create a Web site and open an existing Web site.
➔
For more information on creating Web sites, see “Creating a Web Site,” p. 25 (Chapter 2).
Features for Teams Expression Web also provides features that make working with a team of Web designers more manageable. Features such as document checkin and checkout (see Figure 1.7) and workflow management (see Figure 1.8) are convenient when more than one designer is working on a Web site.
6055_01.qxp
12/7/2006
11:41 AM
Page 9
Working with Web Sites
9
Figure 1.7 Expression Web comes with a lightweight source control system that makes it more convenient to work in teams.
Figure 1.8 Documents can be assigned to individuals for review and Expression Web will track the review status.
➔
For more information on document checkin/checkout and workgroup features, see “Web Site Management and Reporting,” p. 67 (Chapter 4).
Web Site Reports Expression Web has 16 different reports that can be displayed for a Web site. Using these reports, you can easily identify problems such as slow pages, unlinked files, broken hyperlinks, and so on. You can also get a good view of your Web site in its entirety, as shown in Figure 1.9. Reports can be accessed by clicking the Reports tab at the bottom of the main Expression Web window as long as no page is currently open.
1
6055_01.qxp
10
12/7/2006
11:41 AM
Page 10
Chapter 1 A Tour of Expression Web
Figure 1.9
1
Expression Web can display many reports on your Web site. The All Files report is shown here.
➔
For more information on Web site reporting, see “Web Site Management and Reporting,” p. 67 (Chapter 4).
Publishing Web Sites Expression Web has a robust file publishing system that can use the file system, FTP, or HTTP via the FrontPage Server Extensions. You can choose to publish only those files that have changed since the last time you published or you can publish all files. The Remote Web Site view (see Figure 1.10) makes it easy to drag and drop between Web sites and get a good view of what files are out of sync between the remote site and the local site.
6055_01.qxp
12/7/2006
11:41 AM
Page 11
Tools for Creating Pages
11
Figure 1.10 Expression Web’s excellent file publishing features are powerful yet simple to use.
➔
For more information on publishing a Web site, see “Publishing a Web Site,” p. 41 (Chapter 3).
Tools for Creating Pages As a “what you see is what you get” (WYSIWYG) design tool, you can expect Expression Web to help you create standards-compliant Web sites with minimal effort. There are plenty of features available to help make that possible.
Powerful Table Tools Most Web sites use tables on at least a few pages. Expression Web has many powerful features to aid in creating and formatting tables. The Layout Tables feature (see Figure 1.11) makes it incredibly easy to create complex layouts with tables. Even after your layout is complete, you can modify it by simply dragging and dropping table cells.
1
6055_01.qxp
12
12/7/2006
11:41 AM
Page 12
Chapter 1 A Tour of Expression Web
Figure 1.11
1
Layout tables make creating complex layouts with tables easy.
➔
For more information on using tables and layout tables, see “Using Tables and Layout Tables,” p. 149 (Chapter 9).
Dynamic Web Templates To help you create a Web site with a consistent look and feel across all pages, Expression Web offers Dynamic Web Templates. You can create any number of Dynamic Web Templates and attach pages of your choice to each. Dynamic Web Templates also make it easy to make site-wide changes. Simply modify a Dynamic Web Template and save it. When you do, pages attached to that template will be updated automatically.
➔
For more information on using Dynamic Web Templates, see “Using Dynamic Web Templates,” p. 363 (Chapter 21).
Find and Replace A robust find and replace tool is a requirement. Expression Web not only includes a flexible and powerful tool for find and replace (see Figure 1.12), but it also incorporates regular expressions so that you can create complex queries.
6055_01.qxp
12/7/2006
11:41 AM
Page 13
Tools for Creating Pages
13
Figure 1.12 The Find and Replace tool will meet simple needs as well as complex ones. Regular expressions allow for complex searches.
➔
For more information on using the Find and Replace tool, see “Using Find and Replace,” p. 271 (Chapter 16).
Editing Tag Properties It’s never been easier to edit tag properties. The Tag Properties task pane (see Figure 1.13) shows you all the properties of a selected HTML element in one location. By bolding properties that have been set, this tool makes it simple to see how tags have been configured.
Figure 1.13 Tag properties are easy to examine and modify using the Tag Properties task pane.
➔
For more information on using the Tag Properties task pane, see “Editing Tag Properties,” p. 215 (Chapter 12).
1
6055_01.qxp
14
12/7/2006
11:41 AM
Page 14
Chapter 1 A Tour of Expression Web
Quick Tag Tools The Quick Tag Tools (see Figure 1.14) are an easy way to select a specific page element. You can also access properties of the selected element or modify HTML code directly.
1
Figure 1.14 Quick Tag Tools are the most convenient way to locate specific HTML elements. You can also modify properties of an element.
➔
For more information on using the Quick Tag Tools, see “Using the Quick Tag Tools,” p. 227 (Chapter 13).
Powerful CSS Tools Microsoft isn’t well-known for creating Web design tools with powerful Cascading Style Sheets (CSS) tools. Expression Web will certainly change that reputation. The CSS tools in Expression Web are arguably better than anything else available.
➔
For more information on using CSS with Expression Web, see “Creating Style Sheets,” p. 289 (Chapter 17).
Style Builder The Style Builder (see Figure 1.15) is an easy-to-use interface for styling page elements using CSS.
6055_01.qxp
12/7/2006
11:41 AM
Page 15
Powerful CSS Tools
15
Figure 1.15 Creating and modifying styles is surprisingly easy with the Style Builder.
Manage Styles Task Pane The Manage Styles task pane (see Figure 1.16) shows CSS styles in one location. You can modify styles, move styles around, and apply styles using this task pane. Figure 1.16 The Manage Styles task pane shows you all the styles available to you.
1
6055_01.qxp
16
12/7/2006
11:41 AM
Page 16
Chapter 1 A Tour of Expression Web
Apply Styles Task Pane 1
The Apply Styles task pane (see Figure 1.17) compliments the Manage Styles task pane nicely. One of the greatest features of the Apply Styles task pane is its ability to easily help you determine what CSS styles apply to particular page elements.
Figure 1.17 The Apply Styles task pane is a complimentary tool to the Manage Styles task pane.
Site Optimization Site optimization is an important part of developing any Web site. After you have developed your site, you’ll want to clean up any CSS code problems, fix any browser incompatibilities, and ensure that your site is compliant with the latest accessibility standards. Expression Web offers tools for all of those tasks.
Accessibility Reports There are two different standards for Web site compliancy: Section 508 and the Web Content Accessibility Guidelines, or WCAG. Learning all the ins and outs of each would be a challenging task. Fortunately, Expression Web can run reports that show you how your site fares with both standards. The Accessibility Reports feature (see Figure 1.18) will highlight pages in your site that don’t meet standards and give you the ability to correct problems before you deploy your Web site.
6055_01.qxp
12/7/2006
11:41 AM
Page 17
Site Optimization
17
Figure 1.18 The Accessibility Reports feature ensures that your Web site meets the latest accessibility standards.
➔
For more information on accessibility features in Expression Web, see “Accessibility Features in Expression Web,” p. 339 (Chapter 19).
Compatibility Reports Ensuring that your Web site will render properly in all browsers is a difficult task. Expression Web offers the Compatibility Reports feature (see Figure 1.19) so you can identify rendering problems before they affect your site visitors. Figure 1.19 The Compatibility Reports feature can help you avoid any rendering problems.
1
6055_01.qxp
18
12/7/2006
11:41 AM
Page 18
Chapter 1 A Tour of Expression Web
The compatibility reports allow you to check against a browser version, document type, and CSS standard.
1
➔
For more information on using compatibility reports in Expression Web, see “Designing for Compatibility,” p. 349 (Chapter 20).
CSS Reports To aid in cleaning up unused CSS or to simply run a report containing details on CSS usage, Expression Web offers the CSS Reports feature (see Figure 1.20). Figure 1.20 CSS reports can help you clean up your CSS before it causes a problem.
➔
For more information on CSS reports, see “Managing CSS Styles,” p. 311 (Chapter 18).
Scripting and Dynamic Content Expression Web offers many features that make it simple to add dynamic content to a Web site without writing any code.
Interactive Buttons Interactive Buttons (see Figure 1.21) are buttons that use JavaScript for a rollover effect. Creating Interactive Buttons is easy and there are numerous predesigned buttons from which to choose.
6055_01.qxp
12/7/2006
11:41 AM
Page 19
Scripting and Dynamic Content
19
Figure 1.21 If you need a simple button with rollover animation, an Interactive Button may be the perfect choice.
➔
For more information on using Interactive Buttons, see “Using Interactive Buttons,” p. 381 (Chapter 22).
Behaviors Behaviors are a collection of easily configurable actions that are implemented with clientside script. Using behaviors, you can easily create dynamic effects that would normally require a considerable amount of code, and you can do it without knowing anything about writing client script. Behaviors are accessed via the Behaviors task pane, as shown in Figure 1.22.
Figure 1.22 Expression Web provides a large collection of behaviors to automatically add dynamic effects to your Web site.
➔
For more information on using behaviors, see “Using Behaviors,” p. 393 (Chapter 23).
1
6055_01.qxp
20
12/7/2006
11:41 AM
Page 20
Chapter 1 A Tour of Expression Web
Layers Layers are commonly used in scripted, dynamic Web pages. Expression Web provides tools that allow you to create layers and manipulate them easily.
1
Layers are configured using the Layers task pane (see Figure 1.23).
Figure 1.23 Layers are a common design element in Web sites.
➔
For more information on using layers, see “Using Layers,” p. 439 (Chapter 25).
ASP.NET 2.0 Controls ASP.NET is Microsoft’s latest dynamic Web site technology, and Expression Web not only supports the use of ASP.NET pages, but it also provides quick access to ASP.NET 2.0 controls using the Toolbox, as shown in Figure 1.24. You can also configure controls within the design surface in Expression Web.
6055_01.qxp
12/7/2006
11:41 AM
Page 21
Data Access Features
21
Figure 1.24 Support for ASP.NET 2.0 controls is included in Expression Web. Controls can be added from the Toolbox.
There’s no need to worry about testing your ASP.NET pages because Expression Web ships with the ASP.NET Development Server, a Web server that can be used to test ASP.NET pages.
➔
For more information on ASP.NET development in Expression Web, see Part VII, “ASP.NET Development in Expression Web,” p. 483.
Data Access Features If your Web site is data-driven, Expression Web brings plenty of great features to the table. Using the power of ASP.NET, Expression Web allows you to create dynamic, data-enabled Web sites without writing any code. Data connections are configured in the Data Source Library task pane (see Figure 1.25) so they can be manipulated easily within the Expression Web interface.
1
6055_01.qxp
22
12/7/2006
11:41 AM
Page 22
Chapter 1 A Tour of Expression Web
Figure 1.25
1
Accessing data couldn’t be easier. Data connections are accessed via the Data Source Library task pane.
➔
For more information on accessing data in Expression Web, see “Accessing Data with ASP.NET 2.0,” p. 635 (Chapter 35).
Lagniappe (lan yap’) n.,
a gift or bonus
Extending Expression Web This chapter presented a brief overview of some of the best features of Expression Web. I think you’ll agree that there are plenty of great features in Expression Web, but there will certainly be many features that aren’t included and that people will want. Expression Web is an extensible product. That means that features can be added by thirdparty developers, and you can bet that plenty of add-ins and other additions to Expression Web will be available in the coming months. You can use Visual Basic for Applications to extend Expression Web yourself. If you’re interested in digging into how to customize Expression Web, check out Chapter 26, “Creating VBA Macros.” I’ll give you the basic knowledge necessary to build your own additions to Expression Web.
6055_Pt02.qxp
11/30/2006
8:57 AM
Page 23
PART
Web Sites in Expression Web 2
Creating a Web Site
3
Importing a Web Site
4
Web Site Management and Reporting
5
Publishing a Web Site
6
Using Personal Web Packages
25 41
83 93
67
II
6055_Pt02.qxp
11/30/2006
8:57 AM
Page 24
6055_02.qxp
12/7/2006
11:45 AM
Page 25
CHAPTER
Creating a Web Site
In this chapter What Is a Web Site? How Expression Web Maintains a Web Site Web Sites and Subsites Web Site Templates Types of Web Sites Troubleshooting Lagniappe: Deciding on a Web Site Type
2
6055_02.qxp
26
12/7/2006
11:45 AM
Page 26
Chapter 2 Creating a Web Site
What Is a Web Site? At first glance, that may seem like a patronizing question, but it’s not. I’m not talking about a Web site in the generic sense. I’m talking about a Web site as it relates to Expression Web. Expression Web is a capable Web page editor, but it’s really designed to work with a collection of related files. That collection of related files is what Expression Web refers to as a Web site.
2
Expression Web has many features that are designed with a Web site in mind. The reporting features of Expression Web, for example, are designed to provide information on an entire Web site. There are also numerous dialogs that allow you to take a specific action on all files in a Web site, and the Find and Replace feature in Expression Web is most robust when used with a Web site and not just a single Web page. A Web site can consist of Web pages, Cascading Style Sheets (CSS) files, script files, image files, and so on. It can also contain other folders for the purpose of organizing the files within the site.
How Expression Web Maintains a Web Site By default, Expression Web tracks files and folders in your Web site as well as other important information about the Web site using hidden files called metadata. These files are in hidden folders that begin with _vti and are located in the same folder as the rest of your Web site, as shown in Figure 2.1. Figure 2.1 The _vti folders shown here contain special configuration information that Expression Web uses to keep track of your Web site.
6055_02.qxp
12/7/2006
11:45 AM
Page 27
Web Site Templates
27
If you can’t see the _vti folders, see “Don’t See _vti Folders” in the “Troubleshooting” section of this chapter.
N OTE
The _vti folders are not visible in Expression Web’s folder list. Expression Web explicitly hides those folders from view so you don’t unintentionally modify them.
If you choose, you can configure Expression Web so it doesn’t use metadata to track your Web site’s files. However, it’s best to just allow Expression Web to keep metadata for your Web site. Doing so allows it to efficiently track changes to your Web site. However, if you choose not to use them, the functionality of the live Web site will not be affected.
➔
For more information on configuring your Web site settings, see “Web Site Management and Reporting”, p. 67 (Chapter 4).
Web Sites and Subsites Those of you who have used Microsoft FrontPage will no doubt be familiar with the concept of subsites. In FrontPage, it was possible to create a Web site within a Web site called a subsite. The subsite was treated as a separate Web site. For example, if you linked a style sheet to all files in the current Web site, files within the subsite would not be affected.
➔
For more information on style sheets and linking them to Web pages, see “Managing CSS Styles”, p. 311 (Chapter 18).
Expression Web allows you to create new Web sites within an existing Web site, but it does not understand the concept of a subsite. For example, if you create a new Web site within your current Web site, Expression Web will display the new Web site as a regular folder within the existing Web site. Any actions performed against all files in the Web site will affect the files in the existing Web site, including those in the newly created Web site. In other words, a Web site in Expression Web consists of all files in the directory structure regardless of how they got there or in what sequence they were created.
Web Site Templates The quickest way to get a Web site up and running is to use the templates provided in Expression Web. You access the list of templates by choosing New, Web Site, and selecting Templates in the New dialog as shown in Figure 2.2. These aren’t cheap-looking, stock templates. They are professionally designed templates that are customizable.
2
6055_02.qxp
28
12/7/2006
11:45 AM
Page 28
Chapter 2 Creating a Web Site
Figure 2.2 Expression Web comes with professionally designed, customizable templates so you can get a fully functional Web site up and running quickly.
2
N OTE
You don’t have to use a template to create a Web site. You can use the One Page Web Site option in the New dialog to create a Web site with one blank page, or you can create an empty Web site. An empty Web site is a convenient way to create a Web site from a folder of existing files. When you choose the Empty Web Site option, Expression Web will not add any files or folders to the location you specify.
The Web site in Figure 2.3 was created using one of Expression Web’s many Web site templates. The Web site uses a Dynamic Web Template so that changes can be made quickly if necessary.
➔
For more information on Dynamic Web Templates, see “Using Dynamic Web Templates”, p. 363 (Chapter 21).
The templates in Expression Web make heavy use of external style sheets, as shown in Figure 2.4. Because the look and feel of a Web site is implemented using CSS, it’s quite simple to use the robust CSS features in Expression Web to alter the look and feel of all pages in a site without much effort.
➔
For more information on working with CSS in Expression Web, see “Managing CSS Styles”, p. 311 (Chapter 18).
6055_02.qxp
12/7/2006
11:45 AM
Page 29
Types of Web Sites
29
Figure 2.3 Dynamic Web Templates allow you to make changes to a templated Web site by just updating the Dynamic Web Template.
2
Figure 2.4 The look and feel of this Web site is implemented using several CSS files, making it easy to modify.
Types of Web Sites When starting work on a Web site, you’ll need to decide which type of Web site to create. There are three types of Web sites to choose from: ■
Disk-based Web site
■
FTP (File Transfer Protocol) Web site
6055_02.qxp
30
12/7/2006
11:45 AM
Page 30
Chapter 2 Creating a Web Site
■
HTTP (Hyper-Text Transfer Protocol) Web site (or secure HTTP (HTTPS) with Secure Sockets Layer (SSL))
Disk-based Web Sites Disk-based Web sites are created at a specific disk location. The advantage to a disk-based Web site is that it can be created anywhere on your local file system or on a remote drive. You can also create disk-based Web sites on thumb drives, external hard drives, and so on.
2
Figure 2.5 shows the folder list of a disk-based Web site open in Expression Web. Note that the path to the Web site is a disk location on my C drive.
Figure 2.5 A disk-based Web site is created at a disk location. It can be a local drive, a removable drive, or a remote disk location.
A disk-based Web site is the most flexible kind of Web site because it allows the Web site to be located in any folder you wish. For example, if you receive files for a Web site from someone else, you can work with them as a Web site in Expression Web easily by simply copying the files into a folder on your computer and opening that folder as a Web site.
Creating a Disk-Based Web Site To create a disk-based Web site: 1. Select File, New, Web Site. 2. Enter the path for the new Web site, as shown in Figure 2.6, or click the Browse button to navigate to the desired location.
6055_02.qxp
12/7/2006
11:45 AM
Page 31
Types of Web Sites
31
3. Select the type of Web site you want to create. 4. Click OK to create the Web site.
Figure 2.6 To create a disk-based Web site, enter a disk path in the New dialog.
2
TIP If you tell Expression Web to create a Web site in a folder that doesn’t exist, the folder will be created for you automatically. There is no prompt when this happens.
You can create a disk-based Web site on a mapped drive or on a universal naming convention (UNC) share (\\server\share) as well. However, you’ll need to have the correct permissions so you can write to the remote location. Check with your system administrator if you’re not sure. If a Web site is already open in Expression Web and you’d like to add a new Web site to the existing site, check the Add to Current Web Site box. Expression Web will then add the new Web site to the existing Web site. This is a convenient way to add pages from a template to an existing Web site. If content already exists at the location you specify, Expression Web will add its metadata to the existing folders. If you’re not using Dynamic Web Templates or if you don’t want Expression Web to maintain links in your Web site, you may want to stop Expression Web from saving additional files in your Web site. If you don’t want Expression Web metadata in the folder, you can select Site, Site Settings and uncheck the Manage The Web Site Using
6055_02.qxp
32
12/7/2006
11:45 AM
Page 32
Chapter 2 Creating a Web Site
Hidden Metadata Files checkbox in the Site Settings dialog, as shown in Figure 2.7. When you uncheck that box and click OK, you’ll be asked if you’re sure you want to remove the metadata, as shown in Figure 2.8. If you click Yes, all the _vti folders and metadata therein will be removed. CAUTION If you’re using Dynamic Web Templates in your Web site, you will need to allow Expression Web to store metadata files in your Web site. You will also want to leave metadata enabled if you want Expression Web to correct links as pages are moved or renamed.
2
Figure 2.7 To get rid of the _vti folders and the metadata they contain, uncheck the option to store Web site information in metadata files in the Site Settings dialog.
CAUTION Don’t ignore the warning about removing metadata! Some of the information in the Web site’s metadata will be lost permanently if you choose to remove the metadata.
TIP Because a Web site can be created anywhere on the file system, it’s easy to lose track of where a particular Web site was created. The Recent Sites menu option on the File menu is a convenient way to locate a recently created Web site.
6055_02.qxp
12/7/2006
11:45 AM
Page 33
Types of Web Sites
33
Figure 2.8 When you choose to remove metadata files, Expression Web will warn you that you’ll lose some functionality.
2
CAUTION You can delete a Web site by right-clicking the site name in the Folder List and selecting Delete. However, be careful about deleting Web sites you’ve created on your file system. If you create a Web site in a location with existing files and folders and then delete that Web site, Expression Web will delete everything in that folder. Files and folders deleted by Expression Web are not moved to the Recycle Bin. They’re gone forever!
Expression Web can use the ASP.NET Development Server to test disk-based Web sites, allowing you to take full advantage of ASP.NET features that require a Web server.
➔
For more information on the ASP.NET Development Server, see “Using the ASP.NET Development Server”, p. 485 (Chapter 27).
FTP Web Sites FTP Web sites are usually located on a remote Web server. Most Web hosts provide FTP access so you can use FTP with your Web site. Most applications require that you develop a site locally and then FTP the files to the remote Web server. Expression Web takes a different approach in that it offers you the ability to work on an FTP site live on the Web server. To open an FTP Web site, select File, Open Site and enter the FTP path. When you click Open, Expression Web will ask you if you want to open the Web site live or copy it down to your local machine as shown in Figure 2.9.
6055_02.qxp
34
12/7/2006
11:45 AM
Page 34
Chapter 2 Creating a Web Site
Figure 2.9 Expression Web offers the option of opening an FTP site live on the Web server.
2
➔
For a more in-depth discussion of FTP, see “Publishing a Web Site”, p. 41 (Chapter 3).
CAUTION If you choose to work on your Web site live using FTP, keep in mind that any changes you make are immediately visible on the live Web site after you save the page.
Because FTP is offered by almost all hosts, it is a convenient way to create Web sites using Expression Web. However, FTP is usually not a secure method of accessing your Web site. When you enter your username and password for your FTP site, as shown in Figure 2.10, it is sent in clear text over the Internet, making it quite easy for someone to grab your username and password. Figure 2.10 When you create a Web site using FTP, you’ll need to enter your username and password. Be careful, because what you enter is sent in the clear over the Internet.
6055_02.qxp
12/7/2006
11:45 AM
Page 35
Types of Web Sites
35
CAUTION If you’re a notebook user with wireless capability, you probably use wireless Internet access in hotels when you travel. Be aware that most hotel networks are unsecured and anything you transmit and receive over the wireless network can be intercepted by anyone else in the hotel using the wireless network. When you are in a hotel and need to use their wireless network, use a Virtual Private Network (VPN) solution such as Hamachi (www.hamachi.cc) so you can securely access the network.
2 Creating an FTP Web Site To create an FTP Web site, enter the FTP path to your Web server in the New dialog as shown in Figure 2.11. You will likely be prompted for a username and password as shown in Figure 2.12. Figure 2.11 When creating a Web site using FTP, enter the FTP location. If you don’t know the correct location, your Web server administrator can help.
Figure 2.12 You will likely be prompted for a username and password when using FTP. Your Web server administrator can provide them if you don’t know them.
6055_02.qxp
36
12/7/2006
11:45 AM
Page 36
Chapter 2 Creating a Web Site
If you get an error message when creating a Web site using FTP that says Expression Web is unable to locate a server on Port 21, see “Cannot Locate Server Error Creating FTP Site” in the “Troubleshooting” section of this chapter. If you are repeatedly prompted for a username and password when creating a Web site using FTP, see “Repeatedly Prompted for Username and Password” in the “Troubleshooting” section of this chapter.
➔ 2
For information on how to configure Expression Web to save files to FTP servers, see “Creating Pages and Content”, p. 103 (Chapter 7).
HTTP Web Sites HTTP Web sites employ the same technology that is used when browsing your Web site. This method offers a greater selection of authentication methods for the Web server administrator. In a private network environment, Windows-integrated authentication can be used so that user credentials are securely exchanged. In addition, SSL can be used on a remote Web server so credentials are encrypted. Figure 2.13 shows the Folder List of an HTTP Web site open in Expression Web. Notice that the address of the Web site in Expression Web is the same address that would be used to browse this Web site in a Web browser. Figure 2.13 If your host has the FrontPage Server Extensions installed, you can open your Web site live using HTTP as shown here.
There’s one caveat to creating a Web site using HTTP. The Web server on which you are creating the site must be running the FrontPage Server Extensions.
➔
For a more in-depth discussion of the FrontPage Server Extensions, see “Publishing a Web Site”, p. 41 (Chapter 3).
Creating an HTTP Web Site To create an HTTP Web site, enter the URL for the Web site in the New dialog as shown in Figure 2.14. If necessary, enter your username and password.
6055_02.qxp
12/7/2006
11:45 AM
Page 37
Types of Web Sites
37
Figure 2.14 When creating a Web site using HTTP, use the same uniform resource locator (URL) that you would use to browse the Web site in your Web browser.
2
➔
For more information on the FrontPage Server Extensions and WebDAV, see “Publishing a Web Site”, p. 41 (Chapter 3). If you are continually prompted for a username and password when creating a Web site using HTTP, see “Repeatedly Prompted for Username and Password” in the “Troubleshooting” section of this chapter.
If Expression Web doesn’t find a Web server at the location you specify, it will respond with a dialog telling you that you cannot create a site at that location, as shown in Figure 2.15. Strangely enough, that same dialog will recommend that you try creating a subsite. However, if there truly isn’t a Web server at the URL, any attempt to create anything will be met with a dialog informing you that no such server exists, as shown in Figure 2.16. Figure 2.15 If there is a problem creating a site at the URL you specify, Expression Web will recommend that you try creating a subsite.
Figure 2.16 If there is no Web server at the location you specify when creating a subsite, Expression Web will notify you.
6055_02.qxp
38
12/7/2006
11:45 AM
Page 38
Chapter 2 Creating a Web Site
If you attempt to create a subsite on an existing server that does not either have the FrontPage Server Extensions installed or support creating Web sites via WebDAV, Expression Web will notify you with the dialog shown in Figure 2.17. Figure 2.17
2
If Expression Web cannot create a site on an existing Web server, you’ll be met with a dialog informing you of possible causes for the failure.
Creating a Site Using SSL If you require additional security and your server is configured to allow SSL traffic, you can create a Web site using SSL by checking the Use Encrypted Connection (SSL) checkbox, as shown in Figure 2.18. Figure 2.18 You can create a Web site using SSL by checking the Use Encrypted Connection (SSL) checkbox. Your server must be configured to allow HTTPS traffic.
The Use Encrypted Connection (SSL) checkbox
When you check the Use Encrypted Connection (SSL) checkbox, Expression Web will automatically change the URL you have specified if necessary so it uses HTTPS instead of HTTP. When this option is selected, any data sent over the network (including your username and password) will be encrypted.
6055_02.qxp
12/7/2006
11:45 AM
Page 39
Troubleshooting
N OTE
SSL is a technology that was developed by Netscape many years ago to allow for the secure exchange of information across the Internet. To use SSL, your Web server administrator needs to configure the Web server appropriately.
Troubleshooting Don’t See _vti Folders I have Expression Web configured to use metadata files to keep track of my content, but when I open the disk path where my site is located, I don’t see any _vti folders. The _vti folders are hidden. The default settings in Windows won’t show you hidden folders. To show hidden files and folders, follow these steps for Windows Vista:
1. Click Start and click Computer. 2. Click the Organize button and select Folder and Search Options. 3. Click the View tab. 4. Select the Show Hidden Files And Folders radio button and click OK. In Windows XP or Windows 2003 Server:
1. Click Start and click My Computer. 2. Select Tools, Folder Options. 3. Click the View tab. 4. Select the Show Hidden Files And Folders radio button and click OK. You should now be able to see the _vti folders.
Cannot Locate Server Error Creating FTP Site I’m trying to create a site at an FTP location. When I click OK to create the site, Expression Web tells me it can’t find a server on Port 21. If Expression Web cannot locate an FTP site, it’s likely that you mistyped it. However, there are other reasons that this might fail as well. Try opening a command prompt and pinging the FTP site. For example, the following command will test for the existence of an FTP server at jimcosoftware.com: ping ftp.jimcosoftware.com
If you get no reply from the ping, it means you aren’t getting to the server. Check your Internet connection by browsing to a known Web site. If that works and you still can’t access the FTP site, check with the server administrator or your hosting company.
39
6055_02.qxp
40
12/7/2006
11:45 AM
Page 40
Chapter 2 Creating a Web Site
Repeatedly Prompted for Username and Password I’m trying to create a Web site on a remote server. When I enter my username and password, the dialog asking for my credentials just keeps popping back up. This is almost certainly caused by a typographical error in the username and/or password. Assuming you aren’t mistakenly entering the wrong case due to your Caps Lock key being engaged, carefully retype your username and password. If the server still won’t accept them, try contacting your hosting company or server administrator.
Lagniappe (lan yap’) n.,
a gift or bonus
Deciding on a Web Site Type As you’ve seen in this chapter, there are quite a few choices when it comes to deciding on a Web site type. Deciding which type is best for your Web site is often a confusing endeavor. Until recently, Webs using the Microsoft platform were limited in their choice of Web site types when it came to remote Web sites. If you wanted full functionality, you were restricted to using the FrontPage Server Extensions. Sure, you could use FTP if you desired, but then you couldn’t work with a remote site live if you did. Expression Web (and the Visual Studio 2005 family of products) has changed all of that, and there’s a general tendency by Microsoft these days to shift away from a reliance on the FrontPage Server Extensions. You can now use FTP just as easily as you used HTTP in earlier products. In my opinion, FTP is the best solution for today’s Web sites, unless you have a requirement for SSL. FTP is well-suited to fast file transfers, you have the ability to use many tools other than Expression Web to manage your files (including the FTP command-line client that comes with Windows), and unlike the FrontPage Server Extensions option used when creating HTTP Web sites, FTP will be around for many years to come. Disk-based Web sites are also a perfectly valid option, especially if you are creating your Web site locally and then publishing it to the live server at a later time. One of the greatest advantages of a disk-based Web site is that it can easily be moved from one location to another (or stored on a removable drive) without breaking anything. However, if you are using a server technology such as ASP or PHP, a disk-based Web site is not a good choice because you will be unable to test your server-side code. N OTE
ASP.NET can be tested in a disk-based Web site using the ASP.NET Development Server. For more information on the ASP.NET Development Server, see “Using the ASP.NET Development Server,” Chapter 27.
If given the choice between using a technology that’s being phased out and one that has proven to be a long-lived technology, I’ll choose the one with greater longevity every time.
6055_03.qxp
12/7/2006
11:46 AM
Page 41
CHAPTER
Publishing a Web Site
In this chapter What Is Publishing? Server Options for Publishing Publishing Content Troubleshooting Lagniappe: Hosting Your Web Site
3
6055_03.qxp
42
12/7/2006
11:46 AM
Page 42
Chapter 3 Publishing a Web Site
What Is Publishing? The best Web site is worthless unless people can see it. You can be the cream of the Web designer crop, but if no one can access your site, it doesn’t matter a bit. Therefore, you have two choices when it comes to designing a Web site with Expression Web: You can either design the site live on a Web server that hosts your domain or you can create your site offline and then publish it to a live server.
3
Developing a site offline and then publishing it to a live server is always the preferred choice. If you develop directly against a live site, any problems you encounter while developing your site (and there will be some) will be visible to everyone who visits your site. You could, of course, put up one of those graphics that you see on many sites that say “Under Construction,” but the way I see it, if a site is under construction, it should be on a development computer, not on a live Web server. After all, an artist doesn’t paint a masterpiece while the canvas hangs on a museum wall. A professional Web developer will always develop a site offline and then publish it to the Internet or intranet. Publishing is simply the process of copying Web content from one place to another. It might be content copied from one directory to another on the same machine, one Web site to another on the same machine, or from one machine to a different machine. You can also publish content to any of the numerous storage devices available today, such as a removable hard drive, a Universal Serial Bus (USB) key, or even a portable music player! If you can copy a file to a device or location, you can publish to it. TIP It might sound strange to publish a Web site to a portable music player, but it’s actually a convenient way to carry copies of your Web site from place to place. I’ve got copies of several of my Web sites on my iPod, and it’s been a great convenience to be able to access the files anytime I need them.
Server Options for Publishing As shown in Figure 3.1, Expression Web offers many options for publishing content. ■
FrontPage Server Extensions (via HTTP or HTTPS)
■
WebDAV
■
FTP
■
File System
6055_03.qxp
12/7/2006
11:46 AM
Page 43
Server Options for Publishing
43
Figure 3.1 You’ll choose from one of four different publishing options in the Remote Web Site Properties dialog.
3
One of these methods is sure to be suitable for your purposes. In fact, you’ll likely have a choice between a couple of them, so you’ll need to understand the pros and cons of each option to make an educated decision when the time comes to publish your site.
FrontPage Server Extensions The FrontPage Server Extensions are a set of files that is installed onto a Web server to add functionality to a Web site. The FrontPage Server Extensions have been around for many years. Perhaps the reason why they are so pervasive is that most hosting companies offer support for them. Additionally, Microsoft FrontPage, Microsoft’s legacy application for developing Web sites, is designed to use the FrontPage Server Extensions for publishing content.
6055_03.qxp
44
12/7/2006
11:46 AM
Page 44
Chapter 3 Publishing a Web Site
When to Choose the FrontPage Server Extensions There will be times when you won’t have any choice but to use the FrontPage Server Extensions. If you can’t connect to a remote server using one of the other connectivity methods provided by Expression Web, you’ll have to use the FrontPage Server Extensions. You’ll also need to use the FrontPage Server Extensions if you are using an Expression Web Web component that requires FrontPage Server Extensions for functionality on the server. Outside of those situations when you have no other choice, I recommend that you do not use the FrontPage Server Extensions. Microsoft has no plans to continue development of them and any bugs that are discovered will not be fixed unless they are deemed to cause a severe security risk.
N OTE As of this writing, IIS 7 (still in beta) does not support the use of the FrontPage Server Extensions. Therefore, it is not possible to publish via HTTP to IIS 7. Please refer to the Que Web site at http://www.quepublishing.com for possible updated information on IIS 7 when it releases.
3 CAUTION There are some Expression Web Web components that rely on the FrontPage Server Extensions to operate. If you are using any of these components, you will need to choose the FrontPage Server Extensions option when publishing.
The FrontPage Server Extensions use either the HTTP or secure HTTP (HTTPS) protocol to publish site content. These same protocols are used when browsing Web sites. Because the FrontPage Server Extensions use the same protocols as your Web browser, they can easily publish to remote servers even if you are behind a firewall. Almost all firewalls are configured to allow HTTP and HTTPS traffic to freely pass through. The FrontPage Server Extensions take advantage of that fact when publishing content. If you get prompted multiple times for a username and password when publishing with the FrontPage Server Extensions, see “Username and Password Not Accepted” in the “Troubleshooting” section of this chapter.
The Remote Web Site Properties dialog shown in Figure 3.2 displays the options available when choosing to publish a Web site using the FrontPage Server Extensions.
6055_03.qxp
12/7/2006
11:46 AM
Page 45
Server Options for Publishing
45
Figure 3.2 The FrontPage Server Extensions options allow you to specify a URL using HTTP. If you require a secured connection, SSL is also available.
3
After the FrontPage Server Extensions have been installed on the Web server, they must be configured for your Web site by an administrator of the Web server. During the configuration process, the FrontPage Server Extensions add folders to your Web site that begin with _vti. These folders contain configuration information that the FrontPage Server Extensions use to keep track of changes to your Web site. N OTE “VTI” stands for Vermeer Technologies Incorporated, the company from which Microsoft purchased the first version of FrontPage. Ironically, references to that original company still remain in Microsoft products even after the discontinuation of FrontPage.
The FrontPage Server Extensions offer functionality at both design-time and runtime. In addition to offering the ability to connect to remote Web sites and publish content, they also provide components that generate HTML and client script while you are developing the site, as well as components that provide special functionality when the Web site is browsed.
6055_03.qxp
46
12/7/2006
11:46 AM
Page 46
Chapter 3 Publishing a Web Site
CAUTION The FrontPage Server Extensions are notorious for causing configuration abnormalities on a system to surface, particularly in the area of Registry permissions. If you get errors when installing or configuring the FrontPage Server Extensions, be very cautious when troubleshooting them. As I was writing this chapter, I had to restore my machine from a disk image on numerous occasions due to problems caused by the FrontPage Server Extensions. Because I had never experienced a problem like this in the past, I suspect that Windows security updates over the past year or so conflicted somehow with the FrontPage Server Extensions.
To publish with the FrontPage Server Extensions, you will need to have the FrontPage Server Extensions installed on the remote Web site. It is not necessary to install the FrontPage Server Extensions on the local Web site.
3
If you get an error telling you that the FrontPage Server Extensions are not installed when publishing, see “FrontPage Server Extensions Aren’t Installed” in the “Troubleshooting” section of this chapter.
When you publish with FrontPage Server Extensions, you will usually publish to the same address that you would use when browsing the remote Web site in your Web browser. For example, if I were publishing a local copy of my Web site from c:\WebSites\JimcoSoftware to my public Web site using the FrontPage Server Extensions, I would enter a destination address of http://www.jimcosoftware.com.
WebDAV WebDAV is really just an extension of the HTTP protocol, and therefore shares many of the same benefits offered by the FrontPage Server Extensions. In fact, the options available in the dialog for publishing a Web site in Expression Web via WebDAV are identical to those available when publishing using the FrontPage Server Extensions. There are many benefits to using WebDAV. ■
Firewalls are generally not an issue due to the fact that WebDAV extends HTTP, the protocol used when browsing the Web.
■
WebDAV supports strong authentication so you can ensure the security of your data.
■
WebDAV supports encryption for another layer of protection for your data.
■
WebDAV includes support for file versioning and resource locking so that one user won’t overwrite another user’s work.
WebDAV is already a part of your operating system. In fact, when you create a shortcut to an HTTP location in My Network Places, Windows uses WebDAV to create that link if the FrontPage Server Extensions are not installed on the remote server.
6055_03.qxp
12/7/2006
11:46 AM
Page 47
Server Options for Publishing
47
N OTE Don’t let the fact that Microsoft doesn’t seem to embrace WebDAV convince you that it’s not an important Web standard. There are many in the technical community who seriously believe that WebDAV will eventually replace all the publishing protocols in wide use today.
To use WebDAV to publish your Expression Web Web site, your hosting company or system administrator must provide support for WebDAV. If you are publishing with WebDAV and you receive an error saying that the FrontPage Server Extensions are not installed, see “FrontPage Server Extensions Are Used Instead of WebDAV” in the “Troubleshooting” section of this chapter.
FTP FTP has been around a long time and is widely used by many Web developers for transferring Web content. In fact, the first FTP standard appeared in 1971, long before the advent of the World Wide Web. FTP is generally not secured. That means that it’s possible for someone to intercept your username and password. There are actually several options available for secure FTP. However, Expression Web does not support any of these methods. If you want to use secure FTP, you’ll need to use a third-party FTP client. FTP is a reliable method of transferring files between computers. However, there are some things to keep in mind when using FTP. Notice in Figure 3.3 that there is a checkbox in the Expression Web dialog that enables what’s referred to as passive FTP. There are two types of FTP connections: passive FTP and active FTP. If you experience trouble when using FTP (especially when publishing through a firewall), enabling passive FTP will usually resolve the issue. If you publish content using FTP but the content doesn’t show up on the remote Web site, see “Content Missing after Publishing” in the “Troubleshooting” section of this chapter.
File System The File System method of publishing is used most often in situations where both the local and remote locations are on the same network. For this method to work, you must have a connection to the remote server that allows for access via a UNC (Universal Naming Convention) path. A UNC path consists of a server name and a share name using the syntax \\server\share. It’s also possible to set up a mapped drive so that you can refer to a UNC share using a drive letter. UNC paths and mapped drives use the same underlying architecture.
3
6055_03.qxp
48
12/7/2006
11:46 AM
Page 48
Chapter 3 Publishing a Web Site
Figure 3.3 Expression Web supports both passive and active FTP. One of the two will work fine in almost all cases.
3
CAUTION Mapped drives are user-specific. If you log into a computer and map a drive, other users who log into that computer will not see that mapped drive. If you map a drive with the intention of allowing other users of the same computer to publish to the mapped drive, keep in mind that you will need to map the drive for each user individually.
Publishing Content Now that you have a rundown of all the methods available when publishing a Web site in Expression Web, let’s look at how to publish content to a Web site.
Configuring Publish Options After you’ve opened the Web site you want to publish, select File, Publish Site to display the Remote Web Site Properties dialog. You’ll then need to select the method you’ll use for publishing and enter the location for the remote Web site.
6055_03.qxp
12/7/2006
11:46 AM
Page 49
Publishing Content
49
If you’d like to review or change the options for publishing your Web site, click the Publishing tab. As shown in Figure 3.4, you can choose to publish only those files that have changed since the last publish or you can choose to publish all files. Figure 3.4 Expression Web lets you choose whether to publish everything or just those files that have changed since the last time you published.
3
By default, Expression Web publishes only those pages that have changed since the last time you published. It uses one of two methods to determine which files need to be published. ■
Determine changes by comparing source and destination sites—By default, Expression Web stores information on all the files in your Web site. If you choose this option, Expression Web will use that information to determine what files need to be published.
■
Use source file timestamps to determine changes since last publish—This method simply uses the timestamp on the files to determine what should be published. This method may not be as reliable as the first option.
Expression Web also gives you the option of whether or not to include subsites. Even though Expression Web will display subsites in the folder list of your Web site, it will only
6055_03.qxp
50
12/7/2006
11:46 AM
Page 50
Chapter 3 Publishing a Web Site
publish the main site by default. If you want to publish the main site and all the subsites, you’ll need to check the Include Subsites checkbox.
➔
For more information on subsites, see “Web Sites and Subsites”, p. 27 (Chapter 2).
If you’d like Expression Web to create a log of your publish operation, check the Log Changes During Publish checkbox. Expression Web will then create an HTML file in your Temporary Internet Files folder, as shown in Figure 3.5. You can view this file by clicking View Your Publish Log File in the Copy Web Site view after you have published the Web site. Figure 3.5
3
The Expression Web publish log is easy to filter using the Show Only dropdown. If you’d like to keep the log, save it after publishing the site.
Optimizing HTML during Publishing In addition to publishing your files, Expression Web can also optimize your HTML. The main purpose of this feature is to remove code that may not be needed on the remote Web server. You can configure what type of HTML optimization takes place using the Optimize HTML tab on the Remote Web Site Properties dialog, as shown in Figure 3.6.
6055_03.qxp
12/7/2006
11:46 AM
Page 51
Publishing Content
51
Figure 3.6 Expression Web can remove any unnecessary code so that your pages are as small as possible for better load times, but don’t expect miraculous increases in speed with this feature.
3
There are many options available for HTML optimization. ■
All HTML comments—Removes all HTML comments in code. HTML comments are designated by the characters. The closing comment character may also simply be —>.
■
Dynamic Web Template comments—Expression Web adds comments to pages that use Dynamic Web Templates so that editable regions can be identified. This option removes those comments.
■
Layout Tables and Cell Formatting comments—Expression Web adds comments to layout tables and cells. This option removes those comments.
■
Script comments—This option removes comments added to client-side scripts.
■
All other HTML comments—This option removes comments that are not covered in any of the previous categories.
■
HTML leading whitespace—Removes the leading whitespace from your lines of code.
6055_03.qxp
52
12/7/2006
11:46 AM
Page 52
Chapter 3 Publishing a Web Site
■
HTML all whitespace—Removes all HTML whitespace, including whitespace between lines.
■
Web Designer Tracing Image and Interactive Button attributes—Removes attributes that are added for the purpose of tracing images and also removes interactive button attributes. These attributes are used only for editing purposes, so they aren’t needed on live files.
■
Generator and ProgID tags—Removes the Generator and ProgID Meta tags that are added by Expression Web. If you’ve made changes to the Optimize HTML settings and you notice no effect on your HTML code, see “HTML Optimization Doesn’t Affect Web Files” in the “Troubleshooting” section of this chapter.
The Copy Web Site View 3
After you’ve configured all the publishing options for your Web site, click the OK button. If the remote Web site that you specify doesn’t exist, Expression Web will prompt you to create it, as shown in Figure 3.7. Expression Web will create a Web site with an images folder and a _private folder. No other files or folders are created in the remote Web site until you publish files to it. Figure 3.7 Expression Web prompts you to create a new Web site if the remote Web site you specify doesn’t exist.
After the remote Web site has been created, the Copy Web Site view is activated, showing the local Web site on the left and the remote Web site on the right. From the Copy Web Site view, you can choose from one of three different publish settings: ■
Local to remote—File are copied from the local Web site on the left to the remote Web site on the right.
■
Remote to local—Files are copied from the remote Web site on the right to the local Web site on the left.
■
Synchronize—Changed files are synchronized between the two sites. This option is only enabled when the Changed Pages Only option is enabled in the Remote Web Site Properties dialog.
Expression Web displays an icon next to pages in the Copy Web Site view to indicate what will happen when the Web site is published, as shown in Figure 3.8. These icons are not displayed for folders, but if you select a folder, Expression Web will display the files within the folder along with appropriate icons indicating whether or not the files will be published.
6055_03.qxp
12/7/2006
11:46 AM
Page 53
Publishing Content
53
Figure 3.8 Expression Web displays arrows next to files that will be copied when the Web site is published. The direction of an arrow indicates the direction of the file copy that will take place on that particular file.
3
Icons indicating copy action
Because I have chosen the option to synchronize the Web sites, Figure 3.8 indicates that default.htm will be copied to the remote Web site and master.dwt will be copied to the local Web site when the site is published. You can also use the arrow buttons that appear between the local Web site and remote Web site views to publish files and/or folders. If you’d like to just copy a few files (or just one), you can simply drag and drop them between the two views. If your Web site consists of just a few files, it’s pretty easy to tell which files will be published using the Copy Web Site view. However, as your Web site increases in size, it becomes more difficult to manage. If your Web site contains a lot of folders like the one shown in Figure 3.8, you’re not going to be able to easily see what will happen when you publish. Fortunately, Expression Web offers the ability to filter the Copy Web Site view using the View dropdown, as shown in Figure 3.9. Confusing Web Site Terminology Expression Web refers to the Web site open in Expression Web as the local Web site; the Web site you are publishing to is called the remote Web site. However, the terms “local Web site” and “remote Web site” are misleading. The local Web site isn’t necessarily located on the local machine, nor is the remote Web site necessarily located on a remote machine. For example, if you are publishing your Web site from the Internet to your home computer, the local Web site would be located on a remote computer on the Internet, while the remote Web site would be your home computer. Keep this in mind when working with your Web sites. Just remember that the Web site that is open in Expression Web is always referred to as the local Web site and you should be fine.
6055_03.qxp
54
12/7/2006
11:46 AM
Page 54
Chapter 3 Publishing a Web Site
Figure 3.9 You can quickly filter the Copy Web Site view using the View dropdown. In this case, I’ve decided to view all the files that will be published. Notice that Expression Web does not display any folders in this view.
3
Troubleshooting HTTP Publishing Rule number 1 of publishing is this: If you’re going to have a problem with a hosting company, it’s going to happen when you are publishing your content. Most hosting companies do a great job of ensuring that people can always browse your site, but publishing is more complex and requires a more precise configuration. The second rule of publishing is that most hosting companies will deny responsibility when it comes to publishing problems. That means that you are going to have to do your own troubleshooting. TIP Many hosting companies that support the FrontPage Server Extensions for publishing will also blame them for problems while publishing. This is another reason for choosing FTP over the FrontPage Server Extensions if you can. FTP problems are uncommon, but if you do have them, almost all hosting companies are competent in troubleshooting them.
To troubleshoot publishing problems, you’re going to need to install software that can capture information between your computer and the remote computer. The two tools I use for doing this are Ethereal and Fiddler, both of which are free tools and available for download on the Internet.
6055_03.qxp
12/7/2006
11:46 AM
Page 55
Publishing Content
55
N OTE We’ll only cover HTTP publishing in this section. However, if you’re using WebDAV or the FrontPage Server Extensions to publish, the information presented here will be helpful in troubleshooting any problems that might occur.
Ethereal (see Figure 3.10) is a network protocol analyzer. That’s a fancy way of saying that it captures all traffic that flows to and from the network card on your computer. It features a great filter so that you can zero in on just the traffic you want to see. When dealing with Expression Web publishing issues, you’re going to be interested in HTTP or FTP traffic. Ethereal is available from www.ethereal.com. N OTE None of the techniques I discuss in this section will work if you are using SSL (HTTPS) because all traffic that flows over an SSL connection is encrypted. You’d be able to see the traffic, but you wouldn’t be able to decipher it into anything meaningful.
The other tool I use is Fiddler. Fiddler (see Figure 3.11) is an HTTP debugging proxy. That’s a fancy way of saying that it logs all HTTP traffic on your machine. Fiddler has the added benefit of being able to log local traffic that doesn’t travel over your network card. Fiddler is available from www.fiddlertool.com. Figure 3.10 Ethereal is a very powerful network capture tool that is free and available via download from www.ethereal.com. Here I’ve captured the network traffic while opening a Web site using the FrontPage Server Extensions.
3
6055_03.qxp
56
12/7/2006
11:46 AM
Page 56
Chapter 3 Publishing a Web Site
Figure 3.11 Fiddler targets HTTP traffic specifically. It’s a great tool to use when troubleshooting publishing using HTTP.
3
HTTP Authentication Traffic Most of the problems you’ll encounter during publishing are authentication problems, meaning that the remote server doesn’t accept your username and password. To troubleshoot this type of problem, you need to first understand what happens when things are working correctly. To publish a Web site, you need to be able to write content to the remote Web site. For the Web server to verify that it should allow you to write to the content of the remote Web site, it needs to authenticate you. It does that by sending a 401 status code in response to your attempt to publish. TIP A 401 status code means that access was denied. You can see a full list of HTTP status codes at http://support.microsoft.com/kb/318380/en-us.
The client (in this case, Expression Web) responds to the 401 status code in one of two ways, depending on the type of authentication being used. You’ll generally be using one of two authentication methods: ■
Windows Integrated Authentication—Windows Integrated authentication is authentication that’s built into Windows itself. If your Web server indicates that it can accept Windows Integrated authentication, Expression Web will attempt to authenticate you
6055_03.qxp
12/7/2006
11:46 AM
Page 57
Publishing Content
57
using the user logged onto your computer. If that fails, you’ll be prompted for a username and password. ■
Basic Authentication—Basic authentication will always prompt for a username and password.
Windows Integrated authentication uses encrypted data to authenticate you to the remote Web site. In fact, one of the benefits of Windows Integrated authentication is that it’s a secure authentication mechanism. However, it was not designed to work on the Internet. In many cases, if your host is using Windows Integrated authentication, you’ll be repeatedly prompted for a username and password and publishing will fail. Basic authentication doesn’t use encrypted credentials. Instead, basic authentication’s Base64 encodes your username and password before sending it across the wire. Base64 encoding is a common encoding method used to transmit data across networks. It was actually developed for sending binary data, but it works well for sending text as well. TIP In most cases, if Windows Integrated authentication fails, the Web server will automatically try basic authentication. Chances are you won’t even know if and when this happens.
It’s important to keep in mind that Base64 encoding provides nothing in the way of security. A quick Google search will turn up scores of utilities for decoding Base64-encoded data. You shouldn’t think of this as a flaw in the method used by basic authentication. It’s actually the way it was designed to work. N OTE Windows Integrated authentication is naturally Windows-specific. Basic authentication, however, is used in non-Windows Web servers such as Apache.
Using Fiddler to Troubleshoot HTTP Publishing Errors Fiddler is a convenient tool to use for troubleshooting HTTP publishing because it targets only HTTP traffic. To start Fiddler, select it from the Start menu in Windows or use the Fiddler button in Internet Explorer, as shown in Figure 3.12.
3
6055_03.qxp
58
12/7/2006
11:46 AM
Page 58
Chapter 3 Publishing a Web Site
Figure 3.12 Fiddler installs a button into Internet Explorer so you can always access it quickly when you need it.
3
The Fiddler Toolbar button
After you start Fiddler, it will begin capturing HTTP traffic, as shown in Figure 3.11. At the right side of the Fiddler interface, you can see different views of the data. By clicking the Session Inspector tab, you can view the local computer traffic in the top half of the display and the remote traffic in the bottom half. A series of buttons appears above both panels, allowing you to change the format of the data that is displayed. When troubleshooting publishing issues, it’s probably most helpful to click the Headers button for both panes, as shown in Figure 3.13. You can use the information that Fiddler provides to help in troubleshooting publishing issues by analyzing the authentication information. You want to look for the 401 status sent by the remote server and select the line just below it in Fiddler, as shown in Figure 3.14. You should then see your local machine respond with the authorization information. If you see that you are not sending authorization information to the server, you’ve got a problem on your end. However, if you see that you are sending information to the server, you’re either sending the wrong credentials or there’s a problem somewhere other than on your end.
6055_03.qxp
12/7/2006
11:46 AM
Page 59
Publishing Content
59
Figure 3.13 Fiddler can break local and remote traffic into two panes. In this case, you can see that the server is using basic authentication.
Using Basic Authentication
Using Ethereal to Troubleshoot HTTP Publishing Errors Ethereal is a much more powerful tool than Fiddler because it will capture all network traffic on your computer. However, with that power comes additional complexity. For that reason alone, I usually choose Fiddler over Ethereal for simple troubleshooting, but you may find that Ethereal offers features that are useful to you. TIP Because Ethereal captures all network traffic, it can also be used to troubleshoot FTP publishing. Fiddler only captures HTTP traffic and cannot aid in troubleshooting FTP.
To use Ethereal, select Capture, Interfaces to display a list of network interfaces that you can capture. Browse to any Web site and look for the interface that shows an increasing number of packets (as shown in Figure 3.15) and then click the Capture button. After you’ve started the capture, begin your publishing in Expression Web. At the point when you encounter a problem, switch back over to Ethereal and click the Stop button in the capture dialog, as shown in Figure 3.16.
3
6055_03.qxp
60
12/7/2006
11:46 AM
Page 60
Chapter 3 Publishing a Web Site
Figure 3.14 Fiddler will clearly show when you are sending authorization information to the remote server.
401 sent by remote server
3
Authorization information sent by local computer
Figure 3.15 You will want to capture the interface that is connected to the Internet. Look for the interface with an increasing number of packets.
Number of packets
6055_03.qxp
12/7/2006
11:46 AM
Page 61
Publishing Content
61
Figure 3.16 The capture dialog shows the packet statistics during a capture. Click the Stop button to end the capture process.
3
If Ethereal doesn’t capture any network traffic, see “Ethereal Captures Nothing” in the “Troubleshooting” section of this chapter.
Ethereal captures all traffic on the network, so there’s a good chance that it will have captured a significant amount of data that is not related to your work in Expression Web. Fortunately, you can filter the captured data easily by simply entering http in the Filter textbox, as shown in Figure 3.17. The data collected in Ethereal will be in a similar format to the data collected in Fiddler. Once again, you want to look for Expression Web’s response to the 401 status code sent by the Web server. (I’ve highlighted the 401 status code in Figure 3.17.) Another powerful feature of Ethereal is its ability to display a conversation between Expression Web and the remote Web server in a readable format. By right-clicking on any of the captured data and choosing Follow TCP Stream from the menu, Ethereal will display the entire conversation, as shown in Figure 3.18. You can even save this information and send it to your host to demonstrate the problem.
6055_03.qxp
62
12/7/2006
11:46 AM
Page 62
Chapter 3 Publishing a Web Site
Figure 3.17 Filtering in Ethereal is a simple task using the Filter textbox.
The Filter textbox
3
Figure 3.18 An enormous benefit to Ethereal is its ability to display captured data as an entire conversation.
By using the data captures from Ethereal or Fiddler, you should have all you need to isolate publishing problems and possibly convince a stubborn host that the problem isn’t on your end.
6055_03.qxp
12/7/2006
11:46 AM
Page 63
Troubleshooting
Troubleshooting Username and Password Not Accepted I’m publishing my site to my host and my username and password aren’t being accepted. I know they’re right and I know that my host has the FrontPage Server Extensions installed. What could be wrong? The FrontPage Server Extensions recognize different levels of access to a site. If you are entering the correct information and publishing has never worked, it’s possible that your host has not granted you proper permissions. Contact your host and tell them to make sure you have permission to author against your Web site.
FrontPage Server Extensions Aren’t Installed My host promises me that the FrontPage Server Extensions are installed, but when I try to publish, I keep getting a message telling me that the FrontPage Server Extensions aren’t installed. It’s possible that the permissions on the remote Web site are not set correctly. This can prevent Expression Web from being able to tell if the FrontPage Server Extensions are installed. If Expression Web can’t tell that the FrontPage Server Extensions are installed, it will assume that they aren’t. Use Ethereal or Fiddler and see what you can turn up. If you see something that looks out of the ordinary, send it to your host.
FrontPage Server Extensions Are Used Instead of WebDAV I’m publishing to my Web site using WebDAV, but I’m getting a message saying that the FrontPage Server Extensions aren’t installed. Do I need the FrontPage Server Extensions to publish using WebDAV? No. The FrontPage Server Extensions and WebDAV are mutually exclusive. That means that if the FrontPage Server Extensions are installed on the Web server, you can’t publish using WebDAV. As soon as you try and publish using HTTP, the Web server will expect you to use the FrontPage Server Extensions. If you are getting an error about the FrontPage Server Extensions when publishing via WebDAV, it indicates that the FrontPage Server Extensions are installed on the site and you cannot use WebDAV to publish. Contact your host and let them know that you want to remove the FrontPage Server Extensions and use WebDAV instead.
Content Missing after Publishing I’ve published my content using FTP, but when I browse my Web site, nothing’s there. Have I lost everything? You haven’t lost everything. Chances are you just uploaded information to the wrong directory. Your host has a specific directory that contains your Web site’s files. Most of the time, you are automatically
63
6055_03.qxp
64
12/7/2006
11:46 AM
Page 64
Chapter 3 Publishing a Web Site
placed into that directory when you log in. However, in some cases, you will need to specify the directory within Expression Web in the FTP Directory textbox. Ask your host for the directory you should be using when publishing.
HTML Optimization Doesn’t Affect Web Files I’ve made some changes to the HTML Optimization feature in Expression Web, but when I check the code in my pages, nothing has changed. Many of the comments and other special code that gets cleaned out as a function of HTML optimization are actually needed by Expression Web while you are creating your pages. Therefore, Expression Web will only optimize the HTML when you publish your Web site. The local files will remain unchanged.
Ethereal Captures Nothing I’m trying to use Ethereal to capture network traffic on my wireless network card. It doesn’t seem to be capturing anything at all. What could be wrong? You should be able to capture against your wireless network card, but you might need to disable promiscuous mode. In the Capture Interfaces dialog shown previously in Figure 3.15, click the Prepare button and then uncheck the Capture Packets in Promiscuous Mode checkbox in the Capture Options dialog.
Lagniappe (lan yap’) n.,
a gift or bonus
Hosting Your Web Site One of the most commonly asked questions by many Web designers is one that might appear to be simple: “What should I consider when choosing a host for my Web site?” There are many options available for hosting, and most of them are more affordable than you might think. First, outline your requirements. For example, are you going to need a database? If so, do you need a high-performance system like Microsoft SQL Server or a lower level system? Most hosting companies offer support for SQL Server for a nominal monthly fee. However, if you don’t need that kind of power, you can probably save some money by going with a file-based database such as Microsoft Access. You may also want to investigate using SQL Server 2005 Express Edition. It’s a high-performance, file-based system that is available free from Microsoft. You’ll also want to try and determine how much traffic you expect. Most hosting companies charge for a specific amount of bandwidth. After you surpass that bandwidth limit, you’ll have to pay a premium for additional bandwidth. This is especially important if you plan on offering large files for download such as video or audio files.
6055_03.qxp
12/7/2006
11:46 AM
Page 65
Lagniappe: Hosting Your Web Site
Another important decision to make is whether to go with a hosting company that runs Windows servers. It seems to be all the rage these days to try and convince people to stay away from Windows Server. I encourage you to not fall for those who push their own agenda without any factual information. Make your decision based on the technology you want to use. If you want to use ASP.NET 2.0, you’ll need to go with a host that runs Windows Server. If you want to use PHP, you have a choice of a Windows or non-Windows host. If you just want to host a simple Web site without any fancy features and you do not expect a lot of traffic, you might want to consider hosting the site yourself. If you’re a technology guru, you can get Linux and Apache running on a spare computer lying around the house and get good performance. Setting up Internet Information Services (IIS) on Windows Server is easier, but it will require a more powerful computer. You can use Windows XP Professional to host your own site, but it has a limitation on the number of connections it can host. Keep in mind, too, that a single person browsing a site is going to be opening multiple connections. Chances are you will reach the connection limit at two or three people. If you do choose to host your own site, you might want to invest in a router that has Dynamic Domain Name System (DNS) capability. (Most routers these days have this feature.) Dynamic DNS will allow you to configure a static host name (such as mySite.dyndns.org) that will always go to the IP address of your computer. Because most Internet Service Providers (ISPs) assign dynamic IP addresses, your IP address will change periodically. A router that supports Dynamic DNS can update a Dynamic DNS service (like www.dyndns.com) with your new IP address whenever it changes. More information on Dynamic DNS is available at www.dyndns.com/services/dns/dyndns/. The service is free of charge and works great with most routers.
65
6055_03.qxp
12/7/2006
11:46 AM
Page 66
6055_04.qxp
12/7/2006
12:31 PM
Page 67
CHAPTER
Web Site Management and Reporting In this chapter Web Site Settings Using Expression Web Source Control Web Page Workflow Web Site Reports Troubleshooting Lagniappe: Making the Most of Workflow
4
6055_04.qxp
68
12/7/2006
12:31 PM
Page 68
Chapter 4 Web Site Management and Reporting
Web Site Settings While Expression Web can certainly be used to create and edit single Web pages, it really shines when used for creating and managing entire Web sites. This is one of the features that Expression Web has carried over from its predecessor, FrontPage. Several configuration settings in Expression Web are designed to affect an entire Web site. These settings are available in the Site Settings dialog shown in Figure 4.1.
Figure 4.1 The Site Settings dialog contains all the settings that apply to an entire Web site.
4
TIP If you have a remote Web site open in Expression Web, you may experience a delay of several seconds before the Site Settings dialog appears. The FrontPage Server Extensions have to read the site’s entire configuration before the dialog is displayed. This delay is not experienced with disk-based Web sites.
To access the Site Settings dialog, select Site, Site Settings. There are five tabs in the Site Settings dialog.
General Tab The General tab displays general information about the Web site and allows you to change the name of the Web site, configure the use of metadata, and configure source control settings.
➔
For more information on metadata, see “Creating a Web Site,” p. 25 (Chapter 2).
6055_04.qxp
12/7/2006
12:31 PM
Page 69
Web Site Settings
69
When you change a Web site’s name in the General tab, the folder name changes as well. If the Web site is server-based, the URL for the Web site will change too. We’ll cover source control later in this chapter.
Preview Tab The Preview tab configures how Web pages should be previewed, as shown in Figure 4.2. You can choose to preview using a Web site’s path (including using the ASP.NET Development Server for ASP.NET pages) or a custom URL.
Figure 4.2 The Preview tab configures how a Web site is previewed in your browser.
4
➔
For more information on using and configuring the ASP.NET Development Server, see “Using the ASP.NET Development Server,” p. 485 (Chapter 27).
Using a custom URL is convenient when you need to use a different URL for previewing than the URL used to open the site in Expression Web. For example, if you are using a disk path in Expression Web for a Web site located on a Web server, you can enter an HTTP path for the custom URL that maps to the disk location used by Expression Web. When pages are previewed in Expression Web, they will be opened using the URL you specify.
Advanced Tab The Advanced tab (shown in Figure 4.3) configures the language used for form field validation, determines whether or not hidden files and folders will be visible, and allows for the deletion of temporary files.
➔
For more information on form field validation, see “Using Form Controls,” p. 195 (Chapter 11).
6055_04.qxp
70
12/7/2006
12:31 PM
Page 70
Chapter 4 Web Site Management and Reporting
Figure 4.3 The Advanced tab allows you to configure script language, determine whether hidden files and folders are visible, and clean up temporary files.
4
By default, hidden files and folders are not visible in the Folder List and other Expression Web views. (This also includes meta information in _vti folders.) If you’d like to be able to see these hidden files and folders, check the Show Hidden Files and Folders checkbox and click OK. When you do, Expression Web will ask if you want to refresh the Web site. Click Yes and you will see hidden files and folders appear in Expression Web. The Delete Files button will delete temporary files that are created for Expression Web to keep track of your Web site. While these files don’t take up much room on your hard drive, they can become corrupted and cause strange behavior. Deleting them periodically is a good idea for this reason. TIP One of the symptoms of corrupt temporary files is a Web site that won’t open. Many times, this kind of problem results in constant disk activity until the Windows swap file fills up and you run out of disk space. If you run into a problem like this and can’t open a site to delete temporary files, you can manually delete the files. They are located in C:\Users\<user>\AppData\Roaming\ Microsoft\Web Server Extensions\Cache on Windows Vista and Documents and Settings\<user>\Application Data\Microsoft\Web Server Extensions\Cache on Windows XP. Make sure that Expression Web is closed and then delete all files with a .web file extension.
6055_04.qxp
12/7/2006
12:31 PM
Page 71
Web Site Settings
71
Language Tab The Language tab (shown in Figure 4.4) configures the language used for server messages and defines the encoding used for Web pages.
Figure 4.4 The Language tab configures page encoding and the language used for server messages.
4
The setting in the Server Message Language dropdown applies only to FrontPage Server Extensions messages. If the Web site opened in Expression Web is not a FrontPage Server Extensions-based Web site, the Server Message Language dropdown will contain only English as an option. If you make a change to page encoding and it’s not reflected in your pages, see “Page Encoding Doesn’t Affect Pages” in the “Troubleshooting” section of this chapter.
The Default Page Encoding dropdown configures the character set specified in the contenttype META tag added to Web pages. The browser uses page encoding to determine which character set to use. When the character set is incorrect, the page does not display correctly. Expression Web uses a default setting of utf-8 (Unicode), which supports all languages and is the correct encoding for XHTML documents.
➔
For more information on XHTML, see “Compatibility Features in Expression Web,” p. 339 (Chapter 19).
Database Tab The Database tab (shown in Figure 4.5) configures database connections for use with legacy ASP pages. When you configure a database connection on the Database tab, Expression Web will add the connection to a global.asa file in the root of the Web site.
6055_04.qxp
72
12/7/2006
12:31 PM
Page 72
Chapter 4 Web Site Management and Reporting
Figure 4.5 The Database tab is used for legacy database connections and should not be used for new Web sites.
4
Both the global.asa file and the database connections Expression Web store in it are used only with ASP and do not apply to ASP.NET or other server technologies. For this reason, it’s recommended that you not use this tab for your database connections. TIP The Database tab is actually a left-over feature from FrontPage. While Expression Web does not allow you to insert Database Results components that were available in FrontPage, it will allow you to modify existing Database Results components that were previously inserted in FrontPage. For that reason, the Database tab remains in Expression Web.
Using Expression Web Source Control When you are working with a group of designers, it can be cumbersome to ensure that two people don’t edit the same file at the same time. To combat this problem, Expression Web offers a rudimentary source control system. A source control system implements a document checkout system for a Web site. When you open a file, you are asked if you would like to check it out. If you choose Yes, the file is opened and checked out to you. Until you either check the file back in or undo your checkout, the file will be flagged as being checked out to you. There are two types of source control systems supported by Expression Web: Expression Web’s own source control system and Visual SourceSafe integrated source control.
6055_04.qxp
12/7/2006
12:31 PM
Page 73
Using Expression Web Source Control
73
Expression Web’s Source Control Expression Web’s source control is configured by selecting Site, Site Settings and then clicking the General tab. As shown in Figure 4.6, checking the Use Document Check-in and Check-out checkbox enables source control for a Web site.
Figure 4.6 Expression Web’s source control is enabled using the options on the General tab of the Site Settings dialog.
4
If the source control options in the Site Settings dialog are disabled, see “Source Control Options Disabled” in the “Troubleshooting” section of this chapter.
After you’ve enabled source control, when you open a file, you will be prompted to check the file out prior to opening it. If you select Yes to check the file out, the file will be opened and a check will appear next to the file in Expression Web, as shown in Figure 4.7.
Figure 4.7 The file icons in the Folder List and other Expression Web views show whether or not a file is checked out.
6055_04.qxp
74
12/7/2006
12:31 PM
Page 74
Chapter 4 Web Site Management and Reporting
TIP You can also check out a file by selecting the file and then selecting Edit, Check Out or by pressing Ctrl-J.
After you’ve checked a file out and made the necessary edits to it, you can either check the file back in or undo the checkout. If you undo the checkout, any changes you made will be discarded. To check a file in, right-click the file in the Folder List and select Check In. Alternatively, you can select the file and then select Edit, Check In or press Ctrl-Shift-J. To undo a checkout, right-click the file in the Folder List and select Undo Check Out. Alternatively, you can select the file and then select Edit, Undo Check Out. When a file is checked out by someone else and you attempt to open it, you will be asked to create a read-only copy of the file. Any changes you make to that file cannot be saved until the file is checked back in. CAUTION If you open a read-only copy of a file checked out by someone else, make a change, and then save that file after the original user has checked the file back in, it is possible to overwrite changes that the original user made to the file. Therefore, it is always best to not make any edits to a file until you have successfully checked it out.
4
CAUTION If you open a read-only copy of a file inside of an editor other than Expression Web and the file is checked out by someone else, it is possible to save changes to the file even though the file is already checked out by someone else. If you are using an editor other than Expression Web for editing files under source control, it’s best to not open files for editing unless you check them out yourself.
Visual SourceSafe Integrated Source Control Expression Web supports the use of Visual SourceSafe integrated source control via the FrontPage Server Extensions. Visual SourceSafe is a source control system from Microsoft that offers considerably more features than Expression Web’s own source control system. Visual SourceSafe integrated source control must be configured on the Web server itself, and many find it to be a problematic process. It’s best to leave it to server administrators, even if you have access to the Web server yourself.
➔
For more information on Microsoft Visual SourceSafe, see msdn.microsoft.com/vstudio/previous/ssafe/.
6055_04.qxp
12/7/2006
12:31 PM
Page 75
Web Page Workflow
75
Web Page Workflow When working on a large Web site, it’s a good idea to implement a workflow system whereby documents are distributed for review to particular individuals. During this process, it often helps to categorize documents so the workflow can be more clearly defined. Expression Web provides features that support taking these steps. As shown in Figure 4.8, the Workgroup tab of the Page Properties dialog provides features to aid in workflow. To access this dialog, select the desired file or files and then select File, Properties.
Figure 4.8 Workgroup features in Expression Web aid in defining a productive workflow.
4
TIP The Page Properties dialog box where the Workgroup tab is located has a different appearance and different options based upon whether or not the file whose properties you are examining is open in Expression Web. However, the options on the Workgroup tab are identical in either case.
By clicking the Categories, Names, and Statuses buttons, you can edit the list of categories, add or remove names for reviewers, and edit the list of review statuses. Using these methods, you can customize the workflow settings for your own specific needs. When a page is assigned to someone for review, it’s likely that you won’t want to publish that page to the live Web site when the site is published. To prevent the file from being published with the rest of the site, check the Exclude This File When Publishing the Rest of the Web checkbox. Alternatively, you can right-click the file and select Don’t Publish.
6055_04.qxp
76
12/7/2006
12:31 PM
Page 76
Chapter 4 Web Site Management and Reporting
If the settings in the Workgroup tab don’t show correct data, see “Workgroup Settings Aren’t Correct” in the “Troubleshooting” section of this chapter.
Web Site Reports One of Expression Web’s greatest strengths is in the area of site management. The large array of reports available makes managing a site easier by providing indicators of problems and giving details on other aspects of your Web site. The Site Summary view provides a link to some of the reports in Expression Web and also summarizes information about the site. To view the Site Summary (shown in Figure 4.9), select Site, Reports, Site Summary. Figure 4.9 The Site Summary provides a summary of a Web site and links to run more detailed reports.
4
To access all the reports in Expression Web, select Site, Reports and choose the desired report. The following reports are available in Expression Web: ■
All Files—Displays all files in the Web site in a single view. This report also shows the title, location, and other properties of each file.
■
Recently Added Files—Displays all files recently added to the Web site. As shown in Figure 4.10, you can select a specific number of days to display files added within that number of days.
6055_04.qxp
12/7/2006
12:31 PM
Page 77
Web Site Reports
77
Figure 4.10 The Recently Added Files report is configurable using the Report Settings dropdown.
➔
■
Recently Changed Files—Displays all files that have recently changed. Just as with the Recently Added Files report, you can select a specific number of days to display files that have changed within that number of days.
■
Older Files—Displays all files older than 72 days by default. The number of days can be adjusted using the Report Setting dropdown.
■
Checkout Status—Displays the checkout status of files and shows who (if anyone) has each file checked out.
■
Dynamic Web Templates—Shows all Dynamic Web Templates and their file connections.
For more information on Dynamic Web Templates, see “Using Dynamic Web Templates,” p. 363 (Chapter 21). ■
Master Pages—Displays all files and any master pages used by each file.
➔
For more information on Master Pages, see “Using ASP.NET Navigation Controls,” p. 527 (Chapter 29).
➔
For more information on using style sheet links, see “Managing CSS Styles,” p. 311 (Chapter 18).
■
■
Style Sheet Links—Displays all pages and any style sheets linked to them. Unlinked Files—Shows all files that are not linked to by links that can be followed from the home page.
CAUTION Expression Web can get confused with links in scripts and style sheets. Always investigate any files that show up in the Unlinked Files report to ensure that Expression Web isn’t showing incorrect data.
4
6055_04.qxp
78
12/7/2006
12:31 PM
Page 78
Chapter 4 Web Site Management and Reporting
■
Slow Pages—Displays all pages that will take longer than 30 seconds to load by default. The time threshold can be adjusted using the Report Setting dropdown.
■
Hyperlinks—Displays the status of each hyperlink. Hyperlinks can be checked or edited using the Verify Hyperlink or Edit Hyperlink button, respectively, as shown in Figure 4.11.
Figure 4.11 Hyperlinks can be verified or edited using the Hyperlinks report.
Verify Hyperlink button Edit Hyperlink button
4
■
Review Status—Shows the review status for each file in the site. This report also shows to whom each file is assigned.
■
Assigned To—Similar to the Review Status report, this report shows to whom each file is assigned for review.
■
Categories—Displays each page and the category (if applicable) to which it is assigned.
■
Publish Status—Displays the publish status of each file in the Web site. If a file is configured to not publish with the rest of the site, it will be labeled as Don’t Publish in this report.
Using these comprehensive reports, you can maintain tight control over the files in your Web site.
Configuring Reports The reports in Expression Web are generated using some preset defaults. For example, the download speed of a page assumes a 56k connection by default and the Recent Files report lists files that are fewer than 30 days old by default. You can configure these defaults by selecting Tools, Application Options to access the Application Options dialog shown in Figure 4.12.
6055_04.qxp
12/7/2006
12:31 PM
Page 79
Web Site Reports
79
Figure 4.12 The Application Options dialog contains options for configuring the default presets for Expression Web reports.
After viewing a specific report, you can return to the Site Summary view by clicking the name of the current report in the upper-left corner of the main window and selecting Site Summary as shown in Figure 4.13.
4 Figure 4.13 The dropdown button in the upper-left of the main screen provides quick access to any report.
6055_04.qxp
80
12/7/2006
12:31 PM
Page 80
Chapter 4 Web Site Management and Reporting
Saving Reports To share an Expression Web report with another designer, you can easily save any report as an HTML file. Simply display the report and then select File, Save to save the report as an HTML file. Expression Web defaults to saving the report in the current Web site, but you can specify any location.
Troubleshooting Page Encoding Doesn’t Affect Pages I have set the page encoding to something other than the default, but it doesn’t seem to affect the content-type META tag in my pages. The page encoding setting only affects new pages that are created in Expression Web. It will not affect existing pages.
Source Control Options Disabled I’d like to enable document checkin and checkout, but the options to do so are disabled and I can’t select them. It’s likely that you are using a server-based Web that is on a Web server running the FrontPage Server Extensions. If the FrontPage Server Extensions are configured to use an external source control system, the source control options in Expression Web will not be available. Check with your host or server administrator.
Workgroup Settings Aren’t Correct I know that I have assigned a few files to a specific person for review, but when I look at the properties for the files, it doesn’t show that they are assigned to anyone. Expression Web uses metadata to keep track of review assignments. The best way to correct bad metadata is to recalculate hyperlinks on the Web site. Select Site, Recalculate Hyperlinks to recalculate hyperlinks.
Lagniappe (lan yap’) n.,
a gift or bonus
Making the Most of Workflow Building a Web site is a complex project. One of the greatest challenges in initiating a Web site project is getting everyone coordinated and assigning responsibilities. Expression Web can help you do that if you make the most of the features it provides. The first thing you should do is set up categories for reviewers. You can use names of departments, sections of the site, or anything else that allows for a logical categorization of
6055_04.qxp
12/7/2006
12:31 PM
Page 81
Lagniappe: Making the Most of Workflow
your pages. You’ll then want to add all your reviewers to Expression Web. Both of these tasks are accomplished using the Page Properties dialog shown previously in Figure 4.8. Once you’ve gotten all your categories and names set up, assign each page to someone for development. As the team progresses through the development and review processes, update the review status appropriately. Using this method, you’ll always be able to find out where you are in the project by using the Review Status report in Expression Web. Like any other feature, the workflow features of Expression Web are only beneficial if you configure them to work for you. Don’t dismiss these features simply because the way they are configured out of the box don’t fit your style of working. Modify the configuration so it suits you and the way your project is designed and you’ll be more efficient.
81
6055_04.qxp
12/7/2006
12:31 PM
Page 82
6055_05.qxp
12/7/2006
11:49 AM
Page 83
CHAPTER
Importing a Web Site
In this chapter Using the Import Web Site Wizard Troubleshooting Lagniappe: Importing Versus Publishing
5
6055_05.qxp
84
12/7/2006
11:49 AM
Page 84
Chapter 5 Importing a Web Site
As we discussed in the last chapter, you can create a Web site in Expression Web on your local machine or on a remote Web server. However, there may be times when you need to move an existing Web site from one location to another. For example, you might be taking over the maintenance of an existing Web site from another Web designer, or perhaps you’ve been hired to redesign an existing Web site and you want to use some of the content that’s already been created. Expression Web’s Import Web Site wizard is a convenient and powerful way to import Web site content. Using the Import Web Site wizard, you can easily control how a Web site is imported. You can choose whether to use the FrontPage Server Extensions, FTP, and so on, and in some cases, you can also specify how Expression Web decides whether or not to import certain files. CAUTION Always remember that Web sites are copyrighted material. Current laws as of this writing automatically provide for a common-law copyright on any published Web site. You can use the Import Web Site wizard to import any Web site you wish, but it is illegal to use the content or the design of someone else’s site without their express written permission.
Using the Import Web Site Wizard The Import Web Site wizard is accessed by selecting File, Import, Import Web Site Wizard. Let’s have a look at the steps that are involved in importing a Web site.
Step 1: Choosing an Import Method 5
In Step 1, you will need to choose how the Web site’s files are imported. You can choose among the following methods of importing a Web site: ■ FrontPage Server Extensions ■ WebDAV ■ FTP ■ File System ■ HTTP
All of these methods except the FrontPage Server Extensions method use the Publish feature of Expression Web to import the remote Web site. After you’ve specified the necessary information for Expression Web to open the remote Web site, the remote Web site is published to the destination you’ve selected. TIP Keep in mind that when you import a Web site, you aren’t necessarily moving the Web site from a remote location to your local machine. The act of importing a site is really just the process of copying the Web site from one location to another.
6055_05.qxp
12/7/2006
11:49 AM
Page 85
Using the Import Web Site Wizard
➔
85
For more information on using the Publish feature in Expression Web, see “Publishing a Web Site”, p. 41 (Chapter 3).
FrontPage Server Extensions If the remote Web site is running FrontPage Server, the first option in the Import Web Site wizard is the best one to choose. After selecting this method, enter the URL of the remote Web site in the Web Site Location textbox shown in Figure 5.1. Use the same URL that you would use when viewing the Web site in a Web browser. Figure 5.1 The FrontPage Server Extensions method of importing a site allows you to import subsites as well.
5
CAUTION If the remote Web server has the FrontPage Server Extensions installed, make sure that you use this option when importing the Web site. If you don’t, the files that provide the FrontPage Server Extensions with configuration information won’t be imported.
You have the option of including subsites by checking the Include Subsites checkbox. You can also import a Web site using the Secure Sockets Layer (SSL) by checking the Use Encrypted Connection (SSL) checkbox.
➔
For more information on both subsites and SSL, see “Web Sites and Subsites”, p. 27 (Chapter 2).
6055_05.qxp
86
12/7/2006
11:49 AM
Page 86
Chapter 5 Importing a Web Site
To proceed to the next step, click the Next button. If the FrontPage Server Extensions are not installed on the remote Web site, you will be notified that you cannot import the Web site, as shown in Figure 5.2. Figure 5.2 If the FrontPage Server Extensions aren’t installed, Expression Web will tell you that the selected Web site cannot be imported.
TIP When you see the dialog in Figure 5.2, you should first check to see if the FrontPage Server Extensions are installed on the remote Web site. If you find that they are installed and you still get this dialog, check with your host to find out what might be wrong.
Assuming the FrontPage Server Extensions are located on the site, you’ll be prompted for a username and password to import the Web site. The username and password you will need to enter are assigned by the administrator of the Web site or by the hosting company.
WebDAV If the remote Web server supports Web Distributed Authoring and Versioning (WebDAV), you can use this option to import a site. WebDAV is similar to using the FrontPage Server Extensions option, but the FrontPage Server Extensions are not required for WebDAV.
5
When using WebDAV, you don’t have the option of including subsites when you import a Web site. However, you can import using SSL when using the WebDAV method by checking the Use Encrypted Connection (SSL) checkbox. Just as with the FrontPage Server Extensions method, you will need to enter a username and password when importing a Web site using WebDAV. TIP Most hosting companies do not support WebDAV publishing at this time.
➔
For more information on WebDAV, see “Server Options for Publishing”, p. 42 (Chapter 3).
6055_05.qxp
12/7/2006
11:49 AM
Page 87
Using the Import Web Site Wizard
87
FTP To use the File Transfer Protocol (FTP) to import a Web site, choose the FTP option. You need a username and password to import a Web site using FTP. To import a Web site using FTP, enter the FTP address of the remote Web site in the Web Site Location textbox, as shown in Figure 5.3. Depending on the configuration of the remote site, you may also need to enter a root directory in the Root Directory textbox, and you may additionally need to enable passive FTP by checking the Use Passive FTP checkbox. Figure 5.3 Importing using FTP may require a root directory and passive FTP. Ask the administrator of the remote site if you’re not sure.
5
➔
For more information on the different options available with FTP, see “Server Options for Publishing”, p. 42 (Chapter 3).
After you’ve entered the necessary information, click the Next button to continue. You’ll be prompted for a username and password before you can proceed to the next step.
File System The File System method is often used when importing a Web site from a local file system. However, it can also be used to import a Web site from any location to which you have access via the file system. In other words, in addition to importing from a local drive, you can also use either a UNC (universal naming convention) path or a mapped drive to import using this method.
6055_05.qxp
88
12/7/2006
11:49 AM
Page 88
Chapter 5 Importing a Web Site
N OTE
The file system method is often used in an office network environment where many file servers are available.
A UNC path consists of a server name and a share name and is in the format \\server\share. For example, to access a share called websites on a server named server1, you would use the UNC path \\server1\websites. TIP Windows automatically sets up a share for the root of every drive on your computer. You can access any share by using the format \\server\$. For example, to access the root of the C drive on a computer named desktop, you would use the UNC path \\desktop\c$. You will need to use an Administrator account to access these shares.
Because Expression Web provides support for disk-based Web sites, you can also choose to include subsites when using the File System method by checking the Include Subsites checkbox.
HTTP The Hyper-Text Transfer Protocol (HTTP) method is used to import a Web site that you don’t have access to via any of the previously discussed methods. This is the only method that does not require authorization to complete the import process.
5
The HTTP import process is quite different from the other import methods. You can, in fact, import any Web site that you can get to on the Internet using this method. Instead of actually publishing the Web site during the import process, the HTTP import method can be configured to follow hyperlinks from the home page. When you choose the HTTP method to import a Web site, the Import Web Site wizard adds the Set Import Limits step, as shown in Figure 5.4. N OTE
The Set Import Limits step actually appears as the third step in the wizard. I am covering it here only because it’s unique to the HTTP method of importing.
In this step, you can specify exactly how the Import Web Site wizard decides what to import using the following checkboxes: ■
Import the home page plus linked pages # levels deep—When a Web site is imported, Expression Web will follow hyperlinks to the depth that you specify. For example, if you specify 2 for the number of levels, Expression Web will import the
6055_05.qxp
12/7/2006
11:49 AM
Page 89
Using the Import Web Site Wizard
89
Figure 5.4 The HTTP method of importing a Web site adds an additional step to the Import Web Site wizard.
home page, all pages linked to directly from the home page, and all pages linked to directly from those pages. ■
Import a maximum of # KB—Use this option when you want to put a cap on the amount of content that gets imported. This is particularly useful if you have metered bandwidth or a slower Internet connection. When this option is chosen, Expression Web will import the home page of the Web site and will then follow all links from that page. It will continue to follow links and import files until the maximum limit is reached.
■
Import only HTML and image files—When this checkbox is checked, Expression Web will only import images and Hyper-Text Markup Language (HTML) files. Other files such as script files, CSS files, Flash files, and so on will not be imported.
TIP By default, Expression Web will import all files that are reachable from the home page and all child pages.
If the Expression Web skips the Set Import Limits step when importing via HTTP, see “Import Web Site Wizard Skips Set Import Limits Step” in the “Troubleshooting” section of this chapter. If you are prompted for your username and password even though you’ve entered them correctly, see “Username and Password Not Accepted” in the “Troubleshooting” section of this chapter.
5
6055_05.qxp
90
12/7/2006
11:49 AM
Page 90
Chapter 5 Importing a Web Site
Step 2: Specifying a Destination Web Site Location The second step of the Import Site wizard (shown in Figure 5.5) is where you’ll specify the destination location for the imported Web site. This can be a UNC path, a disk location, or an HTTP location. However, when specifying an HTTP location, the Web site must have the FrontPage Server Extensions installed. Figure 5.5 You can specify a destination for an imported site in the Import Web Site wizard.
5
If you already have a Web site open in Expression Web, you can check the Add to current Web site checkbox if you’d like the imported Web site to be added to the open Web site. If you require additional security, you can specify that SSL be used to import the site if you use an HTTP path for the destination.
Step 3: Finish After you’ve specified all the necessary information, click the Finish button in the last step of the wizard to finish the import process. If you’ve chosen HTTP as your method of importing, the Web site will begin importing immediately. Otherwise, you’ll be presented with the Copy Web Site view, as shown in Figure 5.6. You can then complete the import process by using the Copy Web Site view to copy the files and folders.
6055_05.qxp
12/7/2006
11:49 AM
Page 91
Troubleshooting
Figure 5.6 In all import methods except the HTTP method, you will use the Copy Web Site view to complete the import process.
➔ ➔
For details on using the Copy Web Site view, see “Publishing Content”, p. 48 (Chapter 3). For details on how to troubleshoot importing a Web site using HTTP, see “Troubleshooting HTTP Publishing”, p. 54 (Chapter 3).
Troubleshooting Import Web Site Wizard Skips Set Import Limits Step I’m choosing HTTP as my import method, but when I run through the wizard, I don’t have the option of choosing the import limits. It’s likely that the Web site you are trying to import is configured with the FrontPage Server Extensions. If Expression Web detects that the FrontPage Server Extensions are installed on the remote Web site, it will automatically use the FrontPage Server Extensions option when importing the Web site. You’ll have the option of choosing what to import when you are presented with the Copy Web Site dialog at the end of the process.
Username and Password Not Accepted I’m trying to import a Web site. I’m asked for my username and password, and even though I’ve entered the correct information, I’m still being rejected. The most likely cause of this is an incorrect password. Take care to type the characters correctly and make sure that your Caps Lock isn’t on. If you’re positive that you’ve entered the information correctly, check with the hosting company or administrator of the remote Web server.
91
6055_05.qxp
92
12/7/2006
11:49 AM
Page 92
Chapter 5 Importing a Web Site
Lagniappe (lan yap’) n.,
a gift or bonus
Importing Versus Publishing After seeing how Expression Web handles importing a Web site, you might be asking yourself why you wouldn’t want to simply publish a Web site instead of importing it. In many cases, it really doesn’t matter. However, there is at least one reason why importing a Web site can be extremely useful. Many tricks of the trade in Web design are learned by examining how other Web designers accomplish certain tasks. By importing a Web site, you can learn new Web design techniques. As long as there is a link on a page to a particular file, Expression Web will import it via the Import Web Site wizard’s HTTP method. This is a powerful tool for discovering new Web design techniques. However, if you import someone else’s Web site for this purpose, keep in mind that anything you import from another Web site is copyrighted and cannot be reused by you without explicit consent from the site’s owner.
6055_06.qxp
12/7/2006
11:50 AM
Page 93
CHAPTER
6
Using Personal Web Packages
In this chapter What Are Personal Web Packages? Creating a Personal Web Package Importing a Personal Web Package Troubleshooting Lagniappe: Capitalizing on Personal Web Packages
6055_06.qxp
94
12/7/2006
11:50 AM
Page 94
Chapter 6 Using Personal Web Packages
What Are Personal Web Packages? Web sites can be created with many different structures and formats and for many different purposes. Some formats are applicable to only one particular company or purpose, but many Web sites consist of one or more reusable parts. For example, a Web site may have a page that displays data from a database in tabular format, another page that provides a feedback form, another page that lists frequently asked questions, and another page that gives contact information. Such a Web site could be used by any number of companies or organizations with minimal reconfiguration. Wouldn’t it be nice to have some way of packaging up such a Web site so it could easily be reused or be used by many companies or organizations? Personal Web Packages were designed to do just that! A Personal Web Package allows you to package an entire Web site or parts of a Web site into a single file. That file can then be imported at a later time into a new or existing Web site. You could, for example, create a Web-based forum comprised of several pages, a database, some graphics, some templates, and some style sheets. All the files that make up the forum could then be exported to a Personal Web Package. That Personal Web Package could then be used to easily add a Web-based forum to any Web site.
Creating a Personal Web Package To create a Personal Web Package:
1. Open the Web site that contains the files you want to use in your Personal Web Package.
2. Select File, Export, Personal Web Package to display the Export Web Package dialog shown in Figure 6.1. The Export Web Package dialog consists of two panes. At the left is a listing of all files in the current Web site. At the right is a listing of all files that will be packaged into the new Personal Web Package.
6
By default, the new Personal Web Package is called My Web Package. If you’d prefer, you can change the title of the Web package in addition to other properties by clicking the Properties button shown previously in Figure 6.1. When you do, the Web Package Properties dialog is displayed. Figure 6.2 shows the Web Package Properties dialog after entering information about a Personal Web Package. TIP Users who import your Personal Web Package will use the information you enter into the Properties dialog for more information on your Personal Web Package. It’s a good idea to always include this information.
6055_06.qxp
12/7/2006
11:50 AM
Page 95
Creating a Personal Web Package
95
Figure 6.1 The Export Web Package dialog makes it easy to create a Personal Web Package to use in other Web sites.
Figure 6.2 You can further personalize a Personal Web Package by configuring its properties using the Web Package Properties dialog.
6
6055_06.qxp
96
12/7/2006
11:50 AM
Page 96
Chapter 6 Using Personal Web Packages
TIP When a Personal Web Package is imported into a Web site, Expression Web will create a new folder for the Personal Web Package files. By default, the folder name is the same as the name of the Personal Web Package. By choosing a more descriptive name, you can ensure that the files contained in your Personal Web Package will be easy to locate when they are imported into another Web site.
To add files to your Personal Web Package, select them in the right pane in the Export Web Package dialog shown previously in Figure 6.1 and click Add. Alternatively, you can doubleclick on a single file to add that file to your Personal Web Package. When a file is added, Expression Web will also add any dependencies for that file. If you’d like to examine the dependencies for a particular file, select the file and click the Show Dependencies button. Expression Web will display all the dependencies for the file, as shown in Figure 6.3. Figure 6.3 The Show Dependencies button allows you to easily locate files on which the selected files depend.
6
Expression Web uses the setting in the Dependency Checking dropdown to determine how it should locate dependencies. The following options are available: ■
Check all dependencies, except hyperlinks—Locates all files on which the currently selected files depend except those files linked to by the selected files.
■
Check all dependencies—Locates all files on which the currently selected files depend, including files to which the currently selected files link.
■
Do not check dependencies—Performs no dependency checking.
6055_06.qxp
12/7/2006
11:50 AM
Page 97
Importing a Personal Web Package
97
CAUTION Expression Web uses the dependencies displayed to determine which files should be included automatically with the selected files. Therefore, it’s important to carefully choose the correct dependency checking option before adding files to a Personal Web Package.
If the dependencies displayed for a file don’t include all the files that should be included, see “File Dependencies Incomplete” in the “Troubleshooting” section of this chapter.
After you’ve selected all the files to be included in your Personal Web Package, click OK. Expression Web will display the File Save dialog, where you can select where to save your package. CAUTION After a Personal Web Package has been saved, it can no longer be edited. To alter the files included in the package, you must export a new Personal Web Package with the new set of files.
Importing a Personal Web Package To import a Personal Web Package, open a Web site or create a new Web site. Select File, Import, Personal Web Package to display the File Open dialog. Browse to the Personal Web Package file and click Open to import it. When you click Open, the Import Web Package dialog will be displayed as shown in Figure 6.4. Figure 6.4 The Import Web Package dialog displays all the files inside a Personal Web Package. You can either import some or all of the files.
6
6055_06.qxp
98
12/7/2006
11:50 AM
Page 98
Chapter 6 Using Personal Web Packages
N OTE
There is a sample Personal Web Package in the Examples\Ch7\Files folder on the CD that accompanies this book. You can import this sample into one of your Web sites to examine how a Personal Web Package works.
A Personal Web Package can be imported into any existing Web site. By default, Expression Web will create a new folder in the Web site for the files in the Personal Web Package. The folder name will match the name of the Personal Web Package by default, but you can use a different folder name by specifying it in the Destination textbox. If you’d like more information on a Personal Web Package prior to importing it, click the Properties button shown previously in Figure 6.4. Expression Web will display a dialog showing the author, company name, and a description of the Personal Web Package to aid in determining if you’d like to import the Personal Web Package. TIP Users who import Personal Web Packages that you create will likely use the Properties button to get details on it. Therefore, always remember to add this information when you are exporting a Personal Web Package.
To import a Personal Web Package, choose the files you would like to import and click Import. When you do, Expression Web may display a security warning, as shown in Figure 6.5. If you don’t know and trust the source of the Personal Web Package, you can choose Don’t Run to cancel importing the Personal Web Package. CAUTION When you import the sample Personal Web Package that is on the CD accompanying this book, you will see the warning shown in Figure 6.5. In this case, it’s perfectly safe to import the Personal Web Package.
6
Figure 6.5 Personal Web Packages that are not digitally signed will display a warning when you try to import them. Only import a Personal Web Package if you know and trust the source.
6055_06.qxp
12/7/2006
11:50 AM
Page 99
Lagniappe: Capitalizing on Personal Web Packages
TIP Keep in mind that Expression Web does not conduct any dependency checking when importing a Personal Web Package, so if you choose to not import all files, carefully test the imported files and import any additional files if necessary.
If you click the Properties button, you can configure the properties of your Personal Web Package. This is useful in cases where you may be distributing the Personal Web Package to someone else because it allows them to see specific information about the Personal Web Package while they are importing it.
Troubleshooting File Dependencies Incomplete I have selected a file in the Export Web Package dialog and some of the dependencies for that file are not showing up. I’m concerned that Expression Web will not automatically add files that should be included in my Personal Web Package. What should I do? Expression Web uses metadata to keep track of file dependencies. Occasionally, that metadata can get out-of-date. To update it and correct file dependencies, open the Web site and select Site, Recalculate Hyperlinks. This will rebuild the metadata and should correct any file dependencies that are listed.
Lagniappe (lan yap’) n.,
a gift or bonus
Capitalizing on Personal Web Packages Earlier in this chapter, I gave an example of creating a Personal Web Package of a Webbased forum. Creating a Web-based forum is not a simple task and it requires quite a bit of programming knowledge. However, the example should not be dismissed because it demonstrates the enormous opportunity that Personal Web Packages provide to an innovative Web designer. I get a lot of e-mail from people looking for solutions to Web design problems. The problems I see are almost never related to HTML code or how to design a particular page element. Instead, most people ask about adding large-scale functionality to a Web site, such as a feedback form that submits into a database and sends e-mail. If you’re the kind of person who likes to write Web applications or create innovative designs, Personal Web Packages represent an enormous opportunity. It would be quite easy to open up an e-commerce storefront offering Personal Web Packages that provide snap-in capabil-
99
6055_06.qxp
100
12/7/2006
11:50 AM
Page 100
Chapter 6 Using Personal Web Packages
ity to a Web site. Such an endeavor would be highly lucrative. As you develop your Web sites, keep in mind which parts might be useful to others. Package those parts into Personal Web Packages and use the power of the Internet to market them to other designers. If you’re going to pursue this route, however, you’ll want to get a digital certificate and sign your Personal Web Packages so they don’t generate the security dialog shown previously in Figure 6.5. To get a digital certificate, you’ll need to work with a certificate authority such as Verisign, Inc., and obtain a Class 2 digital certificate. Purchasing one of these certificates is fairly expensive, but it’s a necessity if you want to enter into the realm of selling Personal Web Packages. Verisign, Inc., has quite a bit of information (including comprehensive guides) on their Web site. You can read more by visiting www.verisign.com/products-services/securityservices/code-signing/digital-ids-code-signing/index.html.
6055_pt03.qxp
11/30/2006
8:59 AM
Page 101
PART
Creating and Editing Web Content 7
Creating Pages and Content
8
Using Web Page Views
9
Using Tables and Layout Tables
103
127
10
Using Frames
11
Using Forms Controls
195
12
Editing Tag Properties
215
13
Using the Quick Tag Tools
14
Using Graphics and Multimedia
15
Configuring Page Editor Options
16
Using Find and Replace
149
179
227
271
241 257
III
6055_pt03.qxp
11/30/2006
8:59 AM
Page 102
6055_07.qxp
12/7/2006
11:53 AM
Page 103
CHAPTER
Creating Pages and Content
In this chapter Creating Web Pages Importing Files Formatting Text Creating Hyperlinks Spell-Checking Configuring Page Properties Using Code Snippets Configuring File Editors Troubleshooting Lagniappe: Making the Most of Code Snippets
7
6055_07.qxp
104
12/7/2006
11:53 AM
Page 104
Chapter 7 Creating Pages and Content
Creating Web Pages Expression Web gives you plenty of choices when creating new Web pages. Not only can you choose between standard HTML pages and ASP.NET 2.0 Web pages and files, but you can also create new pages that have a pre-existing CSS layout. To create a new Web page in Expression Web, select File, New, Page to display the New dialog shown in Figure 7.1. Figure 7.1 The New dialog makes it easy to create any type of Web page.
The left side of the New dialog contains a list of page types. When a page type is selected, the list at the right is populated with numerous pages that can be created. Many of the page types listed aren’t really pages in the traditional sense. For example, if you select ASP.NET as the page type, you’ll see that you have options such as Web Configuration and Site Map, neither of which are actual Web pages. Creating a page is literally as easy as selecting the type of page in the New dialog and clicking OK. After you create the new page, you’ll need to add content to it before it will serve any useful purpose. When using the New dialog to create new pages, you have several different types of page formats from which to choose.
7
General Page Table 7.1 shows the page formats available when you select General in the New dialog and where you can find more information on certain formats.
6055_07.qxp
12/7/2006
11:53 AM
Page 105
Creating Web Pages
Table 7.1
105
General Page Formats
Type
Description
More Information
HTML
Creates a standard, blank HTML page.
ASPX
Creates an ASP.NET 2.0 Web form. When you choose this option, you will also have the option of choose a programming language for the page.
For more information on ASP.NET Web forms, see “Using Standard ASP.NET Controls,” p. 495 (Chapter 28).
CSS
Creates an empty CSS file.
For more information on CSS files, see “Creating Style Sheets,” p. 289 (Chapter 17).
Master Page
Creates a new ASP.NET 2.0 Master Page that can be used as a template for other ASP.NET pages.
For more information on ASP.NET Master Pages, see “Using ASP.NET Master Pages,” p. 549 (Chapter 30).
Dynamic Web Creates a new Dynamic Web Template. For more information on Dynamic Template Other pages can then be attached to the Web Templates, see “Using Dynamic Dynamic Web Template to create a Web Templates,” p. 363 (Chapter 21). consistent look and feel for your Web site. JavaScript
Creates a new JavaScript file (with a .js For more information on JavaScript files, file extension.) JavaScript entered in that see “Using Client-side Scripting,” p. 415 file can then be used on one or more (Chapter 24). pages by linking the file to the desired page.
XML
Creates a new, empty XML file.
Text File
Creates an empty text file.
For more information on XML files, read Special Edition Using XML from Que Publishing.
Create from Creates a new page based on a Dynamic Dynamic Web Web Template. After choosing this Template option, you will be prompted for the Dynamic Web Template on which the page should be based. Create from Master Page
Creates a new ASP.NET Web form based on an ASP.NET Master Page. After choosing this option, you will be prompted for the Master Page on which the page should be based.
7
ASP.NET Pages The page types shown in Table 7.2 are available when you choose ASP.NET in the New dialog.
6055_07.qxp
106
12/7/2006
11:54 AM
Page 106
Chapter 7 Creating Pages and Content
Table 7.2
ASP.NET Page Formats
Type
Description
ASPX
Creates a new ASP.NET Web form. This is the same option available in the General section.
Master Page
Creates a new ASP.NET Master Page. This is the same option available in the General section.
Web User Control
Creates a new ASP.NET user control that can then be inserted into an ASP.NET Web form.
More Information
For more information on ASP.NET user controls, see “ASP.NET Web Parts,” p. 607 (Chapter 33).
Web Creates a new Web configuration file Configuration (called web.config) that can be used to configure the settings for an ASP.NET application.
For more information on using the web.config file, read Special Edition Using ASP.NET from Que Publishing.
Site Map
Creates a new ASP.NET site map that can be used in conjunction with ASP.NET navigation controls.
For more information on ASP.NET site maps, see “Using ASP.NET Navigation Controls,” p. 527 (Chapter 29).
Create from Master Page
Creates a new page based on an existing ASP.NET Master Page. This is the same option available in the General section.
CSS Layouts When you choose the CSS Layouts option in the New dialog, you will have the option of selecting from a series of page layouts. When you choose a particular layout, Expression Web creates a new CSS file as well as a new HTML page, and then links the new CSS file to the HTML page. Code will also be added to both the HTML page and the CSS file that creates the layout that you choose. After choosing the desired layout, you can modify the CSS file to customize the appearance of the page.
➔
For more information on modifying CSS files, see “Managing CSS Styles,” p. 311 (Chapter 18).
TIP
7
The CSS Layouts option allows you to easily create page layouts that are CSS-based instead of using tables or other traditional layout techniques. CSS-based layouts are growing in popularity, largely because today’s browsers are able to render them consistently. However, if you choose to use a CSS layout, you’ll want to check your site carefully in a variety of browsers.
6055_07.qxp
12/7/2006
11:54 AM
Page 107
Importing Files
107
Style Sheets The Style Sheets section offers a wide assortment of pre-created CSS files that you can use in your Web site. Unfortunately, Expression Web doesn’t provide a preview of the styles present in the CSS files, so you will need to apply one to your Web site to see what kind of formatting it will provide. These CSS files are a great way to move to CSS, as long as you are willing to do some modification to them when they don’t give you what you want. For example, in my experience, the colors that are applied by these CSS files are a bit loud and unpleasant in appearance. However, they are easily modified. TIP You might be better off using the CSS files supplied with Expression Web as a way to learn CSS techniques. After you’ve gained a better understanding of CSS, it’s often best to create your own CSS files so that you have complete control over them.
Frames Pages The Frames Pages section provides a series of frame layouts. When you choose one of the frame layouts, Expression Web will create all of the pages that make up the layout for you.
➔
For more information on using frames, see “Using Frames,” p. 179 (Chapter 10).
Importing Files Adding content is often more than just entering and configuring text. In many cases, you’ll also be adding graphic files, Flash animations, video files, and other files. To import files into your Web site, select File, Import, File to display the Import dialog shown in Figure 7.2.
Figure 7.2 You’ll likely want to import some graphics and other files into your Web site. The Import dialog makes it easy.
7
6055_07.qxp
108
12/7/2006
11:54 AM
Page 108
Chapter 7 Creating Pages and Content
Click the Add File button to import one or more files. You can also click Add Folder to import a folder and all the files inside that folder. Once you’ve added files or folders, they will appear in the list in the Import dialog. If you’d like to change the name of an imported file, select the file and click the Modify button. To complete the import process, click OK. Until you click OK, the files will not be imported into the Web site. TIP Files and folders that are added to the Import dialog will remain there until you complete the import process, remove them, or close the Web site. That means you can add files or folders and then click Close and import them later. If you close a Web site with files still on the import list, Expression Web will ask if you want to import them before closing the Web site.
Formatting Text Adding text to a Web page in Expression Web is similar to creating a document in your favorite word processor. Many of the same tools are available. In fact, if you are a user of Microsoft Office versions prior to the 2007 version, you’ll find that many of the toolbars and hotkeys when entering text are the same. I’m not going to go into the details of basic text formatting because I’m sure you already understand how to bold and italicize text. Instead, I’ll explain how to work with HTMLspecific formatting.
How Expression Web Formats Text Before you start formatting text in your Web page, you should become familiar with how Expression Web applies formatting. Because Expression Web is designed to create standards-compliant Web sites, it will most often use CSS to apply formatting. How it goes about doing so is based on the Style Application setting. The current Style Application setting is displayed in the Status Bar when a Web page is open. To adjust the Style Application setting, right-click on the Style Application area of the Status Bar, select Mode, and then select the desired mode, as shown in Figure 7.3. By default, the Style Application setting is set to Auto. In this mode, Expression Web will apply formatting using CSS rules that are configured on the CSS tab of the Page Editor Options dialog.
7
6055_07.qxp
12/7/2006
11:54 AM
Page 109
Formatting Text
109
Figure 7.3 The Style Application setting controls how styles are applied and can be adjusted via the Status Bar.
➔
For more information on using the CSS tab in the Page Editor Options dialog, see “Configuring Page Editor Options,” p. 257 (Chapter 15).
When the Style Application setting is Manual, Expression Web will automatically display the Style Application toolbar shown in Figure 7.4. The Style Application toolbar allows you to specify how to apply styles when edits are made. Figure 7.4 You can control how styles are applied by setting Style Application to Manual and using the Style Application toolbar.
When the Style Application setting is set to Auto (the default), you are at the mercy of Expression Web when it comes to where CSS styles get defined. In many cases, that’s a suitable situation. However, you may want more granular control over where styles are created. For example, you might have a CSS file attached to the current page, and you may want to ensure that all newly created CSS styles are created inside of that CSS file. By setting the Style Application to Manual, you will be able to use the Style Application toolbar to specify where new styles are created using the Target Rule dropdown, as shown in Figure 7.4. Based on what is currently selected, the following options are available in the Target Rule dropdown.
7
6055_07.qxp
110
12/7/2006
11:54 AM
Page 110
Chapter 7 Creating Pages and Content
➔
■
An existing CSS element—If the selected page element already has a CSS class or ID applied to it, you can select the CSS ID or class from the Target Rule dropdown. If you then make modifications to the selected element, Expression Web will modify the CSS class or ID applied to it.
■
Inline Style—If the selected element has an inline style applied to it, selecting Inline Style from the Target Rule dropdown will cause the inline style to be modified when formatting is changed.
■
New Inline Style—Formatting changes will be reflected in a new inline style.
■
New Auto ID—Causes Expression Web to create a new, auto-generated CSS ID for any formatting changes that are applied. Expression Web will create the new CSS ID in an embedded style sheet inside of the current page.
■
New Auto Class—Causes Expression Web to create a new, auto-generated CSS class for any formatting changes that are applied. As with the New Auto ID option, the CSS class is created in an embedded style sheet in the current page.
■
Apply New Style—Allows you to create a new style using the New Style dialog. The location for the new style can be specified in the New Style dialog.
For more information on creating and editing CSS styles, see “Creating Style Sheets,” p. 289 (Chapter 17).
Font Families In a word processing application, the font you apply to text will always be the font the viewer of the document sees. Web pages don’t work that way. For you to see text formatted in a particular font on a Web page, that font must be installed on your machine. If it’s not, the browser will substitute a font you have. N OTE
There are some fonts that are installed on almost all computers; Arial, Helvetica, and sans-serif are considered the safest of all fonts. Times New Roman (a serif font) is another common font. It is the font Expression Web uses by default.
It’s a good idea to always specify a series of fonts to use and specify a generic font (i.e. sansserif, monospace, etc.) as the last choice. You can easily configure fonts in Expression Web by selecting Format, Font to display the Font dialog shown in Figure 7.5. Alternatively, you can use the Font dropdown on the main toolbar.
7
6055_07.qxp
12/7/2006
11:54 AM
Page 111
Formatting Text
111
Figure 7.5 The Font dialog makes it easy to choose a font family and otherwise modify the appearance of text.
➔
For information on customizing and configuring font families, see “Configuring Page Editor Options,” p. 257 (Chapter 15).
TIP Font families that you create are used in the Font dialog, the Font dropdown, and in IntelliSense, which is displayed when editing HTML and CSS code.
Font Sizes Font size is one of those things that many developers take for granted. Many Web designers say that you should always use pixel dimensions (e.g., 12 px) for font sizes. In fact, if you want your site to be as user-friendly and accessible as possible, you should use relative font sizes.
➔
For complete details on making your site compliant with accessibility standards, see “Accessibility Features in Expression Web,” p. 339 (Chapter 19).
When you use the Font Size dropdown on the toolbar or adjust the font size using the Font dialog, Expression Web will automatically use relative font sizes. The following code shows a CSS style that defines a relative font size that will equate to approximately 14 pt type: .mainText { font-size: medium; }
7
6055_07.qxp
112
12/7/2006
11:54 AM
Page 112
Chapter 7 Creating Pages and Content
➔
For more information on CSS styles, see “Creating Style Sheets,” p. 289 (Chapter 17).
Using relative fonts is a good idea because it gives your site visitor control over the size of the text. When you change the text size in your browser, text that is sized with a relative font size will resize accordingly while text that is sized with an absolute size will remain the same size.
Creating Hyperlinks Expression Web provides tools to create hyperlinks quickly and easily. To create a hyperlink, select the text or graphic you’d like to use for the link and then select Insert, Hyperlink to display the Insert Hyperlink dialog shown in Figure 7.6. Figure 7.6 The Insert Hyperlink dialog contains all the tools needed to create your hyperlinks.
TIP You can also right-click on the selection and select Hyperlink from the menu to display the Insert Hyperlink dialog.
Along the left edge of the Insert Hyperlink dialog are four buttons that define the type of hyperlink to create. By default, Existing File or Web Page is selected. You can also choose to create a link to a place in the current document (an HTML bookmark), a link to a new document, or an e-mail address.
7
Targeting Hyperlinks By default, hyperlinks to other pages or other Web sites will load into the current browser window. In many cases, that may be exactly what you want, especially when linking to files within your own Web site. However, if you are linking to another site or if you have some other reason for wanting the current page to still be available after someone clicks your link, you’ll want to override that default behavior.
6055_07.qxp
12/7/2006
11:54 AM
Page 113
Creating Hyperlinks
113
To change the window a hyperlink opens in, specify the target for the hyperlink. Click the Target Frame button in the Insert Hyperlink dialog to display the Target Frame dialog shown in Figure 7.7. Expression Web provides a list of common target frames, but you can also specify your own frame name when you are targeting a specific frames page.
Figure 7.7 The Target Frame dialog makes it easy to specify a target for a hyperlink.
➔
For more information on using frames, see “Using Frames,” p. 179 (Chapter 10).
TIP To open a new window that is a specific size or at a specific position, do not use a hyperlink target. Instead, use the Open Browser Window behavior so you can fully control the new window. New windows opened using this method can be named with any name you choose and you can then use that name as the target for any hyperlinks you want to load in the window.
➔
For more information on using the Open Browser Window behavior, see “Using Behaviors,” p. 393 (Chapter 23).
Hyperlink Parameters When you’re using ASP.NET, PHP, or another server-side technology, you may need to pass information to the Web server in a hyperlink in the form of a querystring. A querystring is appended to the end of a hyperlink as a series of names and values. Code that runs on the Web server can access the values that are passed by referencing the name in the querystring. The hyperlink below passes a value called prod with a value of 6: cool.aspx?prod=6
7
6055_07.qxp
114
12/7/2006
11:54 AM
Page 114
Chapter 7 Creating Pages and Content
Note that a question mark appears before the querystring value. You can easily create a querystring hyperlink in Expression Web by clicking the Parameters button in the Insert Hyperlink dialog. Doing so will display the Hyperlink Parameters dialog. In Figure 7.8, you see the hyperlink parameter that created the hyperlink shown previously. Figure 7.8 The Hyperlink Parameters dialog allows you to create querystring parameters in a hyperlink. It’s actually just as easy to enter them into the hyperlink text.
The Hyperlink Parameters dialog is convenient if you have a lot of parameters and you want to work with them often, but I find it just as easy to type parameters manually.
HTML Bookmarks Most hyperlinks take you to the top of the page that is linked to, but it’s also possible to link to a specific point in a page using an HTML bookmark. TIP HTML bookmarks are often used on FAQ pages so that readers can easily navigate directly to a specific place in the page.
7
An HTML bookmark defines a point within a document. To create a link to an HTML bookmark, you first must create the bookmark in the page. Place the insertion point on the line where you want the bookmark and then select Insert, Bookmark to display the Bookmark dialog, as shown in Figure 7.9.
6055_07.qxp
12/7/2006
11:54 AM
Page 115
Creating Hyperlinks
115
Figure 7.9 HTML bookmarks are managed in the Bookmark dialog and allow you to link to a specific point within a page.
After a bookmark has been created, you can link to the bookmark using the Bookmark button in the Insert Hyperlink dialog to display the Select Place in Document dialog, as shown in Figure 7.10. Select the bookmark for your hyperlink to link to that point in the document.
Figure 7.10 Expression Web will list all bookmarks on the page you’re linking to so you can choose the correct point for your hyperlink.
You can link to bookmarks on pages in external Web sites as well. When you click the Bookmark button, Expression Web will parse the remote page for bookmarks and display them in the Bookmark dialog.
Hyperlink ScreenTips To make your Web site accessible, include a title attribute for all your links. The title attribute is configured using the ScreenTip button in the Insert Hyperlink dialog. The text you enter for the screen tip will appear as a popup when a site visitor hovers over the link. It will also be read by screen readers.
7
6055_07.qxp
116
12/7/2006
11:54 AM
Page 116
Chapter 7 Creating Pages and Content
TIP Expression Web notes that screen tips are supported by Internet Explorer 4.0 or greater. In fact, screen tips are supported by all current browsers and are part of the HTML specification.
Spell-Checking Nothing will ruin a professional appearance faster than spelling errors. Even if you’re not a bad speller, you’re bound to make a mistake or two, so having background spell-checking is quite a convenience. Expression Web actually uses the spell-checking feature from Microsoft Office. This affords you a couple of advantages. First, you benefit from the fact that Office’s spell-checker is mature and therefore reliable and robust. Second, if you also have Office installed on your computer, Expression Web will share the custom dictionary from your Office applications. Therefore, any words you add to your dictionary in Word will also be recognized in Expression Web. Expression Web will underline words it believes to be misspelled with a red line. Rightclicking on the underlined text will present you with a menu, allowing you to ignore the problem or take some action to correct it. If spelling errors are not highlighted as you enter text, see “Spelling Errors Not Underlined” in the “Troubleshooting” section of this chapter.
To configure the spelling options, select Tools, Spelling, Spelling Options to display the Spelling Options dialog shown in Figure 7.11. You can then change the spelling options or edit the words in your custom dictionary.
Figure 7.11 Spelling options are configured in the Spelling Options dialog. From here, you can also edit your custom dictionary.
7
6055_07.qxp
12/7/2006
11:54 AM
Page 117
Configuring Page Properties
117
Configuring Page Properties Properties for a specific page are configured using the Page Properties dialog. You can access page properties by opening a page and selecting File, Properties. The Page Properties dialog has six tabs.
General Tab The General tab (shown in Figure 7.12) allows you to easily configure the page title, description, keywords, and other general information.
Figure 7.12 The General tab in the Page Properties dialog provides settings for page title and other general page settings.
The title you enter in the General tab will display in the title bar of the Web browser when the page is viewed. The description and keywords you enter will be added as META tags on the page to aid in search engine indexing. You can also specify a base location, also known as a base href. The base href is the base URL for the page. For example, if you enter http://www.mysite.com/products as the base href, a link that points to software.htm will actually link to http://www.mysite.com/products/software.htm. This is convenient when your site’s directory structure changes often. By using a base href, you can easily update the absolute location of all links by changing one property of the page.
7 TIP If a Dynamic Web Template or ASP.NET Master Page is applied to the current page, many of the options in the Page Properties dialog will likely be disabled.
6055_07.qxp
118
12/7/2006
11:54 AM
Page 118
Chapter 7 Creating Pages and Content
The Default Target Frame property allows you to specify a default frame for links that don’t explicitly specify a frame. This is most often used when you want links on a particular page to open in a new window. By setting the default target to New Window, you can force all links to open in a new window by default. A background sound can also be set on the General tab. Specifying a background sound (most often a music file) will cause the sound to be played when the page is loaded. You can also choose to loop the sound a specific number of times or infinitely. Keep in mind that most people find background sounds annoying and are likely to leave your site if you force them to listen to a background sound. Before you choose to add a background sound, give it careful consideration.
Formatting Tab The Formatting tab (see Figure 7.13) contains properties for a background image, hyperlink colors, and other page colors.
Figure 7.13 Formatting a page’s background and colors is accomplished using the Formatting tab.
In addition to specifying a background image, you can also specify that an image be added as a watermark. A watermark background will remain stationary when the page is scrolled.
7
Hyperlink color and other page colors are also configured on the Formatting tab. Color changes made here are added to the page as embedded style sheets.
➔
For more information on style sheets, see “Creating Style Sheets,” p. 289 (Chapter 17).
Advanced Tab The Advanced tab (shown in Figure 7.14) contains settings for the page margins. Margin entries made here are applied to the page as an inline style on the tag.
6055_07.qxp
12/7/2006
11:54 AM
Page 119
Configuring Page Properties
119
Figure 7.14 Page margins are applied as an inline style so that they work with all modern browsers.
Custom Tab The Custom tab (shown in Figure 7.15) configures META tags for the current page. The top section is for system variables (HTTP-EQUIV META tags) and the bottom section is for user variables such as keywords and description META tags.
Figure 7.15 META tags are easily configured on the Custom tab. Note that settings made on the General tab carry over to this tab.
7
As shown in Figure 7.15, any keywords and description information entered on the General tab will carry over to the Custom tab.
6055_07.qxp
120
12/7/2006
11:54 AM
Page 120
Chapter 7 Creating Pages and Content
N OTE
An in-depth discussion of the META element is outside the scope of this book. If you’d like more information on this powerful HTML element, see www.informit.com/guides/ content.asp?g=webdesign&seqNum=75&rl=1.
Language Tab The Language tab (shown in Figure 7.16) configures the language for your page. The language setting determines the page encoding for the page.
Figure 7.16 Page language and encoding is configured on the Language tab.
Web browsers rely on the page encoding and language settings in order to determine how to properly display your page. You’ll want to make sure that you have correctly set these for the language and region you are targeting. In almost all cases, the default settings will be what you want. However, if you are designing a page for a specific region or language, make sure that you set the encoding appropriately and test the site for the correct appearance.
Workgroup Tab The Workgroup tab is covered in detail in “Web Site Management and Reporting,” p. 67 (Chapter 4).
7
Using Code Snippets It’s quite common for a Web designer to reuse code in several pages. Whether you’re reusing a single line of code or a code block, one thing you want to do is avoid typos at
6055_07.qxp
12/7/2006
11:54 AM
Page 121
Using Code Snippets
121
all costs. Code snippets can prevent typos and also add a high degree of convenience to code reuse. To insert a code snippet into your page, switch to Code View and press Ctrl-Enter. Select the desired code snippet from the list, as shown in Figure 7.17, and it will be added to your page automatically.
Figure 7.17 Code snippets can be added easily by pressing Ctrl-Enter while in Code View.
If you press Ctrl-Enter and code snippets are not displayed, see “Code Snippets Don’t Display” in the “Troubleshooting” section of this chapter.
To add, delete, or modify existing code snippets, select Tools, Page Editor Options and then click the Code Snippets tab in the Page Editor Options dialog, as shown in Figure 7.18. You can add a new code snippet by clicking Add and entering the required information. You can control where the insertion point appears after inserting the snippet by adding a pipe symbol (|) to the snippet code. If you add two pipe symbols, all code between the two pipe symbols will be automatically selected when the snippet is inserted. When you add your own snippets, they are stored in an XML file located in the AppData\Roaming\Microsoft\Expression\Web Designer\Snippets folder in your profile directory. To move your snippets to another machine or back them up (something I strongly recommend), you can simply back up the Snippets.xml file in the Snippets folder.
7
6055_07.qxp
122
12/7/2006
11:54 AM
Page 122
Chapter 7 Creating Pages and Content
Figure 7.18 Code snippets make it convenient to reuse code. Expression Web comes with plenty of pre-existing snippets.
N OTE
By default, your profile directory is c:\users\<username> on Windows Vista and c:\Documents and Settings\<username> on Windows XP.
Configuring File Editors By default, when you double-click most files in the Folder List, Expression Web will open that file in its own window. In most cases, that’s what you want to happen, but in some cases, you might want to override that behavior so that certain file types are opened in a different application. N OTE
7
Some file types (such as images) are not opened in Expression Web by default when you double-click them in the Folder List.
To specify the application to open for a specific file type, select Tools, Application Options and click the Configure Editors tab. The dialog for configuring editors (shown in Figure 7.19) contains a list of file extensions along with the associated editor or editors for each. Available editors can be rearranged in the list or moved to the top of the list so that it is used as the default editor. When a file is double-clicked in the Folder List in Expression Web, it will be opened in the default editor for that file type.
6055_07.qxp
12/7/2006
11:54 AM
Page 123
Configuring File Editors
123
Figure 7.19 The Configure Editors tab allows you to configure specific file types to open with the application of your choice.
The following buttons are available on the Configure Editors tab as shown in Figure 7.19. ■
New Extension—Allows you to add a new file extension and configure the appropriate editors for it.
■
Modify Extension—Allows you to change the selected extension. For example, if HTML is selected, you can click Modify Extension to change the extension to HTM. This does not modify the application used to edit that file type.
■
Delete Extension—Removes the selected extension from the list. If the file type is then double-clicked in Expression Web, you will be prompted to select which program should be used to edit that file type.
■
New Editor—Adds a new editor for the selected file type.
■
Delete Editor—Deletes the selected editor from the selected file type.
To configure a new file extension, click the New Extension button to display the Open With dialog as shown in Figure 7.20. Enter the file extension (with no dot in front of it) and select the program to use for editing that file type from the list of available applications. If the program you’d like to use for the new file type is not listed, click Browse for More and browse to the executable for the application you’d like to use. To configure a new editor for an existing file type, select the file type and then click the New Editor button to display the Open With dialog. Select the editor or click Browse for More and browse to the executable. You can then use the Move Up, Move Down, or Set as Default buttons to adjust the hierarchy of the new editor. To select from one of the listed editors when editing a file, right-click the file in the Folder List and choose Open With as shown in Figure 7.21. Choose the desired editor from the list to open the selected file in that editor.
7
6055_07.qxp
124
12/7/2006
11:54 AM
Page 124
Chapter 7 Creating Pages and Content
Figure 7.20 The Open With dialog contains a preset list of applications. Click Browse for More if the application you’d like to use isn’t listed.
CAUTION The editor that you configure for a specific file extension in Expression Web does not affect Windows file associations. Settings made in Expression Web are specific only to Expression Web.
Figure 7.21 Expression Web displays a list of configured editors. Choose the editor you’d like to use for editing the selected file.
7
6055_07.qxp
12/7/2006
11:54 AM
Page 125
Lagniappe: Making the Most of Code Snippets
Troubleshooting Spelling Errors Not Underlined I have noticed a few words that are definitely misspelled in my Web site, but Expression Web did not underline them with a red line. You’ve probably configured the spelling options so that spelling errors are not visible. Select Tools, Spelling, Spelling Options and make sure that Check Spelling As You Type is checked and Hide Spelling Errors is not checked.
Code Snippets Don’t Display I’m pressing Ctrl-Enter on my Web page, but I don’t get the option of inserting a code snippet. Instead, the insertion point just keeps moving down a line each time I press CtrlEnter. You can only insert a code snippet when you are in Code View. In Design View, Ctrl-Enter inserts a single line break. In Code View, Ctrl-Enter brings up the Code Snippets IntelliSense popup.
Lagniappe (lan yap’) n.,
a gift or bonus
Making the Most of Code Snippets Many Web designers who’ve used Microsoft FrontPage for years are now turning to Expression Web as their design tool of choice. While doing so is a great move, many FrontPage users are dismayed to learn that Microsoft no longer allows for the insertion of Web components (such as the Photo Gallery component, Include Page component, etc.). It’s true that the option to insert these components is not available in Expression Web’s menus, but that doesn’t mean that you can’t use them. In fact, Microsoft realized that many FrontPage users would already have these components in existing sites, so they included the ability for Expression Web to edit existing FrontPage components. As it turns out, you can easily use your favorite FrontPage component in many cases. All you have to do is create a code snippet that inserts the necessary code. You can then configure the component just as you did in FrontPage. TIP Because Microsoft is phasing out the FrontPage Server Extensions, the method presented here is best used for FrontPage components that don’t rely on the FrontPage Server Extensions at runtime. You can find a list of components that require the FrontPage Server Extensions at runtime at support.microsoft.com/kb/281532/EN-US/.
125
6055_07.qxp
126
12/7/2006
11:54 AM
Page 126
Chapter 7 Creating Pages and Content
Suppose that you want to use a FrontPage Photo Gallery in your Expression Web site. The option to insert it isn’t on the menu, so you’ll need to create a code snippet to insert the correct code. Add a new code snippet that inserts the following code.
When you insert this code snippet into a page, Expression Web will display the following on the page in Design view. [PhotoGallery_p]
If you double-click on this text, Expression Web will display the same Photo Gallery Properties dialog that is used in FrontPage and you can add photos and configure your gallery. Another common FrontPage component that Web designers have come to rely on is the FrontPage Include Page component. This component allowed you to include the content from one page on one or more other pages. It was often used by FrontPage users to include things such as copyright blurbs, common menus, and so forth, on multiple pages. The Include Page component is also missing from Expression Web, but you can easily insert it by adding a code snippet that adds the following code.
By using pipe symbols in the code snippet, Expression Web will highlight the portion of the code snippet where you will enter the path of the file to include. You can either directly enter that path or switch to Design view and double-click [|Include|] to display the Include Page Properties dialog where you can browse to the page you’d like to include. This is just one way to harness the power of code snippets. There’s no doubt but that you’ll find many other powerful uses for this great feature of Expression Web. TIP The unofficial word from Microsoft is that they may be releasing an add-in to Expression Web that will allow you to easily insert some FrontPage components. If Microsoft doesn’t do that, or if they release one that isn’t as robust as users of Expression Web want it to be, I will release one at jimcosoftware.com, and as with all of my other add-ins, it will be free.
6055_08.qxp
12/7/2006
11:56 AM
Page 127
CHAPTER
Using Web Page Views
In this chapter Introduction to Page Views Working in Design View Working in Code View Working in Split View Troubleshooting Lagniappe: Taking Advantage of Page Views
8
6055_08.qxp
128
12/7/2006
11:56 AM
Page 128
Chapter 8 Using Web Page Views
Introduction to Page Views 8
“What you see is what you get” (WYSIWYG) Web design products are supposed to keep you from having to worry about HTML code, but anyone who’s spent any amount of time working with a WYSIWYG tool knows that it’s not practical to ignore the code. Fortunately, Expression Web provides three different views of your Web page so you can work with it the way you want: Design View, Code View, and Split View. You’ll likely use Design View most often. It shows a view of your Web page as it will appear in a Web browser. Using Design View, you can easily add text, graphics, hyperlinks, and other content and arrange it in a WYSIWYG environment. Code View shows the underpinnings of your Web page—the code. Expression Web offers color-coding, line numbering, IntelliSense, and other tools to make it easy and efficient to work in this view. Chances are this is where you will go to tweak code that Expression Web has already added, but you can add code from scratch here as well. Split View is a combination of Design View and Code View. Split View divides the Expression Web interface into two panes, one on top of the other. One pane displays the page in Design View and the other pane displays the page in Code View. Separating the two panes is a movable divider so you can decide how much screen real estate each view should occupy. Adding content in Design View is primarily covered in Chapter 7, but in this chapter, we’ll go over some of the features on the View menu in Expression Web, and we’ll cover using Code View and Split View.
Working in Design View As mentioned previously, Design View is where you will likely spend most of your time when using Expression Web. Design View is a WYSIWYG representation of your Web page. It provides a display of what your page will look like in a Web browser. N OTE
FrontPage, Microsoft’s legacy Web design application, used the rendering engine in Internet Explorer to display a WYSIWYG view of a Web page. Expression Web does not use Internet Explorer. Design View in Expression Web was written from the ground up to give you an accurate representation of your Web page.
Quite a few interface features accessible on the View menu make it easier to work in Design View.
6055_08.qxp
12/7/2006
11:56 AM
Page 129
Working in Design View
129
Visual Aids Visual Aids are user interface elements that make it easier to work with Web pages. Expression Web offers nine different Visual Aids to make it easier to position items and locate elements on your Web page. To access Visual Aids, select View, Visual Aids and select the desired Visual Aid. Visual Aids are displayed by default in Expression Web, but you can turn them off by selecting Show in the Visual Aids menu or by pressing Ctrl+/ on your keyboard. The Show menu item toggles all Visual Aids on and off. TIP The Status Bar in Expression Web displays the current status of Visual Aids. You can turn Visual Aids on or off by double-clicking the Visual Aids area of the Status Bar.
The following Visual Aids are available on the Visual Aids menu:
Block Selection When Block Selection is enabled (it is enabled by default), Expression Web will display a block selector for HTML block elements. A block selector is a small tag indicator, as shown in Figure 8.1. Block Selection will also display a shaded area indicating the padding around a particular element. Figure 8.1 The Block Selection Visual Aid makes it easier to work with block elements such as paragraphs.
N OTE
HTML block elements are elements that can appear within the of the document. The W3C has more information at www.w3.org/TR/html4/struct/global.html#h-7.5.3.
8
6055_08.qxp
130
12/7/2006
11:56 AM
Page 130
Chapter 8 Using Web Page Views
Some block elements are almost impossible to work with when block selectors aren’t visible. Disabling block selectors will not prevent them from being displayed on such elements. HTML layers are an example. Layers are implemented using HTML elements, and the block selector is always visible regardless of whether or not the Block Selection Visual Aid is enabled.
8
➔
For more information on using layers, see “Using Layers,” p. 439 (Chapter 25).
Visible Borders The Visible Borders Visual Aid displays borders around particular HTML elements, even when they are not selected. For example, when you insert a table in Expression Web, the Visual Borders Visual Aid will render a dotted border around each cell by default, even when the table has no border. When the Visual Borders Visual Aid is disabled, the table will be invisible in Design View unless it is selected.
➔
For more information on using tables, see “Using Tables and Layout Tables,” p. 149 (Chapter 9).
Empty Containers The Empty Containers Visual Aid displays borders around certain elements that act as containers for other elements. For example, an HTML form is visible by default in Design View, even when the form has no controls in it. If the Empty Containers Visual Aid is turned off, HTML forms are invisible in Design View until controls are added to them.
➔
For more information on using HTML forms, see “Using Form Controls,” p. 195 (Chapter 11).
Margins and Padding The Margins and Padding Visual Aid displays a shaded area around the page margin and around padding areas of all HTML elements, as shown in Figure 8.2. Figure 8.2 The Margins and Padding Visual Aid makes it easy to see padding around elements and the page’s margins.
CSS Display:none and CSS Visibility:hidden Elements CSS elements with a Display attribute set to none or a Visibility attribute set to hidden are not visible by default. Expression Web provides a Visual Aid for CSS Display:none and CSS Visibility:hidden elements.
6055_08.qxp
12/7/2006
11:56 AM
Page 131
Working in Design View
131
When this Visual Aid is enabled, the elements will be visible in Design View, but will not be visible in a Web browser.
➔
For more information on using CSS in Expression Web, see “Managing CSS Styles,” p. 311 (Chapter 18).
ASP.NET Non-visual Controls Some ASP.NET controls are not visible by default. For example, the HiddenField control is an invisible control. The ASP.NET Non-visual Controls Visual Aid allows you to see invisible controls in Design View. If the ASP.NET Non-visual Controls Visual Aid is not turned on and you insert a non-visual ASP.NET control, Expression Web will display a dialog warning you that the element will not be visible and it will ask if you want to enable the ASP.NET Non-visual Controls Visual Aid, as shown in Figure 8.3.
Figure 8.3 Expression Web will notify you when you insert a non-visual ASP.NET control.
➔
For more information on using ASP.NET controls in Expression Web, see “Using Standard ASP.NET Controls,” p. 495 (Chapter 28).
ASP.NET Control Errors By default, Expression Web will display an error message when ASP.NET controls are improperly configured or if they malfunction. If you disable the ASP.NET Control Errors Visual Aid, no such error message will be displayed.
Template Region Labels Editable regions are areas of a page that are used in conjunction with Dynamic Web Templates. By default, a label containing the name of each editable region is only available when the editable region is selected. By enabling the Template Region Labels Visual Aid, you can see the names of all editable regions whether they are selected or not.
➔
For more information on using Dynamic Web Templates and editable regions, see “Using Dynamic Web Templates,” p. 363 (Chapter 21).
Formatting Marks Expression Web can display formatting marks for paragraphs, HTML comments, scripts, and other elements that are normally not visible.
8
6055_08.qxp
132
8
12/7/2006
11:56 AM
Page 132
Chapter 8 Using Web Page Views
To display formatting marks, select View, Formatting Marks, Show or press Ctrl+Alt+/ on your keyboard. After the formatting marks are visible, you can toggle individual types of formatting marks on and off as needed. Formatting marks are useful when working with complex pages. For example, in Figure 8.4, a formatting mark is displayed indicating a left-aligned HTML element. By clicking on the formatting mark in Design View, you can select the element that is left-aligned easily. Figure 8.4 Formatting marks can make page editing easier by allowing easy access to invisible page elements.
Some formatting marks offer powerful capabilities. If you double-click on a script formatting mark, you can edit the script it represents, as shown in Figure 8.5. TIP When you double-click on an HTML comment formatting mark, you can edit the HTML comment without switching to Code View.
6055_08.qxp
12/7/2006
11:56 AM
Page 133
Working in Design View
133
Figure 8.5 Formatting marks make it easier to edit scripts and other nonvisual elements.
Ruler and Grid The Ruler and Grid feature of Expression Web can make it much easier to position items in your page, especially if you are using absolute positioning with CSS.
➔
For more information on CSS positioning, see “Managing CSS Styles,” p. 311 (Chapter 18).
The Ruler makes positioning easier by displaying horizontal and vertical indicators that originate from the upper left corner of the page by default, as shown in Figure 8.6. Figure 8.6 The Ruler adds convenient horizontal and vertical positioning indicators to Design View.
8
6055_08.qxp
134
12/7/2006
11:56 AM
Page 134
Chapter 8 Using Web Page Views
TIP The Ruler uses the same coordinate system as absolute positioning. By default, the upper left corner of Design View is at position 0, 0. This is called the origin.
8 As you move your mouse over the design surface, the Ruler will show the precise location of the mouse pointer by displaying position indicator marks on both the vertical and horizontal rulers. This makes positioning and resizing objects easier. For example, when you are dragging a layer to a new position, it’s helpful to have a visual representation of the mouse pointer’s exact coordinates. As previously mentioned, the Ruler’s origin is the upper left corner of the design surface. You can, however, move the origin in one of two ways: You can drag the upper left corner of the ruler to a new location or you can select something on the page, right-click on the Ruler, and select Set Origin From Selection. In Figure 8.7, a layer is selected. When Set Origin From Selection is selected on the menu, the origin of the Ruler will be reset to the upper left corner of the layer. To reset the origin to its original location, right-click the Ruler and select Reset Origin.
Figure 8.7 The Ruler’s origin can be reset to a selection on the available context menu by rightclicking on the Ruler.
While the Ruler can make it easier to position items, it’s not perfect. The layer shown in Figure 8.7 can be repositioned by clicking anywhere on the block selector and dragging. Unfortunately, the block selector itself consumes several pixels on the screen, so the position of the mouse pointer can vary when positioning the layer. Therefore, you cannot rely solely on the Ruler and position indicator marks. To make the Ruler more useful in such scenarios, the Grid can be used to make positioning more precise.
6055_08.qxp
12/7/2006
11:56 AM
Page 135
Working in Design View
To enable the Grid, select View, Ruler and Grid, Show Grid. When the Grid is enabled, vertical and horizontal lines are drawn on the design surface. By default, these lines are drawn at 50-pixel increments, as shown in Figure 8.8.
Figure 8.8 Using the Grid in combination with the Ruler makes positioning objects on the page easy.
If you prefer, you can enable the Snap to Grid feature so that objects automatically snap to the grid when positioned. To enable Snap to Grid, select View, Ruler and Grid, Snap to Grid. Both the Ruler and Grid are customizable by selecting View, Ruler and Grid, Configure. When you select Configure, the Page Editor Options dialog is opened and the Ruler and Grid tab is selected automatically, as shown in Figure 8.9. You can configure the units used for the Ruler as well as the units, spacing, and other settings for the Grid.
Figure 8.9 The Ruler and Grid can both be customized using the Page Editor Options dialog.
135
8
6055_08.qxp
136
12/7/2006
11:56 AM
Page 136
Chapter 8 Using Web Page Views
Tracing Images Almost all Web sites are designed using a combination of text, graphics, and other dynamic content. In many cases, graphics are used to present interactive user interfaces. Even simple designs use graphics extensively to add user interface elements.
8
When graphics are used for a Web site’s user interface, a large graphic is often cut up into smaller graphics in a process known as slicing. Tables are then used to segment the interface, add links, and so on. This whole process can be tedious and time-consuming. The Tracing Image feature in Expression Web can make it considerably easier by allowing you to superimpose your user interface onto the design surface so you can build your tables around it easily. N OTE
➔
Many graphics applications offer image slicing capabilities, and several of them are free. A Web search will turn up plenty of applications to try.
For more information on using tables to build page layouts, see “Layout Tables and Cells,” p. 170 (Chapter 9).
To use the Tracing Image feature, first add a new layout table to your page. Next, select View, Tracing Image, Configure to display the Tracing Image dialog shown in Figure 8.10. Click Browse and select the figure to use for the tracing image. By default, the tracing image will be positioned at the upper left corner of the Web page. You can specify a different location or click Set from Selection to position the image relative to the selected element on the page. Figure 8.10 Tracing images can be positioned and adjusted using the Tracing Image dialog.
If your tracing image disappears from the screen unexpectedly, see “Tracing Image Disappears” in the “Troubleshooting” section of this chapter.
6055_08.qxp
12/7/2006
11:56 AM
Page 137
Working in Design View
Because you are building tables and other user interface elements on top of the tracing image, Expression Web allows you to configure transparency for the image. This allows you to configure the image so it’s still visible while not allowing it to get in the way of your design elements. After you’ve configured the tracing image with the desired settings, click OK to add it to the page. You can then add layout cells using the tracing image as a guide. Figure 8.11 shows a tracing image being used as a guide for a layout table. Figure 8.11 Using a tracing image as a guide for layout tables makes arranging table cells much easier.
The tracing image is only visible when the page is displayed in Expression Web. Therefore, after you have your table arranged appropriately, you’ll still need to slice your image in a graphics editing application and then add the sliced graphic files to the table cells. TIP Use the measurements displayed in your layout table as a guide when configuring your image application to slice images.
137
8
6055_08.qxp
138
12/7/2006
11:56 AM
Page 138
Chapter 8 Using Web Page Views
Adjusting Page Size 8
When designing your Web site, you want to make sure it looks the way you intend at all common resolutions. For example, if you design your Web site on a monitor set to a resolution of 1280×1024 (a common resolution for a 17” or larger LCD display) and then view it on a monitor set to a resolution of 800×600, it’s likely that part of the page will overflow the right edge of the screen. User interface elements may also shift around, making the page look unprofessional. The solution to the screen resolution problem is to design your pages at the lowest resolution in which you expect them to be viewed. (In the example given previously, you would want to design the page at a resolution of 800×600.) There’s a problem with this approach, however. You may have spent a bunch of money on a nice monitor with plenty of screen real estate, and now you’re being asked to lower the resolution to the point where you’re no longer able to take advantage of all of that real estate! Luckily, the Page Size feature in Expression Web was created so that you can design for a specific resolution without actually switching to that resolution. When you’re working in Design View, Expression Web will display the current page size in the Status Bar, as shown in Figure 8.12. Figure 8.12 The Status Bar will show you the page size so you can design for an intended resolution.
Page Size indicator
6055_08.qxp
12/7/2006
11:56 AM
Page 139
Working in Design View
By clicking on the page size displayed in the Status Bar, you can select a new page size, as shown in Figure 8.13. You can also select View, Page Size and select the desired page size from the menu. Figure 8.13 Setting a new page size is fast and easy using the Status Bar.
When a page size is chosen that is smaller than the current size of the design surface, Expression Web will display shaded borders to indicate the size you have chosen, and you will not be able to add any content outside the selected page size. Using this method, you can take advantage of your entire screen while still ensuring that your page will display appropriately at the lowest desired resolution. The page sizes that appear on the Page Size menu can be modified by selecting View, Page Size, Modify Page Sizes. The Modify Page Sizes dialog (shown in Figure 8.14) makes it easy to add new page sizes or remove or modify existing ones. Figure 8.14 Page sizes displayed in Expression Web can be modified using the Modify Page Sizes dialog.
139
8
6055_08.qxp
140
12/7/2006
11:56 AM
Page 140
Chapter 8 Using Web Page Views
Working in Code View 8
Most users of WYSIWYG design tools aren’t too interested in digging into the code that makes up a Web page. In fact, the code that Expression Web generates is clean and efficient enough to make digging into the code unnecessary in almost all cases. However, there are still times when you might want to add content in code or modify existing code, if for no other reason than to learn more about HTML, CSS, and scripting. Expression Web will mark invalid code in Code View by adding a squiggly, red underline to it. It will also mark some code errors (such as missing closing tags) by highlighting them in yellow. These visual indicators are a great bonus when trying to locate code problems. To access Code View, click the Code button at the bottom of the design surface. Expression Web’s Code View (shown in Figure 8.15) is a robust environment where you can work with code efficiently. Some of the tools that make working in Design View easy are also available in Code View, plus there are code-specific tools available as well that make it possible to work with code even if you’re not an expert at HTML, CSS, and scripting. Figure 8.15 Code View is a robust environment for working in code, but it’s also easy for those who know little about coding.
TIP If you select something in Design View and then switch to Code View, the code representing the selection will be selected as well. The same thing happens when code is selected in Code View and you switch to Design View.
6055_08.qxp
12/7/2006
11:56 AM
Page 141
Working in Code View
As shown in Figure 8.15, several features have been designed around making code more readable in Expression Web. Code is indented to make it more readable. Line breaks are also inserted automatically in tables so code is easier to understand. What you can’t see in Figure 8.15 (due to the grayscale image) is the color-coding that makes it much easier to read the code. There are several other features that make working in Code View easy and intuitive.
Customizing Code Formatting The formatting of code can be customized by selecting Tools, Page Editor Options and clicking the Code Formatting tab. As shown in Figure 8.16, there are many options to configure. By selecting a tag from the Tags list, you can customize that particular tag. CSS code can also be customized. Figure 8.16 You don’t have to settle for how Expression Web formats your code. You can change the rules any way you choose.
At the top of the Code Formatting tab are settings that apply to all code in Code View. However, these settings will not affect existing code. Only page edits and new pages are affected by changes to these settings.
141
8
6055_08.qxp
142
12/7/2006
11:56 AM
Page 142
Chapter 8 Using Web Page Views
The following checkboxes are available in the upper-left section of the Code Formatting tab. ■
Tag Names are Lowercase—When this checkbox is checked, HTML tag names will be added in lowercase. This is the default setting.
■
Attribute Names are Lowercase—When this checkbox is checked, HTML attributes are added in lowercase. This is the default setting.
8
CAUTION If you uncheck either of these checkboxes, Expression Web will create all new Web pages with uppercase tag names and/or attributes. Current Web standards require that HTML tag names and attributes be in lowercase. Therefore, pages created with either of these checkboxes unchecked will not be compatible with existing standards.
■
Allow Line Breaks Within Tags—By default, Expression Web will not add hard line breaks within tags. If this checkbox is unchecked, Expression Web will add a hard line break between attributes within a tag if the length of the tag exceeds the number of characters specified for the right margin.
You can also configure the tab and margin settings in code view by changing the settings in the upper-right of the Code Formatting tab. By default, Expression Web will use tabs as spaces. If you uncheck the Insert Tabs as Spaces checkbox, Expression Web will use nonbreaking spaces instead. CAUTION Controlling spacing with non-breaking spaces is not usually recommended. It can cause spacing to be unpredictable and should be avoided.
The Tags section of the Code Formatting tab makes it easy to configure the way specific tags will be formatted in Code View. Select a tag from the Tags list and then change the appropriate settings as desired. You can configure whether to omit start tags and end tags and whether contents of the tag are indented as well. The options available to you will change depending upon which tag you have selected. For example, if a tag doesn’t have a corresponding end tag (such as the tag), the Omit End Tag checkbox will be checked and disabled. CSS elements can be formatted using the settings in the bottom section of the Code Formatting tab. You can also control how Expression Web generates more complex CSS by using the Use Shorthand Properties When Generating Styles checkbox. When this checkbox is checked (the default setting), Expression Web will combine CSS properties in one CSS element when possible. For example, if a three pixel, green border is applied to a table cell, Expression Web will create CSS code like the following by default. border: 3px solid #00FF00;
6055_08.qxp
12/7/2006
11:56 AM
Page 143
Working in Code View
143
If the Use Shorthand Properties When Generating Styles checkbox is unchecked, Expression Web will instead create the style using the following CSS code. border-top-width: 3px; border-right-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-top-color: #00FF00; border-right-color: #00FF00; border-bottom-color: #00FF00; border-left-color: #00FF00; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid;
CAUTION Unlike the HTML formatting options in the Code Formatting tab, the CSS options will affect existing CSS code as well as new CSS code.
If you’d like Expression Web to use the current page as a guide for formatting rules, click the Base on Current Page button. Expression Web will attempt to match the formatting rules as closely as possible to what is on the current page.
Quick Tag Tools The Quick Tag Tools are context-sensitive buttons that appear at the top of the Code View window. The Quick Tag Tools make it easy to select specific sections of code, edit code, and add new code. For example, when you click inside text inside a table cell, you’ll see a Quick Tag Tool for the
tag and also the
and
tags for the selected cell. To select the code that makes up any of these tags, simply click on the Quick Tag Tool for the desired tag.
➔
For more information on using the Quick Tag Tools, see “Using the Quick Tag Tools,” p. 227 (Chapter 13). If the Quick Tag Tools are not visible, see “Quick Tag Tools Not Visible” in the “Troubleshooting” section of this chapter.
IntelliSense Code View supports full IntelliSense for HTML code, CSS code, and scripting code. You can use IntelliSense for adding a new tag by placing the insertion point where you want the tag and pressing .style1 { text-align: center; } . . .
6055_09.qxp
12/7/2006
12:00 PM
Page 153
The Makeup of an HTML Table Tag
153
Notice that Expression Web has inserted an embedded CSS class called style1 and has then applied that CSS class to a that surrounds the table. This is the preferred method of specifying table alignment.
➔
For more information on formatting page elements with CSS, see “Creating Style Sheets”, p. 289 (Chapter 17).
TIP All table attributes can be adjusted using the Tag Properties or CSS Properties (if applied using CSS) task panes.
➔
For more information on the Tag Properties and CSS Properties task panes, see “Understanding the Tag Properties Task Pane”, p. 216 (Chapter 12) and “Using the CSS Properties Task Pane”, p. 326 (Chapter 18) respectively.
The border Attribute The border attribute specifies how many pixels to use for a table’s border. Setting this attribute to a value of 0 creates a table with no border. The default value is 1 in Expression Web, but you can easily change that in the Insert Table dialog shown in Figure 9.1. TIP If the default table settings that you see in Figure 9.1 don’t suit your needs, you can change them to whatever you wish and then check the Set As Default For New Tables checkbox before you click OK. From then on, the Insert Table dialog will default to your new settings.
A table border is affected not only by size, but also by the cellspacing attribute. In Figure 9.2, the table shown has a border size of 2 and a cellspacing value of 2. Notice that it appears to have a double border. The table in Figure 9.3, on the other hand, has a solid border without the double border appearance. The only difference between the two tables is that the table in Figure 9.3 has a cellspacing value of 0 instead of 2. Figure 9.2 A table with a cellspacing value
greater than 0 will appear to have a double border due to the cellspacing. This table has both a cellspacing and a border setting of 2.
9
6055_09.qxp
154
12/7/2006
12:00 PM
Page 154
Chapter 9 Using Tables and Layout Tables
Figure 9.3 In comparison to the table in Figure 9.2, this table has a cellspacing of 0. All the other attributes are the same. Notice the double border is now gone.
9
The cellpadding Attribute The cellpadding attribute is a pixel or percentage value that specifies the amount of space between the border of a cell and the contents of the cell. A common use of cellpadding is to provide a buffer for content in separate cells. The table in Figure 9.4 shows a common use of tables in Web design. An image is in one table cell and the accompanying text is in another table cell. In this example, cellpadding is set to 0. Notice that the text in the second cell is touching the right edge of the image, making the presentation look unprofessional. Figure 9.4 When text runs right up against an image, it looks unprofessional.
In Figure 9.5, I’ve set the cellpadding to 4. All other settings remain the same. Notice that the application of cellpadding has transformed an unprofessional presentation into an attractive and effective one.
6055_09.qxp
12/7/2006
12:00 PM
Page 155
The Makeup of an HTML Table Tag
155
Figure 9.5 The application of cellpadding to the same table has transformed the presentation into one that’s professional and effective.
9
TIP I created all the graphics for this chapter using a great software product called The Logo Creator from Laughingbird Software. You will find a full version of The Logo Creator on the CD that accompanies this book.
The cellspacing Attribute As demonstrated earlier in “The border Attribute” section, the cellspacing attribute controls the space between cells. It can be specified in either pixels or a percentage value. The difference between cellspacing and cellpadding can sometimes be difficult to see. As shown in Figure 9.6, cellspacing adds space between the border of the table and the border of a table cell, as well as adding space between table cells. Cellpadding, on the other hand, adds space between the inside border of a cell and the content occupying the cell. Figure 9.6 When you see cellspacing and cellpadding next
to each other, the difference becomes clear.
6055_09.qxp
156
12/7/2006
12:00 PM
Page 156
Chapter 9 Using Tables and Layout Tables
The frame Attribute The frame attribute provides for more granular control over how the border of a table is rendered. Without a border, the frame attribute has no effect. The frame attribute can be configured in the Tag Properties task pane and can have any one of the following values: ■ above—The
border across the horizontal top of the table will appear in the browser. Other borders will be ignored.
9
■ below—The
border across the horizontal bottom of the table will appear in the browser. Other borders will be ignored.
■ border—A
border will be drawn around the table as a box. This setting produces the same output as the box setting.
■ box—A
border will be drawn around the table as a box. This setting produces the same output as the border setting.
■ hsides—A
border will be drawn on the horizontal sides of the table. In other words, a border will be visible across the top and bottom of the table.
■ lhs—A
border will be drawn on the left side of the table. (LHS stands for left-hand
side.) ■ rhs—A
border will be drawn on the right side of the table. (RHS stands for right-hand
side.) ■ void—A
border will not be drawn around the table. Even if a border is explicitly set on the table tag, if the frame attribute is set to void, the border will not appear.
■ vsides—A
border will be drawn on the vertical sides of the table. In other words, a border will be visible along the left and right sides of the table.
N OTE While the frame attribute isn’t deprecated, many Web designer prefer to use the CSS border properties. See http://www.w3.org/TR/REC-CSS2/tables.html#borders for specific information.
Rows, Columns, and Cells Now that you’re familiar with the makeup of the
tag, it’s time to dig into the other tags that make up a table. An HTML table is really just a collection of rows and columns. Rows are defined by
tags and columns are defined by
tags.
tags cannot exist outside of a
tag. The code in Listing 9.2 defines a simple HTML table containing two rows and two columns.
6055_09.qxp
12/7/2006
12:00 PM
Page 157
Rows, Columns, and Cells
Listing 9.2 1 2 3 4 5 6 7 8 9
157
Code for Table Containing Two Rows and Two Columns
10
Row
Row
Row
Row
1, Column 1 1, Column 2
2, Column 1 2, Column 2
The colspan and rowspan Attributes Each
tag pair that you see in Listing 9.2 represents one cell in the table. In this example, each column and row contain the same number of cells. In some cases, you may want to combine two or more cells into one cell. When you combine cells in a row, you use the colspan attribute on the row. When you combine cells in a column, you use the rowspan attribute on the column. Figure 9.7 demonstrates the effect of using the colspan and rowspan attributes on a table. Figure 9.7 Use the colspan attribute to combine cells in a row and the rowspan attribute to combine cells in a column.
For many people, dealing with the colspan and rowspan attributes in HTML code is difficult and confusing. Fortunately, Expression Web makes it easy, but it’s still helpful to understand what’s going on under the covers. The code that follows defined the table shown in Figure 9.7, which has a rowspan of 2. Notice that the second
pair is missing from the second
tag due to the first column spanning two rows.
Rowspan = 2
9
6055_09.qxp
158
12/7/2006
12:00 PM
Page 158
Chapter 9 Using Tables and Layout Tables
The colspan attribute, on the other hand, merges two or more cells horizontally across two or more columns, as shown previously in Figure 9.7. The code that follows defined the table shown in Figure 9.7, which has a colspan of 2.
9
Colspan = 2
In this table, the second
pair is missing from the first row because the colspan attribute causes both cells in that row to be merged into one column.
Aligning Content in Cells There are several alignment options for table cells. One way to align content in a table cell is by using the align and valign attributes. These attributes are actually deprecated in favor of CSS alignment, but many Web developers still use them because of their widespread support by most browsers. The align attribute aligns content horizontally in a table cell. Valid values are left, right, and center. The valign attribute aligns content vertically. Valid values are detailed in the following sections. baseline
The baseline value aligns content on a common baseline. This option is best used when a cell contains a single line of text. If you look at a line of lowercase letters, you’ll see that the bottoms of most letters are aligned horizontally. (Letters such as g, y, and j are exceptions.) That line upon which the letters are aligned is the baseline. Setting the valign attribute to a value of baseline will align the content in your cell on the baseline. bottom
When the valign attribute is set to bottom, the cell’s content is aligned at the bottom of the cell, as shown in Figure 9.8.
6055_09.qxp
12/7/2006
12:00 PM
Page 159
Rows, Columns, and Cells
159
Figure 9.8 A valign value of bottom will align a cell’s content nicely along the bottom of the cell.
9 middle
A valign value of middle will center the cell’s content vertically, as shown in Figure 9.9. This is the default setting. If no valign attribute is specified, cell content will be centered vertically. Figure 9.9 A valign value of middle is the default setting and centers the cell’s content vertically.
top
The most common valign value is top. The table in Figure 9.10 shows the result of setting the valign value to top. Figure 9.10 A valign value of top is the most common configuration for most Web sites.
6055_09.qxp
160
12/7/2006
12:00 PM
Page 160
Chapter 9 Using Tables and Layout Tables
This setting is often employed when using tables to align sliced images, as you’ll see later in this chapter. Now that you know the basics of how a table is built in HTML code, let’s dig into how tables are created in Expression Web.
Tables in Expression Web There are several ways to work with tables in Expression Web, but you can break them all down into five major methods: the Insert Table dialog, Table menu, Tables toolbar (for drawing tables in the designer), the Layout Tables and Cells task pane, and the Tag Properties pane. Each method is suitable to specific types of tasks, but you may find that you gravitate more toward one than the others. Even so, it’s best to learn the strengths of each method so you can efficiently create and manage your tables.
9
➔
For more information on using the Tag Properties pane, see “Editing Tag Properties”, p. 238 (Chapter 13).
Inserting Tables The Insert Table dialog (see Figure 9.1) is displayed by choosing Table, Insert Table in Expression Web. If a table has already been inserted on your page, you can access the Table dialog by right-clicking on the table and selecting Table Properties from the menu. The Insert Table dialog is divided into several sections: ■ ■
Size—The Size section includes settings for the number of rows and columns. Layout—This section includes alignment settings, width and height settings, and celland cellspacing settings.
padding ■
Borders—This section includes settings for border size, border color, and a checkbox that allows you to easily collapse the border.
■
Background—This section includes a setting for background image and background color.
■
Layout Tools—This section includes a checkbox for enabling the table Layout Tools. We’ll discuss the Layout Tools later in this chapter.
■
Set—This section includes a checkbox to configure the default settings for future tables.
Customizing Tables Expression Web can automatically format your table using the AutoFormat feature. Select Table, Modify, Table AutoFormat to access the Table AutoFormat dialog as shown in Figure 9.11. However, it’s likely that you’ll want more control over the formatting, and for that, you’ll need to use the options available to you on the Table menu.
6055_09.qxp
12/7/2006
12:00 PM
Page 161
Tables in Expression Web Designer
161
Figure 9.11 The Table AutoFormat feature makes easy work of formatting a table. There are many attractive formats from which to choose.
9
TIP You’re not going to want to auto-format your table if you’re using it to control layout. The Table AutoFormat feature is well-suited to displaying data in a table, but it’s not a good choice for a table that defines layout.
The Table menu is actually made up of two menu systems. The Table menu on the main menu bar allows you to insert a new table or draw a new table. After a table has been added to your page, you can use either the Table menu on the main menu bar or the Table context menu (see Figure 9.12), accessed by right-clicking on a table, table row, column, or cell.
6055_09.qxp
162
12/7/2006
12:00 PM
Page 162
Chapter 9 Using Tables and Layout Tables
Figure 9.12 The Table context menu is a convenient way to alter a table that has already been inserted into a page.
9
The Table context menu is essentially the same menu that you’ll find on the main toolbar. However, when working on a table in the designer, it’s more convenient to be able to simply right-click on the table to change it. As we go through the rest of this section, you can use the Table menu on the main menu bar and the Table context menu interchangeably. Let’s work through some common table tasks using the Table menu. Begin by creating a new page. We’ll use this page to experiment with tables throughout the rest of this chapter.
1. Add a new table to your Web page by selecting Table, Insert Table from the main menu.
2. Make sure that the number of columns is set to 3, the number of rows is set to 2, the border size is set to 1, and the width is set to 400
pixels.
3. Set the border color to black. 4. Set cellspacing and cellpadding to 5 and click OK to insert the table. You should now have a table that looks like Figure 9.13.
6055_09.qxp
12/7/2006
12:00 PM
Page 163
Tables in Expression Web Designer
163
Figure 9.13 Even a simple HTML table has some pretty complex code behind it, but Expression Web makes it easy to create a table.
9
Selecting and Merging Cells The table you’ve created has two rows and three columns. Say that you want to add a graphic into the left column of this table, and you want that graphic to take up the entire column. There are a couple of ways to accomplish that. You could slice the graphic into two pieces and insert one piece in each cell in the column. However, because the table has cellspacing and cellpadding values of 5, that won’t result in the effect you want. Instead, as shown in Figure 9.14, you’ll end up with space around the graphic that makes it painfully obvious that it’s two graphic files. N OTE The graphics used in this chapter are located in the ch9\files\Website\images folder on the CD that accompanies this book.
In this case, a better solution would be to merge the two cells in the leftmost column into a single cell. You can then insert the Expression Web graphic into that one cell without having to slice it and you’ll end up with exactly what you want. TIP An alternative here would be to remove the cellspacing and cellpadding. However, for this example, we want to keep those settings as they are.
The first step in merging the cells in the leftmost column is to select both cells. There are many ways to do that. ■
Use the Quick Tag Tools.
■
Move the insertion point to the top of the column until the cursor becomes a downward-pointing arrow and click.
■
Select the first cell by clicking on it and then drag the mouse downward to select the entire column.
6055_09.qxp
164
12/7/2006
12:00 PM
Page 164
Chapter 9 Using Tables and Layout Tables
Figure 9.14 Slicing the Expression Web graphic for this table isn’t a good idea. As you can see, you end up with whitespace that makes it look awful.
9
➔ ➔
■
With the insertion point in one of the cells, hold the Ctrl key down and click in the other cell.
■
Select the HTML code in Code View.
For more information on using the Quick Tag Tools, see “Using the Quick Tag Tools”, p. 227 (Chapter 13). For more information on editing HTML code in Code View, see “Using Web Page Views”, p. 127 (Chapter 8).
I personally prefer to move the insertion point to the top of a column and then click when I see a downward-pointing arrow. After you select the cells, right-click on either of them and choose Modify, Merge Cells. You should end up with a table like Figure 9.15. Figure 9.15 The leftmost column of the table has now been merged into a single cell. It’s now a perfect spot for our Expression Web graphic.
6055_09.qxp
12/7/2006
12:00 PM
Page 165
Tables in Expression Web Designer
165
Click inside the cell that you’ve just merged and insert a graphic. You can use the ewd.jpg graphic from the ch10\files\Website\images folder on the CD that accompanies this book. Your table should now look like Figure 9.16. Figure 9.16 The image is now sitting in a column of merged cells and looks perfect.
9
➔
For more information on working with images in Expression Web, see “Using Graphics and Multimedia”, p. 241 (Chapter 14).
TIP You can split cells into two or more cells by right-clicking in a cell and choosing Modify, Split Cells. You can then split the cell into two rows or two columns.
Aligning Content in Cells At this point, the alignment in your table looks fine. However, as new content is added, things will change.
1. Add the newimage.jpg image to the top center cell. 2. Add the killer.jpg image to the bottom center cell. 3. Add some text to the upper right and lower right cells. You should now have a table that looks similar to Figure 9.17. Things have obviously gone terribly wrong and our table doesn’t look good at all at this point.
6055_09.qxp
166
12/7/2006
12:00 PM
Page 166
Chapter 9 Using Tables and Layout Tables
Figure 9.17 Our table has quickly gone from a nice-looking presentation to a terrible one. Fortunately, we can fix this pretty easily.
9
Fortunately, we can fix this problem with a few tweaks to alignment and a small change in the size of the table.
1. Right-click on the large graphic in the leftmost cell and choose Cell Properties from the menu. The Cell Properties dialog appears.
2. Click the Vertical Alignment dropdown and select Top, as shown in Figure 9.18. Click OK. 3. Repeat steps 1 and 2 for both cells in the right-most column.
Figure 9.18 The Cell Properties dialog is a quick and easy way to adjust the properties of a single cell.
6055_09.qxp
12/7/2006
12:00 PM
Page 167
Tables in Expression Web Designer
167
Your table should now look like Figure 9.19. Figure 9.19 The table is starting to take shape now. It’s still a bit narrow, but alignment looks good.
9
Adjusting Table Width The final step is to change the width of the table. There are several ways to adjust the width of a table. ■
Select the table and drag the right edge until the table is the desired width.
■
Edit the HTML in Code View.
■
Use the Quick Tag Tools.
■
Select Table, Table Properties, Table on the main menu to access the Table Properties dialog, where you can modify the width.
■
Right-click the table and choose Table Properties from the menu to access the Table Properties dialog, where you can modify the width.
To alter the width of the table in the Table dialog, check the Specify Width checkbox and enter a new value for the width, as shown in Figure 9.20. I have chosen a width of 765 and I’ve selected the In Pixels radio button so that the table will be 765 pixels in width. Your table should now look like Figure 9.21.
6055_09.qxp
168
12/7/2006
12:00 PM
Page 168
Chapter 9 Using Tables and Layout Tables
Figure 9.20 After the table’s width has been increased, the text becomes much more readable.
9
Figure 9.21 The completed table presents the information in a pleasing and well-formatted way.
6055_09.qxp
12/7/2006
12:00 PM
Page 169
Tables in Expression Web Designer
169
If your table runs way off the right edge of the screen after adjusting the width, see “Table Is Too Wide” in the “Troubleshooting” section of this chapter.
N OTE For the purpose of this example, I’ve created a table that may be too wide for some screen resolutions. We’ll talk more about designing for different resolutions later in this chapter.
9 How Expression Web Formats Tables As we’ve already discussed, many HTML techniques have been deprecated in favor of updated methods, most commonly using CSS. When you modify table properties using either the Table dialog or Table menu, Expression Web applies your settings using non-deprecated methods, in most cases. It does so in a couple of different ways: inline styles and embedded style sheets. The deprecated method of changing a table’s width is to use the width attribute on the
tag, as shown in the following example:
The preferred method of modifying a table’s width is to use CSS styles, and this is the method that Expression Web uses. The following code demonstrates how to specify table width using an inline style, the method Expression Web uses to specify table width:
Expression Web also uses embedded style sheets to format a table. For example, when you change the alignment of a table to right, Expression Web creates an embedded style sheet that defines a CSS class. (I realize that at this point, you may not understand what all of this means. We’ll cover CSS in-depth in Chapters 18, “Creating Style Sheets” and 19, “Managing CSS Styles”.) The following code is an example of an embedded style sheet that Expression Web creates to set the alignment of a table to right: <style> .style1{ text-align: right; }
Expression Web then wraps your table inside an HTML tag and assigns that tag the CSS class created above like so:
...
Those of you who have used Adobe Dreamweaver should be familiar with this technique because it’s the same way Dreamweaver works. I appreciate Expression Web using this updated method of applying styles to my table, but I don’t really like the naming convention it uses because it’s non-descriptive. Instead, I usually create my own styles and assign them as needed. You’ll learn how to do that when we cover CSS in subsequent chapters.
6055_09.qxp
170
12/7/2006
12:00 PM
Page 170
Chapter 9 Using Tables and Layout Tables
Adding and Deleting Rows and Columns In the example we just worked through, we created a table that had just the right number of rows and columns for our needs. In almost all cases in the real world, you will need to adjust the number of rows and/or columns after a table has already been inserted. Fortunately, Expression Web provides numerous ways for doing this.
9
It goes without saying that you can open the Table Properties dialog we’ve worked with previously and change the number of rows or columns. Adding a new row using this method will always add the row to the bottom of the table. Adding a new column using this method will always add the new column to the right side of the table. This may not be what you want, so if you want more control, you’ll need to use one of the other methods that Expression Web provides.
1. Right-click on the leftmost cell in the table and select Insert, Rows and Columns. 2. In the Insert Rows or Columns dialog, select Rows, making sure that the number of rows is set to 1, and that Below
Selection
is selected, as shown in Figure 9.22.
3. Click OK to insert a new row to the bottom of the table.
Figure 9.22 The Insert Rows or Columns dialog gives you full control over where rows or columns are added to your table.
TIP There are other ways to add a new row or column. The Table menu provides plenty of options for adding and deleting rows and columns. You can also add a new row by placing the insertion point in the rightmost bottom cell and pressing the Tab key on your keyboard.
Layout Tables and Cells We’ve covered most of the basics about tables and how to change the properties of them in Expression Web. Now we’ll get into some more interesting information about what you can actually do with tables.
6055_09.qxp
12/7/2006
12:00 PM
Page 171
Layout Tables and Cells
171
Designing Layout with Tables By far, the most common use of tables is to lay out page elements. As I mentioned when I opened this chapter, most Web sites use tables for site layout. However, the tools that we’ve covered up to this point are a bit awkward for designing complex layouts. Wouldn’t it be nice if you could just draw areas on a page with a pencil and let Expression Web create tables for you based on that drawing? It might surprise you to learn that Expression Web allows you to do just that!
Drawing Tables Using the Tables Toolbar The Draw Table feature in Expression Web makes it easy to draw a table within the designer. This feature is usually used in conjunction with the Tables toolbar, which will immediately become visible as you begin to draw your table. To draw a table in Expression Web:
1. Create a new page. 2. Select Table, Draw Table from the main menu. The Tables toolbar appears, as shown in Figure 9.23.
3. Click and drag to draw the outside borders of the table. 4. Click and drag to draw vertical and horizontal lines for the rows and columns.
Figure 9.23 The Tables toolbar gives you full control over tables in a convenient, dockable toolbar.
As you draw the lines that make up your table, Expression Web will create the appropriate rows and columns. You can then use the Tables toolbar to insert or delete new rows and columns.
Configuring Columns and Rows Using the Layout Tool The Layout Tool was first introduced by Microsoft in FrontPage 2003. I must admit that because I was so entrenched in the traditional way of working with tables, I largely ignored this feature for quite some time. I must also admit that once I tried the Layout Tool once, I couldn’t live without it.
9
6055_09.qxp
172
12/7/2006
12:00 PM
Page 172
Chapter 9 Using Tables and Layout Tables
The Layout Tool bears a slight resemblance to the table features in Adobe Dreamweaver, but it’s much more powerful and flexible. When you activate the Layout Tool, your table borders change to a green color to indicate that the Layout Tool is active. Expression Web provides indicators in the user interface (shown in Figure 9.24) that make precise resizing of cells easy. Simply drag cell borders to the desired dimensions using the size indicators as a guide. Figure 9.24
9
The table Layout Tool provides powerful features for configuring tables.
The Layout Tool is designed to assist you with configuring not only table layout, but also the dimensions of your table cells. Setting the dimensions of table cells properly can be challenging. If your table is 700 pixels wide, the combined width of all the columns in the table should add up to 700. It’s easy to skew the width of a column so that the combined width of all your columns is either less or more than the table’s width. When that happens, it’s likely that you won’t notice it, but you will notice bizarre behavior in your cells. For example, you might set the width to 20 pixels for a particular column and yet no matter what you do, the column appears to be much wider in Expression Web. The reason for this kind of odd behavior is simple: If you tell Expression Web that a table should be 700 pixels in width, it will expect that all of the columns of that table do actually add up to 700 pixels. When they don’t, Expression Web doesn’t know how to deal with it, so it guesses. One thing’s for sure: If you allow a computer to guess at anything, it will always guess wrong. Take a look at Figure 9.24 again. Notice the numbers around the edges of the table? These numbers tell you the width and height of the cells in the table. If your table is configured correctly, you will see only one number for each value. However, if there is a contradicting
6055_09.qxp
12/7/2006
12:00 PM
Page 173
Layout Tables and Cells
173
width or height somewhere in the table, Expression Web will display the contradicting value followed by the actual value in parentheses. I realize this might be a little hard to understand, so let’s have a look at it in detail. Instead of dealing with the entire table from Figure 9.24, let’s just look at the leftmost column. This column contains an image that is 216 pixels in width. The table cell itself is currently 220 pixels in width, but the actual HTML code says that the cell should be 84 pixels wide. Expression Web indicates this by displaying 84(220) in the layout cell, as shown in Figure 9.24.
9 TIP Not all widths and heights display by default. If you hover over one of the diamondshaped areas at the intersection of cells, Expression Web will display the dimensions of that particular cell.
To understand why Expression Web believes this cell should be 84 pixels wide, let’s look at the HTML code for this table. Listing 9.3 shows the HTML for the table.
Listing 9.3 1 2 3 4 5 6 7 8 9 10 11 12 13 14
HTML Code for the Table in Figure 9.26
NEWimage.com is the 8 only Web design shop you'll ever need.
15
After reading the material at the beginning of this chapter, this HTML code should be pretty easy to follow. You can see that there are two
pairs, one for each row. Each
pair within a
pair represents a column. If you look at Lines 11 and 12, you can clearly see that these cells are explicitly set to a width of 84 pixels. The corresponding cells in the rows above appear on Lines 4 and 6. In those cells, there is no explicit width setting, but the image in the first cell implicitly sets the width of those cells to at least 216 pixels, the width of the image. The result is a contradicting width of 84 pixels. Fortunately, the Layout Tool makes it easy to fix contradicting widths. What you should do in this scenario is explicitly set all the cells in the first column to at least 216 pixels. To do that in Expression Web, click the cell width indicator and select Change Column Width, as shown in Figure 9.25. This will display the Column Properties dialog (see Figure 9.26). In
6055_09.qxp
174
12/7/2006
12:00 PM
Page 174
Chapter 9 Using Tables and Layout Tables
the Column Properties dialog, set the Column Width to the desired value, check the Clear Contradicting Width checkbox, and click OK. In this case, the value we would enter for the column width is 221. By entering 221 for the column width, we account for the column width indicated by the Layout Tool along with the cell padding of 1 pixel. Figure 9.25
9
The Layout Tool includes the ability to alter column width directly from a cell.
Figure 9.26 Using the Column Properties dialog, you can easily fix any contradicting widths in table cells.
Let’s have another look at the HTML now that Expression Web has removed the contradicting width.
NEWimage.com is the only Web design shop you'll ever need.
6055_09.qxp
12/7/2006
12:00 PM
Page 175
Using the Layout Tables Task Pane
175
Notice that Expression Web did not add a width attribute to the cell containing the image. Instead, it increased the width on the corresponding cell in the second row to 221. The Layout Tool now shows the width without a contradicting width, as shown in Figure 9.27. Figure 9.27 The Layout Tool now shows that there is no contradicting width for the first column. Other columns still show contradicting values, but fixing that is easy.
9
If you choose the Clear Contradicting Height or Clear Contradicting Width checkbox and Expression Web still indicates that there is a contradicting width or height, see “Cannot Clear Contradicting Height or Width” in the “Troubleshooting” section of this chapter.
Using the Layout Tables Task Pane The Layout Tables task pane provides many tools to make creating and arranging layout tables easy. To access the Layout Tables task pane, select Task Panes, Layout Tables. TIP The Layout Tables menu item toggles the Layout Tables task pane on and off. If the Layout Tables menu item is checked but the task pane isn’t visible, select Layout Tables to uncheck the item and then select it again to re-check it. When you do, the task pane will receive the focus.
Using the Layout Tables task pane, you can: ■
Easily draw layout tables using drawing tools.
■
Draw new cells to arbitrary locations within an existing table.
■
Drag and drop cells inside a table as if they were self-contained objects.
■
Extend a table or parts of a table and let Expression Web draw the necessary columns and rows to maintain table integrity.
■
Force columns and rows to auto-stretch to contain content.
6055_09.qxp
176
12/7/2006
12:00 PM
Page 176
Chapter 9 Using Tables and Layout Tables
■
Take advantage of powerful cell formatting features using the Cell Formatting pane.
■
Ensure that table cells size correctly by inserting graphic spacers.
The Layout Tables task pane is a powerful method of accessing all the formatting features you’ll need to create complex tables of any makeup. If you’re willing to settle for a common layout, you can choose one from the Table Layout section of the task pane to create your table with one click, as shown in Figure 9.28.
9
Figure 9.28 The Layout Tables and Cells task pane is a great way to create common table layouts with a single click. Here, I’ve created a common layout and labeled cells with the content I want to put in them.
There are some tradeoffs to using the automatic layout feature. First of all, the ability to add new layout cells will be limited. You’ll be able to add new layout tables inside existing cells, but Expression Web won’t let you add cells to pre-existing tables using the drawing tools. Another capability that you’ll lose is the ability to drag and drop table cells to reposition them within your table. TIP As you are resizing your table cells, you can ensure that empty cells maintain their width by using a column spacing image in the cells. Expression Web makes it simple to insert a column spacing image. Just click the size indicator for the column with the Layout Tool activated and choose Use Column Spacer Image from the menu.
A better choice than the automatic layout feature is to start by drawing a new layout table using the Draw Layout Table tools shown in Figure 9.29. You can then draw new layout cells within the table using the Draw Layout Cell tool, also shown in Figure 9.29. If you
6055_09.qxp
12/7/2006
12:00 PM
Page 177
Troubleshooting
decide that your cell isn’t in quite the right place, you can actually drag and drop the cell right in Design view, which will dynamically recreate the table to match what you’ve drawn. Figure 9.29 The Draw Layout Table and Draw Layout Cell tools are the best options for creating new layout tables. Many other tools are available on the Layout Tables and Cells task pane.
Draw Layout Table Draw Layout Cell Show Layout Tool
Align Left Automatically scale cells
Table Width Table Height Align Right Align Center
Page Margin Settings
Automatic Table Layout
If you’re unable to drag a cell in layout mode, see “Cannot Drag and Drop Cells in Layout Table” in the “Troubleshooting” section of this chapter.
Troubleshooting Table Is Too Wide When I insert my table, the right edge is way off the screen. Why is that happening? Make sure that you aren’t setting a width of over 100%. This is commonly caused by moving from a pixel setting to a percentage setting. For example, if you have a table that is set to 600 pixels wide and you later decide to change it to a percentage, you might accidentally just select the Percent radio button in the Table dialog. Doing so will set the table to 600%, and such a setting would run clear off the right side of the page.
177
6055_09.qxp
178
12/7/2006
12:00 PM
Page 178
Chapter 9 Using Tables and Layout Tables
Cannot Clear Contradicting Height or Width I am trying to clear contradicting height and width settings in my layout table and Expression Web still shows that one exists even after clearing it. Expression Web sometimes doesn’t clear contradicting measurements on the first try. In such cases, try increasing the width or height of the cell you are adjusting by a value of 1. That should do the trick.
Cannot Drag and Drop Cells in Layout Table I am trying to reposition a cell in my layout table. I can drag it around just fine, but when I try to drop it, it just jumps back to its original position. You can only drag and drop layout cells. Chances are you are trying to drag a table within a table. The best method of ensuring that you won’t encounter this problem is to create your table as a layout table in the first place using the Layout Tables and Cells task pane.
Lagniappe (lan yap’) n.,
a gift or bonus
Designing for Multiple Resolutions Using Tables One of the most frustrating endeavors for Web developers is ensuring that a Web site looks great in all screen resolutions. If you design for a resolution of 1024×768 and someone with a resolution of 800×600 browses your page, it won’t look the same. There are a few different ways you can alleviate this problem. The first way is the easiest, and that is to set your main content table to a width of around 95%. Why 95% instead of 100%? It will look better if you allow for a small buffer space around the window’s scrollbars, and so on. The second way is to specify a pixel width for those columns that require it and then have one column that is configured to fill the rest of the available screen space. For example, suppose you have a table with a menu along the left border and some ads along the right border. You would want the left and right borders to be a fixed pixel size so that they match the size of the menu and the ads. The center column can be configured to fill the rest of the screen area by setting it to 100%. The last method is to create your table so that it will fit nicely in the lowest resolution you believe people will use when visiting your Web site. If you choose this route, you’ll want to make sure that you account for the fact that you don’t really have 100% of the width of the screen to work with. For example, my wife runs her computer at a resolution of 1024×768, but she also always keeps the Favorites panel open in her Web browser. Therefore, she’s got about 800 pixels in width that is visible to her even though her screen resolution is quite a bit higher. Which method should you choose? The first two are the best choices. If you go with a percentage value, you can always be sure that most people will be able to view all your content without unnecessary scrolling.
6055_10.qxp
12/7/2006
12:02 PM
Page 179
CHAPTER
Using Frames
In this chapter Using Frames in Web Sites Creating Frames Pages Configuring Frames Creating Alternate Content Targeting Frames in Hyperlinks Adding and Configuring Inline Frames Troubleshooting Lagniappe: Tips for Frames
10
6055_10.qxp
180
12/7/2006
12:02 PM
Page 180
Chapter 10 Using Frames
Using Frames in Web Sites HTML frames have been around for quite a while. A frames page is a page that is segmented into two or more sections called frames. Each frame contains a separate page and can be configured with scrollbars and a frame border that can be either fixed or resizable. If you’ve spent any amount of time discussing Web design with other Web designers, you’ve no doubt encountered what I call the “never use it” mentality. Web designers with this mentality maintain a list of Web design techniques they claim should never be used under any circumstance. The use of frames is a technique that appears on many of those lists, but as with any technique, there are effective uses for frames. The trick is in knowing when to use them.
When to Use Frames 10
One of the most common uses of frames is in separating navigation elements from other page content, especially when the navigation components require scrolling. The benefit of using frames in such setups is that you can scroll the page containing the navigation elements without scrolling the page containing the main content. One of the best examples of this type of setup is Microsoft’s MSDN Library Web site (shown in Figure 10.1). The navigation tree in the left frame contains a large number of nodes. In this case, the number of navigation options is so vast that it would create a significant amount of whitespace in the main page on the right if everything was in one frame. Therefore, this is an excellent use of frames for site navigation. Figure 10.1 The MSDN Library is an excellent example of when using frames is a smart choice.
6055_10.qxp
12/7/2006
12:02 PM
Page 181
Creating Frames Pages
181
When Not to Use Frames There’s a general rule of thumb that dictates when you should not use frames: Don’t use frames unless your site design warrants using frames. There are several drawbacks to using frames, and using them when they aren’t warranted only invites problems. Some of the drawbacks of frames are: ■
Search engines will often index pages that are part of a frameset. When that happens, search results can link to pages that don’t include your navigation or other important page elements.
■
They may not render the same way on all computers. Frames include window elements such as scrollbars that aren’t always the same size in every browser, thereby causing rendering problems in some cases.
■
When a frames page links to another frames page, you end up with nested frames. This can be extremely frustrating for users of your Web site.
You must also take into account that the text size in browsers can be (and often is) adjusted by users with low vision and for other reasons. If your frames are designed for text of a certain size and a site visitor alters the text size in the browser, it can modify your Web site’s layout in unpredictable ways. TIP There is a movement under way (and there has been for quite some time) to replace frames with CSS. In fact, doing so is quite possible and it works well in modern browsers. You can read about a method of doing this at www.webreference.com/programming/ css_frames/.
Creating Frames Pages Frames pages (as opposed to inline frames, which I’ll discuss later) are actually made up of multiple pages. At the top level is the frameset page. The frameset page doesn’t actually contain any visible content. Instead, it contains HTML code that defines two or more frames and their layout. N OTE
It’s technically possible to have a frameset that defines only one frame. However, there’s really no point to this setup.
To create a new frameset in Expression Web:
1. Select File, New, Page. 2. Select Frames Pages from the list of page types.
10
6055_10.qxp
182
12/7/2006
12:02 PM
Page 182
Chapter 10 Using Frames
3. Select the frame layout of your choice from the list in the New dialog, as shown in Figure 10.2. For this example, I chose the Contents layout. Figure 10.2 Expression Web gives you many frame layout choices.
10
After Expression Web creates the frameset, you’ll have a choice of either creating a new page for each frame or choosing an existing page to appear within the frame. To create a new page, click the New Page button shown in Figure 10.3.
Figure 10.3 When you create a frameset, you can choose to create a new page for a frame or use an existing page.
6055_10.qxp
12/7/2006
12:02 PM
Page 183
Configuring Frames
183
To use an existing page, click the Set Initial Page button to display the Insert Hyperlink dialog, where you can choose a page. You can also enter a URL to a location not in your Web site, as shown in Figure 10.4. After you click OK, the page or URL you specified will be loaded into the frame. Figure 10.4 In addition to choosing files in your Web site for frame content, you can also enter a URL.
10
CAUTION If your frame displays content from a Web site other than your own, you will be displaying Web content not under your own control. Keep this in mind when designing your site. I’ve almost never encountered a situation where showing content from another site in a frame was a good idea.
Configuring Frames To configure frames in a frameset, right-click the frame and choose Frame Properties from the menu. Alternatively, you can select the frame and select Format, Frames, Frame Properties. Either method will display the Frame Properties dialog shown in Figure 10.5. The following properties are configurable in the Frame Properties dialog: ■
Name—The name of the frame can be used when you need to direct hyperlinks to open in that frame. Links with a target attribute of “main” will open in the frame being configured (refer to the example shown in Figure 10.5).
■
Initial Page—The initial page is the URL displayed in the frame when it is first loaded.
■
Long Description—The long description specifies the URL of a file that contains a long description of what appears in the frame. This is used by screen readers.
■
Title—The title is a short description of the frame’s contents. It is also used by screen readers.
6055_10.qxp
184
12/7/2006
12:02 PM
Page 184
Chapter 10 Using Frames
Figure 10.5 All frame properties are easily configured using the Frame Properties dialog.
10 ■
Frame Size Width and Row Height—Specifies the width and height of the frame. This can be relative to other frames in the frameset, a percentage of available window space, or absolute pixel dimensions.
■
Margin Width and Height—Specifies the margins for the frame.
■
Resizable in Browser—When checked, the frame can be resized by dragging the border in the browser.
■
Show Scrollbars—Configures whether or not scrollbars are displayed. Can be set to the following: If Needed, Never, or Always.
CAUTION If you set Show Scrollbars to Never and the frame’s content extends beyond the borders of the frame, any content outside the frame will be inaccessible by users of your Web site.
By clicking the Frames Page button shown previously in Figure 10.5, you can access properties for the frameset page, as shown in Figure 10.6. Adjusting the Frame Spacing value changes the width of the border between frames. To remove the border completely, remove the check from the Show Borders checkbox. CAUTION The Frame Spacing setting adds a framespacing attribute to the tag in your page. The framespacing attribute is only recognized by Internet Explorer and is a non-standard attribute. It will be ignored by other browsers.
6055_10.qxp
12/7/2006
12:02 PM
Page 185
Configuring Frames
185
Figure 10.6 Properties for the frameset page are configured in the Page Properties dialog.
10
Splitting Frames To split a frame into two frames, select the frame and then select Format, Frames, Split Frame. Expression Web will display the Split Frame dialog shown in Figure 10.7, where you can choose to split the frame into columns or rows.
Figure 10.7 A frame can be split into two frames sideby-side or stacked one on top of the other.
When a frame is split into two frames, each of the two frames will be 50% of the width or height of the original frame. N OTE
➔
If you are considering splitting a frame, consider whether it might not be more appropriate to simply add a table to the existing page instead. Splitting frames can create a user interface for your Web site that is awkward to navigate.
For more information on adding tables to a page, see “Tables in Expression Web,” p. 160 (Chapter 9).
6055_10.qxp
186
12/7/2006
12:02 PM
Page 186
Chapter 10 Using Frames
Deleting Frames To delete a frame, select the frame and then select Format, Frames, Delete Frame. Expression Web will remove the frame immediately without confirmation. If you remove a frame inadvertently, you can select Edit, Undo Delete Frame or press Ctrl-Z to restore it.
Creating Alternate Content Frames are a fairly old technology (they were introduced in Netscape 2.0) and are supported in all modern browsers. However, frames are one of the few HTML techniques that have no graceful fallback. When browsers encounter a tag they don’t understand, they simply ignore the tag. In most cases, that doesn’t present much of a problem, but in the case of frames, the page containing the frame tags doesn’t contain any content. It only contains tags that define the frames. For that reason, when a browser that doesn’t understand frames loads that page, it simply won’t display anything at all.
10 N OTE
Keep in mind that your Web site will rarely (if ever) be visited by someone using a browser that doesn’t support frames.
Fortunately, there is a way to specify alternate content for browsers that don’t understand frames. By using the No Frames view, as shown in Figure 10.8, you can specify content to be displayed for browsers that don’t support frames. Figure 10.8 The No Frames view allows you to enter content to be displayed when a browser doesn’t support frames.
The default message provided by Expression Web (shown in Figure 10.8) isn’t very useful, so you’ll likely want to add your own content. Therein lies one of the problems with frames. If you’re going to create content in the No Frames view that emulates your frames content,
6055_10.qxp
12/7/2006
12:02 PM
Page 187
Targeting Frames in Hyperlinks
187
you may as well carefully evaluate whether the frameless content is suitable for everyone as a substitute for frames. TIP I’ve alluded to this before, but it’s worth repeating. As a general rule of thumb, when in doubt, don’t use frames.
Targeting Frames in Hyperlinks Expression Web allows you to easily configure a hyperlink to target a particular frame. To cause a hyperlinked URL to display in a specific frame:
1. Insert a hyperlink. 2. In the Insert Hyperlink dialog, click Target Frame, as shown in Figure 10.9. 10 Figure 10.9 The Target Frame button in the Insert Hyperlink dialog makes targeting a specific frame easy.
3. In the Target Frame dialog, enter the name of the frame you want to target. You can also simply click on the frame that you want to target in the Current Frames Page representation, as shown in Figure 10.10.
6055_10.qxp
188
12/7/2006
12:02 PM
Page 188
Chapter 10 Using Frames
Figure 10.10 Expression Web provides a visual representation of the current frames page. Clicking on a frame will cause the current hyperlink to target that frame.
If your hyperlink targets a specific frame but clicking the hyperlink opens a new window instead, see “Targeted Hyperlink Opens New Window” in the “Troubleshooting” section of this chapter.
10
4. Click OK to dismiss the Target Frame dialog. 5. Enter a URL for the hyperlink or select a page from the Insert Hyperlink dialog and click OK to insert the hyperlink.
Editing Files in Frames Pages When you right-click on a frame and select Open Page in New Window, the page that is loaded into that frame will open in a new window. This is a convenient way to edit a page because it gives you access to the entire design surface in Expression Web. When you edit a page within a frame by opening a frameset, it is often awkward to manipulate page elements. By opening the page in a new window, you can more easily edit the page’s contents. Just keep in mind that the frame that will hold the page when it’s browsed will contain less screen real estate and size your elements accordingly.
Adding and Configuring Inline Frames So far in this chapter we’ve covered using frames inside a frameset page. Using this method, a single page is broken up into multiple frames. Another type of frame available to you in Expression Web is the inline frame. An inline frame is a frame that can be inserted into an existing page and can be any size you wish.
➔
For more information on layers, see “Using Layers,” p. 439 (Chapter 25).
Figure 10.11 shows an inline frame into which I have loaded the Microsoft Xbox 360 Web site. Notice that there are scrollbars so you can scroll around the entire page displayed by the inline frame.
6055_10.qxp
12/7/2006
12:02 PM
Page 189
Adding and Configuring Inline Frames
189
Figure 10.11 An inline frame allows you to have a page within a page. In this case, the Microsoft Xbox 360 Web site is displayed inside an inline frame.
10
N OTE
In most cases, you will want to display your own content inside an inline frame. The inline frame shown in Figure 10.11 displays an external Web site so you can more clearly see exactly what the inline frame does.
To insert an inline frame, place the insertion point where you would like the inline frame and double-click on the Inline Frame control in the Toolbox. When you do, you will be given the option of specifying an initial page or creating a new page for the frame’s content, as shown in Figure 10.12. After you’ve added content in an inline frame, you can control that inline frame’s properties by right-clicking on the inline frame and selecting Inline Frame Properties from the menu. Doing so displays the Inline Frame Properties dialog shown in Figure 10.13. TIP By inserting an inline frame inside a layer, you can position the inline frame anywhere you’d like on the page by simply dragging the layer.
The options available in the Inline Frame Properties dialog are essentially the same as those available in the Frame Properties dialog previously shown in Figure 10.5. One notable exception is that the Inline Frame Properties dialog provides an Alternate Text textbox for entering content to be displayed for users who cannot see inline frames.
6055_10.qxp
190
12/7/2006
12:02 PM
Page 190
Chapter 10 Using Frames
Figure 10.12 Selecting a page for display in an inline frame is performed just as it was with a frameset. You can specify an initial page or create a new page.
10
Figure 10.13 Inline frames are configured using the Inline Frame Properties dialog.
TIP You can enter HTML code into the Alternate Text textbox in the Inline Frame Properties dialog. By using HTML as alternate text, you can display alternate content that shares a look and feel with the rest of your Web site.
6055_10.qxp
12/7/2006
12:02 PM
Page 191
Lagniappe: Tips for Frames
As with frames pages, you can target an inline frame with hyperlinks by specifying the name of the inline frame in the target attribute of the hyperlink. This is a common way of updating a portion of a page when a link is clicked elsewhere on the page.
Troubleshooting Targeted Hyperlink Opens New Window I’ve created a hyperlink that uses the target attribute to target one of my frames. However, when I click the link, the page opens in a new window instead. It’s likely that you have inadvertently misspelled the frame name in the target attribute. When an unknown frame name is specified for a target, most browsers will simply open a new window to display the link.
Lagniappe (lan yap’) n.,
a gift or bonus
Tips for Frames As I mentioned when I opened this chapter, there are plenty of Web designers who will tell you that you should never use frames. I’m not one of them. However, you should carefully consider the possibility of using tables or other design elements such as CSS. If you do decide that frames are the right choice for you, there are some general tips you should follow so that they don’t become a point of frustration for users of your site. N OTE
If you’d like some guidelines on when to use frames and when you might want to consider other options, see “Using Frames in Web Sites” earlier in this chapter.
Frame Borders As you’ve seen in this chapter, it’s possible to configure a frames page so there are no borders on the frames. Before you choose to go borderless, you should carefully consider your site’s design. If you have user interface elements such as graphics that distinguish the frame from the rest of your page, removing the borders may be a suitable option. Examine the page in Figure 10.14. The navigation links at the left side are in one frame and the main content is in another. However, there’s no way to tell that it’s a frames page by looking at it. If I scrolled the content page, the navigation would remain in place. That may be what you want, but it may also be confusing to some users. By placing a border on the frame, it provides a visual indicator that the two parts of the page are separate.
191
6055_10.qxp
192
12/7/2006
12:02 PM
Page 192
Chapter 10 Using Frames
Figure 10.14 Borderless frames can be confusing to users because there is no visual indicator that the frames are separate.
Resizable Frames When adding frames for navigation elements, it’s often tempting to configure the frames so they cannot be resized. Depending on the site’s design, that may or may not be a good idea. If the content in the frame consists of text, it can often be a bad idea not to allow users to resize the frame. Some users of your Web site may have adjusted the size of the text in their browser. In some cases, this may cause your text to overflow the frame. The page in Figure 10.15 is an example of bad design with frames. Notice that the Contact link is not fully visible because I have adjusted the text size in my browser.
Figure 10.15 Text inside a frame can overflow the frame if a user adjusts the text size in his/her browser.
6055_10.qxp
12/7/2006
12:02 PM
Page 193
Lagniappe: Tips for Frames
When using frames in your Web site, make sure that you test carefully. Adjust the size of the text in your browser and test your site again. The goal is to make your site look the way you intend for all site visitors. With careful testing and design, you can easily reach that goal.
Breaking Out of a Frameset If you do use frames in your Web site, you run the risk of your frames page being displayed inside of a nested frameset. Figure 10.16 shows an example of a nested frameset caused by a link inside of a frameset linking to a frames page. Figure 10.16 A nested frameset caused by a frames page linking to another frames page. Notice that there are two navigation frames, one belonging to the previous frames page.
The solution to this problem is to include a JavaScript snippet that will break out of a frameset. Simply include the following snippet inside of your section in the frameset page. <script language=”javascript” type=”text/javascript”> if (window != top) top.location.href = location.href;
This script will force the frameset page to break out of any nested framesets when it is loaded.
193
6055_10.qxp
12/7/2006
12:02 PM
Page 194
6055_11.qxp
12/7/2006
12:04 PM
Page 195
CHAPTER
Using Form Controls
In this chapter Understanding HTML Forms Using Form Controls in Expression Web Creating a Form Saving Form Results to a File or E-mail Saving Form Results to a Database Troubleshooting Lagniappe: Hidden Form Fields
11
6055_11.qxp
196
12/7/2006
12:04 PM
Page 196
Chapter 11 Using Form Controls
Understanding HTML Forms In the early days of the Internet, communication was strictly one-way. You visited a Web site and the site pushed information down to your browser. A few years later, HTML forms were introduced and for the first time, Web designers had a means of collecting information from those visiting their Web sites. Nowadays, almost every Web site uses HTML forms in one way or another. CAUTION Unless precautions are taken, providing forms on a Web site can be a security risk. In most cases, data provided by users via a form will be manipulated using code on the Web server. It is possible for a malicious user to provide data in a form that can be damaging to your Web site or the Web server on which it runs.
An HTML form consists of one or more form controls such as textboxes, dropdown lists, or buttons. Once information is selected or entered into the form, it is generally submitted to the Web server for processing. N OTE
11
➔
Some Web sites use forms to allow users to manipulate an existing page. In those cases, the Web server doesn’t process the data. Instead, the site designer typically uses JavaScript to determine what data was entered and what choices were made and then responds appropriately by changing the page’s content, by requesting a different page .
For more information on manipulating a page using JavaScript, see “Client-side Scripting,” p. 415 (Chapter 24).
To process form data on a Web server, code that runs on the Web server must be written. Technologies such as PHP, ASP, and ASP.NET are often used to process that form data. Expression Web allows you to connect an HTML form to server-side code for processing, but it also provides a few ways for you to process a form without writing any code at all.
➔
For more information on using ASP.NET to work with form data, see “Using Standard ASP.NET Controls,” p. 495 (Chapter 28).
Using Form Controls in Expression Web Form controls in Expression Web are located in the Toolbox. As shown in Figure 11.1, there are 16 form controls available.
6055_11.qxp
12/7/2006
12:04 PM
Page 197
Using Form Controls in Expression Web
197
Figure 11.1 The Toolbox contains 16 form controls, making it easy to create HTML forms.
11 Table 11.1 lists the form controls that are available.
Table 11.1
Form Controls
Control
HTML Tag
Details
Advanced Button
Allows you to embed HTML content inside a button. Some browsers don’t display this control correctly.
Drop-Down Box
<select>
Allows you to create a dropdown box of preset choices from which a user can make a selection.
Form
Is the container control for all other form controls. This control also provides access to the form handlers provided by Expression Web.
Group Box
Segments part of a form into a separate container. This is often used to avoid confusion on large forms and to make forms more accessible.
Input (Button)
Creates a generic HTML button that can be used for JavaScript, and others. While buttons are most often used for submitting or resetting a form, this control is a generic button whose purpose is defined by the designer.
continues
6055_11.qxp
198
12/7/2006
12:04 PM
Page 198
Chapter 11 Using Form Controls
Table 11.1
Continued
Control
HTML Tag
Details
Input (Checkbox)
Creates a standard HTML checkbox. The checkbox is typically used as a true/false control.
Input (File)
Creates a textbox with a Browse button so a user of the form can browse for a file on his or her local computer to submit along with the form.
Input (Hidden)
Creates a textbox that is not visible to the user. Hidden textboxes allow you to include data in a form that is not visible to the user.
Input (Image)
Allows you to use an image as a button.
Input (Password)
Creates a textbox that displays dots or asterisks in place of text when data is entered into it. These are commonly used for password fields.
Input (Radio)
Creates a radio button. A form that uses this control will have at least two radio buttons grouped together, and only one of those radio buttons can be selected at a time.
Input (Reset)
Creates a button that resets the form. Resetting a form causes all form fields to revert to the values they had when the page was originally loaded.
Input (Submit)
Creates a typical button that submits the form.
Input (Text)
Creates a standard HTML textbox.
Label
Associates a text label with a form control. This control is typically used for accessibility.
Text Area
Creates a multi-row and/or multi-column textbox.
11
Expression Web allows you to easily save form results to a file, send results to an e-mail, or save form results into a database. We’ll cover each of these options in detail.
Creating a Form The obvious reason for including an HTML form on a page is so you can collect data from visitors to your Web site. After you’ve collected that data, Expression Web provides the capability of storing it in a file (such as a text file, an XML file, or an HTML file), sending the results to a specific e-mail address, or saving the results to a database. Let’s create a simple form that will allow us to collect site feedback from users. To do that, you’ll want to create a new Web site or open an existing Web site. The site can be a diskbased Web site, but to test the form’s functionality, you’ll need to publish your Web site to a server running the FrontPage Server Extensions.
6055_11.qxp
12/7/2006
12:04 PM
Page 199
Creating a Form
N OTE
➔
199
If you’d prefer to work with a completed example, you can use the completed Web site located in the Examples\Ch11\Files\Website folder on the CD that accompanies this book. Publish that Web site to a Web server running the FrontPage Server Extensions.
For more information on publishing a Web site to a Web server with the FrontPage Server Extensions, see “Publishing a Web Site”, p. 41 (Chapter 3).
1. Create a new HTML page. N OTE
To save results to a database, you’ll need to use an ASP page. However, the first example will require a static HTML page, so just create an HTML page at this point.
2. From the Form Controls section of the Toolbox, insert a new Form control. 3. Place the insertion point inside the form. 4. Insert a new table on the page. Set the table width to 550 and select the In Pixels radio button. Leave all other settings at their defaults.
➔
For more information on adding and configuring tables, see “Using Tables and Layout Tables”, p. 149 (Chapter 9).
5. Place the insertion point in the upper left cell of the table. 6. Enter the text “Enter
your e-mail:”.
7. Press Tab to move to the next cell to the right. 8. From the Form Controls section of the Toolbox, add an Input
(Text)
control.
9. With the Input (Text) control still selected, locate the Name attribute in the Tag Properties task pane.
➔
For more information on using the Tag Properties task pane, see “Editing Tag Properties”, p. 215 (Chapter 12).
10. Change the Name attribute to “Email”. 11. Locate the Style attribute in the Tag Properties task pane. 12. Click the button in the value column of the Style attribute to display the Modify Style dialog.
13. Select the Position category in the Modify Style dialog. 14. Set the Width to 200 px (shown in Figure 11.2) and click OK.
11
6055_11.qxp
200
12/7/2006
12:04 PM
Page 200
Chapter 11 Using Form Controls
Figure 11.2 The Modify Style dialog is a quick way of changing the appearance of a form element.
11
➔
For more information on using the Modify Style dialog, see “Managing CSS Styles”, p. 311 (Chapter 18).
15. Place the insertion point in the leftmost cell of the second row. 16. Enter the text “Enter
comment:”.
17. Press Tab to move to the next cell to the right. 18. From the Form Controls section of the Toolbox, insert a Text
Area
control.
19. With the Text Area control still selected, locate the Name attribute in the Tag Properties task pane.
20. Change the Name attribute to “Comment”. 21. Locate the Style attribute in the Tag Properties task pane. 22. Click the button in the value column of the Style attribute to display the Modify Style dialog.
23. Select the Position category in the Modify Style dialog. 24. Enter a value of 375 px for the width and 100 px for the height and click OK.
6055_11.qxp
12/7/2006
12:04 PM
Page 201
Saving Form Results to a File or E-mail
201
25. Select Table, Insert, Row Below to insert a new table row. (If the Insert menu item is disabled, click once on the Text Area control to select it first.)
26. Place the insertion point in the bottom right corner cell. 27. From the Form Controls section of the Toolbox, insert a new Input
(Submit)
control.
28. Press Ctrl+R to right-align the button in the table cell. Your page should now look like Figure 11.3. Figure 11.3 This simple form will be used to collect feedback from site visitors.
Saving Form Results to a File or E-mail By default, a form created in Expression Web does nothing. When you browse the form and submit it, nothing happens. Let’s add some functionality to our feedback form by configuring it to save results to a file and an e-mail address. Right-click on the form you created previously and select Form Properties from the menu to display the Form Properties dialog, as shown in Figure 11.4. Figure 11.4 Form handlers are configured in the Form Properties dialog. Most options here require the FrontPage Server Extensions.
11
6055_11.qxp
202
12/7/2006
12:04 PM
Page 202
Chapter 11 Using Form Controls
Three methods of saving form results are available in the Form Properties dialog: ■
Send To—This option allows you to save form results to a file and/or send them to an e-mail address.
■
Send To Database—This option allows you to save form results to a database. You can also have Expression Web create a Microsoft Access database for you.
■
Send To Other—This option enables you to use a custom form handler.
You can configure options for each of these methods using the Options button shown previously in Figure 11.4. The options available differ depending on the method you choose. CAUTION If you change the selected method in the Form Properties dialog, any options configured will be reset to the defaults and cannot be retrieved. If you inadvertently change the method and lose your configuration, click Cancel in the Form Properties dialog. You can then go back to the Form Properties dialog and your previous options will be restored.
To configure a form to save results to a file and e-mail:
1. Select the Send To radio button (the first method). 11
2. Enter “_private/results.txt” in the File Name textbox. 3. Enter your e-mail address in the E-mail Address textbox. 4. Click the Options button to display the Saving Results dialog, as shown in Figure 11.5.
Figure 11.5 The Saving Results dialog provides many options for saving form results.
6055_11.qxp
12/7/2006
12:04 PM
Page 203
Saving Form Results to a File or E-mail
203
When using the Send To method of saving form results, the Saving Results dialog contains a series of four tabs.
File Results Tab The File Results tab provides options for saving results to a file. In addition to specifying the filename, you can also choose from many different file types, as shown in Figure 11.6. If you’d like to save results to two different file formats, you have the option of choosing a second file. Figure 11.6 There are many file types from which to choose when saving results.
11
CAUTION To save results to an XML file, the remote server must be running Windows SharePoint Services. Because Windows SharePoint Services are typically used in a corporate environment, most shared hosting companies don’t offer them. If you’re running your site in a shared hosting environment, check with your host to be sure.
Form field names can be included in your form results by checking the Include Field Names checkbox. If you choose not to include field names, only the data entered into the form field will be saved. When saving results to a text database file format, field names will be saved as a header row in the results file.
6055_11.qxp
204
12/7/2006
12:04 PM
Page 204
Chapter 11 Using Form Controls
TIP The text database formats are useful if you intend to import the form results into a database or spreadsheet later. To save your form results to a database directly, use the Send To Database form handler provided by Expression Web.
By default, the latest form results are appended to the bottom of the file to which they are saved. Some file types (XML and HTML file types) allow you to choose between appending results to the file or adding them to the top of the file via the Latest Results at End checkbox. If the checkbox is checked, results are appended to the bottom of the file; otherwise, they are added to the top of existing results. If the Latest Results at End checkbox is disabled, see “Latest Results at End Checkbox Disabled” in the “Troubleshooting” section of this chapter.
E-mail Results Tab The E-mail Results tab (shown in Figure 11.7) provides configuration options for e-mail results.
Figure 11.7
11
E-mail options are configured in the E-mail Results tab.
Enter the e-mail address you would like form results sent to in the E-mail Address to Receive Results textbox. It would be nice to also be able to send a copy of the results to the user filling out the form, but there isn’t an automated way of doing that.
6055_11.qxp
12/7/2006
12:04 PM
Page 205
Saving Form Results to a File or E-mail
205
TIP If you already entered an e-mail address in the Form Properties dialog, that e-mail address will already appear in the E-mail Address to Receive Results textbox.
CAUTION Carefully check the e-mail address you enter. Expression Web does not check to be sure you enter a valid e-mail address.
Choose the format of the e-mail in the E-mail Format dropdown. The formatting options are the same as those presented in the File Results tab. If you’d like field names to be included in the e-mail, check the Include Field Names checkbox. To specify a subject for the e-mail, enter it into the Subject Line textbox. You can also use the value of a form field for the subject. For example, if you had a dropdown field named “Subject” in your form that allowed users to select the subject of their comment, you could use the value from the dropdown as the e-mail subject by checking the Form Field Name checkbox and typing “Subject” in the Subject Line textbox. To configure a form with this capability, follow these steps.
1. Create a new page or open an existing page. 2. Add a new Drop-Down
Box
control from the Form Controls section of the toolbox.
CAUTION Make sure that you don’t use the DropDownList control in the ASP.NET section of the toolbox. You want the HTML control instead.
3. Double-click on the Drop-Down
Box
control to display the Drop-Down Box Properties
dialog.
4. Enter Subject in the Name textbox. 5. Click the Modify button to modify the choice in the Drop-Down Box. 6. Enter Web
Site Feedback
in the Choice textbox.
7. Select the Selected radio button. 8. Click OK to dismiss the Modify Choice dialog. 9. Click the Add button to add a new choice. 10. Enter Company
Feedback
in the Choice textbox.
11. Click OK to dismiss the Modify Choice dialog. 12. Click OK to dismiss the Drop-Down Box Properties dialog. You can now check the Form Field Name checkbox next to the Subject Line and specify Subject as the Subject Line in the Saving Results dialog.
11
6055_11.qxp
206
12/7/2006
12:04 PM
Page 206
Chapter 11 Using Form Controls
The Reply-To Line textbox allows you to specify the e-mail address used when a recipient of the e-mail responds. You can use a form field value for the Reply To address by checking the Form Field Name checkbox and entering the name of the form field in the Reply To Line textbox. If you receive an error message asking if you’d like to remove the e-mail recipient when configuring a form to send results to e-mail, see “Asked to Remove E-mail Recipient” in the “Troubleshooting” section of this chapter.
Confirmation Page Tab When a user submits data in a form, he or she will see a default confirmation page, as shown in Figure 11.8. While certainly a functional confirmation page, it’s not very attractive and it likely won’t match the layout or appearance of your Web site. Figure 11.8 A default confirmation page is provided, but it’s generic and not very attractive.
11
If you have a page in your Web site that you’d prefer to use as a confirmation page, you can specify the URL in the URL of Confirmation Page textbox in the Confirmation Page tab (shown in Figure 11.9). A custom confirmation page gives a more professional appearance by matching the layout and design of your Web site. However, the confirmation page must be a static HTML page, which prevents you from displaying any customized content to the user such as confirmation of the data submitted.
6055_11.qxp
12/7/2006
12:04 PM
Page 207
Saving Form Results to a File or E-mail
207
Figure 11.9 The Confirmation Page tab allows you to specify a custom confirmation page and a validation failure page.
If validation has been enabled on any of the form fields in your form, you can also specify the URL of a page to be displayed when validation fails. The validation failure page will only be displayed if validation takes place on the server. If the validation failure page textbox is disabled, see “Cannot Enter Validation Failure Page” in the “Troubleshooting” section of this chapter.
Saved Fields Tab By default, Expression Web saves all form fields when a form is submitted. You can override this behavior using the Saved Fields tab, as shown in Figure 11.10. As you can see in Figure 11.10, Expression Web is saving not only the two text fields from the form, but also the Submit button. If you’d like to remove the Submit button from the saved fields, simply delete “Submit1” from the list of saved fields and click OK. N OTE
If you are saving the form results into a file and you plan on importing the data into a database at a later time, you may want to prevent the Submit button from being saved so as not to pollute your data.
11
6055_11.qxp
208
12/7/2006
12:04 PM
Page 208
Chapter 11 Using Form Controls
Figure 11.10 The Saved Fields tab controls how much data gets saved when a form is submitted.
11
You also have the choice of saving the date and time a form was submitted by choosing a date format and time format from the appropriate dropdowns. You can also choose to save the remote computer name, browser type, or username by checking the corresponding checkbox. TIP The username will only be saved if the user is required to log in before submitting the form. If the user is browsing anonymously, the username will not be available.
Saving Form Results to a Database If you’d prefer to keep form results stored in a database, Expression Web provides you with the ability to send form results directly into a database when a form is submitted using the Send To Database form handler, as shown in Figure 11.11. Let’s configure our HTML form to save results into a Microsoft Access database:
1. Open default.htm and save it as database.asp. 2. Right-click the form and select Form Properties. 3. Select the Send To Database option. 4. Click the Options button to display the Options for Saving Results to Database dialog, shown in Figure 11.11.
6055_11.qxp
12/7/2006
12:04 PM
Page 209
Saving Form Results to a Database
209
Figure 11.11 The Send to Database form handler is a simple way to save form results directly into a database.
When the dialog is first displayed, there are no database connections available in the Database Connection to Use dropdown. You can create a new connection by clicking the Add Connection button, or you can click the Create Database button to have the FrontPage Server Extensions create a Microsoft Access database along with a connection to that database. In this case, we want to let the FrontPage Server Extensions create a database for us, so click the Create Database button to generate a Microsoft Access database with a field for each form field. CAUTION The database that gets created is a Microsoft Access 2002 database. If you use Microsoft Access 2007 to edit the database, do not save it or convert it to a Microsoft Access 2007 database file. Doing so will prevent it from working correctly with your forms.
After the database has been created, the Database Connection To Use and Table To Hold Form Results dropdowns will be populated accordingly. You also have the option of choosing a custom confirmation page and an error page. The error page will be displayed if there is an error while trying to save results to the database.
11
6055_11.qxp
210
12/7/2006
12:04 PM
Page 210
Chapter 11 Using Form Controls
CAUTION When the FrontPage Server Extensions create the database for your form, they also add a global.asa and _fpclass/fpdbform.inc file to your Web site. Do not remove these files or it will break your form.
TIP When saving form results to a database, the confirmation page must be an ASP page. ASPX and HTML pages will not work.
When a database gets created by the FrontPage Server Extensions, the form fields are mapped to appropriate fields in the database. If you’d like to review or modify the mappings, click the Saved Fields tab. As shown in Figure 11.12, each form field is currently mapped to a corresponding database field. To modify a mapping, select the form field in the list and click Modify. You can remove a mapped field by selecting the field in the list and clicking the Remove button. N OTE
You won’t be able to access the Saved Fields or the Additional Fields tabs until you’ve created a database to store your form results.
11 Figure 11.12 Form fields are mapped to database fields automatically. You can modify or remove these mappings easily.
If none of the form fields is mapped in the Options For Saving Results To Database dialog, see “Form Fields Not Mapped” in the “Troubleshooting” section of this chapter.
6055_11.qxp
12/7/2006
12:04 PM
Page 211
Saving Form Results to a Database
211
The Additional Fields tab provides access to several additional fields that can be saved with your form, as shown in Figure 11.13. These fields are also mapped to the appropriate database columns automatically.
Figure 11.13 Expression Web will automatically save additional fields to your database.
11
Updating a Database with New Fields If you add new fields to your form after the database has been created, you’ll need to add the new fields to the database. Expression Web will do this for you automatically.
1. Open database.asp. 2. Place the insertion point in the table row where the Submit button is located. 3. Select Table, Insert, Row Above to insert a new table row. 4. In the left cell of the new row, enter the text “Your
Web site:”.
5. In the rightmost cell of the new row, insert a new Input (Text) form control. 6. Using the Tag Properties task pane, set the width of the control to 350 px and the name to “URL”.
7. Right-click on the form and select Form Properties. 8. Click the Options button. 9. Click Update Database. Expression Web will automatically add the new field to the database and configure the mappings for you.
6055_11.qxp
212
12/7/2006
12:04 PM
Page 212
Chapter 11 Using Form Controls
Troubleshooting Latest Results At End Checkbox Disabled I’d like to save my form results with the latest results at the top of my file, but the Latest Results At End checkbox is disabled and I can’t uncheck it. The following file types do not allow you to store form results at the top of the file. ■
Formatted Text
■
Text Database Using Comma as a Separator
■
Text Database Using Tab as a Separator
■
Text Database Using Space as a Separator
If you have selected one of these file types, the Latest Results At End checkbox will be checked and disabled. Choose a different file type.
Asked to Remove E-mail Recipient When I click OK in the Form Properties dialog after configuring my form to send to an email address, I am prompted that the server isn’t configured for e-mail and asked to remove the e-mail recipient. If the Web site that is open in Expression Web is a disk-based Web site or if the server it is on is not configured to send e-mail via the FrontPage Server Extensions, you will receive this warning. If you’re working with a disk-based Web site, e-mail should work after you publish the Web site to a server running the FrontPage Server Extensions. If you are using a Web site on a Web server, check with the hosting company or server administrator. They’ll need to configure e-mail support before you can send form results to an e-mail address.
Cannot Enter Validation Failure Page I’m sending form results to a text file and would like to specify a custom validation failure page. However, I’m unable to click inside the textbox to enter the URL. If none of the form fields in your form is configured to use validation, you’ll be unable to specify a validation failure page. Configure validation on your form first and you’ll then be able to specify a validation failure page.
Form Fields Not Mapped I am configuring a form to send results to a database. For some reason, all my form fields are unmapped and I have to map them manually. If you create a database and then click Cancel to exit the Form Properties dialog, the form fields will be unmapped. You’ll need to manually map them before you can continue.
6055_11.qxp
12/7/2006
12:04 PM
Page 213
Lagniappe: Hidden Form Fields
Lagniappe (lan yap’) n.,
a gift or bonus
Hidden Form Fields All the forms we tested in this chapter dealt with form data that was visible to the user of the form. However, there may be times when you want to include data with your form that you don’t want users of the form to see. For example, suppose you have some client-side script that determines whether or not cookies are enabled in the user’s browser. When a user submits your form, you also want to submit “True” if cookies are enabled or “False” if they’re not. However, having a form field on your form that says “True” or “False” wouldn’t be appropriate. N OTE
For details on how to manipulate cookies with JavaScript, read Special Edition Using JavaScript from Que Publishing.
In such cases, a hidden form field is a great solution. After you determine whether or not cookies are enabled, you can use client script to set the value of the hidden form field. That value will then be submitted along with the other form fields in your form. TIP A hidden form field doesn’t necessarily have to be configured using client script. You can hard-code a value in a hidden form field as well.
A hidden form field is just like a text input field except it’s not visible in the browser. The following HTML code creates a hidden form field called “cookies”:
To create a hidden form field in Expression Web:
1. Right-click the form and select Form Properties. 2. Click the Advanced button to display the Advanced Form Properties dialog. 3. Click the Add button to add a new hidden form field. 4. Enter a name and value for the form field. Figure 11.14 shows a hidden form field called “cookies” configured in the Advanced Form Properties dialog.
213
6055_11.qxp
214
12/7/2006
12:04 PM
Page 214
Chapter 11 Using Form Controls
Figure 11.14 Hidden form fields are configured using the Advanced Form Properties dialog.
6055_12.qxp
12/7/2006
12:06 PM
Page 215
CHAPTER
Editing Tag Properties
In this chapter An Introduction to Tag Properties Understanding the Tag Properties Task Pane Viewing Tag Properties with the Tag Properties Task Pane Setting Tag Attributes with the Tag Properties Task Pane Using Events with the Tag Properties Task Pane Troubleshooting Lagniappe: Tag Properties and Web Standards
12
6055_12.qxp
216
12/7/2006
12:06 PM
Page 216
Chapter 12 Editing Tag Properties
An Introduction to Tag Properties One of the greatest things about Expression Web is that it provides many tools that make it easy to dig into the makeup of a Web page. The Tag Properties task pane is one of those tools. It is a powerful way of examining the makeup of specific HTML tags. Not only that, but you can also easily set tag properties using the Tag Properties task pane. N OTE
A comprehensive discussion of HTML attributes is beyond the scope of this book. For a complete reference of HTML attributes, read Special Edition Using HTML and XHTML, available from Que Publishing.
Understanding the Tag Properties Task Pane When an HTML element is selected in either Design View or Code View, properties of the selected tag are displayed in the Tag Properties task pane, as shown in Figure 12.1. Figure 12.1 The Tag Properties task pane provides a convenient way to dig into the properties of any HTML tag.
12
6055_12.qxp
12/7/2006
12:06 PM
Page 217
Understanding the Tag Properties Task Pane
217
TIP The Tag Properties task pane is context-sensitive. The properties that are visible in it depend on the type of element selected on your page.
If the Tag Properties task pane is not visible, see “Tag Properties Task Pane Not Visible” in the “Troubleshooting” section of this chapter.
By default, the Tag Properties task pane shows you properties grouped into three categories: attributes, events, and miscellaneous. (Any attribute that is not standards-compliant will be categorized as miscellaneous.) You can collapse any category by clicking on the minus sign next to the category name, as shown in Figure 12.2. To expand a collapsed category, click the plus sign next to the category name. TIP The events displayed in the Tag Properties task pane are technically attributes as well. However, Expression Web divides them into their own category to make it easier to write code to handle a particular event.
Figure 12.2
Collapsed Category
Categories can be collapsed and expanded using the - and + button respectively, located next to the category name.
12 Expanded Category
TIP You can also double-click on a category name to collapse and expand that category.
6055_12.qxp
218
12/7/2006
12:06 PM
Page 218
Chapter 12 Editing Tag Properties
Attributes and Events Expression Web divides tag properties into attributes and events. While both of these categories are technically HTML attributes, there is a difference between the two. First, let me briefly explain what an attribute is. Attributes are parts of an HTML tag that are in the following format: =””
For example, an HTML hyperlink is defined using the tag. The tag has several attributes as well that define the behavior of the hyperlink. The href attribute specifies the resource to which the hyperlink links. For example, the following tag creates a hyperlink that links to the Microsoft Web site: Microsoft Web Site
An HTML tag can have many different attributes, some of which are required and some of which are optional. There are many other possible attributes for the tag; only one is shown in the code above. In addition to attributes that control the appearance of HTML elements, there is a special kind of attribute that controls what happens during certain events. All Web pages displayed in a browser trigger certain events. For example, when a page loads, the Load event is triggered. When a user clicks on an element, the Click event is triggered. If you don’t specify a particular action to take when an event is triggered, the event usually goes unnoticed. If you want code to run when an event occurs, you specify that code using the event handler attribute. For example, to run code when a page loads, use the onload attribute. To run code when an element is clicked, use the onclick attribute. Specifying code to run when an event occurs is referred to as hooking the event. The code below runs a function called setupPage when the page loads.
As shown in Figure 12.3, the following buttons are available at the top of the Tag Properties task pane:
12
■
Show Categorized List—When this button is clicked, the properties displayed in the task pane will be categorized as attributes and events.
■
Show Alphabetized List—When this button is clicked, the properties displayed in the task pane will be displayed alphabetically.
■
Show Set Properties on Top—When this button is clicked, properties for which a value has been specified will always appear at the top of the list.
■
Show Tag Properties—When this button is clicked, the Properties dialog that corresponds to the selected tag will be displayed.
Figure 12.3 You can customize the display of the Tag Properties task pane using the buttons at the top of the task pane.
Show Categorized List button Show Alphabetized List button
Show Tag Properties button Show Set Properties on Top button
6055_12.qxp
12/7/2006
12:06 PM
Page 219
Viewing Tag Properties with the Tag Properties Task Pane
219
TIP If you want all the set properties to appear at the top of the list regardless of their category, click both the Show Alphabetized List button and the Show Set Properties on Top button.
Viewing Tag Properties with the Tag Properties Task Pane To view the properties of an HTML tag, select an HTML element in Design View or click inside an HTML tag in Code View. The Tag Properties task pane will display all the properties that are applicable to the selected tag. TIP Each property listed in the Tag Properties task pane has an icon at the left of the property name. The icon indicates the type of the property. A finger pointing to a page indicates an attribute and a lightning bolt indicates an event.
If a property is set for the selected tag, the property name will appear as bolded blue text (see Figure 12.4). The name of the selected tag also appears at the top of the Tag Properties task pane. If you hover over the tag name, the HTML code for that tag appears inside a screen tip. Figure 12.4 When a property is set, the property name appears in bolded blue text. To see all the HTML code for the selected tag, hover over the tag’s name.
12
6055_12.qxp
220
12/7/2006
12:06 PM
Page 220
Chapter 12 Editing Tag Properties
If you’d like more details on a tag’s properties, click the Show Tag Properties button, as shown previously in Figure 12.3. In Figure 12.4, the properties for a
tag are displayed. Figure 12.5 shows the Cell Properties dialog that is displayed when the Show Tag Properties button is clicked. Note that the cell height shown in the Cell Properties dialog matches the height displayed in the Tag Properties task pane in Figure 12.4. The other properties for the cell are applied using the inline style named style1. Figure 12.5 The Cell Properties dialog is displayed when a
tag is selected and the Show Tag Properties button is clicked.
12
Setting Tag Attributes with the Tag Properties Task Pane The Tag Properties task pane provides a quick and convenient way to set tag attributes. Setting an attribute of a particular tag differs based on the attribute you are setting. For example, some attributes (such as the alt attribute of an tag) are free text. Other attributes (such as the align attribute of an tag) have only certain values that are valid. Other attributes (such as the style attribute) have a fairly complex syntax. The Tag Properties task pane makes setting all these attributes fast and easy.
6055_12.qxp
12/7/2006
12:06 PM
Page 221
Setting Tag Attributes with the Tag Properties Task Pane
221
Creating a Page Let’s create a page so we can more easily work with setting tag attributes. 1. Create a new Web page. 2. Add a new table with the default settings. 3. Add an image of your choice to one of the table cells. 4. Add a hyperlink to one of the table cells.
➔ ➔ ➔
For more information on adding tables to a Web page, see “Using Tables and Layout Tables”, p. 149 (Chapter 9). For more information on adding images to a Web page, see “Using Graphics and Multimedia”, p. 241 (Chapter 14). For more information on adding hyperlinks to a Web page, see “Creating Pages and Content”, p. 103 (Chapter 7).
TIP In the figures that follow, I have moved the Tag Properties task pane so that it is no longer docked on the edge of the Expression Web dialog. You can easily undock any task pane by simply dragging its title bar. To dock it again, drag it back to its docked location.
Setting Tag Properties Click to select the image you inserted on the page. The Tag Properties task pane will show that the src, height, and width attributes have been set for the image. However, the current standards require an alt attribute for all tags. N OTE
12 The alt attribute is important for images because screen readers will read the text in the attribute aloud so that people with poor vision can better utilize your Web page.
alt
To set the alt attribute using the Tag Properties task pane:
1. If the image is not selected, select it first. 2. In the Tag Properties task pane, locate the alt attribute. 3. Enter some text of your choice for the alt attribute. The Tag Properties task pane should now look like Figure 12.6.
6055_12.qxp
222
12/7/2006
12:06 PM
Page 222
Chapter 12 Editing Tag Properties
Figure 12.6 The alt attribute for this image has been set using the Tag Properties task pane.
12
If newly set properties don’t show up at the top of the list even when the task pane is configured to show set properties on top, see “Set Properties Don’t Appear First” in the “Troubleshooting” section of this chapter.
Now let’s add a screen tip to the hyperlink. Screen tips are added to hyperlinks using the title attribute.
1. Click on the hyperlink so the Tag Properties task pane shows the properties of the tag.
2. Locate the title attribute in the Tag Properties task pane and add the text you would like to appear in the screen tip. In Figure 12.7, the title attribute has been specified for the hyperlink.
6055_12.qxp
12/7/2006
12:06 PM
Page 223
Setting Tag Attributes with the Tag Properties Task Pane
223
Figure 12.7 The title attribute has now been specified for this hyperlink. Setting the title attribute is important if you want your Web pages to be standardscompliant.
Sometimes, you may want a hyperlink to open a new window. The HTML target attribute allows you to do this easily. You can specify a specific frame name for the target attribute or you can use one of several predefined values. For example, to specify that a link should open in a new window, set the target attribute to a value of _blank.
1. Click inside the hyperlink to make the tag active. 2. Locate and select the target attribute in the Tag Properties task pane. 3. Click the down arrow for the target attribute’s value and select _blank, as shown in Figure 12.8. Now the hyperlink will open in a new window when clicked. There are several ways you can make the same change to a hyperlink. In addition to selecting the desired value for the target attribute, you can also click the Show Tag Properties button on the Tag Properties task pane (see Figure 12.3) and make the change in the Edit Hyperlink dialog box.
➔
For more information on using the Edit Hyperlink dialog, see “Creating Pages and Content”, p. 103 (Chapter 7).
12
6055_12.qxp
224
12/7/2006
12:06 PM
Page 224
Chapter 12 Editing Tag Properties
Figure 12.8 There’s no need to try and remember all the possible values for the target attribute. Simply choose the desired value from the list provided by the Tag Properties task pane.
Using Events with the Tag Properties Task Pane In addition to examining and setting tag attributes, the Tag Properties task pane is also a convenient way to connect event handlers for page elements. N OTE
For an overview of events, see the sidebar “Attributes and Events” on page 218.
Let’s configure the image on the page so that clicking it will link to a different Web site. We could wrap the image in an tag and make it a hyperlink, but for this example, we’ll use the click event for the image. By using the click event, you can perform a specified action when the image is clicked. In this case, we will run some JavaScript code when the image is clicked.
12
Switch to Code View and add the following code before the closing tag: <script language=”javascript” type=”text/javascript”> function openLink(url) { window.navigate(url); }
This code will open the URL passed to it.
➔
For more information on JavaScript, see “Client-side Scripting”, p. 415 (Chapter 24).
We now need to hook up the click event to the image. When the image is clicked, we want to run the openLink JavaScript function we just added. To do that:
1. Select the image. 2. In the Tag Properties task pane, locate the onclick event.
6055_12.qxp
12/7/2006
12:06 PM
Page 225
Lagniappe: Tag Properties and Web Standards
3. Set the following value for the onclick event: javascript:openLink(“http://www.jimcosoftware.com”);
4. Save the page and preview it in your browser. 5. Click the image to navigate to the Jimco Software Web site. TIP If you are previewing the Web page in Internet Explorer via the file system, Internet Explorer will warn you about running active content and will ask if you want to allow it. You will need to allow active content to test the click event of the image.
Troubleshooting Tag Properties Task Pane Not Visible I have a page open and I’ve selected something on the page, but I don’t see a Tag Properties task pane. If the Tag Properties task pane isn’t visible, select Task Panes, Tag Properties from the main menu to enable the task pane.
Set Properties Don’t Appear First I’ve got the Tag Properties task pane configured so that set properties appear first in the list of properties, but newly set properties don’t appear first. What’s wrong? For newly set properties to appear first in the task pane, you need to refresh it. The easiest way to refresh the task pane is to click the Show Set Properties On Top button once to turn off that setting and then click it again to turn the setting back on. This will refresh the task pane and set properties should appear first in the list as expected.
Lagniappe (lan yap’) n.,
a gift or bonus
Tag Properties and Web Standards To ensure that your Web pages comply with current Web standards, be careful when setting properties using the Tag Properties task pane. It’s easy to accidentally fall out of compliance when setting attributes using this tool. For example, if you select the image you added to the sample page for this chapter and set the border attribute to 4 in the Tag Properties task pane, Expression Web will add a border attribute with a value of 4. However, the border attribute is considered a deprecated attribute and it will be flagged as such by Expression Web’s Code View, as shown in Figure 12.9.
225
6055_12.qxp
226
12/7/2006
12:06 PM
Page 226
Chapter 12 Editing Tag Properties
Figure 12.9 Be careful when specifying attribute values. You can easily fall out of standards compliance.
Is this a bug in Expression Web? Not at all. Expression Web is simply doing what you asked it to do. In this case, you explicitly told Expression Web to add code that is not compliant with current standards. Expression Web will warn you when you do this, but it won’t stop you. When setting attributes using the Tag Properties task pane, check Code View often for HTML incompatibilities.
➔
For more information on using Code View to detect HTML compatibilities, see “Creating Pages and Content”, p. 103 (Chapter 7).
6055_13.qxp
12/7/2006
12:08 PM
Page 227
CHAPTER
13
Using the Quick Tag Tools
In this chapter Introduction to the Quick Tag Tools Locating and Selecting Elements Using the Quick Tag Selector Editing Page Content Using the Quick Tag Editor Troubleshooting Lagniappe: When to Use the Quick Tag Editor
6055_13.qxp
228
12/7/2006
12:08 PM
Page 228
Chapter 13 Using the Quick Tag Tools
Introduction to the Quick Tag Tools Years ago, I obtained a copy of HomeSite. HomeSite was a Web development tool created by Nick Bradbury, and it was a great tool as long as you knew HTML. However, if you didn’t know HTML well, you could get lost quickly. HomeSite didn’t have a nice “what you see is what you get” (WYSIWYG) interface like those we enjoy in today’s Web development tools. Web pages in those days were simple compared to today’s pages, and yet even in those simpler times, it was often difficult to keep track of nested HTML elements such as table cells. As Web pages have increased in complexity and as new HTML elements have been added to our repertoire, it has become even more difficult to comprehend the relationship between a page element and the underlying HTML code. Tables are an excellent example of this increasing level of complexity. In the days of pure HTML editors, Web developers (no one called them “designers” at that time) kept tables pretty simple. Creating a large nested table structure was just asking for trouble because it would quickly become unmanageable. The advent of WYSIWYG editors removed that barrier, and heavily nested tables became so commonplace that locating the HTML code for a particular table cell was like finding the proverbial needle in a haystack. Microsoft provided a nice solution to that problem with the introduction of Quick Tag Tools in FrontPage 2003. Fortunately for all of us, Quick Tag Tools were carried over into Expression Web. Quick Tag Tools (see Figure 13.1) provide a context-sensitive way of locating and working with specific elements in a Web page.
Figure 13.1 Expression Web’s Quick Tag Tools make it easy to locate and work with elements in your Web pages.
13
Quick Tag tools
6055_13.qxp
12/7/2006
12:08 PM
Page 229
Locating and Selecting Elements Using the Quick Tag Selector
229
The Quick Tag Tools consist of two different sets of tools: the Quick Tag Selector and the Quick Tag Editor. Let’s look at each of these Quick Tag Tools separately and at how you can use them to effectively edit your Web page content. If you don’t see the Quick Tag Tools, see “Quick Tag Tools Unavailable” in the “Troubleshooting” section of this chapter.
Locating and Selecting Elements Using the Quick Tag Selector If you’ve ever tried to work with the HTML code in a page with nested elements such as the nested table scenario I mentioned earlier, you’ll no doubt understand how difficult it can be to locate HTML code for a specific element. The Quick Tag Selector in Expression Web makes editing complex pages ridiculously easy by providing a series of context-sensitive buttons for each page element. As you select different elements in Design View or select code in Code View or Split View, the Quick Tag Selector displays one or more tag selectors in a toolbar above the view, as shown in Figure 13.1.
➔
For more information on Design View, Code View, and Split View, see “Using Web Page Views”, p. 127 (Chapter 8).
TIP In Design View, only visible page elements will have a corresponding tag selector. You will not see tag selectors for CSS code, script, or other such elements. To access tag selectors for code elements such as script tags, switch to Code View or Split View.
The Quick Tag Selector works a little differently in Design View than in the other views. As you hover over individual tag selectors, Expression Web will draw a highlighted border around the corresponding page element in the designer, as shown in Figure 13.2. Not only is this convenient when you’re trying to identify page elements, but it’s also an extremely valuable tool when you are working with CSS elements because it displays CSS classes and IDs as part of the tag selector. Notice in Figure 13.2 that the tag selector for the table indicates that the style1 CSS class was applied to the table. TIP You can see all the HTML for any tag by simply hovering over the tag selector with your mouse. A ScreenTip will appear showing the HTML code for that tag.
➔
For more information on CSS classes and IDs, see “Creating Style Sheets”, p. 289 (Chapter 17).
13
6055_13.qxp
230
12/7/2006
12:08 PM
Page 230
Chapter 13 Using the Quick Tag Tools
Figure 13.2 As you hover over tag selectors, Expression Web displays a highlighted border around the corresponding page element.
Highlighted border
Screen tip showing HTML code CSS Class
To select a page element or block of code using the Quick Tag Selector, simply click on the tag selector button. If you are in Design View, the selected page element will be highlighted, as shown in Figure 13.3. If you are in Code View or Split View, the code for the selected element will be highlighted, as shown in Figure 13.4. If you click the small arrow at the right edge of a selected tag selector or right-click a tag selector, a menu will appear. You can then choose Select Tag from the menu to select the page element or code block. Alternatively, if you choose Select Tag Contents from the menu, only the contents of the tag will be selected and not the tag itself.
13
TIP If you choose Select Tag Contents for a
tag, both the
tags and the content within them will be selected. The
tags will remain unselected.
6055_13.qxp
12/7/2006
12:08 PM
Page 231
Locating and Selecting Elements Using the Quick Tag Selector
Figure 13.3 In Design View, selecting a quick tag selector will highlight the corresponding page element.
Figure 13.4 In Code View or Split View, selecting a quick tag selector will highlight the corresponding code.
231
Selected Tag Selector
Selected tag selector
13
6055_13.qxp
232
12/7/2006
12:08 PM
Page 232
Chapter 13 Using the Quick Tag Tools
Editing Page Content Using the Quick Tag Editor Now that you know how to locate and select content using the Quick Tag Selector, let’s look at how to edit your page’s content using the Quick Tag Editor. The Quick Tag Editor is accessible by either clicking the small arrow at the right edge of a selected tag selector or by right-clicking on a tag selector. The following options are available: ■
Edit Tag—Displays a Quick Tag Editor dialog populated with the HTML for the tag for easy editing.
■
Remove Tag—Removes the selected tag. If the tag wraps any other content, the content that it originally wrapped will remain on the page.
■
Insert HTML—Displays a Quick Tag Editor dialog where you can enter HTML to be inserted onto the page.
■
Wrap Tag—Displays a Quick Tag Editor dialog where you can enter HTML. The HTML entered wraps the selected tag.
■
Positioning—Provides easy access to the Positioning menu for the positioning of page elements.
■
Tag Properties—Allows you to easily access the Properties dialog for the selected tag.
Let’s look at each of these options and learn how to use them to edit your content.
Editing a Tag Selecting the Edit Tag option in the Quick Tag Editor provides you with a Quick Tag Editor dialog containing the HTML tag, as shown in Figure 13.5. Expression Web provides colorcoding and IntelliSense support in this dialog as well.
➔ ➔
For more information on color-coding, see “Configuring Page Editor Options”, p. 257 (Chapter 15). For more information on IntelliSense, see “Creating Pages and Content”, p. 103 (Chapter 7).
The easiest way to fully comprehend the Quick Tag Editor is to create a simple page and experiment with the tools.
13
1. Create a new Web page. 2. Add a new table using the default settings. 3. Place the insertion point inside one of the table cells. 4. Insert a new table inside the first table’s cell using the default settings. If you now click within the tables you’ve inserted, you’ll see that the tag selectors available will change. Click inside the inner table and you should see a tag selector for both tables. Let’s add an ID attribute to the inner table using the Quick Tag Editor.
1. Right-click the tag selector for the inner table and select Edit Tag from the menu to open the Quick Tag Editor, as shown in Figure 13.6.
6055_13.qxp
12/7/2006
12:08 PM
Page 233
Editing Page Content Using the Quick Tag Editor
233
Figure 13.5 The Quick Tag Editor dialog allows for the editing of a specific HTML tag and is complete with IntelliSense and color-coding.
2. The insertion point should be just to the right of the
tag. Press the spacebar to open the IntelliSense window.
3. Press “i” to jump to id attribute, as shown in Figure 13.7. 4. Double-click on id attribute to add it. 5. Enter “innerTable” as the value of the ID attribute. 6. Click the checkmark button at the right end of the Quick Tag Editor dialog to commit the new code to the page. TIP Instead of clicking the green checkmark button to commit your change, you can also simply press Enter on your keyboard.
13 The Quick Tag Editor will do a cursory check on the HTML you enter, and if it’s blatantly invalid, Expression Web will display an error, as shown in Figure 13.8.
6055_13.qxp
234
12/7/2006
12:08 PM
Page 234
Chapter 13 Using the Quick Tag Tools
Figure 13.6 The Edit Tag option displays the Quick Tag Editor where you can edit the HTML code for the selected element.
Figure 13.7 IntelliSense support in the Quick Tag Editor allows you to easily and accurately add an ID attribute to the table.
13
Figure 13.8 The Quick Tag Editor will display an error if you attempt to enter obviously incorrect HTML.
6055_13.qxp
12/7/2006
12:08 PM
Page 235
Editing Page Content Using the Quick Tag Editor
235
CAUTION It is possible to enter invalid attributes or other errors that will not cause an error dialog. For example, the Quick Tag Editor will happily allow me to add an attribute to a
tag called jim even though there is no such attribute. Be careful when editing your HTML to avoid accidental errors.
TIP Even if the Quick Tag Editor approves an edit, Expression Web’s Code View may warn you that your code is invalid. Check Code View for any possible problems.
Removing a Tag The Remove Tag option is a convenient way of removing the selected HTML tag. When you choose this option, only the selected HTML tag is removed. Any content contained within the tag remains. To use the Remove Tag option:
1. Place the insertion point inside a table cell and enter the text “Microsoft”. 2. Double-click on the text you entered to select it. 3. Right-click on the selected text and select Hyperlink from the menu. 4. Enter “http://www.microsoft.com” in the Address box and click OK. After completing these steps, Expression Web will insert an tag into the page that links to the Microsoft Web site. To remove that tag:
1. Click on the hyperlink you just created in Design View. 2. Right-click on the tag selector for the tag and select Remove Tag from the menu. When the tag is removed, the text for the hyperlink remains. Only the tag that wrapped the text is removed. If the Remove Tag option is not enabled, see “Remove Tag Not Enabled” in the “Troubleshooting” section of this chapter.
13
Inserting HTML The Insert HTML option provides you with a Quick Tag Editor dialog for inserting HTML code into a page. As simple as that may sound, it is sometimes difficult to predict where code will get inserted. If nothing is selected, code that you insert using the Insert HTML option will be inserted at the insertion point. However, if you have an element selected on the page, the HTML will be inserted immediately before the selected element. Because of this, it is possible to attempt to insert HTML that alone is perfectly valid, but in the context of the selection, the code is invalid. For example, if you select a
tag and attempt to insert a before it,
6055_13.qxp
236
12/7/2006
12:08 PM
Page 236
Chapter 13 Using the Quick Tag Tools
you will see the dialog displayed in Figure 13.8 and Expression Web will prevent you from inserting the code. To insert HTML using the Insert HTML option, follow these steps:
1. Create a new Web page. 2. Right-click on the tag selector and select Insert HTML. 3. In the Quick Tag Editor, enter the following HTML: Inserted with the Quick Tag Editor
4. Press Enter or click the green checkmark button to add the HTML to the page. The HTML code you just entered is not standards-compliant because the element is deprecated. The Quick Tag Editor does not prevent you from inserting the deprecated code. It will, however, highlight the code as falling outside the standards in Code View, as shown in Figure 13.9. Figure 13.9 The Quick Tag Editor will happily insert HTML that falls outside of current standards, but Code View will warn you about it.
13
➔
For more information on developing standards-based Web sites, see “Designing for Compatibility”, p. 349 (Chapter 20).
TIP Expression Web will only perform a cursory examination of the HTML code you are entering. It will allow you to enter invalid HTML as well. For example, if you omit a closing tag on an element that requires one, your invalid code will be inserted without warning.
6055_13.qxp
12/7/2006
12:08 PM
Page 237
Editing Page Content Using the Quick Tag Editor
237
Wrapping a Tag The Wrap Tag option will wrap the selected HTML element with the tag that you enter in the Quick Tag Editor dialog. Consider the HTML that we just entered using the Insert HTML option. We inserted some text wrapped in a tag. As I mentioned, the tag is deprecated and we should have used the
tag instead. To correct that problem using the Wrap Tag option:
1. Click inside the text you entered using the Insert HTML option. 2. Right-click on the tag selector and select Wrap Tag. 3. In the Quick Tag Editor dialog, enter “p” between the opening HTML tag characters, as shown in Figure 13.10.
4. Press Enter or click the green checkmark button to commit the change. 5. Switch to Code View or Split View to examine the code that was entered. Notice that the tag is now wrapped in a
tag.
6. Click inside the text again. 7. Right-click on the tag and select Remove Tag. Figure 13.10 The Wrap Tag option will wrap an HTML tag with the tag that you enter in the Quick Tag Editor.
13
After completing the steps, the tag is removed and replaced with a
tag and the code is now compliant with current standards. CAUTION Expression Web was designed from the ground up to produce standardscompliant code. Therefore, be careful when inserting your own HTML code so you don’t add code that falls outside the standards.
6055_13.qxp
238
12/7/2006
12:08 PM
Page 238
Chapter 13 Using the Quick Tag Tools
Controlling Positioning The Positioning option provides easy access to CSS positioning settings for the selected element. The following positioning options are available:
➔
■
(None)—This is the default setting.
■
position:absolute—When this option is chosen, the selected element can be dragged to any position within the page. You can also set the z-order of the element.
■
position:fixed—This option is similar to the position:absolute option except that fixed elements do not move when the page is scrolled in the browser.
■
position:relative—This option allows you to position an element relative to where it was originally inserted onto a page.
■
position:static—This option is functionally the same as setting positioning to (None).
For more information on CSS positioning and z-order, see “Using Layers”, p. 439 (Chapter 25).
Editing Tag Properties The Tag Properties option provides a means of accessing Properties dialogs of HTML elements using the Quick Tag Editor. To use the Tag Properties option:
1. Create a new page and insert a new table using the default settings. 2. Place the insertion point inside the table. 3. Right-click on the
tag selector and select Tag Properties. The Table Properties dialog is displayed so you can alter the properties of the table. Alternatively, if you select the Tag Properties option for a
tag, the Cell Properties dialog will be displayed. Some HTML tags do not have a corresponding Properties dialog in Expression Web. If you click Tag Properties for a tag that does not have a corresponding Properties dialog, Expression Web will not display a dialog.
Troubleshooting Quick Tag Tools Unavailable I’m clicking in my Web page, but I don’t see any of the Quick Tag Tools. Chances are you have the Quick Tag Selector option turned off. Select View, Quick Tag Selector to turn it back on.
Remove Tag Not Enabled I’m trying to remove a tag with the Remove Tag option, but the Remove Tag menu option isn’t available. The Remove Tag option is only available for tags that contain other content. It can also be disabled for tags that cannot be removed without causing errors in the page. For example, even though a
tag contains the contents of a table cell, the tag cannot be removed without creating invalid code. Therefore, the Remove Tag option is not enabled for
tags.
6055_13.qxp
12/7/2006
12:08 PM
Page 239
Lagniappe: When to Use the Quick Tag Editor
Lagniappe (lan yap’) n.,
a gift or bonus
When to Use the Quick Tag Editor The Quick Tag Editor is a powerful tool for making changes to your HTML code. However, as Spider-Man would say, “With great power comes great responsibility.” Microsoft put a lot of work into ensuring that the code that Expression Web creates is standards-compliant. They did that because professional Web designers asked for a tool they could trust to create pages that would validate against current standards. Using the Quick Tag Editor indiscriminately can quite easily sabotage Expression Web’s code. For example, while Expression Web will go to great lengths to keep from generating inline CSS styles that might make it difficult to maintain a page, you are still able to add inline styles yourself and override any styles that Expression Web has already created. Speaking of CSS, one of the greatest uses for the Quick Tag Editor is making changes to CSS code. For example, applying a CSS class or ID to a specific tag is simple and fast using the Quick Tag Editor. However, you can certainly use the Quick Tag Editor for editing any code. When you do, check Code View often to make sure you haven’t introduced non-standard code into your page. Remember that Expression Web will not prevent you from shooting yourself in the foot. Keeping your code standards-compliant is up to you.
239
6055_13.qxp
12/7/2006
12:08 PM
Page 240
6055_14.qxp
12/7/2006
12:10 PM
Page 241
CHAPTER
14
Using Graphics and Multimedia
In this chapter Web Image Formats Inserting Images Formatting Images Converting Images Creating Image Thumbnails Creating Image Maps Page Transitions Troubleshooting Lagniappe: Inserting Multimedia
6055_14.qxp
242
12/7/2006
12:10 PM
Page 242
Chapter 14 Using Graphics and Multimedia
Web Image Formats It’s often said that content is king in a Web site. If that’s true (and I agree that it is), graphics definitely hold the title of queen. Quality graphics often make the difference between an amateur Web site and a professional one. Nothing can add an aura of professionalism like quality graphics. Not all graphics are created equal, however. Part of projecting a professional impression is the proper choice of image formats. The most common image formats on the Web are GIF and JPEG. PNG is another image format that is growing in popularity for many reasons, some of which we’ll go into in this section.
The GIF Format The GIF format is best suited to non-photographic images that contain mostly straight lines. (Text, for example, is best suited to the GIF format.) GIF images can contain a maximum of 256 colors, but you can also save them with fewer colors to save file space. The GIF format has the advantage of being a lossless format. That means, in most cases, you can edit a GIF image as many times as you wish without reducing the quality of the image. GIF images are also color-indexed, meaning that each image has a table of colors saved with it. By reducing the number of colors in the color table, you can reduce the file size of an image. If you remove a color that actually exists in the image, the GIF format can combine other colors in the color table to try and reproduce the color that was removed. This process is known as dithering. GIF images also support transparency. Colors in the color table can be marked as transparent. A color marked as transparent will not be visible in the final image. Instead, the content underneath the image will show through. Transparent images are not only useful when you want background colors to show through, they are also useful as a formatting tool. Many designers will place a transparent GIF inside a table cell to act as an invisible spacer.
The JPEG Format JPEG images are best suited to photos and other graphics that consist of many colors. The JPEG format supports full-color images and can be compressed with excellent results. However, unlike GIF images, once you compress a JPEG image, it will lose quality that can never be recovered. If a JPEG is edited multiple times, the quality can be dramatically degraded.
14
JPEG images do not support transparency, so if you want an irregularly shaped JPEG to appear on a particular background color, make the background of the actual image the same color as the background color on which it will appear.
The PNG Format PNG images combine the best features of GIF and JPEG together in a single format. PNG images support transparency and full-color reproduction.
6055_14.qxp
12/7/2006
12:10 PM
Page 243
Inserting Images
N OTE
243
The PNG format supports alpha transparency, meaning that a color can be set to varying degrees of transparency.
CAUTION Not all browsers fully support the PNG format. You can check your browser’s compatibility at www.w3.org/Graphics/PNG/.
Inserting Images To insert an image, select Insert, Picture, From File. After you insert the desired image, Expression Web will display the Accessibility Properties dialog, as shown in Figure 14.1.
Figure 14.1 The Accessibility Properties dialog is the easiest way to ensure that your Web site is accessible for most all visitors.
CAUTION To maintain accessibility standards, it is strongly recommended that you include alternate text and long descriptions for all images.
You can also insert a picture directly from a scanner or camera by selecting Insert, Picture, From Scanner or Camera. The interface you see with this method is dependent on the camera or scanner. If your inserted images are sometimes not visible, see “Images Sometimes Not Visible” in the “Troubleshooting” section of this chapter.
Inserted images can be located anywhere. If an image is not already located in the current Web site, Expression Web will display the Save Embedded Files dialog and prompt you to save the image into the Web site when the page is saved, as shown in Figure 14.2. N OTE
Expression Web will also display the Save Embedded Files dialog when you edit an existing image on a page.
14
6055_14.qxp
244
12/7/2006
12:10 PM
Page 244
Chapter 14 Using Graphics and Multimedia
Figure 14.2 Expression Web will prompt you to save embedded images when a picture is not already located in the current Web site.
There may be occasions when you want to link directly to an image on another Web site. When you do this, Expression Web will display the Save Embedded Files dialog and prompt you to save the image into the Web site. If you’d prefer not to save the image into your Web site, click the Set Action button and select the Don’t Save This File option, as shown in Figure 14.3.
Figure 14.3 You can choose to leave an image where it is instead of saving it into your Web site.
CAUTION Before you link directly to an image on someone’s site, make sure it’s okay with the site owner. There are plenty of legitimate uses of this technique (affiliate images, for example), but it’s something you don’t want to do unless the owner of the site hosting the image approves.
Formatting Images 14
After you’ve inserted an image, there are many formatting options available to you.
Resizing Images To resize an image, select the image and drag one of the sizing handles that appear around the edges of the image. By default, Expression Web will allow you to change an image’s
6055_14.qxp
12/7/2006
12:10 PM
Page 245
Formatting Images
245
proportions. In other words, when you change an image’s width, the height will not change proportionately by default. In many cases, you’ll want to size an image without changing the proportions. To do that, press and hold the Shift key while dragging the sizing handle at the lower right corner of the image. As you size the image either horizontally or vertically, Expression Web will size each dimension proportionately. After an image is resized, Expression Web will display the Picture Actions button. Clicking the button displays the options shown in Figure 14.4. Figure 14.4 The Picture Actions options can make an image file smaller for faster downloads.
Using the Picture Actions options, you can choose between simply modifying the size attributes in the HTML code or resampling the file. Resampling is often the best choice, especially if you have sized the image to a smaller dimension. When you resample an image that has been made smaller than its original dimensions, Expression Web will apply a complex algorithm to the image that not only makes it look much better, but also reduces the file size substantially.
Changing Picture Properties To edit the properties of an image, select the image and then select Format, Properties to display the Picture Properties dialog shown in Figure 14.5. TIP You can also access the Picture Properties dialog by double-clicking an image or by rightclicking on an image and selecting Picture Properties from the menu.
14
6055_14.qxp
246
12/7/2006
12:10 PM
Page 246
Chapter 14 Using Graphics and Multimedia
Figure 14.5 Many properties of an image can be modified using the Picture Properties dialog.
On the General tab of the Picture Properties dialog, you can change many general options for an image, including configuring a hyperlink for the image. You can also edit the image in an external editor by clicking the Edit button. When you click the Edit button, the image file is opened in the image editing application associated with the image type.
➔
For information on configuring editors for images and other files, see “Configuring File Editors,” p. 122 (Chapter 7).
The Appearance tab of the Picture Properties dialog provides access to many useful image formatting tools. As shown in Figure 14.6, you can modify an image’s wrapping style, layout, and size. Figure 14.6 Many useful properties can be modified on the Appearance tab of the Picture Properties dialog.
14
6055_14.qxp
12/7/2006
12:10 PM
Page 247
Formatting Images
247
One of the most useful properties of an image is its wrapping style. Figure 14.7 shows an image with the default wrapping style of None. The same page is shown in Figure 14.8, but the wrapping style of the image has been changed to Left. Notice that the image appears on the left edge of the text in Figure 14.8. Figure 14.7 The image pictured here has the wrapping style set to None, the default setting. Notice that the text appears below the image.
Figure 14.8 Here is the same page as in Figure 14.7, but the image now has a wrapping style of Left. Note that the image appears on the left edge of the text.
You may have noticed that the text in Figure 14.8 appears right up against the image. By adjusting the Horizontal Margin in the Picture Properties dialog, you can add a small buffer between the image and the text, as shown in Figure 14.9.
14
6055_14.qxp
248
12/7/2006
12:10 PM
Page 248
Chapter 14 Using Graphics and Multimedia
Figure 14.9 With the addition of a 10 px horizontal margin, the page now looks much cleaner.
Converting Images You can easily convert an image from one format to another. To convert an image, rightclick the image and select Change Picture File Type to display the Picture File Type dialog, as shown in Figure 14.10. Figure 14.10 Changing a picture file type can reduce an image’s file size.
14 You may want to convert an image to another format to make the image file size smaller. For example, if you have been given a photograph in GIF format for use in a Web site, you’ll likely be able to substantially reduce the file size of the image by converting it to a JPEG image. On the other hand, if you are given a logo in JPEG format that contains only
6055_14.qxp
12/7/2006
12:10 PM
Page 249
Converting Images
249
a few colors, you can likely make the file much smaller by converting the logo to a GIF image. The options available in the Picture File Type dialog differ based on the image format you select. In Figure 14.10 (shown previously), the options for the JPEG format are shown. If you select GIF as the image format, you are given the option to make the image transparent. You can set the transparency of a GIF image only if a transparent color has already been selected for the image using the Pictures toolbar or a graphics editing program. To set the transparent color using the Pictures toolbar:
1. Select View, Toolbars, Pictures to display the Pictures toolbar. 2. Select the image. 3. Click the Set Transparent Color button on the toolbar, as shown in Figure 14.11. If the image is not already a GIF image, Expression Web will inform you that it will convert the image. Figure 14.11 The Pictures toolbar makes it easy to set a transparent color on a GIF image.
4. Click on the color you want to make transparent. The color should immediately disappear, revealing the color underneath it. After you’ve added transparency to an image, you can use the Picture File Type dialog to disable transparency again by unchecking the Transparent checkbox shown in Figure 14.12.
14
6055_14.qxp
250
12/7/2006
12:10 PM
Page 250
Chapter 14 Using Graphics and Multimedia
Figure 14.12 The Transparent checkbox is checked when transparency has been applied to an image. Unchecking it will remove the transparency and restore the image’s original color.
Creating Image Thumbnails A common technique for displaying larger images is to show a small version of an image (called an image thumbnail) that can be clicked to show the larger version. This technique (often used in e-commerce Web sites) prevents site visitors from having to download large versions of images they aren’t interested in viewing. Expression Web can automatically create image thumbnails for your images and will also automatically create links to the larger images. To create an image thumbnail, follow these steps.
1. Insert an image. 2. If the Pictures toolbar is not visible, select View, Toolbars, Pictures to display it. 3. Select the image and click the Auto Thumbnail button on the toolbar, as shown in Figure 14.13. TIP You can also select an image and press Ctrl-T to create an auto thumbnail.
14
When you create an auto thumbnail, Expression Web will resize the image to be much smaller. It will also add a hyperlink that, when clicked, will display the larger version. If the larger version of your image doesn’t appear as large as it should in Internet Explorer, see “Larger Image Appears Too Small” in the “Troubleshooting” section of this chapter.
6055_14.qxp
12/7/2006
12:10 PM
Page 251
Creating Image Thumbnails
251
Figure 14.13 Creating a thumbnail image is as easy as clicking a button.
Auto Thumbnail button
Configuring Auto Thumbnails By default, Expression Web creates a thumbnail image that is 100 pixels wide. It also displays a blue border around the hyperlinked thumbnail. You can change these default settings using the AutoThumbnail tab on the Page Editor Options dialog, as shown in Figure 14.14. Figure 14.14 You can configure the way Expression Web creates auto thumbnails using the Page Editor Options dialog.
14
6055_14.qxp
252
12/7/2006
12:10 PM
Page 252
Chapter 14 Using Graphics and Multimedia
TIP To remove the blue border around image thumbnails, set the border to 0 pixels in the Page Editor Options dialog. Note that changes here only affect new thumbnails and not existing ones.
Creating Image Maps An image map is an image on which one or more regions are configured as hyperlinks. You can configure any number of hotspots on an image and configure a new hyperlink for each one. To create an image map, follow these steps.
1. Insert an image and enable the Pictures toolbar. 2. Select the image and then click one of the hotspot buttons on the Pictures toolbar. You can choose a rectangular hotspot, a circular hotspot, or a polygonal hotspot, as shown in Figure 14.15. Figure 14.15 To create a hotspot on an image, select the image and then use one of the three hotspot type buttons on the Pictures toolbar.
3. Click and drag on the image to create the hotspot. When creating a polygonal hotspot, 14
click and drag to create each side until the polygon is closed on all sides. When you release the mouse (or when a polygonal hotspot is closed on all sides), Expression Web will display the Insert Hyperlink dialog so you can configure the hyperlink
6055_14.qxp
12/7/2006
12:10 PM
Page 253
Page Transitions
253
for the hotspot. After the hyperlink has been created, you can edit it by right-clicking the hotspot and selecting Hyperlink from the menu or by double-clicking the hotspot.
➔
For information on using the Insert Hyperlink dialog, see “Creating Pages and Content,” p. 103 (Chapter 7).
After a hotspot has been added, you can resize it by selecting it and dragging the sizing handles. You can also move it to a different position by clicking and dragging it to the new location. You can highlight all hotspots on an image by clicking the Highlight Hotspots button shown previously in Figure 14.15. Highlighting hotspots makes it easy to locate all hotspots on an image. When hotspots are highlighted, selected hotspots will appear as filled shapes and unselected hotspots will appear as outlined shapes, as shown in Figure 14.16. Figure 14.16 Hotspots can be highlighted for easy identification. Selected hotspots are filled shapes, while unselected ones appear as outlines.
Page Transitions Page transitions were introduced in Internet Explorer 5.5. They are effects that display when moving from page to page or site to site and are built into the browser. You can easily add page transition effects with Expression Web. CAUTION Page transitions will only work in Internet Explorer. They will not adversely affect other browsers, but they won’t be visible.
To add a page transition effect, select Format, Page Transition to display the Page Transitions dialog shown in Figure 14.17.
14
6055_14.qxp
254
12/7/2006
12:10 PM
Page 254
Chapter 14 Using Graphics and Multimedia
Figure 14.17 Page transitions can be configured easily using the Page Transitions dialog.
If your page transitions are not visible when browsing your site, see “Page Transitions Don’t Work” in the “Troubleshooting” section of this chapter.
Page transitions are met with mixed feelings by many site visitors. Depending on the speed of the computer on which the site is being browsed, a transition may take much longer to complete than the time for which it’s configured. For example, my wife uses an old, slow 500MHz machine to browse the Internet. Page transitions on that machine regularly take twice as long as they do on a faster machine. A nearly 10-second transition is far too long and it can be quite annoying when visiting Web sites that use transitions for all pages. Before you add an effect such as page transitions, give careful consideration to how it might affect people visiting your site.
Troubleshooting Images Sometimes Not Visible I’ve added some images to my Web site. When I’m on my own computer, they show up fine, but when I go to another computer, I don’t see the images at all. It’s likely that your image links are pointing to files on your local computer. Open the page and look at the images in Code View. If you see a file path as the source of an image, that’s the problem. The code below shows an image source path pointing to a local file path:
If you browse this page on the computer containing that image, the graphic will show up fine. However, if you go to another computer, the graphic won’t display. To resolve this issue, import the image into the current Web site so the link to the image is relative to the existing Web site. The code below shows an image that is correctly linked to the current Web site:
6055_14.qxp
12/7/2006
12:10 PM
Page 255
Lagniappe: Inserting Multimedia
Larger Image Appears Too Small I’ve created an auto thumbnail, but when I click the link to see the larger image, it shows up big for a split second and then shrinks to a smaller size automatically. What you are experiencing is likely caused by the Image Toolbar feature introduced in Internet Explorer 6. This feature will automatically resize images so they fit in the current window. You can disable this feature for an entire page by adding the following META tag to the page: <meta http-equiv=”imagetoolbar” content=”no” />
To disable the feature for a single image, use the galleryimg attribute. The following image will not use the Image Toolbar feature in Internet Explorer:
Page Transitions Don’t Work I’ve added page transitions, but when I view my site in a Web browser, nothing happens. First, make sure you are using Internet Explorer 5.5 or greater. Page transitions won’t work in other browsers. If you meet that general requirement, chances are that page transitions are turned off in your browser. To enable page transitions in Internet Explorer, select Tools, Internet Options and click the Advanced tab. In the Browsing section, make sure Enable Page Transitions is checked and click OK.
Lagniappe (lan yap’) n.,
a gift or bonus
Inserting Multimedia You may feel that there has been one glaring omission in this chapter: how to insert multimedia such as movie files and Adobe Flash animations. Expression Web doesn’t actually include the ability to insert these types of multimedia components out of the box. In time, you are sure to see many third-party developers offering such an option. In the meantime, you’ll have to do it manually. Microsoft offers good documentation on embedding Windows media into Web pages at their Windows Media Knowledge Center at www.microsoft.com/windows/windowsmedia/knowledgecenter/default.aspx. Adobe offers documentation on detecting and using the Flash player in Web pages at www.adobe.com/devnet/flash/articles/fp8_detection.html. There are also many other online resources available for inserting other multimedia content. The various development tools are also capable of producing the code necessary to include the content they generate on your Web pages. Adobe Flash, for example, is capable of producing all the code you need to display a Flash animation or movie on your Web site. Your best bet is to do a Web search for the content you want to deliver. You are almost guaranteed to find details on how to accomplish your goal.
255
6055_14.qxp
12/7/2006
12:10 PM
Page 256
6055_15.qxp
12/7/2006
12:13 PM
Page 257
CHAPTER
15
Configuring Page Editor Options
In this chapter Accessing Page Editor Options Editing Page Editor Options Lagniappe: Experiment to Learn More
6055_15.qxp
258
12/7/2006
12:13 PM
Page 258
Chapter 15 Configuring Page Editor Options
Accessing Page Editor Options 15
Expression Web is highly configurable and most of its configuration options are packed into a single dialog—the Page Editor Options dialog. To access the Page Editor Options dialog, select Tools, Page Editor Options. The first thing you’ll notice is the vast array of options spread out among 12 tabs. Instead of covering these options throughout the entire book, I will cover most of them in this chapter so that you’ll learn how to use these settings effectively.
Editing Page Editor Options As mentioned previously, the Page Editor Options dialog consists of 12 tabs, many of which are packed full of options. We’ll cover each of these tabs (with the exception of the AutoThumbnail tab, the Code Formatting tab, and the Code Snippets tab, which are covered elsewhere in the book) in this section.
The General Tab The General tab (shown in Figure 15.1) contains general options for Expression Web divided into four sections.
Figure 15.1 All general options for Expression Web are located on the General tab.
6055_15.qxp
12/7/2006
12:13 PM
Page 259
Editing Page Editor Options
259
The following options are available in the first section on the General tab: ■
➔
Automatically enclose form fields within a form—By default, the first form field you insert on a page is automatically wrapped in an HTML tag. You can override this behavior by unchecking this box.
For more information on using forms in Expression Web, see “Using Form Controls,” p. 195 (Chapter 11). ■
Assign unique IDs to new tables—If you’d like Expression Web to add an ID attribute to all new tables, check this box. Existing tables will not be affected.
■
Make ID unique on paste—When this option is checked, Expression Web will ensure that no duplicate control IDs are created when a control is pasted onto a page. TIP Some controls (such as form controls) use a name attribute instead of an ID attribute. Expression Web will always create a unique name attribute regardless of whether the Make ID unique on paste checkbox is checked.
■
Use <strong> and <em> when using bold and italic toolbar buttons—By default, Expression Web will use the <strong> and <em> tags to apply bold and italic formatting, respectively. This method is preferred to the alternative of using and tags, both of which are obsolete.
■
Automatically switch keyboard to match language of surrounding text—Windows has the ability to use different virtual keyboard layouts for different languages. You can check this box to cause Expression Web to automatically switch your keyboard based on the language of the text surrounding the insertion point.
■
Prompt for accessibility properties when inserting images—Expression Web will prompt you for alternate text and long descriptions when inserting images. If you’d prefer not to be prompted, uncheck this box.
CAUTION Turning the Prompt for accessibility properties when inserting images feature off makes it more likely that you will forget to add alternate text or long descriptions to your images. If you omit these attributes from your images, your Web site will not pass accessibility standards.
➔
For more information on accessibility settings, see “Accessibility Features in Expression Web,” p. 339 (Chapter 19).
The second section of the General tab provides access to spelling options, most of which are configured by clicking the Spelling Options button, as shown previously in Figure 15.1. When the Spelling Options button is clicked, the Spelling Options dialog shown in Figure 15.2 is displayed so you can configure how Expression Web checks spelling.
15
6055_15.qxp
260
12/7/2006
12:13 PM
Page 260
Chapter 15 Configuring Page Editor Options
Figure 15.2
15
The Spelling Options dialog provides plenty of options to customize how Expression Web checks your spelling.
You can also choose a language for spell-checking by clicking the Default Page Language dropdown on the General tab and selecting the language of your choice. The third section of the General tab contains one checkbox: Show Paste Options Buttons. This checkbox is checked by default and will cause Expression Web to display the Paste Options button when you paste content onto a Web page, as shown in Figure 15.3. You can disable the Paste Options button by unchecking this box.
Figure 15.3 The Paste Options button makes it easy to control content pasted into a Web page. You can disable the button by unchecking the Show Paste Options Buttons checkbox.
6055_15.qxp
12/7/2006
12:13 PM
Page 261
Editing Page Editor Options
261
The final section of the General tab contains options for Code View. The following options are available: ■
Word Wrap—This checkbox controls whether or not word wrap is enabled in Code View.
■
Auto Indent—This checkbox controls whether HTML elements are automatically indented underneath the parent element.
■
Line Numbers—This checkbox controls whether or not line numbers are displayed.
■
Selection Margin—When this checkbox is checked, a left margin will be added in Code View to make selecting code easier.
■
Highlight Invalid HTML—By default, Expression Web will highlight any invalid HTML in a page. By unchecking this box, you can turn off this behavior.
■
Highlight Incompatible HTML—By default, Expression Web will highlight any HTML that is incompatible with the current schema. By unchecking this box, you can turn off this behavior.
AutoThumbnail Tab The options available in the AutoThumbnail tab are covered in detail in Chapter 14, “Using Graphics and Multimedia.”
Default Fonts Tab The Default Fonts tab (shown in Figure 15.4) controls the font that Expression Web will use for a particular language when no font is configured in HTML or CSS code.
Figure 15.4 You can control the default font in Expression Web by using the settings in the Default Fonts tab.
15
6055_15.qxp
262
12/7/2006
12:13 PM
Page 262
Chapter 15 Configuring Page Editor Options
CAUTION Keep in mind that any font you configure in the Default Fonts tab may not be the font used when visitors to your Web site see your pages. Unless you explicitly specify a font and the site visitor has that font installed on his or her computer, the browser decides which font to use.
15
Code Formatting Tab The options available in the Code Formatting tab are described in Chapter 8, “Using Web Page Views.”
CSS Tab The CSS tab (shown in Figure 15.5) allows you to control how Expression Web uses CSS styles in your pages.
Figure 15.5 You can override Expression Web’s default CSS behavior using the CSS tab.
➔
For more information on using CSS with Expression Web, see “Managing CSS Styles,” p. 311 (Chapter 18).
By default, Expression Web will automatically add CSS code to your page when you apply formatting. This behavior is controlled by the following radio buttons in the CSS tab: ■
Auto Style Application—Expression Web will automatically apply CSS styles to formatted text using the CSS technology selected in the series of dropdowns.
■
Manual Style Application—Expression Web will display the Style Application toolbar shown in Figure 15.6 to allow you to manually choose how to apply styles.
6055_15.qxp
12/7/2006
12:13 PM
Page 263
Editing Page Editor Options
263
Figure 15.6 The Style Application toolbar allows you to manually choose how styles are applied.
In addition, there are a couple of checkboxes to control how Expression Web deals with CSS styles: ■
Only reuse classes with the prefix “style”—CSS classes that are added automatically by Expression Web will always have a prefix of “style”. By checking this box, you can ensure that Expression Web will not modify any CSS styles that were not auto-generated. This option is only available when the Auto Style Application option is selected.
■
Use width and height attributes for images instead of CSS—By default, Expression Web will use the width and height attributes to specify the width and height of images. By unchecking this box, you can force Expression Web to use CSS styling when specifying the height and width of images.
Color Coding Tab The Color Coding tab (shown in Figure 15.7) provides precise control over not only text elements, but also user interface elements in Expression Web. Figure 15.7 You can have highly detailed control over color-coding using the Color Coding tab.
15
6055_15.qxp
264
12/7/2006
12:13 PM
Page 264
Chapter 15 Configuring Page Editor Options
By selecting either the Code View Settings or Design View Settings radio button, you can control which items appear in the Display Items list.
15
Authoring Tab The Authoring tab (shown in Figure 15.8) lets you choose what kind of document Expression Web creates by default and also controls schemas for HTML documents.
Figure 15.8 Document schemas are configured in the Authoring tab.
The Default Document Type dropdown configures the type of document that Expression Web creates by default when you click the New Document button on the toolbar or press Ctrl-N on your keyboard. You can choose from HTML, ASPX, CSS, XML, or text file. The Document Type Declaration dropdown controls the DOCTYPE declaration included at the top of your pages. The DOCTYPE controls how Expression Web determines what code is valid. If code in the page isn’t valid or compatible with the selected schema, Expression Web will warn you, as shown in Figure 15.9. The Schema Version dropdown list contains configuration options for the CSS schema of the document. This setting affects only what appears in IntelliSense for CSS in the document. By selecting the CSS schema you want to target, you ensure that IntelliSense in Expression Web doesn’t display invalid CSS values.
6055_15.qxp
12/7/2006
12:13 PM
Page 265
Editing Page Editor Options
265
Figure 15.9 Expression Web uses the document schema to determine when invalid code exists in a page. If it finds invalid code, you will be notified.
Picture Tab The Picture tab (shown in Figure 15.10) configures how Expression Web works with images. Figure 15.10 You control how Expression Web works with image files by using the Picture tab.
15
6055_15.qxp
266
12/7/2006
12:13 PM
Page 266
Chapter 15 Configuring Page Editor Options
The File Type Settings button displays the Picture File Type dialog, as shown in Figure 15.11. This dialog makes it easy to configure settings for both GIF and JPEG images.
15
Figure 15.11 GIF and JPEG options are configured in the Picture File Type dialog.
➔
For more information on image file formats, see “Using Graphics and Multimedia,” p. 241 (Chapter 14).
Code Snippets Tab Details on the Code Snippets tab are available in Chapter 7, “Creating Pages and Content.”
Ruler and Grid Tab The Ruler and Grid tab (shown in Figure 15.12) controls the appearance of the grid and ruler that can be displayed in Design View. You can also choose the unit used for both the grid and the ruler. Figure 15.12 Control the appearance of the grid and ruler using the Ruler and Grid tab.
6055_15.qxp
12/7/2006
12:13 PM
Page 267
Editing Page Editor Options
The Display Grid section controls the grid that is visible when selecting View, Ruler and Grid, Show Grid. The Snapping Grid section allows you to configure the spacing for the Snap to Grid feature that is accessed by selecting View, Ruler and Grid, Snap to Grid.
➔
For more information on the grid and ruler, see “Using Web Page Views,” p. 127 (Chapter 8).
IntelliSense Tab The IntelliSense tab (shown in Figure 15.13) controls what IntelliSense will display in Code View. By default, all checkboxes are checked. You can turn off specific elements in IntelliSense by unchecking the desired checkboxes. N OTE
Available only in Code View, IntelliSense displays a context-sensitive dropdown list of choices as you enter code.
Figure 15.13 The IntelliSense feature available in Code View can be controlled using the options available in the IntelliSense tab.
Font Families Tab The Font Families tab (shown in Figure 15.14) makes it easy to configure one or more font families for selection in the Font dropdown on the Common toolbar, as shown in Figure 15.15.
267
15
6055_15.qxp
268
12/7/2006
12:13 PM
Chapter 15 Configuring Page Editor Options
Figure 15.14
15
Page 268
The Font Families tab is an easy way to configure and arrange font families in Expression Web.
Figure 15.15 Font families are selected from the Font dropdown on the Common toolbar.
6055_15.qxp
12/7/2006
12:13 PM
Page 269
Lagniappe: Experiment to Learn More
➔
269
For more information on using font families, see “Creating Pages and Content,” p. 103 (Chapter 7).
You can build a new font family by selecting fonts from the Add Font list and clicking Add. After you’ve created the desired font family, you can arrange the fonts by clicking Move Up or Move Down. You can also remove the font family by selecting it and clicking Remove.
Lagniappe (lan yap’) n.,
a gift or bonus
Experiment to Learn More There are numerous options that affect the way code is generated by Expression Web. Most of these options won’t affect code that has already been generated. Because of that, it’s important for you to understand how each option affects code so that you can make good decisions. Some of the options we’ve covered in this chapter cause subtle changes in the way Expression Web creates code. For example, changes to the Code Formatting or CSS properties may not cause obvious changes in the way that Expression Web generates code. The best way to fully understand these options is to create a new page and use it to test how different options affect the code Expression Web creates. By limiting your testing to small amounts of code, changes in Expression Web’s code will be more apparent. If you’ve experimented with options in the Page Editor Options dialog and want to revert to the original settings, you can click the Reset or Reset Defaults button that exists on many tabs. Note that each tab’s button will only reset the options on that particular tab.
15
6055_15.qxp
12/7/2006
12:13 PM
Page 270
6055_16.qxp
12/7/2006
12:15 PM
Page 271
CHAPTER
Using Find and Replace
In this chapter An Introduction to Find and Replace Finding and Replacing Text Using HTML Rules in Find and Replace Finding and Replacing HTML Tags Saving Queries Troubleshooting Lagniappe: Editing and Removing Recent Searches
16
6055_16.qxp
272
12/7/2006
12:15 PM
Page 272
Chapter 16 Using Find and Replace
An Introduction to Find and Replace
16
Anyone who uses a computer should be familiar with tools that find and replace text. Such tools are typically rudimentary, but a find and replace tool for a Web design application has stiffer requirements. Not only does it need to be able to locate and replace text in the body of Web pages, but it must also be able to locate and replace text that appears in code. Most importantly, it must be able to distinguish between the two. The word “button,” for example, has an entirely different connotation when used in the body of a page than when used in code. If you wanted to replace all HTML buttons with image buttons, you wouldn’t want to also replace the phrase “button-down shirt” with the phrase “image-down shirt.” The find and replace tool in Expression Web is well-suited to performing intelligent find and replace for Web sites. It offers features that are specifically designed for searching HTML code, and it provides a powerful search capability utilizing regular expressions. Regular expressions (sometimes referred to as “regex”) are specialized search strings that match patterns in text or code. As you’ll see in this chapter, the use of regular expressions adds powerful search capabilities that would not be possible otherwise. N OTE
Regular expressions comprise a language that can be difficult to master. A full discussion is outside the scope of this book. If you’re interested in learning regular expressions, I highly recommend that you read Sam’s Teach Yourself Regular Expressions in 10 Minutes from Sam’s Publishing.
Finding and Replacing Text Finding and replacing a simple word or phrase is a straightforward endeavor. In Web design, however, things are rarely simple. Suppose you have designed a Web site that contains hundreds of pages with Social Security numbers (SSNs) on them. Because of new requirements in your company, you are charged with the task of reformatting these SSNs. You need to keep the last four digits and replace the rest of each SSN with asterisks. A simple find and replace just won’t suffice, but a regular expression is perfect for such a job.
Using Regular Expressions The most efficient way of working with regular expressions is to separate your search into parts. When looking for an SSN, we need to find three numbers followed by a dash, two numbers followed by another dash, and then four numbers. Additionally, the first digit of the series must be between 0 and 7. N OTE
The actual structure of an SSN is more restrictive than the regular expression used here. To keep the regular expression example less complex, I opted for a simpler pattern.
6055_16.qxp
12/7/2006
12:15 PM
Page 273
Finding and Replacing Text
273
The final regular expression looks like this: [0-7][0-9]^2\-[0-9]^2\-{[0-9]^4}
If you’re unfamiliar with regular expressions, this example may appear to have a fairly complex syntax, but it’s actually quite simple. Let’s break it apart so you’ll fully understand how the language works. The first set of numbers we want to match consists of three digits and is known as the area number. The first digit must be between 0 and 7 because the Social Security Administration has never issued an SSN with an area number higher than 728. The regular expression to match this pattern is as follows: [0-7][0-9]^2
The first part of this expression, [0-7], indicates that any single digit between 0 and 7 will produce a match. The second part of the expression, [0-9]^2, indicates that any two digits between 0 and 9 will produce a match. The ^ character is the repeat expression character, and it is followed by the number of times the preceding expression should be repeated. The middle set of numbers we want to match consists of two digits between 0 and 9 and is known as the group number. The syntax for the regular expression is [0-9]^2. This syntax should now be familiar to you. It means that we want to match a character between 0 and 9 and then repeat that expression two times. The last set of numbers we want to match consists of four digits between 0 and 9 and is called the serial number. The syntax for the regular expression is [0-9]^4. The curly braces surrounding this portion of the regular expression will be explained in the “Replacing Text” section later in this chapter. Between each set of numbers is a dash character. A dash is a special kind of character because not only can you write a regular expression to look for a dash in some text, but it is also used in regular expression syntax. (In the regular expression we’re using in this chapter, the dash is used to indicate a range of digits.) To actually find an explicit dash in text, you need to specify that you are looking for an actual dash and not using it as part of the regular expression. The \ character, called the escape character, does just that. By preceding a character with the \, you are telling Expression Web that you want to match that character. Therefore, the regular expression \- will match a dash character in text.
Finding Text The Find and Replace dialog (shown in Figure 16.1) is made up of three tabs: ■
Find—Provides tools for locating text within one or more Web pages.
■
Replace—Provides tools for locating and replacing text within one or more Web pages.
■
HTML Tags—Provides tools for locating and replacing HTML code.
16
6055_16.qxp
274
12/7/2006
12:15 PM
Page 274
Chapter 16 Using Find and Replace
Figure 16.1 The Find and Replace dialog provides all the tools needed to locate and replace both text and HTML code.
16
To find specific text in one or more Web pages, open the Find and Replace dialog by selecting Edit, Find. Enter the text you wish to search for in the Find What textbox, select the desired options, and click Find All to display the search results. You can choose to search from the insertion point up, from the insertion point down, or in all directions by selecting the desired radio button in the Direction section. If the radio buttons in the Direction section are all disabled, see “Cannot Select Search Direction” in the “Troubleshooting” section of this chapter.
You can specify where to search for the text entered using the radio buttons in the Find Where section of the Find and Replace dialog. The following options are available:
➔
■
All Pages—Searches for the specified text in all pages in the current Web site.
■
Open Page(s)—Searches for the specified text in all open pages.
■
Selected Page(s)—Searches for the specified text in all selected pages. Pages can be selected in the Folder List task pane or in Folders View.
■
Current Page—Searches for the specified text in the current page only.
For more information on using the Folder List task pane and Folders View, see “A Tour of Expression Web”, p. 3 (Chapter 1).
TIP Some of the options in the Find Where section may be disabled based on what you currently have open in Expression Web.
6055_16.qxp
12/7/2006
12:15 PM
Page 275
Finding and Replacing Text
275
You can also specify additional options for searching in the Advanced section. Check the Regular Expression checkbox if the text you have entered is a regular expression. If you would like to search source code for the text you have entered, check the Find in Source Code checkbox. The other options should be self-explanatory. If the Find in Source Code checkbox is disabled, see “Find in Source Code Disabled” in the “Troubleshooting” section of this chapter. If searches in source code don’t return results when they should, see “Source Code Searches Don’t Work” in the “Troubleshooting” section of this chapter.
When you click Find All, Expression Web displays the results in the Find 1 task pane by default. You can display the results in a second task pane (the Find 2 task pane) by selecting the Find 2 radio button in the Display Results In section. Figure 16.2 shows the results of a search for SSNs using the regular expression shown in Figure 16.1. The results are displayed in the Find 2 task pane, but previous search results in the Find 1 task pane can be recalled easily by clicking the Find 1 tab to display the Find 1 task pane. This is useful in cases where you want to start a new search but are not yet finished working on results from a previous search. Figure 16.2 The results of a regular expression search for SSNs is displayed in the Find 2 task pane. The ability to use two task panes for search results allows you to easily work with two different result sets.
The Find 1 tab The Find 2 tab
If you need assistance with entering a regular expression search, click the Regular Expressions button, as shown in Figure 16.3. Simple regular expressions can be built easily using this method. Complex regular expressions will likely require manual entry instead of using the Regular Expressions button. Fortunately, Expression Web keeps a list of recently used searches so you can easily recall a complex search later. By clicking the Most Recently Used button, you can access a list of previously entered searches, as shown in Figure 16.4.
➔
For an even better way of saving complex searches, see “Saving Queries,” p. 283, later in this chapter.
16
6055_16.qxp
276
12/7/2006
12:15 PM
Page 276
Chapter 16 Using Find and Replace
Figure 16.3 The Regular Expressions button can make creating regular expression searches fast and easy, but don’t expect to find advanced regular expression syntax here.
Regular Expressions button
16
Figure 16.4 Expression Web maintains a list of recent searches you can recall with the click of a button.
Most recently used button
Replacing Text To replace text, open the Find and Replace dialog by selecting Edit, Replace. If the Find and Replace dialog is already open, you can simply click the Replace tab. Enter the text you want to search for in the Find What textbox and the text that should replace it in the Replace With textbox, as shown in Figure 16.5.
6055_16.qxp
12/7/2006
12:15 PM
Page 277
Finding and Replacing Text
Figure 16.5 The Replace tab allows you to locate text and replace it with the text you specify.
277
Most Recently Used Button
16
You can also use regular expressions when replacing text. Remember that the requirements for our Social Security example are that all SSNs should be reformatted so that only the last four digits of the number are displayed. All other digits should be replaced with asterisks. Without regular expressions, you wouldn’t be able to perform such a complex replace, but with regular expressions, it’s fairly straightforward. We’ve already covered the regular expression used to locate SSNs. Here it is again: [0-7][0-9]^2\-[0-9]^2\-{[0-9]^4}
I’ve already explained everything in the regular expression with the exception of the curly braces. Curly braces in a regular expression allow you to store the result of the expression inside the braces so it can be used later on. An expression inside curly braces is called a tagged expression. You can have any number of tagged expressions in a regular expression. Tagged expressions are used when replacing text using regular expressions. Let’s look at a specific example using the SSN replacement we’re performing. Consider the following SSN: 232-00-2323
When our regular expression locates this SSN, it should replace it with the following: ***-**-2323
Replacing the numbers with asterisks is simple, but we also need to leave the last four digits as they are. We could just change the regular expression so that it located all patterns of ###-## and just replaced them with asterisks. However, there may be instances of that pattern that aren’t SSNs. For example, suppose the pages also contain employee numbers and they are in the format ###-##. In that case, we would be replacing the employee numbers with asterisks, and that’s not what we want.
6055_16.qxp
278
12/7/2006
12:15 PM
Page 278
Chapter 16 Using Find and Replace
Tagged expressions are the perfect solution to this problem. By using tagged expressions, we can use our regular expression as-is and easily perform the replace operation that is required. Figure 16.6 shows the Find and Replace dialog ready to perform the SSN replacement. The regular expression in the Replace With textbox shows the asterisks that will be used in place of the first five numbers in the SSN. The expression \1 that appears in place of the last four digits will be replaced with the result of the first tagged expression.
16
Figure 16.6 By using tagged expressions, portions of matched text can be stored for use when replacing text.
TIP As previously mentioned, you can have any number of tagged expressions. The first one is \1, the second is \2, and so on. There is an additional tagged expression, \0, that can be used to refer to the entire string that was matched by a regular expression.
The Regular Expressions button next to the Replace With textbox (see Figure 16.7) provides easy access to tagged expressions. Simply click the Regular Expressions button and then choose the desired tagged expression to have it inserted into your regular expression.
6055_16.qxp
12/7/2006
12:15 PM
Page 279
Using HTML Rules in Find and Replace
279
Figure 16.7 Inserting tagged expressions is accomplished by clicking the Regular Expressions button.
16
Using HTML Rules in Find and Replace Let’s add an additional level of complexity to the SSN search. Suppose there are many places where SSN-type patterns are presented in the Web site, but you only want to find and replace the ones that are actual SSNs. All the actual numbers appear inside tags and are styled with a CSS class called empData. What may at first seem like an impossible task is actually made easy using HTML rules.
➔
For more information on CSS styles, see “Creating Style Sheets,” p. 289 (Chapter 17).
To access HTML rules, click the HTML Rules button in the Find and Replace dialog. When you do, the HTML Rules dialog is displayed, as shown in Figure 16.8. Figure 16.8 The HTML Rules feature adds impressive power to your searches.
6055_16.qxp
280
12/7/2006
12:15 PM
Page 280
Chapter 16 Using Find and Replace
Let’s configure an HTML rule to replace the SSN found in the sample Web site in the Examples\Ch17\Files\Website folder on the CD that accompanies this book.
1. Open the Web site in Expression Web. 2. Open the default.htm page. 3. Select Edit, Replace to display the Find and Replace dialog. 4. In the Find What textbox, enter the following regular expression: [0-7][0-9]^2\-[0-9]^2\-{[0-9]^4}
16
5. In the Replace With textbox, enter the following regular expression: ***-**-\1
6. Click the HTML Rules button. 7. Select New Rule in the dialog. 8. From the New Rule dropdown, select Inside Tag. 9. From the tag dropdown, select div. 10. Select New Rule directly under the Inside Tag rule, as shown in Figure 16.9. Figure 16.9 You can create nested rules to search for specific patterns within a specified tag. In this case, we want to apply a new rule to the div tag search.
11. From the New Rule dropdown, select With Attribute. 12. From the attribute dropdown, select Class. 13. Click inside the [any value] dropdown and enter “empData”, as shown in Figure 16.10.
6055_16.qxp
12/7/2006
12:15 PM
Page 281
Using HTML Rules in Find and Replace
281
Figure 16.10 Powerful searches can be created by nesting rules. In this case, we want to find only text in a with a CSS class attribute of empData.
16
14. Click OK to add the new HTML rule. After the HTML rule has been added, the text of the HTML rule will be displayed next to the Clear Rules button, as shown in Figure 16.11. Figure 16.11 Applied HTML rules are displayed within the Find and Replace dialog. To clear a rule, click the Clear Rules button.
Clear rules button Applied HTML rule
Make sure that the Current Page radio button is selected and click Replace All to perform the replacement.
6055_16.qxp
282
12/7/2006
12:15 PM
Page 282
Chapter 16 Using Find and Replace
Finding and Replacing HTML Tags In addition to searching for and replacing text within a page, you can also search and replace or modify HTML tags using the Find and Replace dialog. To find and replace HTML tags, select Edit, Find or Edit, Replace and click the HTML Tags tab. Select the desired tag in the Find Tag dropdown and select the replace action from the Replace Action dropdown if desired. Depending on what you select in the Replace Action dropdown, other options will be made available.
16
Let’s change the empData class in default.htm to employeeData. Open the Web site and open default.htm. Complete the following steps to replace the class attribute’s value:
1. Select Edit, Replace. 2. Click the HTML Tags tab. 3. From the Find Tag dropdown, select div. 4. In the Replace Action dropdown, select Set Attribute Value. 5. In the Attribute dropdown, select Class. 6. In the To dropdown, enter “employeeData”, as shown in Figure 16.12. Figure 16.12 Searching for and modifying HTML tags is another powerful feature of the Find and Replace tool in Expression Web.
7. Click Replace All to replace the class attribute. Switch to Code View and look at the tag. Notice that the empData CSS class has been changed to employeeData.
6055_16.qxp
12/7/2006
12:15 PM
Page 283
Troubleshooting
TIP HTML rules can also be applied when finding and replacing HTML tags for even more powerful searches.
Saving Queries The SSN example used in this chapter is a fairly simple one. Much more complex searches are possible, and if you add a series of HTML rules to the mix, configuring a search can be a time-consuming process. That’s not a big deal if your search is a one-time thing, but if you find yourself in the position of having to perform a particular search more than once, being able to save the search for later use can save a lot of time. Expression Web can save searches you perform using the Query buttons in the Find and Replace dialog. Click the Save Query button to save a query and the Open Query button to open a previously saved query. N OTE
Expression Web queries are saved in the AppData\Roaming\Microsoft\ Expression\Web Designer\Queries folder in the current user’s profile
path by
default.
Expression Web queries are saved as .fpq files and are in XML format. The code below shows the XML for the SSN example used in this chapter:
Troubleshooting Cannot Select Search Direction I’d like to search from the insertion point down, but the radio buttons in the Direction section are all disabled and I can’t change the setting. Make sure that a page is open and that Current Page is selected in the Find Where section. Setting search direction is only valid when you are searching within the current page.
283
6055_16.qxp
284
12/7/2006
12:15 PM
Page 284
Chapter 16 Using Find and Replace
Find in Source Code Disabled I’m trying to select the Find in Source Code checkbox, but it’s disabled. If you have a page open and Current Page is selected in the Find Where section, the Find in Source Code checkbox is disabled. If the page is open in Design View, searches are performed on text inside the Web page. If the page is open in Code View, searches are performed on source code.
Source Code Searches Don’t Work I have a page open in Code View. I want to search in source code and I have Current Page selected. However, even though I am entering HTML code that should be found, no search results are produced. Chances are you have an HTML rule applied to your search. Find in Source Code is always disabled and deactivated when HTML rules are applied. Clear the rule by clicking the Clear Rules button if you want to search in HTML code.
Lagniappe (lan yap’) n.,
a gift or bonus
Editing and Removing Recent Searches As mentioned previously in this chapter, Expression Web saves a list of previously used searches so you can access them by clicking the Most Recently Used button shown earlier in Figure 16.4. Expression Web saves a long list of recent searches, and it’s likely that you may want to clear them out or edit them from time to time. Expression Web doesn’t provide any user interface element for editing or removing recent searches, but you can do it manually by editing the Registry. CAUTION Be careful when editing the Registry. If you make modifications without knowing what you’re doing, you can cause serious problems with your applications or with Windows itself.
Most recently used searches are stored in the following Registry key: HKEY_CURRENT_USER\Software\Microsoft\Expression\Web Designer\12.0\FindMRU
To make changes or remove recent searches, make sure Expression Web is not running and then perform the following steps:
1. Open a command prompt. 2. From the command prompt, type “regedit” and press Enter. 3. Expand the HKEY_CURRENT_USER section. 4. Expand the Software section under HKEY_CURRENT_USER. 5. Expand the Microsoft section under Software.
6055_16.qxp
12/7/2006
12:15 PM
Page 285
Lagniappe: Editing and Removing Recent Searches
6. Expand the Expression section under Microsoft. 7. Click once on the Web Designer folder under Microsoft to select it. 8. Select File, Export. 9. Enter “ewd_backup.reg” for the filename and save the file to your Desktop or another accessible area. This will create a backup of the Web Designer section of the Registry.
10. Expand the Web Designer section. 11. Expand the 12.0 section under Web Designer. 12. Click once on the FindMRU folder to select it. You should see Registry keys similar to the ones in Figure 16.13. Note that the names of these keys are in incremental order beginning at 0. To remove all entries from the recent list of searches, select all keys with a numeric value and press Delete to delete them. Figure 16.13 Recent searches are stored in the Registry. You can remove or edit them, but be careful and back up the key first!
Recently used search keys
CAUTION Do not delete the key named (Default). That key should always be present.
If you’d like to edit an entry, double-click on the entry and modify it as needed. Click OK to commit the change, as shown in Figure 16.14.
285
6055_16.qxp
286
12/7/2006
12:15 PM
Page 286
Chapter 16 Using Find and Replace
Figure 16.14 Double-click on the name of a specific key to edit it.
If you’d like to remove one or more entries but not all of them, make sure that any remaining entries are in numerical order beginning at 0. To renumber a specific key, select it and then press F2. Enter the new name and press Enter to commit it. If you make any errors while editing the Registry, close the Registry Editor and double-click on the .reg file you saved before you began editing the Registry. Click Yes when asked if you want to add the information to the Registry. As a final note, if you make changes to the recent searches and your changes don’t show up in Expression Web, make sure that Expression Web is closed when you are making your changes. If it is closed and your changes still don’t take effect, it’s likely that an instance of EXPRWD.EXE is running and you just can’t see it. Right-click in an empty area of your task bar and select Task Manager from the menu. Click the Processes tab and look for EXPRWD.EXE. (You can click the Image Name column to search by that column.) If you find an active instance, select it and click End Process to get rid of it. You should then be able to successfully edit your recent searches.
6055_pt04.qxp
11/30/2006
9:00 AM
Page 287
PART
IV
Using CSS in Expression Web 17
Creating Stylesheets
18
Managing CSS Styles
289 311
6055_pt04.qxp
11/30/2006
9:00 AM
Page 288
6055_17.qxp
12/7/2006
12:16 PM
Page 289
CHAPTER
Creating Style Sheets
In this chapter The Purpose of CSS How CSS is Applied to Web Pages Formatting Content with CSS Positioning Content with CSS CSS Classes Troubleshooting Lagniappe: CSS Background Images
17
6055_17.qxp
290
12/7/2006
12:16 PM
Page 290
Chapter 17 Creating Style Sheets
In the most basic sense, HTML provides a description of a Web page. It tells a browser things such as “this text should be green,” “there should be a graphic here,” or “this text should link to a particular location.” In other words, HTML is primitive. It’s so primitive, as a matter of fact, that even the earliest Web developers realized its limitations quickly. They yearned for a way to define the layout of a Web page. In the early days of HTML, the models for disseminating information in written form were newspapers, magazines, and scientific journals. If a Web developer wanted to try and present information in the same manner in a Web page, he or she was just out of luck. HTML did not provide the means to precisely control layout. As browsers developed, Web designers found themselves even more frustrated as the few features that did allow for some layout techniques were removed. There had to be a better way.
17
In 1994, CSS was unveiled to the Web development community. I can remember the advent of CSS, and I don’t remember it being a big deal. However, as time has progressed and as CSS has matured, it has gained in importance. In today’s world of Web development, you’re severely impacted (and not in a positive way) if you aren’t well-versed in how to use CSS effectively. Microsoft has traditionally fallen behind in support for CSS. FrontPage, Microsoft’s Web development platform prior to Expression Web, suffered from poor CSS support. FrontPage’s weakness was highlighted to a greater extend due to the fact that Macromedia Dreamweaver (now Adobe Dreamweaver), FrontPage’s primary competitor, had excellent support for CSS. Something had to change if Microsoft was going to stay in the Web design game. That something was Expression Web. The support for CSS in Expression Web is vastly improved over any of Microsoft’s previous Web development tools. In fact, Microsoft’s other current Web development tools can’t touch Expression Web when it comes to CSS features. In the next couple of chapters, we will explore the CSS capabilities of Expression Web. When we’re finished, you’ll have all the skills needed to confidently manage all your CSS needs in Expression Web.
The Purpose of CSS CSS is well-suited to applying formatting to page elements. For example, you can change font color, size, and style using CSS. You can also change the position of text, tables, images, and so on. However, CSS isn’t alone in its ability to format page elements. HTML has tags and attributes that provide similar functionality. The HTML tag, for example, has a color attribute, a size attribute, a face attribute, and the like, and all of these can be used to apply formatting to text. Given that fact, why even worry about CSS? TIP Formatting page elements using HTML is quickly being replaced by CSS. In fact, the most recent HTML recommendation from the W3C suggests that most HTML formatting techniques be avoided in favor of CSS.
6055_17.qxp
12/7/2006
12:16 PM
Page 291
The Purpose of CSS
291
To gain a full understanding of why you would want to use CSS instead of traditional HTML formatting techniques, let’s look at an example. The code in Listing 17.1 shows a simple Web page using only HTML to apply formatting.
We have plenty to offer. Browse around and let us know what you think.
Company News
We’re going public! Don’t miss our IPO this Wednesday.
29
Figure 17.1 shows the page from Listing 17.1 in a browser window. As you can see, it’s easy to get the formatting you want using simple HTML. Now let’s imagine that I’ve used this same HTML formatting technique throughout an entire Web site. What happens if I need to change the font from Arial to Verdana? Worse yet, what happens if I need to change the font to Verdana and I also need to change the color and size of the headings? The only way to take care of such tasks across a large site would be to use search and replace to change the code. But if I use search and replace, I have to allow my Web design tool to make widespread changes across my site in bulk. What if my Web site includes some articles on CSS and I have included the word “Arial” in those articles? Unless I account for that in my search and replace, I could end up messing up the actual content of my site.
17
6055_17.qxp
292
12/7/2006
12:16 PM
Page 292
Chapter 17 Creating Style Sheets
Figure 17.1 A simple Web page formatted using only HTML tags and attributes.
17
CAUTION Making site-wide changes using any type of search and replace tool is risky. Computers are notoriously bad at recognizing the context in which words are being used, and if you rely on a computer program to determine what content to change in your site, you are opening yourself up to errors that may go undetected until a site visitor points them out.
CSS solves this problem perfectly because it allows you to separate your content from your formatting. By applying formatting with CSS, you can simply make changes to a CSS file and it will apply to all relevant formatting across the entire site. Listing 17.2 shows the page from Listing 17.1 with formatting applied using CSS instead of HTML code.
Listing 17.2 1 2 3 4 5 6 7 8 9 10
Page Formatting with CSS
Welcome
Welcome to our Web site!
6055_17.qxp
12/7/2006
12:16 PM
Page 293
How CSS Is Applied to Web Pages
Listing 17.2 11 12 13 14 15 16 17 18 19 20 21
293
continued We have plenty to offer. Browse around and let us know what you think.
Company News
We’re going public! Don’t miss our IPO this Wednesday.
22
This page looks much cleaner. It also has seven fewer lines of code than the page in Listing 17.1. That means less code for users to download, and that translates directly into pages that download faster.
17 TIP The small example here actually decreased the size of this page by 1/3. On actual pages, using CSS for formatting can reduce the size of pages dramatically. Site visitors will have to download the CSS file the page links to, but the CSS file gets cached on the user’s end, so it only has to be downloaded once.
In Listing 17.2, I used CSS classes to apply formatting. Line 4 links a CSS file to the page. Inside of that CSS file, I created two CSS classes: one called pageHeading and another called stdContent. Those CSS classes are applied to page elements using the HTML class attribute. N OTE CSS classes are only one way of applying CSS to a page. We’ll discuss all the methods of applying styles in the next couple of chapters.
As we progress through this chapter, I’ll demonstrate how easy it is to use the features provided in Expression Web to format pages using CSS; but first, let’s briefly discuss how CSS can be applied to a page.
How CSS Is Applied to Web Pages There are three different ways to apply CSS to your Web pages: ■
External Style Sheets—External style sheets are files with a .css file extension in which styles are defined for one or more pages.
■
Embedded Style Sheets—Embedded style sheets use the same syntax as external style sheets, but the CSS code exists within the HTML instead of within a separate file.
■
Inline Styles—Inline styles are applied using the style attribute of an HTML tag.
6055_17.qxp
294
12/7/2006
12:16 PM
Page 294
Chapter 17 Creating Style Sheets
It is uncommon to use only one of these techniques. Most Web developers use a combination of two or more techniques to define the styles for a particular Web site. However, there are benefits and drawbacks to each technique, and understanding those benefits and drawbacks is critical to using CSS correctly.
External Style Sheets When most people think of CSS, they think of external style sheets. An external style sheet is a special file with a .css file extension. Inside of this file, the styles for one or more pages are defined. The page in Listing 17.2 is formatted using an external style sheet. Styles in an external style sheet can be defined using existing HTML tags, by creating custom style definitions known as CSS classes, or by using a combination of the two. External style sheets are connected to pages using the HTML tag. The following code creates a link to a style sheet called styles.css located in a styles directory:
17
In the code above, I’ve linked to a style sheet located in a folder named styles. In fact, a style sheet can be stored in any folder you choose, and it’s common for Web designers to create a specific folder structure for organizing style sheets. Multiple external style sheets can be attached to a page. If multiple style sheets are attached, styles are processed in the order in which they appear on the page. This process is known as cascading. N OTE You’ll learn more about cascading in the next chapter.
Embedded Style Sheets Embedded style sheets look just like external style sheets, but instead of existing inside a separate file that is linked to a page, an embedded style sheet is actually part of the HTML code of the page. N OTE Embedded style sheets apply only to the page that contains them. Only external style sheets can be applied to multiple pages.
There are several reasons for using an embedded style sheet. Because an embedded style sheet overrides any of the styles that are configured in an external style sheet, embedded style sheets are often used to create page-specific styles while still using global styles that exist in an external style sheet.
6055_17.qxp
12/7/2006
12:16 PM
Page 295
How CSS Is Applied to Web Pages
295
It’s also common to use embedded style sheets in scenarios where there is no semblance of a Web site structure. For example, if you distribute software and you include an HTML file in the root of your software’s CD, you might use an embedded style sheet to define the CSS styles for the HTML file. You might also use an embedded style sheet if you send out HTML e-mail for a mailing list. I have several mailing lists to which I send mailings on a regular basis, and I use embedded style sheets to define the layout of those mailings.
Inline Styles Inline styles are applied directly to an HTML tag via the style attribute. The following code shows an inline style applied to a
tag:
Some Text
Those of you who were Microsoft FrontPage users before moving to Expression Web will be familiar with inline styles. FrontPage was famous for using inline styles to apply formatting. The use of inline styles is perfectly fine if it’s a deliberate decision. However, if you use inline styles indiscriminately, it can cause many problems because inline styles override a style defined anywhere else. In other words, if you have a page that is full of inline styles and you decide to move to external or embedded style sheets after those inline styles have been added, you’ll need to remove the inline styles from the page. If you don’t, styles that are defined in your external and embedded style sheets will be overridden by the inline styles. CAUTION Expression Web sometimes applies formatting using inline styles. When making formatting changes to dialogs in Expression Web, it’s always a good idea to check the code to make sure you haven’t overridden a style or otherwise changed formatting in a way you didn’t intend. Expression Web’s Find and Replace feature is an excellent tool for locating inline styles in your Web site. For more information on locating HTML attributes using the Find and Replace tool, see “Using HTML Rules in Find and Replace”, p. 279 (Chapter 16).
The unintentional use of inline styles was a common problem encountered by users of Microsoft FrontPage, and it’s one that has largely been overcome in Expression Web. Expression Web will usually use embedded style sheets instead of inline styles, and while embedded styles still override external styles, they are easier to locate and modify or remove. We’ll cover the details of inline styles in the next chapter.
17
6055_17.qxp
296
12/7/2006
12:16 PM
Page 296
Chapter 17 Creating Style Sheets
Formatting Content with CSS In case you haven’t picked up on it yet, I’m a big believer in learning by doing. In keeping with that philosophy, we’re going to learn how to create and use CSS in Expression Web by creating a simple Web site and formatting it using CSS.
1. Open an existing Web site or create a new one-page Web site in Expression Web. 2. Open the page that Expression Web creates in the Web site. 3. Enter the text “Welcome 4. Select Heading
1
to Our Web Site”.
from the Style dropdown.
5. Press Enter. 6. Enter a few sentences of text. Anything you choose is fine. 7. Press Enter to start a new paragraph. 8. Enter the text “Links”.
17
9. Select Heading
2
from the Style dropdown.
10. Enter some hyperlinks, one per line, to some sites of your choice. 11. Save the page.
➔ ➔
For more information on creating a Web site, see “Creating a Web Site”, p. 25 (Chapter 2). For more information on formatting text, see “Creating Pages and Content”, p. 103 (Chapter 7).
TIP To generate some content for sample pages such as the one you just created, use the Lipsum Generator located at www.lipsum.com/.
When you select Heading 1 from the Style dropdown, Expression Web wraps the paragraph with the tag. Selecting Heading 2 wraps the paragraph with the tag. By default, the browser determines what heading styles look like, but you can easily customize them using CSS. Select File, New, CSS to create a new, blank style sheet. Add the code in Listing 17.3 to the empty style sheet.
Save the style sheet into the current Web site as styles.css. CSS files have a fairly simple syntax. In this CSS file, there are two blocks of CSS code. The first block consists of Lines 1–6. The second block consists of Lines 8–13. Each block begins with an HTML selector. A selector is really just an HTML tag you are formatting with CSS. This code snippet shows the syntax used in a CSS file: selector,[selector]... { }
At least one selector must be specified. However, you can specify more than one if you wish by separating them with commas. Following the selector(s) is an opening curly brace followed by CSS formatting code. A closing curly brace closes off the code for the specified selector(s). CSS code itself is in the following format: css_property: value;
N OTE There are numerous CSS properties and we won’t cover all of them in this book. For a detailed look at CSS, read Cascading Style Sheets (CSS) By Example from Que Publishing.
In Listing 17.3, the first block specifies the h1 and h2 selectors. Notice that both of these selectors appear on the same line and are separated by a comma. In this case, I am formatting both the and HTML tags with the CSS code in Lines 3–5. In Line 8, I have specified the p HTML selector, and that selector is formatted using the CSS code in Lines 10–12. Now that we’ve created a CSS style sheet, we need to link it to our page so that the styles defined in the style sheet will apply to the page.
1. Choose Format, CSS Styles, Apply Styles to activate the Apply Styles task pane, as shown in Figure 17.2.
17
6055_17.qxp
298
12/7/2006
12:16 PM
Page 298
Chapter 17 Creating Style Sheets
Figure 17.2 The Apply Styles task pane is a powerful tool for applying CSS styles.
17
2. Click the Attach Style Sheet link in the Apply Styles task pane. 3. Click the Browse button in the Attach Style Sheet dialog, as shown in Figure 17.3. Figure 17.3 The Attach Style Sheet dialog allows you to link an external style sheet to one or all pages. You can also import a style sheet into a page as an embedded style sheet.
4. In the Select Style Sheet dialog, navigate to the styles.css file as shown in Figure 17.4. 5. Select the styles.css file and click Open. 6. Make sure that the Link radio button is selected in the Apply Style Sheet dialog, as shown in Figure 17.3.
7. Click OK. If the Attach Style Sheet link in the Apply Styles task pane isn’t active, see “Attach Style Sheet Link Is Disabled” in the “Troubleshooting” section of this chapter.
After you click OK in the Apply Style Sheet dialog, you should see the formatting of the page change immediately. Figure 17.5 shows the original page without CSS formatting, and Figure 17.6 shows the page after applying the CSS style sheet.
6055_17.qxp
12/7/2006
12:16 PM
Page 299
Formatting Content with CSS
299
Figure 17.4 The Select Style Sheet dialog provides a view of files on your computer as well as on file shares and Web servers. In most cases, you’ll choose the Current Site button.
17
Figure 17.5 Our simple page without CSS formatting applied.
6055_17.qxp
300
12/7/2006
12:16 PM
Page 300
Chapter 17 Creating Style Sheets
Figure 17.6 Linking the CSS style sheet to the page in Figure 17.5 has changed the formatting. No other changes were made to this page.
17
After applying the style sheet, you might notice that the paragraph text on the page is probably a bit too small. Let’s edit the CSS file to increase the size of the text slightly.
1. Open styles.css inside Expression Web. Leave default.htm open as well so that you can quickly see the effect of your changes to the style sheet.
2. Change the CSS code for the p selector from this font-size: 9px
to this font-size: 11px
3. Switch to default.htm and review the change. 4. Save the changes to styles.css. If you are prompted to save styles.css as an embedded file, see “Prompted to Save Embedded File” in the “Troubleshooting” section of this chapter.
6055_17.qxp
12/7/2006
12:16 PM
Page 301
Positioning Content with CSS
301
Notice that the changes made to the style sheet immediately changed the text size in default.htm, but those changes in formatting didn’t actually cause a change to the default.htm file itself. In other words, you don’t have to save default.htm after making a change to the style sheet. In fact, this is a good illustration of the power of CSS. If you had one thousand pages linked to styles.css, a change to styles.css would immediately affect all those pages without directly making any change to the pages themselves. You should now be starting to really grasp the importance of using CSS to develop Web sites efficiently.
Positioning Content with CSS So far, we’ve looked at changing the formatting of text elements using CSS. However, CSS also has powerful positioning capabilities. You’ve probably heard of absolute positioning. Absolute positioning is the technique of positioning elements on a page using an X,Y coordinate system. Using this technique, the upper left pixel on the page is at location 0,0. As you progress across the page horizontally, the X coordinates increase and as you progress down the page vertically, the Y coordinates increase. Using this method, it’s possible to precisely plot a point on a page. Absolute positioning is accomplished using CSS exclusively. In fact, one of the drawbacks to using HTML is that it has no concept of placement on a page other than basic alignment. For example, you can choose to align a paragraph on the right edge, left edge, or center of a page, but if you want more precise alignment, you’ll need to use tables or insert a resizable page element adjacent to the object you’re attempting to align. This approach is clumsy at best and a source of extreme frustration for Web developers. One of the reasons why absolute positioning is a great solution is that it uses the pixel as a system of measurement. Regardless of screen resolution, computer type, or browser flavor, a pixel is always going to be a universal measurement. If you position a graphic 200 pixels from the left edge of a page, that graphic will be exactly 200 pixels in distance from the edge on every computer that displays your Web page. TIP Absolute positioning may not be the Holy Grail that it first appears to be. There are some weird behaviors that you may notice if you use absolute positioning often. A good resource to keep track of weird behavior regarding CSS positioning is the Position Is Everything Web site located at www.positioniseverything.net.
Let’s position a graphic on default.htm using CSS positioning.
1. Create a new folder in the current Web site. Name the folder images. 2. Import a graphic file of your choice into the images folder. If you wish, you can use the sample graphic in the Examples\Ch18\Files folder on the CD that accompanies this book.
17
6055_17.qxp
302
12/7/2006
12:16 PM
Page 302
Chapter 17 Creating Style Sheets
3. Place the cursor at the left of the first line on default.htm and press Enter to add a new line at the top of the page.
4. Add the image you imported in Step 2. 5. Click the down arrow on the Quick Tag Selector and select Positioning, position: absolute, as shown in Figure 17.7. Your page should now look like Figure 17.8. Figure 17.7 The Quick Tag Selector is a great way to change the positioning of an image quickly and easily.
17
6. Place the mouse cursor over the Block Selector, as shown in Figure 17.8, and drag the image to a new location.
➔ ➔ ➔
For more information on adding graphics to a Web page, see “Using Graphics and Multimedia”, p. 241 (Chapter 14). For more information on using the Quick Tag Tools, see “Using the Quick Tag Tools”, p. 227 (Chapter 13). For more information on positioning objects, see “Creating Pages and Content”, p. 103 (Chapter 7).
6055_17.qxp
12/7/2006
12:16 PM
Page 303
Positioning Content with CSS
Figure 17.8 When an image has been set to be absolutely positioned, it actually appears on top of other page content.
303
The Block selector
17
Even though you made no modifications to the styles.css file, the image you just moved actually uses inline CSS for positioning. A quick view of the code for the image is all that’s needed to confirm that point. Here is the tag after being repositioned:
➔
For more information on inline styles, see “Managing CSS Styles”, p. 311 (Chapter 18).
Your exact tag will differ slightly depending on where you positioned the image, but you’ll still see the same basic syntax. The style attribute added to the tag now contains the following settings: ■ position: absolute—Specifies
that the image should be positioned absolutely on the
page. ■ top: 259px—Positions
likely be different.
the image 259 pixels from the top of the page. Your value will
6055_17.qxp
304
12/7/2006
12:16 PM
Page 304
Chapter 17 Creating Style Sheets
■ left: 232px—Positions
the image 232 pixels from the left edge of the page. Your value
will likely be different. ■ z-index: 1—Sets
the z-position for the image. Z-position 0 is the surface of the page. Higher z-positions appear above content with lower z-positions.
➔
For more information on z-position, see “Using Layers”, p. 439 (Chapter 25).
If you remember my previous comments on using inline styles, you might begin to question why Expression Web chooses an inline style for the positioning of this image. In many cases, the position of absolutely positioned page elements is page-specific. Therefore, positioning those elements using inline styles is the most efficient method.
17
There are some cases where objects may be absolutely positioned on all pages. For example, you might have a menu that appears on all your pages. If you were going to position that menu absolutely, you’d likely want to control its position using an external style sheet so you could easily reposition it on all pages by simply changing a single CSS file. A CSS class is the perfect solution for such a task.
CSS Classes So far, we’ve looked at using HTML selectors (i.e., h1, h2, and p) inside a style sheet. These work fine when you want to control the formatting or placement of all instances of those particular tags, but they don’t work so well for positioning tasks, such as the earlier menu example. Take our image, for example. If we want to change the method of positioning and use an external style sheet instead of an inline style, we could add the img selector to styles.css and specify positioning for that selector. However, if we do that, we are going to alter the positioning of all images on all the pages that link to styles.css. That’s obviously not what we want to do. Wouldn’t it be nice if we could define our own explicit way of referring to our logo image inside the CSS file? We could then define some CSS code that would apply only to the logo image and not other images. That’s precisely what CSS classes were designed to do.
Basic Application of a CSS Class The syntax for a CSS class is almost identical to what you’ve already seen. The difference is that CSS classes are preceded by a dot. The following CSS code defines a new CSS class called logo: .logo { CSS Code }
To apply the logo CSS class to an element on our page, the HTML class attribute is used. The following tag will use the CSS properties assigned to the logo CSS class:
6055_17.qxp
12/7/2006
12:16 PM
Page 305
CSS Classes
305
TIP When the CSS class is defined in the HTML tag, there is no dot in front of the name. The dot only appears in the style sheet.
Let’s change default.htm so that the logo on it is positioned using a CSS style.
1. Add the following code to styles.css: .logo { position: absolute; top: 259px; left: 232px; z-index: 1; }
2. 3. 4. 5.
Save styles.css. Switch to default.htm. Select the image. In the Apply Styles task pane, click the down arrow next to Inline Style and select Remove Inline Style, as shown in Figure 17.9. This will remove the inline style that was applied when we dragged the image into position earlier.
Figure 17.9 Removing an inline style is as simple as clicking a menu item thanks to the Apply Styles task pane. You’ll learn about many more capabilities of this tool in the next chapter.
17
6055_17.qxp
306
12/7/2006
12:16 PM
Page 306
Chapter 17 Creating Style Sheets
6. Make sure the image is selected and then select the .logo class from the Apply Styles task pane, as shown in Figure 17.10.
Figure 17.10 There are many ways to apply CSS classes. The Apply Styles task pane is probably the easiest way.
17
As soon as you click on the .logo class in the Apply Styles task pane, the image should jump to the position specified in the style sheet. If you don’t see the logo class in the Apply Styles task pane, see “CSS Class Not Visible” in the “Troubleshooting” section of this chapter.
➔
For more details on using the Apply Styles task pane, see “Managing CSS Styles”, p. 311 (Chapter 18).
Applying Multiple CSS Classes The power of CSS classes is only partially illustrated by our simple example. You can actually define several CSS classes in a style sheet and apply all of them to an HTML selector by separating each class name with a space. The following HTML code applies the logo and headImg classes to an image:
The order of CSS classes is important. Classes are applied in the order in which they appear, so in the preceding example, settings defined in the headImg class will override the settings defined in the logo class. This technique can be taken a step further by specifying multiple classes in the CSS file itself. Consider the following CSS code: div.newsHead.monthHead { font-face: Arial; }
6055_17.qxp
12/7/2006
12:16 PM
Page 307
CSS Classes
307
In this case, the defined style will only be applied to HTML tags with a class attribute containing both the newsHead and the monthHead CSS classes. Therefore, the CSS code would apply to the HTML tag
but would not apply to the HTML tag
TIP When we created the logo CSS class, an HTML selector was not specified. Therefore, the CSS class applies to any HTML tag with a class attribute value of logo. Technically, the CSS definition for the logo class as we defined it is *.logo, meaning that it applies to all tags. logo
If we had wanted to limit the logo class so that it only applied to the img selector, we could have defined it as img.logo.
17
Pseudo-Classes In addition to the capabilities available using selectors and classes, CSS also includes a number of pseudo-elements and pseudo-classes that allow you to apply complex formatting easily. Link and dynamic pseudo-classes are the most common pseudo-classes by far. If you’ve used CSS in your pages before, you’ve probably used these pseudo-classes without realizing it. Link pseudo-classes allow you to define a different appearance for HTML hyperlinks based on whether or not a link has been visited. The :link pseudo-class formats an unvisited link, and the :visited pseudo-class formats a visited link. The following CSS code formats links in blue and visited links in red: a:link { color: blue; } a:visited { color: red; }
N OTE The syntax that is most common includes the a selector, but the CSS specifications do not require it.
Dynamic pseudo-classes take link pseudo-elements one step further by allowing you to format hyperlinks based on the current state of a link. The :hover pseudo-class formats a hyperlink over which the mouse is hovering; the :focus pseudo-class formats a hyperlink that has the focus; and the :active pseudo-class formats a hyperlink that is currently being activated. The following CSS code builds on the previous code by specifying that links have an overline and underline when hovered over, a bolded font when they have the focus, and are italicized when the links are active:
If you’ve applied the :hover pseudo-class but it doesn’t seem to be taking effect, see “:hover Pseudo-Class Doesn’t Work” in the “Troubleshooting” section of this chapter.
Pseudo-Elements Pseudo-elements allow Web designers to apply formatting that would otherwise be impossible to obtain. The current CSS specification defines two pseudo-elements: the :first-line pseudo-element and the :first-letter pseudo-element. The :first-line pseudo-element allows you to style the first line of a paragraph. The following code will cause all characters in the first line of a paragraph to be uppercase: p:first-line
17
{ text-transform: uppercase; }
This pseudo-element is incredibly powerful because applying this formatting using any other method would be impossible in most cases. The content that appears on the first line of a paragraph is often dictated by the width of the browser window. As the browser window is resized, the word-wrap feature of the browser will cause the specific words that appear on the first line to change. The :first-line pseudo-element deals with that perfectly and will automatically style only the characters that appear on the first line. CAUTION Keep in mind that pseudo-elements may not render in all browsers. Test carefully in multiple browsers when using pseudo-elements.
The :first-letter pseudo-element allows for styling the first character in a paragraph. This pseudo-element is often used for drop caps or other effects that are often seen in printed media. The following CSS formats the first character in a paragraph to large, blue type: p:first-letter { font-family: Times New Roman; font-size: 14px; color: blue; }
N OTE Pseudo-elements are not rendered in the Design View of Expression Web. To see the formatting of pseudo-elements, you will need to preview your page in a browser.
It may sound like rhetoric, but the power of CSS cannot be overstated in today’s world of Web design. As new standards are developed, CSS continues to surge in importance. This chapter has given you a small taste of what is possible using CSS. As you progress through the next chapter, you’ll discover just how easy it is to take advantage of CSS using Expression Web.
6055_17.qxp
12/7/2006
12:16 PM
Page 309
Lagniappe: CSS Background Images
N OTE For additional information on in-depth CSS topics, visit the CSS 2.1 specification on the W3C Web site at www.w3.org/TR/CSS21/cover.html.
Troubleshooting Attach Style Sheet Link Is Disabled I am trying to attach a style sheet to my page, but the link to attach a style sheet in the Apply Styles task pane is disabled. To attach a style sheet using the Apply Styles task pane, you must be in Design View. If you have Code View activated, you won’t be able to click the link. Switch to Design View and you should be able to attach the style sheet without any problems.
Prompted to Save Embedded File I’m saving a page that contains a style sheet link and Expression Web is prompting me to save the CSS file as an embedded file. What’s going on? If your style sheet contains unsaved changes and you save a page that is linked to the style sheet, Expression Web will prompt you to save the style sheet as well using the Save Embedded File dialog. Simply click OK in this dialog to save both pages. You can avoid this dialog by always explicitly saving your style sheet after making changes to it.
CSS Class Not Visible I’ve created a CSS class in my style sheet, but when I try to apply that class using the Apply Styles task pane, it’s not visible. Make sure that the style sheet in which the class was created is linked to the page you are editing. If the style sheet is not linked to the page, the classes within the style sheet will not be available. :hover
Pseudo-Class Doesn’t Work
I’ve used the :hover pseudo-class to format my hyperlinks. Expression Web doesn’t indicate that there’s any problem with my CSS code, but the effect doesn’t work. You have probably added the :hover pseudo-class in the wrong order inside your CSS code. The pseudo-class should appear after the :link and :visited pseudo-classes. Otherwise, the formatting specified in the :hover pseudo-element will be overridden. :hover
Lagniappe (lan yap’) n.,
a gift or bonus
CSS Background Images One of the many useful capabilities of CSS is the positioning and formatting of background images. HTML has limited capabilities when it comes to background images. If you want a
309
6055_17.qxp
310
12/7/2006
12:16 PM
Page 310
Chapter 17 Creating Style Sheets
background image that isn’t tiled or that doesn’t scroll with the rest of the page, CSS is the way to go. To specify a background image using CSS, use the background-image CSS property. The following CSS code sets the background image: background-image: url(“images/bground.jpg”;
This syntax can be used to specify the background image of any particular HTML element. However, if you want the background to apply to the page itself, you would specify the following body selector: body { background-image: url(“images/bground.jpg”; }
By default, the background image will be tiled. You can force the background to appear only once instead of being tiled by using the background-repeat property. The following CSS code will display the background image without tiling: body { background-image: url(“images/bground.jpg”; background-repeat: no-repeat; }
Finally, you can also specify that the background remain fixed during scrolling. This technique is often referred to as a watermarked background. The following code will cause the background to remain fixed while scrolling: body { background-image: url(“images/bground.jpg”; background-repeat: no-repeat; background-attachment: fixed;}
Here’s a final tip for you that I am borrowing from my friend Tina Clarke of www.anyfrontpage.com. Expression Web and Internet Explorer both have a nasty habit of displaying all pages with a white background color even if the Web designer doesn’t explicitly set the background color to white. Not all browsers default to a white background, so if you want your page to have a white background, make sure you explicitly specify it. The following CSS code will ensure that your page always has a white background: body { background-color: #ffffff; }
6055_18.qxp
12/7/2006
12:17 PM
Page 311
CHAPTER
Managing CSS Styles
In this chapter Expression Web’s CSS Tools Working with Styles CSS Reports Troubleshooting Lagniappe: Arranging CSS Styles
18
6055_18.qxp
312
12/7/2006
12:17 PM
Page 312
Chapter 18 Managing CSS Styles
Expression Web’s CSS Tools In the previous chapter, we covered the basics of CSS. In this chapter, we’ll put that knowledge to use and cover the CSS toolset in Expression Web in-depth. As you’ll soon see, Expression Web’s CSS toolset is a vast improvement over Microsoft’s previous Web design tools. Expression Web has several tools for managing and applying CSS styles. We’ll cover them all in detail, but first, let’s look at a brief overview of each one.
Apply Styles Task Pane The Apply Styles task pane (see Figure 18.1) is a convenient way to apply styles to elements in a page. However, it’s also a quick way to remove styles, add new styles, and modify existing styles. Styles are applied using the Apply Styles task pane by simply clicking on a style entry in the task pane. TIP By default, the Apply Styles task pane is located in the lower-right of the Expression Web window.
18
Figure 18.1 The Apply Styles task pane makes applying styles, editing styles, and removing styles easy.
6055_18.qxp
12/7/2006
12:17 PM
Page 313
Expression Web’s CSS Tools
313
The Apply Styles task pane uses color-coding for different CSS elements and even lets you select all instances of a particular CSS element on a page.
Manage Styles Task Pane The Manage Styles task pane (see Figure 18.2) is similar in functionality to the Apply Styles task pane.
Figure 18.2 The Manage Styles task pane is a quick way to locate CSS code for a particular style or to select a style for manipulation via the CSS Properties task pane.
18
The primary difference is that simply clicking on a style in the Manage Styles task pane doesn’t apply the style to the selected page element. You can apply a style by right-clicking the style and selecting Apply Style from the menu, but the Manage Styles task pane is more often used to select a style so that you can edit the CSS code or change CSS properties using the CSS Properties task pane.
Link Style Sheet Dialog The Link Style Sheet dialog (see Figure 18.3) is more than just a method of adding style sheet links to one or more pages. It also allows you to arrange the order in which style sheets are applied to a page.
6055_18.qxp
314
12/7/2006
12:17 PM
Page 314
Chapter 18 Managing CSS Styles
Figure 18.3 Linking style sheets is accomplished using the Link Style Sheet dialog. You can adjust the order of linked style sheets as well.
N OTE
To access the Link Style Sheet dialog, select Format, CSS Styles, Manage Style Sheet Links.
The Link Style Sheet dialog also provides you with an Edit button that can be used to quickly open a selected style sheet for editing.
18
CSS Properties Task Pane The CSS Properties task pane (see Figure 18.4) provides a grid view of CSS styles applied to a page or page element. The grid is context-sensitive, which means the CSS properties it displays are based on what is currently selected on the active page.
Figure 18.4 The CSS Properties task pane appears to be a simple tool at first, but it’s actually extremely powerful.
6055_18.qxp
12/7/2006
12:17 PM
Page 315
Expression Web’s CSS Tools
315
The CSS Properties task pane can display CSS properties in categories or in alphabetical order. It displays all rules that apply to the active selection and even shows you where each style is defined.
CSS Reports CSS reporting in Expression Web is implemented using two separate dialogs: the CSS Reports dialog shown in Figure 18.5 and the CSS Reports task pane shown in Figure 18.6. Figure 18.5 Expression Web provides CSS reports for style usage as well as style errors. CSS report properties are configured in the CSS Reports dialog.
Figure 18.6
18
Results of CSS reports are displayed in the CSS Reports task pane. From here, you can easily access CSS code in your pages and CSS files.
N OTE
The CSS Reports dialog is accessed by selecting Tools, CSS Reports.
The CSS reporting feature can be filtered using the Custom AutoFilter dialog, as shown in Figure 18.7. It’s a powerful way to examine CSS usage, unused CSS styles that need to be cleaned up, and any CSS errors in your site. Figure 18.7 You can filter the results of CSS reports using the Custom AutoFilter dialog. Many different filter options are available.
6055_18.qxp
316
12/7/2006
12:17 PM
Page 316
Chapter 18 Managing CSS Styles
N OTE
We’ll cover CSS reports in more detail later in this chapter.
Style Builder The Style Builder (see Figure 18.8) makes it easy to build complex CSS styles quickly without knowing CSS. Styles can be saved into a page or style sheet. Figure 18.8 The Style Builder is a powerful way to quickly create and modify CSS styles.
18
Styles are broken down into multiple categories and the options available in the Style Builder change according to the category chosen. TIP The Style Builder is a feature that refers to the New Style dialog and the Modify Style dialog.
6055_18.qxp
12/7/2006
12:17 PM
Page 317
Working with Styles
317
Working with Styles Perhaps the easiest way to learn how to use all the previously mentioned tools to manage styles is to use one of the site templates provided by Expression Web. These templates contain numerous predefined styles so you can use all the CSS features available in Expression Web. Create a new Web site in Expression Web using the Organization 3 site template. When Expression Web has finished building the Web site, open the master.dwt file to explore some of the styles. TIP The master.dwt file is an Expression Web Dynamic Web Template and is used as a template for other pages in the Web site.
➔ ➔
For more information on Dynamic Web Templates, see “Using Dynamic Web Templates,” p. 363 (Chapter 21). For more information on creating Web sites, see “Creating a Web Site,” p. 25 (Chapter 2).
After you’ve opened master.dwt, click on some of the page elements. As you do, notice that the CSS Properties, Apply Style, and Manage Styles task panes will change based on your selection. The selected style will be highlighted in the top of the CSS Properties task pane and also in the Manage Styles task pane. The lower part of the Apply Styles task pane will display the selected style along with a preview. If styles do not show up in the Manage Styles task pane, see “No Styles Appear in Task Pane” in the “Troubleshooting” section of this chapter.
Let’s take an in-depth look at each of the tools we briefly covered earlier.
Using the Manage Styles Task Pane N OTE
If you previously closed the master.dwt file, open it again so you can use it as you work through the rest of this chapter.
The Manage Styles task pane shows a list of styles from the current page and also from linked style sheets. As shown in Figure 18.9, each style sheet linked to the active page will have an expandable section inside the Manage Styles task pane, as will any embedded style sheets.
18
6055_18.qxp
318
12/7/2006
12:17 PM
Page 318
Chapter 18 Managing CSS Styles
Figure 18.9 The Manage Styles task pane sections off each style sheet. In this case, there is one linked style sheet and one embedded style sheet.
18
Embedded Style Sheet Linked Style Sheet
You may notice that @layout.css appears under the style3.css style sheet in the Manage Styles task pane. The layout.css style sheet is an imported style sheet inside style3.css. By using an imported style sheet, common styles can be created once in a single style sheet and then imported into other style sheets using the @import directive. The following code appears at the top of style3.css and imports all the styles defined in layout.css into the style3.css style sheet: @import url(“layout.css”);
TIP The Manage Styles task pane displays imported style sheets with an @ character in front of them. Clicking the plus sign next to an imported style sheet will display all the styles defined in the imported CSS file.
CSS Inheritance and Cascading Order As you’ve already seen, CSS rules can come from many different places. You can have a CSS file linked to a page, you can have CSS styles embedded within a page, and you can have CSS styles applied inline with the HTML code itself. There are also other ways that CSS styles can be applied. For example, your browser internally applies a style to every page that is displayed without you even knowing it. That’s why all pages that don’t explicitly specify a background color will appear with a white background in Internet Explorer. The CSS landscape of a Web page can get quite complex, and that’s why there are rules that define how CSS gets applied. There are two basic concepts to CSS rules as they are applied: inheritance and cascading order. Inheritance specifies that an HTML element will take on the style of the parent element. For example consider the following HTML code. This is a Heading with <em>emphasis
Note that the element has a style attribute that sets the font size to 12 pt. Because the <em> element doesn’t explicitly set a font size, it will inherit the font size of its parent element and will appear in a 12 pt font.
6055_18.qxp
12/7/2006
12:17 PM
Page 319
Working with Styles
319
The cascade order, on the other hand, determines the order that CSS rules are applied. In the simplest terms, the cascade order dictates that an embedded style overrides a style defined in a linked style sheet and an inline style overrides both an embedded style and a linked style. Many Web designers consider that description of the cascade order to be complete, but in fact, there are other rules to the cascade order that may cause subtle changes in how your page is rendered. For a complete description, it’s best to refer to the W3C’s CSS specification at www.w3.org/TR/REC-CSS2/cascade.html.
Each style in the Manage Styles task pane is represented by a colored dot. There are four different colors to represent styles: ■
Red—Represents a CSS ID.
■
Green—Represents a CSS class.
■
Blue—Represents a selector.
■
Yellow—Represents an inline style. TIP The colored dots for styles in use are encircled in gray. Unused styles do not display an encircled colored dot.
➔
For more information on CSS classes, style sheet links, and other terminology related to CSS, see “Creating Style Sheets”, p. 289 (Chapter 17).
CSS IDs In the previous chapter, we covered CSS classes. This chapter introduces the CSS ID. A CSS ID is almost exactly like a CSS class except an ID refers to a single instance of a particular selector. A CSS class can be used by any number of selectors. A CSS ID is defined in a style sheet using the # prefix. For example, the following CSS code defines the sidebar CSS ID from the style3.css style sheet: #sidebar { float: right; width: 380px; padding-top: 5px; padding-bottom: 5px; text-align: left; }
To specify that a particular page element should take the formatting of this ID, you use the id attribute:
To control the appearance of HTML elements within a block element defined as a particular ID, simply specify the selector after the ID name. For example, the following CSS code formats all elements within the sidebar div defined above: #sidebar h1 { font-size: 18px; }
CSS IDs are a powerful formatting technique because they provide a convenient way of formatting specific portions of your pages.
18
6055_18.qxp
320
12/7/2006
12:17 PM
Page 320
Chapter 18 Managing CSS Styles
The Options button in the Manage Styles task pane displays the Options menu, allowing you to choose which styles appear in the list as well as how they are displayed. The following items on the Options menu control how styles are categorized: ■
Categorize by Order—When this item is selected, styles are categorized in the order in which they appear in the style sheet. Note that each style sheet is still listed separately.
■
Categorize by Element—When this item is selected, styles for HTML elements are arranged in alphabetical order. (CSS IDs and classes will still be arranged in the order in which they appear in the style sheet.) Inherited styles for a particular HTML element will appear nested under the element, as shown in Figure 18.10.
■
Categorize by Type—When this item is selected, each type of style (elements, classes, and IDs) will be listed in a nested structure, as shown in Figure 18.11.
Figure 18.10
18
When Categorize by Element is selected, each HTML element will be listed with inherited styles nested underneath.
6055_18.qxp
12/7/2006
12:17 PM
Page 321
Working with Styles
321
Figure 18.11 When Categorize by Type is selected, each type of style acts as a top-level member of a nested hierarchy.
18
The following items on the Options menu control the styles that are displayed in the Manage Styles task pane: ■
Show All Styles—When this item is selected, styles from all style sheets will be displayed in the list. The colored dots for used styles will be encircled in gray.
■
Show Styles Used in Current Page—When this item is selected, only styles used in the current page are visible.
■
Show Styles Used on Selection—When this item is selected, only styles used on the current selection are visible. If nothing is selected in the active document, the Manage Styles task pane will be empty. If you’ve selected elements on your page and the Manage Styles task pane style preview area is empty, see “Selected Styles Don’t Display Preview “ in the “Troubleshooting” section of this chapter.
6055_18.qxp
322
12/7/2006
12:17 PM
Page 322
Chapter 18 Managing CSS Styles
The Show Styles Used on Selection menu item is a powerful way of identifying where certain styles originate. If you select the div with an ID of content on the master.dwt page, the Manage Styles task pane will appear, as shown in Figure 18.12. This allows you to tell at a glance that the content CSS ID is defined in both the layout.css and style3.css CSS files.
Figure 18.12 Using the Manage Styles task pane, it’s simple to find out exactly where certain styles originate. In this case, the content CSS ID is defined in both layout.css and style3.css.
N OTE
The Manage Styles task pane can be categorized by Order (the default), Element, or Type. In Figure 18.12, I’ve categorized it by Type.
18 This capability is even more powerful when a particular element is being influenced by CSS styles that are actually applied to higher level elements or when an element is taking on CSS styles from multiple places. Suppose you have a paragraph that unexpectedly appears in a blue font and you need to track down the CSS style that is causing that to happen. Without the Manage Styles task pane, it could be fairly difficult to locate a source of formatting because of inheritance and the cascading rules for CSS. Using the Manage Styles task pane, you can simply click inside the paragraph and immediately locate the CSS code that’s causing the blue text. TIP You can right-click on a style in the Manage Styles task pane and select Go to Code to immediately open the CSS file where a style is defined. Double-clicking the style will also take you directly to the style.
N OTE
Right-clicking on a style in the Manage Styles task pane provides additional capabilities such as modifying styles or creating new styles. These capabilities are shared by the Apply Styles task pane and we’ll cover them in detail later in this chapter.
6055_18.qxp
12/7/2006
12:17 PM
Page 323
Working with Styles
323
The final two items on the Options menu are Separate Grouped Selectors and Display Selected Style Preview. By default, Expression Web will group selectors affected by a particular style. For example, in Figure 18.11 (shown previously), the #content CSS ID is followed by several HTML heading selectors. The CSS code that defines this #content ID is as follows: #content h1,h2,h3,h4,h5,h6 { color: #a0522d; }
The Separate Grouped Selectors option will break the selectors out of the group so they appear as separate items, as shown in Figure 18.13.
Figure 18.13 When the Separate Grouped Selectors menu option is checked, HTML selectors that are grouped with a particular CSS element are shown as separate items.
18 Separated selectors
The Display Selected Style Preview menu item toggles the Selected Style Preview portion of the Manage Styles task pane. TIP The Selected Style Preview portion of the Manage Styles task pane shows a preview of only the formatting affected by the selected style. What you see in the actual page may differ due to formatting caused by the specific HTML element or by direct formatting, and so on.
6055_18.qxp
324
12/7/2006
12:17 PM
Page 324
Chapter 18 Managing CSS Styles
Using the Apply Styles Task Pane The Apply Styles task pane is similar in functionality and design to the Manage Styles task pane. However, as its name indicates, it is intended primarily for applying styles to page elements. Like the Manage Styles task pane, the Apply Styles task pane uses color-coded dots to indicate different types of styles. It also breaks out style sheets and embedded styles into collapsible sections. You can easily apply any style to a page simply by clicking on the name of the style in the Apply Styles task pane. As you click on an area of a page, the styles applied to the area will be highlighted in the Apply Styles task pane. If the area you’ve clicked on is an HTML selector styled in a style sheet, the selector and any associated styles will appear at the bottom of the Apply Styles task pane in the Contextual Selectors section, as shown in Figure 18.14.
Figure 18.14
18
The Contextual Selectors section of the Apply Styles task pane displays styles that are defined using HTML selectors.
Hovering over a style in the Apply Styles task pane reveals an arrow button at the right edge of the style name. Clicking on that button displays a menu (see Figure 18.15), which provides many ways of interacting with the style. TIP You can also access the menu by right-clicking on a style or style sheet in the Apply Styles task pane.
The following menu items are available when you click the arrow button next to a style: ■
Apply Style—Applies the selected style to the current selection.
■
Go To Code—If the selected style is in an external style sheet, Expression Web opens the style sheet and scrolls to the CSS code for the style. If the selected style is an
6055_18.qxp
12/7/2006
12:17 PM
Page 325
Working with Styles
325
Figure 18.15 Working with styles using the Apply Styles task pane is similar to using the Manage Styles task pane. The menu shown here is available in both task panes.
18
embedded or inline style, Expression Web switches to Split View and displays the corresponding CSS code in the page. ■
Select All x Instances—Selects all instances of the selected style in the current page. The x will be replaced with the number of actual instances of the selected style. If the selected style is unused, the menu item will display Select All: Not Currently Used and will be disabled.
■
New Style—Opens the Style Builder so a new style can be created. The new style is not based on the selected style.
■
New Style Copy—Opens the Style Builder so a new style can be created. The new style is based on the selected style.
■
Modify Style—Opens the Style Builder so the selected style can be modified.
■
Delete—Deletes the currently selected style. If multiple styles apply to the selected page element, this menu item will be disabled. When deleting a style, Expression Web will prompt you for confirmation before the style is deleted.
6055_18.qxp
326
18
12/7/2006
12:17 PM
Page 326
Chapter 18 Managing CSS Styles
■
Remove Link—This menu item is only enabled when you right-click on the name of a linked style sheet. When clicked, it removes the link to the selected style sheet.
■
Attach Style Sheet—Opens the Attach Style Sheet dialog so a style sheet can be attached.
■
Manage Style Sheet Links—Opens the Link Style Sheet dialog so existing style sheet links can be configured. The Link Style Sheet dialog will also allow you to attach new style sheets.
■
Remove Class—Removes the application of the selected CSS class from the selected page element. Removing the class does not alter the CSS code. It only removes the class assignment from the currently selected page element. This menu item is only available when a CSS class is applied to the currently selected page element and when the currently selected style in the Apply Styles task pane is a CSS class.
■
Remove ID—Removes the application of the selected CSS ID from the selected page element. Removing the ID does not alter the CSS code. This menu item is available only when the selected page element is styled using a CSS ID and when the currently selected style in the Apply Styles task pane is a CSS ID.
■
Remove Inline Style—Removes inline styles applied to the currently selected page element. This menu item is only available when an inline style is applied to the currently selected page element and when the currently selected style in the Apply Styles task pane is an inline style.
CAUTION A CSS ID should be applied only once per page. If you attempt to apply a CSS ID to a second element in a page, Expression Web will display a warning.
If the Remove Class, Remove ID, or Remove Inline Style menu options are not enabled, see “Cannot Remove CSS Elements” in the “Troubleshooting” section of this chapter.
Using the CSS Properties Task Pane The Apply Styles and Manage Styles task panes are focused on working with one or two styles. The CSS Properties task pane, on the other hand, is more of an all-in-one tool that makes it easy to manage all the styles applied to your page. The CSS Properties pane is divided into two sections, as shown in Figure 18.16. The top section is called the Applied Rules section, and it shows all the CSS rules that apply to the selected page element. Rules are displayed in the order in which they are applied to the page. The bottom part of the CSS Properties pane displays the CSS style properties for the selected rule. Properties defined for the selected rule appear in bold blue text and overridden properties appear with a red line through them.
6055_18.qxp
12/7/2006
12:17 PM
Page 327
Working with Styles
Figure 18.16 The CSS Properties pane is among Expression Web’s most powerful CSS tools.
327
Selected rule
Applied Rules section
CSS Properties section
Overridden property
When a rule is selected in the CSS Properties pane, Expression Web will display where the rule is defined in the Applied Rules header of the CSS Properties task pane. If the rule is defined in a linked style sheet, the name of the style sheet will be displayed as a link to open the style sheet when clicked. (Note that in Figure 18.16, style1.css appears as a link that can be clicked to open the CSS file where the rule is defined.) If the link is defined in an embedded style sheet, Expression Web will display “(Current Page)” as the location where the rule is defined. N OTE
Inline styles displayed in the Applied Rules section of the CSS Properties task pane will not display anything in the title bar to indicate where the rule is defined because they are always defined on the element itself.
As shown in Figure 18.17, a series of four buttons appears at the top of the CSS Properties task pane: ■
Show Categorized List—When this button is selected, the CSS properties will be displayed in collapsible categories.
■
Show Alphabetized List—When this button is selected, the CSS properties will be displayed in alphabetical order.
18
6055_18.qxp
328
12/7/2006
12:17 PM
Page 328
Chapter 18 Managing CSS Styles
■
Show Set Properties On Top—When this button is selected, CSS properties explicitly set for the selected rule will always be displayed at the top of the list.
■
Summary—This button will cause the CSS Properties task pane to display a summarized list of all properties applied to the selected page element regardless of which CSS rule is selected in the task pane.
Figure 18.17 The series of buttons at the top of the CSS Properties task pane make it easy to adjust the display.
Show Categorized List button Show Alphabetized List button Show Set Properties On Top button Summary button
18 Summarized List of CSS Properties
The Summary button is one of the most powerful CSS tools available in Expression Web because it makes it easy to find out exactly what is affecting the formatting of a selected page element. In Figure 18.17, you can see that the selected element has three properties for text-decoration, but two of them have a line through them, indicating that they’ve been overridden. By hovering over these properties, you can easily determine what other property is overriding them. As you define your CSS styles, you’ll find yourself using this feature often because it makes it easy to track down CSS properties that don’t seem to be taking effect when they ought to. Modifying CSS properties using the CSS Properties task pane couldn’t be easier. You don’t have to know CSS code and syntax to modify properties because most of the properties
6055_18.qxp
12/7/2006
12:17 PM
Page 329
Working with Styles
329
listed will expand to display the valid values in a dropdown list. To modify a property, simply select the new value from the list, as shown in Figure 18.18.
Figure 18.18 Changing CSS properties is accomplished using the dropdown menu of valid property assignments.
18
As you select properties in the task pane, the rule to which that property applies is automatically highlighted. This makes it easy to ensure that you are changing the correct property. When you modify a style that exists in a CSS file, Expression Web will automatically open and edit the CSS file. You will then be prompted to save those changes to the CSS file when the page it is linked to is saved. CAUTION Keep in mind that a modification to a style sheet linked to the current page will also modify that same style in other pages that link to the same style sheet.
6055_18.qxp
330
12/7/2006
12:17 PM
Page 330
Chapter 18 Managing CSS Styles
Using the Style Builder The Style Builder is a common name for the New Style and Modify Style dialog boxes. When creating a new style, the New Style dialog is displayed; when modifying an existing style, the Modify Style dialog is displayed. Both dialogs are the same, but the options available are different based on whether you are creating a new style or not. TIP The styles that can be edited in the Style Builder are the same styles that are available in the CSS Properties task pane. The Style Builder is just a different interface into the same CSS properties.
In Figure 18.19, a new style is being created. Note that the Define in dropdown is set to Existing Style Sheet and the style3.css style sheet is selected. You can also choose to add the new style to a new style sheet or to the current page. When adding styles to the current page, they are added to an embedded style sheet. Figure 18.19
18
The Style Builder is a comprehensive dialog for creating new styles or modifying existing styles without having to write CSS code.
Category list Selector dropdown Define in dropdown
Preview window
Description window
6055_18.qxp
12/7/2006
12:17 PM
Page 331
Working with Styles
331
The Selector dropdown contains a list of all the HTML selectors, but you can also enter a CSS class name or ID into the textbox portion of the dropdown to create a new CSS class or ID. TIP When creating new CSS classes and IDs, make sure to append a . to CSS class names and a # to CSS IDs.
To configure a particular category of CSS property, select the category from the Category list, as shown in Figure 18.19, and then configure the style as desired. Categories for which style properties have been configured appear in bold text. After you’ve completed configuring a style, click OK to add it or apply your modifications. If the Apply New Style to Document Selection checkbox is checked when creating a new style, the style will automatically be applied to the selected element in the page. Otherwise, the style will simply be added to the style sheet as specified. TIP The Define in dropdown, Apply new style to document selection checkbox, and URL textbox are disabled when modifying an existing style.
18
Using the Attach Style Sheet and Link Style Sheet Dialogs Styles sheets can easily be added to the current page or to all pages using the Attach Style Sheet and Link Style Sheet dialogs. To access the Attach Style Sheet dialog, select Format, CSS Styles, Attach Style Sheet. To access the Link Style Sheet dialog, select Format, CSS Styles, Manage Style Sheet Links. The Attach Style Sheet dialog (shown in Figure 18.20) is used to either attach a style sheet link to one or more pages or to import styles from a style sheet into one or more pages.
Figure 18.20 CSS style sheets are attached or imported using the Attach Style Sheet dialog. You can add style sheets to the current page, pages selected in the Folder List, or to all pages.
6055_18.qxp
332
12/7/2006
12:17 PM
Page 332
Chapter 18 Managing CSS Styles
Imported styles are added to a page using the CSS @import directive. For example, if a style sheet located at styles/style1.css is imported via the Attach Style Sheet dialog, the following CSS code is added to the page: <style type=”text/css”> @import url(‘styles/style1.css’);
TIP Imported style sheets are useful when you want to compartmentalize a specific set of CSS styles that can be applied easily to a page or series of pages. In fact, many of the Expression Web templates use imported CSS style sheets to apply common formatting.
The Link Style Sheet dialog (shown in Figure 18.21) is specifically designed to be used with linked external style sheets. Not only can you add and remove style sheet links using this dialog, but you can also arrange the order of style sheets. TIP Linked style sheets are applied in the order in which they appear in the Link Style Sheet dialog, so a duplicate style in a style sheet lower in the list will override any previous instances of that style.
18 Figure 18.21 The Link Style Sheet dialog provides a clean interface for linking style sheets and arranging their order.
The CSS tools in Expression Web comprise a powerful CSS feature set that has not been seen in any previous Microsoft Web development platform. Not only is it easy to create styles and modify existing styles, but it’s also extremely simple to investigate the source of formatting on a page using the CSS Properties task pane. By using these tools together, you can take control of CSS in your Web site.
6055_18.qxp
12/7/2006
12:17 PM
Page 333
CSS Reports
333
CSS Reports Using CSS makes your Web site much easier to maintain, but if you don’t keep your CSS code maintained as well, it can become unwieldy. Fortunately, Expression Web’s CSS reporting feature can help you identify CSS problems quickly. To access CSS reports, select Tools, CSS Reports to display the CSS Reports dialog, as shown in Figure 18.22. You have the option of checking all pages, all open pages, pages that are currently selected, or only the current page.
Figure 18.22 The CSS reporting feature is a powerful tool for finding problems in your CSS code.
18
Checking for CSS Errors The Errors tab (shown in Figure 18.22) allows you to easily locate the following types of errors in your CSS code: ■
Unused Styles—Styles that exist in a style sheet but are not used.
■
Undefined Classes—Styles that are used but not defined in a style sheet.
■
Mismatched Case—A mismatch in case between a CSS class or ID in a page and the case used in a style sheet.
After choosing the errors you would like to check for, click the Check button to run the report. Results are displayed in the CSS Reports task pane, as shown in Figure 18.23. Figure 18.23 The CSS Reports task pane displays CSS report results, making it easy to locate and correct errors.
6055_18.qxp
334
12/7/2006
12:17 PM
Page 334
Chapter 18 Managing CSS Styles
To locate an error displayed in the CSS Reports task pane, double-click the error or rightclick the error and select Go to Page, as shown in Figure 18.24. Expression Web will open the page containing the error and the offending code will be highlighted so you can easily correct it without having to dig through the code. Figure 18.24 Locating a CSS error is easily accomplished by double-clicking the error or by using the right-click menu.
As with other task panes, the CSS Reports task pane can be sorted by clicking on a column header. It can also be filtered by clicking the small black arrow at the right edge of a column and selecting Custom to display the Custom AutoFilter dialog, as shown in Figure 18.25.
18
Figure 18.25 The CSS Reports task pane can be filtered using the Custom AutoFilter dialog. In this case, CSS files are filtered out of the report.
Checking CSS Usage The Usage tab in the CSS Reports dialog (shown in Figure 18.26) allows you to run a report that shows how CSS is used in a page. The following options are available: ■
Class Selectors—When this item is checked, CSS reports will show which CSS class selectors are in use.
■
ID Selectors—When this item is checked, CSS reports will show which CSS ID selectors are in use.
■
Element Selectors—When this item is checked, CSS reports will show all HTML element selectors.
6055_18.qxp
12/7/2006
12:17 PM
Page 335
Troubleshooting
Figure 18.26 The Usage tab allows you to run reports that detail how CSS is being used in your Web site.
TIP The Element Selectors option will generate a lot of output. Only use it if you absolutely need a report of all your HTML selectors.
Troubleshooting No Styles Appear in Task Pane I don’t see any styles in the Manage Styles or Apply Styles task pane. Is this a bug? No, it’s not a bug. To see styles in the task panes, you must have styles applied to the page that is currently active in Expression Web. You should link a style sheet, import a style sheet, or define some styles directly in the page first. You will then be able to manage those styles using the CSS task panes in Expression Web.
Selected Styles Don’t Display Preview I’ve selected a page element I know has a style applied to it, but I don’t see the preview of the selected style in the task pane. Make sure you have selected the page element in Design View. If you select a page element in Code View, the style preview will not work.
Cannot Remove CSS Elements When I right-click on a style in the Apply Styles task pane, the Remove Class, Remove and Remove Inline Style options are all disabled and I can’t remove the style.
ID,
Before you can remove a CSS class, ID, or inline style, you must select the page element from which you want the style removed. Removing a style doesn’t really remove the style from the style sheet where it exists. It simply removes the application of that style from any selected page elements. First, select one or more instances of the style on the page and you will then be able to remove the style from those instances.
335
6055_18.qxp
336
12/7/2006
12:17 PM
Page 336
Chapter 18 Managing CSS Styles
Lagniappe (lan yap’) n.,
a gift or bonus
Arranging CSS Styles As you’ve seen, there are plenty of choices to make when it comes to using CSS in your Web site. One of the choices with the greatest impact is whether to define a style in an external or an embedded style sheet. Invariably you will end up needing to move some of your CSS classes or IDs from an embedded style sheet to an external style sheet, and vice versa. You will also often want to move classes or IDs from one external style sheet to another. Moving CSS classes and IDs is fast and easy using the Manage Styles task pane in Expression Web. In Figure 18.27, an embedded CSS class called .redLink exists in the current page. The styles.css external style sheet is also linked to the page. To move the .redLink CSS class from the embedded style sheet in the current page to the styles.css external style sheet, simply drag the .redLink class to the styles.css header, as shown in Figure 18.27.
Figure 18.27 CSS IDs and classes can be moved from a page to an external style sheet and vice versa by dragging and dropping the style in the Manage Styles task pane.
You can also drag and drop HTML elements. When an HTML element is dropped onto a style sheet, Expression Web will create a CSS entry for the selector. Using this method, you can quickly and easily manage your CSS content with minimal effort.
6055_pt05.qxp
11/30/2006
8:59 AM
Page 337
PART
Optimizing Your Web Site 19
Accessibility Features in Expression Web
20
Designing for Compatibility
349
339
V
6055_pt05.qxp
11/30/2006
8:59 AM
Page 338
6055_19.qxp
12/7/2006
12:18 PM
Page 339
CHAPTER
Accessibility Features in Expression Web In this chapter An Introduction to Accessibility Designing for Accessibility Using the Accessibility Checker Generating Accessibility Reports Lagniappe: Seeing Color
19
6055_19.qxp
340
12/7/2006
12:18 PM
Page 340
Chapter 19 Accessibility Features in Expression Web
An Introduction to Accessibility It’s amazing to think that despite the fact that the World Wide Web is in its infancy, access to it has become such an important part of our lives. In fact, access to the Web is quickly becoming not just a convenience, but a necessity. This sense of necessity has largely driven the need for computer applications and Web sites to be accessible to people who may have hearing loss, low vision, or other disabilities. In fact, in 1998, Congress enacted the Workforce Investment Act, which consisted (in part) of an amendment to the Rehabilitation Act of 1973. That amendment was titled Section 508, and it has become synonymous with accessibility in the world of technology. N OTE
Section 508 is not the only standard for accessibility, but it’s the only governmentenforced standard. The W3C has devised the Web Content Accessibility Guidelines (WCAG) in an effort to enhance the accessibility of Web sites. Expression Web recognizes both Section 508 and WCAG.
Government agencies and most educational institutions are required to abide by Section 508 requirements. Not only does Section 508 specify requirements for Web sites, but also for multimedia, video, telecommunication products, and more. It is far-reaching legislation that affects most Web designers.
19
Accessibility doesn’t just refer to the ability of people with vision problems to experience a Web site via a screen reader. It also applies to proper color choice so that those with various types of color blindness can read your Web site and so on. It even prohibits design techniques that can cause screen flicker beyond a certain frequency. All in all, there are 16 rules that comprise Section 508 standards. N OTE
For full details on all Section 508 rules regarding Web sites, see www.section508.gov.
Designing for Accessibility There are many points to consider when designing your Web site to be accessible. Expression Web provides some user interface elements that are designed to keep you in compliance with accessibility requirements. Many other techniques require attention to detail and a touch of common sense when developing your site.
Accessible Hyperlinks When creating a hyperlink in Expression Web, you’ll have the option of also specifying a screen tip by clicking the ScreenTip button in the Insert Hyperlink dialog, as shown in Figure 19.1.
6055_19.qxp
12/7/2006
12:18 PM
Page 341
Designing for Accessibility
341
Figure 19.1 Configuring screen tips for hyperlinks is important for accessibility. Expression Web makes it easy.
When you click the ScreenTip button, the Insert Hyperlink ScreenTip dialog is displayed, as shown in Figure 19.2. Enter the text for the screen tip and click OK. When a user hovers over the hyperlink with his or her mouse, the text configured as the screen tip will pop up next to the mouse. Additionally, the text you enter will be read by a screen reader for those with visual disabilities.
Figure 19.2 Enter the text for your screen tip. It will then be available to a screen reader for those with visual disabilities.
19 N OTE
➔
The ScreenTip feature in Expression Web is implemented using the title attribute of the hyperlink.
For more information on inserting hyperlinks, see “Creating Hyperlinks,” p. 112 (Chapter 7).
Accessible Tables When creating a table, it’s often tempting to describe the table in the Web site’s text and then present the data without headers. However, Section 508 requires that all tables containing data must also contain header information. The table shown in Figure 19.3 is compliant with Section 508 guidelines.
6055_19.qxp
342
12/7/2006
12:18 PM
Page 342
Chapter 19 Accessibility Features in Expression Web
Figure 19.3 All data tables must have header information. This table meets that requirement.
Layout tables have no special requirements to meet Section 508 requirements.
➔
For more information on creating tables and using layout tables, see “Using Tables and Layout Tables,” p. 149 (Chapter 9).
Accessible Frames Frames pages are a challenge for screen readers because a screen reader sees a frames page as two or more separate pages. There are a few general guidelines that you should follow in order to make frames pages more accessible.
19
Make sure that each tag in the frameset contains a title attribute that clearly defines the purpose of the page. For example, the following tags will aid in accessibility.
You should also make sure that you include a proper DOCTYPE declaration on your frameset page. The following DOCTYPE declaration is what should be used on a frameset that conforms to the XHTML 1.0 standard.
Finally, you should make sure that you include a <noframes> section in your frameset.
➔
For more information on using frames, see “Using Frames,” p. 179 (Chapter 10).
6055_19.qxp
12/7/2006
12:18 PM
Page 343
Using the Accessibility Checker
343
Other Accessibility Considerations There’s no possible way to cover all accessibility topics in this chapter. However, in addition to the common issues we’ve already discussed, there are some general considerations to keep in mind as you develop a site. Make sure to always provide some alternative representation for images, navigation elements, Adobe Flash animations, and any element implemented with client script. Expression Web provides user interface elements for ensuring that you meet the necessary requirements in this area. For example, when you insert an image onto a page, Expression Web displays the Accessibility Properties dialog shown in Figure 19.4.
Figure 19.4 The Accessibility Properties dialog serves as a reminder to enter attributes required for accessibility.
Another item Web designers often overlook is that a Web site should be viewable without the application of any style sheets. For example, consider a Web site with white text inside a table styled with a black background using a style sheet. Because Internet Explorer uses white as a background color by default, the text for such as site would not be visible to anyone without CSS support. Not only is that a counter-productive design, but it also falls outside the Section 508 requirements. The bottom line is that you should always think about accessibility when designing your Web sites. Many accessibility rules are based on common sense. However, no matter how much effort you put into making your sites accessible, you are bound to miss something. Thankfully, Expression Web provides an Accessibility Checker feature so you can locate accessibility problems and correct them before you deploy a site.
Using the Accessibility Checker The Expression Web Accessibility Checker allows you to run reports on how well your Web site holds up to accessibility standards. The Accessibility Checker can check one or more pages (or your entire Web site) against WCAG and Section 508 requirements and provide you with a comprehensive report of the results.
Checking Accessibility To access the Accessibility Checker, select Tools, Accessibility Reports to display the dialog shown in Figure 19.5.
19
6055_19.qxp
344
12/7/2006
12:18 PM
Page 344
Chapter 19 Accessibility Features in Expression Web
Figure 19.5 The Accessibility Checker is a flexible tool for finding accessibility problems in your Web site.
The Check Where section of the Accessibility Checker dialog lets you check all pages, all open pages, selected pages, or the current page for accessibility problems. The Check For section allows you to choose which standard(s) you would like to check your pages against. You can choose WCAG Priority 1, WCAG Priority 2, and Section 508 requirements. N OTE
Priority 1 results are problems that must be corrected for a page to remain compliant with accessibility standards. A priority 2 result is one that should be corrected for maximum accessibility, but not doing so will not cause your page to fail validation.
The Show section provides a series of checkboxes that control how much information is displayed in the accessibility report. The following options are available: ■
Errors—Represents problems that cause the page to fail accessibility requirements. Any errors must be corrected if the site is to fall within accessibility standards.
■
Warnings—Represents areas of a Web page that may be problematic based on the content. You should review these areas for possible accessibility problems.
■
Manual Checklist—Lists the general requirements for the selected standards. These are somewhat like reminders that are designed to ensure you are aware of the requirements imposed by the selected standards.
19
After you’ve made your choices in the Accessibility Checker, click Check to check the page(s). When the check is complete, Expression Web displays the results in the Accessibility task pane, as shown in Figure 19.6.
6055_19.qxp
12/7/2006
12:18 PM
Page 345
Using the Accessibility Checker
345
Figure 19.6 The Accessibility Checker’s results are displayed in the Accessibility task pane.
Working with the Accessibility Task Pane When many items are displayed in the Accessibility task pane, it can be convenient to arrange the listing. You can easily arrange the list any way you wish by right-clicking inside the task pane and selecting Arrange to access the menu shown in Figure 19.7. Choosing an item on the menu arranges the list by that category. Figure 19.7 Arranging a list is a convenient way to organize the results.
19
Additional options are available by right-clicking on a particular item. For example, for additional details on an item, right-click on the item and select Problem Details. Expression Web will display the Problem Details dialog (shown in Figure 19.8) with details on that item. This is useful not only to get a better understanding of the problem, but it can also provide hints on how to correct the issue.
6055_19.qxp
346
12/7/2006
12:18 PM
Page 346
Chapter 19 Accessibility Features in Expression Web
Figure 19.8 The Problem Details dialog can provide helpful hints on how to resolve issues that appear in the Accessibility report.
If a particular item appears due to a WCAG checkpoint, additional information on that specific item can be obtained by either clicking the WCAG link in the Checkpoint column (shown previously in Figure 19.6) or by right-clicking on the item and selecting Learn More from the menu. Doing so will open your browser and take you to the W3C Web site, where you can read about the specific requirement, as shown in Figure 19.9. Figure 19.9 Expression Web provides direct links to W3C documentation on particular items in the Accessibility task pane.
19
To correct a problem or warning displayed in the Accessibility task pane, double-click on the entry. Expression Web will open the applicable page and select the code that caused the error or warning, as shown in Figure 19.10, so that it can be easily corrected.
6055_19.qxp
12/7/2006
12:18 PM
Page 347
Generating Accessibility Reports
347
Figure 19.10 Locating problems in code is easy. Just double-click on the item in the Accessibility task pane to open the page and highlight the offending code.
Generating Accessibility Reports In some cases, it may be convenient to save the results of the Accessibility Checker. Perhaps you are not the person responsible for correcting all the errors and warnings, or maybe you would like to correct the problems over time. Expression Web makes it simple to generate an HTML report of the Accessibility Checker’s results. To generate an HTML report, click the Generate HTML Report button, as shown in Figure 19.11. Expression Web will create a new Web page for the report, as shown in Figure 19.12. If you’d like to keep the results for later, save the page to a desired location. Figure 19.11 Generating an HTML report of the results of an accessibility check is as simple as clicking a button.
Generate HTML Report button
19
6055_19.qxp
348
12/7/2006
12:18 PM
Page 348
Chapter 19 Accessibility Features in Expression Web
Figure 19.12 The HTML report that Expression Web generates contains details on all results and includes links to appropriate documentation for each result.
Not all of us are required to abide by Section 508, but all of us should. Considering the effort Web designers take to ensure that their Web sites render correctly in all browsers, it only makes sense that equal effort should go into ensuring that your Web sites are accessible to those with disabilities.
Lagniappe (lan yap’) n.,
a gift or bonus
Seeing Color Many of us take for granted that everyone sees color the same way we do. In fact, many people do not. There are many forms of color blindness, and each of them can affect the way your Web site appears. However, because most of us see color accurately, making sure our Web site appears correctly to those with a form of color blindness is a tough job. Vischeck can make it a lot easier. Vischeck (www.vischeck.com/vischeck/) offers a Web site where you can enter a URL and generate a view of what the URL looks like to people with various forms of color blindness. You can also upload an image file and Vischeck will provide a view of that image as it appears to someone with color blindness. If you’d prefer, you can download a plug-in from Vischeck (free of charge) that allows you to run Vischeck’s algorithm on images from within Adobe Photoshop or another imageediting application that supports Photoshop plug-ins. Choosing colors for your Web site is a critical task. You can avoid choosing colors in a vacuum by using Vischeck to ensure that your color choices make your Web site accessible.
6055_20.qxp
12/7/2006
12:19 PM
Page 349
CHAPTER
20
Designing for Compatibility
In this chapter A Brief History What Is Compatibility? Compatibility Features in Expression Web Troubleshooting Lagniappe: Don’t Rely on Expression Web to Enforce Standards
6055_20.qxp
350
12/7/2006
12:19 PM
Page 350
Chapter 20 Designing for Compatibility
A Brief History Here’s a trivia question for you: What was the name of the first Web browser? For many of you, Mosaic probably came to mind. While Mosaic is commonly thought of as the first Web browser, it was not. The first Web browser was invented by Tim Berners-Lee in 1989 and it was called WorldWideWeb. WorldWideWeb was nothing like what comes to mind when we think of a Web browser today. It didn’t have the ability to render graphics. Even so, it was an extraordinary accomplishment and, as history can testify, it transformed the way we access information. In 1993, NCSA Mosaic 1.0 was released, but it also lacked the ability to display images. That capability wasn’t made available until 1994, when Mosaic 2.0 was released. N OTE
I can remember opening a Web page on Mosaic 2.0 and watching a picture unveil before my eyes. Perhaps “unveil” is a poor word choice because that image took about 15 minutes to download at 2400 baud.
In 1994, Netscape Communications released Netscape 1.0. A year later, Microsoft released Internet Explorer 1.0 and the race was on. By 1997, Microsoft had released Internet Explorer 4.0, which contained a solid implementation of the Document Object Model (DOM), allowing Web developers to begin using JavaScript to manipulate pages. In the meantime, Netscape had released version 3.0 and the Netscape 3.0 Gold Edition, which contained a WYSIWYG Web design tool called Netscape Composer. Add Microsoft’s FrontPage 97 (another WYSIWYG Web design tool available at the time) into the mix and the stage was set for a compatibility nightmare.
What Is Compatibility? 20
The concept of compatibility can be traced directly to the browser wars of the 1990s. As Netscape and Microsoft battled it out for browser superiority, Web developers became casualties of that war. Code that looked great in one browser looked entirely different on another browser. The design divergence wasn’t limited to Microsoft versus Netscape design decisions. Pages that looked great in one version of a particular browser might fall apart on a different version of the same browser. As the war heated up, it became clear that Web designers would not get relief from browser developers. Instead, it was up to Web designers to “fix” the problem. Web development hacks began to pop up in forums frequented by designers. If you were a Web developer during this painful period, you no doubt remember how difficult it was to keep up with all the latest techniques. A few years ago, I could have easily filled an entire book on compatibility issues. Fortunately, that is no longer the case. Today’s Web design tools and Web browsers are
6055_20.qxp
12/7/2006
12:19 PM
Page 351
Compatibility Features in Expression Web
351
more standards-compliant. The hacks that Web designers used in the past are often no longer necessary. To avoid compatibility issues, today’s Web designer can focus on the standards and be fairly certain that his or her Web site will appear as expected for most people. N OTE
Recent browsers and design tools are almost entirely standards-compliant, but there are still plenty of people using older browser versions. Keep that in mind when designing your Web site. See the “Should You Design for Older Browsers?” sidebar for my take on how to deal with this situation.
Should You Design for Older Browsers? There has long been a debate as to whether or not Web designers should ensure that Web pages display well on older browser versions. In some cases, your client may dictate how you approach this debate. After all, if someone is paying you to design a Web site, they likely will make the choice about designing for older browsers. However, if you’re designing your own site or being asked for input from a client, you have a choice to make: Should you design to the standards or design to older browser versions? In my opinion, designing to standards is a better choice. As you can clearly see by reading the opening section to this chapter, the Web evolves quickly. If you spend effort designing for specific browser versions, your work will quickly become outdated as people move to newer versions. It’s quite simply a race you cannot win. By focusing instead on Web standards, you ensure that your Web site works well today and into the future. Browser developers spend considerable development cycles making sure browsers are backwards-compatible. The standards of today will work well in browsers for many years to come.
Compatibility Features in Expression Web Expression Web has many features designed to help you create standards-compliant Web sites. The most important feature offered by Expression Web is its ability to create standards-compliant code automatically. Because of that, you are free to work on your Web site without worrying about what’s going on under the hood. However, what if you’re working on a site that was originally created in another application? Fortunately, Expression Web offers features to help you identify and correct inherited code problems as well.
Identifying Code Problems Expression Web has a few different ways of notifying you when a code problem exists. Among these are the Status Bar, marking invalid code in Code View, and compatibility reports. The Status Bar will display an icon (shown in Figure 20.1) when it finds incompatible code or a code error. For example, if an HTML table is missing the closing
tag, Expression Web will inform you that a code error has been detected. Other errors can be subtler, such as improperly closed tags in an XHTML-compliant document.
20
6055_20.qxp
352
12/7/2006
12:19 PM
Page 352
Chapter 20 Designing for Compatibility
Figure 20.1 In Code View, icons will appear on the Status Bar when a code problem is found. Both code errors and code incompatibilities are present in this document.
➔
Code error icon
Incompatible code icon
For more information on identifying and correcting code errors in Code View, see “Using Web Page Views”, p. 127 (Chapter 8).
TIP The icon indicating incompatible code will only appear when in Code View or Split View. The Code Error icon will appear in all views when a code error is present.
N OTE
XHTML is the latest standard in Web design. The current XHTML standard is almost identical to the HTML 4.01 standard with the addition of XML formatting and elements. A full discussion of XHTML is beyond the scope of this book. For more information on XHTML, read Special Edition Using HTML and XHTML, available from Que Publishing.
To determine whether or not code problems exist, Expression Web uses several different methods to determine the formatting and layout rules applicable to the current page. doctype
The doctype declaration is an optional statement that is contained within the first line of code in a Web page. It defines the rules that are applicable to the document. The following doctype specifies that a document should follow the XHTML 1.0 Transitional rules:
20
TIP Most doctype declarations contain a URL to the definition file (.dtd file) that defines the rules for the document type. Expression Web does not read the definition file to determine the rules of the document, but your Web browser will often format the document differently if the URL is missing.
Expression Web displays the current doctype in the Status Bar, as shown in Figure 20.2.
6055_20.qxp
12/7/2006
12:19 PM
Page 353
Compatibility Features in Expression Web
353
Figure 20.2 You’ll always know the current doctype at a glance because Expression Web displays it in the Status Bar.
Doctype indicator
The Quirks of a Missing doctype What happens if you omit the doctype declaration? Expression Web will revert to what is known as quirks rendering mode. Quirks rendering mode is a special mode built into most browsers. It is designed to alter the way certain elements are rendered in a page to attempt to work around known rendering bugs. When your browser is operating in quirks rendering mode, you may see unexpected results when your page is displayed. Rendering problems experienced by Web designers are often caused by missing doctype declarations. If you open a page and see Quirks displayed in the Status Bar in Expression Web, you need to add a doctype declaration so the browser will know what standard the page is using. The easiest way to add a doctype declaration is to use the Code Snippets functionality of Expression Web. Simply press Ctrl-Enter and choose the desired doctype from the list of Code Snippets.
➔
For more information on using Code Snippets, see “Creating Pages and Content”, p. 103 (Chapter 7).
The Schema If there is no doctype declaration in your document, Expression Web will use the schema of the document to determine whether or not code problems exist. The schema is defined in Expression Web and can target a standard (e.g., HTML 4.01 or XHTML 1.0) or a browser (e.g., Internet Explorer 3.02 or Internet Explorer 6.0). CAUTION Expression Web will not alter the code it creates based on doctype or schema settings. Specifying a doctype or setting a schema only affects the rules Expression Web uses to flag certain code as invalid or incompatible.
Needless to say, if you decide that you want to design your page to be compatible with an older schema such as the Internet Explorer 3.02 schema, you’re going to have a tough time. Much of the code Expression Web creates when you format page elements is CSS code, and older schemas will cause Expression Web to complain heavily about such code. Another drawback to using older schemas is that Expression Web will continue to create code that uses CSS elements and other features that likely aren’t compatible with older schemas. If you insist on using older schemas, you should prepare yourself to do a fair amount of code editing and hand-coding to replace the code that Expression Web generates.
20
6055_20.qxp
354
12/7/2006
12:19 PM
Page 354
Chapter 20 Designing for Compatibility
To alter the doctype and/or schema settings, select Tools, Page Editor Options, and click the Authoring tab. The doctype and schema can be set using the doctype and Secondary Schema dropdown, as shown in Figure 20.3. Note that you can also select the CSS schema in this dialog, but doing so only affects what is displayed in IntelliSense. If a doctype declaration is not added to your page even though one is selected in the Page Editor Options dialog, see “doctype Not Added to Page” in the “Troubleshooting” section of this chapter.
TIP You can quickly display the Page Editor Options dialog by double-clicking on the doctype, schema, or CSS schema displayed in the Status Bar.
Figure 20.3 The doctype and schema are configured in the Page Editor Options dialog.
Doctype dropdown
Schema dropdown
CSS Schema dropdown
Marking Invalid Code in Code View 20
When Expression Web encounters invalid or incompatible code, it underlines the code in red. If you hover your mouse over the underlined code, a screen tip will inform you of the problem, as shown in Figure 20.4.
➔
For more information on working in Code View, see “Using Web Page Views”, p. 127 (Chapter 8).
When Expression Web encounters a code error (such as mismatching tags), it highlights the offending code in yellow. Just as with underlined code, you can hover the mouse over the highlighted code for details of the problem.
6055_20.qxp
12/7/2006
12:19 PM
Page 355
Compatibility Features in Expression Web
355
Figure 20.4 Expression Web makes finding code errors fast and easy by highlighting them in Code View.
Using Reports to Find Problems Expression Web has three reporting options specifically designed to aid in locating problems with code: ■
Accessibility Reports—Also called the Accessibility Checker, this report will locate any code problems affecting the accessibility of your Web site.
■
Compatibility Reports—This report will analyze your Web page code and show problems with code that doesn’t comply with the standards you’ve specified.
■
CSS Reports—This report will report on CSS usage and it will also show any problems with CSS code in your Web site.
Accessibility reports are covered in-depth in Chapter 19, and CSS reports are covered indepth in Chapter 18. Therefore, we won’t go into any detail on the reports here. To access compatibility reports, select Tools, Compatibility Reports to display the Compatibility Checker dialog, as shown in Figure 20.5. You’ll have the option of checking all pages, all open pages, selected pages, or the current page using the Check Where options. Pages can be checked against selected HTML/XHTML standards using the Check HTML/XHTML Compatibility With dropdown, and CSS code can be checked against a CSS standard specified in the Check CSS Compatibility With dropdown.
20
6055_20.qxp
356
12/7/2006
12:19 PM
Page 356
Chapter 20 Designing for Compatibility
Figure 20.5 The Compatibility Checker makes it easy to find problems in your code.
If you have a doctype declaration on your pages, you can check the Run Check Based on Doctype Declaration in Page if Available checkbox and the Compatibility Checker will check your pages based on the doctype. When you use this option, the setting in the Check HTML/XHTML Compatibility With dropdown is ignored if a doctype declaration is on your page. It’s important to realize that checking the Run Check Based on Doctype Declaration in Page if Available checkbox does not automatically negate the setting in the Check HTML/XHTML Compatibility With dropdown. In fact, you may find yourself in a situation where you have inherited a Web site that contains some pages with a doctype declaration and some pages without one. In such cases, it’s often convenient to check against the doctype in the page when present, but check other pages against a particular standard in preparation for adding a doctype later. It’s in these types of situations that the flexibility of the Compatibility Checker is truly appreciated.
20
The results of the Compatibility Checker are disabled in the Compatibility pane, as shown in Figure 20.6. Each column in the Compatibility pane can be sorted by clicking on the column header. Double-clicking on an item in the list will take you to the code that is causing the problem so you can correct it. As you make corrections, you can use the buttons along the left edge of the Compatibility pane to refresh the results, rerun the compatibility reports, and navigate between compatibility errors. You can also generate an HTML report of all compatibility issues (shown in Figure 20.7) by clicking the Generate HTML Report button.
6055_20.qxp
12/7/2006
12:19 PM
Page 357
Compatibility Features in Expression Web
Figure 20.6 The Compatibility pane displays the results of a compatibility check in an easy-tofilter view.
357
Run Compatibility Checker Button Next Result Button
Previous Result Button Refresh Changed Results Button Generate HTML Report Button
Figure 20.7 To save the results of the Compatibility Checker, generate an HTML report that can be reviewed later.
20
If the results of the Compatibility Checker don’t match the code that Expression Web is highlighting as invalid in Code View, see “Code View Errors and Compatibility Checker Don’t Match” in the “Troubleshooting” section of this chapter.
By clicking on the small arrow at the right edge of a column in the Compatibility pane, the results can be filtered using either the dropdown menu that appears or by choosing Custom from the menu and entering filtering criteria in the Custom AutoFilter dialog, as shown in
6055_20.qxp
358
12/7/2006
12:19 PM
Page 358
Chapter 20 Designing for Compatibility
Figure 20.8. After a particular column has been filtered, the arrow at the right edge of that column will change to blue. To remove the filter you’ve applied, right-click on the column header and select Remove Filter, as shown in Figure 20.9. Figure 20.8 Compatibility errors can be custom filtered using the Custom AutoFilter dialog.
Figure 20.9 Filters can be removed using the context menu that appears when you right-click on a column header.
Troubleshooting doctype
Not Added to Page
I’ve selected a specific doctype in the Page Editor Options dialog, but when I check Code View, there isn’t a doctype on my page. Is this a bug? It’s not a bug. The doctype that you select in the Doctype dropdown in the Page Editor Options dialog controls what gets added to new pages you create. It will not affect existing pages. If you want to add a doctype to an existing page, you must do it manually.
Code View Errors and Compatibility Checker Don’t Match I see one problem in the Compatibility Checker, but in Code View, Expression Web is highlighting many errors that don’t show up in the Compatibility pane. What’s going on? It’s likely that you are using a standard in the Compatibility Checker that does not match the standard chosen in the Page Editor Options dialog. You can avoid this kind of problem by always including a doctype declaration on your pages.
6055_20.qxp
12/7/2006
12:19 PM
Page 359
Lagniappe: Don’t Rely on Expression Web to Enforce Standards
Lagniappe (lan yap’) n.,
a gift or bonus
Don’t Rely on Expression Web To Enforce Standards Web standards are like the weather in Texas—they change constantly and they rarely end up looking like anyone expects. For that reason, it’s best if you don’t rely solely on Expression Web’s compatibility features. As standards-compliant tools become more common, it becomes more important for your Web sites to comply with standards. If you design Web sites for a living, you likely will encounter clients who will demand that their sites pass validation checkers. There are plenty of validation tools available on the Internet. The most reliable is the W3C’s own Markup Validation Service located at http://validator.w3.org/. You can use the Markup Validation Service to validate a URL, upload a page for validation, or validate code that is pasted into a page.
359
6055_20.qxp
12/7/2006
12:19 PM
Page 360
6055_pt06.qxp
11/30/2006
9:00 AM
Page 361
PART
VI
Scripting, DHTML, and Other Dynamic Content 21
Using Dynamic Web Templates
22
Using Interactive Buttons
23
Using Behaviors
24
Using Client Scripting
25
Using Layers
26
Creating VBA Macros
381
393 415
439 455
363
6055_pt06.qxp
11/30/2006
9:00 AM
Page 362
6055_21.qxp
12/7/2006
12:20 PM
Page 363
CHAPTER
21
Using Dynamic Web Templates
In this chapter An Introduction to Dynamic Web Templates Creating a Dynamic Web Template Attaching a Dynamic Web Template Updating a Site with Dynamic Web Templates Managing Editable Regions Detaching a Dynamic Web Template Troubleshooting Lagniappe: Under the Hood
6055_21.qxp
364
12/7/2006
12:20 PM
Page 364
Chapter 21 Using Dynamic Web Templates
An Introduction to Dynamic Web Templates There are millions of Web sites on the Internet today, and one thing they have in common is that they are each made up of pages that contain a lot of duplicated content. A typical Web site is composed of pages that consist of a common framework. That common framework plays an integral role in the success of a Web site because it defines the site’s identity. Another trait of a successful Web site is freshness. Keeping a Web site updated is more than just adding new content. Every once in a while, it’s a good idea to change things around and give the site a fresh look. This is especially important as new Web technologies begin to emerge. If you want to be on the cutting edge, you’ve got to keep your site updated. Updating your Web site is easy if you only have a few pages. However, if your site has been up for any length of time, you’ve likely accumulated a lot of content on many pages. Updating a Web site with many pages can be a big hassle, and not just because it can be time-consuming. Code that looks great on one page might appear slightly different on another page. This is especially true if you are using tables in your layout. The best way to prevent layout headaches is to use the exact same layout code for each page, but your site can then become a nightmare to maintain if you have to manually reproduce the layout on each page. This kind of problem is exactly what Dynamic Web Templates were designed to address. A Dynamic Web Template allows you to create a master page (a Dynamic Web Template) that defines your layout. When you create the Dynamic Web Template, you create areas in the page (called editable regions) that contain unique content on pages that use the Dynamic Web Template. When a page is attached to the Dynamic Web Template, you are only allowed to add or edit content inside an editable region. All other areas of the page are locked and content for those areas is provided by the Dynamic Web Template.
➔
Dynamic Web Templates should not be confused with ASP.NET Master Pages. If you would like an ASP.NET template solution, see “Using ASP.NET Master Pages and User Controls,” p. 549 (Chapter 30).
Creating a Dynamic Web Template To create a Dynamic Web Template, select File, New, Page. In the New dialog, select Dynamic Web Template, as shown in Figure 21.1, and click OK. When you create a page based off a Dynamic Web Template, you will only be able to add new content to editable regions defined in the Dynamic Web Template. All other portions of the page will be protected from editing. Because of that, you’ll want to define a layout for the Dynamic Web Template before you add any new editable regions.
21 TIP A new Dynamic Web Template contains an invisible editable region called doctitle that surrounds the HTML tag. This editable region allows you to change the title on pages attached to the Dynamic Web Template. Without that editable region, you wouldn’t be able to change the title of any of your pages.
6055_21.qxp
12/7/2006
12:20 PM
Page 365
Creating a Dynamic Web Template
365
Figure 21.1 Create a Dynamic Web Template using the New dialog.
Creating a Page Layout The Dynamic Web Template contains the “chrome” for your Web site. Menus, logos, and other common page elements are added to the Dynamic Web Template. Next, editable regions are added as placeholders for content that will be unique from page to page. To define a page layout:
1. Create a new one-page Web site and create a new Dynamic Web Template. Save the Dynamic Web Template as master.dwt.
2. Import the styles.css file from the Examples\Ch21\Files\Website folder on the CD that accompanies this book into your Web site and attach it to your new Dynamic Web Template.
3. Select the existing editable region and delete it. (You can use the Quick Tag Selector to select it easily.)
4. 5. 6. 7.
Add a new table. Set the number of rows to 4 and the number of columns to 1. Set the cellpadding and cellspacing to 0. In the top row, add a logo. Use the logo.jpg file in the Examples\Ch21\Files\Website\Images folder on the CD that accompanies this book.
8. Select the second table row and add a class attribute with a value of horizRule. 9. In a real site, the second row would contain a menu. For this example, enter some text in place of the menu (see Figure 21.2).
10. In the third row, add a new table with 1 row and 1 column. 11. Set the width of the new table to 95%.
➔ ➔
For more information on using tables, see “Using Tables and Layout Tables”, p. 149 (Chapter 9). For more information on formatting pages with CSS, see “Creating Style Sheets”, p. 289 (Chapter 17).
21
6055_21.qxp
366
12/7/2006
12:20 PM
Page 366
Chapter 21 Using Dynamic Web Templates
You now have a basic layout for a Web site. Your Dynamic Web Template should look similar to Figure 21.2. Figure 21.2 A Dynamic Web Template defines the common features of a Web site such as a logo and a menu system.
Adding Editable Regions To add page-specific content, you need to define some editable regions for the Dynamic Web Template. Let’s add two editable regions:
1. Place the insertion point inside the third table row. 2. Select Format, Dynamic Web Template, Manage Editable Regions. 3. In the Editable Regions dialog, enter “maincontent” for the region name and click the Add button, as shown in Figure 21.3.
4. Click the Close button. 5. Right-click inside the fourth table row and select Manage Editable Regions from the context menu. (This is an alternate method of accessing the Editable Regions dialog.)
6. In the Editable Regions dialog, enter “bannerad” for the region name and click the Add button.
7. Click the Close button. 21
8. Save the Dynamic Web Template.
6055_21.qxp
12/7/2006
12:20 PM
Page 367
Creating a Dynamic Web Template
367
Figure 21.3 Editable regions are added and managed using the Editable Regions dialog.
You now have two visible editable regions in the Dynamic Web Template. (The doctitle editable region is still on the page, but it’s not a visible editable region.) The maincontent editable region will be used for the main content and the bannerad editable region will be used for a banner ad that will appear at the bottom of the page. Your Dynamic Web Template should now look similar to Figure 21.4. Figure 21.4 The Dynamic Web Template contains two editable regions, one for main content and one for an ad banner.
The bannerad editable region The maincontent editable region
21
6055_21.qxp
368
12/7/2006
12:20 PM
Page 368
Chapter 21 Using Dynamic Web Templates
TIP Expression Web surrounds each editable region with a . To resize an editable region, you can change the size of the or reposition it. The editable region will always be the same size as the that surrounds it, so changes to the will also affect the editable region.
Attaching a Dynamic Web Template To use a Dynamic Web Template, you must attach it to a page. The page will then take on the appearance of the Dynamic Web Template. Custom content for that page can be entered into editable regions. All other content is protected and cannot be edited.
Attaching to an Existing Page Let’s attach master.dwt to the default.htm page:
1. Open default.htm. 2. If you’re not in Design View, switch to it so you can easily see the effect of attaching the Dynamic Web Template.
3. Select Format, Dynamic Web Template, Attach Dynamic Web Template. 4. From the Attach Dynamic Web Template dialog, select the master.dwt Dynamic Web Template, as shown in Figure 21.5. Figure 21.5 The Attach Dynamic Web Template dialog displays all the Dynamic Web Templates in your Web site.
21 5. Click Open to attach the Dynamic Web Template. Expression Web will warn you that this action will replace content, as shown in Figure 21.6.
6055_21.qxp
12/7/2006
12:20 PM
Page 369
Attaching a Dynamic Web Template
369
Figure 21.6 When you first attach a Dynamic Web Template to an existing page, Expression Web will warn you that some content will be replaced.
6. Click Yes to attach the Dynamic Web Template. 7. Expression Web will display a dialog informing you that the file has been updated. Click Close to return to the default.htm page. The default.htm page should now look like the Dynamic Web Template. However, you should notice that all content outside the editable regions is locked and cannot be edited. TIP You can provide default content for editable regions by adding content inside the editable regions in the Dynamic Web Template. When a page is attached to the Dynamic Web Template, the editable regions will contain the content from the Dynamic Web Template. That content can then be changed in individual pages.
Providing Default Content for Editable Regions At first glance, it may seem counter-intuitive to provide default content in an editable region. However, there are times when doing so can make maintaining a Web site easier. Consider a scenario where your Web pages contain a menu that provides site navigation for your pages. If you include that menu outside of an editable region, any changes to the menu will be applied to all pages in the site. However, by including the menu inside of an editable region, you can use the default menu automatically when pages are attached to your Dynamic Web Template, but you also have the option of making a change to the menu on individual pages if necessary.
Attaching to a New Page You can attach a Dynamic Web Template to a page when the page is created.
1. Select File, New, Page. 2. From the New dialog, select Create from Dynamic Web Template, as shown in Figure 21.7.
21
6055_21.qxp
370
12/7/2006
12:20 PM
Page 370
Chapter 21 Using Dynamic Web Templates
Figure 21.7 The New dialog allows you to choose a Dynamic Web Template when a page is created.
3. Click OK. 4. In the Attach Dynamic Web Template dialog, select the Dynamic Web Template you want to use.
5. Click Open to create the page. TIP You can right-click on a Dynamic Web Template in the Folder List and select New from Dynamic Web Template from the menu that appears to create a new page based on a Dynamic Web Template.
Updating a Site with Dynamic Web Templates One of the greatest advantages to using Dynamic Web Templates is that they make it easy to make site-wide changes by simply modifying the Dynamic Web Template and then performing an update on all attached pages.
Modifying a Dynamic Web Template
21
When you save a modified Dynamic Web Template, Expression Web will notify you if there are any attached pages and ask if you’d like to update them, as shown in Figure 21.8. If you click Yes, Expression Web will automatically update all pages attached to the Dynamic Web Template.
6055_21.qxp
12/7/2006
12:20 PM
Page 371
Updating a Site with Dynamic Web Templates
371
Figure 21.8 You’ll be prompted to update attached pages when you save a modification to a Dynamic Web Template.
If the Dynamic Web Template menu options are disabled, see “Dynamic Web Template Menu Items Disabled” in the “Troubleshooting” section of this chapter.
N OTE
When you update a page attached to a Dynamic Web Template, none of the content in that page’s editable regions is modified. Only the content provided by the Dynamic Web Template is updated.
If you choose not to update attached pages when the Dynamic Web Template is saved, you can update them later by selecting Format, Dynamic Web Template, Update All Pages. When the update has completed, a dialog is displayed, showing a report of the update, as shown in Figure 21.9.
Figure 21.9 Expression Web can display a report of updates to attached pages.
CAUTION Updating all pages attached to a Dynamic Web Template cannot be undone. Before you choose to update all pages, be careful to ensure that you want to perform the update because Expression Web will automatically save any pages it updates without confirmation.
21
6055_21.qxp
372
12/7/2006
12:20 PM
Page 372
Chapter 21 Using Dynamic Web Templates
If you choose, you can select one or more pages and update only those pages by selecting Format, Dynamic Web Template, Update Selected Pages. Expression Web will then update only the pages you have selected. Alternatively, you can select or open a Dynamic Web Template and select Format, Dynamic Web Template, Update Attached Pages to update all pages attached to the selected or opened Dynamic Web Template.
Modifying an Attached Page in Code View Content in a page attached to a Dynamic Web Template can be edited in Design View only if that content is within an editable region. You can, however, edit other content in the attached page by switching to Code View and editing the code itself. When you view a page attached to a Dynamic Web Template in Code View, Expression Web will highlight any code provided by the Dynamic Web Template in orange. When you make any changes to this code, switching views or saving the page will cause Expression Web to notify you that you have made changes to a non-editable region of the page, as shown in Figure 21.10. At that point, you have two choices: ■
Always restore non-editable content while editing this page—When this option is selected, Expression Web will restore the original content from the Dynamic Web Template. Any future code edits outside an editable region will be restored without notification. The purpose of this option is to protect you from inadvertent code changes to content provided by the Dynamic Web Template.
■
Keep all changes—Keeps your code changes, allowing you to modify code outside an editable region.
Figure 21.10 Expression Web will not allow you to modify protected content from a Dynamic Web Template unless you explicitly tell it to let you.
21
If you choose to keep your changes, you can also check the Detach from Dynamic Web Template checkbox to detach the page from the Dynamic Web Template. If you choose this option, the link between the page and Dynamic Web Template will be severed. You may want to choose this option if you don’t want the page to be affected by future changes to the Dynamic Web Template.
6055_21.qxp
12/7/2006
12:20 PM
Page 373
Managing Editable Regions
373
CAUTION Before you detach from a Dynamic Web Template, be advised that if you decide to reattach the page to the Dynamic Web Template later, Expression Web will likely duplicate content on the page. Content on the page that originally was part of the Dynamic Web Template will be moved into an editable region and the content from the Dynamic Web Template will be re-added to the page.
TIP When you select the option to always restore non-editable content, Expression Web will restore Dynamic Web Template code without notification. However, this setting only affects the current editing session. If you open the page later and make changes, the setting will reset and Expression Web will warn you if changes are made to protected code.
Managing Editable Regions Editable regions can be added, renamed, or removed using the Editable Regions dialog shown in Figure 21.11. Figure 21.11 Editable regions are easily edited using the Editable Regions dialog.
N OTE
When adding or editing an editable region, the Dynamic Web Template must be open in Expression Web.
21
6055_21.qxp
374
12/7/2006
12:20 PM
Page 374
Chapter 21 Using Dynamic Web Templates
Adding a New Editable Region To add a new editable region, place the insertion point where you would like the new editable region and select Format, Dynamic Web Template, Manage Editable Regions to display the Editable Regions dialog. Enter a name for the new editable region and click Add to add it to the Dynamic Web Template, as shown in Figure 21.12.
Figure 21.12 Adding a new editable region is simple using the Editable Regions dialog. In this case, I’m adding a new editable region for a copyright statement.
When you save the Dynamic Web Template after adding a new editable region, Expression Web will ask if you want to update all the attached pages. When you do, the new editable region will be added to all attached pages.
Renaming an Existing Editable Region Existing editable regions can be renamed easily by clicking inside of the editable region and then selecting Format, Dynamic Web Template, Manage Editable Regions to display the Editable Regions dialog. Enter the new name for the editable region and then click Rename, as shown in Figure 21.13. TIP Contrary to the way you would think it would work, to rename an editable region, you must first click inside of the editable region and then select Manage Editable Regions. Otherwise, Expression Web will try to add a new editable region using the new name.
21
If there is no Rename button in the Editable Regions dialog, see “No Rename Button in Editable Regions Dialog” in the “Troubleshooting” section of this chapter.
You can rename another editable region by selecting it from the list of other editable regions, entering a new name, and clicking Rename.
6055_21.qxp
12/7/2006
12:20 PM
Page 375
Managing Editable Regions
375
Figure 21.13 Rename an editable region by selecting the region, entering the new name, and clicking Rename.
Resolving Mismatched Editable Regions When you rename an editable region and update attached pages, Expression Web will display the Match Editable Regions dialog (see Figure 21.14) so that editable regions can be matched. In most cases, Expression Web correctly maps editable regions to the corresponding content, but if it doesn’t, you’ll need to modify the mapping. In Figure 21.15, the copyright editable region has been renamed to copyrightStatement. Notice that Expression Web is assuming that the copyright editable region that currently exists on my pages should be mapped to the contentBlock editable region. In this case, the mapping will need to be modified. Figure 21.14 The Match Editable Regions dialog makes it easy to map editable regions on existing pages to newly renamed editable regions.
21
6055_21.qxp
376
12/7/2006
12:20 PM
Page 376
Chapter 21 Using Dynamic Web Templates
Figure 21.15 In this case, the recommended mapping is wrong. The existing copyright editable region needs to be mapped to the newly renamed copyrightStatement editable region.
Incorrectly mapped editable region
To remap an editable region, select the editable region from the Match Editable Regions dialog and click the Modify button. Select the correct editable region from the New Region dropdown, as shown in Figure 21.16, and click OK to remap the editable region.
Figure 21.16 Select the correct editable region from the Choose Editable Region for Content dialog to remap it.
If you’d like to remap the editable region on the current page later, click the Skip Current Page button on the Match Editable Regions dialog.
Detaching a Dynamic Web Template There are times when having a page attached to a Dynamic Web Template is too restrictive. In such cases, you can detach the page from the Dynamic Web Template.
21
You detach a page from a Dynamic Web Template by opening the page and then selecting Format, Dynamic Web Template, Detach from Dynamic Web Template. When you detach a page from a Dynamic Web Template, the connection between the page and the Dynamic Web Template is severed, but no content is removed from the page. Any changes made to the Dynamic Web Template from that point on do not affect the page.
6055_21.qxp
12/7/2006
12:20 PM
Page 377
Lagniappe: Under the Hood
TIP If you detach a page from a Dynamic Web Template and then change your mind, you can easily re-attach the Dynamic Web Template. Simply press Ctrl+Z or select Edit, Undo Detach from Dynamic Web Template.
Troubleshooting Dynamic Web Template Menu Items Disabled All the Dynamic Web Template menu items are disabled. I’ve got a Web site open, but I can’t click on any of the Dynamic Web Template menu items. It’s likely that the Web site you are using is hosted on a Web server running the FrontPage Server Extensions. You cannot use Dynamic Web Template features if the Web site open in Expression Web is using the FrontPage Server Extensions. The best way to work around this problem is to design your Web site locally as a disk-based Web site and then publish the site to the Web server.
➔
For more information on disk-based Web sites and the FrontPage Server Extensions, see “Creating a Web Site”, p. 25 (Chapter 2).
No Rename Button in Editable Regions Dialog I’ve selected an editable region and then selected Manage Editable Regions so that I can rename it. However, when the Editable Regions dialog is displayed, there isn’t a rename button. Is this a bug? It’s not a bug. In order to rename an editable region, you should click anywhere inside of the editable region first. If you select the entire editable region first, Expression Web will not allow you to rename it.
Lagniappe (lan yap’) n.,
a gift or bonus
Under the Hood Dynamic Web Templates can make managing your Web site easier. Expression Web makes it easy to create editable regions for flexible page layouts, but some Web designers prefer to make changes in Code View for maximum control. Even if you spend the majority of your time in Design View, it’s still helpful to know how Dynamic Web Templates work under the hood. Perhaps the easiest way to understand how Dynamic Web Templates work is to look at Code View after creating a new Dynamic Web Template. The code in Listing 21.1 is from a newly created Dynamic Web Template.
By default, every Dynamic Web Template contains two editable regions called doctitle and body, respectively. The doctitle editable region surrounds the tag and the body editable region is inside the tag. Expression Web determines the location of editable regions using the codes #BeginEditable and #EndEditable. TIP Because the Dynamic Web Template codes that Expression Web uses are not recognizable by Web browsers, they are enclosed in HTML comments so Web browsers won’t generate errors.
In Listing 21.1, the doctitle editable region code is as follows: Untitled 1
Any code between the #BeginEditable and #EndEditable codes is inside the editable region and can be modified. In this case, the code inside the doctitle editable region is the HTML tag. You can use this knowledge of how Dynamic Web Templates work to tweak the position of editable regions in code. By moving the #BeginEditable and #EndEditable codes so that they enclose content you want to be editable, you can precisely control the page elements that appear inside an editable region.
21
6055_21.qxp
12/7/2006
12:20 PM
Page 379
Lagniappe: Under the Hood
379
For example, consider the code below:
This code defines an editable region called mainTable and the entire table is included within an editable region. Suppose you wanted to make the bottom row of the table an editable region but leave the top row protected. There’s no way to make that change in Design View, but you can do it easily by making a small code modification. The following shows the new code:
Notice that the #BeginEditable and #EndEditable codes are now enclosing only the second table row. Only content within that second row is inside the editable region. The rest of the table is protected content.
21
6055_21.qxp
12/7/2006
12:20 PM
Page 380
6055_22.qxp
12/7/2006
12:21 PM
Page 381
CHAPTER
22
Using Interactive Buttons
In this chapter Overview of Interactive Buttons Inserting and Configuring Interactive Buttons Saving an Interactive Button Editing an Interactive Button Troubleshooting Lagniappe: Practical Uses For Interactive Buttons
6055_22.qxp
382
12/7/2006
12:21 PM
Page 382
Chapter 22 Using Interactive Buttons
Overview of Interactive Buttons 22
Interactive Buttons are one of several features in Expression Web that were carried over from FrontPage 2003. Interactive Buttons (see Figure 22.1) are a convenient way to add graphical navigation links that provide interactivity and are easily editable as your site changes over time. Figure 22.1 Interactive Buttons aren’t appropriate for site-wide navigation, but they are a nice solution if you’re looking for attractive navigation buttons.
Interactive Buttons use a series of images and some JavaScript to swap out images as you interact with a button by hovering over it or clicking on it. Because Interactive Buttons use standardized Dynamic HTML code, they will work on all modern browsers, assuming JavaScript is enabled. N OTE
Because of the many security threats that exist on the Internet, some people disable scripting in the browser in an attempt to add a degree of protection from rogue scripts. While doing so isn’t advised and provides minimal protection at best, you must still consider such possibilities when designing your Web site. Interactive Buttons will not swap images if scripting is disabled, but buttons will still appear and the links associated with buttons will still work.
6055_22.qxp
12/7/2006
12:21 PM
Page 383
Inserting and Configuring Interactive Buttons
383
Inserting and Configuring Interactive Buttons One of the first things you’re likely to notice about Interactive Buttons is that there are a lot of choices in button style. As shown in Figure 22.2, there is a large list from which to choose, including 31 different categories and well over 100 different styles. Figure 22.2 Expression Web gives you many different styles of Interactive Buttons from which to choose.
To insert an Interactive Button, select Insert, Interactive Button. The Interactive Button dialog (shown in Figure 22.2) consists of three tabs: the Button tab, the Font tab, and the Image tab.
The Button Tab The Button tab (shown in Figure 22.2) allows you to select a button style and configure basic properties of the button. You can specify the text that appears on the button as well as the URL to which the button should link. If you enter a lot of text for the button, the text may exceed the width of the button. In such cases, you can either change the font size using the Font tab or modify the size of the button itself using the Image tab. TIP The text you enter for an Interactive Button is actually embedded into the images that will make up the button when you save your page. If you want to edit the text, you’ll need to do it using the Interactive Buttons dialog in Expression Web.
22
6055_22.qxp
384
22
12/7/2006
12:21 PM
Page 384
Chapter 22 Using Interactive Buttons
To get a good idea of how your button will appear on the page, Expression Web provides you with a Preview window. Hover over a button in the Preview window to see the interaction. By clicking on a button, you can see how the button will change its appearance when clicked. TIP The Preview window shows how a button changes as you interact with it with your mouse. However, any links you have configured will not be active in the Preview window.
The Font Tab The Font tab (shown in Figure 22.3) provides configuration settings for the font that appears on an Interactive Button. In addition to the font, you can also choose font style (default, italic, bold, or both bold and italic) and font size. Figure 22.3 The Font tab provides all the tools needed to configure the font for an Interactive Button.
TIP If the font size you need is not listed, simply enter the size in the Size textbox.
6055_22.qxp
12/7/2006
12:21 PM
Page 385
Inserting and Configuring Interactive Buttons
385
Font colors can also be configured on the Font tab, as shown in Figure 22.4. You can configure the colors for three different button states: ■
Original state—The state of the button when the mouse is not hovering on it and when it is not being clicked.
■
Hovered state—The state of the button when the mouse pointer is being hovered over it.
■
Pressed state—The state of the button when the button is being clicked.
Figure 22.4 The font color can be configured for the different states of an Interactive Button.
Color chooser
To configure the alignment of a button’s text, select the desired alignment (left, center, or right) from the alignment dropdowns. You can configure both the horizontal and vertical alignment of the text. CAUTION The Preview window on the Font tab provides alignment lines to aid in font formatting. To ensure that your text appears correctly, make sure it doesn’t extend outside the font alignment lines.
22
6055_22.qxp
386
12/7/2006
12:21 PM
Page 386
Chapter 22 Using Interactive Buttons
The Image Tab 22
The Image tab (shown in Figure 22.5) provides settings for controlling the size and format of the images that make up an Interactive Button. Figure 22.5 The Image tab is where you configure the images that make up an Interactive Button.
To control the width and height of an image, enter a pixel value in the Width and Height textboxes. Arrow buttons are provided for precise size adjustments. When the Maintain Proportions checkbox is checked, a change in height will cause a proportionate change in width, and vice versa. Removing the check from the Maintain Proportions checkbox allows you to make uniquely shaped buttons, as shown in Figure 22.6. By default, Expression Web creates images to be displayed when an Interactive Button is hovered over and when it is clicked. The Create Hover Image checkbox allows you to choose whether or not Expression Web will create the hover image. If the checkbox is unchecked, the Interactive Button will not change when it is hovered over. Similarly, the Create Pressed Image checkbox controls whether or not an image will be created for the pressed state of an Interactive Button. If you see a broken image in your browser when browsing to a page with Interactive Buttons, see “Interactive Button Images Broken” in the “Troubleshooting” section of this chapter.
When the Preload Button Images checkbox is checked, Expression Web will add a script to the page to preload the images that make up the Interactive Button. By preloading images,
6055_22.qxp
12/7/2006
12:21 PM
Page 387
Inserting and Configuring Interactive Buttons
387
Figure 22.6 The Embossed Capsule button style can be made more unique by specifying an equal height and width.
users of your Web site will not have to wait for the images to load when they hover over or click a button. When images are not preloaded, users will experience a delay before the new image is displayed. Therefore, it is recommended that you leave this checkbox checked. The Image tab contains options for the types of images Expression Web will use to build your interactive button. You can choose between JPEG images and GIF images.
➔
For information on choosing between different image formats, see “Using Graphics and Multimedia”, p. 241 (Chapter 14).
When the Make the Button a JPEG Image and Use This Background Color radio button is selected, Expression Web will save your images in the JPEG format and use the background color you specify. Choosing the Make the Button a GIF Image and Use a Transparent Background radio button will cause Expression Web to save your images in the GIF format and use a transparent background. However, as shown in Figure 22.7, the GIF option can cause jagged edges on buttons with rounded corners, so use it carefully.
22
6055_22.qxp
388
12/7/2006
12:21 PM
Chapter 22 Using Interactive Buttons
Figure 22.7
22
Page 388
The GIF option can create some jagged edges, so be careful when selecting it.
Jagged edges
TIP The background color on a JPEG image is only visible if you choose a button type that does not have right-angled edges.
Saving an Interactive Button Because Expression Web builds Interactive Buttons using image files, when you save a page on which an Interactive Button has been inserted, you will be prompted to save the images, as shown in Figure 22.8.
➔
For more information on the Save Embedded Files dialog, see “Using Graphics and Multimedia”, p. 241 (Chapter 14).
TIP To move the images created by an Interactive Button after you’ve added the button, simply drag and drop the image files into the desired folder from within the folder list. Expression Web will automatically update the links so that the Interactive Button will still work correctly.
6055_22.qxp
12/7/2006
12:21 PM
Page 389
Editing an Interactive Button
389
Figure 22.8 Expression Web saves images that make up an Interactive Button when you save the page.
22
It may seem as though there is a connection between image files and an Interactive Button, but there isn’t. Therefore, if you remove an Interactive Button from a page, you will want to manually delete the image files from your Web site so they don’t take up unnecessary disk space.
Editing an Interactive Button Editing an Interactive Button is easily accomplished by double-clicking on the Interactive Button in Design View. The Interactive Button dialog is displayed and you can edit all the properties of the button. TIP You can also edit an Interactive Button by right-clicking on the button and selecting Button Properties from the menu that appears.
When you edit an Interactive Button, Expression Web will always prompt you to resave the images that make up the button even if the change you have made does not affect the images. In fact, if you open the Interactive Button dialog and click OK without making any changes at all, Expression Web will still prompt you to resave the images. In all cases, allowing Expression Web to resave and overwrite the existing images will cause no problems. If Expression Web seems to be saving multiple copies of images for a single Interactive Button, see “Multiple Image Copies Saved for an Interactive Button” in the “Troubleshooting” section of this chapter.
6055_22.qxp
390
12/7/2006
12:21 PM
Page 390
Chapter 22 Using Interactive Buttons
CAUTION If you choose a different image format when editing an Interactive Button, Expression Web will not delete the images you previously saved in the original format.
Troubleshooting Interactive Button Images Broken I am previewing my page with Interactive Buttons and one of my buttons shows a broken image link when I hover over it or click it. I recently cleaned up some unused files, but I’m not sure if that caused it. Chances are you removed one or more of the image files the Interactive Button requires. Fortunately, fixing this problem is simple. Open the page in Expression Web and double-click on the Interactive Button. Then simply click OK without making any changes. When you save the page, Expression Web will resave the images for the Interactive Button and your problem will be fixed.
Multiple Image Copies Saved for an Interactive Button I just noticed that I have multiple copies of images for my Interactive Button. Isn’t this wasting disk space? By default, Expression Web saves Interactive Button images in the root folder of your Web site. If you change that and save them in a subfolder, the Interactive Button will still work fine. However, if you then take some action that resets Expression Web’s folder setting (such as flip-flopping the image format), Expression Web will lose track of the images saved in a different folder and will resave new images in the root folder of the Web site. You can also cause multiple copies to be created if you change from JPEG to GIF or GIF to JPEG without flip-flopping. Expression Web doesn’t delete the original image files when you switch image formats, so you’ll want to do it manually. If you’re not sure which image files to remove, remove them all and then double-click on the Interactive Button. Next, click OK in the Interactive Button dialog and save the page. Expression Web will automatically save all the images for the Interactive Button and you’ll be fine.
Lagniappe (lan yap’) n.,
a gift or bonus
Practical Uses For Interactive Buttons I began this chapter by saying that Interactive Buttons don’t fit the bill as a site-wide navigation tool. I stand by that statement, but that doesn’t mean there aren’t some practical reasons for using Interactive Buttons. Many of the examples in this chapter showed an Interactive Button being used as a Download Now button. Everyone who uses the Web downloads software from time to time,
6055_22.qxp
12/7/2006
12:21 PM
Page 391
Lagniappe: Practical Uses for Interactive Buttons
and there’s nothing more frustrating than searching a page for a link to download a file you need. An Interactive Button is the perfect choice because it stands out and is easily created. Another great use of Interactive Buttons is for the creation of tabbed navigation within a page, as shown in Figure 22.9. This type of interface is easily created using tables and Interactive Buttons. Figure 22.9 Interactive Buttons are a great choice for creating tabbed “dialogs” on Web pages.
➔
Interactive buttons
For more information on using Tables, see “Using Tables and Layout Tables”, p. 149 (Chapter 9).
In short, anytime you need a few buttons on your Web site, Interactive Buttons are a great choice. Be creative with Interactive Buttons, but don’t burden yourself by using them for site-wide navigation. If you do, you’ll find yourself struggling to manage the images that are created and your navigation won’t look as professional as it should. A much better choice for this task is a DHTML menu system such as DHTML Menu Builder. (A full version of DHTML Menu Builder is included free of charge on the CD that accompanies this book.)
391
6055_22.qxp
12/7/2006
12:21 PM
Page 392
6055_23.qxp
12/7/2006
12:22 PM
Page 393
CHAPTER
Using Behaviors
In this chapter Understanding and Working with Behaviors Expression Web Behaviors Troubleshooting Lagniappe: Detecting Browsers
23
6055_23.qxp
394
12/7/2006
12:22 PM
Page 394
Chapter 23 Using Behaviors
Understanding and Working with Behaviors Behaviors were first introduced in FrontPage 2003—Microsoft’s legacy Web design application—as a way to make it easy for Web designers to add interactive and dynamic features to a Web site. You can insert behaviors that range from performing a simple task such as calling a client-side script, to complex tasks such as configuring a DHTML menu for your Web site.
Using the Behaviors Task Pane 23
Behaviors are inserted from the Behaviors task pane shown in Figure 23.1. The Behaviors task pane is the perfect place for behaviors because it allows you to work with them without the interface getting in the way. That’s very important because behaviors cannot be inserted and forgotten. After you insert a behavior, there’s plenty of tweaking you can do, and not having to dismiss a dialog between each change makes working with behaviors more efficient.
Figure 23.1 The Behaviors task pane makes it convenient to insert and work with behaviors.
To access the Behaviors task pane, select Task Panes, Behaviors. Click the Insert button and you’ll see a collection of 16 behaviors you can insert into your page. Whether a specific behavior is available for insertion depends on what is selected when you click the Insert button. In some situations, it might be necessary to insert more than one behavior for a single element. For example, when you are implementing rollover buttons, you need a Swap Image
6055_23.qxp
12/7/2006
12:22 PM
Page 395
Understanding and Working with Behaviors
395
behavior and a Swap Image Restore behavior for the image. Behaviors are processed from top to bottom. When you insert more than one behavior on a single HTML element, depending on the type of behavior, you can change the order of precedence using the up and down arrow buttons in the Behaviors task pane. Select a behavior and click the up arrow to move the behavior up in the list and the down arrow to move it down in the list.
How Behaviors Work Behaviors are implemented using events and actions. An event is a message that is intercepted by the Web browser when a certain action takes place. For example, when you click a hyperlink, an onclick event is sent to the browser. An action is what the browser does in response to the event. Behaviors allow you to add interactive scripts to your pages to take advantage of events. N OTE
The events available in the Behaviors task pane are documented on Microsoft’s MSDN Web site. To access the documentation, browse to http://msdn.microsoft.com/library/ default.asp?url=/workshop/author/dhtml/reference/events.asp.
The number and type of events available to you depend on the element you select before inserting a behavior. When you insert a behavior, Expression Web adds attributes to the closest HTML element to the left of the insertion point. (The Tag label in the Behaviors task pane indicates the element to which the behavior will be applied.)
Adding Behaviors Within a Paragraph Behaviors are easily applied to hyperlinks, images, and other page elements because these elements are already associated with an HTML tag to which the behavior can be applied. However, when you want to define a behavior for one or more words within a paragraph, it becomes a bit more complicated. If you simply select the words and apply a behavior, you will find that the behavior is applied to the entire paragraph and not just the selected words. To apply a behavior to one or more words within a paragraph, you can enclose those elements within a span tag. The easiest way to do this is to select the word or words you want to use, switch to Split View, and enclose those words in a span tag, including a unique ID. For example, to use the words “click here” in a paragraph as the link for a behavior, change the code from this
For more information, click here.
to this
For more information, <span id=”mylink”>click here.
Switch back to Design View. You can now click the span Quick Tag Selector to select the words “click here” prior to inserting your behavior. Your behavior will then be applied to those words. Without using this method, the behavior will affect the entire paragraph.
➔
For more information on the Quick Tag Selector, see “Using the Quick Tag Tools,” p. 227 (Chapter 13).
23
6055_23.qxp
396
12/7/2006
12:22 PM
Page 396
Chapter 23 Using Behaviors
CAUTION After a behavior has been applied to an element, there is no visual indicator that it has been applied. Because of this, it is quite easy to inadvertently apply a behavior to an HTML element only to find that another behavior has been applied to that element’s parent. In these cases, the parent’s behavior will take precedence.
TIP Behaviors are implemented in Expression Web using a combination of a JScript source file and an HTML file. If you have the coding knowledge necessary, you can edit these files to enhance a behavior to suit your specific needs. These files are located by default in the C:\Program Files\Microsoft Office\Templates\1033\Behaviors12\ACTIONS folder.
23
Expression Web Behaviors When behaviors were introduced in FrontPage 2003, browser compatibility was an issue with some behaviors. Today’s browsers feature support for a robust DHTML model and compatibility is no longer the issue it once was. However, keep in mind that there is no way to cover every possibility, so make sure you test your pages before publishing your Web site.
The Call Script Behavior The Call Script behavior runs a line of script when the event you specify is raised. You will likely want to write some script first and then call it using this behavior, but you don’t have to take that approach. If you have only one line of script to run, you can enter that line in the Call Script dialog and Expression Web will run it when the designated event occurs. Suppose you’ve written a script called showInfo that you want to run when an image is clicked on your page. To do this with the Call Script behavior, perform these steps:
1. Select the image. 2. If the Behaviors task pane is not visible, select Task Panes, Behaviors. 3. Click the Insert button and select Call
Script.
4. Type “showInfo();” in the Call Script dialog, as shown in Figure 23.2. Figure 23.2 The Call Script behavior allows you to easily call a script when a specified event is triggered.
5. Click OK.
6055_23.qxp
12/7/2006
12:22 PM
Page 397
Expression Web Behaviors
N OTE
➔
397
The event defaults to onclick, but you can choose another event if necessary by choosing the event from the dropdown in the Behaviors task pane.
For more information on creating and using scripts in your pages, see “Client-side Scripting,” p. 415 (Chapter 24).
The Change Property Behavior The Change Property behavior (shown in Figure 23.3) allows you to change any property on any HTML element on your page. (A property is a style applied to a particular page element.) The Change Property dialog allows you to configure some default properties such as font styles, borders, visibility, and so on, but you can also change other properties that aren’t listed by clicking the Add button in the Change Property dialog.
➔
For more information on using styles, see “Managing CSS Styles,” p. 311 (Chapter 18).
Figure 23.3 The Change Property behavior is useful for adding interactivity to your Web page.
Using the Change Property behavior, it is extremely easy to add professional-quality interactivity to your Web site with minimal effort. For example, suppose you have a series of graphics in a page, and each graphic links to a page of your site. When a user of your site hovers the mouse over each graphic, you want a text description of the link to appear on the page, and when the mouse leaves the graphic, you want the text description to disappear. The Change Property behavior allows you to easily implement this functionality without writing a single line of code. To create an example of interactivity using the Change Property behavior, perform these steps:
23
6055_23.qxp
398
12/7/2006
12:22 PM
Page 398
Chapter 23 Using Behaviors
1. Insert a table 400 pixels wide that contains three columns and three rows.
➔
For more information on inserting and configuring tables, see “Using Tables and Layout Tables,” p. 149 (Chapter 9).
2. Add some graphics of your choice to each corner cell in the table. Feel free to use clip art if you have no graphics handy.
3. Resize the center cell so it is 150 pixels wide and 200 pixels high. (See Figure 23.4 for an example of what the table should look like at this point.)
23
Figure 23.4 The table has four graphics and space in the middle for layers that will contain text.
4. Insert a layer. Position and size it so it fits within the center cell. Name the layer “layer1”.
➔
For more information on using layers, see “Using Layers,” p. 439 (Chapter 25).
5. Insert three more layers and position them directly on top of layer1. The easiest way to accomplish this is to copy layer1 and then paste the other layers. Name the other layers “layer2”, “layer3”, and “layer4”, respectively. CAUTION Be careful not to nest the layers underneath each other. If a new layer appears nested under an existing layer, drag it inside the Layers task pane so it is at the same level as the other layers.
6. Select layer1 from the Layers task pane and enter some text of your choice. 7. Change the visibility of layer1 to hidden by clicking the eye icon so the eye is closed.
6055_23.qxp
12/7/2006
12:22 PM
Page 399
Expression Web Behaviors
399
8. Select layer2 and enter some text of your choice. 9. Change the visibility of layer2 to hidden. 10. Repeat Steps 8 and 9 for the other two layers. (See Figure 23.5 for the completed Layers task pane.) Figure 23.5 The four layers for the rollover text are all invisible, which is signified by the closed eye icon.
23
11. Select the upper left image. From the Behaviors task pane, select Insert, Change Property.
12. In the Change Property dialog, click the Select Element radio button. 13. Choose div from the Element Type dropdown, and then choose layer1 from the Element ID dropdown.
14. Click the Visibility button and click the Visible radio button. Click OK. 15. Check the Restore on Mouseout Event checkbox. 16. Click OK. 17. In the Behaviors task pane, change the onclick event to onmouseover. TIP The Visibility property defaults to Inherit, which means the element will be visible only if the element in which it is contained is visible.
Complete Steps 11–17 for the other images and add a Change Property behavior for layer2, layer3, and layer4, just as we did for layer1. Save the page and preview it in your browser. You have just created a professional-quality effect with just a few clicks of the mouse. Figure 23.6 shows the completed Change Property dialog box for one of the layers.
6055_23.qxp
400
12/7/2006
12:22 PM
Page 400
Chapter 23 Using Behaviors
Figure 23.6 The completed Change Property
dialog box shows the property change for layer1.
23
The Change Property Restore Behavior The Change Property Restore behavior is meant to be used in combination with the Change Property behavior. It restores the most recent properties changed by the Change Property behavior to their previous values. (When you selected the Restore on Mouseout Event checkbox in Step 17 of the previous section (“The Change Property Behavior”), Expression Web automatically inserted a Change Property Restore behavior to restore the property.) No dialog exists for this behavior. As seen in Figure 23.7, when you insert the Change behavior, Expression Web tells you what it will do and then adds it to the Behaviors task pane. You can easily determine which properties are being restored by double-clicking the Change Property behavior listed directly under the newly inserted Change Property Restore behavior. Property Restore
Figure 23.7 The Change Property Restore behavior requires no user input.
The Check Browser Behavior The Check Browser behavior (shown in Figure 23.8) allows you to easily redirect your site visitors based on their browser and which version of that browser they are using. The Check Browser behavior can check for versions of Internet Explorer, Netscape Navigator, Opera, AOL, WebTV, AOL TV, and HotJava.
6055_23.qxp
12/7/2006
12:22 PM
Page 401
Expression Web Behaviors
401
Figure 23.8 The Check Browser behavior allows you to detect a user’s browser and version and redirect the user appropriately.
23 The Check Browser behavior can be added to a page itself, but it’s better to attach it to a particular page element. If you attach it to a page, it is invoked from the onload event of the page, and by the time that event fires, the page will have already been rendered. N OTE
Many Web developers fail to realize that the onload event for a Web page fires after the page has completely loaded and not before the page loads. This is necessary so that any script that runs in the onload event will have access to all page elements.
Unless you are detecting browsers on your site’s entry page, it is best to attach the Check behavior to the onclick event of a hyperlink that loads a new page. You can then load a particular page depending on the browser your visitor is using, and the wrong page will never be rendered.
Browser
If you are detecting browsers on your site’s entry page, create an empty page and attach a behavior to the onload event for the page. By doing that, you can ensure you will not load any elements that will cause errors or malformed rendering in a particular browser (see the “Lagniappe” section of this chapter for more details). Check Browser
TIP Firefox identifies itself as “Mozilla/5.0”, so if you are going to use the Check Browser behavior to identify Firefox, make sure that you use Netscape Navigator for the browser type and a version of at least 5.
The Check Plug-in Behavior A plug-in can either be an ActiveX control running in Internet Explorer or a plug-in running in Netscape or another browser. Using the Check Plug-in behavior (shown in Figure 23.9), you can redirect a user based on whether he or she has one of the more common plug-ins. The Check Plug-in behavior is designed to check for the existence of Adobe Flash, Apple QuickTime, RealNetworks RealPlayer, Adobe Shockwave, and Microsoft Windows Media Player.
➔
For more information on using audio and video, see “Using Graphics and Multimedia,” p. 241 (Chapter 14).
6055_23.qxp
402
12/7/2006
12:22 PM
Page 402
Chapter 23 Using Behaviors
Figure 23.9 The Check Plugin behavior makes redirecting users based on browser plug-ins quick and easy.
23
The Go To URL Behavior The Go To URL behavior (shown in Figure 23.10) simply redirects users to a specified URL when the event you choose occurs.
Figure 23.10 The Go To URL behavior does just what its name implies.
The Jump Menu Behavior The Jump Menu behavior allows you to easily add a dropdown box to a Web page. When an item is selected in the dropdown, the user’s browser will go to the URL specified for that item. To create a jump menu, select Insert, Jump Menu from the Behaviors task pane to activate the Jump Menu dialog (shown in Figure 23.11). There is no need to select anything first. Expression Web will insert a dropdown list for the jump menu at the insertion point’s location. Click the Add button. Enter the text that you want to appear in the dropdown list in the Choice field and the URL you want that item to link to in the Value field. Click OK to add the item to the jump menu. After you have added one or more items to your jump menu (more than one item is recommended), you can configure that item to open in either the default target for the page or in a new window. By checking the Select First Item After URL Change box, you can force the jump menu to return to the first item in the list when clicking the Back button in your browser after jumping to a URL.
6055_23.qxp
12/7/2006
12:22 PM
Page 403
Expression Web Behaviors
403
Figure 23.11 Items are added to a jump menu by specifying the text to appear and the URL to which the item should link.
23
The Jump Menu Go Behavior The Jump Menu Go behavior is designed to be used with the Jump Menu behavior. When you don’t want your Jump Menu behavior to jump as soon as a new item is selected in the dropdown list, you can use the Jump Menu Go behavior as a trigger for the menu. To use the Jump Menu Go behavior, insert a Jump Menu behavior and then insert or select an element (such as an image that says “Go!”) to use for your trigger. Select Insert, Jump Menu Go from the Behaviors task pane and select the jump menu from the dropdown, as shown in Figure 23.12.
Figure 23.12 Using the Jump Menu Go behavior allows you to create a trigger for your jump menu.
After you’ve done that, you must stop the jump menu from jumping as soon as you select an item. The Jump Menu event defaults to onchange, but if you leave the event set to onchange, you won’t have the opportunity to use the Jump Menu Go component because the menu will jump as soon as you select an item. To change the jump menu so it doesn’t jump when you select a different item, select the jump menu’s dropdown list, and then select the Jump Menu behavior in the Behaviors task pane. Click the Delete button in the task pane to delete the onchange event from the task pane. (Don’t press the Delete key on your keyboard.) This will remove the entire entry for the jump menu, but don’t worry. After doing this, your Jump Menu Go behavior will be the trigger for the jump menu.
6055_23.qxp
404
12/7/2006
12:22 PM
Page 404
Chapter 23 Using Behaviors
The Open Browser Window Behavior The Open Browser Window behavior (shown in Figure 23.13) allows you to configure a hyperlink to open in a new browser window.
Figure 23.13
23
Easily create popup windows with specific configurations using the Open Browser Window behavior.
You can control the following attributes for the new window: ■
Window name—A unique name for the new browser window so you can refer to it with other behaviors or your own scripts.
■
Window width—The width of the new window in pixels.
■
Window height—The height of the new window in pixels.
■
Navigation toolbar—The toolbar that contains the Forward button, Back button, Home button, and so on.
■
Location toolbar—The toolbar that contains the address bar.
■
Status bar—The bar at the bottom of the new window.
■
Menu bar—The menu bar at the top of the new window.
■
Scrollbars as needed—Turns scrollbars on if the content of the new window is larger than the window itself.
■
Resize handles—Allows for resizing of the new window by dragging the edges. TIP Internet Explorer 6.0 and later versions do not allow for new windows to be opened without a status bar by default. Therefore, even if you leave the Status Bar checkbox unchecked, most users will still see a status bar displayed.
When adding the Open Browser Window behavior to text, it’s most useful to use the Change Property and Change Property Restore behaviors to change the pointer to a hand when users hover over your link.
6055_23.qxp
12/7/2006
12:22 PM
Page 405
Expression Web Behaviors
405
To implement this, add your Open Browser Window behavior first. Then add a Change Property behavior and add your own property by clicking the Add button. Use style.cursor for the Property Name and hand for the Property Value. Make sure you also check the Restore on Mouseout Event box so that Expression Web will add the Change Property Restore behavior. If you are having trouble with the browser window appearing behind the main window, see “Open Browser Window Pops Up Behind Existing Window” in the “Troubleshooting” section of this chapter.
The Play Sound Behavior The Play Sound behavior (shown in Figure 23.14) allows you to play a sound when the selected event is triggered. The Play Sound behavior supports wav files, midi files, RealAudio files, AIFF sound files, and AU sound files.
Figure 23.14 The Play Sound behavior allows you to play a sound when a particular event is triggered.
The Popup Message Behavior The Popup Message behavior (shown in Figure 23.15) provides a dialog in which you can enter a message that should be displayed in an alert dialog in the browser. When the selected event is triggered, the text you enter will appear in an alert dialog with an OK button.
Figure 23.15 The Popup Message behavior makes creating JavaScript popup messages simple.
23
6055_23.qxp
406
12/7/2006
12:22 PM
Page 406
Chapter 23 Using Behaviors
The Preload Images Behavior The Preload Images behavior (shown in Figure 23.16) allows you to preload images when a page initially loads. The most common use of preloading images is when swapping images on mouse rollover buttons. In these situations, you want the image that displays when the user points to the button to load as soon as the page loads even though it is not initially visible. If you don’t preload such images, the user will experience a delay while the image loads the first time he or she points to the button.
23
Figure 23.16 The Preload Images behavior makes preloading images a snap.
To preload one or more images, insert the Preload Images behavior, click the Browse button, browse to your image, and then click OK. After you have selected your image, click the Add button to add it to the Preloaded Images list. You can add as many images as you’d like to the list. CAUTION Be aware that preloading images doesn’t make them free as far as bandwidth is concerned. You will still want to keep your image files as small as possible.
The Set Text Behavior The Set Text behavior consists of four separate behaviors: Set Layer, Set Text of Status Bar, and Set Text of Text Field.
Text of Frame, Set Text of
Set Text of Frame
The Set Text of Frame behavior sets the HTML of the frame you specify when the selected event is triggered. Suppose, for example, you have a frames page that consists of miscellaneous content on the left, main content on the right, and a small navigation frame on top of the main content frame. Using the Set Text of Frame behavior, you can easily implement a bread crumb effect in the navigation frame, as shown in Figure 23.17.
6055_23.qxp
12/7/2006
12:22 PM
Page 407
Expression Web Behaviors
407
Figure 23.17 A bread crumb effect is simple to implement with the Set Text of Frame
behavior.
23
To insert the Set Text of Frame behavior, open a page containing a frame and select the HTML element containing the event with which you want to trigger the behavior. Select Insert, Set Text, Set Text of Frame from the Behaviors task pane. Select the frame into which you would like to enter HTML, enter the HTML code that you would like to appear in the frame, and click OK. If you set the background color for the frame page or inline frame and would like it to be preserved, make sure you check the Preserve background color box prior to clicking OK, as seen in Figure 23.18. Otherwise, the background color will revert to the default for the browser you are using.
Figure 23.18 The Set Text of Frame behavior allows you to maintain the current background color after setting a frame’s HTML.
6055_23.qxp
408
12/7/2006
12:22 PM
Page 408
Chapter 23 Using Behaviors
Set Text of Layer
The Set Text of Layer behavior allows you to specify the HTML to be rendered in the specified layer when the selected event is triggered. The bread crumb effect shown previously in Figure 23.17 can be implemented using the Set Text of Layer behavior by using a layer to hold your bread crumb navigation information instead of a frame.
➔
23
For more information on using layers in Expression Web, see “Using Layers,” p. 439 (Chapter 25).
To insert a Set Text of Layer behavior (shown in Figure 23.19), open a page containing a layer and select the HTML element containing the event with which you want to trigger the behavior. Select Insert, Set Text, Set Text of Layer, enter the HTML you would like to have rendered in the layer, and click OK.
Figure 23.19 The Set Text of Layer behavior allows you to easily set the HTML to be used to render the content of a layer.
Set Text of Status Bar
The Set Text of Status Bar behavior allows you to easily change the text that appears in the status bar at the bottom of the browser window. This can be useful to display messages of interest to visitors of your site. For example, you can use this behavior to display a descriptive message when a user hovers over hyperlinks on your Web page. To insert the Set Text of Status Bar behavior, select the HTML containing the event with which you want to trigger the behavior and then select Insert, Set Text, Set Text of Status Bar. Enter the message you would like displayed in the status bar and then click OK, as shown in Figure 23.20.
Figure 23.20 The Set Text of Status Bar behavior makes it very simple to change the text displayed in the status bar—just enter your text and click OK.
6055_23.qxp
12/7/2006
12:22 PM
Page 409
Expression Web Behaviors
409
Set Text of Text Field
The Set Text of Text Field behavior (shown in Figure 23.21) sets the text that appears in a textbox or text area field. This behavior can be used when you need to set the value for a form field based on a particular event.
Figure 23.21 The Set Text of Text Field behavior sets the text of textboxes and text areas.
To insert the Set Text of Text Field behavior, open a page that contains a textbox or text area field and select Insert, Set Text, Set Text of Text Field. Enter the text you would like to appear in the text field and click OK.
➔
For more information about textboxes and text areas, see “Using Form Controls,” p. 195 (Chapter 11).
The Swap Image Behavior The Swap Image behavior allows you to swap one image for another when a specified event occurs. The most common use of this behavior is to create rollover buttons. In fact, when you insert an Interactive Button, Expression Web uses the Swap Image behavior to implement the interactivity of the button.
➔
For more information on Interactive Buttons, see “Using Interactive Buttons,” p. 381 (Chapter 22).
To use the Swap Image behavior, open a page containing one or more images, select the image you would like to swap, and select Insert, Swap Image from the Behaviors task pane. The Swap Images dialog (shown in Figure 23.22) contains a list of all images in the document. The image you selected is highlighted, but you can configure a swap image for as many images as you’d like before clicking OK. Just keep in mind that you are configuring one event, so if you configure a swap image for img1, img2, and img3 and attach it to the onmouseover event for img1, all three images will swap when you roll over img1. It is best to use two images of the same size for your rollovers. The Swap Image behavior will use the image dimensions of the original image for the swap image. If the proportions are different or if Expression Web is forced to resize an image, you are going to get less than optimal results.
23
6055_23.qxp
410
12/7/2006
12:22 PM
Page 410
Chapter 23 Using Behaviors
Figure 23.22 The Swap Image behavior makes rollover button creation simple.
The Swap Images dialog also provides a checkbox labeled Preload Images. Checking this box will automatically insert a Preload Images behavior to preload all the swap images you configured. Restore on Mouseout Event automatically inserts a Swap Image Restore behavior, which we will talk about next.
The Swap Image Restore Behavior The Swap Image Restore behavior works much like the Change Property Restore behavior. It restores the images that were swapped in the entry immediately below it in the Behaviors task pane. It is used only after applying the Swap Image behavior. This behavior is automatically inserted if the Restore on Mouseout Event box is checked when configuring a swap image in the Swap Images dialog.
Troubleshooting Open Browser Window Pops Up Behind Existing Window I configured a Popup Message and an Open Browser Window behavior. When I browse to my page, I can see both, but the new browser window opens behind the main browser window. How can I fix that? Change the order of your behaviors by clicking the arrow buttons in the Behaviors task pane. An Open Browser Window behavior should always appear at the bottom of the list because it’s the last thing you want to do on a page. If you perform some other action on the page after the Open Browser Window behavior has created a new window, the main window will resume focus and the new browser window will be moved behind it.
6055_23.qxp
12/7/2006
12:22 PM
Page 411
Lagniappe: Detecting Browsers
Lagniappe (lan yap’) n.,
a gift or bonus
Detecting Browsers As new browser versions are released, you may find that a particular behavior doesn’t work in an updated browser. However, that doesn’t have to keep you from using a cool behavior that you want to use on your Web site. Using the Check Browser behavior, you can ensure that only people who are using a compatible browser get to your page. The recommended method for using the Check Browser behavior is to add it to the tag and fire it with the onload event. By specifying a different page to be displayed for specific browsers, you can be sure that the people viewing your Web page are properly equipped to view it with all its features intact. The onload event of the tag fires after a page has completed loading. If you use the Check Browser behavior on a page to redirect according to the browser being used, by the time the behavior is invoked, the page will have already been loaded and is already visible. Your Web site visitor will see the first page load briefly and will then be redirected to the correct page as per the settings configured in the Check Browser behavior. The result is an unprofessional look, but it can be easily avoided. There are two methods to avoid this problem. The first method is to use a blank page and configure the Check Browser behavior on it. The second method is to edit the code added by the Check Browser behavior. Either of these methods will prevent users from ever seeing a page that does not display properly in their browsers.
Creating a Blank Page for Redirecting The first method of preventing the wrong page from being displayed to your Web site visitors is to add the Check Browser behavior to a blank page. Using this method, the page that loads initially contains no content and is only used to redirect users to the correct page based on the browsers they are using. Using this method, you will need to create three pages: one blank page containing the Check Browser behavior, one page for users who have a browser that supports the behavior you are using, and one page for users who are using all other browsers. When you insert the Check Browser behavior, you will need to configure a separate page for your targeted browser and another URL for all other browsers, as seen in Figure 23.23. Figure 23.23 The Check Browser behavior configured with one page for browsers that support your behavior and another page for all others.
411
6055_23.qxp
412
12/7/2006
12:22 PM
Page 412
Chapter 23 Using Behaviors
Editing the Check Browser Code The second method of preventing an unprofessional appearance when using the Check behavior involves editing the code inserted by the behavior. Even though this method requires you to edit the code used by the behavior, it involves less work than the blank page method, and it produces better results. To use this method, you first need to analyze the code Expression Web inserts into your page when you use the Check Browser behavior.
Browser
When you insert the Check Browser component, Expression Web inserts a JavaScript function called FP_checkBrowser that determines which browser is being used to view the page. It also inserts a call to the FP_checkBrowser function in the onload event of the tag. The call to the FP_checkBrowser function is the code that needs to be moved. When you insert the Check lowing function call:
Browser
behavior, the tag is rewritten to include the fol-
As mentioned earlier, because the call to the FP_checkBrowser function is in the onload event of the tag, the page will be displayed momentarily before being redirected. To correct that problem, you will need to move the function call so it appears immediately after the function itself. The following code is inserted at the beginning of the page when the ior is being used:
To alter the code so users are redirected immediately, before the page loads, remove the function call from the onload event of the tag and move it to the end of the <script> section of the page, as shown in the following code: //Check version loc=ver.search(‘\\+’);v=parseInt(ver);if(loc>0){v=parseInt(ver);if(maj>=v) vm=true;}else if(maj==v)vm=true;loc=ver.search(“any”);if(loc>=0)vm=true; if(vm&&tm){ if(url1!=’’)location=url1;}else if(url2!=’’)location=url2; } FP_checkBrowser(‘Microsoft Internet Explorer’, ‘4+’, [ic:ccc]/*href*/’’, /*href*/’static.htm’)”
6055_23.qxp
12/7/2006
12:22 PM
Page 413
Lagniappe: Detecting Browsers
// —>
Notice that the call to FP_checkBrowser script has been moved from the tag to the end of the <script> block. Because client-side script outside a function runs when it is encountered, this change will cause the FP_checkBrowser function to be called before the page loads. The result will be an instantaneous redirect instead of a redirect after the page loads completely. CAUTION One word of warning: If you use the preceding method and edit the code that Expression Web inserts, the Check Browser behavior will no longer be visible in the Behaviors task pane and you will not be able to remove the behavior using the Behaviors task pane. To remove the behavior, you will have to remove the code in Code View.
413
6055_23.qxp
12/7/2006
12:22 PM
Page 414
6055_24.qxp
12/7/2006
12:24 PM
Page 415
CHAPTER
Client-side Scripting
In this chapter A History of Browser Scripting JavaScript Basics The Document Object Model Writing Simple Scripts Troubleshooting Lagniappe: Debugging
24
6055_24.qxp
416
12/7/2006
12:24 PM
Page 416
Chapter 24 Client-Side Scripting
A History of Browser Scripting Early Web sites consisted of many of the same Web page elements we use today: forms, images, hyperlinks, and static text. They also consisted of small applications called applets that ran inside the Web page and were written in a new programming language called Java. In 1995, Netscape Communications added Java support to its flagship product, Netscape Navigator. However, Netscape was painfully aware that many Web site developers were not Java developers, so it needed to find a way to allow non-Java developers to interact with Java applets on Web pages. It did so with the introduction of LiveScript, a technology that was renamed JavaScript by the time it made it into Netscape Navigator 2.0.
24
Web developers were quick to embrace JavaScript, but it was not used the way Netscape intended. It was mainly used to provide programmatic access to page content such as forms, images, and text, not to script Java applets. In fact, the most common use for JavaScript at the time is still one of its most common uses today—image swapping. Mouse rollovers were starting to appear all over the Internet. At the same time, Microsoft released Internet Explorer 3.0, a major upgrade to its less-thanstellar Web browser. With the release of Internet Explorer 3.0, Microsoft unveiled its own flavor of JavaScript coined JScript. Microsoft also added its own scripting language (VBScript) and support for a new and emerging technology—Cascading Style Sheets, or CSS. The inclusion of CSS support did not buy Microsoft much, however. Microsoft’s JScript implementation did not include support for image swapping, and that made it useless in the eyes of Web developers. Developers started writing scripts that checked browser versions, and if they detected Internet Explorer, they simply did not attempt to present any of the new dynamic content scripting provided. N OTE
Around this same time period, Web developers began writing scripts to check for Netscape browsers by seeing if the browser identified itself as “Mozilla,” an identifier that Netscape Navigator used at the time. As browsers added functionality, they all began to identify themselves as “Mozilla Compatible” so that scripts would work successfully. Even today, you will see all browsers identified as Mozilla if you review server logs for your Web site.
Microsoft reacted with the release of Internet Explorer 3.02. Internet Explorer 3.02 added, among other things, support for image swapping. It also continued the divergence of scripting implementation among the major players in the Web browser world. Web developers were still not able to write a script that would easily run on any browser. Instead, they had to write a version of their scripts for each browser and use the appropriate one depending on which browser was being used to access their page. The Web developer community was aching for standards to be introduced to alleviate this problem. Sound familiar? Netscape and Sun Microsystems, assisted by the European Computer Manufacturers Association (ECMA), standardized browser scripting with the release of ECMAScript in
6055_24.qxp
12/7/2006
12:24 PM
Page 417
JavaScript Basics
417
1998. Ironically, Netscape was also in the process of releasing Netscape Navigator 4.0, a browser that would bring a completely proprietary document object model with it. Microsoft did the same with the release of Internet Explorer 4.0. These 4.0 series browsers introduced a robust new method of programming Web pages called Dynamic HTML (DHTML), a combination of HTML, CSS, and scripting. However, they also widened the gap in compatibility between the two browsers. ECMAScript was too late to stop the momentum.
➔
For more information on DHTML, see “The Document Object Model” section in this chapter, p. 420.
The majority of client-side scripting on the Internet today is used to script DHTML effects in Web pages. While Internet Explorer still supports VBScript as a scripting language, the vast majority of Web developers use JavaScript and not VBScript because it will work in all major browsers. For that reason, this chapter sticks to a discussion of JavaScript. Expression Web provides tools such as behaviors and interactive buttons that can generate JavaScript code for you. However, if you find that you want to add more robust scripts to your page or modify the scripts Expression Web generates—or if the scripts Expression Web generates don’t perform the task you need—knowing how to write JavaScript is a vital skill to have. The purpose of this chapter is not to teach you how to be a JavaScript programmer. Instead, it is intended to give you a taste of what client-side scripting can be used for and the basics of how it is used. If you are interested in learning how to take maximum advantage of this powerful technology, you should pick up a book specifically with that purpose in mind.
➔ ➔
For a comprehensive discussion on JavaScript and how to use it to make your Web pages more interactive, read Special Edition Using JavaScript from Que Publishing. O’Reilly and Associates, Inc. has a Web site with great information concerning the history and evolution of JavaScript. You can access it at www.oreillynet.com/pub/a/javascript/2001/04/06/js_history.html.
JavaScript Basics JavaScript can be difficult for new programmers to learn. There are several traits to the language that lend to this difficulty, but perhaps the most frustrating for beginners is that JavaScript is case-sensitive. Almost all JavaScript programmers have gone through the pains of pulling their hair out because of a lowercase letter where there should have been an uppercase one, or vice versa. Debugging problems because of wrong case can be tough. Fortunately, Expression Web provides IntelliSense for JavaScript, making it much easier to avoid many of the problems new programmers encounter.
➔ ➔
For more information on using IntelliSense, see “Using Web Page Views,” p. 127 (Chapter 8). For more information on debugging JavaScript code, see the “Lagniappe” section of this chapter.
Adding JavaScript to a Web Page JavaScript can be added to a Web page either right within the page’s HTML code or in an external script file with a .js file extension. To add JavaScript to a Web page, use the
24
6055_24.qxp
418
12/7/2006
12:24 PM
Page 418
Chapter 24 Client-Side Scripting
tag. JavaScript code can consist of standalone code sections that are executed as soon as the browser encounters them and JavaScript functions that are executed only when they are explicitly called.
<script>
A function is a section of code that performs an action. To run code in a function, you simply use the function’s name. The following code section defines a JavaScript function called writeDateTime in a Web page. The function is called when the page is loaded by specifying the function name in the onload event of the tag.
When this Web page is opened in a Web browser, the current date and time are displayed, as shown in Figure 24.1. This happens because the onload attribute of the tag calls the writeDateTime JavaScript function. We’ll discuss the details of the function later in this chapter.
Figure 24.1 The output of the writeDateTime()
JavaScript function.
Notice that the script is surrounded by HTML comment tags, . These are inserted so that browsers that cannot process JavaScript will ignore the script. Modern browsers have no problems processing JavaScript code, but some older browsers do not understand JavaScript. By enclosing the script in HTML comment tags, you ensure that your page will work correctly for everyone viewing it.
6055_24.qxp
12/7/2006
12:24 PM
Page 419
JavaScript Basics
419
Linking to an External Script File JavaScript can also be included in an external file and linked to a Web page with the <script> tag. The following code calls the same JavaScript function as the previous example, but it uses an external script file: <script language=”javascript” src=”jscript.js” type=”text/javascript”>
The jscript.js file contains the JavaScript function that is called in the onload attribute of the tag. The code inside jscript.js is as follows: function writeDateTime() { document.write(Date()); }
Note that the jscript.js file does not contain any HTML code, including the <script> tag. It only contains JavaScript code. There are benefits to including your scripts in separate files. The primary benefit is that it is very easy to reuse the scripts in many files without duplicating the code in each file. It is also extremely easy to change scripts if needed. If you include a script inside HTML files, a change in the script must be made in every HTML file that includes the script. If the script is inside a .js file, the script only needs to be changed once—in the .js file. All HTML files that link to that script will then run the updated script automatically. CAUTION Be aware that browsers will store script files in the browser’s cache. If a user’s browser does not check for an updated script file when your page is requested and uses the script file in cache instead, unpredictable behavior can occur. Unfortunately, there isn’t anything you can do to prevent this. The most you can do is include some text on your Web site (perhaps in an FAQ section) that explains how to clear the browser’s cache.
Adding Inline JavaScript As mentioned earlier, JavaScript can be entered as standalone code instead of being contained inside a function. When JavaScript is entered into a page as standalone code, the code is executed as soon as it is encountered. The following code produces the same output as the code you saw previously, but it does so with a standalone code segment instead of a JavaScript function:
24
6055_24.qxp
420
12/7/2006
12:24 PM
Page 420
Chapter 24 Client-Side Scripting
<script language=”javascript”>
24
Notice that in this example, there is no line declaring a JavaScript function. Instead, only the code that was previously inside the writeDateTime function is included. In the previous example, for the code to execute, you had to call the writeDateTime function from the onload attribute of the tag. In this example, no function call is required because the JavaScript code is not within a function. As you can see, placing JavaScript code inside a function allows you to control when that code is run. TIP Because JavaScript inside a function does not run until the function is called, the Web browser will not inform you of any errors in that code until you call the function. Therefore, when you are testing pages with JavaScript functions in them, make sure you call all your functions during testing.
The Document Object Model Most of the interactivity in Web pages today is accomplished using DHTML. When you write DHTML code, you use scripting (typically JavaScript) to control the CSS attributes of HTML elements on a page. For example, the flyout menus so commonly seen on the Internet these days (see Figure 24.2) are created by causing page elements to appear when a mouse is hovered over a menu item and disappear when the mouse pointer is moved off the menu item. These types of menus are often referred to as DHTML menus because they use DHTML for their functionality. Figure 24.2 Flyout menus, such as this one on the Jimco Software Web site, are created with DHTML code.
6055_24.qxp
12/7/2006
12:24 PM
Page 421
The Document Object Model
421
To script the elements on a Web page, the JavaScript code must have some way to programmatically access those elements. It does this using the Document Object Model, or DOM, for the browser. For the most part, the DOMs for the major browsers are very similar, but that doesn’t necessarily mean that code that works in one will work in another. Even so, with a bit of work, you can write JavaScript code that is compatible with all the major browsers available today. N OTE
The W3C has a standard for the DOM, but most Web browsers do not strictly conform to it. Instead, most browsers implement their own DOM that includes specific functionality only for that browser.
At the top of the DOM hierarchy is the window object. Underneath the window object, you will find an extensive list of objects—far too many to cover in a single chapter of this book. However, you will learn about some of the commonly used objects in the DOM.
The window Object The window object refers to the browser window itself. It is used to manipulate the browser window and its elements. For example, to change what is displayed in the status bar (the lower portion of the browser window), you would use the status property of the window object. The following code example changes the status bar message: <script language=”javascript” type=”text/javascript”>
When this page is opened in the Web browser, the status bar text will say “Welcome!”. Note that when the changeStatus function is called, the text “Welcome!” is passed to it in parentheses. When the function runs, the text passed to it is assigned to the msg variable, which is then displayed in the status bar. Using this method of passing a value to a function makes it convenient to reuse the function for other purposes. For example, to display a different message in the status bar of the browser at a different point in the page, you would simply call the changeStatus function again and pass the text you want to display to it. This function can be made even more
24
6055_24.qxp
422
12/7/2006
12:24 PM
Page 422
Chapter 24 Client-Side Scripting
robust by saving it as an external .js file and simply linking that file to each page that needs to use the changeStatus function.
The document Object One of the objects under the window object in the DOM hierarchy is the document object. The document object is one of the most frequently used objects by JavaScript programmers because it provides access to all the elements on a Web page. In Internet Explorer, the all collection of the document object contains a reference to every element on a Web page and is often used by Internet Explorer developers to reference a particular item. For example, consider this tag: Web page border goes here.
To get a reference to this tag, you would simply use the following line of code: document.all(“border”)
24
By appending the ID of the to the all collection, this line of code returns a reference to the with that ID. This works great in Internet Explorer, but it won’t work in other browsers because only Internet Explorer supports the all collection of the document object. Therefore, a better method to get a reference to the tag is to use the getElementById method of the document object. The following code will get a reference to the tag, and it will work in all modern browsers: document.getElementById(“border”)
This code will return a div element that references the tag called border. Once you have that reference, you can then programmatically interact with the tag, as you will see later. N OTE
Firefox actually supports document.all, but not in the way you might expect. If you use document.all in a script loaded into Firefox, you’ll see a friendly message notifying you that you’ve used a non-standard syntax and referring you to the document.getElementById method.
There are many other objects in a browser’s DOM. By reviewing developer information provided by the browser you are targeting, it should be easy for you to take advantage of what the DOM has to offer. The best way for you to start down that road is to write a little code, so let’s write a few sample scripts that implement some real-world scenarios.
6055_24.qxp
12/7/2006
12:24 PM
Page 423
Writing Simple Scripts
423
Writing Simple Scripts Now that you have a general idea of how to write JavaScript code, you are ready to look at a few examples of how you can use JavaScript in your Web pages. In this section, you will learn how to hide and show page elements using JavaScript, how to access elements on a page and read and change their attributes, and how to check information entered into a form before it’s submitted. These three tasks are the most common tasks taken on by JavaScript developers. N OTE
The finished pages and files for all these scripts are located in the folder on the CD accompanying this book.
Examples\Ch24\Files\Website
Showing and Hiding Page Elements One of the most common techniques in browser scripting is changing page content based on certain conditions, such as when the mouse pointer passes over a particular graphic. This type of effect is extremely easy to implement with Expression Web behaviors, but you might want to edit the code that Expression Web generates. You might also find that a behavior doesn’t do exactly what you need and decide to implement your own script. In these cases, understanding how this type of effect is achieved with JavaScript is invaluable. In this example, you will create a Web page with a list of links on the left side. When you pass over a link, text on the Web page will change to indicate the nature of the link you are pointing to. All this will be accomplished using DHTML, which is programmed using JavaScript.
1. Create a new Web site or open an existing Web site. 2. Create an empty Web page. 3. Insert a table with 1 row and 2 columns, no border, and a width of 100%. 4. Right-click on the left column and select Cell Properties. 5. Check the Specify Width checkbox. 6. Select the In Pixels option and enter 150 for the width. 7. Click OK. 8. Save your page. The left column will contain links to parts of the Web site. When you hover over each link, text describing that link will appear in the right column of the table. To implement this, you will need to insert a div to hold the text description for each link. When you hover over a link, you will display the div for that link and hide all the other divs. Enter the following text in the left column and press the Enter key after each item:
24
6055_24.qxp
424
12/7/2006
12:24 PM
Page 424
Chapter 24 Client-Side Scripting
■
“Home
Page”
■
“Our
■
“About
■
“Contact
Products” Us” Us”
In a real-world Web site, you would link each of these to their respective pages in the Web site; but for now, simply link each one to the page you are currently editing so you will have a hyperlink to work with. Now you will need to create some tags to hold the text for each link. To do this, you will use the layers feature in Expression Web.
1. If the Layers task pane is not visible, select Task Panes, Layers to display it. 2. Add a new layer to the page. 3. Size and position the layer so it appears in the right column of your table.
24
4. Right-click the layer and select Copy. 5. Right-click the layer again and select Paste. 6. Right-click the layer and select Paste three more times so there are four total layers— one right on top of the other.
7. Right-click the first layer in the Layers task pane and select Modify ID. 8. Change the first layer’s ID to “Home”. 9. Change the second layer’s ID to “Products”. 10. Change the third layer’s ID to “About”. 11. Change the fourth layer’s ID to “Contact”. 12. Right-click the Home layer and select Set Visibility: Hidden. 13. Repeat Step 12 for the remaining layers. 14. Save the page. Your page should now look like Figure 24.3. TIP Expression Web uses absolute positioning for layers. All the layers you inserted are stacked on top of one another. Therefore, any text added to a div will appear in the same place on the page because each div sits on its own layer at the same position on the page.
➔
For more information on using layers, see “Using Layers,” p. 439 (Chapter 25).
6055_24.qxp
12/7/2006
12:24 PM
Page 425
Writing Simple Scripts
425
Figure 24.3 The Web page is now ready for you to add some code.
24
When you make layers hidden using the task pane, Expression Web simply adds a CSS property to the tags to make them hidden. That property is the visibility property. For example, the following tag is hidden: I am hidden.
When the Web page containing this tag is loaded, the div will be invisible. TIP When a div is not absolutely positioned, hiding it using the visibility property will make it invisible, but the browser will still reserve space for the div. The result is an empty area where the div is on the page. To prevent this, use the display property for a div that is not absolutely positioned. When the display property is set to none, the div will not be displayed and the browser will close up the space where the div used to be.
For each layer, enter some text that describes the content for the link. To do this, first click the layer in the Layers task pane and then click inside the layer. Enter any text you choose for each layer. When someone visits your Web site, you want the text for the Home layer to be visible right away. If the site visitor then hovers over one of your other links, you want the layer for that link to be displayed. To do that, you will need to enter some code.
6055_24.qxp
426
12/7/2006
12:24 PM
Page 426
Chapter 24 Client-Side Scripting
Switch to Code View and add the following JavaScript code before the closing tag: <script language=”javascript” type=”text/javascript”>
➔ 24
For more information on entering code in Code View, see “Using Web Page Views,” p. 127 (Chapter 8).
Two JavaScript functions exist in this code. The first one, hideAllDivs, sets the visibility property of each div to hidden. Remember that when you set a layer to be invisible, Expression Web sets an inline style by adding a style attribute to the tag. The value of that style attribute is visibility: hidden. To programmatically set an inline style on an element, you use the style attribute of the element. In the hideAllDivs function, you are setting an inline style for each div, and that inline style sets the visibility property to hidden. The second function, changeVisibility, makes whatever layer name is passed to it visible by setting the visibility property to visible. For example, to make the Products layer visible, you would call the changeVisibility function using the following code: changeVisibility(‘Products’);
When the changeVisibility function is called with this line of code, the layer variable in the function is assigned the value Products, and the getElementById function then returns a reference to the Products layer on the page. The style attribute is then used to set the visibility property to visible. Now you need to add some code that will call these functions at the appropriate times to finish the page. First, you need to make sure the Home layer is visible when the page is first loaded. To do that, call the changeVisibility function for the Home layer when the page loads. Make sure you’re still in Code View and edit the tag of your page so it resembles the following:
The onload event of the tag is triggered automatically as soon as the page has finished loading. When an event is triggered, that event is said to have fired. By adding a call to the changeVisibility function in the onload event of the tag, you cause the Home layer to become visible when the onload event is fired.
6055_24.qxp
12/7/2006
12:24 PM
Page 427
Writing Simple Scripts
427
The final step is to edit the hyperlinks you created so they cause the correct layers to appear and disappear as the mouse moves over them. To add this functionality, you need two different events: the onmouseover event and the onmouseout event. The onmouseover event is fired when the mouse moves over the element, and the onmouseout event is fired when the mouse moves off the element. Locate the tag for the Products link and edit it so it resembles the following:
The onmouseover event first calls the hideAllDivs function. This causes any visible div to be hidden in preparation for displaying the Products layer. It then calls the changeVisibility function and passes Products to it. This causes the Products layer to become visible. Note that a semicolon appears between the two function calls. When the mouse is moved off the Products link, the onmouseout event is fired. This event again calls the hideAllDivs function, which hides the Products layer. It then calls the changeVisibility function to make the Home layer visible again because we’re on the home page. To finish the page, edit the About and Contact hyperlinks just as you did the Products hyperlink. Make sure you pass the correct layer name to the changeVisibility function in the onmouseover event. After you edit your hyperlinks, save the page and preview it in your browser to see your layers swapped out as you hover over the hyperlinks. If the divs don’t change when you mouse over them, see “Divs Don’t Change on Rollover” in the “Troubleshooting” section of this chapter.
Accessing and Changing Attributes JavaScript code is often used to access attributes of HTML tags. Using JavaScript, you can read the value of a particular attribute and also change the value of an attribute. Web pages that use image swapping use this technique to change the image file displayed when the mouse hovers over an image. In this section, you will write some JavaScript code to swap an image when your mouse hovers over it. The HTML tag has an attribute called src that specifies the image file to be displayed. By using JavaScript to change the src attribute of an image tag, you can easily create the effect of swapping one image with another. To do this, you will need to perform two primary tasks: preload the images and write the code to swap the images. Before you get started, you will need a couple of images to work with. You can use the and ewdlogo_over.jpg images in the Examples\Ch24\Files\Swap folder on the CD accompanying this book, or you can use your own images. Just make sure the images are the same size so the rollover effect will work correctly. Save whatever images you decide to use in the images folder of your Web site. ewdlogo.jpg
24
6055_24.qxp
428
12/7/2006
12:24 PM
Page 428
Chapter 24 Client-Side Scripting
Preloading Images Your first step is to add JavaScript code to preload the images that will be swapped. You want to preload the images because if you don’t, when your Web site visitors hover over your original image, they will have to wait for the browser to download the second image before the images are swapped. This delay may take several seconds on a slow Internet connection, and that delay will make your effect seem unprofessional. Preloading images with JavaScript is an easy task. Open a new page and enter the following JavaScript code before the closing tag:
This code defines two variables called grayImg and colorImg. It then sets these variables equal to a new Image object. An Image object is an object that represents an HTML tag. You then set the src attribute of the new Image object to the image file you want to display for that object. After this code runs, you will have two Image objects: one for the ewdlogo.jpg image (the initial image) and one for the ewdlogo_over.jpg image. Note that this code does not exist within a function call. That’s because you want this code to run when the page loads. You could place this code within a JavaScript function and call it in the onload event of the tag, but doing that would cause the script to run immediately after the page loads. If your Web site visitor were to mouse over the image as soon as the page finishes loading, you wouldn’t get the benefit of preloading the image. TIP You can also use the Preload Images behavior to preload images. However, because I feel that understanding what goes on when you use that behavior is important, I have included the code necessary to preload images. As a matter of fact, the Swap Image and Swap Image Restore behaviors can be used to implement the example demonstrated here. However, by learning how the code underlying those behaviors works, you’ll be able to build scripts yourself that don’t lock you into one particular implementation.
Writing a Function to Swap Images The next step is to write a function to swap the images. Because you might want to reuse this function in other Web pages, it makes sense to write it so it isn’t specific to the images you are using in this example. Instead, the function should be written as a generic function that can swap images based on the information passed to it.
6055_24.qxp
12/7/2006
12:24 PM
Page 429
Writing Simple Scripts
429
Edit your script to include the swapImage function as follows: <script language=”javascript” type=”text/javascript”>
The swapImage function takes two parameters: imgID and imgObj. The imgID variable will contain the id attribute of the image that’s being swapped. This allows you to refer to the correct page element. The imgObj variable is the object name for the image you want to display in place of the original image. When the function runs, the src attribute of the original image is changed to the src attribute for the swapped image. Since the images have been preloaded, the result of this function is that the image instantly changes.
Adding the Images Now the JavaScript code is in place. All that’s left is to insert the original image into a new Web page and then add some JavaScript function calls to the tag. Insert the ewdlogo.jpg image onto your page. Using the Quick Tag Editor, edit the tag so it appears as follows:
➔
For more information on the Quick Tag Editor, see “Using the Quick Tag Tools,” p. 227 (Chapter 13).
The tag now contains code for the onmouseover event that calls the swapImage function and passes ‘ewdlogo’ and colorImg to it. This tells the JavaScript function you are changing the image for the tag with an id attribute of ewdlogo. It also tells the JavaScript function that you want to change the src attribute of the tag so it’s equal to the src attribute of the colorImg object. The src attribute of the colorImg object is set when the images are preloaded, so when the mouse hovers over the grayscale picture of the Expression Web graphic, it changes automatically to a color picture right before your eyes. The onmouseout event calls the swapImage function again to change the images back. Using this exact same procedure, you are now equipped to write your own JavaScript rollover buttons. If there is a delay when the images swap, see “Images Don’t Swap Instantly” in the “Troubleshooting” section of this chapter.
24
6055_24.qxp
430
12/7/2006
12:24 PM
Page 430
Chapter 24 Client-Side Scripting
Form Field Validation JavaScript is also commonly used to validate form fields in Web pages. In this section, you will write JavaScript that will validate an HTML form and make sure that data was entered in each form field. It will also check to ensure that only numeric characters are entered in a particular field and that no more than three digits are entered in an age field.
Creating the Form to Validate First, you will need to create an HTML form to be validated by your script:
1. Create a new page in your Web site. 2. Insert an Input (Text) form control from the Form Controls section of the Toolbox. 3. Insert another Input (Text) control on the form under the first one.
24
4. Type “Enter
your name:”
5. Type “Enter
your age:”
above the first textbox.
above the second textbox.
6. Double-click the first textbox and change the name to “txtName”. 7. Double-click the second textbox and change the name to “txtAge”. 8. Insert an Input (Submit) control under the second Input (Text) control. 9. Save the page. Your page should now resemble Figure 24.4.
Figure 24.4 The finished HTML form that will be validated with JavaScript.
➔
For more information on working with forms, see “Using Form Controls,” p. 195 (Chapter 11).
Adding the JavaScript Validation Function N OTE
If you’d prefer to use a completed sample instead of entering the code yourself, you can copy the code from the Examples\Ch24\Files folder on the CD that accompanies this book.
6055_24.qxp
12/7/2006
12:24 PM
Page 431
Writing Simple Scripts
431
Now you will need to enter some JavaScript code to validate the form. Here’s the JavaScript function to validate both form fields: <script language=”javascript” type=”text/javascript”> function validateForm(theForm) { var txtName; var txtAge; var nums = ‘0123456789’; txtName = theForm.elements[0]; txtAge = theForm.elements[1]; if ((txtName.value == ‘’) || (txtAge.value == ‘’)) { alert(‘Please specify both your name and your age.’); return false; } for (var i = 0; i < txtAge.value.length; i++) { if (nums.indexOf(txtAge.value.charAt(i)) == -1) { alert(‘You can only specify numeric data for age.’); return false; } else if (txtAge.value.length > 3) { alert(‘You cannot possibly be that old.’); return false; } } return true; }
Go ahead and add this script to your page just before the closing tag. This script is the most complicated yet, but it’s not quite as complex as it appears at first glance. The first three links set up three variables: one for the txtName form field, one for the txtAge form field, and one for the numeric characters you will validate the txtAge field against. Next, the script sets the txtName and txtAge variables equal to their respective form fields. To get a reference to each form field, you use the variable called theForm. This variable will hold a reference to whatever has been passed into the validateForm function. As you will see later, a reference to the form itself is passed to this function. The elements collection contains one object for each form field in the form. The first form field is called elements[0], the second elements[1], and so on. The first element in your form is the txtName form field, so the txtName variable is assigned to theForm.elements[0]. The txtAge variable is then assigned to theForm.elements[1], the txtAge form field.
Validating the Form Fields When you have a reference to both the txtName and txtAge form fields, you must check to ensure that both contain data. Do this by checking to see if their value property is an empty string with the following line of code: if ((txtName.value == ‘’) || (txtAge.value == ‘’))
The value property returns the data entered into the form field. If the value property returns an empty string, you know the user hasn’t entered any data and you must display an
24
6055_24.qxp
432
12/7/2006
12:24 PM
Page 432
Chapter 24 Client-Side Scripting
appropriate message using the alert method. (Notice that to check whether one value is equal to another value in JavaScript, you use double equals signs. The double pipe symbol (||) is the logical OR operator in JavaScript.) Therefore, if either txtAge or txtName contain no data, validation will fail. The next validation to perform is checking whether the txtAge form field contains any nonnumeric values. To do this, you use a string variable (nums) that contains all the valid numerical values. You then check each character in the txtAge form field against that string variable. Here is the code segment that performs the check: for (var i = 0; i < txtAge.value.length; i++) { if (nums.indexOf(txtAge.value.charAt(i)) == -1) {
24
The first line sets up a for loop. A for loop runs through a particular code segment repeatedly as long as a particular condition is met. When you define a for loop, you specify three items that control how the loop is executed: a variable that indicates how many times the loop has run, a condition that must be met for the loop to continue running, and an incrementer for the loop counter that adds 1 to its present value each time the loop runs. In the loop example, the variable that will indicate how many times the loop has run is called and it is initialized to 0 at the beginning of the loop. The condition is then specified so that as long as i is less than the length of whatever is entered into the txtAge form field, the code segment will continue to be executed. Finally, i is incremented with the i++ statement, which adds 1 to its present value. i,
N OTE
The ++ symbol means to increment the value to the left by 1. This syntax is used in many languages other than JavaScript, including C and C++. In fact, C++ got its name from the fact that its developers believed it to be one better than C.
When this code runs, the loop executes once for every character in the txtAge form field. Each time it runs, it checks a single character in the txtAge form field (using the charAt function) to see if it contains any value other than one of the numbers in the nums variable. It does this using the indexOf function. The indexOf function returns the position of one string within another string. If the string is not found, a value of -1 is returned. Each character in the txtAge form field should be found somewhere within the nums string variable. If it is not, you know it is not a numeric value and you must display the appropriate message. The final check determines if the length of the text entered into the txtAge form field exceeds three digits. If it does, you must display a message letting the user know he/she has lied about his/her age. If any of the previous validations fail, you must return a value of false from the validateForm function because validation has failed. After a value is returned from a function, processing of that function stops. Therefore, the last line in the function must return a value of true because you know if you’ve gotten that far, validation has succeeded.
6055_24.qxp
12/7/2006
12:24 PM
Page 433
Troubleshooting
Adding the Call to the JavaScript Function You need to add one final bit of code to make this all work. You need to add a call to the validateForm function. You do that in the onsubmit event of the form. Using the Quick Tag Editor, edit the tag as follows:
The onsubmit event fires when the form is submitted. In this event, you call the validateForm function and pass a reference to the form using the this keyword. The this keyword will always contain a reference to the particular element containing it. It is a convenient way to pass a reference to an element of a function. Because you used return when calling the function, the return statement inside the validateForm function will return either true or false. If the value is false, the form will not be submitted. If the value is true, the form will submit as usual. Save the page now and preview it in your browser. Submit the form without entering any data and examine the result. Next, enter your name in both fields and note that you are told that the txtAge form field can only contain numeric data. Finally, enter an age of 1000 and try to submit the form. This is a simple validation script. In a real-world environment, you would want your validation script to be much more robust than this. However, this script gives you a solid foundation on the methods used when validating forms.
Troubleshooting Divs
Don’t Change on Rollover
When I roll the mouse over my links, the text doesn’t change. The most common cause of this is a typographical error in your code. Look in the status bar of the browser and make sure that an error doesn’t appear in your script. If it does, carefully review the code you entered to make sure you haven’t made a mistake. This can also be caused by having scripting turned off in your browser. To check this in Internet Explorer, select Tools, Internet Options and click the Security tab. Select the appropriate zone (select Internet if using a URL with dots in it and Intranet if using a URL without dots) and click the Custom button. Make sure that the Enabled option is selected for Active Scripting. At the time of this writing, other browser companies are preparing to release major updates, so check for scripting in other browsers. Consult the documentation provided with the browser.
Images Don’t Swap Instantly I’ve entered all the code, including the preloading code, but my rollover image doesn’t swap instantly. Instead, there is a delay while the second image loads. Internet Explorer can be configured so it checks the Web server each time a file is requested to see if a newer version is on the server. This check can cause a delay in the display of rollover images. To correct this, select Tools, Internet Options. Make sure the General tab is selected and click the Settings button. In the Check for Newer Versions of Stored Pages section, choose the Automatically option and click OK.
433
6055_24.qxp
434
12/7/2006
12:24 PM
Page 434
Chapter 24 Client-Side Scripting
Lagniappe (lan yap’) n.,
a gift or bonus
Debugging So far, the assumption has been that all the JavaScript you’ve entered will run without problems. As long as you’ve entered it correctly, it will, but that’s because I’ve already debugged it for you! In the real world, code almost never runs successfully on the first try. Sometimes you get lucky and your code runs without debugging, but almost all code requires some level of debugging to get the desired results. There are two types of problems you can encounter with code: syntax errors and logic errors. Syntax errors are often the easiest errors to resolve. For example, the following line of code will generate an error: document.Write(‘Welcome!’);
Remember, JavaScript is case-sensitive. The write method does not start with an uppercase ”W”, so when this line executes, it will generate an error. Logic errors are much harder to track down. A logic error occurs when code is written so that it runs without syntax errors, but the code produces undesired results. Logic errors are hard to track down because when an error occurs, it will often point to a part of code that is nowhere near where the actual error is located. Suppose, for example, you have a function that returns a specific numeric value and that function contains a logic error. You have code in a completely different area that relies on the number returned from the function. When the code runs and an error occurs, the error message might point to the section of code using the number returned from the function, not the function itself. There are many approaches to debugging JavaScript code. Some people use the JavaScript method to display messages at certain places in the code. For example, if a function returns a specific numeric value, you can place an alert method at the end of the function call and display the value the function returns, as shown in the following example:
alert
function debugTest() { var i; i = document.getElementById(‘txtYears’).value; alert(i); return i; }
When this function runs, an alert dialog box will display, indicating the value of i. This method of debugging can help in some situations, but it is far more useful to use a debugger so you can execute code in a controlled way and examine values as you progress through it. Expression Web offers just such a debugger in the Microsoft Script Editor. To use the Microsoft Script Editor, open a Web page that contains client-side script in Expression Web and then select Tools, Macro, Microsoft Script Editor. To debug code, you will need to install Web debugging. To install it, select Debug, Install Web Debugging from within the Microsoft Script Editor.
6055_24.qxp
12/7/2006
12:24 PM
Page 435
Lagniappe: Debugging
Web debugging may not have been added to your Expression Web installation, and if that’s the case, you’ll be presented with an error message that the feature is not available. If you get this error message, you can install Web debugging by running Expression Web setup and installing Web debugging, as shown in Figure 24.5. Figure 24.5 Web debugging may not be installed on your machine. If it’s not, you can locate it in Expression Web setup, under the Office Tools section.
Once Web debugging has been installed, you are ready to start debugging.
1. Switch to Expression Web and open the Web page that includes the form validation script you created in this chapter. If you are using the files from the CD, the filename is form_validation.htm.
2. Select Tools, Macro, Microsoft Script Editor to open the page in the Script Editor. 3. Set a breakpoint at the beginning of the validateForm function by right-clicking on the line and selecting Insert Breakpoint. A breakpoint is a place in code where the debugger will automatically stop, allowing you to control when subsequent code is executed.
4. Select Debug, Start to launch your Web browser and load the page. 5. Click the form’s Submit button to run the validateForm function. When you submit the form, the debugger will break on the validateForm function, as shown in Figure 24.6. Note that the debugger does not stop at the very first line. Certain lines are not valid breakpoints because they do not execute any code. If you set a breakpoint on an invalid line, the Script Editor will break on the first valid line after your breakpoint.
435
6055_24.qxp
436
12/7/2006
12:24 PM
Page 436
Chapter 24 Client-Side Scripting
Figure 24.6 The debugger has stopped and is waiting for you to execute the next line of code.
The arrow indicates the line currently being executed.
TIP If the Script Debugger doesn’t break on the breakpoint you set, open Internet Explorer and select Tools, Internet Options. Click the Advanced tab and make sure the Disable Script Debugging checkbox is unchecked.
The three primary methods of continuing execution of your code are as follows: ■
Step Into—By pressing F11, you can step into the next line of code. Each press of F11 causes the debugger to go to the next line.
■
Step Over—By pressing F10, the debugger steps over code. Step Over works in much the same way as Step Into, but if the current line of code is a function call, Step Over will cause the debugger to execute the entire function in one step, whereas Step Into will cause the debugger to stop on each line of the function.
■
Step Out—By pressing Shift+F11, the debugger will step out of the current function and stop again at the line where the function returns.
While the debugger is sitting on a breakpoint, it is very easy to examine the current state of your script. The Locals window (shown in Figure 24.7) is the most convenient way to analyze the variables in your script. To access the Locals window, select Debug, Windows, Locals.
6055_24.qxp
12/7/2006
12:24 PM
Page 437
Lagniappe: Debugging
Figure 24.7 The Locals window provides details on all variables in one place.
In Figure 24.7, you can easily see the variables declared in the validateForm function. Note that theForm, txtName, and txtAge all have a plus sign next to them. By clicking the plus sign, you can analyze all the properties of each variable. For example, by clicking the plus sign next to txtName, you can look up the value property to see what text was entered into that textbox. The Help file for the Script Editor contains details on all the tools available to make debugging your scripts easy. By utilizing the powerful debugging tools the Script Debugger offers, you can spend more time writing new scripts and less time fixing problems in existing scripts.
437
6055_24.qxp
12/7/2006
12:24 PM
Page 438
6055_25.qxp
12/7/2006
12:25 PM
Page 439
CHAPTER
Using Layers
In this chapter Introduction to Layers Inserting and Configuring Layers Positioning Layers Setting Layer Properties with Behaviors Troubleshooting Lagniappe: Z-Order Anomalies
25
6055_25.qxp
440
12/7/2006
12:25 PM
Page 440
Chapter 25 Using Layers
Introduction to Layers In the early days of Web sites, Web developers were content with having a Web page with columns of text for their hyperlinks. Web pages were boring and drab, but they served their purpose. As the Internet became more popular, Web sites became more interactive and dynamic. Instead of plain text and graphics, it is much more common now to see dynamic, graphically-oriented Web pages with content that changes in real time as you interact with the page. A Web developer can use many techniques to create a Web page in which certain areas of the page change as the user interacts with the page. Many Web developers use tags to implement this kind of functionality because by using the style attribute of the tag, you can easily control the tag’s position, size, and many other attributes. Expression Web uses tags to implement layers. A layer is a tag that is absolutely positioned so you have fine control over its location on the page. When an item on a Web page is absolutely positioned, it means that the tag used to render that item contains attributes that specify exactly where that item is to appear on the Web page. The position is specified using three attributes: ■ left—The ■ top—The
25
distance between the left side of the Web page and the left side of the item.
distance between the top of the Web page and the top of the item.
■ z-index—The
position of the item in relation to other absolutely positioned items if you were to stack the items one on top of the other. A higher z-index indicates that an item is higher in the stack.
The z-index is what defines a tag as an actual layer. Because the z-index allows you to stack tags in layers on a page, absolutely positioned tags are known as layers. CAUTION If you change the properties of a layer and turn off absolute positioning for the layer, or if you edit a page in Code View and remove the style attribute, the is no longer considered a layer and Expression Web will no longer provide you with the tools to edit it as a layer.
You encounter layers almost every time you go to a Web site. For example, when you see a menu system that pops up a submenu for items you point to, chances are that functionality is implemented with layers. Expression Web uses the Layers task pane to provide an intuitive interface with which to add and configure layers on your Web page. Even with layers, you will not be required to manipulate code directly. N OTE
Layers can be used for much more than just menu systems. You can use layers to control any element on your page, including graphics, blocks of text, and even other layers.
6055_25.qxp
12/7/2006
12:25 PM
Page 441
Inserting and Configuring Layers
441
Over the course of this chapter, you will create a Web page with a dynamic menu system and other dynamic content using layers, behaviors, and Interactive Buttons. Better yet, you will create it all without looking at a single line of code! N OTE
➔ ➔
If you’d prefer to use a completed copy of the Web page described in this chapter, see the file layers.htm in the Examples\Ch25\Files folder on the CD-ROM that accompanies this book for the completed example.
For more information on using behaviors in Expression Web, see “Using Behaviors,” p. 393 (Chapter 23). For more information on using Interactive Buttons, see “Using Interactive Buttons,” p. 381 (Chapter 22).
Inserting and Configuring Layers Layers are inserted and formatted using the Layers task pane. There are other ways to insert a layer, but the Layers task pane is the most efficient because it is also used to format and arrange layers. If the Layers task pane is not visible, simply select Task Panes, Layers to display the Layers task pane, as seen in Figure 25.1. From the Layers task pane, you can click the Insert Layer button or the Draw Layer button to insert a new layer into the page. TIP By default, the Layers tab will appear inside of the same task pane as the Apply Styles, Manage Styles, and Behavior task panes.
Figure 25.1 The Layers task pane is used to insert and configure layers.
25
6055_25.qxp
442
12/7/2006
12:25 PM
Page 442
Chapter 25 Using Layers
In addition to the Insert Layer and Draw Layer buttons, the Layers task pane consists of three columns. The leftmost column, the Layer Visibility column, allows you to control whether a particular layer is visible and to see at a glance which layers are visible and which ones are not. The second column, the Layer Z-Index column, provides a quick reference to the z-index of each layer. The rightmost column, the Layer ID column, displays the ID for each layer. TIP Choose the ID for each layer carefully and try to choose an ID that describes the layer’s purpose. You will use the ID of the layer to refer to the layer in behavior-related dialogs and if you are writing client-side code. By naming your layers with descriptive names such as mainContent and navButtons, you will be less likely to confuse them later.
Adding Content to a Layer Let’s begin creating the Web page you’ll use throughout this chapter to learn about layers in Expression Web:
1. Create a new blank page. 2. If the Layers task pane is not visible, select Task Pane, Layers to display it. 25
3. Click the Draw Layer button and draw a layer the same width as your page and half the height of your page by clicking in the upper left corner of the page and dragging the mouse to draw the layer.
4. Click inside the layer to place the insertion point in it. 5. Select Insert, Interactive Button to insert an Interactive Button. 6. Choose the Border Bottom 1 button. 7. Enter “Home” for the text of the button and click OK. 8. Continue this process by repeating Steps 6 and 7 to create buttons for “Products”, “Support”, and “Contact finished.
Us”.
Your page should look like Figure 25.2 when you are
9. Double-click the layer to display the Layers task pane if it’s not already displayed. 10. Right-click layer1 and select Modify ID to rename the layer. 11. Change the layer name to “mainMenu”. 12. Right-click on the mainMenu layer and select Modify Z-Index. 13. Change the z-index for the mainMenu layer to 3.
6055_25.qxp
12/7/2006
12:25 PM
Page 443
Inserting and Configuring Layers
443
Figure 25.2 The page with one layer and four Interactive Buttons to use for navigation.
25
Resizing a Layer The layer you have just inserted needs to be resized so it is the same size as the four Interactive Buttons inside it. Change the width and height of the layer to match the width and height of the Interactive Buttons. To do that, follow these steps:
1. Move the mouse over the border of the layer until the mouse pointer changes to a fourway arrow.
2. Click on the border to activate the sizing handles. The sizing handles appear as small white circles at each corner and in the middle of each side of the layer.
3. Move the mouse pointer over a sizing handle until the mouse pointer changes to a twoway arrow.
4. Click and hold the left mouse button while you drag the sizing handle to change the width or height of the layer. Resize the mainMenu layer until it matches the width and height of the Interactive Buttons you added previously. You should now have a new layer containing four Interactive Buttons, as shown in Figure 25.3. The buttons represent the top-level menu. You will next create submenus that will display when a user hovers over the Products or Support menu buttons.
6055_25.qxp
444
12/7/2006
12:25 PM
Page 444
Chapter 25 Using Layers
Figure 25.3 These Interactive Buttons will be the top-level menu for your dynamic menu built using layers.
25
Creating and Working with Child Layers Next, you need to create a layer to hold each submenu. You will then control the visibility of the layer based on the position of the mouse. To do that, you’ll use the Behaviors and Layers task panes. One of the great things about layers is that because they are absolutely positioned, you can design them anywhere on the page and then simply drag and drop them where you want them to appear when your page is complete. In the case of your menu, you will be creating three separate layers. As you’ll soon see, being able to design these layers and then place them in their final positions makes the development of menus very simple. The mainMenu layer is the parent layer for all the other layers in the menu system. By making the mainMenu layer the parent, all the layers that make up your menu will be attached to the mainMenu layer. If you move the mainMenu layer, it will move the entire menu system and keep all your layers in place. You now need to create the first child layer for the mainMenu layer. To do that, follow these steps:
1. Select Task Pane, Layers to display the Layers task pane if it’s not already visible. 2. Select the mainMenu layer so the new layer will be inserted as a child layer.
6055_25.qxp
12/7/2006
12:25 PM
Page 445
Inserting and Configuring Layers
445
3. Click the Insert Layer button to insert a new layer. 4. Because the new layer is inserted directly on top of the existing layer, select the layer and drag it below the mainMenu layer, as shown in Figure 25.4. Figure 25.4 The new layer is positioned right under the mainMenu layer.
25
5. Insert an Interactive Button into the layer by selecting Insert, Interactive Button. 6. Choose the Border Left 1 button. 7. Enter “Software” for the text of the button and click OK. 8. Press Shift+Enter to insert a line break. 9. Insert another Border Left 1 Interactive Button immediately below the first button. 10. Enter “Hardware” for the text of the button and click OK. The mainMenu layer now has a child layer called layer1, and that layer contains two Interactive Buttons. Resize the layer so that its height and width match the height and width of the Interactive Buttons. You should now rename the layer and give it a more descriptive ID. Right-click the layer1 layer in the Layers task pane and select Modify ID. Type “ProdSubmenu” for the layer ID. Your page should now resemble the page in Figure 25.5. Note that the ProdSubmenu layer
6055_25.qxp
446
12/7/2006
12:25 PM
Page 446
Chapter 25 Using Layers
appears slightly indented below the mainMenu layer in the Layers task pane, and there is a minus sign next to the mainMenu layer. This indicates that the ProdSubmenu layer is a child layer. Figure 25.5 The ProdSubmenu layer is a child layer of the mainMenu layer.
25
The layer is still not in its final position. When you’ve finished this page, the ProdSubmenu layer will appear just below the Products menu button. It’s easiest to design your layers first and then move them into their correct positions later. Because the ProdSubmenu layer is a child layer to the mainMenu layer, it will always move with the mainMenu layer. Therefore, when you place it in its final position, you’ll never have to worry about it losing its position relative to the mainMenu layer. N OTE
When you insert a child layer, Expression Web simply inserts the tag for the layer nested within the parent tag.
The final popup menu you need to create is the Support menu. Copy the ProdSubmenu layer and paste it as a new layer. Rename the new layer “SupportSubmenu”. This layer also needs to be a child of the mainMenu layer. To make it a child layer, click the SupportSubmenu layer in the Layers task pane and drag and drop it on top of the mainMenu layer in the Layers task pane. The layer is now a child layer at the same level as the ProdSubmenu layer.
6055_25.qxp
12/7/2006
12:25 PM
Page 447
Positioning Layers
447
Now, change the Interactive Buttons in the new SupportSubmenu layer. Double-click the first button and change its text to “FAQ”. Double-click the second button and change its text to “Ask Us”. You now have all the layers complete for your interactive menu and your page should look like Figure 25.6. Figure 25.6 The layers have all been inserted for your dynamic menu.
25
N OTE
When using an Interactive Button in a real application, you must also configure the button to link to another page via a hyperlink. In the example you’re building in this chapter, you don’t configure a hyperlink because you’re only designing one page to illustrate the use of layers.
Positioning Layers As mentioned previously, none of the layers on your page are in their final positions. However, because layers are often stacked on top of each other, they are difficult to edit when they are placed in their final positions prior to finishing their content. That’s why you added all the items to your layers while they were all separated. Now it’s time to move the layers into their final positions.
6055_25.qxp
448
12/7/2006
12:25 PM
Page 448
Chapter 25 Using Layers
The dynamic menu you are building will display a submenu of products when you hover over the Products button and a submenu of support options when you hover over the Support button. You’ll want to position the ProdSubmenu layer so it appears underneath the Products button and slightly overlaps the bottom of the button. You will also want to position the SupportSubmenu layer so it appears underneath the Support button. Drag the ProdSubmenu layer so it appears underneath the Products button and the SupportSubmenu layer so it appears underneath the Support button, as shown in Figure 25.7. Make sure the ProdSubmenu and SupportSubmenu layers do not overlap. After you have positioned the ProdSubmenu and SupportSubmenu layers, select the mainMenu layer and drag it to the position where you want your menu to appear on the page. Notice that as you drag the mainMenu layer, the positions of the ProdSubmenu and SupportSubmenu layers do not change in their relation to the mainMenu layer. That’s the benefit of making those layers children of the mainMenu layer. Figure 25.7 The completed user interface for your dynamic menu.
25
TIP If you have multiple layers on top of one another, it can be difficult to select the layers in Design View. By clicking a layer in the Layers task pane, you can easily control the layers you are working on.
6055_25.qxp
12/7/2006
12:25 PM
Page 449
Setting Layer Properties with Behaviors
449
Setting Layer Properties with Behaviors Now you’re ready to add interactivity to your menu. When the page first loads, the only layer that you want to be visible is the mainMenu layer. When a user hovers over the Products button, the ProdSubmenu layer should display. When a user hovers over the Support button, the SupportSubmenu layer should appear. In addition to configuring these layers to appear at the correct time, you also need to configure when each layer should disappear. You wouldn’t want your menus to appear and stay visible forever. When a user moves the mouse out of a menu, you want the menu to disappear. The perfect way to implement this interactivity is to use Behaviors. By using the Change Property and Change Property Restore behaviors, you can easily configure your layers to appear and disappear when you need them to.
➔
For more information on using behaviors, see “Using Behaviors,” p. 393 (Chapter 23).
Setting the Visibility of Layers When your page loads, the only layer you want the user to see is the mainMenu layer. All the other layers should be invisible. The Layers task pane provides an easy method of controlling the visibility of layers using the Layer Visibility column. The Layer Visibility column is empty by default, but by clicking next to a specific layer, an eyeball icon will appear, as shown in Figure 25.8. The open eye icon means that the layer is visible. There are three visibility states for each layer in the Layers task pane: ■
Default—Indicated by the absence of an eye icon.
■
Visible—Indicated by an open eye icon.
■
Invisible—Indicated by a closed eye icon.
Figure 25.8 The Layer Visibility column provides full control over layer visibility.
25
6055_25.qxp
450
12/7/2006
12:25 PM
Page 450
Chapter 25 Using Layers
Click the eye icon on the ProdSubmenu layer so it appears closed. The Products submenu will now appear hidden when the page is first browsed. Click the Layer Visibility column next to the SupportSubmenu layer twice so it is invisible as well. Now save your page and browse it. You will see that the only layer visible is the mainMenu layer, as seen in Figure 25.9. Figure 25.9 The main menu appears, but all other layers are hidden.
25
TIP Even when a layer is set to be hidden, it is visible in Design view in Expression Web if it is selected in the Layers task pane.
Adding Layer Interactivity Now you need to add some interactivity. Remember that the ProdSubmenu layer needs to be made visible when a user hovers over the Products button. To add that interactivity, use the Change Property behavior to change the Visibility property for the ProdSubmenu layer.
➔
For more information on the Change Property behavior, see “Expression Web Behaviors,” p. 396 (Chapter 23).
Configuring the Products Submenu Select Task Panes, Behaviors to display the Behaviors task pane if it’s not already visible. To add interactivity for the Products submenu, follow these steps:
1. Select the Products button. 2. In the Behaviors task pane, click the Insert button.
6055_25.qxp
12/7/2006
12:25 PM
Page 451
Setting Layer Properties with Behaviors
N OTE
451
Behaviors will already be listed for each Interactive Button. These are the behaviors that Expression Web added automatically to make your Interactive Buttons work.
3. Select Change Property from the Behaviors menu. 4. Select the Select Element radio button. 5. Select div from the Element Type dropdown. 6. Select ProdSubmenu from the Element ID dropdown. 7. Click the Visibility button. 8. Select the Visible radio button and click OK. 9. Make sure the Restore on Mouseout Event checkbox is unchecked. 10. Click OK to add the behavior. 11. Locate the behavior in the Behaviors task pane and change the Events from onclick to onmouseover. The behavior will change position in the Behaviors task pane when the event is changed.
Now if you browse the page, the ProdSubmenu layer will appear when you hover over the Products menu. However, there is a problem. The Products submenu will never disappear unless you reload the page. You want the Products submenu to disappear when the user moves the mouse off the menu. If the submenu does not appear when you hover over the Products button, see “Behaviors Don’t Work” in the “Troubleshooting” section of this chapter.
Switch to the Layers task pane and select the ProdSubmenu layer to make it visible so you can apply behaviors to it. Without deselecting the ProdSubmenu layer, switch to the Behaviors task pane. To configure the ProdSubmenu layer so it disappears at the correct time, follow these steps:
1. Select Insert, Change Property to display the Change Property dialog. 2. Leave the Current Element option selected. 3. Click the Visibility button and select the Hidden option. 4. Click OK. 5. Make sure the Restore on Mouseout Event box is unchecked. 6. Click OK. 7. In the Behaviors task pane, change the Events column from onclick to onmouseout. Now the Products button is configured to show the submenu when you hover over it, and the ProductSubmenu layer is configured to hide itself when you move the mouse outside the menu. Save and test your page to see how it’s working so far. Hover over the Products button and you should see the ProductSubmenu layer appear. Move the mouse over the
25
6055_25.qxp
452
12/7/2006
12:25 PM
Page 452
Chapter 25 Using Layers
ProductSubmenu layer and you should notice a problem. When you hover over the buttons on the ProductSubmenu layer, the entire menu disappears! This is obviously not what you want to happen. To correct this, you need to add a behavior to each button on the ProductSubmenu layer. Switch back to Expression Web, activate the Layers task pane, and click the closed eye for the ProdSubmenu layer to make it visible again. Switch to the Behaviors task pane and configure the behaviors for each button as follows:
1. Select the Software Interactive Button. 2. In the Behaviors task pane, select Insert, Change Property. N OTE
Several behaviors will already be listed for the Software button. These are the behaviors that Expression Web added automatically to implement the functionality of your Interactive Button.
3. Select the Select Element option. 4. Select div from the Element Type dropdown. 25
5. Select ProdSubmenu from the Element ID dropdown. 6. Click the Visibility button. 7. Select the Visible option and click OK. 8. Make sure the Restore on Mouseout Event checkbox is unchecked. 9. Click OK. 10. Change the onclick event to onmouseover. Perform the same steps for the Hardware Interactive Button. After configuring the Hardware button, switch to the Layers task pane and make the ProdSubmenu layer invisible again. Then, save and preview your page in the browser. Hover over the Products button to display the Products submenu, then hover over the Software and Hardware buttons. Move the mouse below the Products submenu to ensure that the menu disappears as expected. One problem still remains. If you hover over the Products button and then move the mouse off the Products button to any other button or off the menu itself without hovering over the submenu, the ProdSubmenu layer remains visible. You actually want the ProdSubmenu layer to disappear when a user hovers over one of the other mainMenu layer buttons or when the user moves the mouse off the menu altogether. To correct that, follow these steps:
1. Switch back to Expression Web. 2. Select the Home button. 3. Switch to the Behaviors task pane. 4. Select Insert, Change Property.
6055_25.qxp
12/7/2006
12:25 PM
Page 453
Setting Layer Properties with Behaviors
453
5. Select the Select Element option. 6. Select div from the Element Type dropdown. 7. Select ProdSubmenu from the Element ID dropdown. 8. Click the Visibility button. 9. Select the Hidden option and click OK. 10. Make sure that the Restore on Mouseout Event checkbox is unchecked. 11. Click OK. 12. Change the onclick event to onmouseover. Make the same behavior configuration change for the Support button. After you’ve done that, create a new behavior for the mainMenu layer to hide the ProdSubmenu layer as follows:
1. Select the mainMenu layer. 2. From the Behaviors task pane, select Insert, Change Property. 3. Select the Select Element option. 4. Select div from the Element Type dropdown. 5. Select ProdSubMenu from the Element ID dropdown. 6. Click the Visibility button. 7. Select the Hidden option and click OK. 8. Make sure that the Restore on Mouseout Event checkbox is unchecked. 9. Click OK. 10. Change the event from onclick to onmouseout. Save your page and browse it to preview the menu. The Products submenu should now work perfectly—it should display and hide itself in response to the correct events.
Configuring the Support Submenu The next step is to configure the Support submenu. The steps are the same as those you completed for the Products submenu:
1. Make the SupportSubmenu layer visible. 2. Create a behavior for the Support button to display the SupportSubmenu layer in the onmouseover
event.
3. Create a behavior for the FAQ and Ask Us buttons to display the SupportSubmenu layer in the onmouseover event.
4. Create a behavior for the SupportSubmenu layer that hides the SupportSubmenu layer in the onmouseout event.
5. Create a behavior for the Products and Contact Us buttons that hides the SupportSubmenu layer in the onmouseover event.
25
6055_25.qxp
454
12/7/2006
12:25 PM
Page 454
Chapter 25 Using Layers
6. Create a behavior for the mainMenu layer that hides the SupportSubmenu layer in the onmouseout
event.
7. Hide the SupportSubmenu layer. Save the page again and preview it. Your dynamic menu should be fully functional at this point.
Troubleshooting Behaviors Don’t Work I configured the behaviors for my menu, but they don’t do anything. When you insert a behavior, the event defaults to onclick. If you are expecting the behavior to work when you hover the mouse on a page element, but you forgot to change the onclick event to onmouseover, the behavior will not work. Make sure that you always change the event if necessary.
Lagniappe (lan yap’) n.,
a gift or bonus
Z-Order Anomalies As mentioned in this chapter, the z-order of a layer affects whether or not a layer appears on top of other layers. However, as in many other areas of Web design, z-order doesn’t always work the way you may expect. To fully understand how z-order works in Internet Explorer, you must first understand that there are two types of elements that can be placed on a Web page: windowed elements and windowless elements. Each of these element types uses an entirely separate z-order hierarchy. Additionally, windowed elements will always appear on top of windowless elements. What that means is that a windowless element with a z-order value of 4 will appear on top of a windowless element with a z-order value of 3, but all windowed elements will appear on top of both windowless elements regardless of z-order. Why is this important? It’s important because some common elements such as dropdown boxes are windowed elements. Therefore, if you have a dropdown box on your Web page and you are expecting a layer that displays part of a menu system to appear on top of the dropdown, you’ll be out of luck. The dropdown will always appear on top of the menu layer. To work around this behavior, make sure any windowed elements do not appear close enough to windowless elements so that they overlap. If you absolutely must place two in close proximity, you can create a behavior that hides the windowed element when the windowless element appears.
6055_26.qxp
12/7/2006
12:26 PM
Page 455
CHAPTER
Creating VBA Macros
In this chapter Introduction to Programming with Visual Basic for Applications Accessing Web Sites with VBA Writing a Macro Troubleshooting Lagniappe: Protecting Macro Code
26
6055_26.qxp
456
12/7/2006
12:26 PM
Page 456
Chapter 26 Creating VBA Macros
Introduction to Programming with Visual Basic for Applications As feature-rich as Expression Web is, there will always be missing features and capabilities that you will find yourself wishing were included. If you have a basic knowledge of Visual Basic for Applications (VBA) and a little initiative, you can easily add functionality and features to Expression Web. Indeed, I consider this feature to be one of the most powerful in Expression Web. VBA has been a part of Microsoft applications for many years. Many of those applications (such as Microsoft Word and Microsoft Excel) include a macro recorder that allows you to record a series of operations as a macro that you can then reuse as you see fit. Unfortunately, Expression Web does not provide a macro recorder, so if you want to use a macro in Expression Web, you must write it yourself. It makes many users uncomfortable to delve into this area, but writing macros is much easier than most people think. Once you start writing code, you’ll find that there’s almost no limit to what you can accomplish. The purpose of this chapter is not to teach you the syntax of VBA code or to present all the facets of programming macros in Expression Web. Instead, the intent is to give you enough information to get your feet wet. It’s important to realize that the best method for learning how to write any kind of code is to jump right in and start coding. Hopefully, this chapter will provide you with the foundation to do just that. Macros are developed with the Visual Basic Editor. To start the Visual Basic Editor, select Tools, Macro, Visual Basic Editor, or use the keyboard shortcut Alt+F11. N OTE
26
Even though Microsoft calls the macro editor the Visual Basic Editor, it is not the same as Microsoft Visual Basic. When you are writing macro code in Expression Web, you are writing VBA code. VBA is a subset of Visual Basic and does not have all the same capabilities. One of the limitations of VBA is that the code must run within a host application. You cannot write a standalone application with VBA as you can with Visual Basic.
When you first launch the Visual Basic Editor, you will see two windows on the left side of the screen, as shown in Figure 26.1—the Project Explorer and the Properties window. The Project Explorer displays a tree view of all files that are part of your macro project. The Properties window provides access to the properties of items within your project. Let’s briefly discuss the files that make up a macro project.
6055_26.qxp
12/7/2006
12:26 PM
Page 457
Introduction to Programming with Visual Basic for Applications
457
Figure 26.1 The Visual Basic Editor provides all the tools necessary to write macros for Expression Web.
Understanding Modules, Class Modules, and UserForms Three types of files comprise a macro project: modules, class modules, and UserForms. Modules and class modules contain only code, whereas UserForms contain both code and user interface elements. A macro project must have at least one module. It can also contain one or more class modules and UserForms, but it is not required to have either.
Module A module is a file that contains VBA code. It is common practice for VBA programmers to create many modules when programming complex macros. For example, you might have one module that contains code to perform certain editing functions in your Web pages and another module that performs specialized tasks such as sending email if a failure occurs. The choice is yours, but organization is critical to keep track of your code. When you start the Visual Basic Editor, one module is automatically created for you. To create new modules, right-click inside the Project Explorer and select Insert, Module from the menu. N OTE
The time to get organized is before you write your first line of code. When approaching a macro project, try to break the project into logical sections, and then clearly define the requirements for each section.
26
6055_26.qxp
458
12/7/2006
12:26 PM
Page 458
Chapter 26 Creating VBA Macros
Class Module A class module is a special kind of module that defines a class. A class is an object that has definable characteristics and performs certain tasks. Characteristics of a class are called properties, and the code that enables a class to perform a certain task is called a method. Expression Web has many of its own classes you can use, but you can also create your own classes with their own properties and methods. Any classes you create are defined in class modules. To insert a new class module into a macro project, right-click in the Project Explorer and select Insert, Class Module. The use of class modules is outside the scope of this book.
UserForm A UserForm provides a user interface for your macro. Many macros do not include a UserForm, but if you require more than basic interaction with the users of your macro, a UserForm might be required. To add a new UserForm (seen in Figure 26.2) to your macro project, right-click in the Project Explorer and select Insert, UserForm. We will be designing a UserForm for the sample macro we’ll write later in this chapter. Figure 26.2 A UserForm allows users to interact with your macro.
26
6055_26.qxp
12/7/2006
12:26 PM
Page 459
Accessing Web Sites with VBA
459
Accessing Web Sites with VBA Now that you have a general understanding of the pieces that comprise a VBA macro, let’s take a look at how we can use a macro to automate Expression Web. When you write macros, you access parts of the application you’re developing against using a predefined set of classes, properties, and methods called an object model. Expression Web actually has three different object models you can use: the Application object model, the Web object model, and the Page object model. As you might have guessed, you access the Expression Web application using the Application object model, you access Web sites with the Web object model, and you access Web pages and their content using the Page object model.
The Application Object Model The top-level object in the Application object model is the Application object. The Application object represents the current instance of the Expression Web application itself. Suppose we want to display the version of Expression Web we are running. We can do that using the following code: MsgBox Application.Version
This code displays the Version property of the Application object in a message box.
The Web Object Model At the core of the Web object model is the Web object. A Web object represents an Expression Web Web site. You can get a reference to a Web object as follows: Dim oWeb As Web Set oWeb = Webs.Open(“c:\users\jamesche\desktop\vba”, , , WebOpenInWindow)
In the first line, we declare a variable called oWeb and indicate that it will contain a Web object. We then open the Web site located at c:\users\jamesche\desktop\vba and set the oWeb object equal to that Web site. After this code executes, oWeb will contain a reference to the Web site and we can begin accessing the properties of that site and calling its methods. For example, suppose we want to publish the Web site to http://www.mysite.com. We can do that using the code in Listing 26.1.
Listing 26.1 1 2 3
Publishing to Root Web
Dim oWeb As Web Set oWeb = Webs.Open(“c:\users\jamesche\desktop\vba”, , , WebOpenInWindow) oWeb.Publish “http://www.mysite.com”, WebPublishAddToExistingWeb
As you can see, writing code to automate functionality in Expression Web is easy when you get the hang of it.
26
6055_26.qxp
460
12/7/2006
12:26 PM
Page 460
Chapter 26 Creating VBA Macros
The Object Browser The Object Browser is an excellent tool for viewing all the objects, properties, and methods of Expression Web’s object models. You can open the Object Browser by selecting View, Object Browser (or by pressing F2) from the Visual Basic Editor. Figure 26.3 The Object Browser provides quick and easy access to all the objects in your project. Help is easily accessible by selecting an object and pressing F1.
26 As seen in Figure 26.3, the Object Browser provides a comprehensive list of all the objects, properties, and methods in a macro project. When a class is selected in the Classes frame on the left, the Members pane on the right displays all the properties and methods of that class. By right-clicking on any class, property, or method and choosing Help from the menu, you have quick access to the documentation for the object. You can also select the object and press F1 to get help. The Object Browser is fully searchable. Suppose you want to find documentation on the Open method of an Expression Web Web object. Simply enter “open” in the search box and click the Search button—the button that looks like a pair of binoculars. Using this method, you will often not only find the specific item you need, but you will also likely see other objects of interest that will help to increase your knowledge of Expression Web object models. Experiment with the Object Browser for a while. Find an interesting object in the Expression Web object model and try to write a macro that uses that object. You’ll find that taking this approach will dramatically increase your knowledge, and you’ll learn skills you can draw on for many years to come.
The Page Object Model Now that we’ve got a Web object, we can easily access that Web site’s files by using the WebFile object. If, for example, we wanted to open the page called default.htm in the root
6055_26.qxp
12/7/2006
12:26 PM
Page 461
Writing a Macro
461
folder of the Web site, we would do it by adding the code in Listing 26.2 to the code we entered in Listing 26.1.
Listing 26.2 1 2 3
Opening Page from Root
Dim oFile As WebFile Set oFile = oWeb.RootFolder.Files(“default.htm”) oFile.Open
Writing a Macro Now that you know about the Visual Basic Editor and Expression Web object models, it’s time to put that knowledge to work and write a macro. N OTE
The files for the macro you will write are on the CD-ROM in the Examples\Ch26\ folder. Instead of entering the code and creating the UserForm, you can install the files from the CD and then drag and drop the files for the macro to the Project Explorer window.
Files
A useful feature of Expression Web is the ability to specify HTML code optimizations that are applied when you publish an Expression Web Web site. Naturally, the Expression Web object model provides programmatic access to this functionality, so we’ll use that functionality to write a useful macro. You will want your macro to allow for the entry of a server name. It will then access that Web server and provide a list of all the Expression Web Web sites on that server. When one of those Web sites is selected, it will show the HTML optimizations applied for the site, and it will allow you to easily change those settings with a click of the mouse. Let’s have a look at the requirements for your macro. You’ll need: ■
A UserForm to interact with your macro.
■
A method to retrieve the list of Expression Web Web sites from a given server.
■
A method to determine the current HTML optimization settings for a given Web site.
■
A method to set the HTML optimizations for a given Web site as specified by your macro.
Creating the UserForm The first thing to do is create a UserForm. You’ll need to provide a way for a user to enter the name of a Web server, a button for the user to click to get a list of Web sites on that server, a method of displaying the list of Web sites to the user, and some checkboxes that will display the current HTML optimization settings. The UserForm will also allow the
26
6055_26.qxp
462
12/7/2006
12:26 PM
Page 462
Chapter 26 Creating VBA Macros
user of your macro to change the HTML optimization settings and specify new settings. (The completed UserForm is shown in Figure 26.4.) N OTE
You can also use this macro on a disk-based Web site by pointing it to the root folder of the site.
Start the Visual Basic Editor if it’s not already running and insert a new UserForm by rightclicking inside the Project Explorer and selecting Insert, UserForm. A new UserForm is inserted into your project and the Toolbox window appears. The Toolbox contains all the tools you will need to create the user interface for your macro. N OTE
You’re not limited to the tools that are in the Toolbox by default. By right-clicking on the Toolbox and selecting Additional Controls from the menu, you can add other controls that are installed on your system such as third-party controls you may have purchased or downloaded.
After adding the UserForm, the Properties window will contain a listing of the properties for the UserForm. All objects in a macro have certain properties that control their behavior, and each of these properties has a value associated with it that describes the property. Some properties can be changed, but other properties are read-only. A discussion of all UserForm properties is outside the scope of this book, but by selecting a property and pressing F1, you can review the context-sensitive help on that property.
26
At the top of the list of properties is the Name property. This property defines the name used to refer to the selected object in your macro code. Select the Name property and change it from UserForm1 to “frmMain”. After changing the name of the UserForm, change the Caption property to “HTML Optimizer”, the Height property to 277, and the Width property to 375. Next you’ll need to add some controls to the UserForm. Add a Label control from the Toolbox to the UserForm by clicking the Label control button (the button marked with the letter “A”) and then drawing the label on the UserForm. After drawing the label on the UserForm, change the Left property to 12, the Top property to 18, the Height property to 12, the Width property to 210, and the Caption property to “Enter the server name:”. Add the controls in Table 26.1 and set their properties as indicated. If you aren’t sure which Toolbox button represents which control, hover over a button with your mouse and the name of the control will display in a tooltip. If you’d prefer, you can install the files from the CD accompanying this book and import the frmMain.frm file from the Examples\Ch26\Files folder.
6055_26.qxp
12/7/2006
12:26 PM
Page 463
Writing a Macro
Table 26.1
Controls for the UserForm
Control
Control/Property
Value
TextBox
TextBox Name Height Left Top Width
txtServerName 18 12 30 216
CommandButton Name Caption Default Enabled Height Left TakeFocusOnClick Top Width
cmdGetSites Get Site List True False 18 235 False 30 100
Label Name Caption Enabled Height Left Top Width
lblSelectSite Select site: False 12 12 66 210
CommandButton
Label
ComboBox
CheckBox
463
ComboBox Name Enabled Height Left Style Top Width CheckBox Name Caption Enabled Height Left Top Width
Figure 26.4 shows the completed version of the UserForm.
6055_26.qxp
466
12/7/2006
12:26 PM
Page 466
Chapter 26 Creating VBA Macros
Figure 26.4 The completed UserForm provides all the controls necessary for users to control the operation of your macro.
Implementing the Functionality Now that the UserForm is complete, it is time to write the main sub-procedure for the macro. This sub-procedure is what you will run to start executing the macro. If Module1 is not visible in the Project Explorer, click the plus sign next to Microsoft_ Expression_Web, click the plus sign next to the Modules folder, and then double-click Module1 to open the code window. Enter the main sub-procedure in the Module1 code window. Code for a macro can be written inside a sub-procedure or function. A sub-procedure and function are defined as follows:
26
■
Sub-procedure—A block of code that performs a certain task but returns no value.
■
Function—A block of code that performs a certain task and returns a value.
Click inside the Module1 code window and enter the code seen in Listing 26.3.
Listing 26.3 1 2 3
Procedure to Execute Macro
Public Sub StartHTMLOptimizer() frmMain.Show End Sub
The code in Listing 26.3 declares a public procedure that shows the macro’s UserForm. If you now switch from the Visual Basic Editor to Expression Web and select Tools, Macro, Macros, you will see the StartHTMLOptimizer macro, as seen in Figure 26.5. If you run that macro, it will display the UserForm.
6055_26.qxp
12/7/2006
12:26 PM
Page 467
Writing a Macro
467
Figure 26.5 Your macro will now allow you to display the UserForm, but until the code that provides the functionality is added, none of the controls do anything.
Everything looks great so far, but if you click around on the UserForm, you will find that it doesn’t do much. In fact, it doesn’t do anything at all! You need to write some code to add functionality to the UserForm. The Visual Basic Editor makes this very easy to do. If you run the UserForm but cannot seem to click anything on it, see “UserForm Seems Hung” in the “Troubleshooting” section at the end of this chapter.
Switch back to the Visual Basic Editor and double-click the Get Site List button. When you do this, the code window for the UserForm opens and the cursor is placed inside the cmdGetSites_Click procedure. When you are running the macro and you click the Get Site List button, a Click event is fired for that button. This event automatically runs the code in the cmdGetSites_Click procedure. Therefore, any code written in this procedure will run whenever the button is clicked. Place the cursor inside the Click event for cmdGetSites and enter the code in Listing 26.4.
‘ Variable to hold return value of GetWebSites. Dim bGotWebSites As Boolean ‘ In case we’re searching on a new site, reset the form. ResetForm ‘ Call the GetSubwebs procedure and pass the server name to it. bGotWebSites = GetWebSites(txtServerName.Text) If bGotWebSites Then ‘ A variable to hold a control Dim c As Control ‘ Iterate through all the controls on the form and enable each one. For Each c In Me.Controls c.Enabled = True
26
6055_26.qxp
468
12/7/2006
12:26 PM
Page 468
Chapter 26 Creating VBA Macros
18 19 20 21 22 23
Next ‘ Select the first item in cboSites. cboSites.ListIndex = 0 End If
When the Get Site List button is clicked, Expression Web takes the server name that was entered and gets a list of all Expression Web Web sites on that server. Let’s have a look at the code we just entered to implement this. TIP You’ll notice that many of the lines of code in our macro start with a single quote. These lines are comments that serve as inline documentation. They describe what the code is doing. It is good practice to always comment your code, and as you write more complex macros, it becomes a necessity. Without comments, you almost certainly won’t remember what you were thinking when you revisit the code later.
Line 2 in Listing 26.4 declares a Boolean variable that will hold the return value of a call to a function that gets the Expression Web Web sites on the server we enter. A Boolean variable is a variable that has a value of either True or False. Our function will return True if successful and False if something goes wrong. (You will write that function later.) Line 5 makes a call to a sub-procedure called ResetForm. This sub-procedure (which you will also write later) will be responsible for resetting the UserForm. It will return the UserForm to its initial state and prepare it for displaying information for a new server.
26
Line 8 sets the Boolean variable to the value returned by the GetSubWebs function. It also passes the text entered into the txtServerName control to that function. When you call a function or sub-procedure, you can pass values to it by appending them to the function’s or sub-procedure’s name. The function or sub-procedure must be written to expect these values to be passed to it, and we’ll have a look at how that’s done in Listing 26.6. In this case, the server name is passed to the GetSubwebs function. TIP The code in Listing 26.4 illustrates an important point in programming. By separating the implementation of a button into different sub-procedures and functions, it is very easy to keep track of code and change implementation later. If all the code existed within the Click event itself, the code would quickly become unmanageable, and any change in implementation would increase the risk of introducing bugs.
Line 10 checks the value returned by the call to GetWebSites. If this value is True (meaning that we successfully contacted the Web server and got a list of the Expression Web Web sites on it), the code between the If statement on Line 10 and the End If statement on Line
6055_26.qxp
12/7/2006
12:26 PM
Page 469
Writing a Macro
469
23 is executed. If the value of bGotWebSites is False (meaning that something prevented you from successfully getting the list of Expression Web Web sites from the Web server), the code between Lines 10 and 23 is not executed. Line 13 declares a variable of type Control. You will use this variable to cycle through all the controls on your UserForm in Lines 16–18. This is a common technique that will become familiar after working with code for a while. The Controls collection of a UserForm represents all the controls on that UserForm. Any time you want to cycle through all the items in a collection programmatically, declare a variable of the same type as the objects in the collection (a variable of type Control, in this case) and then use a For...Each statement to cycle through the collection. This is referred to as “iterating through a collection.” Remember when the UserForm was created, the Enabled property of many controls was set to False. We did that because those particular controls are not applicable unless a list of Expression Web Web sites has already been obtained from the server. Since we now have a list of Web sites from the server, we are ready to enable all the controls so the user of the macro can interact with those controls. Lines 16–18 accomplish this by iterating through each control on the UserForm and setting the Enabled property to True. After the Get Site List button is clicked, we want the combo box to display the settings for the root Web site of the server, which will be the first item in the combo box. To do that, we set the ListIndex to 0 in Line 21. Now enter the code for the ResetForm procedure. Place the cursor at the end of the code window for frmMain and enter the code in Listing 26.5.
Listing 26.5
Code for the
ResetForm
Procedure
1 Private Sub ResetForm() 2 3 ‘ Clear entries in cboSites. 4 cboSites.Clear 5 6 ‘ Variable to hold a reference to a control 7 Dim c As Control 8 9 ‘ Iterate through all controls and disable all CheckBoxes. 10 For Each c In Me.Controls 11 If TypeName(c) = “CheckBox” Then c.Enabled = False 12 Next 13 14 ‘ Disable labels and the ComboBox. 15 lblSelectSite.Enabled = False 16 cboSites.Enabled = False 17 18 End Sub
The code in Listing 26.5 resets the UserForm to its original state. Line 4 begins the process by clearing all items in the combo box. After that is done, Lines 7–12 iterate through the controls on the form in the same manner used in Listing 26.4. The difference here is that
26
6055_26.qxp
470
12/7/2006
12:26 PM
Page 470
Chapter 26 Creating VBA Macros
instead of setting the Enabled property to True, we are setting the Enabled property to False, just as it was when the UserForm was first displayed. Take a look at Line 11. We’re using the TypeName function and passing the current control to it. The TypeName function returns a string that indicates the type of the control passed to it. In this particular case, we only want to set the Enabled property to False if the control is a CheckBox, so we use the TypeName function to check the control’s type before we set the Enabled property. If the control is a CheckBox, the TypeName function will return “CheckBox” and we’ll disable the control. After we’ve disabled all the CheckBox controls, the procedure is ended by disabling the two Label controls and the ComboBox control. To complete the functionality of the Get Site List button, you need to enter the code for the GetWebSites function. Position the cursor at the end of the code window for frmMain again and enter the code in Listing 26.6.
Listing 26.6
26
Code for the
GetWebSites
Function
1 Private Function GetWebSites(serverName As String) As Boolean 2 3 ‘ Variables for this sub-procedure 4 Dim oWeb As Web 5 Dim oFolder As WebFolder 6 7 ‘ Display an hourglass on our UserForm while we work. 8 Me.MousePointer = fmMousePointerHourGlass 9 10 ‘ Set up error handling so we can inform the user of any problems. 11 On Error GoTo ErrorHandler 12 13 ‘ Get a reference to the root Web site of the server. 14 Set oWeb = Webs.Open(“http://” & serverName, , , WebOpenNoWindow) 15 16 ‘ Recalculate hyperlinks on the root Web site. 17 oWeb.RecalcHyperlinks 18 19 ‘ Loop through all folders in oWeb. 20 For Each oFolder In oWeb.AllFolders 21 ‘ If the current oFolder is a Web, add it to cboSites on ➥our UserForm. 22 If oFolder.IsWeb Then 23 cboSites.AddItem oFolder.URL 24 End If 25 Next 26 27 ‘ Destroy our Web object. 28 Set oWeb = Nothing 29 30 ‘ Return the mouse pointer to the default. 31 Me.MousePointer = fmMousePointerDefault 32 33 ‘ Return True. 34 GetWebSites = True 35
6055_26.qxp
12/7/2006
12:26 PM
Page 471
Writing a Macro
36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51
471
‘ Exit the sub-procedure to avoid running ErrorHandler code when ➥no error occurs. Exit Function ‘ Error-handling code ErrorHandler: ‘ If we’ve reached this point, an error occurred. ➥Display the error to the user. MsgBox Err.Number & “: “ & Err.Description, vbExclamation + vbOKOnly, ➥”HTML OPTIMIZER” ‘ Restore the mouse pointer. Me.MousePointer = fmMousePointerDefault ‘ Return False. GetWebSites = False End Function
In Line 9 of Listing 26.4, we called the GetWebSites function and passed the server name to it. As I said then, the function must be written to expect this value to be passed to it. By examining what’s inside the parentheses in Line 1 of Listing 26.6, we can see that the GetWebSites function expects a string value (which means a text value) to be passed to it, and it assigns that value to a variable called serverName. Line 4 declares a variable that will hold a reference to the root Web on the server, and Line 5 introduces a new object in the Expression Web Web object model, the WebFolder object. A WebFolder represents a folder in an Expression Web Web site, and one of its properties is IsWeb, which returns True if the folder is an Expression Web Web site and False if it is not. This property is the perfect way for us to get a list of all the Expression Web Web sites on the Web server. Line 8 sets the mouse pointer to an hourglass so the user will know we’re processing some information while we parse the Web site. Using the Me keyword here simply refers to the UserForm itself. The Me keyword is not required here, but it makes the code more readable. Line 11 sets up error handling just in case something goes wrong. When you are accessing an external resource (such as opening a Web site), there’s always a chance that something can go wrong. If you don’t account for that possibility, your macro might crash with an ugly error message. For that reason, it’s always a good idea to implement some error handling if you anticipate that unwanted results are possible. In VBA, you implement error handling by using the On Error GoTo statement, where is a label defined inside the same method. The ErrorHandler line label in this case appears on Line 37; Line 11 specifies that if an error occurs, code execution will skip to Line 39 and a message containing the error will be displayed to the user. We will then return a value of False, indicating that something went wrong. Line 14 sets the oWeb variable to a valid Web object by opening the root Web on the server that was passed to the function. To do that, we call the Open method of the Webs collection.
26
6055_26.qxp
472
12/7/2006
12:26 PM
Page 472
Chapter 26 Creating VBA Macros
Line 17 recalculates hyperlinks on the Web site. We do this so that any new Web sites added to the server since the current session of Expression Web was started will be recognized. Without doing this, we cannot guarantee that new Web sites have been added to Expression Web’s configuration files. Recalculating hyperlinks forces Expression Web to update its configuration files for the Web server and guarantees that we will have fresh information to work with. Beginning at Line 19, we iterate through all the folders in the Web site. If a folder is a Web site (which we determine via the IsWeb property discussed earlier), we add its URL to the cboSites ComboBox on Line 23. After we’ve run through all the folders, we destroy our Web object on Line 28, reset the mouse pointer to the default pointer, and return a value of True. Finally, on Line 37, we explicitly exit the function so our error-handling code won’t run when no errors are encountered. N OTE
Whenever you explicitly create an object (such as the Web object oWeb we created previously), you should destroy that object by setting it equal to Nothing when you finish using it. When you do this, all resources and memory used by that object are freed.
Now that you’ve written code that will get a list of Web sites on the server, you need to write some code to read the current HTML optimization values. You want to do that whenever a new site is chosen from the cboSites ComboBox. Therefore, you’ll write that code in the Change event of the ComboBox control. N OTE
26
You may be the kind of person who dives right in instead of waiting to finish the macro. If you are, you may have noticed that the macro doesn’t work correctly at this point. You’ll need to finish the entire macro before you can test it successfully.
Double-click the cboSites ComboBox and enter the code in Listing 26.7 into the Change event.
Listing 26.7 1 2 3 4 5 6 7 8 9
The
cboSites_Change
Event
‘ Check to see if there are any entries in the ComboBox. If cboSites.ListCount > 0 Then ‘ A variable to hold a reference to a Web object Dim oWeb As Web ‘ Set up error handling. On Error GoTo ErrorHandler
‘ Open the Web. Set oWeb = Webs.Open(cboSites.SelText, , , WebOpenNoWindow) ‘ Reset error handling. On Error GoTo 0 ‘ Run through each CheckBox and check the flag to see if we ➥should check it. With Me .chkAuthorComponents.Value = (oWeb.OptimizeHTMLPublishFlags ➥And OptimizeHTMLAuthorComponents) .chkBrowseComponents.Value = (oWeb.OptimizeHTMLPublishFlags And ➥OptimizeHTMLBrowseComponents) .chkDynamicTemplates.Value = (oWeb.OptimizeHTMLPublishFlags And ➥OptimizeHTMLDwtCmnts) .chkGenerator.Value = (oWeb.OptimizeHTMLPublishFlags And ➥OptimizeHTMLGenerator) .chkWhitespace.Value = (oWeb.OptimizeHTMLPublishFlags And ➥OptimizeHTMLHTMLAllWhitespace) .chkHTMLComments.Value = (oWeb.OptimizeHTMLPublishFlags And ➥OptimizeHTMLHTMLCmnts) .chkLeadingWhitespace.Value = (oWeb.OptimizeHTMLPublishFlags And ➥OptimizeHTMLHTMLLeadWhitespace) .chkScriptComments.Value = (oWeb.OptimizeHTMLPublishFlags And ➥OptimizeHTMLScriptCmnts) .chkThemeComments.Value = (oWeb.OptimizeHTMLPublishFlags And ➥OptimizeHTMLThemes) End With ‘ Destroy the Web object. Set oWeb = Nothing End If Exit Sub
26 ErrorHandler: MsgBox “An error occurred while trying to open the Web site “ & ➥cboSites.SelText & “.” & _ vbCrLf & vbCrLf & Err.Description, vbCritical + vbOKOnly, ➥”HTML OPTIMIZER”
In Line 2, we check to see if there are any items in the ComboBox. This might seem like a strange thing to do because you would think that if the selection in the ComboBox has changed (which is, after all, what causes this code to run because it is in the Change event), there would obviously be an item in the ComboBox. In fact, the Change event does run once when there are no items in the ComboBox. When you run the ResetForm sub-procedure in Listing 26.5, the Change event is fired when the ComboBox is cleared in Line 4. We don’t want the code that opens the Web site and applies optimization settings to run in this case, so we enclose the code within an If...End If block and only run it if the ListCount property is greater than 0. The code up to Line 14 should be familiar to you by now, but Line 14 probably isn’t. You will notice that Line 8 sets up error handling just as we’ve done in some of our other code.
6055_26.qxp
474
12/7/2006
12:26 PM
Page 474
Chapter 26 Creating VBA Macros
However, in this case, we are resetting that error handling in Line 14. Our error-handling code is designed to handle an error that occurs when we open the Web site in Line 11. After we’ve successfully accomplished that, we reset the error handling in Line 14. Lines 17–28 also introduce a new concept. In these lines, we are determining the current HTML optimization settings for the Web site by checking the OptimizeHTMLPublishFlags property of the Web site. This property contains a value that is of type OptimizeHTMLFlags, which is a special type of value called a flag. Flags are commonly used when writing programs because they are binary values and the computer can efficiently manipulate them. Fortunately, VBA provides an efficient means of manipulating them as well. In Lines 18–26, we use the And operator to check the current HTML optimization settings. The return value of OptimizeHTMLPublishFlags And will return True if the flag denoted by is set and False if it is not. The rest of the code in Listing 26.7 uses concepts we have already covered and should already be familiar to you. The functionality of the macro is almost complete. You’ve written the code necessary to get a list of Expression Web Web sites on the server specified by our user, as well as the code necessary to determine what the current HTML optimizations are for the selected Web site. When the current HTML optimizations are displayed to the user, your macro allows him or her to change those settings and then apply them to the Web site. That’s the code you will write next. Double-click the OK button on the UserForm and enter the code in Listing 26.8 into the event.
Click
26
Listing 26.8 1 2 3 4 5 6 7 8 9
Click
Event Code
‘ Variable to hold return value of OptimizeSite Dim bOptimized As Boolean ‘ Call OptimizeSite and pass the selected URL. bOptimized = OptimizeSite(cboSites.SelText) ‘ If optimization was successful, display appropriate message. If bOptimized Then _ MsgBox “Optimizations applied successfully.”, vbInformation + ➥vbOKOnly, “HTML OPTIMIZER”
This code is very similar to the code in Listing 26.4. We are setting the Boolean value bOptimized to the value returned by the OptimizeSite function in Line 5. Next, place your cursor at the end of the code window for the UserForm and enter the code in Listing 26.9, which is for the OptimizeSite function.
6055_26.qxp
12/7/2006
12:26 PM
Page 475
Writing a Macro
Listing 26.9
The
OptimizeSite
475
Function
1 Private Function OptimizeSite(sURL As String) As Boolean 2 3 ‘ Set up error handling. 4 On Error GoTo ErrorHandler 5 6 ‘ A variable for a Web object 7 Dim oWeb As Web 8 9 ‘ Get a reference to the Web site URL we passed in. 10 Set oWeb = Webs.Open(sURL, , , WebOpenNoWindow) 11 12 ‘ Determine the OptimizeHTMLPublishFlags for the site. 13 With oWeb 14 15 ‘ Reset flags. 16 .OptimizeHTMLPublishFlags = OptimizeHTMLEmpty 17 18 If Me.chkAuthorComponents.Value = True Then _ 19 .OptimizeHTMLPublishFlags = .OptimizeHTMLPublishFlags + ➥OptimizeHTMLAuthorComponents 20 21 If Me.chkBrowseComponents.Value = True Then _ 22 .OptimizeHTMLPublishFlags = .OptimizeHTMLPublishFlags + ➥OptimizeHTMLBrowseComponents 23 24 If Me.chkDynamicTemplates.Value = True Then _ 25 .OptimizeHTMLPublishFlags = .OptimizeHTMLPublishFlags + ➥OptimizeHTMLDwtCmnts 26 27 If Me.chkGenerator.Value = True Then _ 28 .OptimizeHTMLPublishFlags = .OptimizeHTMLPublishFlags + ➥OptimizeHTMLGenerator 29 30 If Me.chkWhitespace.Value = True Then _ 31 .OptimizeHTMLPublishFlags = .OptimizeHTMLPublishFlags + ➥OptimizeHTMLHTMLAllWhitespace 32 33 If Me.chkHTMLComments.Value = True Then _ 34 .OptimizeHTMLPublishFlags = .OptimizeHTMLPublishFlags + ➥OptimizeHTMLHTMLCmnts 35 36 If Me.chkLeadingWhitespace.Value = True Then _ 37 .OptimizeHTMLPublishFlags = .OptimizeHTMLPublishFlags + ➥OptimizeHTMLHTMLLeadWhitespace 38 39 If Me.chkScriptComments.Value = True Then _ 40 .OptimizeHTMLPublishFlags = .OptimizeHTMLPublishFlags + ➥OptimizeHTMLScriptCmnts 41 42 If Me.chkThemeComments.Value = True Then _ 43 .OptimizeHTMLPublishFlags = .OptimizeHTMLPublishFlags + ➥OptimizeHTMLThemes 44 45 If Not (.OptimizeHTMLPublishFlags And OptimizeHTMLEmpty) Then _ 46 .OptimizeHTMLPublishFlags = .OptimizeHTMLPublishFlags + ➥OptimizeHTMLOn
End With ‘ Destroy the oWeb object. Set oWeb = Nothing ‘ Return True. OptimizeSite = True ‘ Exit the function. Exit Function ErrorHandler: ‘ Display the error. MsgBox “An error occurred while processing optimization.” & vbCrLf & ➥vbCrLf & Err.Description, _ vbCritical + vbOKOnly, “HTML OPTIMIZER” ‘ Return False. OptimizeSite = False End Function
The OptimizeSite function is our longest code listing yet, but there’s not as much here as you might think at first glance. The code up to Line 16 follows the same concepts we covered in Listing 26.7. Line 16 sets the OptimizeHTMLPublishFlags property of the Web site to fpHtmlOptEmpty. This clears all the existing HTML optimization settings in preparation for applying the new settings our user has specified. Lines 18–43 check each checkbox’s Value property, and if one is checked, the corresponding OptimizeHTMLPublishFlags bit is set.
26
Line 45 performs a check to see if the OptimizeHTMLPublishFlags property is still set to fpHtmlOptEmpty. If it is, the user of your macro hasn’t checked any of the checkboxes and we need not apply any HTML optimizations. However, if the user has checked one or more of the checkboxes, we add the fpHtmlOptOn flag to the current OptimizeHTMLPublishFlags. This has the effect of turning on HTML optimization so your user’s settings will be applied the next time the Web site is published. The rest of Listing 26.9 consists of concepts covered in Listing 26.6.
Finishing the Code The main functionality of your macro is now complete. However, there are some finishing touches you need to add. First, you’ll add the code for the Close button. Double-click the Close button and add the following code to the Click event: ‘ Unload the form without making any changes... Unload Me
6055_26.qxp
12/7/2006
12:26 PM
Page 477
Writing a Macro
477
This is pretty simple code that does exactly what it appears to do. It unloads the UserForm from memory, which causes it to close and our macro to end. That’s all we need for the Close button. Finally, we don’t want the users of our macro to be able to click the Get Site List button if they haven’t entered a server name. To include that functionality, we’ll add some code to the Change event of the txtServerName TextBox control. Double-click the txtServerName TextBox control and enter the following code in the Change event: ‘ If no server name is entered, disable the Get Site List button. If txtServerName.Text = “” Then cmdGetSites.Enabled = False Else cmdGetSites.Enabled = True End If
The code in the Change event of txtServerName will run whenever the text in the textbox changes. Each time the user of our macro presses a keyboard key while the cursor is in the txtServerName textbox, we will check to see if any text is in it. If there is, we will enable the Get Site List button. If there isn’t text in the textbox, we will disable the Get Site List button. TIP For the most part, we rely on Expression Web itself to handle any incorrect entries in the textbox. However, the macro can be made more robust by adding your own logic to check for invalid entries. Challenge yourself by adding some code to check for invalid entries.
txtServerName
26
Running the Macro That’s it! We are now ready to run the macro. Close the Visual Basic Editor (and make sure to save your changes when prompted) and then select Tools, Macro, Macros in Expression Web. Select the StartHTMLOptimizer macro and click Run. When the UserForm displays, enter the name of a Web server and click the Get Site List button. Your macro gets a list of the Expression Web Web sites on the server and populates the ComboBox with them. N OTE
Our macro expects that you will not enter “http://” if you are using it against a serverbased Web site. In other words, use the format www.mysite.com when running the macro against a Web server.
When the site list has populated, select a Web site from the ComboBox and examine the current HTML optimization settings. Change some of the settings and click the OK button
6055_26.qxp
478
12/7/2006
12:26 PM
Page 478
Chapter 26 Creating VBA Macros
to apply them. Figure 26.6 shows the macro with optimization settings applied. Figure 26.7 shows the Remote Web Site Properties dialog in Expression Web. Note that the changes applied with your macro are reflected in the Remote Web Site Properties dialog. If you’ve specified that browse-time comments be removed, yet they still remain in your pages after publishing, see “Browse-time Comments Still Exist” in the “Troubleshooting” section at the end of this chapter.
Figure 26.6 Here is the completed macro. The optimizations configured by the macro will be reflected in the Expression Web dialog as well.
Figure 26.7
26
The Remote Web Site Properties dialog shows that the changes we made to the Web site with our macro did take effect.
6055_26.qxp
12/7/2006
12:26 PM
Page 479
Writing a Macro
479
The next time this Web site is published, it will be published using the HTML optimizations set with your macro. If the Remote Web Site Properties dialog does not reflect the settings you specified when you ran your macro, see “New Settings Don’t Take” in the “Troubleshooting” section at the end of this chapter.
When Something Goes Wrong—Debugging One of the tried and true rules of programming is that something will always go wrong. When it does, knowing how to debug a macro is the key to finding any problem and getting it fixed. Breakpoints are a vital aid in the debugging process. The Visual Basic Editor will automatically stop execution when a breakpoint in code is hit. You can then use the Debug toolbar (accessible from View, Toolbars, Debug) to step through your code. When hovering your mouse pointer over objects and variables in your code, a screen tip will display with the current value of that object or variable. To set a breakpoint at a line of code, right-click the line of code and select Toggle, Breakpoint from the menu. You can also click in the left border of the code editor at a specific line to set a breakpoint on that line, or click anywhere on the line of code and press F9. You can create as many breakpoints as you like. You can remove all your breakpoints in one step by selecting Debug, Clear All Breakpoints. N OTE
It’s not necessary to remove your breakpoints if you don’t want to. They will only affect the macro when you are debugging it in the Visual Basic Editor.
26 The Locals Window is available by selecting View, Locals Window. It displays all available objects, plus their properties and values in a tree view structure. As you step through your code when debugging, the Locals Window allows you to see what properties of an object are changing and their values. When I am debugging code, I use the Locals Window more than any other debugging tool because it shows everything in one convenient location. The Immediate Window is available by selecting View, Immediate Window. It allows you to enter commands and view or change the values of variables and properties while your code is paused at a breakpoint. The Watch Window is available by selecting View, Watch Window. It allows you to watch a particular variable while code executes or to set a conditional breakpoint so the Visual Basic Editor breaks when a particular condition is met or when the value of an expression you specify changes. To add a new watch in the Watch Window, right-click anywhere within the Watch Window and select Add Watch. For detailed information on debugging and the Locals, Immediate, and Watch Windows, see the Visual Basic Help available by selecting Help, Microsoft Visual Basic Help within the Visual Basic Editor.
6055_26.qxp
480
12/7/2006
12:26 PM
Page 480
Chapter 26 Creating VBA Macros
Troubleshooting UserForm Seems Hung When I run the macro, I can see the UserForm, but when I click anywhere on it, nothing happens and my computer just dings at me. What’s wrong? Make sure that you haven’t disabled the UserForm. When we added controls to the form, we set the Enabled property of many of them to False. If you accidentally set the Enabled property of the UserForm itself to False during that process, you won’t be able to interact with the UserForm at all.
Browse-time Comments Still Exist I checked the box so that Expression Web would remove the browse-time Web component comments, but after publishing my Web site, they’re still there! Is the macro broken? The macro’s not broken. Browse-time Web components rely on the comments to run. Therefore, if you are publishing to a Web site that is running the FrontPage Server Extensions, Expression Web will always leave these comments in. If Expression Web removed them, it would break your Web components!
New Settings Don’t Take I selected the optimization options the way I wanted them, but when I checked the Remote Web Site Properties dialog box in Expression Web, the options I selected didn’t seem to take effect. Make sure the Web site you are configuring is not currently open in Expression Web. Expression Web caches the information for the currently opened Web site, so even though you’ve changed the settings, Expression Web still sees the old settings. If you really want to see the latest settings, select Tools, Recalculate Hyperlinks in Expression Web and then check the Remote Web Site Properties dialog again. The settings you applied should be visible.
Lagniappe (lan yap’) n.,
a gift or bonus
Protecting Macro Code When you start writing and employing macros, you’re going to find many uses for them. You may find that you want to protect the macro code you write from unauthorized modification. In such cases, macro protection is a nice solution. Macro protection enforces password protection on your macros. When macro protection is enabled, before you can open the macro code in the Visual Basic Editor, you will be required to enter a password. To set a password for macro protection, select Tools, Microsoft_Expression_Web Properties from the menu in the Visual Basic Editor to display the Project Properties dialog. Click the Protection tab and place a check in the Lock Project for Viewing checkbox, as shown in Figure 26.8. Enter a password of your choice and click OK.
6055_26.qxp
12/7/2006
12:26 PM
Page 481
Lagniappe: Protecting Macro Code
Figure 26.8 The Project Properties dialog allows you to set macro protection so a password is required to view your code.
After you enter the password and click OK, the macro will be protected. To test this functionality, close Expression Web and relaunch it. Otherwise, the Visual Basic Editor will still allow you to access the macro code.
481
6055_26.qxp
12/7/2006
12:26 PM
Page 482
6055_pt07.qxp
11/30/2006
9:01 AM
Page 483
PART
ASP.NET Development in Expression Web 27
Using the ASP.NET Development Server
28
Using Standard ASP.NET Controls
29
Using ASP.NET Navigation Controls
30
Using ASP.NET Master Pages
31
Developing a Login System Using ASP.NET
32
Implementing Form Validation Using ASP.NET
33
Using ASP.NET Web Parts
485
495 527
549
607
569 595
VII
6055_pt07.qxp
11/30/2006
9:01 AM
Page 484
6055_27.qxp
12/7/2006
12:27 PM
Page 485
CHAPTER
27
Using the ASP.NET Development Server In this chapter Introduction to the ASP.NET Development Server How to Use the ASP.NET Development Server Limitations of the ASP.NET Development Server Troubleshooting Lagniappe: Starting the ASP.NET Development Server from the Command Prompt
6055_27.qxp
486
12/7/2006
12:27 PM
Page 486
Chapter 27 Using the ASP.NET Development Server
Introduction to the ASP.NET Development Server If you’ve ever read comments or blogs from the ASP.NET development team at Microsoft, you can’t help but realize how excited they are about ASP.NET 2.0. As you’ll see when reading the chapters in this section, there’s plenty to be excited about. Because you can do so much in ASP.NET 2.0 without writing any code at all, many Web developers who have historically not taken advantage of Web programming technologies will likely find a use for many of the features offered by ASP.NET 2.0. Some of the things that you can do using ASP.NET 2.0 are: ■
Display data from a database on a Web page.
■
Allow people to create accounts and log in to your Web site.
■
Add robust form validation to your Web forms.
■
Add dynamic Web site navigation.
The likelihood of so many people delving into ASP.NET does present problems. Because ASP.NET is a server technology, it requires a Web server to run. The following Windows editions do not ship with a Web server: ■
Windows Vista Starter
■
Windows Vista Home Basic
■
Windows Vista Home Premium
■
Windows XP Home Edition
If you’re using one of these operating systems, the ASP.NET Development Server provides you with the capability of developing and testing ASP.NET applications. Another problem that widespread use of ASP.NET may introduce is one that is more likely to occur in educational environments. Developing with ASP.NET against a Web server has traditionally required a user to have administrative access to the machine. Many educational institutions don’t allow users to be administrators. Therefore, this would result in developers not being able to debug applications, and in the worst-case scenarios, they would not be able to run ASP.NET applications at all.
27
➔
For more information on ASP.NET debugging, see “Using Expression Web with Visual Web Developer Express Edition,” p. 655 (Appendix A).
Both of these problems are nicely solved with the ASP.NET Development Server that is provided with Expression Web. The ASP.NET Development Server fully supports ASP.NET 2.0 and allows for the development of ASP.NET applications on all current Microsoft operating systems and by non-administrators as well.
6055_27.qxp
12/7/2006
12:27 PM
Page 487
How to Use the ASP.NET Development Server
N OTE
487
In order to use ASP.NET 2.0, you’ll also need the .NET Framework 2.0. It’s included in Windows Vista. If you use Windows XP or Windows 2000, you can download the 32-bit .NET Framework from http://www.microsoft.com/downloads/details.aspx?FamilyID= 0856eacb-4362-4b0d-8edd-aab15c5e04f5&displaylang=en. The 64-bit version can be found at http://www.microsoft.com/downloads/details.aspx?familyid=B44A0000-ACF84FA1-AFFB-40E78D788B00&displaylang=en. Those URLs are both plenty long. If you’d prefer, go to http://download.microsoft.com and search for “.NET Framework 2.0”. You will easily find the .NET Framework.
What Is the .NET Framework? Ask ten people what the .NET Framework is and you’re likely to get ten different answers. Most people have a limited understanding of exactly what the .NET Framework is, and many people have no understanding of it at all. That’s partly due to Microsoft’s marketing techniques. A few years back, Microsoft started the .NET revolution. It seemed like almost everything Microsoft was producing was branded with “.NET.” The name even made it into Microsoft’s messaging client when they began referring to Windows Messenger as “.NET Messenger.” Naturally, customers were confused about just what .NET really meant. Now that the hype around .NET has faded for the most part, we’re left with the real meat of what .NET is all about—the .NET Framework. In a nutshell, the .NET Framework is a framework that developers can use to create applications that run on a common Microsoft platform called the Common Language Runtime. One of the primary benefits of the Common Language Runtime is that it provides developers with a common way of doing complicated tasks. Jobs that used to require a significant amount of code can now be completed with just a few lines of code. ASP.NET is a subset of the .NET Framework. When you develop pages that contain ASP.NET 2.0 controls, you are developing on the Microsoft .NET Framework.
How to Use the ASP.NET Development Server When you create a Web site in Expression Web, you have many options from which to choose, but the easiest to work with is a disk-based Web site. However, because a disk-based Web site doesn’t actually reside on a Web server, it doesn’t sit on top of a platform that supports server-side technologies like ASP.NET. That’s where the ASP.NET Development Server comes into the picture. The ASP.NET Development Server is used by default for all ASP.NET pages browsed from a disk-based Web site. N OTE
➔
The ASP.NET Development Server is only supported on disk-based Web sites.
For more information on creating Web sites in Expression Web, see “Creating a Web Site”, p. 25 (Chapter 2).
27
6055_27.qxp
488
12/7/2006
12:27 PM
Page 488
Chapter 27 Using the ASP.NET Development Server
Expression Web starts the ASP.NET Development Server on a random port (shown in Figure 27.1) when an ASP.NET page is previewed in your browser. Figure 27.1 The ASP.NET Development Server is started for you automatically when you preview an ASP.NET page from a diskbased Web site.
TIP The first time you browse an ASP.NET page from a disk-based Web site, Expression Web will automatically install the ASP.NET Development Server if it is not already installed. Port numbers are used whenever communication takes place over the Internet. By
N OTE
default, Web servers use port 80 for HTTP traffic. There are other default ports for other services. The ASP.NET Development Server chooses a random port in a port range that is not used by common services. This prevents the port that the ASP.NET Development Server uses from conflicting with something else running on your computer.
If you choose, you can also use the ASP.NET Development Server for non-ASP.NET pages. To configure whether the ASP.NET Development Server is used only for ASP.NET pages or for all content, click Site, Site Settings and then click the Preview tab. As shown in Figure 27.2, two options are available for previewing with the ASP.NET Development Server:
27
■
For Only ASP.NET Web Pages—When this option is selected, Expression Web will launch the ASP.NET Development Server when .aspx files are previewed. If nonASP.NET pages are previewed, Expression Web will use the path of the Web site that is open.
■
For All Web Pages—When this option is selected, Expression Web will use the ASP.NET Development Server for all files that are previewed.
6055_27.qxp
12/7/2006
12:27 PM
Page 489
How to Use the ASP.NET Development Server
489
Figure 27.2 Configuring use of the ASP.NET Development Server is performed through the Site Settings dialog.
Figure 27.3 If you attempt to preview an ASP.NET page using a disk path, Expression Web will warn you that it won’t display ASP.NET content. You’ll need to use a Web server (like the ASP.NET Development Server) to see this content.
If you get a message warning you that dynamic content exists on the page even though you have the ASP.NET Development Server enabled, see “Dynamic Content Warning with ASP.NET Development Server” in the “Troubleshooting” section of this chapter.
27
6055_27.qxp
490
12/7/2006
12:27 PM
Page 490
Chapter 27 Using the ASP.NET Development Server
The ASP.NET Development Server will remain running for as long as Expression Web is running. However, it is possible to stop it if you wish. Examples of reasons why you might want to manually stop the ASP.NET Development Server include: ■
You have an ASP.NET that caches information and you want to clear the cache so that can test a particular scenario.
■
You are testing code in your ASP.NET application that runs when your application first loads.
To manually stop the ASP.NET Development Server, right-click on the icon in the system tray shown previously in Figure 27.1 and choose Stop from the menu. Alternatively, you can choose Show Details from the menu and click the Stop button, as shown in Figure 27.4. Either way, the ASP.NET Development Server will stop immediately and will be launched again on a new port the next time it’s needed. N OTE
If the ASP.NET Development Server is running when you exit Expression Web, it will be stopped automatically.
Figure 27.4 The ASP.NET Development Server can be stopped from the Details dialog box. You can also click the provided link to browse the Web site in your Web browser.
27
Limitations of the ASP.NET Development Server The ASP.NET Development Server solves a lot of problems. In addition to providing a solid development platform for ASP.NET for those using versions of Windows without a Web server, it also allows non-administrators the option of debugging locally. However, even with those benefits, there are some limitations.
6055_27.qxp
12/7/2006
12:27 PM
Page 491
Limitations of the ASP.NET Development Server
491
Process Identity There are occasions in an ASP.NET application where you may need to run code under a specific user’s identity. For example, suppose you have an ASP.NET application that makes heavy use of a Microsoft SQL Server database and you want that database to be accessed via a particular user account. Being able to configure ASP.NET to always run under that particular user account is a valuable feature. On a production Web server, ASP.NET applications run inside either the aspnet_wp.exe process (IIS 5 and IIS 5.1) or the w3wp.exe process (IIS 6 and IIS 7). These processes have many configuration options, including the ability to configure the identity under which they run. The ASP.NET Development Server always runs under the user who is logged onto the computer. You cannot configure it to run under a different user account.
No Remote Access The ASP.NET Development Server is designed to be browsed from the local machine only. That means that you can only browse it using localhost or the TCP/IP loopback address, 127.0.0.1. Using either a machine name or machine IP address will result in an error page in the browser. Because only localhost and 127.0.0.1 are acceptable to the ASP.NET Development Server, you cannot browse an ASP.NET Web site running on the ASP.NET Development Server from a remote machine. If you need that functionality, you will need to use IIS to develop your ASP.NET application. TIP Even though you can’t browse the ASP.NET Development Server remotely, you can use the ASP.NET Development Server to develop against content that’s located on a different machine. You’ll need to map a drive to the remote content and then start the ASP.NET Development Server from a command line using a switch to point it to the content. For more information on starting the ASP.NET Development Server from a command prompt, see “Lagniappe: Starting the ASP.NET Development Server from the Command Prompt” later in this chapter.
27
No Support for ASP Pages Even though you can configure the ASP.NET Development Server to serve all Web pages, as shown previously in Figure 27.2, it is explicitly designed to not allow ASP pages. If you attempt to browse to an ASP page in the ASP.NET Development Server, you’ll get an error telling you that ASP pages are not served, as shown in Figure 27.5.
6055_27.qxp
492
12/7/2006
12:27 PM
Page 492
Chapter 27 Using the ASP.NET Development Server
Figure 27.5 The ASP.NET Development Server does not serve ASP pages. Only ASP.NET and HTML pages are supported.
N OTE
You might wonder why the ASP.NET Development Server doesn’t support ASP pages. There really isn’t any technical reason. It was simply a design choice made by Microsoft, most likely because the ASP.NET Development Server was first developed as a Web server specifically for ASP.NET development tools.
Troubleshooting Dynamic Content Warning with ASP.NET Development Server I have my Web site configured to use the ASP.NET Development Server, but when I browse an ASP.NET page, I get the warning that the page contains dynamic content and the page is still served from the disk path. How can I correct this problem? In my testing, there were several occasions when I had the ASP.NET Development Server configured to launch when browsing ASP.NET pages, but for some reason, Expression Web would launch pages from the file path on the first attempt. When that happens, simply close the browser and preview the page again and it should work correctly.
6055_27.qxp
12/7/2006
12:27 PM
Page 493
Starting the ASP.NET Development Server from the Command Prompt
Lagniappe (lan yap’) n.,
a gift or bonus
Starting the ASP.NET Development Server from the Command Prompt In most scenarios, launching the ASP.NET Development Server from within Expression Web will suffice. However, if you want to author against remote content via a mapped drive, you’ll need to take a different approach and launch the ASP.NET Development Server from a command prompt. To launch the ASP.NET Development Server from a command prompt, navigate to the %windir%\Microsoft.NET\Framework\v2.0.50727 directory and then run the following command: webdev.webserver /port:<port> /path:<path>
You’ll need to replace <port> with the port number of your choice and <path> with the path to the mapped drive. For example, to launch the ASP.NET Development Server on port 9000 and browse content located at z:\website, you would use the following: webdev.webserver /port:9000 /path:z:\website
You will then be able to browse your content on the port specified. Adding on to the preceding example, to browse a page called form.aspx, you would enter the following into your Web browser: http://localhost:9000/form.aspx
493
6055_27.qxp
12/7/2006
12:27 PM
Page 494
6055_28.qxp
12/7/2006
12:30 PM
Page 495
CHAPTER
28
Using Standard ASP.NET Controls
In this chapter ASP.NET 2.0: A Brief Introduction Creating ASP.NET Pages The Basics of ASP.NET Controls An Overview of the Standard ASP.NET Controls The AdRotator Control The Calendar Control The Wizard Control Making ASP.NET Work for You Troubleshooting Lagniappe: Formatting with Styles
6055_28.qxp
496
12/7/2006
12:30 PM
Page 496
Chapter 28 Using Standard ASP.NET Controls
ASP.NET 2.0: A Brief Introduction Today’s Web sites bear no resemblance to the Web sites that appeared when the Web first began. After all, the concept of regular people like you and me actually owning a computer never occurred to the scientists who were devising what J.C.K. Licklider of MIT referred to as the “Galactic Network.” Instead, they used the new Internet as a means to share research between scientific and educational institutions. The sole emphasis was on connecting computers. Nowadays, we don’t give a second thought to the connectivity of computers. Just about everyone in the modern world has Internet access, and many of those people have broadband connections. The Internet revolution is among us, and the ubiquitous connectivity we now enjoy has transformed the Internet into something entirely different from the original intent. We now expect every company and every organization to have a Web site. We want to pay our bills online. We want to be able to change our cable or satellite service online. We want to get details on our cell phone service online. It has become quite obvious that static Web pages no longer fill the bill. To meet all the above expectations, companies must implement some means of accessing their backend data systems via the Internet. There are many technologies available today for doing just that, and Microsoft’s latest offering in that arena is ASP.NET 2.0. You may already be familiar with ASP.NET, but if you haven’t used ASP.NET 2.0 yet, you’re in for a real treat! The folks on the ASP.NET product team have put a lot of work into making ASP.NET 2.0 approachable for developers of all levels. They’ve also packed it with great features that Web developers have been screaming for. Expression Web fully supports the rendering of ASP.NET controls, and it also supports configuring properties of controls, including IntelliSense for ASP.NET controls in Code View. N OTE This book will not teach you how to program in ASP.NET because that is outside the scope of a book on Expression Web. If you’d like to learn how to fully utilize the power of ASP.NET, read Sams’ Teach Yourself ASP.NET 2.0 in 24 Hours, Complete Starter Kit from Sams Publishing (ISBN 0672327384). If you need some basic information on connecting ASP.NET code files to a user interface you have created in Expression Web, see “Using Expression Web with Visual Web Developer Express Edition”, p. 655 (Appendix A). For many of you, that will be all you need to start developing ASP.NET applications.
28
Creating ASP.NET Pages It should be obvious that before you can use ASP.NET controls, you’ll need to create an ASP.NET Web page. ASP.NET Web pages are called Web Forms and they have an .aspx file extension. When you create an ASP.NET Web Form, you will also choose a language
6055_28.qxp
12/7/2006
12:30 PM
Page 497
Creating ASP.NET Pages
497
for the page. Expression Web provides the choices of C# (pronounced C-sharp), Visual J# (pronounced J-sharp), and Visual Basic (VB). Choosing an ASP.NET Language Developers who are new to ASP.NET may have a difficult time deciding on a language choice. As far as functionality is concerned, there is little difference. The choice you make will be primarily based on your comfort with the syntax. C# is a language that Microsoft introduced in 2002. The syntax of C# is most familiar to developers who have experience in C, C++, or JavaScript. It is also case-sensitive, which may be a bit of an annoyance to VB developers. J# is similar to Java in syntax. While Expression Web will allow you to choose J# as a language for your ASP.NET Web Forms, I discourage you from using it because J# does not support the new page architecture in ASP.NET 2.0. Choosing J# will limit you in the future. VB shares syntax with VBScript and the legacy VB 6 and earlier. However, the commonalities stop there. This VB is what was previously referred to as VB.NET. However, the syntax and semantics will be familiar to anyone who has worked with VB. You’ll often see developers debating which language is better. At the end of the day, there is little difference between the capabilities of each, and in almost all cases, one will not afford you any operational benefit over another. Choose the language that you feel most comfortable with and you’ll be fine.
TIP ASP.NET Code in Expression Web Expression Web doesn’t provide very good support for writing ASP.NET code. It does have great support for rendering ASP.NET controls, however. What you’ll likely want to do is design your layout and set basic control properties in Expression Web and then use Visual Studio 2005 or Visual Web Developer Express Edition to write your C#, VB, or J# code.
➔
For more information on using Microsoft Visual Studio with Expression Web, see “Using Expression Web with Visual Web Developer Express Edition”, p. 655 (Appendix A).
To create a new ASP.NET Web Form in Expression Web:
1. Click File, New, Page. 2. On the Page tab in the New dialog, select ASPX from the list of file types, as shown in Figure 28.1.
3. Choose your language in the Programming Language dropdown. 4. Click OK. 28
6055_28.qxp
498
12/7/2006
12:30 PM
Page 498
Chapter 28 Using Standard ASP.NET Controls
Figure 28.1 Create a new ASP.NET Web Form using the New dialog.
After your ASP.NET Web Form has been created, you’ll see an empty form, as shown in Figure 28.2. Any ASP.NET controls that you add to your page will be inserted into this form. Figure 28.2 When an ASP.NET Web Form is created, it will automatically have a form within it into which all ASP.NET controls will be inserted.
You’re now ready to start adding some ASP.NET controls to your page, so let’s have a look at the Standard ASP.NET controls available.
The Basics of ASP.NET Controls All ASP.NET controls are available via the Toolbox in Expression Web. The Toolbox is divided into two sections, as shown in Figure 28.3: HTML and ASP.NET Controls.
28
6055_28.qxp
12/7/2006
12:30 PM
Page 499
The Basics of ASP.NET Controls
499
Figure 28.3 The Toolbox in Expression Web makes it easy to add ASP.NET controls to your page.
To use the ASP.NET 2.0 controls, you’ll need to install the Microsoft .NET Framework 2.0 redistributable. (There’s also a .NET Framework SDK, which includes the redistributable along with other developer tools.) If the .NET Framework 2.0 is not installed, Expression Web displays a notification in the ASP.NET Toolbox, as shown in Figure 28.4. Figure 28.4 The Microsoft .NET Framework 2.0 is required to use the ASP.NET 2.0 controls. It’s a free download from Microsoft.
Click the link in the ASP.NET Controls section of the Toolbox and the dialog shown in Figure 28.5 opens. From there, you can click the link to download the .NET Framework 2.0 redistributable. Figure 28.5 Microsoft makes it easy to get the .NET Framework 2.0 if you don’t already have it.
28
6055_28.qxp
500
12/7/2006
12:30 PM
Page 500
Chapter 28 Using Standard ASP.NET Controls
The ASP.NET Controls section of the Toolbox has several subsections. We’ll cover the Standard controls in this chapter and other controls in subsequent chapters. Following is a brief description of the sets of controls in the ASP.NET section of the Toolbox:
➔ ➔ ➔ ➔
■
Standard—Standard ASP.NET controls such as radio buttons, textboxes, dropdowns, and so on.
■
Data—Controls that are designed to retrieve and display data on an ASP.NET Web Form.
■
Validation—Controls that allow you to configure form field validation on your ASP.NET Web Forms.
■
Navigation—Controls that are specifically designed for navigating in a Web site.
■
Login—Controls that allow you to easily create a membership system for an ASP.NET Web site.
For more information on ASP.NET Data controls, see “Accessing Data with ASP.NET”, p. 635 (Chapter 35). For more information on ASP.NET Validation controls, see “Implementing Form Validation with ASP.NET”, p. 595 (Chapter 32). For more information on ASP.NET Navigation controls, see “Using ASP.NET Navigation Controls”, p. 527 (Chapter 29). For more information on ASP.NET Login controls, see “Developing a Login System with ASP.NET”, p. 569 (Chapter 31).
Many of the Standard ASP.NET controls are similar to their HTML counterparts. For example, the ASP.NET TextBox control is functionally the same as the HTML text input control, and the ASP.NET DropDownList control is functionally the same as the HTML Drop-Down Box control. Other ASP.NET controls (such as the Calendar control) have no HTML control counterpart. When you insert ASP.NET controls into a page, Expression Web generates the ASP.NET code necessary for ASP.NET to render the controls. For example, when you insert a TextBox control onto an ASP.NET Web Form, the following code is added in Code View:
This is obviously not normal HTML code, and a Web browser won’t understand this code. Therefore, when this page is browsed, the ASP.NET runtime environment will render the code as an HTML tag, similar to the following:
28
A TextBox control is a simple example of how ASP.NET renders controls. Not all controls are this simple. For example, an ASP.NET Calendar control looks quite simple within Code View in Expression Web:
But when the page is browsed, ASP.NET builds some pretty complex HTML to render the Calendar control correctly in the Web browser. As a matter of fact, there’s so much code that gets rendered by ASP.NET for a control like the Calendar that it would take over a
6055_28.qxp
12/7/2006
12:30 PM
Page 501
The Basics of ASP.NET Controls
501
page of this book to show it all to you. By using ASP.NET to implement a calendar on your Web page, you can avoid having to write a large amount of code yourself.
Understanding Control Properties ASP.NET controls use control properties to affect their behavior and appearance. Control properties can be specified either by selecting the control and using the Tag Properties pane to manipulate the properties or by changing the properties directly in Code View.
TIP We’ve already covered the Tag Properties pane in Chapter 13, “Editing Tag Properties”, but just in case you skipped that part, I’ll give you a tip here: When a property description appears as bolded blue in the Tag Properties pane, it means that the value of that property has been changed from the default value.
➔ ➔
For more information on using the Tag Properties pane, see “Editing Tag Properties”, p. 215 (Chapter 12). For more information on using Code View in Expression Web, see “Using Web Page Views”, p. 127 (Chapter 8).
N OTE Another Method of Accessing Control Properties There is actually a third way to access the properties of an ASP.NET control—programmatically. However, in this book, we are going to work with changing properties via the Tag Properties pane since ASP.NET 2.0 allows you to take advantage of most controls without writing any code. If you want more information on how to program ASP.NET applications, see “Resources on Expression Web, Web Design, and ASP.NET”, p. 695 (Appendix D).
Let’s add an ASP.NET control to a page and set some properties on that control:
1. Launch Expression Web and create a new disk-based Web site. 2. Click File, New, Page and select ASPX from the list of file types to create a new ASP.NET Web Form. Click OK.
3. Save the page as default.aspx. 4. Scroll down to the Label control in the Standard ASP.NET controls section of the Toolbox.
5. Double-click on the Label control in the Toolbox to add it to the Web Form. Your page should now look like Figure 28.6.
28
6055_28.qxp
502
12/7/2006
12:30 PM
Page 502
Chapter 28 Using Standard ASP.NET Controls
Figure 28.6 The ASP.NET Label control should be inside the form.
CAUTION There is a Label control in the HTML Form Controls section of the Toolbox. Make sure that you don’t add it. Instead, you want to add the Label control in the Standard ASP.NET Controls section.
6. Save and browse the page to ensure that the Label control displays correctly. You should see the word Label displayed in the browser. N OTE You may have found it strange to create a new disk-based Web site in Step 1 even though this is an ASP.NET site. Expression Web uses the ASP.NET Development Server to browse ASP.NET pages in a disk-based Web site. Using this method is the easiest way to design and test ASP.NET Web sites.
➔
For more information on creating Web sites in Expression Web, see “Creating a Web Site”, p. 25 (Chapter 2). If the page displays in the browser but the Label control does not appear, see “ASP.NET Controls Do Not Appear in the Browser” in the “Troubleshooting” section of this chapter. If you see an error in the browser that says “The XML page cannot be displayed”, see “XML Error When Browsing ASP.NET Page” in the “Troubleshooting” section of this chapter.
TIP
28
You might have noticed that Expression Web will only allow you to place ASP.NET controls inside the form that is automatically inserted onto the page when it’s created. All ASP.NET controls must be placed within a form that is configured to run on the server. Expression Web prevents you from shooting yourself in the foot by not allowing you to place ASP.NET controls outside a form. It will also recreate the form automatically if you accidentally delete it.
6055_28.qxp
12/7/2006
12:30 PM
Page 503
The Basics of ASP.NET Controls
503
Now you’ve got a Label control that displays the word “Label” on the Web page. The next step is to manipulate the properties of the control to make it useful.
1. Select the Label control on the Web Form. 2. In the Tag Properties pane, change the Text property of the Label control to An ASP.NET Label,
as shown in Figure 28.7.
Your label should look like Figure 28.8. When you browse this page in a browser, it will now display the text “An ASP.NET Label”. Figure 28.7 The Tag Properties pane provides easy access to an ASP.NET control’s properties.
Figure 28.8 The ASP.NET Label control now has a more useful presentation thanks to a change in the Text property.
28 Now let’s have a look under the covers and see exactly what happened in the code for default.aspx when we changed the Text property. Switch over to Code View and you’ll see that the tag has a new Text attribute with a value of “An ASP.NET Label”, as shown in Figure 28.9.
6055_28.qxp
504
12/7/2006
12:30 PM
Page 504
Chapter 28 Using Standard ASP.NET Controls
Figure 28.9 The Label control’s tag in Code View now has a Text property set to “An ASP.NET Label”.
Specifying property values inside the control’s tag in this manner is referred to as declarative syntax. As it turns out, ASP.NET 2.0 allows you to do some very powerful things using declarative syntax, as you’ll see later when we get into accessing data with ASP.NET. Now that you have a general idea of how to set properties for ASP.NET controls, let’s dig deeper into the Standard ASP.NET controls.
An Overview of the Standard ASP.NET Controls Table 28.1 lists all of the Standard ASP.NET controls in the Toolbox.
Table 28.1
28
The ASP.NET Standard Controls
Control Name
Description
AdRotator
Allows for rotating banner ads
BulletedList
Provides programmatic access to a bulleted list
Button
A basic button
Calendar
Allows for easy date selection/display
CheckBox
A basic checkbox
CheckBoxList
A group of associated CheckBox controls
ContentPlaceHolder
Used with ASP.NET Master Pages
DropDownList
A basic dropdown list
FileUpload
A textbox and Browse button for file uploads
HiddenField
A basic hidden form field
Hyperlink
Renders as a typical hyperlink
Image
Displays an image in the browser
ImageButton
Uses an image as a button
ImageMap
Allows for the creation of image maps
Label
Displays static text
LinkButton
A button or link that runs code on the server
ListBox
A multi-line textbox
6055_28.qxp
12/7/2006
12:30 PM
Page 505
The AdRotator Control
Table 28.1
➔ ➔
505
continued
Control Name
Description
Literal
A placeholder for HTML content
Localize
A placeholder for localized text
MultiView
A container for multiple View controls
Panel
A container for multiple controls
PlaceHolder
A placeholder for dynamically added controls
RadioButton
A basic radio button
RadioButtonList
A list of RadioButton controls
Substitution
Allows part of a page to be exempt from caching
Table
A basic table
TextBox
A basic textbox
View
A control in a MultiView that contains other controls
Wizard
A step-based wizard control
Xml
Allows for the display of XML data
For more information on ASP.NET Master Pages, see “Using ASP.NET Master Pages and User Controls”, p. 549 (Chapter 30). For more information on XML data, see “Primer on Data Access Technologies”, p. 629 (Chapter 34).
We won’t go into detail on these basic controls, but the sections that follow will cover the more complex ones. In these sections, we’ll discuss enough of the general details to give you a good base knowledge to use any of the ASP.NET controls available in Expression Web.
The AdRotator Control Banner advertisements aren’t just for the big-name sites. The entrepreneurial nature of the Internet has made them popular with the little guys as well. Many e-commerce sites on the Internet offer affiliate programs that will pay you a commission on referred sales. To effectively take advantage of such programs, you need to implement some sort of advertising on your site, and banner ads have consistently proven to be an effective choice. The AdRotator control uses an XML file called an advertisement file to feed it information to display banners and links. This XML file must be in the format shown in Listing 28.1.
28
6055_28.qxp
506
12/7/2006
12:30 PM
Page 506
Chapter 28 Using Standard ASP.NET Controls
Listing 28.1 1 2 3 4 5 6 7 8 9 10 11
XML Coding for
AdRotator
Control
http://www.site.com/banners/banner2.jpg http://affiliates.site.com?aff=jimco Get a really cool product by clicking here. 60 <Width>468 Technical 1000 12
The file can have any number of blocks. Table 28.2 lists the XML elements in the advertisement file and their use.
Table 28.2
XML Elements in an Advertisement File
Element Name
Description
Required
ImageUrl
The URL for the image that is displayed. This can be a relative or absolute URL.
Yes
NavigateUrl
The URL that the user will navigate to when the banner is clicked.
No
AlternateText
The text that appears in a tooltip when the user hovers over the banner. Also read by screen readers.
No
Height
The height of the banner.
No
Width
The width of the banner.
No
Keyword
A keyword that allows the control to filter based on categories.
No
Impressions
A value that defines how likely a specific banner will display in relation to other ads.
No
The Impressions element uses an arbitrary value that only has meaning in relation to the values specified for other ads. In other words, if one ad has an Impressions value of 500 and a second ad has an Impressions value of 1000, the second ad is twice as likely to appear.
TIP
28
URLs that you enter in the advertisement file must be encoded. Therefore, if your link contains special characters such as an ampersand, you must use the HTML encoded version of that character. In the case of an ampersand, & should be entered as &.
6055_28.qxp
12/7/2006
12:30 PM
Page 507
The AdRotator Control
507
The Keyword element is a powerful element and one that you will probably find many uses for. Suppose that you have an AdRotator control on two different pages. One of those pages features computer articles and the other features articles on finance. By specifying a keyword of Computers for ads of interest to readers of your computer articles and a keyword of Finance for ads of interest to readers of your finance articles, you can ensure that the most relevant ads are displayed to your users.
Creating a Simple AdRotator Page Let’s create a simple Web Form that displays rotating banner ads using the AdRotator control. You’ll need a few graphic files with the same dimensions to create the page. If you don’t have any handy, you can find an assortment of banners on the CD that accompanies this book. Begin by creating a new ASP.NET Web Form in a new Web site. Save the Web Form as adrotator.aspx. Now we’re ready to set up the rotating banners.
1. Add a new AdRotator control to the Web Form by either double-clicking on the AdRotator control in the Toobox or by dragging and dropping an AdRotator control onto the page.
2. You should see the Common AdRotator Tasks popup, as shown in Figure 28.10. Ignore that dialog and save adrotator.aspx. Figure 28.10 The Common AdRotator Tasks popup allows you to configure a data source. However, we’re not going to use it here.
Next we need to add some images to use in the AdRotator control. Create a new folder in your Web site called images and either copy the images from the Chapter42\Banners directory on the CD into that folder or add your own images.
Creating the Advertisement File The next step is to create an advertisement file to feed to the AdRotator control. Remember that an advertisement file is an XML file in a specific format that tells the AdRotator control how to behave, including what banners to display and where to link for each banner.
1. Create a new XML file by clicking File, New, Page and choosing XML from the General section, as shown in Figure 28.11.
2. Add the following XML code to the new XML file:
28
6055_28.qxp
508
12/7/2006
12:30 PM
Page 508
Chapter 28 Using Standard ASP.NET Controls
~/images/ComputerTown.jpg http://www.jimcosoftware.com Computers The best computers in town! 100 ~/images/dsw.jpg http://www.microsoft.com Computers All the software you need. 100 ~/images/Taxman.jpg http://www.asp.net Finance Don’t be late for April 15th. 100
3. Save the XML file as ads.xml. 4. Switch back to the adrotator.aspx page and click on the AdRotator control you added previously to select it.
5. In the Tag Properties pane, click on the AdvertisementFile property and click the button, as shown in Figure 28.12.
6. Browse to the ads.xml file that you saved in Step 3 and select it. 7. Click Open to set the AdvertisementFile property of the AdRotator control.
Figure 28.11 A new XML file is needed to contain an advertisement file for your AdRotator control.
28
6055_28.qxp
12/7/2006
12:30 PM
Page 509
The AdRotator Control
509
Figure 28.12 The Tag Properties pane is a convenient way to set the Advertisement File property of the AdRotator control.
AdvertisementFile Property button
Now save the adrotator.aspx page and browse it to see your ads in action. If you refresh the page a few times, you’ll see the ads change. Notice that even though the AdRotator control appears quite small in Design View in Expression Web, it resizes itself to match the size of your banner ads. To aid in the layout of your page, you might want to change the Height and Width properties of the AdRotator control to match the banners you are using. You will then easily be able to see how much page real estate is being taken up by the control while you’re designing your page. TIP Some people think that the AdRotator control rotates ads at a preset interval while a page is being displayed. That’s not the way it works. What it does is choose a random ad to display when the page is loaded. The chosen ad will not change until the page is reloaded.
In this example, the ad that is chosen is truly random because the Impressions element is the same for all the ads. (Even though we configured a Keyword element for each ad, we haven’t implemented any keyword filtering yet.) You can change the probability that a particular ad will display by changing the value of the Impressions element for that ad. Open the ads.xml file in Expression Web and change the value of the Impressions element for one of the ads from this 100
28
6055_28.qxp
510
12/7/2006
12:30 PM
Page 510
Chapter 28 Using Standard ASP.NET Controls
to this 500
and then save ads.xml and browse the adrotator.aspx page again. Refresh the page a few times and you’ll notice that the ad you changed will show up much more often than the other ads. TIP If you track the effectiveness of the ads you use, you can use the Impressions property to ensure that the ads that are most effective appear more often.
As noted previously, you can use the Keyword element in your advertisement file to ensure that ads that aren’t relevant to readers of a particular page in your Web site are not displayed. When we created the ads.xml file earlier, we added a Keyword element for each of our ads. We’ll now use the KeywordFilter property of the AdRotator control to restrict the ads that are displayed based on the specified keyword.
1. Change the Impressions element that you modified earlier back to the original value of 100.
2. Save the ads.xml file. 3. Open the adrotator.aspx Web Form in Expression Web. 4. Click the AdRotator control to make it active. 5. In the Tag Properties pane, change the KeywordFilter property to Computers, as shown in Figure 28.13.
6. Save the adrotator.aspx page. Figure 28.13 The KeywordFilter property allows you to ensure that only relevant ads get displayed.
The KeyworkFilter Property
28
6055_28.qxp
12/7/2006
12:30 PM
Page 511
The Calendar Control
511
Now browse the adrotator.aspx page and refresh it several times. Notice that only the ads with a keyword of Computers get displayed. The finance ad will not be displayed on this page. N OTE Some of you who have worked with ASP.NET (and possibly some who haven’t) may be wondering what happens to your ads if the page that’s being displayed is cached. The developers of ASP.NET thought about that too. What they did was write the AdRotator control so that it explicitly prevents the caching of ads. Even if you cache the page on which the AdRotator control appears, you are always guaranteed to get fresh ads.
The Calendar Control The ASP.NET Calendar control serves two purposes: it displays a date in a familiar format and it accepts user input of a date. The Calendar control can also be formatted using one of many auto-formatting styles.
Formatting the Calendar Control When you first insert a Calendar control onto a page, you are presented with the Common Calendar Tasks popup, as shown in Figure 28.14. By clicking the AutoFormat link in the popup, you can easily apply a preset style to the Calendar control, as shown in Figure 28.15. Figure 28.14 The Common Calendar Tasks popup appears automatically when a control is inserted or when you click the arrow button next to the control.
28
6055_28.qxp
512
12/7/2006
12:30 PM
Page 512
Chapter 28 Using Standard ASP.NET Controls
Figure 28.15 Formatting the Calendar control in an attractive style is simple using the AutoFormat feature.
➔
The Calendar control is most powerful when paired with an ASP.NET code file so that you can access the selected date programmatically. For general information on how to accomplish this, see “Using Expression Web with Visual Web Developer Express Edition”, p. 655 (Appendix A).
Calendar Control Properties The Calendar control exposes many properties to control not only its appearance, but also its behavior. Let’s have a look at some of the properties that are available when using the Calendar control.
CaptionAlign The CaptionAlign property controls the alignment of the text that is specified in the Caption property. Valid values are NotSet, Top, Bottom, Left, and Right. Figure 28.16 shows a Calendar control with a left-aligned caption of “Seminar Date”.
28
6055_28.qxp
12/7/2006
12:30 PM
Page 513
The Calendar Control
513
Figure 28.16 The caption of a Calendar control is a convenient way to display the purpose of your calendar.
DayNameFormat The DayNameFormat property defines how day names appear on your calendar. This property only applies when the ShowDayHeader property is set to True. Table 28.3 lists the valid values for this property.
Table 28.3
DayNameFormat Property Values
Property Value
Description
Full
Displays the full day name (i.e., Monday)
Short
Displays the short day name (i.e., Mon)
FirstLetter
Displays only the first letter of the day (i.e., M)
FirstTwoLetters
Displays the first two letters of the day (i.e., Mo)
Shortest
Uses the shortest format possible to provide a unique value for each day (i.e., Mo)
28 TIP In the English language, the Short property displays the same values as the property. Other languages may not display the same value.
FirstTwoLetters
6055_28.qxp
514
12/7/2006
12:30 PM
Page 514
Chapter 28 Using Standard ASP.NET Controls
FirstDayOfWeek The FirstDayOfWeek property configures which day appears as the leftmost day of the week in the Calendar control. Valid values are Default, Sunday, Monday, and so on. When set to Default, Sunday appears as the first day of the week.
NextMonthText The NextMonthText property configures the text for the link that moves to the next month when the ShowNextPrevMonth property is True and the NextPrevFormat property is set to CustomText. By default, the value is >, which appears as “>” in the Calendar control. The Calendar control, shown previously in Figure 28.16, shows the default value of > for the NextMonthText property as displayed in the Calendar control.
NextPrevFormat The NextPrevFormat property controls the format of the NextMonthText and PrevMonthText properties. Valid values are CustomText, ShortMonth, and FullMonth. When the value is set to CustomText, the format is dictated by the NextMonthText property.
PrevMonthText The PrevMonthText property is identical to the NextMonthText property except that it configures the text for the link that moves to the previous month when the ShowNextPrevMonth property is True and the NextPrevFormat property is set to CustomText. The default value is , which appears as “>>”. This property is only applicable when the SelectionMode property is set to DayWeekMonth.
SelectWeekText The SelectWeekText property configures the link text that is clicked to select an entire week. By default, the value is >, which appears as “>”. This property is only applicable when the SelectionMode property is set to DayWeek or DayWeekMonth.
ShowDayHeader The ShowDayHeader property is a Boolean property (True or False) that controls whether or not the day of the week appears as a header in each column of the Calendar control. The default value is True.
ShowGridLines The ShowGridLines property is a Boolean property (True or False) that controls whether or not the Calendar control displays gridlines with each date in its own cell. The default value is False.
ShowNextPrevMonth The ShowNextPrevMonth property is a Boolean property (True or False) that controls whether or not the Calendar control displays links that allow for navigation between the currently displayed month and the previous/next month. The default value is True.
ShowTitle The ShowTitle property is a Boolean property (True or False) that controls whether or not the month is displayed on the Calendar control. The default value is True.
TitleFormat The TitleFormat property controls the appearance of the calendar’s title when the ShowTitle property is set to True. The TitleFormat property can be set to either MonthYear or Month. In Figure 28.16, the value of this property is MonthYear.
28 UseAccessibleHeader The UseAccessibleHeader property causes ASP.NET to render the Calendar control with Title attributes on the HTML tags for accessibility purposes. The Title attribute shows up as a tooltip when the HTML element is hovered over. It is also read by screen readers.
6055_28.qxp
516
12/7/2006
12:30 PM
Page 516
Chapter 28 Using Standard ASP.NET Controls
VisibleDate The VisibleDate property controls what month is displayed when the Calendar control is loaded. Figure 28.17 shows the calendar that Expression Web provides to aid in setting this property. Note that only the month of the date you select is applicable.
Figure 28.17 Expression Web provides a nice calendar from which you can select dates for applicable properties of the Calendar control.
The Wizard Control Collecting data is a popular task for a Web developer. The traditional approach to accomplishing this task is to build large forms that are often cumbersome. In cases where there is a large amount of data to collect, Web developers will often use forms that span multiple pages. E-commerce sites are famous for this kind of approach, usually during the checkout process of a Web transaction. A wizard is a much better approach because it provides an interface that’s similar to a regular Windows application and it presents the user with a linear approach to collecting data.
28
The ASP.NET Wizard control takes care of all the plumbing so that if a user has to click the Previous button in the wizard to correct a previous entry, none of the data the user has entered into the wizard is lost. The Wizard control (Figure 28.18) is an incredibly powerful control that can be utilized easily without writing any code at all.
6055_28.qxp
12/7/2006
12:30 PM
Page 517
The Wizard Control
517
Figure 28.18 The Wizard control is a powerful way to present or collect data in a step-by-step interface, and no code is required.
Wizard Steps A Wizard control is made up of individual wizard steps, and each step is a particular type of step depending on its position within the wizard. Table 28.4 lists the types of steps in the Wizard control.
Table 28.4
Wizard
Control Step Types
Step Type
Description
Auto
The step type is determined by its position within the wizard.
Complete
This is the last step in the wizard. No buttons are displayed in this step.
Finish
This is the final step where user information is collected. Previous and Finish buttons are displayed in this step.
Start
The first step in the wizard. This is often an introduction step. A Next button is displayed in this step.
Step
A normal step in the wizard.
TIP In many cases, leaving the StepType at the default setting of Auto is sufficient.
Creating a Simple Wizard To gain a full understanding of how the Wizard control works, let’s create a simple wizard using the control and test some of the options available.
28
6055_28.qxp
518
12/7/2006
12:30 PM
Page 518
Chapter 28 Using Standard ASP.NET Controls
N OTE If you’d prefer, you can review the completed files from this chapter in the folder on the CD that accompanies this book.
Examples\Ch28\Website
We’ll create a simple wizard that does the following: ■
Displays a simple welcome message in Step 1.
■
Collects the user’s name and e-mail address in Step 2.
■
Collects the user’s street address in Step 3.
■
Displays checkboxes for different mailing lists in Step 4.
■
Displays a Finish message in Step 5.
Start by creating a new disk-based Web site and a new ASP.NET Web Form. Save the Web Form as wizard.aspx. After you’ve done that, you’re ready to add the Wizard control and begin customizing it.
1. Double-click on the Wizard control in the Toolbox to add a new wizard to the page. 2. If the Common Wizard Tasks pop-up isn’t visible, click the arrow button at the upper right of the Wizard control to display it.
3. Click the AutoFormat link in the Common Wizard Tasks pop-up. 4. Select Professional from the list of schemes and click OK. Your page should now look like Figure 28.19. Figure 28.19 You can give your Wizard control a more professional look by applying one of the preset schemes.
28
Note that two steps are created for you automatically. In this case, we’ll need five steps, so we need to create three additional steps.
1. If the Common Wizard Tasks pop-up isn’t visible, click the arrow button at the upper right of the Wizard control to display it.
2. Click the Add/Remove
WizardSteps
link to display the WizardStep Collection Editor.
3. Click the Add button three times to add three steps. The WizardStep Collection Editor should now look like Figure 28.20.
6055_28.qxp
12/7/2006
12:30 PM
Page 519
The Wizard Control
519
Figure 28.20 The WizardStep Collection Editor makes adding, editing, and removing WizardSteps fast and easy.
N OTE Notice that the Add button has a downward-pointing arrow at the right edge of the button. Clicking that arrow will allow you to choose between a WizardStep and a TemplatedWizardStep. We haven’t talked about TemplatedWizardSteps yet, so if you click the arrow on the Add button, choose WizardStep from the menu that appears.
4. Select Step 1 in the list of steps and change the Title property to “Welcome”, as shown in Figure 28.21. Figure 28.21 Editing the Title property for each step will make your wizard easier to use.
The Title Property
28
6055_28.qxp
520
12/7/2006
12:30 PM
Page 520
Chapter 28 Using Standard ASP.NET Controls
5. Select Step 2 in the list of steps and change the Title
property
to “Name/E-mail”.
6. Select the third step in the list of steps and change the Title property to “Address”. 7. Select the fourth step in the list of steps and change the Title
property
8. Select the final step in the list and change the Title
to “Finish”.
property
to “Lists”.
9. Click OK. By default, the Wizard control is too small to contain the controls that we’ll need to add for our wizard, so you’ll need to adjust the size. Using the Tag Properties pane, set the Width property of the Wizard control to 425px and the Height to 225px. After you make that change, the sidebar at the left side of the Wizard control will be far too wide. To correct that, expand the SideBarStyle section of the Tag Properties pane and change the Width property to 120px, as shown in Figure 28.22. Figure 28.22 The sidebar of the Wizard control must be resized so that it doesn’t take up so much room. You can adjust it using the SideBarStyle in the Tag Properties pane.
Your wizard should now look like Figure 28.23. Notice that the Title property that you set in the WizardStep Collection Editor is displayed in the sidebar so that the user can clearly identify the current step when navigating through the Wizard control.
28
6055_28.qxp
12/7/2006
12:30 PM
Page 521
The Wizard Control
521
Figure 28.23 The title of each step is clearly displayed in the sidebar of the Wizard control.
Now we’re ready to add the necessary controls to the Wizard control so that we can collect the information we need. Expression Web makes that easy by allowing you to navigate to each step in the Wizard control in the designer, just as you would in your Web browser.
Step 1: Welcome Click Welcome in the sidebar to switch to the first step. You will need to add a brief welcome message here. Click in the clear area at the right of the sidebar and enter the following text: Welcome. Please complete the following information. Click Next to continue.
Step 2: Name/E-mail Click Name/E-mail in the sidebar to switch to the second step. We’ll add a couple of TextBox controls here to collect the user’s name and e-mail address.
1. Click inside the clear area at the right of the sidebar and add the text “Enter name:
your
”.
2. Make sure the insertion point is located at the right of the text you entered in Step 1. Double-click on the TextBox control in the Toolbox to add a new textbox.
3. Click at the right of the textbox so that it’s not selected and then press Enter twice. 4. Enter the text “Enter
your e-mail:
”.
5. Make sure the insertion point is located at the right of the text you just entered. Double-click on the TextBox control in the Toolbox to add a new textbox. Your Wizard control should now look like Figure 28.24.
28
6055_28.qxp
522
12/7/2006
12:30 PM
Page 522
Chapter 28 Using Standard ASP.NET Controls
Figure 28.24 Step 2 of the Wizard control is now ready to accept a name and an e-mail address.
Step 3: Address We’re now ready to move on to Step 3 and create the interface for collecting the street address. Click Address in the sidebar to move to Step 3 of the wizard.
1. Click inside the clear area at the right of the sidebar and add the text “Enter
your
address:”.
2. Press Enter to insert a new line. 3. Double-click on the TextBox control in the Toolbox to add a new textbox. 4. Drag the right side of the TextBox control to make it wide enough to accommodate a street address (approximately 260px).
5. Click at the right of the textbox so that it’s not selected and press Enter twice.
28
6. 7. 8. 9. 10. 11. 12. 13. 14.
Enter the text “City:” and then press Enter. Double-click on the TextBox control in the Toolbox to add a new textbox. Click at the right of the textbox so that it’s not selected and press Enter twice. Enter the text “State:” and then press Enter. Double-click on the TextBox control in the Toolbox to add a new textbox. Drag the right side of the TextBox control and make it approximately 40px in width. Click at the right of the textbox so that it’s not selected and press Enter twice. Enter the text “ZIP:” and then press Enter. Double-click on the TextBox control in the Toolbox to add a new textbox.
Your Wizard control should now look like Figure 28.25.
6055_28.qxp
12/7/2006
12:30 PM
Page 523
The Wizard Control
523
Figure 28.25 Step 3 of the Wizard control contains many form fields used to collect the user’s address.
Step 4: Lists In Step 4 of our wizard, we’ll use checkboxes to allow users to sign up for various mailing lists. A check in a box means that the user wishes to subscribe to that particular list. Click Lists in the sidebar to move to Step 4 of the wizard.
1. Click inside the clear area at the right of the sidebar and enter the text “Sign
up for
the following mailing lists:”.
2. Press Enter twice to insert two new lines. 3. Double-click on the CheckBox control in the Toolbox to insert a new checkbox. 4. With the CheckBox control still selected, change the Text property in the Tag Properties pane to “New
Products”.
5. Click at the right of the checkbox to ensure that it’s not selected and press Enter. 6. Double-click on the CheckBox control in the Toolbox to insert a new checkbox. 7. With the CheckBox control still selected, change the Text property in the Tag Properties pane to “Expression
Web Tips”.
8. Click at the right of the checkbox to ensure that it’s not selected and press Enter. 9. Double-click on the CheckBox control in the Toolbox to insert a new checkbox. 10. With the CheckBox control still selected, change the Text property in the Tag Properties pane to “Monthly
Newsletter”.
Your Wizard control should now look like Figure 28.26.
28
6055_28.qxp
524
12/7/2006
12:30 PM
Page 524
Chapter 28 Using Standard ASP.NET Controls
Figure 28.26 Step 4 of the wizard makes mailing list selection easy with a series of checkboxes.
Step 5: Finish The final step should simply display a message thanking the user for subscribing. Click Finish in the sidebar to move to Step 4 of the wizard. Only the following task is required to complete the wizard: Click inside the clear area at the right of the sidebar and enter the text “Thank signing up for our mailing lists!”.
you for
You’re now ready to preview your wizard, but first you should switch back to the Welcome step by clicking on Welcome in the sidebar. You will need to do this because the wizard will always start on the step that is selected in the designer, even if that step is not the first one. After you’ve selected the Welcome step, save and browse the wizard.aspx page to test your Wizard control. As you fill out the information in the Wizard control, try clicking on the Previous button. You’ll see that the Wizard control will always maintain the information that you’ve entered so you never have to worry about re-entering information if you need to go back to a previous step. N OTE
28
The Wizard control you’ve created here doesn’t actually do anything with the information you’ve collected. In a real-world application, you would likely want to save the information from the wizard in a database.
6055_28.qxp
12/7/2006
12:30 PM
Page 525
Troubleshooting
Making ASP.NET Work for You You’ve experienced just a tiny taste of the capabilities of ASP.NET 2.0 in this chapter. There are some powerful and easy-to-configure controls in the standard Toolbox, but ASP.NET offers much more, some of which we will cover in the next few chapters. Even after reading all the material in this book, you will still need to experiment and try your hand at some real applications to grow your knowledge. The best way to learn a complex technology such as ASP.NET is to use it for one of your Web sites. Hopefully you’ll find that the knowledge base we’ve given you here will serve you well as you go out on your own.
Troubleshooting ASP.NET Controls Do Not Appear in the Browser My ASP.NET controls do not appear in the browser when I browse my pages. Instead, I just see an empty page or some text. For ASP.NET pages to be rendered as HTML code that the browser can understand, they must be handled by the ASP.NET engine. Otherwise, the browser will see tags it doesn’t understand and will display nothing at all. To resolve this problem, make sure that your ASP.NET page has an .aspx file extension. That will cause it to be executed by ASP.NET so it displays correctly.
XML Error When Browsing ASP.NET Page When I browse my ASP.NET page, I see an error in the browser that says “The XML page cannot be displayed.” I’m not trying to browse an XML page. Why does it say this? The code that makes up ASP.NET controls in your Web Form is actually composed of XML tags. However, when things are working as they should, ASP.NET transforms those tags into regular HTML code. If you see an error that the XML page cannot be displayed when browsing your page, it usually means that you are trying to browse the page using a file path such as C:\websites\page.aspx. ASP.NET pages must be browsed on a Web server for them to work correctly. Expression Web ships with the ASP.NET Development Server, which you can use to browse your ASP.NET pages when your site is a disk-based Web site. To make sure that the ASP.NET Development Server is being used:
1. Click Site, Site Settings and then click the Preview tab. 2. The Preview 3. The Use
➔
using Web site URL
option should be selected.
Microsoft ASP.NET Development Server
checkbox should be checked.
For more information on the ASP.NET Development Server, see “Using the ASP.NET Development Server”, p. 485 (Chapter 27).
525
6055_28.qxp
526
12/7/2006
12:30 PM
Page 526
Chapter 28 Using Standard ASP.NET Controls
Lagniappe (lan yap’) n.,
a gift or bonus
Formatting with Styles Expression Web enables you to apply direct formatting to ASP.NET controls like the Wizard control. However, you’re going to be much better off in the long run if you use CSS to format your controls. The Wizard control has many properties that allow you to take advantage of CSS styles. For example, Controls the formatting of the navigation buttons (Next, Previous, Finish, and so on).
■ NavigationButtonStyle
Controls the formatting of the sidebar buttons. In the example wizard you created, the sidebar buttons are the links that appear in the sidebar.
■ SideBarButtonStyle
■ SideBarStyle ■ StepStyle
Controls the formatting of the sidebar.
Controls the formatting of the wizard’s steps.
There are numerous other styles as well that will allow you to format your Wizard control exactly the way you want.
➔
For more information on CSS in Expression Web, see “Managing CSS Styles”, p. 311 (Chapter 18).
6055_29.qxp
12/7/2006
12:31 PM
Page 527
CHAPTER
29
Using ASP.NET Navigation Controls In this chapter Overview of Navigation Systems Creating a Sitemap File Using the ASP.NET Menu Control Using the ASP.NET TreeView Control Using the ASP.NET SiteMapPath Control Troubleshooting Lagniappe: Improving Navigation with Master Pages
6055_29.qxp
528
12/7/2006
12:31 PM
Page 528
Chapter 29 Using ASP.NET Navigation Controls
Overview of Navigation Systems 29
What is the most overlooked aspect of most Web sites? If you said it’s the navigational structure, you’re exactly right. Many Web designers spend a considerable amount of time creating great-looking graphics and carefully choosing just the right colors and then they quickly slap down an inefficient site navigation structure. A good Web designer will tell you that content is the most important aspect of any Web site. I certainly wouldn’t disagree with that, but I’d give navigational structure the same importance as content. After all, what good is great content if your site’s viewers are unable to locate it? One of the most popular navigation techniques in use today is the DHTML menu system. You’ve no doubt seen these menus on many Web sites. When you hover over a particular topic, a menu pops up, allowing you to dig deeper into the Web site’s content, as shown in Figure 29.1. Figure 29.1 The menu on the Jimco Software Web site is implemented using a DHTML menu system. Hover over a topic and you’ll get a menu for that topic.
Other navigational systems are more appropriate for more complex structures. For example, Microsoft’s MSDN Web site contains an enormous amount of hierarchical content. The sheer volume of content would quickly overwhelm a menu system such as the one shown in Figure 29.1. In these situations, a tree view is a much better system because it is, by nature, hierarchical. As shown in Figure 29.2, the tree view system works perfectly for a site like MSDN.
6055_29.qxp
12/7/2006
12:31 PM
Page 529
Overview of Navigation Systems
529
Figure 29.2 The tree view system is the perfect solution to presenting large amounts of hierarchical information.
29
Either of these navigation systems is nicely supplemented by a bread crumb system. Remember the story of Hansel and Gretel? Hansel left a trail of bread crumbs along the trail so he and Gretel would be able to find their way back to where they started. The bread crumb navigation system got its name from Hansel’s famous technique, and while it didn’t work out so well for Hansel and Gretel, bread crumbs can make a huge difference for your Web site visitors. Figure 29.3 shows the use of bread crumb navigation on the MSDN Web site. Figure 29.3 The bread crumb navigation system used on MSDN makes it easy to determine where you’ve been. Each time you dig deeper into the site, a new link is added to the bread crumb navigation system.
Bread crumb navigation
You might be asking yourself at this point just how difficult it is to build one or more of these cool navigation systems. With ASP.NET and Expression Web, it’s so easy you likely won’t believe it. ASP.NET offers a Menu control for creating DHTML menus, a TreeView control for creating tree view-style navigation systems, and a SiteMapPath control for easily creating bread crumb navigation systems. You can use each of these controls without writing
6055_29.qxp
530
12/7/2006
12:31 PM
Page 530
Chapter 29 Using ASP.NET Navigation Controls
any code at all, but they all expose advanced functionality as well for those Web designers who are more adept at programming.
29
Creating a Sitemap File Chances are that you’re going to want to use a couple of different ASP.NET navigation controls at the same time. For example, you might want to use the Menu control for your navigational menu system and the SiteMapPath control to provide bread crumb navigation links. Imagine the nightmare you’d have to deal with if you had to manage the links in each of those controls manually as your site grows and changes! Fortunately, ASP.NET allows you to define your site’s navigational structure in one place and then all the navigation controls automatically read that structure to produce your menu, bread crumb links, and tree view nodes. ASP.NET uses a special XML file called a sitemap file for this purpose. The code in Listing 29.1 shows a typical sitemap file.
Notice that a sitemap file has exactly one root siteMapNode. All other siteMapNodes are nested within the root siteMapNode.
➔
For a general primer on XML, see “Accessing Data with ASP.NET 2.0”, p. 635 (Chapter 35).
The easiest way to use a sitemap file is to save it as web.sitemap in the root directory of your Web site. As we progress through the rest of this chapter, you’ll get a good idea of how the sitemap file is used to build navigation structure into your Web site.
6055_29.qxp
12/7/2006
12:31 PM
Page 531
Using the ASP.NET Menu Control
531
TIP Expression Web’s Save dialog doesn’t have a file type specifically for sitemap files. If you select XML as the file type, Expression Web will add an .xml file extension, thus making the file invalid as a sitemap file. Therefore, you should choose All Files in the Save As Type dropdown in the Save dialog when saving your sitemap file.
Using the ASP.NET Menu Control As I mentioned previously, DHTML menus have become the most common navigational element on the Web these days. Almost every site uses them, and it’s pretty safe to say that all the sites operated by the major players use them. That level of popularity has caused enormous growth in the number of software programs that allow non-programmers to create and manage powerful navigation systems using DHTML menus. N OTE
On the CD that accompanies this book, you will find a free full copy of DHTML Menu Builder, an application I have long felt is the best of its kind. If you decide to use DHTML Menu Builder, you should not use the ASP.NET Menu control. Use one or the other based on your needs.
When it comes to implementing a DHTML menu system in Expression Web, you’ve got three choices: you can write your own code; you can use a third-party application to generate the code for your DHTML menus; or you can use a server-side solution such as the ASP.NET Menu control. Choosing a DHTML Menu System Web design is full of choices, so it should come as no surprise that there are plenty of choices in DHTML menu systems. Choosing the right system can be a burdensome task, but there are some general rules that might make it easier. If all your pages are ASP.NET pages, the ASP.NET Menu control is a good choice. By using the Menu control, you can take advantage of a sitemap file so all your navigation tools feed off the same data. You can also take advantage of other ASP.NET features such as themes and skins. If you have pages that are not ASP.NET (HTML pages, ASP pages, PHP pages, and so on), you have two choices: use a third-party tool to create your menus or write all the code yourself. I’m a big believer in going with a pre-built solution if one is available. Writing code for DHTML menus is a fairly large task. You may as well take advantage of someone else’s development and tedious debugging. However, carefully check out the system you plan on using. Ask other Web designers who’ve used it before you buy it, and don’t purchase a system based on feedback from amateur Web designers. Ask some experts for their honest opinion. DHTML Menu Builder (included on the CD that accompanies this book) is a great choice and is highly regarded by professional Web designers.
29
6055_29.qxp
532
12/7/2006
12:31 PM
Page 532
Chapter 29 Using ASP.NET Navigation Controls
Creating a Test Web Site Before we dig deeper into the ASP.NET Menu control, let’s create a Web site that will allow us to experiment with it and other navigation controls in ASP.NET.
29
1. Create a new Web site. 2. Delete the home page. 3. Create a new ASPX page. 4. Enter the text “Home
Page”
on the page and save it as default.aspx.
5. Create a new ASPX page. 6. Enter the text “Software
Page”
on the page and save it as software.aspx.
7. Create a new ASPX page. 8. Enter the text “Add-ins
Page”
on the page and save it as addins.aspx.
9. Create a new ASPX page. 10. Enter the text “Applications
Page”
on the page and save it as apps.aspx.
11. Create a new ASPX page. 12. Enter the text “Reviews
Page”
on the page and save it as reviews.aspx.
13. Create a new ASPX page. 14. Enter the text “About
Us”
on the page and save it as about.aspx.
15. Create a new ASPX page. 16. Enter the text “Contact
Us”
on the page and save it as contact.aspx.
17. Create a new XML file. 18. Add the code from Listing 29.1 to the file. 19. Choose All Files (*.*) from the Save As Type dropdown. 20. Save the file as web.sitemap.
➔
For more information on creating a Web site, see “Creating a Web Site”, p. 25 (Chapter 2).
N OTE
You can find the completed Web site for this chapter on the CD that accompanies this book. Look in the Examples\Ch29\Files\WebSite folder.
Adding a Menu Control The web.sitemap file is a special file that ASP.NET looks for when using navigation controls. If there is a web.sitemap file in the root of the Web site, ASP.NET will use it automatically to feed the navigation links in the controls you are using. You don’t have to write any code at all. It just happens automatically.
6055_29.qxp
12/7/2006
12:31 PM
Page 533
Using the ASP.NET Menu Control
533
To see what I mean by this:
1. Open the default.aspx page. 2. Make sure you are in Design View. 3. Place the insertion point below the text you entered on the page. 4. Insert a Menu control onto the page, as shown in Figure 29.4. 5. Click New Data Source from the Choose Data Source dropdown in the Common Menu Tasks dialog, as shown in Figure 29.5.
6. Choose the Sitemap option in the Data Source Configuration Wizard, as shown in Figure 29.6, and click OK. Figure 29.4 The Menu control is located in the Navigation section of the ASP.NET controls toolbox.
Figure 29.5 The Common Menu Tasks dialog makes it easy to configure a Menu control, including connecting it to a sitemap file in your Web site.
29
6055_29.qxp
534
12/7/2006
12:31 PM
Page 534
Chapter 29 Using ASP.NET Navigation Controls
Figure 29.6
29
The Data Source Configuration Wizard allows you to connect controls on your page to data. In this case, we’re connecting the Menu control to the sitemap file we created earlier.
Save the page and preview it in your browser. Notice that all you can see on the page is a black arrow. If you hover over that arrow, you’ll see the links from the sitemap file you created earlier. If you see a dialog warning you that the page contains dynamic elements and must be browsed from a Web server, see “Warned to Browse Page from Web Server” in the “Troubleshooting” section of this chapter.
One of the strange things about the ASP.NET sitemap file is that you are required to have exactly one root sitemap node. In the case of Listing 29.1, I created an empty sitemap node to satisfy that requirement. However, that causes the top-level link in the menu to be blank, as shown in Figure 29.7. The problem of a blank top-level menu item is easily resolved, but it requires you to go into Code View to fix it.
1. If it’s not already open, open default.aspx. 2. Switch to Code View. 3. Locate the code for the SiteMapDataSource
control.
It will look like this:
4. Change the code in Step 3 to this:
5. Save the page.
6055_29.qxp
12/7/2006
12:31 PM
Page 535
Using the ASP.NET Menu Control
Figure 29.7 Because the sitemap file must have one root node, the rendered menu has a blank link for the top-level link. As you’ll see, this is easily corrected.
Blank top-level menu item
29
TIP Expression Web provides IntelliSense support for editing ASP.NET controls. If you place the insertion point right before the closing bracket on the tag and press the spacebar, you will be able to add the ShowStartingNode attribute using IntelliSense.
Now browse the page again and you’ll see a menu system that more closely resembles what you expect. However, it’s not very pretty. Right now it only consists of a few text links. Luckily, there are quite a few options for sprucing up the appearance of a Menu control. If your Menu control only shows “root” in Design View and is invisible when you preview it in the browser, see “Cannot See Menu Control in Browser” in the “Troubleshooting” section of this chapter.
Formatting the Menu Control When it comes to formatting the Menu control, you have several different options. You can use the existing AutoFormat feature if you’d like to format it quickly. You can also use an ASP.NET theme, skin the control using the skinning features of ASP.NET, or use CSS styles. N OTE
535
We’ll cover the AutoFormat features and CSS styles for the Menu control here. ASP.NET themes and skins are outside the scope of this book. If you’d like more information on those topics as well as other ASP.NET 2.0 topics, read Sams Teach Yourself ASP.NET 2.0 in 24 Hours, Complete Starter Kit from Sams Publishing.
6055_29.qxp
536
12/7/2006
12:31 PM
Page 536
Chapter 29 Using ASP.NET Navigation Controls
Using the AutoFormat Feature 29
The quickest way to format the Menu control for a better appearance is by using the AutoFormat feature available from the Common Menu Tasks dialog, as shown in Figure 29.8. Figure 29.8 The Common Menu Tasks dialog contains a link for the AutoFormat function. This is by far the fastest way to format the Menu control for a better appearance.
AutoFormat link
Click the AutoFormat link and the AutoFormat dialog will appear with four different formats, as shown in Figure 29.9. You can remove any existing formatting by selecting the Remove Formatting option from the list. Choose a format you find attractive and click OK to apply it. Figure 29.9 The AutoFormat dialog contains four different formats for the Menu control. The Remove Formatting option allows you to easily remove any previously applied formatting.
6055_29.qxp
12/7/2006
12:31 PM
Page 537
Using the ASP.NET Menu Control
537
Using CSS Styles The Menu control exposes many properties that can be used to format the control using CSS. The Menu control uses two different kinds of styles: ■
Dynamic styles—Styles that apply to menu items that aren’t visible by default. These menu items appear when another menu item is hovered over.
■
Static styles—Styles that apply to menu items that are visible by default.
To format a Menu control using these styles, use the Tag Properties task pane to alter the styles. For example, to change the style of dynamic menu items, change the settings for the DynamicMenuItemStyle, as shown in Figure 29.10.
Figure 29.10 The DynamicMenuItemStyle controls the appearance of dynamic menu items. The easiest way to modify it is via the Tag Properties task pane.
➔ ➔
The DynamicMenuItemStyle property
For more information on the Tag Properties task pane, see “Editing Tag Properties”, p. 215 (Chapter 12). For more information on using CSS, see “Creating Style Sheets”, p. 289 (Chapter 17).
When you choose to automatically format the Menu control using the AutoFormat dialog, you are actually just setting some of the CSS properties of the menu. Open the AutoFormat dialog for the menu and choose the Simple scheme. Now look at the properties that have
29
6055_29.qxp
538
12/7/2006
12:31 PM
Page 538
Chapter 29 Using ASP.NET Navigation Controls
been set in the Tag Properties task pane. You should see several of the CSS properties set, as shown in Figure 29.11.
29 Figure 29.11 The Tag Properties task pane shows that selecting an AutoFormat scheme simply presets many of the CSS properties for the Menu control.
CSS properties set by AutoFormat scheme
You can experiment with the styles available using the Tag Properties task pane. Just keep in mind that changing a style for a dynamic item will only affect those items that are not initially visible and will not affect the appearance of any items that are visible when the Menu control is first loaded.
Using the ASP.NET TreeView Control Now that you’ve dug through some of the features of the Menu control and how to use it on a page, you’ll have no trouble at all using the TreeView control. In fact, it’s quite similar to the Menu control and it can use the same sitemap file you used with the Menu control. To add a TreeView control to your page:
1. Open default.aspx. 2. Place the insertion point where you would like the TreeView control to be inserted. 3. Double-click the TreeView control in the toolbox to add it to the page.
6055_29.qxp
12/7/2006
12:31 PM
Page 539
Using the ASP.NET TreeView Control
539
4. In the Common TreeView Tasks dialog, select SiteMapDataSource1 from the Choose Data Source dropdown, as shown in Figure 29.12.
29 Figure 29.12 The TreeView control uses the same SiteMapDataSource1 used by the Menu control.
Save the page and preview it in your browser. The TreeView control will display links to pages in your Web site, as shown in Figure 29.13. Figure 29.13 Once connected to the sitemap file we created earlier, the TreeView control displays links to all your pages in a hierarchical tree. Parent nodes contain a minus button that can be clicked to collapse the nodes beneath them.
Minus button
6055_29.qxp
540
12/7/2006
12:31 PM
Page 540
Chapter 29 Using ASP.NET Navigation Controls
If the TreeView control is not visible in the Web browser, see “TreeView Not Visible in Browser” in the “Troubleshooting” section of this chapter.
29
Each link in a TreeView control is referred to as a node. There can be several different types of nodes in a TreeView control: ■
Root node—Each TreeView contains exactly one root node. The root node is the toplevel node. There are no nodes above the root node.
■
Parent node—A parent node is a node that has one or more nodes nested beneath it. In the TreeView control in Figure 29.13, the Software node is a parent node.
■
Leaf node—A leaf node is any node that has no child nodes. The only node in Figure 29.13 that is not a leaf node is the Software node. N OTE
You might be wondering what the root node is in Figure 29.13. Remember that we configured SiteMapDataSource1 so the root node is not shown. Therefore, the root node for the TreeView is not shown on the page.
Notice that the Software node has a minus button next to it that can be clicked to collapse the nodes beneath it. You can then click the plus sign to expand the nodes again.
Formatting the TreeView Control The TreeView control can be easily formatted using the AutoFormat dialog, just as you did with the Menu control. However, as shown in Figure 29.14, there are many more choices in the TreeView control’s AutoFormat dialog.
Figure 29.14 The TreeView control offers many formatting options in the AutoFormat dialog.
6055_29.qxp
12/7/2006
12:31 PM
Page 541
Using the ASP.NET TreeView Control
Using the
TreeView
Control’s Properties
The TreeView control also has several unique formatting properties you can set in the Tag Properties task pane. TIP When you set the properties of any ASP.NET control, Expression Web simply adds the property to the control’s tag in Code View. Therefore, you could set properties in Code View instead of using the Tag Properties task pane. Expression Web will give you IntelliSense for all properties in Code View.
Property The ExpandDepth property controls the number of levels in the TreeViewstyle menu that are initially visible when your page loads. The default value is FullyExpand, which expands all nodes in the TreeView control. However, you can specify any number of levels to expand by default by specifying a number for the ExpandDepth property. ExpandDepth
Notice in Figure 29.13 that the Software node is expanded so you can see the Applications and Add-ins nodes. To configure the TreeView so it is fully collapsed, set the ExpandDepth property to 0. ImageSet Property As shown in Figure 29.15, the ImageSet property configures the images used in the TreeView control. Notice that the values available for this property reflect the AutoFormat options available in Figure 29.14.
Figure 29.15 The ImageSet property controls the images used for the TreeView control. The values available match the AutoFormat options.
541
29
6055_29.qxp
542
12/7/2006
12:31 PM
Page 542
Chapter 29 Using ASP.NET Navigation Controls
Property The NodeIndent property configures the number of pixels that nodes are indented. Note that only nodes that are children of other nodes are affected. In the case of the TreeView control we’re using, only the Applications and Add-ins nodes are affected by the NodeIndent property. NodeIndent
29
Property The ShowCheckBoxes property allows you to display checkboxes on specific types of nodes. Valid values are None, Root, Parent, Leaf, or All. By showing checkboxes for nodes, you can allow users to select multiple nodes in a TreeView control.
ShowCheckBoxes
The TreeView control in Figure 29.16 has a ShowCheckBoxes property set to Leaf. Figure 29.16 If you show checkboxes on TreeView control nodes, users can select multiple nodes. The ShowCheckBoxes
property gives you control over which nodes display checkboxes.
Property The ShowExpandCollapse property configures whether the plus and minus buttons are displayed for parent nodes. The TreeView control in Figure 29.13 has the ShowExpandCollapse property set to True. ShowExpandCollapse
ShowLines Property By default, there are no lines connecting nodes in a TreeView control. If you’d like lines to be drawn connecting the nodes, set the ShowLines property to True (see Figure 29.17).
6055_29.qxp
12/7/2006
12:31 PM
Page 543
Using the ASP.NET TreeView Control
543
Figure 29.17 The ShowLines property controls the appearance of lines connecting TreeView control nodes.
Using CSS Styles The TreeView control provides a full range of CSS styles to make formatting with CSS easy. Figure 29.18 shows the different CSS properties available for the TreeView control.
Figure 29.18 The Tag Properties task pane shows the many CSS styles available when using a TreeView control.
29
6055_29.qxp
544
29
12/7/2006
12:31 PM
Page 544
Chapter 29 Using ASP.NET Navigation Controls
Just as with the Menu control, any AutoFormat options you choose for a TreeView will be applied using the CSS styles for the control. To tweak the configuration of formatting applied using the AutoFormat dialog, use the various style properties for the control.
Using the ASP.NET SiteMapPath Control The SiteMapPath control improves your Web site’s navigation by providing users with a bread crumb-style navigation bar, as shown in Figure 29.19. Figure 29.19 The SiteMapPath control is a convenient way to allow users to easily navigate your Web site. As a user navigates the site, the SiteMapPath control shows links to where he or she has been.
Unlike the Menu and TreeView controls, the SiteMapPath control doesn’t require you to configure a data source as long as a web.sitemap file exists in the root of the Web site. Just drop the control on the page and it will automatically use the data in the sitemap file to create links. To use the SiteMapPath control:
1. Open the addins.aspx page. 2. Place the insertion point on the page underneath the text you entered when the page was created.
3. Insert a SiteMapPath control from the toolbox. That’s all there is to it. After the SiteMapPath control is added to the page, it automatically connects to the sitemap file and displays the appropriate links.
6055_29.qxp
12/7/2006
12:31 PM
Page 545
Using the ASP.NET SiteMapPath Control
545
Formatting the SiteMapPath Control As with the other controls we’ve looked at, the SiteMapPath control can be easily formatted using the AutoFormat dialog available from the Common SiteMapPath Tasks dialog. The AutoFormat schemes available are identical to the ones available for the Menu control. In addition to the AutoFormat schemes, there are several CSS style properties you can use to affect the appearance of your SiteMapPath control, as shown in Figure 29.20.
Figure 29.20 Just as with the other navigation controls, the SiteMapPath control has plenty of CSS style properties you can use to configure the look of the control.
Using
SiteMapPath
Properties
There are several properties that affect the behavior and appearance of the SiteMapPath control: property—Controls the number of parent nodes displayed. If this value is set to the default value of -1, all parent nodes are displayed.
■ ParentLevelsDisplayed
property—Controls the direction of the SiteMapPath control. The default value is RootToCurrent, which displays the root node at the left and the current location at the far right. The other valid setting is CurrentToRoot, which reverses the order of the nodes.
■ PathDirection
property—Configures the character displayed between nodes. The default is the : (colon) character.
■ PathSeparator
The ASP.NET 2.0 navigation controls make building a powerful and dynamic navigation system quite easy, and you can do it without writing a single line of ASP.NET code. You
29
6055_29.qxp
546
12/7/2006
12:31 PM
Page 546
Chapter 29 Using ASP.NET Navigation Controls
can, of course, significantly add to the functionality of these controls with ASP.NET code, but as you’ve seen in this chapter, it’s not necessary to be a programmer to build perfectly functional site navigation with ASP.NET.
Troubleshooting Warned to Browse Page from Web Server I’m trying to preview an ASP.NET page in my browser, but Expression Web warns me that the page contains dynamic content and must be browsed from a Web server. I thought ASP.NET pages were previewed using the ASP.NET Development Server. What’s wrong? In my testing, I found that Expression Web would sometimes preview a page from a file location instead of using the ASP.NET Development Server. When this happens, just close your browser and preview the page again. It should preview correctly in the ASP.NET Development Server.
Cannot See
Menu
Control in Browser
I have added a Menu control to my page, but when I preview the page, the Menu control isn’t there. The most common cause of this is a missing data source for the Menu control. Make sure to configure a data source using the Choose Data Source dropdown on the Common Menu Tasks dialog. If you’ve already configured a data source, make sure it is selected in the dropdown before you preview the page. TreeView
Not Visible in Browser
I’ve added a TreeView control to my page, but when I preview the page in my browser, I don’t see the control. Unlike the SiteMapPath control, both the Menu and TreeView controls require a data source on the page. (The data source is not visible in Design View.) If you can’t see the TreeView control, make sure a data source has been chosen from the Choose Data Source dropdown on the Common TreeView Tasks dialog. If a data source does not exist in the dropdown, create one as described earlier in this chapter.
Lagniappe (lan yap’) n.,
a gift or bonus
Improving Navigation with Master Pages You’ve seen some powerful navigation features in this chapter. To make the best use of these navigation controls, however, you should consider using them with ASP.NET Master Pages.
➔
For more information on using ASP.NET Master Pages, see “Using ASP.NET Master Pages and User Controls,” p. 549 (Chapter 30).
If you use navigation controls in combination with ASP.NET Master Pages, insert the navigation controls on one page only; ASP.NET will automatically add the controls to all your
6055_29.qxp
12/7/2006
12:31 PM
Page 547
Lagniappe: Improving Navigation with Master Pages
other pages when the pages are browsed. Using this method makes managing your navigation much more efficient because making a change is as easy as changing one page. Without Master Pages, a navigation change would require you to manually update every page that uses the navigation controls. Note that you can also use Expression Web’s Dynamic Web Templates if you choose. For a comparison of using Master Pages versus Dynamic Web Templates, see the sidebar “Master Pages vs. Dynamic Web Templates”, p. 556 (Chapter 30).
➔
For more information on using Dynamic Web Templates, see “Using Dynamic Web Templates”, p. 363 (Chapter 21).
547
6055_29.qxp
12/7/2006
12:31 PM
Page 548
6055_30.qxp
12/7/2006
12:33 PM
Page 549
CHAPTER
30
Using ASP.NET Master Pages and User Controls In this chapter The Need for a Common Layout The Master Page The Content Page Developing a Master Page Web Site Troubleshooting Lagniappe: Converting an Existing Site to a Master Page Site
6055_30.qxp
550
12/7/2006
12:33 PM
Page 550
Chapter 30 Using ASP.NET Master Pages and User Controls
The Need For a Common Layout Think for a moment about your Internet viewing habits. When you are clicking links on a Web site, how do you determine if the information you are viewing is on the same Web site as the previous page? Most of you will probably agree that the most prevalent indicator is the style and layout of the Web site. In other words, if I’m viewing an article on the CNET Web site and I click a link, if the new page has the same layout and appearance as the previous page, my assumption is that it’s the same Web site. That is exactly why a common layout is vital to the success of your Web site.
30
There are many techniques used by Web developers to facilitate a common layout. One of the most common is the use of templates. Microsoft’s previous offering in this area is the Dynamic Web Template, which was introduced in FrontPage 2003. Dynamic Web Templates were the popular choice for inclusion in FrontPage because they were a tried and proven technique that was already in use by Macromedia (now Adobe) Dreamweaver. TIP Microsoft’s implementation of Dynamic Web Templates is, in fact, so close to Dreamweaver’s that the two are completely interchangeable. You can create a Dynamic Web Template in Expression Web and use it in Dreamweaver, and vice versa.
➔
For more information on Dynamic Web Templates, see “Using Dynamic Web Templates”, p. 363 (Chapter 21).
The Master Page A Master Page is a special kind of ASP.NET page that contains graphics, HTML code, ASP.NET controls, and code that is shared between pages. ASP.NET 2.0 Master Pages are similar to Dynamic Web Templates in that they facilitate the development of a common user interface and a common look and feel. However, they also represent a substantial step up from Dynamic Web Templates because they fully support the ASP.NET code model and allow you to share not only user interface elements, but also code between pages. Just like a Dynamic Web Template, you define areas where page-specific content will exist. When you create a page and attach it to a Master Page, you can add content on that page only in the areas that have been designated in the Master Page.
N OTE
For more information on developing ASP.NET applications, read Sams Teach Yourself ASP.NET 2.0 in 24 Hours, Complete Starter Kit from Sams Publishing (ISBN: 0-6723-2738-4).
In a Dynamic Web Template, the areas where page-specific content can exist are called editable regions. In a Master Page, two ASP.NET controls are used instead: the Content control and ContentPlaceHolder control.
6055_30.qxp
12/7/2006
12:33 PM
Page 551
The Master Page
551
N OTE A Master Page has a file extension of .master. A Content Page, just like any other ASP.NET Web Form, has a file extension of .aspx. You cannot apply a Master Page to a page unless that page is an ASP.NET Web Form.
The ContentPlaceHolder control exists on the Master Page. Each ContentPlaceHolder control is mapped to a Content control on a page that is attached to the Master Page. That page is called the Content Page. A Master Page is not required to have ContentPlaceHolder controls on it, but without them, there is no way to add content to a page that uses that Master Page. You can define all content in the Master Page if you wish. The Content Page can then provide its own content or simply use the content that the Master Page provides. Expression Web fully supports all aspects of Master Pages, so it’s not necessary to write any code to take advantage of this powerful feature. To write server-side ASP.NET code for your Master Pages, you’ll want to use a tool made for that purpose such as Microsoft Visual Web Developer Express Edition. Because of Expression Web’s excellent support for ASP.NET 2.0, it’s convenient to use both Expression Web and an ASP.NET application development tool in combination to build full-featured ASP.NET applications.
➔
For more information on using Expression Web with Visual Web Developer, see “Using Expression Web with Visual Web Developer Express Edition”, p. 655 (Appendix A).
To create a new Master Page, select File, New, Page and select Master Page from the list of page templates, as shown in Figure 30.1. Figure 30.1 The New dialog contains a page template for a Master Page. When you choose it, Expression Web creates a new Master Page with one ContentPlaceHolder control on it.
30
6055_30.qxp
552
12/7/2006
12:33 PM
Page 552
Chapter 30 Using ASP.NET Master Pages and User Controls
TIP You can select either General or ASP.NET from the list of page types in the New dialog. The option to create a new Master Page exists from either one of these choices and there is no difference in the two. It’s purely your choice.
30
After you’ve created a new Master Page, you should save it with a .master file extension. As I stated earlier, it’s not necessary that your Master Page contain a ContentPlaceHolder control, but if you save a Master Page that doesn’t contain a ContentPlaceHolder control, Expression Web will prompt you with a warning dialog, as shown in Figure 30.2. Figure 30.2 Expression Web will allow you to save a Master Page that contains no ContentPlaceHolder controls, but
it will ask you just to be sure.
TIP I think the message in Figure 30.2 is poorly worded. By calling a ContentPlaceHolder a “content region,” Microsoft is making it easy to confuse ContentPlaceHolder controls with Content controls. Don’t fall into that trap. Content controls exist on Content Pages. When Expression Web says “content region,” what it really means is the ContentPlaceHolder control.
Let’s have a quick look at the of a Master Page:
This is content from the Master Page.
This Master Page contains one ContentPlaceHolder control named contentplaceholder1. I’ve added some text to that ContentPlaceHolder control. The text I’ve added will also appear on any Content Pages, but because the content is inside a ContentPlaceHolder control, I can use my own content for that section in my Content Page. To understand what I mean by that, let’s have a quick look at a Content Page.
6055_30.qxp
12/7/2006
12:33 PM
Page 553
The Content Page
553
The Content Page A Content Page is a special kind of page. It cannot have any content in it unless that content is inside a Content control. When you first look at the HTML code of a Content Page, it will seem quite odd to see it completely empty except for the standard ASP.NET directives. To create a new Content Page, select File, New, Page and then select Create from Master Page in the New dialog, as shown in Figure 30.3. Figure 30.3 You can hook up a new ASP.NET Web Form to a Master Page by selecting the option to create a new page from an existing Master Page.
After you click OK, you will be prompted to select the Master Page, as shown in Figure 30.4.
Figure 30.4 You must click Browse and select a Master Page. Expression Web won’t let you just type the path.
30
6055_30.qxp
554
12/7/2006
12:33 PM
Page 554
Chapter 30 Using ASP.NET Master Pages and User Controls
TIP You can define a default Master Page inside a special ASP.NET configuration file called We won’t cover much about the web.config file in this book. If you want more information on using the web.config file or other ASP.NET configuration files, read Sams Teach Yourself ASP.NET 2.0 in 24 Hours, Complete Starter Kit from Sams Publishing (ISBN: 0-6723-2738-4). web.config.
30
After you choose the Master Page and click OK, you’ll see the new Content Page along with all the content it has pulled from the Master Page, as shown in Figure 30.5. Figure 30.5 The new Content Page contains all the content from the Master Page. Any content in a Content control can be customized in the Content Page.
Notice that the text that was in the ContentPlaceHolder control in the Master Page is now located in a shaded area on the Content Page. That shaded area is the Content control. At the upper left corner of the Content control is the ID of the ContentPlaceHolder control on the Master Page that is feeding the Content control. Note that Expression Web displays “(locked)” next to the ID, indicating that the Content control is currently configured to display content from the Master Page. To override that setting so you can change the content in the Content control, click the button at the upper right of the Content control and select Create Custom Content from the Common Content Tasks menu, as shown in Figure 30.6. Figure 30.6 Click the button to display the Common Content Tasks
popup. You can then choose to define your own content for the Content control.
When you click the Create Custom Content link, “(locked)” will no longer be displayed on the Content control and you can click inside it and add your own content.
6055_30.qxp
12/7/2006
12:33 PM
Page 555
The Content Page
555
TIP Content controls will always take up the entire width of a page unless they are inside a table or other container. They are also not resizable in Expression Web. They will automatically resize themselves when a page is browsed.
If you want to manipulate the size of a Content control, insert it into a table cell. You can then resize the table cell to control the size of the Content control within it.
If you decide that you’d like the Content control to revert back to the content from the Master Page, you can simply click the button on the control to display the Common Content Tasks popup again and then click the Default to Master’s Content link. When you do, Expression Web asks you to confirm your choice. CAUTION If you change the content in a Content control and then later choose to revert back to the content from the Master Page, all the custom content for the Content control will be lost. Even if you then switch back to display the custom content, the previously entered content will be gone. Make absolutely sure that you want to revert to the Master Page’s content before you confirm that choice. When in doubt, save the content to a temporary page first so you can recover it later if you change your mind.
Figure 30.7 shows the Content Page from Figure 30.5 in Code View. Notice that the only code that exists in the Content Page is code that ASP.NET uses to identify properties of this particular page. No other HTML code appears in the page. Also notice that the name of the Master Page to which this page is attached appears at the upper right corner of the page. Figure 30.7 A Content Page contains nothing other than Content controls and the standard ASP.NET code at the top of the page. In this case, the page is getting all content from the Master Page, so no Content controls are present.
30
6055_30.qxp
556
12/7/2006
12:33 PM
Page 556
Chapter 30 Using ASP.NET Master Pages and User Controls
After custom content is defined for the page, Expression Web adds a Content control to the page and the HTML for the custom content is added inside the Content control, as shown in Figure 30.8. Figure 30.8
30
Expression Web adds a Content control to the page when custom content is created. Notice the absence of standard HTML tags such as , , and .
If you see a parser error when browsing a Content Page, see “Parser Error When Browsing Content Page” in the “Troubleshooting” section of this chapter.
Master Pages versus Dynamic Web Templates You might be wondering at this point whether you should choose Master Pages or Dynamic Web Templates for your Web site. It actually depends on whether ASP.NET 2.0 is available to you. If it is, Master Pages represent a significant improvement over the Dynamic Web Template model. If you’ve used Dynamic Web Templates in the past, you may have noticed that there is no way to update all pages attached to a Dynamic Web Template if your Web site is opened via the FrontPage Server Extensions. That’s because the FrontPage Server Extensions do not support Dynamic Web Templates, and because Microsoft is in the process of phasing out FrontPage Server Extensions, it’s likely that you will never see support for Dynamic Web Templates added to them. Master Pages, on the other hand, are not a design-time tool. A Master Page is combined with the content on a Content Page when a page is browsed. In a large site, this subtle difference is actually a huge convenience. It means that you don’t have to spend a lot of time waiting on changes to thousands of pages when you update your Master Page. Simply make the update to your Master Page, save that change, and when you browse any Content Page that uses the Master Page, the new change will be present. The other major advantage to using Master Pages (and perhaps the greatest advantage of all) is that Master Pages are ASP.NET pages and can run ASP.NET code. Even if you aren’t currently writing any ASP.NET code for your site, it’s still a wise move to be prepared to add that functionality to your site with the least amount of hassle. If your architecture is already running on ASP.NET, enhancing it with code at a later date will be a simple task. If you aren’t yet convinced that ASP.NET 2.0 is a technology that you should be using right now, you will be after you finish the upcoming chapters. There’s no reason at all why you should not focus your Web site development on this technology, and using Master Pages is a big step in the right direction.
6055_30.qxp
12/7/2006
12:33 PM
Page 557
Developing a Master Page Web Site
557
Developing a Master Page Web Site Now that you have a good overview of how Master Pages work, let’s create a simple Web site using Master Pages. N OTE For this exercise, you will use the files in the Examples\ch30\files folder on the CD that accompanies this book. You’ll also find the completed Master Page site at that location.
30
Creating the Master Page The Master Page will contain a table that will control the layout of the Web site. To create the Master Page, follow these steps:
1. Create a new Master Page by selecting File, New, Page and selecting Master Page from the list of available page types.
2. Click OK to create the Master Page. 3. Click the ContentPlaceHolder control to select it and then delete it from the page. 4. Click on Table, Insert Table. 5. In the Insert Table dialog, configure the table as follows: ■
Set both the Rows and Columns to 2.
■
Set the Width to 95 and select the In Percent radio button.
■
Set both cellspacing and cellpadding to 0.
■
Set the border size to 0.
■
Check the Enable
Layout Tools
checkbox.
The Insert Table dialog should now look like Figure 30.9. Click OK to insert the table. TIP The default ContentPlaceHolder control is deleted from the page at this point because anything that exists within a ContentPlaceHolder control can be customized by the Content Page. When you are creating a Master Page, it’s often preferable to delete the default ContentPlaceHolder control and then insert new ContentPlaceHolder controls after you have defined where you want custom content to exist. That’s the method we’ll use in this chapter.
➔
For more information on inserting and configuring tables, see “Using Tables and Layout Tables”, p. 149 (Chapter 9).
6055_30.qxp
558
12/7/2006
12:33 PM
Page 558
Chapter 30 Using ASP.NET Master Pages and User Controls
Figure 30.9 The table you are configuring here will define the layout for the Master Page.
30
The table you just inserted will hold the common user interface elements for the Web site. We need to add a logo and change a few of the table’s attributes.
1. Copy the file logo.jpg from this book’s CD to your hard drive and insert it into the upper left cell.
2. Hover over the border of the layout table until it turns green and then click it to select it.
3. Click the down arrow on the width indicator for the column containing the logo and select Change Column Width from the menu.
4. 5. 6. 7. 8.
In the Column Properties dialog, change the width of the column to 161. Uncheck the Clear Uncheck the Make
Contradicting Width Column Autostretch
checkbox.
checkbox.
Click OK. Click the down arrow on the width indicator for the second column and select Make from the menu.
Column Autostretch
6055_30.qxp
12/7/2006
12:33 PM
Page 559
Developing a Master Page Web Site
559
Your table should now look like Figure 30.10. Figure 30.10 The cell containing the logo is exactly 161 pixels wide, while the remainder of the table stretches automatically to fill the rest of the browser window.
➔
For more information on working with images in Expression Web, see “Using Graphics and Multimedia”, p. 241 (Chapter 14). If you configure the width of a column but it doesn’t seem to stay at that width, see “Column Width Doesn’t Stick” in the “Troubleshooting” section of this chapter.
At this point, save the page as master.master. When you do, Expression Web will prompt you to save the spacer image, as shown in Figure 30.11. When you configured the leftmost column to an explicit width of 161 pixels, Expression Web added a transparent spacer image into the table so that the column width wouldn’t change. Since we have a logo image already in the column, the spacer image isn’t really necessary, but we’ll leave it there in case we decide to remove the logo later. Figure 30.11 Expression Web adds a spacer image to your table. You’ll need to save this file into your Web site to continue.
30
6055_30.qxp
560
12/7/2006
12:33 PM
Page 560
Chapter 30 Using ASP.NET Master Pages and User Controls
We have a couple of other areas to configure for the Master Page. Next, we’ll add a menu down the left edge of the page and an ASP.NET AdRotator control in the top area.
1. Place the insertion point in the cell below the logo. 2. Insert the image menu_top.jpg into the cell. 3. Press Shift+Enter on your keyboard to insert a new line break after the image. 4. Right-click in the cell with the menu images and choose Cell Properties from the menu. 5. Insert a new table with a width of 95%, 1 column and 1 row, a border of 0, and cell30
padding and cellspacing values of 0.
6. Type MENU into the new table. 7. Insert the image menu_bottom.jpg under the table you just created. 8. Click the dropdown next to Background Color and select More Colors from the menu. 9. Click the Select button in the More Colors dialog as shown in Figure 30.12. 10. Place the color dropper over the blue color on the logo and click to select that color. 11. Click OK in the More Colors dialog to finish selecting the color. 12. Click OK in the Cell Properties dialog to apply the new color. Your page should now look like Figure 30.13. Figure 30.12 The More Colors dialog provides additional tools for selecting colors. In this case, the eye dropper is used by clicking the Select button.
6055_30.qxp
12/7/2006
12:33 PM
Page 561
Developing a Master Page Web Site
561
Figure 30.13 The column for the menu has been formatted with some images and a background color for an attractive look.
30
N OTE The table you inserted into the menu cell prevents any menu text or control from extending beyond the width of the cell. Without the table in the cell, it’s possible that a menu would cause the cell to automatically widen. Because we’ve set a background color for the cell, having it extend beyond the width of the graphics would cause an unprofessional appearance.
N OTE We won’t add a menu to the page in this example. Instead, we’ll use the word “MENU” as a placeholder. In a real-world application, you would add a menu, or possibly an ASP.NET Menu control, to the left side of this page.
We’re now ready to configure the top row of the table. Remember that we want to add an ASP.NET AdRotator control to this page. We’ll use the standard banner size of 468 pixels wide by 60 pixels high. Let’s add a new layout cell now to contain the AdRotator control.
1. Click inside the upper right cell in the table. 2. If the Layout Tables and Cells task pane is not already visible, select Task Panes, Layout Tables and Cells from the menu to activate it.
3. In the Layout Tables and Cells task pane, click the Draw in Figure 30.14.
Layout Cell
button, as shown
6055_30.qxp
562
12/7/2006
12:33 PM
Page 562
Chapter 30 Using ASP.NET Master Pages and User Controls
Figure 30.14 The Draw Layout Cell feature in Expression Web is the perfect tool for creating a new cell to hold our AdRotator
The Draw Layout Cell button
control.
30
4. Click and drag to draw a cell that is approximately 468 pixels wide and 60 pixels high in the center of the large top cell.
5. Right-click on the layout cell and select Cell Properties to display the Cell Properties dialog.
6. Change the cell’s width to 470 and the height to 70, as shown in Figure 30.15. 7. Drag the layout cell so it is at the top left of the cell to the right of the logo, as shown in Figure 30.16. If you are unable to drag the new layout cell, see “Cannot Drag Layout Cell” in the “Troubleshooting” section of this chapter.
6055_30.qxp
12/7/2006
12:33 PM
Page 563
Developing a Master Page Web Site
563
Figure 30.15 Use the Cell Properties dialog to define the dimensions for the new layout cell. In this case, we want it to be just a bit larger than a standard Web site ad banner.
30
Figure 30.16 The table now contains a new table layout thanks to the layout tables feature in Expression Web. We now have full control over the placement of the AdRotator control.
➔ ➔
For more information on the layout tables feature in Expression Web, see “Using Tables and Layout Tables”, p. 149 (Chapter 9). For more information on using the ASP.NET AdRotator control, see “Using Standard ASP.NET Controls”, p. 495 (Chapter 28).
We now need to define the areas of the Master Page that we will allow to be customized by the content in the Content Page. In this set of steps, we’ll create two areas of customizable content: the main content area and an area along the right edge of the page.
6055_30.qxp
564
12/7/2006
12:33 PM
Page 564
Chapter 30 Using ASP.NET Master Pages and User Controls
1. Right-click in the cell just to the right of the menu cell and choose Cell
Properties
from the menu.
2. Change the vertical alignment of the cell to Top and click OK. 3. From the Standard ASP.NET controls section of the Toolbox, add a new ContentPlaceHolder
control to the cell.
4. If the Tag Properties task pane is not visible, select Task Panes, Tag Properties to activate it.
30
5. If the ContentPlaceHolder control is not selected, click it to select it. 6. In the Tag Properties task pane, change the ID of the ContentPlaceHolder control to MainContent.
7. Right-click the cell at the right of the cell in which you just placed the ContentPlaceHolder
control and choose Cell Properties from the menu.
8. Change the vertical alignment of the cell to Top. 9. Change the horizontal alignment of the cell to Right. 10. Click OK. 11. Add a new ContentPlaceHolder control to the cell. 12. In the Tag Properties task pane, change the ID of the ContentPlaceHolder control to RightEdge. Your Master Page should now look like Figure 30.17. Save the Master Page. Figure 30.17 The Master Page is now complete with two ContentPlaceHolder controls for custom content.
The MainContent ContentPlaceHolder control
The RightEdge ContentPlaceHolder control
6055_30.qxp
12/7/2006
12:33 PM
Page 565
Developing a Master Page Web Site
565
TIP We won’t add any default content to the ContentPlaceHolder controls on the Master Page. However, in a real application, you might want to add content (perhaps something like Google ads) to the right edge of the Master Page. That way, page developers using your Master Page can decide to leave your default content in place or define their own content.
Creating the Content Page We’re now ready to create a Content Page that uses the Master Page we just created.
1. Select File, New, Page and select Create
from Master Page
from the list of page types.
2. Click OK and select the master.master page you just finished creating. 3. Click OK to create the new Content Page. Notice that the images from the Master Page are not visible. Instead, you see the infamous red Xs, indicating that the image links are broken, as shown in Figure 30.18. Until you save the new Content Page, the image links will be broken. Go ahead and save the new Content Page now as default.aspx. After you’ve saved it, the relative links for the images will correctly point to the image files. Figure 30.18 The Content Page will show broken images until you save it.
If you look at the Code View for the new Content Page, you’ll see that there is almost no code in it. At this point, the Master Page is defining all the content for this page. The only things that actually exist on the Content Page are the two Content controls that map to the ContentPlaceHolder controls on the Master Page.
30
6055_30.qxp
566
12/7/2006
12:33 PM
Page 566
Chapter 30 Using ASP.NET Master Pages and User Controls
Using the following steps, we will define some custom content for the new Content Page:
1. Click inside the MainContent area to select it. 2. Click the button at the upper right of the control and select Create Custom Content from the Common Content Tasks popup.
3. Enter some text inside the MainContent area. As shown in Figure 30.19, the Content control will resize accordingly as you enter content.
30
Figure 30.19 The Content control will change size and shape depending on the content added to it.
Notice that you are unable to edit any portion of the Content Page that falls outside a control. Master Pages are a powerful method of enforcing a common user interface while still allowing developers the flexibility to design content the way they want.
Content
N OTE Even though Expression Web labels this area as MainContent, you are not actually editing the MainContent ContentPlaceHolder control. Instead, you are adding content into a Content control that is mapped to the MainContent ContentPlaceHolder control on the master.master page.
Save the Content Page and browse it using the ASP.NET Development Server. Notice that the content you entered into the Content control is displayed along with the interface elements from the Master Page. If you open the Master Page and make any changes to the layout or content, those changes will take effect immediately in all Content Pages that use that Master Page. Unlike Dynamic Web Templates, Master Pages do not require an explicit update of attached pages.
6055_30.qxp
12/7/2006
12:33 PM
Page 567
Troubleshooting
Gaining an understanding of Master Pages is valuable because it positions you to not only design your own Web sites using Master Pages, but also to contribute to a Web site development team that uses Master Pages. As previously mentioned, one of the primary reasons to use Master Pages is so that programmers can work independently from designers. With a firm knowledge of how Master Pages work, you can efficiently use Expression Web to take advantage of this powerful feature.
Troubleshooting Parser Error When Browsing Content Page I’m browsing my Content Page and I get an error in the page that says “Parser Error Message: Only Content controls are allowed directly in a content page that contains Content controls.” What does this mean? This error is poorly worded, but what it means is that you cannot have any content on a Content Page other than Content controls. If you are seeing this error, it means that you have text or an HTML tag that exists outside your Content controls. Make sure that you don’t have any HTML tags such as or on your Content Page. These tags are provided by the Master Page and should not be included in your Content Page. As a hint to what’s wrong, the error page you are seeing will usually highlight the offending code in red inside a large yellow box.
Column Width Doesn’t Stick I’m changing the column width to a specific value in my layout table, but it doesn’t actually change the width. When I pull up the Column Properties dialog again, the width has reverted back to the original value. Make sure you uncheck the Clear Contradicting Width and Make Column Autostretch checkboxes. Both of these checkboxes will allow Expression Web to resize the column as it sees fit. If you uncheck both of them, your column width adjustment should work fine.
Cannot Drag Layout Cell I’ve inserted a new layout cell into my table. When I drag it, everything appears to be working fine until I release the mouse button. When I do that, the cell just pops right back to where it was in the first place. If you are unable to drag your layout cell, the problem is most likely that you are dealing with a table and not a layout cell. It’s quite easy to accidentally insert a table instead of a layout cell, and if you do, when you attempt to drop the table in a new location, it will pop right back to where it was originally. To fix this, remove the table and draw a new layout cell in its place.
567
6055_30.qxp
568
12/7/2006
12:33 PM
Page 568
Chapter 30 Using ASP.NET Master Pages and User Controls
Lagniappe (lan yap’) n.,
a gift or bonus
Converting an Existing Site to a Master Page Site Now that you’ve seen how cool Master Pages are, it’s possible that you are thinking about taking an existing Web site and converting it to a Master Page Web site. Doing that is not as hard as you might think. As with the exercise we conducted in this chapter, the first step is to create the Master Page. You can either convert an existing template or pick a page and use it as the template for the Master Page. You’ll want to remove any content that is specific to the page. In place of that content, you’ll want to add one or more ContentPlaceHolder controls. As you’re doing this, carefully evaluate any content for possible default content. For example, if you have some advertisements that appear in a table at the bottom of your page, you may want to just enclose those ads in a ContentPlaceHolder control. That way, anyone using your Master Page will get the ads by default and they can override them and provide their own content if they choose. You may also decide that you want those ads to appear on every page. In that case, you’ll want to leave the ads as-is, without putting them inside a ContentPlaceHolder control. If your existing page is an ASP.NET Web Form, it will have an ASP.NET @ at the top of the page that looks similar to the following:
Page
directive
You’ll need to change the @ look like the following:
Page
directive to a @
Master
directive. The new code should
If your page is just an HTML page, you will need to add the @ Master directive (as shown above) to the page before it will work properly as a Master Page. Then, save your page with a .master file extension. To attach your existing page to the new Master Page, you’ll need to remove anything that will be provided by the Master Page. For example, if your pages have a table with your company logo and a menu system, remove them from the page you’re converting to a Content Page because those elements will be provided by the Master Page. In almost all scenarios, it’s much easier to create a new Content Page and then copy and paste the content from other pages into the Content controls on the new Content Page. However, if you choose to go through the conversion process, just keep in mind that the Content Page cannot contain any code or text that is not within a Content control. With a little work, you can convert an existing Web site to the Master Page model fairly easily. After the up-front work, you’ll be left with a Web site that is simple to maintain and update with a fresh new look with minimal effort.
6055_31.qxp
12/7/2006
12:35 PM
Page 569
CHAPTER
31
Developing a Login System with ASP.NET In this chapter Web Site Login Systems Overview of ASP.NET 2.0 Login Controls Creating a Login Solution Troubleshooting Lagniappe: Modifying Password Requirements
6055_31.qxp
570
12/7/2006
12:35 PM
Page 570
Chapter 31 Developing a Login System with ASP.NET
Web Site Login Systems There are generally two types of Web sites. One type offers the same information to everyone. The other type offers information that is somehow specific to the person using the Web site. It’s becoming more and more common to see Web sites that fall into the latter category, and because of that, it’s becoming more necessary for Web developers to be able to design a method of allowing users to log into a Web site so they can be uniquely identified. There are many ways to implement a login system, but almost all of them require a significant amount of code to implement. Not only that, but writing secure code for a login system is difficult because it requires a full understanding of security issues. CAUTION Security should be among your highest priorities when designing a Web application. You should be aware that by adding features such as login functionality, you are exposing yourself to security risks.
31
If you are going to use ASP.NET 2.0’s login controls in your Web site, I highly recommend that you visit Microsoft’s page on securing the login controls. You can access this page by browsing to http://msdn2.microsoft.com/en-US/library/ms178346(VS.80).aspx.
Fortunately for you, ASP.NET 2.0 has a full suite of login controls that provide an amazing level of functionality without having to write a single line of code. You’re probably picturing a simple system with a basic username and password implementation. Think again! ASP.NET 2.0 login controls provide you with all the features needed for most applications. N OTE The ASP.NET membership system uses Microsoft SQL Server 2005 Express Edition by default to store users for your Web site. Therefore, to walk through the examples in this chapter, you will need to install Microsoft SQL Server 2005 Express Edition and the Microsoft .NET Framework 2.0. The easiest way to get everything that you need is to install Microsoft Visual Web Developer Express Edition. As of this writing, it’s free, but it’s also a 344MB download. You can find Visual Web Developer Express Edition at http://msdn.microsoft.com/vstudio/express/vwd/default.aspx.
Overview of ASP.NET 2.0 Login Controls Expression Web provides access to all seven ASP.NET 2.0 login controls via the Login section of the ASP.NET controls Toolbox. TIP Those of you using Windows XP Home Edition are not excluded from testing the concepts described in this chapter. The ASP.NET Development Server provides a fully supported environment for ASP.NET 2.0, and it will run on any version of Windows XP.
6055_31.qxp
12/7/2006
12:35 PM
Page 571
Overview of ASP.NET 2.0 Login Controls
➔
571
For more information on the ASP.NET Development Server, see “Using the ASP.NET Development Server”, p. 485 (Chapter 27).
The Login Control The Login control, like most of the other ASP.NET login controls, is simple in appearance but robust in functionality. In its simplest terms, the Login control provides users with textboxes for entering a username and a password, as shown in Figure 31.1. A “Remember Me” checkbox is also provided so that users don’t have to log in on each subsequent visit to your Web site. Figure 31.1 The Login control is simple in appearance, but there’s a lot of functionality under the hood.
The Login control also implements form validation so that users cannot submit a form without supplying both a username and a password. Figure 31.1 shows the default appearance of the Login control. You can reformat it using CSS styles or by using the AutoFormat option on the Common Login Tasks popup. By choosing one of the six available formatting options, as shown in Figure 31.2, you can quickly change the appearance of the entire control. Figure 31.2 You can quickly give the Login control a new look using the AutoFormat dialog.
31
6055_31.qxp
572
12/7/2006
12:35 PM
Page 572
Chapter 31 Developing a Login System with ASP.NET
N OTE The Common Tasks popups for the login controls have an Administer Website link. If you click this link, you’ll be informed that administering the Web site is not supported. If you want to administer the Web site, you’ll need to use the tools provided by ASP.NET itself.
Because the Login control is a single control, you cannot move the elements in the control by default. If you want to rearrange the controls that make up the Login control, you’ll need to convert the control to a template—, which is referred to as a templated control. By converting the control to a template, you will have access to all the constituent controls that make up the Login control. All the functionality remains the same.
31
To convert the Login control to a template, click the button at the upper right of the control to access the Common Login Tasks popup and click the Convert to Template link. After you do this, the controls within the Login control will immediately become accessible, as shown in Figure 31.3. Figure 31.3 Converting the Login control to a template allows access to the controls that comprise it. Notice here that the Button control is selected. Accessing the button is impossible before converting the control to a template.
To convert the Login control back to a regular control instead of a template, click the button on the control to access the Common Login Tasks popup and click the Reset option. Any changes you made to the control while it was in a templated state will be reset and the control will take on its default appearance. Converting a control to a template is more powerful than it may seem at first. As you will see shortly, there are many properties for the Login control that enable several other user interface elements. For example, the control can display links for help text or user registration. By converting the control to a template, you have full control over the placement of all parts of the control. The built-in functionality of the Login control isn’t limited to the appearance of the control. When the Log In button on the control is clicked, ASP.NET will automatically do a lookup on the user and authenticate him/her. If the user presents incorrect credentials, the control
6055_31.qxp
12/7/2006
12:35 PM
Page 573
Overview of ASP.NET 2.0 Login Controls
573
will notify the user. If the credentials are correct, the control will log the user in and redirect him/her to the page specified in the DestinationPageUrl property of the control. There are many other useful properties of the Login control that can be accessed via the Tag Properties task pane. ■ CreateUserIconUrl—Specifies
a URL to a graphic file that acts as a link for new users who are not yet registered. When clicked, users will be taken to a registration page for the site.
■ CreateUserText—Text
that is displayed that acts as a link for new users who are not yet registered. This is most often used in place of the CreateUserIconUrl.
■ DestinationPageUrl—The ■ DisplayRememberMe—If
URL to which users are redirected upon a successful login.
true, displays the “Remember Me” checkbox. This value is true
by default. ■ FailureAction—This
property can be one of two values: Refresh or It controls what happens if a user fails to log in successfully. The RedirectToLoginPage is used in situations where the Login control is placed on a page other than the login page. RedirectToLoginPage.
■ FailureText—Configures
the text that is displayed if a user fails the login attempt. It is recommended that this text be chosen carefully so as not to cause a security risk. For example, notifying a user that a password is incorrect may imply that the username is valid, leading to a potential security risk.
■ HelpPageIconUrl—Sets
the URL of a graphic that can be displayed as a help icon. When the user clicks this graphic, he or she will be redirected to a help page for your site.
■ HelpPageText—Configures
the text that is displayed as a link to the help page for the
site. ■ HelpPageUrl—Specifies
the URL of the help page for the site.
■ InstructionText—Sets
the text that appears to offer instructions to users.
■ LoginButtonImageUrl—Specifies
LoginButtonType
the URL of an image to use for the login button. The property should be set to Image when using this property.
■ LoginButtonText—Allows
you to change the text that appears on the button. By default, the button displays the text “Log In”.
■ LoginButtonType—This
property can be one of three values: Button, Image, or Link. is the default. When set to Link, the button is converted to a regular link. When set to Image, the image specified by the LoginButtonImageUrl property is displayed. Button
■ Orientation—Sets
the orientation of the control to either Horizontal or Vertical.
■ PasswordLabelText—Sets
the text that labels the Password textbox.
■ PasswordRecoveryIcon—Used
to specify an image to display for a link to a password recovery page. Users can click this when they forget their password.
■ PasswordRecoveryText—Sets
the text to display for the password recovery link.
31
6055_31.qxp
574
12/7/2006
12:35 PM
Page 574
Chapter 31 Developing a Login System with ASP.NET
■ PasswordRecoveryUrl—Sets
Overview of ASP.NET 2.0 Login Controls
the URL of the password recovery page.
■ PasswordRequiredText—The
text entered here is displayed in the ValidationSummary control on the Login control when no password is entered.
■ RememberMeSet—Sets
this property to true to check the “Remember Me” checkbox by
default. ■ RememberMeText—Sets
the text for the “Remember Me” checkbox.
■ TextLayout—Can
be set to TextOnLeft or TextOnTop. This controls the position of the text for the textboxes.
■ TitleText—The ■ UserName—Sets
text that appears in the title bar of the control.
the initial text of the Username textbox.
■ UserNameLabelText—Sets
the text that labels the Username textbox.
■ UserNameRequiredError—Sets
31
the text that is displayed in the ValidationSummary control on the Login control when no username is entered.
■ VisibleWhenLoggedIn—When true,
the Login control is visible even when the user is logged in. This property is normally used only when the Login control appears on a page other than the login page.
As you can see from that rather long list of properties, the Login control is quite a bit more powerful than it seems at first.
LoginStatus Control The LoginStatus control has two views: one view for when the user is logged in and one for when the user is logged out. As shown in Figure 31.4, the view of the control can be configured using the dropdown available in the Common LoginStatus Tasks popup. Figure 31.4 ASP.NET will automatically choose the correct view for the LoginStatus control based on whether the user is authenticated, but you can choose the view yourself if you wish.
Some of the useful properties of the LoginStatus control are as follows: ■ LoginImageUrl—Specifies
the URL of an image to display for the login image. When a URL is specified in this property, the link in the control changes from text to the image specified.
■ LoginText—Specifies
the text that appears for the login link.
6055_31.qxp
12/7/2006
12:35 PM
Page 575
Overview of ASP.NET 2.0 Login Controls
575
■ LogoutAction—This
property can be set to one of three values: Refresh, Redirect, or When set to Redirect, users are redirected to the URL in the LogoutPageUrl property when logging out. RedirectToLoginPage.
■ LogoutImageUrl—Specifies
the URL of an image to display for the logout image. When a URL is specified in this property, the link in the control changes from text to the image specified.
■ LogoutPageUrl—The
LogoutAction
URL to which users are redirected upon logging out when the is set to Redirect.
■ LogoutText—The
text that is displayed for the logout link.
LoginName Control The LoginName control is perhaps the simplest of the login controls. It displays the name of the logged-in user. By default, the control displays only the username. By altering the FormatString property, you can alter the text that is displayed. For example, if a user named Jim is logged into the Web site and the FormatString property is set to Logged in as {0}, the LoginName control would display the text “Logged in as Jim”.
ChangePassword Control The ChangePassword control (Figure 31.5) allows a user to change his or her password. In the default configuration, users are required to be logged in to change their password. However, the ChangePassword control can be configured to also prompt for the username. In those situations, a user can change his or her password without logging in. In fact, when the username field is displayed on the control, it is possible for a user to change the password of a different user as long as he or she knows the old password of the user whose password is being changed. Figure 31.5 The ChangePassword control makes it easy for a user to change his or her password. In some configurations, a user can even change someone else’s password.
31
6055_31.qxp
576
12/7/2006
12:35 PM
Page 576
Chapter 31 Developing a Login System with ASP.NET
Overview of ASP.NET 2.0 Login Controls
Similar to the Login control, the Common ChangePassword Tasks popup shown in Figure 31.6 provides you with an AutoFormat link for easy formatting of the control and a link to convert the control to a template for more precision over the layout of the control. Figure 31.6 The Common ChangePassword Tasks popup offers similar options to the Login control with the addition of a Views dropdown for switching between the two views provided by the control.
31 The ChangePassword control also includes a Views dropdown that allows you to switch between the Change Password view and the Success view. The Success view is displayed when a user has successfully changed his or her password. Figure 31.6 shows the Change Password view of the control and Figure 31.7 shows the Success view. Figure 31.7 When a user has successfully changed his or her password, the Success view is displayed.
The ChangePassword control has many properties that allow you to customize the control’s appearance and behavior. Because the list is long, we won’t go over the properties that are similar to corresponding properties of the Login control. Refer back to that section of this chapter to refresh your memory if necessary.
DisplayUserName Property The DisplayUserName property controls whether or not a textbox for entry of a username exists on the control. If the DisplayUserName property is true and a user is already logged in, the user will have the ability to change the password of another user assuming he or she knows the other user’s password. The ChangePassword control shown in Figure 31.8 has a DisplayUserName property of true.
6055_31.qxp
12/7/2006
12:35 PM
Page 577
Overview of ASP.NET 2.0 Login Controls
577
Figure 31.8 You can display a textbox for a user’s username by setting the DisplayUserName property to true.
By placing the ChangePassword control on a page that can be browsed without logging into the site (a page that can be browsed anonymously), a user can change his or her password without logging into the site, provided the DisplayUserName property is set to true.
MailDefinition Property The MailDefinition property provides the ability to send users an e-mail after a successful password change. The MailDefinition property is actually a reference to a special object in the .NET Framework called MailDefinition. N OTE We’re delving into some basic programmatic concepts as we discuss the property. Because this isn’t a programming book, we won’t go into great detail on this property. I’ll explain how it’s used, but if you want the down-and-dirty details, your best resource is the MSDN Web site at http://msdn2.microsoft.com. MailDefinition
The details on the MailDefinition class can be found by browsing to http://msdn2.microsoft.com/en-US/library/system.web.ui.webcontrols.maildefinition (VS.80).aspx.
As shown in Figure 31.9, the MailDefinition property expands into several different fields: ■ BodyFileName—The BodyFileName
field allows you to specify a file that will be used for the body of the e-mail sent by the ChangePassword control. Any occurrence of in this file will automatically be replaced by the username of the user, and any occurrence of will automatically be replaced by that user’s new password.
■ CC—E-mail
address(es) that should be copied on the e-mail. If you’d like to enter more than one address, separate the e-mail addresses with commas.
■ EmbeddedObjects—The EmbeddedObjects
property is a collection of images or graphics to be embedded into the e-mail. When you click the button next to this property, the
31
6055_31.qxp
578
12/7/2006
12:35 PM
Page 578
Chapter 31 Developing a Login System with ASP.NET
EmbeddedMailObject Collection Editor appears, as shown in Figure 31.10. The code to insert these objects into the e-mail is included in the file specified by the BodyFileName property. The following code inserts the embedded object shown in Figure 31.10: ■ From—The From
property specifies the originating e-mail address for the e-mail.
■ IsBodyHtml—This
property specifies whether or not the file specified by the property contains HTML code or plain text. If you have set the EmbeddedObjects property, you should set the IsBodyHtml property to true. BodyFileName
■ Priority—The
priority at which the e-mail will be sent. Valid values are Normal, Low,
and High. ■ Subject—The
31
subject of the e-mail.
Figure 31.9 The MailDefinition property is actually a collection of many fields that make it easy to define an email to send to users upon a password change.
The MailDefinition property
TIP To send e-mail, the computer on which the Web site resides must have the SMTP service configured on it. You can get information on how to configure SMTP by browsing to http://msdn2.microsoft.com/en-US/library/8b83ac7t(VS.80).aspx.
CAUTION When using the MailDefinition property, keep in mind that e-mail can be intercepted fairly easily by someone other than the intended recipient. Use caution.
6055_31.qxp
12/7/2006
12:35 PM
Page 579
Overview of ASP.NET 2.0 Login Controls
579
Figure 31.10 Embedding images in your e-mail is accomplished via the EmbeddedMailObject Collection Editor. In this case, a company logo is being added.
31
PasswordHintText Property The text specified for the PasswordHintText property appears above the Password textbox. It is used to communicate your password requirements to users. The default requirements of passwords require that they be at least seven characters in length with at least one non-alphanumeric character.
➔
For information on how to modify password requirements, see “Modifying Password Requirements” in the “Lagniappe” section of this chapter.
PasswordRecoveryUrl The PasswordRecoveryUrl property points to the page containing a PasswordRecovery control so that a user can recover or reset his or her existing password. (We’ll cover the PasswordRecovery control later in this chapter.) This property will use the PasswordRecoveryText or PasswordRecoveryIconUrl property to create the link.
SuccessPageUrl Property The SuccessPageUrl property is used in cases where you would like a user to be redirected to a specific page when his or her password has been successfully changed. If this value is not specified, the ChangePassword control will switch to the Success view upon a successful password change. If the SuccessPageUrl property is specified, the Success view of the ChangePassword control will not be displayed at all.
6055_31.qxp
580
12/7/2006
12:35 PM
Page 580
Chapter 31 Developing a Login System with ASP.NET
PasswordRecovery Control The PasswordRecovery control is designed to allow a user to gain access to your site even in cases of a forgotten password. The name of the control is a bit misleading. By default, a user cannot recover his or her password. Instead, a new one is assigned and sent in an e-mail. That’s because ASP.NET uses an irreversible hashing algorithm before storing a password by default. It is possible to change this behavior and store passwords encrypted. When a password is encrypted, it can be decrypted and recovered for the user. N OTE We won’t go into the specifics of configuring ASP.NET’s behavior when storing passwords. If you’d like more information, Microsoft has excellent documentation on the MSDN Web site at http://msdn2.microsoft.com/en-us/library/system.web.ui.webcontrols.passwordrecovery.membershipprovider(VS.80).aspx.
31
As with the other controls we’ve reviewed, the PasswordRecovery control can be autoformatted for a more pleasing appearance using the AutoFormat dialog shown in Figure 31.11. This dialog is accessible via the Common PasswordRecovery Tasks popup. The PasswordRecovery control is also a templated control, so you can rearrange the layout if you wish. Figure 31.11 The PasswordRecovery control can be formatted for a more pleasing appearance using the AutoFormat dialog.
When a user changes his or her password, the process actually occurs in a series of three steps. In the first step, the user is asked for his or her username. After the Submit button is clicked, the user is asked for the answer to his or her secret question provided when he or she registered for the Web site. Assuming the answer is correct, the user is presented with a message indicating that the password is being e-mailed.
6055_31.qxp
12/7/2006
12:35 PM
Page 581
Overview of ASP.NET 2.0 Login Controls
581
Each of these steps is accessible in Expression Web using the Views dropdown in the Common PasswordRecovery Tasks popup, as shown in Figure 31.12. Because the control is templated, you can convert one or more of these steps to a template and control the layout and other functionality of each step. Figure 31.12 The PasswordRecovery control consists of three different views to allow a user to retrieve or reset a password. The Question view is shown here.
31 TIP The view that is initially displayed for the PasswordRecovery control is the view that is selected in Expression Web when the page is saved. Therefore, you’ll want to make sure you select the UserName view before saving your page.
The properties of the PasswordRecovery control are similar to the properties for the other login controls we’ve covered, so there’s no need to cover the details here.
CreateUserWizard The CreateUserWizard control (Figure 31.13) is a wizard-based control that makes it easy for new users of your Web site to create an account so they can log in. The CreateUserWizard control is actually a customized ASP.NET Wizard control, so the configuration options available are the same options used for the Wizard control.
➔
For more information on the Wizard control, see “Using Standard ASP.NET Controls”, p. 495 (Chapter 28).
Several properties are unique to the CreateUserWizard control. The following are a few that affect the behavior of the control: ■ DisableCreatedUser—By
default, after a user creates a new account, he or she can immediately log into the Web site. By setting the DisableCreatedUser property to false, the user will be prevented from logging in. This is commonly used in cases where an administrator or moderator is required to approve an account before it is granted access.
■ LoginCreatedUser—When
a user creates a new account using the CreateUserWizard control, he or she is immediately logged into the Web site upon completion of the wizard. If the LoginCreatedUser property is set to false, the user will have to explicitly log in instead of being logged in automatically.
6055_31.qxp
582
12/7/2006
12:35 PM
Page 582
Chapter 31 Developing a Login System with ASP.NET
Figure 31.13 The CreateUserWizard control is a customized wizard control designed to allow users to easily create new accounts for your Web site.
31
If the DisableCreatedUser property is set to true, you will want to set the LoginCreatedUser to false so that the CreateUserWizard control doesn’t attempt to automatically log in a disabled user account. ■ PasswordRegularExpression—Allows
you to use a regular expression to apply specific restrictions to password requirements for your site. This regular expression is applied in addition to the password requirements specified by ASP.NET.
➔
For more information on ASP.NET password requirements, see “Modifying the Password Requirements” in the “Lagniappe” section of this chapter.
The CreateUserWizard control exposes a MailDefinition object so you can send the new user his or her login information via e-mail if you choose. We discussed the requirements for sending e-mail in the overview of the ChangePassword control earlier in this chapter.
LoginView Control So far, we’ve covered controls that have a single purpose. The LoginView control is a break from that pattern. The LoginView control is a container control for other controls and provides you with, by default, two views: the AnonymousTemplate view and the LoggedInTemplate view. Controls that you place in the AnonymousTemplate view, as shown in Figure 31.14, will be visible only to users who have not yet logged into the site. In Figure 31.14, I have inserted a Login control into the AnonymousTemplate view so that users can log in if they haven’t done so.
6055_31.qxp
12/7/2006
12:35 PM
Page 583
Overview of ASP.NET 2.0 Login Controls
583
Figure 31.14 The AnonymousTemplate view is visible only to users who are browsing anonymously. Once a user logs in, he or she will no longer see the AnonymousTemplate view.
On the other hand, Figure 31.15 shows the LoggedInTemplate view, where I have inserted LoginStatus and LoginName controls. I changed the LoginStatus control’s view to the Logged In view so it will provide a link for the user to log out. Figure 31.15 The LoggedInTemplate is usually visible to users who have logged into the Web site. As you’ll soon see, the user may see a different view instead.
The LoginView control is commonly used on pages where anonymous content is present, but you also want to provide a login interface in one part of the page so that users can log in if desired. A forum page is an excellent example of a page suitable for this kind of control. Users can browse the forums anonymously. If they want to post on the forum, they can log in right on the page they are currently viewing without having to redirect to a login page and lose their place. As shown in Figures 31.14 and 31.15, the Common LoginView Tasks popup contains a link for editing RoleGroups. This allows you to define a template for different ASP.NET roles to which a user may belong using the RoleGroup Collection Editor shown in Figure 31.16. In Figure 31.16, you can see that I’ve defined a role called Administrators. If the logged-in user is a member of the Administrators role, he or she will see the view associated with that role instead of the LoggedInTemplate view. Figure 31.17 shows the new role selected in the Common LoginView Tasks popup.
31
6055_31.qxp
584
12/7/2006
12:35 PM
Page 584
Chapter 31 Developing a Login System with ASP.NET
Figure 31.16 The RoleGroup Collection Editor allows for the creation of views for specific ASP.NET roles that have been previously created.
31
Figure 31.17 When a new RoleGroup has been added, you’ll have a new view to choose in the Views dropdown. Users who are in the Administrators role will see the new Administrators
view.
TIP When the page containing a LoginView control is browsed, ASP.NET will look for a role that applies, starting at the top of the list of roles. As soon as it locates a role to which the current user belongs, it will display that view to the user. Therefore, if a user is a member of more than one role, he or she will always see the view for the first role in the list of RoleGroups.
N OTE A discussion of ASP.NET roles is outside the scope of this book. If you’d like more information on ASP.NET roles, there is an excellent resource on the MSDN Web site at http://msdn2.microsoft.com/en-us/library/5k850zwb(VS.80).aspx.
6055_31.qxp
12/7/2006
12:35 PM
Page 585
Creating a Login Solution
585
Creating a Login Solution Now that you’ve seen an overview of the different login controls that are available, let’s design a simple membership Web site. The first step in creating our membership Web site is to configure the Web for ASP.NET Forms authentication. Forms authentication is a security mechanism that is enforced by ASP.NET. If a user tries to browse to a page that is not available anonymously, ASP.NET will automatically send him/her to a login page instead, where the user can enter a username and password to log into the site.
Configuring the Web Site (IIS) N OTE If you are using the ASP.NET Development Server, refer to the section “Configuring the Web Site (ASP.NET Development Server)” that follows this section.
In ASP.NET 1.0 and 1.1, configuring Forms authentication required the manual editing of configuration files. ASP.NET 2.0 makes the job significantly easier by providing a Windows interface into the configuration options. N OTE The following steps require IIS 5 or IIS 6. The ASP.NET Development Server does not allow for configuration of a Web site from within a Windows interface.
N OTE Configuration of Web sites is dramatically different in IIS 7. As of this writing, IIS 7 is still in beta. Please refer to the Que Web site at http://www.quepublishing.com for updated information on IIS 7 when it releases.
1. Create a new Web site at http://<server>/membership, where <server> is a Web server running IIS 5 or greater with the .NET Framework 2.0 installed.
2. 3. 4. 5. 6. 7. 8. 9.
Open the Windows Control Panel and double-click on Administrative Tools. Double-click on Internet Information Services. Expand the computer name node in Internet Information Services. Expand the Web
Sites
node.
Expand the Web site on which the Web site was created in Step 1. Right-click on the membership Web application and choose Properties. Click the ASP.NET tab. Make sure that 2.0.50727 is selected in the ASP.NET
version
dropdown.
31
6055_31.qxp
586
12/7/2006
12:35 PM
Page 586
Chapter 31 Developing a Login System with ASP.NET
10. 11. 12. 13.
Click the Edit
Configuration
button, as shown in Figure 31.18.
Click the Authentication tab. Set the Authentication
mode
Make sure that the Login
Figure 31.18 Editing the configuration of an ASP.NET 2.0 Web site is easy thanks to the new user interface built into IIS.
31
Figure 31.19 We need to configure the new application for Forms authentication so we can use the ASP.NET login controls.
URL
dropdown to Forms, as shown in Figure 31.19. is set to login.aspx. We will create this page soon.
6055_31.qxp
12/7/2006
12:35 PM
Page 587
Creating a Login Solution
➔
587
For more information on creating Web sites in Expression Web, see “Creating a Web Site”, p. 25 (Chapter 2). If you don’t see an ASP.NET tab in the Properties dialog for your Web application, see “ASP.NET Tab Is Missing” in the “Troubleshooting” section of this chapter.
Now we need to configure the application so that no one can browse it anonymously. We’ll use ASP.NET’s authorization features to implement this restriction.
1. Click the Authorization tab in the ASP.NET Configuration Settings dialog. 2. Click the Add button. 3. Select the Deny radio button in the Rule 4. Select the Anonymous
users
type
section.
radio button in the Users
and roles
section, as shown in
Figure 31.20.
5. Click OK in the Edit Rule dialog. 6. Click OK in the ASP.NET Configuration Settings dialog. 7. Click OK in the Properties dialog for your Web application. Figure 31.20 The Edit Rule dialog is an easy way to configure authorization settings for your ASP.NET application. You can manually edit configuration files to do the same thing, but the Windows interface is much easier to use.
You have just configured an ASP.NET Forms authentication Web site and set the authorization of the site so that anonymous users are not allowed. TIP Notice that we didn’t tell ASP.NET to allow anonymous users to access the login page. ASP.NET will always allow anonymous access to the login page, so even though we’ve configured the site so that no anonymous users are allowed, everyone will be able to access the login page.
31
6055_31.qxp
588
12/7/2006
12:35 PM
Page 588
Chapter 31 Developing a Login System with ASP.NET
Configuring the Web Site (ASP.NET Development Server) The ASP.NET Development Server does not have a Windows interface for modifying the configuration of your site, so you’ll need to create a configuration file for that purpose. To make matters even more confusing, Expression Web does not have IntelliSense for ASP.NET configuration files. N OTE Because ASP.NET configuration files are XML files, Expression Web will provide color-coding for the files.
➔
For information on controlling the color-coding of files within Expression Web, see “Configuring Page Editor Options”, p. 257 (Chapter 15).
31
TIP If you want a better method of creating a configuration file (and many other ASP.NET 2.0 tasks), I encourage you to download Microsoft Visual Web Developer Express Edition from http://msdn.microsoft.com/vstudio/express/vwd/.
➔
For more information on using Visual Web Developer Express Edition with Expression Web, see “Using Expression Web with Visual Web Developer Express Edition”, p. 655 (Appendix A).
To control the configuration of a specific Web application, ASP.NET uses a special configuration file in the root of the Web site called web.config. The web.config file contains XML code that controls many aspects of the Web site. To configure our Web site for ASP.NET membership, we’ll need to do the following: ■
Configure the site for ASP.NET Forms authentication.
■
Disable the ability for unauthenticated users to browse the Web site.
■
Turn on ASP.NET Impersonation. N OTE ASP.NET Impersonation is a feature that allows you to run ASP.NET code under a user identity other than the default identity. A full discussion of ASP.NET Impersonation is outside the scope of this book. For full details on impersonation in ASP.NET, read Sams Teach Yourself ASP.NET 2.0 in 24 Hours, Complete Starter Kit from Sams Publishing.
Begin by selecting File, New, Page and selecting XML from the list of file types. Place your cursor after the XML code that Expression Web adds by default and enter the following code:
6055_31.qxp
12/7/2006
12:35 PM
Page 589
Creating a Login Solution
589
<system.web> <deny users=”?” />
Now save the file as web.config. Make sure to select All Files (*.*) from the Save as dropdown. Otherwise, Expression Web will automatically add an .xml file extension to your file. type
Note that the outermost element in the web.config file is the section. Within that section is a <system.web> section. This is where you make changes to ASP.NET configuration. In this case, the first element inside the <system.web> section is the element. We have enabled ASP.NET Forms authentication by setting the mode of the element to Forms. CAUTION ASP.NET configuration files are case-sensitive. If you enter information in the wrong case, you’ll see errors in your application.
The next element defines the section. The section allows you to control who has access to the Web site. In this case, we want to disallow anyone from browsing the site unless they have been authenticated. The <deny> tag allows us to do that. By specifying a users attribute with a value of ?, we are telling ASP.NET that any user who is not authenticated should be denied access. The next element is the element. We use this element to turn on ASP.NET Impersonation. The ASP.NET application would normally execute under the identity of the process in which it runs. By enabling ASP.NET Impersonation, we’re forcing our page to run under the identity of the user who is authenticated to our application.
Creating the Web Pages Our membership site will only require two pages: the login page and a content page. In a real application, you’d probably want to have a separate login page and new user page, but in this sample, we’ll use one page for both functions.
1. Create a new ASP.NET Web Form and save it as login.aspx. 2. Create a second ASP.NET Web Form and save it as default.aspx. 3. Add a Login control and a CreateUserWizard control to the login.aspx page. The login.aspx
page should now look like Figure 31.21.
31
6055_31.qxp
590
12/7/2006
12:35 PM
Page 590
Chapter 31 Developing a Login System with ASP.NET
4. Add a new LoginStatus control to the default.aspx page and set the view to LoggedIn. 5. Place the insertion point just to the right of the LoginStatus control and press the Spacebar
on your keyboard.
6. Insert a new LoginName control. Your default.aspx page should now look like Figure 31.22. When a user logs in and sees this content, the controls will allow him/her to log out easily. Figure 31.21
31
The login page will serve two purposes: it will allow users to log in or create a new account if they’ve never visited the site before.
Figure 31.22 The content page will use ASP.NET login controls to allow a user to easily log out.
Now you’re ready to try out the Web site. Try browsing to the default.aspx page. You should be redirected automatically to the login.aspx page because you have not yet logged in.
6055_31.qxp
12/7/2006
12:35 PM
Page 591
Creating a Login Solution
591
If you get an error saying “Failed to access IIS metabase” when browsing the ASP.NET page, see “Metabase Access Fails Browsing ASP.NET Page” in the “Troubleshooting” section of this chapter. If you get an error saying “Failed to start monitoring file changes” or “Failed to start monitoring directory changes” when browsing the ASP.NET page, see “Failed to Start Monitoring Changes Error” in the “Troubleshooting” section of this chapter.
Fill out the form to sign up for a new account, as shown in Figure 31.23, and click the Create User button to create your account. You’ll be presented with a message letting you know that the account has been successfully created, as shown in Figure 31.24. Figure 31.23 The CreateUserWizard control will not only collect all the information for a new user, but it will also create the user database when the first user is created.
Figure 31.24 Your new user account has been created and you can now log in using your new user credentials.
31
6055_31.qxp
592
12/7/2006
12:35 PM
Page 592
Chapter 31 Developing a Login System with ASP.NET
If you get an error that says “Access denied creating App_Data subdirectory”, see “Access Denied Error” in the “Troubleshooting” section of this chapter.
When you create the first user in an ASP.NET membership application, the SQL Server 2005 Express Edition database will be created for you automatically. As you’ve seen in this chapter, creating a powerful membership system in ASP.NET 2.0 and Expression Web is as simple as just dropping the controls on the page. We created an entire application without writing a single line of code.
Troubleshooting ASP.NET Tab Is Missing I’ve opened the properties for my Web site, but there isn’t an ASP.NET tab. There are many reasons for this, but the most common is missing Registry information. Open a command prompt and run the following command: Regsvr32.exe %windir%\microsoft.net\framework\v2.0.50727\mmcaspext.dll
This will add the Registry information for the file that creates the tab and will hopefully correct the problem. If that doesn’t correct your problem, open a command prompt and run the following commands: cd %windir%\microsoft.net\framework\v2.0.50727 aspnet_regiis –i
Metabase Access Fails Browsing ASP.NET Page I’m browsing my ASP.NET page and I see an error that says “Failed to access IIS metabase.” What does this mean? This is a permissions issue. The account that is used to run ASP.NET needs access to a special database IIS uses to keep track of its settings. To correct this problem, open a command prompt and switch to the following directory: %windir%\microsoft.net\framework\v2.0.50727
At the command line, run the following command if using Windows 2000 or Windows XP: aspnet_regiis –ga ASPNET
If you’re using Windows 2003, run the following command: aspnet_regiis –ga IISWPG
Failed to Start Monitoring Changes Error When browsing my ASP.NET page, I get an error that says “Failed to start monitoring file changes” or “Failed to start monitoring directory changes.” This error means that the ASP.NET process account does not have permission to access the Web site’s content. Here’s how to fix it.
6055_31.qxp
12/7/2006
12:35 PM
Page 593
Lagniappe: Modifying Password Requirements
1. Right-click on the root folder of the Web site (c:\inetpub\wwwroot by default). 2. Choose Properties from the menu. 3. Select the Security tab. 4. Click Add. 5. Enter ASPNET in the box if you are using Windows 2000 or Windows XP and IISWPG if you are using Windows 2003.
6. Click the Advanced button. 7. Place a check in the box that says Replace
permission entries on all child objects
with entries shown here that apply to child objects.
8. Click OK. 9. Click OK again. Access Denied Error When browsing my membership site, I get an error that says “Access denied creating App_Data subdirectory.” How do I fix this? The steps to resolve this are the same as the steps to resolve the “Failed to Start Monitoring Changes Error” in the previous troubleshooting note.
Lagniappe (lan yap’) n.,
a gift or bonus
Modifying Password Requirements The password requirements for an ASP.NET membership application may be a bit stringent for your needs. By default, the password must be at least seven characters in length and must include at least one non-alphanumeric character. If you’d like to change these requirements and make them a bit less stringent (or more, if you’d like), you can edit a configuration file provided by the .NET Framework. The master configuration for the machine is defined in a file called machine.config. This file is located in the %windir%\Microsoft.NET\Framework\v2.0.50727\CONFIG directory. When you are dealing with settings specific to ASP.NET membership applications, you want to work with the <membership> section of the file. The following code shows the default settings: <membership> <providers>
Several attributes control the policy concerning passwords: ■ maxInvalidPasswordAttempts—The
default value is 5. If a user enters an incorrect password more than five times, the login automatically fails.
■ minRequiredPasswordLength—This
value defaults to 7. Therefore, the password must be
at least seven characters. ■ minRequiredNonalphanumericCharacters—This
value defaults to 1, meaning that a valid password must have at least one character that is neither a letter nor a number. To remove that qualification, set this value to 0.
■ passwordAttemptWindow—This
value defaults to 10 minutes. This value works in conjunction with the maxInvalidPasswordAttempts, meaning that if a user makes more than 5 invalid login attempts within a 10-minute window, he/she is locked out.
When you change any of these settings, you’ll need to run iisreset from a command prompt to restart the ASP.NET worker process with the new settings.
6055_32.qxp
12/7/2006
12:36 PM
Page 595
CHAPTER
32
Implementing Form Validation Using ASP.NET In this chapter The Need for Form Validation Troubleshooting Lagniappe: Validation Groups
6055_32.qxp
596
12/7/2006
12:36 PM
Page 596
Chapter 32 Implementing Form Validation Using ASP.NET
The Need for Form Validation You’re no doubt familiar with the saying “Garbage in, garbage out.” Web applications that require data entry by users provide the perfect opportunity to put that old saying into practice. Try as you might, you can never predict the actions of users of your Web site. That’s why you must take every opportunity to prevent any user from shooting himself or herself in the foot, or worse yet, corrupting your data with bad input. Web developers have always struggled with implementing robust form validation. Many Web developers are not experts at client-side scripting, and since the most efficient form validation is client-based, that puts them at a distinct disadvantage. Perhaps you are one of those JavaScript-challenged developers yourself. Well, fear not. ASP.NET can solve the problem of form validation for you, and you won’t even have to take a peek at the code in the process. TIP The ASP.NET validation controls are quite powerful, but some developers wish for even more, especially in the area of cross-browser compatibility. If you’re interested in enhancing the ASP.NET validation controls, you might want to check out Peter Blum’s “Professional Validation and More” suite of controls at www.peterblum.com/VAM/Home.aspx. These controls add significant functionality to the validation controls that ship with Expression Web.
32
The ASP.NET Validation Controls To access the ASP.NET validation controls, click the plus sign next to Validation in the ASP.NET Controls section of the Toolbox. There are six different validation controls available. Before we dig too deep into how to use the validation controls provided by ASP.NET, let’s first have a look at the different controls that are available.
CompareValidator compares the value in one form field to the value in a second form field to see if they are equal. For example, when asking a user to create a password, it’s common practice to present the user with one textbox for the password and a second textbox to confirm the password. CompareValidator can be used to easily ensure that both textboxes contain the same password.
CompareValidator
RangeValidator is used to ensure that the value entered in a form field falls within a specified range. When using this control, you will specify minimum and maximum values for a particular form field. Validation will fail if a value entered is outside of that range.
RangeValidator
RegularExpressionValidator is one of the most versatile validation controls. It allows you to validate a form field based on a regular expression. Several common regular expressions are provided for you.
RegularExpressionValidator
6055_32.qxp
12/7/2006
12:36 PM
Page 597
The Need for Form Validation
597
TIP Regular expressions are difficult to learn. If you’d like to learn more about regular expressions, read Sams Teach Yourself Regular Expressions in 10 Minutes from Sams Publishing. The title is obviously not realistic, but this is an excellent book in downloadable format (from www.samspublishing.com). I highly recommend this book to anyone who is interested in learning how to take advantage of regular expressions. I discovered it while researching this book, bought it immediately, and it has quickly become an important reference for me.
RequiredFieldValidator RequiredFieldValidator allows you to specify that a particular form field is required. The user will then be required to enter a value or validation will fail.
CustomValidator makes it possible to implement form field validation when no other control is suitable for your needs.
CustomValidator
When you use the CustomValidator control, you can specify the name of a client-side function that is used to validate your form field.
ValidationSummary The ValidationSummary control will display a summary of all validation failure in one location on your page. This control is most useful when you have a large form and you want validation problems to appear in one place to make it easier on your users. CAUTION Form field validation is vital to the security of your Web site. In a real-world application, you should always implement form field validation both on the client and the server. ASP.NET validation controls will always validate on the server as well, but if you choose to implement your own validation instead of using the validation controls, make sure you validate user input in your server-side code.
Common Properties Several validation controls have common properties. The ValidationSummary control, however, is an exception. Once you learn how to use these properties for one of the controls, you’ll be able to easily use the same techniques in any of the other validation controls.
ErrorMessage Property The ErrorMessage property is a text property that is displayed when a validation error occurs. Suppose that you have a RequiredFieldValidator attached to a textbox for the user’s name and the user attempts to submit a form without entering his or her name in the
32
6055_32.qxp
598
12/7/2006
12:36 PM
Page 598
Chapter 32 Implementing Form Validation Using ASP.NET
required field. In that scenario, your ErrorMessage property might be something like “Name is a required field. Please enter your name.” TIP The text entered into the ErrorMessage property is displayed in red by default. You can change the color of the text by changing the ForeColor property using the Tag Properties pane.
ControlToValidate The ControlToValidate property is a text property that defines the ASP.NET control on the page to which the validation control is connected. Expression Web provides a dropdown list in the Tag Properties pane that lists all the valid controls on the page. To set this property, simply select the name of the control from the list.
Display The Display property can be set to None, Static, or Dynamic. Static is the default value.
32
This property controls the CSS code that is generated by ASP.NET for the validation control. Because a validation control is only displayed on a page when validation fails, the appearance of the control can sometimes cause other page elements to shift. When that happens, the shifting of the other page elements may result in poor appearance. When the Display property is set to Static, the validation control renders with a visibility style of hidden. Therefore, the control takes up its normal amount of space on the page but is not visible. This setting prevents other page elements from shifting when the validation control becomes visible. When the Display property is set to Dynamic, the control renders with a display attribute of This causes the browser to not render the control at all until it is required. This can result in the shifting of other page elements when the validation control is displayed.
none.
If you are not interested in displaying the validation error message next to controls (such as when you are using a ValidationSummary control), set the Display property to None to prevent the rendering of the controls in all cases. If your validation controls don’t work, see “Validation Controls Don’t Work” in the “Troubleshooting” section of this chapter.
EnableClientScript By default, ASP.NET validation controls generate client-side JavaScript to validate form fields. If validation fails, users are notified immediately without having to wait for a return trip to the Web server. If you’d like to prevent ASP.NET from generating the client script used for validation, you can set the EnableClientScript property to false. You might be wondering why you would want to disable client scripts. Suppose you are using validation controls for server-side validation only. You’ve got some custom scripts that
6055_32.qxp
12/7/2006
12:36 PM
Page 599
The Need for Form Validation
599
you or another developer wrote that are handling all the client-side validation. In that case, you would want to disable ASP.NET’s generated code. You may also want to disable the client-side script if you are using numerous validation controls and you determine that the generated code makes the page too large to download quickly. TIP Remember that ASP.NET validation controls will always validate on the server as well. Therefore, even if you set the EnableClientScript property to false, your validation will still occur when the user submits the form.
SetFocusOnError The SetFocusOnError property specifies whether or not focus should be given to a form field when validation fails. For example, suppose you have a TextBox control for a user’s phone number and you have added a RequiredFieldValidator to that textbox with the SetFocusOnError property set to true. If the user fails to enter a value and attempts to submit the form, the text in the ErrorMessage property will be displayed and the cursor will be placed inside the textbox so the user can correct the error.
ValidationGroup The ValidationGroup property allows you to assign one or more validation controls to a group. This property makes it easy to validate multiple forms on a page without having them interfere with each other. You’ll read more on validation groups later in this chapter.
Creating a Validated Form Now that we’ve covered the basic properties and concepts behind validation controls, let’s build a form that utilizes ASP.NET validation controls. N OTE
➔
I’ve asked you to create a disk-based Web site so you can use the ASP.NET Development Server to test it. If you have a local copy of IIS installed and you’d like to use it, please feel free. Just make sure that ASP.NET is working properly on it before you begin.
For more information on using the ASP.NET Development Server, see “Using the ASP.NET Development Server”, p. 485 (Chapter 27).
Create a new disk-based Web site and add an ASP.NET Web Form. We’ll create a contact form with the following requirements: ■ ■
The user’s first name and last name are required fields. The user will be required to enter his or her phone number in the format ###-#######.
■
The user will be required to provide a valid e-mail address.
32
6055_32.qxp
600
12/7/2006
12:36 PM
Page 600
Chapter 32 Implementing Form Validation Using ASP.NET
■
The user must repeat his or her e-mail address for verification.
■
The user can optionally provide a street address and city.
■
The user can provide a U.S. ZIP code, but if provided, it must be in the proper fivedigit format.
N OTE
➔ ➔
If you’d prefer to just check out the end-result, you can find the completed form in the Ch32\Files\Site folder on the CD accompanying this book.
For more information on creating Web sites, see “Creating a Web Site”, p. 25 (Chapter 2). For more information on creating ASP.NET Web Forms, see “Using Standard ASP.NET Controls”, p. 495 (Chapter 28).
Creating the Form Before we add validation controls to the page, let’s create the form.
1. Position the insertion point inside the Web Form and create a new table that is 2 rows by 2 columns. Make sure to set the border width to 0 and the width of the table to 550px.
32
2. Drag the vertical separator between columns to the left so the left column is approximately 150px in width.
➔
For more information on creating tables in Expression Web, see “Using Tables and Layout Tables”, p. 149 (Chapter 9).
3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14.
In the upper left cell, enter the text “First
15. 16. 17. 18.
Enter the text “Confirm
name:”.
In the upper right cell, insert an ASP.NET TextBox control. In the left cell of the second row, enter the text “Last
name:”.
In the right cell of the second row, insert an ASP.NET TextBox control. Click to the right of the textbox you’ve just added so it is no longer selected. Press Tab to insert a new table row. Enter the text “Phone
number:”
in the left cell of the new row.
Add an ASP.NET TextBox control to the right cell of the new row. Create a new table row. Enter the text “E-mail
address:”
in the left cell of the new row.
Add an ASP.NET TextBox control to the right cell of the new row. Create a new table row. e-mail address:”
in the left cell of the new row.
Add an ASP.NET TextBox control to the right cell of the new row. Create a new table row. Enter the text “Address:” in the left cell of the new row.
6055_32.qxp
12/7/2006
12:36 PM
Page 601
The Need for Form Validation
601
19. Add an ASP.NET TextBox control to the right cell of the new row. Change the width of the new textbox to 300px.
20. 21. 22. 23. 24. 25.
Create a new table row.
26. 27. 28. 29. 30. 31.
Create a new table row.
Enter the text “City:” in the left cell of the new row. Add an ASP.NET TextBox control to the right cell of the new row. Create a new table row. Enter the text “State:” in the left cell of the new row. Add an ASP.NET TextBox control to the right cell of the new row. Change the width of the new textbox to 50px. Enter the text “ZIP
Code:”
in the left cell of the new row.
Add an ASP.NET TextBox control to the right cell of the new row. Create a new table row. Add a new ASP.NET Button control to the right cell of the new row. Change the align property of the right cell to right.
Your table should look like Figure 32.1. Figure 32.1
32
Using a table to lay out your form will make for a more appealing form because it allows you to precisely align your form elements.
You’ve now created a form that can collect all the information you need. However, at this stage, your users have control over the data. They can literally enter anything they want into your form. Adding some validation controls can put you back in control of the data you are collecting. TIP ASP.NET will automatically prevent some dangerous data in form fields. For example, suppose someone enters some JavaScript into one of your form fields. Even without any validation controls, ASP.NET will recognize this as dangerous data and will disallow it.
6055_32.qxp
602
12/7/2006
12:36 PM
Page 602
Chapter 32 Implementing Form Validation Using ASP.NET
Adding Form Validation Before we add validation controls, we should change the name of the form fields on the form. Doing so will make it much easier to configure the validation controls. To change the names of the form fields, we’ll use the ID property of each TextBox control. Configure the ID of each textbox as described in Table 32.1.
Table 32.1
32
Form Field IDs
Textbox Data
Textbox ID
First Name
FirstName
Last Name
LastName
Phone Number
Phone
E-mail Address
Email
Confirm E-mail
ConfirmEmail
Address
Address
City
City
State
State
ZIP Code
ZIP
Now we’re ready to add the validation controls and finish the form.
1. Add a new RequiredFieldValidator immediately to the right of the FirstName TextBox control.
2. Change the ErrorMessage property of the RequiredFieldValidator to “Required Field”.
This is what will appear if the user fails to complete this required field.
3. Click the dropdown for the ControlToValidate property of the RequiredFieldValidator and select the FirstName TextBox control, as shown in Figure 32.2.
4. Add another RequiredFieldValidator next to the LastName TextBox control and configure it the same way that you did the first RequiredFieldValidator, but this time, set the property to the LastName TextBox control. (If you choose, you can copy and paste the first RequiredFieldValidator to make this faster.)
ControlToValidate
5. Repeat the same process to add a RequiredFieldValidator for the phone number and email address TextBox controls. Configure the ControlToValidate property so it validates the Phone and Email textboxes, respectively.
6. Add a new CompareValidator to the right of the ConfirmEmail textbox. 7. Change the ErrorMessage property to “Addresses
must match”.
8. Set the ControlToCompare property to the Email TextBox control. 9. Set the ControlToValidate property to the ConfirmEmail TextBox control. 10. Make sure the Operator property is set to Equal. This will force validation to fail if the
6055_32.qxp
12/7/2006
12:36 PM
Page 603
The Need for Form Validation
603
values of the controls specified in the ControlToValidate and ControlToCompare properties are not the same.
11. Add a new RegularExpressionValidator to the right of the ZIP textbox. 12. Change the ErrorMessage property to “ZIP
Code is Invalid”.
13. Set the ControlToValidate property to the ZIP textbox. 14. Click the … button in the Tag Properties pane to display the Regular Expression Editor shown in Figure 32.3.
15. Select U.S.
ZIP code
from the list of regular expressions.
16. Click OK. Figure 32.2 The ControlToValidate property can be set easily using the dropdown in the Tag Properties pane.
32
Figure 32.3 If you don’t know how to write regular expressions, you can still take advantage of them using the Regular Expression Editor.
6055_32.qxp
604
12/7/2006
12:36 PM
Page 604
Chapter 32 Implementing Form Validation Using ASP.NET
We now have a functioning form, but it’s still possible to enter an invalid phone number or e-mail address. Let’s add a couple more RegularExpressionValidators to fix that.
1. Add a new RegularExpressionValidator to the right of the RequiredFieldValidator for the Phone TextBox control.
2. Set the ControlToValidate property to the Phone textbox. 3. Set the ErrorMessage property to “Invalid 4. Set the ValidationExpression to U.S.
Phone Number”.
Phone Number.
5. Add a new RegularExpressionValidator to the right of the RequiredFieldValidator for the Email TextBox control.
6. Set the ControlToValidate property to the Email textbox. 7. Set the ErrorMessage property to “Invalid
E-mail”.
8. Set the ValidationExpression to Internet
e-mail address.
You can now save and browse the form. Notice that when you do, the spacing on the Phone TextBox control is thrown off a bit by the validation controls, as shown in Figure 32.4. You can easily resolve that using the Display property. Figure 32.4
32
Because the Phone textbox has two validation controls associated with it, the space below it is thrown off by the space reserved for the validation controls.
Extra space caused by validation control
Select both validation controls associated with the Phone textbox and change the Display property to Dynamic. Now save and browse the form again and you’ll see that the spacing between all the TextBox controls is consistent.
6055_32.qxp
12/7/2006
12:36 PM
Page 605
Troubleshooting
Testing the Form To test the form, enter your name and then enter “1-555-222-1212” for the phone number. Click on another field (not the Submit button) or press Tab to go to the next field. You will see a validation failure immediately on the phone number field because the number is in an incorrect format. Change the phone number value to “555-222-1212” and it will pass validation. Test the other validation controls as well to ensure that we’ve met the requirements we outlined earlier. If your form will not submit even with correct information in the form fields, see “Submit Button Does Nothing” in the “Troubleshooting” section of this chapter.
TIP As mentioned previously, ASP.NET will also validate your form on the server. If you want to test this, disable JavaScript in your browser and test your form. You’ll see that your validation controls still display the error messages when they fail, but it requires a round trip to the server to validate.
As you can see, ASP.NET validation controls are a powerful way to help improve the security of your Web site. However, they are just one step in protecting your data. If you want a more comprehensive approach to securing your application, the Microsoft Developer Network (MSDN) Web site offers many great resources, including a comprehensive white paper at http://msdn.microsoft.com/msdnmag/issues/05/11/SecureWebApps/default.aspx.
Troubleshooting Validation Controls Don’t Work My validation controls don’t work at all. They don’t show up and the page acts like they aren’t even there. What’s going on? Make sure you don’t have the Visible property set to false for the validation controls. Some developers are thrown off by the fact that the error message for a validation control always shows up in the designer, so they change the Visible property thinking that will make it work correctly. In fact, any control with a Visible property of false is not rendered by ASP.NET at all.
Submit Button Does Nothing I have completed all the fields on my form correctly, but when I click Submit, nothing happens. What did I do wrong? Make sure that you aren’t using any client-side script that could be interfering with the submission of the form other than script generated by ASP.NET. If you mix your own client-side validation code with ASP.NET’s code, it can sometimes cause this behavior. Test the page without your custom script and see if that corrects the problem.
605
6055_32.qxp
606
12/7/2006
12:36 PM
Page 606
Chapter 32 Implementing Form Validation Using ASP.NET
Lagniappe (lan yap’) n.,
a gift or bonus
Validation Groups You’ve seen the power and versatility of ASP.NET validation controls, but what happens when you have two or more different areas of a page that act as separate forms? For example, suppose you have three different mailing lists that users of your Web site can sign up for. You have an e-mail TextBox control and a button for each mailing list. You also hook up a RegularExpressionValidator and RequiredFieldValidator control to each textbox so you get good e-mail addresses. Imagine the frustration of your users when they realize that to sign up for any mailing list, they must enter a valid e-mail address into the TextBox controls of all three mailing lists! Validation groups are a new feature to ASP.NET 2.0, and they were created to solve just this kind of problem. Each of your TextBox controls and each of your validation controls will have a property. (The ValidationGroup property is not specific to textboxes, but our example is.) By entering the same value for the ValidationGroup property of a TextBox control and a validation control, you create a relationship between those controls. Validation controls will only pay attention to controls that are within the same validation group. ValidationGroup
You can easily solve the problem outlined above by creating three validation groups, one for each mailing list.
6055_33.qxp
12/7/2006
12:37 PM
Page 607
CHAPTER
33
Using ASP.NET Web Parts
In this chapter An Introduction to Web Parts Creating ASP.NET User Controls Web Parts Controls in the Toolbox Creating a Web Parts Page Web Parts Page Display Modes The Web Parts Catalog Troubleshooting Lagniappe: Editing Web Parts Controls
6055_33.qxp
608
12/7/2006
12:37 PM
Page 608
Chapter 33 Using ASP.NET Web Parts
An Introduction to Web Parts The term Web Parts can actually mean two different things: Web Parts as a technology and Web Parts as the controls that reside on an ASP.NET Web Page. Web Parts technology consists of a series of ASP.NET 2.0 controls that make it easy to develop portal-like Web pages that can be customized and arranged within a browser while viewing a Web page. Web Parts technology also supports ASP.NET 2.0 personalization, a feature that allows individual users of a site to customize the appearance and layout of a page and to have that customization applied automatically each time they visit the site. N OTE
ASP.NET 2.0 personalization features rely on a database to store data on individual users. Before you go through the examples in this chapter, you should download and install Visual Web Developer Express Edition from Microsoft by browsing to msdn.microsoft.com/vstudio/express/vwd/download/. When you install Visual Web Developer Express Edition, choose the option to install SQL Server 2005 Express Edition.
Web Parts controls are the controls that are inserted onto a Web Parts page. They can either be custom controls that you (or other developers) create or the Web Parts controls that exist within the Expression Web Toolbox.
33
Web Parts controls are added to a page inside an area called a Web Parts zone. When you design your page, you first add one or more WebPartZone controls to the page and then you add other controls to the Web Parts zone. Depending on the configuration of the page, users can drag and drop Web Parts between Web Parts zones. N OTE
In this chapter, we won’t go into detail on every feature concerning Web Parts, but we will cover enough of the features so that you’ll feel comfortable experimenting with them and using them in your own Web site.
As mentioned previously, you can create your own custom Web Parts for use in your pages. The most common method of creating a custom Web Parts control is to create a special kind of ASP.NET page called a user control.
6055_33.qxp
12/7/2006
12:37 PM
Page 609
Creating ASP.NET User Controls
N OTE
609
While all of the Web Parts controls used in this chapter are made up of user controls and existing ASP.NET controls, a developer can also create custom Web Parts controls from scratch. Doing so is not trivial and is far outside the scope of this book. If you’re interested in more advanced material on the topic of custom Web Parts controls, Microsoft has some great documentation available at www.asp.net/QuickStart/ aspnet/doc/webparts/custom.aspx.
Let’s create a user control now. We can use it in a Web Parts page later in this chapter.
Creating ASP.NET User Controls As mentioned previously, an ASP.NET user control is a special kind of ASP.NET page. You can think of a user control as a sort of “page within a page.” When you are designing a user control, you work with it just as you work with a regular ASP.NET page. You can add controls to it, use Expression Web behaviors, create layers, and so on. However, the user control cannot be browsed directly. Instead, you must place it onto an ASP.NET page and then browse to the ASP.NET page to use the user control. N OTE
ASP.NET user controls can also contain ASP.NET code. When a user control is placed on an ASP.NET Web page, the code it contains is also available.
As you might have surmised, ASP.NET user controls are extremely useful for creating reusable components that can be inserted onto an ASP.NET Web page. You’ll have the chance to create a couple of user controls as you progress through this chapter. As a matter of fact, let’s go ahead and create a simple user control now. N OTE
Now is a good time to create a new Web site that you can use to work through the samples in this chapter. If you don’t want to create your own site, you can find all the finished files for this chapter’s Web site in the Examples\Chapter33\Files\Website folder on the CD that accompanies this book. The sample Web site was developed in C#, but code samples in this chapter will be provided in both C# and VB.
To create an ASP.NET user control, follow these steps:
1. Select File, New, Page. 2. Select ASP.NET from the list of page types on the left.
33
6055_33.qxp
610
12/7/2006
12:37 PM
Page 610
Chapter 33 Using ASP.NET Web Parts
3. Select Web User Control from the list of ASP.NET page types. 4. Select the language of your choice and click OK to create the user control. N OTE
Even though Expression Web provides VJ# as a language choice, VJ# doesn’t fully support the architecture of ASP.NET 2.0, so I won’t be including code samples in VJ#.
After you’ve created your user control, drag a few controls onto it:
1. Drag an ASP.NET
➔ ➔
Label
control onto the user control.
For more information on adding ASP.NET controls to a page, see “Using Standard ASP.NET Controls,” p. 495 (Chapter 28). For more information on using ASP.NET controls in the Toolbox, see “Using Standard ASP.NET Controls,” p. 495 (Chapter 28).
2. Position the insertion point just to the right of the Label control and press Enter. 3. Drag an ASP.NET
Textbox
control onto the user control.
4. Position the insertion point just to the right of the Textbox control and press the Spacebar.
5. Drag an ASP.NET
Button
control onto the user control.
6. Switch to Code View and change the first line of code in the control from this
to this
33
7. Save the page. Your user control should now look like Figure 33.1. Save the user control as prop.ascx. Later in the chapter, we’ll use this user control to create a Web Parts control.
Figure 33.1 Your finished user control contains three simple ASP.NET controls.
6055_33.qxp
12/7/2006
12:37 PM
Page 611
Creating a Web Parts Page
611
Web Parts Controls in the Toolbox ASP.NET 2.0 comes with several Web Parts controls that are used to create Web Parts pages. These controls are located in the ASP.NET section of the Expression Web Toolbox. We don’t have room to go into the details of every Web Parts control in the Toolbox, but we will discuss the following controls as we progress through this chapter: ■ WebPartManager—The WebPartManager
is a non-visual control that manages all the Web Parts controls and zones on a page. Any page that uses Web Parts controls must have exactly one WebPartManager on the page.
■ WebPartZone—A WebPartZone
is a container for Web Parts controls. Each WebPartZone control is identified with a unique ID. Depending on the current configuration of the WebPartManager control, users may be able to drag and drop Web Parts between zones in the browser. Users may also be able to add new Web Parts controls to the zone of their choice.
■ CatalogZone—The CatalogZone
is a special Web Parts zone that allows users to browse available Web Parts controls and add them to the Web Parts zone of their choice.
■ EditorZone—The EditorZone
control adds editing functionality to a Web Parts page. It is used in conjunction with an editing control such as the AppearanceEditorPart control.
■ AppearanceEditorPart—The AppearanceEditorPart
provides a user interface with which a user can modify the appearance of Web Parts controls on a page.
Creating a Web Parts Page You’ve now got enough information regarding Web Parts controls to create a Web Parts page. We’ll start simple and then build on the page as we progress through the rest of the chapter.
1. Create a new ASP.NET page. 2. Drag a WebPartManager control onto the page. TIP Because the WebPartManager is a non-visual control, you may be prompted to enable the Visual Aid so you can see the WebPartManager control. You should enable the Visual Aid because it will give you a better understanding of the makeup of a Web Parts page. However, not enabling the Visual Aid will not prevent you from completing the sample in this chapter.
3. Place the insertion point to the right of the WebPartManager control and press Enter to insert a new line.
33
6055_33.qxp
612
12/7/2006
12:37 PM
Page 612
Chapter 33 Using ASP.NET Web Parts
TIP To place the insertion point to the right of the WebPartManager control, first select the control and then press the right arrow key on your keyboard.
WebPartManager
4. Insert a new table. Set the number of rows to 1, the number of columns to 2, and the table width to 500 pixels. Leave all other settings at the default values. CAUTION Make sure that you select In Pixels instead of In Percent when inserting the table. Otherwise, the table will take up five times the width of the table.
5. Insert one WebPartZone control in each table cell. 6. Select the first WebPartZone control and click the arrow button to display the Common WebPartZone Tasks popup as shown in Figure 33.2. Figure 33.2 WebPartZone
controls can be easily configured using the Common WebPartZone Tasks popup.
33
7. Click the AutoFormat link, choose the Professional scheme, and click OK. 8. Select the second WebPartZone control and click the arrow button to display the Common WebPartZone Tasks popup.
9. Click the AutoFormat link, choose the Colorful scheme, and click OK. 10. Drag a Calendar control from the Standard ASP.NET Controls section of the Toolbox and drop it into the first WebPartZone control.
6055_33.qxp
12/7/2006
12:37 PM
Page 613
Creating a Web Parts Page
613
11. Drag a Login control from the Login ASP.NET Controls section of the Toolbox and drop it into the second WebPartZone control.
12. Save the page as “default.aspx”. Your page should look like Figure 33.3. You can’t tell from the black and white image in Figure 33.3, but the controls you dropped in each WebPartZone control take on the formatting of that zone. Figure 33.3 This Web Parts page contains two Web Part zones. It has limited functionality at this point.
Go ahead and browse the page. Each Web Parts control on the page has a small downwardpointing arrow button in the upper right corner. If you click that button, a menu is displayed that allows you to either minimize or close the Web Parts control, as shown in Figure 33.4. As we add additional features to this Web Parts page, you’ll see new items appear on this menu. If you see a “SQLExpress database file auto-creation error” when browsing the Web Parts page, see “Error Connecting to SQL Server” in the “Troubleshooting” section of this chapter. If you get an error saying you must add a WebPartManager to enable Web Parts, see “WebPartManager Error When Browsing Web Parts Page” in the “Troubleshooting” section of this chapter.
N OTE
When you preview your Web Parts page, ASP.NET will automatically create a SQL Server 2005 Express Edition database and add it to the App_Data folder in your Web site. ASP.NET will use this database to store personalization information for the Web Parts page.
33
6055_33.qxp
614
12/7/2006
12:37 PM
Page 614
Chapter 33 Using ASP.NET Web Parts
Figure 33.4 Each Web Parts control contains a menu that allows you to interact with it. You can’t do much at this stage.
If you get an error connecting to SQL Server at this point, see “Error Connecting to SQL Server” in the “Troubleshooting” section of this chapter.
If you click Minimize on the menu, the Web Parts control collapses so that only the title is displayed and the Minimize menu item changes to Restore. If you click Close on the menu, the Web Parts control is removed from the page. CAUTION
33
Make sure that you don’t select Close from the menu of either Web Part at this point. If you close a Web Part, it will remove it from the page and there is no easy way to get it back until we add that functionality later.
At this stage, you can’t customize the page or move Web Parts controls around. To do that, we’ll need to change the display mode of the page.
Web Parts Page Display Modes A Web Parts page can be displayed in one of five different display modes: ■ BrowseDisplayMode—This
is the default view of the page. It allows minimal configuration of the page. The page you previewed earlier was in BrowseDisplayMode.
■ CatalogDisplayMode—In
this mode, the Web Parts Catalog is displayed so that users can add or remove Web Parts controls from the page. Web Parts controls can also be dragged and dropped in this mode.
■ ConnectDisplayMode—In
this mode, the Web Parts page displays user interface elements that aid in connecting Web Parts together. (For example, you might have a Zip code lookup Web Part that communicates with a weather map Web Part.)
6055_33.qxp
12/7/2006
12:37 PM
Page 615
Web Parts Page Display Modes
615
■ DesignDisplayMode—In
this mode, the Web Parts zones are visible and users can drag and drop Web Parts controls between zones and within zones.
■ EditDisplayMode—In
this mode, Web Parts controls can be edited. To allow editing of a Web Parts control, the page must contain an EditorZone control and at least one editor control such as the AppearanceEditorPart mentioned earlier.
To change the display mode of a Web Parts page, set the DisplayMode property of the WebPartsManager control. Unlike many of the other properties we’ve set on ASP.NET controls so far in this book, you cannot set the DisplayMode property declaratively in the HTML code for the control. Instead, you must do it using server-side ASP.NET code.
Creating a User Control that Sets the Display Mode It’s common practice to provide users with a user interface for changing the display mode of a Web Parts page. Because an interface that changes display modes is something you might want to use in all your Web Parts pages, creating the interface as a user control is the perfect choice. Let’s create a simple user control that can be used on any Web Parts page you create to change the display mode.
1. Create a new user control. 2. Add a DropDownList
ASP.NET
control to the user control and change the ID property to
“ddlDisplayMode”. CAUTION Make sure you don’t insert a Drop-Down Box control from the Form Controls section of the Toolbox. You should insert a DropDownList control from the Standard ASP.NET section of the Toolbox.
3. In the Common DropDownList Tasks popup, check the Enable AutoPostBack checkbox.
4. In the Common DropDownList Tasks popup, click the Edit Items link. 5. Click Add in the ListItem Collection Editor dialog. 6. Change the Text property to “Browse”, as shown in Figure 33.5. 7. Click Add to add a new ListItem. 8. Change the Text property to “Edit”. 9. Add two more ListItems. Change the text to “Design” for the first and “Catalog” for the second.
10. Click OK in the ListItem Collection Editor dialog. 11. Save the user control as “displaymodeui.ascx”.
33
6055_33.qxp
616
12/7/2006
12:37 PM
Page 616
Chapter 33 Using ASP.NET Web Parts
Figure 33.5 Items are added to the DropDownList control using the ListItem Collection Editor.
At this point, the user control has no functionality. Let’s add some code to change the display mode of the Web Parts page to which the user control will be added.
Adding Code to Change the Display Mode Switch to Code View in the user control and add the following code after the first line of code that starts with // create a local WebPartManager WebPartManager _mgr; void ddlDisplayMode_SelectedIndexChanged(object sender, EventArgs e) { WebPartDisplayMode mode = _mgr.SupportedDisplayModes[ddlDisplayMode.SelectedValue]; _mgr.DisplayMode = mode; }
<script runat=”server”> ‘create a local WebPartManager Dim _mgr As WebPartManager Sub ddlDisplayMode_SelectedIndexChanged(ByVal sender As object, ByVal e As EventArgs) Dim mode As WebPartDisplayMode = _mgr.SupportedDisplayModes(ddlDisplayMode.SelectedValue) _mgr.DisplayMode = mode End Sub
6055_33.qxp
12/7/2006
12:37 PM
Page 617
Web Parts Page Display Modes
617
Sub Page_Load(ByVal sender As object, ByVal e As EventArgs) _mgr = WebPartManager.GetCurrentWebPartManager(Me.Page) End Sub
This code is pretty simple. It uses the SupportedDisplayModes method of the WebPartDisplayMode to determine if the selected mode is supported. It then changes the DisplayMode property of the WebPartManager to the mode you selected. N OTE
Some of this code may be unfamiliar to you. For more information on writing ASP.NET code, I suggest reading Sams Teach Yourself ASP.NET 2.0 in 24 Hours, Complete Starter Kit from Sams Publishing. I also have a book in the works that deals specifically with writing ASP.NET applications using Expression Web and Visual Web Developer Express Edition. Check my Web site at www.jimcobooks.com for information as it becomes available.
The final code change in the user control is to hook up the server-side code you just added to the DropDownList control. Locate the code in the user control for the DropDownList control and change it from this
to this
N OTE
33 You may have noticed that the server-side code includes code that runs when the page runs, but you are not required to hook up that code so that it runs when the user control is loaded. That’s because ASP.NET handles that automatically for you.
Go ahead and save the user control. The user control is now complete and is ready to be added to the Web Parts page.
1. Open the Web Parts page (default.aspx) and switch to Design View if it’s not already visible.
2. From the Folder List in Expression Web, drag the displaymodeui.ascx user control and drop it right under the WebPartManager control in default.aspx.
3. Save default.aspx.
6055_33.qxp
618
12/7/2006
12:37 PM
Page 618
Chapter 33 Using ASP.NET Web Parts
TIP By dragging and dropping the user control onto the page, you have added the functionality provided by the user control to the page. In this case, you’ve just added a user interface for switching the display mode of the Web Parts page. To add the same user interface to any other Web Parts page, simply drop the same user control onto the Web Parts page.
Browse default.aspx and you’ll notice that the dropdown from the user control appears above the Web Parts zones, as shown in Figure 33.6. Figure 33.6 The user control we just added creates a user interface for changing the display mode of the Web Parts page.
33
If you select Design from the dropdown, you’ll notice that the Web Parts zones become visible and you can drag and drop controls from one Web Parts zone to the other, as shown in Figure 33.7. N OTE
At this point, if you select anything other than Browse or Design, you will see an error in the browser. We will add additional functionality later in this chapter.
If you see an error that says “Value cannot be null” when browsing the page, see “Null Value Message When Browsing Web Parts Page” in the “Troubleshooting” section of this chapter.
6055_33.qxp
12/7/2006
12:37 PM
Page 619
The Web Parts Catalog
619
Figure 33.7 In Design mode, you can drag and drop controls from one Web Parts zone to another. In this case, I’m dragging the Login control from the zone on the right to the zone on the left.
N OTE
You may not know it, but ASP.NET personalization features are kicking in at this point. If you move a control from one Web Parts zone to another and then close your browser, that move will still be in effect the next time you browse the page. Because you haven’t actually logged into this Web site, ASP.NET personalization features are using client cookies to identify you. If you move to another computer and browse the same page, changes you made on the first computer will no longer apply.
The Web Parts Catalog The Web Parts page you’ve created to this point contains only two Web Parts controls. To fully utilize the power of Web Parts, let’s add the capability to add new Web Parts controls to the page. The ability to add Web Parts controls to a page is provided by the CatalogZone and DeclarativeCatalogPart Web Parts controls.
1. Open default.aspx in Expression Web. 2. Create a new table column to the right of the existing table columns.
➔
For more information on adding columns to tables, see “Using Tables and Layout Tables,” p. 149 (Chapter 9).
3. Drag a CatalogZone control from the Toolbox to the new table cell. 4. Click the AutoFormat link in the Common Catalog Zone Tasks popup and apply a formatting scheme of your choice.
5. Drag a DeclarativeCatalogPart control from the Toolbox and drop it inside the CatalogZone
control you added in Step 3.
33
6055_33.qxp
620
12/7/2006
12:37 PM
Page 620
Chapter 33 Using ASP.NET Web Parts
6. Click the Edit Templates link in the Common DeclarativeCatalogPart Tasks popup. 7. Drag the prop.ascx user control you created earlier into the DeclarativeCatalogPart control, as shown in Figure 33.8. Figure 33.8 The DeclarativeCatalogPart is inserted inside the Catalog Zone. The prop.ascx user control is then added to the DeclarativeCatalogPart.
CatalogZone Web Parts control
prop.ascx User control
DeclarativeCatalogPart Web Parts control
8. Save the page. Browse the default.aspx page now to test the new Web Parts Catalog.
33
If you see an error saying that WebUserControl1 is defined in multiple assemblies, see “Error When Browsing Page with User Controls” in the “Troubleshooting” section of this chapter.
When the page is displayed, select Catalog from the dropdown and you will see the Web Parts Catalog, inside of which is a checkbox labeled “Untitled”. It would be nice to provide a more descriptive name.
1. Open default.aspx in Expression Web and locate the code for the prop.ascx user control.
2. Change the code for the user control from this
to this
3. Save default.aspx. Now browse default.aspx and switch to Catalog mode. The control now shows a descriptive name. Check the checkbox for the Prop Control control, select a Web Parts zone, and click Add to add the control, as shown in Figure 33.9.
6055_33.qxp
12/7/2006
12:37 PM
Page 621
The Web Parts Catalog
621
Figure 33.9 You can now add the Prop Control control to a Web Parts zone by switching to Catalog mode.
TIP You can add title attributes to the Calendar and Login controls you added earlier if you want to give them more descriptive names. If you do, you’ll notice that neither the Calendar nor the Login control will recognize title as a valid attribute and Expression Web will identify the code as invalid. You can safely ignore Expression Web’s complaint about the attribute.
As you progressed through this chapter, you created a powerful portal-like page that contains robust user interface features, personalization features, and customization features, and you did all of it with only a small amount of code. You also learned how to create user controls so you can build your own Web Parts controls for use in Web Parts pages. The best way to get comfortable with using Web Parts is to experiment with them. This chapter should have provided a solid foundation for doing just that.
33
6055_33.qxp
622
12/7/2006
12:37 PM
Page 622
Chapter 33 Using ASP.NET Web Parts
Troubleshooting WebPartManager
Error When Browsing Web Parts Page
I’ve added a WebPartManager Web Parts control and some Web Parts zones to my page. However, when I browse the page, I see an error telling me that I need to add a WebPartManager control to enable Web Parts. The WebPartManager must be added before any other Web Parts controls. If you add the after other Web Parts controls, you can drag and drop the WebPartManager to the top of the page to get rid of this error. WebPartManager
Note that you may need to enable the ASP.NET non-visual controls Visual Aid to accomplish this.
Error Connecting to SQL Server When I browse my Web Parts page, it seems to hang for a long time and then I see an error saying it couldn’t connect to SQL Server. I haven’t added anything that should be connecting to a database. What’s going on? ASP.NET Web Parts pages use SQL Server 2005 Express Edition by default to store data about how a page is laid out for individual users. If you haven’t installed SQL Server 2005 Express Edition, you’ll see an error indicating that ASP.NET could not connect to SQL Server. You can get SQL Server 2005 Express Edition free from Microsoft by browsing to msdn.microsoft.com/vstudio/express/sql/download or by installing it along with Visual Web Developer Express Edition as previously mentioned in this chapter.
Null Value Message When Browsing Web Parts Page I am browsing my Web Parts page after adding the displaymodeui.ascx user control. When it loads in the browser, all I see is an error that says “Value cannot be null.” I have no idea what that means. The code that we added to the displaymodeui.ascx user control uses a value in a DropDownList control to set the display mode. ASP.NET knows which display modes are valid, and if you attempt to set one that isn’t valid, you’ll see this message. There could be a couple of reasons for this. If you are selecting a mode that should be valid, it’s likely that you simply misspelled one of the entries in the DropDownList control. Check the items in the DropDownList carefully and make sure they are spelled correctly. Another cause of this problem is selecting a mode that is not currently valid. For example, if you were to choose Edit at this point, it would display the error you are seeing because Edit is not a valid mode until the page has been configured to allow for the editing of Web Parts controls. In a real application, the code in the user control would intercept this error and perhaps just display a neatly formatted informational message to the user. However, that kind of complexity is outside the scope of this book.
6055_33.qxp
12/7/2006
12:37 PM
Page 623
Lagniappe: Editing Web Parts Controls
Error When Browsing Page with User Controls I have added the prop.ascx user control to the Catalog. Now when I browse the page, I get an error that says that WebUserControl1 exists in multiple places. ASP.NET creates a representation of every user control in memory and uses these “duplicates” to create the user controls on a page. Every instance in memory must be uniquely identified. ASP.NET does this using class names. When you created the prop.ascx user control, you should have changed the ClassName attribute in Code View from WebUserControl1 to PropControl. If you are getting the error you describe, you likely forgot that step.
Lagniappe (lan yap’) n.,
a gift or bonus
Editing Web Parts Controls In addition to adding Web Parts controls and moving them between Web Parts zones, you can also add the capability of editing controls. Editing Web Parts controls is accomplished using one or more of the following Web Parts controls: ■ AppearanceEditorPart—Allows
editing of the appearance of a Web Parts control.
■ BehaviorEditorPart—Allows
editing of the behavior of a Web Parts control. For example, you can use the BehaviorEditorPart to allow users to specify whether or not a specific Web Parts control can be minimized or closed.
■ LayoutEditorPart—Allows
the editing of several layout elements of a Web Parts control. For example, you can use the LayoutEditorPart to add the capability of configuring in which Web Parts zone a particular Web Parts control appears.
■ PropertyGridEditorPart—Allows
the editing of properties of a Web Parts control. The developer of the Web Parts control can specify which properties are editable by the PropertyGridEditorPart.
Let’s add the capability to edit the appearance of Web Parts controls on the page you created in this chapter.
1. Open default.aspx and make sure you are in Design View. 2. Drag an EditorZone Web Parts control from the Toolbox and drop it directly under the display mode dropdown.
3. Drag an AppearanceEditorPart control from the Toolbox and drop it into the EditorZone
Web Parts control.
4. Configure an AutoFormat scheme for the EditorZone Web Parts control if you wish and save the default.aspx page. Your page should now look like Figure 33.10.
623
6055_33.qxp
624
12/7/2006
12:37 PM
Page 624
Chapter 33 Using ASP.NET Web Parts
Figure 33.10 The Web Parts page now contains an EditorZone Web Parts control and an AppearanceEditorPart Web
Parts control so we can edit the appearance of the controls on the page.
Browse the page and select Edit from the display mode dropdown. At first glance, choosing Edit seems to have no effect. However, if you click the arrow button at the upper right of any Web Parts control, you’ll notice there is now an Edit menu item. When you click Edit, the AppearanceEditorPart Web Parts control is displayed, as shown in Figure 33.11. Make a change to one of the Web Parts controls and click OK to apply it. You’ve now completed the functionality of the Web Parts page. I think you’ll agree that you can create some incredibly powerful functions with minimal effort. I hope the information in this chapter will encourage you to experiment more with Web Parts controls and Web Parts pages.
6055_33.qxp
12/7/2006
12:37 PM
Page 625
Lagniappe: Editing Web Parts Controls
Figure 33.11 You can now edit the appearance of your Web Parts controls using the Edit display mode.
625
6055_33.qxp
12/7/2006
12:37 PM
Page 626
6055_pt08.qxp
11/30/2006
9:02 AM
Page 627
PART
VIII
Accessing Data in Expression Web 34
Primer on Data Access Technologies
35
Accessing Data with ASP.NET 2.0
629 635
6055_pt08.qxp
11/30/2006
9:02 AM
Page 628
6055_34.qxp
12/7/2006
12:38 PM
Page 629
CHAPTER
Primer on Data Access Technologies In this chapter A History of Data Access Data Access Technologies in Expression Web ASP.NET and Other Web Application Platforms Lagniappe: Databases Aren’t Just for Online Spreadsheets
34
6055_34.qxp
630
12/7/2006
12:38 PM
Page 630
Chapter 34 Primer on Data Access Technologies
A History of Data Access Over the past several years, Web sites have evolved into complex Web applications. As Web sites evolved, the consumers of those Web sites evolved as well. We expect more from our Web sites, and a large part of meeting that expectation is providing access to dynamic data. Microsoft first introduced data access to mainstream Web developers in FrontPage 97 with the inclusion of IDC/HTX. While IDC/HTX allowed Web developers to create data-driven Web pages, it was a far cry from the ease of use necessary to really push data-driven sites into the mainstream. However, when Active Server Pages (ASP) technology was released very soon thereafter, developers finally had a way to build dynamic content quickly. Many years later, Microsoft unveiled the .NET Framework. The .NET Framework included a new server-side technology called ASP.NET. ASP.NET once again revolutionized Web site development because it finally gave Web designers the toolset they needed to develop Web applications that felt like Windows applications. In fact, many of today’s ASP.NET developers were developers of Windows-based applications just a few years ago.
➔
For more information on the .NET Framework and ASP.NET, see “Using Standard ASP.NET Controls”, p. 495 (Chapter 28).
N OTE
ASP.NET used to be referred to by Microsoft as ASP+. In fact, the file extension for ASP.NET Web forms is .aspx—the ”x” is simply a ”+” turned on its side.
Data Access Technologies in Expression Web Because Expression Web uses ASP.NET 2.0 for data access, many powerful data access tools such as the DataView, the GridView, and other tools are available to you. Using these tools, you can connect to data in a database, in an Extensible Markup Language (XML) file, or even in a sitemap file. N OTE
34
➔ ➔
A sitemap file is a special XML file used by ASP.NET to map out the navigation structure of a Web site.
For more information on sitemap files in ASP.NET, see “Using ASP.NET Navigation Controls”, p. 527 (Chapter 29). For more information on accessing data with ASP.NET, see “Accessing Data with ASP.NET 2.0”, p. 635 (Chapter 35).
I realize that many Web designers are not programmers. In fact, Expression Web is aimed squarely at the designer market and not the programmers among us. However, don’t let that
6055_34.qxp
12/7/2006
12:38 PM
Page 631
ASP.NET and Other Web Application Platforms
631
dissuade you from digging into the data access features in Expression Web. You certainly don’t need to be a coder to appreciate and use the features that ASP.NET 2.0 provides to Expression Web. There are also ASP.NET developers who are more experienced in developing with ASP.NET, and yet they believe it is proprietary and that they are only able to connect to Microsoft database technologies. In fact, while you can certainly use the features in ASP.NET 2.0 to connect to SQL Server and Microsoft Access, you can also use the same tools to connect to Oracle databases, IBM DB2 databases, MySQL databases, and so on. You can connect to all these different data sources using what Microsoft calls the provider model. ASP.NET 2.0 comes with several providers that allow you to connect to the databases mentioned previously. However, anyone can write a provider and plug it into ASP.NET to allow for extended functionality. For example, if you wanted to write a provider specific to MySQL, one that added some functionality geared toward MySQL databases, you certainly could. You could then use your provider along with all the existing data access functionality in ASP.NET. N OTE
It’s not necessary to understand providers to use them. In fact, we’ll use some powerful data access features in the next chapter without going into providers at all. An in-depth discussion of providers is outside the scope of this book, but if you’d like to dig into the topic and work with a sample provider, Microsoft offers one for download at http://msdn.microsoft.com/library/default.asp?url=/library/en-us/cpguide/html/cpcontemplatefiles.asp.
ASP.NET and Other Web Application Platforms The one drawback to using ASP.NET 2.0 for data access is that not all hosting companies offer hosting with ASP.NET 2.0 support. In fact, many of the less expensive hosting companies host Web sites on Linux or UNIX, and those servers won’t work with ASP.NET 2.0. TIP There is an open source movement to create a foundation on which ASP.NET can run on Linux and UNIX Web servers. As of this writing, you can (with some amount of work) get ASP.NET 1.1 working on a non-Windows Web server, but ASP.NET 2.0 is supported only on Windows 2000 and later.
Many of today’s Web designers are drawn to technologies such as PHP because they think PHP is easier to use than ASP.NET. Still others believe that you have to buy the .NET Framework to use ASP.NET 2.0. It is my assertion that both of these positions are flat-out wrong. It is every bit as easy to use ASP.NET as it is to use PHP. In fact, it is actually easier to create robust Web applications with ASP.NET 2.0.
34
6055_34.qxp
632
12/7/2006
12:38 PM
Page 632
Chapter 34 Primer on Data Access Technologies
TIP I’ll give you one more reason to use ASP.NET over PHP: Expression Web doesn’t support PHP. I realize that’s disappointing to many people, but why not use the opportunity to try ASP.NET. You just might like it!
As for those who believe that being an ASP.NET developer is an expensive endeavor, let me say that the .NET Framework is a free download (as is the .NET Framework software development kit (SDK)), and Microsoft provides a feature-rich, professional development environment for creating ASP.NET applications called Visual Web Developer Express Edition, which costs absolutely nothing. If you haven’t yet downloaded a copy of Visual Web Developer Express Edition, you should stop reading right now and do it. You’ll be absolutely amazed that Microsoft is giving away this tool! N OTE
We’ll cover using Visual Web Developer Express Edition in Appendix A, but you can go ahead and download it now by visiting http://www.asp.net/downloads/getvwd/default.aspx?tabid=62.
I usually make it a point not to talk about myself much in my books, but I have to let you know that I do approach the topic of ASP.NET with a bias. (After all, I’m an escalation engineer on the ASP.NET team at Microsoft.) Because of my occupation, I believe my bias is a legitimate one. I got to see first-hand the passion and hard work that went into the development of ASP.NET, and I get to see (on a daily basis) the dedication to always improving it and making it the best it can be. ASP.NET 2.0 is a direct result of that hard work, and it’s got some pretty significant wow factor built in. As you work through the next chapter, I promise you’ll be amazed at what you can do. You’ll find yourself smiling when you see some of the cool data access features available. Hopefully, you’ll find yourself exploring new ways to make your Web site more dynamic and feature-rich.
Lagniappe (lan yap’) n.,
a gift or bonus
Databases Aren’t Just for Online Spreadsheets Many Web designers consider data access only for tasks such as presenting data in a tabular form much like a spreadsheet. It doesn’t help much to have grid-type controls so prominent in many Web design applications, but the fact is that data access is for much more than just creating online spreadsheets. One of the newest trends in Web development is the content management system. A content management system allows a Web designer to update a Web site’s content by browsing
6055_34.qxp
12/7/2006
12:38 PM
Page 633
Lagniappe: Databases Aren’t Just for Online Spreadsheets
to a special page that is somewhat like an online word processor. Content is entered into the page and then saved into a database. That content is then used to feed other Web pages in the site. N OTE
Not all content management systems are data-enabled. Some of them dynamically update the actual page instead of storing the content in a database. The latter is more flexible and easier to reuse when a site redesign takes place.
There are plenty of content management systems available that can easily be added to an existing site. It’s also possible to build one yourself with minimal effort. My Web site, Jimco Software (www.jimcosoftware.com), uses an ASP.NET control from Telerik (www.telerik.com) to implement a content management system. Telerik’s r.a.d.editor control is an extremely powerful solution and can be used to create an ASP.NET-based content management system without writing any code at all. For those of you who are partial to PHP and the open source movement, MODx (modxcms.com) is an excellent content management system. MODx provides a feature-rich content management system and PHP application framework that is easy to use, is well supported, and is free! Don’t get stuck in the rut of believing that data access is only for dull and dry data presentation. You can use data access technologies to add plenty of exciting and enhancing features to your Web site with very little effort.
633
6055_34.qxp
12/7/2006
12:38 PM
Page 634
6055_35.qxp
12/7/2006
12:39 PM
Page 635
CHAPTER
35
Accessing Data with ASP.NET 2.0
In this chapter ASP.NET 2.0 Data Source Controls Displaying Data with ASP.NET 2.0 Editing Data with ASP.NET 2.0 Troubleshooting Lagniappe: Creating a Master/Detail View
6055_35.qxp
636
12/7/2006
12:40 PM
Page 636
Chapter 35 Accessing Data with ASP.NET 2.0
ASP.NET 2.0 Data Source Controls The previous chapters on ASP.NET have shown how it’s possible to design some pretty impressive ASP.NET Web pages without writing any code at all. It may surprise you to know that you can also create some powerful data access pages in ASP.NET 2.0 without writing any code. The functionality for doing so is encapsulated within the ASP.NET data source controls. N OTE
ASP.NET data source controls are located in the Data section of the ASP.NET Controls Toolbox.
ASP.NET data source controls provide robust connectivity to many different types of data sources simply by setting properties on a control using the Tag Properties task pane or by specifying properties for a control in Code View declaratively.
➔
For more information on setting ASP.NET control properties using the Tag Properties task pane, see “Using Standard ASP.NET Controls,” p. 495 (Chapter 28).
N OTE
Data source controls do not display data on a page. As you’ll see later in this chapter, they are used in conjunction with other controls to display data.
Four data source controls are included in the Expression Web Toolbox. Each data source control is similar in functionality, but they are specialized for specific types of data. Let’s go over the details of each data source control and then we’ll create some Web pages that use the AccessDataSource and SqlDataSource controls to connect to a database. N OTE
Throughout this chapter, we will be using the Nwind.mdb database to build examples. If you don’t already have this database on your system, you can download it from www.microsoft.com/downloads/details.aspx?familyid=C6661372-8DBE-422B-8676C632D66C529C&displaylang=en.
AccessDataSource
35
Control
The AccessDataSource control provides data connectivity to a Microsoft Access database file. It includes some advanced features such as support for paging, sorting, filtering, and more. N OTE
The AccessDataSource control cannot connect to a password-protected Access database. To connect to a password-protected database, use the SqlDataSource control.
6055_35.qxp
12/7/2006
12:40 PM
Page 637
ASP.NET 2.0 Data Source Controls
637
To insert an AccessDataSource control onto a page, drag it from the Toolbox and drop it on the page. By default, Expression Web is configured to not show non-visual ASP.NET pages, so when you first insert any data source control, Expression Web will ask if you want to turn on the Visual Aid for ASP.NET controls. It’s recommended that you answer Yes to this prompt so you can work more easily with the data source control.
➔
For more information on Visual Aids, see “Using Web Page Views,” p. 127 (Chapter 8).
After you’ve inserted the AccessDataSource control, the easiest way to configure it is to click the Configure Data Source link in the Common AccessDataSource Tasks popup, as shown in Figure 35.1. Figure 35.1 Configuring a data source is easily done using the Configure Data Source link in the Common AccessDataSource Tasks popup.
If you are unable to see a data source control that you have placed on a page, see “Unable to See Data Source Control” in the “Troubleshooting” section of this chapter.
We’ll go over the details of configuring the AccessDataSource control and other data source controls later in this chapter. For now, let’s review some of the common properties used to configure the AccessDataSource control. ■ DataFile—Specifies
AccessDataSource
the location of the Microsoft Access database file used by the control.
■ DataSourceMode—This
property can be set to either DataSet (the default) or DataReader. In most cases, you’ll leave this property set to DataSet, but if you only need to display data in the database without sorting, filtering, and so on, you can set it to DataReader for better performance.
■ SelectQuery—Specifies
the SQL query used to select data from the database. When the is set to StoredProcedure, the SelectQuery property can be used to specify a stored query. SelectCommandType
N OTE
A discussion of creating SQL queries is outside the scope of this book. If you’d like more information on how to use SQL queries to work with databases, read Sams Teach Yourself SQL in 24 Hours, 3rd Edition from Sams Publishing, available at www.quepublishing.com/bookstore/product.asp?isbn=0672324423&rl=1.
35
6055_35.qxp
638
12/7/2006
12:40 PM
Page 638
Chapter 35 Accessing Data with ASP.NET 2.0
■ UpdateQuery—Specifies
the SQL query to use when updating the database.
■ DeleteQuery—Specifies
the SQL query to use when deleting records from the
database. ■ FilterExpression—Filters
data displayed by the SelectQuery property.
■ FilterParameters—Specifies
the parameters used with FilterExpression to filter the
database results.
SqlDataSource
Control
The SqlDataSource control can be used to connect to many different types of databases, but it contains performance optimizations that specifically target Microsoft SQL Server. N OTE
Unless you’re working with an enterprise-level application, you may not notice the optimizations in the SqlDataSource control.
The SqlDataSource control shares many of the same properties with the AccessDataSource control. All the properties we discussed previously for the AccessDataSource control also apply to the SqlDataSource control. To insert a SqlDataSource control on a page, drag it from the Toolbox onto the page. After inserting the SqlDataSource control, you can configure it using the Configure Data Source link on the Common SqlDataSource Tasks popup. We’ll cover the details of the SqlDataSource control later in this chapter.
SiteMapDataSource
Control
The SiteMapDataSource control is a hierarchical data source control that is designed to work with the ASP.NET navigation controls. ASP.NET navigation controls are covered in detail in Chapter 29, “Using ASP.NET Navigation Controls,” so we won’t go into detail on this control here.
XmlDataSource
Control
The XmlDataSource control provides data connectivity to XML files. To insert an XmlDataSource control, drag it from the Toolbox onto the page. You can then configure it using the Configure Data Source link on the Common XmlDataSource Tasks popup.
35
When configuring the XmlDataSource control, specify the XML data path, an optional XML transform file, and an optional XPath statement for filtering data, as shown in Figure 35.2.
6055_35.qxp
12/7/2006
12:40 PM
Page 639
Displaying Data with ASP.N 2.0T
639
Figure 35.2 For greater flexibility, an XML transform and XPath expression can be configured for an XmlDataSource control.
N OTE
A discussion of using XML transforms and XPath is outside the scope of this book. For details on using these XML features, read Sams Teach Yourself XML in 10 Minutes from Sams Publishing, available from www.quepublishing.com/bookstore/ product.asp?isbn=0672324717&rl=1.
Displaying Data with ASP.NET 2.0 There are several approaches to displaying data with ASP.NET. Which one you choose depends largely on the type of data you need to display and your purpose for displaying it. For example, to display a list of products and prices, a tabular display might be the best choice. On the other hand, to display information such as the name and address of one particular user, a data-bound form would be a better choice. ASP.NET makes it extremely easy to display data using both methods described above, and you can do it without writing any code because the work is all done by the data source control.
Displaying Data in Tabular Form A few ASP.NET controls specialize in displaying data in tabular form. The two most common controls are the DataList control and the GridView control. Of the two, the GridView is the easiest to use and offers the largest feature set. Let’s create a new ASP.NET page to display data from the Northwind Traders Access database. You can download the sample Nwind.mdb file using the link provided earlier in this chapter if you don’t already have the Northwind Traders database.
35
6055_35.qxp
640
12/7/2006
12:40 PM
Page 640
Chapter 35 Accessing Data with ASP.NET 2.0
N OTE
The completed examples from this chapter can be found in the Examples\Ch35\Files\ Website folder on the CD that accompanies this book.
Adding and Configuring a
GridView
Control
We’ll need to create a new ASP.NET page so we can add and configure a GridView control to display our data.
1. Open an existing Web site or create a new Web site. N OTE
➔ ➔
The Web site can be either server-based or disk-based. If you use a disk-based Web site, the ASP.NET Development Server can be used for testing the site.
For more information on creating a Web site, see “Creating a Web Site,” p. 25 (Chapter 2). For more information on the ASP.NET Development Server, see “Using the ASP.NET Development Server,” p. 485 (Chapter 27).
2. Create a new ASP.NET page and save it as gridview.aspx.
➔
For more information on creating ASP.NET pages, see “Creating Pages and Content,” p. 103 (Chapter 7).
3. Drag a GridView control from the ASP.NET section of the Toolbox and drop it on the page. If the Toolbox is not visible, see “Toolbox Not Visible” in the “Troubleshooting” section of this chapter.
4. Import the Nwind.mdb file into the root of the Web site.
➔
For more information on importing files, see “Creating Pages and Content,” p. 103 (Chapter 7).
5. If the Common GridView Tasks popup is not visible, click the arrow button to display it, as shown in Figure 35.3. Figure 35.3 To configure the GridView control, use the Common GridView Tasks popup.
35
6. Select from the Choose Data Source dropdown. 7. Select Access Database in the Data Source Configuration wizard, as shown in Figure 35.4, and click OK.
6055_35.qxp
12/7/2006
12:40 PM
Page 641
Displaying Data with ASP.NET 2.0
641
Figure 35.4 Instead of adding a data source control explicitly, you can configure a new one from the Common GridView Tasks popup.
8. Enter “Nwind.mdb” in the Configure Data Source dialog, as shown in Figure 35.5, and click Next. Figure 35.5 When displaying data from an Access database, you will need to specify the location and filename of the database.
35
6055_35.qxp
642
12/7/2006
12:40 PM
Page 642
Chapter 35 Accessing Data with ASP.NET 2.0
9. Make sure that Specify Columns from a Table or View is selected. 10. From the Name dropdown, select Employees. 11. Check the EmployeeID, LastName, FirstName, Title, and HireDate checkboxes, as shown in Figure 35.6, and click Next. Figure 35.6 The Configure Data Source dialog makes it simple to specify the data you want to display.
12. Click the Test Query button to make sure you are successfully connecting to the database and then click Finish. After you click Finish, you will see that the GridView control now displays the columns you selected. There are several more options available to you in the Common GridView Tasks popup, as shown in Figure 35.7. Figure 35.7
35
After you’ve configured a data source, you will have other options available for the GridView. In this case, we can now enable paging, sorting, and selection.
6055_35.qxp
12/7/2006
12:40 PM
Page 643
Displaying Data with ASP.NET 2.0
643
Save the page and test it in your browser. Even though you haven’t written any code at all, you will see that the GridView control is pulling the employee data from the database and displaying it on the page, as shown in Figure 35.8. Figure 35.8 We have successfully pulled data from the Access database, and we did it without writing a single line of code.
Sorting the GridView Right now the employees are in employee number order. Let’s reconfigure the display so they are listed in order of last name and then first name.
1. Select the GridView and click the arrow button to display the Common GridView Tasks popup.
2. Click the Configure Data Source link. 3. In the Configure Data Source dialog, click Next. 4. Click the Order By button shown previously in Figure 35.6. 5. In the Sort By dropdown, choose LastName. 6. In the Then By dropdown, choose FirstName, as shown in Figure 35.9. 7. Click OK. 8. Click Next and then Finish in the Configure Data Source dialog. Save and browse the page. Notice that the grid is now sorted by last name. If any two employees with the same last name are ever added to the database, the grid will display them sorted by first name. In a real-world application, it’s usually best to give the user a choice as to how to display the data. Let’s reconfigure the GridView control so the user can decide how to sort it.
1. Select the GridView control. 2. Click the arrow button to display the Common GridView Tasks popup. 3. Check the Enable Sorting checkbox, as shown in Figure 35.10.
35
6055_35.qxp
644
12/7/2006
12:40 PM
Page 644
Chapter 35 Accessing Data with ASP.NET 2.0
Figure 35.9 Configuring a data source so that results are sorted is easy using the Add ORDER BY Clause dialog.
Figure 35.10 You can give the user a choice for how to sort a GridView by checking the Enable Sorting checkbox.
Save and view the page in your browser. Notice that the header on each column is now a hyperlink. Clicking a link will sort by that column in ascending order. Clicking the same link again will sort by that column in descending order. In addition to binding data in a tabular fashion, you can also bind data in forms and other controls in a Web page. We’ll explore data binding in the Lagniappe section of this chapter.
35
Editing Data with ASP.NET 2.0 Let’s create a page that will allow us to edit employee information and save updated information back to the database. The GridView control makes this convenient by providing the ability to switch a row into edit mode. When you switch a row into edit mode, the information in the row is presented in textboxes so you can make changes.
6055_35.qxp
12/7/2006
12:40 PM
Page 645
Editing Data with ASP.NET 2.0
645
Open the gridview.aspx page and save it as edit.aspx. After you do that, you’ll need to reconfigure the data source to allow for updates and add a column to the GridView so users can switch a row into edit mode.
Configuring the Data Source 1. Select the GridView control and click the arrow button to display the Common GridView Tasks popup.
2. Click the Configure Data Source link to display the Configure Data Source dialog. 3. Click Next. 4. Click the Advanced button shown previously in Figure 35.6. 5. Check the Generate INSERT, UPDATE, and DELETE Statements checkbox, as shown in Figure 35.11. This will cause Expression Web to generate the necessary SQL statements to allow us to edit records from the database. Figure 35.11 The Advanced SQL Generation Options dialog makes it a onestep process to add the code necessary to edit the database.
6. Click OK and then click Next and Finish to close the Configure Data Source dialog.
Configuring the GridView Now that the data source is capable of updating information in the database, the final step is to configure the GridView and add a new column so a specific row can be switched into edit mode. I’m going to walk you through a long way of doing this because it will give you some experience in using some of the features of the GridView that you wouldn’t see otherwise. After you’ve configured the GridView, I’ll tell you an easier way to accomplish the same task.
1. Select the GridView and click the arrow button to display the Common GridView Tasks popup.
2. Click the Edit Columns link to display the Fields dialog.
35
6055_35.qxp
646
12/7/2006
12:40 PM
Page 646
Chapter 35 Accessing Data with ASP.NET 2.0
3. Scroll down in the Available Fields list and click the plus sign next to CommandField. 4. Select the Edit, Update, Cancel field, as shown in Figure 35.12, and click Add to add it to the GridView. Figure 35.12 The Fields dialog makes it easy to change the columns displayed in a GridView. In this case, we’re adding an Edit, Update, Cancel link in a new column.
5. Select the Edit, Update, Cancel field in the Selected Fields list and click the up arrow button repeatedly to move it to the top of the list, as shown in Figure 35.13. Figure 35.13 Columns can be rearranged by using the arrow buttons in the Fields dialog.
35
6055_35.qxp
12/7/2006
12:40 PM
Page 647
Editing Data with ASP.NET 2.0
647
6. Click OK in the Fields dialog. Your page should now look like Figure 35.14.
Figure 35.14 The GridView now has a new column so that employees can be edited.
When I started this section, I said I would describe the easy way of configuring a GridView for editing the database. After you’ve configured the data source so it will generate the code necessary to update the database, new checkboxes will be added to the Common GridView Tasks popup, as shown in Figure 35.15. The easy way of configuring the GridView so records can be edited is to simply check the Enable Editing checkbox. When you do that, Expression Web will automatically add the Edit, Update, Cancel column to the GridView. Figure 35.15 The Common GridView Tasks popup offers different options based on how the data source is configured. We now have the option to enable editing by simply checking a box.
35
6055_35.qxp
648
12/7/2006
12:40 PM
Page 648
Chapter 35 Accessing Data with ASP.NET 2.0
Testing the Page View the edit.aspx page in your browser. Click the Edit link next to the employee of your choice. When you do, the Edit link will change to an Update and Cancel link and all the data will be displayed in textboxes, as shown in Figure 35.16. Figure 35.16 The GridView is now a full-featured data editor.
To update data in the database, enter the new information and click Update. Alternatively, you can choose to click Cancel and revert to the original data from the database. Using the methods you’ve learned here, you can easily create a robust Web application that allows for not only the display of, but also the easy editing of data from a database. The example used in this chapter used an Access database, but the same methods apply to other databases as well. There’s much more that you can do with data access and ASP.NET 2.0. The easiest way to learn how to take advantage of this powerful feature set is to explore it and experiment with creating data-enabled pages.
35
6055_35.qxp
12/7/2006
12:40 PM
Page 649
Lagniappe: Creating a Master/Detail View
Troubleshooting Unable to See
Data Source
Control
I’ve added a data source control to my page and I’m trying to configure it. I know it’s there, but I can’t see it in Design View. You haven’t enabled the ASP.NET Non-visual Controls Visual Aid. By default, non-visual controls are not visible. To make them visible, select View, Visual Aids, ASP.NET Non-visual Controls.
Toolbox Not Visible I’d like to insert an ASP.NET control, but the Toolbox is not visible. Select Task Panes, Toolbox to toggle on the display of the Toolbox.
Lagniappe (lan yap’) n.,
a gift or bonus
Creating a Master/Detail View In many cases, it’s preferable to display a small subset of data and allow users to drill down into more information. This kind of approach is typically called a master/detail view, and creating such an interface is quite simple using the ASP.NET 2.0 controls in Expression Web.
Creating the Master View The master view will contain a subset of the Products table in the Northwind Traders database. We’ll use a GridView to display this data.
1. Create a new ASP.NET page and save it as masterdetail.aspx. 2. Add a GridView control to the page and select the option to add a new data source from the Choose Data Source dropdown in the Common GridView Tasks popup.
3. In the Data Source Configuration wizard, choose Access Database and change the ID for the data source to “MasterDetail,” as shown in Figure 35.17.
4. Choose the Nwind.mdb database and click Next. 5. Select the Products database from the Name dropdown. 6. Check the * checkbox. 7. Click Next and then click Finish. Because the master view should be a subset of the data in the Products table, let’s remove some of the columns displayed in the GridView.
1. Select the GridView and click the arrow button to display the Common GridView Tasks popup.
649
6055_35.qxp
650
12/7/2006
12:40 PM
Page 650
Chapter 35 Accessing Data with ASP.NET 2.0
Figure 35.17 Specifying a descriptive name for your data sources will help when you’re configuring them later.
2. Click the Edit Columns link. 3. In the Selected Fields list, remove all the columns except the Product Name and Unit Price columns by selecting each column and clicking the X button. The Fields dialog should look like Figure 35.18. Figure 35.18 The Fields dialog is used to remove the majority of the columns from the GridView.
35
6055_35.qxp
12/7/2006
12:40 PM
Page 651
Lagniappe: Creating a Master/Detail View
651
4. Select the GridView and then click the arrow button to display the Common GridView Tasks popup.
5. Check the Enable Selection and Enable Paging checkboxes. You can now save the page and preview it to see data displayed in the master grid. Notice that you can click the numbered links at the bottom of the GridView control to switch pages.
TIP You can experiment with the GridView properties in the Paging section of the Tag Properties task pane to change the configuration of the paging settings.
Creating the Detail View Now let’s create a detail view that will be populated by the details of the currently selected row in the GridView control. We’ll use the DetailsView control to add that functionality.
1. Add a new DetailsView control to the page, beneath the GridView control. 2. Choose the MasterDetail data source from the Choose Data Source dropdown. 3. In the Tag Properties task pane, set the width of the DetailsView control to 330px.
➔
For more information on using the Tag Properties task pane, see “Editing Tag Properties,” p. 215 (Chapter 12).
Now preview the page. Notice that the DetailsView control displays all the fields from the first record in the GridView control. When you click Select on a row in the GridView, we want the DetailsView to automatically display the details for the selected row. To do that, we’ll have to write a small amount of code. Switch to Code View and enter the code below into the page, directly before the opening tag: <script runat=”server”> protected void GridView1_SelectedIndexChanged(object sender, EventArgs e) { DetailsView1.PageIndex = GridView1.SelectedIndex; }
This code will run when the Select link is clicked in the GridView. It will make the PageIndex property of the DetailsView control equal to the SelectedIndex property of the GridView control. The result is that both of them will display the same record.
35
6055_35.qxp
652
12/7/2006
12:40 PM
Page 652
Chapter 35 Accessing Data with ASP.NET 2.0
TIP If you want a more convenient tool for entering ASP.NET code, try Visual Web Developer Express Edition from Microsoft. It’s free of charge and works great with Expression Web. More information on using Visual Web Developer Express Edition can be found in Appendix A, “Using Expression Web with Visual Web Developer Express Edition.”
Save the page and preview it again. Click the Select link to select different records and notice that the DetailsView updates automatically to display the details of the record you’ve selected.
35
6055_pt09.qxp
11/30/2006
9:02 AM
Page 653
PART
IX
Appendices A
Using Expression Web with Visual Web Developer Express Edition
B
Taking Advantage of E-Commerce
C
The Future of Web Development
D
Resources on EW, Web Design, and ASP.NET
677 685 695
655
6055_pt09.qxp
11/30/2006
9:02 AM
Page 654
6055_a.qxp
12/7/2006
12:41 PM
Page 655
APPENDIX
A
Using Expression Web with Visual Web Developer Express Edition In this chapter Building Robust ASP.NET 2.0 Applications Introduction to Visual Web Developer Express Edition Working with Web Sites in Visual Web Developer Express Edition Creating Pages in Visual Web Developer Express Edition Working with Controls in Visual Web Developer Express Edition Creating a Sample Site Troubleshooting Lagniappe: Debugging ASP.NET
6055_a.qxp
656
12/7/2006
12:41 PM
Page 656
Appendix A Using Expression Web with Visual Web Developer Express Edition
Building Robust ASP.NET 2.0 Applications A
If you’ve had any exposure to ASP.NET 2.0, you’ve been introduced to the power it provides without writing any code at all. However, if you really want to take advantage of the power of ASP.NET 2.0, you’ll need to back up your user interface with some ASP.NET server-side code. Expression Web excels in user interface design for ASP.NET 2.0. It doesn’t, however, provide you with support for writing server-side code. That’s not to say that you can’t write server-side code in Expression Web. You can if you wish, but you won’t have the advantage of color-coding, IntelliSense, and other features that make the process easier. You also won’t have the ability to easily debug your code, and that alone can make writing ASP.NET 2.0 code in Expression Web an extremely frustrating endeavor. If you really want to add significant ASP.NET functionality to your Web site, you’ll want to use an application development tool. Microsoft provides Visual Studio 2005 for just that purpose, but if you were to buy the professional version of Visual Studio 2005, it would cost you quite a bit of money. The Visual Studio product group at Microsoft realized that many developers needed a more affordable development environment, and to answer that need, they developed Visual Web Developer Express Edition.
Introduction To Visual Web Developer Express Edition Visual Web Developer Express Edition is a subset of the full-fledged Visual Studio 2005. Practically everything that you can do with ASP.NET 2.0 in Visual Studio can be accomplished in Visual Web Developer Express Edition. You can download Visual Web Developer Express Edition (shown in Figure A.1) from http://msdn.microsoft.com/vstudio/express/vwd/. After you install it, you’ll be required to register with Microsoft within 30 days. However, registration comes with no strings attached. Visual Web Developer Express Edition is completely free—a fact that you will find increasingly hard to believe as you use the product.
6055_a.qxp
12/7/2006
12:41 PM
Page 657
Introduction to Visual Web Developer Express Edition
Figure A.1 Visual Web Developer Express Edition is a full-featured development environment aimed squarely at ASP.NET 2.0 developers.
Solution Explorer
Toolbox
A
Start Page
Properties Pane
TIP The Visual Web Developer Express Edition installation allows you to opt out of downloading additional components such as MSDN documentation and SQL Server 2005 Express Edition. By choosing to not install these optional components, you can dramatically reduce the download size for Visual Web Developer Express Edition. However, even with the minimum installation, you’ll have to download about 40MB worth of data, so you’ll want to install Visual Web Developer Express Edition on a computer with a broadband Internet connection.
N OTE
657
As I was writing this book, Microsoft officially released an announcement that Visual Web Developer Express Edition will be free of charge permanently. The announcement can be found at http://blogs.msdn.com/danielfe/archive/2006/04/19/579109.aspx.
As shown in Figure A.1, the interface in Visual Web Developer Express Edition is similar to Expression Web. ASP.NET and HTML controls are located in the Toolbox, all files associated with your Web site are located in Solution Explorer, and properties for selected files or page elements are located in the Properties pane.
6055_a.qxp
658
A
12/7/2006
12:41 PM
Page 658
Appendix A Using Expression Web with Visual Web Developer Express Edition
Working With Web Sites in Visual Web Developer Express Edition To create a Web site in Visual Web Developer Express Edition, select File, New Web Site to display the New Web Site dialog as shown in Figure A.2. You have the option of creating a Web site on the file system, on a Web server using HTTP, or at an FTP location using the Location dropdown. Figure A.2 New Web sites are created using the New Web Site dialog. The location and language are also selected in this dialog.
N OTE
N OTE
Visual Web Developer Express Edition requires the FrontPage Server Extensions for opening Web sites on a remote Web server. Even though the FrontPage Server Extensions are not required on the local Web server, if they are present on the server, Visual Web Developer Express Edition will use them.
Creating and opening Web applications in IIS 7 has additional requirements. As of this writing, IIS 7 is still in beta. Please refer to the Que Web site at http://www.quepublishing.com for updated information on IIS 7 when it releases.
You can also choose a language (either Visual Basic or Visual C#) for your Web site using the Language dropdown shown in Figure A.2. Your language choice determines the language used for the default page that Visual Web Developer Express Edition creates when you create a Web site. Your choice does not lock you into any particular language. Visual Web Developer Express Edition allows you to mix languages inside of a single Web site, so you can have some pages that use Visual Basic and other pages that use C#.
6055_a.qxp
12/7/2006
12:41 PM
Page 659
Working with Web Sites in Visual Web Developer Express Edition
N OTE
ASP.NET applications can also be developed using Microsoft’s Visual J#, a language that is similar to Java. However, Visual J# does not fully support the new architecture in ASP.NET 2.0, so support for developing in Visual J# is not included in Visual Web Developer Express Edition. (See http://www.asp.net/learn/withpss/ module2.aspx?tabid=1 for more information on Visual J# and ASP.NET.) If you would like to develop your ASP.NET applications using Visual J#, you’ll want to use Visual Studio 2005.
To open an existing Web site in Visual Web Developer Express Edition, select File, Open Web Site to display the Open Web Site dialog shown in Figure A.3. You can open Web sites on the file system, on a local IIS instance, on an FTP site, or on a remote Web server. Figure A.3 Web sites can be opened from many different locations. In this case, I’m opening a site on the local file system.
If you choose a local instance of IIS, Visual Web Developer Express Edition opens the Web site by directly accessing the IIS metabase, a file that contains details of the Web sites and Web applications in IIS. It displays the Web server’s structure in a tree view, as shown in Figure A.4. This is the same method that IIS itself uses to keep track of the Web server’s structure, so Visual Web Developer Express Edition will always give you an accurate representation of what’s on the Web server.
659
A
6055_a.qxp
660
12/7/2006
12:41 PM
Page 660
Appendix A Using Expression Web with Visual Web Developer Express Edition
Figure A.4
A
Visual Web Developer Express Edition makes it easy to open a Web site by displaying the entire structure of the Web server in the Open Web Site dialog.
Creating Pages in Visual Web Developer Express Edition Because Expression Web doesn’t support the development of ASP.NET server-side code, it presents you with only a few options when creating a new page. Essentially, you choose from an ASP.NET page, an HTML page, or another file type. The choices end there. In Visual Web Developer Express Edition, you are provided with some additional choices when creating Web pages because it is assumed that you will also be developing some server-side ASP.NET code to add functionality to the page. To create a new file in Visual Web Developer Express Edition, select File, New File from the menu to display the Add New Item dialog shown in Figure A.5. If you see the New File dialog instead of the Add New Item dialog, see “Don’t See Add New Item Dialog” in the “Troubleshooting” section of this chapter.
The first thing you’ll likely notice is that there are a lot more file types to choose from in Visual Web Developer Express Edition than in Expression Web. Most of these file types are ASP.NET-specific and a discussion of them is outside the scope of this book. Therefore, we’ll keep our discussion limited to ASP.NET Web Forms.
➔ ➔
For in-depth information on developing applications in ASP.NET 2.0, read Sams Teach Yourself ASP.NET 2.0 in 24 Hours, Complete Starter Kit from Sams Publishing. For more information about using ASP.NET Web Forms in Expression Web, see “Using Standard ASP.NET Controls”, p. 495 (Chapter 28).
6055_a.qxp
12/7/2006
12:41 PM
Page 661
Creating Pages in Visual Web Developer Express Edition
661
Figure A.5 The Add New Item dialog in Visual Web Developer Express Edition provides many file types when creating new pages.
A
You’ll also be asked to choose a language for your ASP.NET code in the Add New Item dialog. As mentioned previously, your choices are VB and C#. ASP developers and other developers who are familiar with the syntax of VB will want to choose it. Developers who are more familiar with the syntax of JavaScript or C++ will want to choose C#. TIP If you choose the wrong language by mistake, you’ll need to delete the page and create a new one. Visual Web Developer Express Edition adds your language choice to the Web Form and also creates some code for you using the language you choose. There is no easy way to change languages once a page has been created.
➔
For more information on choosing an ASP.NET language, see “Using Standard ASP.NET Controls”, p. 495 (Chapter 28).
Next to the language selection dropdown in the Add New Item dialog are two checkboxes: one that allows you to choose whether your code is in a separate file and another that allows you to choose a Master Page. ASP.NET has the ability to use server-side code that is actually part of the Web Form itself, or to use server-side code in a separate file called a code file. By checking the Place code in a separate file checkbox, you are choosing to use a separate code file for your ASP.NET code.
➔
For more information on using Master Pages, see “Using ASP.NET Master Pages and User Controls”, p. 549 (Chapter 30).
Most ASP.NET pages are made up of a Web Form and server-side code. You can add server-side code to the Source View of the Web Form or in a separate code file. When code
6055_a.qxp
662
12/7/2006
12:41 PM
Page 662
Appendix A Using Expression Web with Visual Web Developer Express Edition
is embedded into the source of a Web Form, it’s referred to as inline code. When the code is in a separate code file, it’s referred to as code behind.
A
The code in Listing A.1 shows an example of inline server-side code added to the Web Form.
<script runat=”server”> protected void Page_Load(object sender, EventArgs e) { Response.Write(“Welcome to our Web site.”); } Welcome
Notice that Line 2 in Listing A.1 is a <script> block with a runat attribute set to server. That designates this code as server-side ASP.NET code. When the page loads on the server (before it is ever seen by your Web site visitors), it will run the code in the server-side block. By the time a user sees your page in a browser, any server-side code has already executed. N OTE
One thing that confuses both new and old ASP.NET developers is the page lifecycle. The page lifecycle begins as soon as a page is requested and ends just before the page is sent to the user’s Web browser. This means that after the user sees the page in the browser, the ASP.NET page lifecycle is over and all server-side code has completed execution.
The code in Listing A.2 is ASP.NET server-side code inside a code file.
Listing A.2 1 2 3 4 5 6 7 8
ASP.NET Code Behind
using System; public partial class Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { Response.Write(“Welcome to our Web site.”); } }
6055_a.qxp
12/7/2006
12:41 PM
Page 663
Working with Controls in Visual Web Developer Express Edition
This code does the same thing as the code in Listing A.1 except it appears inside a separate code file. By default, the code file is named <page_name>.aspx.cs for C# and <page_name>.aspx.vb for VB. However, you can change this name to whatever you wish. The Web Form and code file are connected via the CodeFile attribute that appears at the top of the Web Form. The following code connects a code file called Default.aspx.cs to a Web Form:
N OTE
Notice that this code also specifies an Inherits attribute. I’m not going to go into the concept of inheritance in this book. Entire books have been written on that subject and you’re sure to find a good resource either in your local bookstore or online at www.InformIT.com.
When ASP.NET runs this page, it takes the code file and Web Form and combines them into one unit it can execute. This process is called compilation. In an ASP.NET application, the file that results from the compilation process is a DLL file, and it contains all the code necessary to execute the page. Now that you are familiar with the two code models in ASP.NET 2.0, you might be wondering which you should choose. The main reason for separating the user interface defined in the Web Form from the code defined in the code file is so that the user interface can be developed separately from the code that implements functionality in the application. As a user of Expression Web, that’s likely to be the way that you will design ASP.NET applications. You’ll create the user interface elements and configure all of your styles in Expression Web and then use Visual Web Developer Express Edition to add code to make everything work. For that reason, using the code behind method is the best choice for Expression Web users, and it’s the model that we’ll use for the examples that follow.
Working with Controls in Visual Web Developer Express Edition In the past, Web developers using Microsoft tools such as FrontPage and Visual Studio .NET 2003 had to deal with learning a different skill set with each tool. Because Visual Web Developer Express Edition and Expression Web provide identical interfaces and methods for editing ASP.NET controls, that frustration has been eased considerably. Figure A.6 shows an ASP.NET 2.0 CreateUserWizard control added to a page in Expression Web. Figure A.7 shows the exact same page opened in Visual Web Developer Express Edition. Notice that the interface is almost identical, and the way in which the control is configured is the same in both applications.
663
A
6055_a.qxp
664
12/7/2006
12:41 PM
Page 664
Appendix A Using Expression Web with Visual Web Developer Express Edition
Figure A.6
A
A CreateUserWizard control added in Expression Web.
Figure A.7 The exact same page opened in Visual Web Developer Express Edition. Notice that the interface is almost identical to the Expression Web interface shown in Figure A.6.
Creating a Sample Site The easiest way to learn to use Expression Web with Visual Web Developer Express Edition is to create a sample Web site. We’re not going to create a full-featured site by any means, but the techniques you’ll learn here will be sufficient to kickstart you into ASP.NET development.
6055_a.qxp
12/7/2006
12:41 PM
Page 665
Creating a Sample Site
665
TIP If you prefer to learn by working with existing Web sites instead of starting from scratch, Microsoft provides an assortment of existing Web applications called Starter Kits that you can download for use in Visual Web Developer Express Edition. You can download them from http://msdn.microsoft.com/vstudio/express/vwd/starterkit/default.aspx.
We’ll create a file-based Web site and we’ll use the ASP.NET Development Server for testing. Both Expression Web and Visual Web Developer Express Edition support the use of the ASP.NET Development Server when developing against a file-based site, and by using it instead of IIS, we’ll avoid any possible configuration issues that may prevent you from working through the sample.
➔
For more information on using the ASP.NET Development Server, see “Using the ASP.NET Development Server”, p. 485 (Chapter 27).
Creating the Web Page We’ll create an ASP.NET Web site in Visual Web Developer Express Edition. (That will allow us to specify the language that will be used for our ASP.NET code that we’ll add later.) We will then create the interface and apply the look and feel of the site using Expression Web. After the look and feel is to our liking, we’ll finish up by adding some ASP.NET code in Visual Web Developer Express Edition to add functionality to the page. Create a new ASP.NET Web site in Visual Web Developer Express Edition by selecting File, New Web Site. Select the language of your choice. (Code samples I’ll provide later will be in both C# and VB for your convenience.) Now let’s add some ASP.NET server controls to the home page using Expression Web.
1. Open Expression Web. 2. Select File, Open Site and open the Web site you created in Visual Web Developer Express Edition.
3. Double-click on Default.aspx to open it in the designer. 4. Make sure you are in Design view and enter the text “Please
enter your first name:”
at the top of the page.
5. Press the Spacebar a couple of times. 6. Locate the TextBox control in the Standard ASP.NET Controls section of the toolbox. 7. Drag the TextBox control onto the page to the right of where you entered text. 8. Make sure that the TextBox control is selected. 9. Locate the ID property for the TextBox control in the Tag Properties task pane. 10. Change the ID of the TextBox control to txtName. 11. Place the cursor at the right of the TextBox control and press Enter to create a new line.
12. Enter the text “Choose
a car type:”
on the new line.
A
6055_a.qxp
666
12/7/2006
12:41 PM
Page 666
Appendix A Using Expression Web with Visual Web Developer Express Edition
13. Press the Spacebar a couple of times. 14. Insert a new ASP.NET DropDownList control next to the text you entered. A
15. Locate the ID property for the DropDownList control in the Tag Properties task pane. 16. Change the ID of the DropDownList to ddlCar. 17. Click the Edit
Items
link in the Common DropDownList Tasks popup, as shown in
Figure A.8. Figure A.8 Click the Edit Items link to add some items to the dropdown list. We’ll add a few car models and a default value.
18. Click the Add button in the ListItem Collection Editor. 19. Change the Selected property to True. 20. Enter “Choose
a car”
in the Text property.
21. Enter 0 in the Value property. The ListItem Collection Editor should now look like Figure A.9. Figure A.9 The ListItem Collection Editor makes it easy to add items to the DropDownList control. The item added here will prompt the user to select a car from the list.
6055_a.qxp
12/7/2006
12:41 PM
Page 667
Creating a Sample Site
667
22. Click Add in the ListItem Collection Editor. 23. Enter “Toyota
Highlander Hybrid”
for the Text property.
24. Enter 1 for the Value property.
A
25. Click Add again in the ListItem Collection Editor. 26. Enter “Chevrolet
Tahoe”
for the Text property.
27. Enter 2 for the Value property. 28. Click Add again in the ListItem Collection Editor. 29. Enter “Mini
Cooper”
for the Text property.
30. Enter 3 for the Value property. 31. Click OK in the ListItem Collection Editor. Before we finish this page, you need to understand how ASP.NET pages are designed to work. In almost all cases, a page will post back to itself. That means when you submit a form on a page, that same page consumes all the form’s data, processes it, and then presents the user with the result. This is a departure from what most Web developers are used to. Most developers are used to posting form data from one page to a different page. N OTE
ASP.NET 2.0 added the ability to post form data from one ASP.NET page to a different ASP.NET page. However, for this example, we will use a single page to keep things simple.
We now need to add a Submit button to the form. We also need to add a control that will display the results of processing the ASP.NET server-side code. The final page will display an appropriate message based on the car the user selected in the DropDownList control. We’ll use an ASP.NET Label control to display that message.
1. Place the cursor at the right of the DropDownList control and press Enter to insert a new line.
2. Add a new ASP.NET Button control to the page. 3. Locate the Text property of the Button control in the Tag Properties task pane. 4. Change the Text property of the Button control to “Give
Auto Feedback”.
5. Place the cursor at the right of the Button control and press Enter to insert a new line. 6. Add a new ASP.NET Label control to the page. 7. Change the ID property of the Label control to lblFeedback. 8. Clear the Text property of the Label control. Your page should now look like Figure A.10.
6055_a.qxp
668
12/7/2006
12:41 PM
Page 668
Appendix A Using Expression Web with Visual Web Developer Express Edition
Figure A.10
A
The page is now complete. We’re ready to add some code to make everything work.
Because we cleared the Text property of the Label control, nothing will display there until we set the Text property. Here’s how we want this page to work: When a user browses the page, he or she will enter their first name in the textbox. The user will then select a car from the dropdown and click the Give Auto Feedback button. Based on which car was chosen, an appropriate message will be displayed to the user in the Label control.
Adding ASP.NET Code ASP.NET is an event-based environment. Code is run on the server side based on events that take place during the lifetime of the Web Form. Some of these events take place every time the page is loaded. Other events only occur when certain conditions are met. For example, when the Button control on our Web Form is clicked, a Click event happens for the button. We’ll use that Click event to run the code that determines which car was clicked and display a message based on that choice. If the Web site is still open in Visual Web Developer Express Edition, refresh the page by selecting View, Refresh. Otherwise, follow the steps below to see the changes made to Default.aspx. Default.aspx
1. Select File, Open Web Site from the Visual Web Developer Express Edition menu. 2. Browse to the location for the Web site, select the Web site folder, and click OK. 3. Double-click on Default.aspx in Solution Explorer, as shown in Figure A.11. 4. If Default.aspx opens in Source View, click the Design button, as shown in Figure A.11, to switch to Design View.
6055_a.qxp
12/7/2006
12:41 PM
Page 669
Creating a Sample Site
Figure A.11 The Web Form created in Expression Web is now open in Visual Web Developer Express Edition.
669
Solution Explorer
A
Notice that the page looks exactly the same in Visual Web Developer Express Edition and Expression Web. This is one of the strengths of using these two products together. You’ll write your ASP.NET code in Visual Web Developer Express Edition, but either application can be used for designing the interface and setting properties on controls. Now we’re ready to add some ASP.NET code. Remember that we said before that we would write some code that runs when the button on the Web Form is clicked. Therefore, we want to write code in the Click event of the button. To write code that runs when a particular event occurs, the code has to be connected to the event. The process of connecting code to a particular event is referred to as “hooking” the event. A detailed discussion of this is beyond the scope of this book, but fortunately, it’s not necessary for you to understand the particulars of this topic. Visual Web Developer Express Edition can do the work for you. TIP When you choose to place the code in a separate file, Visual Web Developer Express Edition displays the code file and Web Form together in Solution Explorer. If you click the plus sign next to the Web Form, you’ll see the code file.
Open the Default.aspx page. (If you’re not already in Design View, click the Design button to switch to Design View.) To add new code that will handle the Click event of the button,
6055_a.qxp
670
12/7/2006
12:41 PM
Page 670
Appendix A Using Expression Web with Visual Web Developer Express Edition
simply double-click on the Give Auto Feedback button. Visual Web Developer Express Edition will automatically add the code to handle the Click event to the code file. If the code for the Click event doesn’t get added automatically when you double-click on the button, see “Click Event Not Added” in the “Troubleshooting” section of this chapter.
A
Listing A.3 shows the code for the Web Form in VB and Listing A.4 shows the code in C#.
Listing A.3
VB Code
1 Partial Class Default2 2 Inherits System.Web.UI.Page 3 4 Protected Sub button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles button1.Click 5 6 End Sub 7 End Class
Note that I’ve omitted the using statements that appear at the top of the C# code file for the sake of clarity.
We will now add some code to the Click event of the button. Our code will change the text that is displayed in the Label control called lblFeedback. If you’re using VB, you will add the code at Line 5 in Listing A.3. C# developers will add the code at Line 10 in Listing A.4. Listing A.5 shows the VB code for the Click event with the new code added. Listing A.6 shows the C# code for the Click event with the new code added.
Listing A.5
VB Code
1 Protected Sub button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles button1.Click 2 Dim strFeedback As String 3 strFeedback = “You chose “ + ddlCar.SelectedItem.Text + “. Nice car, “ + txtName.Text + “!” 4 lblFeedback.Text = strFeedback 5 End Sub
Notice that Visual Web Developer Express Edition provides IntelliSense and color-coding while you enter code. It will also check your code while you enter it and will highlight any coding errors for you.
The code you’ve added here is simple, and you should be able to understand it even if you’re new to ASP.NET 2.0. The code displays a message to the user letting him or her know which car was chosen. It also adds a personal touch, using the name the user entered in the txtName TextBox control. Go ahead and browse the page now and test it out. Figure A.12 shows my page in the browser after making my car choice. Figure A.12 The Web Form displays a nice message letting me know which car I chose.
Adding Form Validation Some of you may have noticed a couple of bugs in the page. First of all, it’s possible for a user to choose a car and click the button without entering a name. The second bug allows
A
6055_a.qxp
672
12/7/2006
12:41 PM
Page 672
Appendix A Using Expression Web with Visual Web Developer Express Edition
the user to click the button without selecting a car first. If you load the page and immediately click the button, the message you see will say, “You chose Choose a car. Nice car, !” This is obviously not what we intended.
A
The easiest way to correct these bugs is to simply add a couple of validation controls to the Web Form. It’s not necessary to switch back to Expression Web to do this. You can easily add the controls in Visual Web Developer Express Edition using the same skills you’ve already learned for adding validation controls in Expression Web.
➔
For details on using ASP.NET validation, see “Implementing Form Validation Using ASP.NET”, p. 595 (Chapter 32).
1. Open Default.aspx in Design View in Visual Web Developer Express Edition. 2. Place the cursor just to the right of the txtName textbox and press the Spacebar once. 3. Expand the Validation section in the Toolbox. The Toolbox in Visual Web Developer Express Edition is along the left edge of the application.
4. Double-click on the RequiredFieldValidator control to add it to your page. 5. In the Properties pane on the right side of Visual Web Developer Express Edition, change the ControlToValidate property to txtName.
6. Change the ErrorMessage property to “Please
enter your name”.
7. Place the cursor just to the right of the ddlCar DropDownList control and press the Spacebar once.
8. Double-click the RangeValidator control to add it to your page. 9. In the Properties pane, change the ControlToValidate property to ddlCar. 10. Change the MaximumValue property to 3. This is the largest value that was entered when you added the items to the dropdown list earlier.
11. Change the MinimumValue property to 1. 12. Change the ErrorMessage property to “Please
select a car”.
13. Save the page. The RequiredFieldValidator you added will require the user to enter a name before he or she submits the form. The RangeValidator will only allow the form to successfully submit if the value for the DropDownList control is between 1 and 3. Remember that we added four items to the DropDownList control when we created this page. The first item says “Choose a car” and the value that we entered for that item was 0. Therefore, the RangeValidator control will not allow a user to submit the form if he or she hasn’t chosen a car from the dropdown because the value for the DropDownList control will fall outside the range allowed by the RangeValidator control.
➔
For more information on using ASP.NET 2.0 validation controls, see “Implementing Form Validation Using ASP.NET”, p. 595 (Chapter 32).
Test the page again. Try submitting the form before filling in your name or choosing a car. The validation controls we’ve added will prevent you from submitting the form unless it has been properly completed.
6055_a.qxp
12/7/2006
12:41 PM
Page 673
Troubleshooting
By taking advantage of the strengths of both Expression Web and Visual Web Developer Express Edition, you can easily create powerful ASP.NET applications. Best of all, you can do so after actually purchasing only one application because Visual Web Developer Express Edition is provided by Microsoft free of charge. If you found the information presented in this appendix interesting, I encourage you to go pick up a good book on ASP.NET 2.0 and start learning how to take advantage of the more advanced features it offers. The only way to truly learn how to develop against a particular platform is to actually write code. The skills you’ve learned here will give you a good start to a fulfilling experience developing ASP.NET applications. N OTE
I have a book currently in development on developing ASP.NET applications using Expression Web and Visual Web Developer Express Edition. Look for this book to be released early in 2007 from Que Publishing.
Troubleshooting Don’t See Add New Item Dialog I’ve chosen File, New File from the menu in Visual Web Developer Express Edition, but I don’t see the Add New Item dialog. Instead, I see a New File dialog with a lot fewer options. What’s going on? The Add New Item dialog is only available if you have a Web site open in Visual Web Developer Express Edition. Make sure that you have a Web site open before selecting File, New File in Visual Web Developer Express Edition.
Click Event Not Added I’ve double-clicked the Button control in Design View, but Visual Web Developer Express Edition hasn’t added any code to my code file. It does show me the code, but there is no new code added. This usually indicates a permissions problem. Make sure you have full permissions on the directories that contain the Web site’s content. If you’re an administrator on the computer, you should already have full permissions. However, if you’re not, you’ll need to have an administrator change the permissions for you.
673
6055_a.qxp
674
12/7/2006
12:41 PM
Page 674
Appendix A Using Expression Web with Visual Web Developer Express Edition
Lagniappe (lan yap’) n.,
a gift or bonus
Debugging ASP.NET In a perfect world, you would write ASP.NET code and it would work perfectly the first time. In the real world, things often don’t work out quite the way they’re supposed to. When bugs turn up, you’ll need to debug your code to find out exactly what went wrong. In the most general sense, debugging is the practice of connecting to a particular process running on a computer and looking into the internal workings of that process. Before you start debugging, you’ll want to place one or more breakpoints into your code. A breakpoint is a position at which code execution will stop. When the debugger sees a breakpoint, it will stop and highlight the line of code on which the breakpoint exists. You can then use the debugging tools to examine the state of the application. You can also step through code line by line to check for bugs. To set a breakpoint in Visual Web Developer Express Edition, place the cursor on the line where you want the breakpoint to appear and press F9. You’ll see a red dot appear in the left margin of the page at that point. If you want to test this out, place a breakpoint on the Click event for your Button control. To debug ASP.NET code in Visual Web Developer Express Edition, you simply select Debug, Start Debugging from the menu. Alternatively, you can press the F5 key. When you first start debugging, Visual Web Developer Express Edition will inform you that debugging is not enabled by displaying a dialog asking you to add a configuration file to enable debugging, as shown in Figure A.13. Figure A.13 Debugging is not enabled by default in ASP.NET 2.0 applications. Visual Web Developer Express Edition can enable it for you when you first try to debug.
Make sure that the Add a new Web.config file with debugging enabled option is selected and click OK in the Debugging Not Enabled dialog to enable debugging. Notice that Visual Web Developer Express Edition warns you that debugging should not be enabled on a production Web site. If you open the Web.Config file that Visual Web
6055_a.qxp
12/7/2006
12:41 PM
Page 675
Lagniappe: Debugging ASP.NET
Developer Express Edition creates when you first debug an application, you’ll see debugging enabled in the following line of code:
Before you publish this Web site to a remote Web server, you’ll want to change that line to disable debugging. You do that by changing the line to the following:
TIP For details on the detrimental effects of leaving debugging enabled on a production Web site, read my blog post at http://blogs.msdn.com/jamesche/archive/2005/12/20/ 506195.aspx.
Visual Web Developer Express Edition automatically debugs the first page added to the application by default. If it starts up the wrong page for you, you can simply right-click on the page you want to debug inside Solution Explorer and choose Set As Start Page from the menu. If you’re working along with the examples in this book, you should now see Default.aspx loaded in the browser. If you set a breakpoint on the Click event of the button earlier, you’ll be able to hit that breakpoint by clicking the button. Fill in your name, select a car, and click the button. You should see Visual Web Developer Express Edition stop on the Click event. It will highlight the line on which it has stopped and display an arrow in the left margin pointing to the current line of code, as shown in Figure A.14. At this point, you can take many different approaches. You can use the Debugging Toolbar shown in Figure A.14 to step through the code. You can also use the Locals Window shown in Figure A.14 to look at the value of any local variables. As you step though the code, this window will update automatically. There are many other debugging tools available in Visual Web Developer Express Edition. Many of them are accessible from the Debug menu. For a full description of debugging and other features of Visual Web Developer Express Edition, see Microsoft’s excellent documentation at http://msdn.microsoft.com/vstudio/express/vwd/learning/default.aspx.
675
6055_a.qxp
676
12/7/2006
12:41 PM
Appendix A Using Expression Web Designer with Visual Web Developer Express Edition
Figure A.14
A
Page 676
Visual Web Developer Express Edition has stopped on a breakpoint in the Click event. Notice that I have some new windows that are specific to debugging and there is an arrow pointing to the current line.
Arrow pointing to current line
Locals window
Debugging toolbar
Call Stack window
6055_b.qxp
12/7/2006
12:42 PM
Page 677
APPENDIX
B
Taking Advantage of E-Commerce
In this appendix The Power of E-Commerce E-Commerce Options Payment Processing Putting It All Together In Expression Web Lagniappe: Is It Worth the Risk?
6055_b.qxp
678
12/7/2006
12:42 PM
Page 678
Appendix B Taking Advantage of E-Commerce
The Power of E-Commerce Have you ever heard of “the long tail”? It’s a term first used by Chris Anderson in an article he wrote for Wired magazine. In the article, Anderson talked about the new economic model upon us. The example Anderson used was online booksellers such as Amazon.com. Here’s the concept behind “the long tail”:
B
Booksellers sell books that fall into a wide range of popularity. At the left end of the scale are extremely popular, bestselling books that sell millions of copies. At the right end of the scale are books that top out at perhaps a few thousand copies. The right end of the scale is what Anderson calls “the long tail”.Traditional booksellers (the brick-and-mortar variety) tend to stock plenty of books on the left end of the scale, but getting a book on the right end of the scale into a bookstore is almost impossible because booksellers are concerned about having inventory on hand that won’t sell quickly. The World Wide Web and e-commerce have changed all the rules when it comes to “long tail” items. No longer do booksellers have to sweat about having large inventories of product that won’t sell in large numbers. Instead, they can quite literally have no inventory at all for items in the long tail. When a long tail item is ordered, the bookseller can order it immediately and ship it to the buyer directly. In this scenario, the item never enters into the bookseller’s inventory. Books are only one example of this concept. A list of products affected by “the long tail” is virtually endless. It’s a unique time full of possibilities for the entrepreneurs among us, and if you know how to take advantage of such opportunities, there’s serious money to be made. N OTE
If you’d like to read Chris Anderson’s article in Wired magazine, you can access it by browsing to www.wired.com/wired/archive/12.10/tail.html. Anderson has also written a book called The Long Tail that goes into detail on the concepts he presented in his Wired magazine article.
E-Commerce Options Anything can be sold on the Internet. In fact, it’s not at all necessary to have a complete storefront with a long list of items. Plenty of successful e-commerce ventures consist of only one or two products. If you have an audience and there is demand for what you’re selling, you can be successful. TIP If you’re going to sell something on the Internet, site traffic is key. It can literally make the difference between $20 and thousands of dollars of revenue per month. Find sites that are related to your site and exchange links. The more Web sites that link to you, the better your traffic is likely to be because you will rank higher in search engine results.
6055_b.qxp
12/7/2006
12:42 PM
Page 679
E-Commerce Options
679
One of the keys to a successful e-commerce business is time management. Chances are you aren’t going to have a full staff of people to do the work for you. It’s more likely that you’ll end up being the business manager, Web designer, public relations representative, and more. In other words, it’s a lot of work. If you’re going to be successful, you’re going to need to spend your time on those things that offer a good return on investment. In most cases, building an e-commerce system is not one of those things. It can take months to build a robust e-commerce system, and then you’ve got to debug it, test it, and so on. Even after all that work, there’s a pretty good chance that serious bugs will slip by you, and many of them may compromise the security of your system. You’re going to be much better off investing some money up-front into a company that will provide the resources you need. Not only will you benefit from the development efforts (and software testing) of someone else, but in many cases, you’ll also have a robust support system behind you. Many e-commerce systems are Web-based, and that provides the additional benefit of letting someone else deal with the hassle and expense of hosting the site. All you’ll need is a few pages that provide links into your e-commerce company’s system.
Digital River One of the most successful e-commerce solutions is Digital River (see Figure B.1), located at www.digitalriver.com. Digital River not only provides robust e-commerce tools for sellers, but it also operates a huge affiliate operation. Figure B.1 Digital River is a highly successful e-commerce operation that can provide all the support you need to run a successful ecommerce storefront.
B
6055_b.qxp
680
12/7/2006
12:42 PM
Appendix B Taking Advantage of E-Commerce
N OTE
B
Page 680
Digital River focuses on selling software. If you’re selling something else on the Web, you’ll want to look for another option.
Digital River also offers a powerful credit card payment processing system and marketing for your product(s). They’re backed by a proven marketing concept based on affiliates. Your product gets a high degree of targeted exposure using this model because Digital River will keep your affiliates updated automatically with all the latest information and incentives on your product. If you’re offering a product that requires protection via digital rights management, Digital River can help you there, too. They produce a software product called Software Passport (also referred to in the industry as Armadillo) that is second to none when it comes to protecting intellectual property, and it integrates directly into the Digital River network.
Lulu Software isn’t the only hot-selling item on e-commerce Web sites. The advent of affordable video production software has made home-produced video a reality. Musicians are finding that the Web is a great place for selling their music. Authors are discovering that the Web is an effective vehicle for distributing e-books. While digital delivery for media is a viable option, many people prefer a non-digital product. Personally, I prefer a hard-copy book to an e-book, and I know I’m not alone. However, if you’re a small-time author, your chances of having a publisher pick up a book and print it are slim. Small-time authors are on the tip of the long tail because they have traditionally been undiscoverable. Fortunately, there are e-commerce options for DVDs, CDs, and books. Lulu (www.lulu.com) is a company that specializes in all three. If you’ve written a book and want to sell it in hard copy, Lulu will take care of it for you by printing the book only when someone buys it. Lulu provides everything you need, including a storefront, and all of it is free of charge. The two companies above are just examples of the kind of service that’s available to you on the Internet. Now is a great time to break into e-commerce because the options available to you are virtually endless.
Payment Processing Payment processing is quite likely the biggest roadblock to newcomers to e-commerce. All the options available are intimidating. The security aspect of credit cards also represents a considerable barrier to the inexperienced. The aura of confusion that surrounds payment processing is a double-edged sword. On one hand, many people are dissuaded from entering the world of e-commerce because of it. On the other hand, the confusion has accentuated the need for an easy solution, and many companies have delivered.
6055_b.qxp
12/7/2006
12:42 PM
Page 681
Payment Processing
681
PayPal One of the easiest ways to accept payment is to use PayPal. A basic, free PayPal account allows you to accept payments from customers, but you won’t be able to accept credit cards with a basic account. If you’re interested in accepting credit cards (and you should be), you’ll want to upgrade your PayPal account to a business account. A PayPal business account won’t cost you anything up-front, but PayPal will charge you a small transaction fee when you accept payments by credit card. It’s an affordable way to offer your customers a secure payment option.
Banks Many banks offer merchant services to small businesses. Banks naturally specialize in handling money, and they often have robust services that they offer. In addition to that, a bank often brings name recognition with it, and that can provide you with a sense of legitimacy that is worth much more than you pay for the service. Many banks offer additional services that set them apart from services such as PayPal. Those services can include offering gift cards for your business, detailed reporting, and a higher degree of fraud protection. Banks also will usually accept more forms of payment than other options. If you choose this route, I encourage you to choose a bank that isn’t regional. By choosing a bank with branches in many regions, you offer your customers the widest range of services.
2CO 2CO (www.2checkout.com) specializes in offering payment services for credit card customers and online check customers. They’ve been around a long time and have historically been aggressive at changing their business to meet the ever-changing needs of e-commerce sellers. 2CO charges a one-time setup fee. You then enter your product(s) into their database and their system allows you to easily create the code necessary to add purchase links to your own site. When people click the link to buy your product, it takes them to 2CO’s payment processing via a secure connection. There are many other payment options to explore. A Web search will turn up plenty of options. Most of them offer similar services. The important aspect of payment processing is that in almost all cases, you should let a third party handle it for you. The cost of setting up your own merchant accounts with credit card companies and configuring all the other requirements can be not only time-consuming, but also expensive.
B
6055_b.qxp
682
12/7/2006
12:42 PM
Page 682
Appendix B Taking Advantage of E-Commerce
Putting It All Together In Expression Web After you decide what service you’ll use for e-commerce and for payment processing, you’ll need to design your Web site with features that make an e-commerce site more secure and one that can aid in your business.
Security An e-commerce Web site requires users to enter sensitive information that can range from an address and phone number to a credit card number. Therefore, you’ll want to make sure that you use secured pages whenever you are collecting information from your customers.
B
Most Web hosts provide SSL services, but they will usually require that you provide your own SSL certificate. An SSL certificate can be purchased from many different security companies such as DigiCert (www.digicert.com), Thawte (www.thawte.com), or VeriSign (www.verisign.com). N OTE
Some hosting companies will provide you with an SSL certificate so that you don’t have to purchase one, but I strongly discourage you from going that route. SSL certificates are registered to specific domain names, and if you attempt to use a certificate on a domain other than the one to which it was registered, Web browsers will warn users of the difference when they visit your site. Many users won’t understand why they’re being warned and will immediately choose to not do business with you.
You won’t need to protect your entire site with an SSL certificate. Web browsers take longer to load pages that are under SSL, so what you’ll want to do is just protect the portion of your site that deals with exchanging sensitive information. You can set up that portion of your site as a subsite in Expression Web. You can then open it using SSL and publish to it using SSL as well. This is especially important if you are storing any customer data in a file (a text file, a database file, etc.) on the Web site. If you publish via SSL, all information that you are publishing is encrypted and protected.
➔
For information on how to publish a Web site using SSL, see “Publishing Content,” p. 48 (Chapter 3).
Advertising and Affiliates A successful e-commerce site relies on consistent traffic. One of the best ways to get traffic is to advertise on other sites that are likely to be frequented by your audience. The best way to get other sites to link to your site is to offer a link exchange. Most Web site owners are more than happy to link to you if you’ll link to them in exchange. Before you approach another Web site offering to exchange links, you’ll want to create some banner links for your Web site. There are several standard sizes for Web banners. Some of the more common sizes appear below.
Many graphic design applications allow you to easily create graphics that match these standard sizes. Another great option is to use The Logo Creator from Laughingbird Software. A free copy of The Logo Creator is included on the CD that accompanies this book. Of course, you’ll also want to include room on your Web site for banners. When you design your site, make sure that you create an area for banner ads that will fit into the standard sizes mentioned previously. The most common banner is the full banner, but other banner sizes are becoming increasingly popular.
➔
The ASP.NET AdRotator control is a great solution for displaying banner ads. For more information on using the AdRotator control, see “Using Standard ASP.NET Controls”, p. 495 (Chapter 28).
Keep in mind that many search engines (including Google) rank your Web site based upon how many other Web sites link to you. By building relationships with the owners of related Web sites, you can build your traffic and offer your visitors a better source of information.
Lagniappe (lan yap’) n.,
a gift or bonus
Is It Worth the Risk? After covering some of the basic requirements for opening an e-commerce storefront, you might be asking yourself if it’s worth the effort. If you’ve got something to sell, the answer is that it definitely is! The Web has opened up a new realm of possibilities when it comes to business opportunities. Those who take advantage of those possibilities stand to profit considerably from the effort. I was recently speaking to a friend of mine who had worked with a guy named Stewart some years back. Stewart announced one day that he was quitting his job to start up a new Web site with his wife that would let people share photographs on the Internet. No one took him seriously, but years later his Web site was purchased by Yahoo for an undisclosed amount. (“Undisclosed amount” is code for “a ton of money”.) That Web site was Flickr. There are many incredible opportunities available to those who are willing to take the plunge. You might not become a millionaire in the process, but one thing’s for sure, it will be an exciting ride!
683
B
6055_b.qxp
12/7/2006
12:42 PM
Page 684
6055_c.qxp
12/7/2006
12:42 PM
Page 685
APPENDIX
C
The Future of Web Development
In this appendix Changing Standards Emerging Technologies Lagniappe: Understanding and Using RSS
6055_c.qxp
686
12/7/2006
12:42 PM
Page 686
Appendix C The Future of Web Development
Changing Standards Computer technologies are short-lived by nature. As soon as a technology starts maturing, it’s almost inevitably replaced by a new technology. Given that kind of environment, HTML’s longevity is quite amazing. In fact, HTML has been with us since 1990, and it wasn’t until 2000 that a new recommendation was proposed by the World Wide Web Consortium (W3C). N OTE
Contrary to what you often hear from Web designers, the W3C does not issue standards. It proposes recommendations. Historically, this has been a thorn in the side of Web designers, but we’re now starting to see more browsers and design tools conform to the W3C’s recommendations. Because of that, the recommendations are beginning to morph into standards, and you’ll now hear many more people referring to the W3C recommendations as “standards.”
C HTML has served us well for 10 years now, but as the Web has evolved, the complexity of Web sites has surpassed the ability of HTML to keep up. This has resulted in tweaks and tips that are necessary to cater to the different browsers available today. Plenty of people have made a career out of teaching Web designers how to make pages look the same on a large collection of browsers. One organization that is focused on promoting Web standards is The Web Standards Project (WaSP.) WaSP takes a unique approach to promoting standards by forming task forces that work with software vendors and Web designers to help advance Web standards. WaSP has a task force that works directly with Microsoft on complying with Web standards, and some of the members of that task force are program managers at Microsoft. You can read more about WaSP at www.webstandards.org. As HTML became more cumbersome, CSS was born in an attempt to alleviate some of the problems involved in formatting and positioning. CSS solved many problems, but it also brought many of the existing shortcomings of HTML to the forefront. Almost in parallel, XML was gaining ground as a means of describing data, and in 2000, the W3C came up with the idea of combining HTML with XML to form a new recommendation. The result was the XHTML 1.0 recommendation.
➔ ➔
For more information on CSS, see “Creating Style Sheets”, p. 289 (Chapter 17). For more information on XHTML settings in Expression Web, see “Configuring Page Editor Options”, p. 257 (Chapter 15).
N OTE
XHTML stands for Extensible Hyper-Text Markup Language.
6055_c.qxp
12/7/2006
12:42 PM
Page 687
Emerging Technologies
687
Benefits of XHTML One of the greatest benefits of XHTML (contrary to what you might think) is that it is much less forgiving of poorly formatted code. It also has many requirements that aren’t present in HTML. For example, when writing HTML code, it’s up to the Web designer whether the HTML tags are upper- or lowercase. XHTML, on the other hand, requires that all element (tag) names and attributes be lowercase. Some of the other requirements of XHTML are: ■
Nonempty elements must have a closing tag.
■
Attribute values must appear in quotes.
■
Elements must be nested in the proper order.
■
An attribute cannot appear without a value. TIP The complete XHTML recommendation can be found at the W3C Web site by browsing www.w3.org/TR/xhtml1/.
By enforcing formatting rules and requiring that all documents be well-formed, XHTML improves cross-device rendering of code. No longer do Web browsers have to deal with handling nonstandardized code, and as the Web moves onto other devices (such as cell phones, personal digital assistants (PDAs), and so forth), the standards imposed by XHTML become even more valuable.
Emerging Technologies As the Web evolves, new technologies are beginning to appear to make it a more productive arena for full-featured applications. Recent years have seen incredible growth in blogging, social networking, and robust applications delivered to users via a Web browser. Most people refer to this trend (or is it a trend?) as Web 2.0. Ironically, as we develop newer technologies that allow for more bandwidth into your home, we also develop technologies to dramatically limit the amount of data flowing through those fat pipes. XMLHTTP used to be an inconspicuous technology used by very few. Today, it’s the cornerstone behind one of the biggest technology initiatives the Web has ever seen— AJAX. N OTE
As noted previously, AJAX stands for Asynchronous JavaScript and XML. You will see it written both as AJAX and Ajax. I prefer AJAX because it helps distinguish it from a bleach-based cleanser.
C
6055_c.qxp
688
12/7/2006
12:42 PM
Page 688
Appendix C The Future of Web Development
AJAX Many of the new Web-based applications available today make heavy use of AJAX. Have you ever visited Google’s news page (Figure C.1) at http://news.google.com? If you load that page and let it just sit in your browser without refreshing or navigating away from it, it will refresh news stories automatically. It does this without blanking out and seemingly without refreshing at all. Google uses AJAX to do that. Figure C.1 The Google news page uses AJAX to automatically update news stories at a preset interval.
C
At a preset interval, Google causes your browser to issue a request to their servers asking for an update. This request sends a very small amount of data. What it gets back is a response in XML. They then have some client-side JavaScript that takes the XML response and dynamically updates the page on-the-fly. Microsoft’s Windows Live search page is another example of AJAX in action. When you do a search on Windows Live, the results are returned in a page that appears to scroll infinitely. Unlike other search engines, you don’t click links to move from page to page to view the search results. Instead, you scroll down the page until you reach the bottom of the results. Imagine how many hits might be returned if you query on, for example, AJAX. You’d get millions of results. Now imagine if Microsoft made you wait for all those results to download to your computer before you were able to browse any of them. You’d be waiting for many minutes before you’d be able to do anything.
6055_c.qxp
12/7/2006
12:42 PM
Page 689
Emerging Technologies
689
Obviously, you don’t have to wait for all the results to be returned. Microsoft uses AJAX to return only those results that are immediately visible. As you scroll down the page, the browser requests small bits of additional search results, which are then displayed on the page. As you use Windows Live, you have no idea that the browser is requesting additional data.
Using AJAX on Your Site AJAX isn’t a technology just for large Web sites. There are plenty of uses for this technology in your Web site too. Suppose you have a Web site that offers a picture viewer for users to view your photographs. You want to allow users to click a thumbnail and view a larger image. AJAX is the perfect solution for this because it allows you to request the larger image only when the user needs it. Sure, you could implement the same thing using regular hyperlinks, but the user would see the page go blank when he or she clicked the link and then refresh with the larger image. AJAX provides a much neater user interface and reduces the amount of data required over the Internet. Forms are another great opportunity for using AJAX. You can create forms that dynamically change based on selections or data entered in certain form fields. Imagine a series of dropdown boxes where each subsequent dropdown is populated based on a selection in the previous one. AJAX is the perfect solution for such a scenario. Using XML used to require a lot of expertise and a lot of code. As AJAX has gained ground as an emerging technology, options for creating dynamic, AJAX-enabled Web sites have grown exponentially. Microsoft’s latest foray into the AJAX arena is called Atlas, and it’s quite an impressive offering. Atlas offers many new controls for ASP.NET 2.0 that allow you take advantage of AJAX without writing any code at all. Microsoft’s vision for Atlas, however, extends beyond ASP.NET. In fact, even though Atlas isn’t heralded much by the technology media, it’s well-situated to be the cornerstone behind a revolution in application development that will literally affect everyone who uses a computer. N OTE
You can find more information on Atlas and other related technologies at Microsoft’s Atlas Web site, located at http://atlas.asp.net.
TIP It may be hard to believe, but you can use the capabilities of Atlas and ASP.NET without spending a dime on software. Atlas works great with Visual Web Developer Express Edition, and both Atlas and Visual Web Developer Express Edition are completely free.
➔
For more information on Visual Web Developer Express Edition, see “Using Expression Web with Visual Web Developer Express Edition”, p. 655 (Appendix A).
C
6055_c.qxp
690
12/7/2006
12:42 PM
Page 690
Appendix C The Future of Web Development
Ruby on Rails For those of you on the other side of the coin (in other words, those who are more into technologies such as PHP, MySQL, SQLite, and so on), don’t feel left out. Ruby on Rails is a powerful and rich framework that supports all of those technologies and more. In fact, Ruby on Rails can be given credit for the widespread growth of Web 2.0. N OTE
C
Ruby on Rails can be downloaded free of charge from www.rubyonrails.org.
Ruby on Rails is actually a framework for building applications using Ruby, an objectoriented language similar to Perl. Ruby on Rails is acclaimed for changing the paradigm for developing Web applications. Instead of spending months developing the backend and then pasting a user interface onto it, Ruby on Rails encourages the development of a user interface first and then plugging a backend into it. Ruby on Rails was developed by a company called 37signals. 37signals was building Webbased applications using Ruby, but they wanted the ability to share components in one application with other applications. Unable to find a suitable solution, they developed their own framework and dubbed it Ruby on Rails. The beauty of this approach can be experienced first-hand in Basecamp (their first and most well-known application), Campfire, and other applications they’ve created using Ruby on Rails. Basecamp is a tool designed to aid in project planning and collaboration. If you’ve ever used Microsoft Project, you have a pretty good feel for what Basecamp does. However, Basecamp is entirely different in that it isn’t a Windows application. Instead, it is entirely Web-based. The only system requirements for using Basecamp are an Internet connection and a Web browser. Basecamp uses AJAX and Ruby on Rails to implement all of its functionality. Campfire is a really cool business chat tool. Like Basecamp, Campfire is accessed using a Web browser. It allows you to set up chat rooms with powerful capabilities, and any chats that take place are saved so that you can review them (and also any files that were uploaded during the chat) later. Both Basecamp and Campfire illustrate the power and diversity of Ruby on Rails, and because Ruby on Rails isn’t tied to one particular operating system or technology, it is rapidly becoming one of the most popular technologies on the Web. N OTE
37signals can be found on the Web at www.37signals.com.
Other Emerging Technologies I’ve touched on two of the most talked-about technologies, but there are many others that are growing rapidly. It’s an exciting time to be a Web designer. Not only are we seeing new
6055_c.qxp
12/7/2006
12:42 PM
Page 691
Lagniappe: Understanding and Using RSS
technologies, but we’re seeing the emergence of mainstream Web design applications (such as Expression Web) that are adhering to standards, making it much easier to mix many different technologies into a site without your design tool hijacking your efforts. In my opinion, what we’re witnessing is a widespread shift in thinking. If someone said five years ago that Microsoft would develop a Web design application focused entirely on creating standards-based Web sites, they’d have been laughed out of most tech circles. Today, just such an application is a reality and we’re all better off for it.
Lagniappe (lan yap’) n.,
a gift or bonus
Understanding and Using RSS The changes we’re seeing on the Web today aren’t just affecting people with computers. Anyone who keeps up with the daily news cycle knows how much of a powerful media force bloggers have become. In fact, bloggers have actually broken some big news stories in the past year or so. What are bloggers? Bloggers are people who run Web logs, commonly referred to as blogs. There are blogs on just about every topic imaginable, and most of them are updated often. However, because of the informal nature of blogs, they are often not updated on a regular schedule. Fortunately, most blogs allow you to subscribe to them so you can be notified when a new posting is available. A blog subscription isn’t what you might think. Most people think of subscriptions in terms of mailing lists and the like, where you receive an e-mail indicating an update is available. A blog subscription is usually provided by a technology known as Really Simple Syndication, or RSS. TIP RSS isn’t just for blogs. You can create an RSS feed for anything you’d like.
RSS consists of two pieces: ■
RSS feed—The RSS feed is an XML file that describes the information being presented and provides a link to the content.
■
RSS reader—The RSS reader reads the RSS feed and presents it in a usable format. There are many applications and Web sites available that will do this for you (called RSS aggregators), but you can also write your own code to do it since an RSS feed is an XML file with a standardized format.
691
6055_c.qxp
692
12/7/2006
12:42 PM
Page 692
Appendix C The Future of Web Development
The RSS Feed As mentioned previously, the RSS feed is an XML file describing the RSS content. Think of the RSS feed as a database of the content you want to make available. The code in Listing C.1 is a basic RSS feed for Jimco Software’s FrontPage add-ins:
Listing C.1
A Basic RSS Feed
Jimco Software Add-ins http://www.jimcosoftware.com/addins.aspx <description>Add-ins for Microsoft FrontPage and Expression Web Thu, 15 Jun 2006 11:37:00 GMT en-us Spawn 2.0 http://www.jimcosoftware.com/addins.aspx?addin=Spawn http://www.jimcosoftware.com/addins.aspx?addin=Spawn Mon, 1 May 2006 10:30:00 GMT <description>Easily create JavaScript pop-up windows. RSS Feeder http://www.jimcosoftware.com/addins.aspx?addin=RSSF http://www.jimcosoftware.com/addins.aspx?addin=RSSF Wed, 3 May 2006 14:22:00 GMT <description>Create RSS feeds for your content in a flash.
The top-most tag is the tag indicating the version of RSS being used. There are many versions of RSS, but the recommended version is 2.0 because it will be recognized by all the RSS aggregators. The next tag is the tag. This tag contains the content for the RSS feed itself. Enclosed within the tag are one or more tags that describe a particular news item. TIP It’s a good idea to always validate your RSS feed before you start using it. The best way to do that is by using a feed validator such as FEED Validator, located at http://feedvalidator.org.
6055_c.qxp
12/7/2006
12:42 PM
Page 693
Lagniappe: Understanding and Using RSS
The RSS Reader After your RSS feed is ready to go, you can submit it to an RSS aggregator, which will allow other people to subscribe to it. There are many online aggregators, but there are also applications that run on Windows as well. For example, RSS Bandit is a good free RSS reader (www.rssbandit.org), and NewsGator’s FeedDemon (www.newsgator.com) is widely considered the best RSS reader available, but you’ll pay a nominal price for it. If you’d prefer to not pay for it, you can use NewsGator’s online RSS aggregator at no charge. Internet Explorer 7 also comes with the ability to subscribe to RSS feeds. Figure C.2 shows the RSS feed from Listing C.1 displayed in Internet Explorer. Figure C.2 Internet Explorer 7 has the ability to read and subscribe to RSS feeds. If you use Outlook 2007, you can also view your RSS feeds from Internet Explorer right in your inbox.
Notice that Internet Explorer has applied formatting to the RSS feed. Formatting is the job of the subscriber to the RSS feed. You don’t include any formatting elements at all in the feed itself. The only job of the feed is to describe the information. As you can see, it’s incredibly simple to set up an RSS feed for your own content, and it’s a great way to bring people to your site.
693
6055_c.qxp
12/7/2006
12:42 PM
Page 694
6055_d.qxp
11/30/2006
8:43 AM
Page 695
APPENDIX
D
Resources on Expression Web, Web Design, and ASP.NET In this appendix Online Resources on Expression Web Online Resources on Web Design Online Resources on ASP.NET
6055_d.qxp
696
11/30/2006
8:43 AM
Page 696
Appendix D Resources on Expression Web, Web Design, and ASP.NET
Online Resources on Expression Web The Web sites listed in this section are helpful resources on Expression Web.
JimcoBooks.com This is the Web site I created as a resource for readers of my books. It will be updated regularly with new information. The URL is www.jimcobooks.com and you can reach me via e-mail at [email protected].
Expression Web Help Thomas Brunt’s excellent help site on Expression Web is located at www.firstexpression.com.
The Expression Designers: Graphic, Interactive, and Web This is the official blog of the Expression team at Microsoft. There is information here on other Expression products as well. The URL is blogs.msdn.com/xweb/.
by-Expression
D
The by-Expression Web site (www.by-expression.com) is Cheryl D. Wise’s excellent resource on Expression Web. Cheryl is a Microsoft Most Valuable Professional (MVP) in Expression Web.
Online Resources on Web Design These resources are general Web design sites I’ve found helpful over the years.
InformIT The InformIT network contains a plethora of information on all technical topics. It also offers a top-notch search engine so you can locate any topic you need easily. It’s available at www.informit.com.
Webmonkey Always on the cutting edge, Webmonkey is an invaluable resource. You can find it at www.webmonkey.com.
O’Reilly Network While their obvious anti-Microsoft bias can sometimes detract from the content, O’Reilly is irrefutably one of the most important providers of information on information technology. The site is not focused only on Web design, but they do focus on the topic often. The URL is www.oreillynet.com.
6055_d.qxp
11/30/2006
8:43 AM
Page 697
Online Resources on ASP.NET
697
World Wide Web Consortium The W3C Web site is required reading for anyone involved in Web design. You can find them at www.w3.org.
Online Resources on ASP.NET The resources listed here provide excellent information on ASP.NET.
asp.netPRO The asp.netPRO Web site offers some great information at no charge. Premium content is available to those who subscribe to the magazine, something I highly recommend you do. You can find the site at www.aspnetpro.com.
4GuysFromRolla.com The 4GuysFromRolla.com Web site has been a staple for ASP and ASP.NET developers for a very long time. Give it a look at www.4guysfromrolla.com.
ASP.NET Official Web Site The official ASP.NET Web site (appropriately located at www.asp.net) is the best place to get information on ASP.NET straight from the horse’s mouth. Many members of the ASP.NET product group use it as a conduit for information on emerging ASP.NET technologies as well.
DotNetJunkies The DotNetJunkies Web site is a great place for articles, videos, and more on ASP.NET and other Microsoft .NET technologies. You can find the site at www.dotnetjunkies.com.
487 data source controls, 636 displaying data with, 639 editing data with, 644 login controls, 570 Master Pages, 550 personalization, 608, 619 providers, 631 things you can do using,
486 ASP.NET 2.0 controls, 20 ASP.NET code adding, 668 in Expression Web, 497 ASP.NET control adding, 501 ASP.NET Control Errors Visual Aid, 131 ASP.NET controls basics of, 498 troubleshooting, 525 ASP.NET Development Server, 69, 502, 585, 588,
599, 640 browsing from the local machine only, 491
dynamic content warning with, 492 how to use, 487 limitations of, 490 manually stopping, reasons for, 490 options for previewing with,
488 process identity, 491 purpose of, 486 remote access, 491 starting from the command prompt, 493 support for ASP pages and,
491 troubleshooting, 492 using for non-ASP.NET pages, 488 using to test disk-based Web sites, 33 ASP.NET Forms authentication, 585 ASP.NET Impersonation,
588 ASP.NET Label control, 502 ASP.NET language choosing, 497 ASP.NET navigation controls, 638 navigation controls, overview of, 528 sitemap file, creating, 530 ASP.NET navigation controls, 527 ASP.NET Non-visual Controls Visual Aid, 131,
649 ASP.NET page XML error when browsing,
525 ASP.NET pages creating, 496 ASP.NET Toolbox, 499 ASP.NET Web Form creating, 497 ASP.NET Web Forms, 497 ASP.NET Web Parts See Web Parts, 607
6055_index.qxp
12/7/2006
10:23 AM
Page 701
Calendar control
asp.netPRO, 697 ASPX ASP.Net page formats, 106 general page format, 105 Assigned To report, 78 ate User button, 591 Attach Dynamic Web Template dialog, 368, 370 Attach Style Sheet dialog,
400, 411 adding to a blank page, 411 editing the code, 412 Check CSS Compatibility With dropdown, 355 Check Plug-in behavior, 401 CheckBox control, 504 CheckBoxList control, 504
Checking dropdown, 96 Checkout Status report, 77 Child layers creating/working with, 444 Choose Data Source dropdown, Common Menu Tasks dialog, 546 Class, 458 Class module, 458 Clear Contradicting Width checkbox, 567 click event, 224 Click Event code for, 467, 474 Client-side scripting, 415 and scripting of DHTML effects in Web pages, 417 Code behind, use of term,
262 Tags section of, 142 Code problems identifying, 351 Code snippets, 120 Code Snippets making the most of, 125 troubleshooting, 125 Code Snippets tab Page Editor Options dialog,
266 Code View, 216, 229 context menu in, 144 defined, 128, 140 marking invalid code in, 354 modifying an attached page in, 372 working in, 140 Code View Settings radio button, 264 Code View, Expression Web,
500
6055_index.qxp
12/7/2006
10:23 AM
Page 703
CSS border properties
colorImg, 428 colspan attribute HTML tables, 157 Column Properties dialog,
173–4 Columns, 156 adding/deleting, 170 configuring using the Layout Tool, 171 Common AccessDataSource Tasks popup, 637 Common Calendar Tasks popup, 511 Common CatalogZone Tasks popup AutoFormat link in, 619 Common ChangePassword Tasks popup, 576 Common DeclarativeCatalogPart Tasks popup Edit Templates link in, 620 Common DropDownList Tasks popup, 615 Common GridView Tasks popup, 642–7 Common Language Runtime, 487 Common layout need for, 550 Common LoginView Tasks popup, 583 Common Menu Tasks dialog, 536 Common PasswordRecovery Tasks popup Views dropdown, 581 Common SiteMapPath Tasks dialog, 545 Common Tasks popups for login controls, 572 Common TreeView Tasks dialog, 546 Common WebPartZone Tasks popup, 612
CompareValidator control,
596 Compatibility defined, 350 designing for, 349 features in Expression Web,
351 troubleshooting, 358 Compatibility Checker finding problems in code with, 356 Compatibility Checker dialog, 355 Compatibility pane, 357 Compatibility Reports feature, 17 Compilation, 663 Complete step type Wizard control, 517 Configure Data Source dialog, 642 Configure Data Source link,
639 Data access history of, 630 Data access technologies, primer on, 629 Data controls, ASP.NET, 500 Data Source Configuration Wizard, 534 Data source control troubleshooting, 649 Data source controls and displayof data, 636 Data Source Library task pane, 21 Database updating with new fields,
211 Database Connection To Use and Table To Hold Form Results dropdowns, 209 Database tab Site Settings dialog, 71 Databases Web design and, 632 DataList control, 639 DayNameFormat property Calendar control, 513 Debug toolbar, 479 Debugging defined, 674 Javascript, 434 macros, 479
229 working in, 128 Design View Settings radio button, 264 DestinationPageUrl property, 573 Login control, 573 Detail view, creating, 651 DetailsView control, 651 Development computer, 42 DHTML Menu Builder, 391,
531 DHTML menu system, 528 DHTML menu systems, 531 DHTML menus, 420
6055_index.qxp
12/7/2006
10:23 AM
Page 705
Emerging technologies
DigiCert, 682 Digital River, 679 Disable Script Debugging checkbox, 436 DisableCreatedUser property CreateUserWizard, 581 Disk-based Web site creating on a mapped drive,
31 Disk-based Web sites, 40 creating, 30 Disk-based Web sites, 30 Display mode adding code to change, 616 user control that sets, 615 Display property, 598 Display Selected Style Preview menu item, 323 DisplayRememberMe property, 573 DisplayUserName property,
547 extending, 22 Find and Replace tool, 13 Folder List task pane, 6 hyperlinks creating, 112 targeting, 112 images formatting, 244 inserting, 243 picture properties, changing, 245 resizing, 244 interface, 4 layers, 20 Layout Tables feature, 11 online resources, 696 page properties, configuring, 117 Quick Tag Tools, 14 Ruler and Grid feature, 133 Save dialog, 531 site optimization, 16 source control system, 72–3 spell-checking, 116 Status Bar, 7 status bar in, 129 table tools, 11 Tag Properties task pane, 13 task panes, 4 team features, 8 text formatting, 108 using form controls in, 196 Web pages, creating, 104 Web site settings, 68 web sites, publishing, 10 Web sites, working with, 8 Expression Web, 42 and Ethereal, 55 and Fiddler, 55 and rendering of ASP.NET controls, 496 and user interface design for ASP.NET 2.0, 656 ASP.NET code in, 497 ASP.NET Development Server and, 488 attributes and events, 218 AutoFormat feature, 160
Code View, 225, 235, 500 compatibility features, 351 confusing Web site terminology, 53 Copy Web Site view, 52 Design View, 308 designer market and, 630 Draw Table feature, 171 error enforcement, 359 help site, 696 Import Site wizard, 84 Insert Table dialog, 152 options for publishing content, 42 Publish feature, 84 publish log, 50 queries, 283 recent searches, editing/removing, 284 removal of necessary code,
51 specifying attribute values in, 226 Status Bar, 351 subsites, 49 support for CSS in, 290 table format, 169 tables in, 160 using with Visual Web Developer Express Edition, 655–678 Web site features, 26 Web site maintenance, 26 Expression Web, creating a Web site in, 84 Expression Web Tracing Image and Interactive Button attributes, 52 External style sheets, 293–4
F “Failed to access IIS metabase” error, 591 “Failed to start monitoring file changes” or “Failed to start monitoring directory changes” errors, 592 FailureAction property, 573
693 Fiddler, 55 for troubleshooting HTTP publishing, 57 File dependencies incomplete, and Personal Web Package, 99 File editors, configuring, 122 File import, 107 File Results tab, 203 File system and publishing of content,
42 File System method of publishing, 47 File System method, of importing, 87 File Transfer Protocol (FTP), 87 FileUpload control, 504 Find All option, Expression Web, 274–5 Find and Replace dialog,
276–82 opening, 274 options, 274 Query buttons in, 283 tabs, 273 Find and Replace tool, 13 Find and replace tool defined, 272 features, 272 finding/replacing text, 272 troubleshooting, 283 using HTML rules in, 279 Find and replace tool, 271 Find in Source Code checkbox, 275 Finish step type Wizard control, 517 Firefox document.all, 422
FirstDayOfWeek property Calendar control, 514 FirstLetter property value DayNameFormat property,
513 FirstTwoLetters property value DayNameFormat property,
513 Flash player (Adobe), 255 Flickr, 683 Folder List task pane, 6 deleting files from, 6 Font dialog, 111 Font families, 110 Font Families tab Page Editor Options dialog,
267 Font size, 111 Font Size dropdown, 111 Font tab, 384 for loop, 432 Form (form control), 197 Form controls troubleshooting, 212 types of, 197–8 using in Expression Web,
196 Form controls, 195 Form field IDs, 602 Form field names including in form results,
203 Form field validation, 597 Form fields hidden, 213 unmapped, 212 Form Properties dialog, 202 Form results saving to a database, 208 saving to a file or e-mail,
201 Form validation adding, 602
implementing using ASP.NET, 595 need for, 596 Form validation, adding, 671 form.aspx, 493 FormatString property, 575 Formatting RSS feed, 693 Formatting marks, 132 Formatting tab, 118 Forms creating, 198 FP_checkBrowser function,
412 frame attribute HTML tables, 156 Frames adding and configuring inline frames, 188 borders, 191 configuring, 183 deleting, 186 drawbacks of, 181 editing files in frames pages,
188 in Web sites, 180 layout choices, 182 properties, 184 resizable, 192 splitting, 185 targetign in hyperlinks, 187 tips for use of, 191 troubleshooting, 191 when not to use, 181 when to use, 180 Frames Page button, 184 Frames pages accessibility of, 342 creating, 181 Frames Pages section, 107 Frameset breaking out of, 193 Frames, 179 From field MailDefinition property,
578
How can we make this index more useful? Email us at [email protected]
707
6055_index.qxp
708
12/7/2006
10:23 AM
Page 708
FrontPage
FrontPage, 128 FrontPage (Microsoft), 125 Server Extensions, 68, 80,
125 FrontPage 97, 630 FrontPage 97 (Microsoft),
350 FrontPage Server Extensions, 38, 40, 44,
198–201, 209–12 and publishing of content,
42
246 Site Settings dialog, 68 Generate HTML Report button, 347 Generate INSERT, UPDATE, and DELETE Statements checkbox, 645 Generator and ProgID tags,
52 Generic font, 110
configuration abnormalities,
46 configuring for your Web site, 45 defined, 43 functionality, 45 how it works, 85 installation, 63 method, 84 phasing out of, 556 troubleshooting, 44 username/password not accepted, 63 when to choose, 44 FTP, 47 active, 47 and publishing of content,
42 passive, 47 secured, 47 FTP Web sites, 33 creating, 35 opening, 33 Full property value DayNameFormat property,
247 Hotspots, 253 hover pseudo-class, 307 href attribute, 218 hsides value frame attribute, 156 HTML, 290, 686 general page format, 105 HTML bookmark, 114 HTML forms, 196 components of, 196 HTML hyperlinks, defining,
218 HTML leading whitespace,
51 HTML optimization, 50 and Web files, 64 HTML rules accessing, 279 power provided by, 279 HTML selector, 297 HTML tables, See also Tables, 150 birth of, 150 defined, 156 HTML tags attributes, 218 finding and replacing, 282 HTML Tags tab, Find and Replace dialog, 273 HTML whitespace, 52 HTML
367 mainMenu layer, 444 Maintain Proportions checkbox, 386 Make Column Autostretch checkbox, 567 Make ID unique on paste option, 259 Make the Button a GIF Image and Use a Transparent Background radio button, 387 Make the Button a JPEG Image and Use This Background Color radio button, 387 Manage Style Sheet Links menu item, Apply Styles task pane, 326 Manage Styles task pane, 4,
15, 313
LogoutPageUrl property, 575 LogoutText property, 575 Long Description property, frames, 183 Long tail, 678 Lulu, 680
M machine.config, 593 Macro class module, 458 code for, 466 code protection, 480 debugging, 479 finishing the code, 476 module, 457 running, 477 writing, 461 Macro recorder, 456
and origin of styles, 322 imported style sheets, display of, 318 Options button, 320 origin of styles and, 322 styles in, 319 troubleshooting, 335 using, 317 Manual Checklist, Accessibility Checker dialog, 344 Margins and Padding Visual Aid, 130 Markup Validation Service,
359 Master Page ASP.Net page formats, 106 general page format, 105 Master Page file extensions,
551
How can we make this index more useful? Email us at [email protected]
711
6055_index.qxp
712
12/7/2006
10:23 AM
Page 712
Master Page Web Site
Master Page Web site converting an existing site to, 568 developing, 557 Master Pages, 550 advantages to using, 556 creating, 557 defined, 556 defining content in, 551 Dynamic Web Templates vs., 556 Master pages , 552 improving navigation with,
546 troubleshooting, 567 update of attached pages,
566 value of understanding, 567 Master Pages report, 77 Master view, creating, 649 master.dwt file, 317, 368 master.master, 559, 566 MasterDetail data source,
651 Menu control, ASP.NET adding, 532 AutoFormat feature, 536 creating a test Web site, 532 CSS styles, using, 537 DHTML menu system, 531 formatting, 535 Menu control, ASP.NET, 531 META tags, 119 Metabase, 659 Metadata removing, 32 Methods, 458 Microsoft .NET Framework 2.0, 570, 499 Microsoft Access, 64 Microsoft Access 2002 database, 209 Microsoft FrontPage, 43, 125 Microsoft Script Editor, 434 Microsoft SQL Server 2005 Express Edition, 570
Microsoft Visual Web Developer Express Edition,
551 Microsoft Windows Media Knowledge Center, 255 Microsoft’s MSDN Web site,
528 middle value align attribute, 159 Modify Extension option Configure Editors tab, 123 Modify Style dialog box, 330 Modify Style menu item, Apply Styles task pane, 325 Modules, 457 MODx, 633 More Colors dialog, 560 Mosaic, 350 Mosaic 2.0, 350 Most Recently Used button,
284, 275 Mozilla, 416 MSDN documentation, 657 MSDN Library, 180 Multimedia inserting, 255 MultiView control, 505 My Web Package, 94
N Name property, frames, 183 NavigateUrl element, 506 Navigation controls, ASP.NET, 500 NCSA Mosaic 1.0, 350 Nested frameset, 193 Nested HTML elements difficulty in tracking, 228 Netscape 1.0, 350 Netscape Communications,
416 Netscape Composer, 350
Netscape Navigator, 416 New Auto Class option, Target Rule dropdown, 110 New Auto ID option, Target Rule dropdown, 110 New dialog, 104, 552 CSS Layouts option, 106 New dialog, creating a Dynamic Web Template using, 365 New Editor button, 123 New Editor option Configure Editors tab, 123 New Extension button, 123 New Extension option Configure Editors tab, 123 New File dialog, 660 New Inline Style option, Target Rule dropdown, 110 New settings troubleshooting, 480 New Style Copy menu item, Apply Styles task pane, 325 New Style dialog box, 330 New Style menu item, Apply Styles task pane, 325 NewsGator’s FeedDemon,
142 Null value message, troubleshooting, 622 Nwind.mdb file, 639
O Object Browser, 460 searching, 460
6055_index.qxp
12/7/2006
10:23 AM
Page 713
Picture tab
Object models, 459 Offline site development, 42 O’Reilly Network, 696 Older browsers, designing for, 351 Older Files report, 77 One Page Web Site option New dialog, 28 onload attribute, tag,
420 onmouseout event, 427 onmouseover event, 427 Open Browser Window behavior, 113, 404 troubleshooting, 410 Open Page(s) option, Find and Replace dialog, 274 Open Query button, 283 Open Web Site dialog, 659 Open With dialog, 123 OptimizeSite function, 475 Options button Manage Styles task pane,
320 Orientation property, 573
P Page Editor Options editing, 258 Page Editor Options dialog,
109, 354 accessing, 258 Authoring tab, 264 AutoThumbnail tab, 261 Code Formatting tab, 262 Code Snippets tab, 266 Color Coding tab, 263 Default Fonts tab, 261 displaying, 354 experimenting with options in, 269 Font Families tab, 267 General tab, 258 IntelliSense tab, 267 Picture tab, 265
Ruler and Grid tab, 266 Page elements formatting using HTML,
290 troubleshooting, 335 Page encoding, troubleshooting, 80 Page formatting Formatting tab, 118 Page language and encoding,
405 Port numbers, 488 Position Is Everything Web site, 301 Positioning options, Quick Tag Editor, 238 Preload Images behavior, 406 Preview tab Site Settings dialog, 69 PrevMonthText property Calendar control, 514 Priority field MailDefinition property,
578 Problem Details dialog, 347 Products submenu configuring, 450 ProductSubmenu layer, 451 “Professional Validation and More” suite of controls (Peter Blum), 596 Project Explorer, 456–8, 466 Project Properties dialog,
480 macro protection and, 481 Prop Control control, 621 Properties task pane setting tag attributes with,
232 error displays”, 234 experimenting with, 232 HTML check, 233 making changes to CSS code using, 239 sabotage of Expression Web code, 239 when to use, 239 Quick Tag Selector, 229, 302 highlighted border, 230 in Design View, 229 purpose of, 229 selecting a page element or block of code using, 230 Quick Tag Tools, 14, 143,
146, 164 purpose of, 228 sets of tools, 229 turning on, 238 Quick Tag Tools, 228 Quirks rendering mode, 353
574 Remote Web site, 53 Remote Web Site Properties dialog, 44, 50, 478 Remote Web Site view, 10 Remove Class menu item, Apply Styles task pane, 326 Remove ID menu item, Apply Styles task pane, 326 Remove Inline Style menu item, Apply Styles task pane, 326 Remove Link menu item, Apply Styles task pane, 326
6055_index.qxp
12/7/2006
10:23 AM
Page 715
Show Set Properties On Top button
Remove Tag option, Quick Tag Editor, 235, 238 Replace tab, Find and Replace dialog, 273 Reports using to find problems, 355 Web sites, 9 RequiredFieldValidator control, 597, 672 ResetForm procedure code for, 469 ResetForm sub-procedure,
468 Resizable frames, 192 Resizing images, 244 Resources, 695 Review Status report, 78, 81 rhs value frame attribute, 156 right value align attribute, 158 Robust ASP.NET 2.0 applications, 656 RoleGroups, 583 Rows, 156 adding/deleting, 170 configuring using the Layout Tool, 171 rowspan attribute HTML tables, 157 tag, 692 RSS, 691 RSS Bandit, 693 RSS feed, 692 RSS reader, 693 Ruby on Rails, 690 Ruby on Rails, 690 Ruler and Grid feature, 133 Ruler and Grid tab Page Editor Options dialog,
266 Run Check Based on Doctype Declaration in Page if Available checkbox,
356
S Sams Teach Yourself ASP.NET 2.0 in 24 Hours, Complete Starter Kit (Sams Publishing), 535, 617 Save Embedded File dialog,
85 Security, 570 Select All x Instances menu item, Apply Styles task pane, 325 Select Style Sheet dialog, 298 Select Tag Contents, 230 Selected Pages option, Find and Replace dialog, 274 SelectedDate property Calendar control, 514 SelectionMode property Calendar control, 514 SelectMonthText property Calendar control, 515 SelectWeekText property Calendar control, 515 Send To Database form handler, 202, 204, 208
Send To form handler, 202 Send To Other form handler,
202 Separate Grouped Selectors option, 323 Server Message Language dropdown, 71 Set As Default For New Tables checkbox, 153 Set section Insert Table dialog, 160 Set Text behavior, 406 Set Text of Frame behavior,
406 Set Text of Layer behavior,
408 Set Text of Status Bar behavior, 408 Set Text of Text Field behavior, 409 Set Transparent Color button Pictures toolbar, 249 SetFocusOnError property,
599 Short property value DayNameFormat property,
513 Shortest property value DayNameFormat property,
513 Show Alphabetized List button CSS Properties task pane,
327 Show Dependencies button,
96 Show Paste Options Buttons,
260 Show Paste Options Buttons checkbox, 260 Show Set Properties On Top button, 225 CSS Properties task pane,
328
How can we make this index more useful? Email us at [email protected]
715
6055_index.qxp
716
12/7/2006
10:23 AM
Page 716
ShowDayHeader property
ShowDayHeader property,
513 Calendar control, 515 ShowGridLines property Calendar control, 515 ShowNextPrevMonth property Calendar control, 515 ShowTitle property Calendar control, 515 SideBarButtonStyle property Wizard control, 526 SideBarStyle property Wizard control, 526 Site development, offline, 42 Site Map ASP.Net page formats, 106 Site optimization, 16 Site Settings dialog, 68 Advanced tab, 69 Database tab, 71 General tab, 68 Preview tab, 69 Site Summary view, 76 Sitemap file, defined, 630 Sitemap file, example of, 530 SiteMapDataSource control,
328 Sun Microsystems, 416 Support submenu, 453 SupportedDisplayModes method of the WebPartDisplayMode, 617 Swap Image behavior, 395,
409 Swap Image Restore behavior, 395, 410 swapImage function, 429 Synchronize setting Copy Web Site View, 52 Syntax errors in JavaScript, 434
6055_index.qxp
12/7/2006
10:23 AM
Page 717
Unlinked Files report
T Table AutoFormat dialog,
160 Table borders, 153 Table context menu, 161 Table control, 505 Table menu, 160–1 Table Properties dialog, 170 Table tools, 11 Tables adding and deleting rows and columns, 170 align attribute, 151 as example of purpose of HTML, 150 clearing contradicting height/width, 178 code for table containing two rows and two columns, 157 customizing, 160 designing for multiple resolutions using, 178 designing layout with, 171 dragging/dropping cells in Layout Table, 178 drawing in Expression Web,
171 HTML code for a table using center alignment attribute, 152 in Expression Web, 160 inserting, 160 makeup of an HTML table tag, 150 origin of, 150 width, 167, 177 Tables toolbar, 160, 171 Tag Properties, 153 setting, 221 Tag Properties option, Quick Tag Editor, 238 Tag Properties pane, 160,
501 Tag Properties task pane, 13,
538, 541, 543
collapsing categories in, 217 context sensitivity of, 217 making visible, 217 setting alt attribute using,
221 troubleshooting, 225 understanding, 216 using events with, 224 viewing tag properties with,
608, 632 Add New Item dialog, 661 creating a new file in, 660 creating a sample Web site,
664 creating a Web page, 665 creating pages in, 660 defined, 656 download site, 656 installation, 657 registration, 656 working with controls in,
663 working with Web sites in,
658 Visual Web Developer Express Edition (Microsoft), 652 void value frame attribute, 156
6055_index.qxp
12/7/2006
10:23 AM
Page 719
wizard.aspx
vsides value frame attribute, 156 VTI (Vermeer Technologies Incorporated), 45
W Warnings, reported in Accessibility Checker dialog, 344 Watch Window, 479 Web banners, 682–3 Web browsers, 350 Web Content Accessibility Guidelines (WCAG), 16,
340 Web Developer Express Edition, 570 Web development future of, 685 Web Form Click event in VB and C# code, 670 form validation, adding, 671 in C# code, 670 in VB code, 670 Web image formats, 242 Web object model, 459 Web Package Properties dialog, 95 Web page creating, 221 Web page views taking advantage of, 147 troubleshooting, 146 Web page views, 127 Web page workflow, 75 Web pages creating, 589 Web pages, creating in Expression Web, 104 Web Parts components of, 608 controls, 608
controls in the Toolbox, 611 defined, 608 editing controls, 623 page creation, 611 page display modes, 614 user controls documentation, 609 Web Parts Catalog, 619 Web Parts zone, 608 Web server Windows editions not shipping with, 486 Web site components of, 26 configuring IIS, 585 configuring ASP.NET Development server, 588 creating, 25 defined, 26 settings, 68 subsites and, 27 templates, 27 troubleshooting, 39 type, deciding on, 40 types of, 29 updating, 364 Web site content, 528 Web Site Location textbox,
87 Web Site login systems, See Login systems, 570 Web site reports, 76 configuring, 78 saving, 80 Web site, importing, 84 publishing vs., 92 Web sites creating, 8 freshness, 364 publishing, 10 reports, 9 working with, 8 Web standards changes to, 359 Web Standards Project
(WaSP), 686 Web User Control ASP.Net page formats, 106 web.config, 554, 588 web.sitemap file, 532 WebDAV and operating system, 46 and publishing of content,
42 benefits to using, 46 defined, 46 FrontPage Server Extensions used instead of,
63 using to publish your Expression Web Web site,
47 WebDAV (Web Distributed Authoring and Versioning),
86 Webmonkey, 696 WebPartManager control,
611, 617 WebPartManager Web Parts control troubleshooting, 622 WebPartZone control, 611–2 Width element, 506 window object, 421 Windows Integrated Authentication, 56 Windows Media Knowledge Center, 255 Windows SharePoint Services, 203 Wizard control, 505, 516 address, 522 creating a simple wizard,
517 final step (Finish), 524 formatting with styles, 526 lists, 523 Name/E-mail, 521 steps, 517 welcome message, 521 wizard.aspx, 518
How can we make this index more useful? Email us at [email protected]
719
6055_index.qxp
720
12/7/2006
10:23 AM
Page 720
WizardStep
WizardStep, 519 WizardStep Collection Editor, 518, 520 Word Wrap checkbox, 261 Workflow making the most of, 80 Workforce Investment Act,
340 Workgroup settings troubleshooting, 80 Workgroup tab, 120 Page Properties dialog, 75 World Wide Web, 678 World Wide Web Consortium (W3C), 686,
697 WorldWideWeb, 350 Wrap Tag option, Quick Tag Editor, 237 Wrapping style, images, 247 writeDateTime function, 420 writeDateTime() JavaScript function, 418 WYSIWYG (what you see is what you get) interface, 228 WYSIWYG Web design products, 128
X–Z XHTML, 352 benefits of, 687 requirements for, 687 XHTML 1.0 Transitional rules, 352 XML general page format, 105 Xml control, 505 XmlDataSource control, 638 XPath statement, 638 z-index, 440 z-order, 454 z-position, 304
