Working with Code Snippets in Microsoft Expression Web 4 Service Pack 2 (SP2)
- Getting Started with Code Snippets in Expression Web 4 SP2 / How Do I Insert a Code Snippet into My Web Page?
- How Do I Create My Own Code Snippets? / What Changes Did Service Pack 2 Make to How Code Snippets Work?
- How Can I Share My Custom Code Snippets with My Other PCs? / How Can I Share my Custom Code Snippets with other Expression Web Users?
Code snippets are reusable pieces of code[md]HTML, CSS, JavaScript, and so on[md]that you can insert into your web page with only a couple of keystrokes. Expression Web 4 SP2 adds a Code Snippets Panel to your workspace, making them much easier to access; and provides code snippets for CSS, Doctypes, HTML, IE Meta Tags, JavaScript, JQuery, and PHP.
Getting Started with Code Snippets in Expression Web 4 SP2
This article assumes that you have downloaded and installed Expression Web 4 Service Pack 2.
- To read about the fixes and new features in Expression Web 4 SP2, go to http://expression.microsoft.com/en-us/hh290892.aspx
- To download Expression Web 4 SP2, you can use Windows Update or you can download it manually at http://www.microsoft.com/download/en/details.aspx?displaylang=en&id=26699
- To confirm that Expression Web 4 SP2 is installed, go to Help > About Microsoft Expression Web and confirm that the version is 4.0.1303.0 or later.
How Do I Insert a Code Snippet into My Web Page?
Make sure the Snippets Panel is open (see Figure 1); if it isn't, click Panels > Snippets.
Figure 1 The Snippets Panel, new in SP2, displays a list of the categories of available code snippets.
Find the category that will contain the type of code you are looking for and explore the list. As you click each entry, you will see the code for the snippet in the preview window below the list.
Code snippets can only be inserted in the Code pane. Open your web site in Expression Web, open a web page, and switch to Code View or Split View. Place the insertion point where you want to insert the code snippet.
In this example, you are going to add an Add to Favorites link to the page. To add this code snippet, your insertion point should be somewhere between the beginning and ending Body tags in your web page. In the Snippets Panel, select the HTML category, click the Add to favorites entry and press Enter (see Figure 2). You can also double-click the entry and it will be inserted in your page, as shown in Figure 3.
Figure 2 Select Add to favorites and press Enter to add the snippet to your page.
Figure 3 The code for the Add to favorites code snippet is added to your page when you press Enter.