Jak nastavit design / layout 1

13. července 2013 v 14:40 | MAKY.OREL |  Návody
Poslední dobou se setkávám čím dál častěji ani ne tak s problémem vytváření, ale nastavování lay-outů na blogy. Já jsem byla vždy velice tichá a skromná dívka. Nikdy jsem se na nic neptala a vše zjišťovala na vlastní pěst. A tak mě život naučil velice důležité vlastnosti - praktickému myšlení a vhledu do věci. Když se trochu soustředím, dokážu tuto schopnost dokonce používat. A tak abyste se už nadále nemuseli ptát, jak to že mám v záhlaví odkazy a že ten nápis je támhle, tak mám pro vás malý babský návod, jak si nastavit i ten sebesložitější design bez znalosti webových jazyků za to s precizností mistra. A naneštěstí bude zase na díly.



Základ všeho

Co musíte vědět naprosto bezpodmínečně při nastavování designů? Je to pár omezení, které blog "nabízí". Nezapomínejte na to, že jsme stále na blogu a ne na webu, takže blog sice může jako web vypadat ale né fungovat. Nuže co nám nastavení blogu dává a bere? (Obrázky zvětšíte kliknutím!)

1, Kombinace položek neopakovat a fixovat u nastavení zarovnání obrázků v pozadí stránky a okrajů způsobí, že text bude rolovat po pozadí.


Když budeme mít následující nastavení nahoře...


... lay-out bude vypadat takhle.


A když nastavení trochu změníme...


... stane se tohle.


2, Nepoužívejte procenta při nastavování velikostí - ovlivňuje to velikost designu na různých velikostních typech obrazovek. Naneštěstí spíše negativně. Zafixujete-li pozadí stránky i okrajů na stejnou stranu a velikosti všech prvků udáte v pixelech, zůstane rozvržení designu naprosto stejné na všech typech obrazovek a tudíž všichni čtenáři už nebudou muset popotahovat okna svých prohlížečů, aby jim váš design konečně sedl.


Nastavení v pixelech - nahoře / a v procentech - dole



3, Nevymýšlejte nereálné designy! Jsou určité kombinace prvků, které buď nejde vytvořit nebo je to mravenčí práce pro experty. Například při použití obyčejného menu místo vol. menu boxu nemůžete manipulovat s umístěním boxu (po vertikále tedy posouvat nahoru dolu). Tudíž bude vždy přesně pod záhlavím hned vedle stránky. Pouze vol. menu box můžete libovolně odentrovat. A další za všechny je třeba, že mezi jednotlivými řádky je při určité velikosti písma určitá mezera - buď ta nebo enter, ale jinou velikost si tam nenavolíte - počítejte s tím pokud si do designu chcete udělat hodně různých oken na vaše cinty. A nebo že pokud budete mít fixní okraje stránky a budete mít kolem boxu pro text stránky široké okraje, které budete chtít rolovat, tak nemáte šanci, protože kolem textu stránky je jen asi 10 - 20 pixelová mezera pro nějaké rolující se výmysly.




4, Musíte umět kombinovat prvky nastavení. Zkrátka když chci mít text v záhlaví, tak musím dát záhlaví nad menu a vedle umístit vol. hor. box. Když nechci, aby menu bylo nekonečné, tak si ho udělám jako odkazy umístěné ve vol. hor. boxu a hned pod tím bude stránka v plné šíři. Když potřebuju mít začátek menu nad úrovní začátku stránky, musím si dát záhlaví jen do oblasti nad stránkou a menu si udělat vedle něj a vytvořit ho do vol. menu boxu atd. atd. Prostě musíte umět používat vše, co blog nabízí. Musíte to umět zkombinovat tak, abyste mohli design použít. A k tomu všemu musíte taky umět jisté umění kompromisu.



5, Volitelný dolní a horní box mají pozadí shodné s pozadím stránky! Vol. menu box ho má shodné s pozadím menu - při zrušení pozadí menu je pak jeho pozadí shodné s pozadím stránky. Totéž u volitelné horního boxu - obrázek, který bude tvořit pozadí stránky bude i ve vol. hor. boxu.
6, Pokud si chcete mezi stránkou a záhlavím udělat prázdnou mezeru pomocí volitelného horního boxu nebo motta, kam nic nenapíšete, nemáte šanci. V editoru musí být vždy alespoň jeden znak (stačí i tečka) - teprve potom si můžete odentrovat mezeru libovolné velikosti a znak obarvit tak, aby nebyl vidět.
7, Pokud si zadáte nějaký údaj do položky okraje stránky a např. levý, tak to znamená, že se vám celé pozadí stránky posune do leva, nikoli že se vlevo ořízne! Ze začátku mi to ne a ne dojít :)


To je jen malý výčet, který mě tak napadá z hlavy... Je toho jinak mnohem víc, ale to už odhalíte sami při práci.

