Here are some websites and blogs that offer very informative tutorials, articles, tips, tricks, trainings, ebooks and other resources for Microsoft Expression Web.

1. http://expression.microsoft.com/en-us/cc197140.aspx for tutorials, videos, free Expression Web templates.
2. http://any-expression.com - is owned by Tina Clarke, who is a fellow Expression Web MVP. The site features plenty of tutorials, tips, ebooks on Expression Web and FrontPage.
   Her blog http://www.expression-web.net/ also offers useful Expression Web resources.
3. http://by-expression.com features excellent Tutorials and Sample Sites by Expression Web MVP, Cheryl D. Wise. She also conducts trainings for EW.
4. http://www.expression-web-designer-help.com/ is a great site to seek help in MS Expression Web, run by Jim Davidson, MVP Expression Web.
5. http://www.expression-web-tutorials.com/ and http://www.expression-web-tips.com/
   Owned by Expression Web MVP, Patricia Ann Geary, these sites include EW tutorials, templates, tips and news on EW as well as FrontPage tutorials.

As you create a new page and start adding content to it, or when you open an existing page, the way it appears in Code view or Design view is laid down by Expression Web. For instance, in Code view normal text appears in black, HTML comment appears in gray, in Design View Layout table border is green in color and so on .This is so that you can differentiate between the different elements and content on your page. But you can always customize them according to your liking.  

To customize colors and font in Code and Design View

1. Go to Tools menu > Page Editor Options.
2. In the Page Editor Options dialog box, switch to Color Coding tab.
3. The default selection is Code View unless you changed it. Choose the view you want to customize.
4. Choose an item from under the Display items box and select Item Foreground, Item Background and Font style.

 

5. Click OK.

Jump Menu Go behavior lets you associate a button (Go button) with a jump menu. In that case a jump menu should already exist in the document. Though a jump menu does not need a go button to execute, selecting an item from the jump menu causes a URL to load on its own. But a go button may be required if you want to re-select the already chosen item, which may not be registered just by choosing it from the jump menu.

When you add a jump menu go behavior, your go button will perform the “jump” action to take to the associated URL. Selecting a menu item from the jump menu will no longer direct the user to the related page then.

To create a Jump Menu Go button, follow these steps:

1. If a jump menu is not already created create one. How do I create a jump menu?
2. Add a button object near the jump menu.

 

3. In the Behaviors task pane, choose Insert and from the menu select ‘Jump Menu Go’.

 

4. You would be prompted with ‘Jump Menu Go’ dialog box, as shown below:

 

5. Choose the menu for Go button to activate and click OK.

A scrollable area is where content can be presented and can be scrolled through. When you have a lot of content to be presented in a particular section, it is beneficial to add a scrollable area, without occupying much space on the page and keeping it organized. You can always add a textarea or use iframe tags to do the same. But through HTML and CSS you can do the same for any page element.

This is done by using the CSS property – overflow. The overflow property takes any of the following values as its input:

1. overflow: auto – This will create a horizontal and/or vertical scrollbars only when needed, i.e. when the text exceeds the display area of the element.
2. overflow: scroll – This will create horizontal and vertical scrollbars, even if the text inside the element fits into its display area. The scrollbars will always reside.
3. overflow: visible – This will cause the element area to expand to make space for the content.
4. overflow: hidden – This will force the block to only show the text that fits the in it. Rest of the content will be hidden and would not be visible.

Let us create a scrollable area into a <div>as shown in the image below:

Follow these steps:

1. In the Design View, drag the <div> from the Toolbox and drop onto the page. Else in the Code View, manually type the <div></div> tags.
2. Then enter your content into the div.
3. In the Apply/Manage Styles task pane, click New Style… to launch the New Style dialog box.
4. In the New Style dialog box, name the selector as ‘scroll’ and choose following properties:

.scroll {

        font-family: “Courier New”, Courier, monospace;

        font-size: 14px;

        color: #FFFFFF;

        background-color: #000000;

        border: 1px solid #4A4A4A;

        padding: 5px;

        overflow: auto;

}

See image below for more details.

A code snippet is a piece of code which is reusable. Microsoft Expression Web 2 has some preloaded code snippets for your use, but you can create your own snippets too. Code snippets save you a lot of time in coding and prevent typing errors as well. So whenever you want to repeat a piece of code, for instance the header of a page to multiple pages, you can create a code snippet and add it to your pages.

Insert a code snippet into a webpage

1.  In Code View, place your cursor where you want to insert the code snippet.

2.  To activate the Code Snippet menu, do one of the following:

• Press CTRL + Enter.
• Click List Code Snippets on the Code View toolbar.

3. Start typing the keyword or scroll through the list to find the snippet you want to insert and hit the enter key or tab key or just double click your left mouse key.

Customize Code Snippets

To add, modify or delete any code snippet, do either of the following:

1.  Double-click on Customize list… option in the List Code Snippets menu. This would launch the Code Snippets tab on Page Editor Options dialog box.

2.  Go to Tools menu, select Page Editor Options and switch to Code Snippets tab. See image below:

Click on Add to add a new code snippet. The Add Code Snippet dialog box is prompted as shown below:

Enter the keyword for the snippet and a description to help you identify what that snippet does. Then type in the code in the text area. The Modify Code Snippet dialog box is alike, only difference being, it is populated with the code and details for the code snippet that is chosen for modification.

A Horizontal rule or line can be used to divide or separate your content and organize it well. IT could be used to separate pieces of text or images. To get an idea of how a horizontal rule would look, take a look at this image:

