Sams Teach Yourself Microsoft Expression Web 3 in 24 Hours, Portable Documents: (Sams Teach Yourself)

In just 24 sessions of one hour or less, you’ll learn how to build flexible, easy-to-maintain, standards-based websites with Microsoft Expression Web 3. Using this book’s straightforward, step-by-step approach, you’ll master the entire process, from concept through delivery. You’ll learn powerful ways to plan, design, construct, and even redesign websites that are simple to manage and easy to repurpose. Each lesson builds on what you’ve already learned, giving you a strong real-world foundation for success, no matter what kind of site you’re building! Step-by-step instructions carefully walk you through the most common Expression Web 3 tasks. Quizzes and Exercises at the end of each chapter help you test your knowledge. By the Way notes present interesting information related to the discussion. Did You Know? tips offer advice or show you easier ways to perform tasks. Watch Out! cautions alert you to possible problems and give you advice on how to avoid them Learn how to… Build your first Expression Web 3 website in just five minutes Establish work processes for building standards-based sites faster, with far less work Write error-free code quickly and easily with Code view and IntelliSense Create hyperlinks that simplify navigation, perform actions, and send commands Understand, create, and modify CSS style sheets with unprecedented speed and accuracy Use Dynamic Web Templates to consistently format (or reformat) hundreds of pages Implement state-of-the-art interactivity with buttons, behaviors, and Cascading Style Sheets (CSS) Publish simple Silverlight applications and add multimedia content from Flash and other sources Build advanced drop-down and other CSS-based menus from scratch Learn how and when to use each of Expression Web’s six publishing options Integrate web application code written in ASP.NET or PHP

