Chapter 4

It's All About Content

This page serves as the companion web page for Chapter 4 of Expression Web 4 Step by Step.

Too often, when people think of "content,” they think only of text. Whether that text consists of heavily marked-up HTML/XHTML code or just plain text, most people imagine the written word when they think of content. But today’s modern web—and most users—more than accept content such as video, images, and so forth; to a degree, it’s expected.

In this chapter, you will learn how to present text content on your pages as well as how to present non-textual content of various kinds. For the purposes of this chapter, you can consider content as material that a visitor to your page can read, listen to, or view. That way, you won’t fall into the potentially limiting mind-set of thinking about content as simply readable text on a page. Instead, you will look at content in a more holistic light—anything that helps convey a message to a visitor. The chapter begins by discussing text, because that’s still the backbone of information delivery on webpages. You will see how to use Microsoft Expression Web and HTML to group, contain, and control your text content, and then you will discover how to present alternative forms of content on your pages.

Expression Web provides many ways to present content on your pages, both by itself and in conjunction with its Expression Studio stable mates—Expression Design and Expression Encoder. Together, these tools give you the capabilities to build rich webpages that contain information users can consume in the most effective ways, in a broad range of scenarios.

After completing this chapter, you will be able to:

  • Use tables properly
  • Use lists to group information
  • Use semantic markup
  • Style the presentation of your content
  • Add images to a Web page
  • Edit images with Expression Design
  • Use Photoshop files in a Web page
  • Use Silverlight Video in a Web page
  • Use Deep Zoom Composer projects in a Web page

Using Tables Properly

Currently, professional web developers consistently use cascading style sheets (CSS) for layout. For example, if you explore any of the templates that came with Expression Web 2, you won’t find a single one that uses a table for layout purposes. In the not-so-distant past, designers used a table or a group of nested tables to lay out or design elements of a webpage. Although that method provided a fair amount of precision, layout was never the intended purpose of the tag. As an unfortunate by-product of "table heavy” design, the source code of the page is always much more complex, which makes it less than ideal for screen readers and search engines, not to mention additional download time for browsers. The big question seems to be whether it’s still acceptable to use tables. The answer is a definite "Yes.” Tables seem to have fallen out of favor for laying out pages; however, there are still a number of good reasons to use tables, the most obvious of which is to present data in clear, tabular form.

In this chapter segment you will use a properly coded and valid table structure to display some tabular data on your webpage

Using Tables in Expression Web 4

Using Lists to Group Information

Lists are among the essential tags for laying out information on a webpage. List tags include unordered (bulleted) lists (ul), ordered (numbered) lists (ol), and definition lists (dl), each of which adds semantic value to the information it contains. You can use lists when you need to display directions or procedures on a page, or even as the basis of a navigation structure. Lists also work well with advanced styling using cascading style sheets.

In this exercise, you will learn to insert all three types of lists and arrange information within them

Definition List in Expression Web 4

Using Semantic Markup

Rather than thinking of HTML elements as ways to style your text, think of them as ways to describe what the text means and use cascading style sheets to style their appearance.

For instance, a list by nature groups similar elements together in a way that several paragraphs don’t. An H1 element shows more importance than the same words marked up with a large font size, and an (emphasized) or a tag adds additional meaning to a word where a (bold) tag simply changes the font but doesn’t add to the word’s perceived importance.

In this chapter segment you will use HTML and Cascading Style Sheets to define the purpose and appearance of text

Using Semantic Markup in Expression Web 4

Adding Images to a Webpage

Even with the most meaningful content in the best semantically valid HTML arrangement, there comes a time when text just isn’t enough. Perhaps you need to use an image to reinforce a point made by the text or perhaps you need to insert an image simply to break up the text and make it appear more approachable. Regardless of the reason: you do need to use images.

Expression Web provides some really great tools that enable you to use images in a clean professional way. Among the most important things a designer needs to keep in mind is that their images should be of an appropriate file format, physical dimension, and file size for the web. Expression Web contains tools to make virtually any image source file fit the bill for web display without even leaving the Expression Web interface.

When you complete this exercise you will be able to insert images into your web page in a number of different scenarios

Adjusting Image Properties in Expression Web 4

Editing Images with Microsoft Expression Design

Since Expression Web now comes with Expression Design, you have near-seamless interoperability between your web design, development interfaces, and a very capable graphics program.

While some users of Expression Web will get their graphics and images from someone else and only be responsible for layout and deployment, the great majority of users will be responsible for creating and editing the images and graphics they use.

