Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Kids
Webdesign

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

by
Difficulty:BeginnerLength:ShortLanguages:
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
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.