We released important news today about the Expression family of products. Please visit the Expression Community site for details.
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.
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.
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.
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 MoskwaProgram ManagerMicrosoft Expression Web
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
The SuperPreview team is always looking for new ways to reach you, our customers. We want to continue to create a product that will solve your cross-browser testing and web development needs.
Another way you can reach us is through the new SuperPreview User Voice site.
Here you can submit your feature ideas and also vote on the ideas others have submitted. Through this we will continue to grow our understanding of you, our users, and create a product that does what you want.
Let us know what you think and be heard.
Alex MoskwaProgram ManagerExpression Web and SuperPreview
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.
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.
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.
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!
Expression Web 4 provides eleven toolbars on the View > Toolbars menu, organized around particular activities, such as editing in Code view, and working with styles or tables. The default toolbars are sensible unless you regularly use only a few buttons from each toolbar; in that case, the default toolbars may clutter and waste valuable space in the application, especially when your favorite buttons are on three or more different toolbars. To the rescue: the free Custom Toolbars add-in for Expression Web 4 lets you create one or more toolbars to organize your favorite buttons and commands in Expression Web 4.
Your custom toolbar now appears below other toolbars open in Expression Web 4, with all of your favorite buttons at the ready! To show or hide your toolbar, select the toolbar’s name from the View > Toolbars menu.
Expression Web team
This week we bring two more browsers to our online service Beta.
If you’ve already signed up for the online service you will receive notification of these new browsers the next time you launch SuperPreview. You can then choose them from the browser selection screen and begin previewing your sites with the new browsers.
If you haven’t signed up yet, you can do it right inside SuperPreview. Just click the Sign up button on the toolbar.
Access to the SuperPreview online service Beta is available to users who’ve purchased or upgraded to Expression Web 4. If you still haven’t upgraded from Expression Web 3, version 4 is a free upgrade with many improvements.
Alex MoskwaProgram ManagerExpression SuperPreview Team
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.
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:
<title>
<h1>
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:
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.
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).
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.
Now it’s time to tune my website for searchability. I selected SEO Reports... from the Tools menu to display the SEO Checker:
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:
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.
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:
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:
<html>
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>
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.
<meta name="description">
<meta name="keywords">
<head>
<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:
<meta name=”keywords” content=”...”>
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:
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>
<script>
<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).
nofollow, follow, noindex, index, noodp, noydir, noarchive, cache, nocache
nofollow
noindex
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.
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.
<a>
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!
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
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
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.
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.
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 Microsoft Expression Web
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.
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:
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 4 enables developers familiar with web technologies such as HTML, JavaScript, and CSS to easily extend the functionality of the product. A useful add-in that was demoed at the product launch lets you insert a Bing map into your web page. In this blog post, I’ll provide a detailed look at this add-in which is available for free on our community site.
After downloading the Bing Map add-in, you need to install the add-in in Expression Web 4. To install the Bing Map add-in, choose Tools > Add-ins, click Install, and follow the onscreen instructions. After you install the Bing Map add-in, the Bing Map command appears on the Insert menu and displays the Insert Bing Map dialog box.
The dialog contains a functional Bing map that you can pan and zoom. In addition, you can specify a location to center the map around and create a pushpin. Once you have selected the desired location, zoom, and perspective, press the Insert button to add the HTML and JavaScript that will display your interactive map.
Notice that the Bing Map add-in’s dialog has a color theme that matches the look of the Expression Web application. I’ll show you how to get the same look for your own add-in in a bit.
To see your map in action, press F12 to view the current page in your browser. The browser will show the map with the same location, perspective and zoom that you specified in the Insert Bing Map dialog. The map also provides controls that allow a visitor to your page to move around the map.
Let’s take a look at how we created this addin.
Expression Web add-ins require a manifest file which is an XML file named addin.xml. This file provides the basic description about the add-in as well as some of the ways the add-in introduces functionality into the application. Here’s the addin.xml file for the insert Bing Map add-in:
The addin.xml file requires a single <addin> element at the root level. At a minimum, it must also include a <name> element. Optional descriptive elements, such as author, description, guid, homepage, minversion and version, help users identify your add-in in the Manage Add-ins dialog.
For example, here’s how the Insert Bing Maps add-in appears in the Manage Add-ins dialog:
To add a menu item or toolbar button to Expression Web for your add-in, use the <command> element in your add-in’s manifest file.
Let’s look at the command we added to Expression Web for the Bing Map add-in. At first glance, this part of the manifest file may appear complicated, but after breaking it down, you’ll see it’s really quite simple.
Each menu command is defined by a command element which requires a unique id attribute to identify the command for Expression Web. To help ensure your command is unique, try to use an id that identifies what your command does. For example, in the Bing Map add-in, we used the id “InsertMap”.
Next, you need to define what happens when your command is executed. That’s where the onclick attribute comes in. Much like an onclick JavaScript event handler, you use the onclick attribute to define the JavaScript code that runs when the user selects the toolbar button or menu item.
In this example we need to launch a new dialog. To do this, we use the Expression Web API function xweb.application.showModalDialog. This function takes 3 parameters:
You’ll note that the html page in this example is specified as “addin:index.html”. This tells Expression Web to look for the file relative to your addin.xml file. So in this case, there should be a file called index.html in the same directory as the addin.xml file. We’ll have a look at some things in this file in a moment.
The final attribute of the command element is filetype, which tells Expression Web to make the add-in’s command available only for files that have an HTML DOM, such as HTML, ASP, and PHP files. This makes our command disabled when the user is editing other types of files (such as CSS and JS). If your add-in does not have a similar restriction, you can omit this attribute.
Within the command element is a menuitem element, which tells Expression Web to add a new menu item for triggering the add-in’s command. The menuitem element requires you to specify the parent menu your command should appear under as well as a label for the menu item. Notice in our example the label attribute has a value of “_Bing Map…”. The underscore character (“_”) is optional and tells Expression Web to define a hotkey for the letter ‘B’.
Let’s have a look at how we created the dialog UI with the file index.html, which the xweb.application.showModalDialog function references. The good news is most of this file should look very familiar as it simply uses standard web technologies. I won’t focus on things like basic HTML such as hyperlinks, buttons, and text fields, but I will highlight things in this file which are unique to developing Expression Web Add-ins.
The Bing Map add-in’s index.html includes references to standard JavaScript libraries such as jQuery as well as custom JavaScript developed for this add-in. As these references suggest, you can leverage powerful JavaScript libraries like jQuery, and your own custom JavaScript, to help you write your add-ins.
The index.html file also references some stylesheets, which work just as CSS does with any normal HTML page. Take special note of the following CSS reference:
This expression.css file defines the standard color schemes that match the Expression Web application color schemes. To give your add-in a professional, built-in look and feel, make sure you use this this CSS file as well as the style classes defined within it. You can use the version of this CSS file from the Bing Map add-in in your add-ins.
To understand what the add-in does to insert the map, have a look at the file prepare.js within the addi-in’s js folder. This file contains a function called handleInsertButton which defines the behavior of the Insert button in the Insert Bing Map dialog box. This function makes heavy use of the jQuery JavaScript framework to define what happens when the pointer hovers over the button and presses it.
This function does quite a bit, so I’ll break some of it down.
These two lines of code show how the Bing Map add-in adds JavaScript references to the current page. In both of these examples, we point to remote script resources using the API function call xweb.document.appendScriptReference. In fact, we not only use jQuery to build the functionality in our add-in, we also use it to build the map functionality in our page. By using this approach the API will protect you from adding a reference to the same resource more than once.
The next interesting property of the handleInsertButton function is xwebdocument.selection which uses the Expression Web API to locate a suitable home for the map within our HTML markup. This gives you access to the current cursor location or selection in the current document in Expression Web.
The code uses this property to determine if the current cursor location or selection is within a DIV element with a proper ID. If it is, it will use that element. Otherwise, the add-in adds a new DIV with an ID. Notice, that while this code is using Expression Web-specific APIs, working with the DOM of the current document is very similar to working with the DOM in a regular HTML page.
The remainder of the function is standard JavaScript that generates the JavaScript code added to the HEAD element of the document being edited in Expression Web. Finally, towards the end of the onclick function handler for insert, you see the following code:
Again, we use the xweb.document API to address the DOM of the page being edited to locate the HEAD element and use the DOM-standard approach of appending html to the innerHTML property of this node. Finally, we need to close the dialog. To do this, we use the xweb.appliation.endDialog function. The argument to this function is what is returned to the original call to xweb.application.showModalDialog which displayed the dialog. In this particular case it goes unused.
To add the final polish of a professional application as well as to support accessibility, it’s important to make sure your add-in responds well to keyboard interactions. The insert Bing map add-in shows some examples of how to do this.
Notice how the Insert button in the Insert Bing Map dialog has a the letter “I” underlined. This signifies that the button is wired to the hotkey of Alt-I. This functionality needs to be added by our add-in. To see how this is done, check out the setupKeys function in prepare.js. Specifically, notice the following code:
This uses jQuery to wire an event handler to the keyup event on the body of the dialog’s page. When an Alt-I is detected, a click event is manually sent to the insert button
Another subtle, yet important key function is the use of tabs to cycle through input field selection. Tab should select the next logical input field. While shift tab should select the previous logical input field. In the insert Bing map dialog we’ve chosen the logical order to be
To assist in this, we added a function called handleTab which takes an event, a previous control id and a next control id. The function uses a jQuery selector to send focus to the next or previous control if tab or shift tab is pressed respectively.
Wiring in our tab functionality is as easy as adding the following code to the setupKeys function:
I hope you’ve found this overview of the insert Bing map add-in useful. Be sure to download the add-in and make use of it. It’s not only a great extension of Expression Web, it’s also a great example of how to make a professional looking add-in.
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:
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:
I hope this answers your questions.
Paul Bartholomew
Microsoft Expression Web
SlapShot is a new extension written for Expression Web 4. For those of you who already use the SnapShot panel (a feature that debuted in Expression Web 3), you will feel right at home with SlapShot.
For those of you who haven’t yet used SnapShot (or who need a quick refresher course), SnapShot is a panel in Expression Web that displays an image of the current page as rendered by the selected browser. It allows you to easily change the browser and browser resolution without having to repeatedly preview in browser to see your changes.
SlapShot is based on the same premise in that you can easily preview a page without loading a browser, however SlapShot extends the features of SnapShot by including full ActiveX support (Silverlight®, Flash®, and so on), as well as interactivity within the page (including navigation).
In the following screenshot, you can see that SnapShot displays only the Install Silverlight message but SlapShot displays (with interaction) the actual Silverlight content.
Slapshot works by listening to the Expression Web ondocumentchanged and ondocumentsaved events (for more information about these events, see The add-in manifest in the Expression Web SDK User Guide). When a page is saved or the active document is changed (for example, the user clicks on the tab of a different page), the SlapShot display updates. Quite nifty.
There are a few conditions that must be met before SlapShot will work correctly:
For more detailed instructions configuring and loading the Development Server see the Previewing documentation.
Version 1 of SlapShot includes default support for the version of Internet Explorer that is installed on your computer.
You can enable Beta (not all features are available yet) Firefox support in the SlapShot panel using the following steps:
The SlapShot add-in uses a fairly large swath of the extensibility layer and, hopefully, can provide a reference about how to get various pieces of data out of Expression Web 4 (as well as be a useful tool). SlapShot is already available on the Expression Gallery.
To install SlapShot
Enjoy!
John DixonExpression Web
Expression Web 4 (released last week!) has a powerful new Search Engine Optimization (SEO) reporting tool that identifies potential SEO problems in your site. This tool makes it very convenient to automatically locate mark-up patterns that might be compromising your page rankings. But all versions of Microsoft Expression Web have a range of features you can use to drive SEO improvements into your mark-up. Let’s take a look at them!
SEO guidance on the Web tends to fall into one of the following categories:
To expand on these, your mark-up should be clean and well-constructed, so that crawlers can understand and crawl it efficiently. You should exercise every available opportunity to describe and differentiate your page content to search engines (including non-user-facing information such as meta tags that provide a description). Finally, you should avoid looking like you’re attempting to game the system by misrepresenting your content or artificially inflating page ranking via SEO spam. I’ll cover all these points eventually; this post is dedicated to the first bullet.
One consistent (but not necessarily the most critical) component of SEO involves the mark-up or code of your web pages. Search engines employ programs called crawlers to retrieve and index content on the web. If your pages contain code errors or otherwise confuse the crawler, search engine results can be compromised and not in your site’s favor. Good quality mark-up also increases the usability of your site, resulting in happy visitors that stick around longer.
Here’s a simple list of rules you can use to help crawlers successfully index your site.
Your pages should be well-formed and free of coding issues. Page hyperlinks should point to existing content and written in a consistent way (that is, all links to the same destination should be identical in case and syntax). Finally, large sites should provide an index or robots.txt file that describes the site content you want crawled. I will cover the first two bullets below.
If you are not already practicing web standards, the SEO benefits of using web standards might help motivate you. If your markup is syntactically correct and adheres to the rules of your page’s doctype declaration, you reduce the work required to crawl your content. The faster a crawler can get through your site, the faster results for new content will be available to web searches. Expression Web makes it very easy to keep tabs on the quality of your HTML. Open up any page in the tool and both the status bar (at the bottom of the application) and code editor provide immediate feedback regarding the presence or absence of mark-up errors.
In the following screenshot, I’ve opened up a version of http://msn.com in the Expression Web code editor. The status bar shows me right away that there is a mark-up error on the page. If you click the warning icon in the status bar, you’ll get a pop-up menu that allows you to jump to the coding problem or run a complete compatibility check. If you choose to jump to the code editor and there are multiple code errors, you can press F8 to jump to the next code error.
To run a comprehensive report for your site, select Compatibility Checker from the Tools menu, which opens the following dialog.
This dialog lets you check your HTML/XHTML and CSS compatibility against a number of different doctypes and browser versions. You can also easily restrict results to the current page, all open pages, or your entire site. Choose your settings and click the ‘Check’ button to send the code checker on its way. Results pop up in the Compatibility panel.
You can double-click compatibility errors in the output panel to jump directly to the problematic code. Hover over the highlighted issue with your pointer, and a pop-up tooltip describes the problem diagnostic and guidance for resolving it. You can also use the F8 key to move forward and back through report results on the current page (F8 moves to the next problem, Shift-F8 will take you back).
As in many things, there is a place in SEO work for being consistent as well as a place for differentiating yourself. When it comes to putting links in mark-up, there is a particular value on standardizing on a consistent format for URLs.
Search engine algorithms are complicated and constantly evolving but all modern engines analyze links to pages as a critical part of indexing pages and providing page ranks. Links tell the search engine there is other site content it should crawl, and links build a map of inter-relatedness that defines the relative value of page. A large number of incoming links to a target page is a sign that the destination represents especially valuable or authoritative content. This is true both for links coming from other sites and links that originate within your own site. (Numerous high-quality external incoming links, of course, are most valuable for elevating search rank.) For best search results, you should insure that links point to content that actually exists. It’s also important that links are expressed in a consistent way. Components of a URL are, technically, case-sensitive; crawlers can therefore potentially divide page rankings between URLs that are identical except for casing or other differences (described below).
Expression Web provides help for both these problems. First, you should regularly run the broken links report. To do this, open your site in Expression Web. Click the Site View tab and then click Reports at the bottom of this view to see a list of reports that Expression Web can run for you, including several that relate to hyperlinks in your site.
Next, click the report titled ‘Broken hyperlinks’ and you’ll see the following screenshot. In the example below, I’ve neglected to properly format an external hyperlink. Expression Web has also determined that a link to an embedded image is in good shape.
To fix the problem, double-click the reported problem in the report to open a more powerful version of the Edit Hyperlink dialog.
This dialog lets you jump to the link in the page itself for correction (just click the ‘Edit Page’ button). Or you can the correct URL in the dialog and apply the link fix to all pages or a subset.
Once you’ve fixed all broken links in your site, you should review all internal links to insure they are expressed in a consistent way. As mentioned previously, most parts of a URL are case-sensitive. Web servers that run non-Microsoft operating systems might return entirely different content for http://contoso.com/mypage.html than http://contoso.com/MYPAGE.HTML. Search engines can therefore rightly regard these links as unique (depending on other factors). If the links actually point to the same content, search results are split between them, diluting the rank of each URL. A good practice, therefore, is to case all URLs in a consistent way, such as using all lower-case capitalization.
There are several other URL formatting issues you should be aware of (and fix in your site):
There are several ways to resolve the problem of inconsistent hyperlinks. The most straightforward method is to manually review and correct all internal links in the Hyperlinks report. To display the Hyperlinks report, go to the Site View tab, and click Reports in the bottom tab. Select Site Summary from the drop down menu in the upper left, and click Hyperlinks. Notice the status bar reports the number of broken links that have been found so far and also differentiates between internal and external links.
Click the ‘Hyperlink’ column name to sort by the link destination and more easily compare and identify problematic URLs. (To reduce the number of links in the report, you can click the green arrow on the Destination column to create a custom filter that ensures the list only contains Internal URLs.) If you find any problem URLs, double-click the URL in the list to correct and apply your hyperlink changes to all files across your site, in a single step.
You can also use Expression Web’s Find and Replace functionality to scan and modify internal hyperlinks. Hit CTRL-F or choose Edit > Find to open the Find and Replace dialog. The HTML Tags tab provides special search functionality that uses mark-up to locate and modify values:
Pull down the ‘Find tag’ dropdown and select ‘a’ in order to run a simple query for all <a> tags in your site. Be sure to select ‘All pages’ under ‘Find where’. Expression Web presents the results in the Find panel, which you can review for URL consistency issues. Double-clicking a result opens the associated page in the editor and jumps to the appropriate code for editing.
The Expression Web Find and Replace dialog has additional useful and powerful capabilities. Let’s say you have a mixture of internal references to your web site both with and without a trailing slash and you’d like to correct that. You can use the Find and Replace dialog to locate all <a> tags with a particular href attribute value and make them uniform. To do so, in the Find and Replace dialog box, on the HTML Tags tab, select <a> as before in the ‘Find tag’ dropdown. Now, let’s refine the search rule by clicking the ‘HTML Rules…’ button to open the HTML Rules dialog:
Click ‘New rule…’ and then select ‘With attribute’ from the dropdown menu. Next, specify the attribute (‘href’) and attribute value (the URL you’d like to correct) that should be used to filter results. Here’s what the dialog looks like using the example case I’ve provided above:
The search tool will now scan all pages looking for <a> tags with an href value equal to http://contoso.com. Now, let’s specify that these should be updated to an attribute value of http://contoso.com/ (which has a trailing slash). Click ok in the ‘HTML Rules’ dialog. In the ‘Find and Replace’ dialog, select ‘Set attribute value’ in the ‘Replace action’ dropdown. Specify ‘href’ in the ‘Attribute’ dropdown and populate ‘To:’ with the value you’d like as a replacement value, like so:
Click ‘Replace All’ and you’re on your way. Note the ‘Match case’ option in the ‘Advanced’ section. This option will allow you to easily locate and correct casing problems in URLs. Simply specify the URL you’d like to find, make sure ‘match case’ is not enabled, and provide a replacement value. The search tool will locate all occurrences of the URL in a case-insensitive way and apply a consistently cased value that you specify.
After cleaning up obvious mark-up issues that confuse the crawler, it is time to think about how to increase the useful information in your mark-up that will maximize your page rank and the likelihood that a user will click-through to your site. Expression Web can help with this, too, a topic that I will cover in a post to be published shortly.
Michael Fanning Principal Architect, Microsoft Expression Web
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.
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:
Let me know what you think!
Erik Mikkelson Software Development Engineer in Test, Expression Web
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
A guest post for the Expression Web Team Blog by Morten Rand-Hendriksen
If you use Expression Web or most any text editing and reading software, you likely already use the Find feature to search for text. But if you’re one of the few who is not using the Find feature in Expression Web, you are likely wasting time doing repetitive tasks the program can do for you far more efficiently. I don’t know about you but for me time = money and I like to spend as little of the former to get as much of the latter as possible. And to that end Find is an important tool in my toolbox. In this post, I’ll breeze over the basic Find features everyone should already be using, and then dive deeper into a few scenarios for using more advanced Find options called HTML Rules.
The basic operation of the Find tool in Expression Web is simple: hit Ctrl+F on your keyboard and the Find and Replace dialog pops up.
From here you enter the string you want to find and click either Find Next or Find All. Using Find in this manner is an efficient way to dig through your long pages. For bigger problems that reside throughout multiple pages, read on
The majority of my work revolves around WordPress which is a fairly small CMS. Even so the current installation of WordPress running on this computer contains an astounding 3,475 files sorted in 375 folders. Finding a particular string of code in that pile of files by opening and searching each page one at a time would take hours if not days even if I managed to narrow down my search to just a few folders. Solution: select the “All pages” option to search every page in your site. If you are searching text that appears in the code of your page, make sure “Find in source code” is also selected in the Advanced column.
While working on a site I discovered that the WordPress function called wp_list_pages() wasn’t really doing what I wanted it to. To get it to work for my purposes I needed to find the file in which that function was defined but I also needed to know if there were any other elements currently using that function that would be affected by any change I made. In other words I needed to sort through my 3,475 files and find every instance where the string “wp_list_pages” showed up.
From these search results in the Find panel, I was able to ascertain not only where the original function was defined – the very first Find result in wp-includes/post-template.php – but I now also had a clear idea of exactly what other pages would be affected if I were to change the function. Since the search produced 109 results in 72 pages and only 5 of these were the original function definition, it’s safe to say altering the original function was not the best idea so I decided to write a new function with a new name based on the original. To get to the original function all I had to do was double-click on the search result and Expression Web opened up the file and highlighted the entry I was looking for.
Under my current WordPress work environment I have 20 individual themes I’m working on. Each theme controls the look and functionality of a separate site. In each of the themes there is a file called sidebar.php that defines what the sidebar should look like. This template is called by a custom WordPress function called get_sidebar() and shows up in all the templates as <?php get_sidebar() ?>. What if I wanted to change these function calls to a more generic php include function? A quick Find of the string “get_sidebar” tells me there are 213 occurrences of the function call in 213 pages so that’s a lot of work. Unless I use Find and Replace.
I hit Ctrl+F to open the Find and Replace dialog, and then I click the Replace tab. In the Find what box I enter the target string <?php get_sidebar() ?> and in the Replace with box I enter the new string <?php include ('fileName.php'); ?> . If you have more than one page selected in your site or if you check the “All pages” option, the Find and Replace dialog also provides the Replace All or Find All buttons. To make a sweeping change of all the calls to the get_sidebar() function I clicked the Replace All button and Expression Web made the substitutions on 213 pages for me in less than 30 seconds. The only thing I have to worry about is making sure I replaced the right function with the right new function.
So far we’ve looked at simple text searches. But from time to time you may need to do more specific searches to dig out particular instances of a query. For example, you may want to find only those links that have particular attributes, or content wrapped with a specific tag within a certain part of your site. Using global search for this is not particularly productive because you may end up sifting through hundreds or thousands of search results. To help you zero in on what you are looking for, Expression Web lets you apply HTML Rules to your search, which enable you to include or exclude results based on conditions you specify.
Once you’ve entered your search term in the Find and Replace dialog, click on the HTML Rules button to open the HTML Rules dialog. From here you can define a single or a series of conditions, nested or individual, to refine your search. To add a condition click New rule and a drop-down menu appears. The drop-down menu gives you the basic conditions you can use: With Attribute, Without Attribute, Containing, Not Containing, Inside Tag and Not Inside Tag. These are all Boolean (true or false) conditions. To see how it works in the real world consider the following two examples.
Most websites, including Wordpress blogs, have separate sections including a header, content, sidebar, and footer plus others. Let’s say I want to add a class to all the individual list items in my Wordpress sidebar. But there are two problems: First of all, there are other lists outside the sidebar area in my page, so those lists need to be excluded. Secondly, my sidebar actually features two sets of nested unordered lists. So to target only the list items I want, I need to create a condition that finds only the list items contained in the sidebar and then only those that are nested within another list item.
To make this conditional search, I click the HTML Tags tab in the Find and Replace dialog, and select “li” in the Find tag menu. In the Replace action menu, I select Set attribute value. This reveals two new options in the dialog. For Attribute select class and in To write “newClass”. This will add “class=”newClass” to each of the list items found.
With the query and variables defined the HTML Rules button is available. I click HTML Rules to open the HTML Rules dialog and select New rule. First I need to target only the list items within my sidebar. The sidebar is contained within a div with the id “sidebar” so the first condition should be Inside tag
This reveals a new drop-down where I can define my target tag, in this case div.
Under the rule I just created there is now a new indented New rule option that lets me make a sub-rule. I set the condition to With attribute, the attribute to id, the next box to equals and the last box to sidebar. Combined these two rules will now target only instances of the <li> tag that are housed within a <div id=”sidebar”> tag.
To target only list items within list items, I also need to create a new rule with the condition Inside tag and the tag set to li. After clicking OK in the HTML Rules dialog box, my two rules appear in the Find and Replace dialog box.
When I click Find Next, Expression Web finds only the list items that are children of another list item that is housed inside the div with the id #sidebar. Since this is a conditional search and replace (or in this case find and add attribute) by clicking Replace I add the .newClass class to only these list items.
Warning: The HTML Rules you create will apply to all of your subsequent searches within the same document until you either alter the HTML Rules or click the Clear Rules button in the Find and Replace dialog box.
HTML Rules also lets you search for things that are missing, such as required attributes. For a web page to be fully accessible, all hyperlinks require a title attribute to generate ScreenTips. Let’s say you noticed that some of your category links that start off each of your articles don’t have the necessary title attribute. Searching for this missing attribute is hard because your pages will likely be littered with hyperlinks in the header, sidebar and footer as well as within each post. What’s needed is a set of HTML Rules that target only the article heads, and only links without the title attribute.
The easiest way to come up with the correct set of HTML Rules is to spell your search out by answering this question: What are you looking for? In this case the answer is: I am looking for all the links (a tags) that don’t have the title attribute that are contained within divs with the class .meta-tag.
Hit Ctrl+F to open the Find and Replace dialog and select the HTML Tags tab. Set Find tag to a and Replace action to (none). If any HTML Rules are currently in effect click the Clear Rules button to remove them.
Click HTML Rules to open the HTML Rules dialog and create a New rule. As the answer said earlier you are looking for all the a tags with a missing title attribute so in the condition select Without attribute and set the attribute to title.
To search only within divs with the class .meta-tag create a new rule, set the condition to Inside tag and the tag to div. Create a new sub-rule and set the condition to With attribute, the attribute to class, leave the next box on equals and type out the value entry-meta. With the HTML Rules defined click OK to close the dialog and click Find Next to search your page.
As with the examples earlier in this article HTML Rules searches can be done on the current document, selected pages or all pages in the site. Combined these techniques along with some smart find strategies makes this an enormously powerful tool.
If you’ve made an unusually complicated set of HTML Rules you might want to tweak later and reuse, or you have a Find and/or Replace query you know you will need again, save your search query by clicking the Save icon in the Find and Replace dialog.
Find is one of those tools you have to use a few times before you realize its full potential. Off the bat it just looks like any old find and replace text tool, but when you start using it you’ll quickly realize its way more capable than that, especially if you work with larger sites or ones you didn’t code yourself. There are caveats of course, most importantly that if you make sweeping site-wide changes to your code like in my last example you better make sure you are targeting the right string and replacing it with the correct one, otherwise you can do a lot of damage with a single mouse click.
Morten Rand-Hendriksen
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.
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.
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.
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.
Todd Moscinski, Senior Software Development Engineer
The team has released a second free service pack for Expression Web 3, which provides the following improvements:
You can install Service Pack 2 if you have Expression Web 3 or Expression Web 3 Service Pack 1 installed on your computer.
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.
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.
Now it’s time to configure the query for your database connection.
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. And now I’ll preview my page in SuperPreview to make sure the data is displaying as I want.
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.
Justin Harrison, Program Manager Microsoft Expression Web
In Part 1 of this blog post topic, I covered the following steps:
At the end of the 4 steps above, my profile page looks like this.
In this blog post, I'm going to share how to style the text in the two content areas highlighted in green. For the content area on the left, I use the following css to style the profile name. In my example, the text would be "Pei Pei".
.nametext { display:table; color:cccccc; font-size: 16px; font-family: Trebuchet MS; margin-left:10px;}
This is how the result looks like:
Next, we want to style the "music type" text below the profile name. In this case the "Indie/Pop/Rock" that is hardly legible. I use the follow css:
td.text strong{ color:cccccc; font-size: 12px; font-family: Trebuchet MS; margin-left:10px;}
Next, I use the following css to style the title in the Blog Entry content area:
btext { color:cccccc; font-size:9pt;}
The downside of styling it this way also style the text in the Friend Space content area. But I prefer to hide that content area anyway.
I used the following css to hide it:
table.friendSpace {display:none;}
That's all for this blog post. In the next post, I'll share how to customize the Contacting <Profile Name> content area.
Sayuri Wijaya GouldProgram Manager in Expression Web
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>
<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>
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;}
table, tr, td { background-color:transparent; border-style:none; border-collapse:collapse; background-image:none;}
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; }
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; }
body, .bodyContent,table , tr, td, li, p, div { color: cccccc; }
a:link { color: ff6600; } a:hover { color: cc3300; }
a:visited { color:lime; }
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.
Are you still waiting for a flood of visitors to find your site? Wondering if you need to invest in some online ads or an SEO specialist? Before you do any heavy lifting, first try the simple task of reviewing the titles of your web pages for their search relevance. I just published the following post to introduce you to one basic SEO concept and also show all of the options for efficiently reviewing and editing web page titles in Expression Web.
Read the entire post here:
http://blogs.msdn.com/anna/archive/2010/03/11/increase-your-search-rankings-with-better-web-page-titles.aspx
Anna Ullrich
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. 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
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