Vukov modul TWS_03cIng. Pavel Chmiel, Ph.D. UNIV 2 - KRAJETVORBA WEBOVCH STRNEK

Osnova vukovho modulu TWS_03cBox model v CSSObtkn blokovch (X)HTML elementPozicovn blokovch (X)HTML elementTvorba designu (layoutu) webov strnky

BOX MODEL V CSS

Box model v CSSMatematick model urujc rozmry blokovch (X)HTML element: - nadpisy a - odstavce - seznamy slovan nebo neslovan - citace - obecn bloky - tlo strnky Tyto elementy (znaky) tvo obdlnkov blok neboli box ohraniujc njak textov i obrzkov obsah.

Box model v CSSKad obdlnkov box (blokov XHTML element) je tvoen:- samotnm obsahem prvku, - vpln (padding), - ormovnm (border), - okrajem (margin).Obsahem bloku je ve, co je uvnit blokov znaky, napklad: text, obrzek, st dokumentu uvnit , atd.

Box model v CSSValidn model boxu (sprvn, korektn, vyhovujc norm):

Box model v CSSU validnho box modelu vymezuje ka (width) a vka (height) pouze samotn obsah blokovho elementu.Rozmry okolnch oblast, tedy vpl (padding), rmeek (border) a vnj okraj (margin) se k tmto rozmrm pitaj !!!Validn box model pouvaj souasn modern prohlee, jsou-li pepnuty v tzv. standardnm reimu, tzn. pokud je sprvn definovn typ dokumentu (DOCTYPE) jazyka XHTML nebo HTML 4.01 Strict.

Box model v CSSNevalidn model boxu (nekorektn, nevyhovujc norm):ka (width) se chpe jako celkov rozmr: ka obsahu + padding + borderVka (height) se chpe jako celkov rozmr: vka obsahu + padding + border Nevalidn model boxu

Box model v CSSNevalidn box model pouvaly star prohlee (nap. IE 5, IE 5.5) nebo modern, kter jsou pepnuty do reimu zptn kompatibility (tzv. quirk md) z dvodu korektnho zobrazen starch web strnek. Pepnut do quirk mdu se v prohlei provede tehdy, pokud: - je rozpoznn dokument HTML 4.01 Transitional nebo star, - na zatku chyb deklarace typu dokumentu (DOCTYPE), - DOCTYPE deklarace je uvedena, avak chybn.

Nevalidn model boxuValidn model boxuBox model v CSS

VALIDN MODEL BOXU:width a height = ka a vka obsahuNEVALIDN MODEL BOXU:width a height = obsah + padding + border

Box model v CSSRozmry jednotlivch stran boxu lze nastavit najednou, napklad: padding: 1.2em; margin: 20px;Rozmry lze nastavit tak samostatn pro jednotliv strany boxu, napklad: margin-left: 30px; margin-right: 10px;Je mon i tento zpis: margin: horn prav spodn lev; margin: 10px 0px 10px 30px;

Vpl boxu (padding)CSS vlastnost, kter definuje vpl (odstup, vzdlenost) mezi obsahem a ormovnm (border).Rozmr vlastnosti padding lze nastavit samostatn pro kadou stranu: padding-toprozmr vpln horn sti padding-right rozmr vpln prav sti padding-bottom rozmr vpln spodn sti padding-left rozmr vpln lev sti

Vpl boxu (padding)PKLAD POUIT:p.ukazka { border: 2px solid red; padding: 25px; }Tento text m padding 25px na vech stranch.Obsah odstavceVpl (padding)Ormovn (border)25px po celm obvodu

Vpl boxu (padding)PKLAD POUIT:p.ukazka { border: 2px solid red; padding-left: 150px; }Tento text m padding vlevo 150px.150pxVzdlenost mezi levm ohranienm a textovm obsahem bude 150px.Rozmr vpln nahoe (top), vpravo (right) a dole (bottom) bude 0px.

Okraj boxu (margin)CSS vlastnost, kter definuje okraj, tedy vzdlenost mezi okrajem bloku (boxu) a ormovnm (border).Rozmr vlastnosti margin lze nastavit samostatn pro kadou stranu: margin-toprozmr hornho okraje margin-right rozmr pravho okraje margin-bottom rozmr spodnho okraje margin-left rozmr levho okraje