Expression Design is an excellent tool for creating an entire page/site graphics template. The template for this book’s companion site was built in Expression Design. It’s available as a native .design file that you can open directly in Expression Design.

In Chapter 6, "Creating a Web Site from Scratch,” you will work with a template and create a custom template of your own, but in that case, the images would be considered "graphics.” In this chapter segment, the images you are focusing on are considered "content,” so you will begin with Expression Design by using it to perform basic image edits and then use the resulting image in Expression Web.

When you complete this exercise you will be able to edit an image in Expression Design and then use the image in Expression Web

Expression Design is a stand-alone graphics application with significant capabilities.  Check out the tutorials onMicrosoft's Expression Community Site.

Expression Design 4

Using Photoshop Files in a Webpage

A very interesting feature of Expression Web is its ability to use Adobe Photoshop PSD files in webpages. Expression Web lets you import a Photoshop file, include or exclude any layers you wish, and then Expression Web optimizes the resulting image for the web. This feature comes in handy when you need to do a quick mock-up, and also when the person using Expression Web isn’t the same person doing the image preparation. One convenient feature of Expression Web’s Photoshop file handling is that if the original source PSD changes, you can update the image in an Expression Web page with a simple right-click.

When you complete this exercise you will be able to use an Adobe Photoshop file in a Webpage

Importing Adobe Photoshop Files in Expression Web 4

Using Silverlight Video in a Webpage

Every version of Expression Web now includes Expression Encoder, which gives you the option of using Silverlight Videos in your webpages. Now you’ll be able to insert high-quality streaming video directly into your pages. Expression Encoder resamples video files into a format appropriate for web display. In addition, it creates a Silverlight video player that will play the movie in users’ browsers. You can do all this with little more than a few mouse clicks.

When you complete this exercise you will be able to insert Silverlight Video into your Webpage

Expression Encoder Resources
Silverlight Video in Expression Web 4

Using Deep Zoom Composer Projects in a Webpage

Expression Web has the ability to insert a Deep Zoom Composer project into a webpage. Deep Zoom Composer is a free application from Microsoft that enables designers to build compelling projects that capitalize on Silverlight Deep Zoom technology.

Deep Zoom Composer images are very helpful in a situation where you want to show a collection of photos consisting of extremely high-resolution images, without taking up a lot of space on the page itself. Like a photo gallery—but much more—Deep Zoom Composer images are a truly unique feature for designers to consider.

Deep Zoom Composer is a standalone application. You should review the resources listed at the end of this chapter segment to learn the ins and outs of working with Deep Zoom Composer. You’ll also find resource links in the Chapter4.html file of this book’s SampleSite.

When you complete this exercise you will be able to insert a Deep Zoom Composer Image into your Webpage

Deep Zoom Composer Resources

Deep Zoom Composer Image

Sidebar: MIME Type
The previous chapter segments dealt with rendering projects in a visitor’s browser using Silverlight. While they’ll always preview for you in the Expression Development Server, they might not work when they’re published to a production server unless that server has been set up for Silverlight.

For Silverlight to render properly in users’ browsers, the following MIME types will need to be set on the server. A MIME type is code that identifies a specific type of content that is associated with a file extension. Some hosting services offer a control pane where you can set these MIME types yourself. In other cases, you can have the server administrator set them for you.
Ensure all the MIME types below are added on your website:
  • .dll application/x-msdownload
  • .dmg application/octet-stream
  • .flv video/x-flv
  • .mp4 video/mp4
  • .pdb Symbols file
  • .psx Managed Jscript file
  • .py IronPython file
  • .xaml text/xml
  • .xpi application/x-xpinstall
  • .xap application/x-silverlight-app

Key Points

  • In modern Web sites, content consists of more than just text.
  • Using tables for Web page layout works well for certain content.
  • By using XHTML and cascading style sheets, you can easily improve your site’s appearance and its semantic meaning.
  • HTML tags can help lend meaning to the content they contain.
  • Cascading style sheets can help you make HTML render any way you want it to.
  • Expression Web provides tools to make inserting images more efficient.
  • Expression Design enables you to edit images in ways that Expression Web can’t.
  • Expression Web can insert Photoshop files into your pages as Web-ready images.
  • You can add Silverlight Video to your pages in Expression Web using 16 different player templates.
  • Expression Web provides several ways to display Deep Zoom Composer projects in your pages.

You can easily make this a point to YOUR company OR hide it all together.