Web Design Using Expression Web 4 - Snippets

Let's continue our look at the new features in Expression Web 4 SP2. Last time we mentioned the new thumbnail preview for images selected in the folder list. This time we are focusing on the snippets panel that allows web designers and developers to easily copy and paste reusable snippets into the code view in Expression Web 4.

Snippets Panel in Expression Web 4 SP2

Most Web Development IDE's, like Expression Web 4, provide a way for web developers and web designers to organize commonly used HTML, jQuery, JavaScript, and other code snippets into a library that they can easily access to copy and paste into their web documents. Think about all the HTML and JavaScript code you resuse from website to website or page to page when authoring websites and web applications. Organizing this code into snippets that can easily be copied and pasted when applicable is a huge time saver. This is exacly why there is a new Snippets Panel in Expression Web 4 with the release of SP2.

Snippets Panel in Expression Web 4 SP2

The Snippets Panel is pretty self explanatory. As a web designer you organize your code snippets in a hierarchy of folders of your choosing. Expression Web 4 already comes with some pre-installed for your pleasure. Via the Options menu you are able to create, edit, and delete snippets accordingly.

Creating Snippets in Expression Web 4 SP2

Creating snippets is really easy as well. A small modal dialog appears that allows you to name your snippet, write a brief description, and add the code. Expression Web 4 didn't have a snippet for referencing jQuery on the Google CDN so we created one similiar to the one pre-installed pointing to the Microsoft CDN. Took 15 seconds and now we can use this snippet in all our websites saving us a lot of time and reducing errors.

Google jQuery CDN Code Snippet Expression Web 4 SP2

It's as easy at that!


If you are a web designer or web developer looking for a web development IDE to author your websites, the new Service Pack 2 for Expression Web 4 has some really nice new features.

You can follow all our posts on Expression Web.

TOP! © Copyright Sarasota.me