The true measure of any design tool is how well the interface contributes to your productivity. Expression Web 2’s interface is designed specifically to make access to tools easy while maintaining maximum real estate for the design surface.
Most of the tools you will use in Expression Web 2 are available in task panes, as shown in Figure 1.1.
Task panes can be maximized by clicking the Maximize button, as shown in Figure 1.2.
You can also drag a task pane to any edge of the Expression Web 2 interface to dock it on that edge or drag it away from an edge to make it a floating task pane that can be positioned anywhere within the user interface.
Task panes can also contain tabs so that multiple task panes can be present within the same window. Figure 1.3 shows the Manage Styles task pane with several tabs inside it for other task panes. To activate one of the other task panes, simply click the tab. Arrow buttons are provided when there isn’t enough room to display all tabs.
In Figure 1.3, notice that if there are more task panes that can fit in the available area, a jagged line appears on the right edge of the window to indicate that more task panes are available. You can access the additional task panes by clicking the small arrow buttons.
To add a task pane as a tab within another task pane, simply drag one task pane on top of another.
Expression Web 2 displays all the files and folders in the current Web site inside the Folder List task pane, as shown in Figure 1.4. You can quickly locate any file or double-click on a file to edit it.
The Folder List has many of the same features you would expect in a file manager, such as creating new folders, adding files, deleting content, and so on. Right-click a file or folder in the Folder List for a menu of options.
The Folder List is similar to the Web Site tab in the main Expression Web 2 window, but the Web Site tab allows for sorting and more customized views than the rudimentary view provided by the Folder List.
The design surface (shown in Figure 1.5) is the area in Expression Web 2 where you create your Web pages. The view of your Web site matches what you will see when you view the Web page in a browser.
Contrary to what some people believe, the design surface in Expression Web 2 does not use Internet Explorer for rendering. It is a browser-independent rendering of your Web page.
The Status Bar (see Figure 1.6) in Expression Web 2 is extremely informative. It contains tools that warn you when incompatible or invalid code is detected. It also provides information at a glance concerning the schema of the page, and so on.
→ | For more information on the Status Bar, see Chapter 8, “Using Web Page Views,” p. 123. |
Expression Web 2 can easily work with single pages, but to get the most out of it, you’ll want to create a Web site.
Expression Web 2 can create Web sites on your local file system or on a remote file system or server. You can use the FrontPage Server Extensions if you wish (although they are not required), and you also can use FTP to create a Web site and open an existing one.
→ | For more information on creating Web sites, see Chapter 2, “Creating a Web Site,” p. 27. |
Expression Web 2 has 15 different reports that can be displayed for a Web site. Using these reports, you can easily identify problems such as slow pages, unlinked files, broken hyperlinks, and so on. You also can get a good view of your Web site in its entirety, as shown in Figure 1.7. You can access reports by clicking the Reports tab at the bottom of the main Expression Web 2 window as long as no page is currently open.
→ | For more information on Web site reporting, see Chapter 4, “Web Site Management and Reporting,” p. 77. |
Expression Web 2 has a robust file publishing system that can use the file system, FTP, or HTTP via the FrontPage Server Extensions. You can choose to publish only those files that have changed since the last time you published, or you can publish all files.
The Remote Web Site view (see Figure 1.8) makes it easy to drag and drop between Web sites and get a good view of what files are out of sync between the remote site and the local site.
→ | For more information on publishing a Web site, see Chapter 3, “Publishing a Web Site,” p. 43. |
As a “what you see is what you get” (WYSIWYG) design tool, you can expect Expression Web 2 to help you create standards-compliant Web sites with minimal effort. There are plenty of features available to help make that possible.
Most Web sites use tables on at least a few pages. Expression Web 2 has many powerful features to aid in creating and formatting tables.
The Layout Tables feature (see Figure 1.9) makes it incredibly easy to create complex layouts with tables. Even after your layout is complete, you can modify it by simply dragging and dropping table cells.
For more information on using tables and layout tables, see Chapter 9, “Using Tables and Layout Tables,” p. 145. |
To help you create a Web site with a consistent look and feel across all pages, Expression Web 2 offers Dynamic Web Templates. You can create any number of Dynamic Web Templates and attach pages of your choice to each.
Dynamic Web Templates also make it easy to make site-wide changes. Simply modify a Dynamic Web Template and save it. When you do, pages attached to that template will be updated automatically.
→ | For more information on using Dynamic Web Templates, see Chapter 21, “Using Dynamic Web Templates,” p. 367. |
A robust find and replace tool is a requirement. Expression Web 2 not only includes a flexible and powerful tool for find and replace (see Figure 1.10), but it also incorporates regular expressions so you can create complex queries.
For more information on using the Find and Replace tool, see Chapter 16, “Using Find and Replace,” p. 275. |
It’s never been easier to edit tag properties. The Tag Properties task pane (see Figure 1.11) shows you all the properties of a selected HTML element in one location. By bolding properties that have been set, this tool makes it simple to see how tags have been configured.
→ | For more information on using the Tag Properties task pane, see Chapter 12, “Editing Tag Properties,” p. 211. |
The Quick Tag Tools (see Figure 1.12) are an easy way to select a specific page element. You also can access properties of the selected element or modify HTML code directly.
→ | For more information on using the Quick Tag Tools, see Chapter 13, “Using the Quick Tag Tools,” p. 223. |
Before Microsoft released Expression Web 2, it certainly wasn’t well known for creating Web design tools with powerful Cascading Style Sheets (CSS) tools. The CSS tools in Expression Web 2 are arguably better than anything else available.
→ | For more information on using CSS with Expression Web 2, see Chapter 17, “Creating Style Sheets,” p. 293. |
The Style Builder (see Figure 1.13) is an easy-to-use interface for styling page elements using CSS.
The Manage Styles task pane (see Figure 1.14) shows CSS styles in one location. You can modify styles, move styles around, and apply styles using this task pane.
The Apply Styles task pane (see Figure 1.15) complements the Manage Styles task pane nicely. One of the greatest features of the Apply Styles task pane is its capability to easily help you determine which CSS styles apply to particular page elements.
Site optimization is an important part of developing any Web site. After you have developed your site, you’ll want to clean up any CSS code problems, fix any browser incompatibilities, and ensure that your site is compliant with the latest accessibility standards. Expression Web 2 offers tools for all those tasks.
There are two different standards for Web site compliancy: Section 508 and the Web Content Accessibility Guidelines, or WCAG. Learning all the ins and outs of each would be a challenging task. Fortunately, Expression Web 2 can run reports that show you how your site fares with both standards.
The Accessibility Reports feature (see Figure 1.16) highlights pages in your site that don’t meet standards and enables you to correct problems before you deploy your Web site.
For more information on accessibility features in Expression Web 2, see Chapter 19, “Accessibility Features in Expression Web 2,” p. 343. |
Ensuring that your Web site renders properly in all browsers is a difficult task. Expression Web 2 offers the Compatibility Reports feature (see Figure 1.17) so you can identify rendering problems before they affect your site visitors.
The compatibility reports allow you to check against a browser version, document type, and CSS standard.
→ | For more information on using compatibility reports in Expression Web 2, see Chapter 20, “Designing for Compatibility,” p. 353. |
To aid in cleaning up unused CSS or to simply run a report containing details on CSS usage, Expression Web 2 offers the CSS Reports feature (see Figure 1.18).
→ | For more information on CSS reports, see Chapter 18, “Managing CSS Styles,” p. 315. |
Expression Web 2 offers many features that make it simple to add dynamic content to a Web site without writing any code.
Interactive Buttons (see Figure 1.19) are buttons that use JavaScript for a rollover effect. Creating Interactive Buttons is easy, and there are numerous predesigned buttons from which to choose.
For more information on using Interactive Buttons, see Chapter 22, “Using Interactive Buttons,” p. 383. |
Behaviors are a collection of easily configurable actions that are implemented with client-side script. Using behaviors, you can easily create dynamic effects that would normally require a considerable amount of code, and you can do it without knowing anything about writing client script.
Behaviors are accessed via the Behaviors task pane, as shown in Figure 1.20.
→ | For more information on using behaviors, see Chapter 23, Using Behaviors,” p. 395. |
Layers are commonly used in scripted, dynamic Web pages. Expression Web 2 provides tools that allow you to create layers and manipulate them easily.
Layers are configured using the Layers task pane (see Figure 1.21).
→ | For more information on using layers, see Chapter 25, “Using Layers,” p. 437. |
ASP.NET is Microsoft’s dynamic Web site technology, and Expression Web 2 not only supports the use of ASP.NET pages, but also provides quick access to ASP.NET controls using the Toolbox, as shown in Figure 1.22. You can also configure controls within the design surface in Expression Web 2.
Expression Web 2 also provides support for third-party ASP.NET controls in the /bin
folder of your Web site, as well as the ASP.NET AJAX extensions.
There’s no need to worry about testing your ASP.NET or PHP pages because Expression Web 2 ships with the Microsoft Expression Development Server, a Web server that can be used to test ASP.NET and PHP pages.
→ | For more information on ASP.NET development in Expression Web 2, see Part VII, “ASP.NET and PHP Development in Expression Web 2.” |
If you’re a PHP developer, Expression Web 2 offers color coding and IntelliSense for PHP code. You also can easily insert commonly used PHP code fragments using the Insert menu in Expression Web 2 and preview PHP pages using the Microsoft Expression Development Server.
→ | For more information on using PHP in Expression Web 2, see Chapter 35, “Using PHP in Expression Web 2,” p. 643. |
If your Web site is data-driven, Expression Web 2 brings plenty of great features to the table. Using the power of ASP.NET, Expression Web 2 allows you to create dynamic, data-enabled Web sites without writing any code.
Data connections are configured in the Data Source Library task pane (see Figure 1.23) so they can be manipulated easily within the Expression Web 2 interface.
→ | For more information on accessing data in Expression Web 2, see Chapter 37, “Accessing Data with ASP.NET,” p. 677. |
This chapter presented a brief overview of some of the best features of Expression Web 2. I think you’ll agree that there are plenty of great features in Expression Web 2, but there will certainly be many features that aren’t included and that people will want.
Expression Web 2 is an extensible product, which means features can be added by third-party developers, and you can bet that plenty of add-ins and other additions to Expression Web 2 will be available in the coming months.
You can use Visual Basic for Applications to extend Expression Web 2 yourself. If you’re interested in digging into how to customize Expression Web 2, check out Chapter 26, “Creating VBA Macros.” I’ll give you the basic knowledge necessary to build your own additions to Expression Web 2.