Welcome!

Adobe Flex Authors: Matthew Lobas, PR.com Newswire, Shelly Palmer, Kevin Benedict

Related Topics: Adobe Flex

Adobe Flex: Article

Creating Standards-Compliant Web Pages with Macromedia Dreamweaver MX 2004

Future-proofing your code

The Dreamweaver validator looks at the DOCTYPE declared at the beginning of the document and checks it for errors against that DOCTYPE. Because we chose to write XHTML Transitional, the results panel wouldn't indicate any errors even if we used deprecated tags such as <font> and <b>. However, if we change the DOCTYPE to XHTML strict, the validator would find our errors as shown in Figure 3. Dreamweaver doesn't provide a method for changing the DOCTYPE declaration other than the "Make document XHTML-compliant" checkbox. So, to write XHTML strict, you must manually change the DOCTYPE in the code view. See the Macromedia exchange for an extension that allows DOCTYPE changes. For information on how to change the default DOCTYPE in Dreamweaver, see the MX Developers Journal online at http://mxdj.sys-con.com/read/45940.htm. The DOCTYPE should read as shown below.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

The results panel also lets you save the validation results as an XML file and see the results in a Web browser as an HTML file. Double-clicking the error message will highlight the code in Dreamweaver.

Outside of Dreamweaver, you can validate your code using the W3C's Validator Service at http://validator.w3.org/. You can use the Validate by Upload section of the page and browse to the file you want to validate. Figure 4 shows the results of validating the same page that Dreamweaver validated earlier (with the DOCTYPE XHTML Transitional) indicating no errors. The W3C Validation Service is a bit fussier and returns an error message because our page uses an image tag without an alt attribute.

The Doctype Switch
Declaring DOCTYPES becomes especially helpful when you want to ensure that your CSS code is rendered as you intended. Today's standards-compliant Web browsers are really two browsers in one. Technically speaking, they're capable of rendering in two modes: "standards-compliant mode" and "backwards-compatible mode" also known as "quirks mode."

The Web browser reads the DOCTYPE line that triggers the correct rendering mode. For example, if your DOCTYPE declares that you are writing XHTML 1 Strict that means that your code uses only XHTML elements relating to the document structure (no deprecated markup is allowed); the presentation information is left entirely to a Cascading Style Sheet. How that Cascading Style Sheet is rendered depends on the Browsers Rendering Mode (either standards-compliant or backwards-compatible).

Recall the browser wars, and subsequent years, when Web browsers rendered CSS code differently one browser to the other. One of the most prevalent problems has been the way the different browsers render DIV tags and their associated height, width, border, margins, and padding, the so-called box model.

Essentially, the problem rests with how Internet Explorer understands this box. If you'd like a div to be 100 pixels wide with a padding of 10 and a border of 10, you simply write a CSS width property equal to 100 pixels. With IE, however, your div box would be 40 pixels smaller than you'd expect, because it subtracts from the width the 10 pixel padding on the right and left as well as the 10 pixel border on the right and left. This is just one of several problems with the way some older (non-standards-compliant) browsers render CSS.

There is a possible solution. Imagine having to rework an old Web site that's several hundred pages long because the new browsers render the CSS in a standards-compliant way, but you wrote the page to work with browsers in use when you created it (non-standard, workarounds, CSS hacks, etc.). Rather than upgrade several hundred pages, you can "downgrade" the browser. In other words, force the browser to render your page in "backwards-compatible mode" or "quirks mode." To do this you simply declare the correct DOCTYPE. Unfortunately, declaring the "correct" DOCTYPE can be tricky, because browsers can respond to the same DOCTYPEs differently. For example, the DOCTYPE in the following code will trigger "standards-compliant" mode in Mozilla 1.0, Netscape 6.0+, Safari 1.0+, Internet Explorer 6.0+, Opera 7.1+, but will trigger "quirks" mode in IE 5 for the Mac.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 //EN">
Listing 4 A DOCTYPE for HTML 4.01 without a URL

You can use a simple JavaScript for testing purposes to see if the DOCTYPE you're using will trigger "standards-compliant mode" or "quirks mode." Copy the following code to the head section of the Web page you want to test in Dreamweaver and preview in the browser.

<script language="javascript">
function displayMode() {
    theMode = document.compatMode;
    alert(theMode);
    }
</script>

You'll have to add a button to trigger the JavaScript. Copy the code shown below to the bottom of the Web page you want to test.

<form>
    <input type="button" name="Button" value="Display Mode"
   onClick="displayMode()">
</form>

If your code triggers "standards-compliant mode" in IE, you'll see the alert box shown in Figure 5; otherwise IE will display "Backcompat." Opera 7.5+, Mozilla 1.0, Firefox 1.0, and Netscape 7.2+ will also display "CSS1Compat." If Opera is rendering in Quirks Mode the alert box will display "Quirksmode." If Firefox 1.0, Netscape 7.2+, or Mozilla 1.0 is rendering in quirks mode the dialog box will display "Backcompat."

