You must have come across websites that play sound (some music) while you are visiting it. Some design sites, personal sites of stylists or e-cards and gift sites usually have such background sound, sometimes on the home page or to all the pages. Personally, I find it irritating. Though you can actually specify how many times the sound should be played after the page is loaded or should it be continuously played in a loop. But if you would like to add some music to your website, here is how you can do that.

To add a background sound

1. Open the website and then open the web page in Design View.
2. Right click the page and choose Page Properties.
3. In the ‘Page Properties’ dialog box (see image below), under the General tab, in the Background Sound section, browse to the location of the sound file and choose the file and click Open.



4. In the same window, to choose the duration of the sound, do either of the following:
   • Check the Forever checkbox, to play the sound continuously unless the window is closed.
   • Uncheck the above checkbox and enter/choose an integer to play the sound for a fixed number of times.

NOTES:

• The background sound would be added only on the page you are configuring on. To add it on other pages, follow the same steps on the other pages.
• The <bgsound /> tag is added when you add a sound to the page. This featureis not supported in Mozilla Firefox browsers.

To remove a background sound, in the General tab of the Page Properties window, delete the location under the Background sound.

TIP: As a good practice, provide the users with an option to turn off the sound.

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 may want to redirect to a web page from another for some reason. Say your site is down for maintenance and you do not want the readers to see an error or a blank page. In such case, you can redirect them to a meaningful web page, for instance another web site or a page that displays a message for the readers. Behaviors let you achieve this in simple way.

1. Go to Panels menu and choose ‘Behaviors’. The Behaviors panel would be pinned next to the Apply and Manage Styles panels.

NOTE: In earlier versions of EW these panels were known as task panes.

2. Click on Insert and choose ‘Go to URL’ from the drop menu.

 

3. The Go To URL dialog box would be prompted as shown below:

 

Enter the URL or browse to the file and click OK.

4. The behavior would then be visible in the Behaviors panel as shown here:

 

The Events list lets you set the event on which the action (Go To URL) should occur. Choose an event. For our example, where we want to redirect to different page since our site is down for maintenance, we would choose ‘onload event’.

5. Save your page and preview in the browser.

The Site Manager allows you to add or remove sites from the Microsoft Expression Web’s Site list when you click on ‘Open Site’ button in the common toolbar.

To add a site, follow these steps:

1. In the Site menu, choose Manage Sites List….

 

2. In the Managed Sites List dialog box, click Add.

 

3. Then browse to the site location and click on Add button in the Add site window.

Similarly you can remove a site from the list of sites. Remember, removing this site from this list would not delete a site. But the site would be removed from the Open Site dialog box.

To remove a site, follow these steps:

1. In the Site menu, choose Manage Sites List….
2. From the list, choose the site that you want to delete.
3. Click on Remove button.

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 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.

Toolbars are quite handy if used intelligently. Instead of browsing through the long menus and submenus before you find the right command, if you often use a command then why not add it on the toolbar.

To add commands to toolbars

 Right click on the toolbar and choose ‘Customize’. In the Customize window, switch to ‘Commands tab’ and click ‘Rearrange Commands’.

In the Rearrange Commands window choose the radio button next to ‘Toolbar’. Choose the ‘Common’ Toolbar and then ‘Add’.

In the ‘Add Command’ dialog box, choose the ‘Category’ (browse each if you do not know where you can find the command) and then the command to be added and then click OK. In this example we will add the ‘File…’ command to the Common Toolbar.

Click ‘Close’, to exit the ‘Rearrange Commands’ window and again, to close the ‘Customize’ window.

To add commands to menu bars

In Rearrange Commands window (see above), choose the radio next to Menu bar. From the drop down menu choose the menu bar you want to edit. Then click on Add to launch the Add Command dialog box. Now browse the categories to find the command to be added to the menu bar and click OK. For instance choose to add the File… command. The new menu bar would look as follows:

Long back in 1990s it was a challenge to embed videos into your web pages. But now most third party gadgets have made it quite simple to add a video into your page.

Similarly you can have a You Tube video embedded into your Microsoft Expression Web web page. All you have to do is copy the You Tube code and add it into the Code view in Expression Web. Just follow these steps:

1. Visit You Tube and open the video you wish to embed.
2. Copy the code (Embed code).
3. Open your website/web page in Microsoft Expression Web.
4. Either open Code view or Split view and place your cursor where the video is to be added.
5. Paste the code.
6. Save and Preview in the browser.

      7. You can make any adjustments to video (object) size, etc in the code.

NOTE: The Design view would not display the video. It would display an error that says ‘A control of the specified type could not be found’.

This is because the Design Pane is just to preview window for your markup. Video is an Active content and hence it will not be played in Design view. Just ignore the error and preview it in the browser. The video will run fine.

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.