Grille fluide. Une grille fluide sert à structurer la mise en page, la rendre harmonieuse et faciliter le passage au responsive web design

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

Download "Grille fluide. Une grille fluide sert à structurer la mise en page, la rendre harmonieuse et faciliter le passage au responsive web design"

Transcription

1 Grilles Fluides CSS

2 CREATION D UNE GRILLE FLUIDE Grille fluide Une grille fluide sert à structurer la mise en page, la rendre harmonieuse et faciliter le passage au responsive web design

3

4

5 Maitriser la grille

6 Définition des éléments d une grille

7 Anatomie d une grille Une grille est composée de colonnes et de gouttières

8 Anatomie d une grille colonne gouttière

9 Anatomie d une grille Une grille est composée d autant de colonnes que nécessaire 3, 4, 12, 16, 24 colonnes

10 Mise en place de la grille css

11 comprendre le container Une grille css est composée d un élément supplémentaire Le container de la grille

12 container comprendre le container

13 comprendre le container Mais pourquoi un container?

14 comprendre le container Car les colonnes utiliseront l attribut css «float». Il est donc necessaire de recourir à un hack pour empêcher le dépassement des flottants

15 comprendre le container solution sans hack solution avec hack

16 comprendre le container Nous utilisons une classe css pour définir le composant container afin de pouvoir l utiliser plusieurs fois dans le site

17 comprendre le container.row:after { content: ""; display: table; clear: both; }

18 comprendre le container Cette classe css sera utilisée sur une div <div class= row > ici le contenu </div>

19 comprendre le container Maintenant donnons une une taille au site et centrons le

20 comprendre le container Nous utilisons également une classe pour définir ces propriétés

21 comprendre le container.wrapper { max-width: 960px; margin-left: auto; margin-right: auto; }

22 comprendre le container Nous pouvons maintenant utiliser nos deux classes pour commencer à construire notre grille

23 comprendre le container <div class= wrapper row > ici le contenu </div>

24 calculer la grille

25 calcul de grille Partons sur un exemple d une grille de 960px de 4 colonnes avec des gouttières de 20px

26 calcul de grille Le composant de colonne comprend 2 demies gouttières

27 calcul de grille Comment calculer la taille du composant de colonne?

28 calcul de grille Voici la formule 100% /nb colonne

29 calcul de grille Notre colonne fait donc 100 / 4

30 calcul de grille Ajoutons maintenant nos gouttières 25% + 20px

31 calcul de grille Redéfinissons le modèle de boite CSS afin de nous faciliter le calcul

32 calcul de grille *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: box-sizing: border-box; border-box; }

33 Nous avons fait le plus dur calcul de grille

34 calcul de grille Il nous reste a définir un composant de colonne en css

35 enfin... 4 composants calcul de grille

36 calcul de grille Nous utiliserons la convention de nommage suivante préfixe.col-1.col-2.col-3.col-4 nb de colonnes

37 calcul de grille Nous allons ecrire un sélecteur css3 capable de sélectionner les 4 composants de colonnes commençant par le prefix col-

38 calcul de grille [class*=col-] { propriété: valeur; }

39 calcul de grille Maintenant nous voulons que les composants.col-x se placent les uns à côté des autres avec une demi-gouttière à gauche et à droite

40 calcul de grille [class*=col-] { float: left; padding-left: 10px; padding-right: 10px; }

41 calcul de grille Nous pouvons maintenant définir nos composants de colonnes de.col-1 à.col-4

42 calcul de grille.col-1 { width: 25%; }.col-2 { width: 50%; }.col-3 { width: 75%; }.col-4 { width: 100%; }

43 calcul de grille Voici un exemple de code html d une grille <div class= wrapper row > <div class= col-1 ></div> <div class= col-1 ></div> <div class= col-1 ></div> <div class= col-1 ></div> </div>

44

45 Construction HTML avec des grilles fluides

46 imbrications des grilles Les grilles fluides présentent l avantage d être imbricables

47 imbrications des grilles À condition de supprimer la première et dernière demi-gouttière des colonnes imbriquées

48 imbrications des grilles.row.row { margin-left: -10px; margin-right: -10px; }

49 imbrications des grilles Exemple d imbrication.col-2.col-2.col-2.col-4.col-2 <div class= wrapper row > <div class= col-2 ></div> <div class= col-2 row > <div class= col-4 ></div> <div class= col-2 ></div> <div class= col-2 ></div> </div> </div>

50 imbrications des grilles Il faut toujours utiliser le même principe

51 imbrications des grilles il faut imbriquer des composants.col-x dans un composant.row <div class= row > <div class= col-2 ></div> <div class= col-2 > </div>

52 RWD

53 GRille responsive

54 GRille responsive Rien de plus simple : il suffit de supprimer les contraintes créées précédemment sur les composants.col-x

55 GRille only screen and (max-width:768px) { [class*=col-] { float: none; width: inherit; } }

