Kurz kódování

Kódování prezentace není vlastně ani tak těžké, jako nudné. Jde jen o cvik a praxi,...že ti to hned na poprvé nepůjde hladce, no, upřímě, všichni zkušení grafici taky někdy začínali, ne? Tak se do toho dáme.

1) Vytvoř si svou prezentaci (šablonu, viz. Výroba prezentace ve Photofiltre)

2) Otevři si stránku www.htmledit.squarefree.com

3) Smaž vše, co je v tom modrém rámečku.

4) Vlož tam toto: <div align="center"></div><table style="border-collapse: collapse; width: 830px; height: 920px;" background="https://www.imagehosting.cz/images/ka1fnf.png" border="0"><tbody><tr><td valign="top">

Pod tím se objeví prezentace s koněm.

5) Otevři si na nové kartě stránku imagehosting.cz a nahraj tam svoji šablonu

6) Poté, co se ti obrázek nahraje, jeď šipou až dolů pod něj. Jsou tam různé odkazy. Zkopíruj ten, nad kterým je napsáno "Přímé zobrazení obrázku'' a otevři ho na nové kartě. Objeví se ti znovu tvůj obrázek, jen bez těch odkazů.

7) Zkopíruj jeho URL adresu a vlož ji v tom HTML editoru místo https://www.imagehosting.cz/images/ka1fnf.png co je napsané v tom textu u bodu

4), měla by se ti zobrazit tvá prezentace (bude zobrazená úplně jinak, než má vypadat...neboj, nic se jí nestalo, spraví se to v dalším bodě)

8) V textu, co už máš v HTML editoru je napsané: <div align=''center''></div><table style=''border-collapse: collapse; ...a pak je tam width: 800px; height: 1400px;'' (pak je ten odkaz a zakončení). Tohle jsou právě ty pixely (rozměry), které teď musíš upravit, aby ti tam prezentace seděla. Na té stránce imagehosting.cz, kde máš svůj obrázek bez těch dokazů je vpravo nahoře napsané: viewing (název tvé prezentace) a v závorce velikost a pixely. Ty ty pixely napíšeš do toho textu v HTML editoru, např. weight: 850px; height: 1000px;''. Potom by měla prezentace vypadat normálně. A nezapomeň, že width je šířka a height je výška, často se to plete!

9) Nyní je na řadě text (texty) do okének. V HTML editoru hned za to, co už tam máš, vlož toto: <div style="margin-left:42px; margin-top: 546px; overflow: auto; height: 169px; width: 351px;">TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 TEXT 1 </div>

10) Hned po vložení tohoto textu ti to do toho boxu sedět nebude. Musíš tedy opět upravit pixely tak, aby ti tam ten text seděl (uvidíš dole v tvé prezentaci). Problém ale je, že u toho textu jsou další dva rozměry navíc, které určují polohu textu v tvé prezentaci. Dohromady tam máš tedy čtyři rozměry na úpravu a to jsou:

weight (šířka), to je stejné jako před tím

height (výška), to je stejné jako před tím

(šířka a výška jsou u textu prohozeny, takže místo aby jsi upravoval/a nejdřív šířku, budeš nejdřív upravovat výšku)

margin-left, to znamená, že když upravuješ tento pixel, text se ti ''posouvá'' doprava a doleva

margin-top, to znamená, že když upravuješ tento pixel, text se ti ''posouvá'' nahoru a dolu

Pak už jen ty pixely upravuješ do té doby, dokud ti ten text přesně bude sedět do okna té tabulky

11) Pokud má tvá prezentace více okének, text vlož ještě jednou úplně za to (ten z bodu 9)) a opět upravuj pixely tak, aby ti tam text seděl. Pokud máš okénka na text vedle sebe, musíš dát u margin-top mínus, a protože to jsou HTML kódy, tak ti to nevezme pomlčku. Pokud nevíš jak udělat mínus, zkopíruj toto: -

12) Je dobré si ten kód někam napsat, třeba si ho vlož do poznámkového bloku a ulož, kdyby se ti s prezentací něco stalo, aby jsi to nemusel/a kódovat celé znova.

13) Pak jen ten kód zkopíruj, jdi na svou stránku, dej si upravit prezentaci, nad smajlíkama je takový zelený rámeček s nadpisem ''HTML režim'', ten zmáčkneš a vložíš tam svůj kód k prezentaci. Pak dáš nad prezentací ''normální režim'' a měla by se ti ukázat tvá prezentace, kterou si podle svého gusta přepíšeš.

Vyhledávání

Kontakt

Kurz kódování