Website development specification

xiaoxiao2021-03-06  40

The general discussion is not only a development specification, and a scripting language reference. This specification is not a provision that must be strictly complied with it. In special cases, it must be flexible and do it. However, please don't change the specification at will. If you have any questions, please contact me in time, I will change the sample samples and documents of this specification in time. Basic Requirements 1. Open the three subdirectories in the IMAGES Common Temp in the website root directory, and set the media subdirectory as needed, and the pages of different columns in the Image of the image are available, such as the company's logo, Banner strip, menu , Buttons, etc., CSS, JS, PHP, including public files such as CSS, JS, PHP, and include; TEMP sub-directory release customers all kinds of text pictures, etc., MEDIA subdirectory, Flash, AVI, Quick Time, etc. Multimedia file. 2. In the root directory, you should follow the column structure of the homepage, give each column, set a directory to the list of images and Media sub-directorys to place this column as needed to place this column proprietary pictures and Multimedia files, if this column is particularly versatile, all of which are divided into many subordinate columns, and you can open other directories accordingly. 3. The files in the TEMP directory will often be more, it is recommended to set the directory for the name to finish the information provided by the customer. 4. Unless there are special circumstances, directory, the name of the document is all combined with lowercase English letters, numbers, the next line, which must be included in Chinese characters, spaces, and special characters; directory name, please try to guide English, don't don't have pinyin As a directory name, experience proven, directory named in pinyin is often unknown for one month, and the script write we should have a script's overall style. It means that it is written after a month. The script style is consistent, as well as the script style prepared in the same workgroup, because we can't develop forever, you can cooperate with yourself in your own time (your customer request revision) ), Often develop a project with different colleagues in the studio, and may be required to modify the scripting developed by retired personnel, of course, you may also throw a colleague from a project.

