Jak nastavit layout na Blog.cz

14. dubna 2013 v 15:36 | Aria Eldorant von Eibersfield |  Co chci říct
Slíbila jsem to a tak jsem se pustila do screenování :-) Je to nastavení mého posledního layloutu, berte to jako příklad ;) Každý layout je jedinečný a zasluhuje si své vlastní nastavení :-)) Tak, posilním se sachrdotem a můžteme začít, co říkáte? :-)

Mým záměrem je příblížit vám použití volitelných boxů, jelikož moje layouty jsou tvořené s účelem jejich využití. Nejsem si ovšem jistá, že už všichni objevili nač se taková věcička dá vlastně použít. A nebudu dělat chytrou, vždyť i já se o jeho možnostech dověděla teprve nedávno :-)

Obrázky zvětšíte kliknutím :-)

První věcí je, samozřejmě Nastavení, administrace blogu, díky níž je možné všechno to, o čem chci mluvit :-)
Zvykla jsem si design nastavovat od Stránky, je to tak podle mě přehlednější a navíc toho je zde na nastavování nejvíc :-)



Přeskočila jsem nastavení Písma, to dělejte dle svého nejlepšího uvážení a estetického talentu :-)
Nejdůležitějším parametrem je Šířka (dříve šířka stránky), která udává, hádejte co, šířku stránky :-) Většina mých layoutů je tvořena na stránku o šířce 1000 px, protože je stále nejčastějším rozlišením monitoru 1024x768, takže aby to bylo pěkně na celou stránku :-) Jak jste si všimli používám jako jednotky pixely. Layout je pak stejný ať už máte jakékoliv rozlišení a nerozhází se (jako např. u procent).

Kde ovšem najdete 100% rozměr stránky, na který jsem layout tvořila, je ve stažené složce. Stačí kliknout na obrázek, který příjde umístit do stránky. V mých layoutech bývá většinou pojmenován jako hlava nebo záhlaví a nebo volitelný horní box (já vím, mystifikuju :D ono to totiž do záhlaví vůbec nepatří :-))

A stále jsme v nastavení stránky. Další věc co nás zajímá je Vnější okraj. Je to dost pitomě pojmenované, ale ve zkratce jde vlastně o výplň stránky. Ano, vidíte dobře, právě sem patří obrázek, který by jinak (v jednoduších designech) patřil do záhlaví. Ale bohužel, jelikož máme v tzv."záhlaví" navrhnuta tlačítka, což klasické administrativní záhlaví nepodporuje, musíme si poradit jinak. (viz Volitelný horní box, Záhlaví) Všímejte si také zarovnání. Většina mých layoutů je v této části zarovnaná Nahoru a Uprostřed, zadáno Neopakovat (nechceme tam ten obrázek milionkrát, že? :-)) Důležité je zaškrtnout Posouvat, aby nám stránka po scrollnutí dolů pěkně odjela :-)

A konečně pozadí. Sem patří tzv. okraje stránky, neboli Pozadí, po kterém se bude stránka posouvat. Vidíte, že zarovnání zůstalo stejné, jen Uchycení se změnilo na Uchytit, aby motiv zůstal pěkně na místě a neutíkal nám nahoru :-)
Pozor! Nezapomeňte nastavit barvu okrajů, ta se bude zobrazovat všem, které mají větší rozlišení. Nechcete přece aby se vašim milovaným návštěvníkům váš krásný bělostný blog rámoval šeredně černým pozadím ;) Vysoce doporučuji otevřít si obrázek do Pozadí stránky v nějakém grafickém programu, který umí nabrat barvu kapátkem a ukáže vám její HTML (např. Photoshop, GIMP), tu pak jen zkopírujete a vložíte do blogu :-)

Krátce navštívíme Záhlaví. Jak jsem už řekla, neposkytuje nám možnosti, které potřebujeme a tak ho prostě opustíme s odkliknutím Nezobrazovat.

Teď mrkněte do Položek v menu. Já používám zásadně jen Volitelný menu box a do něj si hážu všechno co potřebuji. Ale ostatní položky jsou čistě na vás.

