A UI specification file

This is a UI template specification, B / S version of the application is more applicable, in fact, such a thing is not what the formal norms, just to adapt to the development environment we are now facing and organizational processes to make some expeditious efforts , And to solve some problems with the program communication and interface, try to avoid misunderstanding and friction.

First, the applicable environment and the object Second, the necessity Third, the technical principles Fourth, the code written norms Fifth, page template specification

First, the applicable environment and objects This specification applies to browser-based B / S version of the software project development. Template pages in the development process to write and template file application work must be in accordance with this specification. Suitable for the development of coding staff, UI designers, template writing staff, interface testers and so on.
Client-based C / S version of the software development work does not apply to this specification.

II. Necessity The purpose of this code is to formulate the technical standards for the development of coding personnel and UI template compilers at the cross-sectional areas of work so that they follow the same code of practice and facilitate a smooth and smooth handover of cross-cutting work. To standardize ways to improve the level of communication and technical cooperation, improve work efficiency. Reduce and change the responsibility is unknown, the task is unclear, and resulting information poor communication, repeated changes, duplication of work, inefficiency.

Third, the technical principles of standardized code to write standardized code to achieve the overall style of the script consistent to ensure that the same person written in different periods consistent style of the script, and the same working group written by different developers to maintain the same style of the script. Because development can not be done in isolation, standardized code writing is a prerequisite for team communication.

Data layer, structure layer, the performance of the separation of data content is the actual page to convey the real information, including data, documents or pictures. The "real" that is emphasized here refers to the pure data message itself. Formatting the content in a suitable way, in short, is page layout, such as headings, authors, chapters, sections, lists, etc., making the content more logical, well organized and easy to understand "Structure" defines the structure, but the content is still the same style has not changed, such as the title font has not changed, the body color has not changed, there is no background, no modification. All of these things used to change the appearance of the content, called "presentation" "performance" role makes the content look beautiful, delightful, touching!

All HTML and XHTML pages are composed of "structure, performance and behavior". Abstraction is understood, the content is the base layer, and then attached to the structure layer and presentation layer, the interaction of the page content and the effect of the operation is called "Behavior (Behavior)

For the data, the structure and the performance of the phase separation, first proposed in the software development architecture theory. UI designers to design the page template, the programmer is responsible for the embedding of the content data, the data may be extracted from the database, it may be static written prompt text, and finally form a new page to show to the software operator. The structure of the template file is defined using the HTML + XHTML tags, and everything that relates to the presentation is spun off and placed in a separate file, which is the CSS.

The benefits of data, structure, and performance separation are:
Programmers do not need too much thinking page display problems, but only need to put the data into the template according to the corresponding template position. The UI designer is responsible for the structure and performance of the interface. Fill in the structure of the data to consciously apply the design of a good performance results. Finally, a complete interface to achieve functionality.
The separation of the performance layer to maintain the visual consistency of the entire software interface, so that revision has become very simple, modify the style sheet on it;
As the structure is clear, the data layer is relatively independent, and the data integration, updating, processing and reuse are more convenient and flexible;

Fourth, the code written code

(A) directory structure and naming rules

Directory structure specification
1, the principle of the establishment of the directory: to provide the most clear and simple access structure with the least level.
2, the root directory generally only store index.htm and other necessary system files
3, in the root directory should be in accordance with the system's column structure, to create a directory for each section, as needed in each section of the directory to open a sub-directory of images and media to place this section of the proprietary pictures and Multimedia files, if the content of this section is particularly large, but also divided into many subordinate columns, you can open another corresponding directory. The images in the root directory are used to store public images to be used on each page, the images in the sub-directory are stored in the private images used in the pages of this column
4, all JS, ASP, PHP and other scripts stored in the root directory of the scripts directory
5, all CGI programs stored in the root directory cgi-bin directory
6, all CSS files stored in the root directory of the style directory
7, each language version stored in a separate directory. For example: Simplified Chinese gb
8, all flash, avi, ram, quicktime and other multimedia files stored in the root directory of the media directory
9, temp subdirectory put all kinds of text pictures provided by customers and so on the original data, the name of the time to open the directory, the customer information provided by the classification of finishing.

File and directory naming conventions
1, the principle of file naming: with the least letters to achieve the most easy to understand meaning.
2, each directory contains the default html file, file name unified index.htm
3, the file name unified lowercase letters, numbers and underlined combination, shall not contain Chinese characters, spaces and special characters
4, try to translate the word English as the name. For example: feedback (feedback), aboutus (about us) as a last resort Do not pinyin as the directory name
5, more than the same type of file using English letters and numbers named, separated by _ between letters and numbers. For example: news_01.htm. Note that the number of digits is proportional to the number of files, not enough padded with 0. For example, a total of 200 news, of which Article 18 named news_018.htm

