0 Kč s DPH
  • WYSIWYG verze 3.5
    • Návod je vytvořen ve WYSIWYG editoru verze 3.5 Více »

Jak vytvořit vícejazyčný web pomocí domén III. řádu

Každý uživatel systému inPage si může na svých stránkách zřídit vícejazyčný web. Potřebujete-li vytvořit webové stránky ve třech jazycích, můžete si na vlastní doméně (vase-domena.cz) zřídit domény III. řádu s názvy například english.vase-domena.cz nebo deutsch.vase-domena.cz.

Jak postupovat při zřízení vícejazyčného webu v inPage se dozvíte v následujícím návodu.

Zřízení programu inPage na doméně III. řádu

Pro vytvoření domény III. řádu je nutné přejít do zákaznického účtu na admin.czechia.com, kde máte vedeny vaše domény a případné další služby. Přihlašovací údaje k zákaznickému účtu byste měli znát, pokud je neznáte, kontaktujte prosím naši technickou podporu na admin@zoner.cz.

Po přihlášení do zák. účtu vyhledejte na stránce Seznam používaných služeb, kde najdete vaši vlastní doménu. Vedle názvu domény klikněte na odkaz Detail a přes záložku Dostupné operace můžete objednat doménu III. řádu s webhostingem inPage Standard Lite či Premium Lite na své vlastní doméně II. úrovně. Lite verze programů znamenají nákup se slevou 50 %, oproti běžné variantě programu se nijak neliší.

Ve chvíli, program inPage na doméně III. řádu uhradíte a platba dorazí na náš účet, přijdou vám nové přihlašovací údaje do administrace vašich webových stránek.

Ušetřete si práci! Zdarma zkopírujeme obsah mezi doménami

Nově zřízený web bude zcela bez obsahu. Nechcete-li tvořit celý obsah stránek od znovu, je možné požádat nás na adrese admin@zoner.cz o zkopírování dat z hlavní domény na nově zřízenou doménu III. řádu. V písemném požadavku bude potřeba uvést celé názvy obou domén, mezi kterými budete chtít obsah zdarma zkopírovat.

Na nové kopii stránek si v Nastavení -> Nastavení prostředí nastavte jazyk webu. Poté se všechny přednastavené texty a odkazy změní do jiného jazyka. Napsali jsme vám článek o změnách url adres v jazykových mutacích.

Takto budete mít vytvořeny jazykové mutace, které následně doporučujeme propojit pomocí vlaječek a zpětných odkazů.

Propojení vícejazyčných webů pomocí vlaječek

Pracovat budeme s vlastním CSS stylem, vlastní patičkou nebo boxem. Postup je shodný pro všechny šablony, liší se jen použitím vlastní patičky či boxu a zápisem CSS. Tento CSS zápis na konci návodu uvádíme pro každou šablonu zvláště. V našem příkladu níže v návodu pracujeme se šablonou PLUTO.

Umístění vlaječek do vlastního boxu

Obrázky vlaječek bude nutné nejdříve nahrát do administrace všech webů, které budou sloužit jako jazykové mutace.

Poznámka:

Vytvořený vlastní box či patičku můžete nadále využívat pro vkládání textů, které se vám budou zobrazovat v levém či pravém sloupci a patičce. Důležité je dbát na ohraničení vlaječek v HTML kódu příkazy <div id="jazykova-mutace"> a </div> a již nepoužití u dalšího textu. Tím zabezpečíte správné fungování jazykové mutace a zobrazení dalšího textu.

Uvedené CSS styly jsou připravené pro použití vlaječek o velikosti 16 x 11px a vlaječky jsou umístěny v levém horním rohu nebo přímo pod motivem stránky. Vlaječky nabízíme ke stažení.

Nahrané obrázky budete moci dále umístit do vlastního boxu nebo do patičky stránek, a dle návodu níže můžete vlaječky napozicovat např. nad motiv. Jednotlivé postupy pro každou šablonu se dočtete níže v návodu.

Vlaječky jednoduše nahrajte do obrázků. Odškrtněte volbu Zobrazit ve fotogalerii a vyberte vlaječky ze svého PC.

Uložení vlaječek jazykových mutací do administrace Inpage

Jakmile jsou obrázky nahrány, přepněte se do úpravy stránek položkou v menu Stránky. Vytvořte stránku odkazem Přidat stránku s názvem např. Vlastní box + jazyková mutace. Do obsahu vložte požadované vlaječky, které jste si již nahráli do obrázků. Vložíte je kliknutím na ikonku stromečku Vložit/upravit obrázek.

Vložení obrázků vlaječek do stránky

Jakmile máte veškeré vlaječky vloženy klikněte na ikonku HTML (Upravit HTML kód). Zobrazí se vám kódový zápis vložených obrázků. Na úplný začátek vložte kód <div id="jazykova-mutace"> a na úplný konec kód </div> a dejte Aktualizovat.

