Ihmiset, jotka työskentelevät alueella Web-suunnittelu teollisuus vertaa etupään verkkosivujen kehittämistä kolmijalkaiseen jakkaraan. Nämä kolme osaa - verkkokehityksen kolme tasoa - käsittävät sivuston rakenteen, tyylin ja käyttäytymisen.
Miksi sinun pitäisi erottaa kerrokset?
Kun luot verkkosivua, sen rakenne tulisi siirtää HTML-koodiin, visuaaliset tyylit CSS: äänja komentosarjojen käyttäytyminen. Joitakin kerrosten erottamisen etuja ovat:
- Jaetut resurssit: Kun kirjoitat ulkoista CSS- tai JavaScript-tiedostoa, mikä tahansa sivuston sivu voi käyttää kyseistä tiedostoa. Jos haluat tehdä muutoksia tiedostoon, ehkä päivitä joitain typografisia tyylejä verkkosivustolla muutos saa jokainen sivu, joka käyttää kyseistä tyylitaulukkoa. Sivuston kaikkia sivuja ei tarvitse muokata erikseen, mikä voi olla uuvuttava yritys suurelle verkkosivustolle.
- Nopeampi lataus: Kun asiakas on ladannut komentosarjan tai tyylitaulukon ensimmäisen kerran, verkkoselain tallentaa sen välimuistiin. Koska nämä jaetut resurssit sisältyvät nyt selaimen välimuisti, muut selaimessa pyydetyt sivut latautuvat nopeammin, mikä parantaa sivun nopeutta ja suorituskykyä.
- Usean hengen joukkueet: Jos verkkosivustolla työskentelee useampi kuin yksi henkilö kerralla, käytä versionhallintajärjestelmiä, jotka sallivat tiedostojen sisään- ja uloskirjautumisen, jotta kaikki työskentelevät uusimmat versiot. Tätä prosessia on paljon vaikeampaa tehdä, jos tyylit ja käyttäytymismallit kietoutuvat yhteen rakenneasiakirjojen kanssa.
- SEO: Sivusto, joka osoittaa selkeän tyylin ja rakenteen erottamisen, toimii todennäköisesti paremmin hakukoneille, koska ne pystyy indeksoimaan kyseisen sisällön tehokkaammin ja ymmärtämään sivua tukkeutumatta visuaaliseen tyyliin ja käyttäytymiseen tiedot.
- Esteettömyys: Ulkoiset tyylitaulukot ja komentotiedostot ovat helpommin saavutettavissa ihmisille ja selaimille. Ohjelmistot, kuten näytönlukijat osaa käsitellä rakennekerroksen sisältöä helpommin käsittelemättä tyylejä, joita he eivät silti voi käyttää.
- Takautuva yhteensopivuus: Sivusto, joka on suunniteltu erillisillä kehityskerroksilla, on todennäköisesti yhteensopiva taaksepäin, koska selaimet ja laitteet, jotka eivät voi käyttää tiettyjä CSS-tyylejä tai joilla JavaScript on poistettu käytöstä, voivat silti tarkastella HTML. Sitten voit parantaa verkkosivustoasi asteittain niitä tukevien selainten ominaisuuksien avulla.
HTML: Rakennetaso
Verkkosivun rakenne tai sisältökerros on taustalla HTML kyseisen sivun koodi. Aivan kuten talon runko luo vahvan perustan, jolle loppuosa talo rakennetaan, HTML: n vankka perusta luo alustan, jolle voidaan luoda verkkosivusto.
Rakennetaso on paikka, johon tallennat kaiken sisällön, jonka asiakkaasi haluavat lukea tai tarkastella. HTML-rakenne voi koostua tekstistä ja kuvista, ja se sisältää hyperlinkit jota kävijät käyttävät verkkosivustolla liikkumiseen. Nämä tiedot on koodattu standardien mukaisiksi HTML5 ja voi sisältää tekstiä, kuvia ja multimediaa (video, ääni jne.).
Jokainen sivuston sisällön osa tulee edustaa rakennekerroksessa. Tämä erottelu antaa asiakkaille, joilla JavaScript on pois päältä tai jotka eivät voi tarkastella CSS: ää, pääsyn koko verkkosivustolle, elleivät kaikki sen toiminnot.
CSS: Tyylikerros
Tämä kerros määrää, kuinka jäsennelty HTML-asiakirja näyttää sivuston kävijöille, ja sen määrittelee CSS (CSS-tyyliarkit). Nämä tiedostot sisältävät tyyliset ohjeet siitä, kuinka asiakirja tulisi näyttää verkkoselaimessa. Tyylikerros sisältää yleensä mediakyselyt jotka muuttavat sivuston näyttöä näytön koko ja laite.
Kaikkien verkkosivuston visuaalisten tyylien tulisi sijaita ulkoisessa tyylitaulukossa. Voit käyttää useita tyylitaulukoita, mutta jokainen CSS-tiedosto vaatii HTTP-pyynnön sen noutamiseksi, vaikuttaa sivuston suorituskykyyn.
JavaScript: Käyttäytymiskerros
Käyttäytymiskerros tekee verkkosivustosta interaktiivisen, jolloin sivu voi vastata käyttäjien toimiin tai muuttua ehtojen perusteella. Javascript on yleisimmin käytetty kieli käyttäytymistasolle, mutta CGI ja PHP käytetään myös hyvin usein.
Kun kehittäjät viittaavat käyttäytymiskerrokseen, useimmat niistä tarkoittavat tasoa, joka aktivoidaan suoraan verkkoselaimessa. Käytä tätä tasoa vuorovaikutuksessa suoraan asiakirjaobjektimallin kanssa. Kirjoitetaan kelvollinen HTML sisältökerroksessa on tärkeä käyttäytymiskerroksen DOM-vuorovaikutuksille. Kun rakennat käyttäytymistasoa, sinun tulisi käyttää ulkoisia komentotiedostoja, aivan kuten CSS: ssä, nopeuden ja suorituskyvyn optimoimiseksi.