1 / 46

TVORBA WEBOVÝCH STRÁNEK

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.

flann
Download Presentation

TVORBA WEBOVÝCH STRÁNEK

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. TVORBA WEBOVÝCH STRÁNEK Výukový modul TWS_03c Ing. Pavel Chmiel, Ph.D. UNIV 2 - KRAJE

  2. 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

  3. BOX MODEL V CSS

  4. 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.

  5. 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.

  6. Box model v CSS Validní model boxu (správný, korektní, vyhovující normě):

  7. 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.

  8. 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

  9. 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ě.

  10. Box model v CSS Nevalidní model boxu Validní model boxu

  11. VALIDNÍ MODEL BOXU: width a height = šířka a výška obsahu NEVALIDNÍ MODEL BOXU: width a height = obsah + padding + border

  12. 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;

  13. Výplň boxu (padding) • CSS vlastnost, která definuje výplň (odstup, vzdálenost) mezi obsahem a orámováním (border). • Rozměr vlastnosti paddinglze nastavit samostatně pro každou stranu:padding-top rozměr výplně horní částipadding-right rozměr výplně pravé částipadding-bottom rozměr výplně spodní částipadding-left rozměr výplně levé části

  14. 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)

  15. 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.

  16. Okraj boxu (margin) • CSS vlastnost, která definuje okraj, tedy vzdálenost mezi okrajem bloku (boxu) a orámováním (border). • Rozměr vlastnosti marginlze nastavit samostatně pro každou stranu:margin-top rozměr horního okrajemargin-right rozměr pravého okrajemargin-bottom rozměr spodního okrajemargin-left rozměr levého okraje

  17. 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>

  18. 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;

  19. 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

  20. 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>

  21. 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: leftnebo float: right

  22. 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> <pclass="neobtekat">Tento text již bude pod obrázkem.</p>

  23. 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 absolutenebo relative. • Pro určení směru se používá vlastnosti:top – číselná hodnota určuje posunutí ve vertikálním směruleft – čí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.

  24. 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:

  25. 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:

  26. 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 50pxod levého okraje okna prohlížeče a 100pxod horního okraje okna prohlížeče. 100px 50px

  27. Relativní pozicování • position: relative; • Relativní pozice určuje, o kolik se má objekt posunout oproti své normální poloze.

  28. 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)

  29. 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.

  30. 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á.

  31. 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.

  32. 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;

  33. DESIGN WEBOVÉ STRÁNKY aneb „Jak to všechno smontovat dohromady…“

  34. 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)

  35. 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.

  36. 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; }

  37. 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.

  38. 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.

  39. 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>

  40. 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

  41. 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).

  42. 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

  43. 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

  44. 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. | &copy; 2012</div> </div> </body>

  45. Výsledný základní designu webu

  46. Konec modulu TWS_03cDěkuji Vám za pozornost.

More Related