1 / 31

Tutorial 01

Tutorial 01. Creating an XML Document. Contents. Creating a Jazz Warehouse Web Page Problem Solution. Creating a Jazz Warehouse Problem.

arnaud
Download Presentation

Tutorial 01

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Tutorial 01 Creating an XML Document

  2. Contents • Creating a Jazz Warehouse Web Page Problem • Solution

  3. Creating a Jazz Warehouse Problem A Jazz warehouse’s host want to create a simple web using XML to display all the new CDs which are available in his/her shop. So he want his web layout is as below:

  4. Solution • Analysis and Design • Creating the web contents • Creating the formatted file • Applying the formatted file into the web content • Testing

  5. 1. Analysis and Design • Title: Monthly Specials at the Jazz warehouse • Message • CD contents: • CD Name: • Artist • Prices • Tracks

  6. 2. Creating the web contents 2.1 Creating a new XML file 2.2 Inserting the XML declaration 2.3 Inserting comments 2.4 Inserting the web contents

  7. 2.1 Creating a new XML file Open XML Spy > File > New > XML Document > OK

  8. 2.2 Inserting the XML declaration Use the code below to insert the declaration

  9. 2.3 Inserting comments Use the same syntax with HTML to insert comment in XML

  10. 2.4 Inserting the web contents 2.4.1 Inserting the root element 2.4.2 Inserting the title 2.4.3 Inserting the message 2.4.4 Inserting the CD contents

  11. 2.4.1 Inserting the root element Insert a root element which any name (here is SPECIALS)

  12. 2.4.2 Inserting the title Insert the title by applying the content in the title tag

  13. 2.4.3 Inserting the message To insert a text only on web page, we use the tag [CDATA]

  14. 2.4.4 Inserting the CD contents 2.4.4.1 Inserting the CD name 2.4.4.2 Inserting the artist 2.4.4.3 Inserting the CD prices 2.4.4.4 Inserting the CD tracks 2.4.4.5 Inserting other contents

  15. 2.4.4.1 Inserting the CD name Use the tag <CD> to insert the CD name

  16. 2.4.4.2 Inserting the artist Use the tag <ARTIST> to insert the artist name

  17. 2.4.4.3 Inserting the CD prices Use the tags <PRICEUS> and <PRICEUK> to insert prices

  18. 2.4.4.4 Inserting the CD tracks Use the tag <TRACK> to insert each track name

  19. 2.4.4.5 Inserting other contents Use the same syntax to insert two other CDs

  20. 3. Creating the formatted file 3.1 Creating a new CSS file 3.2 Formatting the title 3.3 Formatting the message 3.4 Formatting the CD name 3.5 Formatting the artist 3.6 Formatting the prices 3.7 Formatting the CD tracks

  21. 3.1 Creating a new CSS file Open Dreamweaver > File > New > CSS > Create

  22. 3.2 Formatting the title Set the properties of the title tag as below

  23. 3.3 Formatting the message

  24. 3.4 Formatting the CD name

  25. 3.5 Formatting the artist

  26. 3.6 Formatting the prices

  27. 3.7 Formatting the CD tracks

  28. 4. Applying the formatted file into the web content Use the code below to insert a CSS file into a XML file

  29. 5. Testing Open the web page again to check it’s in accordance with the requirements.

  30. References • New Perspectives on Creating Web Pages with HTML and XML (Patrick Carey & Mary Kemper) - Course Technology Publisher • Creating Cool Web Sites with HTML, XHTML and CSS - Taylor, Dave, Wiley

More Related