Ing. Zdeněk Votruba LVALVA Úvod do tvorby WWW stránek.

Prezentace na téma: "Ing. Zdeněk Votruba LVALVA Úvod do tvorby WWW stránek."— Transkript prezentace:

1

2 Ing. Zdeněk Votruba LVALVA Úvod do tvorby WWW stránek

3 HTTP – World Wide Web LVALVA WAN Je pro každého jistě důvěrně známou službou. Ve svém principu se jedná o distribuovanou databázi www stránek (dat), které jsou navzájem propojeny vazbou (odkazy) a fyzické umístění stránek je zcela irelevantní (stejně jako komponent stránek). V zásadě rozdělujeme www stránky na statické, statické se skripty a na dynamicky generované. Podle toho používáme různé programovací nástroje (jazyky) pro tvorbu těchto stránek. Prakticky vždy vycházíme z jazyka HTML a v případně potřeby jej doplňujeme skriptovacími jazyky ať již vykonávanými na straně klienta (v prohlížeči), či na straně serveru (ASP, PHP).

4 Klienti pro přístup ke službě LVALVA WAN  Internet Explorer  Internet Explorer: součást Windows 95 a výše, v současné době jednoznačně nejpoužívanější browser. Podporuje všechny obvyklé skriptovací jazyky včetně objektů OCX. Nižší zabezpečení přenášených dat.  Netscape Comunicator  Netscape Comunicator: jediný reálný konkurent předchozího produktu, nepodporuje skriptování v jazyce VB script, mívá problémy s OCX objekty. Oproti IE je o něco rychlejší a především bezpečnější. Lépe podporuje Javu a java script

5 Klienti pro přístup ke službě LVALVA WAN  Mosaic  Mosaic: dnes již téměř nepoužívaný browser vycházející z koncepce Netscape Navigatoru. Nepodporuje skripty kromě Java a JavaScript  Opera  Opera: browser vycházející z IE, ke svému běhu jej potřebuje mít nainstalován.  Arachne  Arachne: v současné době jediný používaný DOSovský browser, podporuje Cookies, nepodporuje Javu  FireFox  FireFox: Nová generace webového prohlížeče od fy. Mozilla. Nabízí možnost současného prohlížení více stránek v panelech v rámci jednoho okna prohlížeče, vyšší úroveň zabezpečení, blokování popup reklam, vylepšen je správce záložek, integrovaný vyhledávač

6 Platformy pro realizaci WWW serverů LVALVA WAN  OS UNIX  OS UNIX: pravděpodobně nejpoužívanější a nejstabilnější OS pro WEBy, převažuje aplikace APACHE. Problémy s podporou ASP skriptů  Windows NT  Windows NT: co do počtu instalací konkurující Unixu, vlastní realizace stránek zajišťuje „Internet Information Server“. Podpora všech běžných skriptů včetně PHP a ASP  Novell Netware  Novell Netware: vhodný pro menší a středně zatížené www servery, podporuje všechny běžné skripty, zvlášť vhodné řešení pro webové servery intranetu s vysokým zabezpečením, podporuje ASP, PHP, NSP

7 Platformy pro realizaci WWW serverů LVALVA WAN  Windows 98/2000  Windows 98/2000: pro málo zatížené a málo navštěvované stránky lze použít „Personal WEB Server“, kde je max. počet současných připojení zpravidla 10, podporuje všechny běžné skripty. PWS je součástí distribuce Windows 98, lze doinstalovat z adresáře ADD IN či stáhnout od Microsoftů.

8 Typy WWW stránek LVALVA WAN Statické stránky Statické stránky: stránky jsou vytvořeny čistě v kódu HTML, obsah ani grafická podoba stránek se nemění v závislosti na době, připojeném uživateli, zobrazovaných datech atd. Statické stránky se skripty na straně klienta Statické stránky se skripty na straně klienta: stránky nemění svůj obsah, mohou se graficky modifikovat podle různých událostí ze strany klienta.

9 Typy WWW stránek LVALVA WAN Dynamicky generované stránky Dynamicky generované stránky: mění obsah svého kódu podle událostí na straně serveru (čas, typ přihlášení, stav serveru, změna databáze) Stránky se skripty na straně serveru Stránky se skripty na straně serveru: stránky mění svůj obsah, mohou se graficky modifikovat podle různých událostí ze strany klienta i serveru. Používané především na internetové a intranetové informační systémy. Vytvářeny zpravidla jako kombinace PHP/ASP + HTML + skripty na straně klienta.

10 Princip činnosti WWW stránek LVALVA WAN WWW server browser na straně klienta Klientské PC Zde se zpracovávají PHP a ASP skripty HTML kód včetně klientských skriptů Uložení všech komponent stránky Vykonání klientských skriptů + HTML kódu

11 Nástroje pro tvorbu WWW stránek LVALVA WAN Principiálně platí, že pro vytvoření stránky postačí jakýkoli textový editor (Poznámkový blok, Norton Commander, FAR), který do uloženého kódu NEVKLÁDÁ své formátovací znaky. To pak v praxi znamená, že je třeba detailně znát příkazy HTML, které potřebuje autor v kódu použít. Proto se ve většině případů (kromě profesionálních programátorů stránek) používají nástroje, které základní grafickou a obsahovou interpretaci stránek vygenerují podle grafické předlohy sami do HTML kódu a detailní zpracování se pak provede ručně.

