Expression Web and Design Time Includes
Any time you have a lot of repeated content in a website - things like page headers, page footers and navigation menus or even areas of content - you can use Expression Web includes. Include files are separate pages of HTML code that contain things like the items just mentioned; content that is intended to be used on many different pages. The left navigation menus on this site are include files.
While the original plan was to remove support for all FrontPage bots from Expression Web before it is released, the include feature was again made available with the release of EW 2.0. The are not part of the default menu and will need to be added. You can easily add the include page feature back by following this tutorial.
Design time includes are not a part of the Expression Web 1.0. There is a free add-on available from the makers of Pane Manager. Once installed, when I select Insert | Include Page will be one of the menu selections. View Screenshot
Step-by-Step Instructions - Create A Design Time Include using Expression Web
Step 1 - Create a folder within your Expression web to store your include pages. On the Website Tab click the New Folder icon and create a folder named _includes. The leading underscore is optional. You can also use File | New | Folder
The new folder is created. Hit the backspace key and type _includes for the name
Step 2 - Create a New Page using the new page icon or File | New |
From the dialogue box Choose General | HTML | Click OK
Step 3 - In Design View, enter the content you want on the included page. The example uses a contact and copyright information.
Step 4 - Save your newly created page File | Save As
Make sure that you are saving your page in the correct Web and correct folder.
Step 5 - You should be familiar with how your pages look in Code View so take the time to look them over. You can also work in Split View and have both WYSYWYG and Code Views.
NOTE: The insert web component that was used in FrontPage to insert your include page is no longer available in Expression Web 1.0. You can still use includes by downloading and installing the free add-on available from the makers of Pane Manager. Once installed choose Insert | Include Page. The Include page option is available in Expression Web 2.0.
In the Include Page Properties Dialogue box, browse to where your include page is, click OK and the page will be inserted.
Step 6 - Preview your page in Design View
Step 7 - Preview your page in your browser to see how it renders.
Step 8 - View page in Code View
Step 9 - View Source Code - Open your page in Notepad or preview in your browser and view the Source Code. You will see not only the code for the include but the content of the include.
Additional Resources for Using Expression Web Includes -
Additional Notes:
- You can use css to style the included content but it won't show the styling until you have included it within the page.
- Changes to the page you are including MUST be made from within that page.
- If you update your included content and do NOT have FPSE (FrontPage Server Extensions) installed, you will need to upload ALL changed pages. If you Publish to a server where FPSE are installed, only the changed included content page will publish.