Beginning. Expression Web. Zak Ruvalcaba

Transcription

1 Beginning Expression Web Zak Ruvalcaba

2

3 Beginning Expression Web

4

5 Beginning Expression Web Zak Ruvalcaba

6 Beginning Expression Web Published by Wiley Publishing, Inc Crosspoint Boulevard Indianapolis, IN Copyright 2007 by Wiley Publishing, Inc., Indianapolis, Indiana Published simultaneously in Canada ISBN: Manufactured in the United States of America Library of Congress Cataloging-in-Publication Data is available from the publisher. No part of this publication may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, electronic, mechanical, photocopying, recording, scanning, or otherwise, except as permitted under Sections 107 or 108 of the 1976 United States Copyright Act, without either the prior written permission of the Publisher, or authorization through payment of the appropriate per-copy fee to the Copyright Clearance Center, 222 Rosewood Drive, Danvers, MA 01923, (978) , fax (978) Requests to the Publisher for permission should be addressed to the Legal Department, Wiley Publishing, Inc., Crosspoint Blvd., Indianapolis, IN 46256, (317) , fax (317) , or online at LIMIT OF LIABILITY/DISCLAIMER OF WARRANTY: THE PUBLISHER AND THE AUTHOR MAKE NO REPRESENTATIONS OR WARRANTIES WITH RESPECT TO THE ACCURACY OR COMPLETENESS OF THE CONTENTS OF THIS WORK AND SPECIFICALLY DISCLAIM ALL WARRANTIES, INCLUDING WITHOUT LIMITATION WARRANTIES OF FITNESS FOR A PARTI- CULAR PURPOSE. NO WARRANTY MAY BE CREATED OR EXTENDED BY SALES OR PROMO- TIONAL MATERIALS. THE ADVICE AND STRATEGIES CONTAINED HEREIN MAY NOT BE SUITABLE FOR EVERY SITUATION. THIS WORK IS SOLD WITH THE UNDERSTANDING THAT THE PUBLISHER IS NOT ENGAGED IN RENDERING LEGAL, ACCOUNTING, OR OTHER PRO- FESSIONAL SERVICES. IF PROFESSIONAL ASSISTANCE IS REQUIRED, THE SERVICES OF A COMPETENT PROFESSIONAL PERSON SHOULD BE SOUGHT. NEITHER THE PUBLISHER NOR THE AUTHOR SHALL BE LIABLE FOR DAMAGES ARISING HEREFROM. THE FACT THAT AN ORGANIZATION OR WEBSITE IS REFERRED TO IN THIS WORK AS A CITATION AND/OR A POTENTIAL SOURCE OF FURTHER INFORMATION DOES NOT MEAN THAT THE AUTHOR OR THE PUBLISHER ENDORSES THE INFORMATION THE ORGANIZATION OR WEBSITE MAY PROVIDE OR RECOMMENDATIONS IT MAY MAKE. FURTHER, READERS SHOULD BE AWARE THAT INTERNET WEBSITES LISTED IN THIS WORK MAY HAVE CHANGED OR DISAPPEARED BETWEEN WHEN THIS WORK WAS WRITTEN AND WHEN IT IS READ. For general information on our other products and services please contact our Customer Care Department within the United States at (800) , outside the United States at (317) , or fax (317) Trademarks: Wiley, the Wiley logo, Wrox, the Wrox logo, Programmer to Programmer, and related trade dress are trademarks or registered trademarks of John Wiley & Sons, Inc. and/or its affiliates, in the United States and other countries, and may not be used without written permission. Microsoft and Expression are registered trademarks of Microsoft Corporation in the United States and/or other countries. All other trademarks are the property of their respective owners. Wiley Publishing, Inc., is not associated with any product or vendor mentioned in this book. Wiley also publishes its books in a variety of electronic formats. Some content that appears in print may not be available in electronic books.

7 I would like to dedicate this book to my wife, Jessica; my daughter, Makenzie; my son, Zaven; and the newest addition to our family, my son, Zayden, for putting up with my many faults. I love my family more than anyone can possibly know.

8

