Webové stránky
8. Pozadí webové stránky CSS pozadí
Vytvořil: Petr Lerch
Datum vytvoření: 18. 10. 2012
www.isspolygr.cz Integrovaná střední škola polygrafická, Brno, Šmahova 110 Šmahova 110, 627 00 Brno Interaktivní metody zdokonalující edukaci na ISŠP CZ.1.07/1.5.00/34.0538
DUM číslo: 8
W e bov é s t r á nk y
Název: Pozadí webové stránky CSS pozadí Strana: 1/6
Škola
Integrovaná střední škola polygrafická, Brno, Šmahova 110
Ročník
4. ročník (SOŠ)
Název projektu
Interaktivní metody zdokonalující proces edukace na ISŠP
Číslo projektu
CZ.1.07/1.5.00/34.0538
Číslo a název šablony
III/2 Inovace a zkvalitnění výuky prostřednictvím ICT
Autor
Petr Lerch
Tématická oblast
Webové stránky
Název DUM
Pozadí webové stránky
Pořadové číslo
DUM 8
Kód DUM
VY_32_INOVACE_08_OV_LE
Datum vytvoření
18. 10. 2012
Anotace
Dokument nás uvede do problematiky grafických datových formátů používaných na webu.
Pokud není uvedeno jinak, je uvedený materiál z vlastních zdrojů autora.
Integrovaná střední škola polygrafická, Brno, Šmahova 110 Šmahova 110, 627 00 Brno Interaktivní metody zdokonalující edukaci na ISŠP CZ.1.07/1.5.00/34.0538
DUM číslo: 8
w e bov é s t r á nk y
Název: Pozadí webové stránky CSS pozadí Strana: 2/6
CSS pozadí v Adobe Dreamweaveru
Dříve než vytvoříme HTML soubor, musíme založit nové webové místo. (viz. DUM 3 – Založení webu) Vytvořime nový prázdný HTML dokument. Soubor > Novy...
Soubor uložíme do lokální kořenové složky. (viz. DUM3)
Kaskádový styl tagu Tag je klíčem k nastavení parametrů pozadí webové stránky. Vyhledáme tedy tabulku Styly CSS a klikneme na ikonu Nové pravidlo CSS. .
Integrovaná střední škola polygrafická, Brno, Šmahova 110 Šmahova 110, 627 00 Brno Interaktivní metody zdokonalující edukaci na ISŠP CZ.1.07/1.5.00/34.0538
DUM číslo: 8
w e bov é s t r á nk y
Název: Pozadí webové stránky CSS pozadí Strana: 3/6
Objeví se tabulka Nové pravidlo CSS.
V menu Vyberte typ selektoru zvolíme položku Tag. V části Název selektoru by se měl automaticky objevit tag body, pokud tam není doplňte jej ručně. Tabulku potvrdíme stiskem tlačítka OK. Objeví se tabulka Definice pravidla CSS pro body. S touto tabulkou jsme se již setkali při formátování textu pomocí CSS stylů. (viz. DUM 5) V této tabulce nás bude zajímat kategorie Pozadí, kterou si nyní podrobně rozebereme.
Integrovaná střední škola polygrafická, Brno, Šmahova 110 Šmahova 110, 627 00 Brno Interaktivní metody zdokonalující edukaci na ISŠP CZ.1.07/1.5.00/34.0538
DUM číslo: 8
w e bov é s t r á nk y
Název: Pozadí webové stránky CSS pozadí Strana: 4/6
Kategorie Pozadí obsahuje následující položky: Background-color (barva pozadí) V této části nastavujeme barvu pozadí dokumentu. Barvu můžeme vybrat buď ze vzorníku nebo můžeme vybrat konkrétní odstín v Adobe Photoshopu a přenést kód barvy do určeného pole. například. černá barva má kód #000000, bílá barva #FFFFFF Background-image (obrázek pozadí) V této části můžeme načíst bitmapový vzorek, fotografii, nebo ilustraci. Backgroud-repeat (opakování pozadí) Zde nastavujeme opakování obrázku. Dostupné jsou volby: – repeat (opakuje motiv ve všech směrech) – repeat-x (opakuje motiv po vodorovné ose) – repeat-y (opakuje motiv po svislé ose) – no-repeat (vložený obrázek se nebude opakovat) Background-attachment (připevnění pozadí) Tato volba ovlivňuje chování pozice obrázku na pozadí. Nabízí dvě možnosti: – scroll (rolovací ) – fixed (pevně umístěné) Volba scroll způsobí, že obrázek pozadí se bude při rolování pobybovat na stránce, zatím co volba fixed, pevně umístí obrázek na stránce. Ostatní obsah webu tak bude rolovat na statickém pozadí.
Integrovaná střední škola polygrafická, Brno, Šmahova 110 Šmahova 110, 627 00 Brno Interaktivní metody zdokonalující edukaci na ISŠP CZ.1.07/1.5.00/34.0538
DUM číslo: 8
w e bov é s t r á nk y
Název: Pozadí webové stránky CSS pozadí Strana: 5/6
Background-position (x) (posun pozadí v ose x) Tato volba umožňuje zarovnat pozadí na vodorovnou osu. Máme tyto možnosti: – left (doleva) – right (doprava) – center (na střed) – vlastní hodnota Background-position (y) (posun pozadí v ose y) Tato volba umožňuje zarovnat pozadí na svislou osu. Máme tyto možnosti: – left (doleva) – right (doprava) – center (na střed) – vlastní hodnota
Otázky
1. Popište krok po kroku tvorbu pravidla CSS pro tag . 2. Jaké možnosti nabízí položka Background-repeat? Vyjmenujte je. 3. Popište chování obrázku pozadí, který má nastavený parametr Background-attachment na hodnotu fixed.
Integrovaná střední škola polygrafická, Brno, Šmahova 110 Šmahova 110, 627 00 Brno Interaktivní metody zdokonalující edukaci na ISŠP CZ.1.07/1.5.00/34.0538
DUM číslo: 8
w e bov é s t r á nk y
Název: Pozadí webové stránky CSS pozadí Strana: 6/6
