Formation Création de page web avec Bootstrap

Objectifs pédagogiques :

• Décrire et réaliser des pages Web comprenant du texte mis en forme et structuré, des images, des formulaires
• Maitriser la notion de multifenêtrage et les hyperliens
• Comprendre les scripts serveur de type PHP
• Insérer du code javascript et DHTML
• Agencer des pages web adaptées à tout écran (responsive web design)
• Insérer du contenu (Menu, Boutons, Colonnes…)sans devoir le faire à la main

Pour tous ceux qui veulent savoir monter une page web sans forcément avoir des compétences techniques Web.
Pour les chefs de projets qui veulent réaliser une maquette opérationnelle rapidement, les designers non développeurs et tout autre profil débutant qui souhaiterait s’initier au web front-end en toute facilité.

Pour suivre cette formation complète, il vous suffit de bien connaitre un naviGustur et maîtriser l’environnement micro-informatique.

Rappels du fonctionnement d’un serveur Web et du dialogue NaviGustur/Serveur Web

• Présentation de l’URL et localisation d’un document Le protocole HTTP Les autres protocoles tels que FTP, TELNET, etc…

Le format des documents

• Le format HTML Les différents types de format Les formats texte, image, vidéo

Présentation du protocole http

• Principe du protocole Les différents types de requêtes (GET, POST, etc..)

Généralités du HTML

• Structure type d’une page HTML Format des commandes Exemple de message

Structure d’un document HTML

• Les balises principales HTML, L’instruction !DOCTYPE Les balises BDO, INS et DEL

L’en-tête HTML

• la balise META La reconnaissance par les moteurs de recherche

Les styles de Paragraphe

• Les en-têtes de paragraphe Les sauts de paragraphe Formatage des textes Les balises DIV et SPAN Le formatage des textes par balises Les séparateurs graphiques Exemples

Les hyperliens

• Les liens hypertexte Les autres types de liens

Les listes

• Les listes à puce Les listes numérotées Les listes de définition Les listes de menu et répertoire Les listes imbriquées Exemples

Travaux pratiques

Mise en oeuvre des techniques acquises

Les styles

• les styles physiques les caractères Les caractères accentués Les styles logiques Les modifications de fonte : BASEFONT Les balises FONT Exemples

Les images et les couleurs

• L’insertion d’images Les formats GIF, JPEG, PNG La balise IMG La balise OBJECT et PARAM Le fond d’écran Les images de fond

Les images réactives

• Définition d’une image réactive Les coordonnées Les server-side imagemap (zones sensibles) Les client-side imagemap

Les tables

• Définir une table Les balises de définition de table et leurs attributs TABLE, TH, TR, TD, etc…

Les formulaires

• Définition d’un formulaire La balise INPUT La balise SELECT La balise TEXTAREA La balise BUTTON La balise FIELDSET

Travaux pratiques

Réalisation de divers formulaires

Les feuilles de style CSS

• Présentation des feuilles de style Définition d’un style La balise LINK La notion de cascade Les attributs des styles exemples de feuilles de style

Travaux pratiques

Utilisation des feuilles CSS

Les technologies Front End et le rôle de Bootstrap

• Fonctionnement client serveur Que sont HTML et CSS Bootstrap, Foundation et les autres frameworks web Pourquoi utiliser Bootstrap ? Limites du framework Bootstrap et JS Responsive Web Design et Bootstrap Les évolution de Bootstrap, de la v1 à la V4

Mise en place de Bootstrap

• Télécharger Bootstrap La documentation Quelques exemples tout prêts

Bootstrap

• la base HTML La grille de mise en page (layout) Contenu (typographie, images…) Les composents Utilitaires et aide à la mise en page Responsive web design Éléments interactifs avec Javascript

Aller plus loin

• Personnaliser les styles de base Ajouter ses styles Le générateur Bootstrap Les thèmes Bootstap et places de marché

Bootstrap est une collection d’outils utile à la création du design (graphisme, animation et interactions avec la page dans le naviGustur … etc. …) de sites et d’applications web. C’est un ensemble qui contient des codes HTML et CSS, des formulaires, boutons, outils de navigation et autres éléments interactifs, ainsi que des extensions JavaScript en option.