Picture naming conventions
1, the name is divided into two parts, separated by an underline.
2, the first part of the picture that the nature of the broad categories. For example: placed at the top of the page ads, decorative patterns and other rectangular picture We name: banner; iconic image we named: logo; position on the page is not fixed and with a link to the small picture we named button ; In a page on a continuous position in a row, the nature of the link column picture we name: menu; decorative photos we name: pic; without links to the title of the picture we name: title in accordance with this principle analogy.
3, the tail part is used to indicate the specific meaning of the picture, with English letters. For example: 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.

4, onmouse effect picture, two were added in the original file name "_on" and "_off" named

Other file naming conventions
1, js naming principle to the function of English words in the name. For example: The js file name for the banner: ad.js
2, all CGI file suffix cgi. The configuration file for all CGI programs is config.cgi

(B) html writing rules

General principle
1, in the preparation of the template file, arrange the structure of the table before, to think about an optimal program, nesting as far as possible within the three layers of the table; to consider the applicability of the program, versatility, flexibility, predictability, all Content is organized in blocks, replaceable and deleteable, with no disruptive effect on the overall structure
2, try to avoid <colspan> <rowspan> two markers, experience shows that these two markers will bring a lot of trouble
3, a page should try to avoid using a large form, all of the contents are nested within this large form. Because the browser interprets page elements one by one in tabular form, if a web page is nested within a large tabular form, the likely result is that when the visitor types in the web page, For a long time blank, and then all the contents of the webpage appear at the same time. If this must be done, use the <tbody> tag so that this large table can be displayed in pieces
4, typesetting often encounter the need to carry out the first line of indentation, do not use the full-width space to achieve the effect of the normative approach is defined in the style sheet p {text-indent: 2em;} And then add to each paragraph < p> mark, pay attention, under normal circumstances, please do not omit </ p> end mark
5, in principle, we forbid the use of <img width =? Height =?> To artificially interfere with the size of the image display, and suggested that <img> tags do not bring the width and height of the two attributes, this is because the production process, the picture Often need repeated changes, so as to avoid the size of human intervention picture display, as much as possible to play the browser's own function; but such a side effect is that when the page has not loaded the picture, will not set the picture station size, This may cause the page to jitter during the loading process (this will not happen if the image is inserted in a fixed-size table), especially if the size of the image is large, so when the expected To this will obviously lead to page jitter situation occurs, be sure to end with <img> attached width and height attributes
6, in order to maximize the browser automatically typesetting features, in a complete text try not to use <br> to manually interfere with the segmentation
7. There should be a half-width space between languages ​​of different languages, except for symbols before and after the typhoid, punctuation between Chinese characters should be punctuated with full-width punctuation, brackets around English letters and numbers should be used with half-brackets
8, in order to implement the principle of the separation of the structure layer and the presentation layer, it is forbidden to use the traditional HTML3.2 / 4.0 control performance labels, such as <font>, <b>, and the label intended for structural abuse later in performance control For example: <h1>, <table> and so on. All font sizes should be implemented using style sheets. The <font size => tag, the <b> </ b> <h1> </ h1> tag must not be displayed on the page.
9, do not appear in more than one page in succession also minimize the use of full-width spaces (English character set, full-width spaces will become garbled), blank should try to use text-indent, padding, margin, hspace, vspace and transparent gif picture to achieve.
10, Chinese and English mixed row, we try to define English and numbers as verdana and arial two fonts
11, the line spacing is recommended to use the percentage to define the value of the commonly used two line spacing is line-height: 120% / 150%
12, all the paths in the system using the relative path
13, in order to ensure the compatibility of the system and browser, when setting the background image, we must adhere to double quotation marks.
14, "web page size" for the total page size of all documents, including HTML files and all embedded objects. The page size below 34K is appropriate

Code rules
head area logo (head area refers to the home page HTML code between <head> and </ head>)
1, the company copyright notes
<! -
Generator: in the soft Rongxin
Creation Data: 2005-8-1
Original Author: 张 三 ->

2, page display character set Simplified Chinese:
<META. HTTP-EQUIV = "Content-Type" CONTENT = "text / html; charset = gb2312">
traditional Chinese:
<META. HTTP-EQUIV = "Content-Type" CONTENT = "text / html; charset = BIG5">
English:
<META. HTTP-EQUIV = "Content-Type" CONTENT = "text / html; charset = iso-8859-1">
?
3, Introduction
<META. NAME = "DESCRIPTION" CONTENT = "Fill in your site profile">?

