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.

You must be familiar with the Apply Styles and Manage Styles panels (earlier known as Task Panes). The Style toolbar has fewer but similar functions. The Style toolbar enables you to quickly use class and ID selectors, create new styles and attach existing ones.

But if you have been using the Apply Styles and Manage Styles panel, I would not suggest you to continue using it. Since the panel has lots of functions and options than the toolbar, in addition to a visual illustration of the styles. If you do not want your panels to eat up most of your workspace or want to use only primary functions of the Style toolbar, then it is one handy toolbar.

To launch the Styles toolbar

Right click on any toolbar and select ‘Style’. The toolbar looks like;

The toolbar has four functions –

1.       Class drop down:

Lists all class selectors that are defined in the internal CSS, linked or imported external style sheets. Use to assign, remove, change, or add an undefined class.

2.       ID drop down:

Lists all the ID selectors defined in the internal CSS, linked or imported external style sheets. Use to assign existing ID, create unique ID or remove any ID.

3.       New Style button:

Launches the ‘New Style’ dialog box.

4.       Attach Style Sheet button:

Launches the Attach Style Sheet dialog box as shown here:

NOTE: The Class and ID drop down boxes display the selectors only when your current selection in the page uses a class and/or ID selector. Else the boxes appear blank. Click on the drop down arrow to view the defined or create new selectors.

When you create a form, you add form controls to the form. In other words, form controls like textboxes, radio buttons, and check boxes are grouped inside form tags. But if you add form controls directly to your page, they are not enclosed within the form. But you can set Microsoft Expression Web to automatically add form tags around any form control that you add to your page. This will take care of the form controls if they are not already enclosed within the form tags.

To automatically add form tags around HTML form controls, follow these steps:

1. Go to the Tools menu > choose Page Editor Options.
2. In the Page Editor Options dialog box, click the General tab.
3. Select the checkbox: ‘Automatically enclose form fields within a form’.

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.

Rearrange Commands tool lets you do all possible actions to customize your toolbars and menus the way you want them. You can rearrange the commands on the toolbar to:

·         Add, remove, reorder the commands on the menu bar and toolbar.

·         Modify the name, image and keyboard shortcut associated with a menu command or button on the toolbar.

To launch the Rearrange Commands dialog box, go to Tools > Customize. In the Customize dialog box, go to the Commands tab and click Rearrange Commands.

Use the Rearrange Commands dialog box to do the following:

1.       Choose a menu or toolbar to rearrange: Select the Menu Bar or Toolbar you want to change.

2.       Controls: Select the controls you want to change.

3.       Add: Click the button to add a new control.

4.       Delete:  Click the button to delete a control.

5.       Move Up: Click the button to move the control up in a menu bar or towards left on a toolbar.

6.       Move Down: Click the button to move the control down in a menu bar or towards right on a toolbar.

7.       Modify Selection: The drop down menu has a number of options like;

·         Reset – resets the control

·         Delete – deletes the control

·         Name – You can enter a name for the control along with its keyboard shortcut. In the above image; &File… denotes ALT + N is the keyboard shortcut to access File menu.

·         Copy Button Image – lets you copy the button image associated with this control.

·         Paste Button Image – lets you paste a button image.

·         Reset Button Image – resets the button image to its default.

·         Edit Button Image – lets you edit the button image.

·         Change Button Image… – lets you choose a new button image from the menu.

·         Default Style – set the style of the button to its default.

·         Text Only (Always) – sets to always display only text for the control.

·         Text Only (in Menus) – sets to always display only text for control only when it appears in a menu.

·         Image and Text – lets you always display an image and text for the control.

·         Begin a Group – adds a group separator bar.

·         Assign Macro… – lets you link a control to a macro.

8.       Reset: Resets any and all the actions you carried out on the menu bar and toolbar.

A Quick Tag Selector bar is located at the top of the editing window in your Expression Web workspace. It makes it easier for you to select, edit and remove tags while working in Design or Code view of a web page. To view the Quick Tag Selector bar, go to View > choose Quick Tag Selector. See image below:

The Quick Tag Selector is to be read from left to right to follow the order of the hierarchy of tags. For instance; in the image above, <body> contains <div> which in turn contains <p>. Place your cursor inside the tag in Design view or Code view and that particular tag will be selected in the Quick Tag Selector bar at the top. The drop down arrow besides each tag in the Quick Tag Selector bar displays a menu as shown above. Let us see what each option does:

1.       Select Tag selects the start and end tags along with the content of those tags.

2.       Select Tag Contents selects only the content inside the tags.

3.       Edit Tag… displays the Quick Tag Editor window, which enables you to add, modify or wrap tags.

4.       Remove Tag removes the start and ends tags, leaving the content intact.

5.       Insert HTML… displays the Quick Tag Editor window that lets you insert HTML into your web page.

6.       Wrap Tag… displays the Quick Tag Editor window that lets you insert nested tags into a selected tag.

7.       Tag Properties… opens the Tag Properties dialog box or task pane related to the tag.

To change the background color and font color of a div on mouse hover, use this CSS code.

<style type=”text/css” >

.title_div{

                background-color:black;

                color:white;

}

.title_div:hover{

                                background-color:green;

                                color:black;

}

</style>

<body>

        <div class=” title_div”>

                        On mouse over div becomes green and text turns black.

        </div>

</body>

The same can be done in Microsoft Expression Web in very simple steps.

1. Go to the Apply/Manage Styles task pane and choose ‘New Style’. In the New Style dialog box, enter the Selector as .title_div and set the background color to black and font color to white.

            

2. Click OK to save. Then position your cursor into the div and right click on the style in the Apply Styles task pane and select Apply Style from the menu or simply double click on the style, to apply it to the div.
3. Now create another style called .title_div:hover (a pseudo-class to catch the event hover/mouseover) and set the background color to green and font color to black.

             

4. Save your document and preview in the browser.