Retrouvez cet article dans : Linux Pratique 39
Insérer du contenu dans de petits encadrés est une manière de mettre en valeur certaines informations se trouvant sur votre site Web. Cela peut donner également un certain style journalistique à votre page. Dans ce didacticiel, vous apprendrez à formater des conteneurs définis dans le code source de votre page Web, par l'intermédiaire d'un script PHP.
Structure de la page Web
Voici à quoi se résume le code de notre page Web :
<html>
<head>
<? include("news_style.php");
add_box_styles();
?>
</head>
<body>
<div style="width: 300px; margin: 30px;">
<? start_box("Actualités"); ?>
Nous voilà en 2007, alors BONNE ET HEUREUSE ANNÉE
à tous !
<br />
<br />
<a href="page_news.html">Suite...</a>
<? end_box(); ?>
</div>
</body>
</html>
Dans l'en-tête de ce code, remarquez que l'on fait appel à une fonction intitulée add_box_styles() ; cette dernière est définie dans un script PHP externe, nommé ici news_style.php, auquel on fait référence via la fonction include().
La boîte qui va contenir notre texte est définie par un conteneur <div>. Notez que celui-ci comporte des mentions de style (largeur du conteneur et épaisseur des marges). Dans ce conteneur sont mises en jeu deux autres fonctions définies dans le script PHP : start_box() et end_box(). Leur rôle respectif est expliqué ci-après.
Enfin, notre conteneur se termine par un lien hypertexte (optionnel), censé rediriger l'utilisateur vers une page où se trouve l'intégralité du contenu de la boîte (en effet, notre boîte de texte n'est destinée qu'à contenir une petite phrase d'accroche...).
Formatage du conteneur
Nous allons détailler à présent le script PHP utilisé par notre page Web. Celui-ci est vraiment très simple, il ne comporte que 3 fonctions :
<?
function add_box_styles()
{
?>
<style type="text/css">
.box {
font-family: arial, verdana, sans-
serif;
font-size: 12px;
background: #fff;
border: 2px solid #c0c0c0;
}
.box_title {
font-size: 18px;
color: #fff;
background: #c0c0c0;
padding: 5px;
text-align: center;
}
.box_content {
background: #fff;
padding: 5px;
}
</style>
<?
}
function start_box($nom)
{
?>
<table class="box" cellspacing="2"
cellpadding="0">
<tr><td class="box_title"><? print($nom) ?>
</td></tr>
<tr><td class="box_content">
<?
}
function end_box()
{
?>
</td></tr></table>
<?
}
?>
Enregistrez ces deux fichiers .php sur votre serveur Web, puis ouvrez votre navigateur pour observer le résultat (Fig. 1).
La fonction add_box_styles(), comme son nom l'indique, permet d'ajouter des propriétés CSS à notre page Web. C'est pourquoi l'appel à cette fonction se situe dans l'en-tête (balises <head>) de la page. Les propriétés sont ainsi définies entre des balises <style>.
Notez que trois classes (.box, .box_title et .box_content) sont déclarées ; elles désignent respectivement la boîte dans sa totalité, le titre de la boîte et le contenu de la boîte. Ces classes seront évoquées dans la suite du script.
La fonction start_box() est appelée au sein du conteneur. Cette fonction permet de générer dans le conteneur, un tableau constitué de 2 lignes (<tr>) et d'1 colonne (<td>). Remarquez ici l'attribution des classes vues précédemment. Le tableau reçoit en outre des mentions d'espacements entre cellules (cellspacing) et de marges intérieures (cellpadding). Vous pouvez, bien entendu, changer ces valeurs comme bon vous semble.
Notons par ailleurs que cette fonction reçoit en paramètre la variable $nom, qui n'est autre que le titre que vous donnez à votre boîte (voir code HTML). La fonction print($nom) que l'on trouve dans la première ligne du tableau permet justement d'afficher ce titre.
La fonction end_box(), enfin, est exécutée après la déclaration du lien hypertexte du conteneur. Elle contient uniquement les balises de fermeture du tableau précédent. De cette manière, le lien hypertexte fait partie du tableau, et plus précisément, de la deuxième ligne du tableau (box_content). Si vous choisissez de ne pas créer de lien vers une autre page, cette fonction est évidemment à supprimer ; les balises </td></tr></table> devront être placées à la fin de la fonction start_box().
Pour finir, observez bien l'imbrication du code PHP et du code HTML : les signes <? et ?> sont positionnés de telle façon à encadrer toutes les instructions PHP. En effet, lorsque PHP traite un fichier, il cherche les balises d'ouvertures <? et de fermetures ?>, qui délimitent le code qu'il doit interpréter. Tout ce qui se trouve en dehors de ces balises est ignoré.
L'apparence de votre boîte peut être personnalisée à souhait. Il vous suffit de modifier et d'ajouter des propriétés CSS, ou encore de modifier les mentions de styles attribuées au conteneur (au sein de la balise <div>). Par exemple, avec les propriétés suivantes, nous obtenons le résultat illustré par la figure 2 :
<style type="text/css">
.box {
font-family: arial, verdana, sans-serif;
font-size: 12px;
background: #ffe4e1;
border: 4px solid #9ACD32;
}
.box_title {
font-size: 18px;
font-weight: bold;
color: #FAFAD2;
background: #9ACD32;
padding: 5px;
text-align: center;
}
.box_content {
background: #FAFAD2;
padding: 5px;
}
a {
float: right;
text-decoration: none;
}
</style>
Et si vous souhaitez créer plusieurs boîtes sur votre page ? Rien de plus simple ! Il suffit de dupliquer la description du conteneur <div> autant de fois que nécessaire dans votre code HTML, comme ceci :
[...]
<div style="width: 300px; margin: 30px;">
<? start_box("Actualités"); ?>
Nous voilà en 2007, alors BONNE ET HEUREUSE ANNÉE
à tous !
<br />
<br />
<a href="page_news.html">Suite...</a>
<? end_box(); ?>
</div>
<div style="width: 300px; margin: 30px;">
<? start_box("Évènements"); ?>
Salon Solutions Linux 2007 : du 30 janvier au 1er
février (CNIT - Paris, La Défense)
<br />
<br />
<a href="page_events.html">Suite...</a>
<? end_box(); ?>
</div>
<div style="width: 300px; margin: 30px;">
<? start_box("Météo"); ?>
Du beau temps encore aujourd'hui sur
la moitié Est du pays. Des précipita
tions sont attendues au Nord-Ouest.
<br />
<br />
<a href="page_meteo.html">Suite...</a>
<? end_box(); ?>
</div>
</body>
</html>
Et nous obtenons le résultat ci-contre :
Pour finir, remarquez que l'on peut encore agrémenter ces boîtes en leur attribuant des coins arrondis. Pour cela, je vous invite à vous inspirer du didacticiel précédent traitant de la création de cadres arrondis...
