Les fichiers html

14/11/2009 - Lu 2449 fois

Note moyenne : 3.27/5
1
2
3
4
5

Note moyenne : 3.3/5 (37 notes)

Les templates sous Artiphp sont composés de 3 fichiers html (temp, accueil et pages). Ils servent à structurer vos pages. Vous pourrez y insérer vos images et textes de présentation, vos feuilles de style et le contenu dynamique de vos pages.

Les contenus dynamiques sont au format xhtml 1.0 strict. Il est donc recommandé, pour un affichage optimal sur tous les navigateurs (I.E., Firefox, Opera, Safari...) d'opter pour ce format lors de l'écriture de vos fichiers html. Si vous n'êtes pas à l'aise avec ce format, vous pouvez en choisir un autre, en ayant conscience que vous ne respectez pas les normes internationales du W3C.

De gauche à droite : temp.html, accueil.html et pages.html

Temp.html

Toute la structure repose sur ce fichier. Cette page appelera les autres pages, les fichiers css et le contenu dynamique se trouvant sur toutes les pages de votre site.
C'est le design général de votre site Internet, l'habillage qui se trouvera sur toutes vos pages : en général, les haut et bas de page (bannières, logos, titre de votre site, mentions légales, menu général...).

Accueil.html

Ce fichier est spécifique au contenu de la page d'accueil. Il s'insérera dans le fichier temp.html.
Grâce à une multitude de code personnalisé, et suivant les modules que vous avez installé, vous pouvez afficher les dernières nouveautés de votre site (les x dernières news et/ou dossiers, un édito, des images aléatoire de votre galerie, etc...).

Pages.html

Dans ce fichier, vous insérerez les spécificités du reste de vos pages. Vous pouvez y ajouter des fonctionnalités d'impression et/ou de recommandation de pages, ou bien un menu supplémentaire...

Quelques exemples de structure

Temp : bannière haut + menu horizontal + menu à droite + bannière bas
Accueil : présentation sur 2 colonnes de taille identique
Pages : contenu sur 1 colonne + liens en haut vers une version d'impression et la recommandation

Temp : bannière haut + bannière bas
Accueil : présentation sur 3 colonnes de taille identique
Pages : menu horizontal + menu vertical à droite + contenu des pages à gauche

Temp : bannière haut + bannière bas + menu à gauche
Accueil : contenu de la page d'accueil en plusieurs blocs sur 1 ou 2 colonnes
Pages : ajout d'un menu supplémentaire à droite + contenu sur 1 colonne à gauche

Bien entendu, ce ne sont que quelques exemples et suggestions de mise en pages. Les limites d'Artiphp restent votre imagination.

Construire ou modifier vos fichiers html

Pour créer ou modifier les fichiers html, vous pouvez utiliser soit un simple éditeur de texte (bloc-notes), soit un éditeur html plus évolué (dreamweaver, Nvu...) qui vous permet de voir plus facilement ce que vous faites et qui vous propose des aides. Attention cependant, si vous utilisez un éditeur html, vous devrez retravailler le fichier avec un éditeur texte pour la configuration des chemins de vos liens et images.

Dans le dossier "Introduction aux templates" nous avons préconisé une structure de base avec un répertoire "design" pour stocker les images de votre template, ainsi qu'une feuille de style spécifique (special_skin.css). Dans l'exemple que nous allons détaillé ci-après, nous partons de cette structure.

Création de la page temp.html

Pour commencer, nous allons mettre en place la structure générale. Dans celle-ci, vous avez des codes obligatoires pour faire fonctionner le système.

Nous n'allons pas vous faire un cours magistral sur le html, vous pouvez trouver des informations sur Internet, ou via des livres très bien conçus.

Ce que vous devez savoir :
Une page Internet contient 2 parties, l'entete (entouré de la balise HEAD) et le corps de page (balise BODY), le tout est entouré d'une balise HTML.

<html>
<head>
(entête de votre page - non affiché)
</head>
<body>
(corps de votre page - contenu affiché)
</body>
</html>

