Web-sivun asettelu on HTML -merkintöihin perustuvan hypertekstidokumentin rakenteen luomista , yleensä tyylisivuja ja asiakaspuolen komentosarjoja käyttäen , jotta suunnitteluelementit näyttävät asettelun kaltaisilta [1] .
Web-sivujen ulkoasu eroaa tulostamisesta siinä, että on otettava huomioon elementtien esitysten erot eri selaimissa ja ero laitteiden työtilan koosta [2] .
Työmaan suunnittelutyöt voidaan sisällyttää työmaan kokoonpanovaiheeseen .
Tim Berners-Lee työskennellessään Euroopan hiukkasfysiikan instituutissa keksi kielen, joka ei keskittynyt suunnittelun keinoihin, vaan tekstin merkintälogiikkaan. Jonkin aikaa sivut suunniteltiin niin sanotussa "akateemisessa suunnittelussa", esimerkiksi lib.ru [3] .
Netscape -selaimen myötä tilanne on muuttunut. Selainten kehittäjät ottivat käyttöön epästandardeja HTML-tageja, jotka on suunniteltu parantamaan asiakirjan ulkonäköä [3] . Selain oli niin yleinen, että epätyypilliset tunnisteet eivät olleet huolestuttavia: ei ole mitään järkeä huolehtia siitä, että muut selaimet eivät tue näitä tunnisteita, kun vain 10 % kävijöistä käyttää muita selaimia [3] . Sivustoja ei enää kehitetä "akateemiseen" tyyliin [3] . He alkoivat miettiä suunnittelua, mikä tarkoittaa, että tarvittiin monimutkaisempi ulkoasu [3] .
1990-luvun puolivälistä lähtien MS Internet Explorer on vanginnut kasvavan osan kuluttajista [3] . Selainkehittäjien lähestymistavat vaihtelivat, ja myös tuettujen teknologioiden joukko erosi [3] . Kaikki tämä vain lisäsi sivuston kehittäjien vaivaa ja lisäsi sivuston kehitysaikaa [3] .
Markkinataistelun aikana vanhentuneet ja heikosti tukevat Netscape 4- ja Internet Explorer 4 (IE 4) -standardit korvattiin selaimen viidennellä versiolla [4] . IE 5 :n ei ollut tarkoitus vain korjata edeltäjänsä bugeja, vaan parantaa CSS-standardien tukea [4] . Microsoft oli tuomittu tähän vaiheeseen, jo pelkästään siksi, että se liittyi W3C -ryhmään [4] . Kehitysprosessin aikana ero sivustojen näytössä tuli niin merkittäväksi (ja jotkut sivustot eivät toimineet ollenkaan), että kehittäjien oli luotava erityinen "yhteensopivuustila" [4] . Tässä tilassa selain toimi "vanhaan tapaan" [4] . Jotta standarditukitilaa voitaisiin käyttää, html-koodiin oli lisättävä elementti <!DOCTYPE> [4] . Yhteensopivuustila-idea siirtyi myöhemmin muihin selaimiin (esim . Mozilla , Safari , Opera jne.) [4] . Tekniikan kehittyessä doctype-lajeja oli liian monia, vasta html:n viidennessä versiossa W3C ehdotti lyhyen tietueen käyttöä, mikä yhtenäistäisi standardin [4] .
Hetken kuluttua työskentely lohkojen kanssa muuttui liian hankalaksi, koska selaimet eivät varsinaisesti tukeneet CSS:ää, tyylejä piti lisätä suoraan lohkoihin, mikä vaikeutti kehitystä [3] . Tällä hetkellä kehitystyössä alettiin käyttää näkymättömällä reunuksella varustettuja taulukoita, joissa monia tyylejä ei vaadittu, ne olivat oletuksena [3] .
Vuonna 1998 ilmestyi Cascading Style Sheets Level 2 (CSS2) -spesifikaatio ja sitten CSS2.1, joka mahdollisti lohkosuunnittelukoodin siirtämisen erillisiin tiedostoihin ja käyttämisen sivuston kaikilla sivuilla ja jopa tämän tiedoston tallentamisen välimuistiin . tarkoittaa nopeampaa sivun lataamista [3] . Tämän tekniikan kehitys ja selaintuki on johtanut lohkoasettelun käyttöön taulukoiden sijaan [3] .
Suorakulmio sai poikkeuksellisen arvon, koska se pystyi jakamaan mihin tahansa määrään minkä tahansa mittasuhteisia suorakulmioita [5] .
Taittosuunnittelija saa pääsääntöisesti suunnittelijalta hyväksytyn sivusuunnittelun taiton [2] . Seuraavaksi asettelusuunnittelija analysoi tuloksena olevan asettelun [2] . Jakaa sen vaakasuoriksi viivoiksi (raidat) - "lattiat". Lisäksi jokainen "lattia" analysoidaan erikseen ja jaetaan suorakaiteen muotoisiin lohkoihin - sarakkeisiin.
Seuraavaksi näiden yksittäisten rivien ja niissä olevien sarakkeiden asetteluprosessi [2] .
Asettelun jälkeen sivu tarkistetaan eri alustojen varalta . Yleisesti ottaen voit vastata seuraaviin kysymyksiin [2] :
Asiakirjaan tehdään kriittisiä korjauksia ja tarkistus toistetaan alusta alkaen [2] .
Asettelu luodaan malleilleSivustolla ei pääsääntöisesti käytetä asetteluasiakirjoja. Asettelun jälkeen asiakirja leikataan toistuviin osiin ja käytetään koko sivustolla. Esimerkiksi yläraita logolla ja alaraita tärkeillä tiedoilla. Tällaisia asettelun osia kutsutaan malleiksi ( englanniksi template ) [2] .
Yksi tärkeä rajoitus on fontit [2] . Kuulokemikrofonit kaikille käyttöjärjestelmille ovat erilaisia. Kirjasintyypin valintaa ei rajoita mikään, mutta jos selain ei löydä määritettyä sarjaa, se käyttää oletusasetuksia [2] .
Asettelun pääasiallinen ongelma on näyttö työtilan eri leveydillä [6] .
Asettelu eroaa tämän ongelman eri lähestymistavoista [6] :
Historiallisesti sivusto on pystysuora muoto, joka ei vie enempää kuin näytön leveyden vaakasuuntaisen vierityksen välttämiseksi [6] . Kaikki sivuston sijainnin hallintaominaisuudet (näppäimistöyhdistelmät sekä vierityspalkki ja hiiren rulla) on konfiguroitu suoraan pystysuuntaista liikettä varten [6] .
| Tyypillisiä web-asetteluja | ||
|---|---|---|
| yksi sarake | kaksisarainen | kolmipylväinen |
Mikään menetelmistä ei ole kanoninen ja hyväksytty päämenetelmäksi [2] . Kaikilla asettelumenetelmillä on sekä etuja että haittoja. Taittosuunnittelija asiantuntijana valitsee käytettävät työkalut punnitsemalla tietyn projektin edut ja haitat [7] .
Modulaarinen ristikko jakaa materiaalin rakenteellisesti erillisiksi lohkoiksi, mikä yksinkertaistaa uusien elementtien lisäämistä sivulle [7] . Jotkut ladontalaitteet saattavat poiketa asettelusäännöistä tietyn projektin vuoksi, mutta tarve yksinkertaisesti lisätä sivulle uusia elementtejä pahentaa tarvetta palata näihin sääntöihin [7] .
Modulaarinen ruudukko on joukko ohjaimia, jotka kohdistetaan toisiinsa ja jakavat asettelun neliöiksi [7] . Salli siksi muusta sivustosta riippumatta muuttaa tietoyksikköä [7] .
Tärkeimmät asettelutyökalut ovat kehykset , taulukot ja divit. HTML5 - standardissa kehyksiä ei enää tueta [8] , ja "semanttiset" lohkot ovat tulleet saataville työhön : otsikko, pää, nav, osio, artikkeli, sivu, alatunniste. Lohkot eivät kuitenkaan tarjoa tiettyjä etuja, vaan ovat vain " syntaktista sokeria ".
Taulukot ovat kätevä työkalu lohkojen kohdistamiseen. Html:ssä taulukko on jaettu riveihin, jotka puolestaan on jaettu soluihin, joten voit luoda rajattoman määrän rivejä, joissa jokaisessa on rajoittamaton määrä soluja. Taulukon soluissa on erityiset tasausasetukset, joita ei enää löydy muista elementeistä. Tämä tarkoittaa, että jotkin suunnitteluelementit ovat erittäin vaikeita asetella ilman taulukoita [9] .
Yritysmaailmassa laskentataulukoita käytetään tietojen vertailuun sekä selkeyden vuoksi [9] .
Taulukkolähestymistavan haittana on, että sivua ei renderöidä ennen kuin sulkeva taulukkotunniste on ladattu, mikä on kriittistä, kun yhteys katkeaa ja yhteys on hidas. Haittoja ovat myös koodin ylimäärä, mikä vaikeuttaa sen ymmärtämistä.
Vuonna 2011 taulukkoasettelu katsottiin vanhentuneeksi [9] .
Layer (nimetty < layer> -tunnisteen mukaan) on Netscapen kehittämä kehitystyö, jota käytetään Netscape Navigator [10] -selaimessa . Tunniste saa näyttää tai piilottaa sisällön, asettaa sijainnin suhteessa selainikkunaan, peittää kerrokset päällekkäin ja sisällyttää lohkon sisällön tiedostosta [10] . HTML ei sisältynyt määrittelyyn [10] .
Block layout - asettelu < div> -tunnisteen ja niitä kuvaavien tyylisivujen (CSS) avulla [10] . Tunniste syntyi, koska CSS-paikannuskonsortio (CSS-P) hylkäsi tarkoituksellisesti <layer>-tunnisteen luodakseen samanlaisen tagin, mutta CSS-tuella muiden tunnisteiden hengessä [10] . Lohkoasettelun avulla toteutetaan semanttisen asettelun käsite .
Frame layout on asettelu käyttämällä samannimistä <frame> tagia, jolla on erilainen sijoittelutapa ja jonka sisällä on erilliset html-sivut [11] .
Kehykset ovat helppokäyttöisiä, koska sinun tarvitsee välittää vain selainikkunan osan näyttämisestä ja uudelleenpiirtämisestä - yksi kehys - loput osat ovat toisessa kehyksessä, eivätkä ne piirrä uudelleen ilman, että olet vuorovaikutuksessa niiden kanssa [11] . On myös mahdollista avata linkki toisessa kehyksessä, mikä on kätevää käytettäessä päävalikkoa erillisessä kehyksessä [11] . Kehyksiin jaetuilla sivuilla on vähemmän koodia, koska niissä ei ole toistuvia osia, jotka eivät lataudu uudelleen [11] . Ne sijoitetaan täsmälleen oikeaan paikkaan selainikkunassa [11] .
Hakukoneet indeksoivat kehyksiä huonosti , koska sisältösivuilla ei ole linkkejä sivuston muille sivuille ja päinvastoin, navigointisivulla ei ole sisältöä [11] . Siirtyminen hakusivulta tapahtuu yhdellä sivulla lataamatta muita kehyksiä - navigointi ja logo [11] . Sisäisiä sivuja ei voi merkitä kirjanmerkkeihin, koska selain ei näytä muutoksia osoiteriville, vaan näyttää aina vain sivuston osoitteen [11] . Selainten yhteensopivuus on epäjohdonmukaista [11] . Selaimet tulkitsevat aina samat parametrit omalla tavallaan [11] .
HTML -merkintätyökalujen käyttöperiaatteiden mukaan erotetaan toisistaan looginen merkintä ja esitys (fyysinen) merkintä.
Esimerkiksi kursivoitu teksti voidaan saada käyttämällä sekä <i> - että <em>-tunnistetta .
Ensimmäisessä tapauksessa kursivoitu on määritelty eksplisiittisesti, ja toisessa tekstissä käytetään loogista painoarvoa, joka yleensä näytetään kursiivilla.
Toisin sanoen ensimmäinen lähestymistapa keskittyy ulkonäköön ja toinen - loogiseen tarkoitukseen.
Toisen lähestymistavan etuna on ulkoasun riippumattomuus käytetyistä laitteista ja web-sivujen suunnittelusta.
Jos noudatat loogista asettelua, voit käyttää samaa asettelua näytölle , tulosteelle ja mobiililaitteille säätämällä ulkoasua erillisillä tyylitiedostoilla.
Kaikki sivustot asettelun mukaan voidaan jakaa 5 ryhmään [12] :
Responsiivinen asettelu on muotoilu, joka mukautuu (sopeutuu) näytön kokoon, mukaan lukien lohkojen uudelleenjärjestely paikasta toiseen tai niiden korvaaminen lohkoilla, jotka näytetään vain tietyllä resoluutiolla. Responsiivinen asettelu on korvannut ajatuksen luoda sivustosta erityisiä mobiiliversioita, jotka "elävät" erillisillä aliverkkotunnuksilla (esimerkiksi m.wikipedia.org).
Edut:
Virheet:
Toisin sanoen jokaisella suunnittelutyypillä on hyvät ja huonot puolensa, ja valinta riippuu ratkaistavasta tehtävästä. Tässä tapauksessa voidaan käyttää myös sekamuotoilua - jotkut taulukkorakenteen sarakkeet asetetaan prosentteina ja toiset pikseleinä.
Selaimet käsittelevät taulukkoa tarkoituksella yhtenä objektina, jolloin taulukon sisältöä ei näytetä ennen kuin koko sisältö on ladattu paikalliselle tietokoneelle. [13]
Käytettäessä taulukkoa web-sivujen elementtien järjestelykehyksenä sen alkuperäinen etu muuttuu haitaksi, koska se viivästyy sisällön renderöinnissa. Myös verkkosivujen määrän kasvu tulee ottaa huomioon taulukoiden aktiivisella käytöllä, varsinkin kun ne sijoittuvat toisiinsa. Kaikki tämä johtaa siihen, että taulukkoasettelu aiheuttaa tarpeettomia viiveitä tiedon tuottamisessa selaimessa.
Ongelma syntyy useiden taulukoiden sisäkkäisistä kohdista, mikä on tyypillistä tiettyjen tehosteiden saavuttamiseksi verkkosivulla. Taulukoiden määrän kasvu lisää asetteluvirheiden mahdollisuutta, lisää asiakirjojen kokoa ja hidastaa tiedostojen latausnopeutta. Visuaalisten muokkausohjelmien, kuten Adobe Dreamweaver tai Microsoft FrontPage , käyttö asiakirjojen luomiseen ja muokkaamiseen helpottaa taulukoiden käsittelyä, mutta niiden parametrien runsauden vuoksi kehittäjät eivät tässä tapauksessa ole immuuneja virheille ja tarpeettomalle työlle. kunkin taulukon yksilöllisesti muokkaamalla.
Lisäksi taulukoiden käyttö suunnittelutarkoituksiin ei vastaa semanttisen asettelun käsitettä, joka edellyttää elementtien (tunnisteiden) käyttöä niiden merkityksen, semanttisen merkityksen mukaisesti. <table>-elementti ja sitä seuraavat elementit (<tr>,<th>, <td> jne.) on suunniteltu merkitsemään taulukkotietoja (eli tietoja, joissa samaan sarakkeeseen kuuluvien elementtien välillä on semanttinen suhde tai yksi rivi). W3C HTML-kielen kehittäjänä kannustaa käyttämään HTML:ää tiedon loogiseen merkintään ja kuvaamaan suunnittelua (mukaan lukien eri lohkojen sijoittelu) erillään (X)HTML-merkinnöistä (esim. CSS:n avulla).
Taulukoita käytettäessä tunnetuksi tekniikaksi on tullut välikappaleiden käyttö - läpinäkyvät yhden pikselin korkuiset kuvat. Itse kuvaa ei näytetä verkkosivulla, mutta sitä voidaan skaalata mihin tahansa määrään. Osoittautuu tietyn leveyden tai korkeuden näkymätön tikku, joka estää taulukon soluja lähestymästä tiettyä etäisyyttä. Välikkeet olivat erityisen tärkeitä Netscape -selaimelle , joka ei näyttänyt solun taustaa, jos siihen ei ollut asetettu mitään. Tämän ominaisuuden poistamiseksi soluun asetettiin pieni läpinäkyvä kuva GIF -muodossa .
Tällaiset tekniikat eivät vain vaikeuta universaalien verkkosivujen kehittämistä, vaan johtavat myös asiakirjan latausnopeuden laskuun. Selaimen on tässä tapauksessa ladattava elementtejä, jotka eivät näy käyttäjälle ja joita hän itse asiassa ei tarvitse, mutta ne sisältyvät sivuston yleiseen liikenteeseen.
Tasot ovat rakenneosia, jotka voidaan sijoittaa web-sivulle asettamalla ne päällekkäin pikselitarkkuudella . HTML 4 :ssä ja XHTML :ssä taso on web-sivuelementti, joka on luotu tyylitellyllä <div>-tunnisteella. [neljätoista]
Tällöin noudatetaan seuraavia periaatteita:
Tasot voidaan sijoittaa selainikkunaan pikselitarkkuudella. Tason sijainti annetaan kahdella koordinaatilla suhteessa selainikkunan, pääelementin tai asiakirjan mihin tahansa kulmaan.
Skriptien avulla voit muuttaa tason parametreja dynaamisesti. Tämän ansiosta sivulle voidaan luoda erilaisia tehosteita, kuten avattavia valikoita, pelejä, avautuvia bannereita , kelluvia ikkunoita ja paljon muuta.
Tason ominaisuudet asetetaan ja konfiguroidaan kätevästi tyyleillä. CSS :n mahdollisuudet laajentavat suunnittelun nautintojen valikoimaa. Tyylisivujen avulla voit saada kompaktin ja tehokkaan koodin yksinkertaisilla menetelmillä.
Selaimien nykyaikaisemmat versiot ovat tiukentuneet standardien noudattamisessa ja sisältävät työkaluja tasojen käsittelyyn.
Tasoa voidaan siirtää, piilottaa ja näyttää lataamatta koko sivua uudelleen. Ohjeiden avulla voit luoda tehosteita, avattavia valikoita, työkaluvihjeitä, liikkuvia elementtejä jne. Tällaisten elementtien lisääminen, vaikka se lisää koodin määrää, ei vaadi asiakirjan uudelleenlatausta ja päivittämistä, ja se tapahtuu viipymättä selaimesta. Lisäksi sivuston ilmekkyyttä ja houkuttelevuutta lisää huomattavasti samankaltaisten kerrosten käyttö.
Tasot voidaan pinota päällekkäin, mikä yksinkertaistaa elementtien sijoittamista verkkosivulle ja tarjoaa enemmän asetteluvaihtoehtoja.
Tasot näytetään nopeammin kuin taulukot. Suurempi nopeus saavutetaan kompaktin koodin ja sen vuoksi, että kerroksen sisältö näkyy latauksen aikana. Totta, tämä voi johtaa sivuelementtien virheelliseen näyttöön niitä ladattaessa.
Tasojen kanssa työskentelyn standardit eivät ole vielä täysin vakiintuneet, ja selaimet toteuttavat tiettyjä ominaisuuksia eri tavoin. Tästä johtuen kerrosten asettelun päävaikeus on luoda universaali koodi, joka toimisi tasaisesti ja ilman virheitä eri selaimissa (" selaimien välinen yhteensopivuus ") ja eri näytön resoluutioilla . Selainten käyttäytymisessä eri tyylielementtejä käytettäessä on merkitystä.
Katso myös : Pöytätön web-suunnittelu
Taittosuunnittelijat ovat mukana web - sivujen ulkoasussa . Yleisesti ottaen taittosuunnittelijan tehtäviin kuuluvat:
Taittosuunnittelija käyttää seuraavaa ohjelmistoa:
Ja joskus myös turvautuu auttamaan:
WYSIWYG -editorien ja asetteluohjelmien käyttö tuomitaan usein [15] [16] tuloksena olevan koodin huonon laadun vuoksi. Ne ovat kuitenkin usein helpompia käyttäjille kuin manuaalinen koodaus, eivätkä myöskään vaadi syvällistä HTML-tietoa, ja siksi niitä käytetään laajalti.
HTML-asettelun kelpoisuus on sen yhteensopivuus The World Wide Web Consortiumin ( W3C ) standardien kanssa. Virheiden puuttuminen asiakirjan asettelusta on yksi asettelun laadun tärkeimmistä indikaattoreista. Asettelun automaattinen tarkistus virheiden varalta voidaan suorittaa sekä W3C-verkkopalvelulla että erilaisilla "validator"-ohjelmilla. HTML-määrittelyn eri versiot vaativat erilaisen syntaksin, joten validointitestissä on aina otettava huomioon sen asiakirjatyyppi .
Sivuston selainyhteensopivuus on sivuparametrien näyttämistä lähellä alkuperäistä suunnittelua ja toiminnallista muotoa eri selaimia ja niiden eri versioita ja muunnelmia käytettäessä.
Verkkokehittäjät tekevät kaikkensa yhtenäistääkseen hypertekstimerkinnät kehittääkseen yhden näyttöstandardin kaikissa selaimissa , mutta tämän toteuttaminen on monimutkaista työnkulkua useiden kehittäjien välisten ristiriitojen vuoksi.
| Web ja verkkosivut | |
|---|---|
| maailmanlaajuisesti | |
| Paikallisesti | |
Sivustojen ja palveluiden tyypit |
|
| Luominen ja ylläpito | |
| Asettelutyypit, sivut, sivustot |
|
| Tekninen | |
| Markkinointi | |
| Yhteiskunta ja kulttuuri | |