Where’s Lou

I mentioned earlier I was going to be trying out a new product from Microsoft I stumbled upon named Microsoft Expression Web. I did and it’s not at all bad. In fact I have to say it’s pretty darn good.

Here’s another more thorough review of the product if you’re looking for more.

It starts with the idea of opening a web site based on it’s folder. That’s different than opening a web application project by it’s csproj file like Visual Studio starts with. I’m assuming that although this editor can be used to work on all of the design assets of a web project that it’s not really intended to integrate directly with Visual Studio, or to do code changes and rebuilding of the source behind a dotnet web application. But that’s okay - I haven’t been very impressed with the vs ability to edit web content and a clean separation of concerns may be exactly what the situation calls for.

When you’re editing an html or aspx document you will be in design, code, or split view. Code in this case means the raw text of the html, design means a nice wysiwyg presentation of the same, and split means you’ll view both at the same time. While moving around either half of the split view it will conveniently follow allong in the other half by showing you with the selection where you are positioned.

Anyone whose used Dreamweaver knows all of that’s been around forever, but one of the things beyond that I thought was most convenient is the attention that was spent on streamlining the management of css rules. For example check out this tool window that appears to the lower left by default - click for a larger image. As you’re moving through the html document the top half of this tool window is showing you a list from the outside in of all the elements and their classes in the document nested down to where your cursor is positioned, and the css rules that apply to them. In this example I was positioned on some text in a span that was positioned in an anchor. When you select one of the rules as I’ve done the area below shows you all of the css attributes which make up that style rule - and if you edit them right in this window what you’re doing is editing the css file where the style is actually defined. That’s great! Just by moving around a document it’s giving you a grand total of styles applied - and you can adjust rule itself when you need to without even going to the actual css and paging to where it’s located.

Now check this one out. It appears on the lower right by default and it’s showing you a list of the css files that have been linked in by the html document and the various rules that are defined within them. The text that’s used to display the rule is the css selector of course - in this example there are some tag rules for body, headers, and paragraph and some class rules defined in the css file as well as directly in the current html file. Now you can double click any of these things to position you right at the position in the text of the file to edit the rule by hand - but - another thing that’s much more remarkable is how you can conveniently drag them up and down to keep your styles ordered in a logical manor and drag them between files to manage blocks of css information in specific files. That’s just great. I’m sure you’re all familiar with the unordered mess large css files can quickly become.

Something else I’m curious about, but won’t look into just yet because I’m very tired and also want to remain married, is how well the editor works with other html files that have programming information embedded in them, like nvelocity from monorail or php from … er … php.