Exploring The Interface of Microsoft® Expression® Web

Posted by: Minal Agarwal , on 3/7/2007, in Category Expression Web
Views: 24435
Abstract: In this article we will take a whirlwind tour inside Microsoft® Expression® Web and understand the interface. We will explore the workspace including the Visual Aids and Document Type Information.

Expression Web Interface

The success of any design tool lies on how well its interface contributes to your productivity. Expression Web’s interface is designed specifically to make access to tools easy while maintaining maximum area for design surface. Specialized task panes, toolbars and visual designs give you precise control of page layout and formatting.
The Microsoft® Expression® Web workspace provides you with the tools you need to create and modify web pages and websites. The workspace is customizable, so you can change the way it looks to best match your working style. Here's what the workspace looks like when you first install Expression Web.

Expression Web Workspace

TIP: To reset the workspace to the default, on the Task Panes menu, click Reset Workspace Layout. 

Workspace comprises of:
i.      Menu and Toolbars
ii.     Task Panes
iii.    Editing Window
iv.   Status Bar
Menus and Toolbars
Menus display a list of commands. Most of these commands have images next to them to help you quickly associate the command with the image. For instance File Menu contains commands like New, Open, Open Site, and so on. Some of these commands are also expandable displaying some more options. Expression Web Menus and Toolbar

Toolbars can contain buttons, menus or a combination of both.

Task Panes

Task Panes in Microsoft Expression Web are designed to help you access the tools you need, easily while you work. The default interface will include an Editing window surrounded by four task panes:
a. Folder List:
Expression Web displays all the files and folders in the current Website inside the Folder List task pane. You can expand the folders by clicking the [+] button to the left of the folder name and collapse folders by clicking the [-] button to the left of the folder name.
Expression Web Folder List  

The folder list has many similar features like a file manager, such as creating new folders, adding files, deleting folders, and so on. The Folder List is similar to the Web Site tab in the Editing window. But this tab allows for more customized views than the basic view provided by the Folder List.

You can Right-click a file or folder in the Folder List for a menu of options.
CAUTION: Any files deleted from the Folder List are permanently deleted. There is no Recycle Bin in Expression Web, so be careful!
b.    Tag Properties and CSS Properties:
The Tag Properties task pane enables you to quickly see all of the set attributes and values of the tags that are currently active in the current web page. The task pane also enables you to modify the set attributes and set new attributes for the current tag.
Expression Web Tag Properties and CSS Properties
CSS Properties task pane can be used with an open web page, external CSS file, or with the Manage Styles task pane to review and change the properties and values of existing styles. The CSS Properties task pane enables you to quickly see all of the styles that the current selection in your web page uses, the order of precedence of those styles, and all of the properties and values of those styles. 

c.    Toolbox:   

Toolbox task pane contains HTML Elements, Form Controls and ASP.NET Controls. Microsoft Expression Web has made it convenient for you to use all these controls in your web pages only by dragging these onto your web pages. The code Expression Web creates when you drag an item onto your page depends upon the DocType declaration in your page.   


Expression Web Toolbox 
d.     Apply Styles and Manage Styles:
The Apply Styles task pane enables you to apply, remove, modify and delete styles; attach or detach external cascading style sheets (CSS); select all instances of a style and traverse to the code that defines a style’s rule set. Apply Styles task pane displays each style according to the rules of the style, so you can identify the style you want to apply just by looking at the style’s visual appearance.
 Expression Web Manage Styles
When you open a Webpage, this task pane lists styles that are defined in all of the pages and CSS, including external, inline and internal CSS. You can set the task pane to list all styles or only the styles used in current web page or current selection in the page.
The Manage Styles task pane enables you to do all the tasks you can do with Apply Styles task pane. Apart from these tasks you can use Manage Styles task pane to move styles from an external CSS to an internal CSS and vice versa, or to move the location of a style within a CSS.
When you open a web page, the Manage Styles task pane lists all styles that are defined in the page, external and internal CSS, but not inline CSS. All class-based, element-based and id-based styles appear under either the name of the external.css file that contains the style or Current Page if the style is in an internal CSS.        
All the other Task Panes can be found in the Task Panes Menu. Task Panes can be maximized by clicking on the maximize button. You can have multiple task panes open at a time and adjust the position and size of each task pane according to your requirement. For that you can drag a task pane to any edge of the Expression Web Interface to dock it on that edge or drag it away from an edge to make it a floating task pane that can be positioned anywhere within the user interface. When you arrange the task panes in a layout that suits your need, Expression Web automatically uses this layout the next time you start the program.
Task panes also contain tabs so that multiple task panes can be present within the same window. The following figure shows the Manage Styles task pane with several tabs inside it. TO activate any of the other task panes, simply click the tab. Arrows are also provided when the pane doesn’t have enough space to display all tabs.
To add a task pane as a tab within another task pane, simply drag one task pane on top of another.
To open other task panes
Select the intended task pane from the Task Panes menu. A checkmark on the Task Panes menu indicates that a task pane is visible in your workspace. If a task space is selected but is not visible because it is merged with other task panes, simply click the task pane on the Task Panes menu to make the task pane visible.
Expression Web Task Pane Menu

