1. Livres et vidéos
  2. Foundation 6 - Un framework CSS pour concevoir des sites web attractifs et adaptatifs - Version en ligne

Foundation 6 Un framework CSS pour concevoir des sites web attractifs et adaptatifs - Version en ligne

  • Accès illimité 24h/24, 7J/7
  • Tous les livres en ligne, les vidéos et les cours enregistrés ENI
  • Plus de 10 nouveautés livres et vidéos chaque mois
  • Les nouveautés disponibles le jour de leur sortie
  • Accès 100% en ligne
  • Accessible immédiatement
  • Version HTML
  • Accès illimité 24h/24, 7J/7

Présentation

Foundation est un environnement de conception de site web, un framework en anglais. Grâce aux règles CSS prédéfinies, il vous permettra de concevoir des sites web modernes, attractifs, ergonomiques et élégants. Ce livre s'adresse à tous les concepteurs de site web connaissant déjà l'HTML et les CSS, désirant travailler efficacement et démarrer sur des bases solides.

Vous commencerez par apprendre à installer Foundation selon les différentes distributions proposées.

Foundation propose une grille de mise en page pour concevoir des sites en Responsive Web Design dont l'affichage s'adaptera automatiquement selon l'écran de diffusion (écran d'ordinateur, tablette ou smartphone). Vous pourrez utiliser une grille classique (avec les boîtes flottantes) mais aussi une grille exploitant le module CSS3 Flexbox.

Vous exploiterez ensuite les différents composants de Foundation afin d'optimiser vos pages web : les formulaires, les affichages selon la taille de l'écran, les barres de navigation, la pagination, les boutons, les médias et les composants de mise en page prêts à l'emploi tels que fenêtres, accordéons, tableaux...

Nous terminerons par l'exploitation des blocs de mise en page prêts à l'emploi (Building Blocks) et les modèles de page (HTML Templates).

Les exemples de code utilisés dans le livre sont disponibles en téléchargement sur le site des Editions ENI www.editions-eni.fr.

