SIPVZ Tvorba www stránek

Transkript

1 SIPVZ Tvorba www stránek RNDr. Jana Reslová SPŠE a VOŠ Pardubice V čem vytvářet HTML stránky... 2 Editor 1stPage... 4 Instalace...4 Prostředí editoru 1stPage...4 Úprava prostředí 1stPage...5 Základy HTML... 7 Základní části textu...7 Obrázky...7 Odkazy...8 Tabulky...8 Styly css Definice stylu společná pro více dokumentů...11 Definice stylu přímo v dokumentu...11 Příprava obrázků pro internet Velikost obrázku...12 Příprava obrázků pro internet program IrfanView verze Příprava obrázků program IrfanView verze Jak zkontrolovat bezchybnost Kontrola HTML kódu...20 Umístění souborů na internet Přenos souborů na internet...21 FTP Transfer programu 1stPage...21 SIPVZ Publikování na www 1/22 RNDr. Jana Reslová

2 V čem vytvářet HTML stránky Wysiwyg editory (FrontPage, Macromedia DreamViewer, apod.) umožňují psát stránky bez znalosti html kódu, stránky se vytvářejí a formátují podobně jako dokumenty ve Wordu (wysiwyg = what you see is what you get = co vidíš, to dostaneš). Program sám generuje výsledný html kód. kvalitní wysiwyg editory jsou komerční produkty, cena programu FrontPage je něco přes jeden tisíc korun, cena Macromedia Dreamweaver přesahuje deset tisíc korun. výhodou je, že stránky vytvoříte poměrně snadno. při práci s těmito programy je třeba dodržovat určité zásady a postupy, aby vygenerový kód nebyl chaotický a byl úsporný, aby stránky byly formátovány pomocí stylů. Je třeba se vyvarovat jednoduchých postupů přílišného formátování pomocí tlačítek. Máte-li k dispozici pro svoji tvorbu program Microsoft FrontPage, či uvažujete o jeho zakoupení, prohlédněte si články o tvorbě www pomocí Microsoft FrontPage. HTML editory (HomeSite, 1stPage, GoldenHTML, apod.) umožňují přímo zapisovat a editovat html kód stránek, přičemž barevně odlišují html značky od vlastního textu stránky. HTML tagy není nutné přesně znát, je možné je vkládat pomocí tlačítek panelů nástrojů editoru, či pomocí jeho menu. Při vytváření hlml kódu stránky umožňují editory průběžně zobrazovat její výslednou podobu v náhledovém okně. veškerý potřebný software (editor pro tvorbu html, editor stylů, grafický editor pro přípravu obrázků) je free (zdarma). hlml kód vytváříte přesně podle svých představ. musíte se naučit rozumět html kódu Chcete-li se naučit základy html a dozvědět se, jak vytvářet co nejefektivnější stránky, či prostě nemáte k dispozici program Microsoft FrontPage, přihlašte se na kurz Publikování na www - s HTML editorem 1stPage. Chcete-li se podívat, co se naučíte v tomto kurzu, přečtěte si další kapitoly o tvorbě www pomocí 1stPage. Zvolíte-li tvorbu www stránek prostřednictvím free software, budete potřebovat: HTML editor 1stPage editor stylů Top Style Lite editor obrázků IrfanView internetové prohlížeče Microsoft Internet Explorer a Mozila Všechen potřebný software najdete na CD, které obdržíte k našemu kurzu. SIPVZ Publikování na www 2/22 RNDr. Jana Reslová

3 Co to je HTML HTML stránky obsahují text doplněný html značkami, tzv. tagy: HTML stránky jsou uloženy jako soubory s příponou htm nebo html. Je vhodné zvolit jednu z těchto možností a tu pak používat pro všechny stránky. Hlavní stránku, která má být zobrazena po zadání internetové adresy uložíme jako soubor index.htm (nebo index.html). Obrázky jsou uloženy samostatně jako soubory jpg, gif nebo png. Stránky, které je zobrazují, obsahují pouze html značku s přesným určením místa a názvu souboru s obrázkem. Další soubory (pdf, zip, xls, apod.) jsou rovněž uloženy samostatně, stránky obsahují odkaz s přesným určením místa a názvu těchto souborů. Některé typy souborů mohou být po kliknutí na odkaz otevřeny přímo internetovým prohlížečem, jiné jsou určeny ke stažení (uložení na disk). SIPVZ Publikování na www 3/22 RNDr. Jana Reslová

