Easy HTML & CSS with Expression Web 4

Tweet

In his recent series of three articles, Shane Morris has run you through Microsoft Expression Blend. In the next two articles, I’ll be taking you on a tour of its sister product, Microsoft Expression Web. Now’s a good time to look at each of these products asExpression 4 was just launched on June 7.First up, it’s important to note that while Expression Web is Microsoft’s entry into the HTML editor arena, it is by no means tied to Microsoft’s server-side products. Whether you’re building straight HTML, ASP.NET, or PHP, Expression Web provides support for each of them as first-class citizens, so I encourage you to read on.These days, it’s well accepted that web standards are the way forward for the Web. Building to commonly accepted standards allows us to produce sites that work reliably across a wide range of clients and devices. There are also other benefits, such as faster loading—CSS layouts almost always win over table-based layouts—and better accessibility.One of the biggest impediments to standards-based development over theyears has been a lack of consistent tooling. Even as browser vendors cleaned up their acts, it was still easy for us developers to churn out any old HTML and just hope that it worked.Expression Web has been evolved from the ground up, with a focus on standards. It offers its own standards-based rendering engine, which is distinct from the Trident engine used in Internet Explorer, as well as features like IntelliSense and built-in compatibility checkers to keep you on track during development. Throughout the remainder of this series, I’ll be taking you on a tour of these features as we move through the authoring, styling, testing, publishing, and reporting phases of building an HTMLpage.You can follow along by downloading a free trial of Expression Web 4 from Microsoft’s site. Once you’re done with the article, be sure to test what you’ve learned in our Article Quiz, sponsored by Microsoft.

Authoring

Let’s start from the beginning, with Expression Web’s HTML authoring features.

Setting the Doctype and Schema

The first step towards standards-based development is deciding on exactly which standard you want to target. While it seems obvious, this step is often glossed over at the start of a project while we focus eagerly on writing the first line of “useful” code. The way to tell a browser which standard you’re targeting is to use what’s called a doctype, or a document type declaration.As an example, the doctype for XHTML 1.1 looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

The doctype for HTML5 is a lot simpler:

<!DOCTYPE html>

The doctype you use will influence the way browsers render your page. The lack of a doctype (or the presence of an invalid one) can change the layout of your page completely, as the browser will use quirks mode instead of standards mode to interpret your code. As the name suggests, you can expect the render to include a few quirks if you take this route.Changing the doctype in Expression Web is easy, particularly because you don’t have to remember them all. Simply highlight theexisting doctype in your markup then press Ctrl+Enter. You’ll be presented with a popup window like the one shown in Figure 1, “IntelliSense for DocTypes”.

Figure 1. IntelliSense for DocTypes

IntelliSense for DocTypes


The newer HTML 5 doctype isn’t there yet, but you can add it easily by choosing the Customize list… option. You can also change the default doctype for new documents by selecting Tools > Page Editor Options > Authoring.

IntelliSense

As you type into the code pane, many HTML editors will offer drop-down suggestions for tags and attributes. In the Microsoft world, this feature is known as IntelliSense. The HTML IntelliSense in Expression Web is particularly powerful as it has an understanding of the standard you’re targeting.Like a browser, Expression Web uses the doctype declaration at the top of your page to determine which standard you’re targeting, and provides assistance accordingly. IntelliSense will work without a doctype, but it won’t be as accurate and, more importantly, your page will be less likely to render consistently across browsers.

tip: IntelliSense Blues?

If you feel that IntelliSense is working against you, it probably is. Make sure that you’ve got the right doctype specified at the top of your document, and that the tag or attribute you’re trying to use is valid at that location in the document.

As you can see in Figure 2, “IntelliSense Attribute Filtering”, where I’m using the XHTML 1.1 doctype for my document, Expression Web isn’t offering the target attribute. In this way, IntelliSense is great for giving you gentle reminders about what you can actually put where.

Figure 2. IntelliSense Attribute Filtering

IntelliSense Attribute Filtering


Using the Compatibility Checker

As useful as it is, the reality is that IntelliSense only gets us so far—it certainly shouldn’t be our final check. The common  validation workflow would be to upload your page to the W3C Validation Service on a regular basis, however this is a rather tedious manual task that we’d much rather automate.To make these checks an ongoing component of your development, Expression Web includes a built-in compatibility checker. This tool is analogous to the W3C tool mentioned above, but is directly integrated into the code editor.Unsupported attributes, missing attributes, and badly nested tags are all highlighted inline by the compatibility checker, as shown in Figure 3, “Inline compatibility checker”. If you mouse over any of the errors, you’ll be given more information as to exactly what’s wrong.

Figure 3. Inline compatibility checker

Inline compatibility checker


In addition to these hints, you can see the full picture of your document in the bottom-right corner of the display.

Figure 4. Document Validation Symbols

Document Validation Symbols


The example show in Figure 4, “Document Validation Symbols” indicates that although our document has compatibility errors (the first icon), the code is syntactically valid (the second icon). If we had a malformed or mismatched tag anywhere in our document, the second icon would show an error state too. Clicking on either of these icons will take us straight to the error that triggered them. It’s good to get into the habit of regularly checking these icons while you code so that you can fix any errors fast.The document compatibility checker is particularly useful when you’re working with existing documents, and when you’re embedding code from third parties.Finally, you can run the checker across all of the documents in your site by selecting the Tools >Compatibility Reports menu option.

Find and Replace (With Special HTML-styled Love)

