Kehykset 1. KEHYKSET: rakenne 2. Frameset 3. Esimerkki: cols 4. Cols: mittayksiköt 5. Cols: mittayksiköt 6. Cols: esimerkki 7. Rows-mittayksiköt 8. Rows-esimerkki.

Slides:



Advertisements
Samankaltaiset esitykset
E4X © Reiska, JavaScript  Keksittiin 1995 (Ensin Netscape 2 selaimeen: Mocha  LiveScript  JavaScript)  Standardoitiin vuonna 1997  ECMA-262.
Advertisements

Näkövammaiset ja verkkosivustot Virpi Jylhä
Kotisivukoulutus Kirjastotalo Metso Osa 2 Kuvan lisäys ja muokkaaminen.
Image Gallery JavaScriptin avulla Juha Konttinen 1.
TILDA-Verkkotilastointi
Huoltajan henkilökohtaisen Wilma-tunnuksen luominen
Arvioitavat kohdat Nielsenin mukaan – heuristinen lista
© 2010 IBM Corporation1 Bannerikaruselli  Bannerikaruselli on sisällönhallinnan komponentti, jolla voidaan laittaa www-sivulla haluttuun kohtaan näkymään.
JavaScript oliot © Reiska, DOM Oliot  JavaScript sisältää paljon valmiita DOM olioita, on sisältänyt jo DOM level 0 (ns. Legacy DOM) alkaen  WWW-ympäristössä.
Tehdään nettisivu  suunnittelu  rakentaminen  testaaminen  julkaiseminen.
Internet and HTML Heikki Hietala. Internet stats 7/2005 WORLD INTERNET USAGE AND POPULATION STATISTICS World Regions Population ( 2005 Est.) Population.
HTML-kielen perusteet Osa 1 Vilho Kemppainen
Kotisivukoulutus Kirjastotalo Metso Osa 1 Tekstin kirjoittaminen ja muokkaaminen, linkitys.
Helsingin yliopisto - Lääketieteellinen tiedekunta, TUKE Laajojen asiakokonaisuuksien esittäminen PowerPointilla Pysyvätkö kuulijasi kärryillä?
XHTML 1.0/1.1 ©Reino Aarinen, XML XHTML-dokumentti alkaa XML-versiom ää rittelyll ä : ja XHTML –dokumenttityyppim ää rittelyll ä (seuraava sivu).
Web-Käyttöliittymä, käytettävyys Asiakas on kuningas, hiiri aseena Jos asiakas ei löydä tuotetta, hän ei osta sitä.
EXtensible Markup Language
Lisämuotoiluja: Tässä esityksessä tutustutaan Wordin lisämuotoiluihin, kuten sarkaimiin, sivunumerointiin, ylä- ja alatunnisteisiin sekä palstoituksen.
HTML-kielen perusteet Osa 5 Vilho Kemppainen
Internet-viestintä on helppoa! Käyttökuvaus 4.0
1.5. Trigonometriset yhtälöt
PowerPoint-ohje © Teemu Sillantaus Teemu Sillantaus
Heikki Hietala Jukka Mutikainen
CSS ja sen sovellukset Vesa Jussila. Esitys  Yleistä –Historia –Etuja ja huonoja puolia –Mediatyypit  Käyttö –Laatikkomalli –CSS-taitto –Sovelluksia.
CSS perusteet Metropolia. Juhana Lindström Web-kehittäjä – 4 vuotta verkkosivujen toteuttamista ja ylläpitoa – Toteuttanut tai kehittänyt yli 20 eri verkkosivustoa.
Kuvien liittäminen html- dokumenttiin. IMG-elementti l l Parametrit Align=”top” | ”middle” | ”bottom” teksti alkaa kuvan yläreunan tasalta | keskeltä.
Internet-projekti - MUM2TM Heikki Hietala Jukka Mutikainen TIKO – Malmi
PowerPoint-esitys OHJE.
Dokumenttien käsittely ja tietoverkot Wordin toiminnot, toinen tapaaminen.
RSS, Rich Site Summary © Reino Aarinen, RSS RSS (Rich Site Summary, joskus Really Simple Syndication) on menetelmä, joka käyttää XML merkkausta.
XML Namespaces 1 XML Namespaces provide a method to avoid element name conflicts –name conflict will occur when two different documents use the same element.
© 2010 IBM Corporation1 Objektien käyttöoikeudet  Kaikilla sisällönhallinnan objekteilla on käyttöoikeudet. Käyttöoikeudet on jaoteltuina Lukuoikeuksiin,
Käyttäjäksi kirjautuminen ja kursseille liittyminen 2013
IMAP webMail Program (IMP) Sähköpostin lukeminen selaimen avula.
Lomakkeet © Reiska, Lomakkeet Varsinkin Web-sovelluksia ajetaan täyttämällä sivulla lomake ja lähettämällä tiedot palvelimella olevan Web-sovelluksen.
© Helsingin liiketalouden ammattikorkeakoulu, LOMAKKEET Käytetään vuorovaikutukseen Käyttäjä täyttää lomakkeen ja selainohjelma lähettää tiedot.
XHTML ja linkit Inline-elementti Linkki tehdään a-elementillä ja linkin kohde ilmoitetaan href- attribuutilla Absoluuttinen linkki Helian pääsivulle: Siirry.
Shibboleth 2 uudet ominaisuudet & päivän käytännöt Haka koulutus
XHTML-perusteita Teppo Räisänen
XML/DTD – osa 3 Teppo Räisänen
DTD Teppo Räisänen Liiketalouden yksikkö.
Annuiteetti- eli tasaerälaina
XPath Teppo Räisänen Liiketalouden yksikkö.
Metatieto ja HTML-dokumentit Markus Virkkala Esa Kaihlanen TJTD63 - Semanttinen Web - 4/2002.
CSS – osa 1 Teppo Räisänen
XML Schema Teppo Räisänen Liiketalouden yksikkö.
XSL & JavaScript Teppo Räisänen
CSS Dreamweaverilla Matti Viitala KaHa/OAMK 2005.
XML – osa 2 Teppo Räisänen
XSL Teppo Räisänen
XSL Teppo Räisänen
DTD rakenne ELEMENT elementtien määrittely ATTLISTattribuuttien määrittely ENTITYentiteettien määrittely NOTATIONnotaatioiden määrittely.
XHTML elementit © Reiska 2012 html headbody. HTML 4.01 ja XHTML rungot.
CSS - aloitus ICT01D – syksy 2005 Mirja Jaakkola, Helia.
XHTML - aloitus Sisältö: s.2 Taustaa s.4 Elementin rakenne s.7 XHTML–dokumentti s.8 DOCTYPE s.11 html s.13 head s.14 meta s.16 title s.17 link s.18 style.
Listat eli luettelot listaelementit ovat lohkoelementtejä:  lista ja listan alkiot alkavat uudelta riviltä  listan jälkeen tuleva elementti alkaa uudelta.
XML Skeema Määritellään XML:llä Vältetään suurinosa DTD:n puutteista. Datatyypit (string, boolean,...) Voidaan asettaa rajoitteita datatyypeille (minLength,
Tekstinkäsittely  Microsoft Word  Luentotehtävä  Erilaisia tekstinkäsittelyohjelmia.
Echo360 - luentovideot Ohje opiskelijalle IT-palvelut.
Web-ulkoasun kehitys Web-ulkoasun visuaalinen evoluutio 1990-luvulta nykypäivään: Kiinteälevyinen, ASCII-pohjainen Vain tekstisivuja, 100% leveys Muutamia.
Tyylitiedosto html-koodin apuna
Jani Kiviharju Helsingin normaalilyseo Syksy 2016
Wordpress.com.
Helsingin normaalilyseo Jani Kiviharju syksy 2016
Jvg esitelmä.
RYHMÄN NIMI? MITÄ RYHMÄ TEKEE? MISSÄ ? MILLOIN? YHTEYSTIEDOT ?
JavaScript – DOM JavaScript objektit
Teppo Räisänen CSS – osa 1 Teppo Räisänen
Kuvagalleria Adobe Bridget -ohjelmalla
Teppo Räisänen CSS – osa 2 Teppo Räisänen
Esityksen transkriptio:

Kehykset 1. KEHYKSET: rakenne 2. Frameset 3. Esimerkki: cols 4. Cols: mittayksiköt 5. Cols: mittayksiköt 6. Cols: esimerkki 7. Rows-mittayksiköt 8. Rows-esimerkki 9. Rows ja Cols esimerkki 10. Frame 11. Linkit 12. Iframe

1 © Helsingin liiketalouden ammattikorkeakoulu, 2005 Sisällysluettelo KEHYKSET: rakenne ikkunarakenne määritetään frameset - elementillä, jossa kerrotaan miten näyttö jaetaan: pystysuunnassa= cols vaakasuunnassa=rows  ikkunoiden määrää ei rajoitettu  mitä dokumentteja ikkunoihin sijoitetaan

2 © Helsingin liiketalouden ammattikorkeakoulu, 2005 Sisällysluettelo Frameset frameset-sivulla EI body -elementtiä, sen korvaa frameset –elementti käytetään frameset-dtd:tä sivuston muut sivut ovat tavallisia sivuja

3 © Helsingin liiketalouden ammattikorkeakoulu, 2005 Sisällysluettelo Kehysharjoitus Tämä sivu käyttää kehyksiä, mutta käyttämäsi selain ei tue kehyksiä. Esimerkki: cols

4 © Helsingin liiketalouden ammattikorkeakoulu, 2005 Sisällysluettelo Cols: mittayksiköt cols = "130, *" 1. kehyksen leveys 130 pikseli ä, 2. kehyksen leveys j ä ljelle j ää v ä osa cols = "20%, *" 1. kehyksen leveys 20% selaimen ikkunan leveydest ä, 2. sarake loput

5 © Helsingin liiketalouden ammattikorkeakoulu, 2005 Sisällysluettelo Cols: mittayksiköt cols = "2*,600,1 *" 2. kehyksen leveys 600 pikseliä, 1:n leveys 2/3 ja 3:nnen leveys 1/3 jäljelle jäävästä osasta cols = "20%, *, 20%" 1. ja 3. sarakkeen leveys 20 % ikkunan leveydestä, 2. sarakkeen leveys jäljelle jäävä osa

6 © Helsingin liiketalouden ammattikorkeakoulu, 2005 Sisällysluettelo Kehysharjoitus Tämä sivu käyttää kehyksiä, mutta käyttämäsi selain ei tue kehyksiä. Cols-esimerkki

7 © Helsingin liiketalouden ammattikorkeakoulu, 2005 Sisällysluettelo Rows-mittayksiköt rows=”150,*" rows=”15%,*” rows="30%,400,*,2*" 1:n ikkunan korkeus 30 % 2:n korkeus 400 pikseliä 3:nnen korkeus 1/3 ja 4:nnen korkeus 2/3 jäljelle jäävästä osasta

8 © Helsingin liiketalouden ammattikorkeakoulu, 2005 Sisällysluettelo Kehysharjoitus Tämä sivu käyttää kehyksiä, mutta käyttämäsi selain ei tue kehyksiä. Rows-esimerkki

9 © Helsingin liiketalouden ammattikorkeakoulu, 2005 Sisällysluettelo Kehysharjoitus Tämä sivu käyttää kehyksiä, mutta käyttämäsi selain ei tue kehyksiä. Cols ja rows-esimerkki

10 © Helsingin liiketalouden ammattikorkeakoulu, 2005 Sisällysluettelo FRAME Attribuutit src : haettava dokumentti name : ikkunan nimi target : linkin kohdeikkuna scrolling : vieritys: yes = oletus no = ei vieritystä auto = automaattisesti noresize : käyttäjä ei voi muuttaa ikkunan kokoa frameborder : ikkunan reunus yes = reunus, oletus no = ei reunusta

11 © Helsingin liiketalouden ammattikorkeakoulu, 2005 Sisällysluettelo LINKIT 1. Target ikkunan nimi : kohdesivu avautuu nimettyyn ikkunaan Helia _top : kohdesivu avautuu nykyiseen ikkunaan, poistaa kaikki kehykset Helia _blank : kohdesivu avautuu uuteen selainikkunaan Helia _self : kohdesivu avautuu siihen sen kehyksen sisään, missä lähdesivu käytetään esim. sivuston sisäisissä linkeissä, ei ulkopuolisiin linkkeihin Helia 2. Jos ei määritellä ollenkaan: sivu avautuu siihen ikkunaan, missä linkin lähdesivu

12 © Helsingin liiketalouden ammattikorkeakoulu, 2005 Sisällysluettelo IFRAME-kehys sivunsisäinen kehys, kelluva elementti tavallinen sivu, jolla joko loose.dtd tai strict.dtd Selaimesi ei tue Inline-kehyksiä attribuutit: src, width, height, name linkit, tehdään samoin kuin muut linkit tyyliä takaisin