Charlie Calvert on Elvenware

Writing Code and Prose on Computers

Elvenware

Writing Code with Expression Web

Here are some notes on using Expression Web

Creating a Site

To get Expression Web to work properly, you should first create a site.

Learning to work with sites in Expression Web is crucial. If you don't work from inside a site, a lot of the best features of Expression Web will not work for you. For instance, it won't know how to help you create links from one file to another file that will resolve correctly when you copy the files to a new location.

Choosing the default HTML DocType

When you create a new HTML5 file in Expression Web you can decide whether it should an HTML 5, XHTML, or etc. You can also decide whether the IDE should give support of CSS2, or CSS3 documents.

Choosing the HTML Doc Type in Expression Web
Choosing the HTML Doc Type in Expression Web

Note that nothing is changed in the syntax of a file if you select CSS3. What changes is the kind of intellisence you get inside of Expression Web.

Working with Panels and Workspaces

The panels are the windows that appear on the right and left of the editor. For instance, Managing Styles, Folder List, and Tag Properties are all panels. Use the Panels menu to display and manipulate the panels.

You can hide or reveal all the panels by toggling F4. You can also have multiple workspaces, or default arrangements of the panels.  There are several default workspaces, but you can create new ones at any time.

Managing Styles

Use this panel to:

Tag and CSS Properties

These are the two panels that usually appear on the bottom left of the screen. They are meant to give you insight into the properties in effect on a tag. If you want to apply or edit the CSS, use the Apply and Manage Style windows which usually appear on the far right.

The Tag Properties show up on the left side of the IDE.

Quick Tag Selector

  1. Drop the little arrow and

  2. Select Tag - Selection the tag and contents
  3. Select Tag Contents - Select the tag contents
  4. Edit the tag in a pop up called the Quick Tag Editor
  5. Wrap the tag, which allows you to surround the tag with another tag.

Snippets

Working with DWT

Dynamic Web Templates are similar to Dreamweaver Web Templates. They allow you to imbed blocks of code in multiple documents. For instance, if you want to include identical headers, menus or footers in multiple documents, then you could use a DWT. Server Side Includes are another way to achieve this same goal. You could also use a scripting language such as PHP or Python.

Expression Web includes a number of example sites that come with existing DWT that you can study. You can also just create a file with a DWT extension and put some code in it and apply it to an existing HTML file. By trial and error, you will soon learn what it can and can't do for you.

  1. You can apply a DWT to any one or more existing HTML pages
  2. Pick the file or files you want to update in the Folder List, or open a file in Expression Web.
  3. Choose Format | Dynamic Web Template | Attach Dynamic Web Template
  4. See also: File | New | Create from existing Dynamic Web Template

I consider DWT's to be something of a hack, nevertheless, at the time of this writing, I am using them extensively. They may be a hack, but they sure are useful!

Reformatting HTML

  1. Go to code view
  2. Right in the code window or on the bar at the top.
  3. Choose Reformat HTML to reformat all the code in the file
  1. See the Regular Expression page.

Spell Checking

Press F7, or choose Tools | Spelling from the menu. In the Spelling Options dialog, which you can reach from Tools | Spelling menu, there is a checkbox for turning on Check Spelling as your type. I generally turn this on, since I don't like to search through a page for spelling errors, since my pages frequently have a lot of code with odd words in it that simply should not be checked. I wish they had an option that would allow me to ignore spelling errors in HTML tags with certain IDs.