--------------------------------------------------------------------------------------------------------------------------


Odkazy v záhlaví

Začnu úplně nejpalčivějším dotazem, který je taky nejobsáhlejší na vysvětlování. Už jsem ho jednou probírala, ale tentokrát to vezmeme ještě podrobněji. Má jednoduchý princip, zdlouhavou výrobu a maximální efekt. Jeho využití záleží čistě na vaší fantazii a schopnosti skloubit myšlenky s realitou. Já vám s tím do začátku trochu pomůžu.
Nuže příklad za vše je můj design. Byl vyroben účelově právě díky tomu, že jsem sama experimentální cestou vyřešila, jak si "rozklikat" záhlaví. Každá šipka má svůj odkaz a strom má adresu HOME. Teď si probereme kus po kousku jak to vznikalo, nastartujte photoshopy (photofiltry na to, co vím, jsem koukala nemají vybavení, ale Gimp jsem teda nezkoumala)! Jdeme na to:

1. Dejme tomu, že si celou výrobu ukrátíme - představte si, že design už je hotový. Máte připravený jeden obrázek, který bude fixní (beru to podle mého dessu - ok?) - v nastavení bude v pozadí stránky a ani se nehne. V mém případě vypadá takhle:


Pak máme druhý obrázek - ten je ořízlý a bude v nastavení jako pozadí vnějších okrajů stránky (nikoli pozadí záhlaví) a bude se po scrollnutí myši rolovat nahoru. V mém případě je to toto:


Oba obrázky jsou mírně upravené v PC, aby správně seděli. Jinak jsou kreslené, takže u nich bude jisto jistě docházet k odchylkám v nastavení a tu a tam budeme muset přidat nějaké okraje nebo jinak posunout stránku. Každopádně jsou celistvé - vůbec je nerozřezávám, nic. Takže je nastavíme podle jednoduchého klíče - první obrázek tedy patří do pozadí okrajů stránky (barvu okrajů stránku můžeme zrušit, ale nemusíme) pokud budete chtít, aby se motiv neopakoval a text jel po stránce bude vždy nastavený jako zarovnaný nahoru a pak do leva do prava nebo na střed podle toho jak je vyrobený, a pak neopakovat a fixovat. Druhý obrázek v pozadí stránky má nastavení shodné s okraji - nahoru, vybrat stranu, neopakovat ale pak rolovat. Čímž zaručíme že odjede nahoru. Poté možná bude nutné zadat nějaký údaj do okrajů stránky aby jste pozadí stránky přesně posadili do okrajů. To byste měli sami zvládnout bez jakýchkoli rad!

2. Je-li design prozatímně nastavený tak, aby pasoval, budeme pokračovat (pamatujte že při složitějších lay-outech je dobré mít vlastní zkušební blog - když se něco podělá neodnesou to vaši čtenáři). Otevřete si váš grafický program. Do něj si otevřete váš design - celý nerozřezaný design, který má pozadí stránky i okraje (vždycky si pro jistotu ukládám za 1. celý design, 2. okraje a za 3. z toho celého designu dodatečně zkopíruju pozadí stránky - takže mám 3 obrázky). Je to lepší pro přehled. OK. Já mám otevřený svůj krakonošský a teď jedu - plochu, kde budou odkazy, si rozvrhnu na dílčí části - pět šipek a strom. To znamená, že ve finále budu mít šest odkazů.

Tak teď to rozdýchám, protože od téhle chvíle vás do toho nesmím moc zamotat jinak to nepochopíte.
Takže vysvětlím vám, co chceme dostat. Chceme šest okýnek, které vložíme do vol. hor. boxu a uděláme z nich klikací ikony (jde to dvěma způsoby: pomocí všude známého HTML kodu nebo úplně stejně jako když děláte odkaz z textu). Ta okýnka tam musí správně sedět, proto to musí být takové obrázky, které pokud možno nebudete muset po vložení posouvat a odentrovávat apod. Proto je budeme dělat větší, než je potřeba, ale to až za chvíli.

Kdyby někoho z vás napadlo si celou stránku mého blogu označit, příjdete na to, že "uvnitř" vlastně vypadá takhle (díky tomuto triku jsem odhalila nejednu vychytávku grafického světa - učte se výběrem!):


Vidíte? Šest oken (a pod nimi už je stránka). Udělané tak, aby se po vložení nemuseli posouvat a pasovali přesně do šířky stránky. Jak ty okna uděláme? ...

3. Pokračujeme - máme otevřený celý design. Teď pomocí obdelníkového výběru (kdyby jste zvolili třeba elipsu výsledný soubor stejně bude obdelník...) vybereme první okno pro odkaz. Já si vyberu strom, protože je největší. Teď si musíte představit, kde vám začíná vol. hor. box, třeba nad ním máte ještě záhlaví... vy ale musíte vybrat jen tu část obrázku, která bude ve vol. hor. boxu. Teď dáte klávesovou zkratku pro kopírování CRTL+C a na horní liště dáte Soubor - Nový - a pokud jste zmáčkli správně, bude tam již připravená velikost. Základem úspěchu teď je, abyste před klikem na OK zatrhli položku průhledný:


