Scribd
Upload
66 views

Using XML and XSLT in Dreamweaver: Exercise 1: Convert HTML To XSLT

This document provides instructions for 10 exercises to teach how to use XML and XSLT in Dreamweaver. The exercises cover converting HTML to XSLT, attaching an XML data source, binding XML data to the XSLT, attaching an XSLT stylesheet to XML, adding conditional and repeating regions, designating paragraph and bullet styles with CSS, adding dynamic links, inserting an image from the XML data source, and creating a new XSLT page to display Flash content from the XML.

Uploaded by

elsesgado
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
66 views

Using XML and XSLT in Dreamweaver: Exercise 1: Convert HTML To XSLT

This document provides instructions for 10 exercises to teach how to use XML and XSLT in Dreamweaver. The exercises cover converting HTML to XSLT, attaching an XML data source, binding XML data to the XSLT, attaching an XSLT stylesheet to XML, adding conditional and repeating regions, designating paragraph and bullet styles with CSS, adding dynamic links, inserting an image from the XML data source, and creating a new XSLT page to display Flash content from the XML.

Uploaded by

elsesgado
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Using XML and XSLT in Dreamweaver

Betsy Bruce, Performance Factor, Seattle WA


Please send questions or comments to [email protected]
This exercise should be completed using the files in the "beginning example" directory. You should
unzip these files and then define a site with beginning example as the site root.

Exercise 1: Convert HTML to XSLT


Steps
1. Open HTML file (in Dreamweaver): content.htm (File > Open)
2. File > Convert > XSLT 1.0
3. Dreamweaver creates content.xsl
4. Save the page (Ctrl + S).

Exercise 2: Attach an XML Data Source


Steps
1. Open the Bindings panel (Window > Bindings)
2. Click the XML link
3. Select Attach a local file on my computer
4. Click Browse and select page_01.xml
5. Save the page (Ctrl + S).

Exercise 3: Bind the XML Data to the XSLT


Steps
1. Open content.xsl
2. Replace the X of "Page X of Y" by dragging the page/@id (page attribute called id) and
replacing the text
3. Replace the Y of "Page X of Y" by dragging the course/@pagetotal and replacing the text
4. Replace the "Title" placeholder with page/@title
5. Save the page (Ctrl + S).

Using XML and XSLT in Dreamweaver

Page 1

Exercise 4: Attach XSLT to XML


Steps
1. Open page_01.xml
2. Select Commands > Attach an XSLT Stylesheet
3. Browse to content.xsl and click OK
4. Save the page (Ctrl + S).
5. Preview the page in the browser

Exercise 5: Add a Conditional Region


Steps
1. Open content.xsl
2. Select div#textbox
3. Insert > XSLT Objects > Conditional Region
4. Enter in the test field: course/@textbox='on'
5. Save the pages (Ctrl + S).

Exercise 6: Add a Repeating Region


Steps
1. Open content.xsl
2. Replace the "Page content here" placeholder with a repeating region:


Select "Page content here" text

Click on <p> in tag selector (so the entire paragraph is selected)

Drag page/item and drop it on the selected text. An xsl:for-each is created.

Select the "Content goes here" placeholder text and apply Paragraph

3. In Code View, replace "Content goes here" with <xsl:value-of select="."/>


4. Save the page (Ctrl + S).
5. Preview page_01.xml in the browser

Using XML and XSLT in Dreamweaver

Page 2

Exercise 7: Designate Between Paragraphs and Bullets Using CSS


Steps
1. Open content.xsl
2. Select the content in the textbox and make it an unordered list
3. Select the <ul> tag in the Tag Selector
4. Add class="{@class}" as a tag attribute
5. Save the page (Ctrl + S).

Exercise 8: Add Dynamic Links


Steps
1. Open content.xsl
2. Select the Next button then click the <a> tag in the Tag Selector
3. Click the Browse for File icon next to the Link field in the Property inspector
4. Click Data Sources
5. Select course/@next
6. Repeat with the Previous button and course/@prev
7. Save the page (Ctrl + S).

Exercise 9: Add an Image


Steps
1. Open content.xsl
2. Place the cursor in div#content
3. Insert > Image
4. Select Data Sources
5. Select course/page/media
6. Click OK
7. Save the page (Ctrl + S).

Using XML and XSLT in Dreamweaver

Page 3

Exercise 10: Create a New XSLT page for Flash content


Note: You somehow have to deal with the active content issue in Internet Explorer in a different
way than how Dreamweaver inserts the code by default. The code causes the XSLT not to work so
you will need to use a different script and many are available on the web.
Steps
1. Select File > Save As
2. Name the file content2.xsl
3. Replace the Image with a Flash object
4. Select Data Sources
5. Select course/page/media
6. Click OK
7. Remove everything in the script tags and the noscript tags
8. Modify the width and height in both places: drag the media/@width and media/@height
over and place in curly brackets { }.
9. Save the page (Ctrl + S).
10. Link this XSLT to page_06.xml

Using XML and XSLT in Dreamweaver

Page 4

You might also like