Nová struktura souborů a složek

Transkript

1 Tvorba podstránek

2 Vytvoření podstránek Asi si kladete otázku, jakým způsobem docílíme toho, aby se všechny podstránky na našem webu zobrazovaly v námi vytvořeném layoutu. Máme 4 možnosti jak vytvářet podstránky Rámce Tabulkový layout Serverový jazyk Kopírování V našem konkrétním případě to bude použitím čtvrté možnosti, tedy kopírováním Vytvoříme tedy kopie naší stránky layout.html a následně je pojmenujem podle potřeby Index.html, omne.html, zkusenosti.html, reference.html a kontakt.html

3 www Nová struktura souborů a složek logo.png obr layout.html styl.css logo2.png pozadi.png pozadi2.png index.html omne.html zkusenosti.html reference.html kontakt.html

4 Rámce V minulosti se k tomuto účelu využívaly rámce (tag <frameset>), které umožňovaly layout definovat pouze jednou a podstránky se zobrazovaly v rámcích. Tento způsob však představoval mnoho problémů zejména pro internetové vyhledávače, proto byly rámce ve verzi HTML 5 odstraněny a označeny za nevalidní. V dnešní době je velkou chybou rámce používat.

5 Tabulkový layout Druhým způsobem, bohužel o nic šťastnějším, je použití tabulky k vytvoření layoutu. Tabulka má totiž ve vykreslování buněk mírné odlišnosti a umožňuje vložení řádkového rámu (<iframe>) tak, aby se jeho výška přizpůsobovala výšce okna. Do rámu je následně možné zobrazovat danou podstránku webu. Použití tabulky je však v layoutu velmi nesprávné a nesémnatické, protože tabulka slouží pro označení tabulky, nikoli celé stránky. Navíc dochází opět k problémům s rámcem ve vyhledávačích. Těmito problémy je konkrétně to, že celé stránky běží na jedné URL s rámem. Na podstránky se nelze podle adresy odkazovat a pokud ano, zobrazí se ve špatné šířce a bez layoutu.

6 Serverový jazyk Správné řešení je použití dalšího programovacího jazyka, který běží na straně serveru a který nám obsah článku do podstránek sám vkládá. Nebo naopak do podstránek vkládá layout. Takovým jazykem je např. velmi používané PHP. S jazykem PHP se teprve budeme seznamovat

7 Kopírování Každá stránka našeho webu tedy v sobě bude mít ten samý layout, ale v něm jiný obsah. Kopírování layoutu do více souborů je poněkud nepraktické, ale zatím je to pro nás nejschůdnější cesta, která je validní a na podstránky se lze odkazovat. index.html se stránka, která se zobrazí ve chvíli, když na web přijdeme. Tedy stránka, domovská neboli úvodní.

8 Podstránky Pojďme tedy upravit stávající podstránky webu tak, aby obsahovaly layout. Začněme stránkou kontaktní.

9 Stránka kontakt Stránku kontakt.html upravíme tak, aby v ní byl layout a uvnitř <section>. Nezapomeňte změnit i titulek v hlavičce stránky, nadpis v hlavičce článku a nastavit třídu aktivni položce kontakt v menu. V našem případě kontaktní formulář nebude fungovat, pokud by jste chtěli funkční kontaktní formulář, museli by jste využít nějakého PHP skriptu Buď to vlastní PHP skript Nebo použít PHP skript poskytovatele vašeho webového hostingu, pokud to bude umožňovat Případně naléz jiný server, kde vám bude umožněno vygenerovat svůj kontaktní formulář a následně jej vložit do kódu své stránky

10 Zdrojový kód kontaktního formuláře <article> </article> <div id="vystredeni"> <header> <h1>kontakt</h1> </header> <section> <p>pokud mi chcete neco sdelit, napiste mi</p> <form action="#" method="post"> Váš mail: <input name="mail_odesilatele" size="20"><br> Předmět: <input name="predmet" size="20"><br> Zpráva: <textarea name="zprava" rows="4" cols="30"></textarea><br> <input align="cener" type="submit" value="odeslat"> </form> </section> <div class="clear"></div> </div>

11 Výsledná stránka s formulářem

12 Stránka zkušenosti Na stránce dovednosti si vytvoříme tabulku, do které umístímě nějaké obrázky a text Jako zdroj obrázků posloužila stránka Protože již známe CSS, trochu lépe tabulku ostylujeme. Jako první ji dáme nějaké IDčko, nabízí se dovednosti. Hlavním problémem je, že nemáme sloupce stejně široké. Každé buňce nastavme šířku na 33% a nějaký padding Dále nastvíme všem buňkám pomocí CSS vlastnosti vertical-align s hodnotou top, tím zajístíme, že budeme mít nadpisy ve stejné výšce K zarovnání na střed použijeme hodnotu middle, k zarovnání dolů bottom. Ještě přidáme naší tabulce nějaký ten rámeček. Je to velmi podobné jako stylování rámečku ostatních elementů, avšak tabulka má rámeček dvojitý Rámečky slijeme pomocí vlastnosti border-collapse, nastavené na hodnotu collapse. Tu však nenastavíme buňkám, ale celé tabulce

