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