HTML5 et CSS3 pour des sites Responsive Web Design

Dimension: px
Commencer à balayer dès la page:

Download "HTML5 et CSS3 pour des sites Responsive Web Design"

Transcription

1 Chapitre 1 : Introduction A. Le design Web aujourd'hui 11 B. Le Responsive Web Design 11 C. Les approches dans la conception 12 D. Le lâcher-prise 12 E. Les objectifs du livre 13 F. Les outils de l intégrateur Web Les objectifs Mozilla Firefox Google Chrome Apple Safari Microsoft Internet Explorer 16 G. Télécharger les exemples 17 Chapitre 2 : Des solutions pour la compatibilité A. La disparité des navigateurs 21 B. Pour une meilleure compatibilité 21 C. Le rendu initial des navigateurs La problématique Le reset universel Le reset d'eric Meyer 22 1/12

2 4. Le reset d'html5 Doctor 22 D. Normalize.css Le projet Télécharger Normalize.css Installer Normalize.css 25 E. L'HTML5 et html5shiv.js L'objectif Le fichier d'exemple La librairie html5shiv.js 28 F. Les requêtes de média et respond.js L'objectif Le fichier d'exemple La librairie respond.js 31 G. Les solutions de rechange et Modernizr.js L'objectif Télécharger Modernizr Créer une page d'exemple Installer et lier le script Modernizr La mise en action de Modernizr Utiliser les classes de Modernizr Utiliser Modernizr avec du JavaScript 39 H. Les L'objectif Utiliser les Les opérateurs 44 Chapitre 3 : La mise en page classique 2/12

3 A. Les designers et les intégrateurs 47 B. Le modèle des boîtes 47 C. Les marges des éléments 48 D. L'affichage des éléments 48 E. L'affichage dans le flux courant 49 F. L'affichage en position absolue 50 G. L'affichage en position fixée 51 H. L'affichage en position relative 53 I. Utiliser l'affichage en position relative et absolue 53 J. L'affichage des boîtes flottantes Le positionnement flottant Placer des boîtes côte à côte Interdire le flottement Un exemple avec quatre boîtes Une mise en page simpliste Conclusion sur la mise en page en élément flottant 68 Chapitre 4 : La mise en page à l'aide des tableaux A. L'objectif 71 3/12

4 B. La propriété display 71 C. Une mise en page simple avec un tableau 73 D. La largeur d'affichage du tableau 74 E. Les éléments anonymes 74 F. D'autres éléments pour les tableaux Les paragraphes en cellule Les listes en tableau 76 G. L'affichage des lignes 77 H. Définir la largeur des cellules Les largeurs fixes Les largeurs en pourcentage 79 I. Une mise en page avec un tableau plus structuré 80 J. Les autres propriétés d'affichage La propriété table-layout La propriété border-collapse La propriété border-spacing La propriété empty-cells La propriété caption-side 89 K. L'alignement vertical 91 L. Conclusion 92 4/12

5 Chapitre 5 : Les grilles de mise en page A. L'objectif 95 B. La structure des grilles pour le Web 96 C. Les grilles fixes 97 D. La grille fixe 960gs La grille Les fichiers CSS La page d'exemple Les liaisons aux feuilles de style Les styles personnels Le conteneur de la mise en page Les blocs sur 12 colonnes Les blocs placés sur des colonnes dans la grille Interdire les blocs flottants adjacents Les blocs placés avec un décalage Les blocs centrés Le code complet de la page 108 E. La grille fixe notjustagrid Le framework La grille La page d'exemple Les fichiers CSS Les liaisons aux feuilles de style Les styles personnels Le conteneur de la mise en page Le système des classes Un bloc sur la largeur de la grille Trois blocs sur un tiers de la grille Deux blocs sur 3/5e et 2/5e de la grille 116 5/12

6 12. Un seul bloc sur les 2/3 de la grille Le code complet de la page 117 F. La grille fluide Gridiculous Les grilles fluides La grille Gridiculous La page d'exemple Télécharger la grille Installer la grille Des styles personnels Le conteneur Les lignes Trois blocs de même largeur Deux blocs de largeur différente Un bloc décalé Affichage de la grille fluide 127 Chapitre 6 : Les Media Queries A. L'objectif 131 B. Les origines 131 C. Utiliser les requêtes de média 131 D. La syntaxe des requêtes de média 132 E. Les fonctionnalités à tester 133 F. Où placer les requêtes de média 134 G. La taille des écrans des mobiles 135 6/12

7 H. La notion de viewport 137 I. Un exemple très simple La maquette Le code HTML et CSS 142 J. Une grille responsive La grille Télécharger et installer la grille Créer une page simple sur 12 colonnes Les liaisons aux styles et aux scripts La structure de la mise en page Les règles CSS 152 K. Exemples de sites avec des requêtes de média 154 Chapitre 7 : La mise en page responsive A. Le design responsive 159 B. Les grilles responsives 159 C. La grille responsive Simple Grid Utiliser Simple Grid Télécharger et installer Simple Grid Les lignes La maquette La première ligne La deuxième ligne La troisième ligne Utiliser la grille fluide et responsive Le code complet 168 7/12

8 D. La grille responsive Columnal Utiliser Columnal Télécharger et installer Columnal La maquette Le conteneur et les lignes La première ligne La deuxième ligne La troisième ligne et le décalage La quatrième ligne et les blocs imbriqués Utiliser la grille fluide et responsive Le code complet de la mise en page Les images responsives Le code complet de la mise en page avec l'image responsive 185 E. L'utilisation des images 185 F. Les images fluides L'objectif La mise en page fixe La mise en page fluide La largeur fluide des autres éléments Les largeurs des images fluides Afficher et redimensionner la page Le code complet de la page 194 G. Le script Response.js Utiliser le JavaScript Télécharger les JavaScript Les liaisons aux JavaScript Préparer les images Le code de la page Le fonctionnement du script Optimiser les légendes Le code complet de la page 201 8/12

