návštěvní kniha

galerie

odkazy:

archiv článků:

Jak vytvořit ikony pro rubriky v menu

pise.cz/img/274688.jpg" alt="2" width="680" height="537" align="absMiddle">

4.)  Vyskočí nám okno, kde změníme Šířku a Výšku toho našeho listu. Klikněte do okénka se stávajícími hodnotami 600 a 800 a přepište je na 164 a 50, tak jak to vidíte na obrázku. Potvrďte Ok.

5.)  Objevil se nám bílý štítek (naše ikona) o šířce a výšce jakou jsme zadali. Tedy takové co se nám krásně vejde do menu (164 x 50). [Pokud by to v závěru nesedělo, zkuste najít jiný rozměr]. Tuto bílou plochu ozláštníme jak budeme chtít. Až se naučíte s Photofiltre pracovat (pokud už to neumíte), zjistíte jak zajímavě si můžete tuto oblochu upravit, my ale budeme postupovat podle mé předlohy co vidíte na blogu. I to vás však navede k vlastním zajímavým úpravám, bude to jakýsi odrazový můstek.

6.)  V levém horním rohu, hned vedle listu, který jsme už používali, klikneme na ikonu v podobě otevřené složky. Pomocí ní si v počítači najdeme obrázek, který bychom rádi měli na pozadí naší ikony pro rubriky. Takový obrázek je potřeba mít už předem stažený v počítači, např. jste si ho našli někde na internetu, coby tapetu. Je důležité vybírat takové obrázky, na kterých bude potom čitelné písmo (název rubriky).

7.)  Otevřou se nám složky v počítači, kde vyhledáme obrázek. Použiju jiný, než jaký se nachází v ikonách mého menu, ten už nejspíš nemám.

8.) Jakmile obrázek otevřeme, klikneme na něj pravým tlačítkem myši a z nabídky vybereme Velikost obrázku.

9.) Vyskočí nám okénko, kde změníme velikost stávajícího obrázku. Stačí změnit Šířku, výška se pak automaticky přizpůsobí. Dáme podobnou velikost jakou jsme určili ikoně. Já dala o malinko větší šířku, než je šířka ikony - 170. Potvrdíme stisknutím Ok.

10.) Obrázek se nám zmenšil, teď ho zkopírujeme a to tak, že do něj klikneme pravým tlačítkem myši a dáme kopírovat. Nebo stiskneme zkratku pro kopírování Ctrl + C. 

11.) Následuje vložení obrázku (tapety) do naší ikony. Klikneme proto na naši prázdnou, bílou ikonu a opět pravým tlačítkem myši, kde vybereme Vložit. Nebo zkratkou pro vkládání Ctrl + V. Teď si možná říkáte, že stačilo zmenšit obrázek na velikost ikony, kterou chceme použít v menu. Ano, stačilo, ale přesnou velikost si přesně neurčíte, proto je lepší obrázek vložit do přesně vystřižené ikony.

12.) Máte vloženo? 

13.) Obrázek už nebudeme potřebovat, proto ho můžete zavřít, kliknutím na červený křížek v jeho pravém horním rohu (nemusíte ho ukládat). Teď se budeme soustředit na naši ikonu, její pozadí už máme, zbývá udělat okraj a vepsat název rubriky.

14.) Pro zajímavé ohraničení můžeme použít rámečky, které program nabízí. Některé najdete i různě po internetu na blozích, kde si je uložíte, popřípadě stáhnete do počítače a vložíte do složky Photofiltre s názvem Masks. (To uděláte tak, že si v počítači najdete místo, kam jste Photofiltre uložili, tuto složku otevřete a ta vám nabídne další podsložky. Podsložka s názvem Masks je plná rámečků, které můžete v programu otevřít. Sem byste pak vložili nové rámečky, co jste stáhli z internetu.)

15.) Rámečky v programu otevřeme kliknutím na ikonu vpravo nahoře, vypadá trochu jako sv.modrý plakát s černou postavou (vidíte na obrázku). 

Po kliknutí nám vyskočí okénko s názvem Photomasque. Tady se zaměříme na ikonu jakoby pootevřené složky. Když ji rozklikneme, objeví se výběr rámečků.

16.)  Nějaký rámeček si vyberte, klikněte na něj a dejte Otevřít.

17.) Já použila ten, co mám v menu u rubrik. (Takový rámeček jsem si však musela do Photofiltre vložit sama.) Vybraný rámeček se objeví nalevo. Napravo můžeme změnit jeho barvu. Pro zobrazení barevné palety klikněte na šipečku vedle vybrané barvy. Já mám vybranou černou.

