Vadnica za prilagajanje predlog HTML

Razli�ica za tiskanje. Razli�ico natisnete z brskalnikovim ukazom Natisni.

Komu je ta vadnica namenjena?

Ta vadnica je namenjena skrbnikom izdelka Host On-Demand, ki �elijo spoznati eno ali ve� naslednjih stvari:

Ta vadnica vklju�uje dejanski primer za izdelavo predloge HTML po meri, ki spremeni stran namizja Host On-Demand. Spremembe vklju�ujejo:

�e �elite izkoristiti informacije v tej vadnici, morate �e poznati naslednje:

Host On-Demand razli�ic 11.0 in 12.0 podpira predloge HTML po meri

Stran namizja Host On-Demand

Stran namizja Host On-Demand je stran HTML, ki prika�e namizje Host On-Demand z ikonami seje.

Spodaj je prikazana privzeta stran namizja Host On-Demand s svetlo sivo obarvanim ozadjem, s pasico IBM Host On-Demand na vrhu in sredinskem oknu namizja Host On-Demand, ki vsebuje ikone konfiguriranih sej.

Privzeta stran namizja HOD

Vzroki za spreminjanje strani namizja Host On-Demand.

Obstajata vsaj dva vzroka za spreminjanje strani namizja Host On-Demand:

  1. �e �elite spremeniti njen videz (na primer barvo ozadja) ali zamenjati pasico IBM Host On-Demand z logotipom va�ega podjetja.
  2. Za dodajanje vsebine. �e �elite na primer dodati dodatno besedilo, povezave na druge spletne strani ali obrazce HTML za zbiranje informacij.

Uporabnost predloge datoteke HTML po meri

Preden so bile na voljo predloge HTML po meri, so bili koraki, potrebni za spreminjanje strani namizja Host On-Demand, naslednji:

  1. Za�enite �arovnik za razmestitev, da izdelate nabor izhodnih datotek.
  2. Uporaba urejevalnika besedila, opravljanje sprememb po meri v glavni datoteki HTML, ki jo je generiral �arovnik za razmestitev.

Ta metoda je bila v ve�ini pogledov zadovoljiva, vendar je imela veliko slabost: �e ste �eleli znova zagnati �arovnika za razmestitev, da bi spremenili stran namizja Host On-Demand, na primer za dodajanje dodatne seje 3270, so bile spremembe po meri, ki ste jih opravili v glavni datoteki HTML, izgubljene.

Natan�neje, �arovnik za razmestitev izdela novo glavno datoteko HTML, ki ne vsebuje va�ih prilagoditev. Tako ste morali ro�no urediti novo glavno datoteko HTML, da ste lahko dodali prilagoditve, tako kot prvi�.

V nasprotju s tem so koraki za predlogo datoteke HTML po meri, potrebni za spreminjanje strani namizja Host On-Demand naslednji:

  1. Prilagoditve dodajte v predlogo datoteke HTML po meri.
  2. Podajte ime predloge datoteke HTML po meri v �arovniku za razmestitev.
  3. Za�enite �arovnik za razmestitev, da izdelate nabor izhodnih datotek.

Prilagoditve se ohranjajo v lo�eni datoteki, zato se ne izgubijo, ko za�enete �arovnika za razmestitev. �e morate �arovnika za razmestitev zagnati znova, da opravite spremembo, kot je na primer dodajanje dodatne seje, bo �arovnik za razmestitev izdelal nove izhodne datoteke, ki vklju�ujejo prilagoditve, podane v predlogi datoteke HTML po meri.

Predlogo datoteke HTML po meri lahko uporabljate s prakti�no kakr�nokoli konfiguracijo �arovnika za razmestitev, vklju�no z naslednjimi:

Napredne teme

V tem razdelku lahko nadaljujete z branjem podrobnih informacij izdelavi dejanske predloge datoteke HTML po meri ali pa se za nekaj �asa ustavite, da spoznate napredne teme.

Opomba: za sledenje glavni niti te vadnice vam ni treba prebrati naprednih tem, vendar pa jih morate razumeti, preden za�nete opravljati dejanske spremembe v namestitvi Host On-Demand.

Kliknite Naprej, da si ogledate podrobne informacije o izdelavi predloge datoteke HTML po meri.

Ali pa preberite napredne teme tako, da kliknete spodnjo temo, ki vas zanima.

Tema 1: Izhodne datoteke �arovnika za razmestitev

Ta tema opisuje dve od datotek, ki se izdelajo, ko za�enete �arovnika za razmestitev:

  1. "Glavna" izhodna datoteka HTML
  2. "Bli�nja" izhodna datoteka HTML

Kot verjetno veste, �arovnik za razmestitev izdela ve� izhodnih datotek, ne samo ene. �tevilo in narava teh datotek sta odvisna od nastavitev, ki ste jih izbrali v �arovniku za razmestitev. Za delo s predlogami datotek HTML po meri morate poznati dve od teh datotek.

Prva datoteka, ki jo bomo imenovali glavna izhodna datoteka HTML, je primarna izhodna datoteka, ki jo izdela �arovnik za razmestitev. To je datoteka, katere ime podate v polju Ime datoteke na zadnji strani �arovnika za razmestitev. Ko ste pripravljeni, kliknite Izdelaj datoteke in izdelajte vse izhodne datoteke �arovnika za razmestitev. To je tudi datoteka:

Druga datoteka, ki jo bomo, ker nimamo bolj�ega izraza, imenovali bli�nja izhodna datoteka HTML, je datoteka, ki vsebuje elemente HTML in stavke JavaScript, ki neposredno generirajo stran namizja Host On-Demand. To je tudi datoteka, v katero �arovnik za razmestitev prekopira elemente HTML in JavaScript, ki ste jih postavili v predlogo datoteke HTML po meri. Zato je to datoteka, v katero morate pogledati, �e �elite razhro��iti te�avo z elementi v predlogi datoteke HTML po meri.

Glavno izhodno datoteko HTML lahko zlahka prepoznate, ker je to datoteka, ki ste jo podali v �arovniku za razmestitev. V tej vadnici je glavna izhodna datoteka HTML StandardSupplies.html.

Bli�njo izhodno datoteko HTML je prav tako enostavno prepoznati.

�arovnik za razmestitev izdela lo�eno bli�njo izhodno datoteko HTML, katere ime se oblikuje tako, da sistem doda dva znaka "z_" na za�etek imena glavne izhodne datoteke HTML. �e je ta vadnica v programu Host On-Demand uporabljala Javo ravni 2 ali novej�o, se prika�e lo�ena bli�nja izhodna datoteka HTML z imenom z_StandardSupplies.html. Glavna izhodna datoteka HTML se �e vedno imenuje StandardSupplies.html.

Tema 2: Datoteka Wizard.html

Datoteka Wizard.html je bistvenega pomena za pravilno delovanje �arovnika za razmestitev. �e predloga datoteke HTML po meri ni podana (obi�ajno ni), �arovnik za razmestitev uporabi informacije v datoteki Wizard.html kot privzeto predlogo za gradnjo bli�nje izhodne datoteke HTML. �e se Wizard.html pokvari, �arovnik za razmestitev lahko ne bo mogel izdelovati izhodnih datotek ali pa bo izdeloval izhodne datoteke, ki ne delujejo pravilno.

Datoteka Wizard.html slu�i �e enemu namenu: to je datoteka, ki vsebuje informacije, potrebne za izdelavo predloge datoteke HTML po meri.

Ker je datoteka Wizard.html tako pomembna za delovanje �arovnika za razmestitev, je ne smete neposredno urejati. Namesto tega lahko izvedete naslednje naloge:

Datoteko Wizard.html boste v dolo�enih primerih lahko �eleli spremeniti. Denimo, da ste �eleli dodati enak dolo�en nabor elementov HTML ali postavk JavaScript na vsako spletno stran, ki ste jo izdelali s �arovnikom za razmestitev. V tem primeru lahko te spremembe dodate v samo datoteko Wizard.html. V tem primeru vam ne bo treba podajati predloge datoteke HTML po meri, vsaki� ko v �arovniku za razmestitev izdelate novo spletno stran. Vendar pa je tudi v tem primeru, �e upo�tevamo upravljanje datotek, verjetno bolje, da spreminjate predlogo datoteke HTML po meri in ne datoteke Wizard.html. �e �e spreminjate Wizard.html, morate najprej vedno izdelati varnostno kopijo, da jo po potrebi lahko obnovite v izvirno stanje!

Tema 3: Format UTF-8

Format predloge datoteke HTML po meri mora biti UTF-8. UTF-8 je standardni format za shranjevanje znakov Unicode. Format datoteke Wizard.html je UTF-8. UTF-8 uporablja unikatno zaporedje 1, 2, 3 ali 4 bajtov za zakodiranje vsakega znaka v naboru znakov Unicode. UTF-8 obravnava vse znake Unicode, vklju�no z jeziki z znaki iz nabora dvobajtnih znakov.

�e se formatiranje UTF-8 za predlogo datoteke HTML po meri pokvari, �arovnik za razmestitev ne bo obdelal datoteke.

�e uporabljate samo znake v spodnjem obsegu 127 znakov tabele ASCII, si pri urejanju predlog datoteke HTML po meri lahko pomagate z urejevalnikom ASCII. Ta obseg vklju�uje angle�ke male in velike �rke, �tevilke in simbole lo�il. Ta pristop deluje zato, ker UTF-8 za te znake uporablja enako enobajtno kodiranje kot ASCII. �e pa uporabljate katerikoli znak v zgornjem obsegu 129 znakov tabele ASCII (to so enobajtni znaki ASCII, za katere UTF-8 uporablja 2 ali ve� bajtov, da jih zakodira), �arovnik za razmestitev lahko ne bo mogel obdelati predloge datoteke HTML po meri ali pa jo bo obdelal druga�e od pri�akovanj.

Zaradi tveganja nenamerne vpeljave znaka v zgornjem obsegu 129 znakov tabele ASCII ne smete uporabljati urejevalnika, ki podpira samo ASCII. Namesto tega uporabljajte urejevalnik, ki podpira UTF-8.

Tema 4: Ra�unalni�ki sistem, ki se uporablja za primere v tej vadnici

�e �elite na spletu slediti tej vadnici, vam ni treba imeti nastavljenega ra�unalni�kega sistema. Vsi zasloni Host On-Demand, ki jih generirajo primeri v tej vadnici, so prikazani kot del same vadnice.

Lahko, da boste �eleli vedeti, kako je bil konfiguriran ra�unalni�ki sistem, uporabljen za izdelavo primerov v tej vadnici:

Sistem je bil nastavljen takole:

  1. Namestite Windows 2012 ali novej�o razli�ico.
  2. Po potrebi posodobite Internet Explorer na razli�ico 11.0.

