Scribd Logo
Upload

Welcome to Scribd!

  • 47 views

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

    Uploaded by

    elsesgado
    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.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

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

    Uploaded by

    elsesgado
    47 views4 pages
    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.

    Original Description:

    XML

    Original Title

    XML XSLT Instructions Bruce

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    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.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    47 views4 pages

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

    Uploaded by

    elsesgado
    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.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 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