Article
About the Author
Raena Jackson Armitage
Raena is the Community Manager at SitePoint, and loves accessibility, usability, tidy markup, and coffee.
Expression Web 3—Your New PHP Tool Kit
I must confess, it’s been a long, long time since I’ve used a visual editor to write a web page. My text editor and I are the best of pals, and a visual development environment needs to be able to do a lot of neat stuff to impress me. So it was with a great deal of curiosity that I started poking around inside Expression Web 3, the latest version of Microsoft’s web development tool kit.
Before I start though, I just wanted to give a heads-up to pay attention because, thanks to Microsoft, there’s a quiz afterwards!
Expression Web promises an intuitive and helpful web development experience. There’s support for code highlighting and completion for a number of different syntaxes; as well as the usual suspects—HTML, CSS, and JavaScript—you can also enjoy code completion for PHP, ASP.NET, and more. Testing tools include support for live viewing of PHP pages, a neat new way to test in Internet Explorer 6 through 8 (as well as Firefox), and lots of shortcuts for trying out other browsers you’ve installed. And in a really nice touch, you can even import content from a Photoshop document, making it easy to grab image parts from layers in your PSD to include in your pages.
In this how-to tutorial, we’ll create a very simple PHP page, using the experience to put Expression through its paces. Let’s begin!
To start, we need to grab a few key items.
We’ll build a simple PHP page using this Photoshop comp I prepared earlier. If you’d like to follow along with this tutorial, feel free to grab the comp as well. Of course, if you’re feeling adventurous, it’s a great opportunity to play with a design you already have in mind!
Naturally, we’ll need a copy of Expression Web, which you can download from the Microsoft Expression site. You can choose a standalone installer for Expression Web and Super Preview alone, or install the complete Expression Studio. The trial is completely unlimited and lasts for 60 days, which should be more than enough time to decide whether you want to purchase.
A Service Pack for Expression Web was released as we were writing this article in late November of 2009. If you installed Expression Web before that date, be sure that you have the latest version.
By the way, if you do decide to purchase Expression Web 3 once your trial’s up, check whether you’re eligible for an upgrade price. Naturally, users of Expression Web 2 receive a discount on version 3; at the time of writing, however, upgrade pricing is also available to users of Adobe Creative Suite, Microsoft Office, and Visual Studio 2005. Pocket the difference and treat yourself to a sumptuous meal out!
Expression Web includes support for coding PHP, but if we want to also preview PHP pages, we’ll need to install the PHP binaries.
If you’ve yet to do so, grab the Windows PHP installer from the PHP for Windows web site. The easiest option here is to use the Installer option, as opposed to the source code. PHP, as always, is free.
There are two important configuration variables you’ll need to
check before proceeding, however: create or edit your php.ini file, and
look for the doc_root and
cgi.force_redirect lines. doc_root
must be uncommented and set to localhost, and
cgi.force_redirect must be uncommented and set to
0. If the installer has failed to do this for you,
edit it now. Since this will be a development environment, it’s probably
a good idea to ensure that display_errors is set to
Yes.
You now have all the bits and pieces you’ll need to follow along with this tutorial.
I like to become acquainted with a new app by leaping straight into action. When you first launch Expression Web, you’ll be greeted with a workspace full of sidebars, toolbars, and other goodies. In the center, you’ll see your document. Figure 1, “The Expression Web 3 workspace with a simple document open” illustrates how it looks.
This screenshot shows a simple document in Expression Web’s Split view, showing design and code at the same time. Markup can be entered in the top section, and the bottom area will reveal how it looks. You can swap between the Code, Design, or Split views using the tabs at the bottom of this window, shown in Figure 2, “Swap between Design, Split, and Code views”.
The panels to the left and right contain tools that we’ll find
useful once we start working. To the left we have a tag and CSS properties
panel, where we’re able to add various attributes and JavaScript events to
any element, or adjust the element’s CSS properties. To the right, there’s
a toolbox from which we can drag and drop a number of common elements,
such as div elements, form widgets, or components such as
Flash or Silverlight. If you’re an ASP.NET developer, there’s a collection
of draggable goodies here for you, too. Other panels are available, but
they’re hidden by default; you can reveal them using the Panels menu at
the top of your screen.
Looking at my design comp, I have a fairly good idea of what needs
to happen: there should be a container div to hold the
contents of the page, a nice heading area sitting to the left, and the
contents of the page in a div on the right.
