How to improve your existing website_CSS/HTML

Most of our designers are still using the traditional table layout, presentation and structure mixed together to build websites. Learning how to use XHTML+CSS requires a process, and making an existing website comply with website standards cannot be done in one step. The best approach is to proceed step by step and in stages to achieve the goal of fully complying with website standards. If you are a novice or not very familiar with code, you can also use standards-compliant editing tools, such as Dreamweaver MX 2004, which is currently the most complete tool that supports CSS standards.

1． Primary improvements
Add the correct DOCTYPE to the page
Many designers and developers don’t know what DOCTYPE is and what it is used for. DOCTYPE is the abbreviation of document type. Mainly used to indicate what version of XHTML or HTML you are using. The browser interprets the page code according to the DTD (Document Type Definition) defined by your DOCTYPE. So, if you accidentally set the wrong DOCTYPE, the results will surprise you. XHTML1.0 provides three DOCTYPE options:

(1) Transitional

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
(2) Strict

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
(3) Frameset

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
For our primary improvement, we only need to use a transitional statement. It can still be compatible with your table layout, performance logos, etc., so that you won’t feel that the changes are too big and difficult to master.

Tip: If you are too lazy to enter the transition code above, you can visit the homepage of the http://www.macromedia.com/ website, then view the source code, and copy and paste the same code in the head area.

Set a namespace (Namespace)
Add the following code directly after the DOCTYPE statement:


A namespace is a detailed collection of element types and attribute names DTD, namespace declaration allows you to identify your namespace by pointing to an online address. Just enter the code as usual.

Declare your encoding language
In order to be correctly interpreted by browsers and pass markup validation, all XHTML documents must declare the encoding language they use. The code is as follows:


The coding language declared here is Simplified Chinese GB2312. If you need to produce Traditional Chinese content, you can define it as BIG5.

Write all tags in lowercase letters
XML is case-sensitive, so XHTML is also case-sensitive. All XHTML element and attribute names must be lowercase. Otherwise your document will be considered invalid by W3C validation. For example, the following code is incorrect:

The correct way to write it is:

Likewise,

is changed to

, is changed to , etc. This conversion step is simple.
Add alt attribute to images
Add alt attribute to all images. The alt attribute specifies that replacement text is displayed when the image cannot be displayed. This is dispensable for normal users, but it is crucial for text-only browsers and users using screen readers. Only when the alt attribute is added will the code pass the W3C correctness check. Note that we need to add meaningful alt attributes. Writing like the following is meaningless:


Correct writing:


Give Quote all attribute values ​​
In HTML, you do not need to quote attribute values, but in XHTML, they must be quoted.

Example: style="max-width:90%", not height=100.

Close all tags
In XHTML, every open tag must be closed. Like this:

Every open tab must be closed.

HTML can accept unclosed tags, but XHTML cannot.
This rule can avoid the confusion and trouble of HTML. For example: If you don't close the image tag, you may have CSS display issues in some browsers. Use this method to ensure that the page appears as you designed it. It should be noted that empty tags must also be closed. Use a forward slash "/" at the end of the tag to close themselves. For example:



After being processed by the above seven rules, the page will basically comply with the requirements of XHTML1.0. But we still need to verify whether it really meets the standards. We can use W3C to provide free validation services (http://validator.w3.org/). Fix the errors one by one after discovering them. In the following resource list, we also provide other verification services and URLs that provide guidance on verification, which can be used as a supplement to W3C verification. When you finally pass the XHTML validation, congratulations, you have taken a big step toward website standards. It's not as difficult as you think!

2． Intermediate improvement
The next improvement we will make is mainly in the separation of structure and performance. This step is not as easy to achieve as the first step. We need a change in concept, as well as the learning and application of CSS2 technology. But learning anything new takes time, right? The trick is to learn by doing. If you have always used table layout and have never used CSS at all, there is no need to rush to say goodbye to table layout. You can first replace the font tag with a style sheet. As you learn more, you can do more. Okay, let’s take a look at what we need to do:

Use CSS to define the appearance of elements
We have developed a habit when writing logos. When we want the font to be larger, we use

, hoping it is in front To add a dot symbol, use

. We always think of meaning big,

meaning dot, and meaning “bold text”. In fact,

can be turned into anything you want. Through CSS,

can be turned into a small font,

text can be turned into a huge and bold text, and

can be turned into A picture and so on. We can't force structural elements to achieve presentation, we should use CSS to determine the appearance of those elements. For example, we can make the original default 6-level headings look the same size:

h1, h2, h3, h4, h5, h6{ font-family: 宋体, serif; font-size: 12px; }
Replace meaningless garbage with structured elements
Many people may never know that HTML and XHTML elements are designed to express structure. Many of us have grown accustomed to using elements to control presentation, rather than structure. For example, a list content may use the following tags:

Sentence one
Sentence two
Sentence three

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

• Sentence 1
• Sentence 2
• Sentence 3

You may say "But

shows A dot, I don’t want to use a dot.” In fact, CSS does not specify how an element looks. You can turn off the dots using CSS.

Add an id to each table and form
Give the table or form a unique, structural tag, such as


Next, in the writing style When creating a table, you can create a "menu" selector and associate it with a CSS rule that tells table cells, text labels, and all other elements how to display. In this way, there is no need to attach some redundant, bandwidth-consuming presentation layer attributes such as height, width, alignment, background color, etc. to each %lt;td> tag. With just an attached tag (the id tag of the "menu" tag), you can perform ad-hoc presentation processing for clean, compact code markup within a separate stylesheet.

Intermediate Improvement We will list the main three points here first, but it contains a lot of content and knowledge points, which we need to learn and master step by step until we finally achieve the layout using CSS completely without using any tables.