Tvorba webových stránek

Prezentace na téma: "Tvorba webových stránek"— Transkript prezentace:

1 Tvorba webových stránek

2 OBSAH Struktura webu Obsah webové stránky Obrázky na webu
Vytváříme webovou stránku Kaskádové (CSS) styly Přehledné stránky a jejich umístění na Internet Konec

3 Struktura webu Webová prezentace je několik webových stránek provázaných hypertextovými odkazy. Struktura webu je popis, které stránky web obsahuje a jak jsou mezi sebou provázány odkazy. Navrhuje se podle obsahu. Dobře připravený návrh struktury (na papíře) včetně názvů jednotlivých souborů je základem úspěšné práce. OBSAH

4 Strukturní konvence Startovní stránka webu má název index.htm (případně index.html nebo default.html) Z každé stránky by měl vést odkaz na domovskou (úvodní) stránku webu Názvy souborů, ze kterých se web skládá, je třeba volit podle obsahu stránek s důležitým omezením: názvy by neměly obsahovat mezery a znaky s diakritikou a měly by být psány pouze malými písmeny. OBSAH

5 Struktura jednoduchého webu
profil.htm index.htm Profil firmy Odkazy Titulní stránka vyrobky.htm Profil firmy Výrobky Kontakty Výrobky a služby Obsah kontakty.htm Obsah Kontakty Odkaz na index.htm by měl být na každé stránce Obsah OBSAH

6 Obsah webové stránky Webová stránka a její (X)HTML kód
Webový klient a server Důležité pojmy OBSAH

7 Webová stránka a její (X)HTML kód
Webová stránka je dokument ve formátu HTML (HyperText Markup Language) nebo v jeho modernější podobě XHTML (eXtensible HTML). Tento standardizovaný formát umožňuje použití odkazů v textu na jiné stránky. Dokument může obsahovat jen textové znaky a číslice. Nejsou v něm žádné obrázky a neobsahuje žádné formátování textu. Obsahuje pokyny pro prohlížeč, jak má stránku zobrazit a kde na ní má zobrazit jaký obrázek. Formát textu je často obsažen v samostatném souboru s definicí kaskádových stylů (CSS). Obrázky jsou uloženy zvlášť v samostatných souborech.

8 Webový klient a server Klient, neboli prohlížeč webu, na počítači poskládá obraz stránky z jednotlivých souborů. Je to program, který komunikuje s uživatelem a na základě jeho pokynů se obrací na jednotlivé servery, získává od nich data a zobrazuje je. Server (který je většinou na internetu) posílá klientovi stránky, které si vyžádá.

9 Důležité pojmy HTTP (HyperText Transport Protocol) definuje pravidla síťové komunikace mezi klientem a serverem. Je postaven na modelu dotaz-odpověď. HTML je původní jednoduchý programovací jazyk, který je základem každé internetové prezentace. XHTML jazyk byl vyvinut jako náhrada a nástupce HTML. Je přísněji a přesněji definovaný, používá pro web vlastnosti definované pro jazyk XML. XML je jazyk, který nemá na starost zobrazovat data, ale být nositelem dat (obsahu). Umožňuje jednoduché zobrazení stejného obsahu na různých zařízeních.

10 PHP a ASP jsou technologie, které umožňují dynamičnost internetových stránek. Rozšiřují možnosti (X)HTML o další funkce (podmínky, cykly…). To umožňuje vytváření internetových obchodů, redakčních systémů, poštovních konferencí apod. Umožňují vybírat data pro zobrazení z různých databází. CSS. Kaskádové styly umožňují centrální definování jednotného vzhledu stránek. JavaScript je poměrně výkonný programovací jazyk, který pracuje na straně klienta. Umožňuje reakci stránky na akce uživatele.

11 Obrázky na webu Obrazovka není papír – rozdíl přístupu oproti tvorbě grafiky pro tisk: Na obrazovce je základní jednotkou 1 pixel, obrazový bod (u papíru je důležitá velikost obrázku v cm a jeho rozlišení v DPI). Monitor má menší rozlišení než běžná tiskárna (zhruba poloviční), drobný text nebude dobře čitelný. Obraz na monitoru není tak ostrý, klidný a jasný jako tisk na papíře. Čtení delších textů na obrazovce proto není příjemné. Různé počítače jsou nastaveny na různá rozlišení a mají rozdílnou velikost. Nikdy nevíte, jak velká se grafika, kterou vytváříte, na monitoru čtenáře stránky zobrazí. Různé monitory mají různou kvalitu, jsou různě umístěny a mají nastaven různý jas a kontrast. O barevné věrnosti se tedy nedá vůbec hovořit. OBSAH

12 Grafické soubory Příprava obrázků ve správné velikosti, barevné hloubce a ve správném formátu (JPG, GIF, případně PNG) je důležitá přípravná operace před tvorbou webu. Nezapomeňte ani na názvy souborů a zkontrolujte, zda i jejich přípony jsou psány malými písmeny.

13 Vytváříme webovou stránku – postup tvorby
Navrhnete strukturu webu a názvy jednotlivých souborů. Navrhnete vzhled webu a připravíte si CSS soubor s definicemi stylů. Vytvoříte nebo jinak získáte obrázky a připravíte je v přesné velikosti, barevné hloubce a přesném typu souboru. Napíšete potřebné texty. Poskládáte webové stránky s využitím všech výše uvedených komponent. Odladíte kompletní web. Nahrajete hotový web na server Internetu a opět zkontrolujete funkčnost. OBSAH

14 KONEC… pampalá