Web design specification and scripting language specification

xiaoxiao2021-03-06 90

Improve the design and production of web design, speed up information construction, standardization of web design and production is a very important job, the following web design and production specification for your reference. First, run the environment 1. Web Page Making Software Platform: Web Page Make DREAMWEAVER 4.0 or higher by DREAMWEAVER 4.0 or more. 2 . Web browsing software: Browse Software recommends Netscape, Internet Explorer 4.0, and above. 3. The screen size of the web page: When making a web page, the resolution setting of the display can be 800 * 600 or 1024 × 768. Second, the home page connection method 1. After the completion of the homepage, after the deputy leadership review consent (the information security is responsible for the information provider), an application is proposed to the company's business and information centers. 2 . The information center will open a virtual WWW directory on the primary server based on the actual needs and the ability to provide services. 3. The company's homepage is managed by the technical director, and the web design and production center is unified, and each page information is regularly provided by the information department. 4. Unified management with the company's link on the homepage. 5. The web design production center regularly notifies the user to the webpage connection. Third, the requirements of the home page 1. When making a homepage, don't use ShareBorder, this feature and counter consisting of web pages to unify the settings. 2 . Web production allows design tools such as JavaScript or VBScript language, Java, CGI, Peel. 3. All pictures are best placed in the Image directory for managing and maintenance. 4. Specifies a special person responsible for the production, maintenance of the homepage, and is responsible for the security, correctness and accuracy of the information. 5. Technical Center regularly produces technical training for web pages. In addition, it is also quite important for the overall specifications of a commercial information website, and is summarized as the following: 1. Navigation specification * The fixed information that appears in each page * Content includes: Home, Website, Site Map, Contact Feedback, search tool, common problem solution, actual content column (including related site link, news page) * Column If an icon is used, you should have a text description to avoid image expression. * Do not make a button without any link content * Pure text LIKE uses common colors. Avoid using special colors at the link. Standard, striking colors should be used. * Each page should include: Copyright and website administrators ** Each page should include arrows representing "Return" or "advance". II. Website Frame 1. Website Introduction * Background Introduction * Column Introduction (Provided) 2. Site Map * Structure Diagram (Provision Connection) 3. Contact Page * Website Administrator's E- Mail address (E-mail responsible for adding other functions as needed) * Communication address, contact, fax, phone number, etc. 4. Feedback Forms Reasons: * Name: * Gender: * Occupation: * Unit Address: * Contact: * Suggestions: (According to the actual adjustment, strike and effective) 5. Actual content, And column setting requirements * There is a related content in each page. Especially when you want to sell a product, you must use detailed content and image carefully. * The language on the page is as easy as possible. * Highlights special content with symbols, don't excessive, keep the page simple.

* Don't build your site into a simple online company introduction, properly publish industry information. 6. FAQS (FAQ) * Links all the questions on the top of the page and links each issue with the answer. * Interpretation of professional terms and technical terms. * Answer the commonality to save the time and energy of network management and visitor. 7. Searching Mechanisms * Type a keyword or phrase in the search box, after clicking the search button, the list of webpages related to this site will appear on the screen. * Follow the instructions for finding. 8. News * Fill a bright small icon while the latest update information - "New!". * Create a separate page for the latest message and place the news in the appropriate directory after a while. * Fill a line of words under the home page or each page, indicating that this site or each individual page is updated last time. 9. Relevant Links (related site link) * Provides other websites to provide more information. * Each link makes a brief description and elaborates the cause of the link. * Periodic access to each link site, delete those dead sites. ** Create a plain version for your site. III. VI Standardization Requirements * LOGO and Chinese and English Standard Fonts (including Application Examples) * Website Standard Color (including Extended Example) * Link Icons (Size Pixels: 88x31 / 468x60) Two (including application examples). IV. Web page production technology Require * Main page to write (home page to write on enterprise English name)
* Main Page field facilitates search engine lookup.
* long width value and alt attribute, making users who cannot view the map can also read the page.
* Take care of a low version browser at the same time as the most popular browser.
Make different pages for different browsers to get as many browsing as possible.
* Try to use widely supported technology. The page adapts to different screen resolutions.
* Do not use too little font
Do not use too much picture, animation, sound
Do not use too long scrolling

where the specific regulations are as follows:

network logo specification

