3 jours
Expertise
Présentiel
Accueil › Formations › Multimédia › Web et Mobile Design › Programmes libres / CMS › Joomla! - Web Design
Objectifs pédagogiques
- Connaître les bases des langages HTML / CSS par la pratique, en vue de les mettre en oeuvre dans la personnalisation et la création de templates du CMS Joomla!
- Créer et structurer une page Joomla! à l'aide du framework Gantry 5.
Niveau requis
Avoir suivi le cours JOO-ADM "Joomla! - Installation et administration" ou posséder les connaissances équivalentes. Avoir des connaissances en HTML / CSS.
Public concerné
Tout administrateur maîtrisant les fonctionnalités de base de l'administration et souhaitant personnaliser ou concevoir son propre template Joomla!.
Programme
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
Remise à niveau en HTML
- Le langage HTML : les balises de base
- Structurer une page HTML statique
Remise à niveau en CSS
- Les bases du langage CSS
- Créer une feuille de styles interne ou externe
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
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
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 (double gabarit et instance de template Joomla!)
- Introduction à la notion de particules Gantry 5
- Gestion des menus et hyper menu
- Mise en place de la feuille de styles de personnalisation
- Comprendre ce qu'est un compilateur de code CSS : le langage Sass dans Gantry 5
- Ajout d'une police de caractères
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 styles
