Most of our designers are still using traditional table layouts to express websites with mixed structures. Learning to use XHTML CSS requires a process that makes existing websites in accordance with the website standards. The best way is to gradually enter, staged to gradually meet the target of the website standard. If you are a newbie, or is not very familiar with the code, you can also use the standard editing tool, such as Dreamweaver MX 2004, which is currently supporting the most complete tool for CSS standards.
1. Primary improvement
Add the right DOCTYPE to the page
Many designers and developers don't know what is doctype, what is used by doctype. DOCTYPE is the discument type's shorthand. Mainly used to explain what version you use XHTML or HTML. The browser explains the page code based on your DTD defined by your DOCTYPE. So, if you don't pay attention to setting the wrong Doctype, the result will make you very shocked. XHTML1.0 provides three DOCTYPE options:
(1) Transitional
(2) Strict profile (strict)
(3) Frameset
For our primary improvement, as long as you choose a transitional statement. It can still be compatible with your form layout, express identity, etc., not allowing you to think too much, it is difficult to master.
Tip: You are too lazy to enter the above transitional code, you can access the home page of http://www.macromedia.com/ website, then view the source code, copy the same code as the HEAD area to paste it.
Set a namespace (Namespace)
Add the following code directly behind the DOCTYPE statement:
A NameSpace is a detailed DTD for collecting element types and attribute names, and the Namespace declaration allows you to identify your namespace via an online address. Just simply input the code.
Declare your coding language
In order to be properly interpreted and by identifying the check by the browser, all XHTML documents must declare the coding languages they are using. code show as below:
The coding language that is declared here is Simplified Chinese GB2312, and if you need to make traditional content, you can define as BIG5.
Write all labels with lowercase letters
XML is sensitive to case sensitive, so XHTML is also different from cases. All XHTML elements and properties must be written. Otherwise your document will be considered invalid by the W3C check. For example, the following code is incorrect:
The correct way of writing is:
is changed to
, to change to and so on. This conversion is simple.
Add a Alt property for the image
Add a Alt property to all images. The Alt property specifies that the replacement text is displayed when the picture cannot be displayed, so that the normal user can have no, but it is critical to the plain text browser and the user using the screen reader. Only the ALT property is added, the code will be passed by the W3C correctness. Note that we have to add meaningful ALT properties, which is meaningless:
Correct way:
Give all attribute values plus quotes
In HTML, you don't need to add quotes to attribute values, but in XHTML, they must be an extension.
Example: Height = "100" instead of Height = 100.
Close all labels
In XHTML, each open tag must be turned off. Just like this:
Every open tag must be turned off. p>
HTML can accept the non-closed standard, XHTML is not. b>
This rule can avoid HTML chaos and trouble. For example: if you don't close the image tag, a CSS display problem may occur in some browsers. Use this method to ensure that the page is displayed as you design. It should be noted that the empty tag is also turned off, and a positive slash "/" is used in the tail of the tab. E.g:
After the above seven rules are processed, the page is basically in line with XHTML1.0 requirements. But we also need to verify that it is really in line with the standard. We can use W3C to provide free verification services (http://validator.w3.org/). Improve the error after the error is found. In the list of resource lists, we also provide additional verification services and the URL for the verification, which can be supplemented as a W3C check. When I finally passed the XHTML verification, I congratulated you have taken a big step to the website standard. It's not that difficulty imagined!
2. Intermediate improvement
Next, our improvements are mainly separated by structures and performance, which is not easy to implement in the first step, and we need to transform on the concept, and the learning and application of CSS2 technology. But learning any new knowledge requires some time, isn't it? The trick is to do while doing. If you have been using the form layout, I haven't used CSS at all, nor I have to hurry to say goodbye to the form layout, you can use the style sheet to replace the Font label. As you have learned, the more you can do. Ok, let's take a look at what we need to do:
Define elementality with CSS
We have developed habits when writing logo, when you want the font to use
text can become huge, bold,
Use structured elements to replace meaningless garbage
Many people may never know that HTML and XHTML element design is intended to express structures. Many of us have become accustomed to control performance with elements, not structures. For example, a list of content may use the following identity:
Sentence 1
sentences 2
sentences three
If we use a unordered list, it will be better:
You may say "But
Add Id to each table and form
Give a form or form a unique, structured tag, for example