Table des matières

  • Chapitre 1 : Introduction
    • A. Le développement des sites web
    • B. Les fonctionnalités de Foundation
    • C. Télécharger les exemples
  • Chapitre 2 : Installer Foundation
    • A. Les objectifs
    • B. Les différentes versions de Foundation
    • C. Foundation complet
      • 1. Le téléchargement
      • 2. Les fichiers
      • 3. Les liaisons
      • 4. Exemple d'un fichier complet
    • D. Foundation Essential
      • 1. Le téléchargement
      • 2. Les fichiers
      • 3. Les liaisons
    • E. Foundation personnalisé
      • 1. La personnalisation
      • 2. Les fichiers
      • 3. Les liaisons
    • F. Foundation et Sass
    • G. Les styles CSS de Normalize
  • Chapitre 3 : La grille de mise en page classique
    • A. Les objectifs
    • B. Les points de rupture de Foundation
    • C. La grille de mise en page de Foundation
    • D. Une grille pour deux tailles d'écran
      • 1. La mise en page
      • 2. Les styles CSS des lignes
      • 3. Les styles CSS des blocs dans les colonnes
      • 4. Les blocs alignés
    • E. Une grille avec la seule taille d'écran large
      • 1. La mise en page
      • 2. Les styles CSS utilisés
    • F. Une grille avec la seule petite taille d'écran
      • 1. La mise en page
    • G. Un bloc plein écran
    • H. Imbriquer des grilles
    • I. Créer des décalages
    • J. Les grilles incomplètes
      • 1. Des blocs sur moins de douze colonnes
      • 2. Décaler le dernier bloc
    • K. Le remplissage intérieur
      • 1. Le remplissage par défaut
      • 2. Supprimer le remplissage
      • 3. Augmenter le remplissage
    • L. Centrer les blocs
    • M. Changer la mise en page selon la taille d'écran
    • N. Une grille pour les images
  • Chapitre 4 : La grille de mise en page Flexbox
    • A. Les objectifs
    • B. La feuille de style Flexbox
      • 1. Les feuilles de style de Foundation
      • 2. Importer la feuille de style Flexbox
      • 3. Les classes utilisées
    • C. Une grille simple
    • D. Les ajustements automatiques
      • 1. Ne pas indiquer de largeur
      • 2. Occuper la largeur nécessaire
    • E. L'empilement des blocs
      • 1. Empiler les blocs sur petits écrans
      • 2. Empiler les blocs sur les écrans voulus
    • F. L'alignement horizontal
    • G. L'alignement vertical
      • 1. L'alignement centré
      • 2. Des blocs de hauteur égale
      • 3. L'alignement individuel des blocs
    • H. L'ordre des blocs selon l'écran
  • Chapitre 5 : Les formulaires
    • A. Les objectifs
    • B. Un formulaire simple
    • C. Les objets de sélection
      • 1. Les listes déroulantes
      • 2. Les cases à cocher
      • 3. Les boutons radio
      • 4. Les encadrés
    • D. La mise en forme des formulaires
      • 1. L'aide à l'utilisation
      • 2. L'alignement des étiquettes
      • 3. Les symboles et les boutons
  • Chapitre 6 : La gestion de l'affichage
    • A. Les objectifs
    • B. Afficher selon l'écran
      • 1. Les affichages par taille d'écran
      • 2. Les affichages exclusifs
    • C. Masquer selon la taille de l'écran
    • D. Masquer des éléments
    • E. La détection de l'orientation
    • F. L'accessibilité
    • G. Les boîtes flottantes
      • 1. Les flottements à gauche et à droite
      • 2. Le flottement centré
  • Chapitre 7 : La typographie
    • A. Les objectifs
    • B. Les règles typographiques générales
    • C. Les paragraphes
    • D. Les en-têtes
    • E. Les blocs de citation
    • F. Les liens
    • G. Les listes
      • 1. Les listes non ordonnées
      • 2. Les listes ordonnées
      • 3. Les listes de définition
      • 4. Les propriétés communes
    • H. Des styles en ligne
    • I. L'alignement du texte
    • J. Les sous-en-têtes
    • K. Les paragraphes mis en évidence
    • L. Les très gros textes
    • M. Les fontes-icônes
      • 1. L'objectif
      • 2. L'installation
      • 3. Utilisation des icônes
  • Chapitre 8 : Les boutons
    • A. Les objectifs
    • B. Insérer des boutons
    • C. La taille des boutons
    • D. La couleur des boutons
    • E. Les boutons avec des bordures
    • F. Les boutons de fermeture
    • G. Les boutons à bascule
      • 1. Utiliser les boutons à bascule
      • 2. Un seul bouton
      • 3. Les boutons à bascule multiple
      • 4. Afficher une étiquette
      • 5. Les tailles des boutons
    • H. Les réglettes avec curseur
      • 1. Une réglette simple
      • 2. Affichage de la valeur
  • Chapitre 9 : La navigation
    • A. Les objectifs
    • B. Les menus
      • 1. Le menu simple
      • 2. Le menu à droite
      • 3. Le menu étendu
      • 4. Le menu vertical
      • 5. Le menu compact
      • 6. Le menu imbriqué
      • 7. Des icônes dans les menus
    • C. Les menus déroulants
      • 1. Les menus horizontaux
      • 2. Les menus verticaux
    • D. Les menus Drilldown
    • E. Les menus en accordéon
    • F. La barre des menus
    • G. Les menus "responsives"
      • 1. Les menus horizontaux à verticaux
      • 2. Les menus déroulants
    • H. Les menus Magellan
      • 1. L'effet de défilement
      • 2. Le menu bloqué
    • I. La pagination
    • J. Le fil d'Ariane
  • Chapitre 10 : Les conteneurs
    • A. Les objectifs
    • B. Les accordéons
      • 1. Les accordéons classiques
      • 2. Les accordéons sans volet ouvert
      • 3. Les accordéons à multiples volets ouverts
    • C. Les fenêtres d'alerte
      • 1. Les fenêtres classiques
      • 2. La taille des fenêtres
      • 3. Fermer une fenêtre
    • D. Les boutons déroulants
      • 1. Les objectifs
      • 2. Action par un clic de souris
      • 3. Action par un survol du pointeur
      • 4. Le positionnement
    • E. Les conteneurs de média
      • 1. Les objectifs
      • 2. L'affichage de l'image par défaut
      • 3. L'alignement de l'image
      • 4. Les images "responsives"
      • 5. L'affichage imbriqué
    • F. Les menus hors affichage
      • 1. Les objectifs
      • 2. La mise en place
      • 3. Les options des menus
    • G. Les fenêtres reveals
      • 1. Les objectifs
      • 2. L'affichage des fenêtres
      • 3. La taille des fenêtres
      • 4. L'arrière-plan
    • H. Les tableaux
      • 1. Les tableaux simples
      • 2. La mise en évidence au survol
      • 3. Les tableaux compacts
      • 4. Les tableaux à défilement horizontal
    • I. Les composants à onglets
      • 1. Les objectifs
      • 2. Les onglets horizontaux
      • 3. Les onglets verticaux
  • Chapitre 11 : Les médias graphiques
    • A. Les objectifs
    • B. Les badges
    • C. Les étiquettes
    • D. Les barres de progression
      • 1. Les objectifs
      • 2. Les barres de progression simples
      • 3. Les options des barres de progression
    • E. Les bulles d'aide
    • F. Les miniatures
  • Chapitre 12 : Les blocs et les modèles
    • A. Les objectifs
    • B. Les blocs prêts à l'emploi
      • 1. Utiliser les blocs prêts à l'emploi
      • 2. Un formulaire de connexion
    • C. Les modèles de site
      • 1. Utiliser les modèles de site
      • 2. Le modèle d'information et magazine
    • Index

Auteur

Christophe AUBRYEn savoir plus

Responsable pédagogique dans un centre de formation et formateur sur les technologies Web et les Arts graphiques pendant plus de quinze ans, Christophe AUBRY est aujourd'hui dirigeant de la société netPlume spécialisée dans la rédaction pédagogique et la création de sites internet. Auteur de nombreux livres et vidéos aux Editions ENI (HTML/CSS, RWD, WordPress, Drupal, Joomla…), il reste au fait des nouveautés concernant la conception des sites web en effectuant une veille technologique régulière.

Caractéristiques

  • Niveau Initié à Confirmé
  • Parution février 2016
    • HTML
    • ISBN : 978-2-409-00134-5
    • EAN : 9782409001345
    • Ref. ENI : LNOW6FOU

Téléchargements

En complétant ce formulaire, vous acceptez d'être contacté afin de recevoir des informations sur nos produits et services ainsi que nos communications marketing. Vous aurez la possibilité de vous désabonner de nos communications à tout moment. Pour plus d'informations sur notre politique de protection des données, cliquez ici.
  • Des fichiers complémentaires (4,38 Mo)