DIV+CSS production of professional information Web site specifications

css| specification

Professional information website Production Code

I. Navigation requirements

Every page on this site appears
Content includes: Home, Site Introduction, Site view, contact, feedback, search tools, FAQs, the actual content column (including related site links, news page)
If the column uses the icon, the following should be accompanied by a text description to avoid the image expression is not clear.
The form of a button without any linked content
Plain text like with common colors. Avoid using special colors at the links. You should use a standard, eye-catching color.
The buttons corresponding to the pages displayed on the screen should be grayed out, highlighted, or otherwise represented.
Each page should include: Copyright and site Administrator's e-mail address.
Each page should include an arrow that represents "return" or "forward".

two. Content Requirements

1. Introduction to the website

Background information
Section introduction (Provide connection)

2. Site Map (website structure map)

Structure diagram (provide connection)

3. Contact page

e-mail address of webmaster (e-mail if required to join other functions)
Mailing address, contact person, fax, telephone number, etc.

4. FEEDBACK Forms (Feedback form) reasons:

Name:
Age:
Occupational:
Unit:
Contact Method:
Comments and Suggestions:
According to the actual adjustments to the above, and strive to be concise and effective

5. Actual content, and column setting requirements

Include relevant, compelling content on every page. Especially when you want to sell a product, each page should be carefully decorated with detailed content and images.
The language on the Web page is as easy to understand as possible.
Use the symbol to highlight particularly important content, not too much, keep the page concise.
Do not put your site into a simple online company introduction, the appropriate release of industry information.

6. FAQs (Frequently asked questions)

List all issues on the top of the page and link each question to the answer.
Explain the terms and technical terminology of the profession.
Answer generic questions to save network management and visitors time and effort.

7. Searching mechanisms (search tool)

Type the keyword or phrase in the search box, and after clicking the Search button, the list of pages associated with this site will appear on the screen.
Description of the effective search.

8. The Press

Add a bright little icon on the latest updated information-"New!" ”。
Create a separate page for the latest news, and place the news in the appropriate directory for a period of time.
Add a line of text below the home page or each page to indicate when the site or each individual page was last updated.

9. Relevant links (related site links)

Provide links to other web sites to provide more information.
Make a brief description of each link and explain why it was linked.
Make regular visits to each linked site on a weekly basis and delete those dead sites.
Create a plain text version of your site.

Three. VI Standardization requirements

Logo and Chinese and English standard fonts (including application examples)
Site standard colors (including extension examples)
Link icon (size pixels:88x318x60) two each (including application example)

Four. Web page production Technology requirements

Main Page to write title (home page to write the name of the enterprise in English)
The main Page Meta field is easy for search engines to find.
The long width and ALT attributes of IMG Allow users who cannot see the graph to read the page.
The most popular version of the browser is the standard, while taking care of the lower version of the browser. Make separate pages for different browsers to get as much browsing as possible.
Try to use widely supported technology. The page adapts to different screen resolutions.
Do not use a small font
Do not use too large a picture, animation, sound
Do not use the too long roller screen

The specification and management of website design Engineering

With the development of the Internet, Web site production as an industry has been quietly rising, more and more Web site production tasks need to complete the web production company, more and more problems appear in the process of making the site. For example: Cannot finish the production on schedule, can not make the customer satisfied, the expense exceeds the budget and so on. After careful analysis of the reasons, it is found that most of the reasons for failure have the following points:

A. Ignoring the changing needs of customers;

B. No historical documents are retained for decision-making purposes;

C. Ignoring the progress of monitoring projects;

D. Neglect of ongoing testing and modification;

E. No use of professional project management software, subjective decision-making.

Problem found, is there a good solution to reduce errors, control and management of Web site production?

Web development and production is a very complex work, you can consider it as a project to manage. The author refers to the international and domestic project management data, found that the software engineering management methods and norms and site construction projects closest to, so we carefully study software engineering, according to the characteristics and focus of website construction, a set of Web site construction management and control methods, named as the site project (WebSite Project referred to as WP).

Website Engineering

What is the website project, simply said is the website project management and the control method; is a special, standard operating procedure. The purpose of establishing the website project is to ensure the high efficiency, high quality and low risk of website construction.

The implementation of the website engineering standards not only benefits the customers, but also makes the website production industry tend to standardize, it will benefit everyone related to the industry, including project manager, web Designer, programmer and editor.

Below, according to a project from negotiation to submit the completion of the order to introduce:
1. Project Establishment/customer's demand specification

1.1. Project Establishment

We received the customer's business consulting, through the continuous contact and understanding between the two sides, and through the basic feasibility discussion enough, the preliminary conclusion of the production agreement, then need to project. It is preferable to set up a dedicated project team comprising: Project manager, Web design, programmer, tester, editor/document, etc. The project is implemented by the project manager system.