4, web css file definition, all css files try to use the external call
<LINK href = "style / style.css" rel = "stylesheet" type = "text / css">

5, page title
<title> Here is your page title </ title>

6, all the javascript script try to take an external call
<SCRIPT. LANGUAGE = "javascript" SRC = "script / xxxxx.js"> </ SCRIPT>

head area can choose to join the logo
7, set the expiration time of the page. Once the page expires, you must re-read fwq.
<META. HTTP-EQUIV = "expires" CONTENT = "Wed, 26 Feb 1997 08:21:57 GMT">

8, prohibit the browser from the local machine cache access page content.
<META. HTTP-EQUIV = "Pragma" CONTENT = "no-cache">

9, used to prevent others from calling your page in the framework.
<META. HTTP-EQUIV = "Window-target" CONTENT = "_ top">

10, automatically jump.
<META. HTTP-EQUIV = "Refresh" CONTENT = "5; URL = http: //www.yahoo.com">
5 refers to the time to stay for 5 seconds.

11, web search robot wizard used to tell the search robot which pages need indexing, which pages do not need indexing.
<META. NAME = "robots" CONTENT = "none">
CONTENT parameters all, none, index, noindex, follow, nofollow. The default is all.

12, favorites icon
<link rel = "Shortcut Icon" href = "favicon.ico">

13, search keywords
<META. NAME = "keywords" CONTENT = "keyword1, keyword2, keyword3, ...">

The mark below the head area
1, body tag In order to ensure browser compatibility, you must set the page background
<body bgcolor = "# FFFFFF">

2, table mark In the write <table> nesting with each other, in strict accordance with the norms, for a separate <table>, <tr>, <td> each indent two half-width spaces, Qi <td> If there is a nested table, <table> is also indented by two half-width spaces. If there are no nested tables in <td>, the </ td> end tag should be on the same line as <td> Do not wrap.
Correct wording:
a \
<table width = "100%"? border = "0" cellspacing = "0" cellpadding = "0">
<tr>
<td> & nbsp; </ td>
</ tr>
<tr>
<td>
<table width = "100%"? border = "0" cellspacing = "0" cellpadding = "0">
<tr>
<td> & nbsp; </ td>
</ tr>
</ table>
</ td>
</ tr>
</ table>

b \
<td> <img src = "../ images / sample.gif"> </ td>

Wrong wording
a \
<table width = "100%"? border = "0" cellspacing = "0" cellpadding = "0">
<tr>
<td> & nbsp; </ td>
</ tr>
<tr>
<td> <table width = "100%" border = "0" cellspacing = "0" cellpadding = "0">
<tr>
<td> & nbsp; </ td>
</ tr>
</ table>
</ td>
</ tr>
</ table>

b \
<td> <img src = "../ images / sample.gif">
</ td>
This is because the browser that the newline equivalent to a half-size space, the above non-standard wording is equivalent to an unintentional increase in a half-size space, if it is indeed necessary to add a half-size space, it should be written:
<td> <img src = "../ images / sample.gif"> </ td>

<Table> at the same level must be left-justified, and empty cells without any content should not be allowed. Cells with height greater than or equal to 12px should write a & nbsp between <td> and </ td> ; If the height is less than 12px, you should insert a transparent gif of 1 * 1 size between <td> and </ td> because some browsers think that empty cells are illegal and will not be explained. If the order of the code is chaos, DW can be reorganized by command-> apply souce formatting!

3, Width and height tags generally only one column of the form, the width is written in the <table> tag, only one row of the table, the height is written in the <table> tag, multi-row and multi- Within the <td> tag in the first row or in the first column. In short, follow a principle: not more than one control of the same cell size height and width, to ensure that any one of the width and height are valid, that is, any change in the code width and height values ​​?? should be browsing See changes in the device.
a, only one column of the table width tag
<table width = "100%"? border = "0" cellspacing = "0" cellpadding = "0">
<tr>
<td> & nbsp; </ td>
</ tr>
<tr>
<td> & nbsp; </ td>
</ tr>
</ table>
b, only one line of the table's height tag
<table width = "100%" height = "30"? border = "0" cellpadding = "0" cellspacing = "0">
<tr>
<td> & nbsp; </ td>
<td> & nbsp; </ td>
<td> & nbsp; </ td>
</ tr>
</ table>
c, multi-line multi-column form of the width and height tags
<table border = "0" cellpadding = "0" cellspacing = "0">
<tr>
<td width = "100" height = "30"> & nbsp; </ td>
<td width = "200"> & nbsp; </ td>
<td width = "300"> & nbsp; </ td>
</ tr>
<tr>
<td> & nbsp; </ td>
<td> & nbsp; </ td>
<td> & nbsp; </ td>
</ tr>
</ table>

