Tabuľkové rozloženie otvorí nové konštrukčné hranice
Existuje veľa dôvodov, prečo by ste nemali používať tabuľky na usporiadanie . Jedným z najčastejších dôvodov, ktoré ľudia dávajú za to, že ich naďalej používajú, je to, že je ťažké urobiť rozloženie s CSS. Hoci skriptovanie CSS prináša krivku učenia, keď pochopíte, ako robiť rozloženie CSS, možno vás prekvapí, aké ľahké to môže byť. A akonáhle sa naučíte, budete sa zaoberať druhým najčastejším dôvodom, prečo ľudia dávajú, že nepoužívajú CSS - "Je rýchlejšie písať tabuľky." Je to rýchlejšie, pretože poznáte tabuľky, ale akonáhle sa naučíte CSS, môžete byť tak rýchle s tým.
Podpora prehliadania polohy CSS
CSS positioning je dobre podporované vo všetkých moderných prehliadačoch . Pokiaľ nevytvárate lokalitu pre program Netscape 4 alebo Internet Explorer 4, vaše čitatelia by nemali mať žiadne problémy so zobrazovaním webových stránok umiestnených v systéme CSS.
Prehodnotenie spôsobu zostavenia stránky
Pri vytváraní stránky pomocou tabuliek musíte premýšľať v tabuľkovom formáte. Inými slovami, myslíte na bunky a riadky a stĺpce. Vaše webové stránky odrážajú tento prístup. Keď prejdete na dizajn určovania pozícií CSS, začnete premýšľať o vašich stránkach z hľadiska obsahu, pretože obsah môže byť umiestnený kdekoľvek v rozložení - dokonca aj vrstvený nad ostatným obsahom.
Rôzne webové stránky majú rôzne štruktúry. Ak chcete vytvoriť účinnú stránku, pred priradením obsahu k nej posúďte štruktúru ktorejkoľvek danej stránky. Príkladová stránka môže obsahovať päť odlišných sekcií:
- Hlavička . Domovská stránka bannerovej reklamy, názvu stránky, navigačných odkazov, názvu článku a tiež niekoľkých ďalších vecí.
- Pravý stĺpec . Toto je pravá strana stránky s vyhľadávacím poľom, reklamami, oknami s videom a nákupnými oblasťami.
- Obsah . Text článku, príspevok na blogu alebo nákupný košík - mäso a zemiaky stránky.
- Inline reklamy . Reklamy v rámci obsahu obsahujú.
- Päta . Spodná navigácia, informácie o autorovi, informácie o autorských právach, reklamy s dolnými banermi a súvisiace odkazy.
Namiesto toho, aby ste vložili tieto päť prvkov do tabuľky, použite elementy na sekanie HTML5 na definovanie rôznych častí obsahu a potom použite polohovanie CSS na umiestnenie elementov obsahu na stránku.
Identifikácia sekcií obsahu
Po definovaní rôznych oblastí obsahu stránok je potrebné ich napísať do kódu HTML. Zatiaľ čo môžete všeobecne umiestniť svoje sekcie v ľubovoľnom poradí, je dobré najprv umiestniť najdôležitejšie časti vašej stránky. Tento prístup pomôže aj pri optimalizácii vyhľadávačov.
Ak chcete preukázať polohu, predstavte si stránku s troma stĺpcami, ale bez záhlavia alebo päty. Pomocou polohovania môžete vytvoriť ľubovoľný typ rozloženia, ktorý sa vám páči.
Pre usporiadanie v troch stĺpcoch definujte tri časti: ľavý stĺpec, pravý stĺpec a obsah.
Tieto sekcie budú vytvorené pomocou elementu ARTICLE pre obsah a dvoch častí SECTION pre dva stĺpce. Všetko bude mať aj atribút, ktorý ho identifikuje. Keď používate atribút id, musíte priradiť jedinečný názov pre každé ID.
Umiestnenie obsahu
Pomocou CSS definujte pozíciu vašich prvkov ID'd. Uložte svoje informácie o polohe v takomto štýle:
#content {
}
Obsah v rámci týchto prvkov bude trvať čo najviac miesta, konkrétne 100 percent šírky aktuálnej polohy alebo stránky. Ak chcete ovplyvniť umiestnenie časti bez toho, aby ste ju tlačili na pevnú šírku, zmeňte vlastnosti polstrovania alebo okrajov.
Pre toto rozloženie nastavte dva stĺpce na pevnú šírku a potom nastavte ich polohu absolútne, aby neboli ovplyvnené tým, kde sa nachádzajú v jazyku HTML.
# left-column {
poloha: absolútna;
vľavo: 0;
šírka: 150 pixlov;
margin-left: 10px;
margin-top: 20px;
farba: # 000000;
polstrovanie: 3px;
}
# right-column {
poloha: absolútna;
vľavo: 80%;
top: 20px;
šírka: 140px;
polstrovanie-vľavo: 10px;
z-index: 3;
farba: # 000000;
polstrovanie: 3px;
}
Potom v oblasti obsahu nastavte okraje vpravo a vľavo tak, aby sa obsah neprekrýval dva vonkajšie stĺpce.
#content {
vrchol: 0px;
margin: 0px 25% 0 165px;
polstrovanie: 3px;
farba: # 000000;
}
Definovanie vašej stránky pomocou CSS namiesto HTML tabuľky si vyžaduje trochu technickejšiu zručnosť, ale výplata vyplýva z flexibilnejších a citlivejších návrhov a väčšej ľahkosti pri štrukturálnych úpravách stránky neskôr.