• Expression Web team blog

    Microsoft Expression Web SuperPreview

    • 35 Comments

    How many times have you had to debug your web pages on virtual or multiple machines running different versions of Internet Explorer? Or had to wait for a slow web service to return renderings of your pages?

     

    You don't have to do that anymore. Now you can debug your pages on multiple versions of IE on the same machine that you use for Web development.

     

    Expression Web SuperPreview for Windows Internet Explorer is a stand-alone visual debugging tool that makes it faster and easier to migrate your sites from IE6 to IE7 or IE8. With SuperPreview, you can ensure that your Web sites work correctly in IE8 while also maintaining compatibility with earlier versions of IE.

     

    SuperPreview shows your web pages rendered in IE6 and either IE7 or IE8, depending on which version you have installed on your machine. You can view the pages side by side or as an onion-skin overlay and use rulers, guides and zoom/pan tools to precisely identify differences in layout. You can even compare your page comp to how the targeted browsers render the page.

     

    To help you quickly identify problem elements, DOM highlighting shows absolute positions of the rendered elements and HTML elements display CSS properties.

     

     SuperPreview

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    You can also display PHP and ASPX pages in SuperPreview.

     SuperPreview and ASPX pages

     You can download SuperPreview here.

     

     

  • Expression Web team blog

    What's Different in Expression Web Beta 1

    • 29 Comments

    Typically, when Microsoft develops a product, it releases a collection of Community Technology Previews (CTPs) and betas to allow customers to see what kinds of features have been added to the product over the course of the development cycle. Expression Web, previously called Expression Web Designer, is no exception to this, and we recently released the first beta for our product. Unlike other releases though, you will see that one of the big differences between this beta and our previous CTP is that we have been busy removing, rather than adding features. We know that this is not the usual path for a product team, and it is often the case that when you see features pulled from a release, it is because the product team is running behind schedule. In this case, though, we are removing these features because you, our customers, have provided us feedback that some of our features were not appropriate for a high-end, standards compliant web design tool. I know that this is not something you typically expect from Microsoft, so I wanted to take the opportunity to explain.

    So, what is being removed? Basically, we are removing features that rely on the presence of Front Page Server Extensions (FPSE) for rendering your website correctly.

    FPSE actually plays two distinct roles for Microsoft’s HTML editors. The first is the role you may already be familiar with: FPSE communicates with your web server to download and upload files. This part of FPSE also makes link fix-up work. This is not the feature we are removing. Expression Web will continue to support the ability to use FPSE as a way to connect to your web server and perform link fix-up.

    What we are removing from Expression Web is the second FPSE role: those features known as “bots” that use FPSE as a server-side scripting system. These bots, which we carried over into Expression Web from FrontPage, include things like Themes, Shared Borders, the Photo Gallery and the Hit Counter. In this role, FPSE takes web pages that have special markup in them - HTML comments that have a well-defined format - and uses the markup to generate a more complex set of HTML.

    Note: Even though there are bots that don’t require FPSE on your server (because FrontPage and Expression Web contained an embedded version of FPSE), bots as a whole have significant issues and, for reasons that will be explained below, we are deprecating them.

    Why did we do this, and what does mean for existing FrontPage customers that use bots? Let me explain...

    A challenge for Expression Web

    When the Expression Web team at Microsoft first started planning, we had a dilemma.  On one hand, we wanted Expression Web to be a modern web design tool taking advantage of the latest standards and targeting professional web designers. On the other hand, we knew that with FrontPage going away, Expression Web would be the primary web design tool from Microsoft. While the FrontPage market consisted mainly of consumers, hobbyists and small businesses rather than professional designers, we have a responsibility to these customers and we didn’t want to leave them high and dry.

    This left us with a number of questions: How similar should we make the user interfaces?  How much of FrontPage's feature set should we support?  Some of these questions were easy to answer, and we quickly settled on an approach that would achieve the following goals:

    • We would use naming and terminology that was consistent with FrontPage when it did not interfere with our goal of creating a home for professional web designers on the Microsoft platform.
    • We would use menus and other UI artifacts that were consistent with FrontPage when it did not interfere with our goal of creating a home for professional web designers on the Microsoft platform.
    • While keeping the above in mind, we would make big investments in creating a standards-focused editor that was optimized for professional designers.

    This was a good start, but even after setting these ground rules, we were left with the following question: How much of the old FrontPage feature set, particularly bots like Navigation, Shared Borders and Themes, should Expression Web support?  On one hand supporting these features would help users with existing FrontPage sites move over to Expression Web. On the other hand, these features were not necessarily attractive to professional designers.  Some of the problems with these features include:

    • Some of these features, like the Photo Gallery only work correctly with Internet Explorer.
    • Some of these features, like the Photo Gallery, do not generate the kind of high-quality content that designers expect.
    • Some of these features, like the Hit Counter, do not provide designers with the kind of stylistic control they require.
    • Many of these features were tied to FrontPage Server Extensions, so that your content would not render if you tried to use your website on a server that did not have these extensions.

    Layering: An initial solution

    Our initial solution to this issue – the one you saw in our CTP – can be thought of as the 'layering approach'.  In this solution we would incorporate nearly all of the existing FrontPage features into Expression Web for maximum compatibility. On top of this, we would add new features which were more focused on the professional designer, things like rich support for Cascading Style Sheet (CSS) and great design-time visualizations.  This approach was nice because it would allow us to move our focus toward professional designers while still leaving room for the existing FrontPage customer base. However, this solution was not the best option based on feedback from designers who worked with our CTP, and because these features could leave you with a website that only rendered correctly on a web server that had FPSE installed.

    As a part of creating Expression Web, we wanted to show professional designers more respect. We believe professional designers are folks who feel that the design experience – how something looks and how you interact with it matters. Our ultimate goal is to build the kind of interface designers love to use, an interface that inspires creativity. FrontPage might have worked best with FPSE, but we wanted to be sure Expression Web provided an excellent experience whether you use FPSE or not. Ultimately this issue is not about technology or about functionality, it’s about trust. One of the reasons I joined the Expression team was to help Microsoft build trust with the designer community, and part of that is letting you make the decisions on how to build your sites or where to deploy them. This is why we are deprecating bots and investing heavily (and will continue to invest) in our support for using FTP and other non-proprietary protocols for communicating with web servers.

    Upgrading: Our Expression Web path

    We went back to the drawing board and came up with the 'upgrade' approach, which you will see in our next CTP release.  It consists of three main tenets:

    • In sites that don’t use bots, hide any Expression Web features that refer to them. In other words, FPSE bot features in Expression Web disappear if the web page you are working on doesn’t already use them.
    • Help the existing FrontPage community make the transition toward more modern standards-based web design techniques.
    • Provide a minimum level of support possible for pages that already have bots: you won’t find a way to add things like Shared Borders or FrontPage Themes to a website, but web pages or websites that already have these features will continue to render correctly.

    This approach has two benefits: If you are an existing FrontPage user who is interested in moving into the world of modern, standards-based web design, then you should find Expression Web to be a familiar environment in which you can be productive very quickly. On the other hand, if you are a new customer to Microsoft (with respect to web design tools) then you should find that Expression Web is a design-oriented, professionally focused web editor that is uncompromising in its support for creating standards-based web sites.

    We are aware, though, that this will cause pain for those existing FrontPage users that do not fall into these groups. Ultimately, we believe that your best solution may well be moving into a more managed web environment like SharePoint, where the vagaries of html and standards compliance will not impact you. If you are one of the people in this situation, I hope that you understand why we made this decision. If not, well, my email address is Erik.Saltwell@microsoft.com

    Erik Saltwell - Development Manager, Expression Web

  • Expression Web team blog

    Expression Web 4 Service Pack 2

    • 26 Comments

    We’re pleased to introduce a new service pack for Microsoft Expression Web. Expression Web 4 SP2 focuses on making the editing process easier and faster. It includes improvements in two major areas: 1) workspace configuration and 2) code editing. It also includes a variety of other bug fixes and improvements.

    Workspace improvements

    Expression Web now supports any number of custom workspaces. You can save, restore and reset workspaces—which are collections of panel configurations. You can find the Workspaces feature on the Panel menu.

    With Expression Web 4 SP2, we’ve built custom toolbars into Expression Web. This feature allows you to create any number of custom toolbars using any of the built-in (internal) Expression Web commands. The Custom Toolbars feature is found under the View menu.

    Expression Web now provides a preview thumbnail of the currently selected file in the folder list panel. No more hunting around for image dimensions or sizes. In addition, the convenient link text under the size display lets you quickly copy an <img> tag or the CSS dimensions to the clipboard to paste into your markup.

    If a CSS file is highlighted, you get clickable links for creating @import and <link> syntax; if a JavaScript file is selected, you can make a <script> tag with a click.

    Code Editing Improvements

    jQuery is the world’s most popular JavaScript framework. And now, Expression Web users can enjoy one of the best jQuery IntelliSense implementations around. One of the nicest elements of this feature is the intelligence we’ve built into creating selectors. With jQuery, you target methods at HTML elements that are identified using CSS selectors—tags, ID’s and classes.

    Expression Web knows the IDs and classes that are available in your document, and will present you with the appropriate list (HTML tags, IDs, or classes), based on what you’ve started typing as a selector. In addition, Expression Web’s jQuery IntelliSense also supports IntelliSense while chaining multiple methods. In jQuery, methods can be executed one after the other within the same expression. In the example below, the css() and prepend() methods are chained, with IntelliSense operating within each chained method.

    Our new Snippets panel lets you store and access snippets in a folder-based hierarchy. It comes with dozens of useful snippets in a variety of languages, and will automatically convert and load any existing custom snippets you’ve already built.

     

    Also, the new feature was designed to preserve the ergonomics of the current snippets feature. Ctrl-Enter will bring it to the foreground with focus in the Filter field. Typing will automatically filter the list. You can use the arrow keys to navigate, and hit Enter to insert. Expression Web also now supports “wrap” snippets—where you specify code that goes before and after a selection—as well as the standard “replace” snippets.

    A common pain point for web developers is the effort it takes to comment and uncomment bits of code you’re testing. Our Universal Comment/Uncomment feature will comment or uncomment code with Ctrl-j, Ctrl-Shift-j, from within whatever language you’re working with—PHP, JS, CSS, HTML.

    Interactive Snapshot

    In Expression Web 3 we introduced the Snapshot panel which uses SuperPreview rendering technology to allow you to preview Web pages in any version of IE (and Firefox 3.x) as you’re authoring them. This is great for layout issues, but doesn’t help if you need to test page interactivity. In Web 4 SP2, we’ve added an Interactive mode to our stable of IE renderers (as well as an interactive Firefox 3.x). Interactive mode essentially puts Internet Explorer in a panel, allowing you to see and interact with web pages during the authoring process. Mouse-overs, lightboxes and animations all work. Simply saving your changes triggers a refresh of the panel. IE Interactive uses the current version of Internet Explorer installed on your machine.

    We hope you enjoy this new Expression Web service pack. It is available via the download link on the Expression Community site at http://expression.microsoft.com and will also be delivered via Microsoft update.

    Alex Moskwa
    Program Manager
    Microsoft Expression Web

  • Expression Web team blog

    Add HTML5 support to Expression Web 4!

    • 14 Comments

    With Internet Explorer 9 Beta’s deep support for HTML 5 and the increasing adoption of HTML5 for RIAs, the Expression Web team is extremely excited to release our free HTML 5 Add-in for Expression Web 4! The HTML5 Schema Configuration Add-In for Expression Web enables the new HTML5 schema to check your markup for errors and provide IntelliSense for HTML5 tags, attributes and values in code view.

    Install the HTML5 Schema Configuration Add-In

    1. Quit Expression Web 4 if it is open.
    2. Download the HTML 5 Schema Configuration Add-In here and save it to your local computer.
    3. Start Expression Web 4.
    4. Choose Tools > Add-Ins .. to display the Manage Add-Ins dialog box.

      image_thumb[32]
    5. In the Manage Add-Ins dialog box, click the Install.. button.
    6. In the Open Expression Web Add-in File dialog box, select the HTML5Schema.xadd add-in file you downloaded, and click Open. Be sure to click “Yes” when Expression Web asks you to enable the add-in.

    image_thumb[31]

    image_thumb[7]

    If the add-in is correctly installed, it will appear in the Manage Add-In dialog, and the Standard toolbar will display a new “HTML5” button.

    image_thumb[9]

    image_thumb[11]

    Using the HTML5 Schema Configuration Add-In

    1. Start Expression Web 4 with administrative privileges (Right-Click the start icon and select“Run as Administrator”).
    2. Click the HTML5 button in the standard toolbar. The Configure HTML 5 Schemas dialog box lets you enable or disable the new HTML5 schema.

      image_thumb[33]
    3. Click the Enable HTML 5 button to update the Expression Web HTML 5 schemas. Click the X in the upper right corner of the dialog box to close it.
    4. Restart Expression Web 4.
    5. Change your editor options by choosing Tools > Page Editor Options. On the Authoring tab, set both the Document Type Declaration option and Secondary Schema options to HTML5.

    If you set your Doctype and Secondary Schema options to HTML5 in the Page Editor Options, then whenever you create a new web page in Expression Web, the new page contains the HTML5 doctype:

    <!DOCTYPE html>

    If you don’t change the default doctype to HTML5 in the Page Editor Options, you can still create a new HTML5 page by hand in the Code view of a page or open existing HTML5 documents and edit them in Expression Web 4.

    Either way, when you edit an HTML5 document in code view, Expression Web 4 now provides IntelliSense for HTML 5 elements, attributes and their values.

    image_thumb[21]

    image_thumb[23]

    The Expression Web team is very excited about the the new generation of great web applications built on HTML 5 and is happy to support you with this free add-in for HTML5!

    Known Issues

    • If you uninstall this add-In from Expression Web, files are left behind and will cause subsequent installations of the Add-In to break. The work-around is simple: Delete any HTML5Schema folders in your %APPDATA%\Microsoft\Expression\Web 4\Addins directory. Then re-install the Add-In.
    • The current SVG schema is provided by the add-in, however, SVG markup is incorrectly flagged as invalid by Expression Web 4. The work-around is to use an online code validator, such as provided by the W3C. 
    • Expression Web 4 sometimes flags closing HTML 5 tags as mismatched tags even though the markup is valid. The work-around is to use an online code validator, such as provided by the W3C.
    • Enabling or disabling HTML 5 with the Add-in requires Expression Web to be run with administrative privileges. 
  • Expression Web team blog

    Using an Access 2007 database with ASP.NET 3.5 and Expression Web 3

    • 14 Comments

    One question that we occasionally hear from Expression Web users is “How do I use my Access 2007 database on my ASP.NET site?”

    First, the not so great news: Expression Web 3 supports ASP.NET 2.0, 3.0, and 3.5. These versions of ASP.NET do not support Access 2007 data connections.

    Now, the great news: ASP.NET 4.0 supports these data connections – and Expression Web 4 (not yet released) supports ASP.NET 4.0. Even better – as we announced at the MIX 2010 Conference, if you have purchased Expression Web 3, you will get Expression Web 4 for free! (See here for details).

    Until Expression Web 4 is available, you can use the following steps to use your Access 2007 database in a site in Expression Web 3.

    1. First, your system and server must have the 2007 Office System Driver: Data Connectivity Components installed. Many ASP.NET hosts have this installed, such as DiscountASP. Once this is installed, you’re ready to start working.
    2. Drag a SqlDataSource control from the Toolbox panel and drop it into the Design view of your page. (The SqlDataSource control is under the Data category in the section of ASP.NET controls,)

      Design view of a SQLDataSource control in a page in Expression Web 3 
    3. In the Design view of your page, next to the SqlDAtaSource control, click Configure Data Source.
    4. On the Choose your Data Connection screen, click New Connection.

      Choose Your Data Connection screen in Expression Web 3 
    5. In the Choose Data Source screen, set Data Source to <other>, and Data Provider to .NET Framework Data Provider for OLE DB, and click OK.

      Choose Data Source screen in Expression Web 3 
    6. In the Connections Properties dialog, click the OLE DB Provider menu and  select Microsoft Office 12.0 Access Database Engine OLE DB Provider. In the Server or file name box, enter the full path to your database, and then click Test Connection”. If your test connection succeeded, you’re on the right path so far! Click OK in the Connection Properties dialog, and then click Next in the Configure Data Source dialog.
      image 
    7. Note: If you just installed the 2007 Office Driver: Data Connectivity Components you’ll need to restart Expression Web 3 before you see “Microsoft Office 12.0 Access Database Engine OLE DB Provider” in the list. Also, you may need to modify your “Server or file name:” information once you upload your site to a server.

    8. Save your new Connection String and click Next.

      Configure Data Source dialog in Expression Web 3 
    9. Now it’s time to configure the query for your database connection.

    10. Select the columns you want to display from your database, and click Next. In my example, I selected Amount, DonorName, and CampaignName.

      Configure the Select Statement screen in Expression Web 3
    11. Click Test Query. If the test was successful, then click Finish.

      Test Query screen in Expression Web 3
    12. Now you’re ready to add any ASP.NET data control to your page and set up the control to your the data source you just added to the page. In the following screensheet, you can see the GridView control that I placed on my page and set to use my SqlDataSource1 data source.

      GridView control in the Design view of a page in Expression Web 3 

      And now I’ll preview my page in SuperPreview to make sure the data is displaying as I want.

      SuperPreview rendering of the page.

      Once Expression Web 4 is available, I’ll write a follow-up post with the (much easier!) steps on how to use an Access 2007 database as a data source in your site.

      dd560693_JustinHarrison(en-us)

      Justin Harrison, Program Manager
      Microsoft Expression Web

  • Expression Web team blog

    ASP.NET Web Site Administration Tool

    • 5 Comments

    The ASP.NET Web Site Administration Tool lets you configure different aspects of your ASP.NET website through a simple interface in your web browser. You can use the ASP.NET Web Site Administration Tool to setup users and passwords, create roles (groups of users), and create permissions for your website. (For more information about this tool, see Web Site Administration Tool Overview on the MSDN website.)

    ASP.NET Web Site Administration Tool

    For example, you can restrict access to your website to the users you specify in the  ASP.NET Web Site Administration Tool and then use the Login controls in Expression Web to design your login and security pages:

    Login controls in Toolbox Task Pane

    Unfortunately, Expression Web 1.0 doesn’t provide a way to launch the ASP.NET Web Site Administration Tool; in fact, if you attempt to launch the tool from Expression Web, a dialog appears stating “The ASP.NET Web site administration service is not supported.” 

    But don't believe everything you read in a dialog box! The ASP.NET Web Site Administration Tool can be supported in Expression Web with a little help from John Dixon, a test lead on the Expression Web team, who documented a way for you to launch and use the ASP.NET Web Site Administration Tool from Expression Web. He’s blogged about it on his blog at http://blogs.msdn.com/jdixon/archive/2007/08/08/expression-web-and-the-asp-net-web-admin-tool.aspx. Check it out! Thanks John!  

     

    ( If you don't want to use John's work-around, you can download and install the free program Visual Web Developer 2005 Express Edition at http://msdn.microsoft.com/vstudio/express/downloads/ and launch the ASP.NET Web Site Administration Tool from that program.)

  • Expression Web team blog

    Different types of hyperlinks

    • 8 Comments

    There are three types of links that can be used in a web page: relative, and site root relative, and absolute.  Which one is correct to use depends on the location of the page to which it links.

    Relative Links

    A relative link points to a location that is relative to the current page.  Having a link to “index.html” is a relative link that points to the “index.html” page in the same directory as the current page.  Links can also be made to “../index.html” to go to “index.html” in the parent directory.  You can also use links like “../images/mypic.jpg” to find an image in the images directory inside the parent directory of the current page.

    The disadvantage of using relative links is that the link can break if you move a file to another directory and thus change the relative position of the link’s destination.  If you move the file from within Expression Web, however, it will automatically fix all relative links for you (as long as you have site metadata turned on).

    Expression Web uses relative links as the default when creating a new hyperlink.

    Site Root-Relative Links

    A site root-relative link points to a location that is relative to the root directory of the site.  They begin with a slash “/”.  Having a link to “/index.html” is a site root-relative link that points to the “index.html” page in the root directory of the site.  One common use of this is to have all images in an images directory and then to link to images with links like “/images/mypic.jpg”.

    The advantage of doing this is that the link stays the same no matter what directory the current page is in.  This is also frequently used for linking in CSS files.

    Expression Web started fully supporting site root-relative links in Version 3, Service Pack 1.  Starting in that version, pages with site root-relative links are shown correctly in the design view.  Expression Web will also correctly fix your links if you move a file that is linked to with a site root-relative link if you move the file within Expression Web (again, as long as you have site metadata turned on).

    Note that you may get unexpected results when you use Preview in Browser from within Expression Web.  This is because your browser shows your page from a local file – something like “C:\Users\myName\Documents\My Web Sites\mysite\index.html”.  For a site root-relative link, your browser doesn’t know which directory to use for the site’s root so it will simply use “C:\”. 

    There is a simple solution to this problem, though.  In the Site menu of Expression Web, open up Site Settings and click on the Preview tab.  Make sure “Use Microsoft Expression Development Server” is checked, select “For all web pages”, and hit OK. 

    Now when you hit Preview in Browser, it will use an http://localhost address that has the site’s root set correctly and your site root-relative links will work correctly in your browser.

    Absolute Links

    An absolute link is simply one that includes the entire path to the file like “http://www.contoso.com/news/index.html”.  These are generally used for links that need to point to a different site than the one on which your page is located.

    Expression Web supports these links as well.

    toddmo_49351105062009

     

    Todd Moscinski, Senior Software Development Engineer

    Microsoft Expression Web

  • Expression Web team blog

    Easily create an Add-in for Expression Web 4 with the Add-in Builder

    • 18 Comments

    With today's launch of Expression Web 4, we’ve made extending Expression Web’s functionality easier than ever.  Developers can create Add-ins for Expression Web by using HTML, JavaScript and CSS standards they already know!  We have also simplified integrating your Add-ins into Expression Web’s Panel and menu system using XML.  In order to make it even easier, we are providing an Add-in on the Expression Community site that makes it super simple to build other Add-ins. It’s a classic Chicken or the Egg problem solved with the “Add-in Builder”. Click here to download the Add-in Builder. Once you have downloaded it, you can install it within Expression Web 4 directly via the Tools -> Add-ins menu! Click the Install button and choose the .xadd file you just downloaded.

    Before we get started building an Add-in with the Add-in Builder let's take a look at the exact XML used in order to integrate the Add-in Builder itself into Expression Web 4.  It’s pretty simple and very straightforward.

    <addin legacy="yes" developer="yes">

    <name>Add-in Builder</name>

    <load type="AddinUtilities.Utilities, AddinUtilities" name="addinUtils"/>

    <description>Chicken or the Egg?</description>

    <command id="AddinBuilderCommand"

               onclick="xweb.application.showModalDialog('AddinBuilderTestPage.html',

               'Add-in Builder','dialogHeight:500;dialogWidth:700;resize:yes')">

             <menuitem parent="MENU_Tools" before="MENU_Tools_AddIns" label="Add-in Builder..."/>

    </command>

    </addin>

    As simple as it is, learning and authoring new XML syntax can be time consuming and is largely based on trial-and-error. The Add-in builder provides a user-friendly interface that makes it simple to generate the XML and all the associated content files. In addition, the add-in you define is created in the correct location and a site is created for you inside of Expression Web 4 for you.  Why is that cool? Simple, once your add-in is generated you can live edit it just like any other site!

    We’ve cleared all of the hurdles for you and now as a Web Developer you can focus on building the HTML, CSS and JavaScript inside of an Expression Web panel or dialog to build powerful new functionality instead of how to integrate your ideas into Expression Web itself.

    1. If you haven't downloaded the Add-in already you can download the Add-in Builder from here. Install the .xadd file in Expression Web 4 via the Tools -> Add-ins menu. Click the Install button and choose the .xadd file you just downloaded.

    2.Once you have installed the Add-in Builder add-in you can access it in Expression Web 4 via Tools > Add-in Builder.

    3.The first step is to describe your add-in, including name, description, homepage, and version. (I'll publish another post in the near future to describe the other more advanced options in this dialog.)

     

    4. To create a panel for your add-in, click Add Panel. Name, Source, and ID are required fields.

     

    5. Click Insert, and then click Create Add-in. That’s it; it’s that easy to create your own Add-ins.

    After the Add-in is created,  a new site appears in Expression Web 4, with your Addin.xml file and an empty html file (the content of the panel you just defined!).

     

    At this point, restart Expression Web 4. Upon restarting, the Add-in panel (or, if you selected, a dialog or assembly) will automatically be installed and available for use.

    7. If you created an Add-in panel, go to the Panels menu and click the name you gave for your panel.

     

    A panel hosting the empty html page opens.

     

    The panel can be docked, moved, pinned, etc… within the Expression Web 4 application just like any other default panel!

    8.Open panel.html from the site Expression Web created for your Add-in. Add <h1>Hello World</h1> to the page and save it.

    9.Right click inside your open “My First Panel” tab and choose Refresh. You should be able to immediately see the HTML you added rendered in your panel!

    Marc Kapke, Software Development Engineer in Test

  • Expression Web team blog

    Free Green Business Web Site Template

    • 8 Comments

    The Expression Web team brought me on their team for the summer to develop the markup for some fresh, new, and best of all, free site templates. I’m pleased to announce our first site template, Green Business (designed by the team’s UX designer, Lena Yeoh), is ready for download:

    http://gallery.expression.microsoft.com/en-us/GreenBusiness

    Green Business website template homepage

    The core layout of every page in the site is based on a 960 grid which provides a flexible structure I can use to quickly develop most any layout.

    Page of thumbnails from the Green Business site template Detail page from the Green Business site template

    I’ve developed the Green Business pages so you can easily remove elements from a page (images, text, etc.) and swap in your own content without breaking the page’s underlying layout. For example, in the following screenshots, I deleted all the filler text and content from the page. As you can see the structure of the page is still left intact, giving you the freedom to swap in and out whatever content you want.

    On the other hand, if you want to use the existing photographs provided in the site template, you are free to use and publish them.

    Customized page from the Green Business site template Customized page from the Green Business site template

    The Green Business site includes a master.dwt (Dynamic Web Template) file which you can use to make new pages that have the same look and feel as the rest of the website, and to make changes to the header and footer of all pages that use the DWT. (If you are new to working with DWT files, read this tutorial: http://expression.microsoft.com/en-us/dd939172.aspx. If you’d rather not use DWTs, choose Format > Dynamic Web Template > Detach from Dynamic Web Template while a page is open or selected in the file list.)

    The site template also includes e-mail spam bot protection code for your e-mail address, and, naturally, standards compliant XHTML mark-up and CSS2.1.

    The Green Business template is packaged for Expression Web 4 and includes simple and easy to follow instructions in a file named ReadMe. It also provides information on how to install the template on Windows XP, Vista and Windows 7.

    I hope you enjoy this template! Let us know if you have any questions or comments.

    Jimmy Lee, front-end web developer Jimmy Lee, front-end web developer
    Microsoft Expression Web

  • Expression Web team blog

    SuperPreview and Firefox 3.6 release

    • 4 Comments

    SuperPreview users probably want to know if the newly released Firefox is compatible with our application.  Currently, SuperPreview does not support Firefox 3.6 due to changes in Firefox that require engineering work on our end.  However, we made specific updates in our Expression Web 3 Service Pack 1 in preparation for precisely this circumstance.  In Service Pack 1 we added the ability to do incremental updates to our browser support outside our normal release cycle.  These changes mean we can release browser support updates in a matter of weeks rather than months.

     

    We've already done a lot of the necessary leg work with the Firefox 3.6 beta and RC builds.  We're waiting on some final 3.6 related items to be released from the Firefox team, then we'll enable support for Firefox 3.6 in SuperPreview.  Be on the lookout for another post to this blog when a downloadable update is available.

     

    In the meantime, if you haven’t already updated, install Expression Web 3 Service Pack 1.

     

    Alex Moskwa

    Program Manager

    Microsoft Expression Web

     

  • Expression Web team blog

    Free Internet Explorer debugging tool: Microsoft Expression Web SuperPreview for Windows Internet Explorer

    • 2 Comments

    Expression Web SuperPreview for Internet Explorer is a free stand-alone visual debugging tool that makes it faster and easier to migrate your sites from Internet Explorer 6 to Internet Explorer 7 or 8. Expression Web SuperPreview for Internet Explorer shows your web pages rendered in Internet Explorer 6 and either Internet Explorer 7 or Internet Explorer 8, depending on which version you have installed on your machine.

     Microsoft Expression Web SuperPreview for Windows Internet Explorer

    You can view the pages side by side or as an onion-skin overlay and use rulers, guides and zoom/pan tools to precisely identify differences in layout. You can even compare your page comp to how the targeted browsers render the page.

    Expression Web SuperPreview for Internet Explorer not only shows a high-fidelity rendering of how pages will look on different browsers, but it also identifies the element’s tag, size and position, applied styles, and location in the DOM (Document Object Model) tree so you can quickly fix the error.

    To download Microsoft Expression Web SuperPreview for Windows Internet Explorer, see:

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


    If you’d like to debug your pages for both Internet Explorer and Firefox, download the free 60-day trial of Microsoft Expression Web.

    Please note: DirectX must be installed on your computer before you can compare a web page to a PSD image. To install DirectX on your computer, visit the DirectX download page.

    To discuss SuperPreview or Expression Web with others, try our forum at:

    http://social.expression.microsoft.com/Forums/en-US/web/threads

  • Expression Web team blog

    Hot or Not? HTML 5

    • 1 Comments

    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

    dd560693_JustinHarrison(en-us)

  • Expression Web team blog

    SEO toolbar for Firefox

    • 15 Comments

    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:

    http://www.seobook.com/seo-toolbar

    Anna

  • Expression Web team blog

    Styling MySpace profile page using Expression Web Part 1

    • 5 Comments

    As most of you already know, MySpace.com is a popular social networking Web site where individuals, bands/musicians and businesses can have a presence on the Internet without the need to have their own Web site. It's very easy to create a profile on MySpace and it's easy to "skin" the public profile page by using one of the themes provided on MySpace or by applying one of the many profile page theme templates available on the internet. However, to customize the profile page theme beyond that is not a straightforward task.

    Recently, I created a musician profile for myself on MySpace. Since I'm in the Web design/development industry, I couldn't live with the Myspace profile theme templates available on the internet. MySpace doesn't provide themes for musician profile anyway. I want to fully customize my profile page look & feel so that it reflect me and my music 100% or as close as my design ability allows me to. So I started looking around for ways that I can do that. From reading postings on the internet, I learned that styling a MySpace profile page is all about overwriting the default CSS. It's very similar to styling a SharePoint site or a Blogger site. After I wrestled with MySpace CSS for about a week, I thought I'd share what I learned so that. hopefully, other MySpace users can style their profile page in a shorter amount of time that I took.

    There is a lot to share on this topic so I'm going to split the content up into multiple blog posts. In this blog post, I'm going to show you how to set a background image, background color and text color to your MySpace profile page. In the upcoming blog posts, I'm going to show you how to tweak the style in more detail by adding padding and by creating custom contact table.

    My profile looks like this before I customize it:

    I created a background image and I uploaded it to my 3rd party hosting account. Then I use the following CSS to set the background color and image for my profile page:

    <style> 

    body, .bodyContent {
     background-color: 000000;
     background-image: url('http://www.yourhostingdomain.com/floral_background.jpg');
     background-position: Center;
     background-attachment:scroll;
     background-repeat: repeat-y;
    }

    </style>

    To apply it to my profile page, I have to do a little hack since for a musician profile, MySpace doesn't provide any user interface for me to apply custom CSS. So I clicked on Profile -> Edit Profile on the top navigation. Then I clicked on the Musician Profile tab.

     

    Then I clicked on the Edit link for the Musician Bio field and pasted the code above into that field. After I submitted the changes, my profile page looks like this:

    As you can see, the background image has been applied but the white background for the middle section still applies. So I used the following CSS, in bold, to clear the background:

    <style> 

    table, tr, td {
     background-color:transparent;
     border-style:none;
     border-collapse:collapse;
     background-image:none;
    }
     

    body, .bodyContent {
     background-color: 000000;
     background-image: url('http://www.yourhostingdomain.com/floral_background.jpg');
     background-position: Center;
     background-attachment:scroll;
     background-repeat: repeat-y;
    }

    </style>


    After I added the above block of markup into the Musician Bio field, my profile page looks like this:

    Now the white background is cleared but the text is illegible. So we have to set the background color for the content boxes. I used the following CSS to set the background color for the context boxes tables.

     table table table {
      border-style: solid;
      border-width: 1px;
      border-color: #FF9999;
      background-color: #800000;
     }

     table table table table {
      background-color: #800000;
      border-style: none;
     }

    And the following CSS to set the text color and size.

     body, .bodyContent,table , tr, td, li, p, div {
      color: cccccc;
     }

     a:link {
      color: ff6600;
     }
     
     a:hover {
      color: cc3300;
     }

     a:visited {
      color:lime;
     }

    Note: Paste the last two blocks of CSS markup after the first two blocks.

    And now my profile page looks like this:

    Now my profile page looks much better. But we can still tweak the style by adding padding in some areas. I'll cover that in the next blog post.

    Sayuri Wijaya Gould
    Program Manager in Expression Web

  • Expression Web team blog

    Expression Web 2 BETA

    • 11 Comments
    Expression Studio 2 BETA program icons

    Building on the successful launch of Microsoft Expression Web and after listening closely to your feedback, we are excited to announce the release of Microsoft Expression Web 2 Beta. This Beta release expands your toolset beyond HTML, CSS, and JavaScript, by putting PHP, Silverlight, and ASP.NET AJAX within your reach.

    Stacked with new features, Expression Web 2 provides essential tools to design standards-based websites. Web professionals can now author websites on the PHP platform more efficiently with features such as PHP syntax highlighting and statement completion (IntelliSense). Additionally for PHP, we provide an elegant solution that current Expression Web users rave about for previewing ASP.NET pages: Expression Web 2 lets you preview PHP pages locally without a separate development web server! Expression Web 2 supports interactive web content such as Silverlight and Flash, enabling you to easily include this content in your sites. Improved workflow enables you to import Adobe Photoshop designs into your sites with layer visibility control, and reimport changes with layer settings retained. New and enhanced productivity features boost your performance!

    Please install the Expression Web 2 Beta, and let us know what you think!

    Note: You can safely install the BETA of Expression Web 2 on a computer that also has Expression Web 1 on it. If you participated in a private preview program for Expression Web 2, you should uninstall the private preview version of Expression Web 2 before you install the BETA version.

    To download and install the Expression Web 2 Beta, click here.

    To submit suggestions and bugs, click here.

    To discuss the Beta with others, go to the NEW discussion forums here.

    To download other Expression BETA 2 programs, click here.

  • Expression Web team blog

    SuperPreview Technology

    • 3 Comments

    Hi, I'm a Program Manager for SuperPreview and wanted to blog a bit about how the technology of SuperPreview works. My goal is to help our users better understand the capabilities of SuperPreview and some of its limitations.

    SuperPreview captures an image rendering and DOM after a web page loads.

    SuperPreview relies on the locally installed browser rendering engines to take a snapshot in time of how the page is rendered. In taking this snapshot we do a few things to provide the most complete picture possible.

    • Capture key information from the Document Object Model of the browser. We provide users with information that will help them indentify their elements and diagnose problems. For every visible element on the page this information includes:
      • ID and Class
      • Height & Width
      • Position on page from top left corner.
    • Scroll the viewport to get a full rendering of the web page regardless of the page's length.

    It is important to note, this is a snapshot in time, so interactive elements such as Javascript roll-over or accordion menus will not manifest in SuperPreview.

    Javascript support through onLoad in SuperPreview

    Through exhaustive testing we found that many sites use Javascript to do fix ups on their pages to address cross browser problems. To support web designers and developers using these types of fixes SuperPreview runs Javascript up thru the onLoad event of the page. After the onLoad Javascript runs we take our snapshot rendering of the page to get the most accurate picture possible of how your site will present itself to your users.

    How the available browser list is built.

    To do comparisons, SuperPreview for Internet Explorer uses your locally installed browser versions. It also includes a copy of Internet Explorer 6, allowing users to escape the neccessity of a virtual machine for testing IE 6. Depending on which version of IE you have installed different browser versions will appear available in SuperPreview.

    Installed Internet Explorer Version Browser Choices Available
    IE 6 IE 6
    IE 7 IE 6, IE 7
    IE 8 IE 6, IE 8, IE 8 (Compatibility View)

    Known Issues

    We are currently aware of problems with IE 6 not showing up on Win 7 and are actively investigating. For other known issues please review the Release Notes (readme.en.htm in your install directory.)

    Links

    Download SuperPreview for Internet Explorer

    Hopefully this post will help you better understand what SuperPreview does and how you can incorporate it into your workflow to more easily design cross-browser compatible sites.

    Thanks,
    Alex Moskwa

  • Expression Web team blog

    Whitepaper on Transitioning to Microsoft Expression Web from Microsoft Office FrontPage 2003

    • 5 Comments

    The Expression Web team has published a white paper to help FrontPage users make the leap not only to Expression Web but also into the world of Web standards, this white paper:

    • Outlines the differences between FrontPage 2003 and Expression Web.
    • Introduces the Expression Web workspace. • Discusses Web standards.
    • Provides information on how to work with your existing site, including FrontPage Web components, themes, and shared borders, in Expression Web.
    • Introduces ASP.NET support and data integration available in Expression Web.

    This whitepaper will be available for download from the Expression website very soon; until then, here's the direct URL: http://download.microsoft.com/download/f/f/2/ff2d736a-9ec6-4e3b-b094-d782aa7cda72/Microsoft_FrontPage_to_Expression_Web.doc

  • Expression Web team blog

    Expression Web 4 Licensing FAQ

    • 16 Comments

    We’ve received a number of questions about the free upgrade from Expression Web 3 to Expression Web 4.  With this post, I hope to answer the most frequently asked questions and eliminate any confusion.

    The upgrade path for Expression Web 4 depends on how you acquired Expression Web 3.  If you purchased a retail version of Expression Web 3 (e.g., from the Microsoft Store, from a local software retailer, from Digital River, etc.), you should download and install the Expression Web 4 Trial version from microsoft.com.  The upgrade should happen automatically as you install Expression Web 4.  In this scenario, the Setup program for version 4 locates your version 3 license in the Windows License Store and applies that license to version 4.  After you have installed version 4, you are free to either uninstall version 3 or leave it installed.

    NOTE:  Please keep your copy of Expression Web 3 and your version 3 product key.  Should you need to reinstall Windows or have a hard drive failure, you will need to first install Expression Web 3, then reinstall Expression Web 4.

    If you have any other version of Expression Web 3, e.g., acquired through a volume license, MSDN, DreamSpark, etc., you should not install the trial version.  Instead, you should get your copy of version 4 through the same program you used to acquire version 3.  I’ve listed a few examples below:

    • MSDN – Browse to the MSDN download center to download Microsoft Expression Studio 4 and acquire your product key.  Once you have that the product key, you should select Help->Enter Product Key to license your copy of Expression Studio 4.
    • DreamSpark – Browse to the download center location to download Microsoft Expression Studio 4 and acquire your product key.  Once you have that the product key, you should select Help->Enter Product Key to license your copy of Expression Studio 4.
    • Volume Licenses – Visit the Volume Licensing Service Center (VLSC) to make arrangements to download the upgrade.  Your company and/or your reseller need to be registered with the VLSC in order to successfully download the upgrade.  As with DreamSpark, at the time I write this, Expression Web 4 and Expression Studio 4 are not yet available on the VLSC, but should be soon. We will update this post when we have the link to the download page.

    If your free upgrade to Expression Web 4 is not yet available from your supplier, please download and use the free trial version of Expression Web 4 at http://www.microsoft.com/expression/try-it/.  When your free upgrade becomes available, you can uninstall the trial version and install the full version.

    Some additional notes:

    • If you’re in doubt about whether your copy of Expression Web is fully licensed and activated, select Help->About Microsoft Expression Web and look for the phrase, “This is a fully licensed copy.” (Note: The information that appears when you choose Help->Activate Product or Help->Enter Product Key is not a reliable measure of whether the app is licensed.)
    • If you’re in doubt about whether your copy of Expression Web 3 is eligible for the automatic upgrade, select Help->About and look for the product ID which is in the form of a 5-digit number, a dash, a 3-digit number, a dash, etc.  If the 3-digit number is 617, the Expression Web 4 installer should automatically license your copy during the installation.
    • If you acquired version 3 through a program like MSDN or DreamSpark but are no longer participating in the program, you are not eligible for the free upgrade.  You are still eligible for the reduced-cost upgrade.

    I hope this answers your questions.

    Paul Bartholomew

    Microsoft Expression Web

  • Expression Web team blog

    Composing a Webpage Layout Using Expression Design

    • 1 Comments

    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

    Using the Expression Web SEO Checker

    • 14 Comments

    Expression Web 4 provides a new reporting tool: the SEO Checker, which helps you optimize the pages in your site for discovery and indexing by search engines. Pages that follow good Search Engine Optimization (SEO) guidelines rank higher in search-engine results, helping people find your site more easily.

    Expression Web 4 Search Engine Optimization panel

    What does the SEO Checker do?

    The SEO Checker analyzes static page structure and content, compares each page against 50 different rules to ensure the page is search engine-friendly, and produces a detailed report of problems and solutions.  To come up with the 50 SEO rules, the Expression Web team researched the current best practices in SEO which generally emphasize authoring well-formed markup and providing relevant content.  The SEO Checker’s rules provide guidance in these categories:

    What does the SEO Checker NOT do?

    The SEO Checker provides guidance to help you improve your site’s markup and content, but that guidance alone is not sufficient in building a fully optimized site.  In addition to making changes to your pages based on the errors and warnings reported by the SEO Checker, there are many other tasks to consider, including:

    • Assessing your site’s ranking for targeted keywords (check your page rank in multiple search engines)
    • Providing compelling, original content in your site
    • Building links to your pages (from external sites and within a site)
    • Canonicalizing URLs (such as making sure search engines treat <yoursite>.com the same as www.<yoursite>.com)
    • Using descriptive filenames for your images

    These tasks and more are covered on the Bing Webmaster Center blog in their five-part series on improving page rank.  There are many specific recommendations in these posts, so take a look:

    If you’d like to drill deeper into understanding external link building and just how important it is for search ranking, see Link building for smart webmasters (from the Bing Webmaster blog) and Quality links to your site (from the Google Webmaster blog).

    You should also ensure that all of the content you want searched on your site is reachable via internal hyperlinks, or by creating a sitemap.  You can use the Unlinked Files report in the Expression Web Site View to find pages that are not internally reachable.  Otherwise, for Sitemap best-practices, see “Reveal the heart of your site with a Sitemap” in Part 5 of the Bing SEO blog posts.

    Be aware that the SEO Checker was built for analyzing static HTML content.  If the majority of your site’s pages are dynamically created by ASP.NET or PHP, you’ll see more meaningful SEO analysis results by using the free IIS Search Engine Optimization Toolkit.  Although the IIS Toolkit is not integrated with an editing tool, you can use Expression Web to easily find and fix any SEO issues that are reported by the tool.

    Example: SEO for a mobile app site

    I recently wrote a mobile phone application, and then considered how I wanted people to discover the app.  Some people will find the app on the phone’s app store, but the app store is not indexed by the big search engines.  Publishing a corresponding web site for my app adds the possibility that someone will discover the app via a web search.  In creating this very simple brochure site, I used the Expression Web 4 Compatibility Checker and SEO Checker to ensure the site is as search-engine friendly as possible.  I’ll walk through how I used each checker, and how I fixed the issues the SEO Checker found.

    First, I reviewed and fixed code errors and markup compatibility issues on the site.  You might wonder why, since we’re talking about SEO.  This Bing Webmaster Center blog post explains:

    Is your HTML source code valid? Just because it displays more or less correctly, are you sure it's solid? (Some browsers are much more tolerant of HTML coding errors than others are, so you may not actually see the problems. However, search bots are typically not as forgiving as those tolerant browsers, which is why this issue is important.) Errors in your page source code can have a detrimental effect on your page rank if the search engine doesn't understand and thus can't effectively crawl your code. For example, if you didn't properly format the <head> tag code […], all of the work you put into enhancing its content for keyword usage could be for naught.

    Additionally, fixing code and compatibility issues first helps ensure that the SEO Checker will find all of the issues it can in your site.

    The status bar at the bottom of Expression Web 4 displays the HTML Incompatibility icon (on the left in the following screenshot), Code Error icon, and doctype of the current page.  The HTML Incompatibility icon lets you know if your page has markup that isn’t compatible with the page’s doctype (HTML5 in this case).

    Status bar showing compatibility error

    You can click Go To Error to jump to the first compatibility error on the page, or Run Compatibility Checker… to get a site-wide report of compatibility issues.  See our previous blog post Improve Your Site’s Search Ranking for more info on running the Compatibility Checker.

    Running the SEO Checker

    Now it’s time to tune my website for searchability.  I selected SEO Reports... from the Tools menu to display the SEO Checker:

    SEO Checker dialog

    The Learn more about SEO link takes you to Expression Web’s built-in Help documentation on SEO and the SEO reporting feature.  Be sure to take a look at this Help, as it has a wealth of information on SEO best practices and a detailed explanation of all the SEO rules that are used by Expression Web 4 to analyze your site.

    After clicking Check, the Search Engine Optimization report showed these results for my site:

    The SEO report pane

    By default, the SEO report is sorted by page and line number, showing you issues encountered starting at the top of each page.  Each reported issue shows a problem summary, a link to a Help topic on the reported problem, the page name and line number, and the issue’s importance (Error or Warning).  While you should strive to fix both Warnings and Errors to maximize your SEO results, you’ll reap the most benefit from fixing issues marked as Errors.  For my site, I’ll show you how I fixed all of the SEO issues, including Warnings.

    Fixing searchability issues

    Warning: No keywords are defined for the page

    My site’s first searchability issue is the warning “No keywords are defined for the page.”  If you haven’t worked with HTML keywords before, this statement may be a bit cryptic.  Fortunately, you can hover your mouse pointer over an issue in the Search Engine Optimization panel to see more detailed information, like so:

    Hover tooltip for SEO keyword issue

    You can also double-click on an issue to go directly to the line of code that contains the problem in your page.  In this case, double-clicking causes the code editor to highlight the <html> tag on line 2 of index.html.  The <html> tag itself is fine, but it’s highlighted because the checker did not find any keywords within the document.  So, how do we fix this issue?  If the guidance in the tooltip was sufficient for you, you could add the missing meta tag and keywords directly in the code editor.  But let’s say you wanted to learn more about this topic, in which case you could click on the WEB1034 hyperlink in the Search Engine Optimization panel’s Help Topic column.  Each SEO rule’s Help topic contains a detailed explanation of the issue, as well as example HTML for fixing the issue.  Here’s the Help topic’s example HTML for fixing the missing keyword issue:

    The following is an example of a correctly formatted <title> tag, with <meta name="description"> and <meta name="keywords"> tags in the <head> tag section.

    <head>
        <title>Contact Proseware, Inc.</title>
        <meta name="description" content="Contact information for Proseware, Inc., including addresses, phone numbers, and email"/>
        <meta name="keywords" content="Proseware,Proseware applications,Proseware utilities,Proseware tools,Proseware server tools"/>
    </head>

    Now that we understand the keyword issue and how to fix it, we could either simply type in a new <meta name=”keywords” content=”...”> statement in the code editor, or edit the keywords in the Page Properties dialog, which presents commonly used page meta content for editing.  To open the dialog, select Properties... from the File menu:

    Page Properties dialog

    From here, I simply typed a comma-separated list of keywords in the dialog, and Expression Web updated the HTML accordingly.

    Warning: The title and description for the page are the same

    The Page Properties dialog is a convenient way to also fix the third searchability issue listed in the result pane: “The title and description for the page are the same.”  The page description is generally shown below the page title in search results, and is an opportunity for you to summarize the page’s contents to entice people to visit your page.  Without a page description, it’s up to the search engine to choose what text to show.  Perhaps the worst thing you can do here is what I’ve shown above, where the title and description are the same.  This gives the person searching absolutely no additional information about your page, and is a lost opportunity to direct search traffic to your site.  Take a moment to fill this out and write a meaningful description.

    There are two related SEO Checker rules: WEB1052 (“The <title> tag contents are not unique within the site”) and WEB1028 (“The <meta name=”description”> tag contents are not unique within the site”).  These rules remind you to keep these tags unique across all pages on your site.  Pages with duplicate page titles in your site compete with each other for search engine keyword relevance, reducing each page’s search ranking as a result.  Unique descriptions ensure that users see meaningful descriptions for each page, and can more easily identify the content they want.

    Error: The <noscript> tag is missing

    As part of marketing this mobile app, I created a Twitter account to keep people up-to-date with the latest changes to the app, and for users to give feedback.  Twitter provides canned widgets you can embed in your web pages to show the latest posts from your Twitter feed.  The beginning of the widget looks something like this:

    script block snippet

    These widgets rely on Javascript, but search engines (and some users’ browsers) will not run this Javascript.  In these cases, where the script is intended to generate user-visible content, you can provide a <noscript> block with alternate text to show the user or provide additional information for the search engine.  For this case, I added this just below the second <script> block:

    <noscript>Read the latest tweets: <a href=”http://twitter.com/mapminders”>@mapminders</a></noscript>

    Don’t bother providing a <noscript> block if you’re simply using <script> for analytics tracking, though.

    Warning: The <meta name=”robots”> tag contains illegal values

    The robots meta tag instructs the search engine if and how it should index your page content.  The rule’s help topic lists all of the recognized directives, and what each one means: nofollow, follow, noindex, index, noodp, noydir, noarchive, cache, nocache. Think carefully before using a directive like nofollow (which stops the crawler from following any of your page links) or noindex (which prevents the current page from being indexed).

    For our mobile app website, I had copy/pasted a robots meta tag with an invalid directive:

    <meta name="robots" content="all, index, follow">

    Fixing this issue is as simple as removing the invalid “all” directive from the content attribute.

    Error: The <img> or <area> tag does not have an ‘alt’ attribute with text

    This is an oft-cited HTML recommendation – you should always provide alt text for your images, not just for accessibility, but also for search engine relevance.  The logo image in my header and the screenshots from my app were all missing alt text, so it was easy to add this in and fix the issues.

    And here’s a tip for optimizing your images for SEO which the SEO Checker won’t tell you about: you may improve your image search relevance by using hyphen-separated names for your images, such as “location-detail-screenshot.png”, in addition to having meaningful alt text.  We considered adding this as a rule in Web 4, but found it very tricky to correctly automate this check in all of the languages we support in Expression Web.

    For more information, see the Bing Webmaster Center blog post Images and Flash and Script, Oh My! (SEM 101) for the SEO best practices when using images in your site.

    Error: The <a> tag text is too general to provide search benefit

    And now we’ve come to the final SEO issue in our example.  These lines were flagged for having content that is too general:

    <li><a href="#">Home</a></li>
    <li><a href="[app store link]">Download</a></li>
    <li><a href="#contact">Contact us</a></li>

    I wasn’t sure how to resolve this, so I clicked on the WEB1058 help topic link and read the following:

    The <a> tag appears to contain generic text, such as "link" or "click here." If a hyperlink points to content that is relevant to the site, the search ranking of the site may be reduced unless the anchor text accurately describes the target of the hyperlink.

    Search engines use the contents of <a> tags to provide details about the page to which the <a> tag links.

    For a decent-sized site, it’s worth improving the search relevance of internally linked pages, so we could spend some time rethinking link names to make them more contextually descriptive.  For example, we could replace “Download” with “Download the MapMinders app”, and replace “Contact us” with “Email the MapMinders developer”.  But, for such a small site, this may be of little search value and ends up making the link text more visually cluttered.  For your own sites, you may need to make this trade-off, as well.

    And with that, I’ve fixed all of the searchability issues identified by the SEO Checker!

    Beyond the SEO Checker: measuring SEO improvements

    Now that you’ve optimized your website for search using the SEO Checker and published your changes, what next?  Well, your goal was to have a higher search engine page rank for certain keywords, and to drive more traffic to your site as a result of higher page rank, right?  If so, you need to measure your keyword ranking, site traffic, and so on over time.  There are many SEO analytics tools available for this purpose, each with their pros and cons.  (See “Baseline your site’s current performance” in this Bing Webmaster Center blog post for a comprehensive list of metrics to pay attention to.)  Two free tools to consider are Bing Webmaster Tools and Google Webmaster Tools.  After some initial configuration, they will report data on the number of indexed pages, your top pages, keyword relevancy, and clicks from search results to your site.  These tools are fairly lightweight, so depending on the size of your site and what data you want to track, you may very well find that you need more fine-grained search tracking software.

    Regardless of the analytics tools you choose, just remember that SEO is an iterative process.  You’re unlikely to see improvements overnight, but rather over weeks and months.  During that time, check your SEO analytics reports, keep improving your site content, and periodically re-run the SEO Checker to make sure you’re not missing an SEO opportunity.

    Eric Wright, Principal SDE
    Microsoft Expression Web

  • Expression Web team blog

    Cleaning Up Messy HTML

    • 5 Comments

    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.

    DOCTYPE

    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.

    Conclusion

    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.

    Until next time!

    Pad Galalgher, Technical Writer

     

  • Expression Web team blog

    Expression Web Language Packs now available

    • 4 Comments

    [Updated 12/23/2008 - fixed the hyperlink to the topic's new online location]

    You can now check spelling for multiple languages by using Expression Web Language Packs. The Expression Web Language Packs also enable displaying the Expression Web interface, including the Help topics, in the languages supported by the language pack. For more information, see How to check the spelling of different languages in Expression Web.

  • Expression Web team blog

    Expression Web 4 Service Pack 1

    • 9 Comments

    Typically, we come out with a service pack release to fix bugs, address performance problems, and add a bit of polish to a product.

    In the case of Expression Web 4 SP1—we really couldn’t wait. We saw all the cool stuff that’s happening around HTML5—we  knew the release of IE9 was coming—and we said to ourselves, “We need to get some Expression Web HTML5 goodness out, ASAP!”

    And, here it is, built into Expression Web 4 SP1.

    We’ve added IntelliSense for the complete HTML5 specification, IntelliSense for the (evolving) CSS3 draft spec, support for all new CSS properties in the CSS Properties palette, and support for selected CSS properties in the Style dialogs (like the Border Radius dialog below).

    There is a lot of stuff in here. And now, you have no excuses for not jumping on the HTML5 bandwagon.
    We’ve also got support for IE9, so that you can Snapshot your page and preview it directly within Expression Web.


     
    If you haven’t checked out SuperPreview in a while, you’ll want to. There are quite a few improvements including support for Chrome (via our online service) as well as IE9 rendering. One request we heard a lot was the need to compare pages that are behind a login screen. SuperPreview SP1 includes a new feature called “Page Interaction Mode” that lets you browse interactively to your page of interest, and then submits that page to your set of chosen browsers.


     
    This allows you to use SuperPreview on password-protected pages on your Intranet, or on authenticated Internet sites.
    We’ve updated our PHP support with hundreds of functions from PHP5, added a number of new niceties like “Open as PHP,” “Open folder in Windows Explorer,” “Copy File Path,” and others. We’ve also added IntelliSense for extended characters—so, as soon as you type a “&”—you’ll get a list of the HTML character entities that filters as you continue to type.


     
    We automatically look for Chrome, Safari and Opera and conveniently add them to the list of browsers you can use to preview.


     
    Expression Web 4 SP1 is available now via the Microsoft Download Center at http://www.microsoft.com/downloads/details.aspx?FamilyID=f6e1bbd9-2b1b-40e8-948b-1276e3b5daa3. Enjoy!

    Steven Guttman

     

  • Expression Web team blog

    SuperPreview for Internet Explorer

    • 9 Comments

    Hi,

    My name is Justin Harrison and I worked with Alex Moskwa to get SuperPreview for Internet Explorer ready for this release. You can find me on Twitter as @JustinHar.

    Today we announced public availability of SuperPreview for Internet Explorer. Since this morning a number of frequently asked questions and issues have emerged and now seems like a good time to address them!

     1. I only see Internet Explorer 8 in SuperPreview - I thought SuperPreview includes Internet Explorer 6.

    Internet Explorer 6 is not available on Windows 7. This is a known issue that will be addressed in later releases.

    2. How do I get Firefox and Safari to show up in SuperPreview?

    Expression Web SuperPreview for Internet Explorer only supports Internet Explorer. Expression Web 3 includes SuperPreview with support for Firefox and Internet Explorer. Safari for the Mac will be supported with our cloud service to be made available sometime after Expression Web 3 is released.

    3. Is there any more information available about the SuperPreview cloud service?

    The cloud service will be made available sometime after Expression Web 3 is released. The cloud service will support Safari for the Mac. At this time we have not announced our plans for other browsers and platforms on the cloud service.

    4. Are there any plans to support other browsers such as Opera, Chrome, or Safari for Windows?

    At this time we have not announced our plans for supporting for browsers other than Firefox, Safari for the Mac (with our cloud service), and Internet Explorer.

    5. The error message "Insufficient memory to continue execution of the program." displays while analyzing a page.

    This is a known issue. See the Expression Web Forum for a workaround.

    6. SuperPreview for Internet Explorer crashes when I start it.

    This is a known issue that has to do with running SuperPreview in VMware Fusion. See the Expression Web Forum for a workaround. 

    7. I am encountering a bug or have feedback about SuperPreview.

    Click on the bug icon in SuperPreview and follow the on screen instructions to submit a feedback report.


    Release Notes

    There are a number of documented, known issues in this beta release of Expression Web SuperPreview for Internet Explorer. Known issues are problems that we plan to address in later releases.

    • Filters/Behaviors in Internet Explorer 6 do not work properly. This impacts most IE6 PNG transparency workarounds.
    • SuperPreview does not support sites that require authentication.
    • Mouse over highlight of DOM elements may not work properly.
    • SuperPreview may have trouble analyzing very long pages.

    For the complete list, click here.

     The Expression Web team takes customer feedback very seriously. If you have any suggestions for SuperPreview or if you are encountering any issues, please use the feedback button in SuperPreview.

  • Expression Web team blog

    More info on FPSE bot removal

    • 10 Comments

    There has been quite a bit of discussion about our last blog post, so I wanted to take a few minutes to respond to some of the persistent themes found in people’s comments. Specifically, I wanted to address the following two concerns:

    1. That Includes should not have been removed along with the rest of the bot functionality.
    2. That Page Transitions should have been removed.

    First, let’s talk about Includes. When we first planned to remove bots, we knew that customers would find some pieces of functionality missing that they would want put back into the product (though not necessarily in the same form). Our plan has been that some of these components (for example Includes and the Photo Gallery) would be seen again in future releases of the product, though after redesigns that gave them additional functionality and/or made them more designer-friendly (in other words, fixing the issues that caused us to remove the features in the first place.

    We agree, though, that this may not be enough in the case of Includes, since:

    1. They are already standards-compliant
    2. They do not require FPSE to be used correctly
    3. They are extremely useful for keeping large sites maintainable.

    For this reason, we will be providing an Add-In after RTM that re-enables the ability to insert new Includes in Expression Web. In the mean time you can use Cheryl Wise’s snippet-based workaround for adding Includes, which can be found at http://by-expression.com/quick-bits/includes/index.aspx. Finally, in a future release you should expect to see a version of Include-like functionality re-integrated directly into the product.

    Now, let’s turn to Page Transitions. It was our original intent to remove page transitions, but for technical reasons we decided that removing this feature was too risky this late in the release cycle. Please note, though, that we very well may remove this feature from one of our next releases.

Page 1 of 5 (120 items) 12345