Morten Rand-Hendriksen

Sams TeachYourself

MicrosoftBill

Expression

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

Table of Contents

Introduction xxiii

HOUR 1 Get to Know Microsoft Expression Web 4 1

Introducing Expression Web 4 1

Getting and Installing Expression Web 4 3

Getting Acquainted with the Workspace 3

The Program Bar .4

The Menu Bar 4

Common and Other Toolbars 5

Code, Design, and Split View 7

Left and Right Panels 8

Status Bar.

11

Changing and Customizing the Workspace 11

Summary 16

Q&A 17

Workshop 17

Quiz ...

.17

Answers.

18

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

Introduction 19

Working with a Completed Website 20

Previewing the Site in Your Browser 23

Setting Up a Website and Building Pages 24

Hyperlinks 24

Images 24

Tables 25

Styling the Content 25

Page Layout 26

Buttons 26

Behaviors 26

Frames and Layers 27

The Main Menu 28

Contact Forms 28

Flash and Silverlight Galleries 29

Exploring the Website in Expression Web 4 29

Keeping Your Pages Functional 3!

vi

Contents

Summary 33

Q&A 33

Exercise 34

HOUR 3 A Website Is Really just Text: Build One in 5 Minutes 35

Introduction 35

Creating a New Website 35

Creating Your Pint Web Page 39

Testing Your Web Page in Multiple Browsers 43

SuperPreview: A Sneak Preview 45

Summary 46

Q&A 47

Workshop 47

Quiz 48

Answers 48

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

Introduction 49

Opening and Editing an Existing File Using Code View 49

Importing Styled Text from a Document 53

Cleaning Up Imported Text 54

Further Reading 58

Summary 59

Q&A 59

Workshop 60

Quiz 60

Answer 60

Exercise 60

HOUR 8 Getting Connected with (Hyper) Links: The Cornerstone

of the World Wide Web 61

Introduction 61

Import a New Page and Create an Internal Hyperlink 62

Creating External Links and New Windows 68

Creating Internal Links Within Documents Using Bookmarks 70

Creating an Email Hyperlink 72

Summary 73

Q&A 74

Workshop 74

Quiz 74

Answers 75

Exercise 75

vii

Contents

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

Introduction 77

Images on the Web: Three File Types for Three Uses 78

Importing and Inserting an Image 79

Create a New Folder and Import a New Image 80

Using Picture Properties to Change the Appearance of an Image 83

The General Tab .83

The Appearance Tab 85

Summary 88

Q&A 88

Workshop 89

Quiz 89

Answers 90

Exercise 90

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

Thumbnails, and Hotspots .91

Introduction 91

Exploring the Pictures Toolbar 92

Using the Pictures Toolbar to Add and Change an Image 94

Creating Hotspots 100

Summary 103

Q&A 103

Workshop 104

Quiz104

Answer104

Exercise 104

HOUR 8 Cracking the Code: Working in Code View 105

Introduction 105

Tools in Code View106

The Buttons of the Code View Toolbar and What They Do 106

Common HTML Tags in the Toolbox 109

Using Code View as a Learning Tool 110

Dissecting Hyperlinks in Code View 110

Images in Code View 1X3

Unordered and Ordered Lists in Code View 114

Summary*17

Q&A118

Workshop119

Quiz119

Answers119

viii

Contents

Exercise H9

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

Introduction 121

One-Minute History of Tables in Web Pages 122

Creating a Table from Scratch 123

Changing the Appearance of a Table 124

Creating Table Headings 124

Changing the Vertical Alignment of Cell Content 125

Adding Rows and Columns to the Table 126

Merging and Splitting Cells 126

Deleting Cells, Rows, and Columns from the Table 127

Changing Row and Column Si2es 127

Using Table Properties to Change the Appearance of Your Table 128

Using Cell Properties to Change the Appearance of Your Cells 130

Using AutoFormat to Quickly Change the Look of Your Tables 132

Summary 133

Q&A 133

Workshop 134

Quiz 134

Answers 134

Exercise 135

HOUR 10 Bringing Style to Substance with Cascading Style Sheets 137

Introduction 137

CSS Sans Code 139

