Seuraavaa projektia asetettaessa (tai vain asetteluruudukkoa suunniteltaessa) monet kohtasivat ongelman - käyttääkö kiinteää asettelun leveyttä tai selainikkunan kokoon mukautuvaa "kumi"-ruudukkoa.

Jokaisella näistä ratkaisuista on omat hyvät ja huonot puolensa, haluan keskittyä miinuksiin, koska yleensä juuri näiden päätösten miinuksia heijastaessa on valittava kahdesta pahasta.

Asetteluruudukon kiinteä leveys Asettelu pakotetaan 960-980 pikselin vaakasuoraan mittaan (joten kaikki on mukana useimmissa laitteissa useimmissa resoluutioissa), mikä suurella vaakasuuntaisella ikkunakoolla näyttää jotenkin kylmältä - ohut pystysuora kaistale hyödyllistä sivua sisältö ja valtavat hyödyttömät käyttämättömän tilan kentät sivuilla. "Kumi"-asetteluruudukko ikkunan leveydellä. Jälleen suurilla vaakasuuntaisilla ikkunoilla on toinen ongelma: tekstirivit tulevat hyvin pitkiksi ja niiden lukeminen ei ollenkaan niin mukavaa kuin haluaisimme.
Toinen yleinen ongelma tässä ratkaisussa on, että sivumarginaalit suurilla vaakakokoisilla ikkunoilla eivät enää ole visuaalisesti yhdenmukaisia ​​elementtien vaakasuuntaisten mittojen kanssa, mikä ei myöskään lisää mukavuutta layoutta tarkasteltaessa.

Haluaisin ehdottaa yksinkertaista ratkaisua - rajoittaa vaakasuuntainen vähimmäiskoko kiinteään arvoon pikseleinä ja tehdä maksimi suhteellinen prosentteina ikkunan leveydestä. Tämä on hyvin triviaali ratkaisu yksinkertaisin keinoin 2 muuta versiota CSS-spesifikaatiosta.

Päivitys: Haluaisin tehdä varauksen, että emme puhu klassisesta kumiefektistä ja sopeutumisesta ehdottomasti kaikkiin resoluutioihin, vaan vain tietystä kohtuullisesta resoluutiosta, jota varten asettelu on suunniteltu. Alla olevissa esimerkeissä tämä on klassinen työpöydän tarkkuusalue, jonka vaakasuuntainen resoluutio on 1024 pikseliä.

Korostan vielä kerran: Viesti ei puhu ratkaisusta kaikentyyppisille laitteille ja kaikille resoluutioalueille. Tätä ongelmaa ei periaatteessa voida ratkaista yhden asettelun puitteissa., sen ratkaiseminen tavalla tai toisella vaatii useita asetteluja. Perhot erikseen, kotletit erikseen.

Luo asettelusäilö:
... ...
Koristelemme sen yksinkertaisella tyylikoodilla:
div.page-container ( minimileveys: 960 kuvapistettä; enimmäisleveys: 75 %; marginaali: 0 automaattinen; täyte: 0; )
Tämä ratkaisu saattaa kuitenkin tuntua joillekin riittämättömältä, koska erittäin suurilla vaakasuuntaisilla ikkunoilla ilmenee jälleen ongelmia rivinpituuksissa. Tämä voidaan ratkaista yhtä yksinkertaisella lisätekniikalla: luomalla ylimääräinen ulkosäiliö jo kuvatun sisään ja rajoittamalla sen enimmäisleveyttä kiinteään arvoon (subjektiivisesti minusta näyttää siltä, ​​​​että arvot alueella 1400-1600 pikseliä ovat parhaiten soveltuvat). Jälleen käytämme vain CSS-työkalut 2.0. Tämä ratkaisu on ensimmäisessä kommentissa ehdotetun sijaan yksinkertainen lisäys leveys prosentteina alkuperäiselle säilölle toimii myös IE:ssä, joka versioon 9 asti ei ymmärrä samanaikaista arvojen ilmoittamista.

HTML:n lisääminen:
... ...
Ja muuta CSS:ää hieman:
div.page-container ( max-width: 75%; min-width: 960px; margin: 0 auto; täyttö: 0; ) div.page-container-inner ( min-width: 960px; max-width: 1600px; margin : 0 automaattinen; pehmuste: 0;)
Kuten näette, ratkaisu on äärimmäisen yksinkertainen ja melko universaali, sillä sitä voidaan käyttää mihin tahansa lohkoelementtiin.

Seuraavaa projektia asetettaessa (tai vain asetteluruudukkoa suunniteltaessa) monet kohtasivat ongelman - käyttääkö kiinteää asettelun leveyttä tai selainikkunan kokoon mukautuvaa "kumi"-ruudukkoa.

Jokaisella näistä ratkaisuista on omat hyvät ja huonot puolensa, haluan keskittyä miinuksiin, koska yleensä juuri näiden päätösten miinuksia heijastaessa on valittava kahdesta pahasta.

Asetteluruudukon kiinteä leveys Asettelu pakotetaan 960-980 pikselin vaakasuoraan mittaan (joten kaikki on mukana useimmissa laitteissa useimmissa resoluutioissa), mikä suurella vaakasuuntaisella ikkunakoolla näyttää jotenkin kylmältä - ohut pystysuora kaistale hyödyllistä sivua sisältö ja valtavat hyödyttömät käyttämättömän tilan kentät sivuilla. "Kumi"-asetteluruudukko ikkunan leveydellä. Jälleen suurilla vaakasuuntaisilla ikkunoilla on toinen ongelma: tekstirivit tulevat hyvin pitkiksi ja niiden lukeminen ei ollenkaan niin mukavaa kuin haluaisimme.
Toinen yleinen ongelma tässä ratkaisussa on, että sivumarginaalit suurilla vaakakokoisilla ikkunoilla eivät enää ole visuaalisesti yhdenmukaisia ​​elementtien vaakasuuntaisten mittojen kanssa, mikä ei myöskään lisää mukavuutta layoutta tarkasteltaessa.

Haluaisin ehdottaa yksinkertaista ratkaisua - rajoittaa vaakasuuntainen vähimmäiskoko kiinteään arvoon pikseleinä ja tehdä maksimi suhteellinen prosentteina ikkunan leveydestä. Tämä on hyvin triviaalisti ratkaistu yksinkertaisella tavalla kahdella muulla CSS-spesifikaatioversiolla.

Päivitys: Haluaisin tehdä varauksen, että emme puhu klassisesta kumiefektistä ja sopeutumisesta ehdottomasti kaikkiin resoluutioihin, vaan vain tietystä kohtuullisesta resoluutiosta, jota varten asettelu on suunniteltu. Alla olevissa esimerkeissä tämä on klassinen työpöydän tarkkuusalue, jonka vaakasuuntainen resoluutio on 1024 pikseliä.

Korostan vielä kerran: Viesti ei puhu ratkaisusta kaikentyyppisille laitteille ja kaikille resoluutioalueille. Tätä ongelmaa ei periaatteessa voida ratkaista yhden asettelun puitteissa., sen ratkaiseminen tavalla tai toisella vaatii useita asetteluja. Perhot erikseen, kotletit erikseen.

Luo asettelusäilö:
... ...
Koristelemme sen yksinkertaisella tyylikoodilla:
div.page-container ( minimileveys: 960 kuvapistettä; enimmäisleveys: 75 %; marginaali: 0 automaattinen; täyte: 0; )
Tämä ratkaisu saattaa kuitenkin tuntua joillekin riittämättömältä, koska erittäin suurilla vaakasuuntaisilla ikkunoilla ilmenee jälleen ongelmia rivinpituuksissa. Tämä voidaan ratkaista yhtä yksinkertaisella lisätekniikalla: luomalla ylimääräinen ulkosäiliö jo kuvatun sisään ja rajoittamalla sen enimmäisleveyttä kiinteään arvoon (subjektiivisesti minusta näyttää siltä, ​​​​että arvot alueella 1400-1600 pikseliä ovat parhaiten soveltuvat). Käytämme jälleen vain CSS 2.0 -työkaluja. Tämä ratkaisu sen sijaan, että lisättäisiin yksinkertaisesti alkuperäisen säilön leveys prosentteina, kuten ensimmäisessä kommentissa ehdotettiin, toimii myös IE:ssä, joka versioon 9 asti ei ymmärrä arvojen samanaikaista ilmoittamista.

