About Expression Web

Expression Web is a free tool for creating and designing web sites. Since blogs and wikis are HTML-based, Expression Web is naturally suited for authoring blog and wiki content. Expression Web provides a rich offline environment that includes spelling check, multi-page tabs, design|split|code views of pages, HTML IntelliSense (in code view), dropdowns for standard HTML elements, and even the ability to preview content in multiple browser environments. Ultimately, Expression Web creates HTML code that represents your content, HTML code that can easily be pasted into a blog/wiki HTML editor. Expression Web is a good option for offline HTML authoring because it creates very clean HTML to represent the content you write.

This topic describes some of the basic steps for using Expression Web 4 to author blog/wiki content. In this article, an individual piece of content is referred to as a topic.

Content Authoring Overview

A typical workflow for authoring topics with Expression Web might look like this:

  1. Create a folder to host topics (optional)
  2. Create an HTML file for each topic
  3. Author topic in Design/Code view
  4. Run a spelling check
  5. Upload topic to blog/wiki
  6. Fix links to images and hyperlink targets

This article will run through how to perform these steps. For more information about using Expression Web, see the links at the bottom of this article.

Step 1: Create a Folder (optional)

NOTE: A folder is not required, but it can be a helpful way to organize content if you're going to write a group of related topics.

Expression Web displays the folder and all child topics (HTML pages) in the top left corner, as shown in the following image:

When you open Expression Web subsequent times, the previously used folder is displayed.

In Expression Web, folders are referred to as Sites. So, to create a new folder:

  1. In the Site menu, select New Site
  2. Use the New dialog to configure your folder:
    • Specify an Empty Site under the General category
    • Specify the location of your folder in the Location box
    • The Name value doesn't matter, this isn't actually going to be a Web site
  3. When finished, click OK
Note: to create sub-folders, right-click on that folder and select New | Folder

The New dialog looks like this:

Step 2: Create a Topic

In Expression Web, each topic you author is persisted in an HTML file. To create an HTML page, your topic, perform the following steps:

  1. Right-click the folder. If you are not using a folder, click the File menu.
  2. Click New.
  3. Select HTML from the context menu. This creates your new HTML page.
Note: When you create an HTML file from the File menu, the file is not automatically put in your active folder (if you are using folders). It is not until you save the new file, that Expression Web asks where you want to put the file.

After you create the topic, you can find it in a few places, as shown in the following image:

New topics created in folders will instantly appear under the folder in the Folder List. In the Site View tab, they will appear listed among all the topics in the folder. If you double-click the topic in either of those locations, a new tab will appear, allowing you to edit the topic.

Step 3: Author a Topic

Once you have the topic created, authoring the content is simply a matter of writing in the editor. Open a topic by double-clicking on the file in the Folder List or in the Site View tab. At the bottom of the editor, you are able to view your topic in three different ways: Design, Split, or Code view, as shown in the following image:

While authoring your content, Expression Web provides many conveniences. For example:

  • Providing a dropdown menu full of standard HTML elements to change the type of element where your cursor is .
  • Displaying an element tree to show you where you are in the element hierarchy (clicking on will select that element and all child elements).
  • Displaying the type of element you're writing in with a little "tooth" icon.
  • Word-like keyboard shortcuts like Ctrl-B for Bold, Ctrl-I for Italics, etc.
  • Dialogs for highlighting text, and adding tables, images, or hyperlinks. The list goes on...

Step 4: Run a Spelling Check

As seen in the following image, you can run a spelling check from the Tools menu or by clicking F7.

Step 5: Upload Topic to Blog/Wiki

In most modern blog and wiki platforms, the content editors allow you to directly edit the HTML code associated with the topic. This is where the beauty of authoring your topics as HTML pages comes in. To upload your topic (the HTML file) to the blog/wiki, perform the following steps:

  1. Open your topic in Expression Web and switch to the Code view (as shown in Step 3).
  2. Create your blog post or wiki page and then switch to the Edit view of the post/page.
  3. While in editing mode, open the HTML view of the post/page. This will show you the HTML source that represents the page/post.
    • In a SharePoint-based blog/page, you may need to have your cursor in the body of the text
    • Look for an HTML button, and then select Edit HTML Source
  4. Copy all of the HTML in the Code view of your topic (in Expression Web)
  5. Replace the HTML source of your post/page by pasting the HTML source from your topic into the HTML editor of the blog/wiki
  6. Click the necessary buttons to save changes on your post/page
Note: When pasting HTML source to most blog/wiki HTML source editors, the editors typically only keep the content inside the <body> tags of your topic's HTML source. This is typically indicated by a warning from the editor that your HTML source has been modified.

Example: Uploading to a TechNet Wiki Article

The following image shows how to access the HTML editor in a TechNet Wiki article. Click HTML at the bottom of the editor window to reveal the HTML source of the article:

Example: Uploading to a SharePoint Blog Post

The following image shows how to access the HTML editor in a SharePoint blog post. To make the HTML button appear, put your cursor into the Body of the post editor. The, click the HTML button to reveal the Edit HTML Source option.

Clicking Edit HTML Source opens the HTML Source window. This is where you paste the HTML code from your Expression Web topic:

Step 6: Fix Links to Images and Hyperlink Targets

Finally, you'll need to fix any image links or hyperlinks that pointed to locations not accessible from the Internet. For example, you may use images in your topic that are located on your own computer while you authored offline. After that topic has been copied to the post/wiki, you'll need to move those images to an Internet-accessible location and update the links in your post/wiki so that those images can be displayed. Hyperlinks must be updated in a similar fashion if they pointed to targets on your private network or PC.

Additional Resources

Other Languages