{"id":272,"date":"2022-11-28T10:23:59","date_gmt":"2022-11-28T08:23:59","guid":{"rendered":"https:\/\/papunet.net\/saavutettavuus\/?page_id=272"},"modified":"2023-03-16T13:26:57","modified_gmt":"2023-03-16T11:26:57","slug":"suunnittele-selkeat-sivupohjat","status":"publish","type":"page","link":"https:\/\/papunet.net\/saavutettavuus\/ohjeita-ja-oppaita\/saavutettavien-verkkosivujen-suunnitteluopas\/suunnittele-selkeat-sivupohjat\/","title":{"rendered":"Suunnittele selke\u00e4t sivupohjat"},"content":{"rendered":"\n

Verk\u00adko\u00adsi\u00advus\u00adton saa\u00advu\u00adtet\u00adta\u00advuu\u00adden ja ylei\u00adsen k\u00e4y\u00adtet\u00adt\u00e4\u00advyy\u00adden kan\u00adnal\u00adta on t\u00e4r\u00adke\u00ad\u00e4\u00e4, ett\u00e4 si\u00advu\u00adpoh\u00adjat ovat sel\u00adkei\u00adt\u00e4. Si\u00advu\u00adpoh\u00adjien on ol\u00adta\u00adva yh\u00adden\u00admu\u00adkai\u00adsia kai\u00adkis\u00adsa pal\u00adve\u00adlun eri osis\u00adsa.<\/p>\n\n\n\n

Var\u00admis\u00adta, ett\u00e4 si\u00advun osat (ks. kuva 1) erot\u00adtu\u00advat toi\u00adsis\u00adtaan sel\u00adke\u00e4s\u00adti ja ett\u00e4 eri osat ovat tun\u00adnis\u00adtet\u00adta\u00advis\u00adsa.<\/p>\n\n\n\n

Eri\u00adtyi\u00adsen t\u00e4r\u00adke\u00ad\u00e4\u00e4 on, ett\u00e4 si\u00advul\u00adla ole\u00adva olen\u00adnai\u00adnen si\u00ads\u00e4l\u00adt\u00f6 erot\u00adtuu sel\u00adv\u00e4s\u00adti muus\u00adta si\u00ads\u00e4l\u00adl\u00f6s\u00adt\u00e4. T\u00e4r\u00adkeim\u00adm\u00e4t asiat tu\u00adli\u00adsi esit\u00adt\u00e4\u00e4 si\u00advun alus\u00adsa, jot\u00adta ne erot\u00adtu\u00advat il\u00adman si\u00advun pys\u00adty\u00adsuun\u00adtais\u00adta vie\u00adrit\u00adt\u00e4\u00admis\u00adt\u00e4.<\/p>\n\n\n\n

Si\u00advun osat: p\u00e4\u00e4\u00adsi\u00ads\u00e4l\u00adt\u00f6, p\u00e4\u00e4\u00adot\u00adsik\u00adko, ingres\u00adsi, lei\u00adp\u00e4\u00adteks\u00adti<\/h2>\n\n\n\n

Var\u00admis\u00adta, ett\u00e4 si\u00advun olen\u00adnai\u00adsin osa eli p\u00e4\u00e4\u00adsi\u00ads\u00e4l\u00adt\u00f6 erot\u00adtuu sel\u00adv\u00e4s\u00adti ja sel\u00adke\u00e4s\u00adti si\u00advun muus\u00adta si\u00ads\u00e4l\u00adl\u00f6s\u00adt\u00e4 ja muis\u00adta osiois\u00adta. Si\u00advul\u00adla pi\u00adt\u00e4\u00e4 erot\u00adtua sel\u00adke\u00e4s\u00adti, mis\u00adt\u00e4 p\u00e4\u00e4\u00adsi\u00ads\u00e4l\u00adt\u00f6 al\u00adkaa ja mi\u00adhin se p\u00e4\u00e4t\u00adtyy.<\/p>\n\n\n\n

P\u00e4\u00e4\u00adsi\u00ads\u00e4l\u00adl\u00f6n tu\u00adlee erot\u00adtua sek\u00e4 vi\u00adsu\u00adaa\u00adli\u00adses\u00adti ett\u00e4 oh\u00adjel\u00admal\u00adli\u00adses\u00adti. Kun kaik\u00adki p\u00e4\u00e4\u00adsi\u00ads\u00e4l\u00adt\u00f6\u00f6n kuu\u00adlu\u00adva si\u00ads\u00e4l\u00adt\u00f6 kir\u00adjoi\u00adte\u00adtaan HTML-koo\u00addin <main>\u2026<\/\u200b\u200bmain> -ele\u00adment\u00adtien v\u00e4\u00adlis\u00ads\u00e4 ole\u00advaan osioon, se on tun\u00adnis\u00adtet\u00adta\u00advis\u00adsa my\u00f6s oh\u00adjel\u00admal\u00adli\u00adses\u00adti.<\/p>\n\n\n\n

Si\u00advun p\u00e4\u00e4\u00adsi\u00ads\u00e4l\u00adl\u00f6n eri osat on esi\u00adtet\u00adt\u00e4\u00adv\u00e4 sel\u00adke\u00e4l\u00adl\u00e4 ja ym\u00adm\u00e4r\u00adret\u00adt\u00e4\u00adv\u00e4l\u00adl\u00e4 ta\u00adval\u00adla. P\u00e4\u00e4\u00adsi\u00ads\u00e4l\u00adl\u00f6n p\u00e4\u00e4\u00adot\u00adsi\u00adkon, ingres\u00adsin ja v\u00e4\u00adliot\u00adsi\u00adkoi\u00adden tu\u00adlee erot\u00adtua sel\u00adv\u00e4s\u00adti p\u00e4\u00e4\u00adsi\u00ads\u00e4l\u00adl\u00f6n lei\u00adp\u00e4\u00adteks\u00adtis\u00adt\u00e4.<\/p>\n\n\n\n

Na\u00advi\u00adgaa\u00adtio\u00adlin\u00adkit: p\u00e4\u00e4\u00adna\u00advi\u00adgaa\u00adtio, ala\u00adna\u00advi\u00adgaa\u00adtio<\/h2>\n\n\n\n

Si\u00advul\u00adla ole\u00advat na\u00advi\u00adgaa\u00adtio\u00adlin\u00adkit tu\u00adlee erot\u00adtaa sel\u00adv\u00e4s\u00adti muus\u00adta si\u00ads\u00e4l\u00adl\u00f6s\u00adt\u00e4. K\u00e4yt\u00adt\u00e4\u00adj\u00e4l\u00adle tu\u00adlee esit\u00adt\u00e4\u00e4 sek\u00e4 vi\u00adsu\u00adaa\u00adli\u00adsin ett\u00e4 oh\u00adjel\u00admal\u00adli\u00adsin kei\u00adnoin, mik\u00e4 koh\u00adta si\u00advus\u00adta on p\u00e4\u00e4\u00adna\u00advi\u00adgaa\u00adtio\u00adta ja mik\u00e4 koh\u00adta on mah\u00addol\u00adlis\u00adta ala\u00adna\u00advi\u00adgaa\u00adtio\u00adta.<\/p>\n\n\n\n

Oh\u00adjel\u00admal\u00adli\u00adses\u00adti t\u00e4m\u00e4 voi\u00addaan to\u00adteut\u00adtaa aset\u00adta\u00admal\u00adla na\u00advi\u00adgaa\u00adtio\u00adlin\u00adkit <nav>\u2026<\/\u200b\u200bnav> -ele\u00adment\u00adtien si\u00ads\u00e4\u00e4n.<\/p>\n\n\n\n

Ha\u00adku\u00adtoi\u00admin\u00adto<\/h2>\n\n\n\n

Jos verk\u00adko\u00adsi\u00advus\u00adtol\u00adla on yli 20 ala\u00adsi\u00advua, si\u00advuil\u00adle on syy\u00adt\u00e4 li\u00ads\u00e4\u00adt\u00e4 ha\u00adku\u00adtoi\u00admin\u00adto. Ha\u00adku\u00adtoi\u00admin\u00adto kan\u00adnat\u00adtaa si\u00adjoit\u00adtaa sel\u00adlai\u00adseen paik\u00adkaan, jos\u00adta se on help\u00adpo l\u00f6y\u00adt\u00e4\u00e4 ja jos\u00adsa se ei h\u00e4i\u00adrit\u00adse si\u00advun muu\u00adta toi\u00admin\u00adtaa.<\/p>\n\n\n\n

Ala\u00advii\u00adte (foo\u00adter)<\/h2>\n\n\n\n

Jos si\u00advul\u00adla on k\u00e4y\u00adt\u00f6s\u00ads\u00e4 ala\u00advii\u00adte (foo\u00adter) (ks. kuva 1), sen tu\u00adlee erot\u00adtua sel\u00adv\u00e4s\u00adti si\u00advun muus\u00adta si\u00ads\u00e4l\u00adl\u00f6s\u00adt\u00e4.<\/p>\n\n\n\n

Usein ala\u00adviit\u00adtees\u00ads\u00e4 on tie\u00adtoa koko si\u00advus\u00adtos\u00adta eik\u00e4 yk\u00adsit\u00adt\u00e4i\u00adsis\u00adt\u00e4 ala\u00adsi\u00advuis\u00adta. T\u00e4\u00adm\u00e4n\u00adkin ta\u00adkia on t\u00e4r\u00adke\u00ad\u00e4\u00e4, ett\u00e4 k\u00e4yt\u00adt\u00e4\u00adj\u00e4 ei se\u00adkoi\u00adta ala\u00advii\u00adtet\u00adt\u00e4 itse p\u00e4\u00e4\u00adsi\u00ads\u00e4l\u00adt\u00f6\u00f6n.<\/p>\n\n\n\n

P\u00e4\u00e4\u00adsi\u00ads\u00e4l\u00adt\u00f6\u00f6n kuu\u00adlu\u00adva yli\u00adm\u00e4\u00e4\u00adr\u00e4i\u00adnen si\u00ads\u00e4l\u00adt\u00f6<\/h2>\n\n\n\n

Joil\u00adlain verk\u00adko\u00adsi\u00advuil\u00adla saat\u00adtaa olla p\u00e4\u00e4\u00adsi\u00ads\u00e4l\u00adl\u00f6n oi\u00adkeal\u00adla puo\u00adlel\u00adla si\u00ads\u00e4l\u00adt\u00f6\u00e4, joka liit\u00adtyy p\u00e4\u00e4\u00adsi\u00ads\u00e4l\u00adt\u00f6\u00f6n, mut\u00adta on ym\u00adm\u00e4r\u00adret\u00adt\u00e4\u00advis\u00ads\u00e4 my\u00f6s it\u00adse\u00adn\u00e4i\u00adse\u00adn\u00e4 ko\u00adko\u00adnai\u00adsuu\u00adte\u00adna \u2013 esi\u00admer\u00adkik\u00adsi p\u00e4\u00e4\u00adsi\u00ads\u00e4l\u00adl\u00f6n ai\u00adhee\u00adseen liit\u00adty\u00advi\u00e4 yh\u00adteys\u00adtie\u00adto\u00adja.<\/p>\n\n\n\n

Ku\u00advas\u00adsa 1 on esi\u00adtet\u00adty esi\u00admerk\u00adki\u00adsi\u00advun ra\u00adken\u00adnet\u00adta ja si\u00advun eri osioi\u00adta. Ku\u00advas\u00adsa n\u00e4\u00adkyy, kuin\u00adka esi\u00admerk\u00adki\u00adsi\u00advun kaik\u00adki osiot on ero\u00adtet\u00adtu toi\u00adsis\u00adtaan sel\u00adv\u00e4s\u00adti. Kuvassa on esitetty graafisesti esimerkkisivun rakennetta ja sivun eri osioita.<\/p>\n\n\n\n

\"Kuvassa
Kuva 1. Esi\u00admerk\u00adki si\u00advus\u00adta ja sen osis\u00adta.<\/em><\/figcaption><\/figure>\n\n","protected":false},"excerpt":{"rendered":"

Verk\u00adko\u00adsi\u00advus\u00adton saa\u00advu\u00adtet\u00adta\u00advuu\u00adden ja ylei\u00adsen k\u00e4y\u00adtet\u00adt\u00e4\u00advyy\u00adden kan\u00adnal\u00adta on t\u00e4r\u00adke\u00ad\u00e4\u00e4, ett\u00e4 si\u00advu\u00adpoh\u00adjat ovat sel\u00adkei\u00adt\u00e4. Si\u00advu\u00adpoh\u00adjien on ol\u00adta\u00adva yh\u00adden\u00admu\u00adkai\u00adsia kai\u00adkis\u00adsa pal\u00adve\u00adlun eri osis\u00adsa. Var\u00admis\u00adta, ett\u00e4 si\u00advun osat (ks. kuva 1) erot\u00adtu\u00advat toi\u00adsis\u00adtaan sel\u00adke\u00e4s\u00adti ja ett\u00e4 eri osat ovat tun\u00adnis\u00adtet\u00adta\u00advis\u00adsa. […]Lue lis\u00e4\u00e4…<\/span><\/p>\n","protected":false},"author":10,"featured_media":0,"parent":134,"menu_order":1,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-272","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/papunet.net\/saavutettavuus\/wp-json\/wp\/v2\/pages\/272","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/papunet.net\/saavutettavuus\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/papunet.net\/saavutettavuus\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/papunet.net\/saavutettavuus\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/papunet.net\/saavutettavuus\/wp-json\/wp\/v2\/comments?post=272"}],"version-history":[{"count":0,"href":"https:\/\/papunet.net\/saavutettavuus\/wp-json\/wp\/v2\/pages\/272\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/papunet.net\/saavutettavuus\/wp-json\/wp\/v2\/pages\/134"}],"wp:attachment":[{"href":"https:\/\/papunet.net\/saavutettavuus\/wp-json\/wp\/v2\/media?parent=272"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}