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 uses include files.
IMPORTANT:
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
With Expression Web 2.0, the include feature was again made available. The include feature is 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.
Expression Web 3.0 and 4.0: The 'Include Page' option is no longer available on the Insert menu, and you cannot add it. Include Page IS AVAILABLE from the 'Standard Toolbar' or you can create a code snippet. If you do NOT have a page open, you will not see the Include Page option.
Step-by-Step Instructions - Create A Design Time Include using Expression Web
Step 1 - Create a folder within your website to store your include pages. On the 'Web Site' Tab (EW 1.0 and 2.0) 'Site View' tab (EW 3.0 and 4.0) 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 > Page
From the dialog 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.
Insert include page
NOTE: How you insert the include page will depend on the version of Expression Web you are using. Make sure read the Important notice above.
View Screenshot Expression Web 1 and 2 - Select 'Insert' on the menu > 'Include Page'
View Screenshot Expression Web 3 and 4 - Use the 'Standard Toolbar' to insert your include page.
In the Include Page Properties Dialog 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.
Copyright © 2010 by Expression Web Tutorials - All Rights Reserved
Revised August 2010