9 H. Le script picturefill.js Utiliser le JavaScript Télécharger le JavaScript Les liaisons aux JavaScript Préparer les images Le code de la page L'affichage de l'image responsive Le code pour des écrans haute définition (Retina) Le code complet de la page 206 I. Le script responsive-images.js Utiliser le JavaScript Télécharger la démonstration Le code de la page Utiliser la page 209 J. Les propositions d'avenir Les groupes de travail : RICG et W3C Les groupes de travail : Apple et W3C 212 K. La typographie responsive L'objectif Les unités utilisées L'unité em et la cascade L'unité rem et la cascade La typographie responsive et l'unité rem La typographie responsive et les polices de caractère Les unités liées au viewport 218 L. Les tableaux responsives L'objectif La solution Zurb La solution de Goeff Yuen 224 9/12

10 4. La solution de Chris Coyier D'autres solutions 231 Chapitre 8 : Les frameworks CSS A. Utiliser les frameworks CSS 239 B. Des frameworks CSS 239 C. Le framework UIkit Utiliser UIkit Télécharger le framework Télécharger jquery Installer le framework Créer une grille fluide Utiliser la grille fluide Utiliser la grille responsive d'uikit Créer une barre de navigation Créer un tableau mis en forme 256 D. Le framework Kube Utiliser Kube Télécharger le framework Installer le framework Créer une grille fluide et responsive Utiliser la grille fluide et responsive Insérer un formulaire Insérer des boutons 270 E. Le framework Pure Utiliser Pure Télécharger le framework Lier le framework /12

11 4. Utiliser la grille fluide responsive Insérer un tableau Insérer une barre de menu avec un menu déroulant 278 Chapitre 9 : Le futur de la mise en page A. Les objectifs 285 B. Le multicolonnage Le principe d'utilisation Mise en place des colonnes Mise en place des gouttières Mise en place des sauts de colonnes Répartition sur plusieurs colonnes Un générateur de multi-colonnes Les colonnes et le design responsive 291 C. Les boîtes flexibles Placer les éléments de mise en page Le module des boîtes flexibles Les boîtes flexibles L'orientation et le sens des boîtes Le débordement des boîtes L'orientation des boîtes L'alignement horizontal des boîtes L'alignement vertical des boîtes Les exceptions dans l'alignement vertical Les exceptions dans l'alignement horizontal Les propriétés de flexibilité La propriété flex-grow Les propriétés flex-shrink et flex-basis Des constructeurs en ligne Un exemple de mise en page flexible /12

12 D. Les autres modules du W3C L'habillage Les grilles Le modèle de page La mise en page Les régions 322 Index /12

Présentation du Framework BootstrapTwitter

Présentation du Framework BootstrapTwitter COUARD Kévin HELVIG-LARBRET Blandine Présentation du Framework BootstrapTwitter IUT Nice-Sophia LP-SIL IDSE Octobre 2012 Sommaire I. INTRODUCTION... 3 Définition d'un framework... 3 A propos de BootstrapTwitter...

Plus en détail

Introduction à Expression Web 2

Introduction à Expression Web 2 Introduction à Expression Web 2 Définitions Expression Web 2 est l éditeur HTML de Microsoft qui répond aux standard dew3c. Lorsque vous démarrez le logiciel Expression Web 2, vous avez le choix de créer

Plus en détail

RESPONSIVE WEB DESIGN

RESPONSIVE WEB DESIGN RESPONSIVE WEB DESIGN Une approche pour concevoir des sites Web adaptatifs et une occasion d'inciter les étudiants à consulter des cours responsives Ivan MADJAROV Arnaud FÉVRIER Comment consulte-t-on le

Plus en détail

Freeway 7. Nouvelles fonctionnalités

Freeway 7. Nouvelles fonctionnalités ! Freeway 7 Nouvelles fonctionnalités À propos de ce guide... 3 Nouvelles fonctionnalités en un coup d'oeil... 3 À propos de la conception d'un site web réactif... 3 Travailler avec les pages pour créer

Plus en détail

Évaluation des compétences. Identification du contenu des évaluations. Septembre 2014

Évaluation des compétences. Identification du contenu des évaluations. Septembre 2014 Identification du contenu des évaluations Septembre 2014 Tous droits réservés : Université de Montréal Direction des ressources humaines Table des matières Excel Base version 2010... 1 Excel intermédiaire

Plus en détail

Pour en expliquer le principe, on se limitera à deux exemples :

Pour en expliquer le principe, on se limitera à deux exemples : Les Media Queries permettent donc de cibler : Le type de média La taille de l'écran La taille de la fenêtre La résolution Le nombre de couleurs L'orientation Pour en expliquer le principe, on se limitera

Plus en détail

Introduction à HTML5, CSS3 et au responsive web design

Introduction à HTML5, CSS3 et au responsive web design 1 Introduction à HTML5, CSS3 et au responsive web design Jusqu à une période récente, les sites web étaient conçus avec une largeur fixe de l ordre de 960 pixels, en espérant que les visiteurs en tirent

Plus en détail

RESPONSIVE DESIGN. Gobelins 2014.2015. Isabelle Biamonti

RESPONSIVE DESIGN. Gobelins 2014.2015. Isabelle Biamonti RESPONSIVE DESIGN Gobelins 2014.2015 Isabelle Biamonti Plan Principe général Exemples Sans responsive Avec responsive Versions séparées Responsive design ou versions séparées? Comment rendre un design

Plus en détail

Utilisation de l éditeur.

Utilisation de l éditeur. Utilisation de l éditeur. Préambule...2 Configuration du navigateur...3 Débloquez les pop-up...5 Mise en évidence du texte...6 Mise en évidence du texte...6 Mise en page du texte...7 Utilisation de tableaux....7

Plus en détail

Guide d'utilisation. De Kompozer. AUTEUR INITIAL : S. LOIZEL Collège Saint Joseph Caudan (56)

Guide d'utilisation. De Kompozer. AUTEUR INITIAL : S. LOIZEL Collège Saint Joseph Caudan (56) Guide d'utilisation De Kompozer AUTEUR INITIAL : S. LOIZEL Collège Saint Joseph Caudan (56) Table des matières Fiche1 : Créer, nommer et sauvegarder une page...2 Fiche2 : Modifier les couleurs et le fond

Plus en détail

MAÎTRISE DE L ENVIRONNEMENT WINDOWS VISTA

