Sams Teach Yourself Microsoft Expression Web 3 in 24 Hours- P1 ppsx

Sams Teach Yourself Microsoft Expression® Web 3 in 24 Hours Copyright © 2010 by Sams Publishing All rights reserved.. .111 9 Getting Boxed In, Part 1: Using Tables for Tabular Content..

800 East 96th Street, Indianapolis, Indiana, 46240 USA

Morten Rand-Hendriksen

Sams Teach Yourself

24

in Hours

Microsoft

Web 3

Sams Teach Yourself Microsoft Expression® Web 3 in 24 Hours

Copyright © 2010 by Sams Publishing

All rights reserved No part of this book shall be reproduced, stored in a retrieval system, or

transmitted by any means, electronic, mechanical, photocopying, recording, or otherwise, without

written permission from the publisher No patent liability is assumed with respect to the use of

the information contained herein Although every precaution has been taken in the preparation of

this book, the publisher and author assume no responsibility for errors or omissions Nor is any

liability assumed for damages resulting from the use of the information contained herein.

First Printing September 2009

Trademarks

All terms mentioned in this book that are known to be trademarks or service marks have been

appropriately capitalized Sams Publishing cannot attest to the accuracy of this information Use

of a term in this book should not be regarded as affecting the validity of any trademark or service

mark.

Warning and Disclaimer

Every effort has been made to make this book as complete and as accurate as possible, but no

warranty or fitness is implied The information provided is on an “as is” basis The author and the

publisher shall have neither liability nor responsibility to any person or entity with respect to any

loss or damages arising from the information contained in this book or from the use of programs

accompanying it.

Bulk Sales

Sams Publishing offers excellent discounts on this book when ordered in quantity for bulk

pur-chases or special sales For more information, please contact

U.S Corporate and Government Sales

Publishing Coordinator

Contents at a Glance

Introduction .1

HOUR 1 Get to Know Microsoft Expression Web 3 .5

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

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

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

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

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

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

8 Cracking the Code: Working in Code View .111

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

10 Bringing Style to Substance with Cascading Style Sheets .145

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

12 Styling with Code: Fully Immersed in CSS .183

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

14 Harnessing the Power of CSS Layouts .221

15 Buttons, Buttons, Buttons .243

16 Using Behaviors .259

17 Frames and Layers .283

18 Building a Functional Menu .307

19 Dynamic Web Templates .327

20 Getting Interactive with Forms .347

21 Working with Flash and Silverlight .365

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

23 Test Twice, Publish Once: Introducing SuperPreview .403

24 Publishing Your Website .427

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

APPENDIX A Building Layers-Based Menus .465

Table of Contents

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 .53

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

Contents

v

HOUR 7: Getting Visual, Part 2: Advanced Image Editing,

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

vi

Sams Teach Yourself Microsoft Expression Web 3 in 24 Hours

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

Introduction .145

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

Contents

vii

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

Summary .199

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

viii

Sams Teach Yourself Microsoft Expression Web 3 in 24 Hours

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

Contents

ix

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

x

Sams Teach Yourself Microsoft Expression Web 3 in 24 Hours

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

Contents

xi

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

xii

Sams Teach Yourself Microsoft Expression Web 3 in 24 Hours

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

Contents

xiii

This page intentionally left blank

About the Author

Morten Rand-Hendriksen is the owner and creative director of Pink & Yellow Media, a

boutique-style design company providing digital media consulting and creations for

indi-viduals, businesses, and broadcast television He was awarded the Microsoft MVP (Most

Valuable Professional) Award for his work with Microsoft Expression in 2008.

In addition to Microsoft Expression Web, Morten is considered an expert on the integration

and use of the publishing platform WordPress in conjunction with the application, and he

has published numerous articles and videos and done public speaking engagements on the

topic.

Sams Teach Yourself Microsoft Expression Web 3 in 24 Hours is his second published book (the

first one being Sams Teach Yourself Microsoft Expression Web 2 in 24 Hours) He is a regular

contributor to the official Microsoft Expression newsletter and has also been published in

international design magazines You can find more tutorials, articles, and other

design-related musings on his blog at http://www.designisphilosophy.com and follow his rants on

Twitter under the name @mor10 and you might run into him in different forums and

news-groups throughout the Web, usually using the same handle.

If you have any questions relating to the book, you can contact Morten by writing to

book@pinkandyellow.com or through the website dedicated to this book found at

http://expression.pinkandyellow.com.