Translator's Preface: This series of original articles contains a total of 8 articles. It starts with the popularization of Web Standards and describes how to use Dreamweaver 8 to build a standards-compliant Web. Since the original author's article is a review of "Build Your Own Standards Compliant Website Using Dreamweaver 8" (This article is a paid excerpt), so I have appropriately deleted the content. The order is consistent with the original article, but the length will be adjusted. I hereby inform you. The translation level is limited, please understand.
If you are reading this article, you are probably already interested in Web standards and are very curious about the application of standards in sites built with DW (short for Dreamweaver).
Maybe you already have a certain understanding of WS (short for Web Standards), but you don't know how to use DW to write compatible code. Or you are a DW user and you would like to comply with WS, use CSS more extensively, and create more user-friendly documents. No matter which type you are, this article will give you the answer you want: tell you how to use DW to handle WS.
Definition of Web Standards
As far as WS that we are concerned about throughout this article, let us first take a moment to clarify what we are talking about:
WS are specifications that guide Web development languages and are formulated by the W3C. These specifications include multiple languages, such as HTML, XHTML and CSS, as well as some other related languages, such as MathML, which are used to represent equations in mathematics. When you have such special needs, you may be able to use them. . The W3C also publishes the Web Content Accessibility Guidelines (WCAG) - which promote the accessibility of web pages (via WAI).
Tip: Get these guidelines directly
.You can read these guidelines on the W3C's website, although they
Sometimesit
's abit
difficult to
read
:
HTML
4.01
There is no need to read too much W3C documentation.
Who needs WS?
You may have only a vague idea that WS is a good thing, but many sites - including many well-known sites - do not comply with WS, and they do seem to be well managed. So, why should we strive to comply with WS? Are there any real benefits to doing so? Who needs WS? Who needs to pay attention to W3C specifications and recommendations?
The first group of people who need to pay attention to WS are us, web
developers and designers
:Developers and designers of website construction. Is it worth it for us to spend time learning how to develop with WS?
Clean markup makes bug fixes faster.
If you validate your pages with the W3C, at least you'll know that irregular markup isn't the cause of the errors you've experienced. Sometimes, the process of validating a page and fixing errors found can clear up problems in display caused by unending elements or misspelled tags.
Even if verifying your document does not fix the problems, at least you will know that the problems exist in the canonical document. Now that you know this issue is not a bug, you can start focusing on other issues, such as differences in CSS handling in different browsers.
Complying with accessibility requirements is easy.
If you write a canonical XHTML markup, then you can ensure that the document is semantically correct, and you can separate the content of the document from the presentation, you can make a lot of work Addresses many of the accessibility issues listed in WCAG1.0. It’s also important to recognize that accessibility isn’t just for people with disabilities. A friendly site can be accessed by many different devices, such as mobile phones and PDAs, which do not have the processing power to deal with scattered and non-standard markup.
Forward compatibility
If you only consider the performance of your newly developed page in the current browsers, then how can you ensure its performance in new browsers in the future? The new browser may change your page The display is terrible, and you're left struggling to find and fix annoying problems.
Complying with WS will not completely eradicate this problem; however, standards compatibility greatly reduces the risk of your design failing, and today's browser software companies are also beginning to support standards. They may accidentally misinterpret some part of the specification, but they cannot completely disapprove of it. If the worst happens and a new browser produces strange effects on your standardized site, it's much easier to fix it than an incompatible site. If you encounter a problem, it will also affect other standards-compliant sites. The collective wisdom of the web community will point this out and write articles to address it. Therefore, everyone collectively discussed that it is easier to fix this BUG in a compatible document than in an incompatible document.
Easier Refactoring
Have you ever had to strip the text out of a site and refactor it? And start all over again. Have you ever seen those labels that are cluttered with font labels and tiny table cells (that make us have to start from scratch)? All I know is that I have, and it's a long process, a lot of time and money All burned by the refactoring of this site.
Separating the content and presentation of a document gives you the beauty of standards compliance: it means that the next time someone wants to refactor the site, they don't have to copy out the Web document. All text in the site will be marked up with semantic (X)HTML, and all presentation information - which is what the webmaster wants to change - will be stored in an easily replaceable CSS file.
Some clients won't wait for it to be refactored before they start asking you to make some changes. They'll wait until they've visited the Mammoth Fossil Pit and then ask you to say, "Just move the left column to the right." For a For standardized compatible sites, all pages are controlled by CSS. You can easily move the tags on the page without having to think about tricks in many pages with complex tables as structures. This makes changing page layout easier.
Separating structure from presentation can also make it easier to add new elements, such as a high-contrast, small-image version of a site that may be more attractive to some viewers. Why create separate text-only versions of pages when you can easily change style sheets?
Browser software companies
Browser software companies are starting to pay attention to WS. In the past, browser software companies added their own proprietary tags and attributes to the basic language. But now, like never before, they are all beginning to comply with the standards, and some of the latest browsers are already making an effort to display them according to (X)HTML and CSS as defined in the specification.
In the foreseeable future, browsers will be able to display most non-standard markup and code, because if they don't, thousands of non-standard sites will not be displayed properly - and then the public is likely to start Blame the browser, not the web designers. However, other devices (those without the processing power of desktops) will rely more heavily on standardized compatibility of the code they encounter.
Authoring Tool Software Vendors
Authoring tool software vendors—such as Macromedia, which makes Dreamweaver—are also beginning to comply with WS, as are Web designers, for example, as more and more of their customers require that these authoring tools output canonical markup. Originally, these visual development environments did not have a good reputation because they produced confusing, non-standard markup; however, the latest major visual development environments have invoked standardized elements of compatibility and accessibility, which has also become a Main selling point. Software vendors must listen and respond to market needs.
Web Users
Users of the sites we design also benefit from our adoption of WS, even if they don't realize it! Perhaps they are unconsciously using sites developed specifically for today's popular browsers. If these users switch to another browser, they may find that the online experience is no longer enjoyable because those proprietary tags will not be accepted by the new browser. A standardized and compatible site performs well in different browsers, whether it is existing or future browsers.
Additionally, a website that follows accessibility recommendations will be more approachable to users who find browsing the web unsatisfactory. The Web should provide more convenient shopping, reading, and searching conditions for those with visual impairments or other disabilities. They should not be prevented from browsing a site because it uses proprietary tags or other exclusive (referring to browser) technology.
How can we ensure the correct use of WS when
using WS
? What can we do to comply with the standard?First, we should comply with the specification. This means that we should only use those elements and attributes defined in the specification and avoid using certain browser-specific attributes, such as IE's marquee tag and Netscape's blink tag. Also do not use elements that appeared in earlier specifications (such as HTML 3.2) or that were removed from later specifications.
Create a canonical XHTML document
In this article, we will use XHTML, so we will follow the W3C's XHTML 1.0 recommendations [according to the W3C, Recommendation means specification]. XHTML is basically the latest version of HTML, and it is designed to replace HTML, the web markup language. Although it is an HTML variant of XML, XHTML is almost identical to HTML, with subtle differences that we will discuss later in XHTML and Semantics.
You can generate an XHTML document through the New Document dialog box in Dreamweaver (File>New...). Make sure that Base Page is selected in the Category list, and then select HTML from the Base Page list, as shown in Figure 2.1, "Creating a new XHTML document in Dreamweaver." You can then select any document type from the drop-down list.
Figure 2.1: Creating a new XHTML document in Dreamweaver
Figure 2.2: Displaying the new XHTML document in code view
Click "Create" to generate a new document. Click the code button at the top of the document window and go to the "code view". You can clearly see what code is included in a simple XHTML document. As shown in Figure 2.2, the first line of the "Display new XHTML document in code view"
document will display the following content
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: //www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">This
is called a document type declaration, or DOCTYPE. As the name suggests, DOCTYPE declares what your document is - which (X)HTML specification you are complying with. In this example, we are following XHTML 1.0 Transitional, which is the default setting for DW 8. The Transitional section tells us some additional information about the XHTML version. XHTML1.0 has three "flavors": Strict, Transitional, and Frameset. DW uses the Transitional type by default, and if you want to insert a frame into the document, it is Frameset.
XHTML Strict is the strictest XHTML format, as you can probably guess. A Strict document type looks like this:
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">If
you are using a Strict DOCTYPE, then you cannot use it in the document Any element (tag) or attribute that declares deprecation cannot be used in frames. Declared deprecated elements will be removed in a future version of XHTML. Many of these elements are used to control the appearance of the page, which can be completely replaced by CSS. The biggest difference between Strict and Transitional is that when using Strict DOCTYPE, the attributes and elements that you thought could be used for performance are greatly restricted.
Note: Using Strict DOCTYPE in DW
DW is not very strict in complying with the standard. If you use Strict DOCTYPE, pay special attention to validating your document and correcting irregular attributes. Basically, it's easy to replace them with CSS.
Frameset DOCTYPE supports the use of frames. If you insert a frame into the document, DW will automatically use this type. The frame page should be related to at least two other pages, and there is no limit on the document type of the related pages. The code of Frameset DOCTYPE is as follows:
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
HTML 4.01 also provides these three "flavors" of document types - Transitional, Strict and Frameset - they operate exactly the same as the XHTML DOCTYPEs mentioned above. If you use either type, you must indicate this in the HTML (not XHTML) document. We will discuss the differences between HTML and XHTML in depth later in the section on creating a website.
Original: Dreamweaver 8 Does Standards ! by Rachel Andrew
Compiled: x5