9 About the Author Zak Ruvalcaba has been researching, designing, and developing for the Web since He holds a Bachelor s Degree from San Diego State University and a Master of Science in Instructional Technology from National University in San Diego. He served as Creative Director with EPIC Solutions until His expertise in developing Web applications led him to a position as Manager of Web Development at SkyDesk, Inc., where he developed Web applications for such companies as Gateway, HP, Toshiba, IBM, Intuit, Peachtree, Dell, and Microsoft. He s worked for such companies as ADCS Inc. and Wireless Knowledge as a wireless software engineer developing.net solutions for companies including Mellon Financial, Goldman Sachs, TV Guide, Healthbanks, Gartner, Inc., Microsoft, Qualcomm, and Commerce One. Currently, he holds a position with MiraCosta College in Oceanside, California, supporting internal and external.net applications. His skill set includes technologies and languages including (X)HTML, XML, JavaScript, CSS, ASP, ASP.NET, VB.NET, C#, ADO.NET, Web Services, SQL, T-SQL, and ActionScript. He is a Macromedia Certified Professional (MMCP), a Microsoft Certified Application Developer for.net (MCAD), and a Microsoft Certified Solutions Developer for.net (MCSD). He teaches and holds design lectures on various technologies and tools including Dreamweaver, Flash, ASP.NET, ADO.NET, and Web Services for the San Diego Community College District and Palomar College.

10

11 Senior Acquisitions Editor Jim Minatel Development Editor Kevin Shafer Technical Editors Gregory Beamer and Spike Xavier Copy Editor Nancy Rapoport Editorial Manager Mary Beth Wakefield Production Manager Tim Tate Credits Vice President and Executive Group Publisher Richard Swadley Vice President and Executive Publisher Joseph B. Wikert Compositor Laurie Stewart, Happenstance Type-O-Rama Proofreader Ian Golder Indexer Robert Swanson Anniversary Logo Design Richard Pacifico

12

13 Acknowledgments Writing a book is a tremendous effort and takes dedication and patience from all who are involved. A sincere Thank you to my Acquisitions Editor, Jim Minatel, for being on top of this book and for ensuring that Beginning Expression Web is one of the first Expression Web books to market. I d also like to thank Kevin Shafer, Tim Tate, Spike Xavier, and Greg Beamer for their diligence toward making this book a success.

14

15 Contents Acknowledgments Introduction xi xxi Chapter 1: Introducing Microsoft Expression Web 1 Familiarizing Yourself with the Interface 2 The Menu Bar 5 The Development Window 7 The Development Area 8 The Tabbed File Chooser 10 Show Design, Split, and Code View 10 The Quick Tag Selector 11 Task Panes 13 Toolbars 16 Context Menus 19 Summary 20 Chapter 2: Building a Web Page 21 Creating a New Web Page 21 Setting Page Properties 24 General Properties 24 Formatting Properties 26 Advanced Properties 27 Custom Properties 28 Language Properties 29 Working with Text 29 Copying, Pasting, and Inserting Text from an External Source 30 Line Breaks and Paragraph Breaks 33 Applying Headings 35 Choosing a Font 37 Setting a Font Size 39 Text Styles 40 Text Alignment and Indentations 42

16 Contents xiv Working with Lists 43 Highlighting and Setting the Text Color 45 Applying Borders 47 Inserting a Horizontal Line 49 Checking the Spelling of a Web Page 50 Previewing Your Web Page in the Browser 53 Summary 56 Exercise 56 Chapter 3: Working with Web Sites 57 The Importance of Working with Web Sites 58 Creating a New Web Site 59 Working with the Folder List Task Pane 62 Creating New Folders and Pages 62 Setting the Home Page 65 Renaming and Deleting Files 66 Modifying Site Settings 66 General Settings 67 Preview in Browser Settings 67 Advanced Settings 68 Language Settings 68 Database Settings 69 Publishing Your Web Site 69 The Publish Web Site Dialog 69 Using the Copy Web Site Window 82 Deploying Web Sites with Personal Web Packages 87 Summary 90 Exercise 90 Chapter 4: Working with Images, Media, and Hyperlinks 93 Inserting Images into Your Web Page 94 Setting General Picture Properties 96 Using the Tag Properties Task Pane to Modify Image Properties 100 Using the Pictures Toolbar to Modify Image Properties 103 Editing an Image with Microsoft Office Picture Manager 106 Changing the Picture File Type 109 Linking Pages Within Your Web Site 110 Linking Text and Images to an Existing Web Page 111 Linking to a Bookmark within a Web Page 114 Linking to an Address 116 Creating Multiple Links Within an Image 117