4 Editor 1stPage Instalace Soubory k instalaci 1stPage spolu s dalšími materiály jsou na CD, které obdržíte na našem kurzu nebo na internetových stránkách sipvz.spse.cz. Editor 1stPage verze 2000 můžete instalovat ze samorozbalovacího archivního souboru 1st_page.exe, který obsahuje jak českou, tak anglickou verzi programu. Součástí této instalace je i nástroj pro FTP přenos souborů na internetový server. Nejnovější verzi programu 1stPage najdete na stránkách K dispozici je i čeština, kterou najdete na internetových stránkách timer.wz.cz Čeština bohužel funguje pouze na některých operačních systémech. Prostředí editoru 1stPage Nový soubor, otevřít, uložit, uložit všechny soubory Zobrazení kódu Zobrazení náhledu Panely nástrojů Zavření souboru Zapnutí trvalého náhledu Otevření souboru 2x kliknout Výběr složky Přepínání mezi otevřenými stránkami SIPVZ Publikování na www 4/22 RNDr. Jana Reslová

5 Úprava prostředí 1stPage Pokud není správně zobrazen text v okně Edit (písmena s diakritikou), nastavíme písmo pomocí menu Options Editing Preferences Vybereme East Europe SIPVZ Publikování na www 5/22 RNDr. Jana Reslová

6 Úprava panelů nástrojů Pokud si zavřeme některý z panelů nástrojů, klikneme pravým tlačítkem myši na kterémkoliv panelu a zapneme zobrazení požadovaného panelu. Pokud některý panel vytáhneme myší na plochu, stane se z něj samostatný plovoucí panel, můžeme jej myší přetáhnout zpět mezi ostatní panely, pořadí jejich záložek upravíme pomocí Organize palete. Další tlačítka lze na panely přidávat pomocí Customize. Není-li na panelech například tlačítko pro odstavec (Paragraph), přidáme jej např. na panel Standard následujícím způsobem: 2) Vybereme tlačítko a myší jej přetáhneme na zvolené místo na ukázce panelu 1) Označíme požadovaný panel 3) Stiskneme Save SIPVZ Publikování na www 6/22 RNDr. Jana Reslová

