Vß₧enφ Φtenß°i,

 

dnes se podφvßme na pokroΦilejÜφ prvky sv∞ta HTML nßpov∞dy. Uvidφte, jak pracujφ asociativnφ linky, dozvφte se, jak sestrojit rejst°φk jin²m zp∙sobem a nakonec se podφvßme i na to, jak opat°it stromovou strukturu tΘmat nßpov∞dy vlastnφmi ikonami.

 

 

 

 

Asociativnφ linkovßnφ

 

Pokud jste m∞li to pot∞Üenφ pracovat s nßpov∞dou typu Windows 95 (WinHelp 4.0), mo₧nß si vzpomenete na podivn∞ vyhlφ₧ejφcφ makro ALink. Toto makro prohledßvalo specifikovanß slova v celΘm systΘmu nßpov∞dy a potΘ nabφzelo seznam tΘmat nßpov∞dy, kterß obsahovala zadanß slova v poznßmce pod Φarou, ve specißlnφm dialogovΘm okn∞. Prost°ednictvφm tΘto techniky bylo pom∞rn∞ snadnΘ opat°it tΘma nßpov∞dy tlaΦφtkem nebo jin²m citliv²m mφstem, po aktivacφ kterΘho se automaticky vyhledaly dalÜφ äp°φbuznßô tΘmata se souvisejφcφmi informacemi. Popsanß technika se oznaΦuje jako asociativnφ linkovßnφ tΘmat nßpov∞dy. Kdy₧ se p°eneseme do prost°edφ HTML nßpov∞dy, m∙₧eme konstatovat, ₧e i tady se uveden² algoritmus vyhledßvßnφ p°φbuzn²ch tΘmat nßpov∞dy vyu₧φvß. ImplementaΦnφ postup je zde sice pon∞kud odliÜn², zdaleka vÜak ne nßroΦn² a ·silφ, jen₧ v∞nujete pochopenφ problematiky asociativnφho p°epojovßnφ tΘmat nßpov∞dy se vßm v budoucnosti zcela jist∞ vrßtφ i s pomysln²mi ·roky.

 

 

Jak pracuje asociativnφ linkovßnφ tΘmat

 

Idea je docela jednoduchß: Je pot°ebnΘ vÜechny HTML soubory opat°it vhodn²mi textov²mi identifikßtory, aby je pozd∞ji mohl HTML Help engine najφt a rozeznat. Proto do ka₧dΘho ₧ßdanΘho HTML souboru vklßdßme urΦitΘ klφΦovΘ slovo, p°φpadn∞ specifickß slovnφ spojenφ, kterß charakterizujφ dan² soubor. PotΘ vyu₧ijeme dovednostφ ovlßdacφho prvku HTML Help ActiveX a za°adφme mo₧nost dynamickΘho prohledßvßnφ tΘmat nßpov∞dy. Jakmile vÜe ·sp∞Ün∞ prob∞hne, vygenerujeme platn² soubor HTML nßpov∞dy a veÜkerΘ funkΦnφ starosti asociativnφho linkovßnφ tΘmat p°enechßme HTML Help enginu. Kdy₧ pak u₧ivatel klepne na tlaΦφtko pro dalÜφ, podrobn∞jÜφ informace, HTML Help engine se nastartuje, p°ebere vstupnφ parametr (klφΦovΘ slovo, p°φpadn∞ slova, kterß se budou vyhledßvat), a nßsledn∞ prohledß vÜechna dostupnß tΘmata nßpov∞dy. Jestli se mu poda°φ najφt alespo≥ jedno tΘma podle zadan²ch kriteriφ, zobrazφ jej, nebo poskytne seznam vÜech nalezen²ch tΘmat. Dobrou zprßvou je, ₧e se prohledßvajφ vÜechna äviditelnßô tΘmata, to znamenß nap°φklad i vÜechna tΘmata modulßrnφho systΘmu HTML nßpov∞dy, na kterß odkazuje obsahovß struktura nßpov∞dy. V²hodnou vlastnostφ klφΦov²ch slov pro A-linkovßnφ je jejich neviditelnost z pohledu koncovΘho u₧ivatele. Proto₧e tato klφΦovß slova (°φkejme jim A-klφΦovß slova) jsou vklßdßna do ryzφho HTML k≤du, nikdy nebudou p°φmo k dispozici u₧ivateli. Konstrukci uvedenΘ techniky linkovßnφ zobrazuje obr. 1.

 

 