56 fin

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

Conception Adaptative "Responsive Web Design"

Conception Adaptative Responsive Web Design Conception Adaptative "Responsive Web Design" Construire des interfaces web qui s'adaptent aux spécificités des terminaux sur lesquelles elles sont vues RWD in the wild quelques exemples : http://incredibletypes.com/

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

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

Création d un Site Web

Création d un Site Web Session2 Etapes Faciles Pour Réussir Sur Internet Création d un Site Web Mounir_ahlyege@hotmail.com 1 CSS :Cascading Style Sheets en français feuilles de style en cascade C'est un autre langage qui vient

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

.. 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

228 Index DTD 22. feuilles de styles voir Propriétés CSS et styles

228 Index DTD 22. feuilles de styles voir Propriétés CSS et styles Index A affichage, CSS 180 album photos, créer 83 arrière-plan, CSS 152 images 152 Attributs de balises HTML action 90 align 71 attributs communs 131 background 39 border 39, 70 cellpadding 70 cellspacing

Plus en détail

Media queries : gérer différentes zones de visualisation

Media queries : gérer différentes zones de visualisation 2 Media queries : gérer différentes zones de visualisation Comme nous l avons vu au chapitre précédent, les CSS3 sont constituées de modules. Media queries est simplement l un d eux. Ce module permet d

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

Formation (X)HTML-CSS avancé

Formation (X)HTML-CSS avancé Formation (X)HTML-CSS avancé Table des matières 1 Introduction 3 1.1 La philosophie W3C.................................. 3 1.2 Du HTML au XHTML................................. 3 1.3 Et dans la pratique...................................

Plus en détail

Rapport de Conception

Rapport de Conception Rapport de Conception Métier : Développement Membres du groupe Granier Maxime Imbert Jérémy Lansac Ludovic Tionohoue Yann Axone Métiers consultés IHM Contenu cispmptut_rapportdeconception_developpement_20110111

Plus en détail

CSS. Thierry Lecroq. Université de Rouen FRANCE. Thierry Lecroq (Univ. Rouen) CSS 1 / 50

CSS. Thierry Lecroq. Université de Rouen FRANCE. Thierry Lecroq (Univ. Rouen) CSS 1 / 50 CSS Thierry Lecroq Université de Rouen FRANCE Thierry Lecroq (Univ. Rouen) CSS 1 / 50 Plan 1 Généralités sur les CSS 2 Les sélecteurs 3 Les propriétés 4 le dimensionnement et le positionnement Thierry

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

Tutoriel : Feuille de style externe

Tutoriel : Feuille de style externe Tutoriel : Feuille de style externe Vous travaillerez à partir du fichier cerise.htm que vous ouvrirez dans NVU. Commencez par remplacer le contenu de la balise Title par : Comment débuter une recherche?

Plus en détail

E-MAILING & NEWSLETTER NEWSLETTER RESPONSIVE

E-MAILING & NEWSLETTER NEWSLETTER RESPONSIVE E-MAILING & NEWSLETTER NEWSLETTER RESPONSIVE mcbenveniste@gmail.com 09/2013 E-MAILING & NEWSLETTER L e-mailing consiste à envoyer des emails simultanément à un nombre important de destinataires dont le

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

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

LES GRANDES ETAPES DE CREATION D UN WEB DESIGN

LES GRANDES ETAPES DE CREATION D UN WEB DESIGN LES GRANDES ETAPES DE CREATION D UN WEB DESIGN PENSER LA STRUCTURE ET LE THEME DU SITE STRUCTURE ET THEME DU SITE Taille (le site sera-t-il extensible ou fixe?) Organisation Thème Couleurs Illustrations

Plus en détail

Documentation. Application «La Carte» Version 2.2.0 (Octobre 2015) Rue du XXXI Décembre 36 CH 1207 Genève Tél. +41 22 544 24 24 Email info@sdic.

Documentation. Application «La Carte» Version 2.2.0 (Octobre 2015) Rue du XXXI Décembre 36 CH 1207 Genève Tél. +41 22 544 24 24 Email info@sdic. Documentation Application «La Carte» Version 2.2.0 (Octobre 2015) Rue du XXXI Décembre 36 CH 1207 Genève Tél. +41 22 544 24 24 Email info@sdic.ch Table des matières 1. Introduction... 4 2. Installation...

Plus en détail

Introduction aux squelettes SPIP «RÉCIT-FP Partenaires v1.3.2»

Introduction aux squelettes SPIP «RÉCIT-FP Partenaires v1.3.2» Introduction aux squelettes SPIP «RÉCIT-FP Partenaires v1.3.2» Note importante : Pour l installation de SPIP et des squelettes RÉCIT-FP Partenaires v1.3.2, veuillez vous référer au fichier INSTALL.txt.

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

PROGRAMMER UNE PAGE WEB EN HTML ET CSS

