Seminarky.cz > Diplomky, bakalářky > Absolventské práce > > Tvorba webových stránek - kulturní přehled města

Tvorba webových stránek - kulturní přehled města

Kategorie: Tvorba WWW stránek

Typ práce: Absolventské práce

Škola: Vyšší odborná škola, Střední škola, Centrum odborné přípravy, Sezimovo Ústí, Budějovická 421, Sezimovo Ústí

Charakteristika: Maturitní práce popisuje tvorbu webových stránek pro kulturní přehled města. V práci je detailně popsaná teorie značkovacího jazyka HTML a jazyka CSS3, dále autor v "praktické části" popisuje samotnou tvorbu webových stránek. Autor se snaží tvořit webové stránky za pomocí nejnovějších technologií. V práci je také popsaná počítačová grafika, která je nedílnou součástí této práce.

Obsah

1
Úvod
1.1
Popis řešeného problému a zdůvodnění výběru 1
1.2
Cíl práce a očekávané výsledky 1
1.3
Historie webových stránek 2
2
Úvod do problematiky 3
2.1
Hypertext 4
2.1.1
Stručná historie hypertextu 4
2.1.2
Hlavní myšlenka hypertextu 5
2.2
Validní webové stránky 5
2.3
HTML 6
2.3.1
Přístupnost a sémantika v HTML 6
2.3.2
HTML5 7
2.3.3
HTML5 tagy 8
2.3.4
Struktura HTML dokumentu 9
2.4
CSS 9
2.4.1
Stavba pravidla stylu 10
2.4.2
Kaskáda a kolize pravidel 11
2.4.3
Metody aplikování CSS 11
2.4.4
Selektory 12
2.4.5
CSS3 13
2.5
Základy počítačové grafiky 14
2.5.1
Rastrová grafika 14
2.5.2
Vektorová grafika 15
2.5.3
Grafické editory 15
3
Tvorba samotných webových stránek 16
3.1
Grafický návrh úvodní stránky 16
3.1.1
Tvorba pozadí stránek 18
3.1.2
Vytváření záhlaví stránky 19
3.1.3
Tvorba navigačního menu stránky 20
3.1.4
Hlavní obsah a postranní panel 21
3.1.5
Výběr barev 25
3.2
Grafické zpracování ostatních stránek 25
3.3
Tvorba grafického plakátu 26
3.3.1
Postup tvorby plakátu 26
3.3.2
Jednoduchá propagace 30
3.3.3
Výstupní formát plakátu 30
3.3.4
Aplikovaní grafického plakátu na webové stránky 31
4
Závěr 32
4.1
Analýza a zhodnocení dosažených výsledků 32
4.2
Splnění hlavního cíle projektu 33
4.3
Doporučení pro další využití v praxi 33
5
Seznam použitých zdrojů a literatury 34
6
Seznam zdrojů použitých obrázků 34
7
Seznam obrázků 35

Úryvek

