Loš tablični raspored. Izbor između bloka i tabličnog sloja. Nedostaci tabelarne laž

Među oružjem su vrlo često sporovi o izboru wonstick moda, Neki daju preferencije blok sloj, drugi webmasteri su skloni tabularni način, Ovo pitanje je prilično kontroverzno, i one i druge majstore njihovog prava. Postoje neke situacije u kojima se prijavljuje blok sloj, postoje trenutci u kojima će se koristiti najbolja opcija tablični raspored, Ali u svakom slučaju, pri odabiru metode, potrebno je odbiti iz nekih značajki koje su svojstvene i tablicu i blok sloj, Glavna značajka ovih metoda je prednosti i nedostaci, o čemu će se raspravljati u nastavku.

Prednosti tablica polaganja:

  • Čine tablice na mnogo lakše od blokova;
  • S malim dozvolama, stolovi se ne preklapaju
  • Jednostavno stvoriti pregledniku web-lokaciju.

Nedostaci tabelarnih slojeva:

  • Veliki broj koda;
  • Nisu svi projekti mogu biti tretirani s tablicama.

Prednosti blokiranih slojeva:

  • Mala količina koda koji značajno smanjuje težinu stranice;
  • Iznad brzine opterećenja u usporedbi s tablicama;
  • Možete stvoriti dizajne bilo koje složenosti.

Nedostaci blokova stezaljki:

  • S smanjenjem razlučivosti, blokovi padaju ili trče jedni na druge;
  • Problematičnost s preglednikom;
  • Premjestiti ga teže od tablica.

To su glavne prednosti i nedostaci ovih metoda. zaključava straniceNo, u praksi, u većini slučajeva, moraju se primijeniti i metode. Upotreba blok worski, Mnogo bolji tabelar, ali samo uz uvjet da je moguće postići ispravan zaslon u svim preglednicima i sa svim dozvolama monitora. U tom slučaju, ako Projemer nema mnogo iskustva, vrijedi koristiti tablice za sloj, s povećanjem vještine, možete ići na blok sloj.

Tijekom protekle dvije godine čujem samo od kupaca da želi otjerati dizajn dizajna sa svojim korištenjem blokova. Oni. Treba mu blok raspored izgrađen na Div i CSS. Ali je li takav kod tako dobar? Dugo razmišljam o tome. Morao sam stvoriti različite web-lokacije, od kojih su mnogi bili zračnici pomoću tablica, blokova ili treća opcijablokovi i stolovi.

Po mom mišljenju, prednosti blok izgleda preko stola su očite, to je:

  • mala veličina HTML koda, u usporedbi s tablicama
  • glavni parametri i blok karakteristike pohranjuju se u zasebnu CSS datoteku, koja savršeno čuva preglednicima i ne treba stalno opterećenje.
  • sposobnost postavljanja glavnog sadržaja na vrh stranice (u samom kodu), ali za prikaz u bilo kojem trenutku, barem na dnu. Postavljanje samo odgovarajući blok parametara.

No, zajedno s ovim, čini se kao prednosti, postoji niz problema i nedostataka povezanih s samim rasporedom bloka i prikazujući ga u različitim preglednicima (osobito problemi nastaju iz programa Internet Explorer 6).

