Z minulých dílů (1., 2., 3.) máme připravenu strukturu stránky a můžete mi začít hrát se vzhledem. Profesionální webový grafik by asi řekl, že vzhledem tvorba stránek začíná. V Photoshopu nebo Inkscape, že připravíme celkový vzhled a na ten pak napasujme kód stránky. Já ale nejsem webdesignér ani neovládám html, php, css, javascript apod. Takže postupuji způsobem který zvládnu.
Úvodem bych chtěl provést drobnou úpravu. V minulých dílech jsem hlavičku (logo) stránky umístil v kódu dovnitř divu „obal“. To teď napravím protože k tomu není důvod a bránilo by mě to v dalších úpravách co jsem chtěl v budoucnu provádět. Takže v html umístíme vše co se týká divu „hlavička“ před začátek divu „obal“. Z toho důvodu pak musíme upravit ve stylech její umístění přidáním do její deklarace
margin: 0 auto 0 auto; /*Odsazení - zhora 0, z prava automaticky, zdola 0, zleva automaticky (zprava a zleva automaticky mi stránku vystředí) */
A teď již k další tvorbě.
Pozadí hlavičky
V Gimpu si tedy začnu připravovat pozadí pro hlavičku. Zvolím stejnou velikost obrázku jako velikost hlavičky, takže 900×240. V úvodu prvního dílu jsem psal, že výsledkem mají být stránky o sériových vrazích, takže jako základ volím vlastní fotku uschlého listu:
Jako symbolický objekt umístím do hlavičky Lišaje Smrtihlava (můra co má na zádech útvar připomínají lidskou lebku – je např. na přebalu filmu Mlčení jehňátek). Na internetu je volně ke stažení celá řada jeho fotografií. Otevřeme foto v Gimpu a pokusíme se odstranit z fotografie vše co s můrou nesouvisí pomocí funkce přibližný výběr
Co zůstalo odstraníme pomocí gumy. Pro další práci si však ponecháme můru i se stínem který vrhá! Ctrl+L si zobrazíme okno vrstev. Pomocí stejné funkce dáme znovu vybrat (tentokrát se nám již vybere vše krom můry a jejího stínu) a v menu – Vybrat – Invertovat, tím je vybrána můra se stínem. Výměr zkopírujeme do schránky (Ctrl+C) a dáme vložit (Ctrl+V). V okně vrstev se nám zobrazí nová vrstva nazvaná „Plovoucí výběr“. Klikneme na ni pravým tlačítkem a zadáme Nová vrstva. Jak vidíte je vše krom můry a jejího stínu průhledné (to jsou ty „kostičky“ :)). Vrstvu nazvěte např. „mura“. Opět přes pravé tlačítko tuto vrstvu duplikujeme (K duplikované vrstvě se vrátíme za chvíli – můžete ji zatím nazvat „stín“). Teď již smažeme i stín kolem můry (postupujeme pečlivě – na ty její chlupaté nohy pozor!). Můra je tedy hotova. Překlikneme se do vrstvy stín a dáme z menu – Barvy – Odbarvit. Po dokončení zajedeme do menu – Vrstva – Průhlednost – Barva do alfy. Ponecháme vybranou bílou barvu a potvrdíme. Pokud máte vrstvu „stín“ pod vrstvou „mura“ měl by výsledek vypadat takto:
Sloučíme vrstvy a výsledek zkopírujeme a vložíme do souboru s listím. Opět jako novou vrstvu. Podobný postup provedu s dalšími prvky které chci v hlavičce mít. V tomto případě, ještě zakrvácenou ruku, krvavou skvrnu a kresbu lebky. Všechny tyto prvky postupně upravuji pomocí Škálování, Rotace, Překlápění a Perspektivy do takové pozice a tvaru, který požaduji. Na závěr ještě přidám průhlednou vrstvu kde vytvořím černý rámeček a pomocí Filtry – Rozostření – Gaussovské rozostření ho upravím.
Výsledný soubor uložím jako hlavicka_pozadi.jpg. Zdrojový soubor ve formátu xcf si můžete stahnout: http://j0hn.hys.cz/wp-content/uploads/tutorialweb/tutorial-web-4.xcf.
Nápis
Připravíme si v Gimpu nový prázdný obrázek, v tomto případě o velikosti 300×100 pixelů. Další postup bude obdobný jako u pozadí. Pokud si nechceme tvořit písmo sami dá se na internetu sehnat celá řada fontů ve formě obrázků. Doporučuji obrázky ve formátu png nebo gif, ideálně již z průhledným pozadím. Pokud není – nevadí výběr jednotlivých písmen z obrázku provedeme opět za pomoci funkce „Přibližný výběr“ s přiměřeně nastaveným „Práh“
Písmena co potřebujeme vložíme do připraveného obrázku, opět pomocí Ctrl+V a ve vrstvách ji zadáme jakou novou vrstvu. V menu Vrstva – Změnit velikost vrstvy změníme její velikost, aby nám vyhovovala. To provedeme se všemi písmeny. Smažeme původní vrstvu a tím získáme průhlednost. Pokud máme všechna písmena seřazena jako potřebujeme sloučíme je v okně Vrstvy (pravým tlačítkem a Sloučit dolů). Budeme chtít k nápisu přidat i stín, proto si ponecháme z té strany kde ho chceme trochu místa. Protože chci nápis v bílé barvě dám z menu Barvy – Invertovat.
V okně Vrstvy dám přes pravé tlačítko myši duplikovat vrstvu. Tuto kopii vrstvy přesunu v okně Vrstvy pod tu původní. Opět u ní invertuji barvy a pomocí tlačítka Přesun ji posunu požadovaným směrem. Ještě můžu přes menu Barvy – Jas a kontrast, trochu zvýšit jas a přes menu Vrstva – Průhlednost – Barva do alfy, udělat stín trochu průhledný.
Výsledný soubor uložím jako napis.png (png abych udržel požadovanou průhlednost). Zdrojový soubor ve formátu xcf si můžete stahnout: http://j0hn.hys.cz/wp-content/uploads/tutorialweb/napis.xcf.
Úprava css, stíny u textu
Začnu tím nejjednodušším. Zbavím se zbytečné barevnosti a všude měním barvu pozadí na černu. Pouze u „Prostředního vnořeného sloupce“ dávám barvu pozadí bílou. Z toho důvodu musím samozřejmě u všech částí, kde chci mít písmo čitelné (Pravý a levý sloupec, hlavička a patička) změnit jeho barvu na bílou. Jak na to ukáži na příkladu Nastavení hlavičky.
V Nastavení hlavičky, ještě doplníme velikost a druh fontu kterým chceme psát tzv. podtitul. Abychom ho zvýraznili zvětšíme mu rozestup mezi písmeny. Takovou perličkou je doplnění stínu u textu (aby to vypadalo obdobně jako v obrázku napis.png) pomocí funkce text-shadow. Nevýhodou je, že pro Firefox a Chrome musíme udělat alternativní zápis a pod Internet Explorerem to nefunguje vůbec. Poslední úpravou bude doplnění pozadí hlavičky. Kompletní nastavení, včetně toho co jsem udělal v minulých dílech, tedy vypadá u hlavičky takto:
/* =============== Nastavení hlavičky =============== */ #hlavicka { letter-spacing: 0.4em; /*Zvětšení rozestupů mezi písmenky*/ color: white; /*Barva písma */ font-size: 9pt; font-family: Courier New; /*Velikost fontu, Druh fontu*/ width: 900px; /*Nastavení šířky */ background: black; /*Nastavení barvy pozadí */ background-image: url('hlavicka_pozadi.jpg'); background-repeat: no-repeat; /*Nastavení obrázku pozadí, bez opakování */ height: 240px; /*Nastavení výšky */ margin: 0 auto 0 auto; /*Odsazení - zhora 0, z prava automaticky, zdola 0, zleva automaticky (zprava a zleva automaticky mi stránku vystředí) */ text-shadow:-6px 6px 2px black; /*Stín textu - v pozici -6px vodorovně a 6px svisle od textu, s rozostřením 2px, černá barva. Pod IE nefunguje */ -webkit-text-shadow:-6px 6px 2px black; /*Stín textu - v pozici -6px vodorovně a 6px svisle od textu, s rozostřením 2px, černá barva - varianta pro prohlížeče s jádrem webkit */ -moz-text-shadow:-6px 6px 2px black; /*Stín textu - v pozici -6px vodorovně a 6px svisle od textu, s rozostřením 2px, černá barva - varianta pro prohlížeče s jádrem mozilla */ }
Úprava html
V tomto případě jen úprava hlavičky, do které přidáme obrázek s nápisem a nějaký podtitulek a to na námi zvolenou pozici
<div id="hlavicka"> <!-- Začátek hlavičky --> <h1> <!-- nadpis první úrovně začátek --> <img src="napis.png" style="margin-top: 50px; margin-left: 50px" alt="Sérioví vrazi" width="300" height="100"/> <!-- vloží obrázek napis.png, 50px od horního a 50px od levého okraje hlavičky --> <p><b>"Jsou tady a chodí mezi námi"</b></p> <!-- vloží tučný text--> </h1> <!-- nadpis první úrovně konec --> </div> <!-- Konec hlavičky -->
Úprava reklamních textů u free webhostingů
Pokud máme stránku na free webhostingu a nechceme, aby nám zobrazované reklamy kazili celkový vzhled stránky přidáme do stylů ještě zápis který změní veškerý text i odkazy na stejnou barvu jako má pozadí stránky (pozor zda tím neporušíte pravidla webhostingu)
/* =============== Základní vlastnosti stránky =============== */ html { height: 100%; /*Roztažení html na délku zobrazované stránky */ color: black; } a {text-decoration: none; color: black} /*odkaz; na černou barvu bez podtržení, vzhledem k černému pozadí těla stránky nebude reklama webhostingu kazit celkový design */
Po přidání do dokumentu z minulého dílu dostaneme následující výsledek: http://j0hn.hys.cz/wp-content/uploads/tutorialweb/tutorial-web-4.htm.
Komentáře