Using XML in Dreamweaver 8


Dreamweaver 8 helps you to use XML data in your Web pages. Although you can create XML files using Dreamweaver, you can also create an XML file in any plain-text editor and use it as an XML data source in Dreamweaver.

If you create an XML file in Dreamweaver, Dreamweaver supplies only the XML declaration, which is the required first line in any XML document:

 <?xml version="1.0" encoding="iso-8859-  1?> 


The XML declaration specifies that this is an XML document and that it's created in XML 1.0. Although it's not a required part of an XML declaration, Dreamweaver also adds the document encoding type that's specified in New Document preferences (Edit > Preferences > New Document). In this case, the encoding type is iso-8859-1, also known as Latin 1 or Western European. You must create the remainder of the XML filethe custom tags that contain your data. You must also specify a root element. The root element contains all the other elements in the XML document.

All the remaining basic XML syntax rules are the same as the syntax rules for an XHTML document:

  • Every tag in an XML document must be closed.

  • All tags must be nested correctly.

  • All XML tags and attribute names must be in lowercase.

  • All attribute values must be in quotation marks.

For more details on these rules, see the "XHTML Syntax" sidebar, earlier in this chapter.

XML files don't contain any formatting information. If you open an XML file in a browser (Figure 14.9), only the code displays. If you want to display your XML data with formatting, you need to attach a CSS or XSLT style sheet to the XML file.

Figure 14.9. When you open an XML file in a browser, only the code displays.


CSS can be used to modify the display of an XML document, such as the font family, text color, background color, and position of page elements. XSLT can also be used to modify the display of an XML document, but it can also be used to transform the document by adding content, changing the order of page elements, making computations, and generating an HTML document from the XML file. CSS is easier to use, and if your main interest is formatting the display of your XML content, CSS is the best choice. If you want to format the display as well as transform your XML document, XSLT is the best choice. You'll learn more about XSLT in "Using Client-Side XSLT in Dreamweaver 8," later in this chapter.

In the exercises in this section, you'll create a simple XML file in Dreamweaver and then attach a CSS file to provide formatting information for displaying the file in a browser. If you'd like to follow along rather than create the files, you can download the files in the Studio8 XML folder on the Web site for this book, at peachpit.com/dw.vqp.

To create an XML document:

1.

Open a new XML page in Dreamweaver (File > New > Basic page > XML). Save the page as Studio8.xml.

Dreamweaver creates a new XML page containing an XML declaration that includes the XML version (1.0) and your default encoding type for new documents (Figure 14.10). The encoding type is not a required part of the XML declaration but is added automatically by Dreamweaver. For more information on encoding types, see "To make XHTML the default choice for new HTML documents," earlier in this chapter.

Figure 14.10. A new XML file in Dreamweaver contains an XML declaration that includes the XML version and your default encoding type.


2.

After the XML declaration, add a root element named Studio 8 to the document: <Studio8>.

The Studio8 element will contain all the other elements in the file except for the XML declaration. The Studio8.xml file (Script 14.1) includes five item tags that each contain three additional tags with information about the five programs in Macromedia Studio 8.

Script 14.1. The final version of Studio8.xml includes five item tags with information about the programs in Macromedia Studio 8.

[View full width]

 1   <?xml version="1.0"?> 2   <Studio8> 3       <item> 4           <name>Dreamweaver</name> 5           <version>8</version> 6           <description>Design and develop Web sites and Web applications</description> 7       </item> 8       <item> 9           <name>Flash Professional</name> 10          <version>8</version> 11          <description>Create animations and interactive Web sites</description> 12      </item> 13      <item> 14          <name>Fireworks</name> 15          <version>8</version> 16          <description>Edit and optimize images for the Web</description> 17      </item> 18      <item> 19          <name>Contribute</name> 20          <version>3</version> 21          <description>Update Web content in a controlled environment that preserves the  integrity               of the Web site</description> 22      </item> 23      <item> 24          <name>FlashPaper</name> 25          <version>2</version> 26          <description>Convert documents into Flash documents or PDF files</description> 27      </item> 28  </Studio8> 

3.

Add an opening and closing item tag:

 <item></item>. 


4.

Within the item tags, add opening and closing tags for name, version, and description:

 <item>     <name></name>     <version></version>     <description></description> </item> 


The item tag is the parent tag of the name, version, and description tags, which are nested within the item tag.

5.

Repeat Step 4 to create a total of five sets of item tags.

The item tags and their children (name, version, description) create the basic structure of the XML document.

6.

Add content to the children of the first item tag:

 <item>     <name>Dreamweaver</name>     <version>8</version>     <description>Design and develop       Web sites and Web       applications</description> </item> 


7.

Repeat Step 6 for the next four item tags:

 <item>     <name>FlashProfessional</name>     <version>8</version>     <description>Create animations       and interactive Web       sites</description> </item> <item>     <name>Fireworks</name>     <version>8</version>     <description>Edit and optimize       images for the       Web</description> </item> <item>     <name>Contribute</name>     <version>3</version>     <description>Update content in a       controlled environment that       preserves the integrity of       the Web site</description> </item> <item>     <name>FlashPaper</name>     <version>2</version>     <description>Convert documents       into Flash documents or PDF       files</description> </item> 


8.

Add a closing tag for the root element: </Studio8>.

9.

Save the file.

You've created an XML file with a root element that contains five sets of item tags. The item tags include child tags that contain the content of the XML file (name, version, and description of each program in Studio 8).

In the next exercise, you'll attach a CSS style sheet to provide formatting instructions for displaying the file in a browser. You'll need the Studio8.css file (Script 14.2) to do the exercise. You can download it from the Studio8 XML folder on the Web site for this book, at www.peachpit.com/dw.vqp. Save the Studio8.css file on your computer in the same folder as the Studio8.xml file.

Script 14.2. The Studio8.css file is attached to Studio8.xml to provide formatting information for the display of the XML file in a browser.

 1   Studio8 { display: block;     background-color: #20B2AA;     } 2   item { display: block;     margin-top: 10px;     margin-bottom: 15px;     margin-left: 10px;     background-color: Silver;     font-family: Verdana;     font-size: small;     width: 500px;     padding: 5px;     } 3   name, version { display: run-in;     margin-bottom: 5px;     font-weight: bold;     } 4   description {     display: block;     } 

To attach a CSS style sheet to an XML page:

1.

Open the Studio8.xml page from the preceding exercise.

2.

After the XML declaration, type the following line of code to attach the CSS style sheet to the file:

<?xml-stylesheet type="text/css"  href="Studio8.css?> 


3.

Save the file as Studio8_style.xml.

4.

Choose File > Preview in Browser to view the formatted XML file (Figure 14.11).

Figure 14.11. You can attach a CSS style sheet to an XML file to provide formatting information for display in a browser.





Macromedia Dreamweaver 8 Advanced for Windows and Macintosh. Visual Quickpro Guide
Macromedia Dreamweaver 8 Advanced for Windows and Macintosh: Visual QuickPro Guide
ISBN: 0321384024
EAN: 2147483647
Year: 2004
Pages: 129
Authors: Lucinda Dykes

Similar book on Amazon

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net