Obr. 1 û Jak pracuje asociativnφ linkovßnφ tΘmat nßpov∞dy

 

 

V nßsledujφcφch sekcφch probßdßme, jak se asociativnφ propojovßnφ tΘmat nßpov∞dy vyu₧φvß v praxi.á

 

 

Asociativnφ linkovßnφ tΘmat nßpov∞dy

Krok 1: Vklßdßnφ A-klφΦov²ch slov do HTML soubor∙

 

Prvnφm krokem je vlo₧enφ odpovφdajφcφch klφΦov²ch slov p°φmo do HTML k≤du p°φsluÜn²ch soubor∙ s tΘmaty.

 

 

Postupujte nßsledovn∞:

 

1. Spus¥te HTML Help Workshop a otev°ete p°ilo₧en² projektov² soubor nßpov∞dy (A-Link.HHP).
2. Klepn∞te na zßlo₧ku Contents a poklepejte na obsahovou polo₧ku s nßzvem äTΘma2ô. Kdy₧ jste vÜe ud∞lali sprßvn∞, v pravΘ Φßsti okna programu by se m∞l objevit HTML k≤d aktivovanΘho tΘmatu nßpov∞dy.
3. Umφst∞te kurzor mezi znaΦky </BODY> a </HTML>.
4. Vyberte nabφdku Edit a polo₧ku Compiler information.
5. V objevivÜφm se dialogovΘm okn∞ zvolte zßlo₧ku ALink Names.
6. Klepn∞te na tlaΦφtko Add a v zobrazenΘm okn∞ zadejte do textovΘho pole A-klφΦovΘ slovo (v naÜem p°φpad∞ slovo äinformaceô). Situaci vizußln∞ popisuje obr. 2.

 

 

Obr. 2 û Proces vklßdßnφ A-klφΦovΘho slova do HTML souboru

 

7. Klepn∞te na tlaΦφtko OK, Φφm₧ zav°ete okno Add ALink name a dßle kliknutφm na OK zav°ete i okno Compiler information.

 

VÜimn∞te si, ₧e do HTML k≤du se vlo₧ila znaΦka <OBJECT> s p°φsluÜn²mi parametry.

 

<Object type="application/x-oleobject" classid="clsid:1e2a7bd0-dab9-11d0-b93a-00c04fc99f9e">

ááááááááááá <param name="ALink Name" value="informace">

</OBJECT>

 

Hodnota parametru Name nßm °φkß, ₧e jde o A-klφΦovΘ slovo a hodnota parametru Value toto klφΦovΘ slovo blφ₧e specifikuje.

 

8. Soubor ulo₧te a uveden² postup aplikujte i na obsahovou polo₧ku s nßzvem äTΘma3ô.

 

 

Asociativnφ linkovßnφ tΘmat nßpov∞dy

Krok 2: Pou₧itφ ovlßdacφho prvku HTML Help ActiveX

 

Ve druhΘ etap∞ je zapot°ebφ vlo₧it do HTML souboru instanci ovlßdacφho prvku, kter² zajiÜ¥uje veÜkerou funkcionalitu asociativnφho propojenφ tΘmat nßpov∞dy. P°ipomφnßm, ₧e instance tohoto prvku se vklßdß do toho souboru, ve kterΘm chceme zp°φstupnit tlaΦφtko s nßzvem äDalÜφ informaceô. Postupujte takto:

 