17 Contents Using Interactive Buttons 120 Managing Web Site Hyperlinks 124 Summary 126 Exercise 127 Chapter 5: Page Formatting Using Cascading Style Sheets 129 Introduction to Cascading Style Sheets 130 CSS Versus HTML 133 Working with CSS in Expression Web 135 Defining How CSS Is Created and Applied Within Expression Web 135 Defining Classes Within an External Style Sheet Creating a Style Rule 138 Applying Styles by Using the Apply Styles Task Pane and Style Toolbar 152 Managing Styles with the CSS Properties and Manage Styles Task Panes 157 Designing Styles by Redefining HTML Tags 159 Using Contextual Selectors 160 Attaching Existing Style Sheets to Web Pages 164 Working with CSS Reports 165 Summary 166 Exercise 166 Chapter 6: Web Page Structuring Techniques by Using Tables 169 Inserting and Working with Tables 170 Selecting Table Elements 175 Modifying Table Properties 176 Formatting Tables Using Table AutoFormat 190 Inserting and Working with Layout Tables 192 Drawing Tables 193 Drawing Cells 198 Summary 200 Exercise 201 Chapter 7: Advanced Page Structuring Techniques by Using Layers and CSS 203 Introduction to Layers 204 Working with Layers 205 Inserting a Layer 205 Inserting Content into Layers 207 Modifying Layer Properties with the Positioning Toolbar 209 Modifying Layer Properties with the Layers Task Pane 209 Drawing a Layer 211 xv

18 Contents Nesting Layers 212 Adding Borders and Shading to Layers 214 Deleting a Layer 217 Designing Table-less Web Sites by Using Layers and CSS 218 Designing Layers Using a Style Sheet 218 Inserting DIV Tags 223 Working with Contextual Selectors 226 Summary 227 Exercise 229 Chapter 8: Adding Interactivity with Behaviors 231 Adding Client-Side Interactivity with Behaviors 232 The Call Script Behavior 238 The Change Property and Change Property Restore Behaviors 238 The Check Browser Behavior 243 The Check Plug-in Behavior 244 The Go To URL Behavior 245 The Jump Menu and Jump Menu Go Behaviors 246 The Open Browser Window Behavior 248 The Play Sound Behavior 250 The Preload Images Behavior 251 The Set Text Behaviors 252 The Swap Image and Swap Image Restore Behaviors 252 Summary 254 Exercise 255 Chapter 9: Working with HTML Forms and Form Controls 257 An Introduction to HTML Forms 257 Working with Forms and Form Controls 260 Input (Text) and Input (Password) 264 Text Area 266 Input (Checkbox) 268 Input (Radio) 268 Drop-Down Box 270 Input (Button), Input (Submit), and Input (Reset) 273 Testing the Form 274 Other Controls to Consider 275 Summary 282 Exercise 282 xvi

19 Contents Chapter 10: Introduction to Web Application Development 285 Terminology 286 Introduction to Web Applications 288 Client-Side Technologies 290 The Web Server 291 Installing IIS 293 Expression Web s Built-In Web Server 296 Configuring the Web Server in Expression Web 296 Server-Side Technologies 298.NET and the.net Framework 298 Installing the.net Framework and ASP.NET 299 Creating a Simple ASP.NET Page 301 Expression Web s ASP.NET Integration 303 The Database 305 Database Options 307 The Vecta Corp Database 309 The Structured Query Language 312 The Dynamic Vecta Corp Web Site 313 Summary 314 Chapter 11: Accessing and Displaying Database Data 315 Connecting to a Data Source 316 Connecting to an Access Database 318 Attaching your SQL Server 2005 Express Edition Database 321 Building the Download Patches Page 323 Using DataSource Controls 324 Using List Bound Controls 328 Using Data Controls 331 Summary 353 Exercise 354 Chapter 12: Inserting, Editing, and Deleting Database Data 355 Building an Administration Page 356 Configuring a Data Source Control to Allow Inserts, Updates, and Deletes 357 Working with the FormView Control 359 Modifying and Deleting Database Data Using the GridView Control 363 Summary 368 Exercise 368 xvii