Osnovni nedostaciNa koju se pozornost treba platiti:

  • Da biste napisali ispravno radni kod u svim preglednicima i ispravan prikaz stranice kasnije, potrebno je mnogo više vremena nego kada koristite izgled tablice
  • Ponekad se pisani kod ispada mnogo više nego što se očekivalo u početku, to se događa u posljedicu različitih elemenata, prilagodbi, hakova ili dodatno pisanih stilova za pojedinačne preglednike
  • Za česti moraju pribjeći korištenju JavaScripta ili knjižnica tipa jQuery, koji također utječe na najbolji način za mjesto u cjelini. Moguće je ispravno prikazati stranicu ako korisnički preglednik ne podržava izvršenje JS ili ove funkcije je onemogućeno.
  • Opet, kao i za takav problem preglednik kaoE6. Raspored bloka često koristi parametar pozicioniranja plovka (lijevo ili desno), često blokovi počinju skočiti i puzati jedan drugome kada mijenja veličinu stranice (preglednik prozora). Također je napomenuti da kada sve radi u redu u IE testeru (6), u istom IE6 postojale su čvrste nedostatke.
  • Nije rijetko trebalo slikati ili odgovarati pozadini, koristiti dodatne slike. Na primjer, kada se navigacijska jedinica ne proteže preko cijele visine stranice na podnožje, metoda se koristi za crtanje lažnih stupaca - faux stupce
  • Koliko god često, troškovi takvih radova više od cijene rasporeda tablice.

Krajnji rezultat i vrijeme provedeno na njemu, često se ne može opravdati. Stoga mislim da je vrijedno prilično razmišljati o tome kako se probudite uz uporabu metode?

U ovom ćemo članku razgovarati o vrstama izgleda. Odmah želim napomenuti da prilikom izrade web-stranice nije potrebno odabrati jednu vrstu izgleda i koristiti ga samo. Elementi jedne vrste mogu biti (ponekad čak i potrebni) u drugim vrstama izgleda. Glavna stvar za to ispravno.

Tablice izgleda

Od početka 90-ih, tablični raspored se koristi i još uvijek mnogi web programeri koriste ga u svojim projektima. Tablični raspored uključuje izgradnju stranice s HTML oznakom

i njegove elemente djeteta.

Najveća prednost tabličnog izgleda je jednostavnost percepcije i stvaranje stranica. Za ovu vrstu izgleda ne treba velika CSS znanje. Tabularni raspored je stabilan i pouzdan, prikazan svim preglednicima jednako. Nedostatak tabličnog rasporeda je da je većina koda napisana u samom HTML-u, što je kod velike web stranice nije čitljivo. Stolovi se ne smiju staviti jedni na druge, što dovodi do velikih poteškoća. Tablice se prikazuju preglednicima kao jedan veliki objekt koji se može u potpunosti preuzeti, a zatim prikazati samo. To se može smatrati velikim minusom.

Blok izgled

Glavni element rasporeda bloka je HTML oznaka

, Korištenje atributa su stilovi za svaki blok. Tako da ispari gore navedenu stranicu.

Blok izgleda također ima svoje nedostatke. Cross Browser je najveći neprijatelj blok izgleda. U jednom pregledniku može biti savršeno, a u drugom, može biti jedan veliki crni trg. Blok izgleda za razliku od tablica je mnogo složeniji i zahtijeva velika znanja CSS. HTML kod blok izgleda je mnogo manji i čita dobro, svi stilovi s kojima se pojavljuje ispravno stvaranje ove vrste izgleda, u CSS datotekama. Zahvaljujući tome, blok izgleda čita bolje. Blokira univerzalni alat, uz njihovu pomoć možete stvoriti stranice bilo koje složenosti. Preglednici prikazuju blokove kao odvojene elemente, zbog toga se prikazuje brže.

Novooznato, semantičko!

Semantika, prevedena s francuskog (riječ se pojavila u drevnom - grčkom) znači "označavanje". Ova vrsta izgleda, kao odvojena će biti samo u HTML 5, koji mnogi i sada koriste, za semantiku u HTML-u, dokument je važan da elementi ukazuju na to što su stvoreni za. HTML kod koji se koristi u semantičkom rasporedu, mnogo manje kod koji se koristi u bloku i tabličnom rasporedu. Semantički raspored utječe na optimizaciju web-lokacije. Tražilice nastoje pronaći informacije što je moguće bliže onu koju korisnik traži, a semantički raspored u tome pomaže im. Semantički izgled uključuje smanjenje korištenja oznaka

.

