Accueil
Test menu
Installer
Paramétrer
Noisettes
Pages spéciales
Plugins
Formation
Accueil
Répertoires de Spip
(diapo 1)
- config : installer spip en local
- ecrire : fonctionnement du noyau (diapo 2 à 4)
- extensions : voir plugins
- IMG et local : documents et vignettes
- plugins : d’autres ? (dépublication, ...)
- prive : squelettes de l’espace privé
- tmp/cache : vider le cache
- tmp/dump : base de données
- squelettes et squelettes-dist squelettes (diapo 5 à 8) N’oubliez pas que Spip va choisir le fichier de squelette à charger en suivant l’ordre de priorité décroissante suivant : squelettes/ —> plugins/ —> squelettes-dist/
Présentation d’Escal
(diapo 9,10)
Personnaliser Escal
TP1
Préalable : Renommer le répertoire squelettes en squelettes_old et créer un nouveau répertoire squelettes.
Pour toute modification du squelette(/plugins/auto/escal), copier le fichier dans /squelettes/ en conservant l’arborescence puis travaillez sur ce fichier.
- tester les mises en page générale proposée et choisir celle qui vous convient (inc-head.html)
- modifier le bandeau par défaut par la méthode souhaitée (inc-bandeau.html)
- modifier la police, la couleur, la taille du texte du bandeau (inc-titre_page.html)
- remplacer le logo du cadre Accès direct par celui de votre choix (inc-acces-direct) et ajouter un logo de votre choix à droite au cadre Edito.
Mise en page d’Escal
- Le répertoire styles et les fichiers css : mise en place des blocs div (diapo 11)
[vert olive]Les outils indispensables, les extensions de Firefox- [/vert olive]
TP2
- afficher la page de votre site dans Firefox puis désactiver le "Style de page" dans le navigateur (réactiver le si nécessaire … )
Installer Firebug, Colorzilla et Webdevelopper
- objectif : déplacer le nom du site dans le bandeau
- Avec Firebug, découvrir le nom du bloc en cliquant sur celui-ci et jouer sur les valeurs dans le css à droite.
- modifier des éléments de couleur, de taille etc ...
- créer un cadre (cadre-mescouleurs) à votre gôut en termes de couleurs (vous vous inspirerez des cadres existants dans general.css) et enregistrer ces nouvelles données dans un fichier squelettes/styles/perso.css (utiliser Webdevelopper à cet effet)
- Les squelettes pages spéciales
- Les squelettes de base : article.html, rubrique.html, sommaire.html
- Les noisettes
- Bilan : l’exemple de sommaire.html décortiqué
TP3
Cahier des charges
- Mise en page PMP
- Le bloc navigation contient dans cet ordre :
- un bloc edito dans un cadre vert dotée de l’icône /medias/logos_icones/stock_attach.png à gauche
- un bloc acces direct dans un cadre vert dotée de l’icône /medias/logos_icones/image-loading.png à gauche
- Le bloc extra contient dans cet ordre :
- un bloc Mini-agenda dans un cadre vert
- un bloc Statistiques du site dans un cadre mescouleurs (TP2)
- Le bloc contenu contient :
- un bloc A la Une
- ajouter à ce bloc un onglet dans lequel on fera apparaître les 10 articles les plus vues du site.
- changer le favicon de votre site.
- ajouter un lien et sa petite icone vers le site académique ac-lyon.fr dans votre pied de page