1. Poklepejte na druhou obsahovou polo₧ku (TΘma1), Φφm₧ zobrazφte jejφ HTML k≤d.
2. Nynφ najd∞te v tomto k≤du textov² °et∞zec äDalÜφ informaceô, kter² vyberte do bloku.
3. Aktivujte nabφdku Tags a klepn∞te na polo₧ku HTML Help Control, nebo klikn∞te na tlaΦφtko ána liÜt∞ nßstroj∙.
4. TΘm∞° okam₧it∞ se objevφ okno pr∙vodce s titulkem HTML Help ActiveX Control Commands. V rozevφracφm seznamu Specify the command vyberte polo₧ku ALink Search (viz obr. 3).

 

 

Obr. 3 û Pr∙vodce vlo₧enφm instance ovlßdacφho prvku ActiveX: Krok 1

 

5. Aktivujte tlaΦφtko DalÜφ (Next) a druhΘ okno pr∙vodce upravte do podoby znßzorn∞nΘ na obr. 4. Zde zvolφme vytvo°enφ tlaΦφtka (As a button), na kterΘ bude moci u₧ivatel klepnout. Prvnφ zatrhßvacφ polφΦko, Display on a pop-up menu, zabezpeΦuje zobrazenφ seznamu nalezen²ch tΘmat v popup okn∞. DalÜφ zatrhßvacφ polφΦko, Display dialog or menu even if only one title, zapφnß volbu zobrazenφ dialogovΘho okna nebo popup okna se seznamem nalezen²ch tΘmat i tehdy, kdy₧ se najde jenom jedno tΘma.áá áá

 

 

Obr. 4 û Pr∙vodce vlo₧enφm instance ovlßdacφho prvku ActiveX: Krok 2

 

6. PokraΦujte na dalÜφ okno pr∙vodce. Zde urΦφme, ₧e chceme, aby byl na tlaΦφtku text (Display text on the button) a rovn∞₧ zatrhnutφm volby Disable if jump is unavailable na°φdφme, aby tlaΦφtko nebylo p°φstupnΘ v p°φpad∞, ₧e odkaz na tΘma nebude p°φstupn². Nakonec v textovΘm poli Text zadßme text, kter² se bude objevovat na vytvo°enΘm tlaΦφtku. á

 

 

Obr. 5 û Pr∙vodce vlo₧enφm instance ovlßdacφho prvku ActiveX: Krok 3

 

7. Dostßvßme se ji₧ do ΦtvrtΘho kroku pr∙vodce a je nutno dodat, ₧e tento krok je takΘ nejd∙le₧it∞jÜφ, proto₧e v n∞m specifikujeme, kterΘ A-klφΦovΘ slovo se mß hledat. Aktivujte tedy tlaΦφtko Add a v dialogovΘm okn∞ Add/Edit ALink Name zadejte A-klφΦovΘ slovo, kterΘ se mß vyhledat (v naÜem p°φpad∞ byl zadßn textov² °et∞zec äinformaceô).

 

 

Obr. 6 û Editace A-klφΦovΘho slova ve 4. kroku pr∙vodce

 

8. Klepn∞te na tlaΦφtko OK a nßsledujte pokyny pr∙vodce a₧ do zßv∞reΦnφ fßze.

 

Kdy₧ se podφvßte do HTML k≤du vaÜeho souboru, uvidφte v n∞m n∞kolik °ßdek, kterΘ za vßs vytvo°il pr∙vodce. M∞ly by vypadat asi takto:

 

<OBJECT id=hhctrl type="application/x-oleobject"

ááááááá classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11"

ááááááá codebase="hhctrl.ocx#Version=4,74,8875,0"

ááááááá width=100

ááááááá height=100

>

ááá <PARAM name="Command" value="ALink">

ááá <PARAM name="Button" value="Text:DalÜφ informace">

ááá <PARAM name="Flags" value=",,1">

ááá <PARAM name="Item1" value="">

ááá <PARAM name="Item2" value="informace">

</OBJECT>

 

