Každý, kto chce vytvoriť miesto pre svoj projekt, musí čeliť problému jeho písania. Nie každý chce platiť, a nie každý rozpočet si to môže dovoliť, za vytvorenie stránky pre profesionálnych správcov webu, takže väčšina začiatočníkov ich cesta k tvorcom stránok začne učiť techniky rozloženia. Pretože kvalita obsahu a dostupnosť kúpeného priestoru na serveri, ktorý je hostiteľom lokality, nestačí. Najprv musíte vytvoriť stránku "skeletu".

Čo je rozloženie html tabuľky?

Na odpoveď na túto otázku je potrebné definovať pojem rozloženia. Hniezdenie - proces vytvárania štruktúry html stránok, umiestňovanie na ne hlavné prvky. Rozloženie tabuľky je použitie stola s neviditeľným obrysom ako štruktúra stránky. To znamená, že stránka stránky bude tabuľkou s určitým počtom stĺpcov a riadkov, pričom každá bunka má špecifický prvok.


Usporiadanie html dokumentov vytvorených tabuľkovým usporiadaním sa používa vo veľkej väčšine lokalít a používa sa už viac ako 10 rokov. Je to dôsledkom jednoduchosti štruktúry, plnenia, ako aj všestrannosti takéhoto značkovania, ktoré sa zobrazuje rovnakým spôsobom v rôznych prehliadačoch.

Prvá fáza vytvárania webových stránok

Rozloženie tabuľky začína značkovaním: html kód stránky je napísaný s tabuľkou pozostávajúcou z určitého počtu stĺpcov a riadkov. Ak chcete vytvoriť tabuľku v html, otvorí sa špeciálna značka.Vnútri používa tagy pre vytvorenie vedenia

na vytvorenie hlavičky tabuľky a

na vytvorenie kolóny. Stĺpce a hlavičky sú vytvorené vo vnútri značky riadkov a každý stĺpec môže mať ľubovoľný počet stĺpcov.

Prvá tabuľka
V prvom stĺpci	V druhom stĺpci

Schopnosť vytvoriť tabuľku umožňuje tabuľkové rozvrhnutie HTML stránok, takže budete musieť zistiť, ktoré atribúty sú vo vytváraní značky a ako ich používať.

Hlavné atribúty tabuľky tag

Označenie túto značku ako symbol otvorenie tabuľky, slúži na obmedzenie jej štruktúru, ktorá určuje jeho pozíciu na stránke a celkový vzhľad buniek pomocou atribútov:

objektu align používa pre vyrovnanie polohy stola , môže mať hodnoty "vľavo", "stred" a "vpravo". To je zarovnanie na ľavom okraji, v strede a vpravo.

pridáva pozadia na nastavenie obrázku na pozadí pre tabuľku s odkazom na neho.

bgcolor nastaví farbu pozadia tabuľky, hodnota môže byť názov alebo kód akejkoľvek farby.

na hraniciach stoly určuje hrúbku rámu a je uvedená v milisekundách.

bordercolor nastavuje farbu orámovania.

Vnútorný okraj buniek umožňuje nastaviť intervaly medzi textom a hranice buniek.

poukazuje na Frame vlastnosť prehliadača sa zobrazí režim mantinelov, pričom hodnoty void, hranice, nad, pod hsides, vsides, pravej strane, na LHS. To znamená, že nezobrazuje hranicu a nakreslíte rámčekokolo stola urobte iba hornú hranicu alebo iba dno viditeľné, nezakrývajte len horizontálne hranice alebo len vertikálne, odrážajte iba pravý alebo len ľavý okraj.

Atribút pravidiel poskytuje informácie o tom, ktoré hranice musia bunky zobrazovať. Hodnota none vám umožňuje skryť všetky hranice, všetky body na displeji, cols nastaví pozíciu riadkov medzi stĺpcami a riadky - medzi riadkami.

Tag
Táto značka vytvára riadok tabuľky, ktorý zodpovedá jej vzhľadu. Má malú sadu atribútov: zarovnanie textu zarovnať v rade, bgcolor nastaví farbu pozadia bunky, bordercolor stanovuje rámec linky. Tags

a

Títo dvaja sú približne rovnako funkčnosti značky: vytvoriť bunku v riadku a nastaviť jeho podmienky zobrazenia pomocou atribútov:

Skrátená umožňuje vykonať krátky komentár k bunke.

Zarovnanie zodpovedá za zarovnanie obsahu troch vodorovných pozícií.

Pozadie sa používa na naplnenie pozadia bunky so špecifickým obrázkom.

Bgcolor sa používa na nastavenie farby pozadia v bunke.

A bordercolor určuje farbu hraníc bunky.

Výška slúži na určenie výšky buniek.

Od spoločnosti Nowrap sa vyžaduje, aby zakázal prenos reťazca.

Hmotnosť určuje šírku bunky.

Príklad html-layout stránky

