| Editor's Note: This article is based on the Expression Web 2 release. The graphics in this article have been updated to reflect the release of Expression Web 3. Read more about the new features in, "Expression Web 3—New Features for PHP Developers". |
With the advent of Microsoft's Expression Web, many PHP developers saw this tool as tightly tied with Silverlight and Microsoft development environments—and for Expression Web 1, they were right, But with the release of Expression Web 2, Microsoft offers PHP developers a host of features that can assist you, even if you're not a hardcore Microsoft developer. From a robust testing and development environment, support for PHP includes, IntelliSense and proper handling of Byte Order Marks (BOMs) and more, Expression Web 2 simplifies the development of your PHP applications. Let's look at these in more detail.
Built-In Development Server with Integrated Browser Support
Speed and efficiency matter a lot with all forms of application development. Testing any PHP document during development obviously requires a web server, either local or remote. The disadvantage of using a remote web server is the inconvenience and time required to upload new and changed files to the remote server. For this reason, developers generally install a web server on their development computer. However, full fledged web servers such as Apache and IIS are complex applications and required configuration tasks can be rather challenging. Moreover, the use of a separate web server for testing development pages requires manual switching back and forth between multiple applications.
In steps Microsoft's Expression Web 2 (EW2).
For starters, EW2 has a built-in web server that is capable of displaying PHP pages and is virtually configuration free. (Expression Web 1 also included a built-in web server but it wasn't capable of displaying PHP pages.)
To take advantage of this all you need to do is specify the location on your hard disk of the PHP runtime to use for processing PHP content in your web pages. But the real strength of EW2's built-in web server is its integration with different browsers. When you select Preview in Browser from the EW2 menu, you are presented with the choice of various browsers—including browsers preconfigured to different window sizes—in which to view your page. (Of course, this list of browsers is limited to those which you have actually installed on your computer.) You can even make a single selection to simultaneously launch your page in multiple browsers (see figure 1).
![]() | |
| Figure 1. Expression Web 2 makes it easy for you to test your PHP application in multiple browsers and at multiple resolutions. |
As is readily obvious, comparing the treatment of a given web page in different browsers and at different window sizes couldn't be easier. The F12 hotkey makes this even more convenient by previewing the selected page in the most recently used browser. A developer can add any number of additional browsers to the original list by selecting the Edit Browser List entry. (Of course, you can only add a browser to this list once it has been installed on your computer.) This linked screencast illustrates the use of the EW2 built in web server.
PHP Includes and Design View Integration
Many PHP developers use Dreamweaver as their primary development tool. After the release of Expression Web 1 (EW1), various articles appeared comparing the strengths and weaknesses of Dreamweaver and Expression Web from the point of view of a PHP developer. One deficiency of EW1 frequently pointed out in comparisons of this type was the inability of EW1 to display PHP includes in design view. Part of my preparation for this article included the creation of a relatively simple website for a friend using PHP. I started out by creating a logo and a menu structure. Since I wanted every page in this website to include both of these items, I decided to use the technique of a PHP include. So I extracted the common elements from my home page design and saved it in a separate PHP file. Incorporating these common elements in each page simply required adding the following line of code: <?php include('PSHeader.php'); ?>. Even though these common elements are actually contained in a separate file, EW2's design view displays a composite view which is indistinguishable from that which would be generated if all the content were actually contained in a single file. Figure 2 shows what elements are used in the include and what is unique to the page.
![]() | |
| Figure 2. Displaying a common header using a PHP include is easy with Expression Web 2. |
This linked screencast illustrates how simple it is to use PHP includes.
Byte Order Marks (Problem Solved)
The initial release of Expression Web (January 2006) was targeted at ASP.NET developers and apparently the EW development team was unable to also manage to include optimizing the application for PHP developers in the first edition. Not surprisingly therefore, those PHP developers who tried to use Expression Web for their projects encountered a number of problems. For example, some developers discovered that EW 1 added a Byte Order Mark (BOM) to all of the HTML, PHP and CSS files which it creates using UTF-8 encoding. (The purpose of the BOM is to specify whether the least significant byte is placed first—as required by Intel and MIPS processors—or last—as required by Motorola processors.) The practical effect of these BOMs in PHP files was to frequently prevent PHP includes from working properly when the referencing page was delivered from a web server.
The Byte Order Mark problem has now been eliminated in EW2 by the simple step of giving the user complete control over whether or not to include a BOM in any new document. The applicable settings allow this decision to be made on a file type by file type basis Figure 3). Moreover, Microsoft set BOMs to OFF as the default for .PHP files. (The ON setting remains the default for all other common web project file types such as .HTM, .HTML, .CSS and .XML.)
![]() | |
| Figure 3. You can now set Byte Order Marks on each individual file type or document in Expression Web 2. |
EW 2 even allows the BOM setting to be overridden on a document by document basis as the developer sees fit. You can access a document's properties by right clicking on the document in the editor window and selecting Encoding. HTML encoding settings can be found on the Language tab. As shown below, including a BOM is only allowed when UTF-8 encoding has been selected (Figure 4).
![]() | |
| Figure 4. Byte order marks can only be set on UTF-8 documents. |
This linked screencast illustrates both how BOMs in a PHP document can cause problems for PHP includes and also shows how to access the EW settings to control the inclusion of BOMs.
IntelliSense for PHP
IntelliSense (Microsoft's version of code completion) has long been one of the most appreciated features of Visual Studio and EW1 also featured IntelliSense—just not for PHP. With IntelliSense, whenever you are in a code block, IntelliSense will display all of your relevant choices, as for example a list of properties (or attributes), methods or events.
![]() |
Not only does this save you typing and eliminate the possibility of spelling errors, it steers you away from options which are not valid in the current context and offers suggestions which you may not have considered. As this linked screencast shows, this feature is also extremely helpful in learning (or remembering) a new technology because it will also point out where a particular construction can be used but is not considered optimal. So if you are not an expert (or even just a little rusty) in XHTML or CSS, this feature can help guide you to a more maintainable, professional result.
IntelliSense is especially helpful for built in PHP functions since it will show the list of required parameters along with their appropriate data types.
![]() |
PHP Snippets and Built-in FTP Client
PHP snippets represent common PHP code items which can be inserted into your PHP document simply by selecting them from a menu list. For example, EW2 can write for you the entire PHP include (shown above) if you choose it from the Insert menu and then navigate to the file which you want to include. This linked screencast illustrates the various types of PHP snippets available in EW2.
EW2 also makes it easy to upload your final work product to a remote web server. Just specify the URL of the remote web site and provide the appropriate credentials and EW2 will open a standard FTP client connection to your remote web site. One interesting feature is that EW2 can compare the files in your development web site folder to the files at your remote web site to determine which ones are newer and/or different. Then should you choose, only new and modified files need be uploaded to the remote web server (Figure 5).
![]() | |
| Figure 5. Expression Web's FTP client makes it easy to spot and resolve file differences. |
CSS Support
CSS has long been established as the appropriate technique for separating content from formatting. However, the application of CSS can be extremely complex because of the potential interaction of one or more external style sheets, one or more embedded style sheets as well as inline styles (some direct and some inherited from parent elements). EW2's method of displaying the hierarchy of applicable styles and settings is capable of making sense of all these overlapping and potentially conflicting settings no matter how complex the applicable structure. The following screenshot shows the hierarchy of applicable styles in the section entitled Applied Rules (Figure 6). Settings from the selected style (.standardparagraph in this case) are shown in the section entitled CSS Properties. Those settings which remain at their defaults are shown as blank in CSS Properties.
![]() | |
| Figure 6. Managing and selecting the appropriate style sheet is simplified with Expression Web 2. |
Locating a style which you want to apply to a particular element is facilitated by the Manage Styles task pane. Here you can find a list of all available style elements, arranged either by the order in which they appear within their style, by element or by type.
![]() |
A number of filtering options are also supported.
![]() |
Add to this the ability for a developer to easily create new style sheets and to automatically link new or existing style sheets and EW2's treatment of CSS becomes extremely rich.
XHTML Syntax Support and Code Coloring
Occasional web developers and anyone who has not yet memorized every detail of the latest XHTML standard (currently 4.01 Transitional) are certain to appreciate that whenever you enter a construct which does not comply with the selected standard, an error message is displayed warning of the standards violation.
![]() | |
These messages also include an alert if a required setting is missing.
![]() | |
Colored code has long been recognized as a great aide to reading, understanding and debugging code. EW2 now extends the color coding previously available in EW1 to PHP code as well. The following screenshots illustrate how much more difficult it is to interpret non-color coded content (Figure 7).
![]() | |
![]() | |
| Figure 7. Color coded vs. monochromatic PHP code in Expression Web 2. |
Conclusion
I recall attending the launch for EW1 in San Francisco where one of the attendees was inquiring as to why a particular treasured feature which had been present in FrontPage seemed to be missing from Expression Web. The presenter responded with bad news for the questioner. That particular feature had been intentionally removed because it was not standards compliant and one of the overriding design goals for EW was to maximize standards compliance. Do not expect that feature to return, the questioner was told.
This principle has also been a guiding light for EW2 and, quite significantly, its scope has now been broadened to bring this standards compliant approach to PHP as well as to Microsoft's own ASP.NET technology. As should now be clear, most PHP developers who try it out are highly likely to be very impressed with Expression Web 2. I know that I am.
Related Resources
* This article was commissioned by and prepared for Microsoft Corporation. This document is for informational purposes only. MICROSOFT MAKES NO WARRANTIES, EXPRESS OR IMPLIED, IN THIS SUMMARY.