Upravení html kódu jazykových mutací

Než stránku uložíme, odškrtneme v Nastavení stránky políčka Nastavit aktivní a Zobrazit v hlavním menu a stránku uložíme tlačítkem Přidat stránku.

Nakonec ji nastavíme pod položkou v menu Nastavení - Prvky stránek do vlastního boxu č. 1. Tím docílíte zobrazení vlaječek na webu v postranním sloupci. Díky vlastní CSS definici následně upřesníme pozice, kde se budou vlaječky na webu nacházet.

Vložení jazykové mutace do vlastního boxu

U šablon ATLAS a MIRA je potřeba vlaječky umístit do vlastní patičky stránek, nikoliv do vlastního boxu. Tyto šablony využívají jiné CSS definice a pro napozicování vlaječek a správné zobrazení na webu je proto umístěte do patičky.

Propojení vlaječek zpětnými odkazy

Stránku s vlaječkami si opět otevřete kliknutím na tužku a z jednotlivých obrázků vlaječek vytvořte zpětný odkaz na patřičnou jazykovou mutaci stránek, poté změnu uložte tlačítkem Upravit stránku

Propojení jazykových mutací

Tyto tři kroky provedete u každé z jazykových mutací. Výsledné zobrazení vlaječek na webu u šablony PLUTO můžete vidět na obrázku níže:

Umístění vlaječek jazykových mutací u šablony Pluto

Nastavení CSS definice pro jednotlivé šablony

Následující CSS zápis k vaší aktuálně zvolené šabloně si zkopírujte a vložte jej do vlastního CSS stylu v administraci inPage v sekci VZHLED - VLASTNÍ CSS STYL. Aby byl styl aktivní zaškrtněte políčko Nastavit styl jako aktivní a dejte tlačítko Upravit.

Nastavení vlastního CSS

Šablona POLARIS

CSS styl

/* ---[ jazykova-mutace ]--- */
#jazykova-mutace {
  position: absolute;
  top: 50px; right: 30px;
  z-index:10;}

#jazykova-mutace img {margin:5px;}


Umístění vlaječek: vlastní box č. 1

Šablona NAVI

CSS styl

/* ---[ jazykova-mutace ]--- */
#jazykova-mutace {
  position: absolute;
  top: 255px; right: 50px;
  z-index:10;}

#jazykova-mutace img {margin:5px;}


Umístění vlaječek: vlastní box č.1

Šablona MEDIA

CSS styl

/* ---[ jazykova-mutace ]--- */
#jazykova-mutace {
  position: absolute;
  top: 190px; right: 15px;
  z-index:10;}

#jazykova-mutace img {margin:5px;}

/* ---[ template ]--- */
#container{padding-top: 196px;}


Umístění vlaječek: vlastní box č. 1

Šablona PLUTO

CSS styl

/* ---[ jazykova-mutace ]--- */
#jazykova-mutace {
  position: absolute;
  top: 5px; right: 20px;
  z-index:10;}

#jazykova-mutace img {margin:5px;}




Umístění vlaječek: vlastní box č.1

Šablona VEGA

CSS styl

/* ---[ jazykova-mutace ]--- */
#jazykova-mutace {
  position: absolute;
  top: 5px; right: 20px;
  z-index:10;}

#jazykova-mutace img {margin:5px;}

/* ---[ template ]--- */
#c0 { padding-top: 234px; }

/* ---[ theme ]--- */
#theme {top: 30px; }


Umístění vlaječek: vlastní box č. 2

Šablona ZARA

CSS styl

/* ---[ jazykova-mutace ]--- */
#jazykova-mutace {
  position: absolute;
  top:-25px; right: 5px;
  z-index:10;}

#jazykova-mutace img {margin:5px;}

/* ---[ template ]--- */
body {    padding: 30px 0; }




Umístění vlaječek: vlastní box č. 1

Šablona MIRA

CSS styl

/* ---[ jazykova-mutace ]--- */
#jazykova-mutace {
  position: absolute;
  top: 285px; right: 15px;
  z-index:10;}

#jazykova-mutace img {margin:5px;}






Umístění vlaječek: vlastní box č. 1

Šablona ZETA

CSS styl

/* ---[ jazykova-mutace ]--- */
#jazykova-mutace {
position: absolute;
top: 5px; right: 20px;
z-index:10;}

#jazykova-mutace img {margin:5px;}

/* ---[ template ]--- */
#c0 { padding-top: 219px; }

/* ---[ theme ]--- */
#theme {top: 30px; }


Umístění vlaječek: vlastní box č. 2

Šablona ATLAS

CSS styl

/* ---[ jazykova-mutace ]--- */
#jazykova-mutace {
  position: absolute;
  top:40px; right: 25px;
  z-index:10;}

