How to improve the existing website to xhtml+CSS structure

Author：Eve Cole Update Time：2025-02-08 14:12:02

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 standard-compliant editing tools, such as Dreamweaver MX 2004, which is currently the most complete tool that supports CSS standards.

1. primary improvement

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

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>

(2) 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, 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 above transitional code, 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 declaration:

A namespace is a detailed DTD that collects element types and attribute names. The namespace declaration allows you to identify your namespace through an online address pointer. Just enter the code as usual.

Declare your coding 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 labels 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:

<TITLE>Company Profile</TITLE>

The correct way to write it is:

<title>Company Profile</title> Similarly, change <P> to <p>, <B> to <b>, etc. This conversion step is simple.

Add alt attribute to image

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 a meaningful alt attribute. It is meaningless to write it like this:

Correct way to write:

Quote all attribute values

In HTML, you don't need to quote attribute values, but in XHTML, they must be quoted.

Example: height=100, not height=100.

Close all tabs

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

<p>Every open tab must be closed. </p> <b>HTML can accept unclosed tags, but XHTML cannot. </b>

This rule can avoid HTML confusion and trouble. 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 basically meets 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

Our next improvement 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:

Define the appearance of elements with CSS

We have developed a habit when writing logos. When we want the font to be larger, we use <h1>, and when we want to add a dot symbol in front, we use <li>. We always think of <h1> as big, <li> as dots, and <b> as "bold text." In fact, <h1> can become anything you want. Through CSS, <h1> can become a small font, <p> text can become huge and bold, and <li> can become 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 level 6 headings look the same size:

h1, h2, h3, h4, h5, h6{ font-family: 宋体, serif; font-size: 12px; }

Replace meaningless junk with structured elements

Many people may have never known that HTML and XHTML elements were designed to express structure. Many of us have grown accustomed to using elements to control presentation, rather than structure. For example, a list might be marked like this:

Sentence 1<br /> Sentence 2<br /> Sentence 3<br />

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

<ul> <li>Sentence 1</li> <li>Sentence 2</li> <li>Sentence 3</li> </ul>

You might say, "But <li> displays a dot, and 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 id to each table and form

Give a table or form a unique, structural markup, e.g.

Next, when writing the style sheet, 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, and background color to each <td> tag. With just an attached tag (the id tag tagging "menu"), you can perform ad-hoc presentation processing for clean, compact code markup within a separate stylesheet.

For intermediate improvements, 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.