Dokumentace k ročníkové práci 1) Cílem mé práce bylo udělat webové stránky splňující všechny požadavky zadání ročníkové práce. Zároveň jsem se však snažil lidem sdělit, o čem je hra Counter-Strike: Source, a pomoci jim ji zprovoznit pomocí download linků a rad. Také jsem se snažil, aby stránky nepůsobily „přeplácaně“, aby byly vhodně zvoleny barvy a aby člověka zaujaly. Zvolil jsem layout s fixní šířkou obsahu, vedle kterého nalevo plave menu a napravo anketa, či okno pro vzkazy. Samozřejmě nechybí hlavička ani patička. Celý web jsem pak zabalil do blokového kontejneru, kterému jsem dal také fixní šířku a automatické okraje nalevo i napravo. Tento layout jsem zvolil, protože se mi líbí jeho jednoduchost a efektivnost.
Myslím si, že svého cíle jsem dosáhl tím, že jsem vhodně zvolil barvy, dále jsem se snažil text psát co nejvíce z hlavy a aby mu šlo co nejvíce porozumět. Řekl bych, že menu dokáže zaujmout, taktéž i úvodní stránka. Doufám, že i požadavky jsem splnil podle vašich představ… .
2) Největší problém jsem měl s menu. Původně jsem menu okopíroval z této stránky. Měl jsem v plánu pozměnit zde barvy, roztáhnout ho a vložit zde span, ve kterém by se při najetí myší na položky měnily obrázky. Brzy se mi však celé menu nějakým nedopatřením rozsypalo, tak jsem si řekl že si udělám menu celé svoje. To se mi povedlo pěkně, avšak byl zde problém při zmenšování okna… . Tento problém zde byl proto, že span, ve kterém se promítaly při hoveru obrázky jsem napozicoval pomocí left a top tak, aby byl přímo pod menu. Když jsem však zmenšil okno prohlížeče span mi překrýval text, jelikož si držel svou pozici. Až do teď jsem nepřišel na to, jak to udělat, ale nechtělo se mi celý span zrušit. Takže jsem mu dal pozici left: 0; right: 0; margin-top: 125px;, tak aby se držel na spodu hlavičky a marginleft:27%, takže by neměl překrývat obrázek hlavičky. Ještě je škoda, že IE nepodporuje z-index, takže se obrázek při hoveru nahoru nemění. Tento problém pořád pokládám za nevyřešený, protože jsem nedokázal udělat to co jsem od začátku chtěl. Poté už jsem měl jen menší problém s layoutem, jelikož mi dlouho trvalo přijít na to, že celý web musím dát do divu, kterému dám šířku a automatické okraje. Předtím jsem dával automatické okraje obsahu, a nevěděl si s tím rady, jak ty plovoucí divy napozicovat napevno k obsahu… . Avšak naštěstí se mi v hlavě rozsvítilo a tento stupidní problém jsem po necelé hodině konečně vyřešil. 3) Změny ve vykreslování při přepnutí do režimu zpětné kompatibility se projevily pouze v prohlížeči Internet Explorer, v Mozille Firefox žádné nebyly. První změnou bylo to, že se celý web posunul ze středu do leva. Zjistil jsem však, že existuje hack, kterým tuto nedokonalost IE vyřeším. Takže jsem dal body: text-align: center; a do divu, kde mám celé stránky jsem dal text-align: left;. Tento hack jsem musel použít proto, že starší verze IE nepodporují automatické okraje a vlastnost text-align aplikují i na blokové elementy. Druhá změna byla v tom, že se mi zvětšilo kompletně celé menu (nejen obrázky, ale i text a mezery). Jako třetí věc jsem zaznamenal posunutí patičky o pár pixelů doprava. A poslední změnu bylo zvětšení zdvojení rámečku spanu.
Normální režim
Režim zpětné kompatibility
4) Zdrojový kód menu+popis řešení Homesite
CSS #menu { font-size: large; float: left; width: 160px; background-color: #838787; height: 210px; border: 3px solid black; } #polozky { padding: 0; margin: 0; } #polozky li { list-style: none; background-image: url(obrazky/But3a.jpg); background-repeat: no-repeat; margin-left: 4px; margin-top: 5px; } #polozky a { display: block; text-decoration: none; color: Black; text-align: center; width: 99%; } #polozky a span { position: absolute; height: 152px; width: 152px; background-image: none; z-index: 1; top: 0; left: 0; margin-left: 27%; margin-top: 73px; border: 1px solid black; } #polozky a:hover { background-image: url(obrazky/But3c.jpg); background-repeat: no-repeat; } #polozky li.aktivni { background-image: url(obrazky/But3b.jpg); background-repeat: no-repeat; } #polozky li a span#zaparit.aktiv { background-image: url(obrazky/zaparit.cz_menu.jpg); z-index: 0; } #polozky li a span#foto.aktiv { background-image: url(obrazky/foto_menu.jpg); z-index: 0; } #polozky li a span#index.aktiv { background-image: url(obrazky/index_menu.jpg); z-index: 0; } #polozky li a span#css.aktiv { background-image: url(obrazky/css_menu.jpg); z-index: 0; } #polozky li a span#download.aktiv { background-image: url(obrazky/download_menu.jpg); z-index: 0; } #polozky li a span#ome.aktiv { background-image: url(obrazky/ome_menu.jpg); z-index: 0;
} #polozky li a span#projekt.aktiv { background-image: url(obrazky/oprojektu_menu.jpg); z-index: 0; } #polozky a:hover span#projekt { background-image: url(obrazky/oprojektu_menu.jpg); z-index: 1; } #polozky a:hover span#css { background-image: url(obrazky/css_menu.jpg); z-index: 1; } #polozky a:hover span#index { background-image: url(obrazky/index_menu.jpg); z-index: 1; } #polozky a:hover span#zaparit { background-image: url(obrazky/zaparit.cz_menu.jpg); z-index: 1; } #polozky a:hover span#ome { background-image: url(obrazky/ome_menu.jpg); z-index: 1; } #polozky a:hover span#download { background-image: url(obrazky/download_menu.jpg); z-index: 1; } #polozky a:hover span#foto { background-image: url(obrazky/foto_menu.jpg); z-index: 1; } #menu a:hover { position: static;}
Popis řešení Nastavil jsem velikost textu na large. Poté jsem si upravil obrázky tak, aby pokryly jednu celou položku. Všem položkám jsem dal do pozadí šedý obrázek. Poté jsem jim dal na hover stejný obrázek, akorát s zelenou barvou. V Homesitu jsem si dal do třídy vždy tu položku, jejíž jsem zrovna editoval stránku. Např. editoval-li jsem stránku ome, dal jsem položce ome třídu s názvem aktivni. Do Homesitu jsem pro celou tuto třídu dal opět stejný obrázek, akorát s oranžovou barvou. Do každého tagu
v seznamu jsem vložil prázdné spany a každý jsem jinak pojmenoval. Poté jsem nastavil hover při najetí na položku tak, aby se ve spanu objevil obrázek s z-indexem 1. Nakonec jsem ještě spanu přidělil třídu aktiv- stejným stylem jako u položek třídu aktivní. Té jsem nastavil pozadí tak, aby zůstal ten obrázek, v jehož sekci se zrovna nacházíte. Z-index jsem nastavil na nulu, aby při opětovném hoveru aktivní obrázek nepřekrýval ten na který je najeto. Poté už jsem jen vyřešil viz. Č.2- Problémy. Dále si cením objektů, které jsem však neudělal úplně sám (počasí, svátek, den, počítadlo, ankety, návštěvní kniha). Tyty objekty jsou většinou okopírované ze stránek, kde byly už hotové, nebo jsem je dělal přez ulehčující programy.
Zdroje Zdroje textu http://www.zaparit.cz/hry/online-hry/counter-strike-source http://www.web-recenze.cz/recenze/pocitacove-hry/3315.htm Převážně z vlastní zkušenosti… Zdroje obrázků http://www.google.cz/images?um=1&hl=cs&tbs=isch%3A1&sa=1&q=co unter+strike+source+screen&aq=f&aqi=&aql=&oq=&gs_rfai Vlastní obrázky přímo ze hry (screeny). Zdroje objektů http://blueboard.cz/ http://toplist.cz/
Validace HTML index css zaparit.cz download foto ome projekt CSS countstrike.xf.xz Stránky naleznete na zde. Vlastní zhodnocení Podle mého názoru jsou stránky docela povedené, zajímavé i obsáhlé. Jediné, co bych si vytkl, je span, který nemá pevnou pozici. Jinak si však myslím, že jsem splnil všechny požadavky, které nám pro naši ročníkovou práci byly dány.