7 Základy HTML O vytváření HTML kódu již byla napsána řada učebnic, mnohé najdete na internetu (např. na stránkách nebo Na CD, které obdržíte k našemu kurzu, najdete cvičení s odkazy na vybrané kapitoly rozsáhlé elektronické učebnice Jak psát web, která je se souhlasem autora součástí CD. V následující tabulce jsou uvedeny základní html značky (tzv. tagy), které potřebujete k vytvoření svých prvních internetových stránek. Další spolu s popisem jejich významu a jejich parametrů najdete ve zmíněných učebnicích. Základní části textu HTML tag Význam Panel nástrojů 1stPage Tlačítko 1stPage <h1>...</h1> Hlavní nadpis Standard <h2>...</h2> Podnadpis Standard <p>...</p> Odstavec nutno přidat na některý panel Nedělitelná mezera Standard < Znak menší (např. x<0) menu Insert - Special Character Symbols > Znak větší (např. y>x) menu Insert - Special Character Symbols <strong>...</strong> <em>...</em> Zvýrazněné písmo (obvykle tučné) Zvýrazněné písmo (obvykle kurzíva) Fonts Fonts <b>...</b> Tučné písmo (bold) Fonts <i>...</i> Kurzíva (italic) Fonts ^... Horní index Fonts _... Dolní index Fonts <br> Konec řádku Standard Obrázky <img src=" "> Obrázek Standard <img src="olympia1.jpg" width="200" height="150" border="0" alt="olympia" align="left"> <img src=" "> Obrázek přetažením souboru s obrázkem z levého panelu do okna Edit <img src="olympia1.jpg" width="200" height="150" border="0" alt=""> SIPVZ Publikování na www 7/22 RNDr. Jana Reslová

8 Odkazy <a href=" "> </a> Odkaz Standard <a href="historie.htm">historie olympijských her</a> <a href="galerie/foto.jpg" target="_blank" title="zvětšit obrázek"><img src="galerie/n_foto.jpg" width="200" height="150" border="0" alt=""></a> <a href=" "> </a> Odkaz přetažením souboru html z levého panelu do okna Edit <a href="historie.htm"></a> <a href="mailto: "> </a> Odkaz na mail Standard nebo <a href="mailto:reslova@spse.cz">autor</a> <a href=" "> </a> Odkaz na soubor <a href="navody.pdf" title="soubor ke stažení">návod</a> nebo Tabulky <tables> </tables> Tabulka s řádky i buňkami Tables <tr> </tr> Řádek tabulky Tables nebo <td> </td> Buňka tabulky Tables <th> </th> Buňka tabulky pro nadpis Tables Na CD, které obdržíte k tomuto kurzu, najdete cvičení s odkazy na vybrané kapitoly elektronické učebnice Jak psát web, kde jsou podrobně popsány výše jmenované tagy. SIPVZ Publikování na www 8/22 RNDr. Jana Reslová

9 Dialogová okna vložení odkazu po stisknutí tlačítka : Dialogové okno vložení obrázku po stisknutí tlačítka : Relativní adresa URL se vytvoří po kliknutí na tlačítko a označení souboru. Odkaz může být na stránku v jiné složce pak zde bude uvedena cesta do této složky. Výběr obrázku Text, který je zobrazován při ukázání myší na obrázek a který se zobrazuje v místě obrázku, dokud se celý obrázek nenačte do stránky. Text, který se bude zobrazovat u odkazu po nastavení ukazatele myši nad odkaz. Obdobně jako parametr alt u obrázku. Stisknutím tlačítka Recalculate se zapíše šířka avýška obrázku. Zarovnání obrázku vzhledem k textu odstavce. Odkaz bude otevřen v novém okně. Obvykle používáme u odkazů na "cizí" internetové stránky. SIPVZ Publikování na www 9/22 RNDr. Jana Reslová

10 Styly css Pomocí stylů definujeme vzhled jednotlivých prvků html stránky. V obsahu dokumentu pak necháváme HTML tagy bez atributů pro formátování (align, bgcolor, apod.), nepoužíváme formátovací tagy (font, apod.). Přehled css stylů najdete v učebnicích na internetu (např. nebo Styly můžete vytvářet pomocí programu Top Style Lite. Pokud není součástí instalace vašeho html editoru (instalace 1stPage jej neobsahuje), najdete jej např. na nebo na CD, které obdržíte k tomuto kurzu. V panelu vlastností volíme nastavení stylu vybíráme některou z možností, nemusíme d á ř SIPVZ Publikování na www 10/22 RNDr. Jana Reslová

11 Definice stylu společná pro více dokumentů Definici stylu uložíme do samostatného souboru (např. main.css). Tuto definici pak použijeme pro všechny stránky. Výhodou tohoto řešení je jednotný vzhled všech stránek a snadná úprava vzhledu, kterou provedeme v jediném souboru s definicí stylu (main.css). V dokumentech html v části head zapíšeme připojení souboru se styly (v programu 1stPage přetáhneme soubor main.css z levého panelu, kde se nám zobrazují soubory z vybrané složky, do okna editoru html do části head): <link rel="stylesheet" type="text/css" href="main.css"> Obsah souboru main.css může například vypadat takto: body {background-color: #FFFFCC;} h1,h2 { font-family: Arial, Helvetica, sans-serif; font-size: large; font-weight: bold; color: Maroon; } h2 {font-size: larger; font-style: italic;} p { font-family: "Times New Roman", Times, serif; font-size: 12pt; text-align: justify; a } {color: Purple; text-decoration: none; } a:hover { text-decoration: underline; } HTML tagy: body... tělo stránky (nastavujeme pozadí, okraje) h1... hlavní nadpis (písmo, barvy, tučné, kurzíva, zarovnání textu) h1,h2... společný zápis vlastností pro h1 a h2 p... odstavec (písmo, barvy, zarovnání textu) a... odkaz (barva, tučné, kurzíva, podtržení) a:hover... při přetí myší přes odkaz (změna barvy, podtržení) a:visited... již navštívený odkaz (jiná barva) Vlastnosti: background-color: color: font-family: font-size: font-weight: font-style: text-decoration: text-align: barva pozadí barva písma druh písma velikost písma tučné písmo kurzíva podtržené písmo zarovnání textu Definice stylu přímo v dokumentu Definici stylu přímo v dokumentu používáme zpravidla pouze na určitých stránkách po připojení stylů ze souboru. Provedeme tak změnu obecně platného stylu definovaného v souboru pouze pro tuto určitou stránku (např. barvu pozadí, velikost či zarovnání nadpisu). V části head zapíšeme např.: <link rel="stylesheet" type="text/css" href="main.css"> <style type="text/css"> <! - body {background-color: #B0C4DE;} H1 {font-size: 18px; text-align: center;} --> </style> SIPVZ Publikování na www 11/22 RNDr. Jana Reslová

12 Příprava obrázků pro internet Pro internet můžete použít obrázky ve formátu jpeg, gif nebo png. Soubory s obrázky jsou uloženy samostatně, internetové stránky pak obsahují html značku s přesným umístěním a názvem souboru s obrázkem. Formát Vlastnosti JPG Plné barvy (16 miliónů), kvalitu obrázku lze nastavit mírou komprese. Fotografie, malby velký počet barev a plynulé přechody mezi nimi. GIF PNG Velikost obrázku Pouze 256 základních barev, bezztrátová komprese. Animované obrázky. Náhrada GIFu (pouze neumožňuje animované obrázky). Plné barvy, lze nastavit. Podporují jej moderní internetové prohlížeče. Použití Kresby, grafy, nápisy, mapy menší počet barev, ostré hrany. Obrázky s průhledným pozadím. Animované obrázky. Kresby, grafy, nápisy, mapy menší počet barev, ostré hrany. Obrázky s průhledným pozadím. Obrázky připravíme v takových rozměrech, v jaké velikosti je chceme mít na internetové stránce. Rozměry by neměly přesáhnout 600pix. Takto velké obrázky obvykle neumísťujeme na stránky přímo, ale připravíme jejich zmenšené kopie ( pix) jako náhledy, které na stránce fungují jako odkazy, po kliknutí na malý náhled obrázku se zobrazí velký obrázek. Obrázky doplňující text stránky mohou mít rozměry pix. Velikost souboru Velikost souboru v kb je přímo úměrná velikosti rozměrů obrázku. U běžných obrázků by neměla přesáhnout 20kB. Dále je velikost souboru závislá na množství barev a míře komprese. SIPVZ Publikování na www 12/22 RNDr. Jana Reslová

13 Příprava obrázků pro internet program IrfanView verze 3.92 K přípravě obrázků pro internetové stránky (změna velikosti, přejmenování, apod.) můžete použít jakýkoliv grafický editor. Free prohlížeč obrázků IrfanView verze 3.92 můžete nainstalovat ze souboru iview392.exe. Po nainstalování zkopírujte soubor cestina.dll do složky Languages (obvykle C:\ProgramFiles\IrfanView\Languages). Po spuštění programu IrfanView v menu Options Change language vyberete češtinu. Nastavení zobrazení obrázku menu View Display options Fit only big images to window [česky Zobrazit Možnosti zobrazení Přizpůsobit pouze velké obrázky oknu] Přejmenování obrázku menu File Rename File (F2) [česky Soubor Přejmenovat soubor] Dávkové přejmenování obrázků menu File Batch Conversion/Rename (B) [česky Soubor Dávková konverze/přejmenování] Vpravo označíme soubory, které chceme přejmenovat a stiskneme tlačítko Přidat. Chceme-li přejmenovat všechny, nemusíme je označovat, stiskneme Přidat vše. Zaškrtneme Dávkové přejmenování a stiskneme tlačítko Nastavit. V zobrazeném okně zaškrtneme Přejmenovat vstupní soubory a zadáme jméno. Stiskneme OK. Stiskneme Spustit. SIPVZ Publikování na www 13/22 RNDr. Jana Reslová

14 Zmenšení velikosti obrázku menu Image Resize/Resample (Ctrl R) [česky Obrázek Změnit velikost/rozlišení] Dávkové zmenšení velikosti obrázků menu File Batch Conversion/Rename (B) [česky Soubor Dávková konverze/přejmenování] Vybereme soubory a stiskneme Přidat nebo Přidat vše. Stiskneme Použít současnou složku jako výstupní. Zaškrtneme Dávkovou konverzi, zaškrtneme Pužít pokročilé možnosti a stiskneme Nastavit pokročilé možnosti. V zobrazeném okně zaškrtneme Změnit velikost a zadáme požadovaný rozměr. Zaškrtneme Zachovat poměr stran a Přepsat existující soubory. Stiskneme Spustit. Zde je možné nastavit míru komprese (kvalitu). SIPVZ Publikování na www 14/22 RNDr. Jana Reslová

15 Vytvoření náhledů (malých obrázků - obvykle lze na ně na stránkách kliknout a zobrazit větší obrázek): Původní obrázky zkopírujeme pod novými názvy (např. n_foto01.jpg, n_foto02.jpg, atd.) a zmenšíme jejich velikost (např. šířka 150 pix). Dávkové zkopírování s novými názvy menu File Batch Conversion/Rename (B) [česky Soubor Dávková konverze/přejmenování] Vybereme soubory a stiskneme Přidat nebo Přidat vše. Stiskneme Použít současnou složku jako výstupní. Zaškrtneme Dávkovou konverzi s přejmenováním výsledných souborů, nastavíme vzor jména, zaškrtneme Použít pokročilé možnosti a stiskneme Nastavit pokročilé možnosti. V zobrazeném okně zaškrtneme Změnit velikost a zadáme požadovaný rozměr. Zaškrtneme Zachovat poměr stran. Stiskneme Spustit. SIPVZ Publikování na www 15/22 RNDr. Jana Reslová

16 Vytvoření výřezu obrázku obrázek zobrazíme ve 100% velikosti [menu Zobrazit Původní velikost (Ctrl+H)], myší označíme požadovanou část obrázku a provedeme menu Edit Crop selection (Ctrl+Y) [česky Úpravy Vystřihnout výběr (Ctrl+Y)] Zobrazení všech obrázků ze zvolené složky menu File Thumbnails (klávesa T) [ česky Soubor Miniatury] otevře se nové okno Zvětšení rozměrů miniatur menu Options Set thumbnail options [česky Nastavení Nastavit možnosti miniatur] Obnovení miniatur (např. po dávkovém přejmenování obrázků) menu View Refresh (F5) [česky Zobrazit Obnovit (F5)] SIPVZ Publikování na www 16/22 RNDr. Jana Reslová

17 Příprava obrázků program IrfanView verze 3.85 K přípravě obrázků pro internetové stránky (změna velikosti, přejmenování, apod.) můžete použít jakýkoliv grafický editor. Návod k používání progranu IrfanView 3.85: Zobrazení náhledů všech obrázků ze zvolené složky menu File Thumbnails (T) Přejmenování obrázku menu File Rename File (F2) Dávkové přejmenování obrázků menu File Batch Conversion/Rename (B) Vpravo označíme soubory, které chceme přejmenovat a stiskneme tlačítko Add. Chceme-li přejmenovat všechny, nemusíme je označovat, stiskneme Add all Zaškrtneme Batch rename a stiskneme tlačítko Set rename options. V zobrazeném okně zaškrtneme Rename input files a zadáme název. SIPVZ Publikování na www 17/22 RNDr. Jana Reslová

18 Zmenšení velikosti obrázku menu Image Resize/Resample (Ctrl R) Dávkové zmenšení velikosti obrázků menu File Batch Conversion/Rename (B) Zaškrtneme Resize, nastavíme požadovanou velikost, např. výšku 400 pixelů, zaškrtneme Preserve aspect ratio (zachovat poměr výšky a šířky) Zaškrtneme Overwrite existing files (přepsat původní soubory) a stiskneme OK Vybereme soubory a stiskneme Add nebo Add all. Stiskneme Use this directory as ouput. Zaškrtneme Batch conversion a stiskneme Set advanced options V zobrazeném okně nastavíme požadovanou změnu velikosti. SIPVZ Publikování na www 18/22 RNDr. Jana Reslová

19 Vytvoření náhledů (malých obrázků). Obvykle lze na ně na stránkách kliknout a zobrazit větší obrázek. Původní obrázky zkopírujeme pod novými názvy (např. n_foto01.jpg, n_foto02.jpg, atd.) a zmenšíme jejich velikost (např. šířka 150 pix). Dávkové zkopírování s novými názvy menu File Batch Conversion/Rename Vybereme soubory a stiskneme Add nebo Add all. Stiskneme Use this directory as ouput. Zaškrtneme Batch rename a stiskneme Set rename options. V zobrazeném okně zadáme název, zaškrtneme Copy input files to output directory. Pak pomocí dávkového zpracování zmenšíme velikost souborů n_foto01.jpg, n_foto02.jpg, atd. SIPVZ Publikování na www 19/22 RNDr. Jana Reslová

20 Jak zkontrolovat bezchybnost Kontrola HTML kódu Vytvořené stránky zkontrolujeme prostřednictvím validátoru World Wide Web Consortia. Na internetové stránce zadáme postupně všechny svoje stránky. Pokud máme dokument HTML 4.0 a dostaneme takovouto odpověď, je náš html kód správný. Pomocí tlačítka Procházet vybereme html soubor na svém počítači, který chceme zkontrolovat a stisknete Check. Takto postupně zkontrolujeme všechny soubory. SIPVZ Publikování na www 20/22 RNDr. Jana Reslová

21 Umístění souborů na internet Závěrečné práce absolventů našich kurzů umístíme na naše internetové stránky Pro svoje potřeby si můžete zřídit prostor na některé internetovém serveru, přehled freehostingových serverů, které tuto službu poskytují zdarma, najdete na Přenos souborů na internet Soubory je možné kopírovat na internet prostřednictvím některých internetových stránek nebo pomocí FTP. Pro FTP přenos potřebujeme program, který tuto službu umožňuje (např. Windows Comander). HTML editor 1stPage rovněž tuto službu poskytuje, je však potřeba doplnit soubor transfer.exe. FTP Transfer programu 1stPage Pokud jste k instalaci 1stPage použili soubor 1st_ page.exe z našich internetových stránek nebo z CD k našemu kurzu, který již FTP Transfer obsahuje, nemusíte tedy již nic instalovat. Pokud jste použili jinou instalaci, najdete doplňující nástroj programu 1stPage pro FTP přenos souborů na Stažený soubor transfer.exe umístíme do složky s programem 1stPage (obvykle C:\Program Files\1stPage2000\ nebo např. C:\Prac\1stPage200\). V editoru 1stPage jej spustíme pomocí menu Tools - 1st Transfer FTP Klikneme pravým tlačítkem myši do prázdného pravého okna a z menu zvolíme Create Server SIPVZ Publikování na www 21/22 RNDr. Jana Reslová

22 Definujeme připojení k serveru Vybereme složky a soubory. Šipkou nebo přetažením myší zahájíme přenos souborů. ******* SIPVZ Publikování na www 22/22 RNDr. Jana Reslová