Ana səhifə

Microsoft FrontPage to Expression Web


Yüklə 1.85 Mb.
səhifə4/7
tarix18.07.2016
ölçüsü1.85 Mb.
1   2   3   4   5   6   7

Building Standards-Based Web Sites with
Expression Web


This section covers best practices for creating a standards-compliant, accessible Web site when working with Expression Web.

Meaningful markup


Separating content from the presentation—in other words, separating the markup and text from the visual display—is a fundamental principle in building standards-compliant Web sites. Most Web professionals, however, take this idea one step further. For your markup to be meaningful and to be accessible across the largest range of devices, you’ll want your content to be marked up semantically. Semantic markup is meaningful even if all styles and formatting are removed. For example, you might use an

tag to mark up the title of a document because text marked up with the H1 element is a first-level heading. You could also mark up the title with a
tag, and then apply styles to make it display in a browser exactly like the H1 element would. However, if the style sheet is not applied, the text in the H1 element still looks like a title or heading, but the text in the P element looks just like a normal paragraph instead of a title, making the title less meaningful in comparison to the rest of the text.

This is true of the full range of HTML markup that is available to you. Use the different level heading tags available in HTML (H1, H2, H3, H4, H5, H6) as they were meant to be used—for creating headings and subheadings. If you use the proper tags throughout, you can format your Web content in a way that conveys meaning through its structure. Don’t use different heading tags just to get different-sized text. If you want to emphasize text that isn’t a heading or subheading, use the or tags and then create a class to apply a format to the text so the text appears the way that you want it to appear.1

There are several additional benefits to using semantic mark up:


  • The HTML/XHTML standards advise you to use the H1 element for first-level headings. By using H1, you would be following a recognized standard, which means that browsers, text-to-speech readers, and other assistive devices would know how to deal with the heading. Your site would be more accessible.

  • Your code would be more search-engine optimized. Search engines would be able to recognize your H1 element as a heading and would put more weight on the text in the heading.

  • Your code is cleaner.

For best results, before you use a graphics editor or a style sheet, you’ll want to mark up your content semantically and then make sure that your document follows the rules for your declared DOCTYPE. This will help you focus on creating a structured document by using the full range of HTML elements available for marking up text, including blockquotes, ordered and unordered lists, data tables, headings, subheadings, and more. After creating your content-only pages, you can then begin formatting the site by using style sheets or creating and then attaching ASP.NET master pages or Dynamic Web Templates.

For more information on semantic markup, see the article entitled Integrated Web Design: The Meaning of Semantics (Take I).


Style Sheets Instead of HTML for Formatting and Layout


Many Web developers share the common experience of going through two general stages of learning about CSS. The first stage is learning how to format text and images, including font families, colors, padding, background images, and borders. (For an introduction to using CSS to apply styles, see Appendix A: Using Expression Web to Create Styles.)

The next stage has a steeper learning curve, but is the direction that the Web is moving in: learning how to use CSS instead of tables for layout.

There are a lot of good reasons not to use tables for layout. One reason is that the table structure itself is semantic, meaning that tables are meant for displaying data, not for facilitating the layout of a page. To use a table semantically, tables should only be used to display data. In addition, tables used for layout, especially nested tables, are especially difficult to understand when a visitor is using an audio-based browser. Sites using tables for layout are inaccessible to audio-based browsers and other assistive devices, as well as to devices with displays that are smaller than the tables.

You may not be ready to immediately transform your table-based layouts into CSS based layouts. However, to create an accessible, standards-based web site, it’s still a good idea to begin using CSS to apply styles to your web content. If you are using tables for layout, make them more accessible by using as few tables and table cells as possible, and make sure that your tables make sense if a text-to-speech reader were to read the contents of the table across each row and down the page. (For more information on how to make layout tables more accessible, see the Tables for layout section of the W3C’s Web Content Accessibility Guidelines. For more information on how to begin using CSS to create table-free layouts, see CSS Layout Techniques for Fun and Profit.)

There are many resources available—books, online articles and tutorials, videos, and more—to help you learn CSS. Here are some resources that you might find helpful:


  • Beginner’s guide from a seasoned CSS designer

  • Veerle’s Interesting CSS Links

  • Smashing Magazine’s CSS Techniques, Tutorials, Layouts

Customized Displays for Multiple Media Types


One of the benefits of using CSS is that you can create different style sheets for different types of devices and then link to multiple style sheets that use the media attribute to identify those devices. Currently, the W3C recommendation includes the following list as recognized media descriptors:

  • Screen: Intended for standard computer screens.

  • TTY: Intended for media, such as teletypes, terminals, or portable devices with limited display capabilities.

  • TV: Intended for television-type devices such as MSN TV.

  • Projection: Intended for projectors.

  • Handheld: Intended for handheld devices such as PDAs.

  • Print: Intended for printed documents and for display using the Print Preview command.

  • Braille: Intended for braille-based feedback devices.

  • Aural: Intended for text readers/speech synthesizers.

  • All: Suitable for all devices.

The following are examples of media attributes used in the CSS link in the HEAD of an HTML document:





Using the above CSS links as an example, the screen-optimized style sheet (screen.css) contains all of the styles that are applied when the page is viewed on a computer screen. The print-optimized style sheet (print.css) might hide the navigation bars and banner ads and set the margins to fit on a print page, so the elements that work on a screen but clutter the printed page can be omitted. The handheld-optimized style sheet (mobile.css) might use a one-column format instead of a three-column format and use images optimized for a smaller screen.

You can then link to each of these style sheets in the same page just as you would link a standard style sheet, making sure that the media attribute is included in each sheet and that the correct style sheet for each media is referenced. The media attribute does the work of identifying what device is being used to access the site, and subsequently which style sheet to apply.

1   2   3   4   5   6   7


Verilənlər bazası müəlliflik hüququ ilə müdafiə olunur ©atelim.com 2016
rəhbərliyinə müraciət