Foundations of Microsoft Expression Web: The Basics and Beyond [1 ed.] 1590598059, 9781590598054

Citation preview

THE EXPERT’S VOICE ® IN WEB DEVELOPMENT

Foundations of Microsoft

Expression Web The Basics and Beyond Create standards-compliant CSS and HTML web sites with Microsoft Expression Web

Cheryl D. Wise

Foundations of Microsoft Expression Web The Basics and Beyond

Cheryl D. Wise

Foundations of Microsoft Expression Web: The Basics and Beyond Copyright © 2007 by Cheryl D. Wise All rights reserved. No part of this work may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording, or by any information storage or retrieval system, without the prior written permission of the copyright owner and the publisher. ISBN-13 (pbk): 978-1-59059-805-4 ISBN-10 (pbk): 1-59059-805-9 Printed and bound in the United States of America 9 8 7 6 5 4 3 2 1 Trademarked names may appear in this book. Rather than use a trademark symbol with every occurrence of a trademarked name, we use the names only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark. Lead Editors: Chris Mills, Matthew Moodie Technical Reviewer: Kathleen Anderson Editorial Board: Steve Anglin, Ewan Buckingham, Gary Cornell, Jason Gilmore, Jonathan Gennick, Jonathan Hassell, James Huddleston, Chris Mills, Matthew Moodie, Jeff Pepper, Paul Sarknas, Dominic Shakeshaft, Jim Sumser, Matt Wade Project Manager: Beth Christmas Copy Edit Manager: Nicole Flores Copy Editors: Heather Lang, Kim Wimpsett Assistant Production Director: Kari Brooks-Copony Production Editor: Katie Stence Compositor: Molly Sharp Proofreaders: Lori Bring, Linda Seifert Indexer: Toma Mulligan Artist: April Milne Cover Designer: Kurt Krames Manufacturing Director: Tom Debolski Distributed to the book trade worldwide by Springer-Verlag New York, Inc., 233 Spring Street, 6th Floor, New York, NY 10013. Phone 1-800-SPRINGER, fax 201-348-4505, e-mail [email protected], or visit http://www.springeronline.com. For information on translations, please contact Apress directly at 2560 Ninth Street, Suite 219, Berkeley, CA 94710. Phone 510-549-5930, fax 510-549-5939, e-mail [email protected], or visit http://www.apress.com. The information in this book is distributed on an “as is” basis, without warranty. Although every precaution has been taken in the preparation of this work, neither the author(s) nor Apress shall have any liability to any person or entity with respect to any loss or damage caused or alleged to be caused directly or indirectly by the information contained in this work. The source code for this book is available to readers at http://www.apress.com in the Source Code/Download section. You will need to answer questions pertaining to this book in order to successfully download the code.

This book is dedicated to my husband Steve and our two children, who were supportive even when writing this book interfered with our family life.

Contents at a Glance About the Author . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiii About the Technical Reviewer. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xv Acknowledgments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvii Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xix

■CHAPTER 1 ■CHAPTER 2 ■CHAPTER 3 ■CHAPTER 4 ■CHAPTER 5 ■CHAPTER 6 ■CHAPTER 7 ■CHAPTER 8 ■CHAPTER 9 ■CHAPTER 10 ■CHAPTER 11 ■CHAPTER 12 ■CHAPTER 13 ■APPENDIX

Before You Begin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 Taking Your First Steps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 Starting Off Right: Configuring Expression Web . . . . . . . . . . . . . . . . . 47 Using Semantic, Structured HTML to Create Web Pages . . . . . . . . . 83 Essential CSS: What You Need to Know . . . . . . . . . . . . . . . . . . . . . . . . 107 Using Expression Web to Create Basic CSS . . . . . . . . . . . . . . . . . . . . 147 CSS Positioning Using Expression Web Style Tools . . . . . . . . . . . . . 171 Branding Your Website . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207 Dynamic Web Templates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233 Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257 Legal and Usability Issues . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287 Master Pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297 Beyond the Basics in CSS and Scripting . . . . . . . . . . . . . . . . . . . . . . . 313 Extending Expression Web with Add-Ons . . . . . . . . . . . . . . . . . . . . . . 347

■INDEX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 355

v

Contents About the Author . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiii About the Technical Reviewer. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xv Acknowledgments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvii Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xix

■CHAPTER 1

Before You Begin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 Why Are You Creating a Website? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 Typical Website Objectives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 Personal Sites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 Business Sites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 Attracting the Site Visitors You Want. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 Picture Your Target Visitor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 Content Equals Credibility . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 Keep Your List Simple . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 Points to Ponder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 Choosing a Domain Name . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 Personal Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 Business Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 Web Hosting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 Hosting Using a Subdomain Name . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 Commercial Web Hosting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 A Word About Web Servers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 What to Look for in a Web Host . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 Simple Rules for All Websites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 Installing Expression Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 Choosing Your Install Type . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 Taking Your First Look at Expression Web . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

vii

viii

■CONTENTS

■CHAPTER 2

Taking Your First Steps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 Creating a Local Website . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 File Menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 Edit Menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39 View Menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42 Insert Menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44 Format Menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46

■CHAPTER 3

Starting Off Right: Configuring Expression Web . . . . . . . . . . 47 Using the Tools Menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47 General Tools Section . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48 Reports Section . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48 Optimize HTML Selection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49 Program Management . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50 Preferences Section . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51 Using the Site Menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78 Folders . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78 Remote Web Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79 Reports . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79 Hyperlinks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79 Recalculate Hyperlinks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79 Site Settings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81

■CHAPTER 4

Using Semantic, Structured HTML to Create Web Pages . . . 83 Required Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83 Structuring Your Web Page. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84 Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88 Tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91 Other HTML Elements from the Drop-Down List . . . . . . . . . . . . . . . . 96 Hyperlinks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97 The Importance of Hidden Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106

■CONTENTS

■CHAPTER 5

Essential CSS: What You Need to Know

. . . . . . . . . . . . . . . . . . 107

What Is CSS? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107 Why Use Stylesheets? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108 Types of Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111 C for Cascade . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113 Class and ID . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120 and . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121 Setting Properties and Values . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122 Page Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122 Margin and Padding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123 Color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126 Background Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129 Hyperlinks and Pseudo-Classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132 Applying a Declaration to a Group of Selectors . . . . . . . . . . . . . . . . 135 Fonts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139 Box Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139 Changing the Document Flow with CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . 139 Floats . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139 Position Absolute . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140 Position Relative . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145

■CHAPTER 6

Using Expression Web to Create Basic CSS . . . . . . . . . . . . . . 147 Creating New Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147 Using the Block Category . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151 Setting the Background . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154 Creating a Border . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158 Creating a Box . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163 Creating Tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170

■CHAPTER 7

CSS Positioning Using Expression Web Style Tools . . . . . . 171 Creating the Initial Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172 Working with the Positioning Category . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174 Working with the Layout Category . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184 Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192 Building a Page Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206

ix

x

■CONTENTS

■CHAPTER 8

Branding Your Website

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207

Choosing a Color Scheme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207 Complementary Color Schemes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208 Analogous Color Schemes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208 Monochromatic Color Schemes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208 Choosing Images for Your Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208 Graphics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209 Photos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209 Stock Photos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209 Image Formats . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209 Adding Images to Your Web Pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210 Establishing Your Look and Feel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217 Maintaining Your Branding Throughout Your Site . . . . . . . . . . . . . . . 230 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231

■CHAPTER 9

Dynamic Web Templates

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233

DWT Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233 What Does a DWT Do? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233 Creating the DWT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234 Adding Editable Regions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236 Editable Regions in the Section . . . . . . . . . . . . . . . . . . . . . . 238 Attaching DWTs to Your Web Pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241 Attaching a DWT to an Existing Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245 Preparing an Existing Page for a DWT . . . . . . . . . . . . . . . . . . . . . . . . 245 Applying a DWT to a Page with Content . . . . . . . . . . . . . . . . . . . . . . . . . . . 247 Moving Content Between Editable Regions . . . . . . . . . . . . . . . . . . . . 249 After the Template Has Been Applied . . . . . . . . . . . . . . . . . . . . . . . . . 250 Editing a DWT. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251 Detaching a Page from a DWT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252 Changing the Attached DWT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255

■CHAPTER 10 Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257 Required Elements for a Form. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257 Processing Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270 Setting Form Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270 ASP Send with CDO . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273 PHP Send Mail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274 ASP.NET 2.0 Form Controls . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 286

■CONTENTS

■CHAPTER 11 Legal and Usability Issues . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287 Legal Issues . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287 Accessibility . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 288 Copyright . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 290 Privacy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291 Licensing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 292 Usability . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 292 Usability Testing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 293 Where Can You Find Testers? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 293 Using Expression Reports . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 293 Hyperlink Reports . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 293 Site Reports . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 295 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 296

■CHAPTER 12 Master Pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297 Creating a Master Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 298 Nesting Master Pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 308 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 312

■CHAPTER 13 Beyond the Basics in CSS and Scripting . . . . . . . . . . . . . . . . . 313 Alternative Stylesheet Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 313 Applying Different Media Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314 Print Stylesheets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 316 Validating your Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 320 ASP.NET Form Validation Controls . . . . . . . . . . . . . . . . . . . . . . . . . . . . 320 ASP.NET Validation Controls Tag Properties. . . . . . . . . . . . . . . . . . . . 321 HTML Forms Validation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 335 Password Protecting a Folder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 337 Creating a web.config File . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 337 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 344

■APPENDIX

Extending Expression Web with Add-Ons . . . . . . . . . . . . . . . . 347 Adding PayPal Buttons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 347 Adding Form Tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 349 Keyboard Shortcuts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 350

■INDEX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 355

xi

