Prezentace se nahrává, počkejte prosím

Prezentace se nahrává, počkejte prosím

TVORBA WEBOVÝCH STRÁNEK

Podobné prezentace


Prezentace na téma: "TVORBA WEBOVÝCH STRÁNEK"— Transkript prezentace:

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

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

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: left nebo 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> <p class="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 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.

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 50px od levého okraje okna prohlížeče a 100px od 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 aneb „Jak to všechno smontovat dohromady…“
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
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 = 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 = 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 = 1000px Výška samotného obsahu, celková výška je = 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. | © 2012</div> </div> </body>

45 Výsledný základní designu webu

46 Konec modulu TWS_03c Děkuji Vám za pozornost.


Stáhnout ppt "TVORBA WEBOVÝCH STRÁNEK"

Podobné prezentace


Reklamy Google