PROGRAMMER UNE PAGE WEB EN HTML ET CSS Lycée Felix Le Dantec - Lannion PROGRAMMER UNE PAGE WEB EN HTML ET CSS 1STI2D TP8-3H NOM : PRÉNOM : CLASSE : Condition de réalisation : Travail seul Durée : 3 heures Matériel : un ordinateur sous Ubuntu

Plus en détail

Html et Css : des documents sur le web

Html et Css : des documents sur le web Html et Css : des documents sur le web HTML, c'est quoi? le langage pour décrire la structure des documents web Un langage normalisé par le W3C Un document html doit être conforme à la norme Un document

Plus en détail

Mise en page CSS avec KompoZer

Mise en page CSS avec KompoZer But de la leçon Mise en page CSS avec KompoZer Dans la conception actuelle de la conception des pages web, il est indispensable de séparer clairement le contenu d'un document de l'ensemble des directives

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

Conception de sites web. Feuille de styles CSS

Conception de sites web. Feuille de styles CSS Conception de sites web Feuille de styles CSS M i s e e n p a g e : s o l u t i o n «v i e i l l e é c o l e» Mise en page par et par Long Vite illisible Peu souple Difficile à modifier

Plus en détail

CSS avancées Vers HTML 5 et CSS 3

CSS avancées Vers HTML 5 et CSS 3 CSS avancées 2 e édition Raphaël Goetter Préface de Daniel Glazman Groupe Eyrolles, 2011, 2012, ISBN : 978-2-212-13405-6 Table des matières Avant-propos... 1 Le site dédié au livre... 2 Conventions utilisées

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

Création d un Site WEB

Création d un Site WEB RAPPORT DE STAGE DE L INFORMATIQUE POUR L INGÉNIEUR Création d un Site WEB Réalisé par : Badie SAADA Med Amine BAATOUT Surveillé par : Mme Syrine CHARFI Mme Sonia ALOUANE 25 septembre 2013 Table des matières

Plus en détail

2011-2012. Intro Web. PICARD GRAVEL Marie-Eve

2011-2012. Intro Web. PICARD GRAVEL Marie-Eve Intro Web 2011-2012 «nous donnerons tout d'abord les définitions de l'internet, du Web et du langage XHTML. Nous expliquerons ensuite ce qu'est une url et les différentes actions induites lorsque je demande

Plus en détail

11. ANNEXE 3 : SPECIFICATIONS TECHNIQUES

11. ANNEXE 3 : SPECIFICATIONS TECHNIQUES 11. ANNEXE 3 : SPECIFICATIONS TECHNIQUES 11.1 Hébergement : Plan Antilope Hosteur Caractéristiques détaillées : Hébergement web : - Temps d'exécution de script PHP : 30 secondes - Taille maximale en mémoire

Plus en détail

TP JAVASCRIPT OMI4 TP5 SRC1 2011-2012

TP JAVASCRIPT OMI4 TP5 SRC1 2011-2012 TP JAVASCRIPT OMI4 TP5 SRC1 2011-2012 FORMULAIRE DE CONTACT POUR PORTFOLIO PRINCIPE GENERAL Nous souhaitons réaliser un formulaire de contact comprenant les champs suivants : NOM PRENOM ADRESSE MAIL MESSAGE

Plus en détail

Module M1105 5. Frameworks web

Module M1105 5. Frameworks web Module M1105 5. Frameworks web Sébastien THON DUT Informatique 1ère année IUT d'aix-marseille Université, site d Arles Département Informatique Version 1.0 du 15/09/2015 2 INTRODUCTION On a vu comment

Plus en détail

ANNEXE 2a : plus loin avec CSS, notion de boite

ANNEXE 2a : plus loin avec CSS, notion de boite ANNEXE 2a : plus loin avec CSS, notion de boite Tout contenu d'une balise HTML se représente à l'écran sous forme d'une boite. Cette boite est composée de 3 éléments : un conteneur, une marge intérieure

Plus en détail

BTS Informatique de Gestion (lycée Rostand Chantilly) Initiation au PHP Fiche 5 Floats dynamiques - Page 1. Sommaire

BTS Informatique de Gestion (lycée Rostand Chantilly) Initiation au PHP Fiche 5 Floats dynamiques - Page 1. Sommaire Initiation au PHP Fiche 5 Floats dynamiques - Page 1 FICHE 5 Objectifs : Etre capable de gérer dynamiquement un site. Utiliser la propriété Float et la fonction include( ) Gérer à la fois du XHTML, du

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

Introduction Web : Cours. IUT de Villetaneuse.

Introduction Web : Cours. IUT de Villetaneuse. Introduction Web : Cours 1ère année IUT de Villetaneuse. Mathieu Lacroix 1 9 septembre 2014 1. E-mail : mathieu.lacroix@iutv.univ-paris13.fr, Page Web : http://www.lipn.univ-paris13.fr/~lacroix/ IUT de

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

