Tabulkové rozložení otevře nové hranice návrhu
Existuje mnoho důvodů, proč se tabulka rozložení nepoužít . Jedním z nejčastějších důvodů, které lidé dávají za to, že je stále využívají, je to, že je těžké rozvrhnout s CSS. Přestože skriptování CSS zahrnuje učení, když pochopíte, jak lze rozvrhnout CSS, můžete být překvapeni, jak snadno to může být. A jakmile se naučíte, řeknete druhému nejčastějšímu důvodu, proč lidé dávají, že nepoužívají CSS - "Je rychlejší psát tabulky." Je to rychlejší, protože znáte tabulky, ale jakmile se naučíte CSS, můžete být stejně rychlý s tím.
Podpora prohlížeče pro umístění CSS
CSS positioning je dobře podporováno ve všech moderních prohlížečích . Pokud nevytváříte web pro aplikaci Netscape 4 nebo Internet Explorer 4, vaše čtenáři by neměli mít žádné problémy s prohlížením vašich webových stránek umístěných v CSS.
Přehodnocení způsobu sestavení stránky
Při vytváření webu pomocí tabulek musíte myslet v tabulkovém formátu. Jinými slovy, myslíte na buňky, řádky a sloupce. Vaše webové stránky odrážejí tento přístup. Když se přesunete na návrh určování polohy CSS, začnete přemýšlet o vašich stránkách, pokud jde o obsah, protože obsah může být umístěn kdekoli v rozvržení - dokonce i navrstvený nad jiný obsah.
Různé webové stránky mají různé struktury. Chcete-li vytvořit efektivní stránku, vyhodnoťte strukturu kterékoli dané stránky dříve, než přidělíte její obsah. Příkladová stránka může obsahovat pět odlišných sekcí:
- Záhlaví . Domov pro bannerovou reklamu, název webu, navigační odkazy, název článku a také několik dalších věcí.
- Pravý sloupec . Toto je pravá strana stránky s vyhledávacím polem, reklamami, krabicemi videa a nákupními oblastmi.
- Obsah . Text článku, příspěvek na blogu nebo nákupní košík - maso a brambory na stránce.
- Inline reklamy . Reklamy jsou v obsahu vloženy.
- Zápatí . Spodní navigace, informace o autorovi, informace o autorských právech, reklamy s nižšími banery a související odkazy.
Namísto uvedení těchto pěti prvků do tabulky použijte elementy dělení HTML5 pro definování různých částí obsahu a pro umístění prvků obsahu na stránku použijte polohování CSS.
Určení sekcí obsahu
Poté, co jste definovali různé oblasti obsahu svého webu, musíte je napsat do vašeho HTML. Zatímco můžete obecně umístit své sekce v libovolném pořadí, je vhodné umístit nejdůležitější části vaší stránky jako první. Tento přístup pomůže také s optimalizací vyhledávače.
Chcete-li demonstrovat umístění, představte si stránku se třemi sloupci, avšak bez záhlaví nebo zápatí. Pomocí polohování můžete vytvořit libovolný typ rozvržení, který se vám líbí.
Pro uspořádání tří sloupců definujte tři části: levý sloupec, pravý sloupec a obsah.
Tyto sekce budou instancovány pomocí prvku ČLÁNEK obsahu a dvou prvků SECTION pro dva sloupce. Vše bude mít také atribut, který ho identifikuje. Při použití atributu id musíte přiřadit jedinečné jméno pro každé id.
Umístění obsahu
Pomocí CSS definujte pozici pro vaše prvky ID'd. Uložte své informace o poloze ve stylu volání takto:
#obsah {
}}
Obsah v rámci těchto prvků bude mít co nejvíce prostoru, konkrétně 100% šířky aktuální polohy nebo stránky. Chcete-li ovlivnit umístění části, aniž byste ji tlačili na pevnou šířku, změňte vlastnosti výplně nebo okraje.
Pro toto rozložení nastavte dva sloupce na pevné šířky a potom nastavte jejich absolutní polohu tak, aby nebyly ovlivněny tím, kde se nacházejí v kódu HTML.
# left-column {
poloha: absolutní;
vlevo: 0;
šířka: 150px;
margin-left: 10px;
okraj: 20px;
barva: # 000000;
polstrování: 3px;
}}
# right-column {
poloha: absolutní;
vlevo: 80%;
horní: 20px;
šířka: 140px;
padding-left: 10px;
z-index: 3;
barva: # 000000;
polstrování: 3px;
}}
V oblasti obsahu nastavte okraje vpravo a vlevo tak, aby obsah nepřekrývaly dva vnější sloupce.
#obsah {
horní: 0px;
margin: 0px 25% 0 165px;
polstrování: 3px;
barva: # 000000;
}}
Definování stránky pomocí CSS namísto tabulky HTML vyžaduje trochu techničtější dovednosti, ale výplata vychází z flexibilnějších a citlivějších návrhů a zjednodušuje později strukturální úpravy stránky.