Helsingin yliopisto/tktl XML-metakieli XSL-FO XSL - extensible stylesheet language XSL-FO

Samankaltaiset tiedostot
Helsingin yliopisto/tktl XML-metakieli XSL-FO XSL-FO. XSL-FO sivut

Muotoilutoliot. XSL:n muotoiluoliot. Muotoiluolio. Muotoilualueet. Lohkoalueiden sijoittelu. Muotoilualueiden sijoittelu. Rivialueiden ominaisuuksia

XSL Formatting Objects

9.16 XSLT ja nimiavaruudet (1/3): literaali oletusnimiavaruus

Digitaalisen median tekniikat css tyylimääritykset jatkuu

Digitaalisen median tekniikat css tyylimääritykset jatkuu Harri Laine 1

CSS-kielen avulla määritellään HTML-dokumentin tyyli. CSS avulla voidaan tarkemmin määritellä eri elementtien ominaisuuksia.

CSS. Tekstin muotoilua

Kylänetti projektin sivustojen käyttöohjeita Dokumentin versio 2.10 Historia : 1.0, 1.2, 1.6 Tero Liljamo / Deserthouse, päivitetty 25.8.

Helsingin yliopisto/tktl XML-metakieli CSS XML-dokumenttien käsittely. XML-dokumenttien käsittely

Helsingin yliopisto/tktl XML-metakieli k2013 CSS XML-dokumenttien käsittely. XML-dokumenttien käsittely

CSS aloitus. CSS Cascade Stylesheet Mirja Jaakkola

Digitaalisen median tekniikat. JSP ja XML Harri Laine 1

Digitaalisen median tekniikat. JSP ja XML

Luento 11: XSL-FO & SVG

Cascading Style Sheets

valitsin on useimmiten html-elementti, jolle tyyli halutaan luoda

Helsingin yliopisto/tktl XML-metakieli XSLT XSL - extensible stylesheet language XSLT

Ulkopuolisen tyylitiedoston käyttö

Digitaalisen median tekniikat css tyylimääritykset Harri Laine 1

Kuvat. 1. Selaimien tunnistamat kuvatyypit

Digitaalisen median tekniikat css tyylimääritykset

Digitaalisen median tekniikat css tyylimääritykset

CSS - aloitus. ICT01D syksy 2005 Mirja Jaakkola, Helia. Ulkopuolisen tyylitiedoston käyttö

Sisältö. XML, XHTML ja CSS XML XML. XML:n ja HTML:n ero. XML kieliä XML XHTML CSS XSL. T Hypermediadokumentin laatiminen 2002

Taulukot. 1. Taulukon rakenne: ICT01D Elina Ulpovaara

Extensible Stylesheet Language (XSL)

XSL-muunnokset. 9 XSL-muunnokset

è è è XSL-muunnokset 9 XSL-muunnokset

1. Lohkon korkeus ja leveys

Ulkoasun muokkaus CSS-tiedostossa

TAULUKOINTI. Word Taulukot

XML, XHTML ja CSS. T Hypermediadokumentin laatiminen. Mikko Pohja

Kotisivujen teko. Jan Lindholm Kirkkonummen kansalaisopisto Syksy koodari.eu jsbin.com

Hohde Consulting 2004

H T M L eli kuinka laadin itselleni päheät kotisivut. Janne Käki

XSL-muunnokset. 9 XSL-muunnokset

XML prosessori. XML prosessointi. XML:n kirjoittaminen. Validoiva jäsennin. Tapahtumaohjattu käsittely. Tapahtumaohjattu käsittely.

Aulikki Hyrskykari. CSS Taustaa CSS syntaksi CSS Valitsimet Kuvat verkkosivulla

Code Camp for Girls. Sanna Nygård. Lokakuussa

HAAGA-HELIA ammattikorkeakoulu Ohje 1 (5) Raportin tekeminen

4 Johdanto CSS-tyyleihin

4 Johdanto CSS-tyyleihin