9. Ulo₧te vÜechny soubory a rekompilujte soubor nßpov∞dy. Proces praktickΘho vyu₧itφ asociativnφho propojenφ tΘmat m∙₧ete vid∞t na obr. 7.

 

Obr. 7 û Asociativnφ linkovßnφ v praxi

 

 

Tvorba rejst°φku podruhΘ: Dynamick² rejst°φk

 

Mo₧nß si vzpomφnßte, jak jsme v 9. dφlu naÜeho serißlu spoleΦn∞ vytvß°eli rejst°φk pro HTML nßpov∞du. P°i tvorb∞ jsme pou₧φvali vestav∞n² editor, jen₧ je souΦßstφ kompilaΦnφho programu HHW. Ve skuteΦnosti ovÜem existuje jeÜt∞ dalÜφ zp∙sob, jak lze rejst°φk sestrojit. Ano, uhodli jste, jde o takzvan² dynamick² rejst°φk. Hlavnφ pointou tvorby dynamickΘho rejst°φku je prßv∞ jeho ädynamickßô povaha: Finßlnφ rejst°φk je posklßdßn za pomoci kompilßtoru z klφΦov²ch slov, kterß se nachßzejφ v jednotliv²ch HTML souborech. Anal²zou m∙₧eme proces tvorby dynamickΘho rejst°φku rozd∞lit do dvou etap:

 

1. Nejprve do ka₧dΘho HTML souboru vlo₧φme jistΘ klφΦovΘ slovo nebo slova (°φkejme jim K-klφΦovß slova). Jsou to standardn∞ textovΘ °et∞zce, kterΘ se ve finßlnφ etap∞ objevφ ve skuteΦnΘm rejst°φku.

 

2. Dßle °ekneme programu HHW, aby se p°i kompilaci äpodφvalô do ka₧dΘho HTML souboru a zφskal z n∞j K-klφΦovß slova, pokud jsou n∞jakß k dispozici. Ze zφskan²ch klφΦov²ch slov se pak sestavφ skuteΦn² rejst°φk a bude vypadat na nerozeznßnφ od toho, kter² jsme vytvo°ili v 9. dφlu.

 

Uvedenou situaci demonstruje obr. 8.

 

 

Obr. 8 û Principy tvorby dynamickΘho rejst°φku

 

Mo₧nß se ptßte, k Φemu je takov²to zp∙sob tvorby rejst°φku dobr², kdy₧ editace rejst°φku pomocφ editoru je urΦit∞ pohodln∞jÜφ. Odpov∞dφ je rozÜφ°enß funkΦnost a manipulovatelnost. Pokud se toti₧ rozhodnete pro cestu vklßdßnφ K-klφΦov²ch slov do vaÜich HTML soubor∙, m∙₧ete poΦφtat s t∞mito v²hodami navφc:

 

1. K-klφΦovß slova m∙₧ete pou₧φt podobn²m zp∙sobem, jako A-klφΦovß slova. ╪eΦeno jin²mi slovy, i s pomocφ K-klφΦov²ch slov m∙₧ete prohledßvat cel² systΘm nßpov∞dy a zobrazovat seznamy dalÜφch p°φbuzn²ch tΘmat.

 

2. Prohledßvßnφ systΘmu nßpov∞dy na zßklad∞ K-klφΦov²ch slov je ideßlnφ volbou v situaci, kdy nevφte, jakΘ souΦßsti systΘmu nßpov∞dy budou dostupnΘ na poΦφtaΦi koncovΘho u₧ivatele (uplatn∞nφ zejmΘna p°i pou₧itφ modulßrnφho systΘmu HTML nßpov∞dy). Jednφm dechem ovÜem t°eba dodat, ₧e stejnΘho efektu m∙₧ete dosßhnout i pou₧itφm A-klφΦov²ch slov.

 

á áá

 

 

Tvorba dynamickΘho rejst°φku

Krok 1: Vklßdßnφ K-klφΦov²ch slov do HTML soubor∙

 

 

1. Spus¥te HTML Help Workshop a otev°ete doprovodn² projektov² soubor nßpov∞dy (Rejstrik.HHP).
2. Klepn∞te na zßlo₧ku Contents a poklepejte na druhou obsahovou polo₧ku (TΘma1).
3. Umφst∞te kurzor mezi znaΦky <BODY> a </HTML>.
4. Z nabφdky Edit vyberte polo₧ku Compiler information.
5. V dialogovΘm okn∞ vyberte zßlo₧ku Keywords a aktivujte tlaΦφtko Add.
6. Do textovΘho pole zadejte K-klφΦovΘ slovo, jak zobrazuje obr. 9.

 

 

Obr. 9 û Vklßdßnφ K-klφΦovΘho slova do HTML souboru

 

7. Zm∞ny ulo₧te a kliknutφm na tlaΦφtko OK zav°ete i okno Compiler information.á

 

KompilaΦnφ program nßsledn∞ vlo₧φ do HTML souboru tyto °ßdky:

 

<Object type="application/x-oleobject" classid="clsid:1e2a7bd0-dab9-11d0-b93a-00c04fc99f9e">

ááááááááááá <param name="Keyword" value="TΘma1">

</OBJECT>

 

8. Editovan² HTML soubor ulo₧te a stejn²m zp∙sobem upravte i dalÜφ obsahovou polo₧ku s nßzvem äTΘma2ô, do kterΘ vlo₧te K-klφΦovΘ slovo äTΘma2ô.

 

 

Tvorba dynamickΘho rejst°φku

Krok 2: ┌prava vlastnostφ projektovΘho souboru nßpov∞dy

 

Nynφ musφme kompilßtoru °φct, aby pracoval s K-klφΦov²mi slovy, kterΘ zφskß z p°φsluÜn²ch HTML soubor∙. Ud∞lejte proto nßsledovnφ:

 

1. Vyberte zßlo₧ku Project, klikn∞te na tlaΦφtko Change project options () a nakonec oznaΦte zßlo₧ku Files.
2. Zde zatrhn∞te volbu Include keywords from HTML files (viz obr. 10).

 

 

Obr. 10 û ZaΦlen∞nφ K-klφΦov²ch slov do rejst°φku

 

3. Aktivujte tlaΦφtko OK, ulo₧te cel² projekt a prove∩te kompilaci souboru nßpov∞dy.

 

Kdy₧ spustφte soubor nßpov∞dy, uvidφte, ₧e se v rejst°φku nachßzejφ i ta K-klφΦovß slova, kterß jste zaΦlenili od HTML soubor∙.

 

 

 

Vlastnφ ikony v obsahovΘ struktu°e tΘmat nßpov∞dy (TOC)

 

Auto°i nßpov∞dy zpravidla velmi rßdi vylepÜujφ a rozÜi°ujφ svß ädφlaô vÜemo₧n²mi zp∙soby. A prßv∞ mo₧nost zm∞nit standardnφ ikony stromovΘ struktury tΘmat za svΘ vlastnφ se ukazuje jako vysoce v²hodnß v procesu odliÜenφ se od konkurence. Proto₧e se mnoho Φtenß°∙ zajφmß o tuto problematiku, ukß₧eme si na nßsledujφcφch °ßdcφch, jak na to.

 

Jak pravd∞podobn∞ ji₧ velmi dob°e vφte, kompilßtor vßm nabφzφ 42 ikonov²ch obrßzk∙, kterΘ m∙₧ete ve stromovΘ struktu°e vyu₧φt. Pokud se ovÜem rozhodnete pro za°azenφ vlastnφch ikon, limit ä42ô m∙₧ete docela snadno p°ekroΦit. Prvnφ, co si musφte p°i tvorb∞ nov²ch ikon uv∞domit, je skuteΦnost, ₧e vÜechny ikony jsou uspo°ßdßny v tzv. ikonovΘm prou₧ku. Tento ikonov² prou₧ek si m∙₧ete p°edstavit jako sekvenci filmov²ch polφΦek, ve kterΘ ka₧dΘ polφΦko p°edstavuje jeden obrßzek. Druhou podstatnou v∞cφ je, ₧e tato filmovß polφΦka majφ stejnou v²Üku a Üφ°ku rovnou 16 pixel∙m. A koneΦn∞, t°etφ nezbytnou indiciφ je obrazov² formßt souboru filmov²ch polφΦek, kter² poΦφtß se 16 barvami. P°φklad ikonovΘho prou₧ku je na obr. 11.

 

 

