• 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

    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

    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

    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

    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

    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

    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

    Website accessibility lawsuit settled by Target


    You may recall that back in 2006 Target was sued because the Target website was not accessible to the blind. Target attempted to have the suit dismissed at one point, but just settled the lawsuit last week.

    The settlement generated some good discussions here on the Expression Web team about what this means for web developers and their clients. The settlement inspired Steve Hebert (Expression Web developer) to blog about why he recently joined the Expression Web team. In his post, he touches upon the Accessibility and Compatibility tools in Expression Web:


    Here are some additional perspectives on the Target settlement:

    Site Point:

    the Web Standards Project:

    CNET News:

    WebAIM (Web Accessibility in Mind)



    Opera Developer Network:

    What do you think about the settlement of this lawsuit? Should retail websites be required to make their websites accessible? What features would you like us to develop for Expression Web to help you make your websites more accessible? Would you like more Help content that addresses website accessibility? Comment on this blog and let us know! Better yet, if you have any great ideas for Expression Web, submit a suggestion for the program here: https://connect.microsoft.com/expression . Or discuss this topic with others at the Forum for Microsoft Expression Web: http://forums.expression.microsoft.com/en-US/web/thread/5ce63b85-7199-46a1-9fb2-f605c13ec1f5


  • Expression Web team blog

    Composing a Webpage Layout Using Expression Design


    Greg Smith's Noggin Hey everybody, I'm Greg Smith, a new tester on the Expression Web team.

    In August of 2008 I was lucky enough to marry the woman of my dreams with a small wedding ceremony in Las Vegas. I really enjoy web design and while I am not a professional web designer, I get to play one at my new job as a software tester on the Expression Web team at Microsoft in Redmond. Because I wanted to learn more about the products in Expression Studio I chose to use them to build a website to commemorate our wedding and to share this event with the world.

    Wedding homepage

    The first step was to compose a homepage. Expression Design turned out to be the perfect tool for this because of its ability to create beautiful scalable vector art and how very easy it is to export web-ready bitmaps from it.

    To read the rest of the post, go to my Blog: http://blogs.msdn.com/gsmith/archive/2008/09/03/designing-a-wedding-page-in-expression-design.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

    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

    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

    Simplify Your Add-In Development with the Extensibility Tester Add-In


    I created the Extensibility Tester add-in to provide Expression Web 4 developers a way to test out ideas and troubleshoot their add-ins without the endless cycle of edit, save, and refresh.


    The add-in panel lets developers evaluate JavaScript expressions from within the panel, giving access to the full extensibility model.  This allows add-in developers to interact with the Expression Web application while seeing all output, errors, and events that come from the interaction.

    Click here to download the Extensibility Tester add-in. Once you’ve downloaded it, you can install it from within Expression Web 4 via the Add-Ins Manager under the Tools menu.

    Using the Extensibility Tester Add-In

    Once you have installed the Extensibility Tester add-in you can display it via Tools -> Extensibility Tester. Enter any JavaScript expression into the Input box and click Evaluate. The resulting output or error messages appear in the Output and Error boxes, respectively. Extensibility events are logged into the Events box as they are fired, with the most recent event on the top. The Clear All button clears all the textboxes if you want to start from a clean slate.

    The JavaScript expression is evaluated within the global scope, so variables you create are available from evaluation to evaluation (instead of falling out of scope after the evaluation is completed and not being available). This can save you quite a bit of typing, but comes with one small gotcha: these variables are properties of the window object and must be declared without ‘var’ (see example in image above).

    Here are a few expressions you can try to see some of the cool stuff you can do with the extensibility model:

    • xweb.document.selection.set(10,100);
    • Xweb.document.selection.insert(“text”);
    • xweb.application.newdocument("HTML 4.01 STRICT");
    • xweb.document.getElementsByTagName("div").length;
    • xweb.document.getScriptElementByCode("var foo = 1");
    • xweb.document.replaceRange(15, 20, "replacement");

    Let me know what you think!

    Erik Mikkelson
    Software Development Engineer in Test, Expression Web

  • Expression Web team blog

    Saffron Stroke: Expression Web tips and tricks


    Minal Agarwal is a web and graphics designer who maintains a helpful blog at http://saffronstroke.com/ which is full of tips and tricks for Expression Web users as well as CSS hacks and web page templates. Minal has also contributed several articles to http://www.dotnetcurry.com for their Expression Web category. Check it out:

    Homepage of http://www.saffronstroke.com

  • Expression Web team blog

    Hot or Not? HTML 5


    If you’re a web developer, you’ve probably heard a lot about HTML 5, the all-in-one standard to replace HTML 4.01, XHTML 1.0, and DOM Level 2 HTML. The HTML 5 specification is a 500+ page tome that explains in precise detail every element, attribute and feature that’ll power the next generation of Web applications - part documentation of what already makes the Web work today and part innovation.Hot or Not?  What better way to look at HTML 5 and the future of the Web than through a vestige of the old Web: What parts of HTML 5 are Hot…or Not?


    The Web Hypertext Application Technology Working Group (WHATWG), founded by people from Apple, Mozilla, and Opera set out in June 2004 to figure out what was next for HTML. Six years later, we’re a bit closer to knowing what’s next, however, the W3C HTML 5 group estimates the specification won’t be complete until 2022 (or when there are complete implementations in two browsers, whichever comes first). Having to wait until 2022 to play with HTML 5? Not Hot. Major browsers adding more and more support for various aspects of the HTML 5 draft everyday? Hot.

    Most web developers use the names of classes and ids to label and identify their page structure (for example, <div id=”header”>, <div id=”footer”>). With similar objectives, HTML 5 includes new elements to define the structure of your pages, for example, <article>, <section>, <aside>, <footer>, and <nav>. Using these elements will help you semantically structure and understand your markup, and can help search bots and accessibility tools like screen readers better understand your pages. Verdict? Hot. The <div> tag can stop being the Swiss army knife of layout.

    <Video> and <Audio> are two major new features in HTML 5. Now you don’t need to use Flash or Silverlight to play media. For your customers, this means not having to install plug-ins, and a consistent experience across all sites for media consumption. Hot? maybe…

    Unfortunately, the <video> and <audio> tags don’t define a single video or audio format for all browsers to support – and as a result, depending on the browser that your customer is using, they may or may not be able to watch video or listen to audio on your page. Furthermore, if you depend on advanced features in Flash and Silverlight like content protection or accessibility, you currently won’t find them in <video> and <audio>. Verdict? Until browsers settle on a de facto video and audio standard for HTML 5, Not hot.

    In an effort to be backwards compatible and reflect how people actually use HTML today, HTML 5 is compatible with a huge number of different coding practices. Opening and closing tags can be optional. Some elements can be self-closing. And attribute quotes are not necessarily required either. This is just the tip of the iceberg of changes you’ll run into. HTML 5 deprecates some tags, and un-deprecates others. For example, the <i> tag is back – and this time, it doesn’t represent italics. The <i> is used in dialogue to refer to text in an alternate voice or mood.

    Verdict: Not hot. It’s nice that HTML 5 is bending over backwards to be backwards compatible, but the use of re-purposed deprecated tags instinctively makes my skin crawl. Plus, having so much flexibility means that markup is going to vary in style even more between pages, and it may be hard for newbs to figure out the basics while grappling with questions like, “Do I have to close this tag? Can this tag be self-closing? Do I need to use single or double quotes here? Do I even need to use them at all?”

    These are just a few of the new markup-based features in HTML 5 that are notable. There are countless changes in the DOM API, and still more markup based changes – like new form controls and validation (these are definitely Hot) that enable you to specify input types, such as a phone number, and then let the browser validate it for you.

    Deep within the tome that is the HTML 5 draft specification there are many great changes for web designers. Just because they’re not hot now, doesn’t mean that they won’t be later! These changes just need to find their way out from awkward draft stage to final Hot specification.

    Justin Harrison
    Program Manager, Microsoft Expression Web


  • Expression Web team blog

    Workaround for viewing password-protected pages in SuperPreview


    I'm Steven Schermerhorn - one of the developers that worked on the SuperPreview program provided with Expression Web 3. Ever since we released the first BETA version of SuperPreview for Internet Explorer, the Expression Web team has received a lot of constructive feedback about SuperPreview. One suggestion we frequently receive is to add support for password-protected web pages.

    Currently, if you use either the BETA version or the finished version of SuperPreview to view a page that requires login credentials, instead of displaying the page you requested, SuperPreview displays whatever page normally appears when a site visitor tries to view a password-protected page without logging into the site. We weren't able to provide that support in time for this year's release, however I have one suggestion that might help you work around this: enable debug access to the website you are developing. How you or your server admin enables debug access to the website all depends on your server's configuration and I cannot document all scenarios here.

    Once you've enabled debug access to your website, you can use SuperPreview to display your password-protected page by opening the URL using this syntax: http://www.example.com/default.php?user=joe , where http://www.example.com is your site's domain, and default.php is the path to your page, and joe is a valid username.

    This basic debug access isn't a feature you want enabled in a live, publically accessible server environment, so you should also setup additional security for your debug environment, such as to allow requests from only a particular IP range or a specific port that isn't available outside your network. For what it's worth, I used this kind of debug environment in nearly every web application I developed in my former life as a web developer.

     Hope this helps!


    Steven Schermerhorn

  • Expression Web team blog

    Until June 30, 2009, free copy of Expression Web 2 and 60 days free hosting


    To learn more about this offer, go to the following URL and be sure to read the fine print:


  • Expression Web team blog

    Lorem Ipsum Code Snippet on Expression Community Gallery website


    I just made my first contribution to the newish Gallery section of the Expression Community website where anyone can add content and templates to share. Here’s a screenshot of the current categories:

    categories of the Gallery section of the Expression Community website

    One of many cool things about the gallery is that you can select a friendly URL name for your contribution and it’s instantly generated. I chose LoremIpsum because I contributed a code snippet that enables Expression Web users to easily insert up to five paragraphs of Latin lorem ipsum filler text into their page. Here are the new code snippets as they appear in the Code Snippets list of of Expression Web:

    list of Code Snippets with custom Lorem Ipsum code snippets

    Here’s the URL of my contribution:


    To read the rest of my blog post, in which I show you how to install and use the Code Snippet, and link to a post on how to create your own code snippet, see my post Lorem Ipsum Code Snippet.


  • Expression Web team blog

    Adding symbols and characters to your web page


    Expression Web 4 includes a new Symbol dialog box that enables you to insert symbols and characters in either the Design view or Code view of your web page. You can browse all available characters or choose a subset of characters from the Type menu.

    Symbols dialog in Expression Web 4

     For quick access the Special Characters tab lists only the most commonly-used characters, such as the copyright symbol, em dash, en dash, registered and trademark symbols:

    Special Characters tab of the Symbol dialog box in Expression Web 4 

    Unlike earlier versions of the Symbol dialog box, the Symbol dialog box in Expression Web 4 inserts only the entity name for the character you select and adds nothing else; the Symbol dialog does not add paragraph or span tags, and does not apply a font and style to the character you insert. Consider that reason #11 to get your (potentially free) copy of Expression Web 4 today!

  • Expression Web team blog

    Microsoft Expression News


    We released important news today about the Expression family of products.  Please visit the Expression Community site for details.

  • Expression Web team blog

    Expression Web 3 Sneak Peek

    Curious about what's coming for Expression Web 3, and our latest progress on SuperPreview? S. Somasegar, Senior Vice President, Developer Division has posted a summary of several key new features in Expression Web 3 on his blog. Click here to read his post.
  • Expression Web team blog

    SuperPreview Usability Study


    The Expression Web team is seeking individuals with web design experience for a usability study focusing on Expression Web SuperPreview.

    In particular, we are looking for individuals with experience designing web pages (writing and diagnosing markup, CSS)  for compatibility in multiple browsers.

    Participant Criteria:

    • Participants do not need to have experience with Expression Web SuperPreview.We are looking for new users and experienced users.
    • Participants will need to sign a non-disclosure agreement (NDA).
    • Participants must be in the Redmond or Seattle area.
    • Study will take approximately 1-hour to complete.

    The usability studies will be conducted between March 26 and April 3.

    If you or somebody that you know meet the participation criteria and would like to participate, please contact justin.harrison@microsoft.com.


    Justin Harrison

    Program Manager – Expression Web

  • Expression Web team blog

    Displaying pages that use NTLM authentication in SuperPreview


    As Steven posted earlier, if you try to display a password-protected page in SuperPreview, the program instead displays the page that appears when a site visitor tries to access the page without supplying login credentials.

    I wanted to follow up Steve’s post to briefly clarify that SuperPreview does support NTLM authentication, which is commonly used by websites on corporate intranets. Pages on networks that use NTLM authentication don’t require the user to login to view the pages, instead, they rely on the site visitor’s Windows login credentials. So if your computer is on the same network as the page that relies on NTLM authentication, you should have no problems opening the page in SuperPreview. (For in depth information about NTLM, see http://msdn.microsoft.com/en-us/library/aa378749(VS.85).aspx.)


  • Expression Web team blog

    New content portal for FrontPage users transitioning to Expression Web


    The Expression community website has a new portal devoted exclusively to helping FrontPage users transition to using Expression Web: http://expression.microsoft.com/frontpage

    The FrontPage to Expression Web portal currently features:

    • A Getting Started area:

      menu of Getting Started articles
    • A Community Resources area that presents a different resource each time you visit the page:

      Community Resources
    • Step-by-step solutions written exclusively for FrontPage users:

    • And How Do I? Videos which feature a different video each time you visit the page:

      How Do? I Videos

    The initial launch of this website was done with the input of FrontPage MVPs and Expression Web MVPs, as well as Microsoft employees. To make this portal as useful to FrontPage users as possible, we need YOUR ongoing input to ensure we’re providing FrontPage users with the resources they need to successfully move to Expression Web. To suggest article ideas and other content for the FrontPage to Expression Web community website please email fp2xweb@microsoft.com.


  • Expression Web team blog

    Moving to Web Standards with SuperPreview


    Internet Explorer 8 was an important release because it signaled a renewed emphasis on Web Standards at Microsoft. My team—which develops the authoring tool, Expression Web—is also pretty emphatic about Web Standards. We’re in the process of doing significant tooling (and retooling) so we can support existing and emerging specifications, reliably.

    The Expression Web team recently shipped SuperPreview for Internet Explorer a FREE tool for performing cross-browser debugging in multiple versions of Internet Explorer, as well as helping migrate sites from earlier versions of IE to Web Standards in IE8. This is a subset of the full version of SuperPreview (which also supports Firefox) and which ships with Expression Web 3. You can download SuperPreview for Internet Explorer  here: http://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=8e6ac106-525d-45d0-84db-dccff3fae677 or the full version of SuperPreview with Expression Web 3 here: http://www.microsoft.com/downloads/details.aspx?FamilyID=0a73a3a7-3e06-4125-b3c6-f9c10387e9cc&displaylang=en

    Expression Web SuperPreview in vertical Side-by-Side mode 
    Expression Web SuperPreview in vertical Side-by-Side mode

    As part of our product planning process, we talk to, and observe web developers in their “natural habitats.” During these sessions, it was clear that designing web pages for multiple browsers was a major pain point (and a major pain). In addition to the time it takes developers to preview pages in multiple browsers, there are a host of other issues:

    • Most browsers can’t have multiple versions installed side-by-side. The newest version replaces older versions. So, you can’t have IE6 and IE7 on the same machine (unless you’re using virtual machines or unstable registry hacks).
    • The ergonomics of browser testing is awkward. Many devs load their site on a staging server and have a battery of machines running different browsers. They have to manually load a page in each machine and then walk to each individual machine to compare the different monitors.

    We built SuperPreview to simplify the process of testing and debugging layout issues across different web browsers and platforms. With SuperPreview you can view your pages in multiple browsers simultaneously or view how a page renders in a browser and compare it to a comp or mock-up image of a page. SuperPreview helps web site authors address an important part of that problem—namely, how to identify and fix cross-browser layout issues.

    By default, SuperPreview comes up in side-by-side mode with the Selection tool active. This tool highlights the bounds of HTML elements using the extents calculated by the browser when it renders the page. Note, the element size and position are shown in the lower left of each screen, and the positions of the selected element are shown by the shaded outlines.

    The overlay view shown below allows users to “onion-skin” two renderings together, which helps highlight significant differences. In either of these modes, I can click on any of the other browsers in the browser list (at the screen bottom) and instantaneously see that browser rendering. Additionally, if I have based my page layout on a PSD design, I can load up the Photoshop™ file as one of my comparison “browsers.”

    SuperPreview in Overlay (Onion skin) Mode 
    SuperPreview in Overlay Mode

    In this example, there was clearly an issue with the position of the Expression logo. This appeared to be an issue with IE6.

    In the SuperPreview UI, we drew inspiration from browser-based development/debugging tools like the IE Dev toolbar. SuperPreview provides similar DOM views of the baseline and comparison browser pages. You access the DOM view by clicking on the DOM tab at the bottom of the page. Like the IE Dev toolbar, the DOM view can be used as a navigation tool by using the arrow keys, as well as a means for gathering information.

    SuperPreview in horizontal Side-by-Side mode showing the DOM tree
    SuperPreview in horizontal Side-by-Side mode showing the DOM tree

    In doing cross-browser debugging, it’s pretty easy to spot differences between pages. But, identifying the offending page element can be trickier. It’s not immediately apparent whether an element, its parent, or even a sibling is causing the problem. In the case of the misplaced logo, I used the DOM view to check the <div> containing the logo and its parent <div> for peculiarities. I also confirmed that the logo was rendering correctly in, IE7 and IE8. The position of the logo is about twice as far from the left margin as it should be when displayed in IE6.

    Since, I was clearly dealing with an IE6-specific issue, I visited one of my favorite sites that compiles IE peculiarities, positioniseverything.com (http://positioniseverything.net/explorer.html). There, right in the table of contents, was the Doubled Float-Margin bug. I’ve also had good luck with Chris Coyier’s CSS-tricks site, http://css-tricks.com/ie-css-bugs-thatll-get-you-every-time/.

    Doubled Float-Margin Bug

    As it turns out, in IE6, if you add margin to a floated element in the same direction that element is floated (float:left, margin-left, or float:right, margin-right), IE6 will double the margin width. Go figure… Fortunately, the solution is bizarre, but very simple. Setting the CSS display property to display:inline, fixed the problem.

    Expression Web SuperPreview gives Web authors a powerful tool for visualizing and debugging cross-browser layout issues. And, SuperPreview for IE is free, providing a potent way for developers to move their pages forward in a Standards-consistent fashion. Please give it a try! To learn more about Expression Web and SuperPreview, check out:

    Download SuperPreview for Internet Explorer: http://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=8e6ac106-525d-45d0-84db-dccff3fae677

    Somasegar’s blog on Expression Web 3: http://blogs.msdn.com/somasegar/archive/2009/06/05/expression-web-3.aspx

    Erik Saltwell on Expression Web SuperPreview:


    Expression Web learning resources:


    - Steve Guttman, Product Unit Manager, Expression Web

Page 4 of 5 (120 items) 12345