Advertisement
  1. Web Design
  2. Kids

Webdesign pro děti: Příprava na tvorbu webové stránky

by
Read Time:4 minsLanguages:
This post is part of a series called Web Design for Kids.
Web Design for Kids: Welcome to Tuts+ Town!
Web Design for Kids: HTML Structure

Czech (Čeština) translation by Vítězslav Jaroš (you can also view the original English article)

Vítejte v druhé lekci našeho seriálu Webdesign pro děti!

V této lekci si řekneme o věcech, které musíme udělat a nástrojích, které potřebujeme, dříve než začneme psát kód naší stránky pro městečko Tuts+; dostaneme se k tomu, slibuji! Mimochodem, nebojte se pokládat otázky skrze komentáře na konci této stránky.

Nejprve se blíže podívejme na to, co spolu budeme vytvářet.

Náčrt

Super pomocníkem je náčrt všech myšlenek, které máme v hlavě, před jejich realizací. Je to příprava, která nám může ušetřit spoustu času, až se dostaneme k zápisu kódu.

Co když, to co máme v hlavě, nebude vypadat tak skvěle, až to uvidíte na papíře? Co když některé problémy a otázky vyvstanou až z nákresu? Co když je náš design příliš náročný? Mnoho těchto problémů se objeví v našich náčrtcích.

Je v pořádku, že se nám spočátku naše náčrty nelíbí, přesně o to se nám jedná! Chceme to rozchodit nejprve na papíře.

Náčrt stránky městečka Tuts+

Potřebujeme stránku pro turisty, kteří nás chtějí navštívit a zjistit, jaké obchody a podniky naše městečko nabízí. Seskupíme tyto podniky k sobě podle zaměření, jako třeba "hotely" do jedné skupiny a "restaurace" do druhé. Chceme použít odkazy na vlastní stránky podniků, když by o nich chtěl návštěvník více informací. 

Je zde i několik obrázků, aby se návštěvník cítil vítaný v našem městečku.

Tady je náhled na náčrt, který nás dovede k barevné verzi stránky.

Toto je přesně stránka, kterou budeme vytvářet od nuly! Docela hezká.

Editory

K zápisu HTML kódu (všechny ty věci v tajemném jazyce, o kterých jsme mluvili v první lekci) potřebujeme textový editor.

Není dobré používat něco jako Microsoft Word, pořádný editor kódu nám v mnohém usnadní práci. Editor kódu rozumí tomu, co píšete a zvýrazní kód těmi správnými barvami, zatímco Microsoft Word je lepší na psaní textu třeba do školy.

Existuje několik dobrých editorů kódu, zdarma ke stažení z webu. Pokud si nejste jisti, jak se něco stahuje, nebo zda vůbec můžete, je vždy lepší se zeptat dospělých.

Bluefish je výborný pro počítače s Windows a Atom zase poběží na Macu.

K významu tohoto textu se dostaneme v příští lekci, prozatím vězte, že je to kousek z toho, co budete psát.

Soubory, soubory, soubory

Jak jsme už zmínili, webová stránka se skládá z několika souborů. Tyto soubory musí zůstat ve stejném adresáři, aby je prohlížeč našel.

Stránka městečka Tuts+ bude obsahovat HTML soubor (uložený s příponou .html na konci), CSS soubor (s příponou .css) a čtyři obrázky, které budou uloženy v adresáři nazvaném "images". Adresář s obrázky bude umístněn ve stejném adresáři jako HTML a CSS soubor.

Přípona souboru je skupina písmen, která se nachází za tečkou ve jméně souboru a oznamuje nám, o jaký typ souboru se jedná:

Už jsme zmínili, že obrázky budou v adresáři nazvaném "images", který bude vložený v hlavním adresáři, podobně jako na tomto obrázku:

Vidíme na něm obrázek pojmenovaný town.svg (.svg přípona je jen druh obrázku), který jsme umístili zvlášt do adresáře "images". Díky tomu bude hlavní adresář přehledný a uklizený:

Oba způsoby jsou správné, ale my budeme používat extra adresáře, jako na obrázku vpravo.

Prohlížeče

Naši práci si promítneme rovnou ve stejném prohlížeči, ve kterém si čtete tuto Tuts+ stránku! 

Krom něho existuje několik prohlížečů, které jsou zdarma ke stažení, jako třeba Google Chrome a Firefox. Pokud používáte počítač Mac, tak už máte Safari nainstalováno, skvělé!

Zatím mimo Internet

Budeme tvořit naše stránky přímo na našem počítači a ne na Internetu. Pokud si vzpomínáte na první lekci, vysvětlili jsme si, že nemůžeme vidět naše stránky na Internetu, dokud nejsou na serveru.

Obrázek níže zobrazuje, jak by dokončená stránka měla vypadat v našem prohlížeči (ne na Internetu). Místo webové adresy jako třeba www.tutsplus.com, vidíme lokální adresu, která vypadá trochu jinak.

Výborně!

V této lekci jsme se zaměřili na několik důležitých věcí, které nám pomůžou při psaní kódu webových stránek. Zjistili jsme, jak si připravit soubory a nástroje jako textový editor a prohlížeč.

V příští lekci už začneme rovnou tvorbou kódu. Budeme organizovat (já vím, pořád něco organizujem!) a přidáme nějaký kód do našeho HTML souboru. Teď začne ta pravá zábava!

Brzy na viděnou!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.