Mikä on layout? Selaimien välinen asettelu nykyaikaisissa olosuhteissa - yleinen käsitys tarvittavasta periaatteesta

Miksei yksi?

Oikea kysymys on, miksi oli mahdotonta keksiä yhtä ainoaa tapaa ja kehittää sitä? Mutta ihmiset ovat erilaisia ​​olentoja, joten he keksivät erilaisia ​​tapoja. Itse asiassa niitä ei ole paljon, ja jotkut ovat vanhentuneita nykyään. Katsotaanpa perusasettelumenetelmiä.

Pöytä

Kehyksen luominen taulukoiden avulla. Aiemmin yksinkertaisin ja suosituin menetelmä. Nykyään se vanhenee joka vuosi, vaikka tällä tavalla tehtyjä sivustoja on edelleen. Koko menetelmä on sidottu taulukkotunnisteeseen ja siihen lapsielementtejä, kuten rivit ja solut. Koko sivuston rakenne on merkitty nimellä iso pöytä.

Edut. Tämä lähestymistapa tekee useiden sarakkeiden ja sarakkeiden luomisesta melko helppoa. Layouts kanssa monimutkainen rakenne Ne on melko helppo kirjoittaa taulukon avulla. Myös taulukkotunnistetta ja kaikkia siihen liittyviä elementtejä tuetaan täsmälleen samalla tavalla kaikissa selaimissa.

Vikoja. Erittäin hankala koodi - suurin haitta taulukkoasettelu. On huomattava, että voit lisätä toisen taulukon yhteen taulukkoon, toisin sanoen sisäkkäiseen. Tämä johtaa paljon sisäkkäisyyksiin ja joukkoon tunnisteita. Eikä tästä pääse pakoon, koska kaikkia näitä tunnisteita tarvitaan pöytämme toimivuuden kannalta. Tällaisen koodin ymmärtäminen ei ole kovin helppoa.

Taulukkotietoja on erittäin vaikea mukauttaa katselua varten erilaisia ​​laitteita. Tämä on paljon helpompaa tehdä lohkoilla (lohkoasettelu, jota myös harkitsemme ehdottomasti).

Vaihtoehtoinen. Ei kauan sitten, erikoisarvot ilmestyivät CSS:ään näytön ominaisuudet, joiden avulla voit simuloida taulukkoa käyttämällä todellisia lohkoja. Esimerkiksi näyttö: taulukko, näyttö: taulukko-rivi, näyttö: taulukko-solu. Elementit, joihin näitä ominaisuuksia sovelletaan, alkavat toimia taulukon, taulukon rivin ja solun tavoin. Sinun on muistettava, että tämä menetelmä on myös epätäydellinen, koska sitä ei tueta yhtäläisesti kaikissa selaimissa. Jos käytät näitä ominaisuuksia, sinun on testattava huolellisesti yhteensopivuus selainten välillä.

Kehykset

Olipa kerran toinen ladontamenetelmä, mutta nykyään se on melkein unohdettu. Kehyksiä käyttävän asettelun ydin on, että selainikkuna on jaettu tiettyyn määrään itsenäisiä lohkoja (kehyksiä), jotka muodostetaan frameset -tunniste. Se osoittaa polun kehykseen ladattavalle html-sivulle.

Jokainen kehys on itsenäinen elementti. Toisin sanoen vierityspalkit näkyvät erikseen jokaiselle lohkolle. On sanottava, että kehyksiä ei koskaan hyväksytty virallisesti, joten nykyään niitä ei käytännössä käytetä ja niitä harkitaan yleisesti huonolla tavalla asettelut.

Riisi. 1. Löysin Internetistä tämän esimerkin kehyksissä olevasta verkkosivustosta. Kuten ymmärrät, ei estetiikkaa.

Lohkot

Tässä tulemme tänään suosituimpaan verkkosivustojen asettelutekniikkaan. Sillä on useita etuja, ja sitä pidetään yleisesti kätevimpänä. Jokainen lohko on itsenäinen elementti, johon voit upottaa rajattoman määrän elementtejä. Lohkoa voidaan sijoittaa, muuttaa kokoa ja tyylitellä. Kaikki tämä tehdään CSS:n avulla.

Edut. Erittäin kompakti koodi, joka on täydellisesti luettavissa, vaikka et olisi tehnyt asettelua. Erilaisia ​​tyylejä on helpompi kiinnittää lohkoihin kuin pöytiin. Tällainen sivusto latautuu nopeammin ja on paremmin indeksoitu.

Lohkoelementit voidaan kerrostaa päällekkäin, kuten tasot Photoshopissa. Kun otetaan huomioon avoimuuden tuki, voidaan saavuttaa monia asioita mielenkiintoisia tehosteita, valitse tietty alue tai käytä skriptiä ladataksesi eri sisältöä samaan paikkaan.

Vikoja. Niitä ei käytännössä ole. Lohkot on helppo mukauttaa, helppo piilottaa ja vaihtaa. Div- ja span-säilöt näkyvät oikein myös vanhemmissa selaimissa. Jos puhumme uusista semanttisista lohkoista, niillä ei ole täysi tuki. Tämä ongelma kuitenkin todennäköisesti ratkeaa pian. Jo nykyään on tiedostoja, joiden sisällyttäminen ratkaisee uusien elementtien tukemisen vanhemmissa selaimissa. Menetelmä lohkon asettelu on olemassa pitkään sen poikkeuksellisen mukavuuden ja yksinkertaisuuden ansiosta.

Flexbox (flex)

