TVORBA WEBOVÝCH STRÁNEK Výukový modul TWS_03c Ing. Pavel Chmiel, Ph.D. UNIV 2 - KRAJE
Osnova výukového modulu TWS_03c Box model v CSS Obtékání blokových (X)HTML elementů Pozicování blokových (X)HTML elementů Tvorba designu (layoutu) webové stránky
BOX MODEL V CSS
Box model v CSS Matematický model určující rozměry blokových (X)HTML elementů: - nadpisy <h1> </h1> až <h6> </h6> - odstavce <p> </p> - seznamy číslované <ol> </ol> nebo nečíslované <ul> </ul> - citace <blockquote> </blockquote> - obecné bloky <div> </div> - tělo stránky <body> </body> Tyto elementy (značky) tvoří obdélníkový blok neboli box ohraničující nějaký textový či obrázkový obsah.
Box model v CSS Každý obdélníkový box (blokový XHTML element) je tvořen: - samotným obsahem prvku, - výplní (padding), - orámováním (border), - okrajem (margin). Obsahem bloku je vše, co je uvnitř blokové značky, například: text, obrázek, část dokumentu uvnitř <div> </div>, atd.
Box model v CSS Validní model boxu (správný, korektní, vyhovující normě):
Box model v CSS U validního box modelu vymezuje šířka (width) a výška (height) pouze samotný obsah blokového elementu. Rozměry okolních oblastí, tedy výplň (padding), rámeček (border) a vnější okraj (margin) se k těmto rozměrům přičítají !!! Validní box model používají současné moderní prohlížeče, jsou-li přepnuty v tzv. standardním režimu, tzn. pokud je správně definován typ dokumentu (DOCTYPE) jazyka XHTML nebo HTML 4.01 Strict.
Box model v CSS Nevalidní model boxu (nekorektní, nevyhovující normě): Šířka (width) se chápe jako celkový rozměr: šířka obsahu + padding + border Výška (height) se chápe jako celkový rozměr: výška obsahu + padding + border Nevalidní model boxu
Box model v CSS Nevalidní box model používaly staré prohlížeče (např. IE 5, IE 5.5) nebo moderní, které jsou přepnuty do režimu zpětné kompatibility (tzv. quirk mód) z důvodu korektního zobrazení starších web stránek. Přepnutí do quirk módu se v prohlížeči provede tehdy, pokud: - je rozpoznán dokument HTML 4.01 Transitional nebo starší, - na začátku chybí deklarace typu dokumentu (DOCTYPE), - DOCTYPE deklarace je uvedena, avšak chybně.
Box model v CSS Nevalidní model boxu Validní model boxu
width a height = šířka a výška obsahu NEVALIDNÍ MODEL BOXU: width a height = obsah + padding + border
Box model v CSS Rozměry jednotlivých stran boxu lze nastavit najednou, například: padding: 1.2em; margin: 20px; Rozměry lze nastavit také samostatně pro jednotlivé strany boxu, například: margin-left: 30px; margin-right: 10px; Je možný i tento zápis: margin: horní pravý spodní levý; margin: 10px 0px 10px 30px;
Výplň boxu (padding) CSS vlastnost, která definuje výplň (odstup, vzdálenost) mezi obsahem a orámováním (border). Rozměr vlastnosti padding lze nastavit samostatně pro každou stranu: padding-top rozměr výplně horní části padding-right rozměr výplně pravé části padding-bottom rozměr výplně spodní části padding-left rozměr výplně levé části
Výplň boxu (padding) PŘÍKLAD POUŽITÍ: p.ukazka { border: 2px solid red; padding: 25px; } <p class="ukazka">Tento text má padding 25px na všech stranách.</p> Obsah odstavce 25px po celém obvodu Výplň (padding) Orámování (border)
Výplň boxu (padding) PŘÍKLAD POUŽITÍ: p.ukazka { border: 2px solid red; padding-left: 150px; } <p class="ukazka">Tento text má padding vlevo 150px.</p> 150px Vzdálenost mezi levým ohraničením a textovým obsahem bude 150px. Rozměr výplně nahoře (top), vpravo (right) a dole (bottom) bude 0px.
Okraj boxu (margin) CSS vlastnost, která definuje okraj, tedy vzdálenost mezi okrajem bloku (boxu) a orámováním (border). Rozměr vlastnosti margin lze nastavit samostatně pro každou stranu: margin-top rozměr horního okraje margin-right rozměr pravého okraje margin-bottom rozměr spodního okraje margin-left rozměr levého okraje
Okraj boxu (margin) PŘÍKLAD POUŽITÍ: p.ukazka { border: 2px solid red; margin-left: 150px; } <p class="ukazka">Tento text má margin vlevo 150px.</p>
Výplň versus okraj boxu Výplň (padding): Vzdálenost mezi obsahem a ohraničením padding-left: 150px; Okraj (margin): Vzdálenost mezi ohraničením a koncem bloku (boxu) margin-left: 150px;
Obtékání objektů CSS vlastnost float. float: left; Umístí objekt na levou stranu a obtéká jej jiným zprava. float: right; Umístí objekt na pravou stranu a obtéká jej jiným zleva. Výchozí hodnotou všech elementů je none (bez obtékání). Obtékaný prvek
Obtékání objektů Příklad použití .vlevo { float: left; margin-right: 15px; margin-bottom: 15px; } <img src="obrazek.jpg" class="vlevo" /> <p>Lorem ipsum dolor…</p>
Ukončení obtékání objektů CSS vlastnost clear. clear: left; Ukončí obtékání u objektu s vlastností float: left. clear: right; Ukončí obtékání u objektu s vlastností float: right. clear: both; Ukončí veškeré obtékání objektu. clear: none; Výchozí hodnota – umožní obtékání plovoucího objektu. Plovoucí (obtékaný) objekt: Objekt má nastavenou vlastnost float: left nebo float: right
Ukončení obtékání objektů Příklad použití .neobtekat { clear: both; } .vlevo { float: left; margin-right: 15px; margin-bottom: 15px; } <img src="obrazek.jpg" class="vlevo" /> <p>Lorem ipsum dolor…</p> <p class="neobtekat">Tento text již bude pod obrázkem.</p>
Pozicování (umisťování) elementů Jakýkoliv objekt (obrázek, tabulka, text, atd.) lze umístit kamkoliv na stránku. S objekty lze posouvat, mohou se překrývat. K pozicování se používá CSS vlastnost position. Její standardní hodnoty jsou absolute nebo relative. Pro určení směru se používá vlastnosti: top – číselná hodnota určuje posunutí ve vertikálním směru left – číselná hodnota určuje posunutí v horizontálním směru Číslo může být kladné i záporné, lze použít všechny jednotky v CSS.
Absolutní pozicování position: absolute; Absolutní pozicování umístí objekt do stránky na udané souřadnice bez ohledu na okolní obsah. Objekt je vyjmut z toku dokumentu a umístěn na dané souřadnice:
Absolutní pozicování Příklad použití <p>Toto je nějaký text. <img src="obrazek.jpg" />A tady pokračuje. </p> Bez použití pozicování je obrázek součástí textu, zarovnán na spodní část:
Absolutní pozicování Příklad použití .posun { position: absolute; top: 100px; left: 50px; } <p>Toto je nějaký text. <img class="posun" src="obrazek.jpg" /> A tady pokračuje. </p> Obrázek je vyjmut z textu. Levý horní roh obrázku je vzdálen 50px od levého okraje okna prohlížeče a 100px od horního okraje okna prohlížeče. 100px 50px
Relativní pozicování position: relative; Relativní pozice určuje, o kolik se má objekt posunout oproti své normální poloze.
Relativní pozicování Příklad použití .posun { position: relative; top: 50px; } <p>Toto je nějaký text. <img class="posun" src="obrazek.jpg" /> A tady pokračuje. </p> Obrázek je stále vložen mezi oba texty. Pouze je posunut vůči své původní poloze o 50px ve vertikálním směru (počítáno od levého horního okraje)
Relativní pozicování Příklad použití a { font-size: 20px; font-weight: bold; text-decoration: none; } a:hover { position: relative; top: 5px; } <a href="http://chmiel.chytry.cz">chmiel.chytry.cz</a> Najetí myší na odkaz způsobí mírný posun odkazu dolů o 5px.
Překrývání objektů z-index: celé číslo; Při přesouvání objektů může dojít k překrytí s jiným objektem. CSS vlastnost z-index posouvá objekt v ose „z“. Čím vyšší číslo, tím „blíže“ se nachází k pozorovateli. Menší číslo naopak posouvá objekt do pozadí. Výchozí hodnota všech objektů je 0. Čísla mohou být kladná i záporná.
Překrývání objektů Příklad použití .posun { position: relative; top: 60px; left: 30px; } <p>Toto je nějaký text. <img class="posun" src="obrazek.jpg" /> A tady pokračuje. </p> Obrázek při relativním posunu vlevo překryl text. Je tedy v ose „z“ blíže k pozorovateli.
Překrývání objektů Příklad použití .posun { position: relative; top: 60px; left: 30px; z-index: -1; } <p>Toto je nějaký text. <img class="posun" src="obrazek.jpg" /> A tady pokračuje. </p> Obrázek byl odsunut do pozadí o jednu pozici vůči textu. Text má totiž výchozí nastavení, tedy z-index: 0;
aneb „Jak to všechno smontovat dohromady…“ DESIGN WEBOVÉ STRÁNKY aneb „Jak to všechno smontovat dohromady…“
Design (layout) webové stránky Všechny techniky pro vytváření designu webové stránky v CSS jsou založeny především na těchto základních konceptech: 1. Pozicování blokových elementů (position, top, left) 2. Obtékání blokových elementů (float, clear) 3. Manipulace s jejich okraji (width, height, padding, border, margin)
Nastavení stylů pro tělo stránky Některé vlastnosti platné pro celý dokument je vhodné nastavit pro selektor body. Jedná se především o: - font písma (druh, velikost, barva písma), - barva nebo obrázek na celkovém pozadí, - vynulování výplně a okrajů boxů z důvodu rozdílné podpory prohlížečů webových stránek.
Nastavení stylů pro tělo stránky Ukázka možného stylového předpisu: body { background-color: #aaa; font-family: Arial, Helvetica, sans-serif; font-size: 16px; margin: 0px; padding: 0px; }
Vytvoření obalu (kontejneru) stránky Pro lepší čitelnost na zobrazovacích zařízeních je vhodné obsah celé stránky vložit do tzv. obalu neboli kontejneru a vycentrovat jej na střed. Kontejnerem je blokový element <div> </div>, ve kterém bude vložen celý obsah webové stránky. S ohledem na rozlišení monitorů a dataprojektorů (současné i starší modely) je vhodná šířka kontejneru 1000px.
Vytvoření obalu (kontejneru) stránky margin: 10px auto 10px auto; width: 1000px; background-color: #f96; } Vycentrování kontejneru: Nastaví se nějaká šířka okraje pro horní a spodní okraj (zde např. 10px) Pro pravý a levý okraj se zvolí hodnota auto.
Vytvoření obalu (kontejneru) stránky Do vlastní webové stránky umístíme kontejner: <body> <div id="kontejner"> Zde bude vložen celý obsah webové stránky !!! Tzn. Další bloky, odstavce, obrázky, tabulky, apod. </div> </body>
Hlavička webové stránky Místo pro logo, název firmy, společnosti, tematický obrázek apod. #hlavicka { width: 1000px; height: 80px; background-color: #ff6; } Šířka shodná s šířkou kontejneru Výška hlavičky, je-li použit na pozadí obrázek, mají shodnou výšku
Navigace webové stránky Místo pro navigační odkazy #levemenu { width: 180px; padding: 10px; float: left; background-color: #f96; min-height: 400px; _height: 400px; } Šířka pro samotný obsah navigace Výplň mezi obsahem a ohraničením, celková šířka je 180 + 10 + 10 = 200px Umístění vlevo, bude obtékán zprava Minimální výška bloku, pokud jej obsah překročí, blok se obsahu přizpůsobí!!! Pouze pro Internet Explorer 6.0 a starší. min-height funguje pouze ve standardním režimu prohlížeče (např. doctype XHTML).
Obsah webové stránky Místo pro informační obsah webové stránky (texty, obrázky, videa) #obsah { width: 780px; padding: 10px; background-color: #fff; float: right; min-height: 400px; _height: 400px; } Šířka pro samotný obsah bloku Výplň mezi obsahem a ohraničením, celková šířka je 780 + 10 + 10 = 800px Umístění vpravo, bude obtékán zleva
Zápatí webové stránky Místo pro informace o vlastníkovi (resp. tvůrci) webu, další odkazy, atd. #zapati { clear: both; width: 980px; padding: 10px; background-color: #9f6; height: 20px; text-align: right; } Ukončení obtékání Šířka pro samotný obsah bloku Výplň mezi obsahem a ohraničením, celková šířka je 980 + 10 + 10 = 1000px Výška samotného obsahu, celková výška je 20 + 10 + 10 = 40px Zarovnání textu na pravou stranu elementu
Kód webové stránky <body> <div id="kontejner"> <div id="hlavicka">Hlavička stránky</div> <div id="levemenu">Navigace</div> <div id="obsah">Obsah stránky</div> <div id="zapati">Ing. Pavel Chmiel, Ph.D. | © 2012</div> </div> </body>
Výsledný základní designu webu
Konec modulu TWS_03c Děkuji Vám za pozornost.