Etsi sivuiltani:

	Aihepiiriluettelo > CSS-oppaan etusivu > Harjoittelu > Malli-, testi- ja esimerkkisivuja

Malli-, testi- ja esimerkkisivuja

Aiheet

• Yleistä
• Malli-, testi- ja esimerkkisivut
  • Sivut 1-11
  • Oppaan lisäsivut
  • Muita sivuja

Yleistä

Luettelen tällä sivulla opassivuillani käyttämät malli-, testi ja esimerkkisivut. Ne liittyvät joko HTML, XML tai CSS koodaukseen. Jotkut niistä ovat hyvin yksinkertaisia, mutta eräät sangen komplekseja. Käyn ne sivujen mukaisessa järjestyksessä, mutta eivät aivan johdonmukaisesti, sillä mallikuvien numerointi on hieman epäjohdonmukainen. Varsinaisten mallisivujen lisäksi olen laittanut mukaan vertailusivuja ja vertailevia kuvakaappauksia. Niitä voi käyttää harjoitusten apuna.

Malli-, testi- ja esimerkkisivut

Sivut 1-11

1. Mikä on HTML ja XML asiakirjojen perusrakenne
   1. ./Models/Model0a.html) - ilman rakennetta oleva teksti. Sille on myö vertailusivu:
      • ./Models/Model0b.html - esimerkki yksinkertaisesta rakenteesta.
   2. ./Models/Model0c.html - selkeästi jäsenneltyä tekstiä.
   3. ./Models/Model1.html - yksinkertainen kappale.
   4. ./Models/Model2.html - dokumenttipuu.
   5. ./Models/Model3.html - keskitetty kappale.
   6. ./Models/Model4.html - esimerkki linkitetystä CSS:stä.
   7. ./Models/Oppilas.html - ilman tyylisivuja oleva vertailusivu sivulle 2, joka käyttää tyylisivuja.
   8. ./Models/Model4a.html - esimerkki yksinkertaisesta XHTML-dokumentista.
2. Miten CSS liitetään Web-sivuihin
   9. ./Models/Model5.html - malli tyyliattribuutin (style) käytöstä. Koskee myös sivua 11, Miten CSS liitetään Web-sivuihin (position:absolute).
   10. ./Models/Model5a.html - malli tyyliattribuutin ja ulkopuolisen tyylisivun käytöstä.
   11. ./Models/Model5b.html - malli tyylielementin (STYLE) ja ulkopuolisen tyylisivun käytöstä.
   12. ./Models/Model6.html - esimerkki väärin sijoitetusta @import at-säännöstä sekä sivua 4, Valitsimet koskien esimerkkejä väärin nimetyistä valitsimista. Sillä on myös rinnakkainen mallisivu ./Models/Model6NoDTD.html.
   13. ./Models/Model6a.html - selainten välisten erojen demonstrointia.
   14. ./Models/Model7.html - esimerkki pikakirjoiteominaisuuksien (shorthand properties) käytöstä (koskee myös sivua 8, Miten CSS annetaan elementtien taustoille ja reunoille ).
3. Mitkä ovat CSS:n mittayksiköt, värit ja avainsanat
   15. ./Models/Model8.html - mallisivu tekstivärin käytöstä.
   16. ./Models/Model8a.html - toinen mallisivu tekstivärin käytöstä.
   17. ./Models/Model8b.html - mallisivu relatiivisten font-size arvojen käytöstä.
   18. ./Models/Model8c.html - vertailusivu xx-small - xx-large fonttikoista.
4. Mitä ovat valitsimet, luokat ja id-attribuutit (+ seuraavat: 12.)
   19. ./Models/Model9.html - yleisvalitsinten käyttöesimerkkejä.
   20. ./Models/Model10.html - malli elementtityyppi­valitsimen (H2) käytöstä.
   21. ./Models/Model11.html - ryhmistysesimerkkejä. Mukana myös malli taulukkomaisesta listasta koskien sivua 9, Listat.
   22. ./Models/Model12.html - malli luokkavalitsimen käytöstä.
   23. ./Models/Model13.html - malli attribuuttivalitsinten käytöstä.
   24. ./Models/Model14.html - malli id-valitsimen käytöstä.
   25. Virheet.php3#listat2 - attribuutti- ja id-valitsinten testi.
   26. ./Models/Model15.html - malli kappaleisiin liittyvistä näennäiselementeistä.