When designing LOGO, various conditions for the application have made corresponding specifications, and have a reality of the overall construction of the guide website. Specific logo's standard color, design may be applied to the appropriate background coloring system, anti-white, to formulate LOGO minimal display size under the premise of LOGO, formulate color, auxiliary ribbon, etc. Easy to make Banner and other applications. Also, attention should be noted that the edges of the text should be clear, the word is not allowed to overlap. Also consider the logo vertical effect, consider arrangement as a background.

A network logo should not only consider the display effect on the designer's high-resolution screen. It should take into account the overall development of the website to a height to promote the effects required to promote activities, making it in various media. It can also play a full visual effect; at the same time, it should be used to give most of the sense of viewer.

Therefore, logo should take into account the monochrome effects, anti-white effects in paper medium such as fax, newspaper, magazine, in the fabric, in the body, the metal, the metal, the metal Effect, wall stereo modeling effect, etc.

Network graphic specification:

1, in the same page, there should be no three or more animations. (Except for friendship link advertisement)
2, try to use a large picture, the graph is more than 100K, the thumbnail must be used, and it is created with a click to enlarge.
3, a page page of the 56K modem fully displayed waiting time must not be greater than 30s.
4, use the JPG format (JPG compression ratio 6) when the graphic file size is reduced (> 128 colors), and the color is moderated (<128 color) when the graphic color is rich (> 128 color).
5, when a web page places a plurality of pictures, the graphics are arranged neatly, and the graphical height of the horizontal row is consistent, and the vertical graphical width is consistent.
6, when using pictures, there should be illustrative text so that the picture is not displayed for viewers.
7, the text content in the graphics is correct, the text is clear.
8, graphics and web pages must be fully integrated. (Consider using web security if necessary.)
9, graphic creative and beautiful, harmony, in line with customer corporate culture.

Code of network text and table:

10, processing text in the web page, prohibiting direct copying of the text in the Word, and then paste the text to the notepad. When the user has no special requirements, the general Chinese characters use the Song, and the English numbers use Arial, Japanese uses MS Ming Dynasty.
11, the table in the processing web page, prohibiting direct copying of the table in the Word in Word, should be made in web page production software. In the empty cell, you should insert some points as the background color of the web page, so that the form is more beautiful in the browser.
12, all the webpages of the website must be consistent (including text size, framework, color, etc.), web background color must be defined.
13, you must use a CSS style sheet to define the entire website style.
14, the text is correct, the paragraph level is clear, and the first line of Chinese paragraphs is indented in two Chinese characters or directly browse directly with the words.

Network Compatibility:

15, web page design should take into account the compatibility of IE and Netscape browsers. Domestic users can first consider IE browser, the United States, and Japanese users must make two browsers to browse.
16, the web page design should take into account the compatibility of different locales, and set the language properties correctly.
17, take care of the display effect of the desktop resolution of 800 × 600, 1024 × 768.
18, use the scroll bar as little as possible in the home page, and the horizontal scroll bar is prohibited.

Network logo:

19, each page clearly shows the name and product graphics of the customer company.
20, the title of each web page is clear. It is recommended to use "Welcome to the ×× Company website" to prohibit "new page" or "untric Document" words.
21, the web copyright information is clear. Home Copyright Information Recommendation Using the following format:

best viewed with IE4.0, resolution: 800 × 600.
Copyright? 001 ××××××, all right reserved.
Designed by AmayOnline.

If there is a need to use Chinese recommended using the following format:

It is recommended to use 800 × 600 screen resolution and IE4.0 or above browser to browse this site
Copyright: ××××××××××××××× Company website production Maintenance: AMAY

Note: Copyright information uses small font (9pt), ×××××× to the customer name, the company's English name can be used for domain (xxx.com) instead. Amayonline hyperlinks to http://amayonline.myrice.com. "Best Viewed with 800 × 600", "Recommended 800 × 600 Screen Resolution" is only available when 800 × 600 is available on the page. The web page is only available for 1024 × 768 as a corresponding correction. Use the words "IE4.0" when the web page is only available for IE.

22, unfinished web pages will be used in the "page is under construction ..." or "the homepage is building ...", and fill the web copyright information.
Website Structure:
23 to ensure that the hyperlink of the email address is correct.
24, the hyperlink between the documents must use a relative path, and the super link is correct.
25, the file name naming specification of the web page must use English lowercase letters, numbers or underscores.
26, the web page storage folder must be clear, the website root directory file is only placed index.htm or index.asp, and the HTML file and graphic file should be stored separately. Various language versions should also be stored separately. If there is a special effect, you must explain in the Readme.txt file.

General 论

