Zopakování z minulého dílu (http://j0hn.hys.cz/zaciname-s-tvorbou-webovych-stranek-1-uvod-struktura-html):
- Nebudu zde podrobně rozepisovat co která značka, znak či výraz v html nebo css kódu znamená. Hlavním důvodem je, že html ani css neumím! Takže pokud se v textu vyskytne nějaký „odborný“ výraz například identifikátor napíšu ho takto kurzívou a Vy můžete postupovat jako já, tj. do vyhledávače zadejte daný výraz a doplňte ho o slova html a css.
- Mnou „poslepovaný“ kód jsem opatřil podrobnými poznámkami, které ve výsledné stránce nejsou vidět a slouží jen k zorientování se v kódu. Poznámky v css kódu jsou umisťovány mezi /* na začátku a */ na konci poznámky. V html kódu jede o znaky <!– na začátku a –> na konci.
- Znám vzhled jakého chci dosáhnout (Vzhled o pevně dané šířce obsahující hlavičku, 3 sloupce a patičku.).
- Mám připravenu strukturu html dokumentu.
Pokud chci pevně danou šířku musím si určit kolik pixelů. Aby byl web co nejlépe přístupný pro různé rozlišení rozhodl jsem se pro 900 pixelů. Rozlišení z šířkou 800 pixelů už skoro nikdo nepoužívá a všem s vyšším rozlišením monitoru se web zobrazí korektně.
Teď něco k CSS. Jeho síla spočívá v tom že si můžeme nadefinovat vlastnosti jednotlivých prvků stránky a ty pak budou v celém dokumentu dodržovány. CSS styly se definují v hlavičce (head) minule jsme si již pro ně připravili místo. Pokud budeme chtít stejný styl i pro další dokumenty stačí vše co je uzavřeno v <style type=“text/css“></style> vyjmout a vložit do externího souboru co nazveme např. styly.css. Potom místo <style type=“text/css“></style> zadáme do všech dokumnetu jen <link rel=“stylesheet“ href=“styly.css“ type=“text/css“> a dosáhneme všude stejného vzhledu. Tolik k teorii.
Jako největší problém se ukázala volba tří sloupcového vzhledu. Jasný návod jsem na internetu nenašel, zato spoustu triků jak tohoto vzhledu dosáhnout. Jako první jsem zkoušel následující:
- Pevně daná šířka všech tří sloupců, s tím že všechny sloupce jsou zarovnány na střed a následně posunuty o pevně danou vzdálenost na požadovanou stranu. Tzv. absolutní formátování. Co se mi tímto způsobem nepodařilo bylo umístění patičky na spodní okraj všech tří sloupců.
- V jednom vrchním obalu je umístěna hlavička, levý sloupec a podobal, který obsahuje prostřední a pravý sloupec. Patička je umístěna zvlášť. Proč je to nutné dělat tak komplikovaně nevím, asi to s těmi možnostmi css nebude tak slavné, nicméně nakonec jsem zvolil tento způsob, neboť jho další výhodou je, že při načítání se v tomto případě může načítat nejdříve hlavní obsah a až potom postranní sloupce
Nastavení samotného dokumentu a těla:
html { height: 100%; /*Roztažení html na délku zobrazované stránky */ } body { height: 100%; /*Roztažení "těla" na délku zobrazované stránky */ min-width: 900px; /*Minimální šířka "těla" - nastavíme stejnou jako u šířky hlavičky */ margin: 0; padding: 0; /* Nastavení nulových okrajů - kvůli tomu, že některé prohlížeče mají implicitně nějaký padding nebo margin */ }
Nastavení hlavičky. Nejedná se o nastavení hlavičky souboru (head), ale tzv identifikátor který mi bude definovat obdélník co bude nad ostatními sloupci, kde chci mít zobrazené logo. V budoucnu plánuji logo o rozměrech 900×240 pixelů, takže na tento rozměr si hlavičku připravím. Zatím nastavuji na pozadí těchto „obdelníků“ (ať už se jedná o hlavičku, jednotlivé sloupce nebo patičku) různé jednoduché barvy, abych snadno rozeznal jak se chovají. V tomto případě zelené.
#hlavicka { width: 900px; /*Nastavení šířky */ background: green; /*Nastavení pozadí */ height: 240px; /*Nastavení výšky */ }
Nastavení 3 sloupců pod hlavičkou. Principem je, že vytvoříme identifikátor „obal“, do kterého budou zabaleny levý sloupec (identifikátor „levy“) a identifikátor „obal-prostredni-pravy“ do něhož bude vnořen pravý a prostřední sloupec. Způsob jakým je zapsán prostřední a pravý sloupec znamená, že tato css deklarace bude pro ně platit jen, když jsou vnořeny do „obal-prostredni-pravy“
/* =============== Sloupec zastřešující všechny 3 vložené sloupce =============== */ #obal { width: 900px; /*Šířka - nastavíme stejnou jako šířku hlavičky a patičky */ margin: 0 auto 0 auto; /*Odsazení - zhora 0, z prava automaticky, zdola 0, zleva automaticky (zprava a zleva automaticky mi stránku vystředí) */ } /* =============== Levý sloupec =============== */ #levy { background: yellow; /*Barva pozadí */ float: left; /*Obtékání - další prvek (v našem případě sloupec zastřešující prostřední a pravý sloupec se vloží vpravo od tohoto sloupce */ width: 170px; /*Šířka sloupce */ } /* =============== Sloupec zastřešující prostřední a pravý sloupec =============== */ #obal-prostredni-pravy { background: red; /*Barva pozadí */ float: right; /*Obtékání - další prvek (v našem případě levý sloupec) se vloží vlevo od tohoto sloupce */ width: 730px; /*Šířka sloupce (900celková-170levý sloupec) */ } /* =============== Prostřední vnořený sloupec =============== */ #obal-prostredni-pravy #prostredni { background: blue; /*Barva pozadí */ float: left; /*Obtékání - další prvek (v našem případě pravý sloupec) se vloží vlevo od tohoto sloupce */ width: 560px; /*Šířka sloupce */ } /* =============== Pravý vnořený sloupec =============== */ #obal-prostredni-pravy #pravy { background: grey; /*Barva pozadí */ float: right; /*Obtékání - další prvek (v našem případě prostřední sloupec) se vloží vpravo od tohoto sloupce */ width: 170px; /*Šířka sloupce (730-560) */
Vytvoření třídy „celaner“. Ta slouží pro vyčištění toho co nastavíme, před vložením levého sloupce a patičky. Přiznávám bez mučení, že tohle mi není moc jasné jak funguje, každopádně bez toho se stránka nezobrazí tak jak potřebuji
.cleaner { clear: both; height: 0; font-size: 0; visibility: hidden; }
Nastavení patičky.
#paticka { width: 900px; /*Šířka */ background: Fuchsia; /*Barva pozadí */ height: 100px /*Výška */ }
Styly jsou tedy nadefinovány a můžeme se pustit do vlastního těla html dokumentu.
<div id="obal"><!-- Začátek obalového divu --> <div id="hlavicka"> <!-- Začátek hlavičky --> <h1>Název</h1> <!-- nápis v hlavičce - nadpis první úrovně --> </div> <!-- Konec hlavičky --> <div id="obal-prostredni-pravy"> <!-- Začátek obalu pro prostřední a pravý sloupec --> <div id="prostredni"> <!-- Začátek prostředního sloupce --> <h2>Jméno</h2> <!-- nadpis druhé úrovně --> <p>Nějaký text.</p> </div> <!-- Konec prostředního sloupce --> <div id="pravy"> <!-- Začátek pravého sloupce --> <h3>Menu</h3> <!-- nadpis třetí úrovně --> <p>Nějaký text.</p> </div> <!-- Konec pravého sloupce --> <div class="cleaner"> </div> <!-- Vyčištění vlastností (asi - tímhle si nejsem moc jistý co to vlastně dělá) --> </div> <!-- Konec sloupce obalujícího prostředni a pravý sloupec --> <div id="levy"> <!-- Začátek levého sloupce --> <h3>Jmenný seznam</h3> <!-- nadpis třetí úrovně --> <p>Nějaký text.</p> </div> <!-- Konec levého sloupce --> <div class="cleaner"> </div> <!-- Vyčištění vlastností (asi - tímhle si nejsem moc jistý co to vlastně dělá) --> <div id="paticka"> <!-- Začátek patičky --> Nějaký text. </div> <!-- Konec patičky --> </div> <!-- Konec obaloveho divu -->
Vše co jsme vytvořili vložíme do htm souboru co jsme si vytvořili v minulém díle.
Výsledná stránka je uložena zde: http://j0hn.hys.cz/wp-content/uploads/tutorial-web-2.htm Pozor: poskytovatel webhostingu na kterém provozuji tento web si automaticky na konec dokumentu přidá reklamu, tu si samozřejmě do Vašeho dokumentu nedávejte
<!-- Konec obaloveho divu --> sem je přidaná reklama kterou si odmyslete (smažte) <!-- Konec těla stránky -->
Kromě této nepříjemnosti je však z dokumentu vidět jiná věc, kterou jsem ještě zdůraznil tím že jsem do jednotlivých sloupců přidal různě dlouhý text. Je to ošklivě vypadající nezarovnání jednotlivých sloupců. Co s tím popíšu v dalším díle.
Komentáře