20 Contents Chapter 13: Validating User Input 371 Client-Side Versus Server-Side Validation 372 Using Validation Controls 375 The RequiredFieldValidator Control 376 The CompareValidator Control 378 The RangeValidator Control 380 The ValidationSummary Control 382 The RegularExpressionValidator Control 383 The CustomValidator Control 385 Summary 387 Exercise 387 Chapter 14: Securing Your Web Applications 389 Securing the Vecta Corp Site 390 Configuring Application Services 392 Configuring Forms Authentication 394 Creating the Login Page 398 Working with Login Controls 400 Summary 412 Chapter 15: Working with XML Data 413 Introduction to XML and XSL 413 Expression Web s Visual XML Authoring Environment 417 Creating an XML Document 418 Binding XML Data 420 Working with RSS Feeds 425 Summary 428 Chapter 16: Building Accessible and Standards-Compliant Web Sites 429 Accessibility Standards 430 Standards Resources 430 Conform with Standards 433 Checking Accessibility 437 Accessibility Reference 441 Image Tests 441 Imagemap Tests 442 Color and Style Tests 442 xviii

21 Contents Form and Scripting Tests 443 Table and Frame Tests 444 Multimedia and Applet Tests 445 Other Accessibility Tests 446 Summary 447 Index 449 xix

22

