Les outils pour développer en HTML/CSS
- Installer et paramétrer un éditeur de code : Komodo Edit.
- Où trouver les ressources HTML/CSS sur le web ?
- Les étapes de la conception d'un site web : du mockup à l'intégration.
- Sensibilisation au responsive design.
Travaux pratiques
Installation de Komodo Edit.
HTML
- Le langage HTML : les balises de base.
- Structurer une page HTML statique.
Travaux pratiques
Création d’un code HTML.
CSS
- Les bases du langage CSS.
- Créer une feuille de styles interne ou externe.
Travaux pratiques
Création d’une feuille de style CSS.
HTML/CSS par la pratique : étude d'un framework Bootstrap
- Télécharger et installer Bootstrap.
- Construire une page HTML/CSS avec Bootstrap.
- Personnaliser la mise en page à l'aide de class CSS Bootstrap.
Travaux pratiques
Installation et manipulation de Bootstrap.
Administration avancée de Joomla!
- Créer une surcharge d'extension dans Joomla!.
- Comprendre la structure d'un template Joomla!.
- Analyser la structure d'un module Joomla!.
- Personnaliser la mise en forme d'un module : les suffixes de class CSS.
- Optimiser la mise en forme des articles par l'intégration de class CSS.
- Concevoir un contenu d'article fluide et responsive design.
- Mettre en place des templates de contenu : content templater.
Travaux pratiques
Personnalisation d’un module Joomla!.
Concevoir et personnaliser un template Joomla! avec Gantry 5
- Installer et personnaliser Gantry 5.
- Les réglages de styles par défaut : le gabarit "base outline".
- Comprendre la structure d'un template : le layout.
- Création et personnalisation de positions de modules.
- Création de gabarit de pages Joomla! et montage d'une page d'authentification d'un site intranet/extranet.
- Introduction à la notion de particules Gantry 5.
- Gestion des menus et hyper menus.
- Mise en place de la feuille de style de personnalisation.
- Compilateur de code CSS : le langage Sass dans Gantry 5.
- Ajout d'une police de caractères.
Travaux pratiques
Personnaliser un template Joomla! avec Gantry 5.
Template à partir d'une maquette graphique
- Analyse d'une maquette sur Adobe Photoshop.
- Extraction des éléments graphiques.
- Mise en place de la charte graphique dans la feuille de styles du template (variables et mixins Sass).
- Conception du gabarit et mise en place des positions du template Joomla!
- Intégration du contenu (modules, articles…).
- Réalisation et personnalisation du template par l'intégration du code CSS dans la feuille de style.
Travaux pratiques
Création d’un modèle à partir d’une maquette Photoshop.
4j
- 28h00 
