Webové stránky 8. Vytvořil: Petr Lerch www.isspolygr.cz Datum vytvoření: 18. 10. 2012 Webové Strana: 1/6
Škola Ročník Název projektu Číslo projektu Číslo a název šablony Autor Tématická oblast Název DUM 4. ročník (SOŠ) Interaktivní metody zdokonalující proces edukace III/2 Inovace a zkvalitnění výuky prostřednictvím ICT Petr Lerch 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. Strana: 2/6
v Adobe Dreamweaveru Dříve než vytvoříme HTML soubor, musíme založit nové 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 <body></body> Tag <body></body> je klíčem k nastavení parametrů pozadí stránky. Vyhledáme tedy tabulku Styly CSS a klikneme na ikonu Nové pravidlo CSS.. 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. 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í. 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 <body></body>. 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. Strana: 6/6