Sams Teach Yourself Microsoft Expression Web 3 in 24 Hours

by Morten Rand-Hendriksen

Overview

In just 24 sessions of one hour or less, you’ll learn how to build flexible, easy-to-maintain, standards-based websites with Microsoft Expression Web 3. Using this book’s straightforward, step-by-step approach, you’ll master the entire process, from concept through delivery. You’ll learn powerful ways to plan, design, construct, and even redesign websites that are simple to manage and easy to repurpose. Each lesson builds on what you’ve already learned, giving you a strong real-world foundation for success, no matter what kind of site you’re building!

• Step-by-step instructions carefully walk you through the most common Expression Web 3 tasks.
• Quizzes and Exercises at the end of each chapter help you test your knowledge.
• By the Way notes present interesting information related to the discussion.
• Did You Know? tips offer advice or show you easier ways to perform tasks.
• Watch Out! cautions alert you to possible problems and give you advice on how to avoid them

Learn how to…

• Build your first Expression Web 3 website in just five minutes
• Establish work processes for building standards-based sites faster, with far less work
• Write error-free code quickly and easily with Code view and IntelliSense
• Create hyperlinks that simplify navigation, perform actions, and send commands
• Understand, create, and modify CSS style sheets with unprecedented speed and accuracy
• Use Dynamic Web Templates to consistently format (or reformat) hundreds of pages
• Implement state-of-the-art interactivity with buttons, behaviors, and Cascading Style Sheets (CSS)
• Publish simple Silverlight applications and add multimedia content from Flash and other sources
• Build advanced drop-down and other CSS-based menus from scratch
• Learn how and when to use each of Expression Web’s six publishing options
• Integrate web application code written in ASP.NET or PHP

Product Details

ISBN-13:	9780768695687
Publisher:	Pearson Education
Publication date:	09/18/2009
Series:	Sams Teach Yourself Series
Sold by:	Barnes & Noble
Format:	eBook
Pages:	528
File size:	26 MB
Note:	This product may take a few minutes to download.

About the Author

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

Table of Contents

Introduction . . .1

HOUR 1: Get to Know Microsoft Expression Web 3 . . . 5

Introducing Expression Web 3 . . . 5

Getting and Installing Expression Web 3 . . . 7

Getting Acquainted with the Workspace . . . 7

The Program Bar. . . 7

The Menu Bar . . . 8

Common and Other Toolbars . . . 9

Code, Design, and Split View . . . 10

Left and Right Panels . . . 12

Status Bar . . . 14

Changing and Customizing the Workspace . . . 15

HOUR 2: Beginning at the End: A Walkthrough of the Finished Project . . . 23

Introduction . . . 23

Working with a Completed Website . . . 24

Previewing the Site in Your Browser . . . 27

Setting Up a Website and Building Pages . . . 28

Hyperlinks . . . 28

Images . . . 28

Tables . . . 28

Styling the Content . . . 29

Page Layout . . . 29

Buttons . . . 30

Behaviors . . . 30

Frames and Layers . . . 30

The Main Menu . . . 31

Contact Forms . . . 31

Flash and Silverlight Galleries . . . 32

Exploring the Website in Expression Web 3 . . . 33

Keeping Your Pages Functional . . . 35

HOUR 3: A Website Is Really Just Text: Build One in 5 Minutes . . . 39

Introduction . . . 39

Creating a New Website . . . 39

Creating Your First Web Page . . . 42

Testing Your Web Page in Multiple Browsers . . . 47

SuperPreview: A Sneak Preview . . . 49

HOUR 4: Building a Home Page: A Look Behind the Curtain . . . 53

Introduction . . .

Opening and Editing an Existing File Using Code View . . . 53

Importing Styled Text from a Document . . . 57

Cleaning Up Imported Text . . . 58

HOUR 5: Getting Connected with (Hyper)Links: The Cornerstone of the World Wide Web . . . 65

Introduction . . . 65

Import a New Page and Create an Internal Hyperlink . . . 66

Creating External Links and New Windows . . . 72

Creating Internal Links Within Documents Using Bookmarks . . . 74

Creating an Email Hyperlink . . . 76

HOUR 6: Getting Visual, Part 1: Adding Images and Graphics . . . 81

Introduction . . . 81

Images on the Web: Three File Types for Three Uses . . . 82

Importing and Inserting an Image . . . 83

Create a New Folder and Import a New Image . . . 84

Using Picture Properties to Change the Appearance of an Image . . . 87

The General Tab . . . 87

The Appearance Tab . . . 89

HOUR 7: Getting Visual, Part 2: Advanced Image Editing, Thumbnails, and Hotspots . . . 95

Introduction . . . 95

Exploring the Pictures Toolbar . . . 96

Using the Pictures Toolbar to Add and Change an Image . . . 98

Creating Hotspots . . . 105

HOUR 8: Cracking the Code: Working in Code View . . . 111

Introduction . . . 111

Tools in Code View . . . 112

The Buttons of the Code View Toolbar and What They Do . . . 112

