In case of local websites, when you update a DWT (Dynamic web Tempate) and save it, only the open pages that are linked to the DWT are updated. Closed pages will not be updated. But if ‘Manage the web site using hidden metadata files‘ option is turned on, then with the help of the hidden metadata files, all the related pages will be updated.

Pages will not be updated if hidden metadata is not allowed. So to turn that on;

Go to Site > Site Settings > General tab. Check the box next to the option ‘Manage the web site using hidden metadata files’.

Once the hidden metadata is enabled, even if you move the files within your website, the links (in both open and closed pages) to these files will be automatically updated.

In case of live sites, if you are using FTP with Expression Web then you should be able to enable hidden metadata files in the same way as you did in local websites.

What is an Expression Web Community Toolbar?

The Expression Web Community Toolbar is a tool which makes it very easy to access all important Expression Web related links and resources. This toolbar is created by fellow MVPs Tina Clarke and Pat Geary and is free for download.

The toolbar includes all of the  Expression Web versions 1, 2, 3 and 4 as well as these Expression applications;

- Expression Design
- Expression Blend
- Expression Encoder

The toolbar has different categories in which chosen Expression Web sites (sites that provide you with quality information about Expression Web) are grouped and organized into:

- Expression Web links
- Expression Web Blogs
- Expression Web Tweets
- Web Design Links

Each of these sections will expand to show sub-categories and links within them.

What is included in the Expression Web Community Toolbar?

Expression Web Links:

Expression Web Blogs:

Expression Web Tweets:

Tweets from the Twitter id expressionweb where 3rd party links to tutorials are posted and you might find them helpful.

Web Design Resource Links:

help you with Web Design in general.

It also includes links for  Contests, Giveaways and special offers for Expression Web 3.0 and 4.0. If you want to know what Expression Web Communities, Webcasts and Live Events might be available? Those are included too.

NOTE: A ticker will display latest breaking news or special offers.

There are some additional options on the toolbar which will allow you to add other applications to the toolbar. Click on the black arrow next to Expression Web and choose ‘Toolbar options’. Then choose ‘Useful Components’ tab. Check the applications you’d like to show on toolbar and click OK.

How will the toolbar benefit me?

What do you do when you need information or tutorials about Expression Web? You either search them on various search engines or scan your bookmarks for any sites you visited earlier and have bookmarked them. What if you have not bookmarked them? Then you will have to spend good amount of time in searching for the resources. Here the toolbar would come to your rescue.

What could be more convenient than having everything in one place so everyone can freely access latest news, articles and tutorials. The Expression Web Community toolbar is updated regularly with the latest tutorials, links, news, updates. Look for “NEW LINKS – LOOK HERE FIRST” with a date for the newest offerings.

How do I download and install this toolbar?

You can download the toolbar over here.

Then run the executable file, follow the wizard and the toolbar would get installed on your default browser (that’s what it did on my Windows 7 machine).

Can I also add a resource to the toolbar?

Of course you can. Read more about the Expression Web Community Toolbar.

Some time back I came across a question in the Expression Web Forum, that when an empty <div> is dragged from the toolbox and dropped onto a page in the Design view, the div is invisible. Some of you may have come across this too. Now there isn’t any rocket science behind this. Its just that the visibility options need to be configured.

In the above screenshot, notice the Design view doesn’t display the body or the <div> tags. Both these tags are empty. As soon as you enter some text in the body, the body is visible (depicted by the dotted border).

But the <div> tag is still not visible. That’s because, it is still empty. What if we need to make all the empty tags visible, always.

Go to View > Visual Aids > Choose Empty Containers. Now all the empty tags will be visible.

An additional tip is to also switch on the ‘Margins and Padding’.

No I haven’t made any spelling mistake neither are you making any mistake in reading the title. It is SlapShot and not Snapshot that I am talking about here. Some of you must have already used the Snapshot Panel, that was introduced in Expression Web 3. For them, the SlapShot panel would seem familiar. But for those who haven’t yet used the Snapshot panel, let me brief you about it first. Snapshot panel helps you get an instant preview of the page you are working in by displaying an image of the current page, as rendered by the selected browser. You can switch between the browsers and resolutions to instantly preview your changes in different browsers. Read more about the Snapshot Panel.

SlapShot is a new add-in or extension written for Expression Web 4 (created by John Dixon) that extends the features of Snapshot by including full ActiveX support (Silverlight®, Flash®, and so on), as well as interactivity within the page (including navigation).

