Obsah:

1. Obsah: • Zámek stránky • Stránkování příspěvků nebo samostatných stránek • Práce se soubory • FTP připojení (placené stránky) • HTML a CSS • Provázání, základní syntaxe • Editace šablony - nadpis v logu - úprava vzhledu pomocí CSS - úprava struktury pomocí xHTML • Čas pro dotazy

2. Zámek stránky Co to vlastně znamená ? Využitím této funkce máte k dispozici zaheslování stránek. K zámku můžete mít přiděleno více hesel, které jsou návštěvníci. Vaší stránky nuceni zadat hned na úvodní stránce Vaší webové prezentace. Kde funkci naleznete ? záložka ROZŠÍŘENÉ ZÁMEK NASTAVENÍ

3. Použití: Nejjednodušším použitím funkce zámek je uzamčení stránky jedním přístupovým heslem. • Stačí tedy jednoduchý postup: • Vepsat heslo do políčka heslo • Kliknout na tlačítko Přidat Přidané heslo uvidíte u položky Přehled povolených hesela přístup na stránky se automaticky nastaví na přístup S heslem. Opakováním tohoto postupu máte k dispozici i přidání více hesel pro více osob.

4. Text na uzamčenou úvodní stranu: • Pokud máte stránku uzamčenou, máte k dispozici • na ni vložit nějaký krátký informačí text (i v HTML kód). • Například: • Uzamčeno z důvodu dokončování prací. Prosíme o trpělivost. • Tento text vepište do políčka u položky Text na stránku s heslem • Odstranění zámku dosáhnete takto: • U položky Přístup na stránkynastavte Volný přístup • Klikněte na tlačítko Uložit pod položkou Text na stránku s heslem. Hesla zůstanou zachována a při nastavení přístupu S heslem se stanouopět aktivní.

5. Druhou možností je Zámek podle adresy: • Postup: • Adresu příspěvku nebo samostatné stránky, kterou chcete zvlášť uzamknout, vepíšete do políčka Adresa(ve tvaru: /clanky/Prvnirubrika)‏ • Zvolíte heslo, pod kterým má být tato adresa uzamčena (pro použitívíce hesel stačí jednotlivá hesla vypsat a oddělit mezerami – např: „tomasek lenka jitka“)‏ • Poté už stačí jen kliknout na tlačítko Přidat • Pro smazání už stačí pouze kliknout na tlačítko Smazat v seznamu • Přehled blokovaných adres.

6. Stránkování příspěvků nebo samostatných stránek Pokud chcete další stránky v příspěvku nebo na samostatné stránce, můžete toho docílit vytvořením dalších samostatných stránek, které použijete na další stránky a to tak,že u nich zvolíte možnost nezobrazovat v menu. Poté si v příspěvcích vytvoříte hypertextové odkazy na dané samostatné stránky tak, aby návštěvník mohl stránkami listovat, pohybovat se tam a zpět.

7. Práce se soubory: Nahrávání souborů na stránky je k dispozici platícím uživatelům. Soubory nahrajete zde: záložka ROZŠÍŘENÉ SOUBORY NASTAVENÍ Stačí pouze kliknout na tlačítko Procházet a na svém osobním počítači si pomocí nabídky, která se otevře, zvolíte soubory, které chcete nahrát. Tento způsob nahrávání má omezení do 5 MB. Soubor o velikosti do 50 MB můžete nahrávat přes FTP. U takto nahraného souboru se objeví jeho URL adresa, kterou je potřeba použít pro hypertextový odkaz v příspěvku nebo samostatné stránce.

8. Využití FTP (file transfer protocol): Pomocí FTP protokolu se můžete přihlásit ke stránkám a hromadně nahrávat soubory nebo fotografie do zvlášť vytvořených fotogalerií. Přístupové údaje pro připojení naleznete zde: záložka ROZŠÍŘENÉ FTP PŘÍSTUP NASTAVENÍ Pro připojení stačí využít jakéhokoliv FTP klienta, nebo stačí napsat adresu do adresního řádku složky v počítači. Budou nás zajímat tyto informace: Název serveru Přihlašovací jméno Přihlašovací heslo (zde máte také možnost si heslo změnit)‏

9. Využijeme nejjednoduššího připojení na FTP server, a to připojením přímo přes OS Windows. Otevřete si složku Tento počítač a do adresního řádku vepište: ftp://Váš účet.estranky.cz (neboli to, co je u položky Název serveru)‏ Například: Pokud se Vaše stránka jmenuje www.jelen.estranky.cz tak pro připojení použijete adresu ftp://jelen.estranky.cz Poté se Vás Windows zeptá na jméno a heslo a jste přihlášeni.

10. Nahrávání fotografií přes FTP: Pokud potřebujete nahrát větší množství fotografií, tak potom je to ta správná volba. Každá složka vytvořená po připojení na FTP server je brána jako nová fotogalerie na stránce. Tudíž stačí vytvořit novou složku a nahrávat fotografie, které se mají v dané fotogalerii zobrazit.

