Search Wiki:

A resource for Expression Web Add-Ins, Snippets and Templates to replace the Expression Gallery which closed on March 7th 2013.



I've taken what may be the wrong step and used this 'resource' for all the downloads I previously had on the Expression Gallery. If this proves to be unworkable I'll create separate 'resource' pages for each add-in and snippet.

The following Add-Ins and Snippets are available. See the notes at the bottom of the page for installation instructions.

Note that the downloads are available on the download tab above, and are listed in a panel at the right hand side of the page.

Fuller details including screen shots are available at http://ew-resource.co.uk

Add-Ins

Add Feed


Do you want to display a Twitter or RSS feed on your site? This V4 add-in lets you do that, with configurable display options.

The new entry on the Insert Menu launches a dialog to select the type of feed and then further dialogs allowing you to set the options.

Cannot resolve link: [image:http://ew-resource.co.uk/images/addfeed.png]

It enables you to preview the feed before applying it to the page, so that the effect of displaying the various options can be seen.

It has the limitation that it will only add one feed per page, and one feed style per site, although both of these can be overcome with a few manual changes to the web page.

Any feedback you have and suggestions for improvements are welcomed.

If this is the first time you've installed an add-in, the following page will get you started.

http://ew-resource.co.uk/v4addins-install.aspx

Note: This add-in supercedes the TwitterFeed add-in.

Close All Add-In


Do you ever wantto close all the open files in Expression Web before you start on a new page? Whilst you can do so from the top Window menu, having a single-click solution feels more efficient.

This Add-In puts a new 'Close All' function on the Standard and Common toolbars that allows you to close all the open pages with one click and gives the normal 'Save' dialog for pages with unsaved changes. Simple but useful.

If this is the first time you've installed an add-in in Expression Web V4, this page will help you get started. http://www.ew-resource.co.uk/v4addins.aspx

Copyright Notice Add-In


Most web sites need a copyright notice. If the site is ASP.Net or PHP based, you can create this notice server-side and have the date automatically updated, but if it's an HTML site you may just have a static notice that needs updating every year. And how many sites do you see with an out-of-date notice? Lots of them!

This add-in creates a JavaScript based copyright notice that always updates to the current year and also creates a static notice, without the year, for the very small percentage of users that don't have JavaScript enabled.

A new entry is created in the "Insert" menu to use the add-in.

Note that the copyright text will not show in EW's design view, only in a browser, because it's generated by JavaScript.

HTML5 Placeholder Add-In


Like other people I know I'm now using HTML5 for new projects. It generally degrades well in non-supporting browsers although new features will be lost. I recently needed to add a textbox watermark for a Username box tucked away in a corner of the page header (it had a label for accessibility but this was styled off the viewport). The HTML5 'placeholder' attribute was an obvious solution but this isn't supported by all browsers (inc IE9) and would be lost.

To solve this I used a JQuery 'shim' (or 'pollyfill': it hides the cracks) which gives support for 'placeholder' in all browers from IE6 and FF3.6 upwards.

It's included in this add-in, HTML5 Placeholder.

ShowHide


This is simple add-in which allows you to show and hide blocks of text. A typical use would be in a FAQ page where you show basic details with a clickable link to show more information.

Be aware that it needs to be used with COMPLETE paragraphs of text (or whole divs) and can't be used with selections within a paragraph.

The 'More' and 'Less' links are styled to show in green and red and the styles can be altered in the stylesheet to suit your own requirements.

It adds an icon to the standard tool bar and a Help entry in the Help Menu.

Sub/Sup Text Add-In


If you frequently need to add <sub> or <sup> tags to your page content, you may miss the ability to do that from a toolbar in Expression Web V4 (or V3).

The addin restores this functionality by putting two new buttons on the "Standard" toolbar. You may need to use "View - Toolbars" to enable this toolbar if you don't already use it.

Select text in either Design, Split or Code view and click the icon to create the <sub> or <sup> text. Select the same text and click again to return the text to normal case.

WinPop


WinPop creates 'accessible pop-up windows'. By accessible I mean that they can be read by screen readers and continue to work if a user has JavaScript turned off. It has all the usual browser options for the pop-up windows and can create the pop-up link from text, existing links or images. A new entry on the Insert menu launches the add-in and there are brief help notes in the main Help menu.

Any feedback you have and suggestions for improvements are welcomed.

WordPaste Add-In


V1.6 for xWeb V4 SP2 (and earlier)

Allows you to paste clean HTML from Microsoft Word™ documents.

This add-in pastes the text and the basic HTML structure, giving a far better result than pasting via NotePad and making the job very much easier.

NOTE: You need to use Ctrl-V to paste into the dialog window.

A feedback link is provided and any comments will be gratefully received.

For some notes and hints on using it, see http://ew-resource.co.uk/v4addins.aspx#WordPaste

Comment from one user:

"Just thought I’d pass on a word of thanks once again for your little Word insert utility for EW. We use it so much here that it’s in danger of being worn out! We don’t know where we’d be without it."

Snippets


Aria Snippets


A collection of snippets for the W3C 'ARIA' (Accessible Rich Internet Application) model, now officially part of the HTML5 specification and embedded in the major JavaScript libraries, jQuery, DoJo and YUI. Most current assistive technology tools, JAWS, NVDA and VoiceOver support ARIA.


The snippets are arranged in logical groups detailed by W3C and duplicated where this helps to clarify use.

Further information on the states and properties can be found at http://www.w3.org/TR/wai-aria/states_and_properties

A good MSDN article on the topic: http://msdn.microsoft.com/en-us/magazine/jj863135.aspx

CDN Snippets


A small collection of snippets for links to JavaScript libraries on the Microsoft Ajax and Google 'Content Delivery Networks'.

CSS3 Snippets


The standard snippets in SP2 have styles that include some of the vendor-specific properties. However it's more useful to have the style properties to apply to your own classes, rather than pre-defined styles. This collection of snippets gives the vendor-specific properties for several of the most useful CSS3 styles.

Note that browser support is not complete and that you should test them fully in your application.

Google +1 Snippets


Two simple snippets that allow you to add the code and JavaScript link for a Google +1 button.

To use these, first add the JavaScript snippet inside the <head>..</head> section of the page. Then add the button snippet on the page wherever you want the +1 button to appear. (Snippets are always added in Code View). Be aware that the button won't show in xWeb's Design View and will need to be previewed in a browser.

HTML5 Snippets


V4 update added 05 March 2012

The V4 update adds a CDN link for the HTML5 Forms shim created by Diego Perini.

V3 update added 10 November 2011

The V3 updates adds snippets for new HTML5 form types. Whilst a shim is needed for these to work in older browsers, they are needed for mobile-friendly sites to allow mobile devices to present the appropriate keybord for the input type. (Without the shim older browsers treat them as standard input text fields).

V2 update added 20 September 2011

The V2 update adds the 'section' layout element and CSS styles to add 'display: block' to the HTML5 layout elements which allows them to display correctly in < IE9.

Delete the orginal HTML5 snippets from within xWeb and install the new version.


A collection of snippets for HTML5 in three groups:

The new semantic layout elements:

article
footer
header group
header
nav
section
time

Plus a JavaScript shim and css style which allows these new elements to be used with IE6, IE7 and IE8.

Important Note: the LT IE9 shim should be placed in the head section of the page, NOT at the end of the page. The 'LT HTML5 style' should be added to your main stylesheet.

For a good explanation of these semantic layout tags see:

http://ie.microsoft.com/testdrive/HTML5/SemanticNotepad/

HTML5 Microdata properties, which are used by search engines, irrespective of browser type or version.

address
country name
description
locality
psotal code
region
reviewer
street address
summary

For details about the use of these properties, see http://www.schema.org/docs/gs.html

To use these in browsers that don't support HTML5 a shim is needed. The best one I've found to date is the NWX shim created by Diego Perini and a CDN link to this is now included.

Forms

The new form types are needed for mobile-friendly sites so that the mobile devices offer up the correct keyboard for the form field, ie numberic, url, text etc.

IE Conditional Snippets


A collection of Snippets for IE Conditional Comments.

The use of HTML5 often means that we need to add conditional styles for IE9 and the earlier versions. The most common variants are included, with the correct format for 'NOT IE', which can appear confusingly different to the others.

Lorem Ipsum filler text snippets


This is a reworking for xWeb V4 SP2 of Anna Ulrich's Lorem Ipsum original EW V3 snippets. The snippets enable you to insert one to five paragraphs of lorem ipsum Latin filler text which you can use as a placeholder for content in your web pages.

Meta tag and Robots.txt Snippets


Two groups of snippets for normal meta tags:

Author
Copyright
Date
Description
Expires

And robots meta tags:

nofollow
noindex
noindex no follow
nosnippet
noodp
text

Mobile Snippets


A few snippets for developing mobile compatible (or cross-device) web sites.

CSS3 @media queries - for mobile and tablet screens

@media shim - for older mobile browsers that don't support CSS3

iOS meta tag - to ensure proper scaling when switching between portrait and landscape modes

iOS style snippet - to ensure maximum text size

jQueryMobile page block - page layout for jQueryMobile page

jQueryMobile - CDN links for jQueryMobile js and stylesheet

(See the jQueryMobile http://jquerymobile.com/ site before attempting to use these).

Installation Notes

Add Ins


If this is the first time you've used an Expression Web Add-In the following link may help:

http://ew-resource.co.uk/v4addins-install.aspx

Snippets


To install the Snippet collections, download the zip file and extract the contents to:

•Windows XP:
C:\Documents and Settings\your windows user name\Application Data\Microsoft\Expression\Web 4\mySnippets

•Windows Vista, Windows 7 or Windows 8:
C:\Users\your windows username\AppData\Roaming\Microsoft\Expression\Web 4\mySnippets

Templates

Mobile-Friendly Responsive Template

An example as much as a template, this is a 'mobile friendly' layout using HTML5 plus CSS3 and 'responsive design'. It also has a 'sticky footer' that stays at the bottom of the browser window on pages with limited content.

It's a simple layout but suggestions are given for you to personalize it.

Please see the Readme section included before attempting to use the template.

Despite using HTML5 and CSS3 it is backwards compatible and has been thorougly tested on the majority of desktop and mobile browsers, from IE6 upwards.

Skill Level: Intermediate/Advanced.
Last edited Mar 5 2013 at 4:32 PM  by IanHaynes, version 14
Updating...
Page view tracker