Jak vytvářet web



Program pro připojení k FTP

Pro připojení k FTP lze použít kterýkoliv program, který umožňuje přenášet soubory na vzdálená FTP.
Pokud takový program nevlastníte, použijte volně dostupnou shareware verzi programu Total Commander (přímý odkaz), s jehož pomocí byl vytvořen i tento návod.
(Při instalaci zvolte jazyk Český, instalovat ostatní jazyky není třeba.)

Spuštění Total Commanderu a připojení k FTP:

Při spuštění se Vám nejprve zobrazí okno upozorňující na možnost zakoupení plné verze programu. V okně je pouze potřeba kliknout na tlačítko s číslicí, která je napsána ve větě nad tlačítky, viz obr.:


V Total Commanderu je potřeba nastavit FTP (web), na které se chceme připojit, k čemuž slouží klávesová zkratka CTRL+F (případně v nabídkách: Síť -> protokol FTP - připojit k serveru).
Zobrazí se (nejspíš prázdné) okno s uloženými FTP, na která se můžete připojit. Zvolte možnost Nové připojení. Do následujícího formuláře vyplňte údaje, které jste získaly od hlavního správce, viz následující obrázek a zvolte OK.


V původním okně by se Vám mělo zobrazit nově vytvořené připojení k FTP, zvolte Připojit a Váš počítač se spojí se serverem, na kterém můžete libovolně měnit text, který je zobrazen na Vašem webu. Obrázek znázorňuje jeden z možných obsahů kořenového adresáře (pravý sloupec) Vašeho FTP, ihned po Vašem připojení.