To move a task pane

Click on the title bar of the Task Pane and then drag the title bar of the task pane to the new location.
To dock a task pane
You can both drag the title bar of a floating task pane to the edge of the program window or Right-click the task pane tab or title bar and then click Dock.
To float a task pane
You can both drag the title bar of a docked task pane away from the edge of the program window or Right-click the task pane tab or title bar and then click Float.
Editing Window
Editing Window is the area in Microsoft Expression Web where you create and modify your Web pages.

ExpressionWeb Editing Window

The top of the Editing Window shows the files that are open in the form of tabs. The file you are currently working on is highlighted. You can close the current page or file by clicking on the cross displayed on the extreme right corner of the Editing Window. You can switch between the tabs by keyboard shortcuts Ctrl + Tab or Ctrl + Shift + Tab.
Below the tabs is a Quick Tag Selector Bar. HTML tags from the document are displayed on this bar in a nested order. To select the tag you can either click on it or on the arrow next to it for more options.
In addition to these, there are three views to this window for the purpose of editing the web pages.
Page views –
Design View: This view is WYSIWYG. You can create and edit web pages using the design controls in this view.
Split View: You can review and edit web page content in a split screen format that offers you a simultaneous access to both the Code and Design views.
Code View: You can view, write and edit the HTML tags yourself with the optimize code features provided.
For switching between these three views you can use the keyboard shortcuts Ctrl + Page up or Ctrl + Page Down
The Editing Window in Expression Web does not use Internet Explorer for rendering. It is a browser-independent rendering of your web page.
Status Bar
The Status bar of Expression Web is extremely informative. It contains tools that warn you when incompatible or invalid code is detected and also provides information about your current editing modes, such as visual aids mode, style application mode, rendering mode and page size as well as information about the file you are editing, such as file size, HTML schema and CSS schema. 


1.       Code Error Detected Expression Web Code Error icon : You can traverse to the error in the code on your web page.

2.       HTML Incompatibility Detected Expression Web Incompatibility detected icon: You can go to the HTML incompatibility schema in your code.  

3.       Visual Aids: Off: Change the Visual aids mode. For more information see Visual Aids later in this article.  

4.       Style Application :Manual: Double click to open the Style Applicator Toolbar and change the mode.  For more information see Generated Cascading Stylesheets later in this article.  

5.       87.6 KB: Size of the current file. When you hover over the number, Download statistics are displayed, which give a breakup of the total file size. 




6.       Standard Standard Rendering mode. The rendering mode is determined by the document’s DocType. Double clicking would open the Page Editor Dialog box from where you can select the suitable DocType. For more information see How to Set Document Type Information later in this article.  

7.       591 x 554Describes the current page size of the editing window. To change the size of the window click on the current size and select the size from the list or select Modify Page sizes. 


TIP: You can add, modify or remove the page size setting also in the Design view from View menu, select Page Size and then click Modify Pages.




8.       XHTML 1.0 TThis tells you what document type is set. Double clicking would open the Page Editor Options dialog box that would show the options for HTML Schema. For more information see How to Set Document Type Information later in this article.  

9.       CSS 2.1: This shows the CSS Schema that Expression Web applies to the current page. Double click to open the Page Editor Option dialog box. For more information see How to Set Document Type Information later in this article.   

Visual Aids are user interface elements that make it easier to work with Web pages. Expression® Web offers nine different Visual Aids to make it easier to position items and locate elements on the Web page. Visual aids help you see empty or invisible elements and elements with hidden borders. You can also use visual aids to find elements that have hidden or invisible styles, as well as ASP.NET controls that aren't visible on a page. Finally you can use visual aids to see which tags are used around specific content, and you can see the size of margins and padding around your tags.

To access Visual Aids; select Visual Aids from View menu and select the desired visual aid from the sub menu.

NOTE: The Status bar displays the current status of the Visual Aid. You can turn it on or off just by double clicking on the Visual Aids area of the Status bar. 

