01.10.2013 01:04
73845
Raspored gume site (kao i fiksni layout) započinje stvaranjem tzv. kostura, odnosno okvira za daljnji razvoj. Općenito, html izgled je konstruktor. Prvo se stvara glavni spremnik, čija će osnova kasnije biti odgovorna za minimalnu i maksimalnu širinu cijelog mjesta, granice. Ako sve učinite kako treba, promjenom maksimalne veličine možete povećati maksimalnu veličinu stranice, na primjer, s 1280px na 1360px ili 1920px s malim ili nikakvim promjenama koda (a ponekad i bez njih). Ne biste trebali napraviti beskonačnu gumu jer je nečitljiva na velikim monitorima. Idealna opcija bila bi html izgled koji uključuje sve glavne razlučivosti zaslona, uključujući mobilne, na primjer, gumeni izgled za razlučivosti zaslona od 240px do 1920px.
Postoji nekoliko vrsta html izgleda koji je vizualno drugačiji. Ukratko razmotrimo ove vrste rasporeda prije nego što prijeđemo na praktičnu konstrukciju okvira:
Vizualno različite vrste izgleda su: Fluid layout, fiksni layout, adaptivni layout. Responzivni izgled može se kombinirati s fluidnim izgledom.
Značajke svake vrste izgleda:
1) Fiksni raspored- mogućnost da glavni kontejner stranice ima istu širinu bez obzira na razlučivost monitora. Ako je zaslon manji od fiksne veličine glavnog spremnika, pojavljuje se bočno pomicanje (lijevo-desno pomicanje).
2) Raspored gume- sposobnost glavnog spremnika mjesta da se rasteže u širinu od i do specificiranih minimalnih i maksimalnih veličina. Fluid layout može biti bez navođenja minimalne (neće izgledati baš pristojno na zaslonima manjim od Npx, statični objekti se mogu preklapati ako se ne doda prilagodljivost) ili maksimalne veličine, tada će se proširivati na neodređeno vrijeme (zamislite kako će članak izgledati na razlučivost 7000px, praktički u jednom retku), tako da dobar html izgled uvijek ima razumna ograničenja. Stoga uvijek trebate provjeriti rezultat izgleda na različitim rezolucijama iu različitim preglednicima.
3) Adaptivni izgled- mogućnost prilagodbe glavnog spremnika i bilo kojeg elementa stranice razlučivosti zaslona, čime možete mijenjati 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ćuju da automatski odredite razlučivost monitora, vrstu uređaja (mobilni, pametni telefon, tablet) i automatski zamijenite navedene vrijednosti. To daje velike mogućnosti. Na primjer, kada kombinirate fluidni izgled s prilagodljivim, možete prilagoditi prikaz web-mjesta, počevši od najmanjih mobilnih rezolucija do najvećih monitora. Adaptivni raspored ne utječe na mogućnosti gumenog ili fiksnog rasporeda, on ih nadopunjuje.
Stoga bi najbolja opcija danas bio html raspored, izvorno izgrađen kao fluidan raspored, na primjer 980px-1920px, nadograđen na 240px pomoću prilagodljivog izgleda. Uvijek se treba sjetiti glavne razlike:
Rubber layout radi samo sa spremnicima, dok prilagodljivi raspored radi i sa spremnicima i s njihovim sadržajem, omogućujući vam da mijenjate objekte kao što su fontovi, zamjenjujete jedan objekt drugim i još mnogo toga, ovisno o razlučivosti zaslona ili uređaju. Stoga pokušajte uzeti u obzir ovu nijansu prilikom planiranja i izrade svojih projekata i zapamtite da se danas fluidni raspored u kombinaciji s prilagodljivim izgledom smatra dobrim oblikom u izradi web stranica, a sutra može postati neizgovoreni standard. Stoga, kako kasnije ne bismo morali sustizati, bolje je danas napredovati, čineći gornju kombinaciju normom za sebe.
Također je vrijedno razmotriti valjanost stranice prilikom izgleda. Postoji mišljenje da današnja valjanost utječe na performanse, barem u Google tražilici. Stoga se pri izradi projekta uvijek isplati pogledati u online validator i provjeriti valjanost te, ako je moguće, smanjiti prisutnost pogrešaka što je više moguće. Obično se glavna stranica stranice provjerava valjanost. Prema njemu je uobičajeno odrediti valjanost stranice. Također je vrijedno spomenuti da većina CMS-a na nekim mjestima ima kod koji ne prolazi provjeru valjanosti.
Vrlo često se to može primijetiti u cjelovitim vijestima, gdje postoji vizualni uređivač, posebno kod pretjerane upotrebe oblikovanja i svih vrsta isticanja pomoću samog uređivača. Ali bez ovoga, nigdje, pa ako je glavna stranica web mjesta potvrđena, onda će to biti potpuno dostojan rezultat, a interne stranice mogu se proći ako je moguće. Ponekad morate uređivati čak iu motoru, što ne može svatko, 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 pretvoriti se u maniju da tjera vas da činite valjanost radi valjanosti. Vi samo trebate pokušati to učiniti što učinkovitije, a broj grešaka svesti na minimum, u okviru svojih mogućnosti. Na kraju, ako postoji desetak ili dva grešaka, stranica neće prestati raditi, tako da ih se ne treba bojati.
Sada prijeđimo na izradu okvira stranice., koji koristi gumeni raspored:
Prvo trebamo 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 okvir i unutarnje blokove. To su samo nužne informacije za preglednik, online knjižnica za razumijevanje html5, budući da je to još uvijek samo preporuka, a specifikacija je još uvijek html 4.1, iako se html5 već naveliko koristi. Također u servisnim oznakama postoje meta oznake, naslov i datoteka stila css uključena je za vizualni dizajn našeg okvira.
Za izradu glavnog okvira, koja će se smanjiti na 240px i povećati na 1920px , a ako je rezolucija veća od 1920px poravnati prema sredini, potrebno je smjestiti spremnik odmah iza oznake tijela, a zatvoriti ga prije završne oznake tijela. Sav ostatak nadjeva već treba implementirati unutar njega.
Obično se ovaj spremnik naziva sličnim imenima, kao što su wrap, wrapper itd., što znači da je to omotni blok koji uključuje sve sadržaje glavnog izgleda, blokova, sadržaja. Stoga nećemo ponovno izmišljati kotač i pokušat ćemo koristiti općeprihvaćene nazive klasa.
Klasa je vrsta nadimka za bilo koji spremnik koji se može napisati jednom i koristiti bilo gdje, neograničen broj puta.
Na primjer, ako napiš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 razreda vrlo je jednostavno. Pod navodnicima, željeni blok dobiva željeni naziv, na primjer, redblock ili wrapper ili privetvasya. Ovo je apstraktna klasa koju sami smišljate, poput nadimka za psića.
Stoga bi naš spremnik za omatanje, kojem smo odlučili dodijeliti klasu za omatanje, mogao izgledati ovako:
No, budući da smo sigurni da ćemo imati samo jedan omotni spremnik na cijelom mjestu, svrhovitije je dodijeliti mu identifikator, a ne klasu. Identifikator se od klase razlikuje 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, budući da je jedan, može se posebno adresirati. To se može usporediti s redom na kolodvoru. Svi su čuli kako su na željezničkoj stanici najavili, na primjer, građanku Kutuzovu Adelinu Matvejevnu, idite dispečeru ...
U ovom slučaju, obraćanje građaninu punim imenom analogno je identifikatoru u html-u (kažu i ID, ID, ID). I apel kao dragi putnici ispraćamo vlak..
Bit će usporediv s klasom, jer apel ide na sve putnike, bez posebnog apela.
Prisutnost identifikatora ne zabranjuje korištenje klase, a isto ime klase i identifikator (ID) su različiti, a na takav blok možete se odnositi ili prema klasi ili prema ID-u.
Na primjer:
Uobičajena pojava koja vam omogućuje pristup ovom bloku na nekoliko načina. Ali ova informacija je općenita, za zagrijavanje. Ova lekcija pretpostavlja da već imate minimalno teoretsko razumijevanje i razumijevanje gore navedenog.
Dakle, da ne kompliciramo proces koji se zove web layout, na temelju kojeg će naš blok i dalje imati id a ne klasu, on je jedini takve vrste, ali ni tu nam ne treba dodatna klasa. Zato neka bude ovako:
Okvir je spreman, sada prema pravilima html5, koristit ćemo semantičke oznake koje tražilicama olakšavaju razumijevanje strukture kako glavna stvar ne bi prošla nezapaženo. Opet, ponavljam, nećemo učitati opis oznaka u ovoj lekciji, za to postoji poseban odjeljak koji detaljno opisuje html oznake, uz demonstraciju i priliku da sami eksperimentirate.
Dopustite mi da vam skrenem pozornost na činjenicu da se u početku naviknete na glavno pravilo - sadržajni dio u očima tražilica ima to veću težinu, što je viši u strukturi. Stoga, prilikom postavljanja, to morate uzeti u obzir, slijedeći ovo pravilo:
Bočne trake i podnožje trebaju biti u izvornom kodu niže od glavnog dijela, koji bi trebao biti istaknut oznakom članka, pokazujući tražilici glavni sadržaj. Osim toga, koristit ćemo oznake: header, main, article, aside, footer, čija je svrha, prije svega, pokazati semantičko značenje i prioritete u strukturi. Stoga će izgled našeg još negumenog izgleda, nakon dodavanja ovih oznaka, izgledati ovako:
html kod
Prikaži kod
Okvir predloška
Za buduću stranicu
sadržaj
Ovako će izgledati naš html, ali da bismo vizualizirali naš izgled, moramo primijeniti CSS stilove. Da bismo to učinili, uključili smo našu datoteku stila css u glavu, kao što je i očekivano. Sada se možemo okrenuti svakom bloku.
Za to su im gore dodijeljene klase i identifikatori, kako ne bi brkali jedan div s drugim. Ovo se ne odnosi na neke semantičke oznake koje imamo u jednini, budući da ih možemo nazivati imenom kao oznaku, čak i bez klase i id-a. Ovo će smanjiti veličinu stilske datoteke, a neće utjecati na rezultat.
Dakle, s 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ćuju vam da izgled bude živ, koji odgovara veličini zaslona. Stoga će se daljnje radnje izvoditi s datotekom stila css.
Nećemo prelaziti na svaki unos jer je to standard koji se nalazi u svakoj datoteci stila. Usredotočimo se samo na metodu koja omogućuje bočnim trakama da ostanu fiksne dok se središnji dio proteže od minimalne do maksimalne širine koju ćemo sami postaviti, a ona će biti u rasponu od 240px - 1920px.
Prije nego što nastavite s pregledom css koda(u kojem nema ništa suvišno, ostavio sam samo ono što je potrebno za ovu lekciju, plus dodao pozadinu za blokove za vidljivost i minimalnu visinu tako da se blokovi mogu dobro vidjeti), obratimo pozornost na nekoliko nijansi:
1) Ako bolje pogledate, podnožje je izvan glavnog spremnika. Ovo nije slučajno, jer će takav raspored omogućiti pritiskanje podnožja na dno. Mislim da su mnogi vidjeli podnožje na web stranicama koje ostaje na dnu na bilo kojoj ljestvici. I mnogi su htjeli znati kako se to radi. Stoga ću usput objasniti mehanizam nakon čega će sve postati jasno.
2) Mnogi, nakon što su na stranici vidjeli 100% rastezljivo podnožje i zaglavlje, te gumeni centar, već smatraju da je ovo prilagodljiv dizajn. To nije sasvim točno, prilagodljivost je širi pojam i naprednije transformacije, no to se ne razmatra u ovoj lekciji. Međutim, nametanje gume može biti različitih vrsta, uključujući gore navedeni tip. Stoga, idemo odmah modernizirati naš predložak tako da na kraju zaglavlje i podnožje uvijek budu 100%, ali da istovremeno vidljivi dio sadržaja koji se nalazi u njima bude od 240px do 1920px i to u centru.
Ovo je metoda koju 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 istovremeno njihov sadržaj ne prelazi 1920px, učinit ćemo sljedeće:
1) Izvadite
2) Stvorimo nekoliko blokova s istom klasom, na primjer, ja to obično zovem .maxw, tako da neću odstupiti od svojih pravila. Dodajmo ga u zaglavlje i podnožje i dodijelimo ovu klasu našem glavnom odjeljku s klasom .section. Također ćemo dodati uvjet za starije verzije IE-a, s pozivom na skup pravila, pod uvjetom da je unos iz IE-a< 9 (если такие пользователи еще есть), и специальный метатег metaIme="
prozor za prikaz"
za točan omjer skale na uređajima kao što su tableti, pametni telefoni i sl. (takvih korisnika svakako ima).
3) Kako bismo kontrolirali ponašanje naših blokova pri rezolucijama ekrana ispod 980px, dodajte pravila @media na samo dno style datoteke u koju ćemo upisati potrebne promjene za određene blokove, u našem slučaju za bočne trake. Prisilimo ih da se pomaknu ispod dijela sa sadržajem pri razlučivosti zaslona ispod 980 px i poravnajmo ih prema sredini.
Kao rezultat toga, naš će html izgled izgledati ovako:
Konačni html kod
Prikaži html kod
Okvir predloška
Za buduću stranicu
sadržaj
Naša stilska datoteka će izgledati ovako:
css kod
Prikaži css kod
* ( margina: 0; padding: 0; ) html ( height: 100%; ) header, nav, section, main, article, side, footer ( display: block; ) body ( height: 100%; width: 100%; pozadina: #fefefe; ) .maxw (margina: 0 auto; min-width: 240px; max-width: 1920px; ) zaglavlje (min-width: 240px; širina: 100%; visina: 220px; pozadina: #74C9FF; ) #wrapper (position: relative; margin: 0 auto; height: auto !important; height: 100%; /*min-height: 100%; - Potrebno za guranje podnožja na dno*/ padding: 5px 0; ) . odjeljak ( širina: 100%; padding: 0 0 220px; položaj: relativno; ) .section:after ( sadržaj: ""; jasno: oboje; prikaz: tablica; ) .mainwrap ( širina: 100%; float: lijevo; preljev : skriveno; ) glavno ( padding: 0 240px 0 240px; min-height: 350px; margin: 0; ) article ( padding: 0 5px; margin: 0 5px; background: #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-lijevo: -240px; desno: 0; položaj: relativan; pozadina: #E86A3B; minimalna visina: 350 px ) podnožje ( margina: -220px auto 0; width: 100%; min-width: 240px; height: 220px; background: #AFBFC6; position: relative; ) /* 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: none; clear: both; left: 0; ) #s_right ( padding: 0; margina: 0 auto; float: none; clear: both; right: 0; ) ) @media screen and (min-width:480px) and (max-width:799px) ( main ( padding:10px; ) #s_left ( padding: 0; margina: 0 auto; float: ništa; jasno: oboje; lijevo: 0; ) #s_right ( padding: 0; margina: 0 auto; float: ništa; jasno: oboje; desno: 0; ) ) @media screen and (min-width:800px) and (max-width:979px) ( main ( padding:10px; ) #s_left ( padding: 0; margin: 0 auto; float: none; clear: both; left : 0; ) #s_right ( padding: 0; margina: 0 auto; float: none; clear: oboje; desno: 0; ) )
A sada analizirajmo posljednje korake s našim izgledom i razmotrimo glavne nijanse gumenog rasporeda, zbog kojih nismo dobili statički okvir, već gumeni.
1) Premjestili smo zaglavlje van jer je u prvoj verziji bilo unutar spremnika za omotanje. A priloženi spremnik je zauzvrat bio maksimalno 1920px, kao što je rečeno na samom početku. To ne bi omogućilo da zaglavlje bude 100% široko, ono bi počivalo na roditelju od 1920px. Stoga smo uklonili maksimalnu širinu iz one koja omotava i premjestili je izvan nje, plus smo stvorili klasu .maxw, kojoj smo dodijelili ovih maksimalnih 1920px i središnje poravnanje. Sada imamo 1920px za bilo koji blok s klasom .maxw. Stoga unutar zaglavlja i podnožja stavljamo div spremnik s ovom klasom, tako da će se sve unutar njega protezati od 240px do 1920px, te će biti centrirano ako je rezolucija veća od 1920px. To se može vidjeti promjenom razlučivosti pomoću ljestvice, na primjer, klizačem u operi.
2) Podnožje pritisnuto na dno. Ovo je također važna značajka izgleda. Ovdje je tajna:
Samo podnožje je izvan spremnika za omatanje, koji zauzvrat ima 100% visine. Također dio, koji je unutar omota, ali sam obavija bočne trake i središnji dio, podstavlja od dna do visine podnožja pomoću podloge. Ovo stvara prazan prostor ispod sadržaja. Budući da je visina 100%, a podnožje je izvan bloka, pomaknuto je izvan pogleda za udaljenost jednaku njegovoj visini. Postavljanjem dna s 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 ispunu od 100 piksela od dna, podnožje pomaknuto 100 piksela ispod zaslona, a ovo je fiksna pozicija. Kada podnožju damo naredbu margin:-100px auto 0, podižemo ga s dna zaslona u šupljinu koju smo stvorili. Kao rezultat toga, imamo podnožje pritisnuto na dno ekrana.
3) Fluid layout zanima mnoge, pa je naša lekcija posvećena izgledu web stranice, točnije, izgledu okvira web stranice, koji bi trebao imati dvije bočne trake fiksne širine, u našem slučaju to je 240px, ali u isto vrijeme, na bilo kojem ekranu od 240px do 1920px, naš okvir bi se trebao proizvoljno rastezati po širini, a html izgled bi trebao shvatiti da trebamo rastegnuti samo središnji dio, ne dirajte bočnu traku!
Pa mora biti tako. Raspored je spreman. Ostaje nam da dokučimo, zbog čega se ona tako ponaša?
Sve je jasno sa spremnikom za omatanje, ali kako html izgled drži bočne trake dok rasteže sadržajni dio?
Ovdje nije sve tako komplicirano kao što se na prvi pogled čini. Raspored css stilova također je raspored, što znači da poštuje određena pravila rasporeda za stilove stranice.
Važnu ulogu u tome ima uvlačenje s lijeve i desne strane koje smo propisali za oznaku članka. Ako pogledamo html kod, vidjet ćemo da postoji određeni spremnik s id=container koji ima 100% širine. Unutar njega je naš članak, koji ima ispunu lijevo i desno, padding:10px 270px. Ali širina nije navedena za njega, a s obzirom na činjenicu da ima display:block (naveli smo za html5 elemente da prestaju biti umetnuti), bit će pune širine i bez eksplicitne širine, uvlake unutar će biti unutar spremnika, a ne iza njih. Zahvaljujući ovoj kombinaciji imamo id=container unutar kojeg se nalazi članak s lijevom i desnom uvlakom od 270px. Imamo bočne trake od po 240 px i po 20 px za uvlake od središnjeg članka.
Sad se sjetite što sam gore napisao o pritisnutom podnožju. A ako ste zaboravili: vratite se i ponovno pročitajte, gumeni raspored nije križaljka, ne morate je pogađati, html izgled zahtijeva točnost i brigu. Dakle, gumeni raspored koristi isti princip kao i podnožje pritisnuto na dno, samo što je došlo do okomitog pomaka, a ovdje je vodoravno.
zatvara
Posljednji detalj je pravilno postaviti naše bočne trake tako da shvate da smo svjesni što je izgled web stranice i da stoje tamo gdje mi kažemo. Da biste to učinili, možete povezati logiku. Ako blok ne stane u širinu, tada se pomiče prema dolje. A ako su negativni brojevi podržani u pozicioniranju, tada možemo učiniti da učinak djeluje obrnuto.
Lijevi blok je prvi, pa mu dajte negativnu popunu margin-left:-100% i zavarat će se pojavljivanjem točno u praznom prostoru koji je članak pripremio za nas. Layout je dobar, fluid layout je još bolji, a gotovi layout je još bolji, pogotovo nakon dugih bitaka. Dakle, kontrolni udarac našem protivniku koji se zove rubber layout je pomak desne bočne trake za vlastitu širinu ulijevo. Zašto lijevo?
Da, jer je bio desno, nije mu stalo 240px, i pomaknut je dolje u lijevi kut, sve je po pravilima, html nije tu kriv, a css je također sa karakterom. Stoga margin-left:-240px rješava preostali problem klizeći desni okvir točno u pripremljeni prazan prostor desno od strane.
Pa, ovdje smo ispitali, razvrstali sva sjenovita mjesta gumenog rasporeda rasporeda. Na primjeru je 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 napraviti okvir od nule, već ga imamo. Bolje ćemo dodati prilagodljivost postojećem, igrati se s fontom, mijenjati pozadinu, slike ovisno o razlučivosti zaslona, općenito, detaljno ćemo analizirati nijanse izgleda, točnije prilagodljivog izgleda. I ne zaboravite provjeriti valjanost html-a nakon izgleda stranice, sigurno neće biti gore.
Ispod je priložen izvorni kod s 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, jednostavno možete upotrijebiti besplatni mrežni generator žičanog izgleda. Možete kreirati i okvir s fiksnim rasporedom i dobiti gumeni raspored + propisane uvjete za adaptivni izgled.
Sve se to može učiniti na našem generatoru predložaka.
Raspored gume
„Gumeni izgled
Svi predlošci koje smo izradili imali su fiksnu širinu: to jest, širina jedinica, stupaca, područja itd. ostaje konstantna kada se promijeni veličina prozora preglednika. Većina komercijalno uspješnih web stranica koristi ovaj princip od pojave Interneta. Ovaj se pristup pokazao kao najučinkovitija metoda izgleda za stvaranje kvalitetnog dizajna u okruženju koje nije uvijek naklonjeno dizajnerima.
Međutim, ne mogu ne uzeti u obzir "gumeni" raspored– stvaranje stranica koje mijenjaju veličinu ovisno o prikazu.
Dizajneri žele stvoriti web stranice koje stvarno uzimaju u obzir preferencije korisnika. Stoga je nemoguće odbaciti snažne argumente usmjerene protiv stranice fiksne širine i uvodne po"gumeni" raspored. U biti, web stranica fiksne širine odražava sklonost dizajnera da kontrolira stvarnu upotrebu, dok se stranice koje se mijenjaju na temelju prikaza prvenstveno fokusiraju na potrebe korisnika.
Možemo reći da bi s velikom veličinom zaslona stranica trebala zauzimati cijelo dostupno područje, a s malom veličinom trebala bi se smanjiti u skladu s tim. 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 sustava koji služe širokom rasponu korisnika na načine koji su maksimalno prilagođeni njihovim individualnim potrebama. Složite se da je nemoguća ista percepcija sadržaja ili funkcionalnosti iste stranice. Zašto bi izgled svima bio isti? Fluidni raspored prikladniji je za web i bolje uzima u obzir njegove prednosti i slabosti nego stranice fiksnih veličina. Kao što je ranije navedeno, što je otopina prirodnija, to je učinkovitija.
Sve donedavno mogućnosti web dizajna nisu nam dopuštale da u potpunosti uživamo u "gumenom" izgledu. Nove mogućnosti preglednika, zajedno s inovacijama u CSS-u i JavaScriptu koje se odnose na uređaj, omogućuju dizajnerima stvaranje puno dinamičnijih stranica.
Inovativni dizajneri sada se mogu baviti takozvanim "responzivnim" web dizajnom. Ethan Marcotte, glasni zagovornik, tvrdi da ovaj pristup otvara nove mogućnosti:
Stranicu je moguće učiniti jednostavnom za korištenje i atraktivnim izgledom, uz korištenje standardnih tehnologija kako bi stranica bila ne samo fleksibilnija, već se i prilagodila okolini u kojoj se nalazi.
Te se tehnologije razvijaju nevjerojatno brzo, pa sam ih odlučio ne obraditi u svojoj knjizi. Najbolji primjeri iz prakse u području "responzivnog" web dizajna još nisu pronađeni.
Ipak, temeljna načela dizajna ostaju valjana bez obzira na razvoj novog pristupa. Također je pošteno da dizajneri nastave dijeliti kontrolu nad svojim kreacijama s korisnicima koji žele kontrolirati njihove radnje. Bilo bi pogrešno misliti da "responzivni" web dizajn znači dati korisnicima potpunu kontrolu, jer ono što im je stvarno potrebno neke značajke. Korisnici se nadaju da im dizajneri neće samo pružiti neku vrstu ljuske, već će je i dotjerati dovoljno da bude upravljiva.
Dizajner bi trebao donijeti neke odluke za korisnika, ali ne sve, već samo one koje pomažu u percepciji. Dizajner omogućuje korisniku da kontrolira najvažnije aspekte percepcije za svoje potrebe, ali se korisnik također mora osjećati stabilno i pouzdano.
Responzivni web dizajn ne olakšava ovaj zadatak. Zapravo, on to komplicira. Bit će još više situacija koje treba uzeti u obzir, više kombinacija elemenata korisničkog sučelja u raznim kombinacijama, što će otežati percepciju stranica. Na taj način rešetka postaje još važnija za cjelokupni dizajn; stvaranje stroge mreže koja podupire "responzivni" web dizajn učinit će ga utemeljenijim i robusnijim.
Ista načela dizajna temeljena na mreži mogu se koristiti u fluidnom i responzivnom web dizajnu. Jedinice se mogu kombinirati u stupce i područja, a veličina elemenata se može mijenjati ovisno o glavnim parametrima mreže. Ovi elementi bi trebali rasti i smanjivati se prema istim parametrima, ali važno je upamtiti da se ne treba sve mijenjati. Neki elementi mogu i trebaju ostati nepromijenjeni. U okruženju u kojem elementi mijenjaju veličinu bez kraja, važno je održavati stvari dosljednima, pružiti korisnicima neku vrstu reference. Kako se ova teorija bude razvijala, bit će novih prilika za dizajnere koji rade u ovom području. No središnja uloga dizajnera, osobe koja upravlja korisničkim iskustvom, ostat će nepromijenjena.
Iz knjige Adobe InDesign CS3 Autor Zavgorodni VladimirIzgled u više stupaca Glavna značajka dizajna bilo koje novine je raspored u više stupaca. Budući da je teško zamisliti redak duljine cijele novinske stranice, dizajner stranicu lomi u zasebne stupce; njihov broj ovisi o formatu novina.
Iz knjige 300 najboljih programa za sve prilike Autor Leontjev Vitalij PetrovičIzgled s ilustracijama Još jedna značajka 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že časopisne članke potrebne
Iz knjige Što ne piše u Delphi knjigama autor Grigoriev A. B.Konačni dizajn i prijelom letka Prvi zadatak za finalni dizajn letka je dizajn natpisa "Novo", koji zasigurno već duže vrijeme trne u oku našim čitateljima.Za dizajn ćemo odabrati jednostavna vizualna tehnika koja se tako često koristi u
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 (primjerice, zaglavlja i podnožja); ispunjavanje trake stvarnim tekstom (pravi TV programi, izbor stvarnih
Iz knjige HTML 5, CSS 3 i Web 2.0. Izrada modernih web stranica Autor Dronov VladimirRaspored teksta Prvi zadatak izgleda je dodjeljivanje stilova uvezenom tekstu. Također biste trebali ukloniti dodatne prazne retke (obično se koriste za naslove i bočne trake u skupu), ostavljajući samo prazan redak između teksta bočne trake i sljedeće normale
Iz knjige Mobile First! autor Wroblewski LukePrijelom i priprema teksta za tisak
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 tipka pritisnuta,
Iz autorove knjige Iz autorove knjigeIzgled u više stupaca Izgled u više stupaca je nešto što je dugo nedostajalo u web dizajnu. Pojedinačni entuzijasti dugo su to implementirali pomoću tablica ili spremnika. Ali sada imaju "legitimna" sredstva za razbijanje teksta u proizvoljan broj stupaca,
Iz autorove knjige7 Layout NAČELA ORGANIZIRANJA SADRŽAJA I UI elementi koji se koriste u dizajnu konvencionalnih stranica mogu bez sumnje biti korisni u dizajnu mobilnih web aplikacija. Ali kako možete biti sigurni da će ova načela biti relevantna za bilo koga
Vlad Merzhevich
Fluidni raspored s tri stupca nedvojbeno je najfleksibilniji i najprilagodljiviji izgled koji postoji. Kombinacija postotaka i piksela za određivanje širine stupaca omogućuje vam stvaranje različitih izgleda, odabirom prema vašim potrebama. Na sl. Slika 5.17 prikazuje opcije za rasporede u tri stupca, radi praktičnosti one su numerirane.
Riža. 5.17. Raspored s tri stupca
Ovdje simbol postotka (%) znači da je širina stupca postavljena kao postotak širine izgleda, px - širina stupca navedena je u pikselima, a znak beskonačnosti (∞) da stupac zauzima preostali prostor. Unatoč obilju različitih izgleda, načela njihove konstrukcije ostaju ista i uključuju dvije glavne metode: pozicioniranje i plutajuće elemente. Također možete koristiti tablice za stvaranje stupaca jednake visine.
Korištenje pozicioniranja
Da biste kontrolirali položaj slojeva u odnosu na nadređeni element, trebate postaviti svojstvo položaja nadređenog na relativno, a podređene elemente koji tvore stupce na apsolutno. Struktura koda za prva četiri izgleda bit će ista i prikazana je u primjeru 5.13.
Primjer 5.13. Dva stupca u pikselima ili tri u postocima
Ovdje su stupci numerirani redom, tj. stupac 1 je lijevo, stupac 2 je u sredini, a stupac 3 je desno.
Pozicioniranje ima određeni nedostatak koji ograničava korištenje ove metode - kada dodajete podnožje, ono će biti skriveno ispod stupaca. To je zato što sloj izgleda sam po sebi nema visinu, pa ne "gura" sloj podnožja prema dolje. Ako je podnožje apsolutno potrebno na stranici, trebali biste koristiti metodu konstruiranja stupaca na temelju plutajućih elemenata. Također, ova metoda ne radi u IE6 zbog prisutnosti pogrešaka u njemu.
Za izgled #1, u kojem je širina prvog stupca fluidna, a ostali su fiksni, stil će biti sljedeći (primjer 5.14).
Primjer 5.14. Izgled br. 1
Zaglavlje ( pozadina: #D5BAE4; ) .layout ( položaj: relativno; /* Relativno pozicioniranje */ ) .layout DIV ( položaj: apsolutno; /* Apsolutno pozicioniranje */ ) .col1 ( pozadina: #C7E3E4; /* Boja pozadine * / lijevo: 0; /* Položaj lijeve margine */ desno: 300px; /* Položaj desne margine */ ) na širinu stupca 3 */ ) .col3 ( pozadina: #ECD5DE; širina: 100px; desno: 0; )
Stupci zadane širine imaju svojstvo širine, a njihov položaj lijevo ili desno određen je svojstvom lijevo odnosno desno. Gumena širina preostalog stupca izgrađena je nakon istovremenog dodavanja lijevog i desnog, čije su vrijednosti iste kao širina fiksnih stupaca.
Izgledi br. 2 (primjer 5.15) i br. 3 (primjer 5.16) izgrađeni su 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; )
Izgled #4, u kojem je širina svih stupaca dana kao postotak, ima neke nijanse. Ako je potrebna ista širina svih stupaca, može se postaviti frakcijsko (33,33%), ali preglednik Opera ne zna kako raditi s frakcijskim postotnim vrijednostima, pa će se u njemu pojaviti "rupe" između stupaca (Sl. 5.18). ).
Riža. 5.18. Širine stupaca navedene u frakcijskim postocima
U takvim situacijama trebate prijeći na nejednake udjele, npr. 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 preglednici mogu imati mali razmak između stupaca. Rješava se korištenjem ne cjelobrojnih, već frakcijskih postotnih vrijednosti, tj. 33,3% umjesto 33%.
Preostali rasporedi, u kojima su dva stupca po tri gumena, predstavljaju posebnu skupinu, jer se mogu tumačiti na različite načine. Dakle, širina jednog stupca je naznačena u pikselima, drugog kao postotak širine izgleda, a širina preostalog se automatski izračunava. Na sl. Slika 5.19 prikazuje različite pristupe izračunavanju širine stupca koristeći izgled #5 kao primjer.
Riža. 5.19. Širina dva gumena stupca
U prvoj se opciji širina prvog stupca postavlja kao postotak širine izgleda, širina drugog stupca izračunava se automatski, a treći stupac ima fiksnu širinu u pikselima. U drugoj varijanti stupci se međusobno mijenjaju, a širina prvog stupca se automatski izračunava. Treća opcija pretpostavlja da se ukupna širina gumenih stupova uzima kao 100% i da se iz nje izračuna širina prvog i drugog stupca.
Prva i druga opcija lako se implementiraju slično kodu s dva stupca u pikselima. Samo umjesto širine u px navodimo%. Primjer 5.18 prikazuje stil izgleda #5 s prvim stupcem postavljenim kao postotak.
Primjer 5.18. Izgled # 5. Izračunava se širina drugog stupca
Zaglavlje ( 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 rasporeda #5 s izračunatim prvim stupcem prikazan je u primjeru 5.19.
Primjer 5.19. Izgled br. 5. Izračunava se širina prvog stupca
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; )
Prvi stupac ne može se ograničiti udesno preko svojstva desno, budući da će vrijednost biti 50%+200px, ne postoje takve izračunate vrijednosti u CSS2. Dakle, primijenimo fokus - ograničite prvi sloj s desne strane na širinu od 200 px kroz desnu i pomaknite ga ulijevo na širinu drugog stupca od 50% koristeći margin-desno. Naš sloj je apsolutno pozicioniran, tako da takve makinacije neće ni na koji način utjecati na širinu.
Treća opcija s dva gumena stupca zahtijeva dodatni sloj, nazovimo ga gumeni, u odnosu na koji će se postaviti širina stupaca (primjer 5.20).
Primjer 5.20. Izgled #5: širina postotka u dva stupca
Konstrukcija plana br. 6 je slična tlocrtu br. 5, pa se na njemu nećemo zadržavati. Što se tiče rasporeda br. 7, za njega postoji opcija koja može izazvati poteškoće. Ovo se odnosi na slučaj kada želite da se širina lijevog i desnog stupca izračuna i izjednači jedna s drugom. Da biste to učinili, širina prvog i trećeg stupca trebala bi biti jednaka 50% (slika 5.20).
Riža. 5.20. Izgled #7 Stupci jednake širine
Da biste ostavili mjesta za drugi stupac, koristite svojstvo margin-right za prvi stupac i margin-left za treći. Vrijednost ovih svojstava bit će pola širine drugog stupca. Dakle, ako je 200px, onda je margina-desno: 100px (primjer 5-21).
Primjer 5.21. Izgled br. 7. Širina gumenih stupova je ista
Zaglavlje (pozadina: #D5BAE4; ) .layout (položaj: relativno;) .layout DIV (položaj: apsolutni; ) .col1 (pozadina: #C7E3E4; lijevo: 0; desno: 50%; margina-desno: 100px; ) . col2 (pozadina: #E0D2C7; širina: 200px; lijevo: 50%; margina-lijevo: -100px; ) .col3 (pozadina: #ECD5DE; lijevo: 50%; desno: 0; margina-lijevo: 100px; )
Svojstvo širine ne možete koristiti izravno jer će dodavanje margine samo povećati širinu, a ne smanjiti je kako želimo. Prema tome, širina se formira istovremeno postavljenim svojstvima lijevo i desno. S pozicioniranjem drugog stupca, teško je odrediti vrijednost lijevo ili desno jer će biti jednaka 50%-200px. Dakle, položaj lijeve margine postavljamo na 50% (lijevo: 50%), a zatim cijeli stupac pomičemo ulijevo za pola njegove širine putem svojstva margin-left (margin-left: -100px).
Budući da se širina nekih stupaca izračunava automatski, preporučuje se ograničiti minimalnu širinu izgleda dodavanjem svojstva min-width selektoru BODY. Tada se širina stupaca neće smanjiti kada se dosegne navedena granica.
BODY ( min. širina: 800 px; /* 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 još su jedna svestrana metoda za izgradnju raznih izgleda s tri stupca. Za razliku od pozicioniranja, omogućuje vam da ne brinete o problemu podnožja, jer će se podnožje uvijek nalaziti na svom mjestu ispod najvišeg stupca.
Stupci se grade pomoću svojstva float u kombinaciji sa svojstvima margine i širine. Ovisno o odabranom izgledu mijenja se i redoslijed stupaca u kodu, uvijek prvi slijede slojevi kojima se dodaje float.
Izgled # 1. Gumeni prvi stupac
Širina drugog i trećeg stupca određena je u pikselima, a njihov položaj naveden je kroz svojstvo float s vrijednošću right. Za prvi stupac također trebate postaviti svojstvo margin-right s vrijednošću jednakom ukupnoj širini preostalih stupaca (primjer 5.22).
Primjer 5.22. Izgled br. 1
Izgled # 2. Gumeni srednji stup
Širine prvog i trećeg stupca dane su u pikselima, a njihovi položaji lebde lijevo za prvi stupac i desno za treći. Srednji stupac, kako bi zadržao svoj izgled, sadrži marginu univerzalnog svojstva koja postavlja uvlaku s lijeve i desne strane (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 prvog i drugog stupca naveden je kroz svojstvo float s vrijednošću left , za treći stupac trebate postaviti lijevu marginu (margin-left ) na ukupnu širinu preostalih stupaca (primjer 5.24).
Primjer 5.24. Izgled br. 3
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Izgled #4: Sve širine stupaca postavljene su u postocima
Za izradu ovog izgleda, mnoge opcije temeljene na prethodnim izgledima će funkcionirati, ali umjesto piksela, trebali biste navesti postotke. Drugi način prikazan je 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 # 5. Širina gume u dva stupca
Na sl. 5.19, pokazalo se da se tlocrt br. 5, koji ima dva gumena stupa, može tumačiti na različite načine.
- Širina prvog stupca određena je kao postotak širine izgleda, treći stupac je u pikselima, a srednji stupac zauzima preostali prostor.
- Širina drugog stupca određena je kao postotak širine izgleda, treći stupac je u pikselima, a prvi stupac zauzima preostali prostor.
- Ukupna širina dva gumena stupca je uzeta kao 100%, a širina stupaca je naznačena kao postotak ove vrijednosti.
Izračunata širina srednjeg stupca
Ovdje je širina prvog stupca navedena u postocima, a njegov položaj je specificiran kroz svojstvo float s vrijednošću left, za treći stupac, širina je navedena u pikselima, a vrijednost svojstva float kao desno. Za srednji stupac preostaje samo postaviti margine s lijeve i desne strane na širinu stupaca (primjer 5.26).
Primjer 5.26. Izgled 5.1
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Izračunata je širina prvog stupca
Ovo je najzahtjevniji izgled jer širina prvog stupca nije izravno određena. Ali da biste ograničili sadržaj, trebate navesti vrijednost za svojstvo margin-desno koje kombinira postotke i piksele. U CSS2, kao što je već spomenuto, to se ne može postaviti, pa dodajemo još jedan sloj unutar col1 sloja koji se zove wrap i dodajemo uvlaku svakom od tih slojeva. Jedan u postocima, drugi u pikselima (primjer 5.27).
Primjer 5.27. Izgled 5.2
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Postotna širina dva stupca
U ovom rasporedu, ukupna širina gumenih stupova uzeta je kao 100%, tako da nam je potreban dodatni sloj za referencu širine unutarnjih stupova. Ovaj sloj, nazvan guma, radi sa slojem col3 kao raspored u dva stupca, a unutarnji slojevi col1 i col2 poravnati su vodoravno primjenom svojstva float (primjer 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 na istom principu kao i raspored br. 5, s izuzetkom rasporeda br. 7, u kojem je širina lijevog i desnog stupca gumena i jednaka jedna drugoj.
Prvo pripremamo bazu, odredimo redoslijed slojeva u HTML kodu.
Stupac1 (širina: 50%; float: lijevo; ) .col2 (širina: 200px; float: lijevo; ) .col3 (širina: 50%; float: desno; )
To nije sve, slojevi još ne tvore nikakve stupce i nižu se na nama potpuno neprikladan način. Trebate pomaknuti drugi stupac ulijevo za pola njegove širine (margin-left: -100px) i prisiliti treći stupac da sjedne na svoje mjesto. Da biste to učinili, povećajte njegovu širinu tako da bude jednaka ili veća od 50% + 100px (polovica drugog stupca). Najbolje je svojstvo margin-left s negativnom vrijednošću, nakon čega će se stvoriti stupci. Postoje još neke nijanse. Ekstremni stupovi su spojeni jedan s drugim, što je jasno vidljivo kada njihova visina premašuje visinu srednjeg stupca (slika 5.21).
Riža. 5.21. Složeni zvučnici
Osim toga, u lijevom stupcu tekst je s desne strane, au desnom stupcu tekst s lijeve strane skriven je ispod pozadine središnjeg stupca. To se neće primijetiti ako je visina ovog stupca velika, ali to nije uvijek moguće. Da bi se prevladali ovi nedostaci, potrebno je staviti još jedan sloj unutar krajnjih stupaca (u primjeru se zove wrap ) i već za njih postaviti boju pozadine stupca, 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 obrubi u rasporedu s tri stupca
Svojstvo padding namjerno nije dodano u dane primjere izgleda, budući da kod služi samo kao osnova za izgled, a na vama je da odlučite u određenim slučajevima jesu li margine potrebne u stupcima ili ne. Dodavanje margina i obruba elementu bloka povećava njegovu širinu, što se mora uzeti u obzir prilikom postavljanja. Međutim, širina raste samo ako je sloj postavljen na širinu. Pogledajmo nekoliko primjera gdje će se širina promijeniti, a gdje ne.
Div ( /* ispuna utječe na širinu */ width: 200px; padding: 10px; ) div ( /* ispuna ne utječe na širinu */ pozicija: apsolutna; lijevo: 20px; desno: 20px; padding: 10px; ) div ( / * dopuna utječe na širinu */ float: lijevo; širina: 50%; dopuna: 10px; ) div ( /* dopuna ne utječe na širinu */ margin-desno: 50%; dopuna: 10px; )
U onim stupcima u kojima je potrebna ispuna 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 obrub.
Tablica kao stupci
Tablica je korisna za jednostavno i brzo kreiranje stupaca iste visine. Ova brzina se postiže na nekoliko stvari. Prvo, struktura koda za bilo koji izgled ostaje ista, stupci u kodu, kao u slučaju float, nikada ne mijenjaju svoj redoslijed. Drugo, širina ćelija izračunava se automatski na temelju njihovog sadržaja, pa je dovoljno zadati širinu potrebnih stupaca, a preostali će se prilagoditi ukupnoj širini tablice. 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
| Stupac 1 | Stupac 2 | Stupac 3 |
Dodavanje svojstva padding TD selektoru nadjačava atribut cellpadding oznake
