Créer un template 2 colonnes fluide sous Yacs

Contenu

• Création d'un template 2 colonnes fluide sous Yacs
• Introduction
• Préréquis
• 1. Créer un layout statique de base
• 2. Adapter le layout statique de base à Yacs
• 3. Personnaliser le layout de base
• 4. Optimiser le skin ainsi obtenu
• Conclusion
  • Avantage de la méthode
  • Comment mettre à jour le skin obtenu

Création d'un template 2 colonnes fluide sous Yacs

Introduction

Au cours de ce tutoriel, nous apprendrons comment mettre sur pied et personnaliser un template Yacs 2 colonnes fluide. Par colonnes fluides, nous entendons le fait que le contenu de la page, organisé dans des colonnes, aura la possibilité de s'adapter à la largeur de page du navigateur web. La taille des colonnes, ainsi que leur conteu, est alors proportionnelle à la largeur de l'écran et de la fenêtre du navigateur web de l'internaute.

Pour y parvenir, nous aurons besoin de différents outils de travail.

Préréquis

Afin de mener à bien notre projet, il est nécessaire, mais pas indispensable d'avoir des notions de base en HTML, CSS et PHP.

Nous aurons aussi besoin d'un éditeur de texte, de préférence un éditeur de codes (HTML, CSS et PHP en l'occurence) permettant la coloration syntaxique selon les langages utilisés.

Enfin, afin de pouvoir tester en local avant de mettre en ligne le résultat final, et pour des raisons de performance, nous aurons besoin d'un serveur local PHP.

Ce tutoriel a été réalisé sous Linux/Ubuntu 8.04; l'éditeur de texte utilisé est Geany, et le serveur local PHP est XAMPP.

1. Créer un layout statique de base

2. Adapter le layout statique de base à Yacs

3. Personnaliser le layout de base

4. Optimiser le skin ainsi obtenu

Conclusion

Avantage de la méthode

Comment mettre à jour le skin obtenu