MAÎTRISE DE L ENVIRONNEMENT WINDOWS VISTA MAÎTRISE DE L ENVIRONNEMENT WINDOWS VISTA OBJECTIFS : manipuler les fenêtres et l environnement Windows, gérer ses fichiers et dossiers, lancer les applications bureautiques présentes sur son poste. PUBLIC

Plus en détail

Référentiel Général d Accessibilité pour les Administrations RGAA

Référentiel Général d Accessibilité pour les Administrations RGAA Référentiel Général d Accessibilité pour les Administrations RGAA Annexe 3 : Grilles de correspondance entre les critères de succès et les tests de conformité Page 1/21 1. Grille de correspondance des

Plus en détail

LE POSITIONNEMENT CSS. Quelques notions essentielles

LE POSITIONNEMENT CSS. Quelques notions essentielles LE POSITIONNEMENT CSS Quelques notions essentielles Pour éviter ça....element{ padding: 15px; width: 98.32%; /* pas compris, mais ça déborde à 98.33% */ position: relative; /* faut pas enlever */ overflow:

Plus en détail

RESPONSIVE DESIGN : Comment offrir à vos sites une adaptabilité parfaite?

RESPONSIVE DESIGN : Comment offrir à vos sites une adaptabilité parfaite? RESPONSIVE DESIGN : Comment offrir à vos sites une adaptabilité parfaite? Medialibs, votre partenaire digital Quoi? Un partenaire pour une gestion globale du digital (un laboratoire R&D, éditeur de logiciels

Plus en détail

Programme de Formation Open Office Base Fonctions avancées

Programme de Formation Open Office Base Fonctions avancées ENVIRONNEMENT GÉNÉRALITÉS Lancer Microsoft Excel 2010 Quitter Microsoft Excel 2010 Découvrir la fenêtre de l'application Excel 2010 Découvrir la fenêtre du classeur Utiliser le ruban Découvrir l'onglet

Plus en détail

Optimiser pour les appareils mobiles

Optimiser pour les appareils mobiles chapitre 6 Optimiser pour les appareils mobiles 6.1 Créer un site adapté aux terminaux mobiles avec jquery Mobile... 217 6.2 Transformer son site mobile en application native grâce à PhoneGap:Build...

Plus en détail

Webmaster / Webdesigner / Wordpress

Webmaster / Webdesigner / Wordpress Webmaster / Webdesigner / Wordpress Pré-requis : Projet professionnel. Bonne maîtrise de l'ordinateur. Bases en infographie et / ou traitement de texte fortement recommandées. Objectifs : Concevoir un

Plus en détail

Word 2010 Expert Préparation à l'examen Microsoft Office Specialist (77-887)

Word 2010 Expert Préparation à l'examen Microsoft Office Specialist (77-887) Introduction Qu est-ce que la certification Microsoft Office Specialist? 11 Quels sont les intérêts de la certification? 11 Comment se passe un examen? 12 Comment réussir à l examen? 12 Et après? 12 Et

Plus en détail

LANGAGUE JAVA. Public Développeurs souhaitant étendre leur panel de langages de programmation

LANGAGUE JAVA. Public Développeurs souhaitant étendre leur panel de langages de programmation ING 01 LANGAGUE JAVA Durée : 21 heures 1090 HT / jour Dates : à définir en 2012 Concevoir et développer des programmes en langage Java Comprendre le fonctionnement de la machine virtuelle S approprier

Plus en détail

WEB. Travailler la résolution de vos pages

WEB. Travailler la résolution de vos pages GÉRER LES PAGES WEB Vous avez appris dans les sections 2 et 3 à créer le contenu textuel et graphique de vos pages Web. Cette section explique comment utiliser FrontPage pour placer des objets sur une

Plus en détail

UTILISATION CMS LINKEO

UTILISATION CMS LINKEO UTILISATION CMS LINKEO Table des matières 1 Synopsis... 3 2 Connexion à l'interface d'administration...4 3 Edition d'une page...5 3.1 Edition d'une page...5 3.2 Ajout d'une image...5 3.2.1 Transfert d'une

Plus en détail

Parcours FOAD Formation EXCEL 2010

Parcours FOAD Formation EXCEL 2010 Parcours FOAD Formation EXCEL 2010 PLATE-FORME E-LEARNING DELTA ANNEE SCOLAIRE 2013/2014 Pôle national de compétences FOAD Formation Ouverte et A Distance https://foad.orion.education.fr Livret de formation

Plus en détail

Tutoriel Technique. Plateforme de suivi des usages des ressources. Version 2 Date de conception : 03/2014 Auteur : Équipe UVED

Tutoriel Technique. Plateforme de suivi des usages des ressources. Version 2 Date de conception : 03/2014 Auteur : Équipe UVED Tutoriel Technique Plateforme de suivi des usages des ressources Version 2 Date de conception : 03/2014 Auteur : Équipe UVED 1. Connexion à la plateforme de suivi des usages Pour accéder à la plateforme

Plus en détail

Guide pour la réalisation d'un document avec Open Office Writer 2.2

Guide pour la réalisation d'un document avec Open Office Writer 2.2 Guide pour la réalisation d'un document avec Open Office Writer 2.2 1- Lancement de l'application : Le Traitement de textes de la Suite OpenOffice peut être lancé : soit depuis le menu «Démarrer / Programmes/OpenOffice2.2/Writer

Plus en détail

Recueil des Fiches Utilisateurs de «SharePoint»

Recueil des Fiches Utilisateurs de «SharePoint» Recueil des s s de «SharePoint» Ce document regroupe les fiches utilisateurs décrivant la navigation et l utilisation de l application SharePoint. (Référence DSI-DT-Sharepoint-1-4 Mai 2015) SOMMAIRE Accéder

Plus en détail

Responsive Web Design. Responsive Design avec HTML 5.0 et CSS3

Responsive Web Design. Responsive Design avec HTML 5.0 et CSS3 Ivan MADJAROV Responsive Design avec HTML 5.0 et CSS3 HTML5 CSS3 IvMad - 2013 2 La spécification CSS3 Media Queries (requêtes de media) définit les techniques pour adapter de feuilles de styles en fonction

Plus en détail

11/02/14 SITE WEB RÉACTIFS CONTEXTE ENVIRONNEMENT NAVIGATEURS PRINCIPES GÉNÉRAUX LES POINTS DE RUPTURE

11/02/14 SITE WEB RÉACTIFS CONTEXTE ENVIRONNEMENT NAVIGATEURS PRINCIPES GÉNÉRAUX LES POINTS DE RUPTURE 11/02/14 CONTEXTE SITE WEB RÉACTIFS S. LANQUETIN ENVIRONNEMENT Clavier (standard, mini, virtuel) Souris / doigt / stylet Rotation de l écran Performances CPU et GPU Capacité de stockage GPS Mobile/fixe

Plus en détail

2 LES BASES DU HTML 19 Qu est-ce que le HTML? 20 De quand date le HTML? 20 Écrire son propre code HTML 22

2 LES BASES DU HTML 19 Qu est-ce que le HTML? 20 De quand date le HTML? 20 Écrire son propre code HTML 22 SOMMAIRE INTRODUCTION La collection Classroom in a Book TinyUrL Conditions requises Installation du programme Copie des fichiers Classroom in a Book ordre recommandé pour les leçons Démarrage instantané

Plus en détail

Recueil des Fiches Utilisateurs de «SharePoint»

Recueil des Fiches Utilisateurs de «SharePoint» Recueil des s s de «SharePoint» Ce document regroupe les fiches utilisateurs décrivant la navigation et l utilisation de l application SharePoint. (Référence DSI-DT-Sharepoint-1 Avril 2014) ERGONOMIE GENERALE

Plus en détail

Progression secrétariat

Progression secrétariat Progression secrétariat I. Notions de base A. L'Unité Centrale et les périphériques 1. Unité centrale a) Le Schéma de principe (1) Entrée et sortie des informations, traitement des informations, en interne

Plus en détail

CMS Made Simple Version 1.4 Jamaica. Tutoriel utilisateur Récapitulatif Administration

CMS Made Simple Version 1.4 Jamaica. Tutoriel utilisateur Récapitulatif Administration CMS Made Simple Version 1.4 Jamaica Système de gestion de contenu CMS Made Simple est entièrement gratuit sous licence GPL. Tutoriel utilisateur Récapitulatif Administration Le système de gestion de contenu

Plus en détail

La mise en page web, feuille de style, cadre.

La mise en page web, feuille de style, cadre. La mise en page web, feuille de style, cadre. L importance du navigateur, son rôle est de lire le code HTML et CSS afin d afficher un résultat visuel à l écran, le problème est que les navigateurs n affichent

Plus en détail

UN SITE WEB RESPONSIVE EN UNE HEURE?

UN SITE WEB RESPONSIVE EN UNE HEURE? UN SITE WEB RESPONSIVE EN UNE HEURE?! O N O R H C P TO Raphaël Goetter Raphaël Goetter alsacreations.fr alsacreations.com goetter.fr knacss.com mobitest.me @goetter EN UNE HEURE, VOUS AVEZ DIT?!? R E N

Plus en détail

Tutorial des barres d'outils dans Mozilla Firefox

Tutorial des barres d'outils dans Mozilla Firefox Version 2.1 24. septembre 2007 Tutorial des barres d'outils dans Mozilla Firefox Responsable du projet : Auteur : Collaborateurs : Marc Johannot Cide Cyrille Verdon, Pouly Romain TUTORIIAL Les barres d'outils

Plus en détail

Responsive Web Design. La Rochelle, Avril 2014

Responsive Web Design. La Rochelle, Avril 2014 Responsive Web Design La Rochelle, Avril 2014 Mohamed Belmokhtar Université de La Rochelle Germain Souquet Université de La Rochelle Sommaire Qu est-ce que le responsive web design? Les différentes approches

Plus en détail

Silfid : Agence de création de site internet, formations et Conseils Retour sommaire

Silfid : Agence de création de site internet, formations et Conseils Retour sommaire Sommaire ILFID vous accueille dans sa salle de formation équipée d ordinateurs en réseau et connectés internet, d'un vidéo- Sprojecteur et tableau blanc. Nos solutions sont éligibles aux critères de financement

Plus en détail

Devenez un véritable développeur web en 3 mois!

Devenez un véritable développeur web en 3 mois! Devenez un véritable développeur web en 3 mois! L objectif de la 3W Academy est de former des petits groupes d élèves au développement de sites web dynamiques ainsi qu à la création d applications web

Plus en détail

Responsive Design. Technologies du web. Stéphane Bouvry, 2014

Responsive Design. Technologies du web. Stéphane Bouvry, 2014 Responsive Design Technologies du web Stéphane Bouvry, 2014 1. Objectif Utilisation de CSS pour la mise en page 2. Diapos Le responsive design : http://goo.gl/dmh8is 3. Grille fluide Dans cette partie,

Plus en détail

Safari, navigateur web intégré à Mac OS X

Safari, navigateur web intégré à Mac OS X Service informatique Enseignement Recherche Fiche n 50 13/11/2003 Safari, navigateur web intégré à Mac OS X Alternative à Internet Explorer et à Netscape, SAFARI est le navigateur web intégré à Mac OS

Plus en détail

Introduction : présentation de la Business Intelligence

Introduction : présentation de la Business Intelligence Les exemples cités tout au long de cet ouvrage sont téléchargeables à l'adresse suivante : http://www.editions-eni.fr Saisissez la référence ENI de l'ouvrage RI3WXIBUSO dans la zone de recherche et validez.

Plus en détail

Thèmes : Ateliers Bureautiques F2+ dans le cadre du DIF

Thèmes : Ateliers Bureautiques F2+ dans le cadre du DIF Thèmes : Ateliers Bureautiques F2+ dans le cadre du DIF Prise en main de l outil micro / Word / Excel / Internet : 20 h Perfectionnement de l outil micro : Word / Excel / Internet : 20 h Perfectionnement

Plus en détail

Contenu des cellules 36 Sélectionner des cellules 37 Sélectionner des lignes, des colonnes et des plages spéciales 38

Contenu des cellules 36 Sélectionner des cellules 37 Sélectionner des lignes, des colonnes et des plages spéciales 38 1 2 Introduction XVII Débuter avec Excel 1 Démarrer Excel 2 Nouveau! La fenêtre Excel 3 Utiliser le ruban 4 Nouveau! Choisir des commandes 5 Nouveau! Utiliser le ruban et les barres d outils 6 Nouveau!

Plus en détail

SAP BusinessObjects Web Intelligence (WebI) BI 4

SAP BusinessObjects Web Intelligence (WebI) BI 4 Présentation de la Business Intelligence 1. Outils de Business Intelligence 15 2. Historique des logiciels décisionnels 16 3. La suite de logiciels SAP BusinessObjects Business Intelligence Platform 18

Plus en détail

KompoZer. Composition du site : _ une page d'accueil : index.html. _ une page pour la théorie : theorie.html. _ une page pour les photos : photos.

KompoZer. Composition du site : _ une page d'accueil : index.html. _ une page pour la théorie : theorie.html. _ une page pour les photos : photos. KompoZer Créer un site «simple» Composition du site : _ une page d'accueil : index.html _ une page pour la théorie : theorie.html _ une page pour les photos : photos.html _ une page avec la galerie : galerie.html

Plus en détail

Suivi de la formation

Suivi de la formation Suivi de la formation Excel 2013 Nom : xxxxxxxx Prénom : xxxxxxxxx Suivi de la formation : Excel 2013 Contenu Niveau 1 : durée 4h15... 3 Etape 1. Découvrez Excel, complétez un tableau:... 3 Etape 2. Réalisez

Plus en détail

Préface 3. Conventions typographiques... 3 Feedback... 4. Introduction 5. Se familiariser avec l'interface de SiteBuilder 6. Créer un site Web 8

Préface 3. Conventions typographiques... 3 Feedback... 4. Introduction 5. Se familiariser avec l'interface de SiteBuilder 6. Créer un site Web 8 Parallels Panel Table des matières Préface 3 Conventions typographiques... 3 Feedback... 4 Introduction 5 Se familiariser avec l'interface de SiteBuilder 6 Créer un site Web 8 Editer un site Web 9 Utiliser

Plus en détail

Les unités de taille des polices de caractères

Les unités de taille des polices de caractères Les unités de taille des polices de caractères Deux systèmes permettent d'indiquer les dimensions des éléments en CSS : les unités de taille fixe et les unités de taille relative. C'est la propriété font-size

Plus en détail

1 Module 1 : feuille de style, position des blocs, nombre d éléments

1 Module 1 : feuille de style, position des blocs, nombre d éléments Plugin d'habillage d'eva-web 4 Le plugin d'habillage d'eva-web permet de : adapter la position, la taille des divers éléments la composant choisir les couleurs de fonds des divers secteurs choisir la taille,

Plus en détail

CRÉER, ROUTER ET GÉRER UNE NEWSLETTER, UN E-MAILING

CRÉER, ROUTER ET GÉRER UNE NEWSLETTER, UN E-MAILING CRÉER, ROUTER ET GÉRER UNE NEWSLETTER, UN E-MAILING Durée : 3J / 21H Formateur : Consultant expert en PAO et Web-marketing. Groupe de : 4 max Formation au web marketing Objectifs : Mettre en oeuvre des

Plus en détail

Notes pour l utilisation d Expression Web

Notes pour l utilisation d Expression Web EICW Formation Webmaster Notes pour l utilisation d Expression Web G. Barmarin 2008-2009 1 /21 Table des matières 1 Introduction... 3 2 Installer Expression Web... 4 3 Explorer et personnaliser l interface

Plus en détail

Conformité RGAA du site internet du Plan PME Rhône-Alpes Rapport d évaluation

Conformité RGAA du site internet du Plan PME Rhône-Alpes Rapport d évaluation Conformité RGAA du site internet du Plan PME Rhône-Alpes Rapport d évaluation Site web évalué : http://planpme.rhonealpes.fr/ Date de l évaluation : 28 novembre 2014 Version du RGAA : RGAA 2.2 Equivalence

Plus en détail

Technologies Web. Technologies Web DHTML TCM-TWEB-01-001-13. Julien BEAUCOURT 2006 pour ETNA

Technologies Web. Technologies Web DHTML TCM-TWEB-01-001-13. Julien BEAUCOURT 2006 pour ETNA DHTML Sommaire Introduction Compatibilité du DHTML Les layers Les balises dynamiques Balise Balise et La balise Animer de éléments Le Document Object Model (DOM) Modifier une

Plus en détail

Maîtriser l'utilisation des outils bureautiques. Maîtriser le logiciel de traitement de texte - Word. Maitriser le logiciel tableur - Excel

Maîtriser l'utilisation des outils bureautiques. Maîtriser le logiciel de traitement de texte - Word. Maitriser le logiciel tableur - Excel Itinéraire de formation LES OUTILS BUREAUTIQUES Domaine ITINERAIRE THEMATIQUE But Maîtriser l'utilisation des outils bureautiques Maîtriser le logiciel de traitement de texte - Word Word 2003 niveau I

Plus en détail

Introduction aux feuilles de styles

Introduction aux feuilles de styles Introduction aux feuilles de styles 1. Introduction Cette technologie a été introduite par Microsoft avec la version 3.0 (1996) avec pour but de modifier le contenu d'une page par une grande variété d'effets

Plus en détail

CSS. Techniques professionnelles pour une mise en page moderne. Eric A. Meyer. 2011 Pearson Education France CSS Eric A. Meyer

CSS. Techniques professionnelles pour une mise en page moderne. Eric A. Meyer. 2011 Pearson Education France CSS Eric A. Meyer CSS Techniques professionnelles pour une mise en page moderne Eric A. Meyer Pearson Education France a apporté le plus grand soin à la réalisation de ce livre afin de vous fournir une information complète

Plus en détail

Formation : WEbMaster

Formation : WEbMaster Formation : WEbMaster Objectif et Description : Centre Eclipse vous propose une formation complète WebMaster, vous permettant de : Utiliser dès maintenant les nouveautés du web2, ainsi alléger les besoins

Plus en détail

4. Personnalisation du site web de la conférence

4. Personnalisation du site web de la conférence RTUTORIEL Prise en main de la plateforme 1. Création de l espace conférence Connectez- vous sur le portail http://test- www.sciencesconf.org avec le compte : - Identifiant : «admin1» - Mot de passe «1234»

Plus en détail

Nouveautés de la version moodle 2.7

Nouveautés de la version moodle 2.7 Nouveautés de la version moodle 2.7 Atto Éditeur de texte facile Le nouveau éditeur de texte dans Moodle à été développé spécialement pour convivialité et accessibilité. Au-dessus de la zone d'écriture

Plus en détail

Guide d'utilisation. OpenOffice Calc. AUTEUR INITIAL : VINCENT MEUNIER Publié sous licence Creative Commons

Guide d'utilisation. OpenOffice Calc. AUTEUR INITIAL : VINCENT MEUNIER Publié sous licence Creative Commons Guide d'utilisation OpenOffice Calc AUTEUR INITIAL : VINCENT MEUNIER Publié sous licence Creative Commons 1 Table des matières Fiche 1 : Présentation de l'interface...3 Fiche 2 : Créer un nouveau classeur...4

Plus en détail

Guide Utilisateur Enregistrement d'un compte en ligne

Guide Utilisateur Enregistrement d'un compte en ligne Guide Utilisateur Enregistrement d'un compte en ligne Version: 1.0 Date du document: 21 novembre 2012 N du document: Guide Utilisateur Enregistrement d un compte en ligne Guide utilisateur Enregistrement

Plus en détail

Espace Client Aide au démarrage

Espace Client Aide au démarrage Espace Client Aide au démarrage 1. A propos de l Espace Client... 2 a. Nouvelles fonctionnalités... 2 b. Reprise de vos documents... 2 c. Migration vers l Espace Client... 2 2. Accès à l Espace Client...

Plus en détail

Diffuser un contenu sur Internet : notions de base... 13

Diffuser un contenu sur Internet : notions de base... 13 Diffuser un contenu sur Internet : notions de base... 13 1.1 Coup d œil sur l organisation de cet ouvrage.............. 15 Préambule : qu est-ce qu une page web?................ 16 À propos du HTML...........................

Plus en détail

Nouveautés joomla 3 1/14

Nouveautés joomla 3 1/14 Nouveautés joomla 3 1/14 Table des matières 1 Responsive... 1 2 Bootstrap... 1 3 LESS CSS intégré... 1 4. JUI (pour les développeurs d'extensions)... 1 5. Le Mambo days vs le Génial UX... 2 6. 7 étapes

Plus en détail

Travaux dirigés n 10

Travaux dirigés n 10 Travaux dirigés n 10 IMAC 1 Responsive Web Design Dans ce TD, vous verrez comment concevoir un design web qui s adaptera au terminal sur lequel il sera visualisé. Avant-propos Avec l avènement des smartphones

Plus en détail

Scolasite.net, le créateur de site web au service des enseignants. Guide d'administration du site Internet. Page 1

Scolasite.net, le créateur de site web au service des enseignants. Guide d'administration du site Internet. Page 1 Guide d'administration du site Internet Page 1 Scolasite permet de créer rapidement un site Internet, sans connaissances techniques particulières. Spécialement destiné aux établissements scolaires, son

Plus en détail

G E S T O B A T O N L I N E

G E S T O B A T O N L I N E Une nouvelle version du guide est actuellement en cours de rédaction G E S T O B A T O N L I N E G U I D E D E L U T I L I S A T E U R 1 Table des matières I. Préambule... 3 II. Introduction... 3 III.

Plus en détail

Approche Design Méthodologie de conduite de sites web

Approche Design Méthodologie de conduite de sites web Approche Design Méthodologie de conduite de sites web Phase 02 Concevoir le site (C) Conception visuelle N. Vanassche www.nathalievanassche.be Phase 2 (C) : Conception visuelle Facilité d utilisation:

Plus en détail

Guide 2015 site web classique L édition de site

Guide 2015 site web classique L édition de site Guide 2015 site web classique L édition de site L interface d édition Navigation... 03 Langue... 04 Thèmes... 05 Options... 06 Aperçu... 07 Paramètres de page... 08 Partage sur les médias sociaux... 09

Plus en détail

Intégrateur Web HTML5 CSS3

Intégrateur Web HTML5 CSS3 Intégrateur Web HTML5 CSS3 L objectif de la 3W Academy est de former des petits groupes d élèves à l intégration de sites internet ainsi qu à la création d applications web simples telles qu un blog ou

Plus en détail

Qlik Sense Desktop. Qlik Sense 2.0.2 Copyright 1993-2015 QlikTech International AB. Tous droits réservés.

Qlik Sense Desktop. Qlik Sense 2.0.2 Copyright 1993-2015 QlikTech International AB. Tous droits réservés. Qlik Sense Desktop Qlik Sense 2.0.2 Copyright 1993-2015 QlikTech International AB. Tous droits réservés. Copyright 1993-2015 QlikTech International AB. Tous droits réservés. Qlik, QlikTech, Qlik Sense,

Plus en détail

Documentation Tableur OpenOffice 2

Documentation Tableur OpenOffice 2 Documentation Tableur OpenOffice 2 1. Environnement de travail Nom du Nom du logiciel Barre de Zone de nom elle affiche l'adresse du champ sélectionné Cellule active Zone d'édition : elle affiche le contenu

Plus en détail

HTML. Notions générales

HTML. Notions générales 1 HTML Le langage HTML est le langage de base permettant de construire des pages web, que celles-ci soient destinées à être affichées sur un iphone/android ou non. Dans notre cas, HTML sera associé à CSS

Plus en détail

Survol des nouveautés

Survol des nouveautés Maîtrisez la conception de sites Web en toute simplicité WebExpert est un puissant logiciel d'édition Web qui vous permet de concevoir et de gérer des sites Web, de façon professionnelle en toute simplicité.

Plus en détail

1 OpenOffice.org 3.0... 15

1 OpenOffice.org 3.0... 15 1 OpenOffice.org 3.0... 15 1.1. Lancer l application générale... 16 1.2. Démarrer une application spécifique d OpenOffice.org... 19 Créer un raccourci sur le Bureau... 20 1.3. Les barres principales...

Plus en détail

dmp.gouv.fr Pour en savoir plus DMP Info Service : 24h/24 7j/7

dmp.gouv.fr Pour en savoir plus DMP Info Service : 24h/24 7j/7 dmp.gouv.fr Pour en savoir plus DMP Info Service : 24h/24 7j/7 Sommaire 1 Configuration requise pour accéder au DMP... 3 2 Procédure de vérification sous Internet Explorer... 4 2.1 Vérification de la compatibilité

Plus en détail

GUIDE Word (version débutante) Version 2013

GUIDE Word (version débutante) Version 2013 Table des matières GUIDE Word (version débutante) Version 2013 1. Créer un nouveau document Word... 2 2. Modifier un document Word... 2 3 La fenêtre Word.... 2 4. Les rubans... 3 5. Enregistrer du texte...

Plus en détail

Formation au logiciel Typo3, pour les rédacteurs.

Formation au logiciel Typo3, pour les rédacteurs. 1 Formation au logiciel Typo3, pour les rédacteurs. 1 Accéder au système 2 1.1 Configuration du navigateur 2 1.2 Identification 2 2 L interface 2 2.1 Le module Web 3 2.2 Le module Media 3 2.3 Le module

Plus en détail

Maîtrise des outils bureautiques et environnement de travail en cabinet comptable.

Maîtrise des outils bureautiques et environnement de travail en cabinet comptable. DONNEZ-VOUS LES MOYENS D EVOLUER Maîtrise des outils bureautiques et environnement de travail en cabinet comptable. L évolution rapide des NTIC (nouvelles technologies de l information et de la communication)

Plus en détail

1. La notion de cascade

1. La notion de cascade HTML 5 et CSS 3 (partie 2) Objectifs Connaître quelques notions avancées de CSS 3, Appréhender l affichage, Introduction au Responsive Web Design. 1. La notion de cascade On constate que l on peut avoir

Plus en détail

OBJECTIFS DE CE GUIDE... 5 QU EST-CE QU UN DOCUMENT ACCESSIBLE... 5 LA STRUCTURE D UN DOCUMENT... 6 LES TITRES ET LES SOUS-TITRES...

OBJECTIFS DE CE GUIDE... 5 QU EST-CE QU UN DOCUMENT ACCESSIBLE... 5 LA STRUCTURE D UN DOCUMENT... 6 LES TITRES ET LES SOUS-TITRES... Diffusion de l information dans Internet Guide de création de documents Word accessibles 5 novembre 2009 OBJECTIFS DE CE GUIDE... 5 QU EST-CE QU UN DOCUMENT ACCESSIBLE... 5 LA STRUCTURE D UN DOCUMENT...

Plus en détail

Développement d'applications Web HTML5 L'art et la manière avec Visual Studio 2015 et TFS

Développement d'applications Web HTML5 L'art et la manière avec Visual Studio 2015 et TFS Avant de commencer 1. Introduction 15 2. HTML5 oui, mais pas que... 15 2.1 HTML5 16 2.2 JavaScript 17 2.3 CSS 18 3. Les outils 18 Préparation des outils et création du projet 1. Introduction 21 2. Team

Plus en détail

INTERNET est un RESEAU D ORDINATEURS RELIES ENTRE EUX A L ECHELLE PLANETAIRE. Internet : interconnexion de réseaux (anglais : net = réseau)

INTERNET est un RESEAU D ORDINATEURS RELIES ENTRE EUX A L ECHELLE PLANETAIRE. Internet : interconnexion de réseaux (anglais : net = réseau) CS WEB Ch 1 Introduction I. INTRODUCTION... 1 A. INTERNET INTERCONNEXION DE RESEAUX... 1 B. LE «WEB» LA TOILE, INTERCONNEXION DE SITES WEB... 2 C. L URL : LOCALISER DES RESSOURCES SUR L INTERNET... 2 D.

Plus en détail

Votre Guide d utilisation

Votre Guide d utilisation Votre Guide d utilisation Comment accéder au Gestionnaire de Contenu (CMS)? Le Gestionnaire de Contenu (CMS) a été optimisé pour être utilisé avec le fureteur Google Chrome. Vous pouvez aussi utiliser

Plus en détail

MODE D EMPLOI (v1.1) DE PARUMOBILE, ÉDITEUR EN LIGNE DE SITE MOBILE

MODE D EMPLOI (v1.1) DE PARUMOBILE, ÉDITEUR EN LIGNE DE SITE MOBILE MODE D EMPLOI (v1.1) DE PARUMOBILE, ÉDITEUR EN LIGNE DE SITE MOBILE TABLE DES MATIÈRES 1. Inscription (p.3) 2. Connexion / Votre compte (p.4) 3. Édition (p.5) 3.1. Manager 3.1.1. La barre horizontale des

Plus en détail

bookmark), sachant qu'à chaque favori est associée une adresse web ; o suivre un hyperlien, sachant qu'à chaque hyperlien est associée une

bookmark), sachant qu'à chaque favori est associée une adresse web ; o suivre un hyperlien, sachant qu'à chaque hyperlien est associée une Introduction : On appelle «Web», contraction de «World Wide Web» (d'où l'acronyme www), une des possibilités offertes par le réseau Internet de naviguer entre des documents reliés par des liens hypertextes.

Plus en détail

Comment bloquer les publicités sur : Chrome, Firefox, IE, Opera et Safari!

Comment bloquer les publicités sur : Chrome, Firefox, IE, Opera et Safari! Comment bloquer les publicités sur : Chrome, Firefox, IE, Opera et Safari! Author : soufiane Bonjour, Aujourd'hui, la plupart des sites web utilisent différents types de publicité, afin de monétiser leur

Plus en détail

Aide à l utilisation du logiciel IziSpot.Mobi

Aide à l utilisation du logiciel IziSpot.Mobi 1 Sommaire 1. Description logiciel (explication des menus)... 3 1.1. Description de la barre de menu... 3 2. Onglet configuration... 4 2.1. Gestion du logo... 4 2.1.1. Affichage du zoom... 4 2.1.2. Disposition

Plus en détail

SOMMAIRE 1 INTRODUCTION 4 2 GUIDE D UTILISATION ET TUTORIAUX VIDEOS EN LIGNE 4 3 CONTACTER VOTRE SUPPORT 4 4 RACCOURCIS CLAVIER 5

SOMMAIRE 1 INTRODUCTION 4 2 GUIDE D UTILISATION ET TUTORIAUX VIDEOS EN LIGNE 4 3 CONTACTER VOTRE SUPPORT 4 4 RACCOURCIS CLAVIER 5 SOMMAIRE 1 INTRODUCTION 4 2 GUIDE D UTILISATION ET TUTORIAUX VIDEOS EN LIGNE 4 3 CONTACTER VOTRE SUPPORT 4 4 RACCOURCIS CLAVIER 5 5 ADMINISTRER SON SITE WEBGAZELLE CMS 2.0 5 5.1 Configuration minimale

Plus en détail

F0RMAT I0N BUREAUTIQUE

F0RMAT I0N BUREAUTIQUE F0RMAT I0N BUREAUTIQUE Initiation & Perfectionnement wwwmegarunfr - info@megarunfr INIT IAT I0N INF0RMAT IQUE Pré requis : Aucun Objectif : Découvrir l'outil informatique Durée : 4 jours Présentation de

Plus en détail

.. CSS. Damien Nouvel. Damien Nouvel (Inalco) CSS 1 / 15

.. CSS. Damien Nouvel. Damien Nouvel (Inalco) CSS 1 / 15 .. CSS Damien Nouvel Damien Nouvel (Inalco) CSS 1 / 15 Feuilles de styles Plan 1. Feuilles de styles 2. Sélecteurs 3. Attributs Damien Nouvel (Inalco) CSS 2 / 15 Feuilles de styles Déportation des styles

Plus en détail

Table des matières ENVIRONNEMENT

Table des matières ENVIRONNEMENT ENVIRONNEMENT Présentation de Windows 7.................13 Démarrer Windows 7......................15 Quitter.................................15 Les fenêtres..............................16 Généralités............................17

Plus en détail

Poste virtuel. Installation du client CITRIX RECEIVER

Poste virtuel. Installation du client CITRIX RECEIVER SITEL Poste virtuel Installation du client CITRIX RECEIVER DOCUMENTATION UTILISATEUR Service informatique et télématique E-mail: hotline.sitel@unine.ch Téléphone : +41 32 718 20 10 www.unine.ch/sitel Table

Plus en détail

Open Office - Niveau 1. Writer 3.1

Open Office - Niveau 1. Writer 3.1 Open Office - Niveau 1 Writer 3.1 OpenOffice.org Writer vous permet de concevoir et de réaliser des documents texte pouvant contenir des images, des tableaux ou des diagrammes. Vous pouvez ensuite enregistrer

Plus en détail

BUREAUTIQUE. 1 Journée. Maîtriser les fonctions de base du logiciel

BUREAUTIQUE. 1 Journée. Maîtriser les fonctions de base du logiciel BUREAUTIQUE Maîtriser les fonctions de base du logiciel Premiers pas dans Word - Présentation de l interface - Mode affichage écran - Méthode de Sélection, de Déplacement - La gestion crante des documents

Plus en détail

Mozilla Firefox 3.5. Google Chrome 3.0 LES NAVIGATEURS WEB. (pour Windows) Opéra 10. Internet Explorer 8. Safari 4.0

Mozilla Firefox 3.5. Google Chrome 3.0 LES NAVIGATEURS WEB. (pour Windows) Opéra 10. Internet Explorer 8. Safari 4.0 Mozilla Firefox 3.5 Google Chrome 3.0 LES NAVIGATEURS WEB (pour Windows) Opéra 10 Internet Explorer 8 Safari 4.0 1 1 Sommaire Qu est ce qu un navigateur Web? Fonctionnement Caractéristiques communes Caractéristiques

Plus en détail

TECHNIQUES D INTÉGRATION MULTIMÉDIA DIFFUSION EN LIGNE (582-KGB-JQ) 1-3-2

TECHNIQUES D INTÉGRATION MULTIMÉDIA DIFFUSION EN LIGNE (582-KGB-JQ) 1-3-2 TECHNIQUES D INTÉGRATION MULTIMÉDIA DIFFUSION EN LIGNE (582-KGB-JQ) 1-3-2 Enseignant : Serge Parent Bureau : 841.3G Téléphone : 418-547-2191, poste 7134 Courriel: serge.parent@cjonquiere.qc.ca Élève 2

Plus en détail

Access 2010 Entraînement 1 Garage Renault Dossier 24 MCD

Access 2010 Entraînement 1 Garage Renault Dossier 24 MCD Access 2010 Entraînement 1 Garage Renault Dossier 24 MCD Objectifs Concevoir une modèle conceptuel de données pour Access Durée 45 Support Papier Travail à faire : 1. Concevoir le dictionnaire des données.

Plus en détail

FORMATION BUREAUTIQUE OUTILS PC

FORMATION BUREAUTIQUE OUTILS PC GROUPE VALORIALE VALORIALE FORMATION FORMATION BUREAUTIQUE OUTILS PC Catalogue des formations valable jusqu au 31/12/13 VALORIALE 2012-2013 Intitulé de la formation : ENVIRONNEMENT PC Objectifs : Du système

Plus en détail

L utilisation d outils intelligents pour écrire du code valide

L utilisation d outils intelligents pour écrire du code valide B L utilisation d outils intelligents pour écrire du code valide Toutes les méthodes de développement, sans exception, incluent au moins une étape de test du code. C est parce que le code écrit par la

Plus en détail

Version 4.0. Multinet Ressources Inc. Page 1 sur 13

Version 4.0. Multinet Ressources Inc. Page 1 sur 13 Version 4.0 Page 1 sur 13 Introduction Lorsque vous obtenez l accès à Méganet, votre site est déjà construit. C est-à-dire qu il a fait l objet d une étude de style selon les couleurs de votre entreprise

Plus en détail