css| Specification | Development Specification/General Introduction
This specification is not only a development specification, but also a scripting language reference, this specification is not a rigid must strictly abide by the provisions, under special circumstances to be flexible use, make certain modifications. However, please do not arbitrarily change the specification. If you have any questions, please contact me in time, I will change this specification of the relevant code samples and documents.
/Basic Requirements
1. Open images Common temp Three subdirectories in the root directory of the Web site, and then open media subdirectories as needed, images the public images to be used for pages in different columns in the directory, such as company logos, banner bars, menus, buttons, etc. common Subdirectories in the CSS, JS, PHP, include and other public files, the temp subdirectory to play the client provided a variety of text pictures and so on raw materials, media subdirectory in Flash, AVI, quick time and other multimedia files.
2. In the root directory in principle should be in accordance with the first 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 images and media of the subheading to place this column of proprietary pictures and multimedia files, if the content of this column is particularly large, and a lot of subordinate columns , you can open another directory accordingly.
3. The files in the temp directory tend to be more, and it is recommended to set up a catalogue with the name of time to classify the information provided by the customers.
4. Unless there are special circumstances, the directory, the name of the file in all lowercase letters, numbers, underscores the combination, which may not contain Chinese characters, spaces and special characters; name of the catalogue please try to use English as the guide, not to the last resort pinyin as a directory name, experience has proved that The catalogue that is named by Pinyin often does not understand oneself after one months,
/Script Authoring
We should have a consistent concept of the overall style of scripting, which means consistent with the scripting style you wrote one months later and one months ago, as well as the scripting styles written by different developers in the same workgroup, because we can't develop in isolation forever, You may be able to work with yourself three months ago (your client's request for revision) you often have to work with different colleagues in the studio to develop a project, and you may be asked to revise the scripts that have been developed by those who have been left behind, and of course you will probably drop a project for later colleagues.
1. Common templates for Html files:
<!--
Generator:sub Design Studio (www.eastline.net.cn)
Creation Data:2000-8-1
Original Author:eastline
-->
<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 JavaScript function definition and initialization operations
<body bgcolor= "#ffffff" >
... ...
</body>
Add:
To ensure that the Web site is compatible with the next generation of Web language XML standards, all HTML tag attributes are enclosed in single or double quotes, that is, we should write <a href= "url" > not <a href=url>.
2. Pages that allow Full-text retrieval, in order to enable search engines on the internet to be effectively retrieved, keywords and description meta tags should be added between the HTML
<meta name= "keywords" content= "Oriental Shinkansen, car, buy car" >
<meta name= "description" content= "Oriental new drive Line, global Chinese auto information first stop" >
3. CSS file Format Sample code:
<style type= "Text/css" >
<!-
p {text-indent:2em;}
Body {font-family: "XXFarEastFont-font-size:9pt"; color: #000000; margin-top:0px; margin-right:0px; margin-bottom:0px; margin-l eft:0px}
Table {font-family: "Song body"; font-size:9pt; line-height:20px; color: #000000}
a:link {font-size:9pt; color: #FFFFFF; Text-decoration:none}
a:visited {font-size:9pt; color: #99FFFF; 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: "XXFarEastFont-Arial"; font-size:10.5pt line-height:20px; color: #0099FF; letter-spacing:5em}
-->
</style>
In particular, it is important to note that A:link a:visited a:hover a:actived order must be strictly according to the sample code above, or more or less will be problematic. In addition, we define the first to redefine, pseudo class second, customize the last, easy for yourself and others to read!
In order to ensure that the size of different browsers are consistent, the size of the proposed point pt and pixel px to define, PT general use of the Chinese song body of the 9pt and 11pt,px generally use the Chinese song Body 12px and 14.7px This is the optimized font size, bold text or italicized word bold, Generally choose the size of 11pt and 14.7px is more appropriate.
In writing <table> nesting, strictly according to the specification, for a separate <table>,,<table><tr> align,<td> indent two half-width spaces,<td> If there is a nested table,<table> also indents two half-width spaces, if <td> does not have any nested table,</td> end tag should be the same line as <td>, do not wrap,
As we notice, there should be no such code in the source code:
<td>
</td>
And it's supposed to be like this:
<td></td>
This is because the browser that the line is equivalent to a half corner space, the above is not standardized to write the equivalent of inadvertently add a half-width space, if it is necessary to add a half-width space, it should be written as follows:
<td> </td>
<table> that belong to the same level must be Zoo aligned, and not allow empty cells without any content, and cells with a height greater than 12px should write one between <td> and </td>, if the height is less than 12px, you should Inserts a 1*1 sized, transparent GIF picture between <td> and </td> because some browsers think empty cells are illegal and do not interpret them. If the code is in a disorderly order, in DW3 can be command->apply souce formatting to reorganize!
5. Width and height of the writing also has a unified standard, in general, only one column of the table, width written in the <table> label, only one row of the table, height written in the <table> label, many rows of columns of the table, Width and height written in the first line or the first column of the <td> label. In short, follow a principle: No more than one control of the same cell size height and width, to ensure that any one width and height are valid, that is, you change the code in any of the width and height of the value, should be seen in the browser changes. It's not easy to do this, it takes a long time to practice and think.
/General principles
1. Before you arrange the table, please be sure to think about the best solution, the nesting of the tables as far as possible within three levels, and should try to avoid <colspan> <rowspan> two tags, experience shows that these two tags can cause a lot of trouble.
2. A Web page should try to avoid using a whole large table, all of the content is nested within this large table, because the browser in the interpretation of the elements of the page, is displayed in the form of a table, if a page is nested in a large table, then the most likely result is that when the viewer typed the URL, He had to face a blank space for a long time, and then all the Web content appeared simultaneously. If you have to, use the <tbody> tag to make this large table block out.
3. In typesetting we often encounter the need for the first line indent processing, do not use or full-width space to achieve results, the standard practice is to define p {Text-indent:2em in the stylesheet, and then give each paragraph a <p> mark, note that, in general, please do not omit < /p> end tag.
4. In principle, we prohibit the use of to artificially interfere with the size of the picture display, and recommend labels do not wear a width and height two attributes, because the production process, the picture often needs to be repeatedly modified, so as to avoid human intervention in the picture display size, As much as possible to play the browser's own functions; but such a side effect is that when the page has not loaded the picture, will not leave the image of the position size, may cause the page in the load process jitter (if the picture is inserted in a fixed size of the table, will not have this phenomenon), especially when the size of the picture is larger, This phenomenon will be obvious, so when you anticipate that this will obviously lead to Web page jitter will occur, please be sure to give attach the width and height attributes at the end.
5. In order to maximize the function of the browser automatic typesetting, in a complete text, try not to use the <br> for manual intervention segmentation.
6. There should be a half-width space between the words in different languages, but the punctuation between the symbols before and after the trailing sign should be used in full-width punctuation, and the parentheses around the English alphabet and digits should be used with half-width brackets.
7. All font sizes should be implemented using style sheets, prohibiting <font size=?> tags from appearing on the page.
8. Please do not appear in the Web page more than one is also as little as possible using full-width spaces (English character set, full-width spaces will become garbled), white space should try to use text-indent, padding, margin, hspace, vspace and transparent GIF pictures to achieve.
9. In Chinese and English mixed row, we as far as possible the English and the number defines as Verdana and Arial two kinds of fonts.
10. Line spacing is recommended as a percentage, and the commonly used two leading values are line-height:120%/150%.
11. All paths in the Web site are relative paths, and links to the default files in a directory are generally not required to write full names, such as we do not have to: <a href= "aboutus/index.htm" > and should do so: <a href= "aboutus/ ">
12. Using larger fonts for embedding graphic text, it is recommended that you do not include text in the graphic.
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, not novelty sites. For demodulator users, the page size is kept below 34K for appropriate.
/File naming principles
1. Each directory should contain a default HTML file with the file name unified with Index.htm
2. The name of the piece is unified in lowercase letters, numbers and underscores.
3. The guiding principle of nomenclature is to make it easy for you and each member of the Working Group to understand the meaning of each document, second, when we use the "by name" command in a folder, the same large class of files can be arranged together so that we find, modify, replace, calculate the load, and so on.
4. The following section, "News" (including "domestic News" and "international News"), describes the naming principles for HTML files:
☆ Open the News directory under the root directory
☆ The first default news name index.htm
☆ All of the "domestic news" news in turn named: china_1.htm, china_2.htm, ...
☆ All of the "international news" news in turn named: internation_1.htm, Internation _2.htm, ...
☆ If the number of files is two digits, please 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 principle of the picture follows several specifications:
☆ The name is divided into 22 parts, with the underline separated.
☆ The first part represents the large class nature of this picture, such as advertising, logos, menus, buttons, and so on.
☆ Generally speaking:
Placed in the top of the page ads, decorative patterns, such as rectangular picture of our name: Banner
The iconic pictures we name as: Logo
Small picture with no fixed position on the page and with links we named button.
In a certain position on the page of a continuous appearance, the nature of the same link column of the picture we name: Menu
Decorative photos We name: pic
A picture without a link to represent the title we name it: Title
According to this principle, analogy.
☆ The tail part is used to express the concrete meaning of the picture.
☆ Here are a few examples, we should be able to see the meaning of the picture at a glance:
| Banner_sohu.gif |
Banner_sina.gif |
Menu_aboutus.gif |
Menu_job.gif |
| Title_news.gif |
Logo_police.gif |
Logo_national.gif |
Pic_people.jpg |
| Pic_hill.jpg. |
|
|
|