About the Author ■CHERYL D. WISE, founder and director of WiserWays, LLC, has been creating websites since 1994. A member of the Guild of Accessible Web Designers and a World Organization of Webmasters Certified Professional Web Developer, Cheryl first received the Most Valuable Professional (MVP) award from Microsoft for FrontPage in 2003 and received the award every year until 2007. In 2007, Cheryl’s MVP award competency from Microsoft was changed from FrontPage to Expression Web. She teaches others to create standards compliant–accessible websites at Start to Web (http://starttoweb.com) and has been doing other online training since 2004. She is also the author of Introduction to Web Design with FrontPage 2003 (WiserWays: Houston, 2005) and is the owner of one of the best Expression Web resource sites on the Web—http://by-expression.com. You can contact her there.

xiii

About the Technical Reviewer

■KATHLEEN ANDERSON is a Microsoft MVP for FrontPage. She was the first woman to be honored with the FrontPage MVP award and is very happy that she is no longer the only one. Kathleen has been using FrontPage for ten years and is known as the “FrontPage Database Wizard Queen” by her fellow FrontPage MVPs. She chairs the State of Connecticut’s Committee on Web Site Accessibility. She loves to teach people how to make accessible web sites with FrontPage and is looking forward to doing the same with Expression Web.

xv

Acknowledgments I

’d like to acknowledge Tina Clarke, a fellow Microsoft FrontPage MVP and prolific e-book writer who encouraged me to write this book and nagged me to complete it. Tina’s support and constructive criticism helped make this book possible. Thanks also go to Pat Geary, Echo Swinford, and Sue Forrester for their encouragement and feedback; and to my editors at Apress, who were patient when my workflow didn’t match their standard editorial process.

xvii

d8b3179c1f3a5539ae0a590d20d3a408

Introduction T

his book is about more than just Microsoft Expression Web. For most people, a web editor is a means to an end—that end being a website that establishes a web presence. My goal in writing this book is for you to be able to use Expression Web to do more than just establish a presence: my hope is that you will be able to use Expression Web to create a website that fulfills the site owner’s goals. The days of being able to create a website that only works in one dominant web browser or on Windows-based computers are gone. Today, a website must look good and function properly in a variety of web browsers running on Windows and Macs. In addition, many people are using other devices such as game consoles, PDAs, and cell phones to access the Internet. Your website must function in each of these. This is what the term “cross browser” means. Web standards are what make it possible for your cross-browser website to work on the wide variety of devices and browsers out there.

What Is Expression Web? Expression Web is a new web editor from Microsoft built with web standards and cross-browser output as its primary focuses. Unlike older web editors, Expression Web was not compelled to work around the limitations of earlier versions with proprietary browser output and bloated code. Instead, Microsoft has created a modern web editor that meets the needs of today’s Web. Web 2.0 sites are frequently updated and standards compliant, and employ user-friendly interfaces that provide a clear, well-organized, and visually appealing site. Expression Web was designed to create standards-complaint websites out of the box, while at the same time providing tools to help effectively manage the look and feel of your website. Cascading Style Sheets (CSS), Dynamic Web Templates (DWT), and ASP.NET Master Pages are the foundation for creating and managing your website in Expression Web. Expression Web assists you in creating standards-complaint sites by writing the code to the specification of your choice, but it will not rewrite your code if you choose to use browser-specific code.

Why This Book? Many people whether they are new to creating websites or started creating them in the 1990s lack a foundation in web standards and CSS. Since Expression Web is focused on web standards and creating cross-browser websites, you must understand the basics of structured HTML and CSS to use its full potential. The early chapters of this book aim to give you the foundation you need to understand and use the tools in Expression Web to create and apply CSS. Learning how to use a web editor without understanding how websites work will leave you with a less-than-satisfying website. In this book, I explain not just the how to use features in Expression Web but why you should or should not use some of those features. Along the way, topics such as accessibility and usability will be introduced and explored.

xix

xx

■INTRODUCTION

Once you have that foundation, the book moves on to more advanced topics of creating robust page layouts that work in a variety of web browsers, handling legacy browser issues, and creating contact forms By the time you reach the end of the book, validating your forms and sending the results by e-mail, creating print stylesheets, and password protecting a section of your site will all be within your capabilities.

What Is Not in This Book? This book is not a manual. To cover every possible thing you can do with Expression Web would require a much longer book than this one. When you find a feature in Expression Web in this book, it will be for a real-world purpose.

Who Is This Book For? This book is for the web designer, not for the web developer. While this book does contain sample form–to–e-mail scripts in three server-side languages and simple form field validation and password protection scripts, this book does not go in-depth on the ASP.NET controls in the Toolbox. Instead, this book focuses on the design and maintenance of websites. Microsoft Expression Web is a tool that will make some aspects of creating a website easier—it is not a substitute for understanding how websites work. With this book, you will learn both the tools and the fundamentals of creating websites.

How Is This Book Structured? The best way to learn to create a website using any program is to actually use it, which is why each chapter includes exercises designed to reinforce the topics it explains. I recommend working through each of these exercises for hands-on experience. Working examples of the completed exercises can be viewed at http://foundationsofexpressionweb.com, and the complete source code can also be obtained from http://www.apress.com/ in the Source Code/Download section. Sidebars will provide you with explanations of concepts and best practice tips for creating your website.

Where Can I Find More Information? Expression Web is a new program; as a result, features and bugs are still being discovered. If you have questions about something you find or don’t find in the program, there are a few places I recommend checking: my site http://by-expression.com and the Microsoft Public Newsgroup/Forum (news://msnews.microsoft.com/microsoft.public.expression.webdesigner in Outlook Express or Windows Mail). Since URLs may change, a list of links to other places on the Web with Expression Web resources will be maintained at http://foundationsofexpressionweb.com/links.

CHAPTER

1

Before You Begin A

s great as the temptation is to jump right in and start creating your website, you should do a few things first, in order to make sure the site you create is effective. Web standards are important, but planning is even more important to the success of your website. If you do not have a clear vision of your site goals or know which of the many goals you have are most important, how can you expect your visitors to understand and share in your vision and enthusiasm? In this chapter, we will determine your site needs and follow through with site planning, which will make creating and maintaining your site easier. You will also install Expression Web and become familiar with its interface.

Why Are You Creating a Website? Every website has a purpose. It must fulfill a need, whether that need is to sell a product, promote your business, provide support for a product, interact with or create a community of people with a shared interest or passion, or simply express yourself—to share your views, art, and so forth. While many people think of a website as a design or a set of features, that is approaching your site from the wrong direction. Start with what you want your site to achieve instead of with a set of features you think you want. You may have watched home-improvement shows like Mission: Organization or Clean Sweep. You look at the “before” picture and think, “How could that mess have happened?” It could easily happen to your website. In your excitement to get your website up, it’s tempting to just begin. Don’t do it—starting to create a site without proper preparation can prove to be a big mistake when your site grows out of control with no clear purpose. Take time to jot down your thoughts about each of the topics in this section.

■Note Start by setting out your vision: what do you or your clients want the site to accomplish?

In addition to determining the purpose of your site, you need to know who your website’s target audience is. A website for gamers will need a very different look and feel than a website

1

2

CHAPTER 1 ■ BEFORE YOU BEGIN

selling home childproofing devices and safety seats. Site content goes hand in glove with the purpose of your site and your target audience. Without content, you will not attract visitors or keep them on your site long enough to fulfill your site goals. Unlike in the movie Field of Dreams, just because you build it doesn’t mean “they will come.” Consider the quantity and type of content you have or can develop when planning your website. If this is a new website, a domain name and web hosting will need to be obtained (more on this later in the chapter). If the website already exists, you should evaluate your existing site to determine if it is achieving your site goals. We will begin with the typical reasons for creating a website.

Typical Website Objectives While there is frequently some overlap, websites are basically divided into two general categories: personal or business.

Personal Sites Personal sites are often made for one of the following uses: • For fun: To share your personal thoughts with the world at large, consider a blog instead of a traditional website. You can use Expression Web to personalize and make even a standard blog application reflect who you are. • For keeping in touch with family and friends: Examples are a site for planning family reunions or for sharing photos and video clips. • For sharing a hobby or interest with fellow enthusiasts: This may have elements of a community site or be more like a personal blog site. • As a neighborhood or group site: Creating this type of website is typically a volunteer position when you are part of an organization such as a garden club, scouts, neighborhood association, or other non-profit group.

Business Sites Most sites on the Web have at least some business component. The most common types of business sites follow: • An e-commerce site: To sell a product online, usually through the aid of a databasedriven shopping cart. An e-commerce site can also be a static site with payment buttons for PayPal, Google Checkout, or some other payment gateway. • An information site: To provide product or company information, including frequently asked questions, shipping terms, privacy policies, and other information that would be of interest to customers, with perhaps a secondary goal of selling products. You can save money on support costs when manuals, product specification, and other materials are available to your customers online.

CHAPTER 1 ■ BEFORE YOU BEGIN

• A brochure website: To follow up offline marketing such as television, radio, and telephone advertising where either cost or space does not allow all the information to be in the offline marketing. • Find new customers: To expand your customer base into new markets. This can be especially important when your products are specialized ones that attract a small number of enthusiasts. It’s common to have more than one objective on a business site. A short list follows: • Giving visitors a favorable impression of your company or organization • Developing a qualified prospect list • Selling products directly by taking credit card information over the Internet • Encouraging potential customers to phone or mail you to consummate a sale • Making product information and price lists available to distributors • Making product information and price lists available to customers • Strengthening brand identification • Creating a community of users Decide what your objectives need to be, and rank them in priority. Next, consider who your target visitor will be.

■Tip Be realistic about who will visit your site and what they will do there.

Attracting the Site Visitors You Want Before your site can achieve your goals, you must not only know what your site objectives are but also what visitors you need to attract to your site to accomplish those goals. A site with the objective of selling $900 latte machines will not succeed if it only attracts college students. No matter how much coffee the students might drink, few can afford to spend $900 for their coffee makers. Their parents are more likely to be in a position to afford the machines and would likely make purchases for themselves, not their offspring.

Picture Your Target Visitor Typically, you will have some idea of the people you want to visit your site even if it is, “I want people to come, spend lots of money, and make me wealthy enough to retire in two years.” If

3

4

CHAPTER 1 ■ BEFORE YOU BEGIN

your target is too broad, you will need to narrow it. Look at the following examples to see how you can narrow down the target for a site selling children’s clothes: • Focus on the current customers, or, if the business is new, on those who are likely to become customers. Then, combine the characteristics of those customers into two or three different “people” to represent your target market. • Be realistic about your target customers. For example, our children’s clothing site might include the following target customers: • Stay-at-home moms with too many children to take shopping simultaneously • Working mothers with no time to shop • Grandparents who want well-dressed grandchildren to show off in pictures • Decide what elements the potential visitors have in common. See if your target market is too broad or too narrow.

Content Equals Credibility No matter how great your site looks or how well you know your target audience, a site without content will not be successful. There must be well written content for your website to rank well in search engines. Even if your visitors arrive at your site as a result of offline promotion, direct links, and personal referrals, there must be content that will keep them on your site once they have found it. The nature of your content as well as your site purpose and target audience will determine the feature set you need to have on your site.

■Tip Remember the KIS principle: Keep It Simple.

When you know what content you will have, you can start to organize your site to perform the functions that visitors expect and/or need to see. Structure your website to make it easy for your visitors to find what they need. Putting your site structure on paper will help you see your site’s organization. This site map does not need to be as complicated as the one shown in Figure 1-1. Instead, a site map can be something as simple as hand written notes on categories and connections between them, as Figure 1-2 shows.

CHAPTER 1 ■ BEFORE YOU BEGIN

Figure 1-1. Site diagram with anticipated navigation paths

Figure 1-2. A hand-drawn site plan

5

6

CHAPTER 1 ■ BEFORE YOU BEGIN

Keep Your List Simple Whether you choose to set down your ideas in a computer file or on a piece of paper, your first notes should be little more than what fits on the back of an envelope. Otherwise, you may not have clarified your thoughts sufficiently. Keeping your list simple will help you crystallize your goals and keep your focus on them.

Points to Ponder People use the Web primarily as a tool or utility with some purpose in mind. Except for a few special-purpose sites such as those for movies or games, most people don’t visit a website just for entertainment. Most site visitors have something in mind before they visit a website. This means that an attractive site is not enough. Your site must be usable and must draw your visitors with content that meets their needs while at the same time serving your site goals. If this site is an adjunct to an existing business, ask you customers what they would want to find on your site. As you plan your website, remember these fundamentals: • It’s not enough to know you need a website. • You must know the purpose your website is to serve. • You must know who will use your site—your target audience. • Realize that the Web is not print and it is not television. • The site visitor is the one who has ultimate control.

Choosing a Domain Name Every website on the Internet has a numerical address called an Internet Protocol (IP) address, which is four sets of up to three numbers with each set separated by a period. For example, Apress, the publisher of this book, has its website at 65.19.150.101. Most people have difficulty remembering strings of numbers and are better at remembering names. When you register a domain name, your visitors will be able to type in http://apress.com instead of the number of the Apress site. Your web host will then resolve your domain name to the numeric address of your hosting server. This allows more than one website to be hosted on the same server and IP address.

■Tip Easy to remember is better than short when it comes to domain names.

The number one limitation of choosing a domain name is whether it’s available. You can check domain name availability at any registrar’s website. Several registrars are listed on this book’s companion website at http://foundationsofexpressionweb.com. The second limitation is that a domain name can be no longer than 255 characters. While the maximum length of a URL is not known, Internet Explorer has a maximum of 2,083 characters, which is the least

CHAPTER 1 ■ BEFORE YOU BEGIN

number of characters of any major browser, making 2,083 characters the effective maximum length. Despite the availability of long domain names and paths for internal lengths, remember that your visitor will need to type in that address. Every domain ends with a top-level domain, or TLD. See Table 1-1 for a list of common TLDs. Table 1-1. TLDs

Types of TLDs available Original Unrestricted TLDs

com

net

org

country code *

Original Restricted TLDS

edu

gov

mil

int

Unrestricted TLDS added in 2001

biz

info

name

Restricted TLDs added in 2001

pro

aero

coop

museum

* Each country reserves the right to determine the conditions for using country-specific domain extensions; some act as international open domain names, such as .tv, but that is subject to contract between the country and its authorized registrars. A list of all the countries with approved country codes and their two-character extensions is available at http://www.iana.org/root-whois/index.html.

Domain names consist of a name and a top-level extension, which means that every domain out there is a second-level domain. Third-level domains, frequently called subdomains, are domains such as events.microsoft.com, my.yahoo.com, or groups.google.com. When you see a domain name that uses www.domain.tld, you are actually seeing a third-level domain name and not the root of the domain. With very few exceptions, such as www, you will not want to have a subdomain for your website unless you own the primary, second-level domain name.

■Note You can register a domain name before you obtain web hosting. My recommendation is to register your domain name separately from your website hosting. That way you can easily transfer your domain if your hosting needs change.

Personal Site For a personal site, use any name you want. Your name, a nickname, or even nonsense can be used as long as no one else has registered the name you want. Be creative, but think about how your site may grow or change in the future before you register that really cute name—you may outgrow it. For a personal site, you may use any unrestricted TLD name including: .com, .net, .org, .info, .name, or your country code.

■Note While the .name extension is an unrestricted domain, until recently you were only allowed to register a third-level or subdomain name, such as http://john.doe.name. Global Name Registry, the administrators for the .name TLD, have promoted third-level domains as “your email address for life.” It is not clear that you can host a website with a TLD of .name, so I would not recommend using a .name TLD for your website.

7

8

CHAPTER 1 ■ BEFORE YOU BEGIN

Business Site For a business site, you may use any one of the unrestricted TLDs except .name. If the site owner is an individual or professional organization meeting the requirements for legal, medical, and accounting professions, you may want to consider a .pro extension. The .pro extension was created as a TLD restricted to these professions.

■Note The .pro extension was created to provide a level of confidence that the person or entity is a licensed practitioner in that field. The majority of .pro domain names will be third-level or subdomains of law.pro, cpa.pro, and med.pro to reflect that the domain owner is a licensed professional in the category their domain was created in. As part of a .pro registration, the registrar, Registry Pro, verifies that the applicant is a licensed professional in the United States, Canada, Germany, or the United Kingdom. In addition, when the domain name is issued, a digital certificate will be issued for use either on the registrant’s website (via Secured Socket Layer encryption) or e-mail (via s/MIME) to provide for the confidential transfer of information. Only those companies or individuals who qualify in two or more categories will be able to obtain a second-level domain.

If your business can obtain its business name with a .com extension you should purchase that domain name as soon as possible, even if you are not ready to publish your site. Protecting your first choice is worth the small expense (under $10) to ensure that the name will be available when you are ready to launch your website. Check the availability of your preferred name before you go any further. If you do not currently have a domain name registrar, a partial list of registrars is available at http://foundationsofexpressionweb.com. If your company name or name of choice is not available for purchase as a .com, check to see who has the .com version before you purchase a domain name with a different TLD. If you use a domain name that ends in a TLD other than a .com extension, many visitors will visit the .com version without noticing your domain name does not end in .com. If your first choice name with a .com extension is taken, it might be better to choose a different name than to risk sending your traffic to a competitor. Another desirable option is to register both the .com and the country-specific domain extension, especially if you plan to do business in more than one country. Many businesses outside the United States use their country codes as an alternative to .com. Many large companies, such as Coca Cola, Nike, and Toshiba, register the country extension for the countries in which they do business and in which they plan to do business in the future.

Web Hosting You need to make your site available on the Internet for people to visit. That means you must have space on a web server connected to the Internet. This is called web hosting, and there are many options. In most cases, you will want your website to be hosted by a commercial web hosting company that specializes in running web and database services using your own domain name. For a personal website, registering and using your own domain name is not strictly necessary.

CHAPTER 1 ■ BEFORE YOU BEGIN

Hosting Using a Subdomain Name Several options don’t require registering a domain name, arranging for web hosting, or other additional expenses. The primary advantage to using one of these is the cost. Usually subdomains are either free or included with something you already pay for as part of an Internet service.

ISP Hosting Most people who use the Internet have a certain amount of web space available from their Internet Service Provider (ISP) providing their Internet connection, such as AOL, Road Runner, AT&T, Orange, or BT. Typically, the space is limited to around 5MB. This is more than adequate for many personal sites. ISP-provided hosting is usually very basic, since the primary business of an ISP is providing access to the Web, not providing full-featured, secure web hosting. Drawbacks to using ISP hosting frequently include the following: • You have no choice over your site’s URL, which usually looks something like http://www.earthlink.com/~user. • If you change ISPs, your site will no longer be available at the same URL. You will have to notify everyone of your new URL. • Search engines don’t index ISP-provided sites. • There’s no support for server-side scripting, such as ASP, PHP, or ASP.NET. • Transferring files from your computer to the web space usually is by File Transfer Protocol (FTP) but may require using a proprietary tool. While ISP-provided web hosting has drawbacks, it’s a good place to test practice pages.

■Note Many domain registrars offer domain forwarding, where people use your domain name and the domain registrar’s servers transfer all requests to your ISP-provided hosting. This can be a cost-effective solution to the first two drawbacks.

Free Hosts GeoCities, Yahoo!, and Tripod are examples of portals offering free web hosting in exchange for allowing banners or other advertising to be placed on your site. Some disadvantages follow: • Third-party advertising may include code that interferes with your web page functions, especially if you are using JavaScript for menus. • You have little or no ability to use server-side code on your website. • Usually, there’s no ability to process a form. • Frequently, these portals require the use of proprietary upload managers.

9

10

CHAPTER 1 ■ BEFORE YOU BEGIN

• Search engines rarely index free hosting service sites. • All free hosting options require you to maintain your own site backups. • Generally, there is little or no technical support. In cases where support is available, a fee often is charged, by the hour or on a per-incident basis.

Commercial Web Hosting Commercial web hosting gives you the most flexibility, though it costs money (but not much money for small websites). In the 1990s, a very tiny amount of web space would cost $30 or more per month; now, you can get generous hosting for under $10 a month, which makes commercial web hosting affordable even for personal websites.

■Note There is no viable alternative to commercial web hosting for a business site.

The cost can range from $1.99 per month to whatever you want to spend. Normally, you will both want and need to register a domain name. Many web hosts offer to register your domain and keep it current while you host with them. While this may be tempting, especially when the offer is for free registration, if you later decide to change hosting providers, doing so may be more difficult than if you keep the registration separate from the domain hosting. Some of the benefits of commercial web hosting follow: • A URL never changes as long as you keep your registration current and pay your hosting fees. Even if you change ISPs or domain hosts, your URL remains the same. • You own and control the domain name. • Search engines will find and index your website. • You can choose the options that suit your site needs including • Amount of space • Type of server • Server support for ASP, ASP.NET, PHP, and other server-side scripting languages • Security, whether it is private areas of your site or the ability to deliver Secure Socket Layer (SSL) encryption for e-commerce • High-speed redundant connections between your server/site and the Internet backbone. • Regular site backups to protect you from server failures. • Technical support if you need help with setting up your site.

CHAPTER 1 ■ BEFORE YOU BEGIN

• Permanent e-mail addresses that you control. Most hosts offer POP3 and SMTP mail services so you can use Outlook, Windows Mail or iMail with your domain name. Those that don’t offer e-mail forwarding to your ISP account.

■Note Even if your domain is not yet hosted, many registrars offer to forward e-mail to you.

A Word About Web Servers There are basically two types of web servers available for commercial web hosting: Linux based and Windows based. Expression Web will create sites that run on any server platform. However, if you plan on using the advanced features, such as data connections and master pages, a web server with ASP.NET 2.0 installed is your best choice, since in the first release version of Expression Web, the only server-side language that has IntelliSense support is ASP.NET 2.0.

ASP.NET FOR NON-MICROSOFT SYSTEMS Contrary to the beliefs of many, ASP.NET is not a proprietary technology owned by Microsoft but is an ECMA/ISO standard for both the Common Language Interface (CLI), and the C# language. See http://www.ecma-international.org/news/PressReleases/PR_TC39_CSharp_CLI.htm if you would like more information on the standard. At the time of this writing, the Linux and Macintosh versions of ASP.NET support ASP.NET 1/1.1 features and a limited set ASP.NET 2.0 classes on Mono 1.2. More ASP.NET 2.0 features are under active development. To find out the status of ASP.NET support, please visit the Mono Project website: http:// mono-project.com.

What to Look for in a Web Host A list of items you should take into account when deciding on a web host follows: • Bandwidth: Look for a host with fat pipes and redundant high-speed connections to the Internet. That way, if one connection goes down, your site will still be available using a backup connection. • Hosting space: How much space do you need? Most static sites need less than 5MB, but many web hosts count your server log files in the amount of space available in your plan. Log files will tell you about the browsers, operating system, and behavior of your visitors but can grow very large, especially if your site is popular.

11

12

CHAPTER 1 ■ BEFORE YOU BEGIN

• Reliability and support: Ask for recommendations from people you know who already have websites to see if they are happy with their web hosting. Check online forums and reviews. Most web hosting companies will offer a 30-day money-back guarantee; use that time to find out how their technical support works. Also find out what sort of server backups the host offers. • Server-side language and database support: Even if you do not think that you will use a database, if you are paying for hosting, make sure at least one database and one serverside language are supported. To use the database and server-side tools in Expression Web, look for a web server with ASP.NET 2.0 and Microsoft SQL Server or Microsoft Access support. While you will not be able to use IntelliSense, you can write code directly in Code view. You will also be able to designate a third-party editor for serverside scripts such as PHP for use with Expression Web.

■Note FrontPage Server Extensions are not required for Expression Web, but if your web host offers FrontPage Server Extensions, you may continue to use them to send form results by e-mail.

Simple Rules for All Websites Following these simple rules will make your site better: • Match your site to your goals. • Use the Web for what is it and what it does well. • Good site functionality beats the latest and greatest web technology or bells and whistles. • Start simply. • Stay focused. • It is easier to add content, features, and function than to remove them. • Most importantly, high-quality content is the single most vital key to a successful website. • Site goals must be • Relevant • Measurable • Realistic • Prioritized • Keep the site’s content current.

CHAPTER 1 ■ BEFORE YOU BEGIN

Installing Expression Web Now that you have a site plan in mind, it is time to get started. If you have not yet installed Expression Web, now is the time to do so. To install Expression Web, you must be using either Windows XP with Service Pack 2 or Vista. It does not matter which version you use, as long as your operating system is supported.

■Note To use Expression Web effectively, I recommend a minimum screen resolution of 1024×768.

After you insert the Expression Web CD in your drive and agree to the licensing agreement, you are presented with the choice to Install Now or Customize. The default install of Expression Web is a good choice for those who will be working on basic websites and those hosting on a web server that does not support ASP.NET 2.0.

Choosing Your Install Type By default, Expression Web will install to your C:/Program Files/Microsoft Expression folder and include some of the Office 2007 tools, such as the spell-checker and file converters. The most frequently used converters and tools will be installed, while other options, such as the ASP.NET 2.0 web server and script editor, will be set to install on first use. If you do not know if you will be using server-side scripting, use the default install.

A Default Install For a default install use the Install Now button and skip to the “Taking a First Look at Expression Web” section. If you have sufficient hard disk space, consider using a customized install so that you will have all the components available without the need to have the Expression Web disk available to install those components when you are ready to use them. Other reasons to use a customized install are to install Expression Web in a location other than the Microsoft default of C:\Program Files\Microsoft Expression or to install the classic ASP scripting tool.

■Note The number one reason for a custom install is if your website will be hosted on a web server with ASP.NET 2.0.

A Custom Install If you need a custom install, follow these steps: 1. Click the Customize button, shown in Figure 1-3.

13

14

CHAPTER 1 ■ BEFORE YOU BEGIN

Figure 1-3. Click the button for the type of install you wish to perform. 2. This will launch the dialog box asking you to choose the location on your system to install Expression Web. Use the Browse button to navigate to the location where you want Expression Web to be installed, as shown in Figure 1-4.

Figure 1-4. Use the Browse button to choose your install location.

CHAPTER 1 ■ BEFORE YOU BEGIN

■Note This will be your only chance to choose your install location. If you use the Install Now button and then try to go back to change the install location, you will get an error and be unable to complete your install.

3. The last choices you will have are to change the default options installed. One change you may wish to make at this stage is to install the ASP.NET web server now instead of on first use, if the web server you will be hosting on offers ASP.NET 2.0.

Figure 1-5. Install the VBScript editor for writing Classic ASP

4. If you are short on hard drive space, you may also change the tools you do not anticipate using to install on first use. 5. Use the Continue button to complete your install.

15

16

CHAPTER 1 ■ BEFORE YOU BEGIN

Taking Your First Look at Expression Web If you have never used a web editor before but have used Windows or one of the Microsoft Office programs, parts of Expression Web will look familiar. You will see the same type of menus across the top and a format toolbar like you see in other Microsoft programs. The Expression Web interface consists of a series of toolbars, status areas, and task panes. By default, it looks Figure 1-6.

Figure 1-6. When you first open Expression Web, it will look like this.

To work effectively in Expression Web, you will need to become familiar with all of the numbered areas in Figure 1-7.

CHAPTER 1 ■ BEFORE YOU BEGIN

Figure 1-7. Sections of the Expression Web interface The Expression Web interface is divided into the following areas: 1. Menu bar: The menu bar follows Windows standards and consists of File, Edit, Insert, Format, Tools, Table, Site, Data View, Task Panes, Windows, and Help options (see Figure 1-8).

Figure 1-8. Expression Web’s menu bar uues the familiar Windows menus. 2. Format toolbar: While the Format toolbar (see Figure 1-9) may look like the one in Microsoft Word and FrontPage 2003 (and earlier versions), it behaves quite differently from either of those programs by writing styles instead of applying font tags. Unlike with older web editors, if you repeat your format actions on subsequent sections of text, Expression Web does not create a separate style but applies the class created in the first instance to your new selection.

Figure 1-9. While this may look like a typical Microsoft formatting toolbar, using the buttons on it will generate styles, not apply font elements.

17

18

CHAPTER 1 ■ BEFORE YOU BEGIN

3. Folder List: The Folder List is technically a task pane, but the function it serves in your site is so important that the Folder List deserves its own section number. This is where your local site files are shown. Every page, image, or other file should be listed here in the same folders as on your production website. Use it to open files, or drag images, Dynamic Web Templates (DWTs), stylesheets, and other items to be displayed in or attached to your pages. Until you create a local website, the Folder List will be empty, as shown in Figure 1-6. Once your site is created, it will look more like the one shown in Figure 1-10.

Figure 1-10. The folder list provides you with an outline of all the files in your local website.

4. Task panes: Each of the task panes has one specific function. There are 18 task panes and one entry to reset your Expression Web interface back to the default layout. The six most commonly used task panes are open by default. These are shown in Figure 1-11.

CHAPTER 1 ■ BEFORE YOU BEGIN

Figure 1-11. Task panes displayed by default in Expression Web

The following task panes are open by default in Expression Web: a. Folder List: See item 3. b. Toolbox: Drag HTML elements and ASP.NET controls from the toolbox to use on your web pages. c. Tag Properties: Holds two tabbed properties task panes: • Tag Properties: Displays the attributes available for the HTML element or ASP.NET control that is selected on the open page as well as any events associated with that item. • CSS Properties: Displays the property and values of the chosen element including those properties inherited by the element. d. Apply Styles: Holds two tabbed styles-related task panes: • Apply Styles: Here, you can choose from available styles to apply to an element or section of text, and you can create new styles. The styles available will be shown in the Apply Styles task pane with the style settings applied, so that you can see what the style will look like when you apply it. • Manage Styles: This pane allows you to move styles between your document and an external stylesheet as well as create new styles.

19

20

CHAPTER 1 ■ BEFORE YOU BEGIN

5. Document tabs: These show you the pages you currently have open. A tab will be added for Web Site view once you have created and opened a website, as shown in Figure 1-12. In the Web Site view, you will see a top-level representation that matches your collapsed Folder List until you connect to your Internet server to publish your site. Once you have connected to your remote site, the publishing interface will become the default view for the Web Site tab.

Figure 1-12. The document tab bar shows the pages you have open along with the Web Site view when you are connected to your web server.

6. Quick Tag bar: Acts like a document breadcrumb map showing you where you are in the document’s structure. Using the bar, you can select and edit the HTML elements as shown in Figure 1-13.

Figure 1-13. Using Quick Tag shows you the document structure and lets you manipulate the elements.

7. Document window: This is where you create your web pages using one of the following three views, which are shown in Figure 1-14: • Design: This view, shown with a blank page in Figure 1-6, renders your page according to the doctype chosen and is a close approximation of what the browser displays. Design view rendering has improved so that there is no need for a separate Preview view inside Expression Web. • Split: Shown in the Figure 1-15, this is the recommended view, since it allows you to see both the code and the way the code renders in a modern browser. • Code: This view, shown in Figure 1-14, lets you view only the code, which, unless you come from a development background, may be difficult for you to visualize.

CHAPTER 1 ■ BEFORE YOU BEGIN

Figure 1-14. From left to right, the three document views are Design view, Split view, and Code view. I recommend working in Split view.

Figure 1-15. Using Split view for your Document window lets you see both code and design at the same time.

21

22

CHAPTER 1 ■ BEFORE YOU BEGIN

8. Document window options: Below the Document window is a context-sensitive set of options for the Document window. The default view when Expression Web is first opened is shown at the bottom of Figure 1-11. When you have a local Web Site open without a page open in the Document window, you will see a page that looks like the Folder List with file details such as you would see in the details view of Windows Explorer. If you have connected to your web server to publish your site, you will see your local and remote servers, as shown in Figure 1-16.

Figure 1-16. The web publishing interface will appear under the Web Site tab in the Document Window with related options of Reports and Hyperlinks in the Document Window’s options. 9. Status bar: This is the last section of the Expression Web interface. As the name implies, it lets you see page status and program options. In Figure 1-17, you can see that Visual Aids are turned on; Style Application is automatic; and the Document window design section is a narrow 354 pixels wide. Ideally, the design section of Split view (and of the whole page in Design view) would be the width you want for your page, but in this case, I narrowed the space available to get the screenshot you see in Figure 1-17. The remaining information in the Status Bar tells me the doctype and Cascading Style Sheet (CSS) version the page is using.

CHAPTER 1 ■ BEFORE YOU BEGIN

Figure 1-17. The Status bar provides you with information about your Expression settings and your web page.

Summary In this chapter, we have made decisions concerning the purpose of the website you will be creating and your target visitor. We looked at when you need a domain name and at commercial web hosting versus using third-level hosting without a domain. These are important decisions you should make before you begin creating your website. Next, we installed Expression Web and learned how the design surface helps us create better web pages. Now that you are familiar with the interface, it is time to create your first website!

23

CHAPTER

2

Taking Your First Steps B

efore you begin you must create a local website. In this chapter, you will get started by creating a local website and a home page for your site. Along the way, you will be learning the menus and features in Expression Web that will make working on your site easier.

Creating a Local Website Before you create a single web page in Expression Web, you need to create a local website. Otherwise, Expression Web cannot manage links among your web pages and items you link to in your web pages. To begin, you will create a new one-page website. The best way to do this is from the File menu.

File Menu In the File menu, you have all the normal functions you expect to see on any Windows program with some others that are specific to Expression Web (see Figure 2-1).

Figure 2-1. The File menu contains web-specific options in addition to the standard Windows file options.

25

26

CHAPTER 2 ■ TAKING YOUR FIRST STEPS

There are several items of special interest to you on the File menu: • New: Choose the type of new web page or local website you want to create. • Preview in Browser: See what your page will look like to your visitors and not just in Expression Web. • Publish: Move your web pages from your local computer to your web host.

New Create new websites and new pages with the New option (see Figure 2-2).

Figure 2-2. The New option is the one that you will use to create your first website. To create a local website, you would use File ➤ New ➤ Web Site. For now, you will be concerned only with the New Page and New Web Site options. Later in this book, you will be using the New CSS options. The first exercise in Expression Web is to create a local website (see Exercise 2-1).

■Caution Always work in a local website, never on just an individual web page in your site!

WHY A LOCAL WEBSITE IS NECESSARY A website is a collection of pages with interrelated links. One of the strengths of Expression Web is the ability to manage those links, but it cannot manage links in a vacuum. When you create and use a local website to hold your web files, Expression Web will maintain metadata showing how the files are related to each other. This means that you will be able to move files from one folder to another and let Expression Web manage the relative file paths so you can organize your files and folders to match the needs of your site.

CHAPTER 2 ■ TAKING YOUR FIRST STEPS

Exercise 2-1. Creating a New Site and Page In this exercise, you will create a new website and a web page.

Creating a New Site 1. Create a new blank website using the File ➤ New ➤ Web Site option, as shown in Figure 2-3. 2. In the dialog box that appears, select the Empty Web Site option from the center column.

Figure 2-3. General website choices include a one-page website, an empty website, and the option to import a website from the Internet or another location on your hard drive.

■Note You should change the location where your new site will be created by either typing in the file path or using the Browse button to go to the folder you want to create your new site in. Once you are in the folder, add the name of the new website to the end of the file path in the dialog box.

3. After you change your site location and name, click the OK button. You will see the site appear in the Folder List task pane (see Figure 2-4).

Figure 2-4. The file path to your newly created website will appear at the top of your Folder List.

27

28

CHAPTER 2 ■ TAKING YOUR FIRST STEPS

Creating a New Web Page 1. Click File ➤ New ➤ HTML to create a single new web page. I recommend using Split view whenever you are working on your web pages so that you can see how Expression Web is writing your code.

■Note Do not select File ➤ New ➤ Page, as shown in Figure 2-2. This opens the dialog box to the Page tab, shown in Figure 2-3, instead of the Web Site tab. You will examine the Page tab options later.

A page will be created with the code, as shown in Figure 2-5.

Figure 2-5. The default web page created by Expression Web 2. Right-click the Design view section of the document window, and select Page Properties. The default page name will be Untitled with a number that will increment with each new page, as shown in Figure 2-6. Change the page title to My Home Page, which I used in my example, or the name of your choice if you prefer.

Figure 2-6. The Page Properties dialog allows you to add a page title and other elements in one place.

CHAPTER 2 ■ TAKING YOUR FIRST STEPS

The page description is displayed by some search engines when your page is returned in response to a search, while keywords may help other search engines categorize your pages. If you choose to use these elements, keep the text to less than 200 characters. 3. Add one line of text in Design view that says, “This is my first web page using Expression Web.”

■Note Your web host will have a default document name, usually index.html or index.htm, which will be served when a person types in your domain name.

4. Use File ➤ Save to bring up the Save As dialog box, shown in Figure 2-7. By default, Expression Web will name the file using the page title, replacing the spaces with underscores. 5. Change the name by typing over it in the “File name” field. For the exercises in this book, I will be using index.html as the default page. If your host uses a different name, please substitute it whenever you see index.html.

Figure 2-7. The Save As dialog box will appear when your page has not been previously saved.

6. Your folder list should now include index.html. The final step in this exercise is to use F12 to preview your page in your default browser.

29

30

CHAPTER 2 ■ TAKING YOUR FIRST STEPS

FILE AND FOLDER NAMING The name of a file or folder is determined, in part, by the type of server you are using. Linux or other Unixbased servers make up the majority of production web servers and backbone servers such as the Domain Name System (DNS), which resolves domain names, and gateway computers, which manage the connection between you and your ISP’s connection. These servers are case sensitive and, unless you are on a closed intranet, your request for a web page will certainly pass through a Linux server somewhere between your computer and the hosting web server. You should always have a page with the name your host uses as its default in every folder on your site. Otherwise your visitor may get a list of all the files in your directory.

Use Meaningful File and Folder Names Not only does using about_us.html or green-tank-shirt.html make it easier for you to know what is on which page of your site, but meaningful names can help your site fare better in search engines. While Windows servers are not case sensitive, XHTML and XML are, so you might as well start with good practices. My recommendation is to use all lowercase letters in file names and to use hyphens to separate words as needed.

Do Not Use Spaces Because Linux servers will break a URL at a space, most web servers and browsers encode a space as %20, but this is not foolproof. To be safe, never use spaces in your file names. Unix-based web servers and e-mail clients will break the URL at a space, which can cause your links to return a 404 (file not found) error.

HTM vs. HTML What is the difference between the file extensions .htm and .html? The fact that both exist is a legacy from DOS, which had a limitation on file names of 8.3, that is, an eight-character file name plus a three-character file extension. Since DOS and by extension Windows 3.11 or lower could not understand the four-character .html extension, people using DOS or Windows who wanted to be able to edit or create web pages needed to use .htm. Viewing pages with the .html extension was not typically an issue, since DOS browsers would drop anything after the first three characters. It does not matter which extension you use, but pick one and be consistent.

Pick a Case How many separate pages are there in the following list? • AboutUs.html • Aboutus.html • ABOUTUS.HTML • aboutus.HTML • aboutus.html

CHAPTER 2 ■ TAKING YOUR FIRST STEPS

The answer depends on what type of server we are on. On Windows, there is one file, but on a Linux server, there are five—each and every one of these files is different. If the browser requests aboutus.html and only ABOUTUS.html resides on the server, your visitor will get a 404 error. Since we are working on Windows with Expression Web, which is not case sensitive, it is smart to pick one naming convention and stick to it. I recommend using all lowercase. Because XHTML is case sensitive, you will be working with lowercase element names (required) and lowercase attributes (also required), so you might as well continue the theme with lowercase values. If you happen to come from a programming background where camel case (multiple words run together with the first letter of each inner word capitalized like multipleWords) is the norm, go ahead and continue to use camel case, but make sure you are consistent.

Be Consistent in Your Naming Conventions Being consistent in your naming conventions means more than being consistent with the case of your file and folder names. It also means keeping the names of folders and pages you will create in more than one website the same; don’t use images in one and pictures in another. I like to name the primary stylesheet for a website with the site name. For example, if I am searching for a specific stylesheet, I can tell at a glance that foundationewd.css is the stylesheet for foundationewd.com and not have to guess to which website site.css or style1.css belongs. By the same token, I will know that a page named contact-us.aspx is a contact page while faq/sales.html will have the frequently asked questions page for sales. The road to 404 errors is paved with inconsistencies.

■Note You should never work on web pages in Expression Web outside of a website, or your links may not resolve correctly when you move or add files to your website.

Preview in Browser No matter how good or bad a page looks in Expression Web’s Design view, it may not look the same when viewed in the browser. If the browser is standards compliant, your page should appear the same as in Design view, but we all know that no browser is 100 percent compliant. Every browser has one or more display quirks. In part, these quirks exist because the W3C specification is not detailed in every instance. For example, to determine the width of a container, should the width include the amount of padding, the thickness of the border and margin, or just the content? This decision was left to the browser makers. Needless to say, the browser makers did not all choose the same method; as a result, it is always best to test in a real web browser. To preview in your default web browser at your default browser settings, all you need to do is use F12. By using the Preview in Browser fly-out menu (found in the File menu), you have many more choices, as shown in Figure 2-8.

31

32

CHAPTER 2 ■ TAKING YOUR FIRST STEPS

Figure 2-8. Expression Web lets you choose the browser and resolution for viewing. Expression Web will always look for Internet Explorer and will add it to your preview list when it is not the default browser. Since my default browser is Firefox, I see Internet Explorer listed as a separate option. Although I have Opera installed on my system, it is not my default browser, so Expression Web did not add it to my browser list. Other browsers you have installed will need to be installed using the Edit Browser List option (shown in Figure 2-9) at the bottom of the fly-out menu.

Figure 2-9. Make sure that you have the major browsers for your operating system installed, and add them to your preview list. Adding browsers is as simple as clicking the Add button, following the dialog box prompts, and navigating to the location of the browser.exe file to add the browser to your list. Window Size You may have noticed that when you choose to preview in one or multiple browsers, you can also select from common screen resolutions for previewing your pages. Your web pages may look different when viewed at different screen resolutions, but your site still needs to look good regardless of the browser size.

CHAPTER 2 ■ TAKING YOUR FIRST STEPS

I would recommend that you preview at 800×600 and 1024×768. Very few people are using 640×480. To preview in a browser locally, you may need to save your web page before it will be displayed. As long as you have not closed the page in Expression Web, you may still use Edit ➤ Undo or Ctrl+Z to undo your page changes up to the last 30 changes since your page was opened.

ABOUT BROWSERS While Design view gives you a good representation of what your page will look like according to the doctype stated in the code (the default is XHTML 1.0 Transitional) full stylesheet support, no browser available is 100 percent standards compliant. For that reason you should get in the habit of using F12 to preview your web pages locally in your default web browser.

Testing in Multiple Browsers At minimum, you should have the default browser for your operating system. Since you are using a web editor that runs only on Windows XP or Windows Vista, you have either Internet Explorer 6 or 7 installed. This will be your default browser unless you have changed it. If possible, you should have both, since only those using Windows XP with Service Pack 2 or later and Vista will be able to use Internet Explorer 7. Older versions of Windows will be limited to Internet Explorer 6. Running both versions of Internet Explorer requires two separate computers or a Virtual PC with another Windows operating system installed. Unfortunately, unless you have access to more than one computer or can run Virtual PC, you will be able to test in only one version of Internet Explorer. You can download Virtual PC free from Microsoft at http://www.microsoft.com/windows/virtualpc/default.mspx. Better yet download and install one or more of the following browsers: • Firefox: http://www.mozilla.com/firefox/ • Opera: http://www.opera.com/ • Netscape: http://browser.netscape.com/ Users of Firefox, Mozilla, Opera, and Netscape tend to update to the latest version, so you do not typically need to install older versions of those browsers. This will allow you to preview in multiple browsers, since you will not know what browser your visitor will be using. If possible view your pages from a Mac using Safari in addition to the browsers listed previously.

Publish A website that never makes it to the Web will not accomplish your goal. Since publishing is such an important part of creating web pages, I will cover this topic in detail once you are ready to publish pages. You will want to publish the single page you created. Since you may not have published a web page before in any web editor, I will cover File Transfer Protocol (FTP) and FrontPage Server Extensions (FPSE) publishing before going any further.

33

34

CHAPTER 2 ■ TAKING YOUR FIRST STEPS

To begin the process of transferring the web pages you create locally to a production server, you use File ➤ Publish Site. This launches the Remote Web Site Properties dialog box, shown in Figure 2-10. Your commercial web host should have provided you with the information you need to publish your website to your web space. If you are using the web space provided by your ISP, please check their FAQs before you begin the publishing process.

Figure 2-10. Choose the publishing method supported by your web host.

Remote Web Site Properties The first thing you will notice in Figure 2-10 is that there is a variety of options you can use to publish your site. They are as follows: • FrontPage Server Extensions (or SharePoint Services) • WebDav • FTP • File System Most web designers will use standard FTP as their publishing method. I recommend using the built-in FTP client to publish your pages, because it simplifies the transfer and synchronization of files between your local copy and the one on your production server. However, if you manage a large number of websites, you may prefer to use a third-party FTP program, since the one in Expression Web does not remember user IDs and passwords for FTP connections.

CHAPTER 2 ■ TAKING YOUR FIRST STEPS

As mentioned previously, we will look at FTP and FPSE. WebDAV is rarely used, but if you have that option, just follow the prompts. The File System option is useful if you’re publishing across a network. Using FTP Follow these steps to use FTP to publish your site: 1. Select the FTP radio button. 2. Type the location of your FTP server. This is usually the site name proceeded by ftp://, but it may vary, which means you need to check the documentation provided by your web host.

■Note In most cases, when you use FTP to connect to your website, you will be entering at a level above your public folder or directory. Common names for this root folder, which is displayed to your web visitor, are public_html, www, or webroot. Consult the instructions you have received from your host.

3. Click the OK button to launch the login credentials dialog box, shown in Figure 2-11.

Figure 2-11. This credentials box will be the same whether you are using FTP or FPSE to publish.

Using FPSE If you have FPSE installed on your web server, you may use it to publish to your production site. Since Expression Web will remember your user ID/password when you publish with FPSE and not when you publish with FTP, you may find this method more convenient if your web host supports FPSE publishing. If you select the radio button for FrontPage Server Extensions, the “Remote Web site location” field will change to look like the one in Figure 2-12.

35

36

CHAPTER 2 ■ TAKING YOUR FIRST STEPS

Figure 2-12. The remote Web site location changes to reflect an HTTP address. Notice that with FrontPage Server Extensions you publish using HTTP. On some corporate networks FTP is blocked, but you can still publish via HTTP, since it uses the same port as the one used to view web pages (80) instead of the blocked FTP port (25). Publishing Your Web Page Once you have connected to your website, you will see a split screen with your local website on the left and your remote website on the right. As shown in Figure 2-13, there may be files in your remote site even before you publish any files. Typically, your web host will have a default placeholder page that says “coming soon” or some other generic text that you will need to replace. You may also have folders such as cgi_bin or aspnet_client.

■Caution Do not delete or change any folders that your web host has preinstalled without checking with your host first, or your website may not function properly.

Expression Web will keep track of the publishing status of your web pages. Figure 2-13 shows a question mark (?) next to the index.html file in each location, because Expression Web is able to tell that the two pages are not the same based on file dates and other metadata. To synchronize your website, you can use the radio buttons at the bottom to publish your local website to your server, transfer pages from the remote to the local (useful if you are working on a site from a new computer or program), or synchronize pages, which will publish newer files from one site to the other. To transfer all the changed files in your website between your local computer and your website, select the appropriate radio button in the bottom “Publish all changed pages” section, and then click the Publish Web site button. If you want to transfer just one file, you may highlight it in the appropriate site and use the arrow between the two site windows to transfer or replace the one in the other site. In Exercise 2-2, you’ll learn how to publish your web page.

CHAPTER 2 ■ TAKING YOUR FIRST STEPS

Figure 2-13. You web host will have preinstalled files and/or folders when you first connect.

Exercise 2-2. Publishing Your Web Page In this exercise, you will publish the web page you created in Exercise 2-1. Make sure that you have the information from your web host available before you start this exercise. 1. For the local website you created in Exercise 2-1, make sure you have saved your index.html file. While you can publish a file that is open in the document window, only the last saved version will publish. 2. From the File menu, select Publish. 3. Select FTP or FPSE, depending on your web host options. If using FTP, make sure you have the correct folder name in the FTP Directory text box for the folder that is the root of your public website. Check your hosting documentation for the correct folder. 4. Type your user ID and password in the Credentials dialog box. 5. Click the Synchronize button to publish your local website to your server. You should get the Conflicts dialog box shown in Figure 2-14. Choose Overwrite Remote Files, since you will be replacing the generic placeholder home page.

37

38

CHAPTER 2 ■ TAKING YOUR FIRST STEPS

Figure 2-14. This conflicts warning will appear whenever Expression Web is unable to tell the status of individual files.

■Note When you have successfully synchronized, any files or folders on your remote site will have been transferred to your local site. Generally, these are scripting folders that you should not be editing. If you rightclick the folder in the folder list and select Convert to Web, you will be able to synchronize files in the future without publishing the folder or its contents.

You should no longer have a conflict between the two index.html versions, and any scripting or other hosting folders will have a globe icon inside their icon on your local site to let you know that those files will not be published when you synchronize files in the future, as shown in Figure 2-15.

Figure 2-15. Notice the globe in the local aspnet_client folder, which marks it as a separate subweb not to be published.

Congratulations, you have published your first web page!

CHAPTER 2 ■ TAKING YOUR FIRST STEPS

Edit Menu The Edit menu, shown in Figure 2-16, has all the standard Windows edit commands: • Undo/Can’t Undo: Lets you undo the last action. It’s grayed out in Figure 2-16, since there are no actions to undo. • Redo/Can’t Redo: Lets you restore your last action after using Undo. • Cut, Copy, Paste, Paste Text, Delete, Select All, Find, and Replace: These are the standard Windows commands. • Incremental Search: This search option finds as you type, instead of searching for a full word or string. • Go to Bookmark: This will open the Bookmark dialog box. Note that this changes to Go to Line if you are in Code view. • Quick Tag Editor: Opens the Quick Tag Editor, shown in Figure 2-17, which can be the easiest way to change a tag. • Check In, Check Out, and Undo Check Out: These options are useful for teams working on a site; they can help to prevent accidentally over writing changes made by others. • Code View and IntelliSense: I discuss these options in more detail in the following section.

Figure 2-16. The Edit Menu has all the traditional Windows options along with a few that are unique to Expression Web.

39

40

CHAPTER 2 ■ TAKING YOUR FIRST STEPS

Figure 2-17. The Quick Tag Editor floats on top of the Document window and allows to you make quick edits.

Edit Code View If you are like me, you want to see the code that is being created, whether it is code Expression Web creates for you or code you write yourself. The Edit ➤ Code View section, shown in Figure 2-18, has actions that can make it easier to work in Code view. You will be able to see these options only when you are using Code view or your cursor is in the Code section of Split view. While it is best to set your default Code view configuration using Tools ➤ Page Editor Options, some of the options on this menu can help your workflow.

Figure 2-18. The Code view submenu is divided into sections for code formatting and for managing HTML element tags, code bookmarks, and hyperlinks.

Tag Management Section This section of options allows you to work with your HTML tags using the following options: • Select Tag: Selects the opening and closing tags as well as everything in between • Find Matching Tag: Takes you to the closing tag for the element selected

CHAPTER 2 ■ TAKING YOUR FIRST STEPS

• Select Block: Selects the nearest block level element • Insert Start Tag: Inserts opening and closing angle brackets, < >, to add an HTML element tag • Insert End: Inserts a pair of angle brackets with the closing slash, , to close a tag • Insert Comment: One of the most useful of the tag management section; allows you to insert comments to yourself so when you have not worked on a page for a long time you will know why you did what you did

Bookmark Section The following options are not for bookmarks in your HTML; instead, they allow you to create bookmarks in your code to quickly jump from one section to another in Code view: • Toggle Bookmark: Lets you set a temporary bookmark in Code view, which can be helpful when trying to troubleshoot errors whether in your code or in your stylesheet. These bookmarks are temporary and will be deleted when you close the web page in Expression Web. • Next Bookmark and Previous Bookmark: Moves forward or backward between bookmarks in Code view. • Clear Bookmarks: Just as it says, it removes all the Code view bookmarks when you are finished troubleshooting.

Hyperlinks Section Like the bookmark section, these options are only for Code view. They let you move between the CSS and JavaScript files that are linked in to your page.

■Note Microsoft also uses the term “bookmark” to refer to in-page links for your visitors to navigate within your web page that are added via the Insert menu. The code for a permanent bookmark is back to top.

Edit IntelliSense Similar to the Edit ➤ Code View options, your cursor must be active in page code and inside an HTML element that has IntelliSense options for the Edit ➤ IntelliSense section to become available. These options are options you would normally use the keyboard for, since using Ctrl+spacebar for code completion is easier than using Edit ➤ IntelliSense ➤ Complete Word. The most useful option here is to trigger the code snippet list for you to choose a code snippet to insert. See Chapter 3 for more information about code snippets.

41

42

CHAPTER 2 ■ TAKING YOUR FIRST STEPS

View Menu The View menu, shown in Figure 2-19, has many options worth paying attention to, since they can help you troubleshoot problems.

Figure 2-19. The options on the View menu are unique to Expression Web. For now, leave the default settings on the View menu, but I’ll quickly run through the options so you know what they do. • Page: This lets you set the display mode for the main document window. The options are Design, Split, and Code. • Visual Aids: These options, shown in Figure 2-20, allow you to set how certain structures are displayed in Design view.

Figure 2-20. Visual Aids are useful but can change how your page renders in Design view. Turning them off gives you a browser preview. Visual Aids allow you to see and modify code elements in Design view instead of working directly in code. The choices follow: • Block Selection is the default. When you select an element in Design view, the element boundaries will be outlined, and the HTML element will be identified at the top-left of the outlined area.

CHAPTER 2 ■ TAKING YOUR FIRST STEPS

• Visible Borders shows a dotted line around elements such as table cells when the element does not have visible borders set in the code. • Empty Containers is a quick way to show empty elements on your page. This is most useful when the page is not displaying as you expect—frequently an empty element is on the page, which typically happens when you forget an opening or closing element when you delete or edit text. • Margins and Padding gives a red outline to the containers. By dragging the outline as shown in Figure 2-21, you can change the margin around an HTML element. If you press Ctrl and drag, you will change the amount of padding around your element.

Figure 2-21. To change the margin or padding, make sure you are not over one of the resize handles. • CSS Display:none Elements gives you a quick way to view elements with the CSS property of display: none. Items with display: none will have the space they occupy collapsed by the browser. • CSS Visibility:hidden Elements allows you to toggle to display elements hidden using visibility: none, the other method of hiding elements using CSS. The space these elements occupy will not collapse in a browser. • ASP.NET Non Visual Controls will show a rectangle as a placeholder for ASP.NET controls. • ASP.NET Control Errors will provide you with an error message if there is a problem with the control, such as not being able to connect to a data source. • Show Template Region Labels displays an orange outline by default when you are in an editable region. This option will show all editable regions on the page, not just the active one. • Formatting Marks: This menu will be grayed out until you have turned on Show. Once you have turned on Show, you can choose which of the marks you would like to use. “Formatting marks” is a slightly misleading term, since this section includes hidden form fields, script elements, and CSS properties. • Ruler and Grid: Many people, especially those who are used to designing for print or who have been using tables for page layout, use rulers for reference. The options are self explanatory.

43

44

CHAPTER 2 ■ TAKING YOUR FIRST STEPS

• Tracing Image: Some designers will create a mock-up or comp in PhotoShop or another graphics program and then use the image as a visual aid in laying out their web page. If such an image is part of your workflow, this is where you would select and place the image. Images used in this manner will be displayed in Expression Web but not on your web pages. • Page Size: This allows you to quickly see how your page layout will look at the most common screen resolutions in Design view. While this is not a substitute for checking in a real browser, it is useful for a quick check. • Folder List: This opens the Folder List task pane if it is closed. • Quick Tag Selector: This opens or closes the Quick Tag bar. I recommend that the Quick Tag bar always be displayed. • Toolbars: This provides you with a list of the toolbars available and allows you to open or close each one. Toolbars that are currently open have a check mark next to them. One toolbar that is not open by default that I find useful is the Styles toolbar. Explore the toolbars available on your own to see which ones you find useful. • Refresh: This is the same as pressing F5 on your keyboard to refresh Expression Web. If you have added files to your site through Windows Explorer or by saving a file directly to your website from another program using this option (or pressing F5) will make it appear in your Folder List task pane.

Insert Menu Most of the functions on the Insert menu, shown in Figure 2-22, are duplicated in either the Toolbox task pane or the Behaviors task pane, both of which offer more options than those in the Insert menu. These elements will be explained as you use them or when you explore the Toolbox task pane.

Figure 2-22. The HTML and ASP.NET controls duplicate a fraction of the elements available on the Toolbox task pane.

CHAPTER 2 ■ TAKING YOUR FIRST STEPS

These are the items on the Insert menu: • Hyperlink: Opens a dialog box to insert a link to another page, a document, a file, or a bookmark on the same page. • Bookmark: Opens a dialog box to insert an anchor element: to mark a specific section of the page for a hyperlink. • Picture: Inserts a picture and sets the alt attribute, which is the text that is displayed if the image does not load or your visitor is unable to see images. • File: Imports content into your web page from another HTML document, a Word file, or one of the other file types listed in Figure 2-23. • Interactive Button: Creates the appearance of a button and rollover effects as you mouse over the links created. • Symbols: Lets you add copyright, trademark, and other items from the symbol menu.

Figure 2-23. The Insert menu’s File option allows you to browse to files on your computer with the extensions shown to insert them as content on your page.

■Note In most cases with RTF or Word documents, the formatting will be imported as well. You may need to clean up the code after you have imported content using this method.

Format Menu You will frequently use the Format menu, shown in Figure 2-24, since it contains one of the most important commands for bringing in content from other sources such as Word files: Remove Formatting. This lets you quickly remove the outdated and bulky code many word processing and other programs add for presentation so you can apply the look and feel of your site to the content. Here, you have options to create and apply styles to your page, to add behaviors such as rollovers, and to use DWTs and master pages to keep the look and feel of your site consistent from page to page. Although many of the options on the Format Menu are available in task

45

46

CHAPTER 2 ■ TAKING YOUR FIRST STEPS

panes, the Remove Formatting, Dynamic Web Template, and Master Page options are most frequently used from the Format menu.

Figure 2-24. Format menu options include page and tools for keeping your pages consistent within your site. While some of the options in the middle section of the Format menu (starting with Font and ending with Borders and Shading) look like their Word or FrontPage counterparts, they do not work the same. Instead of creating bulky inline font markup that is repeated every time you use the buttons, a style is created and reused. This automatic reuse of existing styles is one of the best features in Expression Web, one that will help you create pages that load faster. In Chapters 5 to 7, I will cover using a CSS to format your page display and layout.

Summary You should be familiar now with the basic menu functions and be able to create a local website and a basic HTML page. You have explored the menus that are common in all Microsoft programs, and you have seen where Expression Web–specific additions to the Microsoft standard menu commands exist. Other than the Window and Help menus, the rest of the menus are task or program specific. Remember that you should never work on individual pages in Expression Web without opening the local website or your links, and other page features may break. Throughout the remainder of this book, you will be using the options on these menus and related task panes to create a fully functional, attractive website. In Chapter 3, I will show how to configure Expression Web to make that task easier by changing some of the defaults in Application Options, Page Editor Options, and Site Settings.

CHAPTER

3

Starting Off Right: Configuring Expression Web I

n the last chapter, you created a local website using the default settings. In this chapter, you will change the default settings in Site Settings and Page Editor Options to improve your workflow. You’ll configure Expression Web to make your website easier to maintain by using classes that improve workflow, instead of inline styles and program defaults.

Using the Tools Menu Like the Format menu, the Tools menu has many useful options (see Figure 3-1). You will probably need to set some of the options here only once, but they are significant. They are Application Options and Page Editor Options, which are important enough to warrant a detailed discussion of the options on their tabs. Like others we’ve discussed, this menu can easily be divided into sections. You’ll start with the general tools you find in most Microsoft programs.

Figure 3-1. The Tools menu is where you set Expression Web default options, as well as a few content and reporting tools.

47

48

CHAPTER 3 ■ STARTING OFF RIGHT: CONFIGURING EXPRESSION WEB

General Tools Section The general tools are as follows (the first two are shared with Office 2007 and will be installed even if Office 2007 is not present): • Spelling: This option has a submenu that allows you to run the spell-checker and set spelling options, which are self-explanatory. • Thesaurus: This option is useful only if you are writing content. • Set Language: All of your web pages should have default language settings. However, sometimes you will use more than one language on a page. Use the Set Language option to indicate you have changed the language within a page. For example, you might have the French phrase c’est la vie in the middle of your content. Normally, to tell the browser and any screen reader or search engine about the language change, you need to wrap the text in a span with the new language identified. In my example, the code to change the language would be as follows: c'est la vie. By highlighting the text in Design view and using Tools ➤ Set Language, you can choose the language without needing to write the language code yourself, as shown in Figure 3-2.

Figure 3-2. Changing the language of a section of text is as simple as choosing the correct language from the scrolling text box.

Reports Section This section is where you can run reports that let you know what problems, if any, there are on your page. Here, you will just see what reports are available. In Chapter 12, you will be using the Accessibility Report. The reports are as follows: • Accessibility: Checks for Section 508 and Web Accessibility Initiative (WAI) compliance issues with the page. Please note that while the checker can provide a basis for determining whether the page is accessible or not, no automated checker can determine that accessibility has been achieved.

CHAPTER 3 ■ STARTING OFF RIGHT: CONFIGURING EXPRESSION WEB

• Compatibility Checker: This report is more or less a local validator for well-formed HTML/XHTML and CSS code. Since you should always have a doctype declared on your pages, I recommend using the Checkbox control to base the check on the doctype specified in the page. You can use this checker as you are creating pages, and the result should be the same as you get by using the W3C validator, which you should also run once you have published your pages. • CSS Reports: This option lets you determine what styles are or are not used within your site as well as checking for errors. Sometimes when you have been working on a site, styles accumulate that you end up not using. Many people prefer to remove these unused styles to both tidy up their stylesheets and reduce the page weight. Notice that you have the ability to run checks on the entire site or on selected pages.

Optimize HTML Selection The options in the Optimize HTML dialog box, shown in Figure 3-3, are both useful and dangerous. Like in the Format ➤ Remove Formatting selection, you can clean up legacy code as well as data from Word files and other imported files with tags. These useful options are located in the Remove Unused Content and Remove Generated HTML sections. If you have content imported from Word or legacy FrontPage sites, I recommend using all the options in these two sections. If you have an external stylesheet applied, detach the stylesheet before removing Unused Styles.

Figure 3-3. The Optimize HTML dialog box is one way to clean up imported code or legacy sites.

49

50

CHAPTER 3 ■ STARTING OFF RIGHT: CONFIGURING EXPRESSION WEB

OPTIMIZATION OPTIONS NOT TO USE I do not recommend using the Remove Whitespaces options. If you use them, your code will run together, making it very hard to troubleshoot or even read. Some people feel that removing whitespace will protect their code, which is not true since most web editors easily reformat the code.

■Tip In Expression Web, simply right-click while you’re in Code view, and select Reformat HTML to restore text indenting.

Another reason some people remove whitespace is to eliminate a few bytes of page weight. You will not reduce the weight enough to make it worth the time it takes to reformat the code when you need to work on the page again. The other section I don’t recommend using, or at least using with extreme caution, is the Remove Comments section. HTML comments are something that I encourage you to use, since on many occasions, you might not look at a web page for long periods of time and work on other projects in between. When you return to your page, you might not remember why you did something. HTML comments will remind you why you wrote the code you did. Many designers use comments to identify structural parts of the page. Script comments can serve the same function, but if you are using third-party scripts, they might require you to leave attribution comments in the code. Older browsers or those that do not have JavaScript enabled will keep the text of the script from being displayed in the browser. For these reasons, I recommend that you leave comments in your code.

Program Management Expression Web is highly extensible. Add-ons are available from Microsoft and third-party add-on makers that will give your site more features. Some of the add-ons might be downloaded for free and others purchased. Add-ons available at the time of this writing include PayPal buttons, shopping carts, form tools, Flash players, task pane managers—and more are becoming available all the time. The tools in the program management section allow you to create and use add-ins: • Macros: The fly-out menu here allows you to run macros you have created or launch the Visual Basic Editor or Microsoft Script Editor. • Add-Ins: Third-party tools and applications you can use in Expression Web can be accessed here. • Customize: This lets you customize the Format and other toolbars.

CHAPTER 3 ■ STARTING OFF RIGHT: CONFIGURING EXPRESSION WEB

Preferences Section In this section of the Tools menu, you set defaults for how Expression Web will start up, handle different file types, interact with other programs used in web design such as graphics programs, and handle coding options.

Application Options Clicking Application Options launches the dialog box shown in Figure 3-4.

Figure 3-4. By default, Expression Web will make itself your HTML editor, and it will automatically open the last website you worked on when it is launched.

The General, Reports View, and FTP Tabs The settings under the General, Reports View, and FTP tabs rarely need to be changed from the defaults. However, you will need to use an external graphics editor, since Expression Web has very limited image-editing capabilities, and when you double-click a graphics file, Expression Web will open Microsoft Paint to edit images. If you do not have a graphics program, such as Expression Design, Photoshop, or Fireworks, you can download Paint.NET from http://www.getpaint.net/index.html. Although this is not as full featured as the others named, it is a good free graphics program. Later in this chapter, you will be adding a thirdparty graphics editor and setting the editor you add as the default. The Configure Editors Tab Figure 3-5 shows the Configure Editors tab. Notice that Expression Web correctly picked up that my default graphics editor is Fireworks. If you have only one graphics editor and it is correctly identified, you can skip the remainder of this section.

51

52

CHAPTER 3 ■ STARTING OFF RIGHT: CONFIGURING EXPRESSION WEB

Figure 3-5. By selecting a file extension from the left-side list, you can check what will happen when you double-click a file with that extension in Expression Web. If you have more than one editor or if the editor you’d like to use is not marked as the default, follow these steps to select the editor: 1. To begin adding a new editor, locate the file extension that you want to change to a different editor; in this case, select the entry for “jpg, jpeg, gif, png” from the Extensions section of the dialog box (on the left side), as shown in Figure 3-6.

■Note If you want to use different editors for each of these extensions, you could delete each default group and add each extension back, either individually or grouped to fit your preferences.

Figure 3-6. To add an editor, click the file icon button.

CHAPTER 3 ■ STARTING OFF RIGHT: CONFIGURING EXPRESSION WEB

2. Next, select the folder icon above the Editors section, or if you prefer keyboard shortcuts, press Alt+N, as shown in Figure 3-6, to launch the Open With dialog box (shown in Figure 3-7).

Figure 3-7. Select the program you want to add. 3. In the Open With dialog box, you can choose which editor you want to use. If the program is listed in the Open With dialog box, select the program and click OK. The editor I want to add, Paint.NET, is not listed, which means I will need to use click the “Browse for more” button to locate its .exe file. This will add the program to your editor list. If you want to set it as your default, click the Make Default button, as shown in Figure 3-8, before you close the dialog box with the OK button.

Figure 3-8. Make sure that you use the OK button to save your changes.

53

54

CHAPTER 3 ■ STARTING OFF RIGHT: CONFIGURING EXPRESSION WEB

For any file extension with more than one editor listed, Expression Web will give you the option to open the page with all of the programs on the list, as shown in Figure 3-9.

Figure 3-9. Right-clicking Open With shows all editors associated with the file extension.

Page Editor Options Although I know all this configuration information might seem boring, there are bits that will make a difference in how your pages render. Here, you will be looking at the Page Editor Options. Some of the tabs will be quickly explained but have no real changes to be made; however, there are a few where you should pay attention to the settings. The ones you will be focusing on are General, CSS, and Font Families. I will touch on a few options under the Authoring, IntelliSense, and Code Formatting tabs as well. The other tabs will be grouped together. The General Tab We will quickly go through the defaults that can be selected under the General tab, which are numbered in Figure 3-10, and where appropriate I will explain the effects of the choices you might make.

Figure 3-10. Page Editor Options is where you set defaults for all of your Expression Web sites.

CHAPTER 3 ■ STARTING OFF RIGHT: CONFIGURING EXPRESSION WEB

The options on the General tab have been given numbers to make cross-referencing them with their explanations easier: 1. Automatically enclose form fields within a form: Leave this checked. 2. Assign unique IDs to new tables: If you use only data tables, checking this would be worthwhile, but if you use layout tables, you do not need and probably don’t want an ID automatically assigned. 3. Make ID unique on paste: Since there can be only one ID per page, this is probably a good item to leave checked, but you might prefer to assign IDs yourself. 4. Use and when using bold and italic toolbar buttons: You should leave this one checked, because and have semantic meaning for screen reader users. They might also help search engines determine what to pay attention to on your page as long as you do not overuse them. 5. Automatically switch keyboard to match language of surrounding text: This is almost the opposite of the Site Settings Language tab you looked at in Chapter 1. If you use multiple languages on your site and are knowledgeable about the keyboard layout native to that language or country, then you might want to check this box. For all others, I recommend leaving it unchecked. 6. Prompt for accessibility properties when inserting images: This is new to Expression Web and something I am glad to see, since alt attributes are not only required for accessibility but also for all valid versions of XHTML and HTML 4.01. Do not remove the check from this check box, or it will haunt you. 7. Spelling Options: Clicking this button opens a dialog box with spelling options. I do not recommend selecting the check box to hide spelling errors, since errors that should have been caught by a spell-checker might cause your site to lose credibility. 8. Show Paste Options buttons: This option will allow you to decide whether to bring formatting when you are pasting text. 9. Word wrap: This is for the Code view, since text wraps automatically in Design view under HTML specifications. This setting is a personal preference; there is no right or wrong choice. 10. Auto indent: This option is also applied to the Code view and is another personal preference—one that will make it easier for you to move from one section of the code to another. I recommend leaving it checked. 11. Selection margin: This adds a margin to the left side of your code to make it easier to work with blocks of text in Code view. 12. Highlight invalid HTML: I recommend keeping this checked, since it makes finding errors much easier. This is particularly useful when you are working on a web page that is not valid and moving it to current standards. 13. Highlight incompatible HTML: This will alert you to code that is not correct for your doctype, such as elements that improperly closed. I can think of no reason to disable this option.

55

56

CHAPTER 3 ■ STARTING OFF RIGHT: CONFIGURING EXPRESSION WEB

The AutoThumbnail Tab The next tab is AutoThumbnail, which allows you to make small thumbnails of your images and link them to the larger version in one operation. I recommend you make your thumbnail images in a dedicated graphics editor where you have full control of your optimization settings, but if you are just putting together a prototype, the thumbnail capabilities of Expression Web are adequate. The Picture Tab The defaults here affect only images you paste into your pages by copying and pasting them into an open page or by importing a Word or other file with images embedded in it. They do not affect images you import into your local website. As with the AutoThumbnail tab, converting pictures from one format to another is best done in a full-fledged image editor. You do have limited control over the quality of your converted image from the Picture File Types dialog box using the File Type Settings, but this method of editing images is not the best one to use. The Ruler and Grid Tab There might be cases when you want to align elements on a page using a line or grid. The settings on this tab allow you to display grid lines using the spacing you choose. Remember that web pages are measured in pixels (px), which are the units of measurement for a display, not inches, centimeters, or points, which are units of measurement for print media and should not be used on the Web. The Default Fonts Tab The top half of the Default Fonts tab, shown in Figure 3-11, duplicates the Language tab of the Site Settings menu. You should set both of these to match one another. Expression Web follows the W3C recommendation of using UTF-8 as the default. Unfortunately, Expression Web adds hidden characters called Byte Order Marks (BOMs) to the top of each page, which can cause problems with some web servers and all PHP pages. If you are using English or another western European language, I recommend selecting US/Western European (ISO), as shown in Figure 3-12, to prevent the BOM characters from being added to the page. If you are using Cyrillic, Arabic, Hebrew, or an Asian language, use the language-specific encoding, UTF-8, or UTF-16. The bottom half of the Default Fonts tab will allow you to set the default fonts that are used inside Expression Web.

■Note Changing the default from Times New Roman for Design view will not change the browser default when the page is viewed. Changes made here will affect pages only when viewed in Design view. I recommend leaving the defaults as they are set, since Times New Roman is the default for Internet Explorer and Firefox. To change the fonts used by the browser (and in Design view), you will need to use CSS.

CHAPTER 3 ■ STARTING OFF RIGHT: CONFIGURING EXPRESSION WEB

Figure 3-11. The character set tells the browser what set of alphanumeric and symbol characters will be used on the page.

Figure 3-12. In most cases, US/Western European (ISO) will be your best choice for the default Web Expression character set. If you want to change the font displayed in Design view, use a font family in your CSS body definition. That way, what you see in Design view will match what the visitor sees on the Web. The Code view settings, on the other hand, will not affect how your code is displayed on the Web, and you should set those for your own comfort. Users with high-resolution screens might find 9-point text too small for comfort, while others might prefer a smaller font so they can see more at a time. The Code Formatting Tab There are a lot of settings you can change on the Code Formatting tab. The defaults will work well for most people, but if you have a code display preference, you can configure Expression

57

58

CHAPTER 3 ■ STARTING OFF RIGHT: CONFIGURING EXPRESSION WEB

Web to match it. It is possible to get very granular in your display settings, down to specifying which attributes will contain a line break or a specific number of spaces and where those will be located. Unless you have a particularly strong preference, I suggest leaving the defaults. The Color Coding Tab Using color to distinguish elements, attributes, values, selectors, properties, and scripts will make it easier to spot problems caused by improper editing as well as missing elements. For most people, the defaults do not need to be changed, but if you prefer a specific color scheme, this is where you change it. The IntelliSense Tab Also referred to by some as code completion, IntelliSense is one of the most useful features Expression Web has when you are working in Code view. I recommend checking the boxes for all options, as shown in Figure 3-13, since selecting code as you type and putting in the proper quotes will prevent code errors from creeping in.

Figure 3-13. IntelliSense can help you prevent typos. The only drawback to IntelliSense is that it does not support scripting languages other than ASP.NET 2.0. There might be add-ons available in the future to add support for other scripting languages.

CHAPTER 3 ■ STARTING OFF RIGHT: CONFIGURING EXPRESSION WEB

The CSS Tab It is not possible to discuss the CSS tab, shown in Figure 3-14, without discussing CSS. In this section, there are several exercises and sidebars to help you make sense of the options you will be choosing here. Consider this an appetizer before you start using the CSS-related task panes in creating your pages.

Figure 3-14. A few changes to the CSS defaults will make your work flow better.

CSS BASICS Recall that CSS stands for Cascading Style Sheets; these stylesheets contain a series of styles and definitions (we will be working with CSS more extensively in Chapter 5). Each style consists of three components: • Selector: This is typically an HTML element, a class, or an ID. • Property: This is the presentation item you are trying to define. • Value: This is the property definition. In the following examples, you will see one of each of the types of selections and an example of its use. The general syntax of a CSS style follows: selector {property1: value;}

Continues

59

60

CHAPTER 3 ■ STARTING OFF RIGHT: CONFIGURING EXPRESSION WEB

You can have more than one property in a style: selector { property1: value; property2: value; }

Selectors There are three types of selectors: • HTML element: The style definition will affect all instances of the specified element on pages that use this style; for example, to set the color of all elements, you would use this definition: h3 {color: #666666;} • Class: This style will apply to any element that has the class applied and might be used more than once on a page: .feature {font-style: italic;} • ID: Styles assigned with an ID can be used only once per page, so you should reserve them for structural elements: #special { background-color: #efefef; border: medium #666666 solid; padding: .5em 1em; margin: 1em 6em; } The following image shows what the browser would display with a with id="special", an defined as in the previous code snippet, and the feature class applied to the paragraph element.

CHAPTER 3 ■ STARTING OFF RIGHT: CONFIGURING EXPRESSION WEB

A is a block-level element with no semantic meaning that is normally used for sections. Think “page divisions.” Though not used in this example, a is an inline element used as a hook to apply a style or to provide for a tooltip or script ID. In all, six property elements are used in this sidebar’s example: • color • background-color • border • font-style • margin • padding

CSS Shorthand Expression Web gives you the option to write each CSS property individually or to use what is called CSS shorthand, where multiple properties and values are written on one line. The border style in this sidebar uses shorthand. There are three separate values for border: size, type, and color. Without any sort of shorthand, that one line of CSS would be written as follows: border-top-style: solid; border-top-width: medium; border-top-color: #666666 ; border-right-style: solid; border-right-width: medium; border-right-color: #666666 ; border-bottom-style: solid; border-bottom-width: medium; border-bottom-color: #666666 ; border-left-style: solid; border-left-width: medium; border-left-color: #666666 ; While some people prefer the expanded format while learning CSS, using shorthand will make your stylesheet more compact, faster-loading, and, in most cases, easier to read and edit. We will go into the specifics of properties and values later in the book when you are working with the CSS task panes.

In the CSS tab, you will leave the Auto Style Application setting selected, since this is the best choice for most users. This setting tells Expression Web to look at what you are doing and apply any matching style linked to your page. If there are no matching styles, then Expression Web will create a new style to match your font, border, background, layout, and so forth.

61

62

CHAPTER 3 ■ STARTING OFF RIGHT: CONFIGURING EXPRESSION WEB

By default, the majority of the CSS that Expression Web writes will be written as styles in the section of the page. However, there are two types of styles that are written inline, as shown in Figure 3-14. My recommendation is that you change those two settings. All of the options should be set to “CSS (classes)” with the exception of the “Page properties on the tag” option, which does not offer the option to use classes since it is an HTML element. Otherwise, you lose many of the benefits of stylesheets, that is, the ability to make one change that affects all the pages on your site. The two settings Microsoft has chosen to make inline follow: • The first inline setting is the “Page properties on the tag” option, where your options are the “CSS (inline styles)” option and the “CSS (rules)” option. Since a tag will be used only once on the page, you would not need a class. In some circumstances, you might want to use an ID to select a different default for certain pages in your site when an ID would be appropriate to do that, but for your normal defaults, redefining the element is the best choice. • The other option that is set to inline styles is the “Sizing, positioning, and floating” option. Leave the defaults, the “CSS (inline styles)” setting, until you are directed to change them for the exercises in this chapter.

TYPES OF STYLES Styles can be written and applied using one of three methods: • Inline styles: These styles apply only at the location where the style is written and are similar to the old HTML 3.2 element:

• Style block: The style is written in the section of the page and will apply to every selector on the page:

The style is applied to every

element on the page by default. • External stylesheet: Styles are in a separate document with the .css extension attached to the page either by using a relative link

CHAPTER 3 ■ STARTING OFF RIGHT: CONFIGURING EXPRESSION WEB

or by importing it into the page:

Using external stylesheets will keep the style definitions the same throughout your site. section styles can be used to change the appearance on just one page. Inline styles will allow you to override both the section style and any style in an external stylesheet for one instance on your page. Since it is more difficult to locate and change inline styles on your pages, they should be used sparingly.

Creating Styles Although you will be creating styles in this book using the new styles method, you can also create styles by using the buttons on the Format toolbar. When you use the Format toolbar to create a style, Expression Web will automatically name the styles with class names of .style1, .style2, .style3, and so forth. The check box you see near the bottom of the CSS tab lets you choose whether to limit the automatic application of styles to those created by Expression Web or to include those you create or rename. My recommendation is to leave this box checked. To avoid creating separate classes for each image on your page, leave the check in the “Use width and height attributes for images instead of CSS” box. This will also help your page load properly. Have you have ever visited a web page where the page rearranged itself after all the images loaded? It did that because the height and width of the image were not in the HTML, and the browser did not know how much space to reserve when laying out the page. In that case, the browser has to reflow the page, because the image and stylesheet usually load after the HTML. Exercise 3-1 shows the effect of changing the CSS Tab Styles setting, Exercise 3-2 shows the effect of changing the Body setting to Rule, and Exercise 3-3 shows how to change styles for the positioning of your website.

Exercise 3-1. Seeing the Effects of Changing the CSS Tab Styles Setting In this exercise, you will compare the effects of the default settings of Expression Web with the recommended changes to the effects of the CSS styles that are written as you create them in Expression Web. 1. Download the exercise.txt file from http://foundationsofexpressionweb.com/exercises/ chapter3/ch3example1.txt or the chapter3.zip file containing all the Chapter 3 exercise files, and save a copy to your project web. Or type the following lines into Code view and save them as exercise.html:

63

64

CHAPTER 3 ■ STARTING OFF RIGHT: CONFIGURING EXPRESSION WEB

CSS Test

CSS Test Page

Menu Section