Créer son site web. Avec la distribution e-change http://www.plateforme-echange.org/ Benoît Mamet Cédric Morin

Créer son site web. Avec la distribution e-change http://www.plateforme-echange.org/ Benoît Mamet Cédric Morin Créer son site web Avec la distribution e-change http://www.plateforme-echange.org/ Benoît Mamet Cédric Morin 1 Personnaliser l'apparence du site Avec la distribution e-change 2 La version rapide 3 Choisir

Plus en détail

Institut Méditerranéen de Biodiversité et d Ecologie marine et continentale

Institut Méditerranéen de Biodiversité et d Ecologie marine et continentale Documentation pour l administration de Pages personnelles sur www.imbe.fr Update : 05/12/2013 Les pages personnelles Ouverture d une page personnelle La demande de création d une page personnelle doit

Plus en détail

XHTML et CSS. 17 et 18 mai 2006 CRI-IUT 2006 METZ - Jérôme LANDRÉ - IUT Le Creusot 1

XHTML et CSS. 17 et 18 mai 2006 CRI-IUT 2006 METZ - Jérôme LANDRÉ - IUT Le Creusot 1 XHTML et CSS 17 et 18 mai 2006 CRI-IUT 2006 METZ - Jérôme LANDRÉ - IUT Le Creusot 1 1) Introduction 2) HTML, XML 3) XHTML 4) CSS 5) Exemples 6) Outils 7) Conclusion Sommaire 17 et 18 mai 2006 CRI-IUT 2006

Plus en détail

Cas client : Mise en place d une créa d Email Responsive RESPONSIVE EMAIL DESIGN

Cas client : Mise en place d une créa d Email Responsive RESPONSIVE EMAIL DESIGN Cas client : Mise en place d une créa d Email Responsive RESPONSIVE EMAIL DESIGN La demande : Un de nos clients nous interroge pour faire évoluer ses emails de recrutement prestataires, vers du responsive.

Plus en détail

Formation Site Web : CSS et PHP

Formation Site Web : CSS et PHP Formation Site Web : CSS et PHP Valentin Roussellet Joachim Jablon Chahine Benchorha VIA Centrale Réseaux 1 er décembre 2008 Qu'est-ce que CSS Les sélecteurs La mise en page et le box-model Une CSS (Cascading

Plus en détail

GUIDE DU DESIGN GRAPHIQUE DU SITE ABCD

GUIDE DU DESIGN GRAPHIQUE DU SITE ABCD GUIDE DU DESIGN GRAPHIQUE DU SITE ABCD Version 4.0.2 Table des matières Introduction...2 Architecture du site ABCD...2 Les standards du web...3 Accessibilité...4 Type I ou portail du site ABCD...4 Type

Plus en détail

Mais pourquoi le dev' saccage mon intégration? Atelier technique CSS Paris Web 2011 par Romy Duhem-Verdière http://romy.tetue.

Mais pourquoi le dev' saccage mon intégration? Atelier technique CSS Paris Web 2011 par Romy Duhem-Verdière http://romy.tetue. Mais pourquoi le dev' saccage mon intégration? Atelier technique CSS Paris Web 2011 par Romy Duhem-Verdière http://romy.tetue.net/857 Intégrateur de STPo - Robot de Gordon Bennett 2 L'intégrateur XHML,

Plus en détail

5. Donnez et expliquez 2 arguments justifiant la détection de capacités côté client plutôt que côté serveur, en utilisant l User Agent.

5. Donnez et expliquez 2 arguments justifiant la détection de capacités côté client plutôt que côté serveur, en utilisant l User Agent. Questions de cours LPSIL 2012/2013 1 1. Pour chaque type de site listé ci-dessous, indiquez la ou les approches d adaptation à utiliser parmi les 3 approches vues en cours (1 point) : - Site ayant 2 parties

Plus en détail

INITIATION AU LANGAGE HTML

INITIATION AU LANGAGE HTML INITIATION AU LANGAGE HTML I INTRODUCTION Seules les bases du langage HTML sont abordées ici. Cette initiation a pour but de "démarrer", les nombreuses ressources concernant ce langage vous permettront

Plus en détail

Bac Professionnel Systèmes Electroniques Numériques

Bac Professionnel Systèmes Electroniques Numériques DR - Création d un site WEB TP Le HTML Pour créer un site web, on doit indiquer des informations à l'ordinateur. Il ne suffit pas de taper simplement le texte qu'il y aura dans son site, il faut aussi

Plus en détail

Zen, SASS, responsive design

Zen, SASS, responsive design , SASS, responsive design Felip Manyer i Ballester Res Telæ 21 mai 2013 Felip Manyer i Ballester, SASS, responsive design 1/36 Plan 1 Créer un thème sous Drupal Généralités Concepts à mettre en œuvre Typologie

