Hébergement du site en PHP et Mysql par WDMédia-hébergement
Vous aussi adpotez les éléPHPants de Vincent Pontier !  
CONCOURS
 
 
PLUS DE PHP
 
 
PLUS DE JAVASCRIPT
 
COMMENT CA MARCHE
 
 
EXPLIQUE-MOI
 
 
NEWS LETTER
 

 
PARTENAIRES
 
Découvrez scriptsphp.org
Découvrez phpteam.net
Tout sur les expressions régulières
IE sucks :-)
 
DESIGN DU SITE
 
Site multi-couleurs
Tuto écrit par Manico, revu en août 2004 par Molokai et Raf

Le but de ce cours est de vous apprendre comment avoir un site en plusieurs couleurs grâce au PHP comme ici sur PHPDébutant.

Principe

  • Une feuille de style (css) pour chaque couleur.
  • Un cookie qui garde en mémoire la couleur choisie par le visiteur pour la prochaine visite.
  • Le logo et les images qui s'accordent bien sûr avec les couleurs comme ici, un logo pour chaque couleur.
  • Les différents paramètres impossibles à intégrer dans la feuille de style sont dans le fichier PHP inclus en début d'exécution de la page.

Création

1 . Les feuilles de style

Vous devez donc créer autant de feuilles de style qu'il y aura de couleurs pour votre site. En reprenant le principe de PHPDébutant pour cet exercice, le nom de vos feuilles de style sera du style "css_blue.css", "css_red.css"... Ces feuilles de style auront bien sûr toutes le même contenu à l'exception des couleurs des éléments pour votre site.

Feuille de style - Exemple : css_blue.css

/* Barre de défillement (Internet Explorer >= 5.5 uniquement) --- */
BODY
     {
     scrollbar-face-color: #0F648B;
     scrollbar-shadow-color: #000000;
     scrollbar-highlight-color: #FFFFFF;
     scrollbar-3dlight-color: #000000;
     scrollbar-darkshadow-color: #000000;
     scrollbar-track-color: #094865;
     scrollbar-arrow-color: #81C7E7;
     }

