Just as the Save All command lets you save multiple pages at one go, Close All Pages command lets you close multiple pages at once. The command can be found under the Window menu, see below:

When you invoke the Close All Pages command, Expression Web will close all the saved pages and throw a warning for those pages that are not saved. See below:

Expression Web will prompt you to save each and every unsaved page before closing them. Click Yes to save the page. A good practice would be to use the Save All command in conjunction with Close All Pages command. So before you use the Close All Pages command, use the Save All command to save all the unsaved pages.

In Expression Web 3 you cannot customize the toolbars or menus. But if you are still using Expression Web 2 or 1 you can place the Close All Pages command under the File menu under the Close menu item or anywhere else you find it convenient to use. Follow the tutorial Add a command to toolbar and menu bar in Microsoft Expression Web 2 to add the Close All Pages command to the ‘File menu’. The ‘Close All Pages’ command can be found under the Window and Help category in the Customize dialog box.

I hope you find this command useful.

I was working on a website last evening. I created a dynamic web template (dwt) and then generated pages from that template. As I progressed, I saw myself making some changes to the template every now and then and then saving it to update all the pages that were attached to the template. After doing that all the pages that I created from the template had to be saved in order to preview the reflected changes. If you have one or two pages attached to the template then you can save individual pages. But I had around 15 pages waiting to save. Going to each and every page (open in Expression Web) and pressing ‘CTRL + s’ was irritating.

There came the ‘Save All’ command to my rescue. The ‘Save All’ command is lets you save multiple pages at one go. So when you have many pages that are waiting to be saved (pages marked with a *) use the Save All command/button. When the pages are already saved, the option is disabled.

The command is found on the ‘Common Toolbar’ next to the Save button.

Or you can find it under the File menu > Save All.

I find it a handy tool that saves you a lot of design time, find it out yourself!

Microsoft Expression Web 3 Service Pack 2 has been released and is available for download. It has general improvements to the application. The biggest improvement of them all is the SuperPreview support for Firefox 3.6. We all have been waiting for this one for a long time. Here is a list all that SP2 has to offer:

1. SuperPreview feature supports Firefox 3.6.

2. Sometimes SuperPreview crashed while launching, due to the process of locating Firefox on your system. SP2 fixes that.

3. While editing PHP files, you were asked to update related hyperlinks on that page. After doing so some PHP tags were removed. With this update, they are no longer removed when you update related hyperlinks.

4. Expression Web 3 sometimes crashed when ‘list-style-image’ property was used in a CSS file. Now is fixed.

5. Renaming PDF file in the Folder List caused corruption to the file. PDF files can now be saved safely.

How do I install Expression Web 3 SP2?

Expression Web 3 SP2 is available on the Microsoft Download Center. To download this service pack from the Microsoft Download Center, visit the following Microsoft website:

http://go.microsoft.com/fwlink/?LinkID=186181

How do I know if SP2 is installed?

Launch Expression Web 3 and go to Help > About Microsoft Expression Web.

If Expression Web 3 SP2 is installed, the following version number appears:

Microsoft Expression Web 3 Service Pack 2 Version 3.0.3816.0

If Expression Web 3 SP2 is not installed, one of the following version numbers appear based on your region and current service pack level:

1. Microsoft Expression Web 3 Version 3.0.1762.0

2. Microsoft Expression Web 3 Version 3.0.1773.0

3. Microsoft Expression Web 3 Service Pack 1 Version 3.0.3813.0

A hyperlink is created using the HTML anchor tag. With hyperlinks you can link to another web page, document (like spreadsheets, pdf, etc), image or a part of the same document. Named Anchors, also called Bookmarks let you create such hyperlinks to specific sections of your page.

Any hyperlink within a page will have two parts:

a. The hyperlink: is the text to be displayed as link, from where you would initiate the action.

<a href="#top">Top of the Page</a>

b. The bookmark: the location where you want to go.

<a name="top">Creating Dynamic Web Templates</a>