1. General Templates for HTML files: < Head> Document Title </ title> <meta http-equiv = "content-type" content = "text / html; charSet = GB2312> <meta name =" author "content =" easy "> Other Meta tags <link rel = "stylesheet" type = "text / css" href = "style / style.css"> style table defines the client JavaScript function definition and initialization operation </ head> <body bgcolor = "# fffff"> ... </ body> Supplement: To ensure that the website can be compatible with the next generation of Web language XML standards, all HTML tags must be enclosed in single quotes or double quotes, ie should write <a href="url"> Not <a href=URL>. 2. Allow full-text search, in order to enable the search engine on the Internet to effectively retrieve, Keywords and Description metadata should be added between the HTML <head> </ head> of the Channel's Home HTML , For example: <meta name = "keywords" content = "Oriental new trunk, car, buy car"> <meta name = "description" content = "Oriental new dry line, global Chinese car information first stop"> 3. CSS Sample code for file: <style type = "text / css"> <! - p {text-indent: 2em;} body {font-family: "Song"; font-size: 9pt; color: # 000000; Margin-top: 0px; margin-rT: 0px; margin-left: 0px} Table {font-family: "Song"; font-size: 9pt; line-height: 20px; colo R: # 000000} A: Link {font-size: 9pt; color: #ffff; text-decoration: none} a: visited {font-size: 9pt; color: # 99fff; 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;</p> <p>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} .bo {font-family: "Song"; font-size: 10.5pt; line-height: 20px; color: # 0099ff; letter-spacing: 5em} -> </ style> This is especially noted here is A: LINK A: Visited A: Hover A: The order of the ActiveD must strictly follow the sample code above, otherwise or less problems. In addition, we specify the first, pseudo-class, and the final, easy to read it with others! In order to ensure that the font size on different browsers is consistent, the font size is recommended to define points of PT and pixel PX. PT usually uses Chinese Song's 9PT and 11PT, PX generally uses Chinese Song 12PX and 14.7PX this is an optimized font size, black body or When the Song body is bold, it is generally preferred to use 11PT and 14.7px fonts. When writing <table>, in strict accordance with the specification, for a separate <table>, <table> <tr> alignment, <TD> indent two half-horned spaces, <TD> if there is Nested form, <table> also harvested two half-way spaces, if there is no nested table in <TD>, </ td> end tag should be in the same line with <TD>, do not change, if we pay attention to There should be such code in the source code: <TD> <img src = "../ images / sample.gif"> </ td> should be like this: <TD> <img src = "../ images /sample.gif "> </ td> This is because the browser believes that the wrap is equivalent to a half-horned space, the above irregular write method is equivalent to increasing a half-way space inadvertently, and if it is necessary to increase a half-horned space, it should also be written : <TD> <img src = "../ images / sample.gif"> </ td> belongs to the same level <table> must be left-aligned, and there is no empty cell without any content. The cells that are higher than or equal to 12px should be written between <TD> and </ TD> If the height is less than 12px, one * 1 size transparent GIF should be inserted between <TD> and </ TD>. Pictures, this is because some browsers think that empty single-collages illegally and will not be explained. If the code sequence is more chaotic, you can re-organize it in DW3! 5. Width and Height's writing also has a unified specification. In general, there is only one column of table. Width is written in the "Table> tag, only one line of table, Height writes in the" Table> tag, multi-line multi-row Tables, WIDTH and Height are written in the first row or the first column of <TD> tag.</p> <p>In summary: Do not appear more than one HEIGHT and WIDTH, which guarantees any Width and Height, which is valid, which is the value of any width and height in your change, should be Change in the browser. It is not easy to do this, it takes a long exercise and thinking. General principles 1. Before the release form, please think about a best solution, the nesting of the table is controlled within three layers, and you should try to avoid <colspan> <rowspan> two tags, experience shows that These two tags will bring a lot of trouble. 2. A page should try to avoid using the entire list, all content is nestled within this big table, because the browser is displayed one by one in the form when the page is explained, if a web is embedded Set within a big table, then the consequences that are likely to cause, when the viewer is knocking in the URL, he must face a blank for a long time, then all the web content appears at the same time. If you have to do this, use the <TBODY> tag to enable this large table block. 3. In the typography, we often encounter the processing of the first line indentation, do not use or full-width space to achieve the effect, the practice of the specification is to define p {text-indent: 2em;} and add each paragraph <P> mark, note, in general, please do not omit </ p> end tags. 4. In principle, we prohibit the size of the image displayed by <img width =? Height =?>, And it is recommended that both width and height attribute in the <IMG> tag, because the image is It is often necessary to repeated modification, which avoids artificial intervenes to display the size, as much as possible to play the function of the browser itself; but such a side effect is that when the web does not load the picture, it will not leave the picture size, May cause the web page to jitter during loading (if the picture is inserted in a fixed size table, there will be no such phenomenon), especially when the picture is large, this phenomenon will be obvious, so when it is expected When this will be clearly caused by web jitter, please make sure you will attach Width and Height properties to <IMG>. 5. In order to maximize the function of the browser automatic version of the function, please do not use the <br> to manually intervene in a complete text. 6. There should be a half-horned space between the words of different languages, but the brackets between the other characters before the symbols of the Head, except for the symbols of the tails, the brackets around the Chinese characters, the brackets around the English letters and numbers should use half-corned parentheses. 7. All font numbers should be implemented in style tables, and the <font size =?> Tag is prohibited in the page. 8. Please do not use more than one in a row in the web page to use less all-round spaces (under the English character set, the full-corner space will become garbled), blank should try to use Text-Indent, Padding, Margin, HSpace, vSpace, and Transparency GIF picture is implemented. 9. In the Chinese and English mix, we are asleep as much as possible as Verdana and Arial.</p></div><div class="text-center mt-3 text-grey"> 转载请注明原文地址:https://www.9cbs.com/read-73179.html</div><div class="plugin d-flex justify-content-center mt-3"></div><hr><div class="row"><div class="col-lg-12 text-muted mt-2"><i class="icon-tags mr-2"></i><span class="badge border border-secondary mr-2"><h2 class="h6 mb-0 small"><a class="text-secondary" href="tag-2.html">9cbs</a></h2></span></div></div></div></div><div class="card card-postlist border-white shadow"><div class="card-body"><div class="card-title"><div class="d-flex justify-content-between"><div><b>New Post</b>(<span class="posts">0</span>) </div><div></div></div></div><ul class="postlist list-unstyled"> </ul></div></div><div class="d-none threadlist"><input type="checkbox" name="modtid" value="73179" checked /></div></div></div></div></div><footer class="text-muted small bg-dark py-4 mt-3" id="footer"><div class="container"><div class="row"><div class="col">CopyRight © 2020 All Rights Reserved </div><div class="col text-right">Processed: <b>0.039</b>, SQL: <b>9</b></div></div></div></footer><script src="./lang/en-us/lang.js?2.2.0"></script><script src="view/js/jquery.min.js?2.2.0"></script><script src="view/js/popper.min.js?2.2.0"></script><script src="view/js/bootstrap.min.js?2.2.0"></script><script src="view/js/xiuno.js?2.2.0"></script><script src="view/js/bootstrap-plugin.js?2.2.0"></script><script src="view/js/async.min.js?2.2.0"></script><script src="view/js/form.js?2.2.0"></script><script> var debug = DEBUG = 0; var url_rewrite_on = 1; var url_path = './'; var forumarr = {"1":"Tech"}; var fid = 1; var uid = 0; var gid = 0; xn.options.water_image_url = 'view/img/water-small.png'; </script><script src="view/js/wellcms.js?2.2.0"></script><a class="scroll-to-top rounded" href="javascript:void(0);"><i class="icon-angle-up"></i></a><a class="scroll-to-bottom rounded" href="javascript:void(0);" style="display: inline;"><i class="icon-angle-down"></i></a></body></html><script> var forum_url = 'list-1.html'; var safe_token = 'BGzNKqOdgd9gz6y0zsPpTXnAE13vM0gQ9vKlJH_2FeEh4Wmf_2FFyRShnkLltWA1WCM_2FjBQ1DSgdHpK8zMSbenc_2FMQ_3D_3D'; var body = $('body'); body.on('submit', '#form', function() { var jthis = $(this); var jsubmit = jthis.find('#submit'); jthis.reset(); jsubmit.button('loading'); var postdata = jthis.serializeObject(); $.xpost(jthis.attr('action'), postdata, function(code, message) { if(code == 0) { location.reload(); } else { $.alert(message); jsubmit.button('reset'); } }); return false; }); function resize_image() { var jmessagelist = $('div.message'); var first_width = jmessagelist.width(); jmessagelist.each(function() { var jdiv = $(this); var maxwidth = jdiv.attr('isfirst') ? first_width : jdiv.width(); var jmessage_width = Math.min(jdiv.width(), maxwidth); jdiv.find('img, embed, iframe, video').each(function() { var jimg = $(this); var img_width = this.org_width; var img_height = this.org_height; if(!img_width) { var img_width = jimg.attr('width'); var img_height = jimg.attr('height'); this.org_width = img_width; this.org_height = img_height; } if(img_width > jmessage_width) { if(this.tagName == 'IMG') { jimg.width(jmessage_width); jimg.css('height', 'auto'); jimg.css('cursor', 'pointer'); jimg.on('click', function() { }); } else { jimg.width(jmessage_width); var height = (img_height / img_width) * jimg.width(); jimg.height(height); } } }); }); } function resize_table() { $('div.message').each(function() { var jdiv = $(this); jdiv.find('table').addClass('table').wrap('<div class="table-responsive"></div>'); }); } $(function() { resize_image(); resize_table(); $(window).on('resize', resize_image); }); var jmessage = $('#message'); jmessage.on('focus', function() {if(jmessage.t) { clearTimeout(jmessage.t); jmessage.t = null; } jmessage.css('height', '6rem'); }); jmessage.on('blur', function() {jmessage.t = setTimeout(function() { jmessage.css('height', '2.5rem');}, 1000); }); $('#nav li[data-active="fid-1"]').addClass('active'); </script>