Code Snippets (Expression Web)

Expression Web offers a Code Snippets panel where you can store bits of code (both HTML and CSS) that you might use over and over again. It's very handy and reduces much of the repetition of typing in the same code multiple times. You can find additional information in the Expression Web Help files. Go to Help > User Guide. Type in the keywords "code snippets" into the index search box and your topics will appear.

Block Areas

Template Page Sample

The image above highlights two blocks side by side, three blocks side by side, and four blocks side by side.

Make Snippets

You can access the Snippets panel by going to Panels > Snippets. I keep mine docked on the left side of my screen.

Sample Expanded Snippets Panel
  • Right-click in the snippets panel and you can make a new folder (I named mine My Favorite CSS and My Favorite HTML), see what has been premade in the other folders), and create a new snippet.
  • Snippets are code, so HTML snippets can only be applied while in Code View.

2-Column Block

contentbox2 Group
  1. <div class="contentBox2a"
  2. <p></p>
  3. </div>
  4. <div class="contentBox2b"
  5. <p></p>
  6. </div>
  7. <div class="clear"></div>

Since more than one class can be applied to an element, the "alpha" class removes the left margin on the first block. The "omega" class removes the right margin on the last block.

3-Column Block

contentbox3 Group
  1. <div class="contentBox3a"
  2. <p></p>
  3. </div>
  4. <div class="contentBox3b">
  5. <p></p>
  6. </div>
  7. <div class="contentBox3c"
  8. <p></p>
  9. </div>
  10. <div class="clear"></div>

The last div with the "clear small" class makes sure that any content added below the blocks will fall below the longest block.

4-Column Block

contentbox4 Group
  1. <div class="contentBox4a"
  2. <p></p>
  3. </div>
  4. <div class="contentBox4b">
  5. <p></p>
  6. </div>
  7. <div class="contentBox4c">
  8. <p></p>
  9. </div>
  10. <div class="contentBox4d"
  11. <p></p>
  12. </div>
  13. <div class="clear"></div>

Same concept, just with four boxes.