Anchors are created using the ‘href’ attribute of the anchor tag, whereas the named anchors are created using the ‘name’ attribute of the <a>. Any anchor element can have a name attribute, but until it is not referenced from anywhere, it is not termed as a bookmark.

For instance; <a name=”top_page” href=”#top”></a>

href=”#top” – is already referring to another bookmark – top

The name attribute in the <a> tag can be referenced from another <a> tag using the # sign.

A named anchor is not displayed in any special way on your rendered page. Yes in Design view your bookmark will have a dashed underline below the text, or if an empty location is bookmarked, it will be denoted by the a bookmark icon   when ‘Show’ and ‘Paragraph Marks’ are both selected under ‘Formatting Marks’ on the ‘View’ menu. The bookmark should be referenced using a hash ‘#’ sign.

NOTE: Since the bookmark in within the document, you need not give the entire path to the location. But you can directly link to a bookmark on another page by using the entire URL of that page, followed by ‘#bookmark_name’.

Creating bookmarks in Expression Web

Follow these steps:

1. Open a webpage in Design view or Split view.

2. Select the text to which you want to assign a bookmark.

3. Go to Insert menu > Bookmark… (or key in the shortcut CTRL + Shift +G in Expression Web 3 and CTRL + G in earlier versions)

4. In the Bookmark dialog box, enter a name for the bookmark in the Bookmark name: textbox.

5. Click OK.

Deleting bookmarks:

1. Open a webpage in Design view or Split view.

2. Select the text to which you want to assign a bookmark.

3. Go to Insert menu > Bookmark… (or key in the shortcut CTRL + Shift +G in Expression Web 3 and CTRL + G in earlier versions)

4. In the Bookmark dialog box, select the bookmark you want to delete.

5. Click Clear.

Navigating through bookmarks in Design view

Hold down CTRL key and left click the hyperlink on the page.

Navigating through bookmarks within Code view

Do either of the following:

A. Hold down CTRL key and left click the hyperlink on the page.

