Bienvenue sur votre portail Artiphp XXL
Pour créer et gérer votre site Internet
en toute simplicité.
Artiphp est testé et hébergé chez 1and1.fr
Vous êtes ici >> Accueil/Les Dossiers/Artiphp XXL/Firefox 1.5 et Webdeveloper au service d'Artiphp

Firefox 1.5 et Webdeveloper au service d'Artiphp

05/01/2008 - Lu 311 fois
Des outils indispensables pour la création de votre site et notamment pour la gestion de vos feuilles de styles sous Artiphp.

Firefox est un navigateur rapide et fonctionnel qui rend la navigation plus efficace que jamais.
Aujourd'hui Firefox est le seul navigateur Internet à faire de l'ombre à Internet Explorer.
Plus de 20% de part de marché, dans un domaine complètement vérouillé par la Firme Microsoft.

Le propos de ce dossier n'étant pas de vanter les mérite du navigateur en lui-même, mais de l'utiliser pour sa puissance en terme de personnalisation et de profiter des extensions créées pour faciliter la vie des webmasters.

Plus d'informations à propos de Firefox sont disponibles sur le site de Firefox sur Mozilla Europe.
Firefox 1.5 est disponible, dans plus de 26 langues simultanément, dont le français : Windows, Linux, Mac OS X.

Firefox et Web developer : pour une gestion simplifiée des css d'Artiphp

Modifier les feuilles de style d'Artiphp avec l'extension web developer de Firefox.
Cette barre d'outil conjuguée à ce navigateur va vous permettre de :

- visualiser et éditer directement les css de vos pages,
- visualiser les feuilles de style et les lignes de code concernées lorsque vous pointez ou surlignez une partie de la page que vous voulez analyser.

Avant de commencer : télécharger et installer Firefox

Pour télécharger la dernière version de Firefox, cliquez sur le lien ci-dessous.

Lors de l'installation de Firefox, sélectionnez : "installation personnalisée" puis "outils de développement".

Un problème d'installation ?
Si la barre ne s'installe pas (avec Firefox notamment), ou plutôt si le menu n'est pas complet pas de souci :
1. désinstallez toutes les versions de Mozilla du pc
2. réinstallez Firefox 1.5
3. sélectionnez "installation personnalisée" puis les 2 options possibles dont "outils de
développement".


Création et modification de vos css avec web developer

Clairement, il y a deux possibilités si vous n'êtes pas totalement à l'aise avec les css de base

- vous repartez des feuilles de base et vous modifiez en fonction de ce que vous voulez obtenir ;
- sinon vous repartez "de zéro" c'est à dire que vous recréez des feuilles de style selon vos besoins. Si ceux-ci sont très basiques ce peut être une très bonne solution car vous
maîtriserez votre code et le simplifierez.
C'est aussi beaucoup une affaire de préférence, cependant, modifier l'existant est peut-être le plus simple si vous débutez totalement.

Commençons par ouvrir la page que nous voulons modifier. (ici, la page d'accueil du module faq).

Affichage des class et id

Pour repérer les css, affichez tout d'abord les informations d'ID et de class, via la barre d'outils, menu Information.


Firefox réaffiche aussitôt votre page avec des petits boites de dialogue vertes (pour les id) et rouges (pour les class) avec le nom de chaque élément de votre feuille de style.


Editez votre feuille de styles

Maintenant que nous connaissons les noms et emplacements des variables de css, nous allons pouvoir les éditer en ligne.
Sélectionner l'onglet "CSS" et cliquez sur "Edit css".

Vous obtiendrez alors les contenus des feuilles de styles utilisées sur la page. Vous allez alors pouvoir les modifier et les changements effectués seront automatiquement répercutés sur la page.
N'ayez aucune crainte, ces modifications n'existent pas réellement, et vos visiteurs ne verront rien de vos essais.

Exemple de changement de css

Modification de la couleur du titre (module FAQ).
On repère le nom de la class du titre à la fois dans la page et dans l'editeur (dans l'exemple :  faq_rep_titre),

  

On modifie la couleur dans l'editeur, et automatiquement, la couleur change dans la page.

 

 

Enregistrez les modifications

Une fois que vous avez obtenu le résultat voulu, nous allons les enregistrer. Deux solutions sont possibles :

1 - Copier/coller
Sélectionnez et copier les styles se trouvant dans l'editeur css
Ouvrez avec le bloc notes la véritable css de votre site qui se trouve dans le répertoire templates/temp/nom_de_votre_css.css
Et collez le nouveau contenu.

2 - Enregistrement
L'éditeur css de web developer vous permet d'enregistrer directement votre feuille de style.
Cliquez sur le bouton Sauver, puis allez dans le répertoire où se trouve vos css : templates/temp/ puis remplacez en écrasant votre ancienne feuille de styles.