Download the SlapShot add-in here. Then install it using the Manage Add-ins option in EW 4. To learn how to install add-ins, read Expression Web 4 Add-Ins.

Once the add-in is installed, go to Panels > SlapShot and the panel will be opened in your workspace. Dock it anywhere you want. When you launch SlapShot for the first time, it would look like this.

SlapShot works by listening to the Expression Web ondocumentchanged and ondocumentsaved events. When a page is saved or the active document is changed, the SlapShot displays the updates. There are a few conditions that must be met before SlapShot will work correctly:

• The page must belong to a site on the local computer.

• Expression Web must be configured to use the Microsoft Expression Development Server.

• Run any page once or load SnapShot  to start the Development Server for the site.

The first version of SlapShot includes default support for the version of Internet Explorer installed on your system. To know more about SlapShot read here.

I came across a question from a user where her said he could not publish files from the Site View, the publish option is not visible. Unlike Expression Web 3 or for that matter even EW2, Expression Web 4 offers various ways to access Publishing options.

They are available on:
a. The Standard Toolbar

b. Site menu

c. Context menus in the Folder list

 
d. Tabs that display the page

e. Alternately, in the Site View, choose the ‘Publishing’ tab at the bottom of the window, or go to View menu > Site > Publishing. The Publishing panel will be opened and you have all the publishing options available there.

Yeah I know what you are thinking! What’s the big deal about the help menu? I agree in earlier versions of Expression Web, the only useful option in the Help menu was the ‘User Guide’. I too used the help menu only to access the ‘User Guide’, when required. But it is a big deal in Expression Web 4 since the Help menu now offers many more options to help you while working in Expression Web 4. Take a look at the menu:

The Help menu in Expression Web 4 has links to Online Community, Online Forums, Add-Ins Community Gallery, Expression Web SDK User Guide, Team Blog and many other links that really prove helpful while working with Expression Web. You do not need to open the browser and visit each link individually when required. Just go to help and visit the relevant link.

The Help menu contains these items:

a. User Guide: We are familiar with the User Guide which comes with every version with updated information. The F1 key also invokes the User Guide.

b. Expression Web SDK User Guide: You can use the Microsoft Expression Web Software Development Kit (SDK) to extend the capabilities of Expression Web. In addition to the managed code Application Programming Interface (API), Expression Web introduces a JavaScript API and a JavaScript bridge to the managed code API. – as quoted by Microsoft.

c. Online Community: The menu has sub-menu items like;

Expression Community Home – takes you to the Microsoft Expression Community site page.

Expression Web Online Forums – will take you to Expression Web and SuperPreview forums page. You can ask your questions and have discussions over here.

Learn Expression Web – opens up the Learn Expression Web page where you will find Expression Web Training Videos, Expression Web Starter Kits, Tutorials and Whitepapers.

Add-Ins Community Gallery – takes you to the Expression gallery, where all the add-ins posted by various third party websites as well as product users.

Microsoft Web Platform Installer – will let you download the Microsoft Web Platform Installer.

Expression Web Team Blog – will take you to the Expression Web Team blog that features plenty of articles on Expression Web and is updated regularly.

d. Keyboard Shortcuts: opens up the Expression Web User Guide with the page listed with all the shortcuts to be used in Expression Web.

e. Privacy Statement: will take you to the Microsoft Expression Web Privacy Statement page.

f. Customer Experience Improvement program: prompts a dialog box asking you if you want to join the Expression Web Customer Experience Improvement Program and tells you what the program is about.

g. Register Expression Web: This option will be available to users who have not registered their copy of Expression Web 4. The option helps you register the product.

h. Enter Product Key: Allows you to enter the product key for Expression Web 4.

i. Activate Product: will activate your copy of Expression Web 4.

j. About Expression Web: will display the Microsoft Expression Web version information.

All these help menu options make it very convenient to work with Expression Web.

Some times, while coding your web pages, you must have observed red squiggly lines in your code. This is how Expression Web points out invalid or incompatible HTML in your code. It is advisable that you check your code for compatibility and validity before you publish it.

Expression Web has different tools that offer to check the code at different levels. Two such options are available on the General tab of Page Editor Options.

Go to Tools > Page Editor Options… > General tab > Code View Options section.

a. Highlight invalid HTML: emphasizes invalid HTML in a specific color. The default color of the text is red with yellow background. But you can change this color scheme in the Color Coding tab of the Page Editor Options dialog box.

Hover over the highlighted code to view more information about the incompatible code.

b. Highlight incompatible HTML: displays a squiggly line under the code that does not match the HTML compatibility standards.

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!