Chapter 32. Technical Issues

CONTENTS

 

•  Markup Languages
•  Scripting Languages
•  Summary

So far in this book, the focus has been on Dreamweaver as a visually based HTML editor that gives you easy access to the code behind it all. However, this last section examines Dreamweaver another way: as a program for working with code that includes a sophisticated previewing system for how that code will eventually display in a browser. If that sounds strange to you, remember that one of the reasons for the massive popularity of Dreamweaver in the web-authoring community is that it really can be used either way. The coding geeks and artists might not agree on how to use Dreamweaver, but most of them agree that it's good to use Dreamweaver.

This introduction to the code-centric part of the book takes a look at the web from a coding point of view. What's out there, beyond HTML and JavaScript, and how do those languages fit into the grand scheme of things?

Markup Languages

Markup languages are used to describe the structure of web documents. The most ubiquitous markup language, of course, is HTML but it's not the only one.

SGML and the Basic Structure of Markup

HTML, XML, XHTML, WML all the "ML" acronyms are markup languages, as are SVG, SMIL, and various others. No matter what their other differences are, all these languages share a common syntax you should already find familiar:

<tag attribute="value">content goes here</tag>

This universal reliance on tags marked by <> isn't a coincidence. All the markup languages are based on the same meta-language, Standard Generalized Markup Language (SGML). SGML is a set of rules for creating other languages. The goal is to create a set of tags that enable authors to describe a document's structure so that computers, printers, and other devices can logically interpret the document's contents. The major syntactical rules include the following:

• Opening and closing pairs of tags, marked by <> and </>, bracket content. Tags can be nested inside other tags, creating hierarchical "tree" structures that can be used to represent hierarchical data structures:

  <parent>      <child>content</child>  </parent>

• Attributes, in the form of name/value pairs (name="value"), add specific characteristics to different occurrences of tags.

Although the tag and attribute names differ for different languages, all markup languages based on SGML use this same structure.

HTML, XML, and Other Languages

There's a wide world out there beyond HTML, although the whole party really started with HTML. Understanding where everybody came from, and why they developed, is an important part of expanding your web-authoring horizons.

HTML: Markup or Formatting Language?

Tim Berniers-Lee developed HTML in 1991 as a markup language to enable scientists to share technical papers across computer networks. It was simple enough that even "amateurs" could quickly master it. As the Internet developed, however, the needs of the commercial world changed HTML from its original intent. Instead of using HTML to represent document structure, with logical tags, such as <h1>, <h2>, <address>, and <strong>, authors started focusing on using HTML to create pages that would visually display a certain way in browsers, using tags such as <font>, <b>, and <i>.

CSS and the W3C

As discussed in Chapter 4, "Working with Text" and in Chapter 13, "Using Cascading Style Sheets," Cascading Style Sheets were introduced to help web authors separate structural and presentation information document structure is described with the HTML tags, with CSS style sheets used to interpret the tags for display and printing. The World Wide Web Consortium (W3C) created CSS for just this reason: to bring HTML back to its roots as a true markup language. CSS itself isn't a markup language. It's intended to work with markup languages, to help specify how they will be interpreted under different conditions.

Note

To learn more about the W3C, and read the official specs on HTML, CSS, and other web technologies, visit www.w3.org.

XML: Another Language for Creating Languages

Have you heard of XML? Of course you have. Web pundits have been talking about XML which will one day come to save the world from the vagaries of browsers and the intransigence of HTML for several years. But what is XML?

XML Is a Set of Syntax Rules

The W3C created the eXtensible Markup Language (XML) as a set of structural rules, based on SGML, for creating other markup languages. XML syntax is basically like HTML syntax, but stricter. Be aware of the following major restrictions:

• The entire document must be enclosed in a tag pair like <html></html> or <xml></xml>, for instance. This enclosing set of tags is called the root element.

• No empty elements (or tags) are allowed. This means tags must either occur in an opening and closing pair <tag></tag> or must be self-closing <tag />.

• All tag and attribute names, and all attribute values, must be lowercase <tag>.

• Attribute values must be in quotation marks <tag author="fred">.

• All attributes must be in the form name="value". (In HTML, by contrast, attributes without values, such as <td nowrap>, are allowed.)

XML Has No Specific Tag Names

The purpose of XML is to allow for extensibility and interpretation. Specific elements can be added as needed. The author of an XML-based phone book, for instance, would probably want to create elements like this:

