BR2CI - Formation Développement Internet : Créer des squelettes avec SPIP - Bretagne, Normandie, Pays de Loire, France

Formation Développement Internet

Créer des squelettes SPIP 2.0

La mise page et la mise en forme des contenus de SPIP sont définies à l'aide de squelettes.
Ces squelettes sont des modèles de pages Web en XHTML/CSS avec un méta-langage propre à SPIP pour permettre d'insérer les contenus.
Les squelettes de SPIP permettent une grande liberté dans la mise en page des contenus.

Objectifs

• Acquérir les bases XHTML-CSS, les bases du langage (de squelette) SPIP afin de pouvoir personnaliser ses propres modèles de page (squelettes) pour le gestionnaire de contenu SPIP
• Etre capable de construire et mettre en forme des pages Web conformes aux recommandations du W3C tout en prenant en compte les spécificités des principaux navigateurs.
• Comprendre l'accessibilité

Description

XHTML

1. L'environnement

• Les standards  du Web, le W3C
• L'environnement client : le navigateur, la résolution d'écran…
• L'environnement de travail : les éditeurs, les outils de validation, le navigateur…
• L'accessibilité

2. Introduction au langage HTML-XHTML

• Les balises, les attributs, les entités
• L'imbrication des éléments
• La structure d'un document
• la déclaration DOCTYPE, l'en-tête, le corps du document, les commentaires
• Les différentes versions HTML-XHTML

3. Créer un document HTML

• Définir le type du document (DOCTYPE)
• Définir la langue et l'encodage du document
• Définir le titre du document, les éléments méta comme "description" et "keywords"
  

4. Les différents éléments

• Les différents éléments et leurs attributs
• Titres, paragraphes, listes non ordonnées, ordonnées, de définitions
• Liens : lien vers un page Web, un document, une adresse électronique
• Images  et éléments Mulimédia
• Tableaux
• Formulaires : les différents champs

5. Mettre en forme / Séparer le fond et la forme

• Principe de la séparation du fond et de la forme, les avantages

CSS - Feuilles de style

1. Introduction au CSS

• Principes et définitions : CSS1, CSS2, CSS2.1
• La syntaxe CSS
• Définir les styles : dans un attribut style,  dans le document, dans un fichier externe
• Définir les sélecteurs, les médias, les unités et couleurs
• 2 balises HTML particulières DIV et SPAN

2. Définir les styles des bordures

• Les différents types de boîtes CSS (bloc ou en ligne)
• Définir les bordures, les espacements internes et externes …

3. Définir les styles de fond

• Définir les couleurs
• Définir une image de fond, répétition, positionnement…

4. Définir les styles de la  typographie

• Définir les caractéristiques d'un texte : la taille, la police, la couleur, alignement …
• Choisir et définir les paramètres pour tout un document ou tout un site
• Appliquer un style à tout un paragraphe ou à une partie du paragraphe

5. Définir les styles des liens

6. Définir les styles de positionnement

• Définir les dimensions, visibilité…
• Définir le positionnement, le flottant…

7. Définir les styles d'un tableau

• Définir le placement de la boîte de légende
• Définir le modèle de bordure…

8. Définir les styles d'une liste

• Définir les puces…

9. Créer un gabarit de page

• Créer un gabarit XHTML/CSS qui sera repris dans un squelette SPIP
• Définir et positionner des zones, centrer une zone
• Définir la mise en forme des blocs de contenus des différentes zones

Les squelettes de SPIP

1. Introduction

• Mode fonctionnement de SPIP
• Organisation des dossiers de SPIP
• Les Plugins
• Principe et objectifs des squelettes

2. Les squelettes

• Organisation des squelettes
• Les principaux squelettes, les fichiers de squelettes, les fichiers CSS
• Analyse d'un squelette
• le contenu avec le XHTML et le langage propre aux squelettes,
• le positionnement et la mise en forme avec les styles CSS

3. Le langage des squelettes

• Syntaxe des boucles
• Les différentes boucles : articles, rubriques, brèves...
• Les balises, les critères, les filtres
• Les inclusions
• Les modèles

4. Définir l'aspect des pages du site avec les styles CSS

• Définir l'aspect général des pages du site
• Définir le positionnement des différents contenus
• Définir la mise en forme des différents contenus
• Définir des mises en forme particulières

5. Personnaliser un squelette

• Définir et organiser les contenus à afficher
• (XHTML + langage des squelettes)
• Positionner et mettre en forme ces contenus
• (Styles CSS associés au XHTML précédemment défini)
   
  

Durée : 3 jours
Public : Webmasters, développeurs de pages Web, personnes souhaitant créer un site Internet, personnes souhaitant créer des squelettes pour le gestionnaire de contenu SPIP.
Pré-requis : Utilisateur averti du Web, pratiquer langage de programmation, connaître l'utilisation de SPIP

Retour au catalogue des formations