12 Nástroje pro tvorbu WWW stránek LVALVA WAN Tyto editory tedy usnadní mnoho času a práce při rutinních operacích, na druhou stranu automaticky vygenerovaný HTML kód je zpravidla nepříliš optimální a ne vždy vystihuje přesnou podobu požadované stránky. Prakticky vždy je nezbytné provést ruční „dotvoření“ stránky a redukci redundantního “balastu“ vzniklého automatickou generací HTML kódu stránky.

13 Nástroje pro tvorbu WWW stránek LVALVA WAN Word / Excel Word / Excel :je zřejmě nejjednodušší a nejméně efektivní nástroj pomocí kterého se dá HTML stránka vygenerovat. Věrnost obrazové předloze je velice nízká, HTML kód je silně neefektivní. Použít lze pouze pro triviální stránky – doporučuji NEPOUŽÍVAT ! PowerPoint PowerPoint: obdobné vlastnosti jako Word s tím, že dokáže vygenerovat soustavu navzájem propojených stránek – doporučuji NEPOUŽÍVAT ! Ve verzích 2000 negeneruje HTML stránky ale XLM !

14 Nástroje pro tvorbu WWW stránek LVALVA WAN FrontPage98 FrontPage98 :je relativně použitelný nástroj pro první seznámení s tvorbou stránek. Zpravidla je nutná manuální verifikace HTML kódu. Pozor na skripty ! Velice dobrá implementace OCX objektů. FrontPage2000(XP) FrontPage2000(XP) :obdobné jako v předchozím případě. Lépe generuje zdrojový kód, má chyby při práci s OCX objekty. Raději doporučuji přehlednější FP98. Umí zpracovávat XLM stránky.

15 Nástroje pro tvorbu WWW stránek LVALVA WAN HomeSite HomeSite :je nástroj, kde autor již musí sám vytvářet celý HTML kód (není WYSYG). Vhodný pro pokročilé programátory stránek 1StPage 1StPage :viz výše, obdobně celá řada dalších editorů, v tomto případě je skutečně velice obtížné zvolit jeden konkrétní. Doporučuji si několik vyzkoušet a zjistit, který Vám osobně vyhovuje.

16 Struktura statické WWW stránky LVALVA WAN Název stránky http://www.euroshop.cz/

17 Základní doporučení pro prezentaci a tvorbu stránek LVALVA WAN t Vytvářejte větší počet kratších stránek t Nepřehánějte to s grafikou na stránkách t Jména souborů s HTML kódem doporučuji klasicky 8 znakové – NE dlouhá jména souborů s diakritikou t Vše, co je součásti stránky musí být fyzicky umístěno na publikovaných místech – nikoli odkazy typu: file://C:\stranka\ja.gif file://C:\stranka\ja.gif t Používejte tabulky!

18 Programování WWW stránek LVALVA WAN V předchozí prezentaci jsme si stanovili základní principy pro tvorbu stránek, ukázali jsme si dva základní postupy při jejich tvorbě (přímý zápis zdrojového kódu – využití automatických generátorů kódu) a především jsme si vysvětlili základní typy www stránek (statická, dynamická, skriptovaná na straně klienta, skriptovaná na straně serveru). Nyní k několika základním postupům, které se při tvorbě www stránek pravidelně využívají. Tato přednáška však v žádném případě nemůže nahradit samostatnou práci a procvičení tohoto tématu na PC – NEZBYTNÉ !!!

19 Práce s textem LVALVA WAN Pro práci s textem platí prostá zásada – text, který chcete zobrazit se do HTML kódu pouze napíše bez jakýchkoliv dalších příkazů (tagů). Tímto způsobem však nelze provést další formátovací operace s textem, v tomto případě je již nutné použít např. následující příkazy jazyka HTML: Jeden z mála nepárových tagů, provádí odřádkování, v případě použití Front Page stačí stisknou Enter Toto je pokusný text Uvedený text vycentruje na střed stránky Toto je pokusný text Uvedený text zarovná do bloku (oba okraje), ve Front Page není standardně ikona ! Toto je pokusný text Uvedený text zarovná do bloku (oba okraje), text bude uvedeným fontem, velikostí 3, tučně

20 Práce s odkazem LVALVA WAN Možnost vzájemného propojování stránek je vlastně principem služby WWW, proto je znalost jejího vytvoření klíčová. Na Seznam Základní syntaxe je triviální, v tomto případě je text „Na Seznam“ odkazem na adresu seznam.cz. V případě, že pracujete např. ve FrontPage,je postup následující:  Napíšete text, který má být odkazem („Na Seznam“)  Označíte jej jako blok  Kliknete na ikonku „Create or edit hyperlink“  Do řádku URL uvedete adresu stránky („seznam.cz“)

