Expression Web 101

Posted on February 2, 2011


Someone approached me during the “cloning” session during Microsoft Philippines’ Who Dunn IT event.  She told me that she used to be a developer but eventually forgot how to code when she became a project manager.  I am not a CS or IT student, so I am not really into developing.  But I told her that she can try Expression Studio, since it is very easy to use even though you don’t have a deep background coding.  I was not able to ask her name, but this blog post is dedicated for her and to those who are still starting to learn how to code like me.

As I mentioned in my previous blog post, Expression Web is the replacement for FrontPage. Like FrontPage, it is also a WYSIWYG editor that can be used to design and develop webpages using HTML, CSS, PHP, ASP.NET, XML, and JavaScript.

When you select new page, you will be shown choices as to how you want to develop your webpage. The General tab allows you to choose what file you want to create such as HTML, PHP, CSS, etc. On the other hand, CSS Layouts, Style Sheets, and Frame Pages have templates you can choose from.

For now, let’s choose HTML. A template including the usual <html>, <head>, and <body> tags is automatically generated for you. In Expression Web, when you type a start tag, it automatically closes it with the corresponding end tag so you don’t need to worry about which tags you weren’t able to close later on. There is also IntelliSense, where you can just type the first few letters of the element and it gives you matching choices. This is actually useful since you don’t need to memorize everything or do trial and error. Yes, I am very guilty of trial and error. 😀

At the bottom, there are tabs where you can choose whether you want to show your webpage in Design view, Code view or Split view.  The Split view shows both Design and Code panels and is very useful as it highlights the code snippet that corresponds to the element I select in the Design panel.

On the right panel, there is a Toolbox where you can just drag and drop elements to your webpage. It doesn’t matter if you drag it to the Design panel, as it automatically generates the corresponding code snippet for you. Conversely, you can choose to drag it to the Code Panel, and it the corresponding element will show up in the Design Panel as well.

Intellisense works for CSS as well.  In addition, there is a CSS panel on the left side where you can just select which CSS property you want to edit and type the attribute in the box beside it.

Expression Web is part of Expression Studio.  It is available in MSDNAA as well as DreamSpark.  You can also get the free trial version here.