L'éditeur JavaScript
Visiteur non-identifié | Identifiez-vous | Devenir membre
Code perdu ? | Combien de visiteurs sur votre site ?
Rechercher :
Page d'accueil
     Home Page

JavaScript
     Tous les scripts
     Proposer un script
     Recherche de script
     AJAX new!
     Cours de JavaScript
     Liste de discussion
     Forums

Services :
     CountUs
     myCircle

     Referencement
     Créat. de bannière

Trucs et astuces :
     HTML / CSS
     PHP / MySQL
     Réferencement
     Graph / Présentation
     Toutes les astuces
     Ajouter un article

MailingList :
105376 abonnés

Annuaire webmaster :      Hebergement web
     Referencement
     Sites webmasters
     XHTML - CSS2
     PHP
     Affiliation - Pub
     FAI

     Annuaire webmaster

Ressources pour webmasters :
     Kits graphiques
     Création logo

Plus :
     Comparateur de prix
     Foire aux questions
     Les membres
     Devenir annonceur
     Faire un lien
     Contact

Partenaire :
     Hebergement gratuit
     Le PHP facile
     Horoscope
     Comscripts
     WebmasterClub
     Activeartanima...
     Le village de ...
     L'écriteau
     Faro-dessing
     Gifs animés, f...
     Netsources
     Easy-script.com
     K i s s design
     Trucs et astuc...
     Je javascript
     Les autres
     Votre site ici ?


Article posté par : krucial
Date de mise en ligne : 27-04-2004
Niveau : Moyen
>> Ajouter un article

Le JavaScript pour la présentation de vos pages


Le JavaScript, ce n'est pas seulement des animations pour vos pages. En effet, celui-ci peut vous aider pour la mise en page et la mise à jour de votre site.

Le même style partout !

Imaginons que pour votre titre de chapitre par exemple, vous gardiez toujours la même présentation, par exemple celle ci-dessous, vous serez obligé de repeter le code HTML sur chacune de vos pages, et même plusieurs fois par page :

> Titre de chapitre


Et si jour vous désirez changer cette présentation, vous devrez alors modifier toutes vos pages ! Heureusement, il y a findus ! Et le JavaScript !

En effet, un simple fonction dans un fichier .js appelé sur toutes vos pages créera, à votre demande, un titre personnalisé. Plus la peine de repeter 100 fois le code HTML, juste un appel de fonction et le tour est joué. Aussi, il vous suffira de modifier le fichier .js pour affecter toutes les pages de votre site !


Dans la pratique :

Voici le code HTML que nous avons utilisé dans notre titre d'exemple :
<table width="100%" cellpadding="3" cellspacing="1" border="0" bgcolor="#000000">
     <tr>
          <td width=10 style="color:white" bgcolor="#CC0000">&gt;</td>
          <td style="color:white;font-weight:bold" bgcolor="#5979B6">Titre de chapitre</td>
     </tr>
</table>
Nous allons créer un fichier nommé
presentation.js, dans lequel nous allons créer une fonction titre() qui affichera le code HTML.

Le contenu de presentation.js :
function titre()
     {
     html = '<table width="100%" cellpadding="3" cellspacing="1" border="0" bgcolor="#000000">';
     html += '<tr>';
     html += '<td width=10 style="color:white" bgcolor="#CC0000">&gt;</td>';
     html += '<td style="color:white;font-weight:bold" bgcolor="#5979B6">Titre de chapitre</td>';
     html += '</tr>';
     html += '</table>';
     return(html);
     }

Chargez le fichier presentation.js dans votre page via ce bout de code :
<script language="JavaScript" src="presentation.js"></script>

Et appelez la fonction titre() :
<SCRIPT LANGUAGE=JavaScript>
document.write(titre());
</script>

> Titre de chapitre


Sympa, mais on peut mieux faire, par exemple en permettant d'afficher un texte different dans chaque menu ! Reprennons notre fichier presentation.js et effectuons quelques modifications :
function titre(texte)
     {
     html = '<table width="100%" cellpadding="3" cellspacing="1" border="0" bgcolor="#000000">';
     html += '<tr>';
     html += '<td width=10 style="color:white" bgcolor="#CC0000">&gt;</td>';
     html += '<td style="color:white;font-weight:bold" bgcolor="#5979B6">';
     html += texte;
     html += '</td>';
     html += '</tr>';
     html += '</table>';
     return(html);
     }
Par cette méthode, on peut désormais passer un texte en parametre de la fonction titre() et ainsi personnaliser son titre a chaque appel de la fonction. Reprennons maintenant notre page :
<script language="JavaScript">
document.write(titre('C\'est un titre génial !'));
</script>

Ce bout de code donnera le résultat suivant :



Annotations des visiteurs :

De v-tuningpower - le 03-03-2008

Ceci est beacoup plus simple à fair een CSS, c'est fait pour ça et c'est beaucoup plus simple à gérer.
De exterieur - le 28-08-2007

Je dirais même que c'est la foncton propre des CSS. Le Javascript n'est là que pour faire des modifs en dynamique sur l'arbre DOM. Faire en Javascript ce que permet le CSS ne fait qu'alourdir les pages WEB ...
De CodeKiller - le 28-04-2007

Effectivement, il suffit d'utilisé du CSS avec une classe de paragraphe adéquate.

Exemple :

CSS (je ne mets pas le CSS pour le tableau, à vous d'y réfléchir ;-)) :
.TD_TITRE_PUCE
{
color:white";
background-color="#CC0000"
}
.TD_TITRE_TEXT
{
font-weight:bold;
color:white;
background-color:#5979B6;
}

HTML :
<table><tr>
<td class="TD_TITRE_PUCE">PUCE</td>
<td class="TD_TITRE_TEXT">TITRE</td>
</tr></table>

Je n'ai pas fait de test mais ça devrait fonctionner. ;-)
De olivi - le 28-03-2007

les css n'ont-ils pas la meme fonction?
De jujulecon - le 21-02-2007

non, le css n'est pas fait pour insérer du texte

mais sinon il y a autre chose:
on fait un fichier css qui contien
...infin non c'est impossible...
De galeazzo - le 29-07-2005

les css n'ont-elles pas la même fonction ?

>> Poster une annotation sur cette astuce

Retour à la liste des trucs et astuces





8 visiteurs
actuellement en ligne

    PUBLICITE

Wilogo.com - Création Logo Entreprise

     ANNUAIRE WEBMAST.
RueDuCommerce
Rue du commerce est un site de vente high tech ultra serieux.
http://www.rueducommerce.fr/
Cat : Hardware
Voir l'annuaire webmaster


     LES SCRIPTS :
78 à éditer
68 à copier/coller
247 des membres
2580 sur le web
>> Tous les scripts

     LES MEMBRES :
55833 membres
8722 comptes CountUs
1518 comptes myCircle

     LES FORUMS :
14 forums
39348 topics
189197 messages
>> Les forums

    SONDAGE

Vous avez un blog ou site classique ?
Un blog
Un site classique
Les deux !
La mini-astuce "Referencement" du jour par ganou66
Pour bien commencer un référencement, votre script doit comporter des ' meta tag ' adéquats.
http://www.objectif-referencement.com/comprendre.php est la pour vous aider.
Proposer votre mini-astuce | Archives des mini-astuces
© 1999-2008 K-NETWORK - Tous droits réservés | CNIL N° 844440 | 04/12/2008 03:07:40 | Design by Studcrea | Gen. en 0.321 sec.