To add a Horizontal rule (<hr> tag in HTML), do one of the following:

1. Go to Insert menu > HTML and choose Horizontal Line.

2. The line will be immediately placed into your page. If you want to edit the horizontal line then double click on it to launch its properties as shown below:

3. Following properties can be edited:

• Width can be either as percentage of the window’s width or in pixels. The default width is 100% of the window’s width.
• Height must be in pixels.
• Choose the alignment of the rule as left, center or right.
• Select a color from the drop down. Also choose if the line should be a solid line without shading or use the default shaded one.

As designers we always prefer to define a font family for different elements of a page instead of defining a single the font. A font family is a set of three or more fonts for displaying text. If a single font defined in the page is not installed on the viewers system, then the default serif or sans serif font will be shown. Well but in case of a font family, if the first font in the family is unavailable, the second font is checked. If that font too is not available then only the system will go in for serif or sans serif fonts.

You can always open the Code view and include a <font-family> tag, but Expression Web 2 has made this easier. All you have to do is follow these simple steps:

1. Go to Tools menu > Page Editor Options…
2. In the Page Editor Options dialog box, switch to Font Families tab. See image below:

1. As shown in the above image, click on (New Font Family) under the section ‘Select font family:’
2. Then start adding fonts in the Add font box. Either choose the font from the list, or type it manually in the box. Once you do that the Add button will be enabled. As soon as you choose the font from the list, click Add and the font will be added to a new font family. To add fonts to this family, choose it from the list and click Add. It will get appended to the list. You can add as many fonts as you like.
3. The ‘Move Up’ and ‘Move Down’ buttons let you organize the font family list. This list would appear in the intellisense in the same order as it is displayed over here. Click OK when your options are set.

TIP:

To make sure that your viewers would always be able to see some text, it is better to include a serif or monospace font in your font family.

A variety of pages can be created in Microsoft Expression Web like HTML, ASPX, PHP, XML, so on. You can set a default HTML file extension for all new documents that are created in Microsoft Expression Web 2.

Follow these steps:

1. Go to Tools menu > Choose Page Editor Options.
2. Switch to the Authoring tab.
3. Under section Default Document and Extension choose the default file type for all the new documents that are created.
4. Under section Default HTML File Extension, choose between ‘.html’ and ‘.htm’.

NOTE: This default HTML file extension setting does not affect the pages that are created from any existing pages and templates.

A Byte Order Mask (BOM) is a sequence of reserved bytes embedded in some documents that use the Unicode encoding like UTF-8 and other Unicode Transport Formats (UTFs). These bytes are interpreted differently depending on the machines, viz. “big-endian” like Sun and Apple or “little-endian” like Windows and many Linux machines. BOM specifies the byte order as well as the type of UTF encoding used in the document. It makes sure that an encoded document is correctly read and interpreted by all the browsers and environments. UTF-8 standard is the most commonly used encoding, is same for big-endian and little-endian machines; hence a BOM is not required for UTF-8 files.

Microsoft Expression Web adds a BOM to all the new documents created that are encoded as UTF-8 or UTF-16, by default. However Expression Web enables you to add or remove a BOM to and from an existing document. PHP pages do not support BOM; hence do not use it with them.

To add or remove BOM from new documents

1. From ‘Tools’ menu choose ‘Page Editor Options’.
2. In ‘Page Editor Options’ window, switch to the ‘Authoring’ tab.
3. Then under the New Document section, under the ‘Add a byte order mark (BOM)’ to new UTF-8 documents with these file extensions, uncheck the box next to each file extension you do not want  a BOM.

To add or remove BOM from existing documents

1. Open the web page.
2. Do either of the following:

• In ‘File’menu and click ‘Properties…’
• In ‘Format’ menu and choose ‘Properties…;
• Or in the ‘Code view’ right click anywhere in the page and then click  ‘Encoding’.

      3.    In the Page Properties dialog box, in the Language tab, check or uncheck the ‘Include a byte order mark (BOM)’ box.

Of course there is! There may be many ways to do this, but the simplest way I found out was by nesting div tags and setting background images to them. Lets us do that.

1. In the Design view, add a div on the page by dragging it from the Toolbox task pane. This is where the larger image will be placed. 
2. Create a style for this div by choosing New Style in the Apply/Manage Styles task pane.  
3. In the New Style window, in the Background category, browse to the location of the larger image add it as the background image and set background repeat to no-repeat.
4. In the Position property, choose appropriate width and height for the div. Click OK.  
5. Now add another div, inside the above div. This nested div will contain the smaller image that is to be placed over the larger image. Then create a new style for this div.
6. In the Background property, browse to the smaller image you want to be displayed over the larger image.
7. In the Position category, choose position: relative, set width and height dimensions.
8. Now you should be able to see the smaller image above the larger image. Carefully click on the smaller image to select the entire <div>. Hold down the mouse. When the mouse pointer changes to the move pointer, drag and drop the div on the larger image exactly where you want it to be placed. When done release the mouse pointer. When you move the image, left, right, top and bottom values are set according to its position on its parent element. See image below:

The code for the same is given below:

<body>

<div style=”background-image: url (‘box_grad.jpg’); background-repeat: no-repeat; width: 450px; height: 300px”>

<div style=”background-image: url (‘arrow_right_green.png’); background-repeat: no-repeat; position: relative; left: 367px; top: 218px; width: 50px; height: 50px”></div>

</div>

</body>

NOTE: I have added inline styles for the demo. You can create these styles in an external style sheet.