Why is the website design?

xiaoxiao2021-03-06 109

Standard era of web design: Acha

This article is a view: Follow the Web Standards for website design and improvement. Reading object: Website Designers, Web App Developer Keywords: Web Standards, XML, XHML, CSS, DOM, DOCTYPE, Accessibility Expectations The change is happening every day, when we feel that website design technology is very simple and familiar time. The concept of foreign website design standardization has already been quietly formed and quickly "spread" since 2000, most of the newly issued browser versions began to support website standards. The mainstream web editing tool also begins to fully support website standards, even some software consists entirely of XML files, such as Dreamweaver MX. Some famous large business websites began to use the website standard to rebuild (such as sports information www.espn.com), and others refuse non-standard browsers to browse their websites (such as connecting magazines www.wired.com). Many design websites (for example: www.k10k.net) and personal websites are the forerunners of standard promotion, and they have turned to XHTML CSS to build. February 4, 2004 XML1.1 recommended standards officially released, marking the standard era of website design has arrived. The situation of foreign website standards is raging, but the domestic industry seems to know after knowing the post or not interested, let's take a look at the domestic three major portal websites on the website standard:

Verification project check target website verification results code check (XHTML) (check address: http://validator.w3.org/ (htmlhelp) www.sina.com.cn failed, mixed HTML, not reached XHTML1. Yellow alert: The character set error. (Defined GB2312, but use non-GB2312 characters). Non-standard code 43. Www.163.com failed, mixed HTML, not reached XHTML1. Red Alert: Undefined DOCTYPE. Non-standard code 41. Www.sohu.com failed, mixed HTML, did not reach XHTML1. Yellow alert: character set error. Non-standard code 38. CSS2 check (check address) www.sina.com. CN 25 is wrong. Www.163.com 1 Warning, 10 errors. Www.sohu.com 1 Warning, 15 error. The verification results show that all portals are not in line with the website standard, even HTML4.0 standards It didn't follow. For example: label, in April 1998, HTML4.0 has been listed as "Deprecated" tab. But our three major portal websites There are a lot of code like . The simple list here is not criticizing these websites do not do well (in fact, most large business sites are not passing the strict correctness of W3C), there are many This situation causes this situation, such as the use of old information release system, web designer's technology and consciousness is not enough. We just want to explain that the website of the comparative list of listed companies is not realized to follow the standard, other scale teaching Small business sites are not more useful, there is not enough attention to the website standards. Let's keep up with the pace of the new era. Let's take a look at the website standard. 1. Why do we have to build a website standard? Most people have profound Experience, whenever the upgrade of the mainstream browser version, our new website may become time, we need to upgrade or re-build a website. For example, the typical "Browser Wars" in 1996-1999, in order to compatibility with Netscape and IE The website has to write different code for these two browsers. Similarly, whenever new network technology and interactive devices have, we also need to make a new version to support this new technology or new equipment, such as support mobile Internet access. WAP technology. The similar question is not worthwhile: the website code is bloated, and it is burst to waste our large amount of bandwidth; the DHTML special effects for some browser are shielded with some potential customers; the codes that are not easy to use, the disabled people cannot browse the website, etc. Wait. This is a vicious circle, a huge waste. How to solve these problems? God of insight has already Start thinking, need to establish a standard for universally identified standards to end this disorder and confusion. Commercial companies (Netscape, Microsoft, etc.) have finally recognized the benefits of unified standards, so under the organization of W3C (W3c.org), the website standard began to be established (the XML1.0 is released on February 10, 1998), and Promote the implementation of the website standard organization (WebStandards.org). Simply put, the purpose of the website standard is:

Provide maximum benefits to ensure that any website text can be easily effectively simplified for a long time, reducing construction costs to make the website easier to use, can adapt to more different users and more network equipment When the browser version is updated, or new When network interactive devices, make sure all applications can continue correctly. For website design and developers, follow the website standard is the standard; for your website users, the website standard is the best experience. Visitors Rank the world 4th, China No. 1 Sina website, also encountered non-standard DHTML issues. In the latest release of Netscape7 and Mozila 1.6 browsers, the floating ads of Sina's home failure, laminated in the lower left corner of the page. Perhaps those advertisers think that these potential users don't matter. (Screenshot Date on April 12, 2004). What is the website standard website standard is not a standard, but a collection of standards. The web page is mainly composed of three parts: structure, performance, and behavior. Corresponding standards are also divided into three aspects: structured standard language mainly include XHTML and XML, and the standard language mainly includes CSS, and behavioral standards mainly include object models (such as W3C DOM), ECMAScript, etc.. Most of these standards drafted and published by W3C, and some are standards for other standards organizations, such as ECMAScript standards of ECMA (European Computer Manufacturers Association). Let's take a brief understanding these standards: 1. Structural Standard Language (1) XML XML is a short written by the Extensible Markup Language. It is currently recommended to follow the XML1.0 issued by W3C on October 6, 2000 (www.w3.org/tr/2000/rec-xml-20001006). Like HTML, XML is also from SGML, but XML is a language that can define other languages. The purpose of XML initially designed is to compensate for the shortcomings of HTML, with powerful scalability to meet the needs of network information, and later gradually use the conversion and description of network data. The benefits of XML and technical specifications are not more to say, there are many information on the Internet, and there are many books to be referenced. (2) XHTML XHTML is an abbreviation of the Extensible Hypertext Markup Language Extensible Identity. It is recommended to recommend XML1.0 on January 26, 2000 (refer to http://www.w3.org/tr/xhtml1) on January 26, 2000. Although the data conversion capacity is powerful, it can be replaced by HTML, but in the face of thousands of existing sites, it is also time to use XML. Therefore, based on HTML4.0, we use XML rules to expand it to get XHTML. Simply put, the purpose of establishing XHTML is to achieve HTML to XML transition. 2. Performance Standard Language CSS is an abbreviation for the Cascading Style Sheets laminated style sheet. It is currently recommended that W3C recommended CSS2 on May 12, 1998 (refer to http://www.w3.org/tr/CSS2/). The purpose of the W3C creates a CSS standard is to replace the HTML table format layout, frame, and other languages. Pure CSS layout combined with structural XHTML can help designers separate the appearance and structure, making it easier for sites accessing and maintenance.

3. Behavior Standard (1) Dom Dom is an abbreviation of the Document Object Model document object model. According to the W3C DOM specification (http://www.w3.org/dom/default.htm), Dom is an interface with the browser, platform, language, so that you can access other standard components in the page. Briefly, DOM solves the conflict between Netscaped JavaScript and Microsoft JScript, gives Web designers and developers a standard approach to access the data, scripts, and performance layer objects in their site. (2) ECMAScript ECMAScript is a standard scripting language (JavaScript) developed by ECMA (European Computer Manufacturers Association). It is currently recommended to follow ECMAScript 262 (http://www.ecma.ch/ecma1/stand/ecma-262.htm). three. Following the Standard Website and Traditional Websites The traditional website is just the extension of the print media, and the design goal is to ensure consistent in the 4-6 mainstream browser versions. The usual feature is: based on the table-based layout. The content is mixed together. A typical example is the tag. Garbage code (non-standard code). Not easy to use code. Semantic incorrect code. For example, if you don't explain, you don't understand this is the meaning of font. The website with the website standard is an extensive communication communication tool that accepts a variety of users and various devices. The general feature is:

Semantic correct logo. That is, it is useful to express a meanable tag. Ensure that the code can be correctly understood in a text browser, PDAS, and search engines. Correct and effective code. The correct code is correct by the W3C code check (http://validator.w3.org/). The code is easy to use to people, the machine. Access to users and equipment can be accessed, separated by CSS. It makes the code more concise, the download speed is faster, and the batch modification and custom expressions are easier. four. The benefits and disadvantages of the website standard 1. The benefits of the website viewers:

File download and page display speed faster; content can be accessed by users (including disabilities, weak, color-blown); content can be accessed by a wider device (including screen readers, handheld equipment, search Robots, printers, refrigerators, etc.) Users can choose to customize their own performance interface All pages can provide the benefits of the website owner:

Less code and components, easy to maintain bandwidth requirements decrease (less code is more concise), and cost reduction. For example: After Espn.com uses the CSS revision, save more than two megabytes. Easier is easier to search for the search engine for easy, no change page content provides printing version without the need to reproduce the content to improve the website. In the United States, there are strict legal provisions (Section 508) to constrain government websites to reach certain ease of use, and other countries have similar requirements. 2. Disadvantage

It takes more time to study standards. Standards Note that the browser compatibility problem is used to implement some performance but stronger than the table. How to improve our existing websites Our designers are still using traditional table layouts, manifestation and structures that are mixed together. Learning to use XHTML CSS requires a process that makes existing websites in accordance with the website standards. The best way is to gradually enter, staged to gradually meet the target of the website standard. If you are a newbie, or is not very familiar with the code, you can also use the standard editing tool, such as Dreamweaver MX 2004, which is currently supporting the most complete tool for CSS standards. 1. The primary improvement is the correct Doctype for the page, many designers and developers don't know what is doctype, and doctype is used. DOCTYPE is the discument type's shorthand. Mainly used to explain what version you use XHTML or HTML. The browser explains the page code based on your DTD defined by your DOCTYPE. So, if you don't pay attention to setting the wrong Doctype, the result will make you very shocked. XHTML1.0 provides three doctype options: transitional Strict profile (strict) Frameset For our primary improvement, as long as you choose a transitional statement. It can still be compatible with your form layout, express identity, etc., not allowing you to think too much, it is difficult to master. Tip: You are too lazy to enter the above transitional code, you can access the home page of http://www.macromedia.com/ website, then view the source code, copy the same code as the HEAD area to paste it.

Set a namespace (Namespace) Directly add the following code directly behind the DOCTYPE: A Namespace is a detailed product of the collection element type and attribute name DTD, NameSpace declaration allows you to identify your namespace through an online address. Just simply input the code.

Declare your coding language In order to be properly explained by the browser, all XHTML documents must declare the coding languages they use. The code is as follows: The encoded language here is Simplified Chinese GB2312, if you need to make traditional content, you can be defined as BIG5.

Writing all labels XML with lowercase letters is sensitive to case sensitive, so XHTML is also different from cases. All XHTML elements and properties must be written. Otherwise your document will be considered invalid by the W3C check. For example, the following code is incorrect: Company Profile </ title> The correct way of writing is: <title> Company Profile </ Title> The same, <p> change to <p>, <b> change to < B> and so on. This conversion is simple. Add the alt property for the picture to add Alt properties for all images. The Alt property specifies that the replacement text is displayed when the picture cannot be displayed, so that the normal user can have no, but it is critical to the plain text browser and the user using the screen reader. Only the ALT property is added, the code will be passed by the W3C correctness. Note that we have to add meaningful ALT properties, like this is meaningless: <img src = "logo_unc_120x30.gif" alt = "logo_unc_120x30.gif"> Correct Works: <img src = "logo_unc_120x30.gif "alt =" UNC company logo, click back home "/></p> <p>Give all attribute values in HTML, you can add quotes to attribute values, but in XHTML, they must be quoted. Example: Height = "100" instead of Height = 100.</p> <p>Close all labels in XHTML, each open tag must be turned off. Just like this: <p> Every open tag must be turned off. </ p> <b> HTML can accept the non-closed standard, XHTML is not. </ b> This rule can avoid HTML chaos and trouble. For example: if you don't close the image tag, a CSS display problem may occur in some browsers. Use this method to ensure that the page is displayed as you design. It should be noted that the empty tag is also turned off, and a positive slash "/" is used in the tail of the tab. For example: <br /> <img src = "WebStandards.gif" /> After the above seven rules are processed, the page is basically in line with XHTML1.0 requirements. But we also need to verify that it is really in line with the standard. We can use W3C to provide free verification services (http://validator.w3.org/). Improve the error after the error is found. In the list of resource lists, we also provide additional verification services and the URL for the verification, which can be supplemented as a W3C check. When I finally passed the XHTML verification, I congratulated you have taken a big step to the website standard. It's not that difficulty imagined! 2. Intermediate improvement Next our improvement is mainly in the separation of structures and performance, this step is not as easy to achieve in the first step, and we need to transition on the concept, and learning and use of CSS2 technology. But learning any new knowledge requires some time, isn't it? The trick is to do while doing. If you have been using the form layout, I haven't used CSS at all, nor I have to hurry to say goodbye to the form layout, you can use the style sheet to replace the Font label. As you have learned, the more you can do. Ok, let's take a look at what we need to do:</p> <p>Using CSS Defining Elements We have developed habits when writing logo, when you want the font to use <H1>, you want to add a point symbol in front to <li>. We always want <h1> meaningful, <li> means a dot, <B> means "bold text". In fact, <h1> can become anything you want, through CSS, <H1> can become small fonts, <p> text can become huge, bold, <li> can become A picture, etc. We can't force the performance of the structural elements, and we should use CSS to determine the appearance of those elements. For example, we can make the original 6-level title that can look like: H1, H2, H3, H4, H5, H6 {Font-Family: Song, Serif; Font-size: 12px;} Replace the structured element Significant spam Many people may never know that HTML and XHTML element design is intended to express structures. Many of us have become accustomed to control performance with elements, not structures. For example, a list of content may use the following identity: sentence one <br /> sentence 2 <br /> sentences three <br /> If we use a unordered list instead: <ul> <li> sentence One </ li> <li> sentence 2 </ li> <li> sentence three </ li> </ ul> You may say "But <li> shows a dot, I don't want to use a circle." In fact, CSS does not set an element looks like, you can completely turn off the dot with CSS.</p> <p>Adding an ID to a form or form to a form or form, for example, <table ID = "menu"> Next, you can create a "menu" when writing style sheets. The selector and associates a CSS rule to tell the table unit, how to display all other elements. In this way, there is no need to bring some extra, wide, align, and background color, etc. of the performance layer of each <TD> tag. Only one adhered tag (tag "Menu" ID tag can be required to perform a special performance layer in a separate style table for a clean, compact code tag. Intermediate improvement of us three main three points, but there is a lot of content and knowledge points, we need to learn and master them gradually until the final implementation of CSS without using any form to implement layout. It is limited to this paper to guide the promotion, not disclosing. Finally, we need to add an additional introduction to the ease of use of the website. It is easy to use and the website standard has a standard connection. Like the website standard, it is to allow our website to accept more user access. . In 1990, W3C established Web Accessibility Initiative (WAI), providing website builders to implement accessibility methods and policies (http://www.w3.org/wai/gl/). The strategy of improving ease of use and research interaction design (recommended VB's parent Alan Cooper book) can improve your development technology and open vision. Improve you as a professional web designer's value, making you more competitive. This is the goal that every website owner and each designer or developer must work hard.</p> <p>six. Website standard resources 1. Website standard http://www.zeldman.com/ http://webstandards.org/ http://webstandardsgroup.org/ http://www.nypl.org/styleGuide/ 2. There is a semantic code http://brainstormsandraves.com/articles/semantics/structure/ 3. Validation http://validator.w3.org/http://www.htmlhelp.com/tools/validator/http://webboy.net/pesentation/validation.cfm 4. Accessibility http://www.joeclark.org/http://www.accessify.com/http://www.juicystudio.com/5. Style sheet CSS http://webboy.net/pesentation/ICT2004/01.htmhtp://webboy.net/pesentation/ICT2004/02.htmhttp://webboy.net/presentation/ICT2004/03.htmhtp://westciv .com / style_master / academy / css_tutorial / http://css.maxdesign.com.auhttp: //www.thenoodleincident.com/tutorials/css/6. Example site (XHTML CSS) http://www.macromedia.com/http://www.k10k.nethttp://www.fyrebase.com/http://www.interruefit.com/http://pixeltable .com / http://www.fishmarketing.net/ attached. References and website Jeffrey Zeldman (http://www.zeldman.com/) Works "Design With Web Standards", the book has been introduced by the Electronic Industry Press and will release the Chinese version. Max Design articles: "! The benefits of Web Standards to your visitors, your clients and you" Mark Pilgrim "Dive Into Accessibility" http://diveintoaccessibility.org/ web standards organization http://www.webstandards.org/ website Standard group http://www.webstandardsgroup.org/ Transfer from: http://www.9cbs.net/websiterefactory/</p></div><div class="text-center mt-3 text-grey"> 转载请注明原文地址:https://www.9cbs.com/read-99566.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="99566" 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.035</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 = 'kNYCdnl1wN3ckhhD6PWlZYWvOKiNstYzqZP4qSYy_2FRhXTSnKPog9oTtc5tglmXEyXvdkO8SmN2md2CebZfJfCw_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>