Most of our designers are still building websites in a way that uses traditional table layouts, with a mix of performance and structure. Learning how to use XHTML+CSS requires a process that makes existing sites compliant with site standards and impossible to one step. The best way to do this is to step-by-step to achieve the goal of fully complying with site standards. If you are a novice, or are not familiar with the code, you can follow standard editing tools, such as Dreamweaver MX 2004, which is currently the most complete tool to support CSS standards.
1. Primary improvement
Add the correct DOCTYPE to the page
Many designers and developers don't know what Doctype,doctype is for. DOCTYPE is a shorthand for document type. It is used primarily to illustrate what version of XHTML or HTML you are using. The browser interprets the page code according to the DTD (document type definition) you doctype define. So, if you don't pay attention to setting the wrong doctype, the result will be a surprise to you. XHTML1.0 offers three types of doctype to choose from:
(1) Transition type (transitional)
(2) strict type (Strict)
(3) frame type (Frameset)
For our primary improvement, it is possible to choose a transitional type of declaration. It can still be compatible with your form layout, performance logo, etc., so that you do not feel too much change, difficult to master.
TIP: You are too lazy to enter the above transitional code, you can access the http://www.macromedia.com/site's homepage, and then view the source code, the head area of the same code copy paste it.
Set a namespace (Namespace)
Add the following code directly after the DOCTYPE declaration:
A namespace is a detailed dtd,namespace declaration that collects element types and attribute names, allowing you to identify your namespace by pointing to an online address. Just enter the code so you can.
Declare your coding language
All XHTML documents must declare the encoding language in which they are used in order to be interpreted correctly by the browser and through identity checks. The code is as follows:
The coding language stated here is the 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 capitalization, so XHTML is also case-insensitive. All XHTML elements and attributes must have a lowercase name. Otherwise, your document will be verified as invalid. For example, the following code is not correct:
<title>Company Profile</title>
The correct wording is:
<title>Company Profile</title>The same,
Change into
, change to wait. This step is easy to convert.
Add an alt attribute to a picture
Adds an alt attribute to all pictures. The ALT attribute specifies that alternate text is displayed when the picture cannot be displayed, which is not necessary for normal users, but is essential for plain text browsers and users who use screen readers. Only the Alt attribute is added, the code will be passed by the correctness check. Note that we want to add a meaningful alt attribute, which is meaningless as follows:
The correct wording:
Quotation marks for all attribute values
In HTML, you don't need to quote attribute values, but in XHTML they must be quoted.
Example: height= "100", but not height=100.
Close all the labels
In XHTML, every open label must be closed. Just like this:
Each open label must be closed.
HTML can accept non-closed labels, and XHTML is not allowed.
This rule avoids the clutter and hassle of HTML. For example, if you do not close the image tag, there may be problems with CSS display in some browsers. This way you can make sure that the page is displayed just as you designed it. It is necessary to note that empty labels are also closed, using a forward slash "/" at the end of the label to close themselves. For example:
After the above seven rules are processed, the page basically conforms to the requirements of XHTML1.0. But we also need to check if it really meets the standard. We can provide free calibration service (http://validator.w3.org/). Modify the errors once they are found. In the list of resources that follow, we also provide additional validation services and URLs that guide validation, which can be supplemented by the Web-site verification. When you finally pass the XHTML validation, congratulations have taken a big step toward website standards. It's not that hard to imagine!
2. Intermediate improvement
Then our improvement is mainly in the separation of structure and performance, this step is not as easy as the first step, we need the change of concept, and the study and application of CSS2 technology. But it takes some time to learn any new knowledge, doesn't it? The trick is to learn while doing. If you've been using a tabular layout, you don't have to use CSS at all, and you don't have to say goodbye to table layouts, you can use style sheets instead of font tags first. The more you learn, the more you can do. OK, let's see what we need to do:
Defining an element's appearance with CSS
We have developed a habit of writing logos when we want the font to be bigger., and I want to put a dot symbol in front of it.
。 We always think < h1> mean big,The means a dot, and means "bold text." In fact, it can become anything you want, through CSS, can become a small font, Text can become huge, bold,
can become a picture and so on. We cannot force the performance of structural elements, we should use CSS to determine the appearance of those elements. For example, we can make the original default level 6 header look the same size:
H1, H2, H3, H4, H5, h6{font-family: Arial, serif; font-size:12px;}
Use structured elements instead of 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 list of contents might use the following identity:
Sentence one
sentence two
sentence three
If we take an unordered list instead it would be better:
- sentence one
li> sentence Two
- sentence three
you might say, "But shows a dot, I don't want to use dots." In fact, CSS does not have a set element to look like, you can completely turn off the dots with CSS.
Add an ID to each table and form
give the table or form a unique, structured tag, for example