Plus en détail

MODULE : PROGRAMMATION DE SITES WEB DYNAMIQUE

MODULE : PROGRAMMATION DE SITES WEB DYNAMIQUE MODULE : PROGRAMMATION DE SITES WEB DYNAMIQUE LEÇON :MASTER PAGE Formateur :A BENDAOUD OFPPT/DRPS/ISGI LAAYOUNE Les Master Pages Prenons l exemple d un site composé de trois grandes parties : une bannière

Plus en détail

Créer un menu adaptable à toutes les résolutions

Créer un menu adaptable à toutes les résolutions Créé par : feektif Ce guide est reproductible en : 30 à 40 min et est d'un niveau : Intermédiaire Pour de tutoriel, nous allons réaliser un menu composé de cinq liens, chacun divisé en 3 éléments. Un curseur

Plus en détail

Moodle 2, votre premier thème graphique

Moodle 2, votre premier thème graphique UTC Moodle 2, votre premier thème graphique Un tutorial pour créer un thème graphique pour moodle v2 Dominique Chambelant 03/03/2011 Moodle v2.0.x Développement: Thèmes 2,0 créer votre premier thème Ce

Plus en détail

{less} Guide de démarrage

{less} Guide de démarrage {less Guide de démarrage Pré requis L'utilisation d'un pré processeur css nécessite son installation préalable. Vous pouvez choisir de tout installer du coté du serveur ou du coté du client. Votre site

Plus en détail

Workshop CAS et évaluation d expressions. Raphaël Shugo Boissel (boisse_r)

Workshop CAS et évaluation d expressions. Raphaël Shugo Boissel (boisse_r) Workshop CAS et évaluation d expressions Raphaël Shugo Boissel (boisse_r) 23 Novembre 2013 1 Présentation du workshop.................... 2 1.1 Définition du cas..................... 2 1.2 Définition de

Plus en détail

Eclipse et quelques notions de Jquerry

Eclipse et quelques notions de Jquerry Eclipse et quelques notions de Jquerry Tout d abord, une petite présentation s impose. Eclipse est un outil de développement qui permet d éditer du code et de visualiser le résultat grâce à des émulateurs

Plus en détail

Multimédia - Partie WEB. Syllabus de 6 ème PHOTO

Multimédia - Partie WEB. Syllabus de 6 ème PHOTO Multimédia - Partie WEB Syllabus de 6 ème PHOTO Edition : 2015 Professeur : J. Pochet 2 Table des matières Table des matières... 3 Introduction... 5 Manipulation 1 : Page d introduction... 6 Objectif général...

Plus en détail

AdOps Spécifications techniques publicitaires

AdOps Spécifications techniques publicitaires AdOps Spécifications techniques publicitaires Matériel publicitaire HTML5 (Desktop) Les spécifications suivantes doivent être respectées pour la fourniture de matériel publicitaire HTML. Si vous utilisez

Plus en détail

Tutoriel Chat AJAX Partie 2 : Prototype, Scriptaculous, Application HTML

Tutoriel Chat AJAX Partie 2 : Prototype, Scriptaculous, Application HTML Tutoriel Chat AJAX Partie 2 : Prototype, Scriptaculous, Application HTML Prototype et Scriptaculous Pour cette application de "chat" nous utiliserons deux librairies populaires de Javascript : Prototype

Plus en détail

TP Initiation au langage HTML

TP Initiation au langage HTML TP Initiation au langage HTML (1) Rappels de quelques généralités Un fichier HTML n'est pas compilé (ce n'est pas un programme) Un fichier HTML est un fichier texte simple, parfaitement lisible, respectant

Plus en détail

Les API JavaScript du HTML5 Intégrez la puissance du HTML5 dans vos applications Web

Les API JavaScript du HTML5 Intégrez la puissance du HTML5 dans vos applications Web 52 Les API JavaScript du HTML5 Intégrez la puissance du HTML5 dans vos applications Web D'où proviennent ces données qui permettent de vous localiser? Pour les smartphones, deux procédés peuvent être utilisés

Plus en détail

VIVE LES TABLEAUX DE MISE EN PAGE! et si la solution était là depuis le début?

VIVE LES TABLEAUX DE MISE EN PAGE! et si la solution était là depuis le début? VIVE LES TABLEAUX DE MISE EN PAGE! et si la solution était là depuis le début? Raphaël Goetter ~ Paris Web 2011 Au tableau : élève Raphaël Goetter Dew TABLE(AU) DES MATIERES (hé hé) 1. Les dessous de table

Plus en détail

Qu est-ce Joomla!? Il permet de gérer votre site internet de manière simple et rapide. C est ce que l on appelle un CMS.