Každý adresář představuje jednu stránku Vašeho webu (pojmenování je přibližně shodné se jménem stránky), přičemž jeho obsah se na webu zobrazí v abecedním pořadí (proto je dobré používat číslování souborů, či podadresářů). Cokoliv v adresářích změníte se okamžitě změní i na Vašem webu.
Obecně platí, že jména souborů a adresářů jsou libovolná, ale smí obsahovat pouze písmena bez diakritiky a čísla, tj. nesmí obsahovat mezeru, ani žádné jiné znaky (např. " ' ? , * / ).
Dále následuje návod na editaci jednotlivých stránek webu.



Návod na editaci jednotlivých stránek webu


Novinky

Chceme-li změnit obsah stránky Novinky, musíme na FTP do adresáře Novinky. Jak může vypadat adresář Novinky lze vidět na následujícím obrázku (pravý sloupec).
Vaším cílem je vytvořit pouze další soubor (zde 982 - zaručí, že nová novinka bude zobrazena první), nebo upravit některý ze stávajících souborů. Soubor nejlépe vytvořte ve svém PC (pomocí SHIFT+F4) a na FTP jej zkopírujte (pomocí F5) až po jeho naplnění údaji.
Obr. vytvoření souboru s novinkou:


Obsah souboru 982 (v adresáři novinky):
1. řádek znázorňuje nadpis novinky,
2. řádek datum novinky,
3. řádek případný odkaz, který se zobrazí na konci novinky. Pokud odkaz u novinky nechceme, pak necháme tento řádek prázdný! Odkaz zadávejte ve tvaru www.adresa.cz (http:// bude k odkazu doplněno automaticky).
4. a další řádky představují text novinky.
Obr. vyplněného souboru s novinkou:


Vytvořený soubor zkopírujte na FTP, výsledek v tomto případě bude následující:


(Na webu se vytvořila nová novinka ihned pod nadpisem Novinky.)

Team (profily hráčů, či týmů)

Každý hráč, či tým, který se zobrazuje na webu, je tvořen jedním adresářem (na obr. pravý sloupec, adresáře 1-15). Kompletní obsah adresáře (na obr. levý sloupec) obsahuje fotku hlava.jpg (fotka se použije v seznamu hráčů a měla by představovat záběr na hlavu hráče), fotku telo.jpg (fotka se použije v samotném profilu hráče a měla by představovat záběr na trup a hlavu hráče) a soubor popis.txt (obsahující popis daného hráče), viz obr.


Zde je potřeba zachovat jména souborů. Pro základní zobrazení hráče stačí, je-li v adresáři hráče soubor popis.txt (místo fotek se zobrazí 'Nemá foto'). Je-li v adresáři pouze jedna fotka (hlava.jpg nebo telo.jpg), pak se použije i namísto druhé chybějící fotky.
Vaším cílem je vytvořit podadresář hráče (v adresáři team) a naplnit jej příslušnými soubory.

Obsah souboru popis.txt (v podadresáři hráče v adresáři team) se může u každého webu malinko lišit, ale základní rysy zůstávají zachovány, tj.:
1. řádek: jméno hráče
2. řádek: přezdívka hráče
3. řádek: číslo dresu
4. řádek: post hráče
5. a další řádky představují odpovědi na jednotlivé otázky, které si většina týmů volí sama.
pozn. nechce-li hráč např. na některou z otázek odpovídat, nechte místo ní prázdný řádek, na stránce se pak místo odpovědi zobrazí pomlčky.
Příklad vyplnění souboru popis.txt:


Příklad souboru hlava.jpg:


Příklad souboru telo.jpg:


Výsledné zařazení hráče do seznamu hráčů na webu:


Vytvořený profil hráče:


(Pozn.: nepoužívejte příliš velké fotky, stránka se pak načítá pomaleji.)


Hala, hřiště, historie, odkazy

Adresáře příslušných kategorií obsahují jediný soubor s napevno určeným názvem (hala_text.txt, hriste_text.txt, historie_text.txt, odkazy_text.txt), který tvoří celý obsah dané stránky. Mění se pouze tento soubor, k čemuž lze využívat HTML značky (tagy), viz konec návodu.


Sponzoři, kontakty

Adresáře těchto kategorií obsahují soubory jako adresář novinky, pouze obsah souborů je odlišný.

Obsah souboru sponzora:
1. řádek: jméno sponzora,
ostatní řádky: jednotlivé informace, které se řadí postupně do tabulky pod sponzora.
Příklad vyplněného souboru sponzora:


Obsah souboru kontaktu:
1. řádek: jméno kontaktu
2. řádek: popis kontaktu
ostatní řádky: kontakty
Příklad vyplněného souboru kontaktu:



Fotografie

Vkládání fotografií je podobné vkládání hráče teamu, opět je potřeba vytvořit podadresář s fotkami (tentokrát v adresáři foto).
Podadresář tentokrát obsahuje soubor popis.txt (jméno je třeba zachovat) a fotografie s libovolným jménem, viz obr.:


Obsah souboru popis.txt:
1. řádek: nadpis kategorie fotek
2. řádek: datum (snažte se dodržovat formát datumu, aby to na webu vypadalo hezky)
ostatní řádky: případný text k příslušným fotografiím
Ukázka obsahu souboru popis.txt v podadresáři s fotografiemi (v adresáři fotografie):


Vytvořený odkaz v seznamu fotografií:


Vytvořená stránka s vloženými fotografiemi a obsahem souboru popis.txt:



Soutěže

Tato záložka je určena pro vkládání příspěvků s tabulkou. Vkládání je opět podobné, jako vkládání hráče.
Vaším cílem je vytvořit podadresář v adresáři souteze, který obsahuje alespoň jeden z těchto souborů:


Obsah souboru nad.txt (viz obr.):
1. řádek obsahuje nadpis,
2. řádek datum,
ostatní řádky pak text.
Vše se zobrazí nad tabulkou.


Obsah souboru tabulka.txt (viz obr.):
Z tohoto souboru se vytvoří tabulka. Jednotlivé sloupce tabulky se oddělují znakem středník (;).


Obsahem souboru pod.txt je pouze text, který se zobrazí pod tabulkou, viz obr.:


Pozn.: Kterýkoli z těchto souborů lze vynechat, čehož lze využít k vytvoření např. článku bez tabulky. Často též postačuje využívat jen soubory nad.txt a tabulka.txt.

Výsledný článek s tabulkou:



Nyní byste měli být schopni vytvořit všechny stránky Vašeho webu.



Použití HTML uvnitř článků

U většiny článků lze s úspěchem využít značek HTML k docílení lepšího vzhledu stránky.
Pomocí HTML lze vytvořit tučný, či skloněný text, odkaz nebo vložit do článku obrázek. Též lze např. do článku vložit video z Youtube.com (dobré využívat v sekci s fotografiemi).
Něco z teorie o HTML: Značka HTML se píše uvnitř dvou špičatých závorek. Každá značka musí být ukončena. Značky se rozdělují na párové (značka začíná např.: a musí končit ) a nepárové (značka je jen jedna a musí být ukončena na svém konci, např.: ).

Nejčastěji používané značky:

Párové:

Vzor: <b>Tučný text</b>
Výsledek: Tučný text

Vzor: <i>Skloněný text text</i>
Výsledek: Skloněný text

Vzor: <b>Podtržený text</b>
Výsledek: Podtržený text

Vzor: <a title='N.B. sport' href='http://www.sportnb.info'>SportNB</a>
Výsledek: SportNB
Popis: title je jméno odkazu a href adresa, kam odkaz povede.

Nepárové:

Vložení obrázku
Vzor: <img alt='Úsměv' src='http://www.cz-pes.cz/gallery/1137089900_pict0019.jpg' />
Výsledek:
Úsměv
Pozn.: alt je jméno obrázku a src adresa obrázku.



Návod byl vytvořen při editaci webu Novobystřických volejbalistek, viz: volejbal-divky.sportnb.info


Valid XHTML 1.0 Strict Valid CSS