Úvodní stránka obchodu
V následujícím článku ti popíšu kde, jak, co nastavit pro zobrazení úvodní stránky obchodu a vysvětlím pravidla psaní vlastní úvodní stránky v HTML a CSS.
Nastavení Úvodní stránky probíhá v Manageru Agendě: Konfigurace webové části prodejny / Profil prodejny / v pravé části záložka Úvodní stránka
Na výběr máme ze 3 možností:
- Zobrazovat katalog/ceník - vypíše seznam výrobků v zobrazení, které je nastaveno jako výchozí v Konfiguračních parametrech / Ceník, katalog, detail / Obecné nastavení / položka Výchozí zobrazení
- Zobrazovat standardní úvodní stránku - výchozí nastavení vypíše úvodní texty (najdeš je v Texty prodejny / Titulní stránka) s možností zobrazení dvou uživatelských výběrů (nastavení v Konfigurační parametry / Titulní stránka)
- Zobrazovat vlastní úvodní stránku - po zvolení této možnosti se automaticky zobrazí okno, kde vyberete váš HTML dokument, jak má jeho struktura vypadat se dozvíme v dalším odstavci. Dále se zaktivuje možnost zvolit Pozici stránky (v celém okně jako vstupni stranka, tzv. intro nebo se zobrazí včetně okolních sloupců).
Základní pravidla tvorby vlastní HTML stránky
- Název souboru - můžou být použity formáty .htm i .html, v názvu souboru se může vyskytovat i diakritika a mezery, ale použití se nedoporučuje (příklad názvu souboru: uvodnistrana.htm nebo mojestrana.html)
- Styl css může být v externím souboru (přilinkován do html) nebo součástí html dokumentu (mezi značky style).
Základní pravidla HTML kódu úvodní stránky
- v záhlaví html dokumentu NEMUSÍ být správně napsaná definice DOCTYPE, z vašeho html souboru se při přenosu tato definice odstraňuje a nahrazuje se naší XHTML 1.0 Strict, která je použita při tvorbě eshopu. Aby byla tvoje stránka plně validní podle standardu W3C, je potřeba se těmito standardy řídit.
- CSS může být součástí html v hlavičce dokumentu nebo link na externí soubor
- pokud zvolím možnost Pozice stránky "v hlavní části okna" vyvarujte se v definici CSS stylu použití značek
.body, .right, .header, . left a podobně, které využíváme při ostylování grafiky eshopu. Důvod proč používat jiné názvy tříd a identifikátorů je ten, že vámi napsaný CSS styl v úvodní stránce se vkládá do výsledného HTML na posledním místě, tudíž by se v designu celého eshopu používaly definice použité v úvodní stránce.
1. Příklad - styl je součást HTML kódu
Tento příklad ukazuje část kódu, kdy je styl součástí html dokumentu. Je uzavřen mezi párové značky
<style></style>.
Pokud mám ve stylu použity obrázky, v mém příkladu ve složce images a odkazuji se na ně (například takto:
background: url('images/moje.jpg');), musím tuto složku nakopírovat na vaše FTP do adresáře
inshop/Files/DEFAULTPROFILE, protože obrázky ze stylu se přes Managera neposílají.
Oproti tomu obrázky v HTML dokumentu napsané pomocí značky
<img src="images/hlavicka.jpg" /> se pošlou zároveň z Managera a uloží se na FTP do stejného adresáře jako html dokument. Výsledné cesty k těmto obrázkům se automaticky při odesílání upravují na
<img src="files/DEFAULTPROFILE/hlavicka.jpg" />.
<style type="text/css">
body {
background: #FFFFFF url(images/neco.png) no-repeat;
margin: 0px;
padding: 0px;
}
</style>
2. Příklad - styl je vložen v externím souboru
Stylopis je ve speciálním souboru umístěném ve stejném adresáři jako html a do html dokumentu bude vložen pomocí značky
<link /> Pro obrázky platí stejné pravidla jako v příkladu číslo 1.
<link href="styl.css" type="text/css" rel="stylesheet" media="screen" />