Po štúdiu teórie práce s tabuľkami v html môžete začať vytvárať vlastné rozloženie stránky. Ak to chcete urobiť, určte, ktoré funkčné bloky budú na vašom webe. Môže to byť klobúk, suterén,obsahový blok, bočné bloky. V rozložení html-tabuľky stačí vytvoriť tabuľku.
V skutočnosti môžete v tomto štádiu vytvoriť úplne hotové usporiadanie nastavením vzhľadu každého prvku prostredníctvom vyššie uvedených vlastností značiek. A potom stačí skopírovať kód tabuľky na každú novú stránku tak, aby mal jeden štýl. Ale je to celkom nepohodlné, pretože stránky štýlu budú uložené iba v jeho spise, čo znamená, že ak je potrebné nič meniť, boli celkom snaží nájsť potrebné atribúty štýlu v každom dokumente a zmeniť jej hodnotu. Existuje však možnosť optimalizovať tento proces pomocou metódy tabuľkového rozloženia CSS. Preto pri vytváraní html tabuľky nie je potrebné používať atribúty štýlu v dokumente. Jediným atribútom, ktorý použijete, je ID, ktorý potom umožňuje odkazovať len na štýl jediného prvku. Toto je univerzálny atribút, ktorý sa používa s ľubovoľnými značkami. Vychádza z hodnôt pozostávajúcich z latinských písmen a symbolov. Pri vytváraní tabuľky musíte nastaviť id pre značku, napríklad s hodnotou "document". Potom pre bunku (tag

alebo

) priradenú pod záhlavím, atribút id môže prijať hodnotu "záhlavie". Ľavé menu sa dá nazvať "left_side" a pravé je "right_side". Predpokladá sa, že obsahový blok sa bude nazývať obsahom a základňou stránky - "päta".

Zobrazí sa stránka v prehliadači.

Druhá etapa usporiadania

Vytvorený dokument musí byť pripojený k štylismuCSS súbor na kontrolu vzhľadu objektov stránok. Ak to chcete urobiť, musíte vytvoriť dokument CSS, pomenujte ho napríklad mystyle.css. A teraz vo vnútri značky v hlavnom dokumente stránky musíte predpísať nasledujúce :. Potom zadaním podmienok mystyle.css na zobrazenie prvkov môžete zmeniť vzhľad stránky tak, ako by ste chceli. Napríklad vlastnosť farby určuje farbu textu a pozadie definuje, ako bude vyzerať pozadie elementu. Existuje asi 20 hlavných vlastností, pomocou ktorých môžete zmeniť polohu prvkov, ich veľkosť, farbu a výber. Preto toto rozloženie nie je príliš zložité a dokonca môže byť vykonané aj nováčikom, ale aké kreatívne a zaujímavé to bude, záleží iba na vás.

Rozloženie CSS

Ako viete, väčšina správcov webu teraz vyberie druhú medzi tabuľkou a usporiadaním blokov v html. Je to spôsobené najmä skutočnosťou, že kód rozloženia tabuľky je veľmi ťažkopádny a to bráni sťahovaniu stránky. Trojrozmerné kód v dôsledku prítomnosti komplexná štruktúra tags tabuľky (úroveň 3, potom a až potom

). Táto skutočnosť má prednosť aj také zjavné výhody doskovité rozvrhnutie, jasnú hierarchiu prvkov, pevné polohe, cross-browser kompatibilitu a jednoduché rozloženie. Existuje však riešenie tohto problému v jazyku kaskádových štýlov (CSS).
Usporiadanie CSS s kartami sa môže vykonať napríklad vtedy, ak sú v tagu iba jednotlivé prvky, ktoré nie sú tabuľkou. Ak chcete kód optimalizovať, môžete priamo vytvárať dokumenty tabuľkyvlastnosti štýlov. Toto používa vlastnosť zobrazenia, ktorá informuje prehliadač, ako vníma tento alebo ten prvok v dokumente. Ak je napríklad hodnota tabuľka, potom sa položka zobrazí ako tabuľka a ak je riadok tabuľky alebo tabuľka tabuľky a bunková línia. Tým sa eliminuje potreba používať značky tagov v súbore html.

Rozloženie prispôsobivej tabuľky

Adaptívne rozloženie zahŕňa zmenu zobrazenia stránky na rôznych obrazovkách v závislosti od rozlíšenia a veľkosti displeja. Je to dosť ťažká úloha pre vývojárov, pretože vyžaduje starostlivé výpočty a testovanie na mnohých platformách. Napriek tomu nemožno predstaviť žiadny populárny moderný zdroj bez použitia adaptácie pre rôzne zariadenia. A CSS sa používa na vyriešenie tohto problému. Najskôr, aby vo všetkých prehliadačoch bol štýl stránky jediný, musíte resetovať všetky štandardy zobrazenia prehliadača pomocou resetovania css, aby ste sa zbavili neštandardných dier, výberov a podobne. Po druhé, musíte dostať dotazy médií zo zariadení, ktoré sa pripájajú k prostriedku, aby ste získali informácie o rozlíšení obrazovky a mohli použiť adaptáciu. Na tento účel sa používajú hlavne vlastnosti min-width, max-width a display. Prvé dva definujú limity rozšírenia bloku a vlastnosť zobrazenia s hodnotou None umožňuje skryť veľké a nefunkčné bloky na displejoch s nízkym rozlíšením.

Príklady

Nezáleží na tom, ktorá metóda vývojár používa na vytvorenie značky, bude schopný usporiadať pomocou CSS tak jedinečného aEsteticky dosť predstavivosť stačí. Nižšie sú uvedené príklady rozložení tabuľky HTML. Ďalším príkladom. A môžete si ho a tak usporiadať. V skutočnosti vôbec nezáleží na tom, že rozloženie tabuľky už nie je súčasné a relevantné - je ľahko kompenzované tvorivosťou a gramotnosťou dizajnu.