Creating Styles with a Click of Your Mouse 139

Creating Inline Styles 142

Styling Small Selections 142

Setting the Font Family for the Entire Document 144

Styling Links (Also Known As Getting Rid of the Blue Underline) 145

CSS Tools in Expression Web 4 148

The Quick Tag Tools 148

The CSS Properties Panel 150

The Apply Styles Panel 151

The Manage Styles Panel 151

Using Various CSS Tools to Apply and Change Styles 153

Summary 153

Q&A 154

ix

Contents

Workshop 155

Quiz 155

Answers 155

Exercise 155

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

Introduction 157

CSS Classes—Because Not All Content Should Be Treated Equally 158

Create a Class and Apply It to the Content 158

Using CSS Classes to Center an Image 159

Using Boxes to Separate Content 161

Creating a Div and Placing It Around Content 161

Introducing ID—Class's Almost Identical Twin 163

Creating a Sidebar Using an ID 163

Using an ID to Center the Page 164

Creating Custom Styles Within IDs and Classes 166

Classes Within Classes: Micromanaging the Content 167

Using Classes to Control IDs 168

Pseudoclasses 168

Use Pseudoclasses to Style Links 169

Understanding the Box Model 170

Summary 173

Q&A 173

Workshop 174

Quiz 174

Answers 174

Exercise 174

HOUR 12 Styling with Code: Fully Immersed in CSS 175

Introduction 175

Introducing CSS: The Code Version 176

The Value of Separation 178

Understanding Inline Styles 179

Applying Classes to Tags in Code View 181

Using Divs and Spans to Separate Content 182

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

Creating Divs in Code View 184

Creating External Style Sheets 185

Moving Styles to and from the External Style Sheet 188

Applying External Styles to a Page 190

Summary 192

Q&A 193

X

Contents

Workshop193

Quiz193

Answers194

Exercise194

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

Introduction195

Images as Backgrounds: A Crash Course 196

Use an Image as a Background with CSS 196

The Background Attributes 197

How Backgrounds Relate to the Content and the Page 199

Applying a Background Image to an ID 200

Background Images and the Box Model 202

Stacking Order Means You Can Pile Your Images 204

Using Images as List Bullets 205

Importing Adobe Photoshop Files 207

Summary 211

Q&A 211

Workshop 212

Quiz 212

Answers 212

Exercise 212

HOUR 14 Harnessing the Power of CSS Layouts 213

Introduction 213

Starting with Pen and Paper 214

Build the Framework from Boxed Parts 215

Employing CSS Reset 216

Updating the ID Names 217

Styling the Layout Boxes 217

Understanding Positioning 221

position: absolute; 221

position: fixed; 222

position: relative; 223

position: static; 224

position: inherit 224

Applying the Framework to Existing Pages 224

Apply the New Framework to the Page 226

Summary 230

Q&A 231

xi

Contents

Workshop 231

Quiz 232

Answers 232

Exercise 233

HOUR 15 Buttons, Buttons, Buttons 235

Introduction .235

Buttons: A Brief Definition 236

Creating Interactive Buttons Using Expression Web 4 236

Make an Interactive Button 236

Saving and Editing Interactive Buttons 240

Creating Buttons from Scratch Using CSS 240

Creating a Basic Box Button 241

Creating an Advanced Box Button with Images 243

Create Text-Free Buttons with Sliding Doors 245

Summary 249

Q&A 249

Workshop 250

Quiz 250

Answers 250

Exercise 251

HOUR 16 Using Behaviors 253

Introduction 253

Behaviors: An Introduction 253

Creating a Swap-Image Behavior 254

Modifying Behaviors 256

The Many Behaviors of Expression Web 4 259

Call Script259

Change Property259

Change Property Restore 262

Go to URL262

Jump Menu263

Jump Menu Go 264

Open Browser Window265

Play Sound267

Popup Message268

Preload Images269

Set Text270

Summary27 *

Q&A271

xii

Contents

Workshop 272

Quiz 272

Answer 272

Exercise 272

HOUR 17 Frames and Layers 273

Introduction 273

Frames: An Introduction.

273

Editing Individual Frames 277

Making Framed Navigation 281