Na primjer, reći ću da u HTML 5 zamijeniti ovaj kod:


Došao sam ovamo:


U zaključku želim reći da nije važno kakav raspored koristite, glavna stvar je učiniti ga kompetentno i poštivati \u200b\u200bsve standarde. U daljnjim člancima, analizirat ćemo svaku od opcija detaljnije, prirodno s malim primjerima!

Prednosti tabelarne rasporeda:

1. Zajednička i jednostavnost rada sa stolnim stanicama koje se koriste kao elementi strukture elektroničkog izdanja. Uz pomoć stola, dovoljno je jednostavno stvoriti jednostavne strukture. Ako trebate zadatak složeniju strukturu, potrošit ćemo malo više vremena. Ali kada će skaliranje prozora prozora preglednika zadržati svoje izvorne vrste, kao i relativnu lokaciju. Osim toga, bez obzira na popunjavanje susjednih stanica, oni će ostati isti na visini.

2. Korištenje tabličnog izgleda dobro je prikladan za stvaranje takozvanog "gumenog" izgleda, u kojem širina ovisi o širini prozora preglednika.

3. S stanicama tablice, možemo istovremeno poravnati vodoravno i okomito.

4. Većina sve ovisi o korisničkom odabranom pregledniku.

Nedostaci tabličnog izgleda:

1. Za prikaz stranice mora se čekati dok preglednik preuzme cijelu tablicu.

2. Više glomazan i manje razumljiv kod prilikom stvaranja tablica, jer Složena hijerarhijska struktura ugniježđenih oznaka.

3. Postoji razdvajanje registracije i sadržaja.

4. Teška indeksacija. Fragmentacija informacija otežava ispravno indeksiranje tražilica stranica.

5. Djelatnost trake za pomicanje (kada se okvir može pomicati dijelovima).

6. Uslužni program nije u skladu s HTML i CSS standardima (tablice moraju biti samo za tablične podatke).

Prednosti blok izgleda:

1. HTML stranica se smanjuje pomoću div elemenata.

2. Postoji mogućnost ne-standardnog privrženosti blokova u međusobno - možete postaviti elemente koliko želimo.

3. Blokovi se prikazuju kao što je učitano, što ubrzava rad s elektroničkim publikacijama.

4. najbolja indeksacija po tražilicama.

5. Mogućnost mjesta nekoliko slojeva nad drugim, što pomaže u poboljšanju indeksacije.

6. Mogućnost korištenja pomicanja pojedinačnih blokova.

7. S pogledom na modu - ovaj raspored je sada najpopustj

Nedostaci rasporeda bloka:

1. U razlučivosti na zaslonu na korisničkom monitoru, blokovi mogu promijeniti njihov relativni položaj.

2. S različitim preglednicima (starim verzijama), raspored može izgledati drugačije.

3. Ovo je najteži raspored.

Blokirajte fiksnu oznaku s CSS-om.

Postoje četiri različite metode pozicioniranja.

Statičko pozicioniranje

HTML stavke su postavljene statički zadane. Statički pozicionirani element uvijek se nalazi u skladu sa standardnim tokom stavki na stranici.

Statički smješteni elementi nisu izloženi svojstvima vrhunskih, dna, lijevo i desno.

Fiksno pozicioniranje

Element s fiksnim položajem nalazi se u odnosu na prozor preglednika.

Neće se pomicati, čak i ako se prozor pomakne:

Primjer:

Napomena: IE7 i IE8 podržavaju vrijednost fiksne samo ako je vrsta dokumenta navedena! Doctype.

Fiksno raspoređeni elementi se uklanjaju iz normalnog toka. Dokument i drugi elementi se ponašaju kao da fiksni element ne postoji.

Fiksni elementi mogu preklapati i druge elemente.

Apsolutno pozicioniranje

:

Primjer:

položaj: apsolutno;

Blokirajte fleksibilnu oznaku s CSS-om.