Qu est-ce Joomla!? Il permet de gérer votre site internet de manière simple et rapide. C est ce que l on appelle un CMS. Gestion de Joomla! Introduction Qu est-ce Joomla!? Il permet de gérer votre site internet de manière simple et rapide. C est ce que l on appelle un CMS. Que peut-on faire avec? On peut faire beaucoup de

Plus en détail

HTML5 et CSS3 pour des sites Responsive Web Design

HTML5 et CSS3 pour des sites Responsive Web Design 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

Plus en détail

Introduction... 3. 1 Pourquoi Slax?... 4. 2 Formatage... 5. 3 Rendre la clé bootable sous linux... 6. 4 Slax... 7. 5 Installshield...

Introduction... 3. 1 Pourquoi Slax?... 4. 2 Formatage... 5. 3 Rendre la clé bootable sous linux... 6. 4 Slax... 7. 5 Installshield... 6, bd maréchal Juin F-14050 Caen cedex 4 Spécialité Informatique 1 re année Rapport de mini-projet Slax sur clé USB PAITEL Arnaud Montouchet Yohann Responsable : François Lecellier 2 e semestre 2006-2007

Plus en détail

Description des pratiques à adopter pour la mise à jour du layout en utilisant le gestionnaire de conception de Sharepoint 2013

Description des pratiques à adopter pour la mise à jour du layout en utilisant le gestionnaire de conception de Sharepoint 2013 Exemple d utilisation du gestionnaire de conception Description des pratiques à adopter pour la mise à jour du layout en utilisant le gestionnaire de conception de Sharepoint 2013 6, rue de l Etang, L-5326

Plus en détail

Initiation à la fabrication de sites web. Table des matières. Plantons le décor!... 1 Concepts de base du HTML... 2

Initiation à la fabrication de sites web. Table des matières. Plantons le décor!... 1 Concepts de base du HTML... 2 Table des matières Plantons le décor!... 1 Concepts de base du HTML... 2 1. Les liens hypertexte... 2 2. Les balises... 2 3. Ossature d une page HTML... 3 Une première page web... 5 1. Les balises indispensables...

Plus en détail

Les frames ou cadres. Prérequis. Introduction. Avec le soutien de la Commission européenne

Les frames ou cadres. Prérequis. Introduction. Avec le soutien de la Commission européenne ou cadres Dans cette fiche, nous allons vous apprendre à faire des frames ou en français «cadres». Tout et son contraire a été dit à propos des frames. En tout état de cause, tous les navigateurs Internet

Plus en détail

p,ul,li,td { font-size : 100%; font-family : Verdana, Arial, Helvetica, Geneva, sans-serif; color : black; background-color : white; }

p,ul,li,td { font-size : 100%; font-family : Verdana, Arial, Helvetica, Geneva, sans-serif; color : black; background-color : white; } Enregistrer la feuille de style "style.css" mettre dans l'en-tête de la page html (entre les balises ) : mettre dans l'en-tête de

Plus en détail

DESSINER AVEC HTML5 OBJET CANVAS Images statiques première partie

DESSINER AVEC HTML5 OBJET CANVAS Images statiques première partie DESSINER AVEC HTML5 OBJET CANVAS Images statiques première partie Canvas est une balise HTML mais les méthodes de dessin sont l'affaire de JAVASCRIPT. Canvas, comme img, est une balise de type inline qui

Plus en détail

Création d un site Internet (partie 2 )

Création d un site Internet (partie 2 ) Création d un site Internet (partie 2 ) Objectif : Apprendre les bases des langages XHTML et CSS pour réaliser un site CV Site ressource : http://jleu10.free.fr Adresse mail : jleu10@free.fr Jean-Louis

Plus en détail

Date de création : 03/06/2013 Date de modification : Fiches techniques PMB - Cellule PMB - cellulepmb@ac-rennes.fr

Date de création : 03/06/2013 Date de modification : Fiches techniques PMB - Cellule PMB - cellulepmb@ac-rennes.fr Titre Paramétrer et personnaliser le style GENBIB Rubrique 6. Opac 6.1.2 Auteur Edith Boulo Version PMB : 3.4.16 Date de création : 03/06/2013 Date de modification : 1. Paramétrage par défaut Voici un

Plus en détail

Annexe 5B - Les images. Pour centrer une image, on doit transformer l image comme un élément bloc.

Annexe 5B - Les images. Pour centrer une image, on doit transformer l image comme un élément bloc. Annexe 5B - Les images Propriété alt : un descriptif en texte de l image, peut servir à la classification du site par les moteurs de recherche Conventions pour les noms des fichiers image : o Entièrement

Plus en détail

Formation HTML / CSS. ar dionoea

Formation HTML / CSS. ar dionoea Formation HTML / CSS ar dionoea le HTML Hyper Text Markup Language langage descriptif composé de balises interprété par le navigateur page HTML = simple fichier texte (bloc notes, vim,...) les déclarations

Plus en détail

Description du projet