Okraj boxu (margin)PKLAD POUIT:p.ukazka { border: 2px solid red; margin-left: 150px; }

Tento text m margin vlevo 150px.

Vpl versus okraj boxuVpl (padding): Vzdlenost mezi obsahem a ohranienmpadding-left: 150px;Okraj (margin): Vzdlenost mezi ohranienm a koncem bloku (boxu)margin-left: 150px;

Obtkn objektCSS vlastnost float. float: left; Umst objekt na levou stranu a obtk jej jinm zprava. float: right; Umst objekt na pravou stranu a obtk jej jinm zleva.Vchoz hodnotou vech element je none (bez obtkn).Obtkan prvek

Obtkn objektPklad pouit .vlevo { float: left; margin-right: 15px; margin-bottom: 15px; } Lorem ipsum dolor

Ukonen obtkn objektCSS vlastnost clear. clear: left; Ukon obtkn u objektu s vlastnost float: left. clear: right; Ukon obtkn u objektu s vlastnost float: right. clear: both; Ukon veker obtkn objektu. clear: none; Vchoz hodnota umon obtkn plovoucho objektu.Plovouc (obtkan) objekt: Objekt m nastavenou vlastnost float: left nebo float: right

Ukonen obtkn objektPklad pouit .neobtekat { clear: both; }.vlevo { float: left; margin-right: 15px; margin-bottom: 15px; } Lorem ipsum dolorTento text ji bude pod obrzkem.

Pozicovn (umisovn) elementJakkoliv objekt (obrzek, tabulka, text, atd.) lze umstit kamkoliv na strnku. S objekty lze posouvat, mohou se pekrvat.K pozicovn se pouv CSS vlastnost position. Jej standardn hodnoty jsou absolute nebo relative.Pro uren smru se pouv vlastnosti: top seln hodnota uruje posunut ve vertiklnm smru left seln hodnota uruje posunut v horizontlnm smru slo me bt kladn i zporn, lze pout vechny jednotky v CSS.

Absolutn pozicovnposition: absolute;Absolutn pozicovn umst objekt do strnky na udan souadnice bez ohledu na okoln obsah.Objekt je vyjmut z toku dokumentu a umstn na dan souadnice:

Absolutn pozicovnPklad pouit Toto je njak text. A tady pokrauje. Bez pouit pozicovn je obrzek soust textu, zarovnn na spodn st:

Absolutn pozicovnPklad pouit .posun { position: absolute; top: 100px; left: 50px; } Toto je njak text. A tady pokrauje. 100px50pxObrzek je vyjmut z textu.Lev horn roh obrzku je vzdlen 50px od levho okraje okna prohlee a 100px od hornho okraje okna prohlee.

Relativn pozicovnposition: relative;Relativn pozice uruje, o kolik se m objekt posunout oproti sv normln poloze.

Relativn pozicovnPklad pouit .posun { position: relative; top: 50px; } Toto je njak text. A tady pokrauje. Obrzek je stle vloen mezi oba texty. Pouze je posunut vi sv pvodn poloze o 50px ve vertiklnm smru (potno od levho hornho okraje)

Relativn pozicovnPklad pouit a { font-size: 20px; font-weight: bold; text-decoration: none; } a:hover { position: relative; top: 5px; } chmiel.chytry.cz

Najet my na odkaz zpsob mrn posun odkazu dol o 5px.

Pekrvn objektz-index: cel slo; Pi pesouvn objekt me dojt k pekryt s jinm objektem.CSS vlastnost z-index posouv objekt v ose z.m vy slo, tm ble se nachz k pozorovateli. Men slo naopak posouv objekt do pozad.Vchoz hodnota vech objekt je 0.sla mohou bt kladn i zporn.

Pekrvn objektPklad pouit .posun { position: relative; top: 60px; left: 30px; } Toto je njak text. A tady pokrauje. Obrzek pi relativnm posunu vlevo pekryl text. Je tedy v ose z ble k pozorovateli.