1.2. Customer's demand specification

The first step is to require customers to provide a complete description of requirements. Many customers are not very clear about their needs, and need your constant guidance and help analysis. Once upon a time, I asked the customer: "What is the purpose of your website?" He replied: "No purpose, just because others have, I did not!" ”。 Such customers need to be patient, careful analysis, digging out his potential, real needs.

With the customer to write a detailed, complete requirements will be spent a lot of time, but it is worthwhile, but also must let customer satisfaction, signature recognition. Put this off, you can eliminate a lot because of the lack of demand or understanding of deviations caused by errors and project failure. Poor requirements say there is no way to have high-quality Web sites. So what is the requirement specification to achieve? To put it simply, include the following points:

A. Correctness: Each function must clearly describe the function of the delivery;

B. Feasibility: Ensure that each requirement can be realized in the current development capability and system environment;

C. Necessity: Whether the function must be delivered, whether it can be postponed, and whether it can be "chopped off" in the event of a reduction in expenditure;

D. Simplicity: Do not use professional networking terminology;

E. Detection: If the development is completed, customers can be tested according to requirements.


2. Overall design of the website

In getting the customer's requirements, it is not directly to start production, but to the overall design of the project, detailed design, a website construction program to customers. The overall design is a very critical step. It mainly determines:

A. What functions the website needs to implement;

B. What software is used in Web site development, and in what hardware environment;

C. How many people and how much time is required;

D. What are the rules and standards that need to be followed?

At the same time, you need to write an overall planning manual, including:

A. The website's columns and sections;

B. The functions of the website and the corresponding procedures;

C. Link structure of the website;

D. If there is a database, the conceptual design of the database;

E. Web site interoperability and user-friendly design.

After the overall design out, generally need to give customers a website construction program. Many web-making companies are asked to provide solutions when they engage in business. At that time the plan is generally more general, and in the case of customer demand is not very clear circumstances to submit a program, often and actual production results will be very different. Therefore, we should try to obtain the understanding of customers, in the clear demand and overall design after submitting the program, so that both sides are beneficial. The website construction plan includes the following parts:

A. Analysis of customer situation;

B. Goals and objectives to be achieved in the Web site;

C. website image description;

D. Section and structure of the website;

E. The arrangement of the content of the website, mutual link relation;

F. Use of software, hardware and technical analysis notes;

G. Development time schedule;

H. Outreach programmes;

I. Maintenance programme;

J. Production costs;

K. Company Profile: Successful works, technology, talent description, etc.

When your program through the customer's approval, then congratulate you! You can start making a website. But it's not really a production, you need to design it in detail.


Attached: The pricing method of foreign websites

How to set the website price? For those small businesses, the price is too high, they will scare away, drive too low, they do not get profits. Because of the disorderly nature of the industry competition, the price of the domestic now strange, there are 1000 yuan to make the entire business site, there are 2000 yuan a sharp knife to a page. How does a foreign web-making company specify the price of a website?

The first is based on employee wages, various costs, profit margin to calculate the cost of work per hour, namely: Total Price = salary + Cost + Profit

An example is provided:

Suppose the company's monthly salary is 5000 yuan, the cost is 5000 yuan, the hope profit margin is 20%, January working time is 22*8=176 hours, according to the survey, the general web production company has 20-40% time is not working time. The actual work time is

176* (1-25%) =132

Therefore, the cost per work hour is:

(5000+5000) * (1+20%)/132 = 90.90 yuan

When you understand the cost of work per hour, the price is in your mind. Foreign common quotation method is divided into three kinds: Package method, time method, project evaluation method.