Suurin osa uusi menetelmä asettelut. Se sai normaalin tuen selaimissa ensimmäistä kertaa vuoden 2014 jälkeen. Nyt monet kehittäjät noudattavat tätä menetelmää. Sen olemus on, että näyttö: flex on määritetty rakenneosille. Nämä ovat myös eräänlaisia ​​lohkoja, vain joustavampia ja toimivampia.

Monien mielestä flexboxit eivät edelleenkään ole kovin hyvä ratkaisu verkkosivujen ruudukon rakentamiseen. Esimerkiksi sivun pienille elementeille on jo pitkään suositeltu flexboxin käyttöä, mutta monet käyttävät edelleen float-toimintoa sivukehyksenä.

Todennäköisesti tulevaisuudessa flexbox vihdoin vakiinnuttaa asemansa uutta tekniikkaa verkkosivuston ulkoasua, joten kannattaa tutkia tämän elementin ominaisuuksia nyt.

Riisi. 2. Joustoelementtien ominaisuudet tekevät niistä joustavampia kuin lohkot.

Flexboxin etuja ovat uudet CSS-ominaisuudet, joiden avulla voit rakentaa erilaisia ​​ruudukoita ja sarakkeita ilman paljon vaivaa. Se tukee myös pystysuuntausta, jota perinteinen yksikkö ei tue.

Johtopäätös

Yksinkertaisin ja suosittu tapa Ulkoasu on nykyään edelleen lohkolähestymistapa. Joissain paikoissa taulukot ovat myös hyödyllisiä sinulle, koska taulukkotietoja on täysin hankala kirjoittaa lohkoina.

Kehykset on hylätty pitkään huono suunta rakenteen luominen, mutta iframe-tunniste Siitä voi olla hyötyä, jos sinun on yhtäkkiä lisättävä artikkeliin toinen sivusto.

Lopuksi, tänään meillä on ehdottomasti uusi tapa layout - flex-elementti ja sen ominaisuudet, jotka tekevät siitä joustavamman ja nykyaikaisemman kuin tavallinen lohko. Siinä kaikki tältä päivältä. Älä unohda lukea uusia artikkeleita blogissa tietääksesi kaiken verkkosivustojen rakentamisesta.

Nykyaikaisten verkkosivustojen luomiseen liittyy uusimpien IT-kehitysten käyttäminen Internet-resurssin ulkoasussa. Tätä tarkoitusta varten käytetään HTML- ja CSS-asettelun nykyaikaisimpia tekniikoita. Tärkeintä on ylläpitää selainten välinen yhteensopivuus ja varmistaa oikea näyttö vanhemmissa selaimissa.

Lyhenne CSS (Cascading Style Sheets) käännetään peräkkäisiksi tyylisivuiksi.

CSS-tyylisivut ovat moderni teknologia hallita verkkosivuston ulkonäköä, se laajentaa kuvauksen ominaisuuksia ulkomuoto web-sivuja ja samalla helpottaa prosessia CSS-muokkaus verkkosivusto ja sen sisällön muotoilu.

CSS luo asiakirjan ulkonäön, kun taas HTML kuvaa sen sisältöä.
CSS3:n kehittyessä myös layout-ominaisuudet kasvavat merkittävästi, mikä tarkoittaa, että joka päivä voidaan luoda lisää toimintoja "puhtaalla" CSS:llä.

Kehittäjille tähän suuntaan tämä tarjoaa standardin, jolle rakentaa. Kun luot nykyaikaisia ​​sivustoja, sinun ei enää tarvitse huolehtia siitä, että jokin selain lakkaa pian käyttämästä jotakin etuliiteensä epätyypillisistä ominaisuuksista - nyt sitä edustaa tavallinen ja se voi korvata sen.

Verkkosivuston asettelu: miksi CSS on parempi kuin JavaScript?

Kun luot asettelun CSS:n avulla, voit ratkaista suuren määrän ongelmia, tässä on vain pieni osa niistä:

• interaktiiviset galleriat;
• usean tason ponnahdusvalikot;
• kolmiulotteisten kaavioiden luominen;
• kaavion animaatio.

Mutta miksi on tarpeen käyttää CSS:ää asettelua luotaessa, jos JS voi tehdä saman ja monien jo luotujen kehitysten kanssa?

Tässä muutamia argumentteja CSS:n puolesta:

• CSS-tehosteet toimivat melkein aina nopeammin, koska vain selainmoottorit ovat vastuussa työstään. Tämä näkyy paremmin mobiililaitteissa.
• Sinun ei tarvitse osata JS:ää tai muita ohjelmointikieliä. Tavallinen tavallinen käyttäjä pystyy työskentelemään CSS:n kanssa.
• Tehdä kriittisiä virheitä CSS on paljon monimutkaisempi kuin JS.
• Ilman ohjelmointikieliä tai erikoiskirjastoja tuntematta voit nykyään suorittaa monimutkaisia ​​ja mielenkiintoisia tehtäviä CSS 3.0:ssa.
• Tällä tavalla luodulla sivustolla on mukautuva merkintä. Ja sen läsnäolo vaatii yhä enemmän asiakkaita.

Jos et ole vielä päättänyt, mistä tilaat verkkosivuston, lue seuraavat artikkelit:

• Asettelusäännöt: adaptiivinen, lohko-, css-asettelu
• Laadukas verkkosivujen ulkoasu - takuut web-studiolta "AVANZET"
• Verkkosivustojen kehittäminen - suunnitteluominaisuudet ja asetteluperiaatteet
• Yrityssivustojen luominen - suunnittelun ja ulkoasun periaatteet ja ominaisuudet
• Tehokkaan verkkosivuston luominen. Helppo navigointi on tärkeä osa käytettävyyttä

Sivun asettelu CSS-kehysten avulla