CSS svojstva pozicioniranja omogućuju vam da postavite stavku. Oni također mogu postaviti element iza drugog i ukazuju na ono što se treba dogoditi kada je sadržaj elementa prevelik.

Elementi se mogu smjestiti pomoću gornjih svojstava (odozgo), dna (dolje), lijevo (lijevo) i desno (desno). Međutim, ta svojstva neće raditi sve dok se ne uspostavi nekretnina.

Relativno pozicioniranje

Primjer:

položaj: rođak;

Primjer:

položaj: rođak;

Relativno postavljeni elementi se često koriste kao spremnici za apsolutno pozicionirane predmete.

Primjena apsolutnog pozicioniranja na stranici. Pravilo Z-indeks.

Apsolutno pozicioniranje

Apsolutno pozicionirani element nalazi se u odnosu na prvi roditeljski element koji je smješten drugačije nego statički. Ako se takva stavka ne pronađe, prihvaća se roditeljski element :

Primjer

položaj: apsolutno;

Apsolutno pozicionirane stavke se uklanjaju iz standardnog protoka elemenata. Dokument i drugi elementi se ponašaju kao da apsolutno pozicionirana stavka ne postoji.

Apsolutno nalazi se elementi mogu preklapati i druge elemente.

Z-indeks imovina Određuje vertikalni poredak za element.

položaj: apsolutno;

Element s velikim vertikalnim redoslijedom uvijek se prikazuje ispred elementa s manjim vertikalnim redoslijedom.

Napomena: Z-indeks radi samo za pozicionirane stavke (položaj: apsolutni, položaj: relativan ili položaj: fiksno).

Nekretnine Z-indeksa podržava sve glavne preglednike.

Napomena: Vrijednost "nasljedna" nije podržana u IE7 i ranijim verzijama. IE8 zahtijeva oglas! Doctype. IE9 podržava "nasljeđivanje".

Vrijednosti nekretnine:

Automatsko: postavlja vertikalni poredak isti kao i roditeljski element. Koristi se prema zadanim postavkama

Broj: Postavlja vrijednost vertikalnog reda elementa. Negativne vrijednosti su dopuštene

Naslijediti: ukazuje na to da se vertikalni poredak mora naslijediti od matičnog elementa

Primjena relativnog pozicioniranja. Stvaranje učinaka volumena i sjene.

Relativno pozicioniranje

Relativno postavljeni element je relativno u odnosu na normalan položaj.

Primjer

položaj: rođak;

PRIMJERH2.POS_TOP.

položaj: rođak;

CSS3 Shadow Spremnik

U CSS3, objekt kutija-sjena se koristi za dodavanje nijanse na kontejnere:

Primjer

Dodavanje nijanse spremnika na element div:

box-Shadow: 10px 10px 5px # 888888;

WebKit-Box-Shadow: 10px 10px 5px # 888888; / * Safari * /)

CSS3 granična slika

CSS3, granični-image imovine možete koristiti sliku za stvaranje granice:

Objekt o pograničnom slikom omogućuje vam da odredite pograničnu sliku.

Primjer

Korištenje slike za stvaranje granice oko elementa za div:

granična slika: URL (BURM.PNG) 30 30 krug;

MOZ-BIGE Slika: URL (BURM.PNG) 30 30 krug; / * Firefox * /

WebKit-Border-Slika: URL (BURM.PNG) 30 30 krug; / * Safari i chrome * /

O-Border-image: URL (BURM.PNG) 30 30 krug; / * Opera * /)

Nova svojstva:

granica-slika: stenografski objekt za instaliranje svih svojstava granične slike- * 3 grupe

granica-radijus: stenografski objekt za instaliranje svih četiriju graničnih svojstava - * - radijus 3

box-Shadow: pridružuje se jednom ili više sjena odbačenih učinaka na spremnik

