Sams Teach Yourself Microsoft Expression Web 3 in 24 Hours Book

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