18.) Než rámeček potvrdíte kliknutím na Ok, mrkněte ještě na jednu ikonu a to tu, co je pod náhledem rámečku nalevo. Mění totiž výplň rámečku, tzn. že buď rámeček zakryje celou stránku vašeho obrázku (v našem případě ikony) nebo ji jen orámuje. Na obrázku nahoře ji orámuje. Na obrázku dole naopak. My, ale chceme, aby rámoval, takže to vraťte zpět, jako je to na horním obrázku a potvrďte Ok.

19.)  Ikona už má rámeček, teď se mrkneme na písmo. To najdete pod ikonou T, v horním panelu přibližně uprostřed. Po té, co na ikonu T klikneme, otevře se nám okénko s textem. Do prázdného bílého pole napíšeme název rubriky. Jak vidíte, já ji nazvala Blog. To, ale není všechno, s písmem si ještě malinko pohrajeme.

20.)  Pod názvem Font (neboli písmo) si po rozkliknutí té černé šipečky na boku vybereme typ písma, jaké bude zářit v naší ikoně. Já zvolila Monotype Corsiva. Hned vedle pak změníte velikost písma tak, aby se nám vešlo do ikony a zároveň bylo dobře čitelné. Můžete ho také ztučnit - odfajfknutím.

21.)  Změníme také barvu písma. Opět jak vidíte na obrázku, po rozkliknutí šipečky se objeví barevná paleta, stačí kliknout na zvolenou barvu, ta se pak objeví pod nadpisem Barva. Já zvolila bílou. Můžete si také pohrát s Efekty, není to těžké, návod nebude potřeba. Nakonec písmo potvrdíme kliknutím na Ok. Předtím ho však můžete i zarovnat, podtrhnout, dát kurzívu, to vidíte v okénku.

22.)  Ikonu máme hotovou. Stejným způsobem si uděláme i ostatní rubriky v menu. Tento způsob lze použít i pokud používáte na Píše.cz složky, ale to je zase jiná kapitola. Takže tento návod platí pouze pro Rubriky nikoli pro Složky! 

Ikony uložíme kliknutím na Soubor a Uložit jako...

23.) Formát změníte těsně před uložením na JPEG, obrázek napoví.

DRUHÁ ČÁST - ULOŽENÍ TĚCHTO OBRÁZKŮ (IKON) NA SERVER PÍŠE.CZ

1.)  Už víte jak na ikonu, teď si musíte udělat tolik ikon, kolik máte rubrik. Stačí pokaždé používat tu první ikonu, jen měnit nápisy.

2.) Máte-li všechny ikony pro jednotlivé rubriky vytvořené, otevřeme si Administraci našeho blogu, kde vstoupíme do - přidat obrázek na server, to všichni známe.

3.)  Všechny naše ikony si popřidáváme na server, tak jak běžně přidáváme obrázky. Přidám pouze jednu, pro ukázku, vy ale všechny.

TŘETÍ ČÁST - VLOŽENÍ IKON JAKO ODKAZŮ DO HTML KÓDU

Nyní, máte-li uloženy všechny vaše ikony pro rubriky na vašem blogu, podíváme se na to, kam a jak je uložit, aby se objevily v menu na našem blogu.

1.)  Nejprve si dvakrát otevřete Administraci vašeho blogu. Dvakrát proto, abychom nemuseli pořád přepínat mezi okny, tento způsob bude rychlejší, a protože budeme v administraci zároveň potřebovat  Nastavení blogu a přidat obrázky na server.

2.)  V Nastavení blogu pak vstoupíme do části -plus + a napravo si otevřeme Album našich obrázků, to kam jsme před chvílí uložily ikony pro rubriky.

3.)  Klikli jsme na -plus+ , v této rubrice si najdeme nápis HTML kód. Je na konci. Vlastně tam jsou tři okénka pro vypsání HTML kódu, ale nás bude zajímat hned to první.

V albu se pak zaměříme na jednotlivé ikony. Já pro ukázku vložila jen jednu, ale vy jich tam máte tolik, kolik nese vaše menu rubrik. Opět upozorňuju, že tento návod platí pouze pro rubriky, pokud máte vytvořeny v menu i složky (jako to mám já, např. složka s názvem Tvorba a pod ní dvě rubriky Záhlaví a Básně), nebude návod fungovat, naopak vám zmizí rubriky a lidé se k nim nedostanou. O složkách se budeme bavit jindy.

4.) V levém okně se právě nacházíme u HTML kódu. Do této prázdné plochy budeme psát, hned vám řeknu co. Pravé okno zatím ponecháme, tak jak je.

5.)Do HTML kódu okopírujte tuto větu (kód): 

<a href="sem vložíte adresu rubriky z vašeho blogu">

<img src="sem okopírujete URL adresu ikony pro rubriku" border="0" alt="sem napíšete název rubriky"/></a>

V praxi to u mě vypadá takto:

<a href="http://dvirka.pise.cz/blog/">

<img src="http://dvirka.pise.cz/img/202579.jpg" border="0" alt="Blog"/></a>

