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 1. Box model v CSS 2. Obtékání blokových (X)HTML elementů 3. Pozicování blokových (X)HTML elementů 4. Tvorba designu (layoutu) webové stránky 1
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. 2
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ě): 3
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 4
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 5
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; 6
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 padding-right padding-bottom padding-left rozměr výplně horní části rozměr výplně pravé části rozměr výplně spodní části 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 Výplň (padding) 25px po celém obvodu Orámování (border) 7
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 margin-right margin-bottom margin-left rozměr horního okraje rozměr pravého okraje rozměr spodního okraje rozměr levého okraje 8
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; 9
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> 10
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> 11
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: 12
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 100px od levého okraje okna prohlížeče a 100px 50px od horního okraje okna prohlížeče. 13
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) 14
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á. 15
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; 16
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) 17
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; } 18
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 #kontejner { 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. 19
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 } 20
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; Šíř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 min-height: 400px; _height: 400px; } 21
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> 22
Výsledný základní designu webu Konec modulu TWS_03c Děkuji Vám za pozornost. 23