Before making a website look at these good web pages technical specifications

Source: Internet
Author: User
Tags character set lowercase naming convention root directory
Specification | Web page Naming conventions

The principle of file naming: To achieve the most understandable meaning with the fewest letters.

general file and directory naming conventions:

Each directory should contain a default HTML file, the file name unified with index.htm file names unified in lowercase letters, numbers and underscores of the combination;

Try to translate the words into English names. For example: feedback (feedback), AboutUs (about us);

Multiple files of the same type are named with a number of letters, separated by _ between letters and numbers. For example: news_01.htm. Note that the number of digits is proportional to the number of files, not enough to be filled with 0. For example, there are 200 news articles, of which the 18th is named news_018.htm

naming conventions for pictures:

The name is divided into 22 parts and ends, separated by an underscore.

The head section represents a large class of properties for this picture. For example: placed at the top of the page ads, decorative patterns, such as rectangular pictures we named: banner; The iconic picture we named: logo; the small picture on the page that is not fixed and has a link is named button; it appears continuously on the page, The same nature of the link column of the picture we name: menu; we name it: pic; a picture without a link to represent the title we name: Title according to this principle and so on.

The end part is used to indicate the specific meaning of the picture, expressed in English letters.
Example: 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.
There are onmouse effects of the picture, two separate in the original file name plus "_on" and "_off" named.

other file naming conventions

The naming principle of JS is in the name of the functional English word.
For example: Advertising bar js file name: ad.js; all CGI file suffixes are CGI. The configuration file for all CGI programs is config.cgi.

directory Structure Specification

The principle of directory establishment: Provide the clearest and easiest access structure at the lowest level.

The name of the directory is made up of lowercase letters and underscores. (Refer to the naming convention);

The root directory typically stores only index.htm and other required system files;

Each main column to open a corresponding independent directory;

The images in the root directory is used to store the common picture that each page uses, the images directory under the subdirectory holds the private picture which uses in this column page;

All scripts such as js,asp,php are stored in the scripts directory under the root directory;

All CGI programs are stored in the Cgi-bin directory under the root directory;

All CSS files are stored in the root directory in the style directory;

Each language version is stored in a separate directory. For example: Simplified Chinese GB;

All flash, AVI, RAM, QuickTime and other multimedia files are stored in the media directory under the root directory.

Dimension Specification

Size specification Please adjust according to your actual situation: The page standard is produced according to 800*600 resolution, the recommended size is 766*430px;
The page length in principle does not exceed 3 screen, the width does not surpass 1 screen;
Each standard page is A4 format size, that is, 8.5x11 inches;
Full size banner is 468*60px, half size banner is 234*60px, small banner is 88*31px, and 120*90,120*60 is also the standard size of small icon;
Each non-homepage static page contains no more than 60K of picture bytes, full size banner no more than 14K.

Home Code Specification

Home code key in the head area, head area refers to the first page HTML code Company Copyright Note <!---The site is designed by Yourcompany,inc 03/2001--->
Web page display character set for example:
Simplified Chinese: <meta http-equiv= "Content-type" content= "text/html; charset=gb2312 ">
Traditional Chinese: <meta http-equiv= "Content-type" content= "text/html"; Charset=big5 ">
English: <meta http-equiv= "Content-type" content= "text/html"; Charset=iso-8859-1 ">
Original producer Information <meta name= "author" content= "webmaster@yoursite.com" >
About <meta name= "DESCRIPTION" content= "Here's a brief introduction to your website" >
Search keyword <meta name= "keywords" content= "keyword 1, keyword 2, keyword 3,..." >
CSS specification for Web pages <link href= "Style/style.css" rel= "stylesheet" type= "Text/css" >
Page Title <title> here is your page title </title>
The head area can optionally add an identity
Sets the expiration time for the page. Once the page expires, it must be reopened on the server.
<meta http-equiv= "Expires" content= "Wed Feb, 1997 08:21:57 GMT" >
Prevents browsers from accessing the contents of the page from the local computer's cache.
<meta http-equiv= "Pragma" content= "No-cache" >
To prevent others from calling your page in the frame.
<meta http-equiv= "Window-target" content= "_top" >
Automatic jump.
<meta http-equiv= "Refresh" content= "5; Url=http://www.yahoo.com ">
5 refers to the time to stay 5 seconds.
Web Search Robot Wizard. Used to tell search bots which pages need to be indexed and which pages don't need to be indexed.
<meta name= "Robots" content= "None" >
The parameters of the content are all,none,index,noindex,follow,nofollow. The default is all.
Favorites Icon
<link rel = "Shortcut Icon" href= "Favicon.ico" > all JavaScript scripts try to take external calls
<script language= "javascript" src= "Script/xxxxx.js" ></SCRIPT>

CSS Writing specification

All CSS as far as possible using external calls
<link href= "Style/style.css" rel= "stylesheet" type= "Text/css" >
The first to be redefined when writing, and secondly, to customize the last (where A:link a:visited a:hover a:actived to be written in order) to make it easy for you and others to read.
In order to ensure that the size of different browsers are consistent, the size of the proposed point pt and pixel px to define, PT general use of the Chinese song body of the 9pt and 11pt,px generally use the Chinese song Body 12px and 14.7px This is the optimized font size, bold text or italicized word bold, Generally choose the size of 11pt and 14.7px is more appropriate.

CSS recommendation template.

<style type= "Text/css" >
<!-
p {text-indent:2em;}
Body {font-family: "XXFarEastFont-font-size:9pt"; color: #000000; margin-top:0px; margin-right:0px; margin-bottom:0px; margin-l eft:0px}
Table {font-family: "Song body"; font-size:9pt; line-height:20px; color: #000000}
a:link {font-size:9pt; color: #0000FF; Text-decoration:none}
a:visited {font-size:9pt; color: #990099; 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: #FF9900; Text-decoration:none}
. Blue {font-family: "XXFarEastFont-Arial"; font-size:10.5pt line-height:20px; color: #0099FF; letter-spacing:5em}
-->
</style>

Body ID

To ensure browser compatibility, you must set the page background <body bgcolor= "#FFFFFF" >
Code of Image Design
The CI overall image of the website includes the following elements:

logo (logo)

The website must have an independent logo;

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.