4. Máte nový soubor - s tím nebudeme dělat nic. Bude prostě prázdný. Teď stačí tenhle soubor uložit jako formát PNG. Což vám zaručí, že zůstane průhledný a nebude bílý.
5. Tohle uděláme se všemi okny pro odkazy. Pokud budete mít okna pod sebou, není nutné je dělat moc velké - můžete je udělat opravdu přesně na míru jen na místo, kde odkaz bude. V mém případě bylo jednoduší soubory dělat velké, protože je budu skládat vedle okna stromu a to by byl trochu problém, kdyby byly okna na míru šipkám, které mají být jako odkazy.
6. Okna jsou připravené - je dobré si je popsat podle místa kam příjdou, protože u obrázku bez obsahu je těžké zjistit kam patří - já si je popisuju názvem stránky, kam budou odkazovat. Teď z nich uděláme odkaz... Buď je nejdříve všechny vložíte do vol. hor. boxu, klikneme na jeden a pomocí ikonky řetízku (přidat odkaz) z něj uděláme odkaz stejně jako to děláte s textem. A druhý způsob... použijeme náš známý kód (URL adresa obrázku se získá tak, že si na obrázek kliknete pravím tlačítkem myši a dáte, myslím že úplně dole, Vlastnosti - pokud máte Google Chrome tak se vám tam rovnou objeví možnost kopírovat URL adresu obrázku):

<a href="URL adresa obrázku" target=""><img src="URL adresa obrázku" alt="" /></a>

Obrázky vložíme pouze do galerie, nikoli do text editoru ve vol. hor. boxu. Teprve poté si otevřeme vol. hor. box a dole si zatrhneme, že chceme přepnout do HTML (pro přepnutí zpět do normálního textu stačí opětovný klik):


Vložíme tam náš kód a vyplníme ho. Když jich tam takhle za sebou nafrkáme všech šest a přepneme do režimu textu, budeme mít všech šest okýnek a všechny budou odkazovat do dané rubriky nebo článku. Pokud se obrázky nenaskládali podle vašich představ, opatrně, abyste to moc nerozhodili, si je popřesouvejte.
7. Uložte a užívejte - nezapomeňte pod odkazy případně trochu odentrovat, aby se vám stránka nelepila hned pod ně.

Co dál napsat? Stejným způsobem si můžete vyrábět i nápisy nebo ikonky pro spřátelené blogy, což se hlavně u fanouškovských stránek vrací do mody. Dá se takhle manipulovat s jakýmkoli obrázkem, který budete chtít mít v záhlaví popř. ve vol. menu boxu. Pro správné zasazení jednotlivých okýnek odkazů můžete také využívat tabulek - v text. editoru blogu si vytvoříte tabulku a teprve do ní vkládáte obrázky, ze kterých následně uděláte odkazy. Já to ve chromu pořád nějak neumim udělat, ale v exploreru by to neměl být problém. Pomoc tabulek vám především zaručí, že se vám obrázky nebudou samovolně rozskakovat.

Doufám, že jste vše pochopili (ano, někteří nepochopili - bylo jich bohužel dost - já za to neodpovídám, neboť kdo četl, přemýšlel a vyzkoušel, tak to pochopil). Takže obávám se, že až v dalším článku půjdem dál. Co vás určitě čeká? Jak si v menu udělat dílčí boxíky s nadpisy, což už tu opět jednou bylo, takže to ještě promyslím zda to má cenu, a nebo taky ještě takové dodatky o práci s vol. hor. boxem, a hlavně o textu v něm, pro neumětely.
Trochu mi dochází nápady, ale určitě je toho víc, co vám kdy vrtalo hlavou. Tak prosím, máte-li nějaké nápady, o čem chcete vědět, jak se to dělá, tak napište do komentářů a v příštím článku se to určitě objeví!
 

1 člověk ohodnotil tento článek.

Komentáře

1 Dena Hviezdička Dena Hviezdička | Web | 13. července 2013 v 14:52 | Reagovat

Ale pekné dessy si vybrala na ukážku.

2 Tendy Tendy | E-mail | Web | 17. prosince 2013 v 15:07 | Reagovat

Moc Ti děkuji za info. Dostala jsem na starost už dlouho spuštěný blog, a nechci původní majitelce udělat z blogu něco jiného, tak jsem se rozhodla jít stejně s ní... moje znalosti v oblasti Blog.cz ovšem nesahají tak daleko, takže Ti vážně moc děkuji za rady, =)

Nový komentář

Přihlásit se
  Ještě nemáte vlastní web? Můžete si jej zdarma založit na Blog.cz.
 

Aktuální články

Reklama