<listing type="residential">      <name>John Smith</name>      <phone>555-1234</phone>      <address>123 Main Street</address>      <pubtype privacy="noaddress" />  </listing>

XML Itself Provides No Formatting Information

What would the preceding phone book entry look like? That depends entirely on what piece of software is interpreting the code, and what instructions that software has been given for how <listing>, <name>, and the other elements should be treated. XML works nicely with CSS or with XSL (eXtensible Style Language) so that an individual XML document with a linked style sheet can create a complete, formatted presentation in a browser.

XML Documents Must Be Valid and Well-Formed

Validation is the core of XML. Instead of leaving a browser or other application to figure out syntactical irregularities and unfamiliar tags and attributes, XML requires that the parser be able to validate the document determine whether it is proper XML and then parse (interpret) it accordingly. How important is this? Consider that one reason today's browsers are so bloated and unwieldy is that they devote many resources to guessing how to display badly formatted HTML documents. A well-formed document obeys all the syntax rules previously listed. A valid document uses only legal page elements (tags and attributes). To facilitate validation, all documents must begin with a DTD, or Document Type Definition, that describes what flavor of XML is being used in the document and what rules should be applied when parsing the code. (See the discussion in Chapter 3, "Creating and Working with Documents," for more on DTDs.)

XML Isn't Just for Browsing

The process of interpreting an XML document is called parsing. Any software that performs this interpretation is an XML parser. In order to handle XML documents, web browsers might have XML parsers operating underneath them.

But even though web authors tend to focus on browsers and how pages will display there, XML is used for many different purposes besides web browsing. Each purpose requires some parsing software. More and more commercial programs, for instance including Dreamweaver are putting their configuration information into XML documents, and incorporating XML parsing capabilities into the core programs to translate this information into interface elements and other program features.

A good example of XML in action is Dreamweaver's own menu interface. The exact content, structure, and behavior of Dreamweaver menus are determined by the file menus.xml, in the application's Configuration folder. The elements in this document are all aimed at constructing menus, as follows:

<menubar>      <menu name="File">          <menuitem name="New" etc />          <menuitem name="Open... " etc />          etc.      </menu>      etc.  </menubar>

In this case the core Dreamweaver program provides the instructions for how that element structure should be implemented. Whenever the program sees <menu>, it adds a menu to a menu bar; each <menuitem> adds an item to the menu, with its text as specified in the name attribute; and so on. Listing 32.1 shows a segment of code from the menus.xml file. Figure 32.1 shows how those lines are implemented in the Dreamweaver interface.

Figure 32.1. How the code in Listing 32.1 translates into Dreamweaver menu elements.

Listing 32.1 A Sample Section from Dreamweaver's Own Configuration File menus.xml