Sivun asettelun kiistaton etu CSS:n avulla puitteet on se, ettei tarvitse miettiä joitain asettelun vivahteita, esimerkiksi: yhteensopivuus selainten välillä, työskentely näytöillä eri resoluutioilla.

Kaikki tämä on jo tehty ja puitteet on luotu. Käyttäjä määrittelee vain mitä näyttää, milloin ja miten se tehdään. Kehys tekee kaiken muun sen puolesta. Tämän lähestymistavan avulla voit nopeuttaa sivun asettelua, minkä kehys tekee loistava työkalu kun luodaan verkkosivujen prototyyppejä sekä lopullisia verkkosivustoja, joiden suunnittelu on toissijaista.

Suosituin ja kannattavin kehys nykyaikaisten verkkosivustojen, selainvälisten ja standardoitujen käyttöliittymien luomiseen on Bootstrap. Yksi Bootstrapin eduista on sen suosio, jonka ansiosta toinen koodin kehittäjä voi ylläpitää koodiasi. CSS-koodin harkittu rakenne antaa sinulle loistavat mahdollisuudet luoda useita erilaisia ​​elementtejä sivuston käyttöliittymästä ja sen ruudukosta

Käsite termin "layout"

Layout on alkuperäisen asettelun nauhojen asentaminen osaelementeistä: kirjoitetusta tekstistä, otsikoista, taulukoista, kuvituksista, koristeista jne. Myös tämän prosessin tulos, eli valmiit nauhat.

Ennen tietokonetta tapahtuvaa ladontaa taitto tehtiin kirjoittamalla tekstiä manuaalisesti linotyypiin tai monotypiaan ja kliseisiin kuviin. Tekstijonot ja kuvitukset peitettiin välilyönneillä ja viivoilla. Moderni asettelu on toteutettu kuten vakioohjelmat, kuten Microsoft Word ja Ventura Publisherissa, Adobe PageMakerissa, Adobe FrameMakerissa, CorelDrawssa, Microsoft Publisherissa ja QuarkXPressissä, Adobe InDesignissa.

Asettelutyypit

Perinteisesti asettelu voidaan luokitella seuraavien kriteerien mukaan:

1. Julkaisutyypin mukaan:

Kirjan ja lehden ulkoasu

Kirja- ja aikakauslehtituotteet ymmärretään yleensä monisivuisiksi (monisivuisiksi) painetuiksi julkaisuiksi. Kirjojen ja aikakauslehtien lisäksi tähän painettujen julkaisujen ryhmään kuuluvat:

• - vuosiraportit;
• -- mainosesitteet;
• -- luettelot;
• -- taidealbumit.

Kirja- ja aikakauslehtituotteiden ammattimainen taitto on yksi julkaisun menestyksen ja suosion avaimista. Lisäksi se on melko työvoimavaltaista, huolellista, luova prosessi, jota oikeutetusti pidetään korkeimman tason asiantuntijoiden kohtalona.

Kirja- ja aikakauslehtituotteiden taitto tapahtuu sääntöjen mukaisesti kirjan asettelu. Runsaasti kuvitettujen lehtien painoa edeltävässä valmistuksessa on kuitenkin suositeltavaa käyttää erityisiä taittotekniikoita ja -menetelmiä.

Oikein asetettujen raitojen pitäisi olla ehdottomasti tarkat mitat, sekä leveys (viivamuoto) että korkeus; ei saa sisältää vääristymiä tai "laajennuksia"; Säilytä asettelun yhtenäisyys (samantyyppiset raidat sisältävät samat elementit) ja sopivuus (parillisten ja parittomien juovien yhteensopivuus kokonaismitoissa) koko julkaisun ajan. tekstisanomalehtien asettelun määritys

Kirja- ja aikakauslehtituotteiden ulkoasu jo painoa edeltävässä vaiheessa mahdollistaa näkemisen looginen rakenne ja julkaisun sivujen visuaalinen sommittelu, jakaa tekstin osat pää- ja toissijaisiin komponentteihin. Lisäksi se edistää materiaalien kompaktia järjestystä ja järkevää käyttöä hyödyllinen paperialue.

Oikein toteutettu sanoma- ja aikakauslehtien ulkoasu mahdollistaa painetun julkaisun, joka herättää huomiota ja herättää aitoa kiinnostusta Suuri määrä ihmisistä. Tällaisten tuotteiden erityispiirteitä ovat: hyvä luettavuus; selkeät ja värikkäät kuvat; huomaavaisuus ja tyylin yhtenäisyys; kaikkien kiintymystä graafisia elementtejä julkaisun konseptiin. Viime kädessä kirja- ja aikakauslehtituotteiden ulkoasu auttaa antamaan niille houkuttelevan, ilmeikkään ja mieleenpainuvan ulkonäön. Lehtien ulkoasu, erityisesti ne sisältävät iso luku kuvat, on erilliset ominaisuudet, mutta yleensä se suoritetaan samojen sääntöjen mukaan kuin kirja.

Sanomalehden ulkoasu

Sanomalehtien ulkoasu eroaa merkittävästi kirjojen ja aikakauslehtien ulkoasusta. Perus erottuva piirre sanomalehtien ulkoasu on tarve saada se valmiiksi lyhyessä ajassa, joka liittyy julkaisujen julkaisutiheyteen. Tämä määrittää eron sanomalehti- ja kirjan- ja aikakauslehtien asettelun välillä tiettyjen vaatimusten pehmentämisen suuntaan. Sanomalehden ulkoasulle on ominaista enemmän ilmaiset säännöt tekstin ja kuvamateriaalin siirrot ja järjestely.