Common HTML Tags in the Toolbox . . . 115

Using Code View as a Learning Tool . . . 116

Dissecting Hyperlinks in Code View. . . 116

Images in Code View. . . 119

Unordered and Ordered Lists in Code View . . . 120

HOUR 9: Getting Boxed In, Part 1: Using Tables for Tabular Content . . . 127

Introduction . . . 127

One-Minute History of Tables in Web Pages . . . 128

Creating a Table from Scratch . . . 129

Changing the Appearance of a Table . . . 130

Creating Table Headings . . . 130

Changing the Vertical Alignment of Cell Content . . . 131

Adding Rows and Columns to the Table . . . 132

Merging and Splitting Cells . . . 132

Deleting Cells, Rows, and Columns from the Table . . . 133

Changing Row and Column Sizes . . . 133

Using Table Properties to Change the Appearance of Your Table . . . 134

Using Cell Properties to Change the Appearance of Your Cells . . . 136

Using AutoFormat to Quickly Change the Look of Your Tables . . . 138

Using the Table Layout Tool to Make Nonstandard Tables . . . 139

HOUR 10: Bringing Style to Substance with Cascading Style Sheets . . . 145

Introduction . . .

CSS Sans Code . . . 147

Creating Styles with a Click of Your Mouse . . . 147

Creating Inline Styles . . . 150

Styling Small Selections . . . 151

Setting the Font Family for the Entire Document . . . 152

Styling Links (a.k.a. Getting Rid of the Blue Underline). . . 153

CSS Tools in Expression Web 3 . . . 156

The Quick Tag Tools . . . 156

The CSS Properties Panel . . . 158

The Apply Styles Panel . . . 159

The Manage Styles Panel . . . 159

Using Various CSS Tools to Apply and Change Styles . . . 160

HOUR 11: Getting Boxed In, Part 2: Knee Deep in CSS . . . 165

Introduction . . . 165

CSS Classes–Because Not All Content Should Be Treated Equally . . . 166

Create a Class and Apply It to the Content . . . 166

Using CSS Classes to Center an Image . . . 167

Using Boxes to Separate Content . . . 168

Creating a Div and Placing It Around Content . . . 169

Introducing ID–Class’s Almost Identical Twin . . . 171

Creating a Sidebar Using an ID . . . 171

Using an ID to Center the Page . . . 172

Creating Custom Styles Within IDs and Classes . . . 174

Classes Within Classes: Micromanaging the Content . . . 175

Using Classes to Control IDs . . . 176

Pseudoclasses . . . 176

Use Pseudoclasses to Style Links . . . 177

Understanding the Box Model . . . 178

HOUR 12: Styling with Code: Fully Immersed in CSS . . . 183

Introduction . . . 183

Introducing CSS: The Code Version . . . 184

The Value of Separation . . . 186

Understanding Inline Styles . . . 187

Applying Classes to Tags in Code View . . . 189

Using Divs and Spans to Separate Content . . . 190

Rename Styles and Apply the Change to All Tags in a Page . . . 191

Creating Divs in Code View . . . 192

Creating External Style Sheets . . . 193

Moving Styles to and from the External Style Sheet . . . 196

Applying External Styles to a Page . . . 198

HOUR 13: Getting Visual, Part 3: Images as Design Elements with CSS . . . 203

Introduction . . . 203

Images as Backgrounds: A Crash Course . . . 204

Use an Image as a Background with CSS . . . 204

The Background Attributes . . . 205

How Backgrounds Relate to the Content and the Page . . . 207

Applying a Background Image to an ID . . . 208

Background Images and the Box Model . . . 210

Stacking Order Means You Can Pile Your Images . . . 212

Using Images as List Bullets . . . 213

Importing Adobe Photoshop Files . . . 215

HOUR 14: Harnessing the Power of CSS Layouts . . . 221

Introduction . . . 221

Starting with Pen and Paper . . . 222

Build the Framework from Boxed Parts . . . 223

Employing CSS Reset . . . 224

Updating the ID Names . . . 225

Styling the Layout Boxes . . . 226

Understanding Positioning . . . 229

position: absolute; . . . 229

position: fixed; . . . 230

position: relative; . . . 231

position: static; . . . 232

position: inherit . . . 232

Applying the Framework to Existing Pages . . . 232

Apply the New Framework to the Page . . . 234

Adding a Header Image and a Menu . . . 236

HOUR 15: Buttons, Buttons, Buttons . . . 243

Introduction . . . 243

Buttons: A Brief Definition . . . 244

Creating Interactive Buttons Using Expression Web 3 . . . 244

Make an Interactive Button . . . 244

Saving and Editing Interactive Buttons . . . 247

Creating Buttons from Scratch Using CSS . . . 248

Creating a Basic Box Button . . . 248

Creating an Advanced Box Button with Images . . . 250

Create Text-Free Buttons with Sliding Doors . . . 253

HOUR 16: Using Behaviors . . . 259

Introduction . . . 259

Behaviors: An Introduction . . . 259