13 Kód tabulky vložené do stránky zkusenosti.html Přidání tabulky <table id="zkusenosti"> <tr class="vystred"> <td> <img src="obr/html.png" alt="html" /> </td> <td> <img src="obr/css.png" alt="css" /> </td> <td> <img src="obr/js.png" alt="javascript" /> </td> </tr> <tr class="vystred"> <td> <h2>html</h2> <p>s HTML začínám a umím vytvořit jednoduché webové stránky, jako jsou tyto.</p> </td> <td> <h2>css</h2> <p>umím používat také CSS styly k úpravě designu webových stránek.</p> </td> <td> <h2>javascript</h2> <p>javascript umím jen trochu</p> </td> </tr> </table>

14 Nastavení tabulky v CSS stylu #zkusenosti td { width: 33%; padding: 10px; vertical-align: top; border: 1px solid gray; } #zkusenosti{ border-collapse: collapse }

15 Výsledná stránka zkušeností

16 Stránka reference Na stránce s referencemi si vytvoříme malou galerii obrázků. Galerie obrázků se vám určitě hodí nejen na obrázky vašich prací, ale třeba i na fotky a podobně. Galerie obrázků Začněme tím, že si ke každému obrázku vytvoříme miniaturu. Bylo by velkou chybou zobrazovat náhledy jako velké obrázky, jelikož se dlouho stahují. Proto si ve svém oblíbeném grafickém editoru zmenšete své obrázky, třeba výšku na 128px a k jejich názvu jsem připojil _small.

17 Stránka reference Na kódu není nic složitého. Uděláme si div, ve kterém jsou poskládané zasebou jednotlivé náhledy. Každý náhled odkazuje na originální obrázek. U odkazu nastavíme atribut title, ten můžeme nastavit každému prvku v HTML a zobrazí je tehdy, když na element najedeme kurzorem myší Po té ješte trochu naši galerii vylepšíme přes CSS. Nastavíme obrázkům v galerii border, padding, margin a stín. Pokud na náhled klikneme, zobrazí se velký obrázek. Efekt je ale poněkud ošklivý, celá stránka zmizí a obrázek je nevzhledně umístěn v levém horním rohu, na prázdné stránce.

18 Kód v html souboru reference.html <p>níže můžete nalézt ukázky vytvořených webů</p> <div id="reference"> <a href="obr/wacice.png" title="web wacice"><img src="obr/wacice_small.png" alt="web wacice" /></a> <a href="obr/strechy.png" title="web strechy"><img src="obr/strechy_small.png" alt="web strechy" /></a> <a href="obr/ukazka.png" title="web ukazka"><img src="obr/ukazka_small.png" alt="web ukazka" /></a> </div>

19 Přidaná část ve stylech #reference img { border: 1px solid gray; padding: 6px; box-shadow: 3px 3px 6px #999999; margin-right: 6px; }

20 Výsledek

21 Lightbox Lightbox je webový doplněk, napsaný v jazyce JavaScript. Právě JavaScript se používá na dynamické prvky moderních webů, jako je např. vyskakovací okno s galerií obrázků, kterou jistě dobře znáte z mnoha webů. Projekt je zadarmo a dostupný na adrese Použití je velmi jednoduché, stáhněte si archiv s projektem a složky js, images a css rozbalte do složky s vaším webem. Podobně, jako musíme CSS připojit k HTML, musíme k HTML připojit i tento skript, aby se na stránce spustil. Do hlavičky stránky vložíme odkazy na potřebné skripty a i na CSS soubor lightboxu.

22 Úprava stránky reference Do hlavičky přidáme následující část kódu <script src="js/jquery min.js"></script> <script src="js/lightbox-2.6.min.js"></script> <link href="css/lightbox.css" rel="stylesheet" /> Dále přidáme všem odkazům v galerii atribut rel s hodnotou lightbox[reference] <a href="obr/wacice.png" title="web wacice" rel="lightbox[reference]"> Pokud přidáte na kteroukoli stránku do hlavičky potřebné skripty a poté na nějaký odkaz na obrázek použijete rel="lightbox", zobrazí se v LightBoxu. Pokud navíc uvedete jméno galerie v hranatých závorkách, bude LightBox tyto obrázky chápat jako z jedné galerie a nechá vás mezi nimi přecházet pomocí myši nebo šipek.

23 Výsledek s použitím Lightboxu

24 Podstránka omne.html Věřím, že tuto stránku již dovedete vytvořit samostatně Prošli jsme si vše potřebné co by se vám mohlo hodit pro tvorbu poslední stránky Takže tato stránka jak bude vypadat je čiste jen na vás