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

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.

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

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

Tento text má padding 25px na všech stranách.

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

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.

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

8

Okraj boxu (margin) PŘÍKLAD POUŽITÍ: p.ukazka { border: 2px solid red; margin-left: 150px; }

Tento text má margin vlevo 150px.

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

Lorem ipsum dolor…

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

Lorem ipsum dolor…

Tento text již bude pod obrázkem.

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í

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:

Absolutní pozicování Příklad použití .posun { position: absolute; top: 100px; left: 50px; }

Toto je nějaký text. A tady pokračuje.

Obrázek je vyjmut z textu. Levý horní roh obrázku je vzdálen 50px 100px 50px

od levého okraje okna prohlížeče a 100px 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; }

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)

14

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.

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

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.

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;

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

Vycentrování kontejneru: Nastaví se nějaká šířka okraje pro horní a spodní

background-color: #f96; }

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:

Hlavička webové stránky Místo pro logo, název firmy, společnosti, tematický obrázek apod. #hlavicka { width: 1000px;

Šířka shodná s šířkou kontejneru

height: 80px;

Výška hlavičky, je-li použit na pozadí

background-color: #ff6;

obrázek, mají shodnou výšku

}

20

Navigace webové stránky Místo pro navigační odkazy #levemenu { width: 180px; padding: 10px;

Šířka pro samotný obsah navigace Výplň mezi obsahem a ohraničením, celková šířka je 180 + 10 + 10 = 200px

float: left;

Umístění vlevo, bude obtékán zprava

background-color: #f96;

Minimální výška bloku, pokud jej obsah

min-height: 400px;

překročí, blok se obsahu přizpůsobí!!!

_height: 400px;

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;

Šířka pro samotný obsah bloku

padding: 10px;

Výplň mezi obsahem a ohraničením,

background-color: #fff; float: right;

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;

Ukončení obtékání

width: 980px;

Šířka pro samotný obsah bloku

padding: 10px;

Výplň mezi obsahem a ohraničením, celková šířka je 980 + 10 + 10 = 1000px

background-color: #9f6; height: 20px; text-align: right;

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

22

Výsledný základní designu webu

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

23