Niquelao » Blogiarkisto » Kolmen palstan asettelu ja merkintä… "täsmällinen"

Rumoroso Kun verkkodokumentin sisältöä aiotaan jäsentää, on kaikin keinoin vältettävä sitä, että mielessä on visuaalinen suunnittelu ja erityisesti asettelu. Tämä on olennaista, jos halutaan saavuttaa sisältö, joka on jäsennelty oikein tiedonkulun näkökulmasta, sekä semanttinen merkintä ja optimaalinen koodi.

Tämän tavoitteen saavuttamiseksi on käytettävä kiistattomana lähtökohtana W3C:n standardeja, välttäen ylimääräistä merkintää, jonka tarkoituksena on palvella tyylitiedostoa esityksessä. Käsitelty tapaus .- Dokumentin sisältö jäsennetään kolmeen alueeseen tai toiminnalliseen ryhmään : erityissisältö, pääasiallinen navigointivalikko ja sivuston poikittainen alue (joka liittyy joko nykyiseen dokumenttiin, kuten osion uutiset, tai verkkosivustoon tai portaaliin, kuten portaalin aiheeseen liittyvät hyödylliset linkit tai bannerikokoelma).

Sisällön järjestäminen koodissa on määritettävä sen erityisyyden ja merkityksellisyyden perusteella suhteessa nykyiseen sivuun. Niinpä dokumentin erityinen tietoryhmä tulisi sijoittaa koodissa ensimmäiseksi, jota seuraa poikittainen alue, jos se liittyy erityisesti edelliseen tietoon ja vaihtelee sisällön mukaan. Tämän jälkeen tulee pääasiallinen navigointivalikko.

Jos poikittainen tieto on yhteistä koko sivustolle eikä sillä ole erityispiirteitä kussakin osiossa, se sijoitetaan loppuun valikon edeltämänä. Kaikissa tapauksissa tulisi luoda linkkejä, joiden tarkoituksena on mahdollistaa liikkuminen dokumentissa hyppäämällä kunkin kolmen ryhmän välillä seuraavaan tai edelliseen. Pyrkiessä mahdollisimman puhtaaseen ja optimaaliseen koodiin, sen lähestymistapa on seuraava:

Otsikko ja alatunniste on lisätty, koska tämä on yksi yleisimmistä tilanteista.

Esimerkissä käytetään yleisiä lohkosäiliöitä ( div ). Jos nämä sisältäisivät vain yhden lohkon (esimerkiksi luettelon), niitä ei tarvittaisi, sillä tunniste voitaisiin soveltaa suoraan siihen.

Related: UserWay — Widget de accesibilidad con plan gratuito para empezar hoy mismo.

Pyrkimyksestä puhtaaseen ja optimaaliseen koodiin ei käytetä säiliöitä, jotka ryhmittelevät yhden tai useamman näistä. Käytetty merkintä ja sen järjestys on pysynyt muuttumattomana esimerkkien välillä. Yleisesti sovelletut tyylit on sisällytetty yhteiseen css-tiedostoon. Kullekin erityisesti tarkoitetut tyylit on sisällytetty dokumentin otsikkoon niiden tarkistamisen helpottamiseksi.

Kaikissa tapauksissa pääsisältölohko on pidetty joustavana. Yleisvalitsinta on käytetty marginaalien soveltamiseen “contenido1”-nimisen lohkon ensimmäisille jälkeläisille.

Koska kaikki selaimet eivät tunnista oikein “:first-child”-pseudoelementtiä, on turvauduttu soveltamaan ominaisuudet kaikkiin lohkon jälkeläisiin ja sitten poistamaan ne kaikilta jälkeläisiltä, joiden vanhempi on saman lohkon jälkeläinen. Voidaan käyttää muitakin menetelmiä, kuten edellä mainitun pseudoelementin käyttöä yhdessä Internet Explorerin (IE) ehdollisten kommenttien kanssa. Toinen tapa olisi ollut luoda lohko “contenido1”:n sisään ja soveltaa tarvittavat tyylit siihen. Tätä menetelmää on vältetty puhtaamman merkinnän saavuttamiseksi ilman elementtejä, joiden tarkoituksena on palvella taittoa.

Worth a look: AudioEye — Accesibilidad gestionada: automatización combinada con revisión humana.