Package method: Also called page method, specify a clear number of pages, image number, link number, function and so on. This approach is most versatile, but not a good one, because the explanation is vague in terms of page pricing: (

Time method: is calculated according to the hourly cost. However, this method is often challenged and rejected by clients, which is difficult to implement.

Project Evaluation method: The whole project is split into a small job, assess the skill difficulty of the work, calculate the completion time, and then according to the hourly cost pricing.

Related articles: Brief discussion on the management and regulation of website engineering (the next)

Website Detail Design

The overall design phase presents a solution to the problem in a more abstract and generalized manner. The task of the detailed design phase is to materialize the solution. The detailed design is mainly for the program Development Section. But this stage is not to really write the program, but to design a detailed specification of the program. This specification is similar to the engineering blueprints often used by engineers in other engineering fields, which should contain the necessary details, such as: Program interface, form, data needed, etc. Programmers can write the actual program code based on them. (not detailed here to expand the description)

1. Overall image Design

At the same time as the programmer, the Web designer began to design the overall image and homepage of the website.

The overall image design includes standard words, logos, standard colors, advertising language and so on. Homepage design includes layout, color, image, dynamic effect, icon and other style design, also include banner, menu, title, copyright module design. Home General design 1-3 different styles, completed, for customers to choose.

Remember: After the customer determines the home page style, please sign the customer approval. No further changes to the layout style will be considered as a second design.

2. Development and production

Here, programmers and web designers at the same time into the full development phase, need to be reminded that testers need to test the Web page and the program at any time, found that the bug immediately recorded and feedback changes. Do not wait until the complete completion of the test, which will waste a lot of time and effort. The project manager needs to constantly understand the project schedule, coordinate and communicate with the programmer and the Web designer's work.

3. Debug and Perfect

After the initial completion of the site, upload to the server, the site for a full range of testing. including speed, compatibility, interactivity, link correctness, program robustness, hyper-flow test, and so on, found problems in a timely manner and recorded.

Why do you want to record documents? In fact, the software engineering itself is a document, is a continuous enrichment and perfect standards. By constantly discovering problems, solving problems, modifying and supplementing documents, this standard is becoming more and more standardized and more and more industrialized. In turn, the development trend of Web site norms, the trend is reasonable.


4. Publicity and promotion

The basic methods of publicity and promotion are:

A. The appropriate meta tags are set in the Web page;

B. Each search engine login;

C. The preparation of press releases in the news bulletin board published;

D. Reasonable use of email mailing list;

E. Advertising strip exchange;

F. Paid advertising.

At this point, the website project completed, will be related to the Web site, the use of operating instructions, such as documents submitted to customer acceptance. If maintenance is required, a separate maintenance item will be signed.

(attached) Maintenance

After the successful launch of the site, long-term maintenance work has just begun, we need to do is:

A. Timely response to customer feedback, for example, you can take the email automatic reply function, and then solve the problem in 1-3 working days, reply again;

B. Web site traffic statistics analysis and corresponding countermeasures;

C. To maximize and use your Web site;

D. timely updating and maintenance of website content.

1. Website Directory specification

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

A. root directory. The root directory is the directory where the index file that the DNS domain name server points to is stored. The root directory is only allowed to store index.html and main.html files, as well as other required system files;

B. Each language version is stored in a separate directory;

C. Each main function (main menu) to establish a corresponding independent directory;

D. When the page is over 20 pages, each directory is stored in its own separate images directory. The shared picture is placed under the images directory under the root directory;

E. All JS files are stored in the root directory of the unified directory script;

F. All CSS files are stored in the style directory under each language version

G. All CGI programs are stored in the root directory of the Cgi_bin directory

2. File Naming conventions

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

A. Index file unification uses index.html file name (lowercase). index.html files are unified as "bridge pages" and do not make specific content, just as jump pages and Meta tab pages. Main content page is main.htm;

B. The menu picture name is translated as the name of the menu name in English. For example:

About Us AboutUs

Feedback Feedback

Products Product

All the single English word file names must be lowercase, all combinations of English Word file name second from the first letter capitalized;

C. All file names are underlined between the letters

D. The picture naming principle is in the name of the picture English letter. The size principle writes Ditto.

E.js's naming principle is in the name of a functional English word. For example: Advertising bar js file name: ad.js

F. All CGI file suffixes are. cgi.

3. Link Structure specification

The principle of link structure: Use the least links to make browsing most efficient.

The first and first level of the page with a star-like link structure, level and two pages between the tree-like link structure. More than level three pages, set the navigation bar at the top of the page.

4. Dimension specification

A. The page standard is produced according to 800*600 resolution, the actual size is 778*434px

B. Each standard page is A4 format size, that is, 8.5x11 inch

C. Large banner for 468*60px, small banner for 88*31px

The head area refers to the content between the < head> and of the home page HTML code.

Tags that must be added:

A. Corporate Copyright notes



B. Web page display Character set

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 ">

C. Web page creator information

< META name= "author" content= "webmaster@webjx.com" >

D. Introduction to the website

< META name= "DESCRIPTION" content= "xxxxxxxxxxxxxxxxxxxxxxxxxx" >

E. Search keywords

< META name= "keywords" content= "xxxx,xxxx,xxx,xxxxx,xxxx," >

F. CSS specification for Web pages

< LINK href= "/style/style.css" rel= "stylesheet" type= "Text/css" >

G. Web page title

< title>xxxxxxxxxxxxxxxxxx

Written in the last

The above is only the experience of Web teaching network and summary of experiences, and emphasis on the design aspects. Site Engineering is a complex and comprehensive norms, there are many aspects and details need to constantly improve and standardize, such as: Site Engineering risk control, website project Quality Management and personnel assessment, project decomposition and distribution, website marketing planning and so on. Hope that through here to attract more Web site project managers to participate in the discussion, contribute their own experience and insights, so that our industry more mature, more standardized.