Obr. 11 û Ilustrace ikonovΘho prou₧ku

 

I kdy₧ m∙₧ete vytvo°it ikonov² prou₧ek se zcela nov²mi ikonami a ten potΘ zaΦlenit do projektovΘho souboru nßpov∞dy, m∞li byste mφt na pam∞ti jistß doporuΦenφ, kterß se k tΘto tematice vß₧ou. Je vÜeobecn∞ v²hodnΘ, kdy₧ n∞kolik prvnφch polφΦek p°enechßte standardnφm ikonßm a teprve za n∞ p°idßte svΘ vlastnφ obrßzky. Dßle pamatujte na to, ₧e p°i kompilaΦnφm procesu se nezaΦle≥uje obsah souboru s ikonov²m prou₧kem do finßlnφho souboru nßpov∞dy. To tedy znamenß, ₧e spoleΦn∞ se souborem nßpov∞dy musφte distribuovat i soubor s ikonov²m prou₧kem. Rovn∞₧ nezapome≥te, ₧e vlastnφ ikony v TOC nem∙₧ete pou₧φt, kdy₧ p°i kompilaci mßte aktivovanou volbu Create a binary TOC. Dobrß, to je na zaΦßtek vÜe, a te∩ si p°edve∩me, jak postupovat v praxi.

 

 

Vlastnφ ikony v TOC

Krok 1: Tvorba souboru s ikonov²m prou₧kem

 

 

 

Vlastnφ ikony v TOC

Krok 2: ZaΦlen∞nφ souboru s ikonov²m prou₧kem do projektu

 

1. Otev°ete vßÜ projektov² soubor nßpov∞dy a vyberte zßlo₧ku Contents.
2. Klepn∞te na tlaΦφtko Contents properties () a na zßlo₧ce General zruÜte zatr₧enφ volby Use folders instead of books a naopak zatrhn∞te polφΦko Use custom images from a file.
3. PokraΦujte aktivacφ tlaΦφtka Browse a vyhledejte p°ilo₧en² soubor s ikonov²m prou₧kem (Ikon_prouzek.BMP).
4. èφ°ku obrßzk∙ v ikonovΘm prou₧ku nastavte na hodnotu 16.

 

Po proveden²ch zm∞nßch by m∞la sekce General vypadat takto:

 

Obr. 12 û Editace zßlo₧ky General

 

5. Ulo₧te vßÜ projektov² soubor nßpov∞dy a ukonΦete program HTML Help Workshop.

 

 

 

Vlastnφ ikony v TOC

Krok 3: Nastavenφ vlastnφch ikon v TOC

 

1. Op∞t spus¥te program HHW a otev°ete vßÜ projektov² soubor.
2. Vyberte zßlo₧ku Contents, oznaΦte obsahovou polo₧ku, kterou chcete editovat a klepn∞te na tlaΦφtko Edit selection ().
3. Zvolte zßlo₧ku Advanced a v poli Image index vyberte obrßzek, kter² chcete pou₧φt pro tuto obsahovou polo₧ku. á

 

 

Obr. 13 û V²b∞r ikony

 

4. Klikn∞te na tlaΦφtko OK a rekompilujte soubor nßpov∞dy. V²sledek je zobrazen² na obr. 14.

 

Obr. 14 û U₧ivatelskΘ ikony v TOC

 

V∞°φm, ₧e dneÜnφ hodina änßpov∞dnφ v²chovyô se vßm lφbila.

 

T∞Üφm se na shledanou p°φÜt∞.

 

áJßn Hanßk