Applets met zelfgemaakte rand.

 

 

Hallo Luitjes,

Met dit lesje wilde ik jullie wat meer inzicht geven hoe ik de randen om het applet heb gemaakt.

Eerst begin je de randen natuurlijk te maken in psp.Nog niet zo handig met psp? 
Ga hier eens rondkijken . Lesjes in overvloed :)

Je hebt ten minste 2 stukken nodig :  voor boven en onderkant en , natuurlijk
2 voor de zijkanten.Als voorbeeld, hier zijn ze 2Bl.gif en 1bb.gif
Allebei zijn 40 pixels dik. maar dat kan natuurlijk veranderd worden, naar welke maat dan ook.


Het plaatje dat in bovenstaand applet is gebruikt, wolves2.jpg  is 562 pixels  x 271 pixel

Voor het lake applet gebruiken we de juiste breedte van 562.
De hoogte wordt zoals we wel weten 2 x 271 min 20 = 522 pixels.
Daarom zijn de juiste maten van het bovenstaande applet  562 bij 522 pixels.

Daar de top en de bodemranden rusten op de beide zijkanten van 40 cm. dik.
Moet nu juist wel de breedte maat veranderd worden en blijft de lengtemaat hetzelfde.
Bij de totale breedte van het applet komen er dus aan weeszijden 2 randen van
40 pixels bij. (links en rechts) dus de breedte wordt 562 + 40 ( links)  + 40 (rechts)  = 642 pixels.

De lengte van de zijranden blijven gelijk aan de hoogte van het applet en zijn ook 40 cm. breed.
Dus die worden 40 x 522 pixels.

Nu hebben we natuurlijk nog de code voor de bron nodig. Deze staat hieronder.
Kopieer deze bron en sla hem als htm bestand op in een nieuwe map.

Neem voor de eerste oefening, gewoon dit plaatje over en zet het ook in die map.
Doe hetzelfde met de randen.
Kopieer ook het lake class. er naar toe en je kunt het uitproberen.
Eerst desnoods met een plaatje met dezelfde maten als hierboven. Daarna met een van jezelf.

Het inbrengen in Frontpage gaat weer volgens de oude manier via  Bestand ~importeren.
Of je brengt de code in via Invoegen ~geavanceerd ~htmlcode.

Nadeel vind ik (Maud)  van het laatste,  dat je in het werkschema niet precies ziet, 
waar het applet op de pagina komt te staan .
Heb er dus een andere oplossing voor gevonden.
Importeer als hier boven omschreven. Open dan je geïmporteerde htm bestand.
Staat onderaan in je mappenlijst.
Ga naar de bron (html) van dat bestand. Kopieer het stuk van de applet, dat dus staat tussen
<center> en </center>.

Geef op de pagina waar het applet moet komen op de juiste plaats  een klikje met de muiscursor.
Ga nu op die  pagina naar de hmtl weergave, je ziet een streepje knopperen op de plaats waar je hebt geklikt.Plak daar het gekopieerde stuk.
Ga naar Bestand - Opslaan Als, en nogmaals naar Bestand,
 maar nu klik je op Voorbeeld in Browser.
En je moet het nu keurig zien staan, met kabbelend water en de randen er omheen.

Nu eerst de html code voor bovenstaand applet.

<center>

 

<table border="0" cellpadding="0" cellspacing="0" width="200">

<tr>

<td colspan="3"><img border="0" height="40" width="642" src="1bb.gif"></td>

</tr>

<tr>

<td><img border="0" height="522" width="40" src="2bl.gif"></td>

<td>

<applet code="lake.class" id="lake" width="562" height="522">

<param name="image" value="wolves2.jpg">

</applet></td>

<td><img border="0" height="522" width="40" src="2bl.gif"></td>

</tr>

<tr>

<td colspan="3"><img src="1bb.gif" width="642" height="40"

</td>

</tr>

</table>

</center>


Dus, selecteer, kopieer en plak deze code in kladblok en sla hem op onder een nieuwe naam
in je nieuwe map, waarin zich dus je plaatje , je randen en het lake-class bestand moeten bevinden.

Hou dit mapje als voorbeeld voor applets met randen.

Ga je er straks een met een eigen plaatje maken, maak je dus eerst een nieuwe map aan en
en kopieer je daar het voorbeeld htm bestand en het lake class bestand naar toe.
Zijn daarna alle  nieuwe gegevens van plaatje , maten en randen ingevoegd, sla je het op onder de juiste naam. (die van je eigen keuze dus).

Belangrijk: In de omlijste code zie je op de 10e regel staan  </applet></td>
Het is erg belangrijk dat die 2 (in rood aangegeven)  woordjes op een regel staan, anders

krijg je waarschijnlijk een lelijk gat tussen onderkant applet en je rand.
Zeker als je met Frontpage werkt, kijk dan nog even naar de bron code, want Frontpage zelf
wil die woordjes nog wel eens onder elkaar zetten. Verander dat dan.


Je zou ook nog via het applet kunnen linken naar een andere site of pagina .
Dit stukje wordt behandeld in  de volgende les.  Les 15.

Nog een voorbeeld van deze les staat hier.

Mochten er nog vragen zijn, zal ik zien of ik er een antwoord op kan vinden :))
klik dan hier.


 

 

copyright: Maud de Graaf