Jak nastavit design / layout 3

13. července 2013 v 15:10 | MAKY.OREL |  Návody
V minulém díle jsme začali od podlahy a vysvětlili si ten nejjednoduší způsob nastavování lay-outů. Je na čase pokročit dál a naučit se zase o trochu víc. Tentokrát nás čeká další lay-out a to se zarovnáním do strany. Jako bonus tentokrát bude nastavování popisků v menu. A nezapomeňte že pro zvětšení obrázků je stačí otevřít v novém okně nebo uložit ;-)



Příklad číslo 2. - Lay-out ve straně
Už jsme se tedy naučili jak si nastavit lay-out který je situován do středu. Co když ale chcete lay-out který je spíš na levo nebo pro změnu na pravo? Hm… ani to není problém - až na jednu drobnost je to totiž stále stejné. Začneme tedy naším lay-outem:

Tohle je on a opět má dvě hlavní části. Opět to budou vnější okraje a pozadí stránky - ovšem pozor přidáme si třetí část a to zápatí. Halt jste to někomu dělali na objednávku nebo zkrátka chcete, aby lidé věděli, že je to vaše práce. Takže co teď udělám? V předchozí části už jsme zjistili, jak si vyčistit pole, nuže odklidíme starý lay-out blogu pryč a zůstane nám tohle:


Záhlaví má 100 pixelů, barvy okrajů jsou vymazané taktéž barvy pozadí, ale hlavně zmizeli obrázky. Teď uděláme následující, že si do galerie nahrajeme všechny kusy lay-outu a budeme postupovat jako v předchozím díle až na pár změn.
Takže nejprve se podíváme na stránku. Otevřete si danou kartu v nastavení a už měníme… Pěkný ilustrační obrázek vám ukáže, kde všude to bude jiné a jak to bude jiné. Základním parametrem, který je nutné si uvědomit, je, že vše teď musím zarovnat do leva. Navíc stránka přímo nepřiléhá k okraji obrazovky - takže musím udělat následující: vytvořit si na levé straně okraje tak že do kolonky okraje - levá - napíšu nějaké číslo, zatím jen odhadem.


Co nám vzniklo? No není to tak hrozné, ale bude to chtít úpravu (viz. dole):


Takže co je špatně? Moc velký okraj vlevo takže budeme zmenšovat, moc malé záhlaví takže zvětšíme a upravíme velikost menu. Hrajeme si s čísílky tak dlouho dokud nám vše nesedne a nikde nebude nic čouhat. A výsledek poté je asi takový:


Než dojde na další opravy uděláme následující - vymysleli jste si (já ne! XD) že chcete vlastní popisky do menu, což znamená že musíte vytvořit volitelný menu box. Jak na to? Najděte kartu "Položky menu" v nastavení. Tam jsou dva sloupečky - jeden do modra druhý do šeda. Modrý je to co je aktivní, šedý je to co není. Klikem a tažením přesouvejte věci z boxu do boxu:


Uložit a je to. A ty popisky? Otevřete si položku volitelný menu box, která se objevila v nastavení a do boxu něco napište - nejlépe zarovnat na střed.



--------------------------------------------------------------------------------------------------
A teď poznámka: Když chcete mít ve volitelném menu boxu odkazy na rubriky, stačí, když si v položkách menu necháte mezi aktivními i okénko Rubriky. Dejme tomu, že máte rubriku PEPA, tak do menu boxu napíšete PEPA a uděláte z tohoto textu pomocí nástroje v liště odkaz - ten odkaz bude identický s URL adresou, která se vám objeví v prohlížeči po kliknutí na danou rubriku s názvem PEPA. Když si takhle všechny rubriky přepíšete a rozklikáte, stačí zase jít do položek menu a Rubriky dát do sloupečku neaktivních. Zmizí, ale v menu boxu zůstanou ty přepsané.
--------------------------------------------------------------------------------------------------

Teď se začneme zaobírat těmi problémy. Co třeba s tou stránkou? Čumí nám do záhlaví! Jednoduchý trik - zapnete volitelný horní box a do něj něco napíšete - vždycky se hodí nějaké místo pro motto, hlášku, nějaké odkazy, ikonu …. Bláblá. A pozor! Text musíme odrazit pomocí nástroje v liště (odstavec se šipkou) jinak nám bude stejně čumět v tom záhlaví. A výsledek je tady:


A teď ty popisky. V galerii máte uložené jednotlivé obrázky - ty teď vložíte do textu ve vol. Menu boxu a zarovnáte do leva, aby přiléhali ke krajům lay-outu. Stačí uložit a víc se neptat. Pokud máte stránku správně nastavenou, co se okraje vlevo týče, bude tam tohle:


Péécká - a poslední je? Zápatí - jistě. A na to mám velice komplexní návod. Víme, že bude vlevo jako všechno další, musí být dole, aby přiléhalo na spodní okraj a nesmí být vidět písmo v něm. Takže uděláme vše podle tohohle:


A proč takhle složitě? Pro pořádek - kdybychom neměli zápatí, ale průhledný png text, mohli bysme ho dát do volitelného dolního boxu. Takhle je ale lepší, když mám volitelný dolní box volný pro nějaké pindy či odkazy a podobně. Kdysi to totiž fungovalo tak, že když jste vložili zápatí do volitelného dolního boxu tak nepřiléhalo ke spodnímu okraji. Dnes už s tímhle problém není ale síla zvyku je síla zvyku navíc jak říkám, pokud rádi používáte volitelný dolní box pro nějaké kecičky tak je to pro vás pak mnohem přehlednější. Pokud ale vol. Dol. Box nepotřebujete na nic jiného než "kopík" neřešte to a vložte obrázek tam!


A je to! Máme to přátelé - další lay-out je za námi a můžete se těšit na třešničku na dortu! Ten nejtěžší lay a to s odkazy v záhlaví. Tak zdar a hodně štěstí s vašimi blogy!
 

Buď první, kdo ohodnotí tento článek.

Komentáře

1 ooomarie ooomarie | Web | 2. prosince 2013 v 18:35 | Reagovat

Nádherné! :-)

2 Míša Míša | E-mail | 3. prosince 2015 v 18:15 | Reagovat

Ahoj :) Jsi fakt moc šikovná ;) Mohla by jsi mi vysvětlit jak jsi posunula ten text, který ti zasahoval do toho "záhlaví"? nevím jak ho dát do stránky.

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