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

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

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.

valitsin on useimmiten html-elementti, jolle tyyli halutaan luoda

CSS aloitus. CSS Cascade Stylesheet Mirja Jaakkola

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

Ulkopuolisen tyylitiedoston käyttö

Cascading Style Sheets

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

Luento 11: XSL-FO & SVG

Kuvat. 1. Selaimien tunnistamat kuvatyypit

Digitaalisen median tekniikat. JSP ja XML Harri Laine 1

Digitaalisen median tekniikat. JSP ja XML

Digitaalisen median tekniikat css tyylimääritykset Harri Laine 1

Digitaalisen median tekniikat css tyylimääritykset

Digitaalisen median tekniikat css tyylimääritykset

Taulukot. 1. Taulukon rakenne: ICT01D Elina Ulpovaara

XSL-muunnokset. 9 XSL-muunnokset

è è è XSL-muunnokset 9 XSL-muunnokset

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

1. Lohkon korkeus ja leveys

Ulkoasun muokkaus CSS-tiedostossa

TAULUKOINTI. Word Taulukot

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

Extensible Stylesheet Language (XSL)

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

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

Hohde Consulting 2004

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

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

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

XSL-muunnokset. 9 XSL-muunnokset

4 Johdanto CSS-tyyleihin

4 Johdanto CSS-tyyleihin

Kuva xhtml-sivulla. Mirja Jaakkola

Digitaalisen median tekniikat. Luento 3: CSS

CSS tyyliä sivuihin osa II. Elina Ulpovaara

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

ESIKATSELU, TULOSTAMINEN, TUNNISTEET

Kotisivut helposti - osa 3

KAPPALEMUOTOILUT. Word Kappalemuotoilut

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

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

XSLT - ohjelmaesimerkkejä. Jaana Holvikivi Metropolia

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

WWW-sivujen Verkkosivujen ulkoasu (CSS)

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

XML Technologies and Applications - harjoitustyö -

Verkkosivujenulkoasu

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

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

XSLT - ohjelmoinnin perusteet. Jaana Holvikivi Metropolia

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.

WWW-sivujen Verkkosivujen ulkoasu (CSS)

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

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

JWT 2017 luento 2. to klo Aulikki Hyrskykari PinniB1096

QT tyylit. Juha Järvensivu 2008

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

Ensimmäiset XPath-lausekkeet

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

Kuvat ja taustat ICT1TN004. Elina Ulpovaara

Johdatusta selainohjelmointiin

TAULUKKO, KAAVIO, SMARTART-KUVIOT

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

Helsingin yliopisto / TKTL XML-Metakieli XML Schema

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

HARJOITUSTYÖ ITKP101 Ronja Saarinen

WWW-sivujen Verkkosivujen ulkoasu (CSS)

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

Asemointi. 1. Lohkon korkeus ja leveys

KUVAT. Word Kuvat

SUOMEN JOUSIAMPUJAIN LIITTO RY Graafinen ohjeisto Versio 1, Huhtikuu 2017

Listat eli luettelot. Järjestämätön lista (unordered list)

Transkriptio:

sivut 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 :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) 1 2 sivut sivut Sivun yleisominaisuuksia ovat mm. ylämarginaali 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: vasenmarginaali Start Runko Before End oikeamarginaali 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 After 3 HUOM: PÄÄLLEKKÄISYYS alamarginaali 4 sivut sivut <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"/> <fo:region-after extent="2cm"/> <fo:region-start extent="2cm"/> <fo:region-end extent="2cm"/> vyöhykkeen korkeus vyöhykkeen leveys 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ä 5 6 1

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 <?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 /> </fo:layout-master-set> <fo:page-sequence master-reference="a4"> <fo:block>ensimmäinen elementti</fo:block> <fo:block>toinen elementti</fo:block> sivupohja Sivupohjan käyttö 10 Sivulle ladottavat ladontaelementit voivat olla lohkoja (block), tai upotettuja elementtejä (inline elements), taulukkoelementtejä, tai sivuunpantavia (out of line) elementtejä 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 11 12 2

Lohkojen ominaisuuksina voidaan määritellä mm. ympäristö (katso kuva seuraavalla sivulla) fontti tekstinsijoittelu sivunvaihtojen suhde lohkoon Kaikkien osien mitat (ylä /ala/vasen/oikea) erikseen määriteltävissä Space before margin border padding content 13 Space after 14 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) upotukset (inline) viivat (rule / leader) Upotettujen elementtien määriteltävissä olevat ominaisuudet ovat hieman suppeammat kuin lohkojen. Tyypillisiä: fonttiominaisuudet ja ympäröivä tyhjä tila Ominaisuudet elementtityypistä riippuvia, esimerkiksi kuvalla koko ja skaalaustietoja 15 16 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 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 17 18 3

esimerkki esimerkki <fo:page-sequence master-reference="a4 <?xml version="1.0"?> initial-page-number="1" language= en"> <xsl:stylesheet version="1.0" <fo:static-content flow-name="xsl-region-before"> xmlns:xsl=http://www.w3.org/1999/xsl/transform <fo:block>sivuotsake</fo:block> xmlns:fo="http://www.w3.org/1999/xsl/format"> </fo:static-content> <xsl:template match="/"> <fo:static-content flow-name="xsl-region-after"> <fo:root xmlns:fo="http://www.w3.org/1999/xsl/format"> <fo:block>p. <fo:page-number/></fo:block> </fo:static-content> <fo:simple-page-master master-name="a4" page-width="297mm" page-height="210mm" <xsl:apply-templates select="//kohde"/> 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"/> </xsl:template> <xsl:template match= kohde"> <fo:region-after extent="1.0in"/> <fo:block><xsl:value-of select= nimi"/></fo:block> </xsl:template> </fo:layout-master-set> 19 </xsl:stylesheet> 20 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 21 <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/> </fo:layout-master-set> 22 <fo:page-sequence master-reference="simple"> <fo:table-cell/> <fo:table-cell> <fo:table> <xsl:if test="b:logo"> <fo:table-column column-width="5cm"/> <fo:block> <fo:table-column column-width="0.3cm"/> <fo:external-graphic src="url({b:logo/@uri})" <fo:table-column column-width="2.5cm"/> content-width="2.5cm"/> <fo:table-body> </fo:block> <fo:table-row> </xsl:if> <fo:table-cell> </fo:table-cell> <fo:block font-size="18pt" </fo:table-row> font-family="sans-serif" </fo:table-body> line-height="20pt" </fo:table> background-color="#a0d0ff" padding-top="3pt"> <xsl:value-of select="b:name"/> </fo:block> </xsl:template> <!-- muut alkiot samoin --> </xsl:stylesheet> </fo:table-cell> 23 24 4

Määritysten uudelleenkäyttö Määritysten uudelleenkäyttö Elementtien attribuutit voidaan antaa alkutägeissä, samoja attribuuttiarvoja voidaan kuitenkin käyttää monelle eri attribuutille Attribuuttiryhmää käyttämällä voidaan uusiokäyttää attribuuttiarvoja, esim 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> 25 26 5