Olen aikaisemmin tehnyt kotisivuja lähinnä html-kieleen perustuen, ja sitten olen erilaisten netistä löytämieni ohjeiden avulla väsännyt uudemman kotisivun, jossa testailin vähän kaikenlaista (linkki alla). Nyt olen keksinyt yleishyödyllisemmän sivuston aiheen, mutta kun tekniikat eivät ole niin kovin tuttuja, kaipaan vähän apua.
Eli: Millä tavalla sivu olisi parasta jakaa osiin niin, että sivun yläosassa olisi pysyvä otsakealue (ja mahdollisesti myös linkkejä), sivussa olisi jonkinlainen linkkilista, ja sitten varsinainen asia olisi sitten loppualueella? Tiedän, että tämän voisi tehdä vanhanaikaisesti frameillä, mutta en pidä kehysten ulkonäöstä ja muutenkin tuntuvat jotenkin alkeellisilta.
Onnistuin allaolevilla sivuilla tekemään äkkiä katsoen aikalailla sen näköistä jälkeä kuin nytkin haluaisin, mutta nyt jouduin laittamaan kaikki tekstit (siis koko sivuston sisällön) samalle sivulle, ja tämä ei oikein tunnu järkevältä. Miten siis saan vastaavanlaisen lopputuloksen kuin alla olevilla sivuilla, mutta niin, että erilliset asiat ovat omilla sivuillaan, eivätkä yhtenä pötkönä samalla sivulla, vaikkakin osittain piilossa? (Tämä selviää lähdekoodista - kaikki on todellakin samalla sivulla).
Jos jollakulla olisi hyvä linkkivinkki aiheeseen liittyen, tai edes jotain neuvoja, olisin kiitollinen.
Niin, ja alla oleva linkki ei muuten jostain syystä oikein pelaa Netscapessa :(.
http://www.kopteri.net/koti/leena.pentti/
Eli: Millä tavalla sivu olisi parasta jakaa osiin niin, että sivun yläosassa olisi pysyvä otsakealue (ja mahdollisesti myös linkkejä), sivussa olisi jonkinlainen linkkilista, ja sitten varsinainen asia olisi sitten loppualueella? Tiedän, että tämän voisi tehdä vanhanaikaisesti frameillä, mutta en pidä kehysten ulkonäöstä ja muutenkin tuntuvat jotenkin alkeellisilta.
Onnistuin allaolevilla sivuilla tekemään äkkiä katsoen aikalailla sen näköistä jälkeä kuin nytkin haluaisin, mutta nyt jouduin laittamaan kaikki tekstit (siis koko sivuston sisällön) samalle sivulle, ja tämä ei oikein tunnu järkevältä. Miten siis saan vastaavanlaisen lopputuloksen kuin alla olevilla sivuilla, mutta niin, että erilliset asiat ovat omilla sivuillaan, eivätkä yhtenä pötkönä samalla sivulla, vaikkakin osittain piilossa? (Tämä selviää lähdekoodista - kaikki on todellakin samalla sivulla).
Jos jollakulla olisi hyvä linkkivinkki aiheeseen liittyen, tai edes jotain neuvoja, olisin kiitollinen.
Niin, ja alla oleva linkki ei muuten jostain syystä oikein pelaa Netscapessa :(.
http://www.kopteri.net/koti/leena.pentti/
Vastaukset 2
Vanhimmat
"Eli: Millä tavalla sivu olisi parasta jakaa osiin niin, että sivun yläosassa olisi pysyvä otsakealue (ja mahdollisesti myös linkkejä), sivussa olisi jonkinlainen linkkilista, ja sitten varsinainen asia olisi sitten loppualueella?"
Jos ajat takaa jotain "kiinteästi" esim sivun ylälaidassa pysyvää logotyyppistä ratkaisua, niin unohda se. Position: fixed on rikki IEssä, joskin sen saa jotenkuten typerästi kikkailemalla toimimaan. Ei mielestäni maksa vaivaa.
"Onnistuin allaolevilla sivuilla tekemään äkkiä katsoen aikalailla sen näköistä jälkeä kuin nytkin haluaisin, mutta nyt jouduin laittamaan kaikki tekstit (siis koko sivuston sisällön) samalle sivulle, ja tämä ei oikein tunnu järkevältä. "
Höpsis. Navigoinnin voi tehdä ihan näppärästi listoilla, eikä se vaikuta sivun ladattavaan kokoon mainittavasti.
Lisäksi jakamalla sisällön omille sivuilleen helpotat taakkaasi huomattavasti. Sivu on itseasiassa pahasti rikki. Se näytti huomattavasti mukavammalta kun kytki stylesheetin pois käytöstä.
Sivulla on käytössä JavaScriptiä(navigoinnissa) sekä kovasti absoluuttista positiointia. Lisäksi DTD on puutteellinen ja selaimet käyttävät quirks-tilaa(jossa se joutuu "arvaamaan" mitä sivuntekijä haluaa koodillaan tapahtuvan).
Jos haluat CSS:llä vääntää niin tässä yksinkertaiset ohjeet:
1. Leiska
Käy väsäämässä vaikka osoitteessa http://www.inknoise.com/experimental/layoutomatic.php toimiva sellainen
2. Navigointi
Accessifyn List-o-matic auttaa tässä: http://www.accessify.com/tools-and-wizards/list-o-matic/list-o-matic.asp myös Inknoisella on näppärä automaagi, jolla voi tehdä JavaScriptittömiä kuvavaneja: http://www.inknoise.com/experimental/rolloverer.php
3. Vältä JS:n käyttöä varsinkin navigoinnissa. Sen lisäksi että se kiusaa vierailijoita, se usein estää hakubottien työtä.
4. Käytä loogista merkkausta. Merkkaa otsikot otsikoiksi(h1 -> h6), kappaleet kappaleiksi(p) ja käytä hyväksesi listoja(ul). Vältä turhia br-tageja. Sekä liian pieneksi käskettyä fonttikokoa. Merkkaa myös kuvat hyvin käyttämällä kuvaavaa ALT-tekstiä(varsinkin mikäli kuva toimii linkkinä). Linkeissä kannattaa harkita myös titlen käyttöä.
5. Siirrä mahdollisimman paljon kuvitusta CSS:n puolelle esittämällä ne taustakuvina.
6. Sivujen otsikointi. Käytä sivun titlenä lyhyttä ja hyvin sivun sisältöä kuvaavaa tekstiä. Bookmarkkauskin on mukavampaa ja hakukoneet tykkää.
7. Vältä turhaa JavaSkriptiä. Varsinkin navigoinnissa(taisin tämän jo mainitakin :).
"Niin, ja alla oleva linkki ei muuten jostain syystä oikein pelaa Netscapessa :(. "
Ei pelaa myöskään Mozilla Firebirdilla, eikä Operalla.
Ilahduttaavaa sivuilla oli kuitenkin taulukoiden jättäminen pois. Ja kuten jo mainitsinkin, se toimi kivemmin ilman tyylejä. Hyvä alku kuitenkin. Oletkin käyttänyt jonkunverran hyväksesi O. Saarikummun ylläpitämää veppipakkia. Mikäli se kuitenkin tuntuu raskaslukuiselta, niin kannattaa vilaista myös Jukka Korpelan Web-julkaisemisen opas: http://www.cs.tut.fi/~jkorpela/webjulk/ Myös Henri Sivosen Activating the Right Layout Mode Using the Doctype Declaration kannattaa vilkaista: http://www.hut.fi/u/hsivonen/doctype
Kiitos kovasti, kun jaksoit tutkailla sivujani...paljon on näköjään työtä tehtävä ennen kuin sivuista saa kunnolliset. Kiitos linkeistäkin, enköhän näillä neuvoilla pääse taas pätkän eteenpäin - tässähän sitä oppii, kun aikansa värkkää. :)