12. Saml det hele 1

Du er her: Start → Indholdsfortegnelse → Saml det hele 1
Indhold

Indledning

Du skal nu prøve at bruge alle de funktioner mm. som du har været igennem indtil videre i en samlet "pakke". Du skal lave en serie hjemmesider med det samme layout (et site), som skal være nem at vedligeholde.

At den skal være nem at vedligeholde betyder bla.:

Opret mappe og download filer

Før vi går i gang med opgaven skal du oprette en ny mappe til sitet og derefter downloade nogle hjemmesider og billeder til at arbejde med.

  1. Opret en ny mappe og kald den f.eks. fisk1
  2. Download derefter disse

Opret stylesheet

  1. Opret derefter et stylesheet, som du gemmer i samme mappe under navnet fisk.css. Sørg for at du tager stilling til følgende, når du opretter stylesheetet:

Forberedelse

Som forberedelse til opgaven her kommer der lige et par linier om, hvad der skal ske. Du kommer til at lave følgende:

Opret Sidetop

Du skal først oprette siden Sidetop:

  1. Hent index.htm, som du downloadede før.
  2. Indsæt en henvisning til dit stylesheet (Funktioner -> Eksterne resursefiler -> Tilføj)
  3. Marker hele "hovedet". Dvs. fra og med <!DOCTYPE HTML ... til og med <BODY>
  4. Tag en kopi
  5. Opret en ny tom side
  6. Indsæt det du lige kopierede
  7. Gem som top.php (det er nemmere end at kalde den "Sidetop"

Opret Sidefod

Derefter skal du oprette sidefoden. Den indeholder som sagt ikke særligt meget, blot slutkoderne:

  1. Skift tilbage til index.htm
  2. Marker slutkoderne (</BODY></HTML>)
  3. Tag en kopi
  4. Opret en ny tom side
  5. Indsæt det du lige kopierede
  6. Gem som bund.php

Opret Menuen

Nu kommer det lidt mere "tricky". Du skal oprette menuen. Det er her, du skal bruge det meste af det, du lærte i Kapitel 10 og Kapitel 11. Du bliver også introduceret til WebWriters Udvidet erstat-funktion.

Du har hentet 4 sider:

Du skal nu have oprettet en menu med links til disse fire sider.

  1. Opret et nyt tomt dokument
  2. Gem det som menu.php
    Først skal du oprette et array (en liste) med alle siderne.
  3. Sådan ser det ud: 
    <?
$sider['index.php'] = "Startside";
$sider['guppy.php'] = "Guppyer";
$sider['neon.php'] = "Neonfisk";
$sider['platy.php'] = "Platyer";
    Læg mærke til, at jeg har brugt sidernes navne som nøgleværdi (i stedet for et tal f.eks. $sider[1] = "Startside"). Dette gør det lettere at oprette links, når vi kommer til selve menuen.
    Videre til selve menuen:
  4. Nu skal du bruge en løkke til at køre igennem array'et $sider og for hver værdi indsætte et link på siden: 
    echo "<div class=\"menu\">";
foreach ($sider as $hyper_link => $link_tekst)
 {
  echo "- ";
  echo "<a href=\"$hyper_link\">";
  echo $link_tekst;
  echo "</a> ";
 }
echo " -";
echo "</div>";
?>

Slet unødvendig information

Du skal nu sørge for at alle sider får det samme udseende mm. For at lette dette arbejde, skal du benytte dig af WebWriter Udvidet erstat-funktion til først at slette de informationer, der nu befinder sig på siderne top.php og bund.php:

  1. Sørg for at alle siderne du har hentet er åbne i WebWriter (dvs. guppy.htm, index.htm, neon.htm, platy.htm
  2. Skift til siden neon.htm (den har vi endnu ikke arbejdet med endnu, så den ser ud, som da du hentede den).
  3. Marker hele hovedet (dvs. fra og med <!DOCTYPE HTML ... til og med <BODY>)
  4. Tag en kopi
  5. Vælg: Søg -> Udvidet erstat
  6. Indsæt det du kopierede i den øverste boks:

    Sørg for, at der for en sikkerheds skyld er sat et hak i feltet Lav backup. Sørg også for at feltet Alle åbne dokumenter er markeret.
    Når du ikke udfylder det nederste felt, så svarer det til bare at slette alt det, der svarer til det, du har indsat i det øverste felt.
  7. Klik på knappen Erstat alle.
    Du får nok at vide, at der kun er erstattet 3 tilfælde. Så du må lige "håndslette" det sidste hovede. Det er siden index.htm, der er lidt anderledes.
  8. Brug derefter Filer -> Gem som... til at gemme alle siderne med filendelsen .php (f.eks.: index.php)
  9. Brug på samme måde Udvidet erstat til at slette <BODY> og <HTML>
  10. Vælg derefter: Filer -> Gem alle

Saml det hele

Du skal nu bruge Udvidet erstat til at få indsat nye php-koder på siderne. Hvis du har lagt mærke til det, så starter næsten alle siderne nu med koden <H2>. Dette kan vi benytte os af:

  1. Vælg: Søg -> Udvidet erstat
  2. Udfyld således:
  3. Klik på Erstat alle
  4. Desværre blev det til lidt for mange erstatninger: Der var 2 forekomster af <H2> på siden index.php, så på denne side kommer du til at slette disse. Ud over dette skal du også indskrive koden herunder på index.php "i hånden": 
    <?
include "top.php";
include "menu.php";
?>
  5. Indsæt derefter følgende kode nederst på alle siderne: 
    <?
include "bund.php";
?>
    (husk at gemme alle sider)
  6. Upload siderne til din server
  7. Afprøv siderne og se, om de virker.

Tilføj en ny side

Du skal nu se, hvor let det er at tilføje nye sider:

  1. Hent først disse to filer:
  2. Åbn siden zebra.htm og lav de samme ændringer du lavede på de første 4 sider.
  3. Gem siden som zebra.php
  4. Åbn derefter filen menu.php
  5. Tilføj følgende linie nederst i array'et: 
    $sider['zebra.php'] = "Zebrafisk";
  6. Indsæt billeder på alle siderne. Find ud hvilke der passer hvor.
  7. Gem derefter alle sider du har redigeret og upload dem til serveren.