0 Kč bez DPH

Jak změnit pozadí webových stránek

Uvažovali jste někdy o změně pozadí webových stránek a nevěděli jste jak na to?

Přinášíme vám jednoduchý návod, jak si můžete pozadí stránek změnit s pomocí kaskádových CSS stylů. Do pozadí stránek tak můžete nastavit např. vlastní barvu, barevný přechod nebo třeba umístit vlastní obrázek.

Pod pojmem pozadí stránek se obvykle rozumí:

  1. jednolitá barva pozadí
  2. barevný přechod tzv. gradient
    - kombinuje obrázek a barvu pozadí
  3. opakující se obrázek na pozadí
    - týká se šablon v inPage

Pozadí stránek v inPage

Pozadí stránek u šablon MIRA, ATLAS, VEGA, ZETA, POLARIS a NAVI se skládá z kombinace obrázku a barvy pozadí:

  • horní část pozadí tvoří OBRÁZEK
  • spodní část pozadí tvoří BARVA, která na obrázek navazuje

Výjimkou je šablona s názvem MEDIA, u které tvoří pozadí jednolitá barva.

Změna pozadí pomocí CSS

Změna pozadí se zapisuje buď pomocí zápisu background-color: nebo background: do vlastního CSS stylu (sekce VZHLED - Vlastní CSS styl), rozdíly jsou v tom, že první zápis umožnuje zapsat jen barvu a už ne obrázek, druhý umožňuje zapsat obrázek, opakování, souřadnice a barvu.

Při vkládání zápisu do vlastního CSS stylu nezapomeňte zaškrtnout volbu "Nastavit styl jako aktivní"

Jak změnit pozadí www stránek si postupně ukážeme na jednotlivých příkladech.

1. Jednolitá barva pozadí

Chcete-li jednoduše změnit barvu pozadí vašich stránek např. na zelenou, vložte níže uvedený zápis do vlastního CSS stylu. Barvu lze definovat buď v hexadecimálním kódu (viz příklad 1) nebo zadáním názvu barvy v anglickém jazyce (viz příklad 2)

Zápis platí pro všechny šablony

