Home > Articles > Web Design & Development > Microsoft Expression Studio

Working with Code Snippets in Microsoft Expression Web 4 Service Pack 2 (SP2)

  • Print
  • + Share This
  • 💬 Discuss
Code snippets are reusable pieces of code (HTML, CSS, JavaScript, and so on) that you can insert into your web page with only a couple of keystrokes. Kathleen Anderson will show you how to work with the new Code Snippets Panel, create your own code snippets, sync them with all your PCs running SP2, and share them with other Expression Web 4 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.

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.

  • + Share This
  • 🔖 Save To Your Account

Discussions

comments powered by Disqus