B. Place the cursor inside the hyperlink, from Edit menu > Code View > Follow Code Hyperlink (or CTRL + [)

NOTE: Use the Next Code Hyperlink and Previous Code Hyperlinks buttons to move between the source and destination of the hyperlinks.

With code optimizing options in Microsoft Expression Web you can remove unnecessary code from your web pages. This helps you keep your code clean and also reduces the size of your files which in turn affects the loading time of the page. You can choose when to optimize your pages. If you optimize your code when you publish your local site to a remote site, then these changes will affect only the remote site where you publish your local site, the local copy remains unaffected.

NOTE: You have to publish your site after you optimize the code options for them to take effect.

Expression Web has different Code Optimization options designed for authoring web pages and for publishing pages. You can optimize a single page as well as entire website.

To optimize the source code of a single page

1. In any of the views, go to Tools > Optimize HTML…

2. In the Optimize HTML dialog box, choose the items you want to remove from the page.

3. If you want to restore the settings to their defaults, choose Restore Defaults.

To optimize the source code of a website

1. In the Publishing view, select Publishing settings or go to Site > Publishing settings.

2. On the Publishing tab, select the option – ‘Optimize HTML during publishing’.

3. Click Customize to launch the HTML Optimization Settings dialog box.

4. Then choose the items you want to be removed from the page.

5. You can set these options as default with ‘Set as default’ or ‘Restore Defaults’.

You can position elements on a page by setting their CSS-based properties in CSS Properties panel or the Positioning Toolbar. The Quick Tag Selector menu also has the Positioning option to help you quickly and precisely set the positioning style for a tag. Here we will explore the Positioning Toolbar.

Positioning toolbar can be made visible by right clicking on any toolbar and choosing Positioning from the menu. The toolbar looks like:

Let us explore each of these options:

1. Position Property button: Lets you set the position of the current element to absolute, fixed, relative, static or None.

2. Left, Top, Right and Bottom values: Use to position an element relative to its containing element.

3. Width and Height values: Use to set the dimensions.

4. Z-Index: To set the z-index of an element.

5. Bring Forward: To bring an element forward in the z-axis order by increasing its z-index value by 1.

6. Send Backward: To move the element behind in the z-axis order by decreasing its z-index value by 1.

The new Code View toolbar in Expression Web 3 or Edit > Code View submenu allows you to temporarily bookmark particular portions of code of your web page, so that you can quickly visit that location whenever you want. These code bookmarks are different from the HTML anchors. HTML anchors are hyperlinks to locations inside a page, other pages or site. But code bookmarks are temporary and they let you navigate throughout the code in your document. They can be added only in the Code view of a page and are deleted as soon as you close the page.

To add or remove a code bookmark

1. Switch to Code View or Split View in your Expression Web 3 workspace.

2. Place your cursor at the position where you would like to add a bookmark.

3. Do either of the following:

· Right click on any toolbar, choose Code View. In the Code View toolbar, click on the Toggle Bookmark button.

· Go to Edit > Code View > Toggle Bookmark.

· Key in the shortcut keys CTRL + F2.

To navigate through all the bookmarks

1. In Code View or Split View do either of the following:

· In the Code View toolbar, click on Next Bookmark or Previous Bookmark button.

· Go to Edit > Code View > Next Bookmark or Previous Bookmark.

To customize the color of the code bookmark

1. Go to Tools > Page Editor Options.

2. In the Page Editor Options dialog box, go to the Color Coding tab and follow these steps:

To remove all the code bookmarks from the page

1. In Code View or Split View do either of the following:

· In the Code View toolbar, click on Clear Bookmarks button.

· Go to Edit > Code View > Clear Bookmarks.

With Expression Studio 3, Expression Web 3 has got a new look with gray color scheme. I like it and I am not quite fond of changing the color scheme while working! But for people who like to change the interface color, SP 1 (Service Pack 1) for Expression Web 3 has given you an option to use your current Windows color scheme as your Expression Web color scheme. How do you do this? This is how;

1. Right click Desktop, choose Personalize.

2. In the Window Color, choose a color scheme that you like and click OK.

3. Close the dialog boxes.

4. In Expression Web 3 SP1 go to Tools > Application Options > General tab > General section > check the box -  ‘Use your current Windows color scheme’ > OK.

5. Similarly you can use any and all color schemes given for Windows in your EW3 SP1.

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.

In my earlier article Insert Code Snippets in Microsoft Expression Web 3, we saw how to use the built-in code snippets and create your own snippets to make your coding speedier. But the custom code snippets that you created in earlier version of Expression Web (EW 2) are not accessible in EW 3. A simple solution to this is to import the code snippet xml file to your EW 3 and use it.

The built-in code snippets are found in these locations:

In Expression Web 2

C:\Program Files\Microsoft Expression\Web 2\Templates\1033\Snippets12\FPSnippets.xml

In Expression Web 3

C:\Program Files\Microsoft Expression\Web 3\en\Snippets\snippets.xml

Any custom code snippets you add are stored into your roaming profile. In Expression Web 2, they were stored at:

C:\Users\User Name\AppData\Roaming\Microsoft\Expression\Web 2\Snippets\SnippetsCustom.xml

In Expression Web 3, they are located at:

Windows Vista

C:\Users\ User Name\AppData\Roaming\Microsoft\Expression\Web 3\Legacy\Expression\Web 3\Snippets\SnippetsCustom.xml

Windows XP

C:\Users\ User Name\Application Data\Microsoft\Expression\Web 2\Snippets\SnippetsCustom.xml

Both these ‘xml’ files are different. While working in EW3, when you add code snippets they will be stored in the ‘SnippetsCustom.xml’ in Expression Web 3 folder.

To continue using the SnippetsCustom.xml from Expression Web 2 in Expression Web 3, before you start working in Expression Web 3, replace it with the one in Expression Web 2 folder. You need not delete the SnippetsCustom.xml that was created by default in Expression Web 3 folder, just rename it, and copy-paste the Expression Web 2 ‘xml’ file over here. Now you can use all your older snippets from Expression Web 2 in Expression Web 3 and any more you add would be updated in this file itself.