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