"Záhlaví stránky jsem vytvořil v horní části stránky pomocí elementu header, který definuje záhlaví. Záhlaví obsahuje banner, neboli obrázek v záhlaví, týkající se celých webových stránek a také obsahuje navigační menu (viz. Obrázek 15).
Obrázek v záhlaví stránky jsem vytvořil v bitmapovém editoru Adobe Photoshop. Velikost obrázku jsem nastavil na 1024x80 pixelů. Nejprve jsem nastavil pozadí celému obrázku. Na pozadí jsem použil barevný přechod v modré barvě. Poté jsem vložil do dokumentu tři velikostně upravené obrázky a naskládal je do levé části obrázku. Pro každý z těchto obrázku jsem vytvořil vlastní vrstvu. V dalším kroku jsem duplikoval všechny tři vrstvy, tedy každý obrázek jsem zkopíroval. Duplikované vrstvy jsem poté zarovnal do pravé části obrázku ve stejném pořadí jako v levé části tohoto obrázku. Na každé straně jsou tedy tři obrázky a uprostřed vznikl srovnatelně velký prostor, do kterého jsem vložil textové pole.
Obrázek 14- Definice vlastností divu s třídou logo
20
Do textového pole jsem vložil nápis „Vožická kultura“. Písmu jsem nastavil velikost 40, černou barvu, která dobře vyniká na modrém pozadí a jako font písma jsem vybral Andalus. Poté už jsem jen obrázek uložil ve formátu JPG.
Pro vložení obrázku do záhlaví jsem vytvořil v elementu header div s třídou logo. Tomuto elementu jsem nastavil na pozadí obrázek, jehož tvorbu jsem popisoval. Dále jsem nastavil výšku elementu div s třídou logo na 80 pixelů, tedy stejně jako je výška samotného vytvořeného obrázku. Margin (vnější okraj) jsem nastavil 10 pixelů pro horní okraj. Dolní okraj jsem nastavil také na 10 pixelů proto, aby později vznikla mezera mezi obrázkem v záhlaví a navigačním menu (viz Obrázek 14).
Obrázek 15- Definice záhlaví stránky
3.1.3 Tvorba navigačního menu stránky
Rozhodl jsem se vytvořit tlačítkové navigační menu. Aby mělo menu pěkný vzhled, musel jsem stylovat (definovat) element button. Vzhledem k tomu, že stylování tlačítek je velice složité a zdlouhavé psaní kódu, rozhodl jsem se, že si tlačítka vygeneruji pomocí CSS3 generátoru tlačítek.
Online generátor CSS3 tlačítek jsem našel na webových stránkách itnetwork.cz. V generátoru šlo nastavit úplně vše, co se tlačítek týkalo, například velikost, tvar, pozadí, stíny atd. Všechny tyto vlastnosti šly nastavit pro tlačítko ve třech různých režimech pokaždé jinak. První režim je, jak bude vypadat tlačítko, pokud na něj nebudeme najíždět myší a klikat, tedy základní režim tlačítka. Druhý režim je, jak bude vypadat tlačítko po najetí myší. Třetí režim, který jsem, ale nepoužil, je, jak bude vypadat tlačítko po kliknutí. Já jsem tedy nastavil pouze první a druhý režim s tím, že obě tlačítka mají stejný tvar, velikost, ale mají nastavenou jinou barvu na pozadí. Základní režim tlačítka má na pozadí nastavenou tmavě modrou barvu, poté co najedeme na tlačítko myší, změní se barva na světlou modrou barvu. Když jsem byl spokojený se vzhledem tlačítka, zkopíroval jsem vygenerovaný CSS3 kód a vložil ho do mé externí šablony stylu."

Poznámka

Práce obsahuje obrázky o rozsahu cca 4 stran.

Vlastnosti

