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 one-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 also 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 do not know what is doctype,doctype. DOCTYPE is the 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:
(1) Transition type (transitional)
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
(2) strict type (Strict)
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
(3) 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:
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 code 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= "text/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 verification of the consortium. For example, the following code is not correct:
<TITLE> Company Profile </TITLE>
The correct wording is:
<title> Company Profile </title> the same,<p> change to <p>,<B> to <b> and so on. This is a simple transition.
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:
The correct wording:
Quote 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", but not height=100.
Turn off all the labels
In XHTML, each open label must be closed. Just like this:
<p> each open label must be closed. </p> <b>html can accept bids that are not closed, XHTML is not allowed. </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. In this way you can make sure 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/>
After the above seven rules processing, the page basically conforms to the XHTML1.0 request. But we also need to check to see if it really fits the standard. We can use the consortium to provide free calibration services (http://validator.w3.org/). Change the error after discovering it. In the following list of resources we also provide additional validation services and a guide to the validation of the Web site, which can be used as a complement to the verification of the www. When you finally pass the XHTML validation, congratulations you have made a big step towards the site standard. It's not as hard as it's supposed to be!
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:
Defining the appearance of elements with CSS
We have developed the habit of writing the logo, when we want to use the
H1, H2, H3, H4, H5, h6{font-family: XXFarEastFont-Arial, serif; font-size:12px;
Replacing meaningless rubbish with structured elements
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:
Sentence one <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.
Add an ID to each table and form
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 attach some extra, bandwidth, alignment, and background colors to each%lt;td> tag, and so on. 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.