/* Style des Liens ------------------------------------ */
A:link    {font-family:verdana; font-size:8pt; text-decoration: none; color: #000000;}
A:visited {font-family:verdana; font-size:8pt; text-decoration: none; color: #000000;}
A:active  {font-family:verdana; font-size:8pt; text-decoration: none; color: darkblue;}
A:hover   {font-family:verdana; font-size:8pt; text-decoration: underline; color: blue;}

Vous pouvez insérer autant d'éléments que vous voulez de façon très simple. Par exemple pour les formulaires, les balises TEXT attribut "tx1" : vous insérez sur la feuille de style :

TEXT.tx1 {/* vos attributs de style */}

Dans votre page web votre balise sera du type : <INPUT TYPE="text" CLASS="tx1">.

Pour plus d'informations sur les feuilles de styles css, n'hésitez pas à aller faire un tour dans la rubrique Ressources

2 . Passons maintenant au fichier inclus en début de votre script PHP qui va déterminer les couleurs des éléments non répertoriés sur la feuille de style et également la feuille de style à utiliser.

Ce fichier va comporter en fait plusieurs conditions pour vérifier la valeur du cookie $DESIGN (notez que plus le nombre de couleurs possibles augmente, plus la structure switch est recommandée pour remplacer les if-elseif-else), ce fichier peut porté le nom "design.php".

Code PHP - Exemple : design.php

<?php
 
// On récupère la variable de contenues dans le cookie
if(isset($_COOKIE['DESIGN'])) $DESIGN=$_COOKIE['DESIGN'];
else $DESIGN="";


if($DESIGN=='blue') // DESIGN BLEU
{
 $bordure = '#000000';
 $color_titre_menu = '#B1D6E7';
 $background = '#003E5B';
}
elseif($DESIGN=='red') // DESIGN ROUGE
{
 $bordure = '#F79393';
 $color_titre_menu = '#F0AF10';
 $background = '#281616';
}
else
{

 // les couleurs par défaut (le visiteur n'a pas encore choisi)
 $bordure = '#000000';
 $color_titre_menu = '#B1D6E7';
 $background = '#003E5B';
}

//détermination de la feuille de style et du logo

if(
$DESIGN!='')
{
 
$css = 'css_'.$DESIGN;
 
$logo = 'logo_'.$DESIGN.'.gif';
}
else
{
 // la feuille de style et le logo par défaut
 
$css = 'css_default';
 
$logo = 'logo_default.gif';
}

?>

    Remarques :
  • La variable $DESIGN n'est pas encore définie tant que le visiteur n'a pas choisi ses couleurs car en fait celle-ci est contenue dans le cookie créé lors du choix.
  • On n'est pas obligé de séparer la selection de la feuille de style et du logo, ceci peut très bien être intégré aux conditions précédentes, mais dans le cas présenté, les feuilles de styles et les logos ont tous un nom de la même forme (css_couleur et logo_couleur).

3 . Mettons en place les couleurs dans vos pages

Le fichier design.php doit être inclus en tout début de votre page index.php, il faudra un lien vers la feuille de style dans la partie <HEAD></HEAD>, et mettre les attributs que vous avez définis dans design.php en place dans le html (voir exemple ci-dessous)

Notez bien que les feuilles de style permettent de définir beaucoup de paramètres, par exemple,le résultat de l'attribut bgcolor de la balise body utilisé dans l'exemple ci-dessous peut etre obtenu a partir de la ligne adéquate dans une feuille de style. Il est donc très important de bien explorer les possibilité des feuilles de style avant de vous lancer dans l'application de ce que vous aurez appris dans cet exercice pour votre site :)

Remarquez aussi que ce système vous oblige à mettre toute les pages utilisant le système en php, puisqu'il est nécessaire d'utiliser un code php pour insérer les attributs définis dans design.php


Code PHP - Exemple : index.php

<?php
include('design.php'); // On inclut le fichier design.php
?>
<html>
<title>On n'oublie pas son titre</title>
<head>
<link rel="stylesheet" type="text/css" href="<?php echo $css.'.css'; ?>"> <!-- Lien vers la feuille de style -->
</head>
<body bgcolor="<?php echo $background; ?>"> <!-- On insère la couleur de fond définie dans design.php -->
Votre texte :)
</body>
</html>

4 . Enfin le fichier d'enregistrement du choix dans le cookie "send_design.php".

Code PHP - Exemple : send_design.php

<?php
$expire=365*24*3600; // 1 an
setcookie("DESIGN","$color",time()+$expire); //enregistrement du cookie au nom de DESIGN repris dans design.php

echo
"<script language=\"JavaScript\">\n";
echo "alert('Nouveau design sélectionné !\n\nN\'hésitez pas à rafraîchir la page si les couleurs n\'apparaissent pas.');";
echo 'window.location="',getenv('HTTP_REFERER'),'"'; //retour à la dernière page visitée du site avec les nouvelles couleurs
echo "</script>";
?>

Sur votre page d'accueil, les boutons présentant les différentes couleurs auront comme URL de lien : http://www.votresite.com/send_design.php?color=couleur.

Et voilà le cours est fini, vous pouvez désormais créer votre site en plusieurs couleurs pour le plus grand plaisir de tous :-).


Ajouter une réponse
Nom
Email
Titre

Mise en forme : gras = [b]...[/b], italic = [i]...[/i], souligné = [u]...[/u], citation = [quote]...[/quote], lien = [url]liens_externe[/url] ou [url nom=texte]liens_externe[/url], code source : [code]...[/code]

Mémoriser mon nom et mon email : Oui Non
www.phpdebutant.org © 2014 - L'équipe de phpDebutant - Hébergement : WDMédia-hébergement
DEBUTEZ !
 
  0.  Introduction
  1.  Afficher une phrase ou une image
  2.  Afficher la date et l'heure
  3.  PHP dans du code HTML
  4.  La concaténation
  5.  Récupérer les valeurs d'un formulaire
  6.  Les structures de contrôle
  7.  Ecrire et lire dans un fichier texte
  8.  Les fonctions utilisateurs
  9.  Les variables d'environnement
  10.  Quelques fonctions utiles
  11.  SQL/MySQL (Create, Alter & Drop)
  12.  SQL/MySQL (Insert et Select)
  13.  SQL/MySQL (Delete et Update)
  14.  SQL/MySQL (Where)
  15.  Fonctions PHP pour mySQL
  16.  Interroger une table MySQL
  17.  Alimenter une ou plusieurs tables mySQL
  18.  Les pseudos-frames
  19.  Les sessions php4
  20.  Affichage page par page
  21.  Images dynamiques
  22.  Ca marche pas ?
  23.  Variables globales à OFF
  24.  Les variables dynamiques