One of the things I enjoy the most about working on the Web is the rate at which our industry changes and improves. The downside to this is that I often look at code I wrote not so long ago and cringe.Another common scenario in which I find myself wanting to make across-the-board improvements is when I inherit code that’s either sub-standard, or isn’t consistent with the way a project has alreadybeen built.Both scenarios can often be alleviated with a set of simple find-and-replace actions; however, the typical text-based find-and-replace tools aren’t always powerful enough. Expression Web really shines in this area, with its regular expression and tag-basedsearch functions.Press Ctrl+F and switch to the HTML Tags tab to seethe dialog shown in Figure 5, “The HTML Find and Replace dialog”.

Figure 5. The HTML Find and Replace dialog

The HTML Find and Replace dialog


Now, let’s go hunting for any <img> tags in our site that lack alt attributes.

  1. Select img in the Find tag field.
  2. Click HTML Rules….
  3. Select New rule…, then Without attribute, then alt.
  4. Click OK.
  5. Click Find Next.

Just imagine writing a regular expression for that!To be fair, the example I just used would have been found by the compatibility checker, but it serves to illustrate just how powerful this feature is. It really comes into its own with more complex rules, including those based on multiple levels of tag nesting.When I’m building a form, I generally like to have all of my fields within a <ul> tag that has a class of fields. Finding forms that violate this personal rule becomes quite simple using the HTML find-and-replace functions, as Figure 6, “HTML find and replace rules” shows.

Figure 6. HTML find and replace rules

HTML find and replace rules


Styling

With our markup in place, it’s time to apply some styling with CSS.

Using the Designer

If you’re new to CSS, you can use the toolbars you’re familiar with to help get some basic styling done quickly. The problem with this approach is that most editors would produce markup like this for underlined text:

<p style="text-decoration: underline;">Bad editor, bad.</p>

Worse still, some editors use tags wherever possible:

<p><u>Very bad editor, very bad.</u></p>

Expression Web improves on these approaches by automatically creating CSS rules wherever it can. Initially, these rules will beassigned to an automatically generated class like style14 and placed in the head section of the document. However, we’ll look at how to improve on that shortly.

Reusing Automatic Styles

Considering the ease with which a new style can be created—just highlight some text and click the underline button on the toolbar—there’s always the risk that your document can quickly become littered with the resulting auto-generated styles. Expression Web gets around this issue by automatically reusing styles with the same properties where possible.For example, if I was to create a paragraph and then underline the text, the paragraph would be given an automatically generated class name of style1, and an associated CSS style would be created in the head of the document. Changing the text color of this paragraph to green would just update style1 accordingly. If I created a second paragraph of underlined text, style2 would be created and applied; however, as soon as I chose the same text color for that paragraph, both paragraphs would be updated to use the same style—style1—and style2 would be deleted.Of course, this feature can be both a blessing and a curse for some projects. Depending on your situation, you may want to enable the Only reuse classes with the prefix “style” option from the CSS tab of the Page Editor Options dialog.

Managing Styles

For those who like to build their CSS using toolbars and the design view, as well as those who prefer to hand craft every rule,Expression Web gives us some nice ways to manage styles. Of particular interest is the Manage Styles panel shown in Figure 7, “The Manage Styles panel”. In this pane, we can easily see which styles we’ve used in our current page, and across linked CSS files. Mousing over one of these styles instantly shows the full code for the rule.If you select an element on the design surface, the highest-priority CSS rule (that is, the one with the highestspecificity) for that element will be highlighted in the list. If you like making your changes in the design view, any style changes—such as font size or color changes—will be updated in the corresponding rule. They won’t clog up your page with inline CSS the way they do in most editors. If you prefer to hand craft your CSS, then right-clicking the rule and selecting Go To Code makes it simple to get there from your markup.

Figure 7. The Manage Styles panel

The Manage Styles panel


Typically, when I’m starting a new site, I like to create the first page and build all of my styles inline. I find this helps withearly evolutions of the general markup and associated CSS. But when it comes time to save the page, I need to split these styles out into one or more external stylesheets. Usually, this task would be handled by a somewhat crude series of cut and paste operations.Using the Manage Styles panel, we can drag and drop the styles to either reorder them or even move them to entirely different files. We can also rename classes and have the changes automatically reflected through all of our selectors and, more importantly, our markup. The combination of these two features makes CSS refactoring much easier and more reliable.

Finding Orphaned Styles

As a site grows, you can find you have too many styles, including some that are no longer in use. Expression Web includes as CSS reporting feature (Tools > CSS Reports…) than can find these rules for you.As shown in Figure 8, “CSS Reports”, three different checks are available.

  • The first, Unused Styles, highlights styles that are defined in your CSS documents but aren’t actually used on your pages. This is a good check to make, and can help remove old code from your CSS files.
  • The second check, Undefined Classes, highlights classes that are defined in your markup but aren’t targeted by any styles. I would recommend against using this check, as classes aren’t exclusively used for styling. The correct use of progressive enhancement approaches for JavaScript will often require classes to be included in your markup, and these shouldn’t be removed.
  • Finally, the Mismatched Case check looks for places where the case you’ve used to define your class differs between the markup and the CSS. Technically, such code isn’t valid, however some browsers are pretty lax about it. You’re better off maintaining consistent case to achieve the widest compatibility.

Figure 8. CSS Reports

CSS Reports


Summary

In this article, we’ve looked at the markup and styling features offered by Microsoft’s Expression Web product. In the next and final article in this series, we’ll investigate the tools that Expression Web offers to help effectively test the pages you’re building—be they static, PHP- or ASP.NET-based—in multiple browsers. We’ll also learn how to publish your final product, and look at techniques and tools available for reducing repetition in your code. Catch you soon!In the meantime, why don’t you test your knowledge in our Microsoft-sponsored Article Quiz?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://sitepoint.com Aaron Osteraas

    Hi,

    Working to find out what the issue is now, sorry for any inconvenience.