(Zz) Concise html css development specifications

Source: Internet
Author: User

Author: wjack Source: Blue ideal

// Summary

This specification is not only a development specification, but also a reference for a scripting language. It is not a static provision that must be strictly observed. In special circumstances, it must be used flexibly and made some changes. However, do not change the specifications at will. If you have any questions, please contact me promptly. I will promptly change the code samples and documents of this specification.

/Basic Requirements

1. open three subdirectories of images common temp in the root directory of the website, and open the media subdirectory as needed. Public images are used for pages with different columns in the images directory, for example, the company logo, banner bar, menu, button, etc. Put css, js, php, include and other public files in the common subdirectory; the temp sub-directory contains various text images provided by the customer and other raw materials; the media sub-directory contains flash, avi, quick time and other multimedia files.
2. in principle, in the root directory, you should create a directory for each topic based on the topic structure of the homepage, create a subdirectory of images and media in the directory of each topic as needed to store the proprietary pictures and multimedia files of this topic. If there is a lot of content in this topic, there will be many lower-level columns, you can open other directories accordingly.
3. There are usually many files in the temp directory. We recommend that you set up a directory named "time" to sort the materials provided by customers one after another.

4. unless in special cases, the names of directories and files must be in combination with lowercase letters, numbers, and underscores, and cannot contain Chinese characters, spaces, or special characters; the directory name should be in English as much as possible. You must not use Pinyin as the directory name. Experience has proved that directories named in pinyin cannot be understood by yourself for a month,

/Script writing

We should have a concept that the overall style of the script is consistent, that is, the style of the script you wrote a month ago is consistent, and the script styles written by Different developers in the same working group must be consistent, because it is impossible for us to develop independently forever, you may work with yourself three months ago at any time (your customer requires a new version), and often develop a project with different colleagues in the studio, you may also be asked to modify the script developed by the resigned employee. Of course, you may also throw the next project to another employee.

1. General Html file template:

<Html>
<! --
Generator: Sub Design Studio ( Www.eastline.net.cn)
Creation Data: 2000-8-1
Original Author: eastline
-->
<Head>
<Title> document title </title>
<Meta http-equiv = "content-type" content = "text/html; charset = gb2312">
<Meta name = "author" content = "eastline">

Other meta tags

<Link rel = "stylesheet" type = "text/css" href = "style/style.css">

Style Sheet Definition
Client-side javascript function definition and initialization

</Head>
<Body bgcolor = "# ffffff">
... ...
</Body>

Supplement:
To ensure that the website is compatible with the xml standard of the Next Generation web language, all attributes of HTML tags must be enclosed in single or double quotation marks, that is, we should write <a href = "url"> instead of <a href = url>.

2. pages that allow full-text retrieval. To enable an Internet search engine to search effectively, add Keywords and Description meta tags between the <Meta name = "keywords" content = "Dongfang Shinkansen, automobile, car buying">
<Meta name = "description" content = "China New Energy line, the first stop of Chinese car information in the world">

3. Sample Code of CSS file format:

<Style type = "text/css">
<! -
P {text-indent: 2em ;}
Body {font-family: ""; font-size: 9pt; color: #000000; margin-top: 0px; margin-Right: 0px; margin-bottom: 0px; margin-left: 0px}
Table {font-family: ""; font-size: 9pt; line-Height: 20px; color: #000000}
A: link {font-size: 9pt; color: # ffffff; text-Decoration: None}
A: visited {font-size: 9pt; color: #99 FFFF; text-Decoration: None}
A: hover {font-size: 9pt; color: # ff9900; text-Decoration: None}
A: active {font-size: 9pt; color: # ff9900; text-Decoration: None}
A.1: link {font-size: 9pt; color: # 3366cc; text-Decoration: None}
A.1: visited {font-size: 9pt; color: # 3366cc; text-Decoration: None}
A.1: hover {font-size: 9pt; color: # ff9900; text-Decoration: None}
A.1: Active {font-size: 9pt; color: # ff9922; text-Decoration: None}
. Blue {font-family: ""; font-size: 10.5pt; line-height: 20px; color: # 0099FF; letter-spacing: 5em}
-->
</Style>

Note that the order of A: Link A: visited a: hover A: Actived must be strictly based on the preceding sample code. Otherwise, problems may occur more or less. In addition, we specify that the definition should be the first, the pseudo class should be followed, and the custom should be the last, so that you can read the definition easily with others!

To ensure that the font size of different browsers is consistent, we recommend that you define the font size using the PT and pixel PX. PT generally uses the 9pt and 11pt of the Chinese, PX is generally used in Chinese 121212px and 14.7px. This is the optimized font size. When the bold characters are in black or simplified Chinese, the font size of 11pt and 14.7px is generally used.

When writing <Table> nesting to each other, strictly follow the rules. For a single <Table>, <Table> <tr> alignment and <TD> indent two spaces, <TD> if there are nested tables, <Table> also indent two spaces. If <TD> does not contain any nested tables, </TD> the end mark should be in the same line as <TD>. Do not wrap the line,

For example, note that such code should not be included in the source code:

<Td>
</Td>

It should be like this:

<Td> </td>

This is because the browser thinks that the line feed is equivalent to a half-width space. The above nonstandard writing method is equivalent to inadvertently adding a half-width space. If it is necessary to add a half-width space, it should also be written as follows:

<Td> </td>

The <Table> at the same level must be left-aligned. In addition, empty cells with no content are not allowed, A cell with a height greater than or equal to 12px should be written between <TD> and </TD>. If the height is smaller than 12px, A 1*1 transparent GIF image should be inserted between <TD> and </TD>, because some browsers do not consider the empty cell to be invalid. If the code order is messy, you can use command-> apply Souce formatting in dw3 to reorganize it!

5. width and height are written in a unified way. Generally, there is only one column of tables, and width is written in the <table> label. There is only one row of tables, the height is written in the <table> label, the table with multiple rows and multiple columns, and the width and height are written in the <td> label of the first row or column. In short, follow the principle that no more than one height and width controls the size of the same cell, to ensure that any width and height are valid, that is to say, you should see the change in the browser to change any value of width and height in the code. It is not easy to do this. It takes a long time to practice and think.

/General Principle

1. before you deploy a table, you must think about the best solution. The nesting of the table should be controlled within three layers as much as possible, and avoid the <colspan> <rowspan> two tags as much as possible, experience shows that these two tags can cause a lot of trouble.

2. A webpage should try to avoid using the entire large table. All content is nested in this big table, because the browser displays the elements of the page one by one in units of tables when interpreting the page, if a webpage is nested in a large table, the possible consequence is that when a visitor clicks the website, he must first face a blank area for a long time, then all the webpage content appears at the same time. If this is required, use the <tbody> flag to display the large table in blocks.

3. in typographical layout, we often encounter the need to indent the first line. Do not use spaces or full-angle spaces to achieve the effect. The standard approach is to define p {text-indent: 2em;} in the style sheet ;} then add the <p> flag to each segment. Note that, in general, do not omit the </p> end mark.

4. In principle, we disable the use of We recommend that you do not include the width and height attributes in the label because the image needs to be modified repeatedly during creation, in this way, we can avoid human intervention in the Image Display size and try to make full use of the browser's own functions. However, this side effect is that when the page does not load the image, the size of the image's position will not be set aside, it may cause webpage jitter during loading (this is not the case if the image is inserted in a fixed-size table), especially when the image size is large, this phenomenon is obvious, so when we expect this to cause obvious webpage jitter, please attach the width and height attributes to at the end.

5. To maximize the browser's Automatic Layout function, do not use <br> to manually intervene in segments in a complete text segment.

6. there should be a half-width space between texts of different languages, but the punctuation between Chinese characters should be full-width punctuation marks except for the characters before and after the symbols to avoid the head, parentheses should be around English letters and numbers.

7. All font sizes should be implemented using style sheets. It is not allowed to appear on the page. <font size =?> Mark.

8. please do not consecutively show more than one character set on the webpage or use as few space spaces as possible (in the English character set, the space will be garbled). Try to use text-indent, padding, margin, this feature is implemented by using a combination of high-performance, high-performance, and high-performance gif images.

9. We try to define English and numbers as verdana and arial fonts.

10. percentage is recommended for line spacing. the commonly used two line spacing values are line-height: 120%/150%.

11. all the paths on the website use relative paths. Generally, you do not need to write the full name for the link paths of the default files linked to a directory, as we do not need: <a href = "aboutus/index.htm"> instead: <a href = "aboutus/">

12. Use a large font to embed graphic text. We recommend that you do not include text in the image.

13. "webpage size" is defined as the total size of all files on the webpage, including HTML files and all embedded objects. Users like fast websites instead of novel websites. For modem users, it is appropriate to keep the webpage size below 34 KB.

/Original document name

1. Each directory should contain a default html file, and the file name is unified with index.htm

2. The name must contain lowercase letters, numbers, and underscores.

3. the guiding ideology of naming principles is that you and every member of the Working Group can easily understand the meaning of each document, second, when we use the "sort by name" command in a folder, files in the same category can be arranged together, so that we can search, modify, replace, and calculate the load.

4. The following section uses "news" (including "domestic news" and "International News") to illustrate the naming principles of html files:

☆Open news contents in the root directory

☆The first article titled index.htm

☆The names of all Chinese news are china_1.htm, china_2.htm ,...

☆Names of all the news that belong to "International News" are 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 ,...

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.