#jazykova-mutace img {margin:5px;}






Umístění vlaječek: vlastní patička

Šablona ELECTRA

CSS styl

/* ---[ jazykova-mutace ]--- */
#jazykova-mutace {
  position: absolute;
  top:-25px; right: 5px;
  z-index:10; }

#jazykova-mutace img {margin:5px;}

/* ---[ template ]--- */
#container {
background:none;
margin-top: 30px;}


Umístění vlaječek: vlastní patička

Šablona SIRIUS a ERIS

HTML zápis

<div id="jazykova-mutace">
<div class="inside">
   <a href="/"><img src="/obrazek/2/de-png/" width="16" height="11" /></a>
   <a href="/"><img src="/obrazek/2/cz-png/" width="16" height="11" /></a>
</div></div>

CSS zápis

/* ---[ jazykova-mutace ]--- */
.inside { width:960px; text-align:right; margin:0 auto; z-index:1; position: relative;}
#jazykova-mutace { width:100%; position:absolute ; top: 10px; left:0; z-index:0;}
#jazykova-mutace img {margin:5px;}

Umistění vlaječek: vlastní box č. 1 nebo vlastní box č. 2 nebo vlastní patička

Šablona ONE a SLIDE

HTML zápis

<div id="jazykova-mutace">
<div class="inside">
<a href="/"><img src="/obrazek/3/de-png/" alt="de" />
<a href="/"><img src="/obrazek/3/cz-png/" alt="cz" />
</div>
</div>

CSS zápis

/* ---[ jazykova-mutace ]--- */
#jazykova-mutace { max-width: 1170px; margin: 0 auto; text-align: right; }
#jazykova-mutace .inside { width:100%; margin: 0; }

Umistění vlaječek: vlastní box motiv

Vícejazyčné webové stránky jsou v dnešní době moderní, tak proč byste i Vy nemohli mít web ve více jazykových verzích? Rozšiřte povědomí o vaší firmě a nabídce produktů po internetu do celého světa, aby se na Vašich stránkách snadno zorientovali i návštěvníci a klienti ze zahraničí.

Přejeme Vám úspěšnou tvorbu webových stránek i v jiných jazykových verzích.

 

Hanka Medková
admin(zav)zoner.cz

Přidat komentář

Napište číslo deset.

Přehled komentářů

  • vícejazyčný web

    14.4.2013 23:11:27 | Jirka

    Dobrý den,
    podle Vašeho návodu jsem vytvořil vícejazyčný web, při kliknutí na vlaječku se však jazyková mutace přepne vždy na úvodní stránku daného jazyka.
    Šlo by nějak nastavit, aby se mi při kliknutí na vlaječku zobrazila vždy aktuální stránka - jen vždy v jiném jazyku?
    Děkuji
    Jiří Thiemel

    Odpovědět

  • RE: vícejazyčný web

    15.4.2013 9:18:05 | Vladimír Souš

    Dobrý den, pravděpodobně děláte chybu v kroku "Propojení vlaječek zpětnými odkazy". Je potřeba každý obrázek (vlaječku) nastavit jako URL odkaz na požadovanou stránku (jazykovou mutaci). Pokud máte jazykové verze vytvořeny pomocí domény 3. řádu (např. http://en.nazev-domeny.cz), tak je třeba tuto adresu uvést pod anglickou vlaječkou. Pokud uvedete pouze znak "/" bude odkaz směřovat na úvodní stránku webové prezentace. Toto musíte provést v administraci všech jazykových mutací.

    Váš problém, aby odkaz směřoval vždy na danou stránku, by šel řešit, ale musel byste umístit odkazy s vlaječkami např. do podpisu stránky a pro každou stránku by se museli odkazy lišit (obsahovat adresy na dané stránky). Musea byste tedy vytvořit stejný počet podpisů, jako je počet stránek. To je nejenom pracné, ale navíc naprosto zbytečné. Standardně se to řeší takto i u profi webů.

    Odpovědět

  • Umístění vlaječek šablona ERIS

    7.12.2013 20:59:17 | Radek

    Dobrý den,
    bylo by možné uvést css zápis také pro novou šablonu ERiS?

    Děkuji Radek

    Odpovědět

  • RE: Umístění vlaječek šablona ERIS

    10.12.2013 16:50:00 | Vladimír Souš

    Dobrý den Radku,
    návod jsme upravili, nyní obsahuje i kody pro šablonu ERIS a SIRIUS.

    Odpovědět

  • CCS definice pro šablonu ONE

    18.6.2015 12:40:46 | Michal Srp

    Dobrý den,
    je možné přidat definici CCS pro umístění vlaječek pro šablonu ONE. Nejlépe pro umístění v "Vlastní box motiv".

    Děkuji

    Michal Srp

    Odpovědět

inPage.cz - webové stránky, doménawebhosting snadno.