Příklad 1: body { background-color: #008000; }
Příklad 2: body { background-color: green; }

Lze použít také zápis

Příklad 1: body { background: #008000; }
Příklad 2: body { background: green; }

Atribut "background-color" v tomto případě umožnuje zapsat jen barvu.
Atribut "background:" umožnuje zapsat obrázek, opakování, souřadnice i barvu.

Výslednou změnu pozadí můžete porovnat na obrázku.

2. Barevný přechod (gradient)

Barevným přechodem (tzv. gradientem) nazýváme pozadí stránek přecházející plynule z jedné barvy do druhé. Představte si např. tmavě šedé pozadí přecházející postupně do světle šedé. Nastavení pozadí tzv. gradientu se tvoří kombinací obrázku s vytvořeným gradientem a barvy pozadí, která by měla navazovat na spodní barvu obrázku. Vysvětlíme na příkladu:

Vytvoření obrázku s gradientem

V programu na tvorbu a úpravu obrázků (doporučujeme např. program Zoner Photo Studio) si lze vytvořit obrázek s barevným gradientem.


(pro názorný příklad je velikost námi vytvořeného obrázku s gradientem je 512x512 pixelů, ve skutečnosti však stačí, když bude rozměr obrázku na šířku pouhý 1pixel)

Vytvořený obrázek následně nahrajte do inPage do sekce OBRÁZKY, obrázek pojmenujte např. jako "pozadí". Jakmile jste obrázek do administrace nahráli, můžete změnit pozadí stránek pomocí CSS.

Definice pozadí v CSS stylech

Vložte následující zápis do vlastního CSS stylu (sekce VZHLED - Vlastní CSS styl)

Zápis platí pro všechny šablony

body { background: url("/obrazek/3/pozadi") repeat-x 0 0 #F2F2F2; }

Zápis "url" je povinný, pokud pracujete s obrázkem -> vyznačuje cestu k originálu obrázku. Zápis repeat-x způsobuje opakování obrázku na pozadí v horizontální poloze. Zápis #F2F2F2 určuje barvu pozadí, navazující na spodní barvu obrázku (v našem případě je to světle šedá barva).

Atribut "background:" umožnuje do pozadí stránek zapsat obrázek, opakování, souřadnice i barvu.

Výslednou změnu pozadí můžete porovnat na obrázku.

3. Opakující se obrázek na pozadí

Obrázek na pozadí je trochu specifická záležitost, ne každý obrázek je vhodný pro pozadí webových stránek.

Vhodné obrázky pro pozadí vašich webových stránek můžete najít třeba na internetu. Abyste v této chvíli nemuseli nic hledat, uložte si do svého PC následující obrázek s pozadím, který vidíte vpravo.

(obrázek pozadí STAHUJTE ZDE)

Následně obrázek s pozadím nahrajte do administrace vašeho inPage do sekce OBRÁZKY. Obrázek pojmenujte např. jen jako "Pozadí"

Definice pozadí v CSS stylech

Po nahrátí obrázku s pozadím přejděte k editaci vlastního CSS stylu (sekce VZHLED -> Vlastní CSS styly) a vložte do CSS následující zápis:

Zápis platí pro všechny šablony

body { background: url("/obrazek/3/pozadi") repeat 0 0 #733F03; }

Výsledné zobrazení pozadí stránek může poté vypadat takto:


(ukázka z webu www.SAULESRO.cz - pro zvětšení klikněte na obrázek)

Obrázek na pozadí definujeme pomocí atributu background: url (). Opakování obrázku způsobí zápis repeat - tímto vyskládá prohlížeč celé pozadí opakujícím se obrázkem . Poslední zápis #733F03 značí barvu podkladu pozadí, v našem případě je to tmavě hnědá z obrázku, avšak na místo barvy lze použít i zápis "transparent".

Kromě hodnoty "repeat" lze využít i další hodnoty repeat-x a repeat-y, ty určují zda se má obrázek na pozadí opakovat pouze v ose X (horizontálně) nebo jen v ose Y (vertikálně).

Kde zjistíte adresu obrázku?

Pokud nevíte jak zjistit URL adresu obrázku, kterou potřebujete vložit při změně pozadí do vlastního CSS stylu, zkuste si zapamatovat následující:

V první řadě záleží na tom, jaký používáte jazyk aplikace inPage. Přednastavený jazyk je český, lze jej však přepnout do slovenštiny, němčiny, angličtiny atd. Jazyk aplikace lze změnit v administraci v sekci NASTAVENÍ -> Nastavení prostředí -> Jazyk aplikace.

Používáte inPage v češtině? Pak URL cesta k obrázku bude:
url ("/obrazek/3/adresa-obrazku-jpg")

Používáte inPage ve slovenštině? Pak URL cesta k obrázku bude:
url ("/obrazok/3/adresa-obrazku-jpg")

Používáte inPage v angličtině? Pak URL cesta k obrázku bude:
url ("/picture/3/adresa-obrazku-jpg")

Používáte inPage v němčině? Pak URL cesta k obrázku bude:
url ("/bild/3/adresa-obrazku-jpg")

V druhé řadě potřebujete zjistit samotnou adresu vašeho obrázku: /adresa-obrazku-jpg/. Adresu obrázku zjistíte tak, že si otevřete editaci vašeho obrázku v inPage a na stránce kde nastavujete parametry obrázku, rozkliknete záložku Optimalizace pro vyhledávače a zde adresu najdete (viz obrázek)

Adresa obrázku se zpravidla odvíjí od názvu obrázku, pokud si adresu nedefinujete sami.

 

Hanka Medková
hana.medkova(zav)zoner.cz

Přidat komentář

Přehled komentářů

  • domena

    14. 4. 2011 15:10:36 | tom

    dobre diky moc s formularem se vam jeste ozvu behem dneska tu domenu objednam a pak mi to prevedete a s formularem pomuzete diky

    Odpovědět

  • RE: diky

    14. 4. 2011 9:29:21 | Hana Medkova

    Dobrý den Tome, pokud nyní vytváříte prezentaci na doméně III. řádu http://www.zubni-ordinace-kraslice.inpage.cz pak byste si mohl zaregistrovat doménu vlastní II. řádu (avšak na místo teček je nutné použít pomlčky) - vaše vlastní doména by mohla být: http://www.zubni-ordinace-kraslice.cz

    Teoreticky byste si mohl vlastní doménu "zubni-ordinace-kraslice.cz" objednat s programem inPage STANDARD na stránkách www.inpage.cz/produkty - při objednávce si zvolíte i tu vlastní doménu a jakmile objednávku uhradíte, můžete nás požádat o PŘEVEDENÍ OBSAHU PREZENTACE z Vaší testovací domény na tu vlastní doménu. Převod obsahu je ZDARMA a Vy se pak můžete pyšnit vlastní doménou s vlastním emailem a stránkami v redakčním systému inPage.

    Roční provoz inPage standard vč. domény stojí 1200Kč bez DPH. S tím formulářem Vám můžeme pomoci, jen tento požadavek zašlete na admin@zoner.cz

    Odpovědět

  • diky

    13. 4. 2011 22:53:28 | tom

    uz nic uz jsem na to prisel diky ale jeste se zeptam na neco jineho potreboval bych na vasich strankach : http://www.zubni-ordinace-kraslice.inpage.cz/ domenu www.zubniordinace.kraslice.cz nebo www.zubni.ordinace.kraslice.cz je to mozny co mam udelat abych to od vas ziskal a kolik me to bude rocne stat a jeste jeden dotaz na tehle adrese potrevuju udelat objednavkovy system (formular) ? je to mozny udelat ? : http://www.zubni-ordinace-kraslice.inpage.cz/inpage/chcete-se-objednat/ diky za vas cas pokud vse pujde rad si u vas rocne budu platit domenu plus hosting diky

    Odpovědět

  • nejde

    13. 4. 2011 15:29:59 | tom

    muzete mi poradit jeste postupuju podle navodu ale nejde mi to moje adresa obrazku je : p4130003-jpg opravdu postupuju tak jak mam v css si to zmenim a nic nejde napiste mi jak to mam mit prosim stou moji adresou obrazku diky

    Odpovědět

  • RE: adresa obrázku

    13. 4. 2011 10:13:05 | Hana Medkova

    Dobrý den Tome, na konec článku jsem doplnila požadované informace, kde a jak zjistíte adresu vašeho vlastního obrázku, který potřebujete vložit do pozadí stránek.

    Odpovědět

  • adresa obrazku

    12. 4. 2011 13:56:39 | tom

    dobry den mam dotaz chci si zmenit pozadi stranky a nemuzu najit url neboli adresu obrazku nahraju obrazek do obrazku tam dam upavit a nikde nevidim zadnou adresu kterou muzu dat do css poradze prosim diky

    Odpovědět