Description du projet CREATION D UNE APPLICATION WINDEV PROJET - MODELE DE DONNEES - IHM Description du projet Nous allons créer une application gérant le suivi de la prospection commerciale. Nous utiliserons la base de données

Plus en détail

Créer sa première base de données Access Partie 3/4 - Création d un formulaire

Créer sa première base de données Access Partie 3/4 - Création d un formulaire - le 12/02/2013 Créer sa première base de données Access Partie 3/4 - Création d un formulaire Ce tutoriel est la suite de l article sur la création d une table et l article sur la création d une requête.

Plus en détail

KEIFLIN Cédric - http://www.joomlack.fr. Décembre 2012

KEIFLIN Cédric - http://www.joomlack.fr. Décembre 2012 1 2 Remerciements Je tiens à remercier tous ceux qui m'ont aidé et soutenu dans ce projet. Merci à tous! Cédric KEIFLIN 3 Mes sites web http://www.joomlack.fr Portail Joomlack avec démos et téléchargement

Plus en détail

Bootstrap 3 pour l'intégrateur web CSS et Responsive Web Design

Bootstrap 3 pour l'intégrateur web CSS et Responsive Web Design Chapitre 1 : Introduction A. Le développement des sites Web 14 B. Les fonctionnalités de Bootstrap 14 C. La compatibilité avec les navigateurs 15 D. Télécharger les exemples 15 Chapitre 2 : Installer Bootstrap

Plus en détail

Site Internet DOCS. Manuel de l utilisateur. Infocentre. 30 juin 2010. help@hector.unil.ch

Site Internet DOCS. Manuel de l utilisateur. Infocentre. 30 juin 2010. help@hector.unil.ch Site Internet DOCS Manuel de l utilisateur Infocentre 30 juin 2010 help@hector.unil.ch 1 Présentation rapide Le service en ligne DOCS a été développé par HEC pour faciliter le processus de gestion des

Plus en détail

Personnaliser et adapter SPIP Développeur SPIP

Personnaliser et adapter SPIP Développeur SPIP Personnaliser et adapter SPIP Développeur SPIP En pratique Pour réaliser ce TD vous avez besoin de :. Un navigateur web. Un client FTP ou une invite de commande Unix. Un éditeur de texte Pour le TD nous

Plus en détail

Université Bordeaux, UF Mathématiques et Interactions Licence 2 MIASHS (2014/2015)

Université Bordeaux, UF Mathématiques et Interactions Licence 2 MIASHS (2014/2015) Université Bordeaux, UF Mathématiques et Interactions Licence 2 MIASHS (2014/2015) Conception de Sites Web Dynamiques : TD 2 HTML5 statique, feuille de style CSS, Mise en page, Framework Bootstrap http://www.labri.fr/perso/preuter/cswd2015

Plus en détail

les Formulaires / Sous-Formulaires Présentation...2 1. Créer un formulaire à partir d une table...3

les Formulaires / Sous-Formulaires Présentation...2 1. Créer un formulaire à partir d une table...3 Présentation...2 1. Créer un formulaire à partir d une table...3 2. Les contrôles :...10 2.1 Le contrôle "Intitulé"...11 2.2 Le contrôle "Zone de Texte"...12 2.3 Le contrôle «Groupe d options»...14 2.4

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

Tutoriel pour l introduction à l animation en HTML5 et JavaScript

Tutoriel pour l introduction à l animation en HTML5 et JavaScript Tutoriel pour l introduction à l animation en HTML5 et JavaScript Frédéric Guégan Olivier Fauvel-Jaeger Giacomo Rombaut Table des matières 1. Introduction... 2 2. Création de l environnement... 2 3. Création

Plus en détail

< Atelier 3 /> Ajouter la navigation

< Atelier 3 /> Ajouter la navigation < Atelier 3 /> Ajouter la navigation Microsoft France Tutorial Découverte de ASP.NET 2.0 Sommaire 1 INTRODUCTION... 3 1.1 CONTEXTE FONCTIONNEL... 3 1.2 CONTEXTE TECHNIQUE... 4 2 CONSTRUIRE UN PLAN DE SITE...

Plus en détail

Créons le design de votre site web!

