5. lecke (HTML5, CSS3, PHP5)


Új (PHP manual)


Menürendszer létrehozása, az "Iskolánkról" életre lehelése


Cseréljük le az "aside" tartalmának egy részét (a képlinkek maradnak!)!

Ezt:

<?php
    include('incl/p2.inc');
?>

Erre:

<nav>
    <h3><a href='index5.php?txt=p5'>Kezdőoldal, hírek</a></h3>

    <h3>Iskolánkról</h3>
    <a href='index5.php?txt=nevado'>Az iskola névadója</a><br>
    <a href='index5.php?txt=tortenet'>Iskolatörténet</a><br>
    <a href='index5.php?txt=alapitvany'>Alapítvány</a><br>

    <h3>Az iskola tanulói</h3>
    <a href='index5.php?kod=it&txt=1'>1. osztály</a><br>
    <a href='index5.php?kod=it&txt=2'>2. osztály</a><br>
    <a href='index5.php?kod=it&txt=3'>3. osztály</a><br>
    <a href='index5.php?kod=it&txt=4'>4. osztály</a><br>
</nav>

Majd valami ilyet fogunk látni a lecke végén, s remélhetően működni is fog!

(Pontosabban fogalmazva a "Kezdőoldal, hírek", a legelső menüpont még nem, ez egy kicsit keményebb dió lesz.)


Az "Iskolánkról" almenüpontjai már működnének is, ha lennének:

fájl az "incl" könyvtárban, hiszen ezek ugyanolyan kész HTML tag-ekkel formázott szövegfájlok lesznek, mint a képekhez rendelt fájlok. Most csak "imitáljuk" ezt a három fájlt. A "p2.inc" tökéletesen megfelel erre a célra. Másoljuk le ezt a fenn megadott neveken, s tegyük a legelső sorukba a következő címeket:

 <h2>Névadónk</h2>
 <h2>Iskolatörténet</h2>
 <h2>Alapítvány</h2>

Működik, de nagyon egyhangú így. Dobjuk fel az "alapitvany.inc" fájlt egy képpel (kattints a képre, majd mentsd le az "imgs" könyvtárba):

Hogy látható is legyen, illesszük a fájl végére a következő HTML kódot (ez már ismerős lehet a 4. leckéből):

 <img src='imgs/alapitvany.jpg'>

Kicsit bűvöljünk rajta CSS-sel:

 <img src='imgs/alapitvany.jpg' style='width:200px;float:right;'>

Kisebbre vettük (350 pixel széles volt, most 200) és jobbra úsztattuk.

Most egy újabb "technikát" látunk a stílusok beépítésére. Itt éppen a HTML parancs/tag belsejébe helyeztük el a két tulajdonságot. A másik lehetőségek már az "index0.html" fájlban láthatók.

Összefoglalva ezt a hármat:

  1. egy külön fájl, az ún. stílusfájl tartalmazza a tulajdonságokat - külső stílusok ( <link rel='stylesheet' href='css/main0.css'> az "index0.html" fájlban így van )
  2. a HTML fájl fejrészébe/head-be beépítve - beágyazott stílusok ( <style> header p { ... } ... </style> szintén az "index0.html" fejrészében )
  3. a HTML parancs/tag belsejében elhelyezve - szövegközi stílusok ( lásd előbb az img-be beépítve )

Az első variáció előnye az, hogy több HTML oldalra is használhatjuk ugyanazon stílusbeállításokat (pl. mindegyikben Arial betűtípus használunk, 16 pixeles mérettel és sötétzöld színnel). A második csak egy HTML fájlra "hatásos", arra amelyikben van, míg a harmadik csak arra az egy HTML tag-re.


"Az iskola tanulói" menü felélesztése

 <?php
 $kod = $_GET['kod'];
 $txt = $_GET['txt']; if ($txt=='') $txt='p5'; // állandó tartalom
 ?>

Javítsuk át a "index5.php" fájl tetején lévő PHP betétet a fenti módon!

Az egyik változás az "if ... ", ez arra szolgál, hogy   $txt   paraméter nélküli indításnál (index5.php) a "p5.inc" fájlt szúrjuk be a jobboldali/tartalom oszlopba. Később majd ehelyett az aktuális hírek jelennek meg itt, nem pedig egy fix tartalom.

A másik a fölötte lévő új változó, a   $kod.   Ennek az értéke dönti majd el, hogy melyik "php" programrészlet/rutin hozza létre/generálja a megfelelő tartalmat a jobboldali oszlopba.


Nézzük meg ezt az iskola osztálynévsorainak megjelenítésénél!


 if ($txt=='') {
     include('incl/p5.inc'); // állandó tartalom
 } else {
     include("incl/$txt.inc"); // változó tartalom
 }

Ez a régi php rutin (if ... else ...) rövidíthető már az alábbi felső három sorral is. (Gondoljuk végig, hogy miért!)

A második "if" már bővebb magyarázatra szorul:


 if ($kod=='') {
     include("incl/$txt.inc"); // incl könyvtárból (kész HTML darabka)
 }
 if ($kod=='it') {
     $sr = file("text/$txt.txt"); // iskola tanulói
     echo "<h2>$txt. osztály</h2>";
     $ofo = chop($sr[0]);
     echo "<h3>Ofő: $ofo</h3>";
     echo "<img src='imgs/dekdiak$txt.jpg'>";
     echo "<ol>";
     for ($t=1;$t<count($sr);$t++) {
         $nev = chop($sr[$t]);
         echo "<li>$nev</li>";
     }
     echo "</ol>";
 }

Hú, ez jó hosszú magyarázat lett, de remélem érthető! (Ha mégsem, ajánlom a következőt: PHP)


Búcsúzóul és pihenésképpen egy kis szépítés


 aside h3 {
    padding:8px 0 2px 0;
    font-size:105%; color:#ff6600;
 }
 nav {
    padding-bottom:8px;
 }
 nav a {
    padding-left:10px;
 }
 nav h3 a {
    padding-left:0px;
 }

Mindezeket a "main5.css" fájlba tegyük (fenn is javítsunk!) az "aside { ... } után!

A már korábban is látott   <nav>, </nav>   utasításpár a "navigációs" részt jelenti (új HTML5 tag), általában a menü-almenü rendszert jelöli.

Részletezve a stílusokat:

Próbáljuk is ki ezeket úgy, hogy töröljük, módosítjuk az ajánlott értékeket, majd (miután megértettük) esetleg visszaállítjuk az ajánlott értéket!