EW 1: Design Time Includes

Using Design time includes in Expression Web 1.0

This article applies to Expression Web version 1 only.

In the first Expression Web Designer CTP there is support for adding FrontPage Web Components but Microsoft has said that these will all be going away. This is because most webbots do not validate and rely on the FrontPage Server Extensions which are no longer available.

However, there are some webbots that do not require FrontPage Server Extensions because they worked inside FrontPage and provide valuable functions. A prime example is the FrontPage file include component. It allows you to see the include in Design View and inserts the included information before the web page is uploaded to the server. This is probably the single most used FrontPage component is the only web component that has been requested remain in EWD.

This is because the ability to reuse items throughout the site is very important and sometimes a DWT is not the best method to use for all items. Examples when design time includes are the better choice include submenus, section branding and boiler plate text - text that appears frequently in different context or sections, particularly useful for eCommerce sites. Dreamweaver has Library Items and GoLive has ???

Unfortunately, design time includes will be going along with the considerably less desirable components such as the forms processor that allows spambots to harvest the email address that form results are sent to. The good news is that in order to allow for existing FrontPage websites to be migrated without breaking current function there is support for viewing and using FrontPage includes. What is missing is a way to add new ones. By using Code Snippets we can restore that ability.

Code Snippet

To restore the ability to use design time includes create the following Code Snippet:

<!--webbot bot="Include" U-Include="|addFilename|" TAG="BODY" -->

Note that I have named my Code Snippet DT-Include and provided a description of what the code snippet does. When you insert the code snippet your cursor will end up in the location between the pipes for you to insert the file to be included.

How to Use Code Snippets

To access your code snippets whether you want to use one of the pre installed snippets or one of your own like we created above you must be in Code View. Then use either of the following methods:

Keyboard Shortcut
ctrl + enter
launch snippets
From the Edit Menu
You must have your cursor in Code View (click there before moving your mouse to the menu), then from the Intellisense Options select “List Code Snippets”
launch snippets from edit menu

No matter which method you choose to open the code snippet drop down where you can select the snippet to include by highlighting it and either double clicking or using the enter key.

snippet droppdown

Notice that having applied the code snippet the section to be replaced with a file path is highlighted
highligh file

If you now move to Design View you will have the ability to launch the Include Page Properties dialog box.select file

Note:This box should continue to be available in the release version since there is a commitment not to break FrontPage components but there is no guarantees.

The page you selected should now display in Design View. Remember that Design Time Includes will only include what is in-between the body elements and nothing in the head section will be carried to the page that holds the includes. To illustrate this compare the two pictures below. The first is how your included page will display when inserted as a design time include in a different page while the second is how the page displays with its headers, etc.

as an include original page

Outstanding Hosting