Stre�nik Host On-Demand je bil nastavljen takole:

  1. Namestite spletni stre�nik in ga aktivirajte.
  2. Namestite Host On-Demand V12.0, ki vklju�uje �arovnika za razmestitev.
  3. Preverite, ali se Upravljalnik storitev Host On-Demand izvaja.

Za vse tri programske funkcije v tej vadnici je bil uporabljen isti sistem:

�e �elite brskalnik zagnati kot odjemalca Host On-Demand na samem stre�niku Host On-Demand, za�enite Internet Explorer in vnesite URL glede na naslednji vzorec:

http://localhost/hod/myfile.html

pri �emer velja naslednje:

V tej vadnici je glavna izhodna datoteka HTML standardsupplies.html, zato je URL:

http://localhost/hod/standardsupplies.html

Tema 5: Razvoj in razhro��evanje

Spremembe boste verjetno �eleli izvajati neposredno v predlogi datoteke HTML po meri, kot to delamo v tej vadnici.

�e imate veliko sprememb, je najbolje, da v predlogo datoteke HTML po meri dodajate po eno spremembo hkrati in po vsaki spremembi preizkusite rezultate.

Kot bli�njico med razvojem lahko v brskalniku za�enete kar predlogo datoteke, da si ogledate rezultate. Tako vam ni treba znova generirati izhodnih datotek �arovnika za razmestitev. V tej vadnici bi lahko na primer v brskalniku zagnali datoteko sstemplate.html in si ogledali rezultate. Ko zaklju�ite s spreminjanjem in preizkusite vse spremembe, znova generirajte izhodne datoteke �arovnika za razmestitev.

Drug pristop je neposredno spreminjanje bli�nje izhodne datoteke. Vsako spremembo posebej preizkusite tako, da v brskalniku za�enete bli�njo izhodno datoteko HTML. Ko ste zadovoljni z na�inom delovanja sprememb, spremembo premaknite iz bli�nje izhodne datoteke HTML v predlogo datoteke HTML po meri in znova generirajte izhodne datoteke �arovnika za razmestitev. Nato opravite naslednjo spremembo in jo preizkusite.

Obdr�ite varnostne kopije!

Izdelovanje predloge datoteke HTML po meri

V tem scenariju bomo izdelali dejansko predlogo datoteke HTML po meri za hipoteti�no podjetje z imenom Standard Supplies, Inc.

Predpostavljamo, da se Upravljalnik storitev Host On-Demand razli�ice 12.0 izvaja v sistemu Windows 2012 in da se na istem sistemu izvaja tudi �arovnik za razmestitev. Poleg tega predpostavljamo, da za zagon odjemalca Host On-Demand uporabljamo Microsoft Internet Explorer v sistemu Windows 2012.

Za ve� informacij o konfiguraciji ra�unalni�kega sistema, s katerim so bili izdelani ti vzor�ni zasloni, obi��ite Napredne teme.

Korak 1 S �arovnikom za razmestitev izdelajte datoteke za privzeto stran namizja Host On-Demand

Korak 9 Razumite, kako znova generirati izhodne datoteke �arovnika za razmestitev
Korak 2 Izdelajte predlogo datoteke HTML po meri Korak 10 Zamenjava pasice
Korak 3

Predlogo datoteke HTML po meri pove�ite z datoteko �arovnika za razmestitev

Korak 11

Spreminjanje ozadja

Korak 4

Ogled posodobljene datoteke �arovnika za razmestitev

Korak 12

Dodajanje besedila

Korak 5

Zmanj�ajte velikost okna sej Host On-Demand

Korak 13

Dodajanje slik kot hiperpovezav

Korak 6

Z urejevalnikom, ki podpira UTF-8, si oglejte predlogo datoteke HTML po meri

Korak 14 Dodajanje obrazca
Korak 7

Razumite, kje v predlogi datoteke HTML po meri lahko opravljate spremembe

Korak 15

Dodajanje JavaScripta

Korak 8

Bodite pozorni na element HTML CENTER

Korak 16

Dodajanje parametra seje

Korak Korak 1: S �arovnikom za razmestitev izdelajte datoteke za privzeto stran namizja Host On-Demand

Za�enita �arovnika za razmestitev, nato pa z naslednjimi nastavitvami izdelajte datoteke �arovnika za razmestitev za privzeto stran namizja Host On-Demand za podjetje Standard Supplies, Inc.

  1. Dobrodo�li na strani �arovnika za razmestitev Host On-Demand
  2. Stran Konfiguracijski model
  3. Stran sej gostitelja
  4. Stran Dodatne mo�nosti
  5. Ime datoteke in format izhodnih podatkov

Z brskanjem izberite StandardSupplies.html kot odjemalca Host On-Demand.

Nastala stran namizja Host On-Demand se prika�e spodaj. To je privzeta stran namizja Host On-Demand.

Privzeta stran namizja HOD

Korak Korak 2: Izdelajte predlogo datoteke HTML po meri

Opomba: datoteke Wizard.html ne smete izbrisati ali spremeniti!

