Concise development of standardized HTML CSS
Related Tags:
This instruction is a development of norms, is a scripting language reference, this is not a static norms must strictly abide by the provisions of special circumstances to flexibility in the use of some sort of modifications. However, we must not arbitrarily change norms. If you have any questions, please contact me with a timely manner, I will promptly changes the relevant norms of sample code and documentation.
Basic requirements
1. Website in the root directory created images common temp three subdirectories, according to media need to create a subdirectory, put different images in the directory pages to use columns of the public picture, such as the company's logo, banner, menu, buttons, etc.; common subdirectory in the release css, js, php, and other public documents include; temp subdirectory release provided by the text, picture, and so on the original information in the media release flash subdirectory, avi, quick time multimedia documents.
2. In the root directory should, in principle, in accordance with the Home column structure, and a column to each create a directory, according to the need of each of the columns in the creation of a directory of media images and subdirectories to put this column proprietary picture and multimedia files, if the content of this column in particular, and to tell a lot of the lower sections, corresponding to the re-creation of other directory.
3. Temp files in the directory more often, the proposed name for the creation of a directory of the time, customers will have to provide the information sorted.
4. Unless there are exceptional circumstances, directory, file with the names of all the lowercase letters, numbers, underscores the portfolio, which shall not contain Chinese characters, spaces and special characters; directory name if possible in English as a guide, not as a last resort Do not use Pinyin as a directory name, experience has shown that directory with the name of Pinyin often even a month after themselves fail to understand it,
Scripting
We should have a consistent style of the script overall concept, meaning one month before and one month after you write the script style consistency, as well as with a working group of different developers to write scripts to maintain consistent style, because it is impossible for us never isolated development, you always have the potential and three months before their cooperation (your customer demands revision), often in different studios and colleagues developed a project, there may be asked to revise the development of service personnel The script, of course, you could have dropped a project to later colleagues.
1. html definitive document template:
<html>
<! --
Generator: Sub Design Studio (www.eastline.net.cn)
Creation Data: 2000-8-1
Original Author: eastline
-->
<head>
<title> Document title </ title>
<meta Http-equiv="content-type" content="text/html; charset=gb2312">
<meta Name="author" content="eastline">
Other meta marker
<link Rel="stylesheet" type="text/css" href="style/style.css">
Style sheet definitions client Javascript function definition and initialization
</ Head>
<body Bgcolor="#ffffff">
……
</ Body>
Added:
In order to ensure the next generation of Web site with standards-compliant xml web page, all the HTML tag attributes to a single or double quotation marks enclosed in quotation marks, that is, we should write <a href = "url"> rather than <a href = url >.
2. Allow full-text search pages, in order to make the Internet search engines can effectively search, in the Channel Home of the html <head> </ head> Keywords and should be included among Description meta tags, for example:
<meta Name="keywords" content="东方新干线,汽车,买车">
<meta Name="description" content="东方新干劲线,全球中文汽车信息第一站">
3. css document format sample code:
<style Type="text/css">
<! --
P (text-indent: 2em;)
body (font-family: "10 lines." Font-size: 9pt; color: # 000000; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px)
Table (font-family: "10 lines." 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: "10 lines." Font-size: 10.5pt; line-height: 20px; color: # 0099FF; letter-spacing: 5em)
-->
</ Style>
Here is particularly noteworthy that a: link a: visited a: hover a: actived the order must strictly as the above sample code, it will be more or less the problem. In addition, we provided the first re-defined, pseudo-category Secondly, the definition Finally, the ease of their own and others to read!
To ensure that different browsers on the name the same, the series points pt proposed to use to define and pixel px, and the general use of Chinese pt 9 pt 10 lines and 11 pt, commonly used Chinese px 10 lines and 12 px 14.7 px is optimized name, bold words bold or 10 lines, and the general selection of 11 pt 14.7 px more appropriate name.
Writing <table> mutual nested, in strict accordance with the norms for a separate <table>, <table> <tr> alignment, indent <td> 2-byte characters spaces, if in <td> have nested forms <table> 2-byte characters are indented spaces, if <td> In the absence of any nested forms </ td> marked the end should be <td> in the same line, not-for-line,
If we paid attention to the source code should not be in this 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 equivalent to that for a space-byte characters, the above non-standard wording inadvertently increase equivalent to a space-byte characters, if indeed there are a byte characters need to increase space, it should be written like this:
<td> <img Src="../images/sample.gif"> </ td>
Belong to the same level of <table> necessarily Zuoshou Alignment, and allowed nothing in the empty cells exist, equivalent to a high degree of greater than 12 cells should px In "td> and </ td> between writing 1, if the Height is less than 12 px, they should be and In "td> </ td> 1 * is inserted between the size of a transparent gif picture, it is because certain browsers that empty cells and would not be illegal explained. If the code sequence more chaos, can be adopted in DW3 command-> apply souce formatting to rearrange!
5. Width and height wording also have a unified standard, under normal circumstances only a form, write width In "table> labels, only his party forms height write In" table> labels, and more and more out of line forms, width and height, or write in the first line of the first column <td> labels. In short follow one principle: there is no more than one control with a cell size of the height and width to ensure that no one width and height are effective, that is, you change any code in a width and height values, which should be in browser see change. Not easy to do this one needs a longer period of time to practice and reflection.
General principles
1. Arranged forms, please all of you should carefully ponder the best programmes, as far as possible forms of control in the three-tier nested within, and should be avoided as far as possible <colspan> <rowspan> two marks, experience has shown that these two markers will bring many troubles.
2. A website to try to avoid a large table with the whole, all the elements are nested in the form of large, because the browser Element in the interpretation of the pages, are forms for each unit, if a page is Nested in the form of a big, it was very likely that the consequences is that when surfers at Knock, he must first face a blank for a long time, and then all of the content of the sites at the same time. If this to be done, please use <tbody> markings to be able to make the big block forms show.
3. Typesetting, we often encounter the need to indent the first line treatment, or do not use the entire space angle to achieve the desired effect, and standardized practices in the style sheet is defined in the p (text-indent: 2em;) and then to each section add <p> markings attention to, under normal circumstances, please do not omit </ p> marked the end.
4. Principle, we prohibit the use of <img width =? Height =?> Anthropogenic interference with the picture to show that the size, and the proposed labelling <img> Do not bring width and height two properties, it is because the production process, the picture often require repeated changes to avoid human intervention picture showed the size, as far as possible, play the function of the browser itself, but a side effect of this web site is not loaded when the picture, the picture will not leave stations size , may result in the process of loading pages in jitter (if inserted in the picture is a fixed size in the table, will not have this phenomenon), particularly when the larger picture, this phenomenon will be very obvious, When this will be expected to lead to significant jitter of the website will happen, we must be requested in the final attached to <img> width and height attributes.
5. Play to the maximum level of the browser automatic typesetting functions, in a period of complete text advised not to use <br> sub manual intervention.
6. Text between different languages there should be a box-byte characters, but to avoid the symbol before and the first bullet after the end of the symbols of Chinese characters except between the punctuation to use the whole angle punctuation, English letters and numbers in square brackets around the brackets should be used byte characters.
7. Name all the style sheet should be used to achieve, in the pages of a prohibited <font size =?> Marker.
8. Please do not appear in the Web page for more than one also minimize the use of the entire space angle (English character set, the entire space will be turned into hash angle), blank should make full use of text-indent, padding, margin, hspace, vspace gif and transparent picture to achieve.
9. Mixed in English, we will be in English and as far as possible the number defined as verdana and arial two fonts.
10. Spaced propose percentage definition used is the value of the two-spaced line-height: 120% / 150%.
11. Site in the path of all the relative path, the general link to a directory the default document links path not write full name, if we do not have this: <a href = "aboutus / index.htm"> should be this way : <a href="aboutus/">
12. Embedded graphics text of the use of larger fonts, graphics is not recommended to include in the text.
13. "Page size" is defined as page size of the sum of all documents, including HTML documents and all the embedded object. Users want faster rather than novelty site. The demodulator users, page size maintained at 34 K Following is appropriate.
File naming principle
1. Each directory should contain a default html files, with a unified index.htm
2. Uniform with the name of the English lowercase letters, numbers, and underscores combination.
3. Guided by the principle of naming First, make your own thinking and working groups for each of the members to facilitate understanding of the significance of each document, and the second is when we used in the folder "by name Pai case of" order, with a categories of documents can be arranged together, so that we find, modify, replace, and so on calculating load operation.
4. Below the "news" (which includes "Domestic News" and "World News") to illustrate this column html document naming principles:
☆ created in the root directory under the directory news
☆ first news of the default name index.htm
☆ all belong to the "national news" news were named: china_1.htm, china_2.htm,…
☆ all belong to the "international news" news were named: internation_1.htm, internation _2.htm,…
☆ If the file is the number of double-digit, please previous nine documents named: china_01.htm, china_02.htm to ensure that all the documents in the folder in the right sort.
5. Picture naming several norms guided by the following principles:
☆ name into craniocaudal February 2 parts separated by underscores.
☆ said that the first part of the big picture of this nature, such as advertising, signs, menus, buttons and so on.
☆ general:
Placed at the top of the page advertisements, decorative patterns, such as rectangular picture we named: banner
Signs of the picture we named: logo
Not in a fixed Position on the page and links with the small picture we named button
In a certain position on the page in a row, the nature of the same picture we have of links column name: menu
Decorative pictures we named: pic
Non-title picture links that we name: title
In accordance with this principle and so forth.
☆ tail section to the specific meaning of that picture.
☆ Below are a few sample, we should be able to see a picture to understand the significance of:
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.
- HTML primary Guide List
- HTML Image primary Guide
- HTML forms Senior Guide
- HTML tags and attributes of the Semantic
- The evolution of HTML
- Guide to HTML primary links
- Analysis Html page: HTML Parser trial
- HTML High statement Guide
- HTML ? ?-? ?
- Html file in the introduction of other html document Methods
- HTML paragraphs primary Guide
- HTML Tutorial - HTML basic structure
- Intermediate HTML form guide
- HTML text Senior Guide
- HTML Video Tutorial: HTML basic structure
- HTML Tutorial - HTML entry
- Beginners Guide to HTML - HTML document as a whole
- Intermediate HTML tutorial Javascript
- Html ? W ? W ? HTML?Z ?
- Why should discard the HTML
Programmers, for the web2.0 you do?
Web2.0 related programmers What happened? Not long ago, when I tried to persuade a Web programmer in-depth study Web2.0, failed. The reason is that the failure of the other side that is a Web2.0 up by artificial speculation is illusory term. This is no...
SEO Study: search engine optimization in the pr value problems
Many of the search engine optimization (seo) technology to interested friends I consulted pr value of the issue, I am now on to talk about the detail (Note: seo already has basic knowledge of friends do not need, this content only search engine optimization for beginners). What...
Dreamweaver MX 2004 Video Collection Guide (112)
Set 112: identification of links to websites Course Objectives: To determine the link structure of Web site Curriculum points: Web site links to the structure of the tree structure of links, links stellate structure, the general use of the two structures will be in...
Chinese version of the Flash 8 Video Guide (15) help
Article 15 sets: help Curriculum points: Chinese version of the Flash 8 Video Guide, a total of 20 sets, and lead you to experience and learn new features Flash 8 new features! [Full-screen viewing] | [download video] <EMBED QUALITY=high
PLUGINSPAGE="http...
Web2.0 impetuous when I walked from 1.0
Heat, heat up! If who do not have Internet blog, which are also blog at least heard of, if not heard. Like it just like aliens landing To the Earth. Apart from the blog, called Hula pull a bunch of people hanging 2.0 flag started a new ro...