Table of Contents:
Introduction . . .1 HOUR 1: Get to Know Microsoft Expression Web 3 . . . 5 Introducing Expression Web 3 . . . 5 Getting and Installing Expression Web 3 . . . 7 Getting Acquainted with the Workspace . . . 7 The Program Bar. . . 7 The Menu Bar . . . 8 Common and Other Toolbars . . . 9 Code, Design, and Split View . . . 10 Left and Right Panels . . . 12 Status Bar . . . 14 Changing and Customizing the Workspace . . . 15 HOUR 2: Beginning at the End: A Walkthrough of the Finished Project . . . 23 Introduction . . . 23 Working with a Completed Website . . . 24 Previewing the Site in Your Browser . . . 27 Setting Up a Website and Building Pages . . . 28 Hyperlinks . . . 28 Images . . . 28 Tables . . . 28 Styling the Content . . . 29 Page Layout . . . 29 Buttons . . . 30 Behaviors . . . 30 Frames and Layers . . . 30 The Main Menu . . . 31 Contact Forms . . . 31 Flash and Silverlight Galleries . . . 32 Exploring the Website in Expression Web 3 . . . 33 Keeping Your Pages Functional . . . 35 HOUR 3: A Website Is Really Just Text: Build One in 5 Minutes . . . 39 Introduction . . . 39 Creating a New Website . . . 39 Creating Your First Web Page . . . 42 Testing Your Web Page in Multiple Browsers . . . 47 SuperPreview: A Sneak Preview . . . 49 HOUR 4: Building a Home Page: A Look Behind the Curtain . . . 53 Introduction . . . Opening and Editing an Existing File Using Code View . . . 53 Importing Styled Text from a Document . . . 57 Cleaning Up Imported Text . . . 58 HOUR 5: Getting Connected with (Hyper)Links: The Cornerstone of the World Wide Web . . . 65 Introduction . . . 65 Import a New Page and Create an Internal Hyperlink . . . 66 Creating External Links and New Windows . . . 72 Creating Internal Links Within Documents Using Bookmarks . . . 74 Creating an Email Hyperlink . . . 76 HOUR 6: Getting Visual, Part 1: Adding Images and Graphics . . . 81 Introduction . . . 81 Images on the Web: Three File Types for Three Uses . . . 82 Importing and Inserting an Image . . . 83 Create a New Folder and Import a New Image . . . 84 Using Picture Properties to Change the Appearance of an Image . . . 87 The General Tab . . . 87 The Appearance Tab . . . 89 HOUR 7: Getting Visual, Part 2: Advanced Image Editing, Thumbnails, and Hotspots . . . 95 Introduction . . . 95 Exploring the Pictures Toolbar . . . 96 Using the Pictures Toolbar to Add and Change an Image . . . 98 Creating Hotspots . . . 105 HOUR 8: Cracking the Code: Working in Code View . . . 111 Introduction . . . 111 Tools in Code View . . . 112 The Buttons of the Code View Toolbar and What They Do . . . 112 Common HTML Tags in the Toolbox . . . 115 Using Code View as a Learning Tool . . . 116 Dissecting Hyperlinks in Code View. . . 116 Images in Code View. . . 119 Unordered and Ordered Lists in Code View . . . 120 HOUR 9: Getting Boxed In, Part 1: Using Tables for Tabular Content . . . 127 Introduction . . . 127 One-Minute History of Tables in Web Pages . . . 128 Creating a Table from Scratch . . . 129 Changing the Appearance of a Table . . . 130 Creating Table Headings . . . 130 Changing the Vertical Alignment of Cell Content . . . 131 Adding Rows and Columns to the Table . . . 132 Merging and Splitting Cells . . . 132 Deleting Cells, Rows, and Columns from the Table . . . 133 Changing Row and Column Sizes . . . 133 Using Table Properties to Change the Appearance of Your Table . . . 134 Using Cell Properties to Change the Appearance of Your Cells . . . 136 Using AutoFormat to Quickly Change the Look of Your Tables . . . 138 Using the Table Layout Tool to Make Nonstandard Tables . . . 139 HOUR 10: Bringing Style to Substance with Cascading Style Sheets . . . 145 Introduction . . . CSS Sans Code . . . 147 Creating Styles with a Click of Your Mouse . . . 147 Creating Inline Styles . . . 150 Styling Small Selections . . . 151 Setting the Font Family for the Entire Document . . . 152 Styling Links (a.k.a. Getting Rid of the Blue Underline). . . 153 CSS Tools in Expression Web 3 . . . 156 The Quick Tag Tools . . . 156 The CSS Properties Panel . . . 158 The Apply Styles Panel . . . 159 The Manage Styles Panel . . . 159 Using Various CSS Tools to Apply and Change Styles . . . 160 HOUR 11: Getting Boxed In, Part 2: Knee Deep in CSS . . . 165 Introduction . . . 165 CSS Classes–Because Not All Content Should Be Treated Equally . . . 166 Create a Class and Apply It to the Content . . . 166 Using CSS Classes to Center an Image . . . 167 Using Boxes to Separate Content . . . 168 Creating a Div and Placing It Around Content . . . 169 Introducing ID–Class’s Almost Identical Twin . . . 171 Creating a Sidebar Using an ID . . . 171 Using an ID to Center the Page . . . 172 Creating Custom Styles Within IDs and Classes . . . 174 Classes Within Classes: Micromanaging the Content . . . 175 Using Classes to Control IDs . . . 176 Pseudoclasses . . . 176 Use Pseudoclasses to Style Links . . . 177 Understanding the Box Model . . . 178 HOUR 12: Styling with Code: Fully Immersed in CSS . . . 183 Introduction . . . 183 Introducing CSS: The Code Version . . . 184 The Value of Separation . . . 186 Understanding Inline Styles . . . 187 Applying Classes to Tags in Code View . . . 189 Using Divs and Spans to Separate Content . . . 190 Rename Styles and Apply the Change to All Tags in a Page . . . 191 Creating Divs in Code View . . . 192 Creating External Style Sheets . . . 193 Moving Styles to and from the External Style Sheet . . . 196 Applying External Styles to a Page . . . 198 HOUR 13: Getting Visual, Part 3: Images as Design Elements with CSS . . . 203 Introduction . . . 203 Images as Backgrounds: A Crash Course . . . 204 Use an Image as a Background with CSS . . . 204 The Background Attributes . . . 205 How Backgrounds Relate to the Content and the Page . . . 207 Applying a Background Image to an ID . . . 208 Background Images and the Box Model . . . 210 Stacking Order Means You Can Pile Your Images . . . 212 Using Images as List Bullets . . . 213 Importing Adobe Photoshop Files . . . 215 HOUR 14: Harnessing the Power of CSS Layouts . . . 221 Introduction . . . 221 Starting with Pen and Paper . . . 222 Build the Framework from Boxed Parts . . . 223 Employing CSS Reset . . . 224 Updating the ID Names . . . 225 Styling the Layout Boxes . . . 226 Understanding Positioning . . . 229 position: absolute; . . . 229 position: fixed; . . . 230 position: relative; . . . 231 position: static; . . . 232 position: inherit . . . 232 Applying the Framework to Existing Pages . . . 232 Apply the New Framework to the Page . . . 234 Adding a Header Image and a Menu . . . 236 HOUR 15: Buttons, Buttons, Buttons . . . 243 Introduction . . . 243 Buttons: A Brief Definition . . . 244 Creating Interactive Buttons Using Expression Web 3 . . . 244 Make an Interactive Button . . . 244 Saving and Editing Interactive Buttons . . . 247 Creating Buttons from Scratch Using CSS . . . 248 Creating a Basic Box Button . . . 248 Creating an Advanced Box Button with Images . . . 250 Create Text-Free Buttons with Sliding Doors . . . 253 HOUR 16: Using Behaviors . . . 259 Introduction . . . 259 Behaviors: An Introduction . . . 259 Creating a Swap-Image Behavior . . . 260 Modifying Behaviors . . . 262 The Many Behaviors of Expression Web 3 . . . 264 Call Script . . . 265 Change Property . . . 265 Change Property Restore . . . 268 Check Browser. . . 268 Check Plug-In . . . 270 Go to URL . . . 272 Jump Menu . . . 272 Jump Menu Go . . . 274 Open Browser Window . . . 275 Play Sound . . . 277 Popup Message . . . 277 Preload Images . . . 278 Set Text . . . 279 HOUR 17: Frames and Layers . . . 283 Introduction . . . 283 Frames: An Introduction . . . 284 Editing Individual Frames . . . 287 Making Framed Navigation . . . 291 Creating and Modifying Inline Frames . . . 292 Set Text of Frame Behavior . . . 295 Creating Advanced Functionality Using Layers . . . 297 Creating a Layer . . . 298 Set Text of Layer Behavior. . . 302 HOUR 18: Building a Functional Menu . . . 307 Introduction . . . 307 Making the Basic Vertical Menu Exciting . . . 308 The Horizontal Menu–Laying a List on Its Side . . . 311 Pure CSS Drop-Down Menus: A Clean Alternative . . . 312 Step 1: Make a Menu List . . . 313 Step 2: Styling the Main Menu . . . 314 Step 3: Making the Drop-Down Menus Drop Down . . . 319 Styling the Submenus to Make Them Stand Out . . . 321 HOUR 19: Dynamic Web Templates . . . 327 Introduction . . . 327 Dynamic Web Templates . . . 328 How Dynamic Web Templates Work . . . 332 Understanding Dynamic Web Templates . . . 336 Editable Regions Outside the Body . . . 340 Editing Content Outside the Editable Regions in Individual Pages . . . 343 HOUR 20: Getting Interactive with Forms . . . 347 Introduction . . . 347 Creating Forms in Expression Web 3 . . . 348 Making Use of Form Results . . . 355 Other Uses for Form Results . . . 360 Forms in Code View . . . 361 HOUR 21: Working with Flash and Silverlight . . . 365 Introduction . . . 365 Flash: An Introduction . . . 366 Adding the Tag for Full Cross-Browser Compatibility . . . 371 Silverlight: An Introduction . . . 372 Placing Silverlight Applications in Your Page . . . 373 Bonus: Making the Galleries Your Own . . . 378 HOUR 22: Beyond the Basics, Part 1: PHP in Expression Web 3 . . .383 Introduction . . . 383 PHP: An Introduction . . . 384 Installing PHP on Your Computer to Test PHP Scripts . . . 385 Using PHP and HTML to Create a Contact Page . . . 388 Creating an Email Form Using PHP . . . 390 Added Functionality . . . 397 HOUR 23: Test Twice, Publish Once: Introducing SuperPreview . . . 403 Introduction . . . 403 Snapshot–Instant Browser Previews Inside Expression Web 3 . . . 404 Snapshot Functionality . . . 405 Using SuperPreview for Cross-Browser Testing . . . 407 The Tools of SuperPreview. . . 409 The Preview Panel(s) . . . 413 The DOM Tree View . . . 414 Identify, Diagnose, and Solve Cross-Browser Issues with SuperPreview . . . 415 Troubleshooting and Fixing the Sidebar in Internet Explorer 7 . . . 418 Solve IE6 Problems by Telling Visitors to Upgrade Their Browsers . . . 419 HOUR 24: Publishing Your Website . . . 427 Introduction . . . 427 A Word on Domains and Web Hosting . . . 428 The All-Important Domain Name . . . 428 Six Different Publishing Options . . . 429 File Transfer Protocol (FTP) . . . 431 Secure Shell File Transfer Protocol (SFTP/SSH) . . . 432 File Transfer Protocol over Secure Sockets Layer (FTPS/SSL) . . . 433 FrontPage Server Extensions . . . 433 Web Distributed Authoring and Versioning (WebDAV) . . . 435 File System . . . 435 Example: Publishing Content Using SFTP . . . 436 Advanced Publishing Settings . . . 438 Optimizing HTML . . . 438 The Publishing Tab . . . 441 BONUS HOUR 25: Beyond the Basics, Part 2: Building a Site with ASP.NET . . . 445 Introduction . . . 445 Getting a Jump Start by Using a Starter Kit . . . 446 The ASP.NET Master Page . . . 448 The Master Page in Code View . . . 450 ASP.NET Content Pages . . . 453 Content Pages in Code View . . . 453 Getting Data from External Sources . . . 455 Personalizing and Styling an ASP.NET Site . . . 459 APPENDIX A: Building Layers-Based Menus . . . 465 Introduction . . . 465 The Layers-Based Menu . . . 465 Creating the Main Menu . . . 465 Create a Submenu . . . 466 Adding and Managing Several Drop-Down Menus . . . 471 Basing Drop-Down Menus on Layers and Behaviors Is a Double-Edged Sword . . . 473 Index . . . 475

About the Author :
Morten Rand-Hendriksen is a web designer, developer, programmer, and digital media expert based in Burnaby, B.C., Canada. For his work with Expression Web, he has been honored with Microsoft’s Most Valuable Professional Award. He contributes regularly to the official Microsoft Expression newsletter, has been published in international design magazines, and blogs on Expression Web at designisphilosophy.com.