Following Visual Aids are available on the Visual Aids menu: 

 1.       Block Selection= This is enabled by default. Expression® Web displays a block selector for HTML blocks. A Block selector is a small tag indicator, when you hover your cursor in a block a dotted rectangle appears around the tag. When you select the block a shaded area is displayed indicating padding around the element.

2.       Visible Borders= This selection displays dotted borders around HTML elements that don’t have borders. For instance, a table in Expression® Web, Visual borders will render a dotted border around every cell even if the table has no border.

3.       Empty Containers= The Empty Containers Visual Aid displays borders around certain elements that act as containers for other elements. For example, an HTML form is visible by default in Design View, even when the form has no controls in it.

4.       Margins and Padding= This shows the margins and padding around all elements; margins appear in red and padding appears in blue. You cannot use Margins and padding visual aid to change margins and padding.

5.       CSS Display: none elements= Shows elements that are hidden by a style that includes display: none.

6.       CSS Visibility: hidden Elements = Shows elements that are hidden by a style that includes visibility: hidden.

7.       ASP.NET Non-visual Controls= Shows a rectangle for ASP.NET controls which don't display anything.

8.       ASP.NET Control Errors= Shows an error message when an ASP.NET control encounters an error, such as not connecting to a data source.

9.       Template Region Labels= Shows a border around editable template regions, including a tab with the name of the region, in pages based on Dynamic Web Templates or ASP.NET master pages.

The Browsers read the Document Type (DocType) information to determine which version of HTML is used in the web page. You can set a default DocType so that Microsoft® Expression® Web automatically inserts a DocType declaration on all the new pages. You can also choose not to automatically insert a DocType declaration on new pages.

     Expression Web Page Editor Options

The DocType declaration on a web page also determines the schema Expression Web uses to coerce incompatibility notifications and IntelliSense for HTML and script. Expression Web uses the secondary schema if a page has an unrecognized or missing DocType. If there is an incompatibility or error in your HTML, Expression Web displays it as an icon in the status bar. The Code Error Detected icon indicates an error in the code on your page. The HTML Incompatibility Detected icon indicates an incompatibility with the HTML schema you selected.

To set the default DocType declaration that Expression Web inserts when you create new pages  

On the Tools menu, click Page Editor Options.

In the Page Editor Options dialog box, on the Authoring tab, select the DocType and Secondary Schema you want to use for all new files.

NOTE:  To prevent Expression Web from inserting a DocType declaration, in the DocType box, select None.  

To change the DocType declaration in an existing page  

In Code view, in your page, edit the DocType declaration. Here's an example of a DocType declaration.

<! DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 

When you format items in a web page, Microsoft® Expression® Web produces that formatting by generating new styles in an internal cascading style sheet (CSS) or modifying existing styles in the CSS.

Expression Web generates and modifies styles for you in Auto mode (default) or Manual mode. No matter which mode you choose, when you format an item that doesn't have a style, Expression Web generates and applies a new style for you. For example, if you select a paragraph of plain text in your web page and apply color to the text by using the Font Color button in the Common toolbar, Expression Web creates a new style and applies it to the text to format its color. If you then format another property of that same paragraph of text, such as the paragraph's font-family, Expression Web adds a new property declaration to the generated style it just created.

In Manual mode, you can write your own CSS to simplify your design process. You also have additional control provided by the Style Application toolbar.

TIP: If you're new to writing CSS, use Auto mode. If you're an experienced CSS author that can write your own CSS, use Manual mode to streamline your design process.  


We have learnt about the various task panes, menus and toolbars, status bar and visual aids. We also covered how to set various properties and Document Type information. You have now gathered basic knowledge of the interface and how to start working in this interface. 

This article has been editorially reviewed by Suprotim Agarwal.

Absolutely Awesome Book on C# and .NET

C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.

We at DotNetCurry are very excited to announce The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).

Organized around concepts, this Book aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on the latest .NET Core 3.0, .NET Standard and C# 8.0 (final release) too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.

Click here to Explore the Table of Contents or Download Sample Chapters!

What Others Are Reading!
Was this article worth reading? Share it with fellow developers too. Thanks!
Share on LinkedIn
Share on Google+

Minal Agarwal, Expression Web MVP, MCDST, works as a freelance web designer (SaffronStroke) working on Expression Web, Photoshop and other Graphical tools. As a hobby, she also runs a famous Food site called Foodatarian.com. Follow her on twitter @ saffronstroke

Page copy protected against web site content infringement 	by Copyscape

Feedback - Leave us some adulation, criticism and everything in between!






jQuery CookBook