Jakmile uložíte v Položkách v menu Volitelný menu box, můžete do něj překliknout a umístit sem obrázky, popisky, videa, odkazy, apod. Dávám přednost zarovnání na střed.
Pozor! Pokud používáte Volitelný menu box, doporučuji nemít v Položkách v menu Rubriky. Do volitelného boxu pak jenom umístěte odkazy do jednotlivých rubrik (ty najdete, když napíšete za vaši homepage "/rubriky" bez uvozovek. Odkazy na rubriky avšak většinou zakomponovávám do "hlavy" a proto si doporučuji nastudovat tvorbu rozcestníků.

A konečně jsme ve Volitelném horním boxu. Vetšinou používám nastavení na Plnou šířku (podle layoutu), je pak přes celou stránku. Volitelný box nám kryje prostor, kde se nám ve falešném záhlaví ukazuje obrázek. Využíváme ho proto jako druhou, průhlednou vrstvu a umístíme do něj průhledné png obrázky, které jsou součástí layoutové složky. Doporučuji si otevřít screen nastaveného blogu (ve složce), abyste věděli jak skládat průhledná png za sebou. (V layoutu Don't tell anyone jsou vloženy v pořadí Homepagea->Homepageb->O mně->Tvořím->Píšu->Recenzuji->Jiné)

Vidíte? Když průhledné png natáhnu myší, uvidíte jak se poskládaly.

Když označíte jeden z průhledných png obrázků a kliknete na odkaz, vložíte adresu, kam chcete, aby obrázek odkazoval, v tomto případě na homepage.

A konečně Zápatí. Jediné co nás tu zajímá je jeho Výška, což zjistíme opět ve složce (viz Šířka) s obrázky layoutu. A další věc, k Pozadí patří vložit... obrázek pozadí :D Všimněte si zarovnání Dole->Uprostřed->Neopakovat. A Uchycení Posouvat.

Tak tento vyčerpávající tutorial je hotový. Je určitě spousta věcí, které jsem ještě zapomněla, ale to důležité myslím bylo řečeno. Nastavování se zdá složité, ale jakmile pochopíte princip, je s ním radost pracovat :-)

Doufám, že vám tento tutorial pomůže třeba i při nastavování vašich vlastních layoutů :-) A na závěr bych sem ráda umístila odkaz na MAKY, díky jejímž tutoriálům jsem se toho tolik naučila http://zkusdess.blog.cz/ :-) A pokud vás zajímá jak nakonec ukázkový design vypadá nastavený na blogu, tak screen najdete tady.

Pokud máte nějaký dotaz ohledně nastavování, nezdráhejte se zeptat :-)

Aria
 

3 lidé ohodnotili tento článek.

Komentáře

1 christinaaguilera-cz christinaaguilera-cz | 23. srpna 2013 v 17:51 | Reagovat

Super moc mi to pomohlo :)

2 infection-1d infection-1d | Web | 13. října 2013 v 8:47 | Reagovat

Ahojky, mohla by jsi mi ten Layout nastavit, nebo s ním, pomoc? :)
Mě to nejde.. :) Dělám to poprvé, a vůbec, nevím, co kam patří.. :)
Moc, Děkuji.. :)

3 Starodávná Starodávná | Web | 20. dubna 2014 v 21:58 | Reagovat

Ahoj, teď se trochu peru s layoutem. Vše je úplně v pohodě, akorát mám bílé pozadí. Obrázek tam je, jen tam je prostě bílo a nevím, jak prostě nastavit, aby to bylo průhledné, ne bílé. Když tak se podívej na blog, jak to tam mám... Jinak prosím, pomoz... :)

4 bezjidla bezjidla | Web | 11. června 2014 v 11:52 | Reagovat

Absolutně mi nejde udělat to jiné menu-rubriky. Mám pro ně vytvořenej i obrázek v tom volitelným, ale nejde mi dávat pod ty obrázky odkazy na ty články v té které rubrice. Je pak prostě v menu obrázek s tou rubrikou a pod ní je odkaz s celou adresou tý rubriky a články. nevím kde dělám chybu...tvořit odkazy jinak umím! :-( a ani tvorba toho pozadí na stránku mi nevyšla tak jak by měla..asi jsem holt debil

5 ellys-story ellys-story | 23. října 2014 v 16:25 | Reagovat

Uděláš to prosím za mne?Já ti dám heslo....

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