Working with Expression Web

Topic status automatically displays here - do not remove.

Bookmark this topic  Print this topic

By Colin Ramsden, October 2006.

News of the demise of FrontPage (FP) caused me some concern, because I had invested much time in learning the tool and figuring out how to make it do what I wanted it to do. Like all software, it had its strengths and its weaknesses, and the user's skill was to know what those highs and lows were. I created several topics on this website describing just that. See FrontPage topics.

I have installed the Beta 1 version of Expression Web (EW) and my first impressions are very favourable. As a prime successor to FP, it appears to continue with the FP principles of simple web design in a graphical WYSINWYG environment. [What you see is nearly/not what you get].

However, the first obvious big new feature when comparing EW with FP is Cascading Style Sheet (CSS) compatibility, display, and control. Microsoft (MS) claim web standards compliance, and indeed, EW supports the latest web standards: XHTML 1.1, HTML 4.1, and CSS 2.1. FP didn't even come close, as you had to use third party tools to test your web site for compliance.

EW has made the leap into the 21st century with web standards compliance. Standards compatibility is enabled by default in EW, with status bar icons indicating non-compliance of the currently loaded web page in the page editor window. Even if a standard isn't declared on an HTML page, EW will check it against its default (secondary) setting.

The default out-of-the-box EW layout is very much effected by its underlying Visual Studio dot Net 2005 technology. It looks and feels like the VS.NET Integrated Development Environment (IDE), and runs on the .NET 2.0 Framework—which must be pre-installed before EW.

In the intervening time between the announcement of the demise of FP (Feb 2006), and the release of EW (Sept 2006), I tested the only web development tool available from MS at the time—Visual Web Developer (VWD)—to determine its suitability as a replacement for FP.
It proved to be very much a "developers" tool heavily oriented towards ASP.NET based websites, and not for web design layout and appearances. See Working with Visual Web Developer.

EW appears to fit somewhere between the two—more technical than FP, and less than VWD. It is necessarily so, however, I can see how MS have tried to limit the technicalities by providing property dialogs for setting values. If you don't wish to do any coding, you don't have to with EW.

Customizing the IDE is as easy as drag-and-drop. An extensive array of 18 task panes are available for every conceivable operation. If you've ever used any flavor of 'Visual Studio.NET', the IDE behaviour is identical. If you're coming directly from FP, you'll need to take some additional time to learn your way around the new interface. It's not too difficult.

Microsoft have made great strides towards improving their customer support for new products. Expression Web Designer—and Visual Web Developer—have extensive online support facilities including tutorials, sample projects, development team blogs, and community discussion groups.

---

Items of interest

Whilst investigating EW, some unexpected or unusual behaviour was observed and noted below. The following descriptions may be perfectly acceptable behaviour in EW, I observed it to be different from my past experiences with MS FrontPage, and with MS Visual Web Developer (Beta 1)—as reviewed at Working With VWD.

• The Expression Web 'Help' system
• The handling of character entities
• Paragraphs with class reproduction
• Spell checking
• Paragraph block selection
• Displaying hidden formatting markers
• Tips

The Expression Web 'Help' system

The Expression Web help is a curious new looking trim version of HTML based help, presumably by now using the Microsoft Help technology developed for the dotNET framework. See Expression Web Help.

The handling of character entities

Interesting behaviour—requiring further investigation—with the conversion of named character entities into ASCII chars. The insert symbol also inserts a font style for the symbol. The inverse is the apostrophes are converted to "'" which I notice is the ASCII decimal value. This appears to be inconsistent behaviour. I note that others in the MS online community have questioned this behaviour. The emdash named character entity "—" is changed to an actual symbolic emdash character whenever I "Reformat HTML" in 'Code view'.
[Compliance standards: XHTML 1.0T, CSS 2.1] See Problems with Expression Web.

Paragraphs with class reproduction

Pleasingly, pressing Enter within a paragraph containing an applied style carries the style into the following paragraph, as it did in FP, but did not in Visual Web Developer (VWD).

Spell checking

Spellchecker works more effectively than VWD, which didn't have or even support one for its HTML editor. I noticed that the page language can be selected and assigned, and this also selects the editor dictionary.
See Languages and Spelling in Expression Web.

Text language

If you nominate the language of the page (File>Properties) to anything other than the default language of your OS (most commonly US English), EW will (by default) apply a language tag (matching your keyboard language) to the text, as shown in the following example:

<span lang="en-us">This text has an assigned language</span>

To prevent this language tagging of your text, you can either change the assigned language of the page to match that of your keyboard, or change that of your keyboard to match the language declared on the page.

Select the option to 'Automatically switch keyboard to match language of surrounding text' in the EW menu:
Tools>Page Editor Options on the 'General' tab. See Languages and Spelling in Expression Web.

Paragraph block selection

Paragraph block selection in 'Design view' is enabled through the EW menu View>Visual Aids>Block Selection. This allows for complete tag selection in 'Design view', permitting accurate block moving, copying, and deletion. Previously in FP, you would have had to swap to 'Source view' to ensure that you had selected the whole tag set.

Displaying hidden formatting markers

Hidden formatting markers in 'Design view' is enabled through the EW menu View>Formatting Marks>Show.

Bookmarking

Applying bookmarks (Ctrl + G) to existing text now automatically helpfully inserts underscores between the suggested text wording.

Automatic image sizing

Inserted images will, by default, display with the anachronistic "Height" and "Width" properties (and no measure), instead of as attributes of the "Style" property. Disabling this functionality in EW causes grief with attached stylesheets, which, by default, are changed automatically—behind the scenes—by the EW Page Editor.

The solution to having EW leave your stylesheets alone yet to also add sizing dimensions as attributes of the inline style of the image tag, is to custom set the CSS settings in the 'Page Editor Options' dialog.
See The case of mysterious automatic image resizing.

---

Tips

• Triple-click in 'Design view' to select all the text within a paragraph.
• To quickly remove all applied classes for a tag, and all inline formatting for the tag contents, move the cursor to anywhere within the tag content in 'Design view' and press Ctrl+Shift+Z, or Ctrl+Spacebar.
  Alternatively, to quickly remove all applied classes for a tag, and only the inline formatting for selected text within the tag contents, select the text within the tag content in 'Design view' and press Ctrl+Shift+Z, or Ctrl+Spacebar.
• To quickly determine if EW added its own Styles to your document, look at the 'Current Page' section of the 'Apply Styles' task pane, to see if it is expanded (showing content)or expandable (showing the '+' sign):

  

  'Apply Style' task pane showing 'Current Page' section