21 Práce s odkazem LVALVA WAN Ve výše uvedeném příkladu se nová stránka otevře v tom samém okně jako předchozí. Pokud toto chcete změnit, povšimněte si v okně definice odkazu (viz. výše) specifikátoru Target frame. Ten (po stisku tlačítka „Change Target Frame“ otevře dialog pro definici, kde se má nové okno otevřít Na Seznam Pokud tedy chceme, aby se odkaz otevřel v novém okně, vygeneruje se kód:

22 Práce s obrázkem LVALVA WAN Obrázek na WWW stránku lze vložit jinak jako prostý obrázek, jako pozadí stránky, jako obrázek do tabulky, jako pozadí tabulky či jako pozadí buňky tabulky. Ve většině případů doporučuji obrázek vkládat do buňky tabulky (různá rozlišení, formátování stránky,…). Pokud však přesto chceme vložit obrázek čistě na stránku, je situace jednoduchá: Vytváříme-li stránku ve FrontPage, stačí mít kurzor na místě, kam chcete vložit obrázek a stisknou tlačítko „Insert Picture From File“ V dialogu pro výběr souboru pak běžným způsobem vybereme umístění a jméno obrazového souboru. Je ale zřejmé, s že tímto způsobem vložení obrázku budeme mít problém s přesným umístěním obrázku na stránce, zvláště při různých rozlišeních. Proto je vždy vhodnější umístit obrázek (zvláště je-li jich na stránce více) do buněk tabulky.

23 Práce s obrázkem LVALVA WAN V případě, že požadujeme vložení obrázku do pozadí stránky, měníme vlastnost stránky. Takže zdrojový kód bude vypadat takto: Vytváříme-li stránku ve FrontPage, klikneme kdekoliv na stránce pravým tlačítkem myši a v menu vybereme položku „Page Propertis“.V záložce „Background“ zvolíme příslušný soubor – viz. obr.: Vždy když vkládáte obrázek, zkontrolujte si, že cesta k obr. souboru je definovaná relativně k souboru ze kterého se na něj odkazujete !!! NELZE připustit syntaxi např.: „file:\\c:/pokus/pozadi.jpg” !!!!

24 Práce s tabulkou LVALVA WAN Jak jsem si již několikrát zdůraznili, je tabulka základním formátovacím nástrojem při tvorbě WWW stránek. Umožňuje „udržet“ grafickou podobu stránky při různých rozlišení, na různých prohlížečích a monitorech. Vlastní definice tabulky je jednoduchá – definujete začátek tabulky, buňky v první řádce, konec řádky tabulky a tak dále až do konce tabulky. Pokud tedy potřebujeme např. tabulku 2 řádky na 3 sloupce, bude zdrojový kód následující: 1.buňka 1. řádku 2.buňka 1. řádku 3.buňka 1. řádku 1.buňka 2. řádku 2.buňka 2. řádku 3.buňka 2. řádku

25 Práce s tabulkou LVALVA WAN Pracujeme-li ve FrontPage, je tvorba tabulky obdobná tvorbě tabulky ve Wordu: stiskneme ikonu „Insert Table“ a myší vybereme počet řádků a sloupců: V našem případě je výsledek následující : I další práce s tabulkou (buňkou) je obdobná práci s tabulkou (buňkou) ve Wordu. Nezapomeňte, že každá buňka tabulky se vlastně chová jako samostatný odstavec textu (zarovnávání, fonty, barva, pozadí, obrázek,…)

26 Index.htm Práce s rámci (frame) LVALVA WAN Velice často se při tvorbě stánek setkáváme s problémem, že požadujeme, aby se měnila pouze část stánky a část se neměnila. Pro tento účel se používají rámce, což jsou vlastně samostatné html stránky, které se spojí pomocí další html stánky do jedné. Tím lze dosáhnout toho, že odkaz z jedné části stránky (jednoho frame) provede změnu jiné části stránky (druhého frame). Graficky lze situaci znázornit např. takto: 1.htm frame1 2.htm frame2 3.htm frame3

27 Práce s rámci (frame) LVALVA WAN V tomto případě tedy budeme mít celkem 4 html soubory. Soubory 1.htm, 2.htm a 3.htm jsou běžné html soubory, zajímavý je soubor Index.htm, který je vlastně spojuje do jedné stránky. Příklad takového souboru může být v našem případě například tento zdrojový kód: Tato stránka používá frame, ale Váš browser je nepodporuje.

28 Práce s rámci (frame) LVALVA WAN Právě v tomto případě je užitečný parametr „Target Frame“ při vytvoření odkazu – můžete definovat, kde se nová stránka (na které pozici framu) má zobrazit. V případě, že pracujete s FrontPage, je vytvoření rámců celkem jednoduché. V nabídce File – New – Page vyberte záložku „Frames Pages“. Zde je několik předdefinovaných základních struktur. V náhledu je vidět celková grafická podoba rozdělení rámců. Nezapomenout uložit VŠECHNY soubory !

29 Děkuji pro dnešek za pozornost a těším se zase příště … LVALVA WAN … příští týden se budeme věnovat webové grafice a videu... Do příště umět základní operace při tvorbě WWW stránek ! Do příště umět základní operace při tvorbě WWW stránek !