Sanomalehti alkaa otsikkoosalla, joka voi peittää koko sivun leveyden tai osan siitä. Sen pääelementit ovat: sanomalehden nimi; jatkuva puhelu; organisaation (elimen) nimi, joka on sijoitettu sanomalehden nimeen; kalenterin tiedot ja numero. Lehden nimi on pysyvä ja se sijaitsee etusivun vasemmassa yläkulmassa tai sisään kärkilinja Etusivu. Otsikko erotetaan yleensä tekstistä lihavoidulla viivalla. Kalenteritiedot ja numero on sijoitettu lehden nimen alle tai oikeanpuoleiseen kehykseen.

Pääkirjoitus on etusivun vasemmassa yläkulmassa. Se kirjoitetaan suurimmassa muodossa ja asetetaan yhteen tai useampaan sarakkeeseen. Pääkirjoitus leikataan pois muusta materiaalista viivaimella tai kehystetään.

Valinta - aiheeseen liittyvä homogeeninen materiaali; se asetetaan useille sarakkeille ja yhdistetään yhdeksi yleinen otsikko- hattu. Kokoelmat voivat olla temaattisia ja moniteemoja. Kokoelma sisältää useimmiten pieniä informatiivisia artikkeleita (muistiinpanot, haastattelut, raportit). Valikoima on kääritty nauhan ylä- tai alaosaan ja selvästi erotettu muusta materiaalista. Useita valintoja on kehystetty. Jos kokoelmassa on paljon aineistoa, se asetetaan yleisotsikon alle.

Ikkuna - artikkeli tai kuva, suorakaiteen muotoisesti sijoitettu nauhan oikeaan yläkulmaan. Ikkuna on merkitty tekstistä alareunassa ja sivulla paksuilla viivoilla.

Lyhty - artikkeli (tai kuva), joka on asetettu nauhan keskelle tai alaosaan kahdessa tai kolmessa sarakkeessa. Tällaisen esineen korkeuden on oltava suurempi kuin sen leveys; Tuote on erotettu muusta materiaalista lihavoituilla tai kiharoilla viivoilla.

Alatunniste - artikkeli, joka on sijoitettu useisiin sarakkeisiin ja useimmiten kaikkiin sivun alareunaan. Erota alatunniste edellisestä tekstistä viivaimella; Alatunnisteen otsikko sijoitetaan useimmiten kahden tai kolmen ensimmäisen sarakkeen yläpuolelle. Kellarin korkeus saa olla enintään 1/3 ja vähintään 1/4 nauhan korkeudesta.

Riser - artikkeli, joka on asetettu kahteen tai kolmeen sarakkeeseen koko sivun korkeudelta.

Kulma - artikkeli tai kuva, joka on asetettu yhteen nauhan kulmista, lukuun ottamatta oikeaa yläkulmaa. Kulma erotetaan muusta materiaalista viivoimilla.

Ullakko - iso materiaali, samanlainen kuin kellari, mutta sijoitettu nauhan yläosaan ja peitetty nauhan tai useiden pylväiden koko leveydeltä. Se erotetaan myöhemmästä tekstistä paksuilla viivoimilla tai suljetaan kehyksiin.

Alaasettelu on materiaalia, jolla täytetään artikkelin alla oleva tyhjä tila, joka ei liity siihen temaattisesti.

Mainokset sijoitetaan yleensä viimeiselle sivulle.

Ylä- ja alatunnisteet sijoitetaan joko koko sivumuotoon tai alareunaan kulman asettelulla yhden sarakkeen muodossa: parillisilla sivuilla - ensimmäisessä sarakkeessa, parittomilla sivuilla - viimeisessä. Alatunniste sisältää sanomalehden nimen, sen numeron, päivämäärän ja sarakkeen numeron.

Näytön asettelu(näyttö tai pieni setti)

Näytön asettelu viittaa pienten itsenäisten tilausten, kuten kutsukorttien, lomakkeiden, julisteiden, mainontamoduulit. Näytön asettelu sisältää myös kirjojen ja lehtien yksittäisten elementtien asettelun: ladontakannet ja suojapaperit, otsikkosivut(otsikot), otsikot, otsikot, nimikirjaimet, ladontakehykset ja sarakerivit, kirjamainokset, aikakauslehtien otsikkosivut, sanomalehti- ja aikakauslehtimainokset, mainonta. Tämän tyyppisessä asettelussa eri fontit ja graafiset materiaalit yhdistetään yhteen muotoon.

Kaikentyyppiset esittelyteokset jaetaan yleensä kolmeen ryhmään: kustantamisen esittelytuotteet, mukaan lukien kirjojen ja lehtien esittely sekä erikoistyyppejä julkaisut - esitteet, kirjaset, luettelot ja muut; julisteita ja pienimuotoisia esittelytuotteita - kutsukortteja, lomakkeita, lähetysasiakirjoja, käyntikortteja ja monia muita "pikkuasioita".

Hei rakkaat blogisivuston lukijat. Tehtävämme tänään on luoda niin sanottu sivuston ulkoasu ei (eilisen layout) avulla, vaan Div elementtejä . Nuo. Meidän on käytettävä divs-merkkejä esimerkiksi yläosan (otsikko), alaosan (alatunnisteen) ja kolmen sarakkeen rakentamiseen.

Muuten, olemme jo ratkaisseet tämän ongelman, kun kirjoitin aiheesta.

Vaikuttaa siltä, ​​että sitä ei kannata toistaa, mutta en aio tehdä sitä. Tänään kuvaamme pohjimmiltaan erilaista verkkosivuston asettelumenetelmä ja pohtimaan samanaikaisesti myös direktiivien tarkoitusta @import ja @media(edeltäpäin) siinä, mitä olemme jo tutkineet (on perustaso tietysti) CSS-tyylinen merkintäkieli.

Verkkosivuston asettelu lohkoissa - tarvitsetko sitä?