5. Mikä on CSS:n prosessointijärjestys
   27. ./Models/Model16.html - malli tapauskohtaisista (contextural) valitsimista.
   28. ./Models/Model17.html - toinen malli tapauskohtaisista (contextural) valitsimista. Koskee myös sivua 9, Miten CSS annetaan listaelementeille .
   29. Virheet.php3#listat - valitsintesti listaelementeillä. Koskee myös sivua 9, Miten CSS annetaan listaelementeille.
   30. ./Models/Model18.html - mallisivu !important-säännön käyttämisestä.
6. Miten CSS:n annetaan teksteille ja CSS:n kohdentaminen eri medioille + mediatyypit
   31. ./Models/Model19.html - malleja elementin FONT määrittelemisestä.
   32. ./Models/Model20.html - malli elementin BODY perusmäärittelyistä.
   33. ./Models/Model21.html - malli elementin H2 määrittelemisestä.
   34. ./Models/Model22.html - malli ominaisuuden font pikakirjoiteominaisuuksista (koskee myös sivua 8, Miten CSS annetaan elementtien taustoille ja reunoille).
   35. Virheet.php3#fontti - tässä kohtaa oli tarkoitus olla testi @font-face at-säännön tukemisesta, mutta sopiva fonttitiedosto puuttuu tällä hetkellä eikä testiä ole todellisuudessa olemassa.
7. Miten CSS liitetään ankkureille ja linkeille (+ seuraavat: 44., 57., 58.)
   36. ../Yleiset/index2.html - demonstroi linkki- ja dynaamisten pseudoluokkien käyttöä.
   37. ../Tests/ElementitTestB.html - testaa omianaisuuden display käyttämistä kuvalinkkien kanssa. Koskee myös sivua 11, Mikä on CSS2:n Visuaalinen muotoilumalli.
8. Miten CSS annetaan elementtien taustoille ja reunoille (+ seuraavat: 14., 34.)
   38. ./Models/Model23.html - malli elementille BLOCKQUOTE annetuista reunusominaisuuksista.
   39. Virheet.php3#reunat - demonstroi reunusongelmista rivinsisäiselementtien kanssa.
   40. ../Teaching/Illegal.php3 - toinen sivu, jossa oleva esimerkki demonstroi reunusongelmista rivinsisäiselementtien kanssa.
   41. ./Models/Model23a.html - malli laatikon dimensoihin liittyvien ominaisuuksien käytöstä seuraavien kuvakaappausten kanssa:
       • Mozilla 0.6: ../Tests/mozilladim.gif - tämä on ok.
       • Opera 5.01: ../Tests/operadim.gif.
       • MS IE 5.5 Windows: ../Tests/iedim.gif.
       • Kaksi vertailukuvakaappausta lohkosta, joka on määritelty prosenttiarvioja käyttäen (margin:33%; width:66%):
         • Opera 5.01: ../Tests/modelOP.gif - ok (myös Netscape 6.x+ näyttää oikein).
         • MS IE 5.5 Windows: ../Tests/modelIE.gif.
   42. ../modeltable2.html - demonstroi edellistä ongelmaa. Koskee myös sivua 11, Mikä on CSS2:n Visuaalinen muotoilumalli (position:fixed).
   43. ../Tests/Girl.html - testaa ominaisuuksia background-attachment:fixed and position:fixed; tästä sivusta on kolme kuvakaappausta:
       • Opera 5.01: ../Tests/pict0.jpg - tämä on ok.
       • Mozilla 0.6: ../Tests/pict1.jpg. Pieni taustaväriongelma, joka on korjattu Mozilla 0.9:ssä.
       • MS IE 5.5 Windows: ../Tests/pict2.jpg.
       • MS IE 6.0 preview: ../Tests/GirlIE6.jpg.
   44. ./Models/Model23b.html - mallisivu lomake-elementeistä ja kuvakaappaus ../Tests/model000.gif Mozilla 0.7:stä. Sivulla käytetään dynaamisia näennäisluokkia, jolloin testi koskee myös sivua 7, Miten CSS liitetään ankkureille ja linkeille.