<menu name="_Text" id="DWMenu_Text">  <menuitem name="_Indent" key="Cmd+Opt+]" domRequired="false"  enabled="dw.getFocus() == 'textView' || dw.getFocus(true) == 'html' ||  dw.getFocus() == 'document' && dw.getDocumentDOM().getFocus() == 'body'"  command="if (dw.getFocus(true) == 'document')  {dw.getDocumentDOM().indent()} else  {dw.getDocumentDOM().source.indentTextView()}" id="DWMenu_Text_Indent"  />  <menuitem name="_Outdent" key="Cmd+Opt+[" domRequired="false"  enabled="dw.getFocus() == 'textView' || dw.getFocus(true) == 'html' ||  dw.getFocus() == 'document' && dw.getDocumentDOM().getFocus() == 'body'"  command="if (dw.getFocus(true) == 'document') {dw.getDocumentDOM().out dent()} else {dw.getDocumentDOM().source.outdentTextView()}"  id="DWMenu_Text_Outdent" />  <menu name="Paragraph _Format" id="DWMenu_Text_Format">  <menuitem name="_None" key="Cmd+0" file="Menus/MM/Text_Format.htm" argu ments="'None'" id="DWMenu_Text_Format_DefaultText" />  <menuitem name="_Paragraph" key="Cmd+Shift+P"  file="Menus/MM/Text_Format.htm"  arguments="'P'"  id="DWMenu_Text_Format_P" />  <menuitem name="Heading _1" key="Cmd+1" file="Menus/MM/Text_Format.htm"  arguments="'H1'" id="DWMenu_Text_Format_H1" />  <menuitem name="Heading _2" key="Cmd+2" file="Menus/MM/Text_Format.htm"  arguments="'H2'" id="DWMenu_Text_Format_H2" />  <menuitem name="Heading _3" key="Cmd+3" file="Menus/MM/Text_Format.htm"  arguments="'H3'" id="DWMenu_Text_Format_H3" />  <menuitem name="Heading _4" key="Cmd+4" file="Menus/MM/Text_Format.htm"  arguments="'H4'" id="DWMenu_Text_Format_H4" />  <menuitem name="Heading _5" key="Cmd+5" file="Menus/MM/Text_Format.htm"  arguments="'H5'" id="DWMenu_Text_Format_H5" />  <menuitem name="Heading _6" key="Cmd+6" file="Menus/MM/Text_Format.htm"  arguments="'H6'" id="DWMenu_Text_Format_H6" />  <menuitem name="P_reformatted Text" file="Menus/MM/Text_Format.htm"  arguments="'PRE'" id="DWMenu_Text_Format_PRE" />  </menu>  <menu name="_Align" id="DWMenu_Text_Alignment">  <menuitem name="_Left" key="Cmd+Opt+Shift+L" enabled="dw.getFocus() ==  'document' && dw.getDocumentDOM().getFocus() == 'body'"  command="dw.getDocumentDOM().setTextAlignment('left')"  checked="dw.getDocumentDOM() != null &&  dw.getDocumentDOM().getTextAlignment() == 'left'"  id="DWMenu_Text_Alignment_Left" />  <menuitem name="_Center" key="Cmd+Opt+Shift+C" enabled="dw.getFocus() ==  'document' && dw.getDocumentDOM().getFocus() == 'body'"  command="dw.getDocumentDOM().setTextAlignment('center')"  checked="dw.getDocumentDOM() != null &&  dw.getDocumentDOM().getTextAlignment() == 'center'"  id="DWMenu_Text_Alignment_Center" />  <menuitem name="_Right" key="Cmd+Opt+Shift+R" enabled="dw.getFocus() ==  'document' && dw.getDocumentDOM().getFocus() == 'body'"  command="dw.getDocumentDOM().setTextAlignment('right')"  checked="dw.getDocumentDOM() != null &&  dw.getDocumentDOM().getTextAlignment() == 'right'"  id="DWMenu_Text_Alignment_Right" />  <menuitem name="_Justify" key="Cmd+Opt+Shift+J" enabled="dw.getFocus()  == 'document' && dw.getDocumentDOM().getFocus() == 'body'"  command="dw.getDocumentDOM().setTextAlignment('justify')"  checked="dw.getDocumentDOM() != null &&  dw.getDocumentDOM().getTextAlignment() == 'justify'"  id="DWMenu_Text_Alignment_Justify" />  </menu>

Note

Easily configurable menus are part of Dreamweaver's "eXtensible" structure. See Chapter 34, "Customizing Dreamweaver," for an explanation of how Dreamweaver configuration and extensibility works.

XML-Based Languages

Creating an XML-based language basically means creating a set of custom tags and always using the same instructions for interpreting them. If a software company creates the language, the instructions will be built into the software itself. If the language is an official W3C standard, the official interpretation is part of the language's specification. Some of the XML-based languages you're likely to run into as a web author are discussed in these following sections.

Simultaneous Media Integration Language (SMIL)

SMIL is a set of tags and attributes for the purpose of creating multimedia documents. A unique aspect of SMIL is that, unlike other markup, it includes a time element. Custom tags and attributes cover such things as setting page layout, inserting audio or video files, determining when media elements will start and stop playing, whether two media elements play simultaneously or in sequence, and so on. Listing 32.2 shows the code for a simple SMIL presentation.

Listing 32.2 Code for a Simple SMIL Document

<smil>      <head>          <layout>              <root-layout width="256" height="256" background- color="black" />                  <region id="pix" left="0" top="0" width="256"  height="256" />          </layout>      </head>      <body>          <seq>               <img src="Hello.gif" alt="Hello!" region="pix"  begin="1.00s" dur="16.00s" />               <img scr="Goodbye.gif" alt="Goodbye!" region="pix"  dur="16.00x" />          </seq>      </body>  </smil>

Of the major browsers, only Internet Explorer 5.5 and above currently offers SMIL support, although both the RealPlayer and QuickTime Player plugins can use it. (See Chapter 19, "Plugins, ActiveX, and Java," for more about this.)

Note

