Code.
I. File specification
1. html, css, js, images files are filed in the agreed directory.
2. html file naming: English naming, suffix. htm. Also put the corresponding interface script in the same directory, if the interface script is named in Chinese, please rename it with the same name as the html file, so as to facilitate the back-end to find the corresponding page when adding functions; 3. css file naming: English naming, suffix. css.
3. css file naming: English naming, suffix. css. common base. css, home index. css, other pages according to the actual module needs.
4. js file naming: English naming, suffix. js. common. js, other pages named according to the actual module needs.
2. html writing specification
1. document type declaration and coding: unified html5 declaration type; coding unified, using IDE to achieve hierarchical indentation when writing.
2. style files must be linked between <head></head> in non-exceptional cases; JavaScript files must be linked to the bottom of the page in non-exceptional cases.
3. the default type declaration must be omitted when introducing style files or JavaScript files.
4. introduce a JS library file with the library name and version number and whether it is a compressed version, e.g. jquery-1.7.1.min.js; introduce a plugin file with the library name + plugin name, e.g. jQuery.cookie.js.
5. all coding follows the xhtml standard, tags & attributes & attribute naming must consist of lowercase letters and underscored numbers, and all tags must be closed; attribute values must be enclosed in double quotes.
6. make full use of html's own tags without compatibility issues, such as span, em, strong, optgroup, label, etc.; when you need to add custom attributes to html elements, first consider whether there is a default appropriate tag to set, if not, you can use "data-" as a prefix to add custom attributes. Avoid using other naming conventions such as "data:".
7. semantic html, such as h for headings according to importance (only one h1 on the same page), p for paragraph tags, ul for lists, and no nesting of block-level elements in inline elements.
8. minimizing div nesting.
9. avoid redirects when writing link addresses, e.g. href="http://www. codingke. com/", i.e. "/" must be added to the end of the URL address.
10. the use of the style attribute, i.e. style="...", must be avoided in the page.
11. must add labels to form elements containing descriptive elements (input, textarea).
12. images that can be rendered as backgrounds are written into the css style as much as possible.
13. must add alt attributes to important images; add titles to important elements and truncated elements.
14. add comments to block code and important functions (such as loops) to facilitate the addition of functions in the background.
15. use of special symbols: use code substitution whenever possible: e.g. <(<) & >(>) & space ( ) & ? (question), etc..
16. consider backward extensibility in the process of writing pages.
Design aspects.
I. Process
(1) The product manager gives the prototype and product documentation.
(2) UI designers start designing high-fidelity UI according to the prototype.
(3) After the UI design is completed, the product, design and development begin to review. (Once the review of the rendering is completed, the design will not be changed under normal circumstances)
(4) After the UI review, UI designer will give the size of each area and picture and cut the picture.
(5) Development will be completed within the specified time.
(6) Deploy the test environment and start testing.
II. Units.
Distance, font size are uniformly expressed in px.
III. Markup.
(1) font (default Microsoft elegant black)
(2) font size, color
(3) the width and height of the container, and positioning distance from the upper edge, how many px from the left or right.
(4) centered content, horizontally centered and vertically centered, do not need to be marked.
(5) For some plug-ins such as drop-down boxes and date plug-ins, the front end will give the corresponding information needed or screenshots.
Fourth, if some prompt boxes or the development of skilled use of some effects of the plug-in, you need to give the designer screenshots early to see whether the designer adopts, or redevelopment.
V. Responsive: the page can be adapted to the width of the client browser and screen; the mainstream size to comply with the three sizes of 1200, 1440, 1920.