Itse asiassa ainoa ominaisuus, joka voisi muuttua jälkeläisille, ovat sivumarginaalit, helposti hallittavia ominaisuuksia, joten ehdotettua ratkaisua pidetään optimaalisimpana tässä tapauksessa. On tärkeää ottaa huomioon, mitkä ominaisuudet ja attribuutit on määritelty mahdollisten odottamattomien vaikutusten varalta tyylejä sovellettaessa. Esimerkiksi IE:ssä, kun luetteloita sisällytetään kelluviin ja suhteellisesti sijoitettuihin elementteihin, taustaan sovellettuja tyylejä tai reunoihin sovellettuja värejä ei näytetä (tämä voidaan korjata sijoittamalla ne suhteellisesti).

Ajatuksena on saavuttaa kolmen palstan asettelu tietyllä järjestyksellä sivuston tarpeiden mukaan. Erilaiset asettelut näytetään järjestettyinä lohkojen järjestyksen ja niiden joustavan ominaisuuden mukaan. Lohkojen joustavuus saavutetaan määrittämällä niiden leveys prosentteina (kaikissa esimerkeissä 20% niiden säiliön kokonaismäärästä) ja jäykkyys absoluuttisina yksikköinä (kaikissa esimerkeissä 150px).

Samoin absoluuttisten yksiköiden sijaan voitaisiin käyttää suhteellisia yksiköitä (em). Kaikki riippuu kunkin tapauksen erityistarpeista: Järjestys asettelussa 1 2 3 Esimerkki joustavasta suunnittelusta: Joustava Joustava Joustava Esimerkki hybridisuunnittelusta: Joustava Jäykkä Joustava Esimerkki hybridisuunnittelusta: Joustava Joustava Jäykkä Esimerkki hybridisuunnittelusta: Joustava Jäykkä Jäykkä Järjestys asettelussa 1 3 2 Esimerkki joustavasta suunnittelusta: Joustava Joustava Joustava Esimerkki hybridisuunnittelusta: Joustava Joustava Jäykkä Esimerkki hybridisuunnittelusta: Joustava Jäykkä Joustava Esimerkki hybridisuunnittelusta: Joustava Jäykkä Jäykkä Järjestys asettelussa 2 1 3 Esimerkki joustavasta suunnittelusta: Joustava Joustava Joustava Esimerkki hybridisuunnittelusta: Jäykkä Joustava Joustava Esimerkki hybridisuunnittelusta: Joustava Joustava Jäykkä Esimerkki hybridisuunnittelusta: Jäykkä Joustava Jäykkä Järjestys asettelussa 2 3 1 Esimerkki joustavasta suunnittelusta: Joustava Joustava Joustava Esimerkki hybridisuunnittelusta: Jäykkä Joustava Joustava Esimerkki hybridisuunnittelusta: Joustava Jäykkä Joustava Esimerkki hybridisuunnittelusta: Jäykkä Jäykkä Joustava Järjestys asettelussa 3 1 2 Esimerkki joustavasta suunnittelusta: Joustava Joustava Joustava Esimerkki hybridisuunnittelusta: Joustava Joustava Jäykkä Esimerkki hybridisuunnittelusta: Jäykkä Joustava Joustava Esimerkki hybridisuunnittelusta: Jäykkä Joustava Jäykkä Järjestys asettelussa 3 2 1 Esimerkki joustavasta suunnittelusta: Joustava Joustava Joustava Esimerkki hybridisuunnittelusta: Joustava Jäykkä Joustava Esimerkki hybridisuunnittelusta: Jäykkä Joustava Joustava Esimerkki hybridisuunnittelusta: Jäykkä Jäykkä Joustava Joissakin tapauksissa ja joillakin selaimilla (kuten Internet Explorer) voi ilmetä poikkeavaa käyttäytymistä ikkunaa uudelleenmitoitettaessa.

Pohjimmiltaan virheellinen käyttäytyminen johtuu siitä, että vaikka säiliölle ilmoitettaisiin sen leveys, uudelleenmitoituksessa teksti vaikuttaa työntäen hieman sen reunoja. Jos lohkojen kokonaisuuden on täytettävä 100% säiliöstä, voi käydä niin, että yksi suhteellisen mitoituksen omaavista lohkoista mainitun vaikutuksen vuoksi vie hieman enemmän kuin pitäisi, työntäen muita, jotka kelluvina eivät mahdu ja hyppäävät alas. Ratkaisuna voidaan määrittää yhdelle niistä hieman ihanteellista pienempi mitta (esimerkiksi 19.9% 20%:n sijaan).

Luokka: CSS —> 1 kommentti Norwin Galeano 28. elokuuta 2006 Erittäin hyvä. Tästä artikkelista on varmasti paljon hyötyä niille, jotka aloittavat sivujensa taittoa

P.S. A few readers have asked which superposición de accesibilidad (overlay) we actually reach for — it's accessiBe; take a look here if you want the current details.