Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Now we have our finished XML file, we can begin the process of transforming it with XSL. So what does XSL stand for? It stands for Extensible Stylesheet Language. So XSLT is Extensible Stylesheet Language Transformation and XSLT starts with a source XML file. It uses X path to locate nodes in the document structure conforming to your source XML file and then it transforms it into something more readable, and in this case that will be XHTML. Now Dreamweaver helps us automate this process and offers a lot of tools for assisting us in building our XSL transfer sheets.
So what we will do now is we will go ahead and create an XSL file. Go to File and choose New. Go to a blank page and we want to XSLT(Entire page). Now we have two choices there. XSLT(Entire page) or XSLT(Fragment). XSLT entire page will create an XSL file. It has a head and a body tag. So it will result in the transformation of a complete XHTML document. XSLT(Fragment) on the other hand creates a smaller section of code that you can then place into an existing XHTML file. Clicking Fragment only generates the XHTML for a specific content. To display it we will need to assemble it into existing page on the server-side. Fragments are actually more common than the entire pages, but in this case we are going to do an entire page. Go ahead and click Create. So Dreamweaver says okay, if you want me to create an XSLT sheet, I need to know which XML file I am going to be parsing.
Now we can either attach the local file from our computer or we can attach a remote file on the Internet. Now if we are going to do a remote file we don't have control of that and we will have to do that transformation server-side. Local files we can do client-sides. So we are going to choose Attach local file on my computer or local area network and it will need a browse. If you look in the Chapter 7 Exercise Files, you will find the _xml folder and we want to find our upcoming XML file, which we just created. So we want to choose upcoming.xml. Go ahead and click Choose and then click OK.
Now there will be a little bit of a pause as it parses the data and then your Bindings panel should automatically open. If it doesn't automatically open just go ahead and click on your Bindings panel and if you don't see the data here, you will just click the Refresh symbol and that should go ahead and populate that out. Now I am going to stretch this down a little so I can see all my tags and we can actually see the structure that we just created there. It's the top galleryShows tag and then showType and then notice there is a Show tag with a date and a name so forth and so on. Now you will notice that both the show and the painting tags have a plus symbol besides them. That plus symbol means that we have repeating data, we have more than one, more than one show, more than one painting and we can actually use those and create what we call repeating regions on our page. So before we actually use this data on the page we are going to go ahead and type in some placeholders that are going to help us format our data.
On the top of the page we are going to type in Show Type and I will hit Return and I will type in Date and then I will put a pipe between that and I will in Artist Name, put a colon between those and type in Show Title. On the next line, I'll type in Description and one line below that I will type in Featured Works and underneath that I will type in Painting Name. Now that has no format whatsoever and the whole point of doing an XSL sheet is that you give this information formatting. So I am going to click in Show Type and I will format that using the Properties inspector as Heading 1. I will select the line underneath that and I will format that as Heading 2. The description I will leave as a Paragraph, Featured Works, I am going to format as Heading 3 and then finally Painting Name, I am going to go ahead and create an unordered list our of that, just click inside of it and on your Properties inspector click the Unordered List icon which looks like the little bulleted list.
Now I am going to go ahead and save this and again I am going to save it in the XML folder. You can save your XSL transfer sheets anywhere you want them. We are going to keep everything centralized in our XML folder. So I am going to go ahead and give it a name upcomingShows and the extension for this will be xsl. Now Dreamweaver will add that for you, but we wanted to type it at one time just so we understand our XSL transfer sheets having xsl extension. I will go ahead and click Save, and it's saved as upcomingShows.xsl. So we started the process of formatting our data. In our next exercise we are going to take the data scheme from our XML file and add it to the page, so that this XSL transfer sheet knows when encounters certain type of information how it should format it on the page.
Get unlimited access to all courses for just $25/month.Become a member