Střední průmyslová škola Ostrov. Tvorba webových stránek. Petr Pistulka I CC - BY NC SA3.0. Klínovecká Ostrov

Transkript

1 Střední průmyslová škola Ostrov Klínovecká Ostrov Tvorba webových stránek Petr Pistulka I CC - BY NC SA3.0

2 Prohlášení Prohlašuji, že jsem svou práci vypracoval samostatně, použil jsem pouze podklady citované v práci a uvedené v přiloženém seznamu a postup při zpracování práce je v souladu se zákonem č. 121/2000 Sb., o právu autorském, o právech souvisejících s právem autorským a o změně některých zákonů (autorský zákon) v platném znění. Žák (zpracovatel) odpovídá za skutečnost, že vypracovaný projekt neobsahuje nepravdivé, neúplné a nesprávné informace. Dále se zavazuje, že projekt neobsahuje žádné nezákonné či pro zveřejnění nevhodné položky. Žák (zpracovatel) prohlašuje, že neporušuje práva třetích osob, zejména žádná práva autorská, obchodní tajemství či utajované know-how, práva k ochranným známkám či jiným předmětům průmyslového vlastnictví a ani práva na ochranu osobnosti nebo obchodní firmy, jakož i ustanovení zákona na ochranu proti nekalé soutěži. Žák (zpracovatel)souhlasí s použitím projektu pro potřeby školy (např. webových stránek a školní knihovny a výuku). Práce podléhá licenci Common Creative (CC): Uveďte autora - Nevyužívejte komerčně - zachovejte licenci CC BY NC - SA3.0. V Ostrově Jméno Příjmení 1

3 Anotace: CZ Účelem této práce bylo vytvořit webové stránky, které budou pro uživatele přívětivé a přehledné za pomocí XHTML a CSS. AJ The purpose of this work was to create a website that will be for the user friendly and easy using XHTML and CSS. 2

4 Obsah Prohlášení... 1 Anotace:... 2 Úvod... 5 Zadání Ročníkové práce:... 5 Témata Ročníkové práce:... 5 Seznámení s tématem Třída :... 5 Můj názor na toto téma:... 5 Věci, kterých jsem se obával:... 5 Seznámení se značkovými jazyky ve kterých byly stránky dělány... 6 Značkovací jazyk :... 6 Seznámení s XHTML:... 6 CSS... 6 První návrhy webových stránek v malování:... 7 Hlavní stránky:... 8 Layout prvních webových stránek:... 9 Layout druhých webových stránek: Menu Fotogalerie Informace o použitých písmech Nastavení Fontů pro první web: Nastavení Fontů pro druhý web: Nadpisy Problémy s kterými jsem se potýkal

5 Další problémy: Závěr:...15 Citace:

6 Úvod Zadání Ročníkové práce: Vytvořte webovou prezentaci v jazyce XHTML s využitím CSS. Navrhněte dva různé stylopisy (dvě grafické varianty) součástí práce je dokumentace Témata Ročníkové práce: Při zadání ročníkové práce nám byla představena čtyři témata na které jsme měli udělat webové stránky. Ta témata byla tato: škola, třída, obor IT, web pro Mgr. Peldovou. Mě bylo přiděleno téma o třídě. Seznámení s tématem Třída : V tomto tématu jde o informovat o základních informacích o naší třídě (kde je naše kmenová třída, kolik nás je ) a představit nás. Můj názor na toto téma: I když jsem si toto téma nezvolil sám, ale bylo mi přiděleno, tak si myslím, že je to jedno z lepších témat. Podle mého názoru jde velice dobře zpracovat. Věci, kterých jsem se obával: Ze začátku jsem se bál možného nedostatku kvalitního fotografického materiálu, ale strach mě v zápětí přešel, protože po prohlédnutí fotek jsem zjistil, že většina je v celkem dobrém stavu. 5

