Preview Tools in Microsoft Expression Web 3
Posted by: Minal Agarwal
in Category Expression Web
Abstract: Microsoft Expression Web 3 has built-in preview tools which you can use to test your web pages while designing them. In this article, I have listed the preview tools focusing more on the Development Server.
Preview Tools in Microsoft Expression Web 3
Previewing your web pages is an important aspect of web designing. Every web page needs to be previewed and tested in different web browsers to debug the layout and workability issues before you publish it in a website. Microsoft Expression Web provides you with a set of tools which you can use for various purposes. Each tool has its own function and if you use some or all of them, your process of testing and debugging will become simple.
In this article we will take a look at each one of these preview tools. Please note that the article is written purely from a Designer’s perspective and hence developers may require additional tools for their testing.
Each Preview Tool has its own function. I always used the Preview in browser option as soon as I design my page or do any changes. But with the snapshot panel, I don’t waste my time doing that. SuperPreview helps me analyze any layout issues in various browsers. Let’s take a look at the preview tools available in Expression Web:
1. Preview in Default browser for HTML files (Available in all earlier versions)
You can preview pages in any and all browsers installed on your computer. The Preview in Default browser for HTML files button is available on the Common Toolbar. See the image below:
Choose browsers and resolutions from the given list or edit the browser list to add more.
2. Snapshot Panel
Snapshot Panel in Expression Web 3 gives you the leverage to view the page as you edit it. Because it is available as a panel, you can dock it anywhere you want. Know more…
With SuperPreview you can compare how page is rendered in different browsers in the same instance. I will cover SuperPreview in detail in one of our future articles.
4. Expression Development Server
This is one intelligent tool introduced by Expression Web. A designer can test dynamic pages either on a local server or has to publish the pages on a server (somewhere) and then view them in the browser. Both these methods could be cumbersome and affect the design process.
The Expression Development Server (also known as ASP.NET Development server) saves your efforts of setting up a local server on your computer to test dynamic pages like PHP, ASP.NET or using any other Server side scripting languages.
How does Expression Development Server work?
When you request a preview of the ASP.NET or PHP pages in Expression Web (using Preview in browser), the Expression Development Server processes the ASP.NET code within the page and sends the resulting HTML and CSS to the browser. To know more about using PHP within Expression Development Server, check out this fantastic article by Chris Leeds.
How to install the Expression Development Server?
Expression Development Server is a part of Expression Web and hence it is installed along with Expression Web. If the Development Server is not installed correctly, you won't be able to preview your ASP.NET pages using the server. This may happen if you choose 'Custom install' and do not include the Development Server in the installation. Or if Expression Web itself is not installed properly. You may need to manually install it or reinstall Expression Web or custom install with Expression Development Server selected.
NOTE: You must install Microsoft .NET Framework 2.0 or higher before installing the Expression Development Server. If .NET Framework is installed after installing Expression Web, then the Development Server may not work.
To manually start the Expression Development Server, follow these steps:
On Windows XP
1. Start > Control Panel > Add or Remove Programs.
2. Choose Microsoft Expression Web in the ‘Currently installed programs' list and then click Change.
3. In the Microsoft Expression Web dialog box, choose ‘Add or Remove Features’ and click Continue.
4. In the ‘Customize how Expression Web will run list’, expand the Microsoft Expression Web caption.
5. Click on the arrow next to Expression Development Server and select ‘Run from My Computer’ to install immediately or ‘Installed on First Use’ to install the first time you use it.
On Windows Vista
1. Windows key/Start > Control Panel > Programs > Uninstall a program.
2. In the ‘Uninstall or change a program’ list choose ‘Microsoft Expression Web’ and click Change.
3. In the User Account Control box, click Continue.
4. In the Microsoft Expression Web dialog box, choose ‘Add or Remove Features’ and choose to Continue.
6. Now in the ‘Customize how Expression Web will run list’, expand the Microsoft Expression Web caption.
7. Click on the arrow next to ‘Expression Development Server’ and select ‘Run from My Computer’ to install immediately or ‘Installed on First Use’ to install the first time you use it.
How to setup Expression Development Server?
1. On the Site menu, choose Site Settings.
2. In the Site Settings dialog box, switch to the Preview tab, check the box ‘Use Microsoft Expression Development Server’, and then select option ‘For only PHP and ASP.NET pages’.
3. To provide a custom URL for previewing pages, in the ‘Preview using custom URL for this website’ box, type your custom URL.
This article was written with an intention to make you familiar with the preview tools available along with Expression Web 3. I hope the article was helpful to you.
If you liked the article, Subscribe to the RSS Feed or Subscribe Via Email