As anyone who's struggled with Netscape and Internet Explorer's contradictory interpretations of HTML and CSS knows, a W3C standardized language is standardized only if the different applications that implement it agree to abide by the standards. There's nothing to force RealPlayer or QuickTime Player to both interpret the tags of SMIL in the official way. There's not even any law against them re-interpreting the tags and then still calling what they're doing SMIL. To learn more about the official SMIL specification, visit www.w3.org/AudioVideo.

Scalable Vector Graphics (SVG)

Another official W3C specification, SVG is a language for describing the structure of a document with vector-graphic content. Custom tags describe such structural features as shape, color, size, animation, and so forth. Currently in its infancy, SVG will ultimately enable web authors to create web pages that display vector text, graphics, and animation without the need for plugins or ActiveX objects. Listing 32.3 shows a very simple SVG document.

Listing 32.3 Code for a Simple SVG Document

<?xml version="1.0" encoding="iso-8859-1"?>  <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN"  "http://www.w3.org.TR/2000/03/WD-SVG-2000303/DTD/svg-2000303- stylable.dtd">  <svg width="450px" height="450px" viewBox="0 0 450 450"  xmlns:xlink="http://www.w3.org/2000/xlink/namesapce/"  xmlns:a="http://www.adobe.com/sbg10-extensions">  <rect style="fill:#FFFFFF;stroke:none;" width="450" height="450"></rect>  <!--rotating square-->  <g id="rotating_square">  <defs>  <g id="square_styled">  <rect id="square_styled" width="225" height="225"></rect>  </g>  </defs>  <g id="rotation" transform="translate(255 255)">  <use xlink:href="#square" x="-113" y="-113">  <animateTransform attributeName="transform" type="rotate" values="0;360"  dur="8s" repeatDur="indefinite" />  </use>  </g>  </g>  </svg>

Of the major browsers, only Netscape 6 has limited SVG support built in. To give SVG a test drive in a less limited environment, download the free Adobe SVG Viewer from www.adobe.com/svg/viewer/install/main.html (available for all platforms).

Note

Eventually, you'll be able to create SVG files from any major graphics application. As of this writing, Adobe Illustrator allows saving as SVG. To learn more about the official SVG specification, visit www.w3.org/Graphics/SVG/Overview.htm8.

Wireless Markup Language (WML)

Developed by the leading makers of PDAs, WML allows web pages to display on hand-held computers. Although it's not an official W3C standard language, WML has developed informally as a de facto standard for the handheld computer industry. As more people begin using PDAs for instant on-the-road web access, WML and WAP (Wireless Application Protocol) will become more important tools for all web authors. Various WAP emulation programs are available, enabling you to preview WML documents on desktop computers. Listing 32.4 shows the code for a sample WML page. Figure 32.2 shows how it will display in a WAP emulator.

Figure 32.2. How the sample WML document shown in Listing 32.4 looks in a WAP emulation program.

Listing 32.4 Code for a Simple WML Document

<?xml version="1.0"?>  <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"  "http:www.wapforum.org/DTD/wml_1.1.xml">  <wml>      <card id="main" title="My WAP.com">          <do type="accept" label="Next">              <go href="#wel"/>          </do>          <p>Please enter your name:              <input type="text" name="user"/>          </p>      </card>      <card id="wel" title="Welcome">          <do type="prev" label="Back">              <prev/>          </do>          <p>              Welcome, $(user). Click Back to go to previous page.          </p>      </card>  </wml>

Note

There are all sorts of WAP emulators out there, including M3Gate (www.m3gate.com), Deck-It Emulator (www.pyweb.com/tools/), and WinWap (www.winwap.org).

XHTML: The Next Step for HTML

It's the next great thing. It's here now. XHTML is the W3C's officially sanctioned successor to HTML. XHTML is basically HTML 4.01, rewritten as an XML-based language. The goal of XHTML is to promote "device-independent web authoring" for all web pages. The code for an HTML document and its XHTML counterpart might look almost identical, but the XHTML document can be repurposed for use by other software than browsers, in other devices than typical desktop computers. What's the difference? For strict XHTML compliance, the following rules apply:

• DTDs are required. An XHTML document must begin with a DTD statement, telling the browser or other application exactly what language is being used, and thus how to parse it.

• XHTML documents must be well-formed and valid. An XHTML document must follow the rules for XML syntax, as specified in the previous section, and can use only the legitimate tags and attributes that are part of XHTML. This means that no deprecated elements such as <font> are allowed.