7 Seznámení se značkovými jazyky ve kterých byly stránky dělány Značkovací jazyk : Značkovací jazyk vkládá do textů značky, kterými vysvětluje význam nebo vzhled jeho částí. Mezi známější značkovací jazyky patří například HTML, XHTML. Seznámení s XHTML: Značkovací jazyk XHTML je novější forma značkovacího jazyku HTML ( Hypertext markup Language) a to X na začátku znamená extensible (rozšířený). Oproti HTML je XHTML více omezené. Oproti HTML kde například nepárové tagy nemuseli končit lomítkem (<br>) tak v XHTML musí (<br />. CSS V češtině kaskádové styly a je to jazyk pro popis zobrazení stránek psaných v XHTML a HTML Celkem byly vydány 3 Verze CSS1, CSS2, CSS3 (stále ve vývoji). Jazyk je navržen W3C (standardizační organizace) Obr.1 Logo CSS 6

8 První návrhy webových stránek v malování: Zde bych vám rád ukázal jak jsem začal vymýšlet rozložení webových stránek. Obr.2 Toto byl můj návrh k první stránce nakonec jsem ho celkem drže. Obr.3 Tento návrh jsem použil na druhé webové stránky, ale odebral jsem lištu na doplňky. 7

9 Hlavní stránky: Obr.4 Hlavní stránka první webové stránky 8

10 Obr.5 4 Hlavní stránka druhé webové stránky Layout prvních webových stránek: Pro první webové stránky jsem si vybral jednoduchý tabulkový layout. Který je tvořený hlavičkou, patičkou, polem pro menu a polem pro obsah. Velikost tabulky jsem nastavil na šířku 1200 pixelů a výšku 650 pixelů. Hlavička i patička mají obě výšku 60 pixelů a jsou žluté. Pole pro obsah jsem musel udělat dost velké pro vložené fotografie. Jeho výška je 580 pixelů a jeho šířka je 1200 pixelů. Zvolil jsem kombinaci zelené a žluté barvy, které k sobě ladí celkem dobře. Do pozadí jsem použil stejnou zelenou barvu jako v samotném layoutu. Přemýšlel jsem ještě o jednom poli po druhé straně obsahu pro počítadlo přístupů, ale nakonec se mi to zdálo zbytečné a tak jsem od toho nápadu odstoupil. 9

11 Obr.6 Ukázka finální verze tabulkové verze layoutu s menu Layout druhých webových stránek: U druhých webových stránek jsem měl v plánu udělal je v pro mě složitějším divu, ale to jsem se bohužel přecenil a rozhodl jsem se udělat to, co jsem měl v plánu v tabulce. Na rozdíl od prvního má tento layout jenom hlavičku, patičku a obsahové pole. Menu jsem přesunul do hlavičky. Obsahové pole má výšku 560 pixelů. Zvolil jsem oranžovou barvu, kterou zde má i pozadí. Nenastavil jsem rámeček a tak to vypadá jako by tam obsahové pole bylo vynecháno. Hlavička zde má oprati první webové stránce jiné rozměry než patička a to výšku 120px. Patička zde má výšku 60 pixelů. Obě patička i hlavička mají červenou barvu. Původně jsem zde chtěl použít stejné barvy jako na minulé webové stránce, ale nakonec jsem zvolil tyto, aby stránky nevypadali stejně. Pole pro menu jsem zde vynechal z toho důvodu, aby zde bylo více prostoru pro obsah. 10

12 Obr.7 Layout druhé stránky Menu Jak již řečeno tak je na prvních webových stránkách menu po levé straně a na druhé webové stránce je v hlavičce. Obě jsou tvořeny jednoduše v seznamu. Na následující stránce můžete vidět zdrojový kód: <tr> <th colspan="3" id="hlavicka"> <ul> <li><a href="uvod.html">úvod</a></li> 11

13 <li><a href="trida.html">třída</a></li> <li><a href="obor.html">obor</a></li> <li><a href="rozvrh.html">rozvrh hodin</a></li> <li><a href="fotogalerie.html">fotogalerie</a></li> <li><a href="kontakt.html">kontakt</a></li> </ul></th> </tr> Zde můžete vidět CSS kód: li {float: left; margin-left: 100px; list-style-type: none; background-color: orange;} A nakonec zde je CSS kód toho, když se najede na tlačítko myší: li:hover {background-color:rgb(255,255,0); font-weight: bolder;} Fotogalerie Fotogalerii jsem rozdělil na tři kategorie: třídní fotka, Plešivec a Liberec. Na následující stránce se můžete vidět zdrojový kód: <a href="fototridy.html"><img class= "galerie" src="třída1.jpg" title="třída"></a> 12

14 <a "galerie" href="plesivec1.html"> <img class= "galerie" src="plešivec1.jpg" title="plešivec1"></a> <a href="liberec1.html"><img class= "galerie" src="liberec1.jpg" title="liberec"></a> Zde CSS kód:.galerie{ width: 200px; height: 150px; padding-bottom: 20px;} Obr.8 Zde je samotná galerie. Konkrétně z druhých webových stránek. S fotogalerii jsem v celku spokojen, a doufám že je jednoduchá a lehce ovladatelná. Informace o použitých písmech Nastavení Fontů pro první web: Na první webové stránce jsem použil patkové písmo Times New Roman. Je to jedeno ze základních písem a také jedno z nejpoužívanějších a to je hlavní důvod proč jsem se pro něj rozhodl. 13

15 Nastavení Fontů pro druhý web: Pro druhý web jsem se rozhodl použít patkové písmo Georgia, které je dobré na delší texty a je lépe čitelné. Z vlastní zkušenosti vím že není na všech systémech a tak jsem se rozhodl použít také sekundární font. A jako ten jsem použil Times New Roman a to z důvodu že je to jedno z opravdu nejrozšířenějších písem. Jako na minulé stránce také zde jsem nepoužil žádnou kurzívu jenom ztučnění a podtržení písmu na zdůraznění důležitějších věcí. Nadpisy Nadpisy jsem na obou webech psal klasicky v H1 oproti klasickému textu jsem jim dal také jinou barvu pro odlišení a také jsou podtržené. Problémy s kterými jsem se potýkal Jeden z hlavních problémů: Jeden z největších problémů s kterými jsem se potýkal byl již několikrát zmíněný div, kterými sebral docela dost času. Od menších problémů, kterými je zbytečné se tu zabývat až po větší, které bohužel rozhodli o odstoupení od divu. Ten problém byl menu v hlavičce. Tlačítka se různě rozprostřeli po hlavičce a ani po více pokusech se mi nepovedlo je seřadit. Obr.9 Zde je můžete vidět problém s tlačítky. Další problémy: Další takové menší problémy jsem měl s internetovým prohlížečem Internet Explorer jako například to, že mi dělal rámečky tam kde neměli být. Občas něco špatně načetl, nebo nenačetl vůbec. Doufám že se mi povedlo všech, nebo alespoň většiny těchto problémů povedlo zbavit 14

16 Závěr: Doufám že se mi povedlo vytvořit celkem přehledné stránky, které jsou pro uživatele přívětivé a snadno. Citace: Obr.1 [cit ] URL < 15

17 16