I have a habit of previewing my web pages each and every time I make any change to them. Then I key in CTRL + S or choose ‘Save’ from the common toolbar and then hit F12 or ‘Preview’ from common toolbar; to preview the page. You need to save your web page before you preview it in the browser, hence these two steps. But at times you forget to save your page before you hit F12 and you are prompted with a warning to save your changes before you preview them. 

Though one click on ‘OK’ in this window would directly take you to the preview in the browser, it is irritating to get such warnings when you are in the middle of something and desperately making something to work.

This warning could be disabled and you could ask Microsoft Expression Web to automatically save your page before previewing. Follow either of the following steps:

1.       In above warning, check the box – ‘Automatically save page before previewing’.

2.       Go to File > Preview in Browser > Edit Browser List…

Check the same box – ‘Automatically save page before previewing’.

Now you can hit F12 or choose to preview your page as soon as you create/edit it without having to save it explicitly.

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.

When you choose ‘Paste’ from the Edit menu or press ‘CTRL+V’ in the design view of the web page, to paste a copied piece of text, the Paste Options button  appears just below the pasted text. As you hover over your mouse on the button, it displays a down arrow next to it. Click on the arrow to get a menu as shown below:

Let us explore each of these options in detail.

1.       Match Destination Formatting

This is the default option chosen when you paste text into your Expression Web document.

If the source document contains a style that has same name as your destination document, this option applies the styles defined in the destination document and not from the source from where the text is copied. For instance if you copy a Heading 1 text from a Microsoft Word document and paste it into the page in Expression Web, the pasted text would be formatted according to the Heading 2 style defined in Expression Web.

2.       Keep Source Formatting

This option retains the styles of the source document from where the text is copied, not considering the styles in the destination Expression Web document.

In the above example the Heading 1 would be retained as it would appear in the Microsoft Word document after it is pasted in the Expression Web page.

3.       Remove Formatting

This option removes all formatting and pastes the text as plain text.

4.       Keep HTML Only

This option can only be used when you are copying any HTML code and you want to render the text in the code rather than displaying the tags. For instance, <pre>This is a piece of text </pre> would be displayed in a preformatted

5.       Keep Text Only…

Choose this option when you want to paste just the text from the source. When you choose this option you get the Paste Text dialog box shows up.

Paste Text dialog box contains more options to format your text. For more details about Paste text options, see Import and format content from other documents in Microsoft Expression Web

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.