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:
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.
<?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)
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!