Standardization of website Design (II.)

Intermediary transaction SEO diagnosis Taobao guest Cloud host technology Hall

Two． What is a website standard

Web site standards are not a standard, but a set of standards. The Web page consists mainly of three parts: structure (businessesflat-out), performance (presentation) and behavior (Behavior). The corresponding standard is divided into three aspects: the structured standard language mainly includes XHTML and XML, the performance standard language mainly includes the CSS, the behavior standard mainly includes the object model (such as the ECMAScript), and so on. Most of these standards are drafted and published by the consortium, as well as standards developed by other standards organizations, such as the Association standard for ECMA (European Computer manufacturers ECMAScript). Let's take a quick look at these standards:

1. Structure Standard language

(1) XML

XML is shorthand for the extensible Markup Language (extensible Identification language). It is currently recommended to follow the XML1.0, a reference (WWW.W3.ORG/TR/2000/REC-XML-20001006) published by the Consortium on October 6, 2000. Like HTML, XML comes from SGML, but XML is a language that defines other languages. The original design of XML was designed to make up for the lack of HTML, to meet the need of network information release with powerful extensibility, and later to be used to transform and describe the network data. About the benefits of XML and Technical specification details here is not much to say, the internet has a lot of information, there are many books can refer to.

(2) XHTML

XHTML is the abbreviation for the extensible Hypertext Markup Language Extensible Identification language. Currently recommended to follow is the XML1.0 (reference HTTP://WWW.W3.ORG/TR/XHTML1) recommended by the consortium on January 26, 2000. XML is a powerful alternative to HTML, but it is too early to use XML directly in the face of thousands of existing sites. So, on the basis of HTML4.0, we extend it with XML rules and get XHTML. Simply put, the purpose of creating XHTML is to implement the transition from HTML to XML.

2. Performance Standard language

CSS is the abbreviation for cascading style sheets cascading style sheets. Currently recommended to follow is the CSS2 (reference http://www.w3.org/TR/CSS2/) recommended by the consortium on May 12, 1998. The goal of creating CSS standards for the consortium is to replace HTML tabular layouts, frames, and other expressive languages with CSS. The combination of pure CSS layout and structured XHTML can help designers separate appearance and structure, making site access and maintenance easier.

3. Standards of Conduct

(1) DOM

DOM is an abbreviation of the Document Object model. According to the http://www.w3.org/DOM/, Dom is an interface with browsers, platforms, and languages, allowing you to access other standard components of the page. Simply understood, Dom solves the conflict between netscaped JavaScript and Microsoft JScript, giving web designers and developers a standard way to access data, scripts, and presentation layers in their sites.

(2) ECMAScript

ECMAScript is a standard scripting language (JAVASCRIPT) developed by ECMA (European Computer Manufacturers Association). Currently recommended to follow is ECMAScript 262 (Http://www.ecma.ch/ecma1/STAND/ECMA-262.HTM).

Three． The difference between a standard website and a traditional website

The traditional web site is just an extension of the print media, designed to ensure that it looks the same in 4-6 major browser versions. The usual characteristics are:

layout based on table.


content is mixed with the way it behaves. A typical example is the <font> label.


Garbage Code (nonstandard code).


code that is not easy to use.


Semantically incorrect code. For example <b> do not explain, you do not understand this is the meaning of font bold.

The website established by the standard of Web site is a wide range of communication tools that can accept all kinds of users and equipments. General features are:

semantically correct identification. Even with labels that can express meaning. The guarantee code can be understood correctly in the text browser, PDAs, search engine.


correctly valid code. The correct code is through the http://validator.w3.org/code checksum.


code that is easy to use for both people and machines. Able to receive extensive user and equipment access,


uses CSS to separate the presentation layer from the content. Make your code simpler, faster to download, and easier to bulk modify and customize your presentation.

Four． Advantages and disadvantages of using website standards

1. Benefits

Benefits to Web surfers:

File download and page display faster;


content can be accessed by more users (including those with disabilities such as blindness, visual weakness, color blindness);


content can be accessed by a wider range of devices (including screen readers, handheld devices, search bots, printers, refrigerators, etc.)


users can customize their performance interface through style selection


All pages can provide a version that is suitable for printing

Benefits to Site Owners:

less code and components, easy to maintain

Lower
bandwidth requirements (simpler code) and lower cost. For example: When ESPN.com uses CSS, it saves more than two megabytes (terabytes) of bandwidth per day.


is more likely to be searched by search engines to


revision is convenient, do not need to change page content


to provide a printed version without copying content


Improve the usability of the website. In the United States, there are strict legal provisions (Section 508) to constrain government websites to a certain degree of ease, and other countries have similar requirements.

2. Shortcomings

need to spend more time learning standard


still need to be aware of browser compatibility issues


using CSS to achieve some performance is more troublesome than a table

Five． How to improve your existing website

Most of our designers are still using a traditional form layout, a mix of performance and structure to build the site. Learning how to use XHTML+CSS requires a process that allows existing sites to conform to site standards and is unlikely to be step. The best approach is to step through the steps to achieve the goal of fully complying with the site standards. If you're new to the code, or you're not familiar with it, you can use a standard editing tool, such as Dreamweaver MX 2004, which is currently the most sophisticated tool for supporting CSS standards.

1. Primary improvement

Add the correct DOCTYPE to the page

Many designers and developers don't know what Doctype,doctype is. DOCTYPE

is shorthand for document type. It is mainly used to illustrate what kind of XHTML or HTML version you are using. The browser interprets the page code based on your DOCTYPE defined DTD (document type definition). So, if you don't pay attention to setting the wrong doctype, the result will be a surprise to you. The XHTML1.0 offers three kinds of doctype to choose from:

Transition Type (Transitional)

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en"

"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

Strict type (Strict)

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en"

"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >

Frame Type (Frameset)

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 frameset//en"

"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd" >

For our primary improvement, just use the transition type statement. It still can be compatible with your table layout, performance identification, etc., so that you do not feel too much change, difficult to grasp.

TIP: You do not bother to enter the above transition code, you can visit the homepage of the http://www.macromedia.com/website, and then look at the source code, the head area the same code copy paste on it.

set a name space (Namespace)

Add the following code directly after the DOCTYPE declaration:

<html xmlns= "http://www.w3.org/1999/xhtml" >

A namespace is a detailed Dtd,namespace declaration that collects the element type and attribute name to allow you to identify your namespace by an online address point. Just enter the code as you like.

declare your coding language

All XHTML documents must declare the encoding language they use in order to be properly interpreted by the browser and validated by identity. The code is as follows:

<meta http-equiv= "Content-type" content= "HTML; charset=gb2312 "/>

The coding language stated here is Simplified Chinese GB2312, which you can define as BIG5 if you need to make traditional content.

Write all the labels in lowercase letters

XML is sensitive to case, so XHTML is also different in capitalization. All XHTML elements and attributes must be named with lowercase. Otherwise your document will be considered invalid by the consortium. For example, the following code is incorrect:

<TITLE> Company Profile </TITLE>

The correct wording is:

<title> Company Profile </title>

The same,<p> are changed to <p>,<B> <b> and so on. This transition is simple.

add an alt attribute to a picture

Adds an alt attribute to all pictures. The ALT attribute specifies that when the picture cannot be displayed, it is displayed for alternate text, which is optional for normal users, but is essential for plain text browsers and users who use screen readers. Only by adding the ALT attribute will the code be passed by the correct checksum of the consortium. Note that we want to add a meaningful alt attribute, which is meaningless as follows:

<img src= "Logo_unc_120x30.gif" alt= "Logo_unc_120x30.gif" >

Correct wording:

<img src= "logo_unc_120x30.gif" alt= "UNC logo, click Back Home" >

quotes all attribute values

In HTML, you may not need to enclose attribute values in quotes, but in XHTML they must be quoted.

Example: height= "100", not height=100.

Close all Tags

In XHTML, each open label must be closed. Like this:

<p> each open label must be closed. </p>

<b>html can accept bids that are not closed, XHTML cannot. </b>

This rule avoids the confusion and hassle of HTML. For example: If you do not close the image tag, in some browsers may appear CSS display problems. This way you can ensure that the page is displayed as you designed it. What needs to be explained is that the empty label also closes, using a forward slash "/" at the end of the tag to close themselves. For example:

<br/>

<img src= "Webstandards.gif"/>

2. Intermediate improvement

Then our improvement is mainly in the structure and performance of the separation, this step is not as easy as the first step to achieve, we need to change the concept, as well as the learning and application of CSS2 technology. But it takes a little time to learn any new knowledge, doesn't it? The trick is to learn while doing. If you've been using a table layout, you never used CSS, and you don't have to say goodbye to the table layout, you can use the stylesheet instead of the font label. The more you learn, the more you can do. Okay, let's take a look at what we need to do:

define element appearance with CSS

We have developed the habit of writing the logo, when we want to use the <h1> font, we want to add a point symbol in the front of the <li>. We always think <h1> means big,<li> mean dot,<b> mean "bold text". In fact, <h1> can become anything you want, by css,<h1> can become a small font,<p> text can become a huge, bold,<li> can become a picture and so on. We cannot force architectural elements to implement performance effects, and we should use CSS to determine the appearance of those elements. For example, we can make the original 6-level header look the same size as the default:

H1, H2, H3, H4, H5, h6{

Font-family: Song body, serif;

font-size:12px;

}

uses structural elements to replace meaningless garbage

Many people may never know that HTML and XHTML elements are designed to express structures. Many of us are accustomed to using elements to control performance, not structure. For example, a section of the list might use the following identifier:

Sentences a <br/>

Sentence two <br/>

Sentence three <br/>

It would be better if we used an unordered list instead:

<ul>

<li> sentence one </li>

<li> sentence two </li>

<li> sentence three </li>

</ul>

You might say, "but <li> shows a dot, I don't want to use dots." In fact, CSS does not set what the elements look like, you can completely use CSS to turn off the dots.

each table and form with an ID

Give a table or form a unique, structured tag, such as

<table id= "Menu" >

Next, when you write a stylesheet, you can create a "menu" selector and associate a CSS rule that tells the table cell, text label, and all other elements how to display it. In this way, you do not need to include some extra, bandwidth, alignment, and background colors on each <td> label. With just one attached tag (the ID tag for "menu"), you can perform a special presentation layer for clean, compact code tags in a separate stylesheet.

Intermediate improvement Here we first list the main three points, but it contains a lot of content and knowledge, we need to gradually learn and master, until the final implementation of the full adoption of CSS and no table to achieve layout. Limited to this article is to guide the meaning of promotion, do not expand the details.

Finally, we specifically need to add the site's ease of use (accessibility) and interactive design improvements, usability and site standards are closely related to the standard, and the same as the site standards, are to make our site to accept more users access. The 1990 consortium established the Web Accessibility Initiative (WAI) to provide Web site builders with methods and strategies to implement accessibility (http://www.w3.org/WAI/GL/). Improved usability and research interaction Design (the recommendation of the father of VB, Alan Cooper's about Face2.0) strategy can improve your development technology, broaden your horizons. Improve your value as a professional web designer to make you more competitive. This is exactly what every site owner and every designer or developer is trying to achieve.

Six． Web site Standard Resources

1. Website Standard

http://www.zeldman.com/

http://webstandards.org/

http://webstandardsgroup.org/

http://www.nypl.org/styleguide/

2. Have semantic code

Http://brainstormsandraves.com/articles/semantics/structure/

3. Checksum (Validation)

http://validator.w3.org/

http://www.htmlhelp.com/tools/validator/

Http://webboy.net/presentation/validation.cfm

4. Ease of use (accessibility)

http://www.joeclark.org/

http://www.accessify.com/

http://www.juicystudio.com/

5. Style sheet CSS

Http://webboy.net/presentation/ict2004/01.htm

Http://webboy.net/presentation/ict2004/02.htm

Http://webboy.net/presentation/ict2004/03.htm

http://westciv.com/style_master/academy/css_tutorial/

http://css.maxdesign.com.au

http://www.thenoodleincident.com/tutorials/css/

6. Instance site (XHTML+CSS)

http://www.macromedia.com/

Http://www.k10k.net

http://www.fyrebase.com/

http://www.onetruefit.com/

http://pixeltable.com/

http://www.fishmarketing.net/

Attached． Reference articles and websites

Jeffrey Zeldman (www.zeldman.com) works "Design with WEB standards", the book has been introduced by the electronic industry publishing house, will be issued in Chinese version.


Max Design article: "The benefits of WEB standards to your visitors, your clients and you!" Presentation/benefits/index.htm


Mark Pilgrim "Dive into accessibility" http://diveintoaccessibility.org


website Standard Organization www.webstandards.org


website Standard Group www.webstandardsgroup.org