CSS3 vendor specific snippets for xWeb V4 SP2

Ian Haynes has just added some new and updated snippets to the Expression Web Gallery. The standard snippets in SP2 have styles that include some of the vendor-specific properties. You may find it more useful to have the style properties available as snippets so that you can add them to your own class style rules.

This collection of snippets gives the vendor-specific properties for several of the most useful CSS3 styles including box-radius and box-shadow

Note: CSS3 styles are NOT supported by all browsers so you should test them with your pages to make sure they degrade gracefully.

Download CSS3 vendor specific snippets for xWeb V4 SP2 from the Expression Gallery. Installation instructions are also available.

Screenshot Snippets Panel.

CSS3 Snippets

If you would like to download a template that uses some of these CSS3 style rules and experiment with it see Tor House Site Template.

ProjectSeven and Expression Web

ProjectSeven has been a longtime provider of  Dreamweaver Menus, CSS Templates, Widgets, Slide Shows, Tooltips, and More. None of these will work with Expression Web! Last night I was chatting with two friends, only one of whom uses DreamWeaver so she can take advantage of these helpful applications, and we decided to send an email to the folks at ProjectSeven to see if they would consider developing some or all of these for Expression Web. With the new extensibility model available with Expression Web 4, we hope they might be willing to consider this.

As a long time user of Eric Meyer’s CSS Sculptor for Expression Web which is no longer available and only works with the early versions of EW, I was particularly interested in CSS Page Builder Magic.

Enjoy equal height columns, round corners, shadows, the ability to customize the color of any element—without editing a single image!

The more I read about the program, the more I knew I WANTED it for Expression Web. The one program they do offer that does not require DreamWeaver is CSS Express Drop-Down Menus. This is one I have used quite often and recommend for those who may need a single level dropdown menu.

Visit the ProjectSeven site and take a look at all of the products they offer. Would you like to see them available for use with Expression Web? If after you have spent some time looking around and wishing as I did, take the time to write to the folks and see if they would be willing to develop some of those same extensions for Expression Web as they have for DreamWeaver.  The email is support@projectseven.com.

 

Revised Add-Ins for SP2

The add-in model in Expression Web SP2 has changed slightly and Ian Haynes has released revisions for three of his Free add-ins for Expression Web 4. They may be downloaded from the Expression Gallery. If you have been using these add-ins and have installed Service Pack 2,  you will need to remove them and install the newest version.

Ian has also uploaded two collections of snippets for SP2

He has also updated his  tutorial on using SP2 snippets. Check out all of Ian’s add-ins offered in the Expression Gallery.

WinPop add-in for Expression Web V4

Ian Haynes, the creator of a number of Expression Add-ins that have been mentioned here previously has just published a new one, WinPop add-in for Expression Web V4. WinPop creates ‘accessible pop-up windows’. Accessible means 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.

Once you have installed the add-in following these instructions How to Install Add-ins, you will see a new entry on the Insert menu which launches the add-in and there are brief help notes in the main Help menu.

Screenshot Insert Popup Window Menu Item.

Screnshot Insert Popup Window Menu Item.

How to use the WinPop add-in

  1. From the Insert menu > select PopUp Window

    Screenshot WinPop dialog screen.

    Screenshot WinPop Dialog Screen

  2. Fill in the Main Parameters which are mandatory:
  3. Select the Options you wish to include with the popup window.
  4. Click Insert.

You can then preview your page in your favorite browser, click the hyperlink and you will see the pop-up window you just created. The code you entered will contain the following target="xPopUp" which will NOT validate if you are using a Strict doctype statement but the pop-up window works perfectly. You can view a working example of the WinPop add-in in action on my genealogy site. Click on family history in the first paragraph, and a pop-up window will open to a Wikipedia article.

You can download WinPop from the Expression Web Gallery or directly from Ian’s site, EW Resources. Thanks Ian for another great ad-in for Expression Web 4.

You can download all of Ian’s Expression Web Add-ins from the Expression Web Gallery.

HTML 5 and Expression Web

*** IMPORTANT UPDATE ***

This Add-in is now superseded by Expression Web 4 SP1! Service Pack 1 adds many more features than just HTML 5 intellisense, including support for the CSS3 draft specification! If you’ve downloaded this HTML 5 Add-In the past, it’s no longer needed and can be be removed.

*************

If you wish to use the HTML 5 doctype in Expression Web AND have the Intellisense help for HTML 5 available, you will need to install the HTML5 Schema Configuration Add-In for Expression Web available for download in the Microsoft Expression Gallery. The HTML5 Schema Configuration Add-In for Expression Web enables the new HTML5 schema to check your markup for errors and provide IntelliSense for HTML5 tags, attributes and values in code view.

Download HTML5 Schema Configuration Add-In for Expression Web from the Gallery. Remember where you saved the file on your computer.  Follow these instructions for  Installing Expression Web 4 Add-ins.

If the add-in is correctly installed, it will appear in the Manage Add-In dialog, and the Standard toolbar will display a new “HTML5” button.

Manage Add-ins Dialog Box.

Standard Toobar with HTML5 button.

Standard Toobar with HTML5 button.

Using the HTML5 Schema Configuration Add-In

Before you can use the HTML5 Schema, you will need to configure it.

  • To do this you will need to restart Expression Web 4  with administrative privileges (Right-Click the EW4 program icon and select“Run as Administrator”).
  • Click the HTML5 button on the standard toolbar (pictured above). The Configure HTML 5 Schema dialog box allows you to enable or disable the new HTML5 schema.

    Enable HTML5 Schema.

    Enable HTML5 Schema.

  • Click the Enable HTML 5 button to update the Expression Web HTML 5 schemas. Close the dialog box.
  • Restart Expression Web 4. Click the HTML5 button on the standard toolbar and you will see the schemas are now enabled.
  • HTML5 schema has been configured.

    HTML5 schema has been configured.

  • To change your page editor options choose  Tools > Page Editor Options. On the Authoring tab, set both the Document Type Declaration option and Secondary Schema options to HTML5.

    Page Editor Options for HTML5 schemas.

    Page Editor Options for HTML5 schemas.

Once you have changed the Page Editor options Authoring tab to reflect the HTML5 schemas, whenever you create a new web page in Expression Web, the new page contains the HTML5 doctype which is:

<!DOCTYPE html>

Now, when you edit an HTML5 document in code view, Expression Web 4 now provides IntelliSense for HTML 5 elements, attributes and their values.

There are some known issues with the add-in which you can read about on the MSDN Blog post Add HTML5 support to Expression Web 4! and scroll down to “Known Issues.”