Expression Web - Visual Aids and CSS management cool features
Last night, I talked about Expression Web and how it is a great new design tool for web developers wishing to create visually compelling, standards based websites (either HTML or ASP.NET). I showed a load of great features which you woudn't necessarily know about unless you have spent some time with the product.
I think my favourite two things about EW that I demonstrated were the features which help with my two biggest bugbears (cus I am not a leet web design guru and CSS is still a little alien to me) - CSS Layout and CSS Management.
I think a lot of web developers struggle to layout their HTML properly using CSS especially without the support of a visual design surface, and even then it can be quite difficult to get the layout exactly the way you want to. There are lots of great aids in Expression Web to help you with this, from page templates using CSS and visual tooltips for WYSIWYG type design. But my favourite feature is the ability to turn on Visual Aids and see how the padding and margins are affecting the boxing of elements on the page.
As you can see in the above screenshot, the padding and margins (although invisible when displayed in the browser) are overlayed on top of the design surface with grey diagonol lines. This allows me as a developer to tweak my layout and ensure that it is displayed right. I don't tend to have it turned on for very long but when I need to fix an annoying spacing issue, this can come in very hand! To turn on this feature View > Visual Aids > Margins and Padding
A second neat feature is the Layers task pane which makes it very easy to see the structure of my DIV mark-up and be able to easily tab through them. By clicking on a layer using its ID it will highlight the section of markup on the design surface or in the code:
To turn this on Task Panes > Layers
The second area where I struggle is managing my styles on a web site - I admit, when I want to do stuff quickly I tend to get a bit lazy and start creating styles all over the place in my code. Not good! With Expression Web I get a great collection of features which not only keeps a track of all the CSS that I am using (or not as the case may be), where it is being stored and where it is being used. This allows me to keep a strong hold of the styles I am creating. A good practice I find is to set the environment up to suit your style and needs - some developers will use all the automated features of a tool like EW and some will be die hard, "I <insert heart symbol here /> Notepad", types. As all good tools should it lets you do what you want. For instance, there is a good level of customisation of how it will embed styles as classes or inline, and a toolbar/task pane to control whether the formatting will be Automatic/Manual:
To modify the settings Tools > Page Editor Options > CSS (Or you can double-click on the little info bar at the bottom where it says Standard)
These are only a couple of the great features that Expression Web, and as I continue to discover new things which help people like me create better looking and adhere to standards more I will post back here!
And if you haven't played with it, go download it now!
tags: microsoft, expression web, web design