Shulou(Shulou.com)06/02 Report--

Today, I will talk to you about the example analysis of the reference specification for DIV CSS page layout development, which may not be well understood by many people. in order to make you understand better, the editor has summarized the following content for you. I hope you can get something according to this article.

Do you understand the DIV CSS page layout development reference specification, here to share with you, DIV CSS site development may have many people to cooperate, by a team to complete, which involves a lot of normative operation issues, this DIV CSS page layout specification is not only a development specification, but also a scripting language reference, but please do not change the specification at will.

DIV CSS web page layout development reference specification

DIV CSS page layout can also be regarded as a systematic work, the development of DIV CSS website may have many people to cooperate, by a team to complete, this involves a lot of normative operation problems, even if a person to develop, also need to have a certain organization and norms, this is a reproduced from the blue article, very effective, the author summed up a lot of practical experience, you can refer to and learn.

General introduction

This DIV CSS web page layout specification is not only a development specification, but also a scripting language reference. This specification is not an immutable provision that must be strictly observed. Under special circumstances, we should use it flexibly and make certain modifications. However, please do not change the specification at will. If you have any questions, please contact me in time, and I will change the relevant code samples and documentation of this specification in time.

Basic requirements

1. Set up three subdirectories of imagescommontemp in the root directory of the website, and then open an images subdirectory as needed. The images directory contains public pictures used for pages of different columns, such as company logo, banner bar, menus, buttons, etc.; css, js, php, include and other public files are placed in the common subdirectory; various text and pictures provided by customers are placed in the temp subdirectory and other original materials; and flash,avi,quicktime and other multimedia files are placed in the Media subdirectory.

two。 In principle, the root directory should be in accordance with the front page of the column structure, for each column to open a directory, according to the needs of each column in the directory to open a sub-category of images and media to place this column proprietary pictures and multimedia files, if the content of this column is particularly much, and divided into many subordinate columns, you can open other catalogs accordingly.

There are often many files in the 3.temp directory, so it is recommended to open a directory with the name of time to classify and sort out the information provided by customers one after another.

4. Unless there are special circumstances, the names of directories and files are all in a combination of lowercase English letters, numbers and underscores, which shall not contain Chinese characters, spaces and special characters; the naming of directories should be guided by English as far as possible. Do not use Pinyin as the directory name unless you have to. Experience has proved that directories named with pinyin often do not understand themselves a month later.

Scripting in DIV CSS Page layout

We should have the concept that the overall style of the script is consistent, which means that the style of the script you wrote a month later is the same as that of a month ago, and the script style written by different developers in the same working group is the same. Because we can't develop in isolation forever, you can work with yourself three months ago at any time (your customers ask for a revision) You often have to work on a project with different colleagues in the studio, and you may be asked to modify a script developed by a former employee, or you may drop a project to a later colleague.

Common template for 1.Html files:

ExampleSourceCode

Document title title >

Other meta tags in ◆ DIV CSS

ExampleSourceCode

◆ style sheet definition

Client Javascript function definition and initialization operation

ExampleSourceCode

Head >. Body >

Add:

To ensure that the site is compatible with the next generation of web language xml standards, the attributes of all HTML tags should be enclosed in single or double quotes, that is, we should write instead.

two。 For pages that allow full-text retrieval, in order for search engines on Internet to retrieve effectively, Keywords and Description meta-tags should be added between the html on the front page of the channel, for example:

ExampleSourceCode

Sample code for the format of the 3.DIV CSS file:

ExampleSourceCode

Style >

It is particularly important to note that the a:linka:visiteda:hovera:actived must be arranged in strict accordance with the above sample code, otherwise there will be more or less problems. In addition, we stipulate that the redefinition is the first, the pseudo class is the second, and the custom is the last, which is convenient for yourself and others to read!

4. In order to ensure that the font size is consistent on different browsers, it is recommended that the font size be defined by dots pt and pixel px. Pt generally uses Chinese Song 9pt and 11pt 12px PX. Chinese Song 12px and 14.7px are generally used. This is the optimized font size, bold or bold, generally choose 11pt and 14.7px font size is more appropriate.

Writing

When nesting each other, strictly follow the specification, for a single one

Say it.

Align, the closing tag should match the

Indent two-and-a-half spaces, if there is a nested table, also indent two-and-a-half spaces, if there are no nested tables in the same row, do not wrap

As we note, there should be no such code in the DIV CSS source code:

ExampleSourceCode

Td >

It should go like this:

ExampleSourceCode

Td >

This is because the browser thinks that line wrapping is equivalent to a half-width space, and the above non-standard writing is equivalent to inadvertently adding a half-width space. If it is really necessary to add a half-width space, it should also be written like this:

ExampleSourceCode

Td >

Belonging to the same level

Must be the first left alignment, in addition does not allow the existence of empty cells without any content, height greater than or equal to 12px cells should be written in between, if the height is less than 12px, you should insert a transparent gif image between 1x1 size, this is because some browsers think that empty cells are illegal and will not be interpreted. If the code is out of order, you can reorganize it through command- > applysouceformatting in DW3!

