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.
Overview
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 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, and menus. , 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 flash, avi, quick time, etc. Multimedia files.
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 with the name of 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 incomprehensible to you one month later.
When writing scripts
,we should have a consistent concept of the overall style of the script, which means that you wrote it one month later and one month ago. The scripting style remains consistent, as well as the scripting style written by different developers in the same work group, because we cannot develop in isolation forever, and you may always be working with yourself three months ago (your customer asked for a revision ), you often have to co-develop a project with different colleagues in the studio, and may be asked to modify scripts developed by people who have resigned. 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]
<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 tags
div css xhtml xml Example Source Code Example Source Code [www.52css.com]
<link rel="stylesheet" type="text/css" href="style/style.css">
Style sheet definition client Javascript function definition and initialization operation
div css xhtml xml Example Source Code Example Source Code [www.52css. com]
</head>
<body bgcolor="#ffffff">
… …
</body>
Added:
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 >.
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 home page of the channel, for example:
div css xhtml xml Example Source Code Example Source Code [www.52css.com]
<meta name=”keywords” content=”Oriental Shinkansen, cars, buying cars”/>
<meta name=”description” content=”Oriental New Kanjin Line, the world’s first stop for Chinese car information”/>
3. CSS file format sample code:
div css xhtml xml Example Source Code Example Source Code [www.52css. com]
<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>
What should be particularly noted 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 in There should be no such code in the source code:
div css xhtml xml Example Source Code Example Source Code [www.52css.com]
<td><img src=”../images/sample.gif”>
</td>
It should be like this:
div css xhtml xml Example Source Code Example Source Code [www.52css.com]
<td><img src=”../images/sample.gif”></td>
This is because the browser thinks that a newline is equivalent to a half-width space. The above irregular writing method is equivalent to unintentionally adding a half-width space. If It is indeed necessary to add a half-width space, and it should be written like this:
div css xhtml xml Example Source Code Example Source Code [www.52css.com]
<td><img src=”../images/sample.gif”> </td>
<table> belonging to the same level must be left-aligned, and empty cells without any content are not allowed to exist. Cells with a height greater than or equal to 12px should be written between <td> and </td>. If the height is less than 12px, a 1*1 size transparent gif should be inserted between <td> and </td> Picture, 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 tables, 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> and <rowspan>. Experience shows that These two marks 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 the width and height attributes in the <img> tag. This is because during the production process, the image It often requires repeated modifications, which can avoid human intervention in the size of the image display and maximize the browser's own functions; however, a side effect of this is that when the web page has not loaded the image, the site size of the image will not be reserved. It may cause the web page to jitter during loading (if the image is inserted into a fixed-size table, this phenomenon will not occur), especially when the size of the image is large, this phenomenon will be obvious, so when expected When this situation occurs that will obviously cause the web page to jitter, please be sure to attach the width and height attributes to <img> at the end.
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 use a percentage to define line spacing. The commonly used two line spacing values are line-height:120%/150%.
11. All paths in the website use relative paths, and generally link to the default file in a certain directory. The link path does not have to be 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. It is recommended to use larger fonts when embedding graphic text. Do not 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 the page size below 34K.
File naming principles
1. Each directory should contain a default html file, and the file name should be index.htm.
2. File names should be 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:
☆ 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.
5. The naming principles of pictures follow the following standards:
☆ 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.
☆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]
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