34. En ramme med runde kanter - teknikken

Indledning

Du skal nu oprette en tabel, som benytter sig af rammerne du lavede i Kapitel 33. Du skal bruge almindelig HTML, stylesheets og PHP.

I princippet skal tabellen opbygges ved hjælp af 3 rækker med 3 celler. Altså 9 celler i alt. Den midterste celle skal bruges til indholdet. Se eksemplet herunder. De farvede felter skal indeholde rammen:

Forberedelse

1. Opret en ny mappe og giv den navnet rammer
2. Download derefter disse grafik-stumper til mappen:
   • 
   • 
   • 
   • 
   • 
   • 
   • 
   • 
3. Opret derefter en ny side i WebWrite og gem den i mappen du lige oprettede med navnet ramme.php
   OBS: Det er vigtigt at gemme den som .php, da vi skal bruge nogle php-funktioner senere.

Opret tabel

1. Opret en tabel med 3 kolonner og 3 rækker:
   
2. 
   Din tabel skulle se således ud:
   

   <table>
   <tr>
   	<td></td>
   	<td></td>
   	<td></td>
   </tr>
   <tr>
   	<td></td>
   	<td></td>
   	<td></td>
   </tr>
   <tr>
   	<td></td>
   	<td></td>
   	<td></td>
   </tr>
   </table>
   	

Indsæt hjørnerne

Du indsætter hjørnerne til rammen på den helt almindelige måde:

1. Indsæt billedet top_left.gif i den øverste venstre celle
2. Indsæt billedet top_right.gif i den øverste højre celle
3. Indsæt billedet buttom_left.gif i den nederste venstre celle
4. Indsæt billedet top_right.gif i den nederste højre celle

Indsæt kanterne

Vi ved ikke hvor bred tabellen skal være eller hvor høj. Det er meningen at tabellen automatisk indretter sig efter indholdet. Derfor skal rammerne kunne blive kortere eller længere efter behov.

Vi kan derfor ikke sætte grafik-stumperne med rammerne ind på almindelig vis, men vi skal bruge stylesheet til at placere grafikken som baggrundsbillede til de celler, der skal indeholde de lige kanter:

1. Højreklik på den øverste og midterste celle (dvs. på koden <td>)
2. Klik på knappen Avanceret
3. Klik derefter på knappen udfor Typografi-boksen:
   
4. Find egenskaben background-image
5. Vælg: [url(grafik)]
   
6. Vælg filen top_mid.gif
7. Klik OK til du er tilbage i WebWriter
8. Indsæt nu på samme måde:
   • mid_left.gif i venstre side
   • mid_right.gif i højre side
   • buttom_mid.gif i bunden i midten
9. Hvis du har lavet det rigtigt, så ser din tabel nu således ud:
   
   (ikke særlig imporende, vel)

Fyld indhold i tabellen

Du skal lige lave et hurtigt array med vinderne fra sidste uge (f.eks.):

1. Skriv således øverst i din hjemmeside (før alle HTML-koder):
   

   <?
   // et array med vinderne fra sidste uge
   $navn[] = "Pia";
   $navn[] = "Niels";
   $navn[] = "Hanne";
   $navn[] = "Anders";
   $navn[] = "Grethe";
   $navn[] = "Bodil";
   ?>
   

2. Du skal bruge en tabel til at vise indholdet af arrayet (det er der en mening med, som jeg kommer tilbage til senere):
   Sæt markøren i den midterste celle i tabellen med rammerne.
3. Skriv således:
   

   <table>
   
   
   </table>
   

4. Du skal nu indsætte en løkke i PHP, der kan vise vindernavnene i tabellen.
   Sæt markøren lige under den <table>-kode du lige har lavet.
5. Skriv således:
   

   <?
   foreach ($navn as $n)
    {
     echo "<tr>";
     echo "<td>";
     echo "$n</td> </tr>";
    }
   ?>
   

   Du burde nu få en tabel, der ser nogenlunde således ud:
   
   ...ikke helt god endnu. Der skal justeres lidt i tabellens egenskaber.
6. Højreklik på <table>-koden
7. Indstil Afstand mellem celler og Afstand fra tekst til cellevæg til 0
   
8. Så ser det ud som det skal:
   

Skiftende baggrundsfarve

Den sidste del her er lidt ekstra lir, der kan gøre tabellen (den inderste med navnene) lidt lette at aflæse. Specielt hvis det drejer sig om en tabel, hvor hver række fylder meget i bredden.

Til dette skal du bruge:

• Stylesheets: en mørk baggrund og en hvid baggrund (eller en uden farve)
• En tæller, der tæller 1 op
• En PHP-funktion, der kan beregne om tælleren er lige eller ulige.

To stylesheets-klassifikationer

Vi starter med stylesheets. Denne tabel er jo holdt i sorte og hvide farver, med en smule gråt til skygge. Vi laver derfor 2 klassifikationer: en grå baggrund og en hvid baggrund

1. Øverst i head-delen af HTML-siden skriver du følgende stylesheet (brug evt. WebWriters Stylesheet-editor):

   <style type="text/css">
   .lys {
   	background-color:#FFFFFF;
   }
   .mork {
   	background-color:#C8C8C8;
   }
   </style>
   	

PHP-delen - tælleren

Tilføj nu en tæller, der kan bruges til at tælle 1 op, hver gang vi har været en løkke igennem:

1. Ret PHP-delen i tabellen, så den kommer til at se således ud (tilføjelserne er markeret med understreget):

   <?
   $t = 0;
   foreach ($navn as $n)
    {
    $t++;
     echo "<tr>";
     echo "<td>";
     echo "$n</td> </tr>";
    }
   ?>
   

PHP-delen - find resten...

1. Næste del er en funktion, der kan finde ud af, om et tal er lige eller ulige. Denne funktion findes ikke, pokkers. Vi må altså gøre noget andet. Det næstebedste er en funktion, der kan finde resten ved en division. Denne funktion hedder modulus (heltalsdivision) og skrives med et % i PHP. F.eks. bliver 7 % 2 = 1 fordi 1 er resten ved en division (uden decimaler). Vi kan derefter bruge en if-sætning til at finde ud af om resten er 0 eller 1, hvis bruger modulus 2 og derefter bruge den mørke eller den lyse klassifikation til cellens baggrundsfarve. Smart. Ret PHP-koden så den bliver således:

2. <?
   $t = 0;
   foreach ($navn as $n)
   {
    $t++;
    echo "<tr>";
     if($t % 2 == 1)
     {
     echo "<td class="\lys\">";
     }
     else
     {
     echo "<td class=\"mork\">";
     }
    echo "$n</td> </tr>";
   }
   ?>
   

3. Du burde nu få et resultat, der ligner dette:
   
4. Eksperimentér selv med at justere tabelegenskaberne i den inderste tabel, så der kommer lidt ekstra afstand fra kanten af cellen og ind til teksten.