Lisäksi sinä ja minä olemme jo onnistuneet selvittämään ja HTML-kieli luiden mukaan luottaen alkuperäiseen lähteeseen konsortion henkilössä. Luulen kuitenkin, että kaikki eivät inspiroituneet kehotuksistani ja ryntäsivät heti myös opiskelemaan.

Ja ymmärrän sinua jopa osittain. Loppujen lopuksi tieto näistä asioista ei sinänsä tuo sinulle mainetta tai vaurautta, vaan vie vain paljon aikaa, jonka voit käyttää paljon miellyttävämpään toimintaan. Aivan kuten ruokailuvälineiden käyttötaito ei takaa, että pöydälläsi on herkullista ruokaa. Kuitenkin sisään oikea hetki tästä voi olla hyötyä ja sillä voi olla tärkeä rooli.

Noin kymmenen tai kaksitoista vuotta sitten päätin opiskella HTML:ää hinnalla millä hyvänsä, mutta jäin mielestäni aivan alussa jumiin ja menetin melko nopeasti kiinnostukseni tähän ajatukseen, ja pidin mieluummin toisen ampujan jännittävää peliä tylsien aivojeni pilkkaamisen sijaan. .

Kyllä, kyllä, pelit olivat joskus harrastukseni, mutta nyt verkkosivustosta on tullut tämä harrastus, ja minulla on mahdollisuus toteuttaa joitain asioita, joita olen joskus kuvaillut. Lisäksi, analogisesti pelien kanssa, ansaitsemani setelien määrä nähdään edelleen eräänlaisina virtuaalisina pisteinä, jotka osoittavat kuinka menestyksekkäästi etenen eteenpäin.

