• Chat s adminkami
• Bleskovky a informace, co na webu nenajdete - sledujte nás na Facebooku!
• Anketa - VIP vs. Pegasus
• Podvodné stránky - nenaleťte!
Howrse
Grafika
Oddechový koutek
V. Nakódování šablony
V dnešním článku si ukážeme, jak nakódovat šablonu z článku č. 2. Předem bych chtěla říct, že můj kód nemusí být „ten nejlepší“ - způsobů, jak šablonu nákodovat, je více. Budu se snažit Vám vše vysvětlit, abyste pochopili princip a byli schopni kódovat i jinak rozložené šablony.
PSPad
Jak jsem psala minule, oblíbila jsem si editor PSPad – screeny jsou tedy z tohoto programu. Vzhledem k tomu, že s ním pracuji již delší dobu, přizpůsobila jsem si ho. Vy máte nejspíše v levém okraji panel nástrojů – já jej nevyužívám, proto jsem ho odstranila (Zobrazit > Panel nástrojů). Abych se lépe orientovala, zapnula jsem si čísla řádků (Zobrazit > Čísla řádků), dále také zalamování řádků (Zobrazit > Zalomení řádků) a pravítko (Zobrazení > Pravítko). Kde se Vám řádky zalomí si můžete nastavit přes Nastavení > Nastavení programu > Editor 2 > Pravý okraj [znaků] – já mám 160. Tyto změny nejsou nutné a je jen na Vás, jak si program přizpůsobíte. Bylo by ale dobré, abyste si zkontrolovali, že ve Formát máte zaškrnuté UTF-8. Zbytek nastavení by měl být stejný.
NÁVOD NAJDETE ZDE
EDIT: Návod "krok za krokem" je stručnější a provede Vás napsáním celého HTML kódu. Pokud by měl někdo nějaké připomínky nebo nápady na vylepšení návodu, prosím ozvěte se do komentářů :).
NÁVOD NAJDETE ZDE
Taktéž jsem pro Vás doplnila návod na zjištění rozměrů ;).
ZJIŠTĚNÍ ROZMĚRŮ
A pro dychtivější z Vás využití vlastností colspan a rowspan a kódování jinak rozložených boxů.
COLSPAN A ROWSPAN
EDIT 2: Jelikož se v komentářích párkrát objevil dotaz, jak se udělají ostré závorky nebo jednoduchá uvozovka, tak tady jsou možnosti:
< pravý Alt Gr + klávesa pro čárku , nebo levý Alt + 060
> pravý Alt Gr + klávesa pro tečku . nebo levý Alt + 062
' Shift + klávesa pro přehlásku ¨ (nad přehláskou je zobrazena taková stříška)
nebo levý Alt + 039
# pravý Alt Gr + klávesa písmene X nebo levý Alt + 035
Přidat komentář
Komentáře
58) Zaara [10. 09. 2012 | 22:57]
Petruška: Jakou máš přezdívku na Howrse? Dořešíme to přes zprávy 
.
anexa1: Překlep nebo špatná URL adresa obrázku - bez kódu ti bohužel víc neřeknu . Pokud ho chceš zkontrolovat, pošli mi kód do zprávy na Howrse 
.
57) anexa1 [09. 09. 2012 | 12:46]
Ahoj dělala jsem to podle toho krok za krokem,ale když to dám do prezentace tak se mi ukazuje jen ten text co má být v těch boxech a nic jiného
.Neví někdo co s tím je?
56) Petruška [09. 09. 2012 | 12:45]
Už toho mám až nad hlavu nepomohla bys mi s tím (tipováním )
Zde je obrázek : http://nd03.jxs.cz/722/884/ebb9ea237e_88484146_o2.png
55) Zaara [09. 09. 2012 | 12:13]
Lenka: Pokud máš Windows, stáhni si hned to první (Instalátor 3.81 MB ), zbytek tě nemusí zajímat . Jinak se dá tento editor určitě najít i na Slunečnici nebo na Stahuj, stačí hledat .
Simča │ Lily99: Já už holky fakt nevím, jak Vám poradit 
. V tom návodu krok za krokem je v těch oranžových tabulkách přímo napsáno, co máte psát. Jediné, co musíte změnit, jsou ty hodnoty... Snad ještě najít si někoho, kdo tomu rozumí a byl by ochotný to s Vámi projít - zkuste se poptat kamarádek .
Petruška: Z návodu krok za krokem : Můžete si tyto hodnoty změřit v graf. editoru nebo je prostě zkoušet "od oka", dokud se netrefíte. Existuje i taková jednoduchá metoda, kdy si tyto části obrázku (tedy třeba oblast boxu nebo oblast, která má být horní okraj) v graf. editoru oříznete a pak se podíváte na velikost tohoto ořezaného obrázku.
54) Petruška [09. 09. 2012 | 12:01]
Už jsem se zase stratila ta moje hlava..prosím tě Zaaro jak mám získat hodnotu v px dolního okraje, horního atd. ??
53) Lily99 [08. 09. 2012 | 14:10]
Ahoj celý jsem to četla pořád dokola a nic jsem z toho nepochopila 
52) Lenka [06. 09. 2012 | 14:19]
Ahojky,prosím povězte mi.Když kliknu na odkaz stáhnutí PSPad tak se mi tam objěví asi 20 tabulek s nakyma vezma.to si vsechno musim ztahnout anebo je i jiny odkaz na stahovani komplet PSPadu?Dekuji moc!snad jse mě pochopily!
51) Simča [03. 09. 2012 | 19:15]
Já to rpstě nechápu. Nevím jak to mám psát prostě tomu nerozumím!
50) Osmanda [03. 09. 2012 | 12:26]
Děkuji Zaaro, snad to dám nějak do hromady, aby z toho bylo něco pořádného.
49) Zaara [03. 09. 2012 | 10:58]
Petruška: Nz a určitě jo Jinak v Photoshopu to funguje tak, že když si kliknu na výběr barvy, tak mi vyskočí okénko a tam je i HTML kód - viz http://howrse.jecool.net/gallery/letni_kurz/barvy/vyber_barvy.png - mělo by to tak jít i v jiných editorech .
48) Petruška [03. 09. 2012 | 10:55]
Děkuji snad to nějak dám dohromady
47) Zaara [03. 09. 2012 | 10:48]
Arakl: Nemáš zač .
Petruška: S PFS bohužel neumím, ale existují i webové nástroje, třeba http://www.colorpicker.com/ .
Simča: Dnes ho přidám
Osmanda: Tak s barvou - pokud myslíš HTML kód barvy - ti asi neporadím, nepracuji v PF. Ale jak jsem psala výš, pro výběř barvy existují i webové nástroje (colorpicker.com) . Co se písma týče, tak to je ošemetné. Jelikož každý má nainstalovaná jiná písma, tak nikdy není záruka, že to budou mít všichni stejné. Z toho vyplývá, že by se hlavně měla používat systémová písma (u Windows třeba Times, Tahoma, Georgia, Verdana apod. - více třeba na http://www.pixy.cz/blogg/clanky/fonttest/ukazka.html). Jenže ty zase nejsou tak pěkná, takže se na nadpisky moc nehodí . Pokud chceš vyloženě použít pro text v boxech ten ozdobnější font, tak to nepůjde. Normálně se to na webech řeší pomocí @font-face, ale nevím, jestli to jde takhle v in-line zápisu (myslím, že ne). No a co se vzdáleností týče, tak je na to víc metod, ale dá se to udělat třeba i tak, že si ořízneš tu část, co má být jako okraj a pak se podíváš na rozměry .
dggn: Musíš se s tím buď poprat, nebo mít konkrétní dotaz .
46) dggn [02. 09. 2012 | 14:16]
to nechápu.
45) Osmanda [02. 09. 2012 | 13:00]
Ahoj, nevím tři věci a možná i více.
1. Kde mám sehnat barvu okének a pod.?
2. jak můžu dát stejné písmo textu a nadpisu?
3. Jak mám spočítat vzdálenosti na šabloně?
no to je snad vše. Jinak šablona je v PF.
Ahoj
44) Simča [02. 09. 2012 | 12:03]
Ahojky Zaaro, a kdy bude ten návod krok za krokem?
43) Petruška [02. 09. 2012 | 09:39]
Omlouvám se HTLM barvy okének..
42) Petruška [02. 09. 2012 | 09:37]
Ahoj, nevím jak mám získat HTLM barvy..nemůžu to tam nikde najít..(mám PFS)
Děkuji moc
41) Raduza [01. 09. 2012 | 23:47]
Děkuju!
40) Zaara [31. 08. 2012 | 19:31]
Arakl: Pokud chceš, můžu ti tvůj kód zkontrolovat - pošli mi ho do zprávy na Howrse
59) bibi199902 [11. 09. 2012 | 14:02]
Zobrazil se mi text ale bez obrázku
Jinak jsem to pochopila.