23 Introduction Ten years ago, when I used FrontPage for the first time, I was amazed at how far ahead of its time the program was. The ability to work with tables, visual formatting, styles, and pinpoint accurate designs truly amazed me. I was a skeptic when it came to visual editors, and preferred Notepad whenever possible. FrontPage changed that in me, and made me look at Web development in a whole new light. Still, many considered FrontPage a simple visual editor that accomplishes little but aid in the development of static Web pages. The mindset is that visual editors lack the true complexity that it takes to create rich and powerful Web applications that encompass client-side technologies such as HTML, CSS, and JavaScript, while leveraging server-side technologies such as ASP.NET. Enter Expression Web. As FrontPage s successor, Expression Web obliterates that stigma by captivating the developer in a vast, intuitive, and feature-rich environment. Whether you re designing a Web site for personal use, a government institution, or a private organization, Expression Web s tools are geared to aiding in the development of feature-rich, accessible, and captivating Web pages. Who This Book Is For If you ve picked up this book, chances are you re interested in the world of Web design and development and, more specifically, how Expression Web can help you succeed in these endeavors. Whether you re a seasoned developer, a print designer looking to expand your base of knowledge to the Web, an existing FrontPage user looking to see what the fuss is about, or a home user who simply aims at creating a family Web site, Expression Web offers the features and flexibility to get you on your way quickly and effortlessly. This book introduces you to the many features available through Expression Web. What You Need to Use This Book To work through and run the samples in this book, you must have the following: A computer running the Windows operating system. The.NET Framework 2.0. (The.NET Framework 2.0 will be installed along with Expression Web. You can download it separately from Expression Web. (A trial version can be downloaded from Microsoft s Web site at A database such as Microsoft Access or the free Microsoft SQL Server 2005 Express Edition. Internet Information Services (IIS) is needed for the validation and authentication examples in Chapter 14, Securing Your Web Applications. You will also need IIS to install WebDAV as described in Chapter 3, Working with Web Sites. All of the files required for working with the examples in this book can be downloaded from our Web site at

24 Introduction Conventions To help you get the most from the text and keep track of what s happening, a number of conventions have been used throughout the book. Try It Out The Try It Out section is an exercise you should work through, following the text in the book. 1. They usually consist of a set of steps. 2. Each step has a number. 3. Follow the steps through with your copy of the database. Boxes like this one hold important, not-to-be forgotten information that is directly relevant to the surrounding text. Tips, hints, tricks, and asides to the current discussion are offset and placed in italics like this. As for styles in the text: Important new terms and important words are highlighted when we introduce them. Keyboard strokes are shown like this: Ctrl+A. File names, URLs, and code within the text are shown like this: persistence.properties. Code is presented in the following two ways: In code examples, we highlight new and important code with a gray background. The gray highlighting is not used for code that s less important in the present context, or has been shown before. Project Files As you work through the examples in this book, you will need the project files that accompany the book. The entire set of project files used in this book is available for download at Once at the site, simply locate the book s title (either by using the Search box or by using one of the title lists), and click the Download Code link on the book s detail page to obtain all the project files for the book. Because many books have similar titles, you may find it easiest to search by ISBN; for this book the ISBN is Once you download the files, just decompress them with your favorite compression tool. Alternately, you can go to the main Wrox code download page at to see the files available for this book and all other Wrox books. xxii

25 Errata Introduction We make every effort to ensure that there are no errors in the text or in the code. However, no one is perfect, and mistakes do occur. If you find an error in one of our books (such as a spelling mistake or faulty piece of code), we would be very grateful for your feedback. By sending in errata you may save another reader hours of frustration and at the same time you will be helping us provide even higher quality information. To find the errata page for this book, go to and locate the title using the Search box or one of the title lists. Then, on the book details page, click the Book Errata link. On this page, you can view all errata that has been submitted for this book and posted by Wrox editors. A complete book list including links to each book s errata is also available at If you don t spot your error on the Book Errata page, go to and complete the form there to send us the error you have found. We ll check the information and, if appropriate, post a message to the book s errata page and fix the problem in subsequent editions of the book. p2p.wrox.com For author and peer discussion, join the P2P forums at p2p.wrox.com. The forums are a Web-based system for you to post messages relating to Wrox books and related technologies and to interact with other readers and technology users. The forums offer a subscription feature to you topics of interest of your choosing when new posts are made to the forums. Wrox authors, editors, other industry experts, and your fellow readers are present on these forums. At you will find a number of different forums that will help you not only as you read this book, but also as you develop your own applications. To join the forums, just follow these steps: 1. Go to p2p.wrox.com and click the Register link. 2. Read the terms of use and click Agree. 3. Complete the required information to join, as well as any optional information you wish to provide, and click Submit. 4. You will receive an with information describing how to verify your account and complete the joining process. You can read messages in the forums without joining P2P, but to post your own messages, you must join. Once you join, you can post new messages and respond to messages other users post. You can read messages at any time on the Web. If you would like to have new messages from a particular forum ed to you, click the Subscribe to this Forum icon by the forum name in the forum listing. For more information about how to use the Wrox P2P forums, be sure to read the P2P FAQs for answers to questions about how the forum software works, as well as many common questions specific to P2P and Wrox books. To read the FAQs, click the FAQ link on any P2P page. xxiii

26

27 1 Introducing Microsoft Expression Web There was a time in the not-so-distant past when a designer aiming to create Web pages needed only a basic knowledge of Hypertext Markup Language (HTML) and a robust, reliable, and feature-rich text editor such as Notepad. Okay, so the latter is an exaggeration, but let s face it. Web pages were simple then, containing limited tags used purely for formatting fonts, setting paragraph and line breaks, adding lists, placing images, and occasionally including tabular data. The relative simplicity of creating Web pages, then, led to the increased visibility and use of the Web. Gone are the days of adding a few tags to a blank document in Notepad, saving the file with an.html extension, and then opening that page within a browser to see the finished product. With increased usage came new ways of formatting and structuring content in a Cascading Style Sheet (CSS). Scripting languages such as JavaScript were introduced in an effort to improve the usability of Web pages, validate forms, detect browsers, create cookies, and more. As the Web became the perfect medium for sharing and disseminating information, users became much more finicky, demanding support for audio, video, and even animation. Beyond these simplicities however, Web pages grew to unbelievable proportions. The Web is no longer a simple medium used merely for informational purposes. Rather, users can now expect to do their banking, buy cars, shop for food, collaborate, and much more, online. We now work with Web pages that are responsible for extracting content from databases, Extensible Markup Language (XML) files, and more. Developing for the Web no longer involves a simple understanding of HTML, a handy text editor, and a browser. Instead, developers are increasingly required to learn other complex technologies such as CSS, JavaScript, ASP.NET, VB.NET, C#, SQL, XML, and much more. But, with the introduction of so many Web technologies just over the last decade alone, how has the Web, and, more specifically, how has developing for the Web increased beyond a level that so few could have ever predicted during the Web s infancy? The answer lies in visual editors such as Microsoft Expression Web. Microsoft Expression Web facilitates the development of Web pages visually. Even better, it fosters visual development of Web applications. While knowledge of the aforementioned Web technologies

28 Chapter 1 is encouraged, it s not required with Expression Web. Expression Web allows the developer to structure and format content, and even connect to and interact with database/xml data visually using a series of task panes, wizards, toolbars, and toolboxes. With Expression Web, years of learning and mastering complex authoring and programming languages are now cut down to a matter of days and 16 convenient chapters. Your journey through Expression Web begins here with an introduction to the product. Specifically, you will do the following: Become familiar with the Expression Web interface Learn about the many options available within the menu bar Understand the role of Task Panes Use and customize toolbars Learn to recognize and use the Development window, the tag selector, the development area, the tabbed file chooser, and the Design, Split, and Code views Throughout the book, certain Expression Web Task Panes, toolbars, windows, and more will be referenced by name. By the end of the chapter, you will have a solid understanding of where these components are located. You ll know which component accomplishes which task and when to use each. This will serve as a foundation for other, more complex processes throughout the book. Let s get started! Familiarizing Yourself with the Interface Opening Expression Web for the first time reveals a program that looks and, in many cases, functions much like other Microsoft products. Falling in line with the familiarization through consistency approach, Expression Web at first glance closely resembles other Office products such as Word, Publisher, and even its predecessor, FrontPage. Initially, you ll notice Expression Web s Multiple Document Interface (MDI), where numerous windows (otherwise known as Task Panes), the Document window, toolbars, menus, and so on, converge within a single parent window shown in Figure 1-1. The beauty in the MDI approach, as you may have seen by now in other Office products, is that the Task Panes and toolbars aren t fixed to the environment (otherwise known as docked). Instead, the toolbars and Task Panes that facilitate the majority of property modifications for your Web pages can be undocked, moved to a different area of the development environment, and then re-docked to that particular area. You can also choose to not dock a Task Pane or toolbar and instead leave it floating on top of other toolbars and Task Panes within the development environment. Figure 1-2 provides an example of how you might choose to customize the development environment. 2

29 Introducing Microsoft Expression Web To get an idea of just how easy it is to dock and undock toolbars and Task Panes, try rolling your cursor over the title bar of a particular Task Pane or toolbar. Your cursor will change to the Move cursor. Now, click, hold, and drag the Task Pane or toolbar out of its area and move it to another area within the environment. As long as the area supports the docking of that particular Task Pane or toolbar, it should snap automatically into place. As you can see by the callouts in Figure 1-1, Expression Web s user interface offers the following five major components: The menu bar The Document window Task Panes Toolbars Context menus (not shown) Menu bar Document window Toolbar Figure 1-1: Multiple Document Interface (MDI) Task Panes 3

30 Chapter 1 Figure 1-2: Customizing the development environment While you may be surprised to learn that development of Web pages within Expression Web flows through just these five components, it s true! The menu bar, the Development window, the myriad of Task Panes and toolbars, and the context-sensitive menus represent 100 percent of the Expression Web development environment. The catch (yes, there s a catch) is that these five components trickle down other forms of functionality for example, the component toolbars. However, there are 17 different toolbars that you may decide to use to work with anything from page formatting using CSS to page structuring using tables. Task Panes are another example. While I mentioned that Task Panes represent core functionality within Expression Web, I have yet to mention that there are 18 Task Panes that you can utilize based on the task at hand. While I ll certainly cover the myriad of Task Panes, toolbars, and so on, as the book unfolds, this chapter is meant as a gentle introduction to the many components that make up the Expression Web development environment. This chapter should help you identify the Folder List or Tag Properties Task Pane, identify the Tools menu item, recognize the Document window, and even recognize what the Common toolbar is so that, in later chapters, when you read about opening a particular toolbar, accessing a particular menu item, or even opening a Task Pane, it will come as naturally as blinking. 4