HTML:n lisääminen:
... ...
Ja muuta CSS:ää hieman:
div.page-container ( max-width: 75%; min-width: 960px; margin: 0 auto; täyttö: 0; ) div.page-container-inner ( min-width: 960px; max-width: 1600px; margin : 0 automaattinen; pehmuste: 0;)
Kuten näette, ratkaisu on äärimmäisen yksinkertainen ja melko universaali, sillä sitä voidaan käyttää mihin tahansa lohkoelementtiin.

Kirjoittajalta: tervehdys rakkaat blogini lukijat! Varmasti monet teistä ovat jo kuulleet legendoja lohikäärmeistä, joulupukista ja käsittämättömästä pedosta nimeltä kumiverkkosuunnittelu, joka pystyy muuttamaan muotoaan. John Tolkienin käsikirjoitukset kertovat sinulle ensimmäisestä hahmosta, vanhemmat kertovat sinulle toisesta, mutta otan itselleni tiedot kolmannesta. Huolimatta siitä, kuinka oudolta se kuulostaakin, yritän tässä artikkelissa pureskella kumiverkkosuunnittelua ja puhua sen eduista ja haitoista.

Verkkovastaavan tulee ennen kaikkea ohjata verkkosivustoa kehittäessään projektin tavoitteita. Jos asiakkaalle on tärkeää, että verkkosivu voidaan sovittaa mihin tahansa näyttöruutuun, niin tästä eteenpäin apua tulee kumi (mukautuva) muotoilu.

Tämä muoto sai nimensä, koska sen leveys ei ole asetettu pikseleinä, vaan prosentteina. Sen avulla sivu avautuu koko näytön näytölle resoluutiosta riippumatta.

Jotta urasi web-suunnittelijana kehittyisi nopeasti, on välttämätöntä tutkia tätä suuntaa. Monet asiakkaat, joilla on jo koottu kanta-asiakaskunta, ovat erityisen vaativia tässä vaiheessa, koska he haluavat tarjota käyttäjilleen maksimaalista mukavuutta.

Fluid Web Designin synty

Mielenkiintoisena havainnona voidaan todeta, että maassamme asiantuntijat alkoivat havaita "kumi"-verkkosuunnittelua positiivisesta näkökulmasta aikaisemmin kuin lännessä. Tosiasia on, että verkkosuunnan syntyessä se tuli tälle alueelle suuri määrä kapeakatseiset tulostimet.

Ulkomaiset asiantuntijat eivät yksinkertaisesti ymmärtäneet mahdollisuutta luoda ei-kiinteitä graafista kehitystä. Mutta käsitteet "web" ja "design" tulivat meille melkein yhtäläisesti, minkä seurauksena kehittäjät pitivät tällaista kuvan visuaalista joustavuutta tavallisena luovana vapautena.

Ovatko sujuva ja reagoiva web-suunnittelu sama asia?

Ihmiset sekoittavat usein nämä kaksi käsitettä, mutta ne eivät kuitenkaan ole puhtaita synonyymejä toisilleen. Responsiiviseen web-suunnitteluun kuuluu työskentely erilaisten verkkosivustojen asettelujen kanssa, jotta voidaan luoda mahdollisimman helppokäyttöinen käyttö kaikentyyppisillä laitteilla, ottaen huomioon kaikenlaiset näytön resoluutiot.

Se säätää "kohtuullisesti" kokonaiskuvan näytölle riippuen laitteen näytön koosta. No, sujuva suunnittelu on itse asiassa yksi mukautuvan web-suunnittelun elementeistä. Se puolestaan ​​tekee vain muutoksia verkkosivun mittasuhteisiin.

Näin ollen voimme päätellä, että responsiivinen web-suunnittelu on yhdistelmä kumia ja muita progressiivisia parannuksia. Vaikka ystävällisistä määritelmistä johtuen, sekaannusta voi joskus syntyä. Erityisen epämiellyttävää on, kun asiasta syntyy erimielisyyksiä asiakkaan kanssa, joten ole varovainen ja selvitä aina, mitä asiakas tarkoitti puhuessaan sivuston kumisuunnittelusta.

Fluid Web Designin edut

Kumi-css-suunnittelulla voit suunnitella web-sivun, joka täyttää kaiken Vapaa tila selain näytön koosta riippumatta. Jos käyttöoikeuksiin liittyviin asetuksiin tehdään muutoksia, koko sivuston rakenne mukautuu uudelleen päivitettyihin ehtoihin. Ihmeitä ja taikuutta, eikö niin?

Tämä ominaisuus varmistaa, että verkkosivu täyttää kokonaan selainikkunan riippumatta siitä, näkyykö kuva pienessä HTC:ssä vai 20 tuumassa laajakuvanäyttö. Tämä on juuri kumirakenteen tärkein etu.

Käyttäjillä, joilla on pienet näytöt, ei ole ongelmia vaakasuuntaiset raidat vierittää, mutta joskus ne häiritsevät suurten laajakuvamuotojen omistajia. Näin ollen tässä suhteessa jälkimmäinen voi nauttia kuvasta täysin, koska koko näyttöalue käytetään tehokkaasti.

Jos harkitsemme kysymystä siitä, mille sivustoille kumiverkkosuunnittelu sopii, kaikki riippuu jälleen asiakkaan tavoitteista. Tämä visuaalinen joustavuus näyttää hyvältä niillä sivustoilla, joissa sijoittelu yhdelle verkkosivulle on etusijalla enimmäismäärä sisältö ja esteettiset standardit jäävät taustalle.

Tältä pohjalta kumiverkkosuunnittelua käytetään laajasti uutisportaalien, blogien ja kaikenlaisten tietosivustojen luomisessa. Näissä tapauksissa sen käyttö on tarkoituksenmukaisinta.

Moderneja suuntauksia ja lähestymistapoja verkkokehitykseen

Opi nopean kasvun algoritmi alusta alkaen verkkosivustojen rakentamisessa

Fluid Web Designin haitat

sitä paitsi positiivisia kohtia, tällaisella web-suunnittelulla on myös joitain erityisiä haittoja. Yksi niistä on, että itse asiassa sivun "automaattisen säätämisen" tiettyihin näytön tarkkuusolosuhteisiin lopputulos on arvaamaton. Jonkin verran graafisia elementtejä sivustolla voivat yhtäkkiä joutua eri paikkaan, koska naapurikollegot ovat siirtäneet heidät syrjään.

Toinen tällaisen "kumin" haittapuoli on se, että sivun lataaminen sillä voi kasvaa 2–3 kertaa normaaliin kestoon verrattuna. Tämä johtuu siitä, että jotkut selaimet ovat nirsoja sivuasettelujen suhteen. tästä formaatista. He kamppailevat muuttuvan leveyden elementtien näyttämisen kanssa, mikä lisää myös visuaalisten virheiden riskiä.

Esimerkkejä sujuvasta ja reagoivasta web-suunnittelusta

Selvyyden vuoksi haluan näyttää sinulle muutaman onnistuneita esimerkkejä kumia ja mukautuvaa mallia tarpeeksi menestyneitä kehittäjiä.

1. http://www.simplebits.com/

Katsotaanpa ensin yhdysvaltalaisen bloggaajan kumisivustoa, joka on samanaikaisesti mukana web-kehityksessä. Sivuston täysi versio:

mobiiliversio verkkosivusto:

Kuten näette, tässä tapauksessa kuva on säädetty vain laitteen koon mukaan ja yleinen rakenne sivusto pysyy ennallaan.

2. http://www.fork-cms.com/

Nyt ehdotan, että tutustut verkkosivustoon, joka mukautuu tietty laite ja koostaan ​​riippuen rakentaa kokonaan uudelleen oman rakenteensa. Sivuston täysi versio:

Sivuston mobiiliversio:

