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

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

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

Podobné prezentace


Prezentace na téma: "Výukový modul TWS_03cIng. Pavel Chmiel, Ph.D. UNIV 2 - KRAJE TVORBA WEBOVÝCH STRÁNEK."— Transkript prezentace:

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

2 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

3 BOX MODEL V CSS

4 Box model v CSS  Matematický model určující rozměry blokových (X)HTML elementů: - nadpisy až - odstavce - seznamy číslované nebo nečíslované - citace - obecné bloky - tělo stránky  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ř, 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 Nevalidní model boxu Validní model boxu Box model v CSS

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 padding lze nastavit samostatně pro každou stranu: padding-toprozmě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; } Tento text má padding 25px na všech stranách. Obsah odstavce Výplň (padding) Orámování (border) 25px po celém obvodu

15 Výplň boxu (padding) PŘÍKLAD POUŽITÍ: p.ukazka { border: 2px solid red; padding-left: 150px; } Tento text má padding vlevo 150px. 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-toprozmě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; } Tento text má margin vlevo 150px.

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; } Lorem ipsum dolor…

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; } Lorem ipsum dolor… Tento text již bude pod obrázkem.

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í Toto je nějaký text. A tady pokračuje. 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; } Toto je nějaký text. A tady pokračuje. 100px 50px 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.

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; } Toto je nějaký text. A tady pokračuje. 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; } chmiel.chytry.cz 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; } Toto je nějaký text. A tady pokračuje. 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; } Toto je nějaký text. A tady pokračuje. 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, 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: Zde bude vložen celý obsah webové stránky !!! Tzn. Další bloky, odstavce, obrázky, tabulky, apod.

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; } Šířka pro samotný obsah bloku Výplň mezi obsahem a ohraničením, celková šířka je = 1000px Ukončení obtékání Výška samotného obsahu, celková výška je = 40px Zarovnání textu na pravou stranu elementu

44 Kód webové stránky Hlavička stránky Navigace Obsah stránky Ing. Pavel Chmiel, Ph.D. | © 2012

45 Výsledný základní designu webu

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


Stáhnout ppt "Výukový modul TWS_03cIng. Pavel Chmiel, Ph.D. UNIV 2 - KRAJE TVORBA WEBOVÝCH STRÁNEK."

Podobné prezentace


Reklamy Google