How to improve existing websites most of our designers are still building websites in the form of a traditional layout, mixed performance and structure. Learning to use XHTML + CSS requires a process that makes it impossible for existing websites to comply with website standards in one step. The best way is to gradually achieve the goal of fully complying with website standards in stages. If you are a newbie or not familiar with the code, you can also use a standard-compliant editing tool, such as Dreamweaver MX 2004, which is currently the most complete tool supporting CSS standards.
1. Primary Improvement
Add the correct DOCTYPE to the page
Many designers and developers do not know what DOCTYPE is, what is the use of DOCTYPE. DOCTYPE is short for document type. It is mainly used to describe the XHTML or HTML version you are using. The browser interprets the Page code based on the DTD defined by DOCTYPE (document type definition. Therefore, if you do not pay attention to setting the wrong DOCTYPE, the result will surprise you. XHTML1.0 provides three DOCTYPE options:
(1) Transition type (Transitional)
(2) Strict)
(3) Framework (Frameset)
For our initial improvement, we only need to choose a transitional declaration. It is still compatible with your table layout and presentation logo, so that you do not feel that the changes are too great and difficult to grasp.
Tip: If you are too lazy to enter the above transitional code, you can visit the first page of http://www.macromedia.com/website. Then you can paste the source code with the same header code.
Set a 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. Just enter the code.
Declare your encoding Language
All XHTML documents must declare the encoding languages they use in order to be correctly interpreted and validated by the browser. The Code is as follows:
The encoding language declared here is simplified Chinese GB2312. If you need to make traditional Chinese content, you can define it as BIG5.
Write All tags in lowercase letters
XML is case sensitive. Therefore, XHTML is also case sensitive. The names of all XHTML elements and attributes must be in lower case. Otherwise, your document will be considered invalid by W3C validation. For example, the following code is incorrect:
Company Profile
The correct statement is as follows:
Company ProfileSimilarly,
Change
,ChangeAnd so on. This step is simple.
Add the alt attribute to the image
Add the alt attribute to all images. The alt attribute specifies that the text will be displayed for replacement when the image cannot be displayed. This is dispensable for normal users. However, it is vital for users of a text browser and a screen reader. Only when the alt attribute is added will the code pass the W3C correctness verification. Note that we need to add a meaningful alt attribute. it is meaningless to write a statement like the following:
Correct syntax:
Quote all attribute values
In HTML, you do not need to enclose attribute values in quotation marks, but in XHTML, they must be enclosed in quotation marks.
For example, height = "100", but not height = 100.
Close all labels
In XHTML, each opened tag must be closed. Like this:
Each opened tag must be disabled.
HTML can accept non-closed labels, but XHTML cannot.
This rule can avoid HTML confusion and trouble. For example, if you do not disable image labels, CSS display may occur in some browsers. This method ensures that the page is displayed as you designed. It should be noted that empty tags should also be closed, and a forward slash "/" should be used at the end of the tag to close themselves. For example:
After the above seven rules are processed, the page basically meets the requirements of XHTML1.0. However, we also need to check whether the standards are met. We can use W3C to provide free Verification Service (http://validator.w3.org /). If an error is found, modify it one by one. In the subsequent resource list, we also provide other verification services and URL for guidance on verification, which can be used as a supplement to W3C verification. When you finally pass the XHTML verification, congratulations, you have taken a big step towards the website standard. It's not as hard as you think!
2. Intermediate Improvement
Next, we will improve the separation of structure and performance. This step is not as easy to implement as the first step. We need a conceptual change and learning and application of CSS2 technology. But it takes some time to learn any new knowledge, isn't it? The trick is to learn while learning. If you have been using the table layout all the time, you have never used CSS, and you do not have to rush to say goodbye to the table layout. You can replace the font label with a style sheet. The more you learn, the more you can do. Okay. Let's take a look at what we need to do:
Use CSS to define the element appearance
We have developed a habit when writing the logo. When we want the font to be bigger, we want to add a dot symbol before it.. We always think that It means a dot,It means "bold text ". In fact, it can become anything you want, and through CSS, it can become a small font,The text can be huge and bold,
Can be converted into an image. We cannot force the use of structural elements to achieve performance. We should use CSS to determine the appearance of those elements. For example, we can make the default level 6 Title look the same size:
H1, h2, h3, h4, h5, h6 {font-family:, serif; font-size: 12px ;}
Replace meaningless garbage with structured elements
Many may never know that HTML and XHTML elements are designed to express structures. Many of us are used to controlling performance with elements instead of structures. For example, a list may use the following identifier:
Sentence 1
Sentence 2
Sentence 3
It would be better if we use an unordered list instead:
- Sentence 1
- Sentence 2
- Sentence 3
You may say,"It shows a dot. I don't want to use a dot ". In fact, CSS does not set what the elements look like. You can use CSS to turn off the dots.
Add id to each table and form
Assign a unique, structured tag to a table or form, for example
Next, when writing a style sheet, you can create a menu selector and associate it with a CSS rule, it is used to show table cells, text labels, and all other elements. In this way, you do not need to attach extra attributes such as height, width, alignment, and background color to each % lt; td> label. Only one attached tag (id tag marked with "menu") is required ), you can perform special presentation layer processing for clean and compact code tags in a separated style sheet.We have three main points to improve the intermediate level. However, there are many content and knowledge points, which need to be learned and mastered step by step, the layout will not be implemented using any table until the final implementation fully adopts CSS.