• No internal or inline CSS. As discussed earlier in the section on XML, the goal is to separate structure and presentation formatting. That means the CSS information must be in a linked document.

• No internal scripting. For similar reasons, all JavaScript, VBScript, or other scripting statements must be in linked documents, not coded into the XHTML document itself.

To ease web authors into the rigors of XML, the W3C has also released an official specification for transitional XHTML, which has many of the same rules as strict XHTML but isn't so strict in enforcing them. (For more on Dreamweaver MX and XHTML, see Chapter 3.)

Note

There is a way around these last two prohibitions, by putting the CSS or scripting code inside CDATA declarations so that the XML parser will ignore them. It's a flawed workaround, however.

XHTML is the way of the future. Because it's extensible, special "dialects" can be written to meet specific needs. XHTML Basic, for instance, is the W3C's officially recommended language for PDAs, pagers, phones, and any other processor-limited Internet access device replacing WML, which is a proprietary technology. XFORMS a still-developing standard allows for flexible, device-independent coding of forms.

Scripting Languages

Web scripting languages can be divided into those processed by the web server (server-side) and those downloaded to the user's computer and processed by the browser (client-side). The major server-side languages have already been covered in Chapter 26, "Introduction to Dynamic Dreamweaver," and its following chapters. This section looks at how client-side scripting works in Dreamweaver.

Client-side scripts can be embedded in the HTML document itself or saved in separate files and linked to the main document. In either case, they must download to the user's computer so the browser (client) can interpret and execute them. An embedded script can be placed inside the HTML using the <script> tag or can be quoted directly inside an event handler, using the name of the scripting language followed by a script statement. (See Chapter 11, "Working with Forms," for more on embedded JavaScript and using event handlers.)

Listing 32.5 shows various ways scripts can be embedded or linked within HTML. The most popular client-side scripting languages are JavaScript and Microsoft's JScript and VBScript.

Listing 32.5 Sample HTML Document Showing Several Ways Script Statements Can Be Embedded or Linked (Script-Related Code Shown in Bold)

<html>  <head>  <title>My Document</title>  <!--the following line links to an external script file, which contains  functions that can be called from this file-->  <script src="../MyScripts/external.js"></script>  <script type="text/jscript">  function testCommand() {  print("This script is written as a function, which can be called from  anywhere in the body, using an event handler. This function is called  from the <body> tag, using the onLoad event handler.");  }  </script>  </head>  <body onLoad="testCommand()">  <h1>Welcome to my Home Page!</h1>  <p>This document shows various ways client-side scripts can be inserted  into or linked to an HTML document. In XHTML, only linked scripts are  valid.</p>  <script language="JavaScript">  window.alert("This script is embedded in the body.");  </script>  <hr>  <p><a href="javascript:window.alert('This script is written directly in  the document code, using the javascript keyword.')">Click here to  execute an inline script statement.</a></p>  <p><a href="#" onClick="extFunction()">Click here</a> to execute a  function from the linked file "external.js"</p>  </body>  </html>

JavaScript

The most common client-side scripting language, JavaScript was originally developed by Netscape but has been adopted by other browsers. Dreamweaver behaviors are written in JavaScript. Note that JavaScript has no relationship to the Java programming language.

JScript

Very similar in syntax to JavaScript, JScript is a Microsoft scripting language for use in browsers and any other applications using Microsoft ActiveX or object linking and embedding (OLE) technologies. Among browsers, JScript works with Internet Explorer/Windows only.

VBScript

Microsoft's VBScript is a "lite" version of their Visual Basic programming language. As with JScript, it is closely tied to various Microsoft technologies, such as ActiveX, and works only with Internet Explorer/Windows.

Summary

The chapters in this section cover Dreamweaver from a coder's perspective, both inside and out. In Chapter 33, "Writing Code in Dreamweaver," you learn how you can use Dreamweaver to write the various kinds of scripting and markup language discussed in this chapter and what tools Dreamweaver provides to make that job easier. The remaining chapters cover how to work with Dreamweaver as code. Chapter 34 discusses how Dreamweaver itself is configured using JavaScript, HTML, and XML. Chapter 35, "Working with Extensions," explores the world of Dreamweaver extensions chunks of script and markup that add to the program's functionality and enable you to affect its interface. Finally, in Chapter 36, "Creating Extensions," you learn how to write your own custom objects and commands, using either Dreamweaver or an external code editor. Affix your pocket protectors, put on your propeller-hats, and read on.

CONTENTS