Právě probíhající akce na Howrse: Důl Elementálů+ Všechny akce
Právě probíhající soutěž: Zatím žádná+ Všechny soutěže
Přehled českých výtvorů v KP!
Chat s adminkami
• Bleskovky a informace, co na webu nenajdete - sledujte nás na Facebooku!
• Anketa - VIP vs. Pegasus
Podvodné stránky - nenaleťte!+ Více novinek

V. Nakódování šablony

http://i.minus.com/icTF3ydl2zwb.png

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ář

Autor:

Text:

:) ;) B) :( :'( :P :D XD *yes* *no* :* :[ :-/ :O
Velké množství smajlíků či pouze smajlíky do komentářů nepatří!

Opište tento text: CAPTCHA

Komentáře

19)  Alexis  [21. 08. 2012 | 22:39]

No nevím, oběvuje se mi tam jen ten obrázek a nadpisy. Tak to asi nemá být, že? :)

18)  Veronika  [21. 08. 2012 | 22:11]

VerunkaJak děláte,že máte obrázak a u bunky máte třeba květiny vložené.To se dělá ve Photofiltre?

17)  Veronika  [21. 08. 2012 | 22:09]

VerunkaJen ještě,nenašla jsem jak jsou tam ty nadpisy

16)  Zaara  [21. 08. 2012 | 22:02]

ZaaraVeronika: Ty šikmé šmouhy? Nvm, v PF ani v PFS neumím, ale určitě jsou tam nějaké filtry nebo rozmazání nebo tak - hledej a zkoušej ;)

15)  Veronika  [21. 08. 2012 | 21:58]

VerunkaA jde udělat i to,jak máš ty to modré pozadí a do toho jsi udělala ty čáry??*yes*

14)  Zaara  [21. 08. 2012 | 21:54]

ZaaraLenka: Nejspíš máš jinak nastaven Pravý okraj (viz výše nastavení PSPadu), ale je absolutně jedno, na kolik řádků to máš :).

Eliška: Bohužel nevím, jak jinak ti pomoct, snažila jsem se to napsat srozumitelně. Někdy je dobré si dát pauzu a nechat nové informace se vstřebat :). Prostě netlač na pilu a zkus si to znovu přečíst za pár dní :).

aliSSsW: Myslíš tagy a vlastnosti? No ano, to se do češtiny nepřekládá, pokud chceš vědět, co to znamená, tak si to musíš přeložit sama :).

anexa1: Jak jsem psala už několikrát během kurzu - dejte tomu taky trochu čas :). Mozek musí vstřebat nové informace. Nemusí se Vám to povést hned dnes ;).

Veronika: Ale však v návodu na PF a PFS je taktéž ukázáno, jak se přidává nápis :). I jak se dělají boxy - nadpisky se dělají stejně, jen nejsou průhledné... Trocha improvizace ;)

13)  Veronika  [21. 08. 2012 | 21:36]

VerunkaZaara:No,tam to je,ale jen ve PhotoShopu,já ho němám.Ani nevím kde ho stáhnout:(

12)  anexa1  [21. 08. 2012 | 21:27]

Já to fakt nechápu a čtu to už po několikátý.Nepokusil by se mi s tou prezentací co chci nakódovat pomoc na howrse v soukromých zprávách?:(

11)  imascakova  [21. 08. 2012 | 21:04]

imascakovaCicinka:Pochopíš s to když si to přečteš třeba 2x-3x.Nebo když se budeš pozorně koukat na ty znaky atd.

10)  aliSSsW  [21. 08. 2012 | 21:01]

ahoj ale je to anglicky a ja to mu ne rozumim !!!!! :D:O:O

9)  Eliška  [21. 08. 2012 | 20:35]

Vůbec tomu nerozumím zkoušela je)sem si přečíst všechny ostatní články a nic asi jsem natvrdlá ale opravdu to ani trochu necháu :(

8)  Lenka  [21. 08. 2012 | 19:46]

Ahoj chtěla jsem se tě zeptat v návodu máš toto napsaný:
3)<table style="border-collapse: collapse; color: #1d4a46; text-align: justify; line-height: 135%; font-size: 16px; font-family: ´Georgia´, ´New York CE´, ´
utopia´, serif;><tbody>
4)....
ale když to dělám já tak to mám takhle:
3)<table style="border-collapse: collapse; color: #1d4a46; text-align: justify; line-height: 135%; font-size: 16px; font-family: ´Georgia´, ´New York CE´, ´
4) utopia´, serif;><tbody>
Takže mi to na konci nevýjde :( abych měla řádků 46 protože tak mám 47
Jak jsto udělala?
Děkuju doufám že pochopíš co tím myslím ahoj

7)  Zaara  [21. 08. 2012 | 19:00]

Zaara*Tuty1*: No, ono se to dá dělat i tak, že si tu danou oblast prostě ořízneš a pak se podíváš, jak je ten oříznutý obrázek velký :D

Cicinka: Přečti si znovu předchozí článek (IV.) :) Třeba ti to pomůže :)

6)  Cicinka  [21. 08. 2012 | 18:33]

Ahoj, nechápu to. Nevím ani první krok.

5)  *Tuty1*  [21. 08. 2012 | 18:18]

Aaach :( ja to robím vo PhotoFiltre čiže neviem aké sú tam tie rozmedzia :O
zabite maaa.. a hladala som tam niečo také ale okrem mriežky tu nič ié nie je -_-

4)  Zaara  [21. 08. 2012 | 17:47]

Zaaraandělka1950: PSPad je zdarma, v předchozím článku je i odkaz na stažení ;)

3)  andělka1950  [21. 08. 2012 | 17:35]

lze si ten program stáhnout a nebo ho musím kupovat?

2)  Zaara  [21. 08. 2012 | 17:24]

ZaaraVeronika: To je součást graf. podkladu - viz článek II. Výroba grafické šablony prezentace ;)

1)  Veronika  [21. 08. 2012 | 17:17]

VerunkaA jak si udělala,že nahoře v té bunce je napsáno třeba informace?:(

«   1 2 3 4 5 6 7 8 9 10