How to use CSS for web page layout

Day 1: What kind of DOCTYPE to choose

Preface

Hi everyone! This series of articles is written based on Ajie's own process of creating the w3cn.org site. Ajie has never produced a website that truly complies with web standards before. Now I am making reference to foreign materials and recording my thoughts and experiences in the process. I hope it will be helpful to everyone. Okay, let's get started.

The first day

Start making a site that meets standards. The first thing to do is to declare the DOCTYPE that meets your needs.

Look at the original code of the homepage of this site, you can see that the first line is:



Open some sites that meet standards, such as the famous web design software developer Macromedia and the personal design master Zeldman website, you will find the same code. The code for other standards-compliant sites (such as k10k.net) is as follows:



So what do these codes mean? Does it have to be placed?

What is DOCTYPE

We call the above codes a DOCTYPE statement. DOCTYPE is the abbreviation of document type and is used to indicate what version of XHTML or HTML you are using.

The DTD (such as xhtml1-transitional.dtd in the above example) is called the document type definition, which contains the rules of the document. The browser will interpret the identity of your page based on the DTD you define and display it. come out.

To build a standards-compliant web page, the DOCTYPE declaration is an essential and critical component; unless your XHTML determines a correct DOCTYPE, neither your logo nor your CSS will take effect.

XHTML 1.0 provides three DTD declarations to choose from:

Transitional (Transitional): A DTD with very loose requirements, which allows you to continue to use the HTML4.01 identifier (but must comply with xhtml writing method). The complete code is as follows:



Strict: For strict DTD, you cannot use any presentation layer identifiers and attributes, such as
. The complete code is as follows:



Frameset: A DTD specifically designed for frame pages. If your page contains a frame, you need to use this DTD. The complete code is as follows:


WHAT DOCTYPE DO WE CHOOSE

The ideal situation is of course a strict DTD, but for most of us designers who are new to web standards, Transitional DTD (XHTML 1.0 Transitional) is currently the ideal choice (including this site, which also uses transitional DTD). Because this DTD also allows us to use presentation layer identifiers, elements and attributes, it is also easier to pass W3C code verification.

Note: The "identification and attributes of the presentation layer" mentioned above refer to those tags used purely to control performance, such as tables for typesetting, background color identification, etc. In XHTML, tags are used to represent structures, not to achieve presentation. The purpose of our transition is to ultimately separate data and presentation.

For example: a mannequin changes clothes. The model is like data, and the clothes are the form of expression. The model and the clothes are separated, so you can change clothes at will. In the original HTML4, data and presentation were mixed together, and it was very difficult to change the presentation form at once. Haha, it's a bit abstract. This concept needs to be gradually understood during the application process.

Supplement

The DOCTYPE declaration must be placed at the top of every XHTML document, above all code and markup.

For more details, please visit the W3C website

Day 2: What is a namespace

After the DOCTYPE is declared, the next code is:



Usually our HTML4.0 code is just , what is "xmlns" here?

This "xmlns" is the abbreviation of XHTML namespace, which is called the "namespace" statement. What is the role of namespace? Ajie's own understanding is:

Since xml allows you to define your own logo, the logo you define may be the same as the logo defined by others, but have different meanings. Errors can easily occur when files are exchanged or shared. To avoid this error, XML uses namespace declarations, which allow you to identify your identity through a URL pointing to it. For example:

Both Xiao Wang and Xiao Li have defined a identifier. If Xiao Wang's name space is "http://www.xiaowang.com" and Xiao Li's name space is "http ://www.xiaoli.com", then when the two documents exchange data, the identifier will not be confused because it belongs to a different name space.

A more popular explanation is: a namespace is to mark a document to tell others who this document belongs to. It's just that this "who" is replaced by a website address.

XHTML is a markup language that transitions from HTML to XML. It needs to comply with XML document rules, so it also needs to define a namespace. And because XHTML1.0 cannot customize the logo, its namespace is the same, which is "http://www.w3.org/1999/xhtml". It doesn't matter if you don't quite understand it yet, at this stage we just need to copy the code. The lang="gb2312" after

specifies that your document should be in Simplified Chinese.

Day 3: Define the language encoding

The third step is to define your language encoding, similar to this:


In order to be correctly interpreted by browsers and pass W3C code verification, all XHTML documents must declare the encoding language they use. We generally use gb2312 (Simplified Chinese). When making multi-language pages, we may also use Unicode, ISO-8859-1, etc., which can be defined according to your needs.

Usually this definition is enough. However, it should be added that XML documents do not define language encoding in this way. XML is defined as follows:



You can see similar statements in the first line of code on the homepage of Macromedia.com. This is also the definition method recommended by W3C. So why don't we just adopt this approach? The reason is that some browsers have incomplete support for standards and cannot correctly understand such definition methods, such as IE6/windows. Therefore, under the current transition plan, we still recommend using the meta method. Of course, you can write both ways.

Looking at the source code of this website, you will find that there is one more sentence where the language encoding is defined:



This is written for older browsers to ensure that various browsers can interpret the page correctly.

Note: At the end of the above declaration statement, you see a slash "/", which is different from our previous HTML4.0 code writing. The reason is that XHTML syntax rules require that all tags must have a beginning and an end. For example,

and ,

and

, etc., for unpaired identifiers, it is required to add a space at the end of the identifier, followed by a "/". For example,
is written as
, and is written as . The reason for adding spaces is to prevent the browser from not recognizing the codes together.

Day 4: Calling style sheets

Use web standards to design websites. The transition method is mainly to use XHTML+CSS. CSS style sheets are essential. This requires all web designers to be proficient in CSS. If you have not used it before, start learning now. To create a website that complies with web standards, you cannot design beautiful pages without knowing CSS.

In fact, all aspects of performance need to be implemented with CSS. We used to use table for positioning and layout, but now we have to use p for positioning and layout. This is a change in the way of thinking, which is a bit uncomfortable at first. Haha, there will be resistance to any change. In order to enjoy the "benefits" brought by standards, it is worthwhile to give up some old traditional practices.

Externally calling style sheets

In the past, we usually used two methods to use style sheets:

Inline method on the page: that is, inserting the style sheet into the page Write it directly in the head area of

The above is the detailed content of How to use CSS for web page layout. For more information, please follow other related articles on the PHP Chinese website!