Setting Up a SMIL Page Type

To review, new document types are defined by these methods :

Placing an XML definition in Dreamweaver's Configuration/DocumentTypes folder
Saving a prototype of the page in the NewDocuments subfolder

When working just in code, as we will be with the SMIL files, set the internaltype attribute of <documenttype> tag to other . This ensures that Dreamweaver opens only in Code view; Design view and the split Code and Design view are not available options. If you set the attribute to XML, Dreamweaver inserts an XML declaration at the top of each new page. Listing 3-1 shows how the document type definition would look with the internaltype attribute properly set. (As mentioned earlier, you should store the document type file in the Configuration/DocumentTypes folder alongside the MMDocumentTypes.xml file. I named my definition file SMIL.xml .)

Listing 3-1 SMIL.xml (03_SMIL.xml)

 <?xml version="1.0"?>  <documenttypes>     <documenttype id="SMIL" internaltype="XML" winfileextension="smil"     macfileextension="smil" file="Default.smil">        <title>           SMIL        </title>        <description>           SMIL Document        </description>     </documenttype>  </documenttypes>

After you have defined the document type, you need to create and save the prototype file. If you like, you can save a totally blank file called Default.smil in the NewDocuments folder, and that will do the trick. That does mean, however, that you must enter all the code for the page over and over again. When a document type has a set structure, it makes far more sense to provide a basic template for the file, much like the basic HTML page that Dreamweaver creates.

NOTE

Both . smil and .smi are generally accepted extensions for SMIL files. However, Real has suggested that developers would be better served by using .smil. Because Real is the 800- pound gorilla in this particular arena, I think it is best to follow Real's suggestion.

There are no guidelines as to what the basic SMIL page looks like, but Listing 3-2 shows what I suggest:

Listing 3-2 Default.smil (03_Default.smil)

 <smil>     <head>        <layout>        </layout>     </head>     <body>     </body>  </smil>

My SMIL prototype is lean, but it's user -friendly. All the key elements are in place, ready to be used. I even have tabs added in the empty lines between the <layout> and <body> tag pairs to maintain my whitespace structure. You can make any alterations that are necessary. For instance, if you're only working with SMIL 2.0, you should change the opening <smil> tag to the following:

 <smil xmlns="http://www.w3.org/2001/SMIL20/Language">

You also might want to add comments (SMIL uses HTML style comments) or meta tags to identify your organization or your authorship.

After you have stored both the document types XML file and the prototype SMIL file, close Dreamweaver and relaunch it. Choose File > New and, under the Other category, you should see your SMIL document type. Now we're ready to move on to the next stage of our preparation and define the SMIL tag set.

Establishing a SMIL Tag Library

The SMIL tag set is an impressive one. SMIL 2.0 is composed of 10 interrelated modules with 36 separate tags and more than 100 attributes. Although you could enter each of the tags and their attributes by hand into Dreamweaver's Tag Library Editor as shown in Chapter 1, you'd be crazy to do it that way. Not only is the manual approach a mind-numbingly tedious process, it's alsothankfullycompletely unnecessary.

NOTE

If you're unfamiliar with the Tag Library Editor, you might want to read through Chapter 1 where it is discussed in detail.

Dreamweaver MX includes the capability to import Document Type Definition (DTD) schemas to produce tag libraries. With just one operation, you can make all the SMIL tags and attributes available within Dreamweaver. Here's how it's done:

Before you can import the SMIL DTD, you'll need to get a copy from the W3C site. At this writing, you can find all of the modules in one handy file at http://www.w3.org/2001/SMIL20/DTD.zip. Extract the compressed files to their own folder.
Choose Edit > Tag Libraries to open the Tag Library Editor.
Select the Add (+) button and choose DTDSchema > Import XML or DTD Schema File.
Locate the SMIL20.dtd file in the Open File dialog box.

The rest of the process is automatic and pretty immediate. A new tag library, SMIL20.dtd, is created with all the tags and attributes in place, as shown in Figure 3.2.

Figure 3.2. Adding the SMIL tag set by importing its DTD includes all 10 SMIL 2.0 modules.
Expand the SMIL tree to modify any tag or attribute's formatting.

Keep in mind that as an XML file type, all tags must be lowercase; attributes use lower- or mixed-case.
With the SMIL tag library entry selected, choose the SMIL document type from the Used In list and deselect any other entries, such as HTML.

There's no need to relaunch Dreamweaver to use the newly defined tag library. Just choose File > New and select SMIL from the Other category and begin coding. To see the code hints in action, place your cursor between the <layout> tag pair and enter the opening angle bracket . All the SMIL tags should appear in the drop-down code Hints menu, as shown in Figure 3.3.

Figure 3.3. When the code hints appear, begin typing the tag, and the menu selection moves to the closest match. When you find the tag you want, press Enter (Return) to insert it.

graphics/03fig03.gif

TIP

You might notice that all of the attributes are set to the Enumerated type. This is a consequence of the DTD import. Although you could change the type of the numerous attributes to something more suited, such as changing the backgroundcolor attribute to a color type, it is really not necessary. The attribute types are useful only when you're working with the Tag Inspector. That panel is inactive when you're working exclusively in Code view.

Listing 3-1 SMIL.xml (03_SMIL.xml)

Listing 3-2 Default.smil (03_Default.smil)

Establishing a SMIL Tag Library

Figure 3.2. Adding the SMIL tag set by importing its DTD includes all 10 SMIL 2.0 modules.

Figure 3.3. When the code hints appear, begin typing the tag, and the menu selection moves to the closest match. When you find the tag you want, press Enter (Return) to insert it.