Website Technical Specifications

I. Preface
The purpose of compiling the "website Technology Online" website technical specifications is to provide technical specifications for website construction and maintenance, and improve the overall quality and update efficiency of the "website Technology Online" website. For this reason, I want to show you the standardization of website construction (of course, I just provide a reference ). Personal websites have their own styles and hobbies, and the existence of personality reflects the charm of the website. However, if you are too free to give full play to your website, what do you think, it will bring chaos to the future management and maintenance of the entire website. This is like before the emergence of process-oriented programming ideas,ProgramThe design is in the quagmire of disorder, and countless excellent programmers are struggling with it. Just like being drowned by it, website management and maintenance will be stuck in endless repairs.
The specifications mentioned in this article are not static and can be changed according to specific circumstances. With the development of web technology, new technical applications and specifications will also change.

Ii. Overall website Organizational Structure
To facilitate website maintenance, the following are the specifications of the overall organizational structure of the website:

1. Website Organization

A website with a good organizational structure is a website that is easy to manage. The website must be pre-planned. The naming of files and directories must comply with the requirements of the WWW server and be clear and logical. For example, the suffix of a website must be .html, rather than .htm ".
. The directory structure should not be too deep, because a directory structure that is too deep will lead to a longer URL.
. We strongly recommend that you add short comments to a page. This makes it easy to update and add webpages in the future. The comments are not downloaded to the client, and the browsing speed is not affected.
. Most pages are stored in server side include files, such as the header, navigation bar at the end, copyright information, and advertisement bar of each page. The purpose of this operation is to facilitate future changes. To change the link of the navigation bar, you only need to modify the SSI File to Improve the efficiency. Because a personal website cannot determine the SSI inclusion file by itself, it requires server configuration, so you can use the library file inclusion function provided by Dreamweaver to achieve the same effect.
. Use the external link CSS (Cascading Style Sheet) and reference CSS as <LINK rel = stylesheet "/etc/81channel.css">.
. We recommend that JavaScript or VBScript on most pages use external links. This can reduce browser readingCode.
. Do not use nested tables with more than three layers and complex tables. there are too many nested tables. The longer the browser interprets the HTML code, the longer it takes to correctly display the page. we can note that many websites first display the above part and then gradually display the following content, which is actually caused by tables.

2. directory structure

. In principle, similar content is placed in the same directory. The directory name is always named in lowercase English strings and does not contain spaces or special characters (except for underlines and dashes). It is best not to exceed 8 characters.
The root directory of the website contains the following directories:
The shared files of the library website, such as all SSI, CSS, and librsry files, are placed in the local directory.
Images shared by the website and images on the home page are stored in the local directory.
All scripts such as ASP and PHP and CGI programs on the scripts website are placed in this directory.
Zh_cn: the Simplified Chinese version of this website is placed under this directory.

The following is a detailed breakdown of the zh_cn directory structure:

Column_name the content of a channel on this website is placed in this directory (you can enter the image subdirectory such as images)

The figure on the right shows the website directory structure:
Http://go5.163.com /~ Wtonline/zh_cn/web/images/stucture.gif

Directory-level resource references must be underlined at the end of the URL to avoid server redirection and save time. For example:
<A href = "dirctory/"> next </a>

3. file and directory naming rules:

. The names of all files and directories are always in lowercase English strings and do not contain spaces or special characters (except for underlines and dashes). It is recommended that the names should not exceed 8 characters.
All HTML files are suffixed with "".htm", and the suffixes of other files are in the corresponding format, such as .php;.jpg.
. The name of a file is an English word that represents its meaning, and it is not easy to translate into pinyin keywords.

4. URL link

. Concept definition:

The absolute path link with the domain name, such:
<A href = "http://www.81channel.com/index.htm";> 81channel homepage </a>
An absolute path link without a domain name, such:
<A href = "/zh_cn/index.htm"> 81channel homepage </a>
(Note that there is "/" before the path)
Relative Path link, for example:
<A href = "zh_cn/index.htm"> 81channel homepage </a>
. This website references the relative path links used by resources within the website, and uses absolute path links with domain names to reference other resources. Do not use absolute path links without domain names, because I am not familiar with the settings of websites that provide my personal homepages, it is safe to do so.
. Other resources are linked in the form of domain names instead of IP addresses. If an IP address is required, the IP address must be a valid Internet address.
. Do not use the following link format (the SRC format of the image cannot be used ):
<A href = "file: // C % 7C/my document/test.htm"> test link </a>
---- The above link uses a file: // local drive, which is invisible to users.

5. Information Feedback

Because personal websites generally do not support ASP, PHP, or CGI caching, form submission is forced to use the form of E-mail Address link, such as: Action = "mailto: wtonline@chinese.com"

3. Page design specifications
The design of the entire page can be divided into seven parts: Website Logo, channel title, date, navigation, advertisement, content area, and copyright information.

1. Logo)

The logo is a symbol of the brand. It highlights the distinctive personality and overall concept of the website. The logo is placed in the upper left corner and the file name is \ images \ logo.jpg. Each channel can have its own logo, highlight the characteristics of the channel.

2. Channel title)

Using images, the links use hotspot map links, and you can easily set hotspot links in Dreamweaver.

3. Date

The date part is displayed programmatically using JavaScript scripts;

4. Navigation

. Navigation should be simple, clear, open, and logical. Do not use links over three layers. It is not for commercial websites to pursue PV, saving valuable time for users.
The text used for navigation should be concise and concise, and the covered range should not be too wide, and should be limited to one line.
. Make sure that each page has a link to the homepage of the website, Lee? * ** In the istory panel, do not pile up too many links so that users have no attendants.
. Highlight the latest update information. You can add the update time or new ID.
. The code of the navigation bar at the top and end of the page is put in the library file highchannel. LBI and lowchannel. LBI, which are referenced respectively.

