CSS web page layout can also be regarded as a systematic work. The development of DIVCSS website may be completed by multiple people in collaboration and by a team. This involves many normative operation issues. Even if it is developed by one person, a certain amount of knowledge is required. Organized and standardized, this is an article reprinted from Blue, which is very effective. The author has summarized a lot of practical experience, and everyone can refer to it and learn from it. Summary This specification is both a development specification and a scripting language reference. This specification is not an immutable provision that must be strictly observed. It must be used flexibly and certain modifications made under special circumstances. However, please do not change the specifications at will. If you have any questions, please contact me in time and I will promptly change the relevant code samples and documents of this specification. Basic requirements 1. Open three subdirectories of images common temp in the root directory of the website, and then open a media subdirectory as needed. The images directory contains public images that are used by pages in different columns, such as company logos, banners, menus, and buttons. Etc.; the common subdirectory contains public files such as css, js, php, include, etc.; the temp subdirectory contains various text, pictures, and other original materials provided by customers; the media subdirectory contains multimedia files such as flash, avi, quick time, etc. . 2. In principle, a directory should be opened for each column in the root directory according to the column structure of the homepage. If necessary, a subdirectory of images and media should be opened in the directory of each column to place the pictures and media exclusive to this column. For multimedia files, if this column has a lot of content and is divided into many subordinate columns, other directories can be opened accordingly. 3. There are often many files in the temp directory. It is recommended to open a directory named by time to classify and organize the information provided by customers one after another. 4. Unless there are special circumstances, the names of directories and files should all use a combination of lowercase English letters, numbers, and underscores. Chinese characters, spaces, and special characters must not be included. Please use English as a guide when naming directories. Do not use pinyin unless absolutely necessary. As a directory name, experience has proven that directories named with pinyin are often difficult to understand even a month later. Scripting We should have a consistent concept of the overall style of the script, which means that the style of the script you wrote one month later is consistent with the style of the script you wrote a month ago, and that the style of the script written by different developers in the same work group is consistent, because we cannot Developing in isolation forever, you may be collaborating with yourself three months ago at any time (your client requires a revision), you often have to develop a project with different colleagues in the studio, and you may also be asked to modify people who have resigned. Developed scripts, of course, you may also leave a project to subsequent colleagues. 1. Universal template for Html files: div css xhtml xml Example Source Code Example Source Code [www.52css.com] Other meta tags div css xhtml xml Example Source Code Example Source Code [www.52css.com] Style sheet defines client-side Javascript function definition and initialization operation div css xhtml xml Example Source Code Example Source Code [www.52css.com] Replenish: 2. For pages that allow full-text retrieval, in order to enable effective retrieval by search engines on the Internet, Keywords and Description meta tags should be added between the <head></head> of the html on the homepage of the channel, for example: div css xhtml xml Example Source Code Example Source Code [www.52css.com] 3. CSS file format sample code: div css xhtml xml Example Source Code Example Source Code [www.52css.com] What needs special attention here is that the order of a:link a:visited a:hover a:actived must be strictly in accordance with the above sample code, otherwise more or less problems will occur. In addition, we stipulate that redefinition comes first, pseudo-classes come second, and customization comes last, making it easier for yourself and others to read! In order to ensure that the font size is consistent on different browsers, it is recommended to define the font size in points pt and pixels px. pt generally uses 9pt and 11pt in Chinese Song Dynasty, and px generally uses 12px and 14.7px in Chinese Songti. This is an optimized font size, boldface or When bolding Song fonts, font sizes of 11pt and 14.7px are generally more appropriate. When writing <table> to nest each other, strictly follow the standard. For a single <table>, <table><tr> should be aligned, <td> should be indented by two half-width spaces, and if there are any other For nested tables, <table> is also indented by two half-width spaces. If there is no nested table in <td>, the closing tag of </td> should be on the same line as <td>, without line breaks. As we note, there should be no such code in the source code: div css xhtml xml Example Source Code Example Source Code [www.52css.com] Instead it should look like this: div css xhtml xml Example Source Code Example Source Code [www.52css.com] This is because the browser thinks that a newline is equivalent to a half-width space. The above irregular writing method is equivalent to adding a half-width space unintentionally. If it is really necessary to add a half-width space, it should be written like this: div css xhtml xml Example Source Code Example Source Code [www.52css.com] <table> belonging to the same level must be left-aligned. In addition, empty cells without any content are not allowed to exist. Cells with a height of 12px or more should be written between <td> and </td>. If the height is less than 12px, a 1*1 transparent gif image should be inserted between <td> and </td>. This is because some browsers consider empty cells illegal and will not interpret them. If the code order is chaotic, you can rearrange it through command->apply souce formatting in DW3! 5. There are also unified standards for how to write width and height. Generally, for tables with only one column, width is written in the <table> tag; for tables with only one row, height is written in the <table> tag; for tables with multiple rows and multiple columns Table, width and height are written in the <td> tag of the first row or column. In short, follow one principle: there should be no more than one height and width that control the size of the same cell. Ensure that any width and height are valid. That is, if you change the value of any width and height in the code, it should be in Changes are seen in the browser. It is not easy to do this, it requires a long time of practice and thinking. General principles 1. Before arranging the table, please think carefully about the best solution. Try to control the nesting of tables within three levels, and try to avoid the two tags <colspan> <rowspan>. Experience shows that these two A mark can cause a lot of trouble. 2. A webpage should try to avoid using an entire large table. All content is nested within this large table, because when the browser interprets the elements of the page, it displays them one by one in units of tables. If a webpage is embedded If it is placed in a large table, the likely consequence is that when the visitor types in the URL, he will first face a blank space for a long time, and then all the web content will appear at the same time. If you must do this, use the <tbody> tag so that the large table can be displayed in chunks. 3. In typesetting, we often encounter the need to indent the first line. Do not use or full-width spaces to achieve the effect. The standard approach is to define p { text-indent: 2em; } in the style sheet and then add each paragraph <p> tag, please note that under normal circumstances, please do not omit the </p> closing tag. 4. In principle, we prohibit using <img width=? height=?> to artificially interfere with the size of the image display, and it is recommended not to include width and height in the <img> tag Two attributes. This is because during the production process, pictures often need to be modified repeatedly. This can avoid human intervention in the size of the picture display and maximize the browser's own functions. However, a side effect of this is that when the web page has not loaded the picture, When the image is added, the site size of the image will not be left out, which may cause the web page to be Jitter during loading (if the picture is inserted into a fixed-size table, this phenomenon will not occur), especially when the size of the picture is large, this phenomenon will be obvious, so when it is expected that this will be obvious When the situation that causes the webpage to jitter occurs, please be sure to attach width to <img> at the end. and height attribute. 5. In order to maximize the automatic typesetting function of the browser, please try not to use <br> to manually intervene in the segmentation of a complete text. 6. There should be a half-width space between words in different languages, except before the header symbol and after the tail symbol. The punctuation between Chinese characters should be full-width punctuation, and the brackets around English letters and numbers should use half-width brackets. 7. All font sizes should be implemented using style sheets, and <font size=?> tags are prohibited from appearing on the page. 8. Please do not have more than one consecutive space in the web page and use full-width spaces as little as possible (under the English character set, full-width spaces will become garbled characters). Use text-indent, padding, margin, hspace, vspace and transparency for white space. gif pictures to achieve. 9. When mixing Chinese and English, we try our best to define English and numbers as verdana and arial fonts. 10. It is recommended to define line spacing in percentage. The commonly used two line spacing values are line-height:120%/150%. 11. All paths in the website use relative paths. Generally, the link path to the default file in a certain directory does not need to be written in the full name. For example, we do not have to do this: <a href=”aboutus/index.htm”> but should be like this :<a href=”aboutus/”> 12. Use larger fonts when embedding text in graphics. It is recommended not to include text in graphics. 13. "Web page size" is defined as the sum of the file sizes of all web pages, including HTML files and all embedded objects. Users prefer sites that are fast rather than novel. For modem users, it is appropriate to keep page size below 34K. File naming rules 1. Each directory should contain a default html file, and the file name should be index.htm. 2. The file name should use a combination of lowercase English letters, numbers and underscores. 3. The guiding ideology of the naming principle is to enable yourself and every member of the work group to easily understand the meaning of each file. The second is that when we use the "sort by name" command in a folder, the same Large categories of files can be arranged together so that we can search, modify, replace, calculate load, etc. 4. The following uses the column "News" (including "Domestic News" and "International News") to explain the naming principle of html files: 5. The naming principles of pictures follow the following standards: ☆The tail part is used to express the specific meaning of the picture. ☆ Here are a few examples. You should be able to understand the meaning of the pictures at a glance: div css xhtml xml Example Source Code Example Source Code [www.52css.com]
<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">
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body bgcolor="#ffffff">
… …
</body>
In order to ensure that the website is compatible with the next generation of web language XML standards, all HTML tag attributes must be enclosed in single quotes or double quotes, that is, we should write <a href="url"> instead of <a href=url >.
<meta name=”keywords” content=”Oriental Shinkansen, cars, buying cars”/>
<meta name=”description” content=”Oriental New Kanjin Line, the world’s first stop for Chinese automobile information”/>
<style type="text/css">
<!—
p { text-indent: 2em; }
body { font-family: "宋体"; font-size: 9pt; color: #000000; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px}
table { font-family: "宋体"; 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: "宋体"; font-size: 10.5pt; line-height: 20px; color: #0099FF; letter-spacing: 5em}
–>
</style>
<td><img src=”../images/sample.gif”>
</td>
<td><img src=”../images/sample.gif”></td>
<td><img src=”../images/sample.gif”> </td>
☆ Create a news directory in the root directory ☆ The first default news item is named index.htm
☆ All news belonging to "domestic news" are named in order: china_1.htm, china_2.htm, …
☆ All news belonging to "International News" are named in order: internation_1.htm, internation _2.htm, …
☆ If the number of files is two digits, please name the first nine files: china_01.htm, china_02.htm to ensure that all files can be sorted correctly in the folder.
☆ The name is divided into two parts, the first and last parts, separated by underscores.
☆ The header part indicates the general nature of the image, such as advertisement, logo, menu, button, etc.
☆ Generally speaking:
We name the rectangular pictures such as advertisements and decorative patterns placed at the top of the page: banner
We named the iconic picture: logo
We name the small picture with a link that is not fixed on the page button
We name the pictures of link columns that appear continuously at a certain position on the page and have the same nature: menu
We named the photo for decoration: pic
We name the image without a link to indicate the title: title
Follow this principle and so on.
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