�e �elite izvedeti ve� o datoteki Wizard.html, obi��ite Napredne teme.

  1. Datoteko Wizard.html prekopirajte v drugo datoteko, tako da jo lahko uporabljamo kot osnovo za vse bodo�e predloge datotek HTML po meri, ki jih bomo lahko izdelali. To storimo zato, da zmanj�amo tveganje, da bi se datoteka Wizard.html nenamerno pokvarila.

    cd c:\Program Files\IBM\HostOnDemand\HOD
    copy Wizard.html CustomTemplate.html

  2. Prekopirajte datoteko CustomTemplate.html, da jo bomo lahko uporabljali kot lastno predlogo datoteke HTML po meri za podjetje Standard Supplies, Inc.

    cd c:\Program Files\IBM\HostOnDemand\HOD
    copy CustomTemplate.html sstemplate.html

Korak Korak 3: Predlogo datoteke HTML po meri pove�ite z datoteko �arovnika za razmestitev

S �arovnikom za razmestitev uredite datoteko StandardSupplies.html.

Spodaj je prikazan zavihek Drugo v podoknu Napredne mo�nosti.

Zavihek Drugo v podoknu Napredne mo�nosti

Korak Korak 4: Ogled posodobljene datoteke �arovnika za razmestitev

Z brskalnikom za�enite StandardSupplies.html kot odjemalca Host On-Demand. Znova si oglejte stran namizja Host On-Demand, kot je prikazana v zgornjem koraku 1.

Stran namizja Host On-Demand se po videzu ni spremenila. Vzrok za to je, da uporabljamo privzeto predlogo datoteke HTML po meri, ki ni bila spremenjena.

Privzeta stran namizja HOD

Korak Korak 5: Zmanj�ajte velikost okna sej Host On-Demand

Ta korak za pripravo ne potrebuje predloge HTML po meri. Namen tega koraka je, da bodo uporabniki la�je videli preostanek strani namizja Host On-Demand, kar dose�ete tako, da zmanj�ate velikost okna sej.

S �arovnikom za razmestitev uredite datoteko StandardSupplies.html.

Z brskalnikom za�enite StandardSupplies.html kot odjemalca Host On-Demand. Nastala privzeta stran namizja Host On-Demand se prika�e spodaj. Videli boste, da je okno sej manj�e od okna v koraku 4.

Stran namizja z manj�im oknom sej

Korak Korak 6: Z urejevalnikom, ki podpira UTF-8, si oglejte predlogo datoteke HTML po meri

Format predlog datoteke HTML po meri mora biti UTF-8. Urejevalnik Bele�nica, ki je na voljo v sistemih Microsoft Windows 2000 in with Windows XP, podpira UTF-8. Urejevalnik Bele�nica, ki je na voljo v sistemu Windows NT, tega ne podpira!

�e �elite v Bele�nici shraniti datoteko v formatu UTF-8, storite naslednje:

Za ve� informacij o formatu UTF-8 obi��ite Napredne teme.

Spodaj je prikazano okence sporo�ila Shrani kot v Bele�nici z izbranim formatom UTF-8.

Okence sporo�ila Shrani kot v Bele�nici

Korak Korak 7: Razumite, kje v predlogi datoteke HTML po meri lahko opravljate spremembe

Opomba: predlogo datoteke HTML po meri spreminjajte samo v tistih razdelkih, ki smo jih dolo�ili v tem koraku.

�e spremenite druge dele te datoteke, lahko postane neuporabna za �arovnika za razmestitev.

Poleg tega ne spreminjajte niti komentarjev HTML, ki se pojavijo v privzeti predlogi datoteke HTML po meri, vklju�no z naslednjim:

Vsebina privzete predloge datoteke HTML po meri je prikazana spodaj.

<!doctype html public "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<META http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- SUMMARY -->
</HEAD>

<BODY BACKGROUND="<DW_CODE_BASE>hodbkgnd.gif">
<CENTER>
<IMG src="<DW_CODE_BASE>hodlogo.gif" ALT="hodlogo.gif">
<P>

<!-- STARTAPPLETPARMS -->
<!-- ENDAPPLETPARMS -->

<!-- SCRIPTS -->
<!-- APPLET -->

</CENTER>
</BODY>
</HTML>

Trije razdelki te datoteke, v katerih lahko opravljate spremembe, so:

  1. Razdelek med oznako <BODY> in komentarjem <!-- STARTAPPLETPARMS -->.
  2. Razdelek med komentarjema <!-- STARTAPPLETPARMS --> in <!--ENDAPPLETPARMS -->.
  3. Razdelek med komentarjem <!-- APPLET --> in oznako </BODY>.

Korak Korak 8: Bodite pozorni na element HTML CENTER

Vsebina privzete predloge datoteke HTML po meri je znova prikazana spodaj.

Ne pozabite, da ta datoteka vsebuje element CENTER. Za�ne se z oznako <CENTER>, ki je takoj za oznako <BODY>, in se kon�a z oznako </CENTER>, ki je tik pred oznako </BODY>. Ti oznaki sta spodaj prikazani krepko.

Kot verjetno veste, so za vsak element HTML, ki ima vizualne izhodne podatke in ki se pojavi v elementu CENTER, vizualni izhodni podatki vodoravno sredinsko poravnani prek strani HTML, ko brskate po njej. Tako je na primer pasica Host On-Demand na privzetem namizju Host On-Demand, prikazanem v koraku 5, vodoravno sredinsko poravnan prek strani HTML.

�e ne �elite, da so dolo�eni elementi HTML poravnani sredinsko, lahko element CENTER izbri�ete. Elemente CENTER lahko dodajate tudi drugam, v kolikor boste spremenili samo veljavne razdelke datoteke, opisane v koraku 7.

!doctype html public "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<META http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- SUMMARY -->
</HEAD