11. Nahrávání souborů přes FTP: Soubory je nutné nahrát do složky s názvem: __files__ (slovy: „podtržítko podtržítko files podtržítko podtržítko“)‏ Na takto nahraný soubor se poté odkazujete pomocí URL v tomto tvaru: http://www.Váš Účet.estranky.cz/archiv/uploaded/Zde Název Souboru Takže například: http://www.jelen.estranky.cz/archiv/uploaded/soubor.zip

12. Úpravy CSS a xHTML šablon Pomocí těchto úprav můžete měnit barvy, velikosti, struktury a styly v šabloně, kterou jste si vybrali. Úpravy uskutečníte zde: záložka VZHLED NASTAVENÍ DESIGN Upravit kód šablony Upravit CSS šablony

13. Používání HTML tagů: HTML tag má svůj vlastní název: Např: <br /> - odřádkování Tagy jsou párové nebo nepárové: Např: Párový tag: <strong> text </strong> - tučné písmo Nepárový tag: <img src=““ alt=““ /> - obrázek Tagy také mohou mít další parametry za názvem: Např: <img src=”adresa obrazku” alt=”nahradni text” /> Obecně: <nazev parametr = “ hodnota “ /> Parametry se vždy přidávají v první části tagu (pokud jde o párový)

14. Provázání HTML a CSS: HTML se skládá z HTML Tagů. Například <a href=” adresa ” title=” text bubliny”> text odkazu </a> Pojmenování HTML tagu pro CSS: Abychom mohli nastavit vzhled a dát určité parametry danému tagu pomocí CSS je potřeba znát název tohoto tagu. Přímo název tagu: a -> v CSS: a{ ... } Rozlišení názvu HTML tagu: parametr: class=“nazev“ -> v CSS: .nazev{ ... } parametr: id=“nazev“ (id je jedinečné, jeden název se nesmí opakovat) -> v CSS: #nazev{ ... }

15. Základní tagy: • HTML: • <br /> - odřádkování • <p></p> - odstavec • <b></b> - tučně • <i></i> - kurzíva • <h1></h1>, <h2></h2>, … - nadpisy • <img src=“adresa“ alt=“alternativní text“ /> - obrázek • <a href=“adresa“ title=“text v bublině“></a> - hypertextový odkaz • CSS: • display: none; - zneviditelnění • color: red; - barva textu (hodnota anglicky) • font-size: 13px; - velikost textu • font-family: verdana; - typ písma • font-weight: bold; - tučné písmo • text-align: center; - zarovnání obsahu (obrázku i textu) (hodnoty: left, righ, center)

16. Úprava kódu šablony: V tomto případě vkládáme obrázek pod menu do bočního sloupce s menu. • Klikněte na Upravit kód šablony • Do položky Název vepište nový název Vaší upravovanéxHTML šablony • Najděte si nadpisek Levý sloupec • A klikněte na položku Menu • Kód, který vidíte, je struktura menu připravená pro dynamické generovánía plnění menu položkami • Pod tento kód vložíme kód obrázku • Pro jistotu obrázek uložíme ještě do “tagů” <div> , kterému dáme CSSvlastnost tak, aby obrázek zarovnal na střed. <img src=“http://www.jelen.estranky.cz/obrazek“ alt=“Alternativni text“ />

17. Výchozí kód by měl vypadat takto: <div style=“text-align: center;“> <img src=“http://www.jelen.estranky.cz/obrazek“ alt=“Alternativni text“ /> </div> Pokud chceme udělat z obrázku odkaz, stačí přidat xHTML kód hypertextového odkazu: <div style=“text-align: center;“> <a href=“Url odkazu“ title=“Titulek odkazu“> <img src=“http://www.jelen.estranky.cz/obrazek“ alt=“Alternativni text“ /> </a> </div> • Nyní klikněte na Uložit, a poté Uložit změny jako novou šablonu • Nastavte u položky Přiřazená šablona Vaši novou upravenou šablonu

18. Úprava CSS šablony: V tomto příkladu zneviditelníme nadpis v logu nebo změníme jeho styl, barvu a velikost. Opět je nutno vypsat nový název šablony a po uložení ji zase nastavit jako aktivní, tudíž Přiřazené CSS. Pro editaci nadpisu v logu slouží položka: #nazev (název prvku se může lišit v ruzných šablonách){ } V šabloně přímo celé nastavení CSS: #nazev { height: 100px; heig\ht: 55px; padding: 45px 0 0 20px; font-family: Georgia, serif; font-size: 240%; }

19. My tento název (nadpis v logu) potřebujeme zneviditelnit, protože nám překáží v obrázku loga, tudíž přidáme jeden řádek ke stávajícímu CSS kódu: #nazev { display: none; height: 100px; - výška prvku heig\ht: 55px; padding: 45px 0 0 20px; - vnitřní odsazení font-family: Georgia, serif; font-size: 240%; }

20. Pokud chceme nechat nadpis, a změnit jeho vzhled, přidáme a upravíme jiné řádky s jinými parametry: #nazev { color: red; (barva písma)‏ font-weight: bold; (tučné písmo)‏ text-decoration: underline; (podtržení)‏ height: 100px; heig\ht: 55px; padding: 45px 0 0 20px; font-family: Georgia, serif; (název písma)‏ font-size: 300%; (velikost písma)‏ } Pro další úpravy doporučuji nastudovat stránku: www.jakpsatweb.cz