4, the width of the table property

In order to follow the flexibility of the page structure, the principle of universality, the table's width property in principle, all written as 100% or do not write the width property, not recommended to write other non-100% width property. The blank display effect is achieved by imposing the style's padding property on the external td.

<table width = "100%"? border = "1" cellspacing = "0" cellpadding = "0">
<tr>
<td width = "200" bgcolor = "# FF0000" style = "padding: 20px;">
<table width = "100%" border = "1" cellpadding = "0" cellspacing = "0" bgcolor = "# FFFFFF">
<tr>
<td> table width 100% </ td>
</ tr>
<tr>
<td> & nbsp; </ td>
</ tr>
</ table>
</ td>
<td> & nbsp; </ td>
</ tr>
</ table>

It should be noted that the style here td css wording, but not part of the content of the presentation layer, but belong to the structure of the content, so you can write directly in the middle of the html markup.

5, the data list form The code is written in the form plus a <div>, and an id for the <div>, that is, <div id = list>, and then through the style sheet to control all the html elements under this id,
Use <th> to set the header to set the width of each column. In <th> corresponding to the header, the maximum number of words or the number of words in the list is not set.
The width of the value of the list of items according to how much to set, 2 words of 30px, 40px three words, time, date (such as 2004-11-11) 80-120px,
Similar to the title of the list items, the alignment of the table is left-aligned (align = left), the time, the person name is generally centered, the data is generally right-aligned (align = right).
Align the page content do not use the div to align directly write in td or th align = ...
Header text is generally not folded, the method is to add nowrap, or through the style sheet to control

<table width = "100%" border = "0" cellspacing = "0" cellpadding = "0">
<tr>
<th width = "30" nowrap> select </ th>
<th align = "left" nowrap> title </ th>
<th width = "80" nowrap> publisher </ th>
<th width = "120" nowrap> time </ th>
<th width = "40" nowrap> size </ th>
</ tr>
<tr>
<td> & nbsp; </ td>
<td align = "left"> & nbsp; </ td>
<td align = "center"> & nbsp; </ td>
<td align = "center"> & nbsp; </ td>
<td align = "right"> & nbsp; </ td>
</ tr>
<tr>
<td> & nbsp; </ td>
<td align = "left"> & nbsp; </ td>
<td align = "center"> & nbsp; </ td>
<td align = "center"> & nbsp; </ td>
<td align = "right"> & nbsp; </ td>
</ tr>
</ table>
(C) css write rules

css file call writing
1, all the CSS as far as possible the use of external calls, special circumstances allow the use of built-in HTML wording.
<LINK href = "style / style.css" rel = "stylesheet" type = "text / css">

css file structure organization
1, file header, css file name, time, author

2, the CSS selector for different purposes and effects were grouped, grouped by level to make the structure clear, easy to check. And properly block comments, notes to explain the object of the page file. Top comments start with * TOP *, sub-notes do not.

.headtext {
font-size: 14px;
color: #ffffff;
font-weight: bold;
}?
.headtext a: link {
color: #ffffff;
text-decoration: none;
}
.headtext a: visited {
color: #ffffff;
text-decoration: none;
}
.headtext a: hover {
color: FED078;
text-decoration: none;
}
#clientcard {
align
}
#clientcard th {
height: 20;
font-size: 12px;
color: # 737373;
padding-left: 10;
font-weight: bold;
background-attachment: fixed;
background: url (images / dot2.gif)

background-repeat: no-repeat;
background-position: left center;
}
#clientcard td {
height: 20;
font-size: 12px;
color: # FD783A;
padding-right: 25;
}

3, select the order of sub-group is the first redefinition, pseudo-class followed by custom last. Easy to read for yourself and others.
E.g:

BODY {
margin-left: 0px;
...
}

TD {
font-size: 12px;
...
}
a: link {
color:? # 484848;
text-decoration: none;
}
a: visited {
color: # 484848;
text-decoration: none;
}
a: hover {
color: # BD0800;
text-decoration: underline;
}
.ltreename {
font-size: 14px;
...
}

Class and ID naming rules
1, to function and define the location of the object, rather than the appearance of the class and ID naming. For example, to create a .smallblue class, and later intend to make the text bigger, the color turns red, the class name no longer makes any sense. So, more descriptive names such as .copyright and .info-list are more appropriate.