<BODY BACKGROUND="<DW_CODE_BASE>hodbkgnd.gif">
<CENTER>
<IMG src="<DW_CODE_BASE>hodlogo.gif" ALT="hodlogo.gif">
<P>

<!-- STARTAPPLETPARMS -->
<!-- ENDAPPLETPARMS -->

<!-- SCRIPTS -->
<!-- APPLET -->

</CENTER>
</BODY>
</HTML>

Korak Korak 9: Razumite, kako znova generirati izhodne datoteke �arovnika za razmestitev

Potem ko opravite spremembe v predlogi datoteke HTML po meri, morate znova generirati datoteko �arovnika za razmestitev, ki se sklicuje na predlogo datoteke HTML po meri, da boste vklju�ili spremembe.

V tej vadnici se predloga datoteke HTML po meri imenuje sstemplate.html, datoteka �arovnika za razmestitev, na katero se sklicuje, pa je StandardSupplies.html. Ko spremenimo datoteko sstemplate.html, moramo znova generirati datoteko StandardSupplies.html, da bodo upo�tevane spremembe v datoteki sstemplate.html. (�arovnik za razmestitev poleg datoteke StandardSupplies.html generira tudi nekaj drugih povezanih izhodnih datotek, ne glede na to, ali je predloga datoteke HTML po meri prisotna ali ne.)

�e �elite znova generirati datoteke �arovnika za razmestitev, storite naslednje:

Korak Korak 10: Zamenjava pasice

V tem koraku bomo pasico IBM Host On-Demand na vrhu strani zamenjali s pasico podjetja Standard Supplies, Inc.

  1. V predlogi datoteke HTML po meri zamenjajte obstoje�o vrstico elementa z naslednjo:

    <IMG id="topholder" src="<DW_CODE_BASE>sslogo.gif" ALT="sslogo.gif">

    Dve pojavitvi datoteke "hodlogo.gif" smo zamenjali z datoteko "sslogo.gif", ki vsebuje novo sliko pasice. Poleg tega smo dodali identifikator "id=topholder", ki ga bomo uporabili v poznej�em koraku.  Niz <DW_CODE_BASE> se zamenja z dejansko lokacijo objavnega imenika Host On-Demand.

    Oglejte si predlogo datoteke HTML po meri za ta korak.
  2. Shranite in zaprite datoteko predloge HTML po meri.

  3. Novo datoteko GIF prekopirajte v objavni imenik Host On-Demand.

    copy sslogo.gif c:\Program Files\IBM\HostOnDemand\HOD



  4. Znova generirajte izhodne datoteke �arovnika za razmestitev.

Nastala spletna stran je prikazana spodaj. Na vrhu strani je pasica podjetja Standard Supplies, Inc.

Stran namizja s pasico podjetja Standard Supplies

Korak Korak 11: Spreminjanje ozadja

V tem razdelku bomo zavrgli svetlo sivo obarvan vzorec ozadja privzete strani namizja Host On-Demand in uporabili navadno belo ozadje, ki se bo bolje zlivalo z na�o pasico. Tu so koraki:

  1. Obstoje�o vrstico elementa <BODY> zamenjajte z naslednjo vrstico:

    <BODY>

    Oglejte si spremenjeno predlogo datoteke HTML po meri.

  2. Shranite in zaprite datoteko predloge HTML po meri.

  3. Znova generirajte izhodne datoteke �arovnika za razmestitev.

Nastala spletna stran je prikazana spodaj.

�e �elite, si lahko ogledate �e druga dva na�ina, na katera lahko spremenimo ozadje.

Tu je spletna stran z novim, belim ozadjem.

Stran namizja z belim ozadjem

Predloga datoteke HTML po meri za korak 11

<!doctype html public "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<META http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- SUMMARY -->
</HEAD>

<BODY>
<CENTER>
<IMG id="topholder" src="<DW_CODE_BASE>sslogo.gif" ALT="sslogo.gif">
<P>

<!-- STARTAPPLETPARMS -->
<!-- ENDAPPLETPARMS -->

<!-- SCRIPTS -->
<!-- APPLET -->

</CENTER>
</BODY>
</HTML>

Druga�en vzorec ozadja za korak 11

<BODY BACKGROUND="<DW_CODE_BASE>ssbg1.gif">

Stran namizja z druga�nim vzorcem ozadja

Druga�na barva ozadja za korak 11

<BODY bgcolor="silver" >

Stran namizja z druga�no barvo ozadja

Korak Korak 12: Dodajanje besedila

V tem koraku bomo nad okno sej dodali smiselno besedilo.

  1. Za element <P>, ki se pojavi za elementom <IMG>, dodajte naslednje 3 vrstice.

    <h2>Sistemski dostop</h2>
    �tevilka za pomo� s sistemom: 1-888-555-5555<br>
    <p>

    Oglejte si spremenjeno predlogo datoteke HTML po meri.

  2. Shranite in zaprite datoteko predloge HTML po meri.

  3. Znova generirajte izhodne datoteke �arovnika za razmestitev

Nastala spletna stran je prikazana spodaj. Dodali smo napis "Sistemski dostop" in telefonsko �tevilko pomo�i.

Stran namizja z dodanim besedilom

Predloga datoteke HTML po meri za korak 12

<!doctype html public "-//W3C//DTD HTML 3.2 Final//EN">


<HTML>
<HEAD>
<META http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- SUMMARY -->
</HEAD>