STÁHNOUT PRÁCI

  1. SMS platba (ČR) 30 Kč

    Platba prostřednictvím brány mobilního operátora. Pro započetí platebního procesu prosím vyplňte kontrolní kód a stiskněte tlačítko "Zaplatit"

    Po proběhnutí platby budete přesměrováni zpět na tuto stránku, kde najdete odkaz ke stažení práce.


    V případě potíží s realizací platby se neváhejte obrátit na infolinku poskytovatele služby, společnost Advanced Telecom Services s.r.o., na čísle +420 776 999 199

    Nápověda pro zákazníky Telefónica O2:

    1. Vyplňte Vaše číslo na mobil, zvolte jako operátora Telefónica O2 a klikněte na POTVRDIT.
    2. Zobrazí se Vám informace, že SMS byla odeslána.
    3. Na mobilní telefon Vám bude doručena SMS zpráva s odkazem.
    4. Klikněte na odkaz v SMS zprávě, budete propojeni na platební bránu společnosti Telefónica O2. Zde potvrďte platbu.
    5. Na internetu se zobrazí výsledek proběhlé platby.
    Pro úspěšnou realizaci platby je nutné mít aktivní službu „O2 platba“. Služba je většinou aktivní automaticky, takže není třeba nejdřív nic aktivovat.

    Nápověda pro zákazníky Vodafone:

    1. Vyplňte Vaše číslo na mobil, zvolte jako operátora Vodafone a klikněte na POTVRDIT.
    2. Dojde k přesměrování na Vodafone portál.
    3. Potvrďte Vaše mobilní číslo kliknutím na DALŠÍ. .
    4. Na Váš mobilní telefon přijde SMS zpráva s kódem.
    5. Zadejte tento kód do formuláře, klikněte na OK.
    6. Objeví se Vám údaje o platbě, kterou potvrďte kliknutím na POKRAČOVAT.
    7. V té chvíli proběhne platba, o jejímž výsledku Vás informuje došlá SMS zpráva.
    Pro úspěšnou realizaci platby je nutné mít aktivní službu „M-peněženka“. Služba je většinou aktivní automaticky, takže není třeba nejdřív nic aktivovat.

    Nápověda pro zákazníky T-mobile:

    1. Vyplňte Vaše číslo na mobil, zvolte jako operátora T-mobile a klikněte na POTVRDIT.
    2. Dojde k přesměrování na T-mobile portál, potvrďte zde svůj souhlas s podmínkami platby.
    3. Pokud máte na T-zones účet, přihlaste se a pokračujte bodem 7.
    4. Pokud účet na T-zones nemáte, vepište do formuláře svoje mobilní číslo a klikněte na ODESLAT ČÍSLO.
    5. Přijde Vám SMS zpráva s kódem.
    6. Vepište kód jako heslo do formuláře a klikněte na PŘIHLÁSIT.
    7. Objeví se Vám údaje o platbě, které potvrďte kliknutím na tlačítko ZAPLATIT.
    8. V té chvíli proběhne platba, o jejímž výsledku Vás informuje došlá SMS zpráva.
    Pro úspěšnou realizaci platby je nutné mít aktivní službu „M-platba“. Služba je většinou aktivní automaticky, takže není třeba nejdřív nic aktivovat.
  2. Platit kartou 30 Kč

    Platba kartou. Pro započetí platebního procesu prosím vyplňte kontrolní kód a stiskněte tlačítko "Zaplatit"

    Po proběhnutí platby budete přesměrováni zpět na tuto stránku, kde najdete odkaz ke stažení práce.


    Po odeslání kontrolního kódu budete přesměrováni do platební brány GP webpay, kde zadáte údaje potřebné pro platbu. Platbu dokončíte stisknutím tlačítka "ZAPLATIT".

    Akceptované karty: VISA, VISA Electron, V PAY, MasterCard, Maestro.

  3. Koupit za kredity - 25 Kč >>> ZVÝHODNĚNÁ CENA!
    Jedním stiskem tlačítka, obratem a za výhodnou cenu!
    JEN PRO REGISTROVANÉ UŽIVATELE
    Cena za stažení je pouze 450 kreditů (=25Kč).
  4. Platit převodem z ČSOB a Poštovní spořitelny, službou PaySec 25 Kč >>> ZVÝHODNĚNÁ CENA!
    Rychle, bezpečně a pohodlně.
    Zaplatit za tuto práci přes PaySec >>> Kliknutí na odkaz Vás přesměruje do platebního rozhraní
    Kliknutím na ikonku Vás přesměrujeme do platebního systému, kde si vyberete převod z ČSOB, Poštovní spořitelny nebo platbu PaySec
  5. SMS platba (Slovensko) - 1,20€
    Stahovací kód k této práci získáte do několika minut se službou mobilního operátora Premium Rate SMS.
    Zašlete SMS zprávu ve tvaru: SEMmezera30331
    - na telefonní číslo: 8877
    Cena jedné SMS je 1,20€ včetně DPH. Pro využití SMS platby je třeba mít aktivovanou službu Premium Rate SMS. Službu technicky zajišťuje Advanced Telecom Services, s. r. o.
    SMS musí být ve formátu TEXT, bez diakritiky a bez formátování (tj. základní velikost a typ písma). Stahovací kód je použitelný pouze pro tuto práci a je platný až do uzavření okna internetového prohlížeče.
    Stahovací kód přijde obratem na mobil, je platný 24 hodin a lze jej zadat celkem dvakrát.
    Pro stažení této práce zadejte stahovací kód (bez uvozovek):


Důležité informace: Provedením mobilní platby, odesláním SMS, platbou kredity, platbou kartou, PaySecem nebo převodem z účtu souhlasíte s Podmínkami stahování.
Veškeré informace o platbách si můžete přečíst zde.
Máte při placení nebo stahování práce problém? Odpovědi na časté problémy najdete zde nebo kontaktujte naší podporu.

Diskuse