01.10.2013 01:04
73845
Gumeni raspored sajt (kao i fiksni izgled) počinje stvaranjem tzv. skeleta, odnosno okvira za dalji razvoj. Općenito, html izgled je konstruktor. Prvo se kreira glavni kontejner, čija će osnova kasnije biti odgovorna za minimalnu i maksimalnu širinu cijele stranice, ivice. Ako sve učinite kako treba, tada promjenom maksimalne veličine možete povećati maksimalnu veličinu web-mjesta, na primjer, sa 1280px na 1360px ili 1920px sa malim ili bez izmjena koda (a ponekad i bez njih). Ne biste trebali praviti beskonačnu gumu jer je nečitljiva na velikim monitorima. Idealna opcija bi bio html izgled koji uključuje sve glavne rezolucije ekrana, uključujući i mobilne, na primjer, gumeni raspored za rezolucije ekrana od 240px do 1920px.
Postoji nekoliko tipova html izgledašto je vizuelno drugačije. Razmotrimo ukratko ove vrste rasporeda prije nego što pređemo na praktičnu konstrukciju okvira:
Vizuelno različite vrste rasporeda su: Fluid layout, fiksni raspored, adaptivni raspored. Responzivni raspored se može kombinovati sa fluidnim rasporedom.
Karakteristike svake vrste rasporeda:
1) Fiksni raspored- sposobnost glavnog kontejnera stranice da ima istu širinu bez obzira na rezoluciju monitora. Ako je ekran manji od fiksne veličine glavnog kontejnera, pojavljuje se bočno pomicanje (lijevo-desno pomicanje).
2) Gumeni raspored- sposobnost glavnog kontejnera lokacije da se proteže u širinu od i do specificiranih minimalnih i maksimalnih veličina. Fluidni raspored može biti bez navođenja minimuma (neće izgledati baš pristojno na ekranima manjim od Npx, statični objekti se mogu preklapati ako se ne doda prilagodljivost) ili maksimalne veličine, tada će se širiti na neodređeno vrijeme (zamislite kako će članak izgledati na rezoluciji 7000px, praktično u jednom redu), tako da dobar html izgled uvijek ima razumna ograničenja. Stoga uvijek trebate provjeriti rezultat izgleda na različitim rezolucijama i u različitim pretraživačima.
3) Prilagodljivi izgled- mogućnost prilagođavanja kako glavnog kontejnera tako i bilo kojeg od elemenata stranice na rezoluciji ekrana, omogućavajući vam da promijenite veličinu fonta, lokaciju objekata, boju i sve što poželite. Štoviše, to se radi dinamički, bez radnje korisnika, na primjer, pomoću medijskih upita koji vam omogućavaju da automatski odredite rezoluciju monitora, vrstu uređaja (mobilni, pametni telefon, tablet) i automatski zamijenite navedene vrijednosti. Ovo daje velike mogućnosti. Na primjer, kada kombinirate fluidni izgled s prilagodljivim izgledom, možete prilagoditi prikaz stranice, počevši od najmanjih mobilnih rezolucija i završavajući s najvećim monitorima. Adaptivni raspored ne utiče na mogućnosti gumenog ili fiksnog rasporeda, već ih nadopunjuje.
Stoga bi najbolja opcija danas bio html izgled, prvobitno napravljen kao fluidni raspored, na primjer 980px-1920px, nadograđen na 240px korištenjem adaptivnog izgleda. Uvijek se mora zapamtiti glavna razlika:
Gumeni raspored radi samo sa kontejnerima, dok prilagodljivi raspored radi i sa kontejnerima i sa njihovim sadržajem, omogućavajući vam da promenite objekte kao što su fontovi, zamenite jedan objekat drugim i još mnogo toga u zavisnosti od rezolucije ekrana ili uređaja. Stoga, pokušajte da ovu nijansu uzmete u obzir prilikom planiranja i kreiranja svojih projekata, i zapamtite da se danas fluidni izgled u kombinaciji sa adaptivnim izgledom smatra dobrom formom u izradi web stranica, a sutra može postati neizgovoreni standard. Stoga, kako ne bismo morali hvatati zaostatak kasnije, bolje je krenuti naprijed danas, čineći gornju kombinaciju normom za sebe.
Također je vrijedno uzeti u obzir valjanost stranice prilikom izgleda. Postoji mišljenje da danas valjanost utiče na performanse, barem u Google pretraživaču. Stoga, prilikom kreiranja projekta uvijek vrijedi pogledati online validator i provjeriti valjanost, te, ako je moguće, učiniti prisustvo grešaka što je moguće minimalnijim. Obično se provjerava valjanost glavne stranice stranice. Prema njemu, uobičajeno je da se utvrdi validnost stranice. Također je vrijedno napomenuti da većina CMS-a na nekim mjestima ima kod koji ne prolazi validaciju.
Vrlo često se to može uočiti u punim vijestima, gdje postoji vizualni urednik, posebno uz pretjerano korištenje formatiranja i svakovrsnog isticanja sredstvima samog urednika. Ali bez ovoga, nigdje, pa ako je glavna stranica web-mjesta potvrđena, onda će to biti sasvim vrijedan rezultat, a interne stranice se mogu proći ako je moguće. Ponekad morate uređivati čak i u engine-u, što ne može svako, pa je za sve potrebna razumna mjera, a valjanost bi trebala biti uobičajena pojava za layout dizajnera, svakodnevna norma, ali u isto vrijeme ne prerasti u maniju koja prisiljava vas da činite valjanost radi valjanosti. Samo treba da pokušate da to uradite što je moguće efikasnije, i smanjite broj grešaka na minimum, u okviru svojih mogućnosti. Na kraju, ako dođe do desetak-dva grešaka, sajt neće prestati da radi, pa ih se ne treba ni plašiti.
Sada pređimo na kreiranje okvira stranice., koji koristi gumeni raspored:
Prvo, moramo napraviti zajednički standard, kao i uvijek, doctype, servisne oznake i smjestiti sadržaj buduće stranice između oznaka
Ovako izgleda početno tijelo stranice, koji još nema ni okvir i unutrašnje blokove. To su samo neophodne informacije za pretraživač, onlajn biblioteka za razumevanje html5, pošto je to još uvek samo preporuka, a specifikacija je i dalje html 4.1, iako se html5 već uveliko koristi. Takođe u servisnim tagovima postoje meta tagovi, naslov i css stil fajl je uključen za vizuelni dizajn našeg okvira.
Za kreiranje glavnog okvira, koji će se smanjiti na 240px i povećati na 1920px, a ako je rezolucija veća od 1920px poravnati sa središtem, morate smjestiti kontejner odmah iza oznake tijela i zatvoriti ga prije završne oznake tijela. Sav ostatak nadjeva već treba ugraditi u njega.
Obično se ovaj kontejner naziva sličnim imenima, kao što su wrap, wrapper, itd., što znači da je to omotni blok koji uključuje sav sadržaj glavnog rasporeda, blokove, sadržaj. Stoga, nećemo ponovo izmišljati točak i pokušaćemo da koristimo opšteprihvaćena imena klasa.
Klasa je vrsta nadimka za bilo koji kontejner koji se može napisati jednom i koristiti bilo gdje, neograničen broj puta.
Na primjer, ako pišete klasu u css stilovima, recimo redblock , i dodijelite mu crvenu boju pozadine, tada će svaki blok kojem dodijelite ovu klasu imati crvenu boju pozadine. Dodjeljivanje klase je vrlo jednostavno. U navodnicima, željenom bloku se daje željeno ime, na primjer, redblock ili wrapper, ili privetvasya. Ovo je apstraktna klasa koju sami smislite, kao nadimak za štene.
Stoga bi naš kontejner za omatanje, kojem smo odlučili dodijeliti klasu omotača, mogao izgledati ovako:
Ali, budući da smo sigurni da ćemo na cijelom sajtu imati samo jedan omotni kontejner, svrsishodnije je dodijeliti mu ne klasu, već identifikator. Identifikator se razlikuje od klase po tome što se klasa može koristiti koliko god želite, a identifikator može biti samo jedan na stranici. Identifikator ima veći prioritet, pošto je jedan, može se posebno adresirati. Ovo se može uporediti sa redom na stanici. Svi su čuli kako su na željezničkoj stanici objavili, na primjer, građanka Kutuzova Adelina Matveevna, idite kod dispečera ...
U ovom slučaju, obraćanje građaninu punim imenom je analog identifikatora u html-u (također se kaže ID, ID, ID). I apel dragi putnici slanje voza..
Biće uporediv sa klasom, jer žalba ide svim putnicima, bez posebne žalbe.
Prisutnost identifikatora ne zabranjuje upotrebu klase, a isto ime klase i identifikator (ID) su različiti, a na takav blok se možete pozivati bilo po klasi ili po ID-u.
Na primjer:
Uobičajena pojava koja vam omogućava da pristupite ovom bloku na nekoliko načina. Ali ove informacije su općenite, za zagrijavanje. Ova lekcija pretpostavlja da već imate minimalno teoretsko razumijevanje i razumijevanje gore navedenog.
Dakle, nemojmo komplikovati proces koji se zove site layout, na osnovu kojeg će naš blok i dalje imati ID, a ne klasu, jedini je takve vrste, ali ni ovdje nam ne treba dodatna klasa. Stoga neka bude ovako:
Okvir je spreman, sada prema pravilima html5, koristit ćemo semantičke oznake koje pretraživačima olakšavaju razumijevanje strukture tako da glavna stvar ne ostane neprimijećena. Opet, ponavljam, nećemo učitavati opis oznaka u ovoj lekciji, jer za to postoji poseban odjeljak koji detaljno opisuje html oznake, uz demonstraciju i mogućnost da sami eksperimentirate.
Skrećem vam pažnju na činjenicu da se u početku naviknite na glavno pravilo - sadržajni dio u očima pretraživača ima to veću težinu, što je viši u strukturi. Stoga, prilikom postavljanja, ovo morate uzeti u obzir, slijedeći ovo pravilo:
Bočne trake i podnožje trebaju biti u izvornom kodu niže od glavnog dijela, što bi trebalo biti istaknuto oznakom članka, ukazujući na glavni sadržaj pretraživaču. Osim toga, koristit ćemo oznake: header, main, article, aside, footer, čija je svrha, prije svega, pokazati semantičku važnost i prioritete u strukturi. Stoga će izgled našeg još negumenog izgleda, nakon dodavanja ovih oznaka, izgledati ovako:
html kod
Prikaži kod
Okvir šablona
Za buduću stranicu
sadržaja
Ovako će izgledati naš html, ali da bismo vizualizirali naš izgled, moramo primijeniti css stilove. Da bismo to učinili, uključili smo naš css stilski fajl u glavu, kao što se očekivalo. Sada se možemo obratiti svakom bloku.
Za to su im dodijeljene klase i identifikatori iznad, kako se jedan div ne bi pobrkao s drugim. Ovo se ne odnosi na neke semantičke oznake koje imamo u jednini, jer ih možemo pozvati imenom kao tag, čak i bez klase i id-a. Ovo će smanjiti veličinu datoteke stila i neće utjecati na rezultat.
Dakle, sa html kodom, mislim da je sve jasno, ovo je samo budući okvir bez lica, a gumeni raspored se postiže manipulacijom css klasa. Responzivni izgled ima iste korijene, to je css. Omogućavaju vam da raspored učinite živim, odgovarajući na veličinu ekrana. Stoga će se dalje radnje izvoditi sa css stilskom datotekom.
Nećemo prelaziti preko svakog unosa, jer je ovo standard koji se nalazi u svakoj datoteci stila. Fokusiramo se samo na metodu koja omogućava da bočne trake ostanu fiksne, dok se središnji dio proteže od minimalne do maksimalne širine koju ćemo sami postaviti, a koja će biti između 240px - 1920px.
Sada prije nego što nastavite sa pregledom css koda(u kojoj nema ništa suvišno, ostavio sam samo ono što je potrebno za ovu lekciju, plus dodao pozadinu za blokove za preglednost, i minimalnu visinu da se blokovi dobro vide), obratimo pažnju na nekoliko nijansi:
1) Ako dobro pogledate, podnožje je izvan glavnog kontejnera. Ovo nije slučajno, jer će takav raspored omogućiti da se podnožje pritisne na dno. Mislim da su mnogi vidjeli podnožje na web stranicama koje ostaje pri dnu u bilo kojoj mjeri. I mnogi su hteli da znaju kako se to radi. Stoga ću usput objasniti mehanizam, nakon čega će sve biti jasno.
2) Mnogi, nakon što su vidjeli na web stranici 100% rastezljivo podnožje i zaglavlje, i gumeni centar, već smatraju da je ovo prilagodljiv dizajn. Ovo nije sasvim tačno, prilagodljivost je širi pojam i naprednije transformacije, ali to se ne razmatra u ovoj lekciji. Međutim, nametanje gume može biti različitih vrsta, uključujući i gornji tip. Stoga, hajde da odmah modernizujemo naš predložak tako da na kraju zaglavlje i podnožje budu uvijek 100%, ali istovremeno vidljivi dio sadržaja koji se nalazi u njima bude od 240px do 1920px i to u centru.
Ovo je metod koji sam koristio na ovoj stranici.
3) Stoga, moramo dodati još nešto našem izgledu kako bismo implementirali ideje opisane u drugom paragrafu. Dakle, kako bi naše podnožje i zaglavlje uvijek bili 100% (obično su ovi blokovi ispunjeni pozadinom, slikama itd.), a da istovremeno njihov sadržaj ne prelazi 1920px, uradićemo sljedeće:
1) Izvadite
2) Napravimo nekoliko blokova sa istom klasom, na primjer, ja to obično zovem .maxw, tako da neću odstupiti od svojih pravila. Hajde da ga dodamo u zaglavlje i podnožje i dodelimo ovu klasu našem glavnom odeljku sa klasom .section. Takođe ćemo dodati uslov za starije verzije IE-a, sa pozivom na skup pravila, pod uslovom da je unos iz IE-a< 9 (если такие пользователи еще есть), и специальный метатег metaime="
viewport"
za ispravan omjer mjerila na uređajima kao što su tableti, pametni telefoni itd. (takvih korisnika svakako ima).
3) Da bismo kontrolisali ponašanje naših blokova pri rezolucijama ekrana ispod 980px, dodajte pravila @media na samo dno stilskog fajla, u koji ćemo upisati potrebne promene za određene blokove, u našem slučaju za bočne trake. Natjerajmo ih da se pomjere ispod dijela sadržaja na rezoluciji ekrana ispod 980px i poravnaju se prema sredini.
Kao rezultat, naš html izgled će izgledati ovako:
Konačni html kod
Prikaži html kod
Okvir šablona
Za buduću stranicu
sadržaja
Naš stilski fajl će izgledati ovako:
css kod
Prikaži css kod
* ( margina: 0; padding: 0; ) html ( visina: 100%; ) zaglavlje, navigacija, odjeljak, glavni, članak, sa strane, podnožje (prikaz: blok; ) tijelo (visina: 100%; širina: 100%; pozadina: #fefefe; ) .maxw ( margina: 0 auto; min-width: 240px; max-width: 1920px; ) header (min-width: 240px; širina: 100%; visina: 220px; pozadina: #74C9FF; ) #wrapper ( pozicija: relativna; margina: 0 auto; visina: auto !važno; visina: 100%; /*min-height: 100%; - Potrebno za gurnuti podnožje na dno*/ padding: 5px 0; ) . sekcija ( širina: 100%; padding: 0 0 220px; pozicija: relativna; ) .section:after (sadržaj: ""; očisti: oba; prikaz: tablica; ) .mainwrap ( širina: 100%; float: lijevo; overflow : skriveno ; ) glavni ( padding: 0 240px 0 240px; min-height: 350px; margina: 0; ) članak ( padding: 0 5px; margina: 0 5px; pozadina: #EAF2F5; min-height: 350px; ) #s_left ( float : lijevo; širina: 240px; margin-left: -100%; lijevo: 0; pozicija: relativna; pozadina: #E88139; min-height: 350px; ) #s_right (fl zob: lijevo; širina: 240px margin-left: -240px; desno: 0; položaj: relativan; pozadina: #E86A3B; min-visina: 350px ) podnožje ( margina: -220px auto 0; širina: 100%; min-width: 240px; visina: 220px; pozadina: #AFBFC6; pozicija: relativna; ) /* Za prikaz na uređajima manjim od 980px */ @media screen i (min-width:240px) i (max-width:479px) (main (padding:10px; ) #s_left ( padding: 0; margin: 0 auto; float: nema; clear: oba; lijevo: 0; ) #s_right ( padding: 0; margina: 0 auto; float: nema; clear: oba; desno: 0; ) ) @medijski ekran i (min-width:480px) i (max-width:799px) ( main ( padding:10px; ) #s_left ( padding: 0; margina: 0 auto; float: nema; clear: oba; lijevo: 0; ) #s_right ( padding: 0; margin: 0 auto; float: nema; clear: oba; desno: 0; ) ) @media ekran i (min-width:800px) i (max-width:979px) ( main ( padding:10px; ) #s_left ( padding: 0; margina: 0 auto; float: nema; clear: oba; lijevo : 0; ) #s_right ( padding: 0; margina: 0 auto; float: nijedna; clear: oba; desno: 0; ) )
A sada pogledajmo posljednje korake s našim rasporedom i razmotrimo glavne nijanse gumenog rasporeda, zbog kojih smo dobili ne statički okvir, već gumeni.
1) Zaglavlje smo pomaknuli van, pošto je u prvoj verziji bilo unutar kontejnera za omotavanje. A ogradni kontejner je, zauzvrat, bio maksimalno 1920px, kao što je rečeno na samom početku. Ovo ne bi omogućilo da se zaglavlje napravi 100% široko, ono bi počivalo na roditeljskom 1920px. Zbog toga smo uklonili maksimalnu širinu sa omotača i premestili je izvan nje, plus smo kreirali .maxw klasu, kojoj smo dodelili ovih maksimalnih 1920px i poravnanje po sredini. Sada imamo 1920px za bilo koji blok sa .maxw klasom. Stoga, unutar zaglavlja i podnožja stavljamo div kontejner sa ovom klasom, tako da će se sve unutar njega protezati od 240px do 1920px, i biti centrirano ako je rezolucija veća od 1920px. To se može vidjeti promjenom rezolucije pomoću skale, na primjer, klizačem u operi.
2) Podnožje pritisnuto na dno. Ovo je takođe važna karakteristika rasporeda. Evo tajne:
Samo podnožje je izvan kontejnera za omatanje, koji zauzvrat ima 100% visinu. Također dio, koji se nalazi unutar omotača, ali sam obavija bočne trake i središnji dio, podmiče se od dna do visine podnožja koristeći padding. Ovo stvara prazan prostor ispod sadržaja. Budući da je visina 100% i podnožje je izvan bloka, ono je pomaknuto izvan vidokruga za udaljenost jednaku njegovoj visini. Dopunjavanjem dna sa padding:0 0 100px pripremamo prostor za pomicanje podnožja na negativnu visinu. Ovo će uvući vrh obrnutim redoslijedom, što znači da će se pomaknuti do svoje visine. Na kraju imamo 100px padding od dna, podnožje pomaknuto 100px ispod ekrana, a ovo je fiksna pozicija. Kada podnožju damo naredbu margin:-100px auto 0, podižemo ga sa dna ekrana u šupljinu koju smo napravili. Kao rezultat, imamo podnožje pritisnuto na dno ekrana.
3) Fluid layout interesuje mnoge, pa je naša lekcija posvećena izgledu sajta, tačnije, izgledu okvira sajta, koji treba da ima dve bočne trake fiksne širine, u našem slučaju to je 240px, ali u isto vreme na bilo koji ekran od 240px do 1920px, naš okvir treba proizvoljno da se proteže po širini, a html raspored treba da razumije da trebamo samo da rastegnemo središnji dio, ne dirajte bočnu traku!
Pa, mora da je tako. Raspored je spreman. Ostaje nam da shvatimo, zbog čega se ona ovako ponaša?
Sve je jasno sa kontejnerom za omotavanje, ali kako html raspored drži bočne trake dok rasteže dio sadržaja?
Ovdje sve nije tako komplikovano kao što se na prvi pogled čini. Izgled css stilova je takođe izgled, što znači da poštuje određena pravila izgleda za stilove sajta.
Važnu ulogu u tome igra uvlačenje s lijeve i desne strane, koje smo propisali za oznaku artikla. Ako pogledamo html kod, vidjet ćemo da postoji određeni kontejner sa id=container koji ima 100% širine. Unutar njega je naš članak, koji ima padding lijevo i desno, padding:10px 270px. Ali širina nije specificirana za njega, a s obzirom na činjenicu da ima display: block (za html5 elemente smo specificirali da prestaju biti inline), bit će pune širine, a bez eksplicitne širine, uvlake će biti unutra unutar kontejnera, a ne iza njih. Zahvaljujući ovoj kombinaciji imamo id=container, unutar kojeg se nalazi članak sa 270px lijevi i desni uvlaci. Imamo bočne trake od 240px svaka i po 20px za uvlake iz središnjeg članka.
Sada se sjetite šta sam gore napisao o pritisnutom podnožju. A ako ste zaboravili: vratite se i pročitajte ponovo, raspored gume nije ukrštenica, ne morate je pogađati, html izgled zahtijeva tačnost i brigu. Dakle, gumeni raspored koristi isti princip kao i podnožje pritisnuto na dno, samo što je došlo do vertikalnog pomaka, a ovdje je horizontalno.
zatvara
Posljednji dodir je pravilno pozicionirati naše bočne trake tako da razumiju da smo svjesni kakav je izgled web stranice i da stojimo tamo gdje kažemo. Da biste to učinili, možete povezati logiku. Ako se blok ne uklapa u širinu, onda se pomiče prema dolje. A ako su negativni brojevi podržani u pozicioniranju, onda možemo učiniti da efekat radi obrnuto.
Lijevi blok dolazi prvi, pa mu dajte negativni padding od margin-left:-100% i on će se prevariti tako što će se pojaviti točno u praznom prostoru koji nam je članak pripremio. Layout je dobar, fluidni raspored je još bolji, a gotovi izgled još bolji, posebno nakon dugih borbi. Dakle, kontrolni udarac u našeg protivnika koji se zove gumeni raspored je pomak desne bočne trake za sopstvenu širinu ulijevo. Zašto lijevo?
Da, jer je bio desno, nije mu stajalo 240px, a pomaknut je dole u levi ugao, sve je po pravilima, html ovde nije kriv, a i css je sa karakterom. Stoga, margin-left:-240px rješava preostali problem klizeći desni okvir tačno u pripremljeni prazan prostor desno od strane.
Pa, ovdje smo ispitali, razvrstali sva zasjenjena mjesta gumenog izgleda rasporeda. Na primjeru sve provjereno, primijenjeni su izvorni kodovi. Layout je posao koji zahtijeva stalne vještine, bilo da je gumeni ili fiksni. Responzivni izgled je zasebno pitanje. Možda u sljedećoj lekciji nećemo praviti okvir od nule, već ga imamo. Bolje ćemo postojećem dodati prilagodljivost, poigrati se sa fontom, promijeniti pozadinu, slike ovisno o rezoluciji ekrana, općenito ćemo detaljno analizirati nijanse izgleda, tačnije prilagodljivog izgleda. I ne zaboravite provjeriti valjanost html-a nakon izgleda stranice, sigurno neće biti gore.
Ispod je priložen izvorni kod sa gotovim izgledom, koji se može preuzeti. Ako želite nešto promijeniti, kao što je broj bočnih traka ili njihov ID, visina zaglavlja ili podnožja i druge promjene, onda jednostavno možete koristiti besplatni mrežni generator rasporeda žičanog okvira. Možete kreirati i okvir sa fiksnim rasporedom, i dobiti gumeni raspored + propisane uslove za prilagodljivi raspored.
Sve ovo se može uraditi na našem generatoru šablona.
Gumeni raspored
„Gumeni raspored
Svi šabloni koje smo kreirali imali su fiksnu širinu: to jest, širina jedinica, kolona, oblasti itd. ostaje konstantna kada se promeni veličina prozora pretraživača. Većina komercijalno uspješnih web stranica koristi ovaj princip od pojave interneta. Ovaj pristup se pokazao kao najefikasnija metoda rasporeda za kreiranje kvalitetnih dizajna u okruženju koje nije uvijek prilagođeno dizajnerima.
Međutim, ne mogu a da ne razmislim "gumeni" raspored– kreiranje stranica koje mijenjaju veličinu u zavisnosti od okvira za prikaz.
Dizajneri žele kreirati web stranice koje zaista uzimaju u obzir preferencije korisnika. Stoga je nemoguće odbaciti upućene jake argumente protiv stranice fiksne širine i uvodne iza"gumeni" raspored. U suštini, web stranica fiksne širine odražava sklonost dizajnera da kontrolira stvarnu upotrebu, dok stranice koje se mijenjaju na osnovu okvira za prikaz prvenstveno uzimaju u obzir potrebe korisnika.
Možemo reći da bi s velikom veličinom ekrana, stranica trebala zauzeti cijelu dostupnu površinu, a s malom veličinom trebala bi se shodno tome smanjiti. Ne bi bilo sasvim pošteno reći da se "gumeni" izgled pokušava prilagoditi svim korisnicima, ali ima zadatak blizak ovome. Internet je konglomerat mnogih sistema koji služe širokom spektru korisnika na načine koji su maksimalno prilagođeni njihovim individualnim potrebama. Slažete se da je nemoguća ista percepcija sadržaja ili funkcionalnosti iste stranice. Zašto bi izgled trebao biti isti za sve? Fluid izgled je prikladniji za web i bolje uzima u obzir njegove prednosti i slabosti nego stranice fiksne veličine. Kao što je ranije navedeno, što je rješenje prirodnije, djelotvornije je.
Donedavno nam mogućnosti web dizajna nisu dozvoljavale da u potpunosti uživamo u "gumenom" izgledu. Nove mogućnosti pretraživača, zajedno sa inovacijama svjesnim uređaja u CSS-u i JavaScript-u, omogućavaju dizajnerima da kreiraju mnogo dinamičnije stranice.
Inovativni dizajneri se sada mogu baviti takozvanim "responzivnim" web dizajnom. Ethan Marcotte, glasni zagovornik, tvrdi da ovaj pristup otvara nove mogućnosti:
Moguće je učiniti stranicu jednostavnim za korištenje i atraktivnim izgledom, uz korištenje standardnih tehnologija kako bi stranica bila ne samo fleksibilnija, već se i prilagođavala okruženju u kojem je oličena.
Ove tehnologije se razvijaju neverovatno brzo, pa sam odlučio da ih ne obrađujem u svojoj knjizi. Najbolje prakse u oblasti "responzivnog" web dizajna još nisu pronađene.
Ipak, osnovni principi dizajna ostaju na snazi bez obzira na razvoj novog pristupa. Takođe je pošteno da dizajneri nastave da dele kontrolu nad sopstvenim kreacijama sa korisnicima koji žele da kontrolišu svoje postupke. Bilo bi pogrešno misliti da "responzivni" web dizajn znači da korisnicima daje potpunu kontrolu, jer ono što im je zaista potrebno jeste neke karakteristike. Korisnici se nadaju da će im dizajneri ne samo pružiti neku vrstu ljuske, već će je i usavršiti dovoljno da se može upravljati.
Dizajner bi trebao donijeti neke odluke za korisnika, ali ne sve, već samo one koje pomažu u percepciji. Dizajner omogućava korisniku da kontroliše najvažnije aspekte percepcije za svoje potrebe, ali korisnik se takođe mora osjećati stabilno i pouzdano.
Responzivni web dizajn ne olakšava ovaj zadatak. U stvari, on to komplikuje. Biće još više situacija koje treba uzeti u obzir, više kombinacija elemenata korisničkog interfejsa u raznim kombinacijama, što će otežati percepciju sajtova. Na ovaj način, mreža postaje još važnija za cjelokupni dizajn; stvaranje stroge mreže koja podupire "responzivni" web dizajn učinit će ga utemeljenijim i robusnijim.
Isti principi dizajna zasnovani na mreži mogu se koristiti iu fluidnom i responzivnom web dizajnu. Jedinice se mogu kombinovati u kolone i oblasti, a veličina elemenata se može menjati u zavisnosti od glavnih parametara mreže. Ovi elementi bi trebali rasti i smanjivati se prema istim parametrima, ali važno je zapamtiti da se ne mora sve mijenjati. Neki elementi mogu i trebaju ostati nepromijenjeni. U okruženju u kojem se veličina elemenata beskonačno mijenja, važno je održavati stvari dosljednim, kako bi se korisnicima pružila neka vrsta reference. Kako se ova teorija bude razvijala, pojaviće se nove mogućnosti za dizajnere koji rade u ovoj oblasti. Ali centralna uloga dizajnera, osobe koja upravlja korisničkim iskustvom, ostat će nepromijenjena.
Iz knjige Adobe InDesign CS3 autor Zavgorodny VladimirIzgled u više kolona Glavna karakteristika dizajna bilo koje novine je raspored u više kolona. Budući da je teško zamisliti red dužine cijele stranice novina, dizajner stranicu razbija u zasebne kolone; njihov broj zavisi od formata novina.
Iz knjige 300 najboljih programa za sve prilike autor Leontijev Vitalij PetrovičIzgled sa ilustracijama Još jedna karakteristika izgleda časopisa koju je važno imati na umu je više slika. Ako su za novinski članak (kraći, koji zauzima dio stranice) dovoljne jedna ili dvije ilustracije, onda su za duži časopisni članci potrebni
Iz knjige Šta ne piše u Delphi knjigama autor Grigoriev A. B.Konačni dizajn i izgled letka Prvi zadatak u konačnom dizajnu letka je dizajn natpisa „Novo“, koji je, zasigurno, našim čitaocima već duže vrijeme bio bod na oku. Za dizajn ćemo odaberite jednostavnu vizualnu tehniku koja se tako često koristi
Iz knjige HTML 5, CSS 3 i Web 2.0. Izrada modernih web stranica. autor Dronov VladimirKonačni izgled stranice Konačni izgled stranice u našem slučaju će se svesti na sljedeće operacije: postavljanje servisnih informacija na stranicu (na primjer, zaglavlja i podnožja); popunjavanje trake pravim tekstom (pravi TV programi, izbor pravih
Iz knjige HTML 5, CSS 3 i Web 2.0. Izrada modernih web stranica autor Dronov VladimirIzgled teksta Prvi zadatak izgleda je da dodijeli stilove uvezenom tekstu. Također biste trebali ukloniti dodatne prazne linije (obično se koriste za naslove i bočne trake u skupu), ostavljajući samo prazan red između teksta bočne trake i sljedećeg normalnog
Iz knjige Mobile First! autor Wroblewski LukePrelom i priprema za štampu teksta
Iz autorove knjige1.3.4.2. Gumene linije i rasterske operacije Sada moramo dati korisniku mogućnost crtanja linija. Da bismo to učinili, koristimo standardnu "gumenu" liniju: korisnik pritisne lijevu tipku miša i, držeći je, pomiče miš. Sve dok je dugme pritisnuto,
Iz autorove knjige Iz autorove knjigeIzgled sa više kolona Izgled sa više kolona je nešto što je nedostajalo u Web dizajnu već duže vreme. Pojedinačni entuzijasti su ga dugo implementirali koristeći tabele ili kontejnere, ali sada imaju "legitimna" sredstva za razbijanje teksta u proizvoljan broj kolona,
Iz autorove knjige7 Layout PRINCIPI ORGANIZOVANJA SADRŽAJA I UI elementi koji se koriste u dizajnu konvencionalnih sajtova nesumnjivo mogu biti korisni u dizajnu mobilnih web aplikacija. Ali kako možete biti sigurni da će ovi principi biti relevantni za bilo koga
Vlad Merzhevich
Fluidni raspored sa tri kolone je verovatno najfleksibilniji i najprilagodljiviji raspored koji postoji. Kombinacija procenata i piksela za određivanje širine kolona omogućava vam da kreirate različite rasporede, birajući ih za svoje potrebe. Na sl. Na slici 5.17 prikazane su opcije za rasporede u tri kolone, zbog pogodnosti su numerisane.
Rice. 5.17. Tri kolone rasporeda
Ovdje simbol postotka (%) znači da je širina kolone postavljena kao postotak širine rasporeda, px - širina kolone je navedena u pikselima, a znak beskonačnosti (∞) da kolona zauzima preostali prostor. Unatoč obilju različitih rasporeda, principi njihove konstrukcije ostaju isti i uključuju dvije glavne metode: pozicioniranje i plutajuće elemente. Također možete koristiti tabele za kreiranje kolona jednake visine.
Korišćenje pozicioniranja
Da biste kontrolisali položaj slojeva u odnosu na roditeljski element, potrebno je da svojstvo položaja nadređenog postavite na relativno, a podređene elemente koji formiraju kolone na apsolutno. Struktura koda za prva četiri izgleda će biti ista i prikazana je u primjeru 5.13.
Primjer 5.13. Dvije kolone u pikselima ili tri u procentima
Ovdje su kolone numerirane redom, tj. kolona 1 je lijevo, kolona 2 je u sredini, a kolona 3 je desno.
Pozicioniranje ima određeni nedostatak koji ograničava upotrebu ove metode - kada dodajete podnožje, ono će biti skriveno ispod kolona. To je zato što sloj izgleda nema visinu sam po sebi, tako da ne "gura" sloj podnožja prema dolje. Ako je podnožje apsolutno neophodno na stranici, trebalo bi da koristite metodu konstruisanja kolona na osnovu plutajućih elemenata. Također, ova metoda ne radi u IE6 zbog prisustva grešaka u njemu.
Za izgled #1, u kojem je širina prve kolone fluidna, a ostali fiksni, stil će biti sljedeći (primjer 5.14).
Primjer 5.14. Izgled br. 1
Zaglavlje (pozadina: #D5BAE4; ) .layout ( pozicija: relativna; /* Relativno pozicioniranje */ ) .layout DIV ( pozicija: apsolutno; /* Apsolutno pozicioniranje */ ) .col1 (pozadina: #C7E3E4; /* Boja pozadine * / lijevo: 0; /* Položaj lijeve margine */ desno: 300px; /* Položaj desne margine */ ) do širine kolone 3 */ ) .col3 (pozadina: #ECD5DE; širina: 100px; desno: 0; )
Kolone sa datom širinom imaju svojstvo širine, a njihov položaj lijevo ili desno je specificiran svojstvom lijevo ili desno. Gumena širina preostale kolone se gradi nakon istovremenog dodavanja lijevog i desnog, čije su vrijednosti iste kao i širina fiksnih stupova.
Izgledi br. 2 (Primjer 5.15) i br. 3 (Primjer 5.16) su izgrađeni na istom principu.
Primjer 5.15. Izgled br. 2
Zaglavlje (pozadina: #D5BAE4; ) .layout (pozicija: relativna; ) .layout DIV (pozicija: apsolutna; ) .col1 (pozadina: #C7E3E4; širina: 100px; ) .col2 (pozadina: #E0D2C7; lijevo: 100px; desno: 200px;) .col3 (pozadina: #ECD5DE; širina: 200px; desno: 0; )
Primjer 5.16. Izgled br. 3
Zaglavlje (pozadina: #D5BAE4; ) .layout (pozicija: relativna;) .layout DIV (pozicija: apsolutna; ) .col1 (pozadina: #C7E3E4; širina: 100px; ) .col2 (pozadina: #E0D2C7; širina: 200px; lijevo: 100px; ) .col3 (pozadina: #ECD5DE; lijevo: 300px; desno: 0; )
Layout #4, u kojem je širina svih kolona data kao postotak, ima neke nijanse. Ako je potrebna ista širina svih kolona, može se podesiti frakciono (33,33%), ali pretraživač Opera ne zna da radi sa procentualnim vrijednostima u razlomcima, pa će se u njemu pojaviti „rupe“ između kolona (slika 5.18). ).
Rice. 5.18. Širina kolone navedena u razlomcima u procentima
U takvim situacijama treba preći na nejednake udjele, na primjer, 33%, 34%, 33%, kao što je prikazano u primjeru 5.17.
Primjer 5.17. Izgled br. 4
Zaglavlje (pozadina: #D5BAE4; ) .layout (pozicija: relativna;) .layout DIV (pozicija: apsolutna; ) .col1 (pozadina: #C7E3E4; širina: 33%; ) .col2 (pozadina: #E0D2C7; lijevo: 33 %; širina: 34%; ) .col3 (pozadina: #ECD5DE; desno: 0; širina: 33%; )
Neki pretraživači mogu imati mali razmak između kolona. Rješava se korištenjem ne cijelih, već razlomanih procentualnih vrijednosti, tj. 33,3% umjesto 33%.
Preostali rasporedi, u kojima su dva stupca po tri gumena, predstavljaju posebnu grupu, jer se mogu tumačiti na različite načine. Dakle, širina jedne kolone je prikazana u pikselima, druge kao postotak širine rasporeda, a širina preostale se izračunava automatski. Na sl. Slika 5.19 prikazuje različite pristupe izračunavanju širine kolona koristeći raspored #5 kao primjer.
Rice. 5.19. Širina dva gumena stuba
U prvoj opciji, širina prve kolone je postavljena kao postotak širine izgleda, širina druge kolone se izračunava automatski, a treća kolona ima fiksnu širinu u pikselima. U drugoj varijanti kolone se međusobno mijenjaju, a širina prve kolone se automatski izračunava. Treća opcija pretpostavlja da se ukupna širina gumenih stubova uzima kao 100% i da se iz nje izračunava širina prvog i drugog stuba.
Prva i druga opcija se lako implementiraju slično kodu sa dvije kolone u pikselima. Samo umjesto širine u px navodimo%. Primjer 5.18 prikazuje stil izgleda #5 sa prvim stupcem postavljenim kao postotak.
Primjer 5.18. Izgled # 5. Izračunava se širina druge kolone
Header (pozadina: #D5BAE4; ) .layout (pozicija: relativna;) .layout DIV (pozicija: apsolutna; ) .col1 (pozadina: #C7E3E4; širina: 50%; ) .col2 (pozadina: #E0D2C7; lijevo: 50 %; desno: 200px; ) .col3 (pozadina: #ECD5DE; desno: 0; širina: 200px; )
Stil izgleda #5 sa izračunatom prvom kolonom prikazan je u primjeru 5.19.
Primjer 5.19. Izgled br. 5. Izračunava se širina prve kolone
Zaglavlje (pozadina: #D5BAE4; ) .layout (pozicija: relativna;) .layout DIV (pozicija: apsolutna; ) .col1 (pozadina: #C7E3E4; lijevo: 0; desno: 200px; margin-desno: 50%; ) . col2 (pozadina: #E0D2C7; širina: 50%; desno: 200px; ) .col3 (pozadina: #ECD5DE; širina: 200px; desno: 0; )
Prva kolona se ne može ograničiti udesno preko desnog svojstva, pošto će vrijednost biti 50%+200px, u CSS2 nema takvih izračunatih vrijednosti. Dakle, hajde da primenimo fokus - ograničimo prvi sloj na desnoj strani na širinu od 200px kroz desno i pomerimo ga ulevo do širine druge kolone od 50% koristeći margin-right. Naš sloj je apsolutno pozicioniran, tako da takve mahinacije ni na koji način neće uticati na širinu.
Treća opcija sa dva gumena stuba zahteva dodatni sloj, nazovimo ga guma, u odnosu na koji će se postaviti širina stubova (primer 5.20).
Primjer 5.20. Izgled #5: Procentualna širina dvije kolone
Konstrukcija tlocrta br. 6 je slična tlocrtu br. 5, pa se na njemu nećemo zadržavati. Što se tiče rasporeda br. 7, postoji opcija za njega koja može izazvati poteškoće. Ovo se odnosi na slučaj kada želite da širinu lijevog i desnog stupca učinite izračunatim i jednakim jedna drugoj. Da biste to učinili, širina prve i treće kolone treba biti jednaka 50% (slika 5.20).
Rice. 5.20. Izgled #7 Kolone jednake širine
Da biste ostavili mjesta za drugu kolonu, koristite svojstvo margin-right za prvu kolonu i margin-left za treću. Vrijednost ovih svojstava bit će polovina širine druge kolone. Dakle, ako je 200px, onda je margin-desno : 100px (primjer 5-21).
Primjer 5.21. Raspored br. 7. Širina gumenih stubova je ista
Zaglavlje (pozadina: #D5BAE4; ) .layout (pozicija: relativna;) .layout DIV (pozicija: apsolutna; ) .col1 (pozadina: #C7E3E4; lijevo: 0; desno: 50%; margin-desno: 100px; ) . col2 (pozadina: #E0D2C7; širina: 200px; lijevo: 50%; margin-left: -100px; ) .col3 (pozadina: #ECD5DE; lijevo: 50%; desno: 0; margin-left: 100px; )
Ne možete direktno koristiti svojstvo širine, jer će dodavanje margine samo povećati širinu, a ne smanjiti je kako želimo. Stoga, širinu formiraju lijeva i desna svojstva koja su istovremeno postavljena. Sa pozicioniranjem druge kolone, teško je odrediti vrijednost lijevo ili desno, jer će biti jednaka 50%-200px. Tako smo postavili poziciju lijeve margine na 50% (lijevo: 50%), a zatim pomaknuli cijeli stupac ulijevo za polovinu njegove širine preko svojstva margin-left (margin-left: -100px).
Budući da se širina nekih kolona izračunava automatski, preporučuje se da ograničite minimalnu širinu izgleda dodavanjem svojstva min-width selektoru BODY. Tada se širina kolona neće smanjiti kada se dostigne navedeno ograničenje.
TIJELO (min. širina: 800px; /* Minimalna širina izgleda */ )
Vrijednost min-width ovisi o izgledu i sadržaju stranice i obično se bira empirijski.
Korištenje plutajućih elemenata
Plutajući elementi su još jedna svestrana metoda za izgradnju raznih rasporeda sa tri stupca. Za razliku od pozicioniranja, omogućava vam da ne brinete o problemu podnožja, jer će podnožje uvijek biti smješteno na svom mjestu ispod najviše kolone.
Kolone se grade pomoću svojstva float u kombinaciji sa svojstvima margine i širine. Ovisno o odabranom rasporedu, mijenja se i redoslijed kolona u kodu, slojevi uvijek slijede prvi kojima se dodaje float.
Izgled # 1. Gumeni prvi stupac
Širina druge i treće kolone je specificirana u pikselima, a njihova pozicija je specificirana kroz svojstvo float sa vrijednošću desno. Za prvu kolonu, također morate postaviti svojstvo margin-right sa vrijednošću jednakom ukupnoj širini preostalih kolona (primjer 5.22).
Primjer 5.22. Izgled br. 1
Izgled # 2. Gumeni srednji stub
Širina prvog i trećeg stupca date su u pikselima, a njihove pozicije su plutajuće s lijevom za prvu kolonu i desnom za treću. Srednja kolona, da bi zadržala svoj izgled, sadrži marginu univerzalnog svojstva koja postavlja uvlačenje lijevo i desno (primjer 5.23).
Primjer 5.23. Izgled br. 2
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Izgled # 3. Gumeni treći stupac
Položaj prve i druge kolone je specificiran kroz svojstvo float sa vrijednošću lijevo, za treću kolonu trebate postaviti lijevu marginu (margin-left) na ukupnu širinu preostalih kolona (primjer 5.24).
Primjer 5.24. Izgled br. 3
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Izgled #4: Sve širine kolona su postavljene kao postotak
Da biste napravili ovaj raspored, mnoge opcije zasnovane na prethodnim rasporedima će raditi, ali umjesto piksela, trebali biste navesti procente. Drugi način je prikazan u primjeru 5-25, koji koristi samo svojstva float i width.
Primjer 5.25. Izgled br. 4
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Izgled br. 5. Širina gume sa dvije kolone
Na sl. 5.19, pokazano je da se raspored br. 5, koji ima dva gumena stuba, može tumačiti na različite načine.
- Širina prve kolone je određena kao procenat širine izgleda, treće kolone je u pikselima, a srednja kolona zauzima preostali prostor.
- Širina druge kolone je određena kao procenat širine izgleda, treće kolone je u pikselima, a prva kolona zauzima preostali prostor.
- Ukupna širina dva gumena stuba uzima se kao 100%, a širina stubova je naznačena kao procenat ove vrednosti.
Izračunata širina srednje kolone
Ovdje je širina prve kolone specificirana u procentima, a njena pozicija je specificirana kroz svojstvo float sa vrijednošću lijevo, za treći stupac širina je navedena u pikselima, a vrijednost svojstva float kao desno. Za srednju kolonu ostaje samo da se margine s lijeve i desne strane podese na širinu kolona (primjer 5.26).
Primjer 5.26. Izgled 5.1
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Izračunata širina prve kolone
Ovo je najzahtjevniji izgled, jer širina prve kolone nije direktno specificirana. Ali da biste ograničili sadržaj, morate navesti vrijednost za svojstvo margin-right koje kombinuje procente i piksele. U CSS2, kao što je već spomenuto, ovo se ne može postaviti, pa dodajemo još jedan sloj unutar sloja col1 koji se zove wrap i dodajemo uvlaku svakom od ovih slojeva. Jedan u procentima, drugi u pikselima (primjer 5.27).
Primjer 5.27. Izgled 5.2
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Procentualna širina dva stupca
U ovom rasporedu, ukupna širina gumenih stubova se uzima kao 100%, tako da nam je potreban dodatni sloj za referencu na širinu unutrašnjih stubova. Ovaj sloj, nazvan guma, radi sa slojem col3 kao raspored sa dve kolone, a unutrašnji slojevi col1 i col2 su poravnati horizontalno primenom svojstva float (primer 5.28).
Primjer 5.28. Izgled 5.3
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Rasporedi 6, 7 i njihove varijacije izgrađeni su po istom principu kao i raspored br. 5, sa izuzetkom rasporeda br. 7, kod kojeg je širina lijevog i desnog stupa gumena i jednaka jedna drugoj.
Prvo pripremamo bazu, specificiramo redoslijed slojeva u HTML kodu.
Col1 ( širina: 50%; float: lijevo; ) .col2 ( širina: 200px; float: lijevo; ) .col3 ( širina: 50%; float: desno; )
To nije sve, slojevi još ne formiraju kolone i nižu se na način koji je nama potpuno neprikladan. Morate pomaknuti drugu kolonu ulijevo za polovinu njene širine (margin-left : -100px ) i natjerati treću kolonu da sjedne na svoje mjesto. Da biste to učinili, povećajte njegovu širinu tako da bude jednaka ili veća od 50% + 100px (polovina druge kolone). Svojstvo margin-left s negativnom vrijednošću je najbolje, nakon čega će se kolone kreirati. Ima još nekih nijansi. Krajnji stupovi su međusobno spojeni, što je jasno vidljivo kada njihova visina prelazi visinu srednjeg stupa (sl. 5.21).
Rice. 5.21. Naslagani zvučnici
Osim toga, u lijevoj koloni tekst se nalazi desno, au desnoj koloni tekst s lijeve strane je skriven ispod pozadine središnje kolone. To se neće primijetiti ako je visina ovog stupca velika, ali to nije uvijek moguće. Da biste prevazišli ove nedostatke, potrebno je staviti još jedan sloj unutar krajnjih kolona (u primjeru se zove wrap) i već za njih postaviti boju pozadine kolone, potrebne margine i uvlake. Konačni kod je prikazan u primjeru 5.29.
Primjer 5.29. Izgled br. 7
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Margine i ivice u rasporedu sa tri kolone
Svojstvo paddinga namerno nije dodato datim primerima izgleda, pošto kod služi samo kao osnova za izgled, a na vama je da odlučite u konkretnim slučajevima da li su margine potrebne u kolonama ili ne. Dodavanje margina i ivica blokovnom elementu povećava njegovu širinu, što se mora uzeti u obzir pri postavljanju. Međutim, širina raste samo ako je sloj postavljen na width . Pogledajmo nekoliko primjera gdje će se širina promijeniti, a gdje ne.
Div ( /* padding utiče na širinu */ širinu: 200px; padding: 10px; ) div ( /* padding ne utiče na širinu */ pozicija: apsolutna; levo: 20px; desno: 20px; padding: 10px; ) div ( / * padding utiče na širinu */ float: lijevo; širina: 50%; padding: 10px; ) div ( /* padding ne utiče na širinu */ margin-right: 50%; padding: 10px; )
U onim kolonama u kojima je potreban padding ili obrub, ali njihovo dodavanje će prekinuti izgled, možete koristiti ugniježđeni sloj i postaviti potrebna svojstva za njega.
U ovom primjeru, širina sloja postavljena na 200 piksela neće se promijeniti, ali će se dodati margine i ivica.
Tabela kao kolone
Tabela je korisna za jednostavno i brzo kreiranje kolona iste visine. Ova brzina se postiže s nekoliko stvari. Prvo, struktura koda za bilo koji raspored ostaje ista, kolone u kodu, kao u slučaju float , nikada ne mijenjaju svoj redoslijed. Drugo, širina ćelija se automatski izračunava na osnovu njihovog sadržaja, pa je dovoljno navesti širinu potrebnih kolona, a preostale će se prilagoditi ukupnoj širini tabele. Primjer 5.30 prikazuje izgled #1 napravljen na stolu.
Primjer 5.30. Izgled br. 1
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
| Kolona 1 | Kolona 2 | Kolona 3 |
Dodavanje svojstva padinga u TD selektor poništava atribut cellpadding oznake
