>FrontPage helped bring WYSIWYG publishing to the World Wide Web. Since those early beginnings, however, the web has changed; countless new technologies have emerged, evolved, and slipped into obscurity. The World Wide Web Consortium (W3C) has led the way in defining the web’s technological common ground, referred to as web standards. Websites that conform to W3C web standards are referred to as standards-compliant.
Over the next several articles, I’ll be helping you update your website; migrating away from legacy code and components to newer solutions, based on web standards.
In this article, we’ll start the migration process by cleaning up the code so that it’s more in alignment with web standards and start moving style and formatting out of the web pages and into a cascading style sheet (CSS).
Before we begin, I strongly encourage you to make a backup copy of your website.
Browsers read the DOCTYPE declaration on a page to determine which version of HTML (or XHTML) the page uses. Expression Web uses the DOCTYPE declaration for validation and IntelliSense code completion. Adding a DOCTYPE declaration to your website’s pages makes it easier to create and maintain valid code throughout your project.
If your project contains no FrontPage web components, set the DOCTYPE to XHTML Transitional. If your project does contain FrontPage web components, you’ll experience fewer problems if you set the DOCTYPE to HTML 4.01 Transitional.
To set the DOCTYPE for a single page, from the Expression Web Code view:
Repeat this procedure to set the DOCTYPE for every page in your project.
Now that the existing pages all have DOCTYPE declarations, this would be an excellent time to set the DOCTYPE for the entire project so that any new documents you add to the site are created with the correct DOCTYPE declaration. Click Tools, and then click Page Editor Options. Select the Authoring tab and set the Document Type Declaration.
Once you've set the DOCTYPE declaration on a page and while you're still in Code view, right-click on the page and select Reformat HTML. This will tidy up the code formatting and attempt to validate the page against the declared DOCTYPE. If there are any code errors, Expression Web will highlight them in yellow. DOCTYPE validation errors are displayed with a squiggly red underline.
Go through the code and clear up what you can. When you hover your mouse cursor over an error, a tooltip displays with details about the error to help you find a solution.
External style sheets are separate files from content pages that will be linked from each of your project’s web pages. This allows you to create a single style definition that controls the appearance of every instance of a style throughout your website.
Overall, cascading style sheets provide greater flexibility, easier maintenance, and true separation of content from presentation.
Each page must include a link to your CSS within the <head> section of the page. You can add this link manually in Code view: <link rel="stylesheet" type="text/css" href="mycss.css">; or you can add it from the Format menu by clicking CSS Styles, and then clicking Attach CSS Style Sheet in Design view.
Here’s a quick refresher for CSS style definitions. A CSS style definition has three parts:
The properties and values are contained within curly braces, and properties are separated by semi-colons.
A selector can be:
Class selectors in a CSS begin with a period (for example, .codeview, .caption, and .uitext). Classes can be used with several different elements on a page. For example, the .uitext class can be applied to single or multiple words, entire paragraphs, headings, or specific sections on a page.
Once you’ve created the CSS, you can quickly apply styles in Design view using the Apply Styles task pane. (If the Apply Styles task pane isn’t visible, click Task Panes, and then click Apply Styles.) The Apply Styles task pane shows all the available styles in a document. To apply the formatting to different areas of the page, select the text you want to format and then click a style in the Apply Styles task pane.
In Code view, you’ll see that CSS class and ID attributes have been added to the HTML tags for many formatted sections of text. If you prefer to code by hand in Code view, note that the “.” and “#” characters are omitted from the HTML attributes.
Once you’ve applied CSS styles to each content element in your site, it’s a good idea to go through each of the pages in Code view, clearing out any leftover presentation formatting, such as <font> tags (especially those with attributes, such as <font face=”Tahoma”> or <font color=”#007F00”>).
A special note about MsoNormal.
Copying and pasting content directly from Microsoft Word into FrontPage or Expression Web generates Office-specific markup, characteristically set off with an MsoNormal attribute. That markup may be valid (depending on the DOCTYPE declaration) but it adds unnecessary clutter and maintenance headaches.
Tip: Copy the affected text directly from Word into Notepad and then paste it into the web page. This will strip all inline, Office-specific formatting out of the content, to which you can then apply CSS styles.
Now that we’ve shifted the appearance of page elements out of the HTML page and into the CSS, the tags have semantic value—they actually describe what’s contained within them. Semantic content markup offers tremendous benefits in accessibility alone. For example, because the formatting and appearance of a standards-compliant web page are handled by the CSS, instead of by inline formatting, visually impaired users no longer have to sit through the screen reader’s tedious and time-consuming itemization of every table element and transparent GIF used in the non-compliant page’s layout tables.
Another great benefit to semantic content markup is that it can significantly improve search engine optimization. Standards-compliant web pages contain a bare minimum of markup, so when a search engine crawls your site, it encounters a much higher content-to-markup ratio, resulting in more accurate search engine results and higher page ranking.
One final note about semantic markup: <i> and <b> tags are considered display tags; they change only the appearance of the enclosed content. Use style definitions in your CSS for elements such as code examples or UI text that should be displayed in italics or bold.
In cases where your intent is to change the meaning of an element, use the standards-compliant <em> (meaning “emphasis”) and <strong> tags instead. Though these tags also correctly apply the desired formatting, their purpose is to provide semantic value, which—among other things—helps screen readers and other accessibility tools correctly interpret and present content enclosed in these tags.
DOCTYPE declarations and the separation of content from presentation are fundamental aspects of a standards-compliant website. More importantly, making these changes provides several important benefits: your website is much easier to maintain and extend in a standards-compliant editor such as Expression Web; you can add and expand accessibility features; and your site’s search engines results should improve.
In my next article, we’ll examine FrontPage web components and ways to replace them with standards-compliant alternatives.
Until next time!
Pad Galalgher, Technical Writer
Veteran FrontPage MVPs Tina Clarke and Pat Geary have developed an online class and ebook “Migrating from FrontPage to Expression Web” for FrontPage users that want to get started using Expression Web and update their websites to use today’s web standards. Their online class starts Saturday August 30th, 2008 on Cheryl Wise's website Start to Web.
Because this is the first launch of this training, the cost is only $39.50, which is 50% less than it normally would be. So if you’re a FrontPage user, sign up today before the class is full! For more information about this particular course, visit http://starttoweb.com/classes/fp-ew.php
Cheryl also offers several other courses at http://starttoweb.com/classes/index.php . If you register for any full-priced class that costs $60, use this coupon code to receive 10% off your registration: mv-fofa (Thanks Cheryl!)
I’ve never been a FrontPage user myself but I’ve signed up for the course in order to learn more about the experience of migrating from FrontPage. See you in the virtual classroom on August 30th!
A public BETA of Internet Explorer 8 is now available for download at http://www.microsoft.com/ie8. The Internet Explorer team provides a good overview of what you’ll find in BETA 2 at:
Especially note these paragraphs under “Platform” in that post:
IE8 is more interoperable with other web browsers and web standards. The contribution of CSS 2.1 test cases to the W3C is an important in order to really establish a standard way to assess standards support. We think that CSS 2.1 remains the most important place to deliver excellent interoperability between browsers. We think developers will enjoy the improvements to the built-in tools, as well as the other opportunities to integrate their sites in the user’s daily life with Accelerators and Web Slices. You can find more information at the IE Development Center, http://msdn.microsoft.com/ie. After deciding to default IE8 to the most standards-compliant mode available, we wanted to be sure to address compatibility concerns for organizations and individuals. Would websites that expect IE8 to behave the way IE7 does create a problem for end-users? Since March, we’ve been telling developers about a small change they can make to their sites to tell IE8 to show their sites as IE7 does. Many have – but there are a lot of sites that may have not yet addressed this. The Compatibility View button (new to IE8 Beta 2) is a good solution to provide end-users a good experience as the web transitions.
IE8 is more interoperable with other web browsers and web standards. The contribution of CSS 2.1 test cases to the W3C is an important in order to really establish a standard way to assess standards support. We think that CSS 2.1 remains the most important place to deliver excellent interoperability between browsers. We think developers will enjoy the improvements to the built-in tools, as well as the other opportunities to integrate their sites in the user’s daily life with Accelerators and Web Slices. You can find more information at the IE Development Center, http://msdn.microsoft.com/ie.
After deciding to default IE8 to the most standards-compliant mode available, we wanted to be sure to address compatibility concerns for organizations and individuals. Would websites that expect IE8 to behave the way IE7 does create a problem for end-users? Since March, we’ve been telling developers about a small change they can make to their sites to tell IE8 to show their sites as IE7 does. Many have – but there are a lot of sites that may have not yet addressed this. The Compatibility View button (new to IE8 Beta 2) is a good solution to provide end-users a good experience as the web transitions.
I’m Steve Schermerhorn, one of the new developers on the Expression Web team.
When I’m developing a website or application I’m typically dealing with a wide range of colors throughout my project. On more than one occasion it would have been really handy to have a visual reference that also mapped the colors to their names and hex values. I eventually managed to come up with a solution using an XSL to transform an XML file into a nice little color reference table I could print off and hang on my wall. This little ‘how to’ is going to give you a very hands on example on how you can take an XML file and create an HTML page.
That attribute sets the background column of every cell to the value of the ColorValue specified for that row in the Color Value column.
Expression Web 2 has built-in support for Silverlight version 1 in the Insert menu ( Insert > Media > Silverlight) and in the Media category of the Toolbox task pane,
but what if you’ve already moved onto working with Silverlight 2? There’s no need to wait for version 3 of Expression Web - you can get started with Silverlight 2 right now in Expression Web 2.
The Silverlight 2 Beta SDKs provide a Silverlight ASP.NET server control and also a MediaPlayer ASP.NET server control. We will look at how you can use Expression Web 2 to use the MediaPlayer ASP.NET server control that makes adding video to your website a breeze without writing any code at all.
To work with Silverlight 2 ASP.NET controls in Expression Web 2, you need to install the Silverlight SDK. The Silverlight SDK Betas are available on the Microsoft Downloads site. Take a look at the requirements of each Beta before choosing which SDK beta to install.
· Beta 1 or
· Beta 2 - NOTE: this version requires you to also have Visual Studio 2008 on your system
Once you have successfully installed one of those Silverlight SDKs, restart Expression Web 2 and take a look at the toolbox – 2 new Asp.Net server controls appear in the AJAX category.
2. Silverlight Control is a generic control that enables you to reference XAML that you provide.
When you add the MediaPlayer or Silverlight ASP.NET control to a page in Expression Web, Expression Web 2 adds a Bin folder and Silverlight assembly file to your website. This way your website is ready to be deployed at any time without having to install the SDK on the host server.
1. Open an ASPX page or create a new one (File > New > ASPX).
2. Drag a ScriptManager control onto your Aspx Page. The ScriptManager must be the first ASP.NET control on the page and is required at runtime.
3. Now click on the red asp:scriptmanager error text shown on the ScriptManager control in Design view to add a Web.config file to your website. Click Yes in the Confirm dialog that appears.
4. Drag a MediaPlayer control onto your ASPX page, making sure it appears AFTER the ScriptManager control.
5. Next click on the error on MediaPlayer control to add the Silverlight assembly to your website, and click Yes in the dialog box that appears.
6. This will now render the MediaPlayer control on the Design View. The control looks plain in Design view but there are settings you can use to customize the control’s appearance. But you won’t ever see the custom appearance in Expression Web, you always need to preview the page in a web browser to see the visual changes.
7. Click the Preview in Browser button to show the media player with its default skin. (Your browser may first prompt you to install the Silverlight plug-in. )
8. Now that we have tested that it works, we can set various properties. On the right side of the control, click the flyout arrow and set the following options:
a. Choose Player Skin – I chose Expression Skin
b. Choose Media Source – a video File (I picked up a URL to a video on the Channel 9 website)
c. Choose Placeholder Image – the main image to show before the video begins.
9. In the Tag Properties task pane, find the Chapters property and click the ellipses button to bring up the MediaChapter Collection Editor dialog. Use the Position option to set chapter markers (similar to “bookmarks”) according to the number of seconds into the video that you want – and use Thumbnail Source to specify images for those bookmarks, at specified intervals so that one can directly jump to that portion of the video. I simply used screenshots I took in the video at each point of time.
The code that is generated for you looks like this:
<asp:MediaPlayer id="MediaPlayer1" runat="server" Height="341px" Width="444px" MediaSkinSource="Expression.xaml"
MediaSource="BillGStories_ch9.wmv" PlaceholderSource="Placeholder.JPG" Source="Expression.xaml">
<asp:mediachapter Position="108" ThumbnailSource="Chapter2.JPG">
<asp:mediachapter Position="240" ThumbnailSource="Chapter3.JPG">
<asp:mediachapter Position="420" ThumbnailSource="Chapter4.JPG" Title="Soma">
10. Now click Preview in Browser again to look at our video – Looks way cooler with the new skin, easy to navigate using chapters and all this without writing any code at all.
Wasn’t that easy ???
When you’re ready to publish your content, check out the free Silverlight Streaming service provided by Microsoft at: http://www.microsoft.com/silverlight/overview/streaming.aspx
Vijay V Software Developer Engineer in Test Microsoft Expression Web
We know that great user experience is good business…the more engaging a web site, application, or device is, the more likely we want to spend time with it, buy it, and tell everyone we know about it.
With this is mind, Microsoft is sponsoring a user experience conference, UxWeek, put on by Adaptive Path, August 12 -15 in San Francisco.
In addition, we'll be presenting two sessions:
You can find out more information about UxWeek here.
Hope to see you there!
Ed Meadows, Product Manager Microsoft Expression Web
If you subscribe to this blog or are reading this post, chances are very good that you make a living creating websites or contributing to them in some way. If you consider yourself any of these: “designers, developers, information architects, project managers, writers, editors, marketers, and everyone else who makes websites”, then go represent and fill out the 2nd annual survey of web publishing professionals at A List Apart: The survey closes Tuesday, August 26 so you better scurry!
Steve Hebert recently joined the Expression Web team as a Development Lead and is working out of our new Saint Paul/Minneapolis development office. We’ve added a link from our BLOG ROLL to Steve’s blog at http://codebetter.com/blogs/steve.hebert/ where Steve has been blogging about .NET and development topics for several years. Whenever Steve blogs about something of interest to the Expression Web and web development community, we’ll be sure to mirror his blog post here on the Expression Web team blog.
Steve’s development background ranges from manufacturing and control systems to high availability hosted web applications. Steve authored the dotMath Expression Compiler back in 2004 (still available at http://www.codeplex.com/dotMath), and has done some patent and standards work along the way. Apparently Steve also has a black belt in karate, which should come in handy when he needs to tackle bugs in the program. Welcome Steve!
Working with design & authoring software all day, every day for many, many years got me thinking that great UX is just the latest buzzword for user interface design. We all appreciate a well-designed website, a beautiful, immersive game environment, and a computer program that is intuitively designed so you can get started right away with it.
But all of this assumes that UX only takes place only within the confines of my fine LCD monitor.
So, it was eye opening for me, to say the least, to hear presentations at UXWEEK.com on creating engaging UX:
I'll write more about some of these sessions in future posts (assuming that my editor lets me!).
What this tells me is:
So, there you have it. UX is way bigger than I thought and there are many, many more people working on UX in ways that I never thought of. Seems that's the reason they send us to conferences, no?
As a footnote, the UX Week site is now posting slide decks and other session materials from the conference. Go check them out!
Ed Meadows Product Manager, Expression