<BODY>
<CENTER>
<IMG id="topholder" src="<DW_CODE_BASE>sslogo.gif" ALT="sslogo.gif">
<P>
<h2>Sistemski dostop</h2>
�tevilka za pomo� s sistemom: 1-888-555-5555<br>
<p>

<!-- STARTAPPLETPARMS -->
<!-- ENDAPPLETPARMS -->

<!-- SCRIPTS -->
<!-- APPLET -->

</CENTER>
</BODY>
</HTML>

Korak Korak 13: Dodajanje slik kot hiperpovezav

V tem koraku bomo dodali nabor �tirih hiperpovezav poleg vrha spletne strani. Da bodo te povezave privla�nej�e, jih bomo razporedili v tabelo in za vsako povezavo uporabljali druga�no sliko. Dodali bomo tudi napis "Notranje povezave".

  1. Za element <IMG>, ki prikazuje pasico, dodajte naslednje vrstice.

    <p>
    <h2>Notranje povezave</h2>
    <table>
    <tr><td>
    <a name="aerogif" href="#aerolinks"><img src="aero.gif" Border="0"></a>
    </td><td>
    <a name="autogif" href="#autolinks"><img src="auto.gif" Border="0"></a>
    </td><td>
    <a name="chemgif" href="#chemlinks"><img src="chem.gif" Border="0"></a>
    </td><td>
    <a name="elecgif" href="#eleclinks"><img src="elec.gif" Border="0"></a>
    </td></tr>
    </table>

    Podani sklici na povezave, kot so na primer href="#aerolinks", href="#autolinks" in drugi, se sklicujejo na cilje, ki ne obstajajo. To pomeni, da identifikatorji "aerolinks", "autolinks", "chemlinks" in "eleclinks" niso veljavni sklici na povezave na trenutni strani.

    V dejanski implementaciji podate dejansko obstoje�e sklice na povezave.

    Oglejte si spremenjeno predlogo datoteke HTML po meri.

  2. Nove datoteke GIF prekopirajte v objavni imenik Host On-Demand.

    copy aero.gif c:\Program Files\IBM\HostOnDemand\HOD
    copy auto.gif c:\Program Files\IBM\HostOnDemand\HOD
    copy chem.gif c:\Program Files\IBM\HostOnDemand\HOD
    copy elec.gif c:\Program Files\IBM\HostOnDemand\HOD

  3. Shranite in zaprite datoteko predloge HTML po meri.

  4. Znova generirajte izhodne datoteke �arovnika za razmestitev.

Nastala spletna stran je prikazana spodaj. �e smo podali dejansko obstoje�e sklice na povezave, bi s klikom posamezne slike povzro�ili, da bi brskalnik sko�il na povezan sklic na povezavo.

Stran namizja s slikami kot hiperpovezavami

Predloga datoteke HTML po meri za korak 13

<!doctype html public "-//W3C//DTD HTML 3.2 Final//EN">


<HTML>
<HEAD>
<META http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- SUMMARY -->
</HEAD>

<BODY>
<CENTER>
<IMG id="topholder" src="<DW_CODE_BASE>sslogo.gif" ALT="sslogo.gif">
<p>
<h2>Notranje povezave</h2>
<table>
<tr><td>
<a name="aerogif" href="#aerolinks"><img src="aero.gif" Border="0"></a>
</td><td>
<a name="autogif" href="#autolinks"><img src="auto.gif" Border="0"></a>
</td><td>
<a name="chemgif" href="#chemlinks"><img src="chem.gif" Border="0"></a>
</td><td>
<a name="elecgif" href="#eleclinks"><img src="elec.gif" Border="0"></a>
</td></tr>
</table>

<p>
<h2>Sistemski dostop</h2>
�tevilka za pomo� s sistemom: 1-888-555-5555<br>
<p>

<!-- STARTAPPLETPARMS -->
<!-- ENDAPPLETPARMS -->

<!-- SCRIPTS -->
<!-- APPLET -->

</CENTER>
</BODY>
</HTML>

Korak Korak 14: Dodajanje obrazca

V tem koraku bomo na dno strani dodali preprost obrazec za poro�ilo o te�avi.

  1. Za vrstico, ki vsebuje komentar <!-- APPLET -->, dodajte te vrstice.

    <br>
    <br>
    <h2 id=problem> Prijavite te�avo </h2>
    <FORM id=fmReport method="get" action="report.html" >
    Ime: <input type="text" name=txtName ><br><br>
    ID uslu�benca: <input type="text" name=txtID ><br><br>
    <input type="hidden" name="txtOS" >
    Opis te�ave<br>
    <textarea name=txaDesc rows=4 cols=40></TEXTAREA><BR><BR>
    <input type="submit" name="btnSubmit" value="Predlo�i poro�ilo">
    <input type="reset" name=btnReset>
    </FORM>
    <br>
    <br>
    <a href="#topholder">Nazaj na vrh</a> nt>


    Na vrh tega razdelka smo dodali napis "Prijavite te�avo". Na dno tega razdelka smo dodali hiperpovezavo, ki vodi nazaj na vrh strani.

    Element FORM vsebuje �tiri vnosna polja in dva gumba:


    V elementu FORM smo podali

    method="get", tako da bo vsebina vnosnih polj dodana kot pari imen ali vrednosti na konec URL-ja, ko uporabnik pritisne gumb Predlo�i. Podali smo naslednje:

    action="report.html". Datoteka report.html je datoteka na stre�niku, ki vsebuje kodo JavaScript za obdelavo vrednosti.



    Metodo "get" smo v tej vadnici izbrali, ker jo je la�je implementirati v dejanski kodi. Pri oblikovanju lastne strani morate upo�tevati priporo�ila organizacije World Wide Web Consortium (W3C) in uporabljati

    method="post" ter nastaviti

    action= na ime datoteke obdelovalnega skripta, kot je datoteka PERL, ki se nahaja na stre�niku.

    Datoteka report.html v tej vadnici podatke samo prika�e v ponazorilne namene in jih je ne obdela.

    Oglejte si JavaScript v datoteki report.html.

    Oglejte si spremenjeno predlogo datoteke HTML po meri.

  2. Shranite in zaprite datoteko predloge HTML po meri.

  3. Znova generirajte izhodne datoteke �arovnika za razmestitev.