♦ Nezapomeňte dodržet přesnost těchto znaků, proto je zkopírujte tak jak je vidíte a mezi úvozovkami pak smažte to, co jsem tam napsala a nahraďte to tím, co tam má podle těch slov být. Pojďme si ukázat jak. ♦

6.)  V pravém okně si klikneme na ikonu, která nese název naší první rubriky. Po kliknutí se obrázek otevře, my do něj teď klikneme pravým tlačítkem myši, aby se objevila nabídka, co můžeme s obrázkem dělat. Jak to vidíte v ukázce, dáme Kopírovat adresu URL obrázku. Teď se přemístíme do okna vlevo a do druhého řádku v HTML kódu, vložíme tuto okopírovanou adresu naší ikony. Nezapomeňte ale, že předtím než tuto adresu mezi úvozovky (př. "http://dvirka.pise.cz/img/274745.jpg")  vložíte, musíte smazat  má slova, která jsem tam napsala pro vaši lepší pochopitelnost (tedy: sem vložte okopírovanou adresu ikony smažete).

7.)  V pravém okně teď na chvíli opusťte obrázky a v novém okně si otevřete Váš blog a pak vaši první rubriku (jak vidíte u mě adresu: http://dvirka.pise.cz/blog/ -název blogu a za ním odkaz do první rubriky -blog). Tuto adresu neboli odkaz na vaši první rubriku si okopírujte, pak přeskočte do levého okna a vložte ji hned do prvního řádku mezi úvozovky a nápovědu → ("sem okopírujte adresu první rubriky") - tato slova samozřejmě opět smažete a nahradíte je zrovna okopírovanou adresou.

8.)  První ikonu máte hotovou, jen ještě napiště její název mezi úvozovky ve druhém řádku za adresou obrázku - ("Blog"). Zapomněla jsem na to hned upozornit, ale uvidíte to v dalším nápovědním obrázku. Tak a stejným způsobem budete postupovat u každé rubriky. To už má nápověda neznázorňuje, ale opět si okopírujete TU větu s těmi znaky, kliknete do HTML kódu, uděláte mezerníkem mezeru a vložíte. Pozměníte údaje, jakože si znovu otevřete Album obrázků a tentokrát okopírujete URL adresu další ikony, jejíž název nese druhá rubrika. Vložíte atd. atd.....

9.)  Nakonec to bude vypadat nějak takhle, s tím, že se budou lišit údaje mezi úvozovkami, budete tam mít ty své. Já postuju pouze náhled do HTML kódu mého menu. 

10.)  Dole pak váš vepsaný HTML kód pro ikony v menu potvrďte kliknutím na nastavení plus.

ČTVRTÁ ČÁST - POUŽITÍ HTML KÓDU V MENU

Předpokládám, že jste HTML kód ještě nepoužívali, tak jej máte ve Vyřazených položkách, pojďme ho přesunout, aby se nám objevil v menu na blogu.

1.)  Po té, co jsme nastavili plus se opět vrátíme do Nastavení blogu.

2.) Tentokrát nás, ale bude zajímat menu, do kterého najedeme. Možná už jste zjistili, že si můžete vybrat, co se bude ve vašem menu objevovat a co ne. Slouží k tomu tyto dva sloupečky - jeden nese název Vybrané položky, druhý Vyřazené položky. My chceme HTML kód použít do menu (aby se nám tam zobrazil), tzn. že na něj klikneme myší, držíme a táhnutím přesuneme do sloupečku s Vybranými položkami (jak to vidíte na obrázku). Naopak musíme vyřadit rubriky, protože by se nám tam objevovali jak slovně, tak na našich ikonách (byly by tam dvakrát), proto je stejným způsobem přesuneme do Vyřazených položek. Můžete také měnit pořadí těchto položek, opět táhnutím myši (tzn., že třeba HTML kód (teď už vaše rubriky) si dáte na druhé místo, tedy hned pod profil jako to mám já). Nakonec pro potvrzení dáme nastavit menu.

3.) Nyní by se vám měly rubriky (teď už ikony) objevit na blogu v menu, tak jak to vidíte u mě. 

HOTOVO!

To by měl být celý návod na obrázkové rubriky. Snad jsem na nic nezapomněla a vám aspoň trochu pomohla. Je to pouze laický návod, možná se to dá udělat jiným způsobem, já však znám jen tento (myslím, že základní postup mám od blogerky Mixx). Ale s experimentováním si vytvoříte i originálnější rubriky, tohle je jen základní startovací můstek. 

Návod na to, jak udělat ikony když máte složky a pod nimi rubriky se podíváme příště. Bude se postupovat podobně, jen budeme potřebovat více ikon (nebo taky ne), ale odkazy na jednolivé rubriky vložíme do článků.

Zpět na hlavní stranu blogu