Dreamweavers' ability to write standards-compliant code lets you create Web pages that can then be used for other purposes. For example XHTML can be transformed into XML, which can then be used to drive a Flash Web application. In a similar way XHTML code can be reused through ColdFusion where the XML file replaces a database. Perhaps the greatest benefit in writing and validating our standards-compliant code is knowing that our code is ready for future browser releases, meaning less rework for us. As Web designers, we should commit ourselves to the future of the Internet by supporting standards. Macromedia as a software developer has committed itself to creating a product that writes code in accordance with the accepted standards of today.

More Stories By Kevin Ruse

Kevin Ruse is the author of “Web Standards Design Guide” published by Charles River Media, Inc. The book explores the current standards: XML, XHTML, CSS, XForms and XLink as well as workflow issues involving these standards.

Comments (2) View Comments

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.


Most Recent Comments
MXDJ News Desk 08/03/05 01:34:25 PM EDT

Creating Standards-Compliant Web Pages with Macromedia Dreamweaver MX 2004. Did you ever stop and wonder what the Web might look like if there were no standards? I think it would be a web of confusion.

MXDJ News Desk 08/03/05 12:56:09 PM EDT

Creating Standards-Compliant Web Pages with Macromedia Dreamweaver MX 2004. Did you ever stop and wonder what the Web might look like if there were no standards? I think it would be a web of confusion.

IoT & Smart Cities Stories
The deluge of IoT sensor data collected from connected devices and the powerful AI required to make that data actionable are giving rise to a hybrid ecosystem in which cloud, on-prem and edge processes become interweaved. Attendees will learn how emerging composable infrastructure solutions deliver the adaptive architecture needed to manage this new data reality. Machine learning algorithms can better anticipate data storms and automate resources to support surges, including fully scalable GPU-c...
Machine learning has taken residence at our cities' cores and now we can finally have "smart cities." Cities are a collection of buildings made to provide the structure and safety necessary for people to function, create and survive. Buildings are a pool of ever-changing performance data from large automated systems such as heating and cooling to the people that live and work within them. Through machine learning, buildings can optimize performance, reduce costs, and improve occupant comfort by ...
The explosion of new web/cloud/IoT-based applications and the data they generate are transforming our world right before our eyes. In this rush to adopt these new technologies, organizations are often ignoring fundamental questions concerning who owns the data and failing to ask for permission to conduct invasive surveillance of their customers. Organizations that are not transparent about how their systems gather data telemetry without offering shared data ownership risk product rejection, regu...
René Bostic is the Technical VP of the IBM Cloud Unit in North America. Enjoying her career with IBM during the modern millennial technological era, she is an expert in cloud computing, DevOps and emerging cloud technologies such as Blockchain. Her strengths and core competencies include a proven record of accomplishments in consensus building at all levels to assess, plan, and implement enterprise and cloud computing solutions. René is a member of the Society of Women Engineers (SWE) and a m...
Poor data quality and analytics drive down business value. In fact, Gartner estimated that the average financial impact of poor data quality on organizations is $9.7 million per year. But bad data is much more than a cost center. By eroding trust in information, analytics and the business decisions based on these, it is a serious impediment to digital transformation.
Digital Transformation: Preparing Cloud & IoT Security for the Age of Artificial Intelligence. As automation and artificial intelligence (AI) power solution development and delivery, many businesses need to build backend cloud capabilities. Well-poised organizations, marketing smart devices with AI and BlockChain capabilities prepare to refine compliance and regulatory capabilities in 2018. Volumes of health, financial, technical and privacy data, along with tightening compliance requirements by...
Predicting the future has never been more challenging - not because of the lack of data but because of the flood of ungoverned and risk laden information. Microsoft states that 2.5 exabytes of data are created every day. Expectations and reliance on data are being pushed to the limits, as demands around hybrid options continue to grow.
Digital Transformation and Disruption, Amazon Style - What You Can Learn. Chris Kocher is a co-founder of Grey Heron, a management and strategic marketing consulting firm. He has 25+ years in both strategic and hands-on operating experience helping executives and investors build revenues and shareholder value. He has consulted with over 130 companies on innovating with new business models, product strategies and monetization. Chris has held management positions at HP and Symantec in addition to ...
Enterprises have taken advantage of IoT to achieve important revenue and cost advantages. What is less apparent is how incumbent enterprises operating at scale have, following success with IoT, built analytic, operations management and software development capabilities - ranging from autonomous vehicles to manageable robotics installations. They have embraced these capabilities as if they were Silicon Valley startups.
As IoT continues to increase momentum, so does the associated risk. Secure Device Lifecycle Management (DLM) is ranked as one of the most important technology areas of IoT. Driving this trend is the realization that secure support for IoT devices provides companies the ability to deliver high-quality, reliable, secure offerings faster, create new revenue streams, and reduce support costs, all while building a competitive advantage in their markets. In this session, we will use customer use cases...