Nastala spletna stran je prikazana spodaj.

Ko pritisnete gumb Predlo�i, brskalnik sko�i na report.html.
Oglejte si stran, ki jo je generirala datoteka report.html.

 

Stran namizja z obrazcem

JavaScript v datoteki report.html za korak 14

<SCRIPT LANGUAGE="JavaScript">
var astrParms;
var astrItems;
var strValue;

var strInput = window.location.search.substring(1)
document.write( "<h3> Rezultati obdelave s strani datoteke report.html: </h3>" ) ;
<!-- document.write( strInput + "<br>"); -->

if ( ( strInput!= null ) && ( strInput.length > 1 ) )
{
<!-- Argumente med seboj razdelite -->
astrParms = strInput.split( '&' );

<!-- Ime obdelave -->
astrItems = astrParms[ 0 ].split( '=' );
strValue = astrItems[ 1 ];
strValue = strValue.replace( '+', " " );
document.write( "<h4>Ime je: </h4>" );
if ( strValue.length== 0 )
{
document.write( "Manjka!" );
}
else
{
document.write( strValue );
}

<!-- Obdelaj ID uslu�benca -->
astrItems = astrParms[ 1 ].split( '=' );
strValue = astrItems[ 1 ];
strValue = strValue.replace( '+', " " );
document.write( "<h4>ID uslu�benca je: </h4>" );
if ( strValue.length== 0 )
{
document.write( "Manjka!" );
}
else
{
document.write( strValue );
}

<!-- OS obdelave -->
astrItems = astrParms[ 2 ].split( '=' );
strValue = replaceChars( astrItems[ 1 ] );
document.write( "<h4>Uporabnikov OS je: </h4>" );
document.write( strValue );

<!-- Poro�ilo obdelave -->
astrItems = astrParms[ 3 ].split( '=' );
strValue = replaceChars( astrItems[ 1 ] );
document.write( "<h4>Besedilo poro�ila o te�avi je: </h4>" ) ;
if ( strValue.length <= 0 )
{
document.write( "Manjka!" );
}
else
{
document.write( strValue );
}
}
else
{
document.write( "Vhodni niz je bil prazen!" );
}

document.write( "<br><br><hr>" ) ;
document.write( "<h3> Vrnite se na prej�njo stran! </h3>" ) ;

function replaceChars( strInput )
{
var strTmp = strInput;
strTmp = replaceCh( strTmp, "+" );
strTmp = replaceCh( strTmp, "%0D" );
strTmp = replaceCh( strTmp, "%0A" );

return strTmp;
}

function replaceCh( strInput, strChar )
{
var i;
var strTmp = strInput;

for ( i = 0; i < 1024; i++ )
{

if ( strTmp.indexOf( strChar )!= -1 )


{
strTmp = strTmp.replace( strChar, " " );
}
else
{
break;
}
}
return strTmp;
}

</SCRIPT>

Predloga datoteke HTML po meri za korak 14

<!doctype html public "-//W3C//DTD HTML 3.2 Final//EN">


<HTML>
<HEAD>
<META http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- SUMMARY -->
</HEAD>

<BODY>
<CENTER>
<IMG id="topholder" src="<DW_CODE_BASE>sslogo.gif" ALT="sslogo.gif">
<p>
<h2>Notranje povezave</h2>
<table>
<tr><td>
<a name="aerogif" href="#aerolinks"><img src="aero.gif" Border="0"></a>
</td><td>
<a name="autogif" href="#autolinks"><img src="auto.gif" Border="0"></a>
</td><td>
<a name="chemgif" href="#chemlinks"><img src="chem.gif" Border="0"></a>
</td><td>
<a name="elecgif" href="#eleclinks"><img src="elec.gif" Border="0"></a>
</td></tr>
</table>
<p>
<h2>Sistemski dostop</h2>
�tevilka za pomo� s sistemom: 1-888-555-5555<br>
<p>

<!-- STARTAPPLETPARMS -->
<!-- ENDAPPLETPARMS -->

<!-- SCRIPTS -->
<!-- APPLET -->
<br>
<br>
<h2 id=problem> Prijavite te�avo </h2>
<FORM id=fmReport method="get" action="report.html" >
Ime: <input type="text" name=txtName ><br><br>
ID uslu�benca: <input type="text" name=txtID ><br><br>
<input type="hidden" name="txtOS" >
Opis te�ave<br>
<textarea name=txaDesc rows=4 cols=40></TEXTAREA><BR><BR>
<input type="submit" name="btnSubmit" value="Predlo�i poro�ilo">
<input type="reset" name=btnReset>
</FORM>
<br>
<br>
<a href="#topholder">Nazaj na vrh</a>