Izgled je stvaranje HTML stranica tako da se svi elementi prikazuju kao dizajnirani za dizajn. Uz pravilan i visokokvalitetan raspored, web-lokacija će izgledati jednako u različitim preglednicima, sadržaj će biti dostupan za sve ekrane. Izgled se događa tri vrste: tablice, blok i mješoviti. Nakon čitanja do kraja, ovaj članak možete odabrati pomoću onoga što možete postići najbolji rezultat u vašem slučaju. Ležimo sve prednosti i nedostatke svake vrste.

Tablica je formirana prije nego što se pojavi CSS. Stranica je veliki tablica formirana pomoću oznaka

, i
,
, Stvaranje web-mjesta u ovoj metodi najčešće je popraćeno gornjim dijelom (zaglavlje), nalazi se naslov i logo, dno (podnožje), dizajniran je za prikaz autorskih i referentnih informacija, centru stranice (centar, srednji, sadržaj i drugo) postaviti glavni sadržaj, sadržaj.

Prednosti:
- sadržaj tablica se lako usklađuje horizontalno i vertikalno;
- Tablice izgledaju jednako u gotovo svim preglednicima i na bilo kojem zaslonu.

Glavni nedostaci tabličnog rasporeda:
- veliki kod;
- standardi nedosljednosti;
- Indeksacija loše web-lokacije.

Blok izgleda temelji se na CSS boxing modelu. U isto vrijeme, stranica se sastoji od blokova umotanih u oznake HTML koda

.
Opći blok dijagram je takav: sadržaj, širina i visina od kojih se može postaviti na svojstva "širine" i "visine", unutarnje alineje (između sadržaja i okvira) - "padding" imovine, granice i "Granica" imovine i vanjsku alineju - "margina". Iz takvih blokova stvorite web-lokaciju vrlo jednostavno. Blokovi se mogu uložiti u druge, svaki od njih može dodijeliti klasu i osobnu iskaznicu.
Već je bilo mnogo "čipsa", koji kompenziraju nedostatke blokova, na primjer, poravnajte blok okomito:
Visina: 200px;
Prikaz: Inline-blok;
Vertikalno poravnanje: Centar.
U ekstremnom slučaju možete odrediti blok koji će se ponašati kao tablica (tablica) pomoću zaslona: tablica imovine, redak (TR TH) - Zaslon: Tablica ili stanica (TD) - Zaslon: Stolna ćelija.

Prednosti rasporeda bloka:
- Usklađenost;
- Stranica je dobro indeksirana;
- Kratki i jednostavni kod, stranice se brže učitavaju;
- Stranice se prikazuju jednako gotovo na svim uređajima.

Nedostaci:
- Mjesto se može pogrešno prikazati na vrlo malim zaslonima.

Što odabrati?
Alas, ali stvaranje stranice na tabličnom rasporedu je zastarjelo. Označiti

HTML nije zamišljen kao metoda dizajna i trebala bi se koristiti samo za stvaranje tablica, zbog nedostatka metoda za pozicioniranje sadržaja, određuje položaj sadržaja čelika pomoću tablica. Nakon pojave CSS-a primili smo mnogo novih značajki za određivanje položaja elemenata stranice, tako da je rođen blok izgled. Mnogi nisu mogli odbiti tablice i koristiti ih i blokovi. Takav se raspored naziva mješavina.
Što odabrati da vas riješiti, ali ja bih savjetovati o bloku vrsta izgleda pomoću blokova, možete napraviti prekrasan i zgodan site koji će biti jednako prikazani na bilo kojim uređajima i zaslonima. Također treba napomenuti da je kôd rasporeda tablice manje čitljiv, mnogi ga jednostavno ne razumiju. Vrlo je važno ako ne radite sami.
Ali još uvijek je vaš izbor, jer s različitim sadržajem dizajna i stranice, to može biti prikladnije i ispravnije pomoću jedne ili druge vrste izgleda.

© 2021 ilyarm.ru.