Creating a Swap-Image Behavior . . . 260

Modifying Behaviors . . . 262

The Many Behaviors of Expression Web 3 . . . 264

Call Script . . . 265

Change Property . . . 265

Change Property Restore . . . 268

Check Browser. . . 268

Check Plug-In . . . 270

Go to URL . . . 272

Jump Menu . . . 272

Jump Menu Go . . . 274

Open Browser Window . . . 275

Play Sound . . . 277

Popup Message . . . 277

Preload Images . . . 278

Set Text . . . 279

HOUR 17: Frames and Layers . . . 283

Introduction . . . 283

Frames: An Introduction . . . 284

Editing Individual Frames . . . 287

Making Framed Navigation . . . 291

Creating and Modifying Inline Frames . . . 292

Set Text of Frame Behavior . . . 295

Creating Advanced Functionality Using Layers . . . 297

Creating a Layer . . . 298

Set Text of Layer Behavior. . . 302

HOUR 18: Building a Functional Menu . . . 307

Introduction . . . 307

Making the Basic Vertical Menu Exciting . . . 308

The Horizontal Menu–Laying a List on Its Side . . . 311

Pure CSS Drop-Down Menus: A Clean Alternative . . . 312

Step 1: Make a Menu List . . . 313

Step 2: Styling the Main Menu . . . 314

Step 3: Making the Drop-Down Menus Drop Down . . . 319

Styling the Submenus to Make Them Stand Out . . . 321

HOUR 19: Dynamic Web Templates . . . 327

Introduction . . . 327

Dynamic Web Templates . . . 328

How Dynamic Web Templates Work . . . 332

Understanding Dynamic Web Templates . . . 336

Editable Regions Outside the Body . . . 340

Editing Content Outside the Editable Regions in Individual Pages . . . 343

HOUR 20: Getting Interactive with Forms . . . 347

Introduction . . . 347

Creating Forms in Expression Web 3 . . . 348

Making Use of Form Results . . . 355

Other Uses for Form Results . . . 360

Forms in Code View . . . 361

HOUR 21: Working with Flash and Silverlight . . . 365

Introduction . . . 365

Flash: An Introduction . . . 366

Adding the <embed> Tag for Full Cross-Browser Compatibility . . . 371

Silverlight: An Introduction . . . 372

Placing Silverlight Applications in Your Page . . . 373

Bonus: Making the Galleries Your Own . . . 378

HOUR 22: Beyond the Basics, Part 1: PHP in Expression Web 3 . . .383

Introduction . . . 383

PHP: An Introduction . . . 384

Installing PHP on Your Computer to Test PHP Scripts . . . 385

Using PHP and HTML to Create a Contact Page . . . 388

Creating an Email Form Using PHP . . . 390

Added Functionality . . . 397

HOUR 23: Test Twice, Publish Once: Introducing SuperPreview . . . 403

Introduction . . . 403

Snapshot–Instant Browser Previews Inside Expression Web 3 . . . 404

Snapshot Functionality . . . 405

Using SuperPreview for Cross-Browser Testing . . . 407

The Tools of SuperPreview. . . 409

The Preview Panel(s) . . . 413

The DOM Tree View . . . 414

Identify, Diagnose, and Solve Cross-Browser Issues with SuperPreview . . . 415

Troubleshooting and Fixing the Sidebar in Internet Explorer 7 . . . 418

Solve IE6 Problems by Telling Visitors to Upgrade Their Browsers . . . 419

HOUR 24: Publishing Your Website . . . 427

Introduction . . . 427

A Word on Domains and Web Hosting . . . 428

The All-Important Domain Name . . . 428

Six Different Publishing Options . . . 429

File Transfer Protocol (FTP) . . . 431

Secure Shell File Transfer Protocol (SFTP/SSH) . . . 432

File Transfer Protocol over Secure Sockets Layer (FTPS/SSL) . . . 433

FrontPage Server Extensions . . . 433

Web Distributed Authoring and Versioning (WebDAV) . . . 435

File System . . . 435

Example: Publishing Content Using SFTP . . . 436

Advanced Publishing Settings . . . 438

Optimizing HTML . . . 438

The Publishing Tab . . . 441

BONUS HOUR 25: Beyond the Basics, Part 2: Building a Site with ASP.NET . . . 445

Introduction . . . 445

Getting a Jump Start by Using a Starter Kit . . . 446

The ASP.NET Master Page . . . 448

The Master Page in Code View . . . 450

ASP.NET Content Pages . . . 453

Content Pages in Code View . . . 453

Getting Data from External Sources . . . 455

Personalizing and Styling an ASP.NET Site . . . 459

APPENDIX A: Building Layers-Based Menus . . . 465

Introduction . . . 465

The Layers-Based Menu . . . 465

Creating the Main Menu . . . 465

Create a Submenu . . . 466

Adding and Managing Several Drop-Down Menus . . . 471

Basing Drop-Down Menus on Layers and Behaviors Is a Double-Edged Sword . . . 473

Index . . . 475