9. Miten CSS annetaan listaelementeille (+ seuraavat: 21., 28., 29.)
   45. ./Models/Model24.html - malli ominaisuuden list-style-image käyttämisestä.
   46. ../Nt/MISSION_FAILED.php3#Summary - esimerkki pienten kasvokuvien käyttämisestä listaelementteinä.
   47. ../Tests/ElementitListTest.html - testaa listaelementtien sisennyksiä, kun margin:0 ja padding on määrittämättä. Mukana seuraavat kuvakaappaukset:
       • Mozilla 0.6: ../Tests/model001.gif.
       • MS IE 5.5 Windows: ../Tests/model002.gif - myös Opera 5.x näyttää suurinpiitein samoin.
   48. ./Models/Model24a.html - testaa generoituja sisältöjä, sitaatteja sekä eräitä display-ominaisuuden arvoja. Tämä malli koskee myös sivua 11, Mikä on CSS2:n Visuaalinen muotoilumalli. ../Tests/Quotes.html on sitaatteja koskeva lisätestisivu.
10. Miten CSS annetaan taulukkoelementeille
    49. ./Models/Model25.html - demonstroi border-collapse, border, background ja joidenkin muidenkin ominaisuuksien käyttöä taulukoissa.
    50. ./Models/Model25a.html - toinen malli, joka demonstroi border-collapse, border ja background ominaisuuksien käyttöä taulukoissa.
    51. ./Models/Model25b.html - demonstroi caption-side, border, background ja joidenkin muidenkin ominaisuuksien käyttöä taulukoissa.
    52. ../HTMLKit/Attributes2.php3 - esimerkki raskaasta taulukosta, joka käyttää table-layout:fixed taulukonluontimallia.
11. Mikä on CSS2:n Visuaalinen muotoilumalli (+ seuraavat: 5., 37., 42., 49.)
    53. ./Models/Model26.html - malli float-ominaisuuden käyttämisestä.
    54. ./Models/Model27.html - toinen malli float-ominaisuuden käyttämisestä.
    55. ../Tests/ElementitTestFloat.html - englanninkielinen esimerkkisivu float-ominaisuuden käyttämisestä. Jos sinulla on Opera 4.x+, kokoruutunäyttö antaa antaa esimerkin "diaesityksestä" (vaihda "dioja" PageUp/PageDown näppäimillä).
    56. ./Models/Model28.html - malli position:absolute käyttämisestä.
    57. ./Models/Model29.html - malli display-ominaisuuden käyttämisestä vaihtoehtona visibility-ominaisuuden käyttämiselle. Sivulla käytetään dynaamisia näennäisluokkia, jolloin testi koskee myös sivua 7, Miten CSS liitetään ankkureille ja linkeille.
    58. ./Models/Model30.html - malli visibility-ominaisuuden käyttämisestä vaihtoehtona display-ominaisuuden käyttämiselle. Sivulla käytetään dynaamisia näennäisluokkia, jolloin testi koskee myös sivua 7, Miten CSS liitetään ankkureille ja linkeille.
    59. ./Models/Model30b.html - malli display:none käyttämisestä elementtien piilottamiseen.
    60. ./Models/Model31.html - malli position:fixed käyttämisestä.
    61. ./Models/Model31b.html - toinen malli position:fixed käyttämisestä.
    62. ../Tests/BasicLayout.html - malli position:fixed ja margin:auto käytöstä. Minulla on niistä kuvakaappauksia:
        • Opera 5.01: ../Tests/positionfixed.gif - ok.
        • Mozilla 0.7: ../Tests/offset.gif - sivu on madalletussa ikkunassa, jolloin tulee vaakatason siirtymä. Korjattu Mozilla 0.9:ssä.
        • MS MS IE 5.0 Mac: ../Tests/Macposition.gif - margin:auto ei toimi tässä tilanteessa.
        • ../Tests/operared.gif - vertaileva kuvakaappaus tästä sivustosta, jos olisin määritellyt margin:auto ja max-width ominaisuudet elementille HTML (Opera 5.01).
    63. ../Nt/ongelmia-us.xml - esimerkki XML + CSS -käytöstä, joka testaa erityisesti joka käyttää display-ominaisuutta. Sille on myös muutama vertailusivu ja kuvakaappaus:
        • ../Nt/Ongelmia-US.php3 - HTML-versio.
        • ../Nt/ongelmia-us-xsl.xml - XML + XSL(T) + CSS -versio.
        • ../Nt/ongelmia-us-xsl-fo.xml - XSL-fo versio.
        • ../Kuvat/Nt - kuvakaappaus XML-versiosta (Opera 4.x).
    64. ../Tests/Model25b.xml - toinen XML-esimerkki, joka käyttää display-ominaisuutta.

Oppaan lisäsivut