Dans l'entête vous trouverez des informations non affichés sur votre page. Il contient le nom de la page, les liens vers la ou les feuilles de style, des "meta-données" destinées aux robots des moteurs de recherche et aux navigateurs Internet.
Le corps de page est la partie qui s'affiche dans votre navigateur Internet. La page que chaque visiteur voit.

Système de cache :
Afin d'utiliser le système de cache fonctionnant sous Artiphp, et donc d'optimiser la vitesse d'affichage :

Placez le code suivant en haut de page, avant la balise <html> :

<?php require_once(ARTI_SYS_INT_PATH . 'outils/jrcache/jrcache.inc.php'); ?>

Puis le code suivant en bas de page, sous la balise </html>

<?php echo jrcache_done(); ?>

Titre de vos pages :
Dans l'entête de page - entre les balises <head> et </head> ajouter le code suivant pour que chacune de vos pages est son propre nom (ce que vous voyez d'affiché tout en haut de votre navigateur). Ce code sert à la fois aux moteurs de recherche, mais aussi en terme d'accessibilité. Chaque page doit avoir un nom unique. Artiphp va gérer dynamiquement cette partie.

Balises meta :
Dans l'entête de page - entre les balises <head> et </head>, ajouter les balises meta suivantes :

Description : est géré dynamiquement par Artiphp. Cette balise décrit le contenu de votre page.
Charset=iso-8859-1 et charset=windows-1252, sont des balises pour décrit le jeu de caractère utilisé dans vos pages.
Keywords : n'est pas géré dynamiquement, ajouter ici vos mots clés décrivant votre site internet.
Content-Language fr : est la langue utilisé en général sur votre site
Robots : indique aux robots des moteurs de recherche ce qu'ils ont droit d'indexer. Ici, nous signalons aux moteurs de tout indexer.
Revisit-after : indique aux robots des moteurs de recherche la fréquence de passage qu'il devra effectué pour visionner les changements sur votre site Internet.

Les feuilles de style :
Dans l'entête de page - entre les balises <head> et </head>, ajouter les chemins vers la feuilles de style spécifique à votre template.

Puis le chemin vers les feuilles de style gérées dynamiquement par Artiphp

<?php echo $css; ?>

Lien vers la zone d'administration :
Dans le corps de votre page, entre les balises <body> et </body>, insérer le code suivant pour faire apparaitre "la passerelle" entre votre site et la zone d'administration.
Si vous avez déjà structuré votre page, vous placerez ce code à l'endroit où vous voulez que les liens vers la zone d'administration s'affiche.

<?php echo $zone; ?>

Différentes formes d'affichage sont possibles, vous trouverez plus d'informations dans la rubrique les codes de personnalisation.

Centre de la page, affichage des contenus :
Dans le corps de votre page, entre les balises <body> et </body>. Ce code est le coeur du système. Il vous permet d'afficher au sein de votre design, les différents contenus (page d'accueil, et contenu de toutes vos pages).

<?php
if ($mod_encours_sys == 'mod_accueil') {
    $SESSION_SKIN = $_SESSION['SESSION_SKIN'];
    include(ARTI_SYS_INT_PATH . "templates/temp$SESSION_SKIN/accueil.html");
} else {
    $SESSION_SKIN = $_SESSION['SESSION_SKIN'];
    include(ARTI_SYS_INT_PATH . "templates/temp$SESSION_SKIN/pages.html");
}

if ($file_wrap != null) {
    if (strstr($file_wrap, '/') || !(file_exists('pages/' . $file_wrap)) || strstr($file_wrap, "%00")) {
        echo 'Désolé, page invalide !';
    } else {
        require_once(ARTI_SYS_INT_PATH . 'wrapper/pages/' . $file_wrap);
    }
}
?>

En résumé, voici le code minimal que vous devez avoir sur votre fichier temp.html

<?php require_once(ARTI_SYS_INT_PATH . 'outils/jrcache/jrcache.inc.php'); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
<head>
    <title><?php echo $metatitle; ?></title>
    <meta name="Description" content="<?php echo $metaDescription; ?>" />
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
    <meta name="Keywords" content="mots clés définissant le contenu de votre site / keywords of your website" />
    <meta http-equiv="Content-Language" content="fr" />
    <meta name="robots" content="index,follow,all" />
    <meta name="REVISIT-AFTER" content="1 days" />
    <meta http-equiv="Content-Style-Type" content="text/CSS" />
    <link type="text/css" rel="stylesheet" href="<?php echo ARTI_WEB_INT_PATH; ?>templates/temp<?php echo $SESSION_SKIN; ?>/special_skin.css" media="screen" title="style" />

    
    <?php echo $css; ?>
    

