Table of Contents
Introduction 1
Hour 1: Get to Know Microsoft Expression Web 2 3
Introducing Expression Web 2 3
Getting and Installing Expression Web 2 5
Getting Acquainted with the Workspace 6
Changing and Customizing the Workspace 15
Summary 20
Q&A 20
Workshop 20
Quiz 21
Answers 21
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
Exploring the Website in Expression Web 2 34
Keeping Your Pages Functional 36
Summary 38
Q&A 38
Workshop 39
Exercise 39
Hour 3: A Website Is Really Just Text-Build One in 5 Minutes 41
Introduction 41
Creating a New Website 41
Creating Your First Web Page 44
Testing Your Web Page in Multiple Browsers 47
Summary 50
Q&A 50
Workshop 51
Quiz 51
Answers 51
Hour 4: Building the 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 60
Summary 63
Q&A 64
Workshop 64
Quiz 65
Answers 65
Exercise 65
Hour 5: Get Connected-Building Hyperlinks for Navigation and Further Exploration 67
Introduction 67
Importing a New Page 68
Creating an Internal Hyperlink 69
Creating External Links and New Windows 73
Creating Links Within Documents Using Bookmarks 76
Creating an Email Hyperlink 78
Summary 79
Q&A 79
Workshop 80
Quiz 80
Answers 80
Exercise 81
Hour 6: Get Visual, Part 1: Adding Images to Your Page 83
Introduction 83
Images on the Web: Three File Types for Three Uses 84
Importing and Inserting an Image 85
Using Picture Properties to Change the Appearance of an Image 89
Summary 94
Q&A 94
Workshop 95
Quiz 95
Answers 95
Exercise 96
Hour 7: Get Visual, Part 2: Advanced Image Editing, Thumbnails, and Hotspots 97
Introduction 97
Exploring the Pictures Toolbar 97
Using the Pictures Toolbar to Add and Change an Image 100
Creating Hotspots 106
Summary 107
Q&A 108
Workshop 108
Quiz 109
Answers 109
Exercise 109
Hour 8: Cracking the Code-Working in Code View 111
Introduction 111
Using Code View as a Learning Tool 111
Tools in Code View 116
Summary 121
Q&A 122
Workshop 123
Quiz 123
Answers 123
Exercise 124
Hour 9: Get Boxed In, Part 1: Using Tables for Content 125
Introduction 125
Five-Minute History of Tables in Web Pages 126
Creating a Table from Scratch 127
Changing the Appearance of a Table 129
Using the Table Layout Tool to Make Nonstandard Tables 138
Summary 140
Q&A 140
Workshop 141
Quiz 141
Answers 141
Exercise 142
Hour 10: Bringing Style to the Substance with Cascading Style Sheets 143
Introduction 143
CSS Sans Code 144
Setting the Font Family for the Entire Document 149
Using the Cascade to Override Styles 151
Summary 159
Q&A 159
Workshop 160
Quiz 160
Answers 160
Exercise 161
Hour 11: Get Boxed In, Part 2: Knee Deep in CSS 163
Introduction 163
CSS Classes-Because Not All Content Should Be Treated Equally 164
Introducing ID-Classes Almost Identical Twin 169
Classes Within Classes: Micromanaging the Content 172
Pseudoclasses 173
Understanding the Box Model 176
Summary 179
Q&A 180
Workshop 180
Quiz 180
Answers 181
Exercise 181
Hour 12: Styling with Code: Fully Immersed in CSS 183
Introduction 183
Introducing CSS: The Code Version 184
Applying Classes to Tags in Code View 189
Using Divs and Spans to Separate Content 190
Creating External Style Sheets 193
Summary 201
Q&A 202
Workshop 202
Quiz 203
Answers 203
Exercise 203
Hour 13: Get Visual, Part 3: Images as Design Elements with CSS 205
Introduction 205
Images as Backgrounds: A Crash Course 206
Using Images as List Bullets 214
Importing Adobe Photoshop Files 216
Summary 220
Q&A 221
Workshop 221
Quiz 222
Answers 222
Exercise 222
Hour 14: Building the Framework 223
Introduction 223
Starting with Pen and Paper 224
Building the Framework from Boxed Parts 225
Styling the Layout Boxes 227
Understanding Positioning 230
Applying the Framework to Existing Pages 233
Building the Framework Using Eric MeyerÕs CSS Sculptor 240
Summary 247
Q&A 248
Workshop 249
Quiz 249
Answers 250
Exercise 250
Hour 15: Buttons, Buttons, Buttons 251
Introduction 251
Buttons: A Brief Definition 252
Creating Interactive Buttons Using Expression Web 252
Creating Buttons from Scratch Using CSS 256
Summary 264
Q&A 265
Workshop 266
Quiz 266
Answers 266
Exercise 266
Hour 16: Using Behaviors 267
Introduction 267
Behaviors: An Introduction 267
Modifying Behaviors 270
The Many Behaviors of Expression Web 2 272
Summary 287
Q&A 287
Workshop 288
Quiz 288
Answers 288
Exercise 288
Hour 17: Frames and Layers 289
Introduction 289
Frames: An Introduction 289
Editing Individual Frames 293
Making Framed Navigation 297
Creating and Modifying Inline Frames 298
Set Text of Frame Behavior 301
Creating Advanced Functionality Using Layers 304
Summary 310
Q&A 311
Workshop 312
Quiz 312
Answers 312
Exercise 313
Hour 18: Building a Functional Menu 315
Introduction 315
The Layers Based Menu 316
Pure CSS Drop-Down Menus: A Clean Alternative 324
Summary 333
Q&A 334
Workshop 335
Quiz 335
Answers 335
Exercise 336
Hour 19: Dynamic Web Templates 337
Introduction 337
Dynamic Web Templates 338
Understanding Dynamic Web Templates 345
Summary 354
Q&A 355
Workshop 355
Quiz 355
Answers 356
Exercise 356
Hour 20: Get Interactive with Forms 357
Introduction 357
Creating Forms in Expression Web 2 358
Making Use of Form Results 365
Other Uses for Form Results 370
Forms in Code View 371
Summary 373
Q&A 374
Workshop 374
Quiz 374
Answers 374
Hour 21: Working with Flash and Silverlight 375
Introduction 375
Flash: An Introduction 376
Adding the <embed> Tag for Full Cross-Browser Compatibility 381
Silverlight: An Introduction 382
Placing Silverlight Applications in Your Page 383
Bonus: Making the Galleries Your Own 390
Summary 391
Q&A 392
Workshop 393
Quiz 394
Answers 394
Exercise 394
Hour 22: Beyond the Basics: PHP in Expression Web 2 395
Introduction 395
PHP: An Introduction 396
Installing PHP on Your Computer to Test PHP Scripts 397
Using PHP and HTML to Create a Contact Page 400
Creating an Email Form Using PHP 403
Added Functionality 409
Summary 412
Q&A 413
Workshop 413
Quiz 413
Answers 414
Hour 23: Beyond the Basics, Part 2: Building a Site with ASP.NET 415
Introduction 415
Getting a Jump Start by Using a Starter Kit 416
The ASP.NET Master Page 418
The Master Page in Code View 421
ASP.NET Content Pages 423
Content Pages in Code View 423
Getting Data from External Sources 426
Personalizing and Styling an ASP.NET Site 429
Summary 433
Q&A 434
Workshop 434
Quiz 435
Answers 435
Exercise 435
Hour 24: Publishing Your Website 437
Introduction 437
A Word on Domains and Web Hosting 438
Four Different Publishing Options 439
Example: Publishing Content Using FTP 445
Advanced Publishing Settings 447
Summary 451
Q&A 452
Workshop 453
Exercise 453
Index 455
0672330296, TOC, 9/3/08
Forewords & Introductions
IntroductionIntroductionAbout This Book
Because you have opened this book and started reading the introduction, I am assuming that you are interested in learning how to create websites using Microsoft's new and exciting web development application, Expression Web 2. If so, I congratulate you: By choosing this application as your platform, you are already well on your way to creating functional and well-designed sites based on web standards. In other words, unlike me, you are putting the proverbial horse before the cart and starting at the beginning rather than learning things the hard way.
Expression Web 2 is the second version (duh!) of a web design and development platform that sees Microsoft take a whole new approach to the concept of web standards. As a result, you now have an application that produces standards based websites right out of the box without requiring any tweaking or custom coding on your end. In fact, using Expression Web 2, you can create advanced standards-based websites with lots of fancy interactive features without ever writing a line of code. And with that the threshold for learning, understanding, and creating websites that look and behave the same across all browsers and platforms is lowered to a level anyone can manage.
When I started writing this book, I spent a lot of time thinking about you, the reader; more specifically how to ensure that after reading this book, you would walk away with not only an understanding of the application but also how to use it to get from an idea to a finalized product. The result of my ponderings was a website called MyKipple.com that showcases many of the basic and more advanced functions available inExpression Web 2. By following the tutorials in this book, you will build the MyKipple.com website from scratch and in the process learn how all the different elements come together and how to get the most out of the application. When you have finished the last hour and the site is complete, you will have both the tools and know-how to build your own websites using HTML (Hypertext Markup Language), CSS (Cascading Style Sheets), and the many other functions that Expression Web 2 offers. You will also have a basic understanding of how the application deals with more advanced coding languages such as ASP.NET and PHP, and you'll even learn how to publish a simple Silverlight application.
Accompanying this book is a small web site that contains information about the book itself along with the lesson files for each hour and in time a Wiki or a forum for you the reader to get further information and showcase your work. The web site is located at http://expression.pinkandyellow.com.Who Is This Book For?
I always ask people why they do what they do because it says volumes about the end result. Therefore it is only fair that I ask myself the same question and provide you with the answer. So, Morten, why did you write this book?
When I started building websites in the 1990s, I really had no clue what I was doing other than a vision of what I wanted to create. And when I looked around for help in the form of books or tutorials, I couldn't find anything that spoke to me. What was available was either too technical or too pointless. No matter where I looked, I could only find basic algorithms on how to perform simple tasks, never detailed explanations of how to get from point A to point B. As a result, I ended up teaching myself how to do things. Needless to say I learned the true meaning of the term "taking the long way around."
So, when I signed up to write this book, I had one main goal in mind: To write the book I was looking for and really needed when I started out—a book that took me all the way from a basic sketch on a napkin to a fully working website and taught me how to use the application at the same time.
As a result, this book is written with the novice designer in mind. No, let me rephrase that: As a result, this book is written in a way that a novice designer will understand and learn from. I make this distinction because even if you are a seasoned designer or developer, I am certain you will find lots of useful information inside these covers.
Being introduced to Expression Web 2 has had an enormous impact on my business because it reduced what used to take hours or days to only minutes. In particular I am talking about the application's excellent CSS features. More than just a design and development application, Expression Web 2 is a tool that helps you learn, understand, dissect, and modify style sheets with unprecedented speed and accuracy. Getting a firm grasp on these tools and understanding how to use them in real-world scenarios will almost certainly make your work with CSS more efficient and productive, regardless of whether this is the first time you've encountered the term style sheets or you are a seasoned professional with years of experience.
So, without further ado, I wish you a pleasant journey and hope you come out on the other side with the skills, understanding, and confidence to take on the wild and exciting world of web design.
Lykke til!
Morten Rand-Hendriksen, July 14, 2008
© Copyright Pearson Education. All rights reserved.
loading...