unit
1,0 without units
2, non-zero value to specify the unit, specify the font, margin or size, you must specify the unit used for example: padding: 0 2px 0 1em;
3, special cases: line-height does not require units

Size
1, in order to ensure that the same font size on different browsers, the size of the pixel px to define the general use of Chinese Times New Roman 12px and 14.7px This is the optimized font size, boldface or Times New Roman bold, the general choice of 14.7px font size is more appropriate, for example : Font-size: 12px;

order
1, a: link a: visited a: hover a: actived To write in accordance with the order of the rules
2, border, margin (margin) and padding (padding) shorthand order: clockwise from the beginning, that Top, Right, Bottom, Left.
For example: margin: 0 1px 3px 5px; means the top margin is zero, the right margin is 1px, and so on.

Combination selector
1, to keep CSS short to reduce the download time is very important. Try to reduce the redundancy for selectors, inheritance, and shorthand.

Use pictures
1, css often encounter the use of the picture, the path of the picture all use the relative path.
E.g:

.hurdlename {
font-size: 14px;
color: # 0B43C2;
height: 25px;
font-weight: bold;
background-image: url (images / rbar_bg.gif);
background-repeat: repeat-y;
text-indent: 12px;
}

.but1 {
background-image: url (../ images / but1.gif);
font-size: 12px;
color: # 000000;
border: 0;
width: 85px;
height: 26px;
cursor
}

2, the use of image replacement technology to consider the affinity with the system and file structure. If all the documents cited css not at the same level relative path, there will be css specified images can not be displayed. In this case does not support the use of image technology. Recommend the use of filter technology For example:

input.buttton {
filter: progid: DXImageTransform.Microsoft.Gradient (gradienttype = 0, startcolorstr = # CFD1CF, endcolorstr = # EFEFEF);
border: # B5B6B5 1px solid;
font-size: 12px;
color: # 000000;
cursor
height: 24px;
background: #ffffff;
}

Five-page template specification

The purpose of the page template usage specification is to unify and agree on the behavior of UI designers, interface engineers and different coders, and the specification of writing code can not completely solve the problem of the unity of interface application. Because different coders may have different understanding of the same template, and the difference of personal work habits, the result of interface application tends to be very different. Even if it is a little bit of difference per person, may make the quality of the software received a great impact.

The division of responsibilities is clear
1, UI design, interface engineers responsible for the interface style of the design and preparation of software templates, and monitor the effect of interface application. Responsible for the final interface of the software.
2, coding engineers responsible for the realization of software business logic, the application of software templates. Responsible for the data and program of the software.
3, the reality is that individual coding engineers in the template after the deviation occurs, the interface engineers to modify the views of the time refused to modify to the progress of development, time is not enough groundwork, and even subjective that "this (interface) is not important," the interface The role of engineers can not be due to play, affecting the quality of software products.
4, the solution is to bear their own responsibility. Interface issues to increase the degree of attention, and into the development process and progress management.

Interface template interface process
1, template file production is completed, submitted to the coding engineer, to a brief description of the template file instructions and reminders.
2, coding engineers and interface engineers work closely with the template to fully understand the instructions.
3, on the interface structure layer HTML table nesting clearly understood and combined with the intention of the program. There are cases and the program does not match the situation, further discussion and interface engineers to obtain solutions. Do not modify the table structure, positioning properties, and nested relationships without the knowledge of the interface engineer. The downside to doing this is that while one solves a temporary display problem, the result is different from what the other coding engineers apply. Is not conducive to interface engineers to control the overall interface.
4, the presentation of the interface elements and css file selector correspondence. Be aware of, understand a template file, to the application of other documents will be able to tell the difference.

5, coding engineers fully understand the interface template, you can smoothly put the contents of the data layer into the appropriate position on the structure layer, and specify the performance of the appropriate selector character. Complete the interface application work.

Template description of the content
1, the overall interface structure
2, the layout of the page plate and positioning table wording
3, table nested way of reason
4, different functions of the interface display unit description and use
5, css file selection symbol of the use of instructions, the general can understand that some special emphasis should be on.

Css file version control
Css file should be introduced version control mechanism, the project team should be assigned to someone responsible for the css file upload and modify. fwq css files and interface engineers css files should be updated simultaneously. Does not support the coding engineer free to add selectors to modify the css file. No one can change the standard, there is no version control is difficult to achieve a unified interface.

Source: http: //www.cnblogs.com/pcxpt/archive/2010/07/08/1773476.html