XML 2. Formatering af XML data med CSS Når man arbejder med XML og CSS er fremgangsmåden den samme som i forbindelse med HTML og CSS.

Slides:



Advertisements
Lignende præsentationer
Introduktion til CSS Videre med CSS. Body egenskaber Body-markøren omslutter alle vores indholdselementer. Du kan derfor ved at tillægge en række egenskaber,
Advertisements

Kort om JavaScript Afvikles i browser på klienten Sendes fra server (php, asp, aspx, htm) eller startes i klient som htm/html fil. Skabelon: –”main” -
Introduktion til HTML HTML dokumentets struktur & Indhold.
Introduktion til CSS Godt i gang med CSS. 201 – V1 – Introduktion til CSS Hvad er stylesheet?
Introduktion til HTML Tabeller. Formatering af tekst, overskrifter, brødtekster og links bringer os ganske langt. Men ofte vil vi også have brug for at.
Forsiden 1.Denne knap bruges når du vil taste dagens resultater ind. 2.Denne knap skal kun bruges hvis du allerede har gemt data og du finder ud af at.
Klik på Aktivér redigering på meddelelseslinjen.
Videregående pc-vejledning Modul 04: Windows-elementer 60+Bornholm.
Hjemmesidekonstruktion Tjekspørgsmål 1.Hvad er et markup-sprog – hvad bruges det til? 2.Hvad er forskellen mellem et markup-sprog og et scriptsprog? 3.Hvad.
Introduktion til HTML Formularer V1 introduktion til formularer Den sidste af HTML strukturmarkørerne er FORM-markøren, der bruges til at lave.
Introduktion til HTML Hypertekst referencer. Uden links – Hypertekst referencer – intet world wide web. World wide web er et Hypermedium….. Link definition.
Klik på Aktivér redigering i meddelelseslinjen, Hvis videoerne i kurset ikke afspilles, skal du måske hente QuickTime eller blot skifte til PowerPoint.
Vejledning i blog-værktøjet WordPress Opdateret august 2009.
– Sådan virker det! Dit elektroniske postsystem Ved Arne Crown Rasmussen
Vejledning i blog-værktøjet WordPress Opdateret oktober 2012.
Vejledning i blog-værktøjet WordPress Opdateret august 2008.
Vejledning i blog-værktøjet WordPress Opdateret februar 2009.
Beskyt din computer og dine data!
Cascading style sheets (CSS) Formål med css • Adskillelse af indhold og udtryk • Større typografisk frihed • Nemmere redigering Eksempel uden style sheetuden.
Formularer (Access, del 3)
Dag 7: Javascript Html- og css-billedgalleri Javascript-intro
Dagsorden: Formål: Jeres websider skal layoutes i bokse/sektioner
+ Interaktion 2 Stefan Grage. + DAGENS MÅL  CSS recap  CSS3 Status & anvendelse  Baggrunde, kanter, skygger, opacity, gradients…  Transitions  Web.
Hvordan bruger jeg First Class konferencerne ?
SQL 1 DDL og DML.
POSITIONERING Stefan Grage
Introduktion til indholdsfortegnelser j Tryk derefter på F5, eller klik på Slideshow > Fra begyndelsen for at starte kurset. Klik på Aktivér redigering.
Join.me/webkursus. * Vi kan nu ramme de html-elementer vi vil… * Lad os få placeret vores “kasser”/strukturelle elementer * Dertil bruger vi en række.
Dag 9: Programpakker Jquery og JQuery Mobile
CSS ver. 2 Rikke Møller-Poulsen. Visning af billeder?!? Er der stadig nogen, der har problemer med at få vist billeder på deres site?
Skoleporten Hvordan tilpasser jeg layout mulighederne i
Masterpages/Otto Knudsen 1 Master Pages Master Pages i ASP.NET 2.0.
Introduktion/Otto Knudsen 1 Overblik WebForms ASP.NET.
Introduktion til Access (Access, del 1)
Webserveren kan afvikle flere applikationer, der hver har deres eget selvstændige ”liv” og hukommelse. Den enkelte applikation består typisk af flere elementer.
Blogging Udvidet design og funktion
Dag 4 - dagsorden: Formål: I skal lære at lave menuer I Tekst/CSS-baserede menuer 1. Lodret menu med mouse-over-effekt 2. Vandret menu med mouse-over-effekt.
Formål med dag 2 1.Hvordan lægger man websider ud på internettet 2.Hvordan optimerer man billeder til web? 3.Hvordan sætter man billeder ind på websider?
XML1 4.7 XML and Its Data Model. XML2 Introduktion til XML, 178 XML = eXtensible Markup Language Markup language –sprog, hvor data "pakkes ind" i tags.
Intro Projekttyper v/ Lise Louv, Uddannelsesafdelingen Siden sidst: evaluering på opgaver og virtuel kursus. Kursets ugeforløb læse – forelæsning – øvelsestime.
18 – Java Server Faces. 2 NOEA2009Java-kursus – JSF 2 Web-applikationer - 1 Brugere interagerer med en Web-browser Browseren sender forespørgsler til.
Beginning CSS and Web Development kap
Sensus Hyppige brud på retningslinierne for tilgængelighed - WCAG Helene Nørgaard Bech Sensus ApS.
1 HMAK XMLRelationel model og XMLNOEA / PQC 2005 SQLServer og XML Hent data via URL Generering af xml –Raw –Auto –Explicit Hent data via template Evt.
BlueDoc 2.0 (C) 2003 TMA Components Web-integreret Intranet søgemaskine.
Videregående pc-vejledning Modul 06: Netværk WWW = World Wide Web 60+Bornholm.
HTML intro Dag 1. Client – Server miljø Client Server Klient ◦ Hardware (Screen size, colors, processor…) ◦ Platform (Mac, Windows, Linux…) ◦ Browser.
XML Rasmus D. Lehrmann DM Indhold Hvad er XML? XML standarder Hvor bruges XML? XML struktur Træ struktur Element & Attribute Syntaks i XML Stylesheets.
Øvelsestimer (opgave 5) v/Morten Davidsen Læser til daglig cand.merc.(dat.) på CBS.
Rapporter (Access, del 5). RHS – Informationsteknologi – Udgangspunkt Vi har oprettet en database Vi har defineret en eller flere tabeller, og.
CSS - Cascading Style Sheets HTML-koder for tekststruktur og for formatering HTML-koder for tekststruktur CSS-koder for formatering FørNu Lettere at redigere.
Webserveren kan afvikle flere applikationer, der hver har deres eget selvstændige ”liv” og hukommelse. Den enkelte applikation består typisk af flere elementer.
Introduktion til Access (Access, del 1). RHS – Informationsteknologi – Fra design til udvikling Vi ved nu, hvordan vi finder et design for en database,
Masterpages/Otto Knudsen 1 Navigation på webstedet Kontroller til navigation mellem siderne på webstedet.
Intro Siden sidst: evaluering på opgaver og virtuel kursus.
DWDK Øvelsesgang 2. Tegnsæt: utf-8 vs. iso Utf-8 = universelt tegnsæt Giver advarsel i validator Dokument skal gemmes i utf-8 format i notepad.
Oprettelse af tabeller (Access, del 2)
Webserveren kan afvikle flere applikationer, der hver har deres eget selvstændige ”liv” og hukommelse. Den enkelte applikation består typisk af flere elementer.
CSS - Cascading Style Sheets HTML-koder for tekststruktur og for formatering HTML-koder for tekststruktur CSS-koder for formatering FørNu Lettere at redigere.
Tekst til nettet Digitale Medier E /11. MENU DIGITALE MEDIER: FORMIDLING OG DESIGN SØGEMASKINER OG OPTIMERING Tekst på nettet Opsummering på kursets.
DWDK – øvelsestime 3 CSS – let the fun begin!!. Tilgængelige slides Disse slides ligger på mit public drev
Grundlæggende web design, ITU Torsdag d. 3 nov Javascript.
Grundlæggende DW, HTML, CSS, udskæring.
Client / Server teknologi Eksamensteori Anbefaling: Tag notater.
PD – kursusgang 2 Introduktion til Frames og Cascading Style Sheets.
Øvelsestimer (opgave 3) v/Morten Davidsen Læser til daglig cand.merc.(dat.) på CBS.
Formularer (Access, del 3). RHS – Informationsteknologi – Udgangspunkt Vi har oprettet en database Vi har defineret en eller flere tabeller Vi.
Anvendelse.
Tre lags arkitektur.
Find dybdelink Blå kurser: Fremmed kurser
Præsentationens transcript:

XML 2

Formatering af XML data med CSS Når man arbejder med XML og CSS er fremgangsmåden den samme som i forbindelse med HTML og CSS.

XML fil stamtrae Tina Hansen Mor til Per, Peter kone, Faster til Jane og Mathias, Tante til Tom og Mads Kvinde 38 år 167 cm 50

Peter Jensen Far til Per, Tinas mand, Farbror til Tom og Mads, Onkel til Jane og Mathias Mand 37 år 175 cm 74 kg.

Eksempel stylesheet Stamtrae { background-color: rgb(78,77,75); display: block; } familemedlem { font-family:verdana, arial; }

Stylesheet forts. overskrift { background-color: #FFBC54; display: block; font-family: verdana, arial; font-size: 25px; font-weight: bolder; padding: 5px; padding-left: 10px; margin-bottom:25px; text-align:center; border:solid 2px rgb(190,202,200); } fornavn { background-color: #FFBC54; color: white; display: block; font-family: verdana, arial; font-size: 18px; font-weight: bolder; padding: 5px; padding-left: 10px; margin-bottom:5px; border:solid 1px rgb(190,202,200); }

Stylesheet forts. efternavn { background-color: #CC7002; color: white; display: block; font-family: verdana, arial; font-size: 18px; font-weight: bolder; padding: 5px; padding-left: 10px; border:solid 1px rgb(190,202,200); } roller, koen, hoejde, vaegt, alder { font-size:12px; display: block; font-family: verdana, arial; margin-left: 60px; color:rgb(190,202,200); }

Stylesheet forts. rolle { display: inline; font-family: verdana, arial; position:relative; }

Display Der anvendes en bestemt CSS egenskab der hedder Display. Display egenskaben er i dette tilfælde ansvarlig for at vise XML elementerne: overskrift, fornavn, efternavn, roller, koen, hoejde, vaegt og alder med værdien Block. Block har to egenskaber: 1. Block tvinger elementer til at starte under hinanden. 2. Block viser et element i hele skærmbredden. Elementet rolle bliver erklæret med en display egenskab med værdien inline. Som viser alle rolle elementerne på en linje, uanset hvor mange rolle elementer der er knyttet til et familemedlem.

Stylesheet i et XML dokument Når man skal hente et stylesheet i et XML dokument skal man bruge følgende element : Dvs. XML dokumentet starter med følgende: osv.

Data Islands og XML Man kan lave en masse ting med XML og CSS Der er begrænsninger f.eks: –Ikke undlade at lave formatering for et element fordi det så vil blive vist som en XML tag i browseren –Man kan ikke bestemme hvilke elementer der skal vises og hvilke der ikke skal vises.

Data Islands Med en Data Islands kan man indlæse et helt XML dokument som en ø af XML data på klienten (i browseren) Derefter laves en binding imellem XML data og nogle bestemte HTML elementer (tags). Det giver nogle fordele præsentations mæssigt men man kan også lave nogle ret smarte redigerings moduler.

Data Island i et HTML dokument Man laver en Data Island i et HTML dokument med et XML element der ser sådan her ud: Elementet fortæller browseren at den skal gøre 3 ting: 1. Indlæse en ø af XML data (Data Island) 2. Bruge et id som henvisning til Data Islanden 3. Læse XML data fra filen visfamilie.xml

Data Island i en tabel I de fleste tilfælde vil man opbygge en side som indeholder en Data Island i en tabel, for at kunne bruge Data Islanden skal tabellen have et par attributter : Attributten datasrc="#hentdata" referere til id'et der indeholder Data Islanden. Attributten datapagesize="4" fortæller hvor mange elementer der skal vises ad gangen.

HTML med Data Island kode Udsnit af mit stamtræ ……. Udsnit af mit stamtræ <

Tabellens overskrifter Fornavn Efternavn Id Køn Alder Højde Vægt Beskrivelse

Tabellens krop

Xml data bliver bundet til elementerne med attributten datafld. Med en Data Island bestemmer man selv hvilke XML elementer der skal med i visningen.

Redigering med Data Island og formular elementer. Man kan redigere en XML nodes tekstværdi i en browser. Man binder XML data til nogle af HTML's form elementer. Den egenskab man binder er : – value for input/ textarea elementer –for et select element er det value egenskaben i de option elementer der er indeholdt i select boksen – Sosu-Assistent –for input elementer af typen radio/checkbox er det egenskaben checked.

Redigering med Data Island og formular elementer. De ændringer man laver vil blive husket selvom at man skifter til visning af 4 nye familiemedlemmer. 1. Det er kun Data Islanden der bliver opdateret. 2. De ændringer man laver bliver IKKE gemt i den XML fil man læser data fra. Hvis man vil gemme de ændringer man laver, kan det gøres med f.eks et ASP script, som først indlæser den opdaterede XML og laver en ny XML fil ved hjælp af ASP komponenten FileSystemObject.

Tabellens overskrift Fornavn Efternavn Id Køn Alder Højde Vægt Jobtitle Beskrivelse

Tabellens krop Sosu-Assistent Web-programmør

Anvendelse af Data Islands På serveren laves et database udtræk og sender data til et script, der på grundlag af data udtrækket laver en xml fil og sender hele filen til klienten i form af en Data Island. Klienten kan få præsenteret og redigerer i dataene og til sidst kan de redigerede xml data sendes tilbage til serveren hvor et script så indsætter data i databasen igen.

Kilder Eksemplerne er hentet på Forslag til simple XML editorer: XRay 2 XML editor XMLEditPro v /