Creating and Modifying Inline Frames 282

Set Text of Frame Behavior 284

Creating Advanced Functionality Using Layers 287

Creating a Layer 287

Set Text of Layer Behavior 292

Summary 293

Q&A 294

Workshop 295

Quiz 295

Answers 295

Exercise 296

HOUR 18 Building a Functional Menu 297

Introduction 297

Making the Basic Vertical Menu Exciting 298

The Horizontal Menu—Laying a List on Its Side 301

Pure CSS Drop-Down Menus: A Clean Alternative 303

Step 1: Make a Menu List 304

Step 2: Styling the Main Menu 306

Step 3: Making the Drop-Down Menus Drop Down 309

Styling the Submenus to Make Them Stand Out 312

Summary 315

Q&A 316

Workshop 317

Quiz 317

Answers 317

Exercise 317

HOUR 19 Dynamic Web Templates 319

Introduction 319

Dynamic Web Templates 320

How Dynamic Web Templates Work 324

xiii

Contents

Understanding Dynamic Web Templates 328

Editable Regions Outside the Body 332

Editing Content Outside the Editable Regions in Individual Pages 335

Summary 336

Q&A 337

Workshop 337

Quiz 337

Answers 338

Exercise. .

338

HOUR 20 Getting Interactive with Forms 339

Introduction 339

Creating Forms in Expression Web 4 340

Making Use of Form Results 347

Other Uses for Form Results 353

Forms in Code View 353

Summary 355

Q&A 356

Workshop 356

Quiz 356

Answers 357

HOUR 21 Working with Flash and Silverlight 359

Introduction 359

Flash: An Introduction 360

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

Silverlight: An Introduction 367

Placing Silverlight Applications in Your Page 368

Bonus: Making the Galleries Your Own 373

Summary 374

Q&A 375

Workshop 376

Quiz .

376

Answers 376

Exercise 377

HOUR 22 Beyond the Basics, Part 1: PHP in Expression Web 4 379

Introduction 379

PHP: An Introduction 380

Installing PHP on Your Computer to Test PHP Scripts 381

Creating an Email Form Using PHP 386

Added Functionality 393

Summary 396

xK

Contents

Q&A 397

Workshop 398

Quiz 398

Answers 398

HOUR 23 Test Twice, Publish Once: Professional Cross-Browser Testing

with SuperPreview 399

Introduction 399

Snapshot: Instant Browser Previews Inside Expression Web 4 400

Snapshot Functionality 401

Using SuperPreview for Cross-Browser Testing 404

The Tools of SuperPreview 406

The Preview Panel(s) 410

The DOM Tree View 411

Setting Up and Using the New SuperPreview Online Service 412

SuperPreview Online Service Options 413

Identify, Diagnose, and Solve Cross-Browser Issues

with SuperPreview 415

Troubleshooting and Fixing the Sidebar in Internet Explorer 7 417

Solve IE6 Problems by Telling Visitors to Upgrade Their Browsers 419

Summary 422

Q&A 423

Workshop 423

Quiz 423

Answers 424

Exercise 424

HOUR 24 Publishing Your Website 425

Introduction 425

A Word on Domains and Web Hosting 426

The All-Important Domain Name 426

Six Different Publishing Options 427

File Transfer Protocol (FTP) 429

Secure Shell File Transfer Protocol (SFTP/SSH) 430

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

FrontPage Server Extensions 431

Web Distributed Authoring and Versioning (WebDAV) 432

File System 433

Example: Publishing Content Using SFTP 433

Publishing Open Files Without the Publishing Panel 436

XV

Contents

Advanced Publishing Settings 43S

Optimizing HTML 438

The Publishing Tab 440

Summary .

.441

Q&A 442

Exercise 442

HOUR 25 Beyond the Basics, Part 2: Get Noticed with the New Search Engine

Optimization (SEO) Checker 443

Introduction 443

What Is a Search Engine, Anyway? 444

Preparing for SEO 445

Search Engine Optimization in Expression Web 4 446

Run an SEO Check of the MyKipple Site 447

Analyzing SEO Checker Reports 448

Summary: Should I Care About SEO at All? 452

Index 455