5. Advertisement

Because this website is a personal website, you must have advertisements for websites that provide space, such as 163 and 263 logo. Try to place them in a separate pop-up window and call them as follows: window. open (para parameter table)

6. Content Area)

The body content is all defined as 9pt size (cannot be the default), the title is bold 10pt, and Its font is the default font (let the user decide ).

7. Copyright Information

Simply to avoid the following content space, adding it not only enriches the content, but also makes the website look more standard.

8. Other considerations

Design tools such as dreamweaver3.0, Flash, and Photoshop.
. The page must be compatible with two browsers, but dominated by IE. (For example, the layer technology cannot be used, and Netscape does not)
. The layout of the entire page is reasonable and balanced, but the focus must be highlighted.
. Generally, the page background is defined in a light color or solid color and directly in hexadecimal color. Do not use a color chart.
. A concise and accurate title must be defined for each page.
. Keep the HTML code clean and clear unnecessary tags automatically and manually.
. The page length <= 3 screens. We recommend that you use anchor to display the page on another page or by PAGE, and add links such as "Previous Page" and "next page ".
. Page width <= 1 screen.
. We recommend that you <60 K for the entire page size (including images) and <40 K for the HTML code to test the download time <= 15 seconds (33.6kb/s)
. The image size is less than 150 * characters, in the form of. jpg and. GIF. At the same time, images must be processed with dedicated tools such as firework, with a size of less than 6 kb.
. The image must be related to the text content, and the size of the image must be balanced with that of the content text.
. Do not activate the link of a website under construction. do not link it to a page of the "under construction" type.
. Do not use blink flag.

Iv. HTML coding specifications
We recommend that you use the H tml4.0 specification.

1. meta tag

Meta provides information available to search engines. The search engine mainly uses two attributes: Description and keywords, for example:
. <Meta name = "Description" content = "describe website features here">
. <Meta name = "keywords" content = "keyword, keyword, Etc...">
There are also three useful meta tags:
. <Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"> _ DEFINE Character Set
. <Meta http-equiv = "Pragma" content = "no-Cache"> _ disable page Cache
. <Meta http-equiv = "refresh" content = "10; url = http://www.163.com"> _ automatically redirects to the http://www.163.com after 10 seconds

2. Use of special tags

To ensure the compatibility of pages with browsers, do not use a specific browser identifier, such as marquee, layer, and nobr.

3. Frame

It is not recommended to use the frame structure, because frame is not easy to maintain and confusing to users. It is only used when using special pages such as chat rooms.

4. Table

Again, do not use too many nested tables and complex tables.
. The table definition uses pixels. Do not use percentages because the screen size is automatically adjusted.

5. Images

. The height and width of all images must be defined, and an alternative text must be added to define alt = "alternative text", and the alternative text must be consistent with the topic.
When using an identifier such as <a href =..., if the image is included, do not add a carriage return in the middle, and keep it in one row.

5. advanced WEB technology usage specifications
When using some advanced web technologies, the principle is to ensure download speed, browser compatibility, and take care of most users.

. Do not restrict the use of JavaScript or VBScript, but different browsers support it differently. Pay attention to its compatibility and perform tests.
. When copying external JavaScript, check its security.
To use CGI, you must consider its security and efficiency. Especially if you use some free CGI programs, you must first perform repeated tests.
. Cookies are used to identify, track, and support visitors. Through cookies, you can learn about the user's access path and collect and store users' preferences. However, you must use cookies to process the user's cookie closure, comprehensive solutions should be provided.
. We strongly recommend that you use flash animation, which not only produces small files, but also works well.
. Java is a cross-platform object-orientedProgramming LanguageJava applet is the main application in the Web, but the download speed of Java applet is slow, so use it with caution.
. PHP is a cross-platform server-side embedded scripting language. It compiles the PHP module into the Web server, and the execution efficiency is high. We recommend that you use it.
On the server side, it is best to enable SSI resolution, but do not use too many SSI nesting. When SSI cannot be used, you can use include library (including library files) instead, the effect is worse.
.81channel.css, an external link of the website, allows you to unify the website style and modify the style.

Vi. Quality assurance
After the website is designed, all changes are limited to the main page's text section and corresponding content details document before the revision. The content details document is changed in the Editable area of the template. Once the template is designed, all work should be performed on the template.

. Exercise caution when modifying the homepage, channel, and content details templates.

1. Channel publishing process

. Generate and edit the original document on wps2000, get Beta 1, and copy it to the clipboard.
. Open the content detail template on Dreamweaver, and press Ctrl + Shift + V to paste Beta 1. Edit the template and save it as a document.
. Open the homepage and Channel Template, fill in the corresponding document link, and save it.
. Clear unnecessary images and HTML code, and use Dreamweaver to check the link information. Do you need to check the link information?
The testing environment (that is, the server environment) is Win2000 + iis5.0 or Linux + appache environment, respectively, to test the specific performance.

2. Key test items

. Download time test, using a 33.6kb/s modem, mainly for the Home Page Test, recommended download time <= 20 seconds.
. Browser compatibility test, mainly for ie4.0/5.0 and netscape4.0 or above.
. Link test, mainly for link test during editing.
. Navigation, page layout, content validity and correctness, and other project tests.

3. website updates

Daily website updates can only use the Dreamweaver template function to ensure the standardization of page generation and concise code. (Currently, I am preparing to use PHP to compile a Content Editor, which is similar to the news editor of a commercial website. If you are interested or have relevant information, please contact me. Thank you !)
You must back up the original template when updating the template to facilitate timely recovery after errors.
When the website has changed significantly, such as the page style, navigation, and function changes, it should be backed up and tested in a timely manner.