This specification is both a development specification and a scripting language reference. This specification is not a provision that must be strictly complied with it. In special cases, it is necessary to use it. However, please don't change the specification at will. If you have any questions, please contact me in time, I will change the sample samples and documents of this specification in time.

Based on

1. Open the images Common Temp in the website root directory, open the Media subdirectory,, in the image directory, such as the company's logo, Banner strip, menu, button, etc .; set CSS, JS, PHP, including public files such as CSS, JS, PHP, and include; TEMP subdirectory release customers, etc. Original information; Media subdirectory is placed in Flash, AVI , Quick Time and other multimedia files.

2. In the root directory, you should follow the column structure of the homepage, to open a directory for each column, and open an image and media's sub-directory in each column to place this. Columns proprietary pictures and multimedia files, if this column is particularly versatile, all of which are divided into many subordinate columns, and other directories can be opened accordingly.

3. The file in the TEMP directory will often be more, it is recommended to set the directory for the name of the name to finish the information provided by the customer.

4. Unless there is special case, the directory, the name of the document is all under small-sized English letters, numbers, the next line combination, it may not contain Chinese characters, spaces, and special characters; directory naming, please try to guide, If you don't have to use the pinyin as a directory name, experience prove, the directory named by pinyin is often not understood by one month,

script Writing

We should have a conceptual concept of a script, meaning it is a month after a month before you write the script style, as well as the same The script style prepared by different developers in the Working Group is consistent, because we can't develop forever, you can cooperate at any time (your customers ask for revision), and often want to be with the studio Different colleagues jointly develop a project, and may be required to modify the scripting developed by retired personnel, of course, you may also throw a colleague from a project.

1. General Template for HTML file:

<-
Generator:! Sub Design Studio (http://www.eastline.net.cn)
Creation Data: 2000-8-1
Original Author: Eastline
->

document title</p> <p>Other Meta Tag REL = "Stylesheet" Type = "TEXT / CSS" href = "style / style.css"> style table defines the client JavaScript function definition and initialization operation ... Supplement: In order to ensure the website can be able to be with the next generation Web language XML standard is compatible, all of the HTML tags must be enclosed in single quotes or double quotes, ie should be written instead. 2. Allow full-text search, in order to enable search engines on the Internet to effectively retrieve, in channel The html of the home page should be added to the Keywords and Description meta tags, for example:</p> <p>. Sample code for CSS file: ??? This is especially noted here is A: Link A: Visited A: HOVER A: ActiveD's arrangement order must strictly follow the sample code above, otherwise or more problem. In addition, we specify the first, pseudo-class, and the final, easy to read it with others! In order to ensure that the font size on different browsers is consistent, the font size is recommended to define points PT and pixel PX. PT usually use the Chinese Song's 9PT and 11PT, PX usually use Chinese Song 12PX and 14.7px this is an optimized font size. When the black body or the Song body is bold, the font size of 11pt and 14.7px is generally selected. ???</p> <p>When nested each other, strictly follow the specification, for a separate one</p> <p>For example,</p> <p>Align</p> <p>Indening two half-way spaces, if there are nested forms, it should be like this: ??? This is because the browser considers that the wrap is equivalent to a half-horned space, the above irregular write method is equivalent to increasing a half angle Space, if there is a need to add a half-way space, you should write: ??? belongs to the same level</p> <p>Also moisture two half-way spaces, if</p> <p>There is no nested form in any nest, the end mark should be</p> <p>In the same line, don't change, if we pay attention to this code in the source code: 5. Width and Height's writing also have a unified specification, in general, only one column form, Width is written</p> <p>It must be left-aligned, and there is no empty cell that does not allow any content, the height greater than or equal to 12px should be</p> <p>And write one if height is less than 12px, it should be</p> <p>And insert a transparent GIF picture between 1 * 1 size because some browsers believe that empty single-collaboration is illegal without explaining. If the code sequence is more chaotic, you can re-organize it in DW3!</p> <p>Inside the label, only one line of forms, Height written in tags, pay attention, in general, please do not omit the tag. ? 8. Please do not have more than one in a row in the web page, do not use less spaces (under English character set, all corner spaces will become garbled), blank should try to use Text-Indenter as much as possible as much as possible, MARGIN, HSPACE, VSPACE, and Transparent GIF picture is implemented. 9. In the Chinese and English mix, we are asleep as much as possible as Verdana and Arial. 10. Bacout proposal is defined by percentage, the value of the commonly used linear spacing is line-height: 120% / 150%.? 11. The path in the website uses a relative path, generally link to a certain directory. Default file The link path does not have to write a full name. If we don't have to do this: should be like this:? 12, embedding graphic text, using large fonts, it is recommended not to include text in the graphics. 13. "Web Size" is defined as the sum of all file size, including HTML files and all embedded objects. Users like fast rather than novelty sites. For demodulator users, the web page is maintained at 34k or less.</p> <p>Delin, the name of the file? 1. Each directory should include a default HTML file, the file name is unified in INDEX.HTM? 2. Part name unified use of lowercase English letters, numbers and underscores. 3. The guiding ideology of naming principles is that every member of your own and working group can easily understand the meaning of each file. Second, when we use the "Decoction Orders" in the folder, the same Classical files can be arranged together so that we can find, modify, replace, compute loads, and the like. 4. Here, "News" (including "Domestic News" and "International News") this column to illustrate the naming principle of the HTML file ☆ Open a news directory in the root directory ☆ First default news name index.htm? ☆ All news belonging to "Domestic News" is named: China_1.htm, China_2.htm, ... ☆ All news belonging to "International News" is named: International_1.htm, INTERNATION _2.htm, ... ☆ If the file The number is two digits. Please name the first nine files: China_01.htm, China_02.htm to ensure that all files can be properly sorted in the folder. 5. The naming principle of the picture follows the following specification: ☆ The name is divided into two or two parts of the head, separated by underline. ☆ The header represents the large-class properties of this picture, such as advertisements, signs, menus, buttons, and more. ☆ General: • Place an advertisement in the top of the page, decorative pattern, etc. For a rectangle: Banner? Signature picture We are named: logo? In the page, the location is not fixed and the small image with links. Taken this name button? Picture of a link in a location on a page, our name: Menu? Decorated photo Our title: PIC? Do not have a link to indicate the title of the title: Title? Pushing in accordance with this principle. ☆ The tail portion is used to represent the specific meaning of the picture. ☆ The following is a few samples, everyone should be able to understand the meaning of the picture: 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.</p> <p>Design process specification</p> <p><1> Collect the pre-website pre-service information and the description of the website of the website planning staff, and analyze the functional situation, positioning, and preliminary column planning description. Then collect the relevant information L group discussion sitting according to the planning plan ---- Analysis website purpose and function ------ Main person in charge sign ------ Entry into the document</p> <p><2>, print the planning program to the team member, and start the design staff for design. According to the planning documentation and website design specifications, the main designers conduct the previous page design. l The person in charge of the group determined the design process time and sent task list ------ Main designers began design ----- submit audits ------ Through the main person in charge of the list <3>, according to the mode of the website And characteristics and website production regulations set the most appropriate standard style L principal person in charge and planners, major website producer custom standard style ---- Print and group membersman hand</p> <p><4>, designers conduct secondary page design work l According to website design specifications and standard styles ------ The person in charge of the group determines the design process time and distributes the order ---- Main designers began design work - ---- Submit an audit ----- Sign by the main person in charge</p> <p><5>, producer began to make work L, according to the design specifications and standard styles ------ The person in charge of the group determines the process time and send task list ----- Main producer starts content construction work --- - Coordination with procedures ------ Submit review ----- Sign by the main person in charge</p> <p><6>, program development phase L All staff began to modify work with the program</p> <p><7>, completing the website planners put all the backup files of the website and the original program, and write a website tracking report. Explain that the beginning of this website's construction work to the end of the resource used and the implementation is implemented.</p> <p><8>, QA department for testing</p> <p>Note: The main person in charge includes the person in charge of all participating website projects, each person in charge of the signed sign. All staff must be completed during the prescribed working hours, and have the right to have a certain responsibility to complete the work. After the main person in charge, no one may modify the page design work, except for special circumstances. Website planners must keep track of website construction situations and record them. Arrange task processes.</p> <p>Inside the label, multi-column table, Width and Height are written in the first line or the first column.</p> <p>Inside the label. In summary: Do not appear more than one HEIGHT and WIDTH, which guarantees any Width and Height, which is valid, which is the value of any width and height in your change, should be Change in the browser. It is not easy to do this, it takes a long exercise and thinking. First principle? 1. Before the release form, please think about a best solution, the nesting of the table is as controlled within three layers, and should try to avoid</p> <p>Two markers, experience shows that these two tags will bring a lot of trouble.</p> <p>2. A page should try to avoid using the entire list, all content is nestled within this big table, because the browser is displayed one by one in the form when the page is explained, if a web is embedded Set within a big table, then the consequences that are likely to cause, when the viewer is knocking in the URL, he must face a blank for a long time, then all the web content appears at the same time. If you must do this, please use</p></div><div class="text-center mt-3 text-grey"> 转载请注明原文地址:https://www.9cbs.com/read-122830.html</div><div class="plugin d-flex justify-content-center mt-3"></div><hr><div class="row"><div class="col-lg-12 text-muted mt-2"><i class="icon-tags mr-2"></i><span class="badge border border-secondary mr-2"><h2 class="h6 mb-0 small"><a class="text-secondary" href="tag-2.html">9cbs</a></h2></span></div></div></div></div><div class="card card-postlist border-white shadow"><div class="card-body"><div class="card-title"><div class="d-flex justify-content-between"><div><b>New Post</b>(<span class="posts">0</span>) </div><div></div></div></div><ul class="postlist list-unstyled"> </ul></div></div><div class="d-none threadlist"><input type="checkbox" name="modtid" value="122830" checked /></div></div></div></div></div><footer class="text-muted small bg-dark py-4 mt-3" id="footer"><div class="container"><div class="row"><div class="col">CopyRight © 2020 All Rights Reserved </div><div class="col text-right">Processed: <b>0.042</b>, SQL: <b>9</b></div></div></div></footer><script src="./lang/en-us/lang.js?2.2.0"></script><script src="view/js/jquery.min.js?2.2.0"></script><script src="view/js/popper.min.js?2.2.0"></script><script src="view/js/bootstrap.min.js?2.2.0"></script><script src="view/js/xiuno.js?2.2.0"></script><script src="view/js/bootstrap-plugin.js?2.2.0"></script><script src="view/js/async.min.js?2.2.0"></script><script src="view/js/form.js?2.2.0"></script><script> var debug = DEBUG = 0; var url_rewrite_on = 1; var url_path = './'; var forumarr = {"1":"Tech"}; var fid = 1; var uid = 0; var gid = 0; xn.options.water_image_url = 'view/img/water-small.png'; </script><script src="view/js/wellcms.js?2.2.0"></script><a class="scroll-to-top rounded" href="javascript:void(0);"><i class="icon-angle-up"></i></a><a class="scroll-to-bottom rounded" href="javascript:void(0);" style="display: inline;"><i class="icon-angle-down"></i></a></body></html><script> var forum_url = 'list-1.html'; var safe_token = 'EtthWmNGXppu_2BHvMc2XcoYYns7gqjZJKbPTa6SQyLqVBsTO8RDlpNJW4YZLJ7wYCtmYtNGdFllaI6Pc9RTywPg_3D_3D'; var body = $('body'); body.on('submit', '#form', function() { var jthis = $(this); var jsubmit = jthis.find('#submit'); jthis.reset(); jsubmit.button('loading'); var postdata = jthis.serializeObject(); $.xpost(jthis.attr('action'), postdata, function(code, message) { if(code == 0) { location.reload(); } else { $.alert(message); jsubmit.button('reset'); } }); return false; }); function resize_image() { var jmessagelist = $('div.message'); var first_width = jmessagelist.width(); jmessagelist.each(function() { var jdiv = $(this); var maxwidth = jdiv.attr('isfirst') ? first_width : jdiv.width(); var jmessage_width = Math.min(jdiv.width(), maxwidth); jdiv.find('img, embed, iframe, video').each(function() { var jimg = $(this); var img_width = this.org_width; var img_height = this.org_height; if(!img_width) { var img_width = jimg.attr('width'); var img_height = jimg.attr('height'); this.org_width = img_width; this.org_height = img_height; } if(img_width > jmessage_width) { if(this.tagName == 'IMG') { jimg.width(jmessage_width); jimg.css('height', 'auto'); jimg.css('cursor', 'pointer'); jimg.on('click', function() { }); } else { jimg.width(jmessage_width); var height = (img_height / img_width) * jimg.width(); jimg.height(height); } } }); }); } function resize_table() { $('div.message').each(function() { var jdiv = $(this); jdiv.find('table').addClass('table').wrap('<div class="table-responsive"></div>'); }); } $(function() { resize_image(); resize_table(); $(window).on('resize', resize_image); }); var jmessage = $('#message'); jmessage.on('focus', function() {if(jmessage.t) { clearTimeout(jmessage.t); jmessage.t = null; } jmessage.css('height', '6rem'); }); jmessage.on('blur', function() {jmessage.t = setTimeout(function() { jmessage.css('height', '2.5rem');}, 1000); }); $('#nav li[data-active="fid-1"]').addClass('active'); </script>