• Expression Web team blog

    Looking up HEX values in Photoshop


    I've written up a few tips on quick ways to look up hexadecimal values in your document in Photoshop. Check it out:



  • Expression Web team blog

    HTML, CSS, and JavaScript reference at your fingertips: FireScope add-on for Firefox


    SitePoint has released the “first phase” of their JavaScript reference, and they’ve also completely redesigned their Reference Site for improved usability. To coincide with the redesign, they’ve released a handy Firefox add-on called FireScope to integrate their HTML and CSS reference (sadly not their new JavaScript reference) into Firebug and your Firefox browser:

    FireScope logo


    Here’s a screenshot of the new Reference panel in Firebug:

    FireScope reference panel in Firebug in Firefox

    Read the list of features on the SitePoint website to learn more about the tool:


  • Expression Web team blog

    Twitter on PHP VERSUS ASP.NET


    NETTUTS is a good website for web development and design tutorials: http://nettuts.com/.

    Jeffrey Way, the person behind the NETTUTS website also maintains a NETTUTS profile on both Facebook and Twitter. Turns out he innocently posted an update to TWITTER in support of ASP.NET with a slight knock against PHP, and apparently that brought a lot of responses from other Twitterers, both ASP.NET and PHP developers.

    For all the dirty details, see my complete blog post here http://blogs.msdn.com/anna/archive/2009/01/23/twitter-on-php-versus-asp-net.aspx

  • Expression Web team blog

    CSS Layouts without the headache


    Beck WeinholdHi, I’m Beck Weinhold, one of the newest testers on the Expression Web team and also a newcomer to the world of CSS layouts. While there have been a couple of excellent posts here recently about writing your own CSS layout from scratch, at my skill level I’m really only ready to get started with the predefined CSS layouts that Expression Web provides. If you're also new to CSS layouts, this post is for you.

    First, I should note that in version 2, there have been a few changes to the CSS generated by Expression Web for the predefined CSS layouts. One annoying problem that’s been fixed: with a version 1 layout that includes a footer and more than one column, you could easily find your footer overlapping the side column(s) if the main column content is shorter than the side column content.

    To take a look at the possibilities, launch Expression Web and choose File > New > Page. Select the CSS Layouts option in the left column.


    As you scroll through the list of layouts in the middle column, the preview on the right changes to show how content will be laid out on the page. Dark grey shading and a solid line across the middle of a region indicates that the region has a fixed width in the page layout, while light grey shading with a dotted, arrow-headed line stretching across it indicates that the region expands to fill the remainder of the browser window.

    Choosing the “Header, nav, 2 columns, footer” layout, my Design view looks like this:


    If you're working with the Design view of your page, make sure that your Visual Aids (on the View menu) are On as well – in particular, the Empty Containers and Visible Borders options – otherwise you’ll just see a blank page with no hints as to how the page is divided.

    The HTML for this looks like:


    This layout doesn’t look a whole lot like the preview right now. In fact, I’m tempted to stretch the page_content div, the one that will contain most of the text, just to see how it would look. But if I do that by re-sizing the div in the Design view, I’m effectively telling Expression Web that I’d like the page_content div to fix the layout at that height – even if the content requires a larger container. You can see the result in the HTML below.


    Leaving the fixed height on the page_content div for now, I’ve added content to my page to see how the layout looks. I’ve also given background colors to the footer div and the page_content div to highlight the div placement. You can see by the background coloring that the right column content has overflowed the page_content div, which means that although the footer doesn’t overlap with the page_content div, it does overlap with the overflowing text. Not so good.


    Next time, instead of stretching the page_content div, I can just put some content into my page first to get a feel for how the layout works. Or I can just remove the height property from the page_content div, as I’ve done in the image below. As you can see, the page_layout div expands to fit the text and there’s no overflowing text to overlap with the footer.


    I’m pretty happy with the layout I’ve chosen, but I’ve decided that I don’t need the navigation container.

    To do this easily, I’ll start by clicking on one of the navigation links. In order to make sure the entire top_nav div is deleted, I’ll click on the <div#top_nav> breadcrumb at the top of the view (just below the title bar) to select the whole div, then hit the Delete or Backspace key.


    In the Code half of the view, I can see that the <div id=”top_nav”> tag and its contents are gone; in the Design view, I can see that it didn’t affect the rest of the layout of the page. And if I add more pages later and need to provide navigation, I can just insert a new top_nav div tag below the masthead div, put my links there, and I’ll be in business.


    If you’re feeling bold after this introduction to Expression Web’s predefined CSS layouts, take a look at the recent posts that I mentioned earlier from Steve and Morten. Keep an eye out for my next post, where I’ll make my page prettier by customizing Expression Web’s predefined style sheets!

  • Expression Web team blog

    Last day to get Expression programs for half their original sales price is January 31, 2009


    Renee Yong just emailed me to let me know the last day for 50% off of the price for Expression Web 2, Expression Blend 2, or Expression Studio 2 is:

    Saturday, January 31, 2009.

    This offer is only available in the United States and through the Microsoft online store which I link to below. If you’ve been on the fence about this offer, now’s the time to jump off the fence one way or the other!

    Shop here:


    Expression products for 50% off the original sales price

  • Expression Web team blog

    Understanding and Unleashing the Power of CSS Layouts


    The latest version of the Expression newsletter was emailed to subscribers today and includes the following two articles:

  • Expression Web team blog

    Sessions, Workshops, and Unsessions announced for Microsoft MIX 2009


    Register now for MIX 09 which presents a slew of sessions on working with Expression programs, including:

    Microsoft Expression Web: No Platform Left Behind

    Steve Guttman, Expression Web PRINCIPAL PRODUCT UNIT MANAGER

    Come learn how to use Expression Web to build resilient standards-based sites for use across a wide range of browsers and platforms. Hear about the current version of Expression Web and also some sneak peeks at future work that will make creating great sites even easier for designers. With a focus on workflow, you will also see how well Expression Web integrates with ASP.NET and PHP.

    Web Form Design

    Come hear key considerations and best practices for Web form design based on international usability testing, eye-tracking studies, and over ten years of designing Web applications. Learn how the interaction and visual design of Web forms can make the difference between acquiring a customer and completing a transaction or not.

    From Concept to Production: Design Workflow with Microsoft Expression Studio - Christian Schormann

    Learn successful workflow models between designers and developers using Microsoft Expression Web, Blend, Design and Encoder. This session specifically focuses on creating rich Internet applications with Silverlight, and shows how the next generation of the Expression suite will make the design workflow faster, easier and richer. Explore how developers and designers can integrate and divide production tasks in a meaningful and harmonious way.

    Go Deep with Microsoft Silverlight Controls

    Learn how to encapsulate structure, animation, and logic inside custom controls that handle theming, layout, validation, and data binding. Using Microsoft Visual Studio and Microsoft Expression Blend, explore advanced design, coding, debugging, and testing techniques for building components that work interchangeably in Silverlight and Windows Presentation Foundation (WPF).

    Improving UX through Application Lifecycle Management - Chris Bernard

    Learn how you can leverage Microsoft Expression and Microsoft Visual Studio Team System to improve your overall application lifecycle, decrease your time to market, and ultimately raise the quality of your applications.

    Integrating Microsoft Expression Blend with Adobe Creative Suite -Joanna Mason

    Explore how Expression Blend integrates with the design tools from Adobe's Creative Suite. Learn how to use content from Photoshop and Illustrator to efficiently create Windows Presentation Foundation (WPF) and Microsoft Silverlight-based applications, and see a range of useful tips and tricks from one of the core Expression Blend team members.

    Optimizing Performance for Microsoft Expression Encoder  - James Clarke

    See demonstrations of how to fine tune your media for best encoding and Microsoft Silverlight playback performance. Learn encoding best practices to make sure your video playback is as fast and smooth as possible.

    The Future of Microsoft Expression Blend  - Douglas Olson

    Hear about the future plans for Expression Blend. See how Expression Blend improves the productivity of visual designers, providing better access to data and enhanced tools for interactivity. Learn how designers can be deeply engaged and remain in control of the creative decisions while enjoying improved collaboration with developers throughout the project lifecycle.

    Visual Design with Microsoft Expression Blend  - Celso Gomes

    Come learn how to use the XAML graphics features of Expression Blend to create impactful visual content. See how amazing, functional user interfaces can be created without code using a range of powerful features in Expression Blend.

    What's New in Microsoft Silverlight 3

    Joe Stegman

    Hear about some of the new experience-oriented Silverlight 3 features, and see how to build applications for Silverlight 3 using Microsoft Expression Blend and Microsoft Visual Studio.

    And much much more.

    All  Sessions:


    All Speakers:


    All Workshops:


  • Expression Web team blog

    SEO toolbar for Firefox


    Free search engine optimization toolbar for your Firefox web browser.

    “What would happen if you smooshed together many of the best parts of Rank Checker, SEO for Firefox, the best keyword research tools across the web, a feed reader (pre-populated with many SEO feeds), a ton of competitive research tools, the ability to compare up to 5 competing sites against each other, easy data export, and boatloads of other features into 1 handy Firefox extension? Well, you would have the SEO Toolbar.”

    Download here:



  • Expression Web team blog

    Newer constructs are recommended


    Have you ever been puzzled by the tip “Newer constructs are recommended” while working in the Code view of your page in Expression Web? If so, check out my blog post Better error messages “are recommended”, which is devoted to helping users decipher that tip!



  • Expression Web team blog

    Holiday Upgrade savings – add Expression Web 2 to your web authoring tool set


    Expression Web 2 boxshot

    For a limited time, customers in the United States can shop the Microsoft Online Store for Microsoft Expression Web, Expression Blend, and Expression Studio and get 50% off.

    Chances are good that you qualify for the Upgrade pricing if you have any existing web design or creative software, or Microsoft Office software, including any ONE of the following:

    • A licensed copy of an earlier version of Expression Web
    • Adobe Creative Suite (any version)
    • Adobe/Macromedia Flash or Director (any version)
    • Adobe/Macromedia Dreamweaver (any version)
    • Adobe GoLive (any version)
    • Microsoft Office (any version)
    • Microsoft FrontPage (any version)
    • Quark QuarkXPress (any version)

    [Note: Pricing and specials are set on a locale-by-locale basis.  This deal applies only to US customers of the Microsoft Online Store and is valid only for a limited time.]

  • Expression Web team blog

    The Quirkiness of Quirks Mode


    Michelle Rosenthal

    Hi, I'm Michelle Rosenthal, a new tester on the Expression Web team.

    My recent work on Expression Web has brought to my attention the importance of document type declarations (referred to as DOCTYPEs) and understanding the effect of these declarations on how content is displayed in different web browsers. There are a handful of DOCTYPEs you can declare at the top of your html that will vary the way a browser interprets your page. Here are a few examples:

    HTML 4.01 Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

    XHTML 1.0 Transitional:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    (You can find out more regarding the differences between strict and transitional DOCTYPEs in this article at 24ways.org, as I will not be going into that distinction.)

    A well-formed DOCTYPE will trigger the browser to render the page in “standards” mode (or sometimes the self-explanatory “almost-standards” mode.) If a page does not contain a DOCTYPE declaration (or if the DOCTYPE is incorrectly defined), most browsers will enter "quirks mode". Quirks mode is essentially a backwards-compatibility mode that enables a browser to interpret and display content in the way that pre-"standards-compliant" browsers did. In other words, the browser doesn’t stick to HTML and CSS specifications outlined by W3C (World Wide Web Consortium).

    What better way to demonstrate this than with a personal example. Last year I created a photo portfolio website, coding the HTML and CSS from scratch. Like many web developers, I designed and tested the site with Firefox in mind as the end user’s browser (because Firefox reliably renders standards-compliant pages as they are intended to be rendered). The site was a mess when I previewed it in IE. At the time, I wasn’t aware that I was missing a DOCTYPE or that this omission was causing the browser incompatibility. The following snapshot of the site in IE7 quirks mode shows a few of "quirks" that can manifest.

    First, an IE browser in quirks mode suffers from the Internet Explorer box model bug causing it to interpret padding and borders differently than it would in standards mode. The horizontal panel with thumbnail images is narrower than intended due to quirks mode incorporating padding into its explicit width rather than adding padding on top of that width. Additionally, the CSS trick to center content (setting margin: auto; on the containing div) is not processed:


    Once I realized what the problem was, I quickly added a DOCTYPE as the first line to all of my html files. (I chose the default type in Expression Web, XHTML 1.0 Transitional.) Now when I preview it, IE will render my page in “standards mode”:


    IE and Firefox now show nearly identical illustrations of my site! One problem solved in the fight for complete browser compatibility.

    One great feature in Expression Web is all the calculated information displayed on the status bar at the bottom of the application. Here you can see your document type declaration and the mode in which a browser will display your content:


    It will also detect and warn you about incompatibility (the left arrow in the image below):


    You can double-click on the icon on the left and Expression Web will bring you to the incompatible code.

    Once you see that you need to add a DOCTYPE, place your cursor before the <html> tag in Code view and press CTRL-ENTER to bring up a nifty dropdown menu of DOCTYPE code snippets:


    New pages in Expression Web always contain a default DOCTYPE. You can control this default by going to Tools-> Page Editor Options under the Authoring tab:


    Here are a few great resources to learn more about quirks mode:

    Quirks Mode Explanation at quirksmode.org
    Mozilla's Quirks Mode Behavior

  • Expression Web team blog

    New online web development training on lynda.com


    Lynda.com has released two new training modules for Expression Web 2, delivered by Brian Wood, including CSS Workflow and Migrating from FrontPage to Expression Web.

  • Expression Web team blog

    CSS Layouts – Oh, the Humanity… ! by Steve Guttman


    Back in the earlier days of the web—like 5 years ago—the standard fashion for laying-out pages was to wrap your page in a table and to use “colspan” and “rowspan” properties to combine table cells into merged entities, and to embed additional tables into those merged cells (when necessary) to hold and position subsidiary pieces of content. A pretty standard 3-column layout w/header and footer, using tables is shown below.


    This strategy worked “OK,” although the use of tables generally meant that graphics falling at the intersection of rows and columns needed to be sliced up and inserted into individual cells. The complete graphic was reconstituted when the table laid itself out. Also, in many cases, HTML authors had to resort to the evil “single pixel transparent GIF” trick to position elements accurately within these layouts. This lead to HTML code that “worked,” but was bulky, difficult to read and maintain, and was generally not very elegant.

    With the advent of CSS-P, the positioning of content moved from tables to DIVs—with the position of content regions (within DIVs) being specified in the CSS classes applied to each DIV. This has lead to a host of new problems—some of which I’ll talk about here, and some of which really require CSS 3 to address.

    The key to doing CSS layouts is mastering “float” and “clear” CSS properties. I’m going to use a variant of the CSS, 3-column layout included with Expression Web 2. The CSS layouts in Expression Web are found by going to FILE>NEW>PAGE and choose “CSS Layouts” from the left list box. These are good starting points for most page layouts. But, I’m going to create a CSS layout from scratch. If you want to follow along, create a blank HTML page.


    The nice thing about CSS layouts is that the page layout—or arrangement of content on the page—is mostly independent of the content itself. This means that we can start by creating the HTML page structure, first, and then apply CSS classes to get the content into the right positions. The basic structure of the HTML within our body tag is:

    <div id=’container’>
    <div id=’header’>
         Here is my header content
    <div id=’contentcontainer’>
    <div id=’leftcol’>
         Here is my left column content
    <div id=’rightcol’>
         Here is my right column content
    <div id=’centercol’>
         Here is my center column content
    <div id=’footer’>
         Here is my footer content

    There are a few things to note here:

    1. It’s good practice to always wrap your page in a “container” div. This lets you apply page specific styles (if needed) inside the body tag

    2. I give IDs to all the div’s that I’m going to position using CSS. I think this makes it easier to understand your page.

    3. The right and left content columns fall before the main/center content column. This seems a little bizarre. But, it is a necessary part of this particular 3-column layout technique.

    Without any styling at all—this is what my page looks like:


    So, let’s apply some styling to this structure.

    The strategy for 2 and 3-column layouts is pretty straightforward. Divs—by their nature—have a display style of “block,” which means that they will break a line. If you want to line 3 columns up next to eachother—our center, right and left columns—you need to use the float property. As its name implies, float lets you make specific content layout within the flow of whatever else is happening within a page. This is ideal for things like images, which you may want to display within a text block. If, for example, I insert a photo before a text block, it’s going to display like the screenshot below:


    If I tag that photo with style=”float:left”, we get the following:


    Nice, eh? The text flows nicely around the picture. What you need to remember about floats is that the page content following the floated element will flow around it. Any content preceding the floated element will be unaffected.

    So, our trick for creating 3 side-by-side columns follows a similar vein. We apply float:right to the right column and float:left to the left column, we’ll move everything to the correct position. Here’s the HTML layout and markup below:


         width: 200px;
         float: left;
         width: 200px;
         float: right;
    <div id=”container”>
    <div id=”header”>
         Here is my header content
    <div id='contentcontainer'>
    <div id='leftcol'>
         Here is my left column content
    <div id='rightcol'>
         Here is my right column content
    <div id='centercol'>
         Here is my center column content
    <div id=”footer”>
         Here is my footer content

    However, there are a few problems, here. If we add additional content into the center column, we see we have a bit of an overflow problem.


    To fix this, we set the right and left margins of the center container to the width of the right and left columns, respectively. This will constraint the text to the area between the left and right columns.

    There will be another issue if the text in the right or left columns happens to run longer than the text in the center column. The footer will run next to the column instead of under it.


    To eliminate this condition, we add the clear:both property to the footer div. Clear moves the element such that it is below any content, either to the right, left or both sides (depending on the value of the property you apply). Our final markup looks like:


         width: 200px;
         float: left;
         width: 200px;
         float: right;
         margin-right: 200px;
         margin-left: 200px;
    footer {
    <div id=”container”>
    <div id=”header”>
         Here is my header content
    <div id='contentcontainer'>
    <div id='leftcol'>
         Here is my left column content
    <div id='rightcol'>
         Here is my right column content
    <div id='centercol'>
         Here is my center column content.
         Lorem ipsum…
    <div id=”footer”>
         Here is my footer content

    You can do some really powerful layout tricks with floats and clears. Expression Web 2 has some pretty nice starting markup for columnar layouts. Check them out! There’s an excellent tutorial on floats and clears, here: http://css.maxdesign.com.au/floatutorial/index.htm

  • Expression Web team blog

    Software update for Expression Web 2: KB957827


    Microsoft has released an update for Microsoft Expression Web 2.0. This update fixes a problem that prevents macros from running on a Windows Vista-based client computer.


    Note: If you’ve set Windows to automatically update, the update for Expression Web 2 appears in the Office 2007 list of updates as shown in the following screenshot.

    Update for Expression Web 2

  • Expression Web team blog

    Training: Web development essentials


    Joshua Eklnud recently published a series of training videos on how to use Expression Web, including videos on:

    All are available at http://www.microsoft.com/web/search.aspx?tagcb=Expression%20Web

  • Expression Web team blog

    Expression Web documentation at your online fingertips


    The Help documentation for Expression Web has been available on the MSDN Library website ever since version 2 was released. Now the Help documentation is also available through the Expression community website at http://expression.microsoft.com/en-us/library/cc295701.aspx

    Expression Web 2 online Help on the Expression community website

    What’s so great about seeing the same ol’ Help that you can launch from within Expression Web but in online form? Well, if you look at the bottom of any topic in the online version of Help you’ll see that you and others can

    • add tags to topics
    • add new content
    • annotate the Help

    community content widgets on the Expression community website

    In addition, at the upper right corner of any topic you can rate a topic and send feedback which goes directly to the writers on the Expression team:

    feedback widget

    So if you can’t find what you’re looking for in the Help, or want more information than we’re providing, or maybe you have the answers but the Help isn’t providing them, well then dive in and share your knowledge with the world: http://expression.microsoft.com/en-us/library/cc295701.aspx


  • Expression Web team blog

    New MIX website developed with Expression Web


    The MIX website at http://www.visitmix.com was recently redeployed and was developed with, but of course, Expression Web.

    homepage of visitmix.com

    Here’s a random image that I love ( and don’t understand ) from the website:

    flying cartoon mushroom

    But enough of that silliness, here’s the official announcement:

    Today we are announcing an update to MIX Online at visitmix.com.

    MIX Online is a community site for web designers and developers who are building and believe in the innovative web. In the past, the site has given a varied perspective of what is happening on the web, a view into our conference called MIX, and interviews with amazing people with incredible ideas and stories on how designers and developers can take advantage of the web. MIX Online has always been a year-round companion to the event.

    MIX Online moves forward by taking more of a scenario focus around emerging web trends. For example, Microformats is an interesting movement in the web community and we want to introduce you to it and give you some practical guidance around it. MIX Online will continue to showcase our traditional blog, but we are renaming it under the heading “Opinions” that provides a more natural conversation with our small team. Also, MIX Online now provides practical articles with each scenario that are written by people in the community, not always Microsoft’s perspective. Best of all, MIX Online is providing freely downloadable, open source, and immediately useable prototypes. You are encouraged to use these prototypes for your own projects, but to also submit code to the prototype project on CodePlex to share with the community.

    Please check it out at www.visitmix.com and be sure to register for the MIX conference at www.visitmix.com/2009 .


  • Expression Web team blog

    Free BETA version of Microsoft Web Platform Installer


    Microsoft has released a free BETA version of the Web Platform Installer which corrals together all the free components you need for developing web applications on Windows Vista. To download the installer, go here: http://www.microsoft.com/web/channel/products/WebPlatformInstaller.aspx .

    The first screen of the BETA installer lets you select Complete, ASP.NET Developer, or Your Choice:

    first screen in the Microsoft Web Platform Installer Beta dialog box

    If you select Your Choice and click Next, you can select just the options you want. You can also select a profile in the Recommendations list on the Web Server tab to distill the options down to the profile that fits your development the best, including ASP.NET Developer, PHP Developer, or Classic ASP Developer:

    Recommendations in the Microsoft Web Platform Installer Beta dialog box


  • Expression Web team blog

    Your Ted Spread


    Erik Saltwell, Group Program Manager for Expression Web, used Expression Web 2 to build a Google gadget that displays the “Ted spread”:


    The money blog on the NPR website has blogged about it: http://www.npr.org/blogs/money/2008/10/your_own_ted_spread_reader.html

    What’s the Ted spread? Erik explained it to me this morning but you’re really better off reading about it here:


    and here:



  • Expression Web team blog

    Migrating from Microsoft FrontPage to Microsoft Expression Web - Part1


    Updating your site with standards-compliant HTML

    Pad Gallagher's faceFrontPage helped bring WYSIWYG publishing to the World Wide Web. Since those early beginnings, however, the web has changed; countless new technologies have emerged, evolved, and slipped into obscurity. The World Wide Web Consortium (W3C) has led the way in defining the web’s technological common ground, referred to as web standards. Websites that conform to W3C web standards are referred to as standards-compliant.

    Over the next several articles, I’ll be helping you update your website; migrating away from legacy code and components to newer solutions, based on web standards.

    In this article, we’ll start the migration process by cleaning up the code so that it’s more in alignment with web standards and start moving style and formatting out of the web pages and into a cascading style sheet (CSS).

    Before we begin, I strongly encourage you to make a backup copy of your website.


    Browsers read the DOCTYPE declaration on a page to determine which version of HTML (or XHTML) the page uses. Expression Web uses the DOCTYPE declaration for validation and IntelliSense code completion. Adding a DOCTYPE declaration to your website’s pages makes it easier to create and maintain valid code throughout your project.

    If your project contains no FrontPage web components, set the DOCTYPE to XHTML Transitional. If your project does contain FrontPage web components, you’ll experience fewer problems if you set the DOCTYPE to HTML 4.01 Transitional.

    To set the DOCTYPE for a single page, from the Expression Web Code view:

    1. Press CTRL+HOME – the cursor moves to the head of the page (Line 1, Column 1)
    2. Press CTRL+ENTER – the DOCTYPE menu displays.
    3. Select the appropriate DOCTYPE from the drop-down list.

    Repeat this procedure to set the DOCTYPE for every page in your project.

    Now that the existing pages all have DOCTYPE declarations, this would be an excellent time to set the DOCTYPE for the entire project so that any new documents you add to the site are created with the correct DOCTYPE declaration. Click Tools, and then click Page Editor Options. Select the Authoring tab and set the Document Type Declaration.

    Code cleanup

    Once you've set the DOCTYPE declaration on a page and while you're still in Code view, right-click on the page and select Reformat HTML. This will tidy up the code formatting and attempt to validate the page against the declared DOCTYPE. If there are any code errors, Expression Web will highlight them in yellow. DOCTYPE validation errors are displayed with a squiggly red underline.

    Go through the code and clear up what you can. When you hover your mouse cursor over an error, a tooltip displays with details about the error to help you find a solution.

    Moving the presentation out of the HTML page

    Create an external CSS

    External style sheets are separate files from content pages that will be linked from each of your project’s web pages. This allows you to create a single style definition that controls the appearance of every instance of a style throughout your website.

    Overall, cascading style sheets provide greater flexibility, easier maintenance, and true separation of content from presentation.

    Link the site pages to the CSS

    Each page must include a link to your CSS within the <head> section of the page. You can add this link manually in Code view: <link rel="stylesheet" type="text/css" href="mycss.css">; or you can add it from the Format menu by clicking CSS Styles, and then clicking Attach CSS Style Sheet in Design view.

    Create CSS style definitions

    Here’s a quick refresher for CSS style definitions. A CSS style definition has three parts:

    • A selector – what HTML element this style will apply to.
    • One or more properties – what aspect of the element's appearance will be styled.
    • A value for each property – how the property will style the element.

    The properties and values are contained within curly braces, and properties are separated by semi-colons.

    selector {

         property1: value;

         property2: value;


    A selector can be:

    • An HTML element (p, h1, ol, etc.), which defines properties for that tag everywhere it appears.
    • A class, which defines properties for only those elements to which you assign that class name.

      Class selectors in a CSS begin with a period (for example, .codeview, .caption, and .uitext). Classes can be used with several different elements on a page. For example, the .uitext class can be applied to single or multiple words, entire paragraphs, headings, or specific sections on a page.

    • An ID, which defines properties for a single, unique element in a web page.

    ID selectors in a CSS begin with a pound sign (#). IDs should be unique, and should be applied only once on a web page (this is especially important if you use JavaScript in your project). For example, you might choose to create an ID selector called #header and apply it to a DIV (<div id=”header”>). Remember, the #header ID—or any other IDshould only be used once on a page (though you can use the same ID on other pages). There is, of course, quite a bit more to cascading style sheets than this quick overview. See Expression Web Help for more information. Our objective right now is to create one style definition for each unique style in the website. For example, if every page has a heading in maroon 18pt bold, italic, Tahoma, we would create a style definition in the CSS that looks something like this:

    h1 {

          color: #7F0000;

          font-size: 18pt;

          font-weight: bold;

          font-style: italic;

          font-family: Tahoma;


    Apply CSS styles in Design view

    Once you’ve created the CSS, you can quickly apply styles in Design view using the Apply Styles task pane. (If the Apply Styles task pane isn’t visible, click Task Panes, and then click Apply Styles.) The Apply Styles task pane shows all the available styles in a document. To apply the formatting to different areas of the page, select the text you want to format and then click a style in the Apply Styles task pane.

    In Code view, you’ll see that CSS class and ID attributes have been added to the HTML tags for many formatted sections of text. If you prefer to code by hand in Code view, note that the “.” and “#” characters are omitted from the HTML attributes.

    <p class="uitext">…</p>

    <div id="header">…</div>

    Scrub any leftover inline formatting

    Once you’ve applied CSS styles to each content element in your site, it’s a good idea to go through each of the pages in Code view, clearing out any leftover presentation formatting, such as <font> tags (especially those with attributes, such as <font face=”Tahoma”> or <font color=”#007F00”>).

    A special note about MsoNormal.

    Copying and pasting content directly from Microsoft Word into FrontPage or Expression Web generates Office-specific markup, characteristically set off with an MsoNormal attribute. That markup may be valid (depending on the DOCTYPE declaration) but it adds unnecessary clutter and maintenance headaches.

    Tip: Copy the affected text directly from Word into Notepad and then paste it into the web page. This will strip all inline, Office-specific formatting out of the content, to which you can then apply CSS styles.

    Semantic content markup

    Now that we’ve shifted the appearance of page elements out of the HTML page and into the CSS, the tags have semantic value—they actually describe what’s contained within them. Semantic content markup offers tremendous benefits in accessibility alone. For example, because the formatting and appearance of a standards-compliant web page are handled by the CSS, instead of by inline formatting, visually impaired users no longer have to sit through the screen reader’s tedious and time-consuming itemization of every table element and transparent GIF used in the non-compliant page’s layout tables.

    Another great benefit to semantic content markup is that it can significantly improve search engine optimization. Standards-compliant web pages contain a bare minimum of markup, so when a search engine crawls your site, it encounters a much higher content-to-markup ratio, resulting in more accurate search engine results and higher page ranking.

    One final note about semantic markup: <i> and <b> tags are considered display tags; they change only the appearance of the enclosed content. Use style definitions in your CSS for elements such as code examples or UI text that should be displayed in italics or bold.

    In cases where your intent is to change the meaning of an element, use the standards-compliant <em> (meaning “emphasis”) and <strong> tags instead. Though these tags also correctly apply the desired formatting, their purpose is to provide semantic value, which—among other things—helps screen readers and other accessibility tools correctly interpret and present content enclosed in these tags.


    DOCTYPE declarations and the separation of content from presentation are fundamental aspects of a standards-compliant website. More importantly, making these changes provides several important benefits: your website is much easier to maintain and extend in a standards-compliant editor such as Expression Web; you can add and expand accessibility features; and your site’s search engines results should improve.

    In my next article, we’ll examine FrontPage web components and ways to replace them with standards-compliant alternatives.


  • Expression Web team blog

    Simplifying your PHP applications – RIA Development Center


    The RIA Development Center website (sponsored by Microsoft) just published a detailed review of the PHP features in version 2 of Expression Web, including the built-in development server for previewing your PHP pages in any browser, previewing PHP includes in the design surface of Expression Web, byte order mark preferences, PHP IntelliSense (auto complete features in Code view), PHP snippets, PHP code coloring and preferences, and more. Here’s a direct link to the article:


    And if you haven’t already read it, our own Tyler Simpson (Development and Test Manager) co-authored an article earlier this year for the Expression newsletter to introduce readers to the PHP features in Expression Web 2. Check it out:


  • Expression Web team blog

    Make Your Web Pages "Behave" by Swapping Images


    I used Expression Design to layout and create the elements for my wedding homepage (see my blog Composing a Wedding Page in Expression Design) and then used Expression Web to position them on the page. In this post I will describe how to use Expression Web to add image swapping behavior to the page.

    Selecting one of the images from the page and opening the Behaviors task pane via the Task Panes menu allows you to define a number of different kinds of behaviors for that image or element. Press the “Insert” button and select “Swap Image” from the menu.

    Behaviors Taskpane

    To read the full post go mosey on over to my blog: Little-Endian.

    Greg's Noggin Greg Smith, Expression Web Software Tester (I'm a PC)

  • Expression Web team blog

    Using a Tracing Image to Guide Web Page Layout


    I used Expression Design to layout and create the elements for my wedding homepage (see my blog Composing a Wedding Page in Expression Design.) In this post I will describe how to use Expression Web to layout those elements on the page based on the composition image.

    Using a Tracing Image is one way a web developer can be sure that the web page that they’re marking up will look like the page the designer intended.

    Expression Web Trace Dialog

    To read the full post go mosey on over to my blog: Little-Endian.

    Greg's Noggin Greg Smith, Expression Web Software Tester (I'm a PC)

  • Expression Web team blog

    The sordid life of software bugs

    Triage – (French, from trier, to sort)
    2. the assigning of priority order to projects on the basis of where funds and other resources can be best used, are most needed, or are most likely to achieve success.

    In over 20 years of professional software development, I’ve never yet worked on a software project that had sufficient time and resources to do everything we wanted.  One of the most painful tasks that project leads face is making tough choices about what features to add and remove, and what bugs to fix.  Alas, Expression Web is no exception.

    When you’re dealing with an application with so many features, it’s not really a surprise that there might be a few bugs. The real question is, given our limited resources and time, how do we decide which bugs to fix as we individually review each bug?  Before I answer that, let me back up a step and review the various ways that bugs are found and submitted for triage.

    1. Bugs that are filed by our users, usually via the Microsoft Connect website at http://connect.microsoft.com/expression – we have a very knowledgeable core base of users who have found some of the oddest, as well as some of the most common, bugs in our program. While we would, of course, prefer that our users never experience a single bug, we’re very grateful for those users who have reported bugs to us, particularly when those users go to the extra effort of doing some investigations on their own, reporting additional data that can help us reproduce the bug and fix it.

    2. Bugs that have been postponed from version 1 or version 2 – the bug may have been postponed because it came in too late to fix or it was in an area of code that we hadn’t planned to invest in.  If it was important enough, though, it got held over and re-triaged in the version we’re currently developing.

    3. Bugs in features developed for version 1 or version 2, discovered by someone on the Expression Web team (usually by our test team or by other team members) – even features that have been in the product for a couple of releases can still have a bug crop up through some new set of circumstances or someone on the team saying, “What will happen if I do....?”

    4. Bugs in new features, discovered by our test team – as new features are developed, our test team puts those new features through a rigorous set of automated tests and manual tests, and they inevitably find several bugs in the process.

    5. Regressions – Occasionally, we’ll change code in one area of the program, either to fix a bug or implement new functionality, which may cause a problem in another area of the program.  These bugs are flagged as regressions – something that used to work that no longer does.

    All of these bugs are added to our bug database and they are considered, and occasionally reconsidered, in daily triage sessions.  These triage sessions include one or more representatives from the development team, the test team, and the program management team.  Discussions in our triage meetings can be fairly extensive, and occasionally heated, as we tend to be very passionate about the quality of our program, as well as the importance of meeting our deadlines.

    So how do we actually decide which of these bugs to fix?  We look at several factors:

    1. What is the priority? – Every bug is given a priority rating of 1, 2, or 3.  A priority of 1 means that the bug is very important and that we need to fix it in the current milestone, would even hold back the program from shipping, if necessary.  A priority of 3 means that this is a “nice to have” fix that we would like to do if time permits.  Sadly, time rarely permits, and most Priority 3 bugs remain unfixed.

    2. What is the severity? – Every bug is given a severity rating of 1, 2, 3, or 4.  A severity of 1 means that there is significant user impact – that the bug can cause a crash or data loss, or has security and privacy implications.  A severity of 4 means that there is minimal user impact – this could be something like awkward wording on an error message that few of our users will ever encounter.

    3. What is the risk? – The risk of fixing a bug has to do with where the fix is in the code and how likely it is to cause a regression in that feature or in some other feature.  Evaluating the risk is highly subjective but developers and testers alike develop over time a pretty good idea of where our potential “problem” code is and where the “safe” code is.  All other factors being equal, we’re far more likely to approve a bug in code that’s safe than we are in code that’s high risk, particularly as we get closer to the end of the project.

    4. What is the cost? – As with risk, the cost of fixing a bug is subjective, but it is still an important consideration.  If, for example, a developer has left out a little-used parameter from a PHP command, such that it doesn’t show up in our IntelliSense list, that’s a bug with pretty low severity and priority ratings.  On the other hand, I can have this fixed and tested in less than an hour, which means that it will likely be accepted by our triage team even with its lower priority.  The test cost is just as important as the development cost, since there are times when a bug may be easy for a developer to fix, but the fix may be in an area that affects several core scenarios, requiring the need for a full test pass to validate the fix.

    5. What is the likelihood that our users will encounter this bug? – The more likely it is that our users will encounter a bug, the more likely it is that we will fix it.  A bug that hits 1% of our users roughly 1% of the time is not very likely to be fixed.  If this hits everybody, though, and it’s something that they will encounter fairly frequently, we would definitely want to fix it.

    6. Is this a regression? – A bug in a feature that used to work that now no longer does will be given a higher priority than if that same bug had been there all along and had just never been found. We’re actively investing in automated tests of both the basic functionality of our product and the high priority and high risk bugs that we find. Our goal, over time, is to reduce the number of regression bugs introduced in the product by catching them as soon as the developer makes the mistake.

    7. Where are we in the development process? – We often get bug reports, either from our internal users and testers or from our Public Beta users, very late in the program lifecycle.  The later we are in our development process, the higher our triage bar gets.  By the time we get to the final weeks of the project, we are usually only willing to consider recall-class bugs – a bug that is so devastating that we would literally recall the program if we found that we had submitted the program for release with this bug included.  One of the most frustrating scenarios we face in triage is rejecting a bug that we know we would have fixed had we found it just a few weeks earlier. As noted above, we’re investing heavily in improving our automated test suite so that, in future releases, we can take bugs fairly late in the development process with a higher confidence level that the fix won’t cause a problem elsewhere in the product.

    8. Is this a security or data loss issue? – We take both of these scenarios very seriously, more seriously, perhaps, than just about any other kind of bug.  If someone can compromise your data or your machine because of a bug in our code, we cannot, and will not, ship the program with that bug.  If a bug can cause you to lose data that you have just spent hours entering, then we will do our best to fix it.

    9. Is this bug in a core investment area? – In each release, we pick a few areas of the code that we intend to invest in heavily.  If a reported bug is in one of those core investment areas, we will look on it a bit more favorably than we otherwise would.

    Product Box for Expression Web 2An example of a really painful triage decision we had to make in Expression Web 2 was the issue of link fixup for PHP include files.  A bug came in fairly late in our development process regarding including a PHP file in an HTML file, then renaming that PHP file.  In other link fixup scenarios, the program recognizes that you have renamed a file that is referenced by other web pages and asks you if you want to automatically adjust the links to point to the renamed file.  For included PHP files, this process was failing.

    After careful investigation, we had the following answers for the various triage criteria:

    1. Priority = 1.  This is a core scenario.
    2. Severity = 2.  This wasn’t a crash, a security issue, or data loss but it was pretty important functionality.
    3. Risk = High.  The change affected code that was central to quite a few core scenarios and it was in code that had had problems in the past.  The risk of regression was quite high.
    4. Cost = High.  The development cost was medium but the test cost in this case was pretty high.
    5. Likelihood = High.  This is a core scenario that anyone using PHP includes is likely to encounter.
    6. Regression = No.  This was new functionality, so no regression.
    7. Where are we in the development process = Late.
    8. Security or data loss = No.
    9. Core investment area = Yes.

    Earlier in the development cycle, this bug is a no-brainer to fix.  It’s a core scenario that is likely to affect many of our users, in an area where we’re investing significant resources.  End users can work around this issue by using the Find and Replace feature, or manually updating their links, but that’s not as convenient and it’s contrary to our behavior with other types of included files.  However, given the risk, the cost, and the time that the bug was reviewed, we ultimately decided that, painful though it was, we just could not take this fix for Expression Web 2.  I’m pleased to say that the bug has already been reconsidered for, and fixed in, Expression Web 3, and that the fix will be available in our first preview release.

    As you can imagine, seeing the list of criteria, not to mention seeing how subjective many of them are, our triage sessions are often contentious.  At Microsoft, one of the core attributes we value and cultivate is passion and we definitely have a lot of passion around which bugs we want to fix and which we don’t.  At the end of the day, though, the one thing that holds us together is that we also have a passion for doing the right thing for our end users.  Sometimes, the right thing is to not fix the bug, as with the example I cited above.  We just could not take the risk of destabilizing the program, potentially causing any number of other problems for our end users, painful though that decision was.  Sometimes, though, and these are happier decisions, the right thing is to fix the bug, as was the case when we re-triaged the bug for Expression Web 3.

    If you are ever wondering whether you should submit a bug report to the Expression Web team, the answer is an unqualified yes. We need this kind of feedback from you, our end users, in order to help us meet our goals for shipping a quality product. The detail you provide in your bug report could be the final clue that helps us track down the cause of the bug and yours could be the report that helps us fix a bug that thousands of our users could encounter. We need the feedback from you, both positive and negative, in order to help us assess whether we’re meeting your needs and our own goals. Without you, and your support, we cannot succeed. We are always grateful for any feedback you can provide and will always do whatever we can to meet your needs.

    Paul Bartholomew's face Paul Bartholomew
    Development Lead
    Expression Web

  • Expression Web team blog

    Elementary, my dear watson


    Hi! I’m Luis Dieguez and I am a tester on the Expression Web team.


    One of my tasks on the team is to monitor Watson data for our product. Watson is probably one of Microsoft’s most useful customer feedback technologies but it definitely takes the first spot as one that our customers hate the most. Why? Because Watson is a tool that appears only when Expression Web has crashed.


    This dialog, my dear friends, is one of the main components of Watson.

    In all seriousness, it seems inevitable that a software program will ship with bugs. Our testing team and Beta efforts target to minimize the number and severity of the bugs we ship with in order to make the program as stable as possible. However, the chance of not finding a critical crashing bug is always there and in this case, we want to know about it and fix it as soon as possible.

    Watson allows us to comprehensively track what crashes and hangs are being hit by users of Expression Web in the real world (and during development of the program). Every time a user hits a crash, by providing the dialog above, we give our users the option to transfer the crash data to Microsoft automatically, providing us with all the system information we need in order to investigate the root cause for what could have caused the crash.

    Basic Watson Flow

    In a nutshell, this is what happens the instant the Watson dialog hits your screen:

    · When a crash, hang or other tracked failure event occurs, the Watson program is activated and the dialog appears.

    • If you opt to send the information to us, Watson prepares an error report containing multiple files including a minidump. The minidump contains a subset of memory with the data that is most useful for developers, such as stack details (a list of the program code functions that were last hit), some system information, a list of loaded program modules, the type of error, and global and local variables. Minidumps are packaged into CAB files and sent via a secure HTTPS connection to Microsoft.
    • Error reports that indicate the same code defect are grouped into buckets.

    Bucketing permits us to prioritize the Debugging Effort and allows us to focus on the buckets that get the most hits. (Approximately 80% of failures in the real world are caused by 20% of the bugs.)

    It is important to note that we only receive the data after you explicitly give your permission and the data is strictly used to improve the Expression Web program.

    Watson is particularly useful in providing crashing trends in our product. Every time I look at the Watson database, if I notice that many users are hitting a particular bucket I need to escalate this immediately and trigger the investigation process. Once we know the cause of the crash and we can reproduce it locally, we implement and test the fix and depending on the severity of the bug, we will ship it in the form of a security patch, service pack or in the next release.

    What can you do to help?

    While Watson provides us with very good information on the system and the place in code where the crash might have occurred, one of the hardest challenges with Watson data is coming up with the right set of steps that trigger the crash. For example, Watson might tell us that we are trying to use a null pointer, but it doesn’t tell us where or how in code that pointer was nullified.

    Moreover, if we cannot reproduce the crash locally, we can’t fix the bug. Here is where you can become a key element in helping us fix a bug.

    When you encounter a crashing bug:

    1. Always, always submit the Watson data. It is easy, just click the “Send information” button and the data will take a short time to submit.

    2. Log a bug at connect.microsoft.com/expression with the steps you did to get the crash. Adding the file or set of files you reproduced the bug with also helps.

    3. Make a comment on the bug with the Watson bucket that was created with your crash. This will help us match a set of repro steps with Watson buckets we don’t have repro steps for. To get the Watson bucket, just follow these steps:

    · Right-Click on “My Computer”

    · Click “Manage”

    · Go To “System Tools | Event Viewer | Application”

    · Sort by Type

    · All Watson Events will have ID 1000 and 1001.

    Event 1000 is fired when Watson first encounters a crash.

    Event 1001 is fired when information (including the bucketID) comes back from the server.


    If you were successful at reporting, double click on the most recent 1001 event and you will see the bucket ID:


    Just add this bucket ID into the bug you log and that's it!  We will then link your bug to our Watson buckets and we'll have a set of clear set of steps to reproduce the bug. 

    Cheers!  See you next time.

Page 3 of 5 (120 items) 12345