Créons le design de votre site web! Créons le design de votre site web! Enfin nous y voilà C'est un chapitre un peu particulier, assez différent de ce que vous avez lu jusqu'à maintenant. En fait, c'est ce que j'appelle un "TP" (= Travaux

Plus en détail

CSS. M. Sassolas. L3Pro. Cours 2. Introduction. Le style. Conclusion TD/TP 2 / 16 CSS. M. Sassolas. L3Pro. Cours 2. Introduction. Le style.

CSS. M. Sassolas. L3Pro. Cours 2. Introduction. Le style. Conclusion TD/TP 2 / 16 CSS. M. Sassolas. L3Pro. Cours 2. Introduction. Le style. Cascading style sheets () pour XML Plan de la séance BDISE XML Mathieu Sassolas 1 IUT de Sénart Fontainebleau Département Informatique 2 La sélection des éléments où s applique le style Année 2015-2016

Plus en détail

openpersonnalite Documentation

openpersonnalite Documentation openpersonnalite Documentation Release 1.00 openmairie January 26, 2012 CONTENTS 1 utilisation 3 1.1 Principes................................................. 3 1.2 saisir une personne............................................

Plus en détail

JavaScript, langage et utilisation

JavaScript, langage et utilisation Introduction JavaScript, langage et utilisation Langage côté CLIENT Javascript n'est pas java! intégré aux navigateurs: pas de problème de déploiement comme avec les applets java ou flash permet de rendre

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

Syntaxe CSS 4 Jeu de règles... 4 Propriétés et valeurs... 4 Les sélecteurs... 4 Exemples sur les sélecteurs... 8

Syntaxe CSS 4 Jeu de règles... 4 Propriétés et valeurs... 4 Les sélecteurs... 4 Exemples sur les sélecteurs... 8 Cours CSS 2013 tv - v.1.1 Sommaire Introduction aux feuilles de style 2 Constituants des pages web..................................... 2 Définition...............................................

Plus en détail

Soon_AdvancedCache. Module Magento SOON. Rédacteur. Relecture & validation technique. Historique des révisions

Soon_AdvancedCache. Module Magento SOON. Rédacteur. Relecture & validation technique. Historique des révisions Module Magento SOON Soon_AdvancedCache Rédacteur Hervé G. Lead développeur Magento herve@agence-soon.fr AGENCE SOON 81 avenue du Bac 94210 LA VARENNE ST HILAIRE Tel : +33 (0)1 48 83 95 96 Fax : +33 (0)1

Plus en détail

1 En route vers HTML 5 et CSS3

1 En route vers HTML 5 et CSS3 IUT de Bobigny 2015-2016 Licence CIWM-I TD n 3 Conception de Pages Web orientée Client Table des matières 1 En route vers HTML 5 et CSS3 1 1.1 La structure d un document HTML 5.................... 2 1.2

Plus en détail

Formation 3DS Partie 2. Fascicule 3DS. Partie 2 : Modélisation

Formation 3DS Partie 2. Fascicule 3DS. Partie 2 : Modélisation Fascicule 3DS Partie 2 : Modélisation Formation CIREVE 2007 1 Introduction sur l utilisation de formes 2D...3 1. Avant propos...4 2. Utilisation des splines (formes 2D)...4 3. Les types de sommet...5 4.

Plus en détail

Guide de réalisation d une campagne e-mail marketing

Guide de réalisation d une campagne e-mail marketing Guide de réalisation d une campagne e-mail marketing L ère des envois d e-mails en masse est révolue! Laissant la place à une technique d e-mail marketing ciblé, personnalisé, segmenté et pertinent La

Plus en détail

PEPSITE RWD ET LA CREATION DE SITES WEB RESPONSIFS

PEPSITE RWD ET LA CREATION DE SITES WEB RESPONSIFS PEPSITE RWD EDITEUR WYSIWYG ONLINE POUR BOOTSTRAP ET LA CREATION DE SITES WEB RESPONSIFS 1 Avertissements Ce document a pour but de fournir à tous les moyens pour bien débuter avec PEPSITE RWD pour Bootstrap.

Plus en détail

Pas-à-pas. Faire une grille de programmes

Pas-à-pas. Faire une grille de programmes Objectif : établir une grille de programmes de chaines de télévision tenant compte du décalage horaire entre la métropole et la Polynésie. Données : numéros des chaines, nom des programmes, jours et heures

Plus en détail

Documentation de CMS-gen

Documentation de CMS-gen Table des matières GÉNÉRALITÉ... 1 LA ZONE D'ADMINISTRATION... 2 LOGIN SUR LA ZONE D ADMINISTRATION... 2 EDITION DU CONTENU EN LIGNE... 3 LE MODE EDITION... 3 PUBLICATION... 3 SUPPRIMER DES MODIFICATIONS...

Plus en détail

Sommaire : Pourquoi créer un site web? Qu est-ce qu un site Web? Les différents types de sites. Quelles solutions peuvent être employées?

Sommaire : Pourquoi créer un site web? Qu est-ce qu un site Web? Les différents types de sites. Quelles solutions peuvent être employées? Sommaire : Pourquoi créer un site web? Qu est-ce qu un site Web? Les différents types de sites Quelles solutions peuvent être employées? Présentation d une des solutions Conclusion Aujourd hui le web est

Plus en détail

Création d un jeu vidéo

Création d un jeu vidéo Création d un jeu vidéo 1. Première étape : personnage se déplaçant dans un labyrinthe 1.1. But du jeu Le but de ce premier jeu est de créer un personnage se déplaçant dans un labyrinthe. Le jeu se termine

Plus en détail