Se siitä. Toivon, että tämän päivän materiaali oli mielenkiintoista, etkä hukannut aikaasi. Jos näin on, jätä kommentteja tästä asiasta ja jaa oma mielipiteesi. Arvostan sekä positiivista palautetta että asiantuntijoiden mielipiteitä web design 2.0 -mestareilta. Tilaa blogi, jotta et menetä muita mielenkiintoisia ja hyödyllistä tietoa.

Siinä kaikki minulle, nähdään pian!

Nykyaikaiset trendit ja lähestymistavat verkkokehitykseen

Opi nopean kasvun algoritmi alusta alkaen verkkosivustojen rakentamisessa

Vlad Merževitš

Kolmisarakkeinen nesteasettelu on kenties joustavin ja mukautetuin käytettävissä oleva asettelu. Prosenttiosuuksien ja pikselien yhdistelmä sarakkeiden leveyden määrittämiseksi antaa sinun luoda erilaisia ​​asetteluja ja valita ne tarpeidesi mukaan. Kuvassa 5.17 näyttää vaihtoehtoja kolmen sarakkeen asetteluille; mukavuuden vuoksi ne on numeroitu.

Riisi. 5.17. Kolme sarakkeen asettelua

Tässä prosenttisymboli (%) tarkoittaa, että sarakkeen leveys on määritetty prosenttiosuutena asettelun leveydestä, px - sarakkeen leveys on määritetty pikseleinä ja ääretön merkki (∞), että sarake vie jäljellä olevan tilan. Erilaisten asettelujen runsaudesta huolimatta niiden rakentamisen periaatteet pysyvät samoina ja sisältävät kaksi päämenetelmää: paikannus- ja kelluvat elementit. Voit myös luoda samankorkuisia sarakkeita taulukoiden avulla.

Paikantamisen käyttäminen

Tasojen sijainnin ohjaamiseksi suhteessa pääelementti vanhemman on määritettävä aseman omaisuutta arvolla suhteellinen , ja lapsielementtejä, jotka muodostavat sarakkeet, arvo on absoluuttinen . Neljän ensimmäisen asettelun koodirakenne on sama ja se on esitetty esimerkissä 5.13.

Esimerkki 5.13. Kaksi saraketta pikseleinä tai kolme prosentteina

Kolme saraketta Sivuston otsikko Sarake 1 Sarake 2 Sarake 3

Tässä sarakkeet on numeroitu järjestyksessä, ts. Sarake 1 on vasemmalla, sarake 2 on keskellä ja sarake 3 on oikealla.

Paikannus on tietty haitta, joka rajoittaa tämän menetelmän käyttöä - kun alatunnistetta lisätään, se piilotetaan sarakkeiden alle. Tämä johtuu siitä, että asettelutasolla ei ole korkeutta sinänsä, joten se ei paina alatunnistetasoa alas. Jos alatunniste on sivulle ehdottoman pakollinen, kannattaa käyttää kelluviin elementteihin perustuvaa sarakkeen rakennusmenetelmää. Tämä menetelmä ei myöskään toimi IE6:ssa sen virheiden vuoksi.

Asettelussa nro 1, jossa ensimmäisen sarakkeen leveys on kumia ja loput kiinteät, tyyli on seuraava (esimerkki 5.14).

Esimerkki 5.14. Asettelu nro 1