Pekrvn objektPklad pouit .posun { position: relative; top: 60px; left: 30px; z-index: -1; } Toto je njak text. A tady pokrauje. Obrzek byl odsunut do pozad o jednu pozici vi textu. Text m toti vchoz nastaven, tedy z-index: 0;

DESIGN WEBOV STRNKYaneb Jak to vechno smontovat dohromady

Design (layout) webov strnkyVechny techniky pro vytven designu webov strnky v CSS jsou zaloeny pedevm na tchto zkladnch konceptech: 1. Pozicovn blokovch element (position, top, left) 2. Obtkn blokovch element (float, clear) 3. Manipulace s jejich okraji (width, height, padding, border, margin)

Nastaven styl pro tlo strnkyNkter vlastnosti platn pro cel dokument je vhodn nastavit pro selektor body.Jedn se pedevm o: - font psma (druh, velikost, barva psma), - barva nebo obrzek na celkovm pozad, - vynulovn vpln a okraj box z dvodu rozdln podpory prohle webovch strnek.

Nastaven styl pro tlo strnkyUkzka monho stylovho pedpisu:body { background-color: #aaa; font-family: Arial, Helvetica, sans-serif; font-size: 16px; margin: 0px; padding: 0px;}

Vytvoen obalu (kontejneru) strnkyPro lep itelnost na zobrazovacch zazench je vhodn obsah cel strnky vloit do tzv. obalu neboli kontejneru a vycentrovat jej na sted.Kontejnerem je blokov element , ve kterm bude vloen cel obsah webov strnky.S ohledem na rozlien monitor a dataprojektor (souasn i star modely) je vhodn ka kontejneru 1000px.

Vytvoen obalu (kontejneru) strnky#kontejner { margin: 10px auto 10px auto; width: 1000px; background-color: #f96;}Vycentrovn kontejneru:Nastav se njak ka okraje pro horn a spodn okraj (zde nap. 10px)Pro prav a lev okraj se zvol hodnota auto.

Vytvoen obalu (kontejneru) strnkyDo vlastn webov strnky umstme kontejner:

Zde bude vloen cel obsah webov strnky !!! Tzn. Dal bloky, odstavce, obrzky, tabulky, apod.

Hlavika webov strnkyMsto pro logo, nzev firmy, spolenosti, tematick obrzek apod.#hlavicka { width: 1000px; height: 80px; background-color: #ff6;}ka shodn s kou kontejneruVka hlaviky, je-li pouit na pozad obrzek, maj shodnou vku

Navigace webov strnkyMsto pro navigan odkazy#levemenu { width: 180px; padding: 10px; float: left; background-color: #f96; min-height: 400px; _height: 400px;}ka pro samotn obsah navigaceVpl mezi obsahem a ohranienm, celkov ka je 180 + 10 + 10 = 200pxUmstn vlevo, bude obtkn zpravaMinimln vka bloku, pokud jej obsah pekro, blok se obsahu pizpsob!!!Pouze pro Internet Explorer 6.0 a star. min-height funguje pouze ve standardnm reimu prohlee (nap. doctype XHTML).

Obsah webov strnkyMsto pro informan obsah webov strnky (texty, obrzky, videa)#obsah { width: 780px; padding: 10px; background-color: #fff; float: right; min-height: 400px; _height: 400px;}ka pro samotn obsah blokuVpl mezi obsahem a ohranienm, celkov ka je 780 + 10 + 10 = 800pxUmstn vpravo, bude obtkn zleva

Zpat webov strnkyMsto pro informace o vlastnkovi (resp. tvrci) webu, dal odkazy, atd.#zapati { clear: both; width: 980px; padding: 10px; background-color: #9f6; height: 20px; text-align: right;}ka pro samotn obsah blokuVpl mezi obsahem a ohranienm, celkov ka je 980 + 10 + 10 = 1000pxUkonen obtknVka samotnho obsahu, celkov vka je 20 + 10 + 10 = 40pxZarovnn textu na pravou stranu elementu

Kd webov strnky

Hlavika strnky Navigace Obsah strnky Ing. Pavel Chmiel, Ph.D. | 2012

Vsledn zkladn designu webu

Konec modulu TWS_03c

Dkuji Vm za pozornost.

*************************************