ptg7913109 www.it-ebooks.info ptg7913109 800 East 96th Street, Indianapolis, Indiana, 46240 USA Morten Rand-Hendriksen Sams Teach Yourself 24 in Hours Microsoft ® Expression ™ Web 4 Second Edition Updated for Service Pack 2— HTML5, CSS3, jQuery www.it-ebooks.info ptg7913109 Sams Teach Yourself Microsoft® Expression™ Web 4 in 24 Hours, Second Edition Copyright © 2012 by Pearson Education, Inc. All rights reserved. No part of this book shall be reproduced, stored in a retrieval system, or transmitted by any means, electronic, mechanical, photocopying, recording, or otherwise, without written permission from the publisher. No patent liability is assumed with respect to the use of the information contained herein. Although every precaution has been taken in the preparation of this book, the publisher and author assume no responsibility for errors or omissions. Nor is any liability assumed for damages resulting from the use of the information contained herein. ISBN-13: 978-0-672-33590-7 ISBN-10: 0-672-33590-5 Library of Congress Cataloging-in-Publication Data Rand-Hendriksen, Morten. Sams teach yourself Microsoft Expression web 4 in 24 hours / Morten Rand-Hendriksen. p. cm. “Updated for Service Pack 2, HTML5, CSS3, jQuery.” ISBN 978-0-672-33590-7 1. Microsoft Expression Web. 2. Web site development. 3. Web sites—Design—Computer pro- grams. 4. Web sites—Authoring programs. I. Title. TK5105.8885.M525R36 2012 006.7’8—dc23 2012003376 Printed in the United States of America First Printing April 2012 Trademarks All terms mentioned in this book that are known to be trademarks or service marks have been appropriately capitalized. Sams Publishing cannot attest to the accuracy of this information. Use of a term in this book should not be regarded as affecting the validity of any trademark or service mark. Warning and Disclaimer Every effort has been made to make this book as complete and as accurate as possible, but no warranty or fitness is implied. The information provided is on an “as is” basis. The author and the publisher shall have neither liability nor responsibility to any person or entity with respect to any loss or damages arising from the information contained in this book or from the use of programs accompanying it. Bulk Sales Sams Publishing offers excellent discounts on this book when ordered in quantity for bulk pur- chases or special sales. For more information, please contact U.S. Corporate and Government Sales 1-800-382-3419 corpsales@pearsontechgroup.com For sales outside of the U.S., please contact International Sales international@pearsoned.com Editor-in-Chief Greg Wiegand Executive Editor Loretta Yates Development Editor Todd Br akke Managing Editor Kristy Hart Project Editor Betsy Harris Copy Editor Bart Reed Indexer Lisa Stumpf Proofreader Kathy Ruiz Technical Editor Kathleen Anderson Publishing Coordinator Cindy Teeters Book Designer Gary Adair Senior Compositor Gloria Schurick www.it-ebooks.info ptg7913109 Contents at a Glance Introduction xiii HOUR 1 Getting to Know Microsoft Expression Web 4 Service Pack 2 1 2 Beginning at the End: A Walkthrough of the Finished Project 23 3 A Website Is Really Just Text: Build One in 5 Minutes 39 4 Building a Home Page: A Look Behind the Curtain 53 5 Getting Connected with (Hyper)Links: The Cornerstone of the World Wide Web 65 6 Getting Visual, Part 1: Adding Images and Graphics 81 7 Getting Visual, Part 2: Advanced Image Editing, Thumbnails, and Hotspots 95 8 Cracking the Code: Working in Code View 109 9 Getting Boxed In, Part 1: Using Tables for Tabular Content 127 10 Bringing Style to Substance with Cascading Style Sheets 143 11 Getting Boxed In, Part 2: Knee Deep in CSS 163 12 Styling with Code: Fully Immersed in CSS 183 13 Getting Visual, Part 3: Images as Design Elements with CSS 203 14 Harnessing the Power of CSS Layouts 221 15 Buttons, Buttons, Buttons 243 16 Using Code Snippets 257 17 Building a Functional Menu 275 18 Dynamic Web Templates 297 19 Getting Interactive with Forms 317 20 Working with Flash and Other Embeddable Content 337 21 Beyond the Basics, Part 1: PHP in Expression Web 4 353 22 Test Twice, Publish Once: Professional Cross-Browser Testing with SuperPreview 373 23 Beyond the Basics, Part 2: Get Noticed with the New Search Engine Optimization (SEO) Checker 401 24 Publishing Your Website 411 Index 431 www.it-ebooks.info ptg7913109 Table of Contents Introduction xiii HOUR 1: Getting to Know Microsoft Expression Web 4 Service Pack 2 1 Introducing Expression Web 4 1 Getting and Installing Expression Web 4 3 Getting and Installing Service Pack 2 4 Getting Acquainted with the Workspace 5 Changing and Customizing the Workspace 13 HOUR 2: Beginning at the End: A Walkthrough of the Finished Project 23 Working with a Completed Website 24 Previewing the Site in Your Browser 27 Exploring the Website in Expression Web 4 32 Keeping Your Pages Functional 34 HOUR 3: A Website Is Really Just Text: Build One in 5 Minutes 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 Opening and Editing an Existing File Using Code View 53 Importing Styled Text from a Document 57 Advanced Tag Editing 59 HOUR 5: Getting Connected with (Hyper)Links: The Cornerstone of the World Wide Web 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 www.it-ebooks.info ptg7913109 HOUR 6: Getting Visual, Part 1: Adding Images and Graphics 81 Images on the Web: Three File Types for Three Uses 82 Importing and Inserting an Image 83 Using Picture Properties to Change the Appearance of an Image 87 HOUR 7: Getting Visual, Part 2: Advanced Image Editing, Thumbnails, and Hotspots 95 Exploring the Pictures Toolbar 96 Using the Pictures Toolbar to Add and Change an Image 98 Creating Hotspots 104 HOUR 8: Cracking the Code: Working in Code View 109 HTML5, CSS3, and the Brave New World of Web Code 110 Tools in Code View 110 Using Code View as a Learning Tool 115 HOUR 9: Getting Boxed In, Part 1: Using Tables for Tabular Content 127 One-Minute History of Tables in Web Pages 128 Creating a Table from Scratch 129 Changing the Appearance of a Table 130 HOUR 10: Bringing Style to Substance with Cascading Style Sheets 143 CSS3: The New Style of the Web 145 CSS Sans Code 145 Setting the Font Family for the Entire Document 151 CSS Tools in Expression Web 4 155 HOUR 11: Getting Boxed In, Part 2: Knee Deep in CSS 163 CSS Classes—Because Not All Content Should Be Treated Equally 164 Introducing ID—Class’s Almost Identical Twin 169 Classes Within Classes: Micromanaging the Content 173 Pseudoclasses 174 Understanding the Box Model 176 CSS3 Rounded Corners with Border Radius 178 Contents v www.it-ebooks.info ptg7913109 vi Sams Teach Yourself Microsoft Expression Web 4 in 24 Hours HOUR 12: Styling with Code: Fully Immersed in CSS 183 Introducing CSS: The Code Version 184 Applying Classes to Tags in Code View 189 Creating External Style Sheets 193 HOUR 13: Getting Visual, Part 3: Images as Design Elements with CSS 203 Images as Backgrounds: A Crash Course 204 Using Images as List Bullets 213 Importing Adobe Photoshop Files 215 HOUR 14: Harnessing the Power of CSS Layouts 221 Starting with Pen and Paper 222 Building the Framework from Boxed Parts 223 Styling the Layout Boxes 225 Understanding Positioning 229 Applying the Framework to Existing Pages 232 Applying the New Framework to the Page 234 HOUR 15: Buttons, Buttons, Buttons 243 Buttons: A Brief Definition 244 Creating Buttons from Scratch Using CSS 244 HOUR 16: Using Code Snippets 257 Snippets: An Introduction 258 The Default Snippets 261 Using the jQuery UI Widgets Snippets 266 Creating and Editing Snippets 270 HOUR 17: Building a Functional Menu 275 Making the Basic Vertical Menu Exciting 276 The Horizontal Menu—Laying a List on Its Side 279 Pure CSS Drop-Down Menus: A Clean Alternative 281 www.it-ebooks.info ptg7913109 Contents vii HOUR 18: Dynamic Web Templates 297 Dynamic Web Templates 298 Understanding Dynamic Web Templates 306 HOUR 19: Getting Interactive with Forms 317 Creating Forms in Expression Web 4 318 Making Use of Form Results 325 Other Uses for Form Results 331 Forms in Code View 331 HOUR 20: Working with Flash and Other Embeddable Content 337 Flash: An Introduction 338 Adding the <embed> Tag for Full Cross-Browser Compatibility 344 Embedding YouTube and Other HTML5 Content 345 Bonus: Making the Flash Gallery Your Own 348 HOUR 21: Beyond the Basics, Part 1: PHP in Expression Web 4 353 PHP: An Introduction 354 Installing PHP on Your Computer to Test PHP Scripts 355 Creating an Email Form Using PHP 360 HOUR 22: Test Twice, Publish Once: Professional Cross-Browser Testing with SuperPreview 373 Snapshot: Instant Browser Previews Inside Expression Web 4 375 Using SuperPreview for Cross-Browser Testing 378 The Tools of SuperPreview 380 Setting Up and Using SuperPreview Online Service 387 SuperPreview Online Service Options 389 Identifying, Diagnosing, and Solving Cross-Browser Issues with SuperPreview 390 Solving IE6 Problems by Telling Visitors to Upgrade Their Browsers 395 www.it-ebooks.info ptg7913109 viii Sams Teach Yourself Microsoft Expression Web 4 in 24 Hours HOUR 23: Beyond the Basics, Part 2: Get Noticed with the New Search Engine Optimization (SEO) Checker 401 What Is a Search Engine, Anyway? 402 Search Engine Optimization in Expression Web 4 403 HOUR 24: Publishing Your Website 411 A Word on Domains and Web Hosting 412 Six Different Publishing Options 413 Example: Publishing Content Using SFTP 420 Publishing Open Files Without the Publishing Panel 423 Advanced Publishing Settings 425 Index 431 www.it-ebooks.info ptg7913109 About the Author Morten Rand-Hendriksen is the owner and creative director of Pink & Yellow Media, a boutique-style design company providing digital media consulting and creations for indi- viduals, businesses, and broadcast television. He was awarded the Microsoft MVP (Most Valuable Professional) Award for his work with Microsoft Expression in 2008, 2009, 2010 and 2011. In addition to Microsoft Expression Web, Morten is considered an expert on the publishing platform WordPress and he has published numerous articles and videos and done public speaking engagements on both topics. Sams Teach Yourself Microsoft Expression Web 4 in 24 Hours is Morten’s fourth published book. He is a regular contributor to the official Microsoft Expression newsletter and has been pub- lished in international design magazines. You can find more tutorials, articles, and other design-related musings on Morten’s blog at www.designisphilosophy.com, and you can fol- low his rants on Twitter under the name @mor10. Also, you might run into him in different forums and newsgroups throughout the Web, usually using the same handle. If you have any questions relating to this book, contact Morten through the website dedicat- ed to this book, which can be found at http://expression.pinkandyellow.com. www.it-ebooks.info [...]... full advantage of all the features in Expression Web 4, you need to install SP2 After installing Expression Web 4 itself, go to the Web 4 Service Packs and AddIns page on the Microsoft Expression website (http://www.microsoft.com /expression/ service-packs /Web. aspx) and find and click the Download Web 4 SP2 button This takes you to the Microsoft Expression Web 4 Service Pack 2 (SP2) page in the Microsoft... understanding, and creating websites that look and behave the same across all browsers and platforms is lowered to a level anyone can manage This book is the fourth revision of my first book, Sams Teach Yourself Microsoft Expression Web 2 in 24 Hours Well, actually, it’s an update of rather than a revision of the third edition, Sams Teach Yourself Microsoft Expression Web 4 in 24 Hours This new edition covers the... standards-based website does not have to be boring or ordinary, just built properly If you want more information on web standards, a good place to start is the W3C website: www.w3.org www.it-ebooks.info Getting and Installing Expression Web 4 3 Getting and Installing Expression Web 4 Expression Web 4 was launched in June 2010, and it is available through most software retailers or through the Microsoft Expression. .. most software retailers or through the Microsoft Expression website (www.microsoft.com/ expression) The application comes bundled in the Expression Studio 4 Ultimate and Expression Studio 4 Web Professional packages If you are a web developer and you are not going to dive into Silverlight and Windows 8 HTML5 applications, the Expression Studio 4 Web Professional package is the right option for you If you... finish the last hour and the site is complete, you will have both www.it-ebooks.info xiv Sams Teach Yourself Microsoft Expression Web 4 in 24 Hours the tools and know-how to build your own websites using Hypertext Markup Language (HTML), Cascading Style Sheets (CSS), and the many other functions that Expression Web 4 offers You will also have a basic understanding of how the application deals with more... is complete, open Expression Web 4, click the Help option on the far right of the main menu, and select About Microsoft Expression Web from the drop-down menu This opens the application dialog for Expression Web 4, which shows among other things the version number and licensing information If SP2 was installed correctly, the first line should read “Microsoft Expression Web Version 4. 0.1303.0 SP2,” as... design will look like on the Web Expression Web 4 is a new link in a long chain of web- authoring tools What makes it unique is that it gives the user the ability to create 100% standards-based sites even without knowing what the term standards based means Expression Web 4 is, in many ways, a shortcut that opens the world of standards-based code, previously accessible only to the web developer elite, to... recursive) In short, Expression Web 4 is a complete package for creating and publishing websites whether on a local computer, a network, or the Web By the Way The terms standards based and web standards refer to the formal standards and technical specifications set out by the World Wide Web Consortium (W3C) to describe how the World Wide Web works If you follow these standards, your web page should look... the crew of Expression Web MVP Award recipients over the years: Kathleen Anderson Steve Easton Tina Clarke Chris Leeds Ron Symonds Ian Haynes Yoshie Kohama Patricia Geary Minal Agarwal Cheryl D Wise …and a special thank you to Steven Guttman—the man who made it all possible Acknowledgments On the shelf next to me sit three volumes of my Sams Teach Yourself Microsoft Expression Web in 24 Hours series:... dedicate this volume to my fellow Expression Web MVPs I did so for a reason Were it not for this eclectic group of people of which I am honored to be counted as a member, the Expression Web you see before you today would not have been the same The Expression Web team at Microsoft lead by Steven Guttman made an early decision to involve the community through the Expression Web MVPs at every level of the . Street, Indianapolis, Indiana, 46 240 USA Morten Rand-Hendriksen Sams Teach Yourself 24 in Hours Microsoft ® Expression ™ Web 4 Second Edition Updated for Service. CSS3, jQuery www.it-ebooks.info ptg7913109 Sams Teach Yourself Microsoft® Expression Web 4 in 24 Hours, Second Edition Copyright © 2012 by Pearson Education,