Otsikko ( tausta: #D5BAE4; ) .layout ( sijainti: suhteellinen; /* Suhteellinen sijainti */ ) .layout DIV ( sijainti: absoluuttinen; /* Absoluuttinen paikannus */ ) .col1 ( tausta: #C7E3E4; /* Taustaväri * / vasen: 0; /* Vasemman reunan sijainti */ oikea: 300px; /* Oikean reunan sijainti */ ) .col2 ( tausta: #E0D2C7; leveys: 200px; /* Sarakkeen leveys */ oikea: 100px; /* Siirrä vasemmalle sarakkeen leveyden mukaan 3 */ ) .col3 ( tausta: #ECD5DE; leveys: 100px; oikea: 0; )

Tietyn leveyden omaavilla sarakkeilla on leveysominaisuus, ja niiden sijainti vasemmalla tai oikealla määritetään vastaavasti vasemmalla tai oikealla. Jäljellä olevan sarakkeen kumileveys muodostetaan lisäämällä samanaikaisesti vasen ja oikea , joiden arvot ovat samat kuin kiinteiden sarakkeiden leveys.

Layout nro 2 (esimerkki 5.15) ja nro 3 (esimerkki 5.16) on rakennettu samalla periaatteella.

Esimerkki 5.15. Asettelu nro 2

Otsikko ( tausta: #D5BAE4; ) .layout ( sijainti: suhteellinen; ) .layout DIV ( sijainti: absoluuttinen; ) .col1 ( tausta: #C7E3E4; leveys: 100px; ) .col2 ( tausta: #E0D2C7; vasen: 100px; oikea: 200px;).col3 ( tausta: #ECD5DE; leveys: 200px; oikea: 0; )

Esimerkki 5.16. Asettelu nro 3

Otsikko ( tausta: #D5BAE4; ) .layout ( sijainti: suhteellinen; ) .layout DIV ( sijainti: absoluuttinen; ) .col1 ( tausta: #C7E3E4; leveys: 100px; ) .col2 ( tausta: #E0D2C7; leveys: 200px; vasen: 100px; ) .col3 ( tausta: #ECD5DE; vasen: 300px; oikea: 0; )

Asettelussa nro 4, jossa kaikkien sarakkeiden leveys on asetettu prosentteina, on joitain vivahteita. Jos kaikkien sarakkeiden leveys on sama, se voidaan asettaa murto-osaan (33,33%), mutta Opera selain ei voi toimia murto-osien prosenttiarvojen kanssa, joten sarakkeiden väliin tulee "reikiä" (kuva 5.18).

Riisi. 5.18. Sarakkeen leveys on määritetty murto-osuuksina

Tällaisissa tilanteissa kannattaa vaihtaa eriarvoisiin osuuksiin, esimerkiksi 33%, 34%, 33%, kuten esimerkissä 5.17 näkyy.

Esimerkki 5.17. Asettelu nro 4

Otsikko ( tausta: #D5BAE4; ) .layout ( sijainti: suhteellinen; ) .layout DIV ( sijainti: absoluuttinen; ) .col1 ( tausta: #C7E3E4; leveys: 33%; ) .col2 ( tausta: #E0D2C7; vasen: 33 %; leveys: 34%; ) .col3 ( tausta: #ECD5DE; oikea: 0; leveys: 33%; )

Joissakin selaimissa sarakkeiden väliin saattaa ilmestyä pieni aukko. Se voidaan ratkaista käyttämällä murto-osia eikä kokonaisia ​​prosenttiarvoja, ts. 33,3 % 33 %:n sijaan.

Loput asettelut, joissa kaksi kolmesta sarakkeesta ovat kumia, edustavat erikoisryhmä, koska niitä voidaan tulkita eri tavoin. Siten yhden sarakkeen leveys ilmoitetaan pikseleinä, toisen sarakkeen leveys prosentteina asettelun leveydestä ja jäljellä olevan sarakkeen leveys lasketaan automaattisesti. Kuvassa Kuva 5.19 esittää erilaisia ​​lähestymistapoja sarakkeiden leveyden laskemiseen käyttämällä layoutin nro 5 esimerkkiä.

Riisi. 5.19. Kahden kumipylvään leveys

Ensimmäisessä vaihtoehdossa ensimmäisen sarakkeen leveys asetetaan prosenttiosuutena asettelun leveydestä, toisen sarakkeen leveys lasketaan automaattisesti ja kolmannella sarakkeella on kiinteä leveys pikseleinä. Toisessa vaihtoehdossa sarakkeet vaihtuvat keskenään ja ensimmäisen sarakkeen leveys lasketaan automaattisesti. Kolmas vaihtoehto olettaa, että kumipylväiden kokonaisleveydeksi otetaan 100 % ja ensimmäisen ja toisen sarakkeen leveys lasketaan siitä.

Ensimmäinen ja toinen vaihtoehto voidaan helposti toteuttaa samalla tavalla kuin koodi kahdella sarakkeella pikseleissä. Vain px leveyden sijaan ilmoitamme %. Esimerkki 5.18 näyttää asettelutyylin nro 5, jossa ensimmäinen sarake on asetettu prosentteina.

Esimerkki 5.18. Asettelu nro 5. Toisen sarakkeen leveys lasketaan

Otsikko ( tausta: #D5BAE4; ) .layout ( sijainti: suhteellinen; ) .layout DIV ( sijainti: absoluuttinen; ) .col1 ( tausta: #C7E3E4; leveys: 50%; ) .col2 ( tausta: #E0D2C7; vasen: 50 %; oikea: 200px; ) .col3 ( tausta: #ECD5DE; oikea: 0; leveys: 200px; )

Asettelutyyli #5 lasketulla ensimmäisellä sarakkeella on esitetty esimerkissä 5.19.

Esimerkki 5.19. Asettelu nro 5. Ensimmäisen sarakkeen leveys lasketaan

Otsikko ( tausta: #D5BAE4; ) .layout ( sijainti: suhteellinen; ) .layout DIV ( sijainti: absoluuttinen; ) .col1 ( tausta: #C7E3E4; vasen: 0; oikea: 200px; marginaali-oikea: 50%; ). col2 ( tausta: #E0D2C7; leveys: 50%; oikea: 200px; ) .col3 ( tausta: #ECD5DE; leveys: 200px; oikea: 0; )

Ensimmäistä saraketta ei voi asettaa oikealle oikean ominaisuuden kautta, koska arvo on 50%+200px; CSS2:lla ei ole tällaisia ​​laskettuja arvoja. Siksi käytämme kohdistusta - rajoitamme oikeanpuoleisen ensimmäisen kerroksen leveyteen 200 pikseliä oikealle ja siirrämme sitä vasemmalle toisen sarakkeen leveydellä 50 % käyttämällä marginaali-oikeaa . Kerroksemme on ehdottomasti sijoitettu, joten tällaiset manipulaatiot eivät vaikuta leveyteen millään tavalla.

Kolmas vaihtoehto kahdella kumipylväällä vaatii ylimääräisen kerroksen, kutsutaan sitä kumiksi, läsnäoloa, johon nähden sarakkeiden leveys asetetaan (esimerkki 5.20).

Esimerkki 5.20. Asettelu #5: Kahden sarakkeen leveys prosentteina

Kolme saraketta .header ( tausta: #D5BAE4; ) .layout ( sijainti: suhteellinen; ) .layout DIV ( sijainti: absoluuttinen; ) .kumi (vasen: 0; oikea: 200px; ) .col1 ( tausta: #C7E3E4; leveys: 60 %; ) .col2 ( tausta: #E0D2C7; leveys: 40 %; vasen: 60 %; ) .col3 ( tausta: #ECD5DE; leveys: 200px; oikea: 0; ) Sivuston otsikko Sarake 1 Sarake 2 Sarake 3

Asettelun nro 6 rakenne on samanlainen kuin asettelun nro 5, joten emme jää siihen kiinni. Mitä tulee asetteluun nro 7, sille on vaihtoehto, joka voi aiheuttaa vaikeuksia. Tämä koskee tapausta, jossa vasemman ja oikean sarakkeen leveys halutaan laskea ja tehdä keskenään yhtä suureksi. Tätä varten ensimmäisen ja kolmannen sarakkeen leveydeksi tulee tehdä 50 % (kuva 5.20).

Riisi. 5.20. Asettelu nro 7 yhtä leveillä sarakkeilla

Jättääksemme tilaa toiselle sarakkeelle, käytämme margin-right-ominaisuutta ensimmäisessä sarakkeessa ja margin-left-ominaisuutta kolmannessa sarakkeessa. Näiden ominaisuuksien arvo on puolet toisen sarakkeen leveydestä. Joten jos se on yhtä suuri kuin 200px, tulos on marginaalioikea : 100px (esimerkki 5.21).

Esimerkki 5.21. Asettelu nro 7. Kumipylväiden leveys on sama

Otsikko ( tausta: #D5BAE4; ) .layout ( sijainti: suhteellinen; ) .layout DIV ( sijainti: absoluuttinen; ) .col1 ( tausta: #C7E3E4; vasen: 0; oikea: 50 %; marginaali-oikea: 100px; ) . col2 ( tausta: #E0D2C7; leveys: 200px; vasen: 50%; margin-vasen: -100px; ) .col3 ( tausta: #ECD5DE; vasen: 50%; oikea: 0; margin-vasen: 100px; )

Leveysominaisuutta ei voi käyttää suoraan, koska marginaalin lisääminen vain lisää leveyttä, ei pienennä sitä tarpeen mukaan. Siksi leveys muodostuu samanaikaisesti määritetyistä vasemmasta ja oikeasta ominaisuuksista. Toisen sarakkeen sijoittelussa on vaikeuksia määrittää vasemman tai oikean arvon arvo, koska se on yhtä suuri kuin 50–200 kuvapistettä. Asetamme siis vasemman marginaalin sijainniksi 50 % (vasen : 50 % ) ja siirrämme sitten koko saraketta vasemmalle puolet sen leveydestä marginaali-vasen ominaisuudella (margin-left : -100px).

Koska joidenkin sarakkeiden leveys lasketaan automaattisesti, on suositeltavaa rajoittaa asettelun vähimmäisleveyttä lisäämällä BODY-valitsimeen ominaisuus min-width. Tällöin sarakkeiden leveys ei pienene, kun määritetty raja saavutetaan.

BODY ( min-leveys: 800 pikseliä; /* Asettelun vähimmäisleveys */ )

Pienin leveysarvo riippuu sivun asettelusta ja sisällöstä, ja se määräytyy yleensä kokemuksen perusteella.

Kelluvien elementtien käyttö

Kelluvat elementit ovat toinen monipuolinen tapa luoda erilaisia ​​kolmisarakkeisia asetteluja. Toisin kuin sijoittelu, sen avulla sinun ei tarvitse huolehtia kellariongelmasta, koska kellari on aina paikallaan korkeimman pylvään alla.

Sarakkeet muodostetaan käyttämällä float-ominaisuutta yhdessä marginaali- ja leveysominaisuuksien kanssa. Valitusta asettelusta riippuen myös koodin sarakkeiden järjestys muuttuu, kerrokset ovat aina ensin, joihin lisätään float.

Asettelu nro 1. Ensimmäinen sarake kuminen

Toisen ja kolmannen sarakkeen leveys määritetään pikseleinä ja niiden sijainti float-ominaisuuden kautta arvolla oikeus . Ensimmäiselle sarakkeelle sinun on myös asetettava marginaalioikea-ominaisuus, jonka arvo on yhtä suuri kuin muiden sarakkeiden kokonaisleveys (esimerkki 5.22).

Esimerkki 5.22. Asettelu nro 1

Asettelu 1 .header, .footer ( tausta: #D5BAE4; ) .layout ( ylivuoto: piilotettu; /* Pura */ ) .col1 ( tausta: #C7E3E4; /* Taustaväri */ marginaali oikealle: 300px; /* Vaihto vasemmalle sarakkeiden 2 ja 3 leveyden verran */ .col2 ( tausta: #E0D2C7; leveys: 200px; float: oikea; /* Wrap left */ ) .col3 ( tausta: #ECD5DE; leveys: 100px; float: oikea; /* Rivitä vasemmalle */ ) Sivuston otsikko Sarake 3 sarake 2 sarake 1 alatunniste

Asettelu nro 2. Kuminen keskipilari

Ensimmäisen ja kolmannen sarakkeen leveys määritetään pikseleinä, ja niiden sijainti määritetään float-ominaisuuden kautta siten, että arvo on vasemmalle ensimmäiselle sarakkeelle ja oikealle kolmannelle. Keskimmäinen sarake säilyttää ulkonäkönsä ja sisältää yleisen ominaisuusmarginaalin , joka määrittää vasemman ja oikean marginaalin (esimerkki 5.23).

Esimerkki 5.23. Asettelu nro 2

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Asettelu 2 .header, .footer ( tausta: #D5BAE4; ) .layout ( ylivuoto: piilotettu; ) .col1 ( tausta: #C7E3E4; float: vasen; leveys: 200px; ) .col2 ( tausta: #E0D2C7; marginaali: 0 100px 0 200px; /* Oikea ja vasen täyte */ .col3 ( tausta: #ECD5DE; leveys: 100px; float: oikea; ) Sivuston otsikko Sarake 1 Sarake 3 Sarake 2 Alatunniste

Asettelu nro 3. Kolmas kumisarake

Ensimmäisen ja toisen sarakkeen sijainti ilmaistaan ​​float-ominaisuuden kautta arvolla left , kolmannen sarakkeen vasen marginaali (margin-left ) on asetettava jäljellä olevien sarakkeiden kokonaisleveyteen (esimerkki 5.24).

Esimerkki 5.24. Asettelu nro 3

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Asettelu 3 .header, .footer ( tausta: #D5BAE4; ) .layout ( ylivuoto: piilotettu; ) .col1 ( tausta: #C7E3E4; float: vasen; leveys: 100px; ) .col2 ( tausta: #E0D2C7; float: vasen ; leveys: 200px; ) .col3 ( tausta: #ECD5DE; marginaali vasen: 300px; /* Vasen marginaali sarakkeiden 1 ja 2 leveyden mukaan */ ) Sivuston otsikko Sarake 1 sarake 2 sarake 3 alatunniste

Asettelu nro 4. Kaikkien sarakkeiden leveys on asetettu prosentteina

Tämän asettelun rakentamiseen soveltuvat monet vaihtoehdot, jotka perustuvat aikaisempiin asetteluihin, mutta pikselien sijaan tulisi määrittää prosenttiosuudet. Esimerkissä 5.25 on esitetty toinen menetelmä, joka käyttää vain kellunta- ja leveysominaisuuksia.

Esimerkki 5.25. Asettelu nro 4

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Asettelu 4 .header, .footer ( tausta: #D5BAE4; ) .layout ( ylivuoto: piilotettu; ) .layout DIV ( float: left; ) .col1 ( tausta: #C7E3E4; leveys: 20%; ) .col2 ( tausta: #E0D2C7; leveys: 60%; ) .col3 ( tausta: #ECD5DE; leveys: 20%; ) Sivuston otsikko Sarake 1 Sarake 2 Sarake 3 Alatunniste

Asettelu nro 5. Kahden kumipilarin leveys

Kuvassa 5.19 osoitettiin, että layout nro 5, jossa on kaksi kumipylvästä, voidaan tulkita eri tavoin.

Ensimmäisen sarakkeen leveys ilmoitetaan prosentteina asettelun leveydestä, kolmas sarake on pikseleinä ja keskimmäinen sarake vie jäljellä olevan tilan.

Toisen sarakkeen leveys ilmoitetaan prosentteina asettelun leveydestä, kolmas sarake on pikseleinä ja ensimmäinen sarake vie jäljellä olevan tilan.

Kahden kumipylvään kokonaisleveydeksi otetaan 100 %, ja pylväiden leveys ilmoitetaan prosentteina tästä arvosta.

Keskimmäisen sarakkeen leveys laskettu

Tässä ensimmäisen sarakkeen leveys määritetään prosentteina ja sen sijainti float-ominaisuuden kautta arvolla left , kolmannen sarakkeen leveys määritetään pikseleinä ja float-ominaisuuden arvo on asetettu oikealle . Keskimmäiselle sarakkeelle ei jää muuta kuin asettaa vasen ja oikea marginaali sarakkeiden leveydelle (esimerkki 5.26).

Esimerkki 5.26. Ulkoasu 5.1

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Asettelu 5.1 .header, .footer ( tausta: #D5BAE4; ) .layout ( ylivuoto: piilotettu; ) .col1 ( tausta: #C7E3E4; leveys: 40 %; float: left; ) .col2 ( tausta: #E0D2C7; marginaali: 0 200px 0 40%; ) .col3 ( tausta: #ECD5DE; leveys: 200px; float: oikea; ) Sivuston otsikko Sarake 1 sarake 3 sarake 2 alatunniste

Ensimmäisen sarakkeen leveys lasketaan

Tämä on vaikein asettelu, koska ensimmäisen sarakkeen leveyttä ei ole määritetty suoraan. Mutta sisällön rajoittamiseksi sinun on määritettävä arvo, joka yhdistää prosenttiosuudet ja pikselit marginaalin oikealle ominaisuudelle. Kuten jo mainittiin, CSS2:ssa tätä ei voi asettaa, joten lisätään toinen kerros col1-kerroksen sisään, nimeltään wrap, ja lisätään täyttö jokaiseen näistä tasoista. Toinen prosentteina, toinen pikseleinä (esimerkki 5.27).

Esimerkki 5.27. Ulkoasu 5.2

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Asettelu 5.2 .header, .footer ( tausta: #D5BAE4; ) .layout ( ylivuoto: piilotettu; ) .col1 ( margin-right: 40%; ) .col1 .wrap ( margin-right: 200px; background: #C7E3E4; ) .col2 ( tausta: #E0D2C7; leveys: 40 %; float: oikea; ) .col3 ( tausta: #ECD5DE; leveys: 200px; float: oikea; ) Sivuston otsikko Sarake 3 Sarake 2 Sarake 1

Kahden sarakkeen leveys prosentteina

Tässä asettelussa kumipylväiden kokonaisleveydeksi otetaan 100%, joten tarvitsemme lisäkerroksen, jota vasten sisäisten pylväiden leveys mitataan. Tämä taso, nimeltään kumi, toimii kerroksen col3 kanssa kaksisarakkeisena asetteluna, ja sisäkerrokset col1 ja col2 on kohdistettu vaakasuoraan float-ominaisuuden avulla (esimerkki 5.28).

Esimerkki 5.28. Ulkoasu 5.3

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Asettelu 5.3 .header, .footer ( tausta: #D5BAE4; ) .layout ( ylivuoto: piilotettu; ) .kumi ( marginaali-oikea: 200px; ) .col1 ( tausta: #C7E3E4; leveys: 60 %; float: vasen; ) .col2 ( tausta: #E0D2C7; leveys: 40 %; float: vasen; ) .col3 ( tausta: #ECD5DE; leveys: 200px; kelluvuus: oikea

Layout 6, 7 ja niiden muunnelmat on rakennettu samalla periaatteella kuin layout nro 5, poikkeuksena layout nro 7, jossa vasemman ja oikean sarakkeen leveys on kumia ja sama.

Ensin valmistelemme pohjan ja ilmoitamme kerrosten järjestyksen HTML-koodissa.

Sarake 1 sarake 3 sarake 2

Col1 (leveys: 50%; float: vasen; ) .col2 (leveys: 200px; float: vasen; ) .col3 (leveys: 50%; float: oikea; )

Siinä ei vielä kaikki, kerrokset eivät vielä muodosta sarakkeita ja ne on rakennettu meille täysin sopimattomalla tavalla. Sinun on siirrettävä toista saraketta vasemmalle puolet sen leveydestä (margin-left : -100px) ja pakotettava kolmas sarake paikalleen. Tätä varten sinun on suurennettava sen leveyttä niin, että se on yhtä suuri tai suurempi kuin 50%+100px (puolet toisesta sarakkeesta). On parasta käyttää marginaalivasen -ominaisuutta negatiivisella arvolla, jonka jälkeen sarakkeet luodaan. On joitain muita vivahteita. Ulkopilarit on liitetty toisiinsa, mikä näkyy selvästi, kun niiden korkeus ylittää keskipylvään korkeuden (kuva 5.21).

Riisi. 5.21. Telakoidut kaiuttimet

Lisäksi vasemmassa sarakkeessa teksti on oikealla ja sisään oikea sarake vasemmalla oleva teksti on piilotettu keskisarakkeen taustan alle. Tämä ei ole havaittavissa, jos tämän sarakkeen korkeus on suuri, mutta tämä ei ole aina mahdollista. Voit korjata nämä puutteet lisäämällä yhden kerroksen ulompien sarakkeiden sisään (esimerkissä sitä kutsutaan wrap ) ja määrittämällä niille sarakkeen taustavärin, Pakolliset kentät ja sisennykset. Lopullinen koodi on annettu esimerkissä 5.29.

Esimerkki 5.29. Asettelu nro 7

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Asettelu 7 .header, .footer ( tausta: #D5BAE4; ) .layout ( ylivuoto: piilotettu; ) .col1 ( leveys: 50 %; float: vasen; ) .col1 .wrap ( tausta: #C7E3E4; marginaali-oikea: 100px ; /* Siirrä vasemmalle puolet sarakkeen 2 leveydestä */ täyte: 10px; /* Marginaalit tekstin ympärillä */ ) .col2 ( tausta: #E0D2C7; leveys: 200px; float: vasen; margin-vasen: -100px; ) .col3 (leveys: 50 %; float: oikea; marginaali-vasen: -100px; ) .col3 .wrap ( tausta: #ECD5DE; margin-vasen: 100px; /* Siirrä oikealle puolet sarakkeen 2 leveydestä */ täyte : 10px; ) Sivuston ylätunniste sarake 1 sarake 3 sarake 2 alatunniste

Marginaalit ja reunat kolmen sarakkeen asettelussa

Täyteominaisuutta ei ole tarkoituksella lisätty annettuihin esimerkkiasetteluihin, koska koodi toimii vain asettelun pohjana ja sinun on tietyissä tapauksissa päätettävä, tarvitaanko sarakkeisiin marginaaleja vai ei. Reunusten ja reunusten lisääminen lohkoelementtiin kasvattaa sen leveyttä, mikä on otettava huomioon asettelussa. Leveys kuitenkin kasvaa vain, jos kerros on asetettu leveyden arvo. Katsotaanpa muutamia esimerkkejä, missä leveys muuttuu ja missä ei.

Div ( /* täyttö vaikuttaa leveyteen */ leveys: 200px; täyttö: 10px; ) div ( /* täyte ei vaikuta leveyteen */ sijainti: absoluuttinen; vasen: 20px; oikea: 20px; täyte: 10px; ) div ( / * täyttö vaikuttaa leveyteen */ float: vasen; leveys: 50%; täyttö: 10px; ) div ( /* täyte ei vaikuta leveyteen */ marginaali-oikea: 50%; täyttö: 10px; )

Niissä sarakkeissa, joissa täyttö tai reunus vaaditaan, mutta niiden lisääminen johtaa asettelun "rikkomiseen", voit käyttää sisäkkäistä kerrosta ja asettaa sille tarvittavat ominaisuudet.

Sarake

Tässä esimerkissä tason leveys, joka on asetettu 200 pikseliin, ei muutu, mutta marginaalit ja reunat lisätään.

Taulukko sarakkeina

Pöytä on kätevä käyttää yksinkertaisiin ja nopea luominen samankorkuisia sarakkeita. Tämä nopeus saavutetaan useilla seikoilla. Ensinnäkin minkä tahansa asettelun koodirakenne pysyy samana; koodin sarakkeet, kuten floatissa, eivät koskaan muuta järjestystänsä. Toiseksi solujen leveys lasketaan automaattisesti niiden sisällön perusteella, joten määritä vain leveys tarvittavat kaiuttimet, ja loput mukautuvat pöydän kokonaisleveyteen. Esimerkki 5.30 esittää pöydälle tehtyä asettelua nro 1.

Esimerkki 5.30. Asettelu nro 1

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Asettelu 1 .header, .footer ( tausta: #D5BAE4; ) .layout ( leveys: 100 %; /* Taulukon leveys */ ) .layout TD ( täyte: 5px; /* Solun marginaalit */ pystytasaus: ylhäältä; / * Tasaus yläreunaan */ .col1 ( tausta: #C7E3E4; ) .col2 ( tausta: #E0D2C7; leveys: 200px; ) .col3 ( tausta: #ECD5DE; leveys: 100px; ) Sivuston otsikko

Sarake 1

Sarake 2

Sarake 3

Kellari

Lisäys pehmusteominaisuudet TD-valitsimeen ohittaa tagin cellpadding-attribuutin

ja lisää marginaaleja solun sisältöön. Tässä tapauksessa itse sarakkeiden leveys ei muutu millään tavalla.

Asettelu nro 2

Ylätunniste, .footer ( tausta: #D5BAE4; ) .layout (leveys: 100%; ) .layout TD ( täyte: 5px; pystytasaus: yläreuna; ) .col1 ( tausta: #C7E3E4; leveys: 100px; ) .col2 ( tausta: #E0D2C7; ) .col3 ( tausta: #ECD5DE; leveys: 200px; )

Asettelu nro 3

Ylätunniste, .footer ( tausta: #D5BAE4; ) .layout (leveys: 100%; ) .layout TD ( täyte: 5px; pystytasaus: yläreuna; ) .col1 ( tausta: #C7E3E4; leveys: 100px; ) .col2 ( tausta: #E0D2C7; leveys: 200px; ) .col3 ( tausta: #ECD5DE; )

Asettelu nro 4

Ylätunniste, .footer ( tausta: #D5BAE4; ) .layout (leveys: 100%; ) .layout TD (täyte: 5px; pystytasaus: yläreuna; ) .col1 ( tausta: #C7E3E4; leveys: 33%; ). col2 ( tausta: #E0D2C7; leveys: 34 %; ) .col3 ( tausta: #ECD5DE; leveys: 33 %; )

6.1-asettelussa ensimmäisen sarakkeen leveys asetetaan pikseleinä, kolmannen prosentteina ja keskimmäinen sarake vie jäljellä olevan tilan.

Asettelu nro 6.1

Ylätunniste, .footer ( tausta: #D5BAE4; ) .layout (leveys: 100 %; ) .layout TD ( täyte: 5px; pystytasaus: yläreuna; ) .col1 ( tausta: #C7E3E4; leveys: 200px; ) .col2 ( tausta: #E0D2C7; ) .col3 ( tausta: #ECD5DE; leveys: 40%; )

Muut taulukkoa käyttävät asettelut rakennetaan samalla tavalla, vain leveysominaisuuden arvo muuttuu. Asettelussa nro 7, jossa ulompien pylväiden leveys on kumia ja keskenään yhtä suuri, on joitain temppuja, joten käsittelemme sitä yksityiskohtaisemmin.

Ulompien sarakkeiden leveydeksi on asetettu 50 % ja keskimmäisen sarakkeen leveydeksi pikseleinä. Varmistaaksesi, että kaikkia ulottuvuuksia noudatetaan, sinun on lisättävä table-layout-ominaisuus taulukkoon, jonka arvo on kiinteä .

Asettelu (leveys: 100 %; taulukon asettelu: kiinteä; ) .col1 (leveys: 50 %; ) .col2 (leveys: 200 kuvapistettä; ) .col3 (leveys: 50 %; )

Vaikka solujen kokonaisleveys ylittää taulukon leveyden, taulukkoa ei laajene tai siirry, kuten tapahtuisi lohkon elementtejä. Kuten he sanovat tällaisissa tapauksissa, tämä ei ole bugi, tämä on ominaisuus!

Esimerkki 5.31 näyttää täysi koodi asettelu nro 7.

Esimerkki 5.31. Asettelu nro 7

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Asettelu 7 BODY ( marginaali: 0; tausta: #6D775B; ) .layout ( leveys: 100 %; taulukon asettelu: kiinteä; ) .layout TD ( täyte: 7px; pystytasaus: yläreuna; ) .col1 ( tausta: # 6D775B; leveys: 50%; ) .col2 ( tausta: #F5E8D0; leveys: 300px; ) .col3 ( tausta: #6D775B; leveys: 50%; tekstin tasaus: oikea; )

Hän seisoi puun alla ja odotti, Ja yhtäkkiä kuului ukkonen. Kauhea äijä lentää, Ja se palaa tulella. Yksi-kaksi, yksi-kaksi! Ruoho palaa, miekka leikkaa, huutaa, Vau! Vau! Ja pää Hän höpöttää harteiltaan. Lewis Carroll, käännös Dina Orlova, piirustukset John Tenniel

Esimerkin tulos näkyy kuvassa. 5.22.

Riisi. 5.22. Sarake asettelun keskellä

Toivotan sinut tervetulleeksi seuraavalle oppitunnille, joka omistetaan tänään CSS-kieli. Ja toteutamme kanssasi kolmipylväisen kumiasettelun sivustolle. Jatkossa voit yksinkertaisesti kopioida tämän kehyksen ja aloittaa verkkosivuston luomisen. Asettelu koostuu seuraavista lohkoista: sivuston otsikko, vasen sivupalkki, oikea sivupalkki, sisältöalue ja alatunniste. Ei mitään monimutkaista, yksinkertainen, melko yksinkertainen malli. No, on aika toteuttaa se. Aluksi kirjoitetaan seuraavaa rakennetta html koodi:

Olemme toteuttaneet rakenteen. On aika soveltaa tyylejä, joiden ansiosta toteutamme kolmisarakkeen asettelun.

Nyt olemme saaneet kirjoitustyylit valmiiksi, katsotaanpa niitä hieman.
Otimme pohjaksi lohkon, johon asetamme kaikki muut lohkot, ja asetimme sille enimmäisleveyden, keskikohdistuksen ja myös sataprosenttisen leveyden (tämä ei ole pakollista, mutta se ei myöskään ole tarpeetonta ).
Otsikko sijoitettiin lohkoon, joka vastaa sivuston otsikosta, ja itse lohkolle asetettiin taustaväri ja keskitetty tekstin tasaus. Sen jälkeen siirryimme tärkeimpään osaan, kumikaiuttimiimme.
Asetamme vasemmalle sivupalkille taustavärin ja kiinteän korkeuden, jotta voimme visualisoida, miltä sivusto näyttää tulevaisuudessa. Asetamme leveydeksi kaksikymmentä prosenttia ja asetamme myös elementtien virtauksen vasemmalle.
Tilanne oikean sivupalkin kanssa on samanlainen, vain me lähetämme tämä elementti V oikea puoli näyttö, jossa asetetaan elementtien kulku oikealla. Tämän menetelmän jälkeen sisältö keskitetään automaattisesti ruudulle näiden kahden sivupalkin väliin.
Mutta sisällölle asetamme myös taustavärin, korkeuden, vasemman ja oikean marginaalin, jotka ovat 21 prosenttia, ja vastaavasti leveydeksi 58 prosenttia. Saatat ihmetellä, miksi 58 prosenttia. Perustuen leveyteen, joka on yhtä suuri kuin sata prosenttia, vähennämme pehmusteen vasemmalta ja oikea puoli, jotka ovat 21 prosenttia, yhteensä 100 - 21 - 21 = 58. Siinä Tämä kuvio. Siinä kaikki, kumilohkot ovat valmiita, jäljellä on vain alatunnisteen toteuttaminen.
Se on toteutettu sivuston otsikon periaatteen mukaisesti, luomme myös lohkon, jonka sisällä on otsikko, asetamme taustan, tekstin värin ja keskitetyn tekstin tasauksen.

Tulosta tarkasteltaessa voimme sanoa, että kaikki on melko yksinkertaista, ja sivusto pakataan rajaan asti ja venytetään määrittämäämme enimmäisleveyteen. Halutessasi voit määrittää vähimmäisleveyden, johon sivustosi kutistuu. Osoitettu tämä omaisuus lohkolle, jonka tunnus on kontti, koska se on muiden lohkojen emo. Joten sinä ja minä olemme harkinneet mahdollisuutta luoda kolmisarakkeinen kumisivusto, jonka avulla sanon sinulle hyvästit. Kaikkea hyvää sinulle, menestystä!

Kumisivuston ulkoasu. Kumiverkkosuunnittelu. Mitä ja missä venytetään?

Ominaisuudet, edut ja haitat

Yksi suosituimmista verkkosivustojen asettelutyypeistä on kumiasettelu. Pääominaisuus kuminen asettelu on kyky mukautua erilaisiin näytön resoluutioihin ja selainikkunoiden kokoihin.

Kaikista html-tyyppejä Verkkosivustojen asettelut voidaan jakaa kolmeen pääasialliseen - kiinteään, sujuvaan ja mukautuvaan.

Kumiasetelman ominaisuudet

Toisin kuin kiinteä asettelu, sulava asettelu sallii selainikkunan koon muuttamisen ja on suunniteltu erilaisille näytön resoluutioille. Tosiasia on, että modernilla nopea kehitys teknologioiden ja jatkuvasti kehittyneen tekniikan ilmaantumisen vuoksi, ongelma syntyy verkkosivuston ulkoasussa. Tavallinen kiinteä asettelu ei enää vastaa kaikille tarvittavat vaatimukset ja vähitellen vanhentui. Nyt vanhojen menetelmien käyttö on pikemminkin poikkeus kuin sääntö, ja tämä on aivan luonnollista.

Kuvittele tällainen yksinkertainen esimerkki: käyttäjä ajoi metroautossa, palasi töistä kotiin ja tuli sivustollesi kännykkä, jonka näytön resoluutio on 320 x 480 pikseliä, hän lähti kotiin pöytätietokone ja katseli sivustoasi 24 tuuman diagonaalisella näytöllä, jonka resoluutio on 1920 x 1200 pikseliä (ja tämä on kaukana rajasta). Kysymys kuuluu, kuinka kiinteää asettelua käyttämällä voit saavuttaa samat tulokset älypuhelimella ja suurella näytöllä (jos laitat automaattisen skaalaus sivuun). Toisin sanoen on välttämätöntä, että se ei näy puhelimessa vaakasuuntainen vieritys ja samaan aikaan sivusto ei näyttänyt näytöllä valitettavalta kapealta raidalta valkoisen keskellä tyhjä ruutu. Vastaus on ei.

Ja tässä avuksemme tulee kumirakenne, joka selviää helposti tehtävästä. Suurella näytöllä ei ole syntiä venyttää sivustoa koko näytön poikki tai rajoittaa itseäsi tiettyyn mallin leveyteen, esimerkiksi 75 prosenttiin näytön leveydestä. Tähän tehtävään on hienoja CSS-ominaisuudet max-leveys Ja min-leveys, jonka avulla voit pitää sivuston leveyden tietyissä rajoissa, mikä on oikea ja esteettisin ratkaisu.

Kumiasetelman edut ja haitat

Sujuvan asettelun tärkein etu on sen monipuolisuus selainikkunan kokoa muutettaessa ja näytöissä, joissa on eri näytön resoluutio, joiden erot voivat vaihdella melko paljon. Hyvin suunniteltu verkkosivusto näyttää hyvältä suurella näytöllä vieden riittävästi näyttötilaa, mutta on syytä muistaa, että henkilö ei havaitse liikaa pitkät linjat tekstiä ja laske sivuston leveys viisaasti ja kohtuullisissa rajoissa. Se, että liian kapea verkkosivusto näyttää kurjalta suurella näytöllä, ei ole salaisuus kenellekään, ja sitä tulee aina välttää.

Kumiasettelulla ei ole monia haittoja, mistä johtuu sen suosio ja yleisyys. Suurin haittapuoli on, että joustavan verkkosivuston luominen on paljon vaikeampaa kuin kiinteän. Kun kyseessä ovat suuret kuvat tai taustat, sinun on etsittävä kuvista paikkoja, joita voidaan venyttää säilyttäen samalla kuvan riittävyys. Lähes kaikki asettelun mitat on ilmoitettava prosentteina, jotka on tietysti laskettava viisaasti. Ja jos alkuperäinen kuva on liian pieni, niin skaalattaessa iso puoli se menettää paljon laatua.

Toisaalta, jos otat myös iso kuva varauksella, se painaa liikaa ja käyttäjät, jotka käyttävät sivustoa mobiililaitteilla, joissa on heikko Internet, lataavat liikaa ylimääräisiä tavuja.

Kumisivustoa asetettaessa kuluu paljon aikaa tulosten tarkistamiseen eri näyttötarkkuuksilla, ja lisäksi tämä vaatii melko kunnollisen lävistäjän näytön, muuten miten se tarkistetaan. Mutta kaikki nämä haitat eivät ole mitään verrattuna kumisen verkkosivuston asettelun etuihin. HTML-asettelu on todellinen taide, jota kaikki taittosuunnittelijat eivät ymmärrä. Mitä tahansa asettelua tulisi käyttää siellä, missä se on tarkoituksenmukaista, ei vain missä tahansa.

HTML-asettelu

Esimerkki - kumi

Sivu 1

Taulukossa on esimerkkejä kumeista, jotka kestävät riittävän hyvin toistuvaa taivutusta ja jotka sisältävät difenyyliguanidiinia. 4.15. Jokaisella moduulin arvolla tai silloitusasteessa DPG-kumilla oli suurin väsymiskestävyys.

Käyttämällä kumia renkaiden sivuseinämiin esimerkkinä on osoitettu, että DSC- ja DTG-menetelmät antavat näytteitä hajottaessaan typpiympäristössä. parhaat tulokset kun tunnistetaan NC-, SBR-, EPDM- ja halobutyylikumin koostumuksia.

Happiympäristössä hajotettuina käyrät eivät ole yhtä informatiivisia, mutta ovat yhdenmukaisia ​​typpiympäristössä saatujen käyrien kanssa.

Tarkastellaan näitä vaikutuksia käyttämällä esimerkkiä kiteytyviin kumeihin perustuvista kumeista, missä ne ilmenevät selkeimmin.

K. A. Kerimovin (1965) työssä kumin ja polyvinyylin esimerkillä osoitettiin, että dynaamiset jännitys-venymäkäyrät, lähellä suoria viivoja, ovat staattisten yläpuolella ja nollaa lähellä olevien jännitysten alueella jäännösmuodonmuutoksia. dynaamisista kuormista voi olla kolme kertaa suurempi staattinen.

Kosteuden vaikutuksen kemiallisiin reaktioihin otsonihalkeilun aikana olisi pitänyt ilmetä samalla tavalla kumeissa, jotka on valmistettu samanlaisen kemiallisen rakenteen omaavista kumeista, mutta tätä ei havaita, kuten NK:n ja SKI:n kumeista voidaan nähdä.

Mukautuva verkkosivuston ulkoasu, oppitunti yksi. Kotisivun asettelu

P. A. Rebinderin ja V. V. Margaritovin saamilla tuloksilla täyteainerakeiden pinnan luonteen vaikutuksesta sen vahvistavaan vaikutukseen on suuri perustavanlaatuinen merkitys. Esimerkkinä kumia käyttäen he osoittivat, että täyteaineet jaetaan kolmeen ryhmään pintojen molekyyliluonteen mukaan.

Kumille on erilaisia ​​vaatimuksia. Otetaan esimerkkinä poraus- ja öljykenttälaitteissa käytettävä kumi.

Polymeerin ja liuottimien välisten molekyylien välisten vuorovaikutusvoimien erilainen luonne voi kuitenkin johtaa polymeerin täysin erilaiseen turpoamiseen näiden väliaineiden liukoisuusparametrien samoilla arvoilla. Tätä asiaa on tutkittu yksityiskohtaisesti kumin esimerkin avulla.

Epäpuhtaudet ja täyteaineet voivat muodostaa merkittävän osan kokonaispainosta ja usein jopa ylittää itse kumin painon. Kuinka monimuotoisia ja monimutkaisia ​​raakakumiin lisätyt epäpuhtaudet voivat olla, näkyy esimerkkinä autonrenkaiden kumista.

Lisää polymeerien kestävyyttä kemikaaleja vastaan aktiivista mediaa ristilinkkien on kestettävä näitä ympäristöjä. Tällä hetkellä käytetyistä kestävimmät ovat ristisidokset tyyppi S-S, kuten fluorikumin ja kloropreenikumin esimerkissä näkyy (katso luku.

Kumin liukumisen kulumisprosessin tärkeä ominaisuus metallipinta Kanssa suuret nopeudet, On kriittinen lämpötila sen tuhoutuminen kitkan vaikutuksesta. Kun kumi liukuu metallipinnalla olosuhteissa korkeita lämpötiloja altistuminen (200 - 400 C), seuraavat sen tuhoutumisen päätyypit ovat mahdollisia: halkeamien ilmaantuminen kitkapinnalle, kumipäällystekerrosten muodostuminen kitkaparin molemmille kosketuspinnoille ja katastrofaalisen kulumisprosessin esiintyminen. Käyttämällä esimerkkinä nitriili-butadieeni- ja eteeni-propeenikumipohjaista kumia, analysoimme syitä, jotka aiheuttavat näiden materiaalien tuhoutumisen.

Täyteaineiden lisääminen lisää kumia pehmentävää vaikutusta. Johtopäätös, että pehmentävä vaikutus on suurempi täyteaineen läsnä ollessa, on ilmeinen ja liittyy vain siihen tosiasiaan, että kumien vertailu suoritetaan kumifaasin erilaisilla todellisilla muodonmuutoksilla. yksityinen luonne. Tämä johtopäätös perustuu laajaan materiaaliin, joka on kerätty NC-kumien tutkimuksen aikana. Kuitenkin enemmän yksityiskohtainen analyysi esimerkkien käyttäminen muista kumeista osoittaa jotain muuta.

Sivut:      

Päällä Tämä hetki Web-sivuston tekeminen itse ei ole äärimmäistä fantasiaa eikä edusta mitään monimutkaista, kuten 2000-luvun alussa.

Luodaksesi ihmeesi Internetissä voit tietysti käyttää valmiita ja ilmaiset moottorit verkkosivustoille ja ohjelmille (verkkosivustojen rakentajille), joiden avulla voit ilman html:n ja css:n perustietojakaan tehdä verkkosivuston alusta alkaen ajassa ammattimaisesti optimoinnin ja SEO:n suhteen.

Tai voit valita toisen, oikeamman tien: opiskeluohjelmistot html-koodi Ja muotoilu elementtejä css:ssä. Tässä suunnassa voit tehdä minkä tahansa mallin verkkosivuston ja antaa sille ainutlaatuisen ulkonäön.

HTML-VERKKOKOULUTUS

Suosittelen lämpimästi, että käytät vähän aikaa ja aloita opettelemalla html:n ja css:n perusteet, sillä ilman näitä asioita et voi koskaan korjata mitään fragmentteja itse haluamallasi tavalla, saati lisätä jotain uutta se mallin sisällä.

tietojenkäsittelytieteen laboratorio, tentti

Ja Internetissä on paljon koulutusmateriaalia tästä aiheesta.

SIVUSTON ELEMENTIT

Jotta voit tehdä verkkosivuston, sinun on osattava upottaa se html-sivuja valikko css, linkkejä, kuvia ja videoita, pystyä optimoimaan sivusto oikein ja asettamaan sisällönkuvauskentät oikein. On hyödyllistä oppia, mihin ja miten verkkosivusto sijoitetaan Internetiin ja minkä nimen keksiä uudelle portaalille, kuinka tehdä verkkosivusto avun avulla erilaisia ​​ohjelmia ja työkalut.

Miksi sitä tarvitaan? mukautuva muotoilu? Aloitan tilastoista. Näet TNS-tiedot maaliskuulta 2013 alla olevasta diasta.

Kuten näette, noin kolmannes yleisöstä tulee älypuhelimista ja tableteista. Ja tämä edellyttäen, että prosenttiosuus vain kasvaa kuukausittain. Kuten ymmärrät, on parempi pitää nenäsi tuulessa!)

Kuinka ottaa mukautuva ulkoasu käyttöön verkkosivustollasi?

Koska pelkkä CSS ei selvästikään riitä ratkaisemaan ongelmaa (ei vain tyylejä tarvitse muuttaa, vaan myös lohkojen rakennetta ja sisältöä), käytämme jQueryä. Usein verkkosivusto koostuu useista lohkoista: päälohkosta ja sivupalkeista. Jos mukautat sivustoa mobiililaitteet, niin tämä on enintään 2 lohkoa (vasen ja oikea).

Alla on esimerkkikoodi mukautuva asettelu. Se sisältää aivan perusasiat – voit lisätä loput oman harkintasi mukaan. Ja älä unohda yhdistää jQuery-kirjasto! (katso Kuinka sisällyttää jQuery-kirjasto?)

JS-koodi (jQuery)

$(dokumentti).ready(function() (

var w = $(ikkuna).width(); // Ikkunan leveys
var h = $(ikkuna).korkeus(); // Ikkunan korkeus. Emme käytä sitä. Viitteeksi

jos (w