</head>

<body>


            <?php echo $zone; ?>




<?php
if ($mod_encours_sys == 'mod_accueil') {
    $SESSION_SKIN = $_SESSION['SESSION_SKIN'];
    include(ARTI_SYS_INT_PATH . "templates/temp$SESSION_SKIN/accueil.html");
} else {
    $SESSION_SKIN = $_SESSION['SESSION_SKIN'];
    include(ARTI_SYS_INT_PATH . "templates/temp$SESSION_SKIN/pages.html");
}

if ($file_wrap != null) {
    if (strstr($file_wrap, '/') || !(file_exists('pages/' . $file_wrap)) || strstr($file_wrap, "%00")) {
        echo 'Désolé, page invalide !';
    } else {
        require_once(ARTI_SYS_INT_PATH . 'wrapper/pages/' . $file_wrap);
    }
}
?>



<div id="copyright"><?php echo $arti; ?></div>


</body>
</html>
<?php echo jrcache_done(); ?>

Création de la page accueil.html

Comme vous l'avez vu plus haut sur la structure d'Artiphp, cette page s'affiche à l'intérieur de la page temp.html. Elle n'a donc pas besoin d'avoir les balises d'informations html : <html><head></head><body></body></html>.
Dans cette page, vous commencerez directement par le contenu.

Exemple :

<div id="colonne_droite">
(contenu de la colonne droite)
</div>
<div id="colonne_gauche">
(contenu de la colonne gauche)
</div>

Afin d'afficher des contenus dynamiques sur votre site, une multitude de codes vous sont fournis dans la rubrique "codes de personnalisation". vous pourrez afficher vos x derniers dossiers, vos x dernières news, un calendrier, vos dernières images, etc..., suivant les modules que vous avez installé.

Création de la page pages.html

Comme vous l'avez vu plus haut sur la structure d'Artiphp, cette page s'affiche à l'intérieur de la page temp.html. Elle n'a donc pas besoin d'avoir les balises d'informations html : <html><head></head><body></body></html>.
Pour afficher les contenus dynamiques des modules vous devez insérer le code suivant :

<?php echo $milieu; ?>

Liens vers les images de votre template

Afin d'accroitre la portabilité de votre site, et que vous n'ayez pas tout votre template à revoir si vous décidez de changer d'hébergement, ou bien si vous gérer un site multi-templates, nous vous conseillons la forme de lien suivant :

<img src="<?php echo ARTI_WEB_INT_PATH; ?>templates/temp<?php echo $SESSION_SKIN; ?>/design/flpre2.gif" alt="" />

ARTI_WEB_INT_PATH est le chemin automatique vers votre répertoire template.
SESSION_SKIN est le nom automatique de votre template.

Liens vers une autre page interne à votre site

Si vous décidez de faire des liens sur l'une des pages de votre template vers une page spécifique de votre site, nous vous conseillons d'utiliser la forme de lien suivant.

1. lien vers une page d'un module externe (dossiers, news, agenda, annuaire...)

<a href="<?php echo ARTI_WEB_PATH; ?>dossiers/index.php" title="nos dossiers">

2. lien vers une page d'un module interne (recommandation, auteurs, utilisateurs, tags...)

<a href="<?php echo ARTI_WEB_INT_PATH; ?>recommandation/index.php" title="recommander cette page">

Les Commentaires

1 commentaire - Voir | Rédiger

Posté par calou16000 (non inscrit) le 23/11/2009

Ben voilà...quoi dire de plus félicitation au(x) rédacteur(s) de cet article, bien plus rapide que moi...
Chapo bas.

Partager cet article

Partager les derniers articles

My Yahoo : Partager les derniers articles

Article précédent : Introduction aux templatesArticle suivant : Les feuilles de style (css)