There was a time in the not-so-distant past when a designer aiming to create Web pages needed
only a basic knowledge of Hypertext Markup Language (HTML) and a robust, reliable, and
feature-rich text editor such as Notepad. Okay, so the latter is an exaggeration, but let’s face it.
Web pages were simple then, containing limited tags used purely for formatting fonts, setting
paragraph and line breaks, adding lists, placing images, and occasionally including tabular data.
The relative simplicity of creating Web pages, then, led to the increased visibility and use of the
Web. Gone are the days of adding a few tags to a blank document in Notepad, saving the file with
an .html extension, and then opening that page within a browser to see the finished product. With
increased usage came new ways of formatting and structuring content in a Cascading Style Sheet
of Web pages, validate forms, detect browsers, create cookies, and more. As the Web became the per-
fect medium for sharing and disseminating information, users became much more finicky, demand-
ing support for audio, video, and even animation.
Beyond these simplicities however, Web pages grew to unbelievable proportions. The Web is no
longer a simple medium used merely for informational purposes. Rather, users can now expect to
do their banking, buy cars, shop for food, collaborate, and much more, online. We now work with
Web pages that are responsible for extracting content from databases, Extensible Markup Language
(XML) files, and more.
Developing for the Web no longer involves a simple understanding of HTML, a handy text editor,
and a browser. Instead, developers are increasingly required to learn other complex technologies
duction of so many Web technologies just over the last decade alone, how has the Web, and,
more specifically, how has developing for the Web increased beyond a level that so few could
have ever predicted during the Web’s infancy? The answer lies in visual editors such as Microsoft
Microsoft Expression Web facilitates the development of Web pages visually. Even better, it fosters
visual development of Web applications. While knowledge of the aforementioned Web technologies
73155c01.qxd 1/24/07 8:54 PM Page 1
is encouraged, it’s not required with Expression Web. Expression Web allows the developer to structure
and format content, and even connect to and interact with database/XML data visually using a series of
task panes, wizards, toolbars, and toolboxes. With Expression Web, years of learning and mastering com-
plex authoring and programming languages are now cut down to a matter of days and 16 convenient
Your journey through Expression Web begins here with an introduction to the product. Specifically, you
will do the following:
❑ Become familiar with the Expression Web interface
❑ Learn about the many options available within the menu bar
❑ Understand the role of Task Panes
❑ Use and customize toolbars
❑ Learn to recognize and use the Development window, the tag selector, the development area,
the tabbed file chooser, and the Design, Split, and Code views
Throughout the book, certain Expression Web Task Panes, toolbars, windows, and more will be
referenced by name. By the end of the chapter, you will have a solid understanding of where these
components are located. You’ll know which component accomplishes which task and when to use
each. This will serve as a foundation for other, more complex processes throughout the book. Let’s
Familiarizing Yourself with the Interface
Opening Expression Web for the first time reveals a program that looks and, in many cases, functions
much like other Microsoft products. Falling in line with the “familiarization through consistency” approach,
Expression Web at first glance closely resembles other Office products such as Word, Publisher, and even
its predecessor, FrontPage.
Initially, you’ll notice Expression Web’s Multiple Document Interface (MDI), where numerous windows
(otherwise known as Task Panes), the Document window, toolbars, menus, and so on, converge within a
single parent window shown in Figure 1-1.
The beauty in the MDI approach, as you may have seen by now in other Office products, is that the Task
Panes and toolbars aren’t fixed to the environment (otherwise known as docked). Instead, the toolbars and
Task Panes that facilitate the majority of property modifications for your Web pages can be undocked,
moved to a different area of the development environment, and then re-docked to that particular area.
You can also choose to not dock a Task Pane or toolbar and instead leave it floating on top of other tool-
bars and Task Panes within the development environment. Figure 1-2 provides an example of how you
might choose to customize the development environment.
73155c01.qxd 1/24/07 8:54 PM Page 2
To get an idea of just how easy it is to dock and undock toolbars and Task Panes, try rolling your cursor
over the title bar of a particular Task Pane or toolbar. Your cursor will change to the Move cursor. Now,
click, hold, and drag the Task Pane or toolbar out of its area and move it to another area within the envi-
ronment. As long as the area supports the docking of that particular Task Pane or toolbar, it should snap
automatically into place.
As you can see by the callouts in Figure 1-1, Expression Web’s user interface offers the following five
❑ The menu bar
❑ The Document window
❑ Task Panes
❑ Context menus (not shown)
Figure 1-1: Multiple Document Interface (MDI)
Menu bar ToolbarDocument window
Introducing Microsoft Expression Web
73155c01.qxd 1/24/07 8:54 PM Page 3
Figure 1-2: Customizing the development environment
While you may be surprised to learn that development of Web pages within Expression Web flows
through just these five components, it’s true! The menu bar, the Development window, the myriad of
Task Panes and toolbars, and the context-sensitive menus represent 100 percent of the Expression Web
development environment. The catch (yes, there’s a catch) is that these five components trickle down
other forms of functionality — for example, the component toolbars. However, there are 17 different
toolbars that you may decide to use to work with anything from page formatting using CSS to page
structuring using tables. Task Panes are another example. While I mentioned that Task Panes represent
core functionality within Expression Web, I have yet to mention that there are 18 Task Panes that you
can utilize based on the task at hand.
While I’ll certainly cover the myriad of Task Panes, toolbars, and so on, as the book unfolds, this chapter
is meant as a gentle introduction to the many components that make up the Expression Web development
environment. This chapter should help you identify the Folder List or Tag Properties Task Pane, identify
the Tools menu item, recognize the Document window, and even recognize what the Common toolbar is
so that, in later chapters, when you read about opening a particular toolbar, accessing a particular menu
item, or even opening a Task Pane, it will come as naturally as blinking.
73155c01.qxd 1/24/07 8:54 PM Page 4
The Menu Bar
Arguably, the most crucial component included within Expression Web is the menu bar. Like most
Microsoft products, the menu bar allows for simple file-based operations such as opening a docu-
ment, saving a document, printing, closing, cutting, copying, pasting, and much more. Unlike other
Office products, however, the menu bar also includes numerous other options that are specific to
For example, the Task Pane menu item, which I touched on in the previous section, enables you to open
any one of the 18 Task Pane windows within Expression Web. Like the Task Pane menu item, the Site
menu item is also specific to Expression Web, enabling you to choose options for managing a Web site,
opening and creating reports, copying a Web site, and more.
In all, there are 12 menu items within the menu bar. The following table provides a basic outline of each
menu item and its common usage.
Menu Item Usage
File Use options within the File menu for performing common file-based operations
such as creating a new document, opening an existing document, saving a docu-
ment, opening a site, closing a site, launching the Site Publishing Wizard, import-
ing and exporting files and sites, previewing your page in the browser, printing,
opening recent files and sites, and exiting the program.
Edit You can use options within the Edit menu to perform common word-processing
operations such as cutting, copying, pasting, deleting, selecting all, launching
the Find and Replace dialog, and more. Other non–word-processing features
offered within this menu include checking files in and out (when versioning is
enabled), accessing various code-only options (while in Code view), and undo-
ing and redoing changes to a particular page.
View As an Expression Web user, you can access options within the View menu for
customizing the look and feel of the development environment. For example,
you may decide to show the