• K Mikä on XML:n ja XSL:n nykytilanne:
  • ./Models/ongelmia-us.xml - XML-esimerkkisivu, jossa useimmat elementin head sisällä olevat elementit näytetään. Siitä on muutamia variaatioita:
    • ./Models/ongelmia-us1.xml - xml-stylesheet kuvausilmoituksessa viitattua CSS-tiedosta ei ole olemassa.
    • ./Models/ongelmia-us1a.xml - xml-stylesheet kuvausilmoitusta ei ole lainkaan.
    • ./Models/ongelmia-us1b.xml - kaikki elementit elementin head sisällä näytetään.

• P Millaisia CSS-totetusvirheitä on Netscape/Mozilla-selaimissa:
  • ../Tests/Mozilla09Menu.gif - osoittaa joidenkin Mozilla 0.9 tasoisten selainten asemointiongelmia.
  • ../Tests/NatureSiteMap.php - malli virheellisestä elementin piilottamisesta. Osoittaa myös muita ongelmia. Tähän sivuun on viitattu myös liitesivuilla K Millaisia CSS-totetusvirheitä on Opera-selaimissa ja Q Miten luoda dynaamisia valikoita. Sille on nyt myös kaksi lisätestisivua:
    • ../Tests/NatureSiteMap.htm - sivu osoittaa vaakatasossa oikean toteutuksen Opera 6.04 - ja Mozilla 1.1a -selaimissa.
    • ../Tests/NatureSiteMap2.htm - sivu osoittaa vaakatasossa virheellisen toteutuksen Opera 6.04 - Mozilla 1.1a -selaimissa.

• I Miten luoda dynaamisia valikoita:
  • Kaksi kokeellista vain CSS:llä toteutettua alivalikkoa:
    • ../Tests/LinkingModel1.html.
    • ../Tests/LinkingModel2.html.
  • Mallitiedostoja:
    • Dynaamisten valikoiden JavaScript-tiedosto ../Menumodels/layers.js.
    • Dynaamisten valikoiden CSS-tiedostot:
      • ../Menumodels/basicScreen.css. Dynaamisten valikoiden CSS on tiedoston alussa. Se soveltuu hyvin Opera 5.x+, MS IE 5.0+ ja Netscape 6.x/ vastaaville Mozilla -selaimille mutta ei optimaalisesti MS IE 4.x Windows -selaimelle.
      • ../Menumodels/layersMozilla4.css. CSS Netscape 4.x -selaimille.
    • Dokumentin head-osan koodaus, josta on kaksi mallia (viittaukset linkitettyihin tiedostoihin sekä osa tarvittavasta JavaScript-koodauksesta on näissä tiedostoissa):
      • ../Menumodels/AdviceMetaSu.inc (käytetty suomenkielisillä CSS-sivuilla; olen tehnyt tähän versioon muutamia uusia funktioita)
      • ../Menumodels/AdviceMetaEn.inc (käytetty englanninkielisillä CSS-sivuilla)
    • Dynaamisten valikoiden koodi tiedostoina:
      • ../Menumodels/AdviceNavigationSu.inc (käytetty suomenkielisillä CSS-sivuilla; tässä versiossa on lyhyemmät funktiokutsut)
      • ../Menumodels/AdviceNavigationEn.inc (käytetty englanninkielisillä CSS-sivuilla)
    • Esimerkkisivut:
      • ../Menumodels/NetscapeSuModel.html (suomenkielinen)
      • ../Menumodels/NetscapeEnModel.html (englanninkielinen)
  • ../Tests/MacTest1.html - englanninkielisentestisarja erityisesti eräiden MS IE 5.x Mac -selainten ongelmien demonstroimiseksi.
  • Mallisivuja, joissa valikoilla on tausta- ja varjolaatikoita:
    • ../Menumodels/BackgroundBoxes.html - malli, jossa koko valikolla on kaksi taustalaatikkoa.
    • ../Menumodels/ShadowBoxes.html - malli, jossa jokaisella alivalikolla on omat "varjolaatikot".
    • ../Menumodels/ShadowBoxes2.html - malli, jossa jokaisella alivalikolla on omat "varjolaatikot". Tässä mallissa alemmilla varjolaatikoilla on taustaväri.

Muita sivuja

• ../HTMLKit/TestWml.wml - testi WML-sivu, jossa on tyylisivu Opera 4.x+:aa ajatellen. Siitä on myös rinnakkaisversio ilman tyylisivua:
  • ../HTMLKit/TestWml0.wml.
• ./Models/Collected.php3 - mallisivu, jossa olen käyttänyt melkein kaikkea esimerkeissäni käyttämääni CSS:ää.