</CENTER>
</BODY>
</HTML>

Stran, ki jo generira report.html za korak 14

Stran, ki jo je izdelala datoteka report.html

Korak Korak 15: Dodajanje JavaScripta

V tem koraku bomo dodali funkcijo JavaScript, ki bo delno obdelala obrazec, preden bo predlo�en. Ta funkcija JavaScript iz sistema prebere niz, ki identificira platformo ("Win32"), in ga zapi�e v skrito polje obrazca.

  1. V gumb Predlo�i dodajte "onfocus=setValues()".

    <input type="submit" name="btnSubmit" onfocus=setValues() value="Predlo�i poro�ilo">



    S to spremembo boste povzro�ili, da se pokli�e nova funkcija JavaScript setValues(), ko gumb Predlo�i prejme �ari��e vnosa.

  2. Funkcijo JavaScript setValues() dodajte za sidrni element, ki vsebuje besedilo "Nazaj na vrh":

    <SCRIPT LANGUAGE="JavaScript">
    function setValues()
    {
    var ael = fmReport.elements;
    var os = ael[ 2 ];
    os.value = navigator.platform;
    }
    </SCRIPT>

    Funkcija setValues() vsebuje 3 vrstice. Preglejmo posamezno vrstico.

  3. Znova generirajte izhodne datoteke �arovnika za razmestitev.

 

Nastala spletna stran je prikazana spodaj. Stran je videti enaka kot v koraku 14, ker nismo dodali vidne vsebine. Ko pa gumb Predlo�i prejme �ari��e vnosa, funkcija JavaScript setValues() prebere niz informacij o platformi ("Win32") in ga zapi�e v skrito polje. Ko kliknete gumb Predlo�i, se vsebina skritega polja predlo�i skupaj z vsebino drugih vnosnih polj.

Vsebina datoteke report.html je enaka kot v koraku 14.

Oglejte si stran, ki jo je generirala datoteka report.html. Opazili boste, da je za Informacije o platformi zdaj prikazan niz "Win32".

Stran namizja z JavaScriptom

Predloga datoteke HTML po meri za korak 15

<!doctype html public "-//W3C//DTD HTML 3.2 Final//EN"> <!doctype html public "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<META http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- SUMMARY -->
</HEAD>

<BODY>
<CENTER>
<IMG id="topholder" src="<DW_CODE_BASE>sslogo.gif" ALT="sslogo.gif">
<p>
<h2>Notranje povezave</h2>
<table>
<tr><td>
<a name="aerogif" href="#aerolinks"><img src="aero.gif" Border="0"></a>
</td><td>
<a name="autogif" href="#autolinks"><img src="auto.gif" Border="0"></a>
</td><td>
<a name="chemgif" href="#chemlinks"><img src="chem.gif" Border="0"></a>
</td><td>
<a name="elecgif" href="#eleclinks"><img src="elec.gif" Border="0"></a>
</td></tr>
</table>
<p>
<h2>Sistemski dostop</h2>
�tevilka za pomo� s sistemom: 1-888-555-5555<br>
<p>

<!-- STARTAPPLETPARMS -->
<!-- ENDAPPLETPARMS -->

<!-- SCRIPTS -->
<!-- APPLET -->
<br>
<br>
<h2 id=problem> Prijavite te�avo </h2>
<FORM id=fmReport method="get" action="report.html" >
Ime: <input type="text" name=txtName ><br><br>
ID uslu�benca: <input type="text" name=txtID ><br><br>
<input type="hidden" name="txtOS" >
Opis te�ave<br>
<textarea name=txaDesc rows=4 cols=40></TEXTAREA><BR><BR>
<input type="submit" name="btnSubmit" onfocus=setValues() value="Predlo�i poro�ilo">
<input type="reset" name=btnReset>
</FORM>
<br>
<br>
<a href="#topholder">Nazaj na vrh</a>


<SCRIPT LANGUAGE="JavaScript">
function setValues()
{
var ael = fmReport.elements;
var os = ael[ 2 ];
os.value = navigator.platform;
}
</SCRIPT>

</CENTER>
</BODY>
</HTML>

Stran, ki jo generira report.html za korak 15

Stran, ki jo generira report.html

Korak Korak 16: Dodajanje parametrov seje

Parametri seje so parametri HTML, posredovani v aplikacijski program�ek Host On-Demand, ki vplivajo na njegovo vedenje na dolo�ene na�ine. Ve� o razli�nih tipih parametrov sej lahko izveste v spletni dokumentaciji za Host On-Demand.

�e �elite dodati sejo v predlogo datoteke HTML po meri, postavite parameter med vrstici komentarja <!-- STARTAPPLETPARMS --> in <!-- ENDAPPLETPARMS -->. Med ti dve vrstici razen parametrov seje ne postavljajte nobenih stavkov.

Parametre seje podajajte v obliki <PARAM=name VALUE=value>. Naslednji primer ka�e parameter Disable session in IgnoreWellKnownTrustedCAs.

<!-- STARTAPPLETPARMS -->
<PARAM NAME="Disable" VALUE="cutpaste;filexfer3270;filexfer5250">
<PARAM NAME="IgnoreWellKnownTrustedCAs" VALUE="true">
<!-- ENDAPPLETPARMS -->

Zaklju�ek

V vadnici so opisane naslednje teme:

S predlogo HTML po meri smo na stran namizja Host On-Demand dodali naslednje informacije: