Styling XML in Expression Web

Create a new aspx page and drag the xml file you created onto it. You should see this...

You will remember we created our own tags called

<headline>
<newsitem>
<link>
<image>

all enclosed in the <sitenews> tag - well these tags are used as the description tags as you can see in the xml results. You probably wont want these labels so we will get rid of them.

Place your cursor before the "h" of the headline label click and drag to select the following labels.

headline: newsitem: link: image: then click delete - the table behind should remain highlighted hit delete again. If your complete xml has disappeared you deleted incorrectly - click undo a couple of times and try again. All we want left is the actual news - not the labels.

So your xml should now look like the following.

Now might be a good time to hit save. You will be asked to save a new file called an xsl file. This is the style file for the xml that we have just dragged onto the page. Whatever it is called just click save.

Now highlight the news headline, the first line of text (double click it) and from the style dropdown list (at the top of the page) select h2

Next highlight the news text and from the style dropdown select Paragraph.

Highlight the Link text and click on the Data View link in the top menu of expression web, from the dropdown select Format Item As and then select Hyperlink. Click ok in the pop up window.

A hyperlink pop up box will appear. You will see the text field and the address field both contain {link} this field is being called from the xml file. If we leave this as is we will get the following.

And finally, lets show the image simply highlight the image text then click on the Data View link in the top menu of expression web, from the dropdown select Format Item As and then select Picture. You will see the following.

Xml Tutorial in Expression Web Create an XML file and learn how you can use it anywhere on your web site. A simplistic look at the amazing powers of XML. Focus is on creating a small xml file from a blank page, placing it on a page, styling and formatting to show a news item with an image and a link. The image is controlled and hyperlinked to open in a new window and includes and alternative text again taken from the xml file. and the hyperlink is controlled all from a simple xml file. http://www.expression-web-help.com/adrotator/adrotator/adrotatorControl.aspx

So that's it - simple xml.

Hungry for more then follow me as we look at more styling of the displayed content.

Part 3