H T M L eli kuinka laadin itselleni päheät kotisivut. Janne Käki

XML Technologies and Applications - harjoitustyö -

XSLT - ohjelmaesimerkkejä. Jaana Holvikivi Metropolia

Kuva xhtml-sivulla. Mirja Jaakkola

Proseduraalinen dokumentti: sisältö, rakenne ja ulkoasu yhdessä, esim. worddokumentti

XSLT - ohjelmoinnin perusteet. Jaana Holvikivi Metropolia

Digitaalisen median tekniikat. Luento 3: CSS

CSS tyyliä sivuihin osa II. Elina Ulpovaara

ESIKATSELU, TULOSTAMINEN, TUNNISTEET

Kotisivut helposti - osa 3

WWW-sivujen Verkkosivujen ulkoasu (CSS)

KAPPALEMUOTOILUT. Word Kappalemuotoilut

Verkkosivujenulkoasu

Aulikki Hyrskykari. JWT Hyrskykari, SIS, Tampereen yliopisto 3/31/2014

Kun suunnitelma on valmiina niin itse sivuston rakentaminen on jo helpompaa. (jatketaan tätä rakentelu vaiheessa.

Navigointi Verkkomultimedia ICT1tn004

Editorin käyttö. TaikaTapahtumat -käyttöohje

Digitaalisen median tekniikat xhtml

Digitaalisen median tekniikat xhtml

Digitaalisen median tekniikat xhtml Harri Laine 1

selector { CSS property: value; property2: value; Code Camp for Girls Sonja Jaakkola & Sanna Nygård

CSS - tyylit Seppo Räsänen

WWW-sivujen Verkkosivujen ulkoasu (CSS)

JWT 2017 luento 2. to klo Aulikki Hyrskykari PinniB1096

Word ohje Word2010. Jari Laru, yliopisto-opettaja. Asko Pekkarinen, lehtori

05/09/2007. Digitaalisen median tekniikat, s2007 HY/TKTL, XHTML osa 1. Harri Laine 1. XHTML-merkkauskieli. Digitaalisen median tekniikat xhtml

05/09/2007. Digitaalisen median tekniikat, s2007 HY/TKTL, XHTML osa 1. Harri Laine 1. XHTML-merkkauskieli. Digitaalisen median tekniikat xhtml

Tee html-sivu, jossa on yllä olevat kaksi taulukkoa.

Kotisivuohjeet. Eteläpohjalaiset Kylät ry. Sivupohjien rakenne

Ensimmäiset XPath-lausekkeet

Proseduraalinen dokumentti: sisältö, rakenne ja ulkoasu yhdessä, esim. worddokumentti

1. Mittayksikön muuttaminen. 2. Perusasiakirjan luominen. 3. Apuviivat jokaiselle sivulle (tehdään Master Page osioon) InDesign Perusteet 1

Johdatusta selainohjelmointiin

QT tyylit. Juha Järvensivu 2008

Entiteetit erotetaan muusta tekstistä & ja puolipiste. esim. copyright-merkki näkyy sivulla

XML kielioppi. Elementtien ja attribuuttien määrittely. Ctl230: Luentokalvot Miro Lehtonen

Internetsivujen perusrakenne. Html-dokumentin keskeiset elementit ja attribuutit

Katsotaan tarkemmin seuraavaksi: Reunus (border) Täyte (padding) Marginaali (margin)

Ajatus kaiken taustalla

Lisätehtävät. Frantic 2015 sivu 1

Johdatus L A TEXiin. 7. Taulukot ja kuvat. Dept. of Mathematical Sciences

Työvälineohjelmistot KSAO Liiketalous 1

Marginaali: Sivujen asetukset säädetään kohdasta 2007+: Sivun asettelu > Marginaalit > Mukautetut reunukset (Page Layout > Margins

Sen jälkeen Microsoft Office ja sen alta löytyy ohjelmat. Ensin käynnistä-valikosta kaikki ohjelmat

WWW-sivujen Verkkosivujen ulkoasu (CSS)

Kuvat ja taustat ICT1TN004. Elina Ulpovaara

TAULUKKO, KAAVIO, SMARTART-KUVIOT

Paikkatiedon esittäminen XML-muodossa: Oracle Spatial, SVG ja GML

Pseudoelementit. P:first-line { font-style: italic } H1:first-letter { font-size: bigger }

Written by Administrator Wednesday, 05 October :06 - Last Updated Monday, 17 October :28

XML merkintäkielten perusteet. Luento 2 - XSLT Pekka Aarnio

HARJOITUSTYÖ ITKP101 Ronja Saarinen

Sosiaalihuollon asiakirjastandardi kehittyy. Konstantin Hyppönen Erikoissuunnittelija Tietojenkäsittelytieteen laitos Kuopion yliopisto

XML-datan kysely. Topi Sarkkinen. Seminaarityö. Helsinki HELSINGIN YLIOPISTO Tietojenkäsittelytieteen laitos

Johdatus L A TEXiin. 9. Sivun mitat, ulkoasu ja kalvot. Matemaattisten tieteiden laitos

Asemointi. 1. Lohkon korkeus ja leveys

Transkriptio:

XSL - extensible stylesheet language XSL kehitettiin XML aineistojen esitysmuodon märittelyyn XSLT (T ~ Transformations) dokumentin rakenteen tai sisällön muunnokset XSLT 1.0 (http://www.w3.org/tr/xslt) 1999 XSLT 2.0 (http://www.w3.org/tr/xslt20/) 2007 XSL ( XSLT:n lisäksi = Formating objects) ladonta ja muotoilu XSL 1.1 (http://www.w3.org/tr/xsl/) (2006) XSL-Formating objects on suositus tiedon esitystavan määrittelyyn Osa XSL-suositusta XSLT:n tapaan on XML-rakenteinen ja hyvin raskas käyttää ilman sopivia työkaluja Tyypillistä: määrityksiä generoidaan XSLT-muunnoksen tuloksena Osittain CSS-tyyppisiä muotoiluja 1 2 sivut sivut :ssa dokumentti ladotaan joukolle sivuja (page) - webbisivu on yksi pitkä sivu Sivujen yleisrakenne määritellään sivupohjien (page master) avulla Dokumentissa voi olla erirakenteisia sivuja, eli yhden dokumentin esittämiseen voidaan käyttää useampia sivupohjia Sivupohjan määrittelyssä kuvataan sivun yleisominaisuudet ja sivun vyöhykkeet (regions) Sivun yleisominaisuuksia ovat mm. korkeus ja leveys marginaalit: ylä, ala, vasen, oikea Marginaalien sisäpuolelle jäävä alue jakautuu vyöhykkeisiin (region): Pohjana sivun runko (page body) Rungon päälle sijoittuvat muut vyöhykkeet: ennen (before) - ylävyöhyke jälkeen (after) - alavyöhyke aluksi (start) - vasenvyöhyke lopuksi (end) -oikeavyöhyke nämä tulkinnat meidän kirjoitusjärjestelmämme mukaan 3 4 sivut sivut vasenmarginaali Start ylämarginaali Runko Before After End oikeamarginaali <fo:simple-page-master master-name="a4" page-width="297mm" page-height="210mm" margin-top="1cm" margin-bottom="1cm" margin-left="1cm" margin-right="1cm"> <fo:region-body margin="2.5cm"/> <fo:region-before extent="2cm"/> vyöhykkeen korkeus <fo:region-after extent="2cm"/> <fo:region-start extent="2cm"/> vyöhykkeen leveys <fo:region-end extent="2cm"/> HUOM: alamarginaali PÄÄLLEKKÄISYYS 5 6 1

sivut Kaikille vyöhykkeille voidaan määritellä runsaasti CSS-tyyppisiä ominaisuuksia: esim. taustaväri tai taustakuva, reunuksia, kirjoitussuunta, tyhjää tilaa, yms. Runkovyöhykkeelle voidaan määritellä myös palstojen lukumäärä (column-count) ja palstavälin koko (column-gap) Sivupohja määritellään simple-page-master elementtinä (ed. esimerkki) layout-master-set elementin alielementtinä ssa sisältö virtaa järjestettynä ladontaelementtien jonona sivupohjan mukaiselle sivulle. Samaa sivupohjaa käytetään kunnes tietovirta päättyy. Näin muodostuu sivujakso (page sequence) Sivujaksoon liittyy täten yksi tietovirta (flow) ja yksi sivupohja. 7 8 Yhdestä dokumentista voidaan tuottaa useita sivujaksoja Jokaista erirakenteista sivua varten on määriteltävä oma sivupohja ja sitä vastaava sivujakso. Sivujakso määritellään page-sequence elementtinä. 9 10 <?xml version="1.0" encoding="iso-8859-1"?> <fo:root xmlns:fo="http://www.w3.org/1999/xsl/format"> <fo:simple-page-master master-name="a4"> <fo:region-body /> sivupohja Sivulle ladottavat ladontaelementit voivat olla lohkoja (block), tai upotettuja elementtejä (inline elements), taulukkoelementtejä, tai sivuunpantavia (out of line) elementtejä <fo:page-sequence master-reference="a4"> <fo:block>ensimmäinen elementti</fo:block> <fo:block>toinen elementti</fo:block> Sivupohjan käyttö 11 12 2

Lohko (block): Erillinen suorakaiteen muotoinen ympäristöstä rivinvaihdoin erotettava elementti, kuten kappaleet, lista-alkiot, otsakkeet Voivat sisältää lohkoja ja muita elementtejä Rivinvaihto ennen alkua ja lopun jälkeen Lohkot sijoitetaan sarjallisesti ei täsmällistä sijaintia Lohkon sisällön voidaan toisaalta nähdä muodostuvan rivitiedosta = lohkojen sisäisistä tekstiriveistä, jotka sisältävät upotettuja elementtejä ja upotettua tyhjätilaa Lohkojen ominaisuuksina voidaan määritellä mm. ympäristö (katso kuva seuraavalla sivulla) fontti tekstinsijoittelu sivunvaihtojen suhde lohkoon 13 14 Kaikkien osien mitat (ylä /ala/vasen/oikea) erikseen määriteltävissä Space before margin border padding content Space after 15 Upotetut elementit ladotaan tyypillisesti osaksi rivitietoa. Elementit voivat sisältää toisia upotettuja elementtejä ja merkkitietoa Upotettuihin kuuluvat esim: erilliset merkkiobjektit (character), ulkoiset kuvat (external-graphic), ulkopuoliset xml-elementit kuten svg-kuvat tai MathML kaavat (instream-foreign-object) Jos kuvat halutaan omiksi lohkoikseen, niiden ympärille pitää määritellä lohkoelementti sivunumerot (page-number) spotukset (inline) viivat (rule / leader) 16 Upotettujen elementtien määriteltävissä olevat ominaisuudet hieman suppeammat kuin lohkojen. Tyypillisiä: fonttiominaisuudet ja ympäröivä tyhjä tila Ominaisuudet elementtityypistä riippuvia, esimerkiksi kuvalla koko ja skaalaustietoja Sivuunpantavia elementtejä ovat mm. Alaviitteet (footnote) Leijuvat kohteet (float) Käytetään tyypillisesti kuvien sijoitteluun, Muun sisällön suhde leijuvaan kohteeseen määriteltävissä CSS-tapaan 17 18 3

esimerkki Sivuille voidaan määritellä toistuvaa (static content) sisältöä ja tietovirran mukana tulevaa sisältöä (flow-content) Toistuvaa sisältöä esimerkiksi sivuotsakkeet, sivunumero Esiintyy samanlaisena (sivunumeron sisältö toki vaihtuu) kaikilla sivuilla sijoitetaan tyypillisesti reunavyöhykkeille 19 <?xml version="1.0"?> <xsl:stylesheet version="1.0" xmlns:xsl=http://www.w3.org/1999/xsl/transform xmlns:fo="http://www.w3.org/1999/xsl/format"> <xsl:template match="/"> <fo:root xmlns:fo="http://www.w3.org/1999/xsl/format"> <fo:simple-page-master master-name="a4" page-width="297mm" page-height="210mm" margin-top="0.5in" margin-bottom="0.5in" margin-left="0.5in" margin-right="0.5in"> <fo:region-before extent="1.0in"/> <fo:region-body margin-top="1.0in" margin-bottom="1.0in"/> <fo:region-after extent="1.0in"/> 20 esimerkki <fo:page-sequence master-reference="a4 initial-page-number="1" language= en"> <fo:static-content flow-name="xsl-region-before"> <fo:block>sivuotsake</fo:block> </fo:static-content> <fo:static-content flow-name="xsl-region-after"> <fo:block>p. <fo:page-number/></fo:block> </fo:static-content> <xsl:apply-templates select="//kohde"/> </xsl:template> <xsl:template match= kohde"> <fo:block><xsl:value-of select= nimi"/></fo:block> </xsl:template> ominaisuuksien periytyminen Osa muotoiluelementtien ominaisuuksista periytyy, esimerkiksi font-family, font-size, font-weight, start-indent and end-indent, text-align, line-height, and color (text color). Ei periytyviä ovat esim. space related (space-before, space-after), keeps, breaks, borders, padding and background, and positioning properties </xsl:stylesheet> 21 22 <xsl:stylesheet version="2.0" xmlns:xsl="http://www.w3.org/1999/xsl/transform" xmlns:b="http://businesscard.org" xmlns:fo="http://www.w3.org/1999/xsl/format"> <xsl:template match="b:card"> <fo:root> <fo:simple-page-master master-name="simple" page-height="5.5cm" page-width="8.6cm" margin-top="0.4cm" margin-bottom="0.4cm" margin-left="0.4cm" margin-right="0.4cm"> <fo:region-body/> 23 <fo:page-sequence master-reference="simple"> <fo:table> <fo:table-column column-width="5cm"/> <fo:table-column column-width="0.3cm"/> <fo:table-column column-width="2.5cm"/> <fo:table-body> <fo:table-row> <fo:table-cell> <fo:block font-size="18pt" font-family="sans-serif" line-height="20pt" background-color="#a0d0ff" padding-top="3pt"> <xsl:value-of select="b:name"/> </fo:block> <!-- muut alkiot samoin --> </fo:table-cell> 24 4

Määritysten uudelleenkäyttö <fo:table-cell/> <fo:table-cell> <xsl:if test="b:logo"> <fo:block> <fo:external-graphic src="url({b:logo/@uri})" content-width="2.5cm"/> </fo:block> </xsl:if> </fo:table-cell> </fo:table-row> </fo:table-body> </fo:table> </xsl:template> </xsl:stylesheet> 25 Elementtien attribuutit voidaan antaa alkutägeissä, samoja attribuuttiarvoja voidaan kuitenkin käyttää monelle eri attribuutille Attribuuttiryhmää käyttämällä voidaan uusiokäyttää attrivuuttiarvoja, esim 26 Määritysten uudelleenkäyttö Ryhmän esittely: <xsl:attribute-set name="cover.date" > <xsl:attribute name="space-after">5mm</xsl:attribute> <xsl:attribute name="font-size">14pt</xsl:attribute> <xsl:attribute name="font-family">"times New Roman"</xsl:attribute> <xsl:attribute name="text-align">center</xsl:attribute> <xsl:attribute name="text-align-last">center</xsl:attribute> <xsl:attribute name="width">160mm</xsl:attribute> </xsl:attribute-set Ryhmän käyttö <fo:block-container xsl:use-attribute-sets="cover.date"> <xsl:apply-templates select="/doc/head/date"/> </fo:block-container> 27 5