Ilmeisesti tämä on jo väistämätön, vaikka vaimoni on viime vuosina muuttanut suhtautumistaan ​​seuraavaan harrastukseeni melko radikaalisti (sääli, että hän tarkistaa tämän artikkelin kielioppivirheiden varalta, muuten olisin kuvaillut kaikki muutokset, jotka ovat tapahtuneet tarkemmin), koska tämä blogi vastoin kaikkia hänen alkuperäisiä odotuksiaan ja epäilyksiään, se antaa todellisen tuloksen kahisevien seteleiden muodossa (lue kuinka laillisesti realisoidaan näytöllä olevat numerot yksittäisen yrittäjän käyttötilillä oleviksi numeroiksi.

Yleisesti ottaen tämä lyyrinen poikkeama Tätä ei tehty sattumalta, koska haluan sanoa, että HTML ja CSS ovat pieniä rakennuspalikoita Internet-liiketoimintasi rakentamisessa, mutta verkkosivustojen ulkoasun periaatteiden hallussapito ja ymmärtäminen antaa tietyn määrän pisteitä edellä niitä, jotka laiminlyöivät tämän tiedon. .

Verkkoprojektin kokonaismenestys riippuu usein sellaisista pienistä asioista, jotka voidaan helposti (ja usein erittäin miellyttävästi) työntää kaukaiseen nurkkaan. En vain muista yhtä asiaa - mikä sai minut ylittämään sen näkymättömän esteen, joka oli kudottu laiskuudesta ja ajattelun letargiasta. On mahdollista, että kortit vain putosivat niin. Siksi toivon sinunkin voittavan tämän esteen, mutta en voi kertoa sinulle tarkalleen, kuinka tämä tehdään.

Okei, jatketaan niillä, jotka eivät ole vaihtaneet. Kuinka rakentaa verkkosivuston ulkoasu Div-elementeillä ja tyylisäännöillä? Katsotaanpa. Luonnollisesti jäljittelemme tämän asettelun toimintaa paikallinen tietokone, yksinkertaisesti tyhjentämällä kaikki tarvitsemamme tiedostot johonkin sen kansioista. Ei isännöintiä tai . Periaatteiden ymmärtäminen on tarpeetonta.

Joten aloitetaan asettelu. Ensin luomme ja nimeämme kansion tulevan web-projektimme tiedostoille, minkä jälkeen luomme sen sisään tekstitiedoston, jonka tunniste on .html ja nimihakemisto. Luomme myös toisen tähän kansioon, jota kutsumme CSS:ksi (ulkoiset tyylitiedostomme elävät siinä).

On mahdollista lisätä toinen kansio, johon laitamme sivuston ulkoasussa käytetyt kuvat, jotka tulevat olemaan osa sitä (taustakuvat). Suosittelen ensin optimoimaan tai toisin sanoen maksimoimaan.

Kopioi nyt alla oleva "kala" index.html-tiedostoosi. Sitä on varsin kätevä käyttää koodin kanssa, mutta jos sinulla on taitoja, Dreamviewer voi olla toimivampi ratkaisu:

Ensin, kuten aina, täytyy mennä, jonka tarkoitus yksityiskohtaisemmin kuvattu linkitetyssä artikkelissa. Sisällä sisällönkuvauskenttä osoitamme sen oikean tulkinnan selaimelta, kun avaat projektimme siinä. Jokaisella asiakirjalla on oltava täytetty (sivun otsikko), joten lisäsimme sen "kaloihin".

On selvää, että sivusto on määritelmänsä mukaan sellainen, koska kaikki sen perustamisasiakirjat kuuluvat yhteen verkkotunnus vierailijoille tärkein argumentti on kuitenkin sen verkkosivujen samanlainen muotoilu, ja tämä on juuri se, mitä meidän on otettava huomioon ulkoasussa.

Siksi meillä on oltava ulkoinen tiedosto tyyleillä, joita käytetään ehdottomasti kaikilla sivuilla. Mutta tämän lisäksi voi olla myös muita CSS-tiedostot, sallien esim. eri osiot verkkoprojekti näyttää hieman erilaiselta.

Näin ollen vasemman tai oikean sarakkeen ylivuoto ei aiheuta suhteellista kasvua lohkoissa, joissa on ID vnutr ja vnesh (kelluvat elementit eivät vaikuta vanhempien tai toisin sanoen konttien pituuteen), mikä tarkoittaa, että sisältö indeksoi niiden yli. , ajaa alatunnisteen yli ja yleensä ylittää rajojen asettelun. Ongelmia.

Mutta meillä on neljäs lohkoelementti ID podporkalla, joka ei sisällä mitään sisältöä (ja siksi ei näy verkkosivulla) ja joka on tarkoitettu nimenomaan tämän tapauksen poistamiseen. Obdhiy.css-koodiin kirjoitamme yksinkertaisen säännön tälle valitsimelle. Tämän seurauksena lohko ID podporka hankkii meille hyödyllisen ominaisuuden - se ottaa huomioon kaikki sen edessä kelluvat elementit (eli koodissa korkeammalla sijaitsevat).

Että. kun lisäät oikean tai vasemman sarakkeen sisältöä, elementti ID podporka siirtyy suhteellisesti alaspäin, ja koska tämä tagi ei enää kellu, niin lohkot, joiden tunnus on vnutr ja vnesh, ottavat sen huomioon ja lisäävät suhteellisesti pystykokoaan:

Nyt kaikki näyttää toimivan oikein. Sivustomme ulkoasu ei kuitenkaan ole vielä valmis. Oletetaan, että olemme tehneet indeks.html:ssä asettelun tällä tavalla kotisivu, mutta jollekin muulle osalle asettelun ulkonäön on oltava erilainen(esimerkiksi sarakkeita ei pitäisi olla kolme, vaan vain kaksi). Kuinka päästä eroon tästä tilanteesta?

On selvää, että tätä tarkoitusta varten sinun on käytettävä muuta tiedostoa kuin index.html. Tätä varten indeksin.html sisältö voidaan kopioida uuteen tiedostoon, esimerkiksi razdel.html, koska On helpompi muokata olemassa olevaa koodia kuin kirjoittaa se uudelleen.

No, tiedosto taulukoineen peräkkäiset tyylit meidän on käytettävä uutta, esimerkiksi razdel.css. Juuri niissä teemme muutoksia, ja samalla tarkastelemme tarkemmin, kuinka tarkalleen käytä @import-direktiiviä niissä tapauksissa.

Aloitetaan osoitteesta razdel.html:

...

Olemme muuttaneet otsikkoa Otsikkosivut ja muutti mukana tulleen tyylitiedoston nimeksi razdel.css. Tässä tapauksessa on luonnollisesti tarpeen luoda saman tyylinen merkintätiedosto CSS-kansioon. Uskallan muistuttaa, että indeks.html:lle liitimme tyylimerkinnät osnovnoy.css:n kautta, joka sisälsi yhden @import-käskyn sääntöjen lataamiseen obdhiy.css-tiedostosta:

@import url(obdhiy.css);

Emme ole alkuperäisiä älykilometreissämme ja aivan uuden (vielä tyhjä) alussa tyylitiedosto Kirjoitetaan täsmälleen sama ohje. Siten saamme jälleen kolmen sarakkeen asettelun, mutta lisäämällä vain muutama sääntö hieman myöhemmin, voimme helposti muuttaa sen kaksisarakkeiseksi. Ei edes sitä. Luomme CSS-kansioon toisen tiedoston nimeltä dvekolonki.css ja seuraavan sisällön:

#oikea ( display:none; ) #center ( margin-right:0; ) #vnesh ( taustakuva: ei mitään; )

Mitä me olemme tehneet? Olemme kieltäneet näyttämisen oikea sarake Web-sivuille käyttämällä . Poistimme myös marginaali oikealla keskipylvääseen, koska sitä ei enää tarvita. Lopuksi, me kielsimme esityksen taustakuva kaikki samassa oikeassa sarakkeessa. Yleensä tuhosimme tämän oikean sarakkeen kokonaan osioasettelussamme.

No, nyt täydentääksesi kahden sarakkeen asettelun asettelua, ei tarvitse muuta kuin sisällyttää tämä sama dvekolonki.css razdel.css-tiedostoon, jonka lopullinen sisältö näyttää nyt tältä:

@import url(obdhiy.css); @import url(dvekolonki.css);

Kaikilla alla olevan koodin säännöillä (osoitteesta dvekolonki.css) on korkeampi prioriteetti, mikä tarkoittaa, että tarkkailemme heidän toimintaansa verkkosivulla. Tämän seurauksena, kun avaat razdel.html:n, näet jo kaksisarakkeen asettelun:

Itse asiassa lisätehtävämme oli vaihtoehtojen pohtiminen käyttämällä @import-direktiiviä moderni asettelu sivustoja, jonka mielestäni onnistuimme.

Nyt on vielä osoitettava @media-direktiivin toiminta, jonka mainitsin artikkelin alussa. Sillä on hyvin epäsuora yhteys ulkoasuun, mutta silti olisi luultavasti lyhytnäköistä olla puhumatta siitä.

Tulostusasettelu @media-direktiivin avulla

@media-direktiivi ei ehkä ole hyödyllinen sinulle, vaan lukijoillesi, jotka haluavat tulostaa verkkosivun ilman graafisia röyhelöitä ja tarpeetonta tietoa. Käyttäjät tarvitsevat vain keskisarakkeessa olevan sisällön. Se ei tarvitse otsikkoa, alatunnistetta, vasenta tai oikeaa saraketta – vain artikkelin tekstiä.

klo esikatselu tulosta missä tahansa nykyaikaiset selaimet Voit tietysti poistaa taustatulostuksen käytöstä, ts. värisuunnittelu, mutta selain ei aina pysty erottamaan vehnää (sisältöä) akanoista (navigointi) yksinään, joten meidän on autettava häntä tässä, jotta emme toivo sattumaa.

Lisäksi tulostettaessa katoaa tärkein asia, joka tekee Internetistä niin suositun - kyky seurata hyperlinkkejä muille sivuille. Paperilla kaikki on sinun hyperlinkeistä tulee täysin epätietoisia, jos tästä ei huolehdita etukäteen. Lisätään hyperlinkkejä kolmen sarakkeen asetteluun ja katsotaan miltä se näyttää, kun yritämme tulostaa verkkosivun.

Näin ollen käyttäjä, joka tulostaa tällaisen verkkosivun, ei koskaan tiedä, mikä blogi on paras. Joten olkaamme kiireisiä tulostuksen asettelun vivahteet, ja jo mainittu @media-direktiivi auttaa meitä tässä.

On kaksi tapaa määrittää median avulla, mihin laitteeseen näitä tyylejä tulee käyttää. Voit määrittää mediaattribuutin Link-tunnisteessa, jota käytetään ulkoisten tyylitiedostojen yhdistämiseen. Mutta tässä tapauksessa selain tekee ylimääräisen pyynnön palvelimelle, mikä ei ole hyvä. Tällä menetelmällä on kuitenkin oikeus elämään ja tämä häpeä näyttää suunnilleen tältä:

Media-attribuutilla Muita arvoja voidaan käyttää:

1. kaikki on oletusarvoa ja tarkoittaa sitä Tämä tiedosto tyylejä on käytettävä ehdottomasti kaikissa tulostuslaitteissa
2. pistekirjoitus - sormilukulaitteet (sokeille tai näkövammaisille)
3. kämmentietokoneet - PDA:t, älypuhelimet ja muut pienet esineet
4. tulostaa - tulostimet
5. näyttö — käyttäjien näyttöruudut, joilla he näkevät sivustosi
6. puhe - puheselaimet
7. projektio - projektorit
8. tty - teletypewriters ja muu roskaposti, jossa ei voi käyttää pikselimittoja
9. tv - vanha kunnon televisio

Yllä annetussa esimerkissä me, käyttämällä Media-attribuuttia, muodostamme yhteyden verkkodokumenttiin erillinen tiedosto tyylit näytöllä näyttämistä varten ja erillinen tulostusta varten (print.css). Juuri tämä meidän täytyy toteuttaa tässä taittotunnissa, mutta se olisi parempi tehdä hieman eri tavalla tyylitiedostoon kirjoitetun @media-direktiivin avulla.

Jos huomasit, tällä valitsemamme asettelumenetelmällä (käyttäen @import) meillä on yhteinen tyylitiedosto, joka on aina yhdistetty juuri tämän käskyn kautta - obdhiy.css. Tästä alamme loihtimaan.

@medialla on oma syntaksi:

@medianäyttö, tv (joukko valitsimia ja sääntöjä, jotka suoritetaan vain, jos verkkosivu tulostetaan yllä määritetyille laitteille pilkuilla erotettuna)

Emme sisällytä obdhiy.css-tiedostoomme kaikkia olemassa olevia @media screen -direktiivin sääntöjä, riittää, kun lisäät vaadittu CSS säännöt asiakirjan tulostamisesta käyttämällä @mediatulostus:

@media print( *( color:#000 !tärkeää; tausta:läpinäkyvä !tärkeää; ) html ( font:10pt serif; ) #footer, #header, #left, #right ( display:none; ) #center ( margin: 0; ) a:after( content:" (" attr(href) ")"; ) )

Jos muistat, valitsin * tarkoittaa kaikkien näiden tyylisääntöjen soveltamista ehdottomasti kaikkiin elementteihin HTML-koodi. Totta, tällaisella valitsimella on pienin mahdollinen prioriteetti, joten asettamalla kaikkien elementtien värin mustaksi ja taustan läpinäkyväksi käyttämällä väri- ja taustasääntöjä, joudumme välttämään prioriteettien laskemista asetuksen avulla.

Html-valitsimelle määritimme oletusfontin muodossa , koska se on selkeämpi tulostimelle. No, fontiksi asetettiin mikä tahansa serif (serif). Display:none-toiminnolla estimme body-sarjan (otsikko, alatunniste ja sarakkeet) näyttämisen ja marginaali:0:lla annoimme keskimmäisen sarakkeen sisällön peittää kaiken. vapaata tilaa leveydessä.

Viimeinen valitsin a:jälkeen on hankala ja ymmärtääksesi paremmin, mistä hän tarkalleen ottaen puhuu, neuvon sinua käymään läpi seuraavat julkaisut noin () ja . Mutta tarvitsemme sitä melko yksinkertaiseen tarkoitukseen - Katso paperilla, mihin hyperlinkit johtavat.

After-pseudo-elementti mahdollistaa sisällön luomisen, kun selain rakentaa dokumenttia. Jälkeen antaa meille mahdollisuuden lisätä URL-osoite hyperlinkkejä heti sen paikan jälkeen, johon tämä linkki on sijoitettu. Tämä tehdään käyttämällä erityistä CSS-säännöt sisältö, joka toimii vain kahdelle pseudoelementille: after and before.

Suunnitellaksesi verkkosivustoja ammattimaisesti, sinun on tiedettävä paitsi CSS:n perusteet, mutta ymmärrät myös selaimen toiminnan, tunnet sen noudattamat säännöt. He määrittävät asettelun tärkeimmät menetelmät ja tekniikat.

Vain tällä ymmärryksellä voit valita eniten sopiva tapa ratkaista ongelma useista mahdollisista niiden edut ja rajoitukset huomioon ottaen. Tämä on ainoa tapa hyödyntää selaimen ominaisuuksia ja estää mahdolliset virheet.

Eri tekniikoista on monia kuvauksia. Tämä artikkeli yrittää koota yhteen tärkeimmät tekniikat ja systematisoida ne antamaan käsityksen sekä tärkeimmistä ominaisuuksista että CSS-rajoitukset, tällä hetkellä ajankohtainen.

Artikkeli on tarkoitettu ihmisille, jotka tuntevat HTML:n perusteet ja CSS ja sinulla on käsitys perusominaisuuksista ja perusperiaatteet tehdä työtä kaskadipöydät tyylejä.

Pöytä

Historiallisesti ensimmäinen ja ainoa tapa asetella sivu oli taulukoiden kautta. Kokonainen luku CSS 2.1 -spesifikaatiossa on omistettu taulukoiden toiminnan kuvaamiselle. Tästä määrästä huolimatta jotkin kohdat on kuvattu harvakseltaan tai ei ollenkaan, ja ne jätetään selaimien harkinnan varaan.

Hyödyt ja haitat

Taulukon avulla näytetään järjestetyt tiedot riveissä ja sarakkeissa, joilla on semanttinen yhteys vaaka- tai pystysuunnassa. Tämä johtaa tärkeimpään etuun: taulukon solut on kohdistettu ruudukkoon, jonka avulla voit luoda yksinkertaisella ja ilmeisellä tavalla modulaarinen verkko.

Tämän taulukoille ominaisen ominaisuuden avulla voit täyttää selainikkunan tason ja luoda "sujuvia sivustoja". Mutta niin pienille kuin suuret koot selainikkunassa taulukon rakenne ei muutu, se ei voi mukautua joustavasti käytettävissä olevaan tilaan.

Kun asetteluun käytetään taulukkoa, eli sijoitetaan tietoja ruudukkoon, jolla ei ole semanttista yhteyttä, semantiikkaa rikotaan. Tällaisten pöytien käyttö heikentää käytettävyyttä erityisiä ohjelmia, ja vähentää asemaa Hakutulokset, koska hakukone, oletettavasti sivun rakennetta on vaikeampi ymmärtää. Tämän seurauksena sivusto toimii vähemmän tehokkaasti.

Erikoisuudet

Taulukon solut näkyvät koodissa tiukasti peräkkäin, vasemmalta oikealle tai oikealta vasemmalle, riippuen kielen suunnasta, joka on määritetty suunta CSS-ominaisuuden tai sen analogin HTML:ssä, dir-attribuutilla.

Jos esimerkiksi haluat HTML-lähteen keskisarakkeen pääsisällön olevan ensin muiden sarakkeiden sisällön edelle, taulukko ei ole sopiva ratkaisu.

Taulukon rakenne on melko monimutkainen, se kuvataan iso määrä tunnisteita, mikä johtaa monimutkaisuuteen lähdekoodi. Negatiivinen vaikutus on vielä suurempi, kun useita taulukoita on sisäkkäin.

Jäljitelmä

CSS 2.1:ssä käyttöön otettu näyttö: table-* -ominaisuusryhmä mahdollistaa taulukon luomisen mielivaltaisista elementeistä, joilla on sopiva rakenne.

Määrityksen mukaan riittää vain yksi ilmoitus, kuten näyttö: taulukko tai näyttö: taulukko-solu - selaimen tulee täydentää puuttuvat elementit automaattisesti.

Olisi kuitenkin turvallisempaa luoda vähimmäistaulukko > rivi > solurakenne, joka on samanlainen kuin vaaditut tagit

, , HTML:ssä selain luo tämän elementin ehdottomasti, ellei asiakirjaa ole renderöity XHTML-tilassa, ryhmittelyelementtien puuttuessa , Ja . Tätä voidaan käyttää suunnittelussa, ja se tulee ehdottomasti pitää mielessä, kun käytetään ylävalitsinta, jossa voi olla merkintä kuten table > tbody > tr > td . Taulukko > tr > td -valitsin ei toimi.

Anonyymit elementit, joissa on näyttö: table-* , jotka luovat uudelleen CSS 2.1 -taulukkorakenteen, eivät vaikuta elementtipuuhun. Niille ei voida antaa CSS-sääntöjä, vain perityt ominaisuudet ovat voimassa.

Semantiikka

On väite, että display: table -sovelluksen käyttö on semanttisempaa, koska se käyttää tageja, jotka vastaavat paremmin sisältöä, ja tämä auttaa erilaisia ​​moottoreita sivujen käsittelyssä. Näytönlukuohjelmat mainitaan usein esimerkkeinä.

, vastaavilla näyttöominaisuuksilla: table , table-row ja table-cell . Muussa tapauksessa saatat kohdata Firefox- ja Webkit-pohjaisissa selaimissa havaitun ajoittaisen virheen, kun taulukon rivillä ei ole elementtiä, jossa on display: table-cell satunnaisesti on jaettu useisiin soluihin. Mahdollinen selitys voisi olla se, että raja osuu verkkopaketteja solujen kesken HTML-koodia välitettäessä. Näin ollen lohkomerkinnät näytöllä: table-* ei juuri eroa tavallisesta HTML-taulukosta millään muulla kuin tagin nimillä, mutta selaimet tukevat tavallista taulukkoa paremmin (eli Internet Explorer 7 ja alla) ja siinä on enemmän ominaisuuksia, kuten solujen yhdistäminen. On syytä huomata, että valinnaisesta tunnisteesta huolimatta