Peace and harmony

There is also a unified specification for the writing of 5.Width and height. In general, there is only one column of the table, and width is written in

There is only one row of the table in the tag, height is written in

A table with multiple rows and columns, width and height written in the first row or column

Inside the label. In short, follow a principle: there is no more than one control the same cell size of height and width, to ensure that any width and height are valid, that is, you change the code of any width and height values, you should see changes in the browser. It is not easy to do this, and it takes a long time to practice and think.

General principles of DIV CSS web page layout

1. Before arranging the table, please be sure to think about the best solution, the nesting of the table should be controlled within three layers as much as possible, and two tags should be avoided as far as possible. Experience shows that these two tags can cause a lot of trouble.

two。 A web page should try to avoid using a large table, all the contents are nested in this large table, because when the browser explains the elements of the page, it is displayed one by one according to the table. If a web page is nested within a large table, then the likely consequence is that when the viewer enters the URL, he has to face a blank for a long time, and then all the page content appears at the same time. If you have to do this, use the

Tag so that the large table can be displayed in blocks.

3. In typesetting, we often encounter the need for indentation of the first line, do not use or full-width spaces to achieve the effect, the standard practice is to define p {text-indent:2em;} in the stylesheet and then add to each paragraph

Mark, note, in general, please do not omit

End mark.

4. In principle, we prohibit the use of artificial interference with the size of the picture display, and recommend

Do not include width and height attributes in the tag, because the picture often needs to be modified repeatedly in the production process, so as to avoid artificial interference with the size of the image display and give full play to the function of the browser as much as possible. However, such a side effect is that the site size of the picture will not be set aside when the picture is not loaded, which may cause the page to wobble during loading (if the picture is inserted in a fixed size table, this will not happen), especially when the size of the picture is large, this phenomenon will be obvious, so when it is expected that this will obviously lead to web page jitter. Please be sure to give it at the end.

Attach the width and height attributes.

5. In order to maximize the automatic typesetting function of the browser, please try not to use it in a complete paragraph of text.

To manually intervene in the segment.

6. There should be a half-width space between words in different languages, but the punctuation between Chinese characters should be punctuated by full-width punctuation, and the parentheses around English letters and numbers should use half-width parentheses.

7. All font sizes should be implemented in stylesheets, and tags are not allowed on the page.

8. Please do not appear more than one page in a row and try to use as few full-width spaces as possible (under the English character set, full-width spaces will become garbled). Blank spaces should be realized by using text-indent,padding,margin,hspace,vspace and transparent gif images as far as possible.

9. When we mix Chinese and English, we try our best to define English and numbers as verdana and arial fonts.

10. It is recommended that the line spacing be defined as a percentage. The commonly used value of two line spacing is line-height:120%/150%..

11. All the paths in the website are relative paths. Generally, the link path to the default file in a certain directory does not have to write the full name, such as we do not have to: instead:

twelve。 Large fonts are used for embedded graphic text, and it is recommended not to include text in the graphics.

13. "Page size" is defined as the sum of all file sizes for a web page, including HTML files and all embedded objects. Users like fast sites rather than novel sites. For demodulator users, it is appropriate to keep the page size below 34K.

Principles for naming DIV CSS web page layout files

1. Each directory should contain a default html file with a uniform file name of index.htm

two。 The name of the piece is uniformly combined with lowercase letters, numbers and underscores.

3. The guiding ideology of the naming principle is to make it easy for you and every member of the working group to understand the meaning of each file, and the second is that when we use the "arrange by name" command in the folder, files of the same large category can be arranged together, so that we can find, modify, replace, calculate the load and so on.

4. The following column explains the naming principles of html documents in the column "News" (including "domestic News" and "International News"):

◆ opens the news directory under the root directory

The first ◆ default news item is named index.htm.

◆ all the news that belongs to "domestic News" is named as: china_1.htm,china_2.htm, …

◆ all the news that belongs to "International News" is named as: internation_1.htm,internation_2.htm, …

◆ if the number of files is two digits, name the first nine files: china_01.htm,china_02.htm to ensure that all files are sorted correctly in the folder.

5. The naming principles of pictures follow the following specifications:

The ◆ name is divided into two parts, separated by an underscore.

The ◆ header indicates the general nature of the picture, such as advertisements, logos, menus, buttons, and so on.

Generally speaking, ◆:

The rectangular pictures such as advertisements and decorative patterns placed at the top of the page are named banner.

The iconic picture is named logo.

Small pictures with links that are not fixed on the page are named button.

The picture of the link column with the same nature appears continuously in a certain position on the page. We name it: menu.

The photo for decoration is named pic.

The picture with no link to show the title is named title.

According to this principle, and so on.

The tail part is used to express the specific meaning of the picture.

After reading the above, do you have any further understanding of the sample analysis of the DIV CSS page layout development reference specification? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.