Tvorba podstránek

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

Nová struktura souborů a složek logo.png logo2.png obr pozadi.png layout.html pozadi2.png

www

styl.css index.html omne.html

zkusenosti.html reference.html kontakt.html

Rámce • V minulosti se k tomuto účelu využívaly rámce (tag ), 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.

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.

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

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í.

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

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

Zdrojový kód kontaktního formuláře <article>



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

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 • https://www.iconfinder.com/

• • • • •

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

Kód tabulky vložené do stránky zkusenosti.html • Přidání tabulky

HTML S HTML začínám a umím vytvořit jednoduché webové stránky, jako jsou tyto.	CSS Umím používat také CSS styly k úpravě designu webových stránek.	JavaScript JavaScript umím jen trochu

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

Výsledná stránka zkušeností

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.

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.

Kód v html souboru reference.html

Níže můžete nalézt ukázky vytvořených webů

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

Výsledek

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 http://lokeshdhakar.com/projects/lightbox2/. • 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.

Úprava stránky reference • Do hlavičky přidáme následující část kódu <script src="js/jquery-1.10.2.min.js"> <script src="js/lightbox-2.6.min.js"> • Dále přidáme všem odkazům v galerii atribut rel s hodnotou 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.

Výsledek s použitím Lightboxu

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