Web front end development specification manual
1, Normative purpose
1.1 general
This document is specially made to improve the efficiency of team cooperation, facilitate the background personnel to add functions, optimize and maintain the front end in the later stage, and output high-quality documents Once the specification document is confirmed, the front-end developers must develop the front page according to the specification of this document If there is any mistake or inappropriateness in this document, please put forward it in time. This document can be changed after discussion and decision
2, Normative documents
2.1 document naming rules
The document name shall be a combination of lowercase English letters, numbers and underscores, which shall not contain Chinese characters, spaces and special characters; 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. Secondly, when we use the command of "arrange by name" in the folder, the files of the same category can be arranged together so that we can find, modify, replace, calculate the load and so on.
a. Naming principles of HTML
Index. Is used uniformly for cited documents htm index. html index. ASP file name (lowercase)
The naming principle of each sub page should first take a single word as the name of the English translation of the column name. For example:
About us \ aboutus information feedback \ feedback Products \ product
If the column name is numerous and complex, and it is not easy to name it with English words, the Pinyin or the first letter of Pinyin of the column name shall be used uniformly;
Each directory should contain a default HTML file, and the file name should be index htm index. html index. asp；
b. Naming principles of pictures
The name of the picture is divided into two parts, separated by an underline. The head part indicates the general nature of the picture For example: advertisements, signs, menus, buttons, etc. Rectangular pictures such as advertisements and decorative patterns placed at the top of the page are named: banner The iconic picture is named: logo A small picture with a link and an unfixed position on the page is called button We name the picture of the link column with the same nature that appears continuously in a certain position on the page: menu The photos for decoration are named: pic We name the picture without a link to indicate the title: title 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 Mouse sensing effect picture naming specification is"Picture name+_+on/off". For example: menu1_on.gif menu1_off.gif
c. Naming principles of JavaScript
For example, the javascript file name of the advertisement bar is ad.js, and the javascript file name of the pop-up window is pop.js js
d. Naming principles of dynamic language files
By nature_ Description. The description can have multiple words. Use "" Separated, the nature is generally the summary of the page.
Example: register_form.asp register_post.asp topic_lock.asp
2.2 specification of document storage location
| _Root | |
|---|---|
| cn | Store Chinese HTML files |
| en | Store English HTML files |
| flash | Store Flash files |
| images | Store picture files |
| imagestudio | Store PSD source files |
| flashstudio | Store flash source files |
| inc | Store include files |
| library | Store DW library files |
| media | Storing multimedia files |
2.3 CSS writing specification
basic principle:
CSS styles can be divided into three categories: custom styles, redefined HTML styles, and link state styles.
1. New styles customized by designers CSS Style, which affects the area where this style is used, is used to complete the style setting of the local part of the web page. Style name“."+"Examples of words or abbreviations of corresponding style effect description:“ .shadow "
Text style name“.no"+"Font size+"Line spacing+"Example of "color abbreviation":“ .no12 " ," .no12-24 "
2. righteousness HTML Styles redefine existing for designers HTML Label style, which affects all the set label styles, is used to unify the style definition of a label in the web page. Style name“ HTML "Label" example: hr { border: 1px dotted #333333 }
3. State style refers to the designer setting special styles for different states of links, which affects the links in the style area.
There are two ways to write this style: a.nav:link nav.a:link The first can only be modified<a>In the label; The second can modify all that contain<a>Other labels of the label.
The style loading in the page must be linked<link rel="stylesheet" type="text/css" href="style/style.css">
Note:
1. Collaborative development and division of labor: i According to each module, At the same time, according to the similar program on the page, Write the general framework document in advance, Assign to front-end personnel to implement internal structure&performance&behavior; share css file base.css from i write, During collaborative development, Each page must be introduced, This file contains reset Head and bottom style, This file cannot be modified at will;
2. class And id Use of: id Is unique and parent, class Is repeatable and child, therefore id Use only on large modules, class It can be used in high reuse rate and children; id In principle, they are named when I distribute the framework file, by JavaScript Except for reserved hooks;
3. by JavaScript Naming of reserved hooks, Please take js_ start, such as: js_hide, js_show;
4. class And id name: Large frame names, such as header/footer/wrapper/left/right Something like that in 2 i Unified naming.Other style names are in lowercase English & number & _ To combine naming, as i_comment, fontred, width200; Avoid using Chinese pinyin, Try to use simple word combinations; in short, Naming should be semantic, simplification .
5. avoid class And id name(This article is important, If you don't understand, please contact us in time i communicate):
a, Avoid by subordinate writing, See for example d;
b, Take parent element id/class Naming part naming, See for example d;
c, Naming with high reuse rate, Please start with your own code and underline, such as i_clear;
d, a,b Two, Applies to pages that have frames built in 2, as, Page code to frame in 2<div id="mainnav"></div>Add new div element,
Press a Naming convention: <div id="mainnav"><div class="firstnav">...</div></div>,
Style writing: #mainnav .firstnav{.......}
Press b Naming convention: <div id="mainnav"><div class="main_firstnav">...</div></div>,
Style writing: .main_firstnav{.......}
6. css Attribute writing order, It is recommended to follow the layout positioning properties-->Self attribute-->Text properties-->Other properties. This article can be written according to your own habits, But try to ensure that similar attributes are written together. attribute listing : Layout positioning genus
Sex mainly includes: margin,padding,float(include clear),position(Corresponding top,right,bottom,left),display,visibility,overflow Etc; Self attribute main package
Include: width & height & background & border; Text attributes mainly include: font,color,text-align,text-decoration,text-indent Etc; Other attributes include:
list-style(List style),vertical-vlign,cursor,z-index(Stacking sequence) ,zoom etc..The attributes I listed are only the most commonly used, Not all;
7. Before writing code, Consider and improve style reuse;
8. make the best of html Reduce the amount of code based on the principle of self attribute and style inheritance, such as:
<ul class="list"><li>Here is the title list<span>2010-09-15</span></ul>
definition ul.list li{position:relative} ul.list li span{position:absolute; right:0}
The date can be displayed on the right
9. Chinese font name in style sheet, Please be sure to transcode unicode code, To avoid garbled code in case of coding error;
10. Please use the background picture as much as possible sprite technology, reduce http request, Considering multi person collaborative development, sprite Made by module;
11. use table When labeling(Try to avoid using table label), Please don't use it width/ height/cellspacing/cellpadding etc. table Attributes directly define the presentation, It should be used as much as possible
table Separation structure and expression of its own private attributes, as thead,tr,th,td,tbody,tfoot,colgroup,scope; (cellspaing and cellpadding of css Control method: table{border:0;margin:0;border-collapse:collapse;} table th, table td{padding:0;} , base.css In the file, I will initialize the table style)
12. No use<meta http-equiv="X-UA-Compatible" content="IE=7" /> compatible ie8;
13. use png When making pictures, The required picture format is png-8 format,if png-8 It really affects the quality of the picture or there is a translucent effect, Please for ie6 Define background separately:
background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop, src='img/bg.png');
14. Avoid using compatibility attributes, such as text-shadow || css3 Related properties of;
15. Reduce the use of properties that affect performance, such as position:absolute || float ;
16. You must add comments for the large block style, Small block notes;
17. Code indentation and formatting: Single line writing is recommended, According to their own habits, Post optimization i It will be handled uniformly;
Class naming rules:
Head: header Content: content/container Tail: footer Navigation: nav Sidebar: sidebar Column: column Control the overall layout width at the periphery of the page: wrapper Left and right middle: left right center Login bar: loginbar Sign: logo advertisement: banner Page body: main hotspot: hot Journalism: news Download: download Sub navigation: subnav Menu: menu Submenu: submenu Search: search Links: friendlink Footer: footer Copyright: copyright roll: scroll Content: content Tab: tab Article list: list Prompt: msg Tips: tips Column title: title Add: joinus Guidelines: guild Services: service Registration: regsiter Status: status Voting: vote cooperative partner: partner
How to write notes:
/ Footer /
Content area
/ End Footer /
Name of id:
(1) Page structure
container: container Header: header Content: content/container Page body: main Footer: footer Navigation: nav Sidebar: sidebar Column: column Control the overall layout width at the periphery of the page: wrapper Left and right middle: left right center
(2) Navigation
Navigation: nav Main navigation: mainbav Sub navigation: subnav Top navigation: topnav Side navigation: sidebar Left navigation: leftsidebar Right navigation: rightsidebar Menu: menu Submenu: submenu title: title abstract: summary
(3) Function
Sign: logo advertisement: banner land: login Login bar: loginbar Registration: regsiter Search: search Ribbon: shop title: title Add: joinus Status: status Button: btn roll: scroll Tab: tab Article list: list Prompt: msg Current: current Tips: tips Icon: icon notes: note Guidelines: guild Services: service hotspot: hot Journalism: news Download: download Voting: vote cooperative partner: partner Links: link Copyright: copyright\
Basic style:
/ CSS Document /
body {margin:0; padding:0; font:12px "\5B8B\4F53",san-serif;background:#fff;}
div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p{padding:0; margin:0;}
table,td,tr,th{font-size:12px;}
li{list-style-type:none;}
img{vertical-align:top;border:0;}
ol,ul {list-style:none;}
h1,h2,h3,h4,h5,h6 {font-size:12px; font-weight:normal;}
address,cite,code,em,th {font-weight:normal; font-style:normal;}
.fB{font-weight:bold;}
.f12px{font-size:12px;}
.f14px{font-size:14px;}
.left{float:left;}
.right{float:right;}
a {color:#2b2b2b; text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {color:#ba2636;text-decoration:underline;}
a:active {color:#ba2636;}
Redefine first, pseudo class second, custom last, easy for yourself and others to read!
The font size on different browsers should be consistent. It is recommended to define the font size with the number of points Pt and pixel px. Pt generally uses 9pt and 11pt in Chinese Song typeface, and PX generally uses 12px and 14.7px in Chinese Song typeface. This is an optimized font size. When bold or Song typeface is bold, 11pt and 14.7px are generally suitable. When mixing Chinese and English, we try to define English and numbers as verdana and arial fonts.
2.4 html writing specification
Code area of web page production
head Zone means HTML Coded<head>and</head>Content between.
Labels that must be added
a) Company copyright notes <!--- The site is designed by EHM,Inc 07/2005 --->
b) Web 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=utf-8">
English:<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
c) Web producer information <META name="author" content="webmaster@maketown.com">
d) Website introduction <META NAME="DESCRIPTION" CONTENT="xxxxxxxxxxxxxxxxxxxxxxxxxx">
e) Search keywords <META NAME="keywords" CONTENT="xxxx,xxxx,xxx,xxxxx,xxxx,">
f) Webpage css standard <LINK href="../css/style.css" rel="stylesheet" type="text/css">
g) Page title <title>xxxxxxxxxxxxxxxxxx</title>
You can choose which tags to add
a) Set the expiration time of the web page. Once the web page expires, it must be retrieved on the server.
<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08: 21: 57 GMT">
b) Browser is prohibited from accessing the contents of the page from the local machine cache.
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
c) Used to prevent others from calling your page in the framework.
<META HTTP-EQUIV="Window-target" CONTENT="_top">
d) Auto jump.
<META HTTP-EQUIV="Refresh" CONTENT="5;URL=http: //www.yahoo. Com "> 5 means the time stays for 5 seconds
e) Web search robot wizard. It is used to tell the search robot which pages need index and which pages do not need index.
<META NAME="robots" CONTENT="none">
CONTENT The parameters are all,none,index,noindex,follow,nofollow. Default is all.
f) favorites icon <link rel = "Shortcut Icon" href="favicon.ico">
g) be-all javascript External calls shall be adopted as far as possible.
<SCRIPT LANGUAGE="JavaScript" SRC="script/xxxxx.js"></SCRIPT>
h) attach<body>label:
<body>Label does not belong to head In order to ensure the compatibility of the browser, the page background must be set<body bgcolor="#FFFFFF">
2. Web page making details - Font
1. When setting the font style, the text size style and line spacing should be used CSS Style sheets. Suppress in page <font size=?> Mark.
2. Song typeface should be preferred for Chinese in web pages. English and numbers are preferred verdana and arial Two fonts. 9 in Chinese Song typeface is generally used pt And 11 pt Or 12 px And 14.7px This is the optimized font size. When bold or Song typeface is bold, 11 is generally selected pt And 14.7px The font size of is more appropriate.
3. In order to maximize the automatic typesetting function of the browser, please try not to use it in a complete text<br> To manually intervene in segmentation.
4. There should be a half angle space between words in different languages, except before the head avoiding symbol and after the tail avoiding symbol. The punctuation between Chinese characters should use full angle punctuation, and the brackets around English letters and numbers should use half angle brackets.
5. Please do not appear more than one in a row in the web page, and try to use less full space (full space will become garbled under the English character set). Blank space should be used as much as possible text-indent, padding, margin, hspace, vspace And transparent gif Pictures.
6. It is recommended to define the line spacing by percentage. The two commonly used line spacing values are line-height:120%/150%.
7. In typesetting, we often encounter the need to indent the first line. Do not use or full angle spaces to achieve the effect. The standard practice is to define in the style sheet p { text-indent: 2em; } Then add to each paragraph <p> Note: generally, please do not omit </p> End tag.
3. Web page production details - Links
1. All link paths in the website adopt relative paths. Generally, the link path linking to the default file in a directory does not need to write the full name. For example, we do not need to do this:<a href="aboutus/index.htm"> Instead:<a href="aboutus/">，All links to the home page on the inner page are written as<a href="/"> 2. In the browser, when we click on an empty link, it will automatically reset the current page to the first end, which will affect the normal reading content of users. We use code“ javascript:void(null)"Replace the original“#”Mark
4. Web page production details - form
1px form style="border-collapse: collapse" Examples are as follows: <table border="1" cellspacing="0" width="32" height="32" style="border-collapse:collapse"bordercolor="#000000" cellpadding="0"> <tr> <td></td> </tr> </table> Set the color of light and dark border The table has a bright border( bordercolorlight)And dark border( bordercolordark)Two attributes can be set for the table style.<table border="1" width="500" bordercolorlight="#000000" bordercolordark="#FFFFFF"> Writing <table> When nesting with each other, strictly follow the specifications of each other. For a single<table>For example,<table><tr>Alignment, <td> Indent two half width spaces,<td> If there are nested tables in,<table>Also indent two half width spaces if<td>There are no nested tables in the,</td> End tag should match <td> In the same line, do not wrap. For example, we should note that there should be no such code in the source code: <td><img src="../images/sample.gif"> </td> It should be like this: <td><img src="../images/sample.gif"></td> This is because the browser thinks that line feed is equivalent to a half width space, and the above nonstandard writing is equivalent to inadvertently adding a half width space, If it is really necessary to add a half angle, it should also be written as follows: <td><img src="../images/sample.gif"> </td> A web page should try to avoid using a whole large table. All contents are nested in this large table, because when the browser interprets the elements of the page, It is displayed one by one in a table. If a web page is nested in a large table, the most likely consequence is, When a visitor types in the URL, he has to face a blank for a long time, and then all the web content appears at the same time. If you have to Do, please use <tbody>Mark so that this large table can be displayed in blocks
5. Web page production details - download speed
The size of the home page Flash Web page should be limited to less than 200K, and vector graphics and Action should be used as much as possible to reduce the animation size. The size of the pictures included in the non homepage static page should be limited to about 70K, and the background color should be used to replace large pictures of the same color as much as possible.
6. Web page production details - include
asp standard notation <!--#include file="inc/index_top.asp" --> jsp standard notation <%@ include file="../inc/index_top..jsp" %>
7. Web page production details - Alt and Title
They are all suggestive language labels. Please pay attention to the differences between them. When we browse the web, when the mouse hovers over the picture object or text link, a prompt message box sometimes appears in the lower right corner of the mouse. Make some notes on the target. On some occasions, its role is very important. alt Used to prompt the picture. Title Used to prompt link text or ordinary text. The usage is as follows: <p Title="Give link text prompt">written words</p> <a href="#"Title =" text prompt for link "> text</a>
8. Web page production details - cache
Web pages will not be cached HTM Webpage <META HTTP-EQUIV="pragma" CONTENT="no-cache"> <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate"> <META HTTP-EQUIV="expires" CONTENT="0"> ASP Webpage Response.Expires = -1 Response.ExpiresAbsolute = Now() - 1 Response.cachecontrol = "no-cache"
9. Web page production details - browser compatibility
When you create a site, you should understand that visitors may use various methods Web browser. Design the site for maximum browser compatibility as far as possible, subject to other known design constraints. Currently used Web There are more than 20 kinds of browsers, most of which have been released in multiple versions. Even if you only use Netscape Navigator and Microsoft Internet Explorer Most of Web Users, But you should be clear that not everyone is using the latest versions of both browsers. The more complex your site is (in terms of layout, animation, multimedia content, and interaction), the less likely it is to be compatible across browsers. For example, not all browsers can run JavaScript. Plain text pages that do not use special characters may display correctly in any browser, but they may be much less aesthetically pleasing than pages that use graphics, layout, and interaction effectively. Therefore, we should try to strike a balance between the best effect design and the maximum browser compatibility design. be-all HTML The attributes of the tag should be enclosed in single quotation marks or double quotation marks, that is, we should write <a href="url"> instead of <a href=url>.
10. Picture processing details - banner
full-size banner 468 X60px，Half size banner 234 X60px，Small banner 88 X31px. Another 120 X90，120X60 It is also the standard size of small icons. full-size banner Not more than 14 K. general banner Size 760 X100，750X120，468X60，468X95，728X90，585X140 Secondary page pip Size 360 X300，336X280 cursor:100X100 Or 120 X120
11. Picture processing details -- International Standard Specification of LOGO
In order to facilitate INTERNET A unified international standard is needed for the dissemination of information. In fact, there is already such a set of standards. About the website LOGO，There are currently three specifications: 8831 This is the most common on the Internet LOGO Specifications. 12060 This specification is used for general size LOGO. 12090 This specification is used for large LOGO.
12. Image processing details - Page modification image processing
The pictures are optimized to speed up the download speed and have better visual space effect. The pictures should be consistent with the page style and page content; Exquisite production and proper handling of details.
2.5 JavaScript writing specification
1. During writing, Each line of code must end with a semicolon; In principle, all functions are based on XXX Original development of project requirements, To avoid online down Code pollution caused by down code(Heavy redundancy code || Conflict with existing code || ...); 2. Library introduction: In principle, only jQuery library, To import a third-party library, Decisions must be discussed with the rest of the team; 3. Variable naming: Hump naming. Primordial JavaScript Variables are required to be pure English letters, The first letter must be lowercase, as iTaoLun; jQuery Variable requires the first character to be'_', Other and native JavaScript Same rules, as: _iTaoLun; another, Variable set declaration required, Avoid global variables. 4. Class naming: title case, Hump naming. as ITaoLun; 5. Function naming: Initial lowercase hump naming. as iTaoLun(); 6. Naming semantics, Use English words or their abbreviations as much as possible; 7. Try to avoid using methods or attributes that have compatibility and consume resources, such as eval() & innerText; 8. In later optimization, JavaScript Non annotation Chinese characters must be converted to unicode Coding use, To avoid garbled code display in case of coding error; 9. The code structure is clear, Add appropriate notes. Improve function reuse; 10. Focus on and html separate, reduce reflow, Focus on Performance.
2.6 picture specification
1. All page element pictures are put into img folder, Test pictures are placed on img/demoimg folder; 2. Picture format is limited to gif || png || jpg; 3. All names are in lowercase English letters || number || _ Combination of, which shall not contain Chinese characters || Space || Special characters; Try to use easy to understand words, Easy for other team members to understand; another, Name the first and last parts, Separate with underline, such as ad_left01.gif || btn_submit.gif; 4. Choose the smallest image format and image quality under the condition of ensuring visual effect, To reduce loading time; 5. Try to avoid using translucent png picture(If used, Please refer to css Relevant specifications); 6. application css sprite A small background image or icon in a technology set, Reduce page http request, But notice, Please be sure to write in the corresponding sprite psd Draw a reference line in the source diagram, And save to img Under the directory.
2.7 notes and specifications
1. html notes: Annotation format <!--Here are the notes-->, '--'Only at the beginning and end of the note,Note text area cannot be placed; 2. css notes: Annotation format /Here are the notes/; 3. JavaScript notes, Single line note usage'//Here is' single line comment ', multi line comment is used / there are multi line comments /;
2.8 browser compatibility CSS hack
1, Identification difference:
difference IE6,IE7,IE8,FF.
1. IE Can identify* ; Standard browser(as FF)Unrecognizable*；
2. IE6 Can identify*，But it can't be recognized !important; IE6 Precede style with_
3. IE7 Can identify*，Can also identify!important;
4. IE8 Can identify\ 9 For example: background:red \9;
5. firefox Unrecognizable*，But it can identify!important;
1．IE6 and firefox Differences between:
background:orange;*background:blue;
It means that the background color of Firefox browser is orange,and IE The background color of the browser is blue.
2. IE6 and IE7 Differences between:
background:green !important;background:blue;
It means:IE7 The background color of is green,IE6 The background color of is blue
3. IE7 and FF Differences between:
background:orange; *background:green;
It means:The background color of Firefox is orange,and IE7 The background color of is green
4. FF，IE7，IE6 Differences between:
background:orange;
*background:green !important;
*background:blue;
It means the background of Firefox is orange,IE7 The background color of the browser is green,and IE6 The color of the browser is blue.
2, Practical suggestions
(1). Selection of development platform stay Firefox Upper compilation CSS, Compatible with other browsers. This will certainly be better than IE It's easy to be compatible with other browsers, because IE Support for the old standard is still very good, and IE Some unique functions of are not supported by others. Therefore, it is recommended to Firefox combination Firebug Extension as a platform. (2). CSS Hack Order of use Firefox As a platform, As long as the code is standard enough, Actually Hack There won't be many places, IE Almost no problem with browsers other than, So it can be ignored for the time being, The sequence is as follows: Firefox -> IE6 -> IE7 -> other (3). Hack Method of There are two ways, One is to process in different files, The other is processed in the same file. In fact, the effect is the same, It's just a different starting point.
1. Processing in the same document
For example, the control with id="bgcolor" should display blue in IE6, green in IE7 and red in Firefox and other browsers.
IE6 Deny !important,Neither +html.therefore IE6 Only blue. IE7 recognize !important,Also recognize +html,Priority: (+html + !important) > !important > +html. IE7 Can be red, blue and green,but green Highest priority. Firefox And other browsers !important. !important first, Firefox Can be red and blue,but red High priority. The above priority symbols are CSS3 Standard allowed,Other browsers also have other Hack method,But I haven't met it yet Firefox normal, IE Other browsers are abnormal,So nothing to share.As long as the code specification,I believe this kind of situation should be very rare (JavaScript except).
2. Processing in different documents
Why can the same file be processed and written in multiple files for different browsers?
This is to deceive W3C's verification tool. In fact, only two files are needed, one for all browsers and the other only for ie Write all W3C compliant codes into one, and some necessary codes in IE that cannot be verified by W3C (such as cursor:hand;) Put it into another file and import it in the following way
