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

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

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

Transcription

1 Responsive Design Technologies du web Stéphane Bouvry, Objectif Utilisation de CSS pour la mise en page 2. Diapos Le responsive design : 3. Grille fluide Dans cette partie, nous allons créer pas-à-pas notre propre grille fluide. Préparation Créez 2 fichiers : grid.html grid.css La grille que nous allons réaliser permettra de diviser l'espace d'affichage en 12 colonnes. Vous verrez que la somme des colonnes sera toujours égale à 12. Ajoutez ce code au fichier CSS, il permettra de visualiser les différentes colonne de la grille en mettant une couleur en arrière-plan..col12 { background-color: rgba(124,176,69,0.08);.col11 { background-color: rgba(124,176,69,0.16);.col10 { background-color: rgba(124,176,69,0.24);.col9 { background-color: rgba(124,176,69,0.32);.col8 { background-color: rgba(124,176,69,0.40);.col7 { background-color: rgba(124,176,69,0.48);.col6 { background-color: rgba(124,176,69,0.56);.col5 { background-color: rgba(124,176,69,0.64);.col4 { background-color: rgba(124,176,69,0.72);.col3 { background-color: rgba(124,176,69,0.80);.col2 { background-color: rgba(124,176,69,0.88);.col1 { background-color: rgba(124,176,69,1);

2 Vous pourrez le supprimer une fois la grille prête. La grille Ajoutez maintenant ce code au HTML : <div class="col6">col 6 <div class="col6">col 6 La classe CSS row sera utilisée pour faire un clearfix (voir diapos sur la mise en page) Puis modifier ensuite le CSS pour obtenir un affichage en colonne en utilisant la technique des float comme nous l'avons vu dans les ateliers précédents. Vous ajusterez la largeur des colonnes en pourcent. Modifiez ensuite le fichier HTML en ajoutant ce code, et complétez le CSS : <div class="col6">col 6 <div class="col3">col 3 <div class="col3">col 3 puis ajoutez : <div class="col4">col 4 <div class="col4">col 4 <div class="col4">col 4 Voici enfin le code HTML complet à faire fonctionner :

3 <div class="col12">col 12 <div class="col11">col 11 <div class="col1">col 1 <div class="col10">col 10 <div class="col2">col 2 <div class="col9">col 9 <div class="col3">col 3 <div class="col8">col 8 <div class="col4">col 4 <div class="col7">col 7 <div class="col5">col 5 <div class="col6">col 6 <div class="col6">col 6 Vous devrez obtenir le résultat suivant : Grille fluide Lors de l'affectation de la largeur, il est recommandé d'utiliser de longues décimal par exemple :.col5 { width: %; 4. Medias queries

4 Les medias queries sont des blocs de code CSS qui ne vont s'appliquer qu'en fonction de certaines conditions. Elles se pésentent sour la forme <CONDITION> { /* Règles CSS si <CONDITION> est vrai */ Les medias queries sont utilisées pour faire du Responsive Design (Web adaptatif) afin d'adapter la mise en page des documents Web à la taille de l'écran. Produisez le HTML suivant : <div> <span class="petit">petit</span> <span class="moyen">moyen</span> <span class="grand">grand</span> Le code qui suit va permettre de modifier la couleur de fond des span en fonction de la largeur de l'écran. /* largeur jusqu'à 480px (max-width: 480px) {.petit { background: #FF6600; /* Entre 481px et 800 (exclus) (min-width: 481px) and (max-width: 799px) {.moyen { background: #FF6600; /* 800 et plus (min-width: 800px) {.grand { background: #FF6600; Exercice Modifier le HTML de cette façon :

5 <div> <span class="petit">petit</span> <span class="moyen">moyen</span> <span class="grand">grand</span> <span class="tresgrand">tres GRAND</span> Puis modifier le CSS pour obtenir les effets suivant : Le span correspondant a un texte blanc sur fond vert Le span ne correspondant pas a un texte blanc sur fond rouge Les tailles doivent correspondrent à : petit : 0 à 480 moyen : 480 à 768 grand : 769 à 1167 très grand : 1168 et plus Web adaptatif dans firefox Firefox (et chrome sour la forme d'un addon) propose un assistant pour visualiser un document web dans différents format. Vous pouvez l'activer dans la barre de développement (icône web adaptatif) 5. Synthèse Téléchargé le ZIP à l'adresse puis modifiez le fichier CSS pour obtenir une version mobile du site comme dans l'aperçu ci-dessous :

6 Résultat Dans la version mobile, vous pourrez choisir de cacher l'aside contenant les archives et les autres articles.

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

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

Grille fluide. Une grille fluide sert à structurer la mise en page, la rendre harmonieuse et faciliter le passage au responsive web design Grilles Fluides CSS 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 WWW.SUTTERLITY.FR

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

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

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

Responsive Web Design (RWD)

Responsive Web Design (RWD) Responsive Web Design (RWD) CSS 3 et présentation avancée 1 Qu est ce que le responsive? Démo : Chrome + guardian.com 2 Qu est ce que le responsive? 3 Pourquoi? Explosion de la variété des supports source

Plus en détail

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

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

Programmation Web TP2 CSS i

Programmation Web TP2 CSS i Programmation Web TP2 CSS i Objectifs : Construction d'une page web : comprendre et utiliser un fichier CSS ; définir la structure d'une page web ; Consignes et Pré-requis Lire attentivement cet énoncé

Plus en détail

Mode d'emploi. À l'usage des chefs, cheffes de courses et membres des comités autorisés à gérer les pages 'Récits de courses'.

Mode d'emploi. À l'usage des chefs, cheffes de courses et membres des comités autorisés à gérer les pages 'Récits de courses'. Mode d'emploi À l'usage des chefs, cheffes de courses et membres des comités autorisés à gérer les pages 'Récits de courses'. Les récits de courses sont gérés avec le module 'Articles' Table des matières

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

Formation Joomla 3 Réalisez votre Template

Formation Joomla 3 Réalisez votre Template Formation Joomla 3 Réalisez votre Template Flash-comet.com Cours version 2015 1 Sommaire Contenu du cours... 3 Création d'un template avec "Template Créator CK"... 3 Principe de fonctionnement... 3 Ce

Plus en détail

ESPACE MULTIMEDIA DU CANTON DE ROCHESERVIERE

ESPACE MULTIMEDIA DU CANTON DE ROCHESERVIERE ESPACE MULTIMEDIA DU CANTON DE ROCHESERVIERE Atelier «pour débuter» La Gestion des photos avec Windows 7 1 Généralités sur le jargon de l image numérique Les différents formats d image : o BMP : il s'agit

Plus en détail

Les feuilles de styles

Les feuilles de styles Qu'est-ce que les feuilles de style? Les feuilles de style CSS pour Cascading Style Sheets en anglais est un langage informatique qui sert à décrire la présentation des documents HTML. L'un des objectifs

Plus en détail

Les feuilles de Style HTML : CSS

Les feuilles de Style HTML : CSS Les feuilles de Style HTML : CSS Tarek Melliti Laboratoire IBISC (Informatique Biologie Intégrative et Systèmes Complexes) tarek.melliti@ibisc.univ-evry.fr Plan du cours Séances 1 : Introduction à l informatique

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

Par défaut, les éléments de type bloc seront affichés dans une succession verticale.

Par défaut, les éléments de type bloc seront affichés dans une succession verticale. Le positionnement Par défaut, les éléments de type bloc seront affichés dans une succession verticale. Une boîte jaune Une boîte verte Les principaux éléments de type bloc sont : l'élément div ; les titres

Plus en détail

Tice -Seconde-Page Web 2015-2016

Tice -Seconde-Page Web 2015-2016 Ouvrez une page web, cliquer doit sur la souris et faite afficher le code source de la page. Quelqu un a écrit ce code pour faire afficher cette page. Nous allons nous aussi écrire du code pour faire afficher

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

Le langage JavaScript TD N 3. Module IntegWEB MMI 1 2013/2014

Le langage JavaScript TD N 3. Module IntegWEB MMI 1 2013/2014 1 Le langage JavaScript TD N 3 Module IntegWEB MMI 1 2013/2014 Jeu les tables de multiplication 2 Code HTML 3 apprendre les tables de multiplication

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

PREMIERS PAS SUR EXCEL Module de formation pour débutants 5 séances de 3 heures

PREMIERS PAS SUR EXCEL Module de formation pour débutants 5 séances de 3 heures PREMIERS PAS SUR EXCEL Module de formation pour débutants 5 séances de 3 heures 1 Qu est-ce qu un tableur? 2 Réaliser un tableau 3 Mettre en forme 4 Modifier un tableau 5 Choisir le mode d impression 6

Plus en détail

Le tableur de la suite Open Office

Le tableur de la suite Open Office Le tableur de la suite Open Office Open Office est une suite bureautique qui comporte traitement de texte, tableur, Présentation Assistée par Ordinateur (PréAO), dessin et édition de pages Web au format

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

CSS. papa alsacréations autodidacte sport formation écriture webmobile accessibilité photographie

CSS. papa alsacréations autodidacte sport formation écriture webmobile accessibilité photographie Web Mobile et CSS Comment adapter un design sur mobile Webdesign standards web intégration HTML papa alsacréations autodidacte sport formation écriture webmobile accessibilité photographie CSS www. www.goetter.fr

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

> Table des matières. Gestion des pages courantes

> Table des matières. Gestion des pages courantes I N T E R F A C E A D M I N I S T R A T I O N M A N U E L D ' U T I L I S A T I O N D E T Y P O 3 V 4. 2 R É D A C T E U R V. DARDENNE DÉCEMBRE 2009 > Table des matières Gestion des pages courantes > Accès

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

Google Drive, le cloud de Google

Google Drive, le cloud de Google Google met à disposition des utilisateurs ayant un compte Google un espace de 15 Go. Il est possible d'en obtenir plus en payant. // Google Drive sur le web Se connecter au site Google Drive A partir de

Plus en détail

Édu-groupe - Version 4.3

Édu-groupe - Version 4.3 Édu-groupe - Version 4.3 Guide de l utilisateur Gestion des fichiers Société GRICS, Équipe Évaluation Août 2012 2 CONSIDÉRATIONS GÉNÉRALES A. Importante mise en garde concernant les types de fureteur Les

Plus en détail

> Table des matières. Gestion des pages courantes... 4

> Table des matières. Gestion des pages courantes... 4 I N T E R FA C E A D M I N I S T R AT I O N M A N U E L D ' U T I L I S A T I O N D E T Y P O 3 V 4. 2. 1 0 W W W. R O U S S E T - F R. C O M STRATIS JUIN 2010 > Table des matières Gestion des pages courantes.............................................

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

Personnaliser vos écrans

Personnaliser vos écrans Personnaliser vos écrans Sommaire 1 Présentation 2 Mécanisme 3 Création du custom 3.1 Note 4 Création du dossier contenant les images personnalisées 4.1 Note 5 Création du dossier contenant le fichier

Plus en détail

Sommaire. 1/ Grille. 2/ Specs globales. 3/ Specs HP. 4/ Specs Questions. 5/ Specs Offre. 6/ Specs Faq. 7/ Comportements interactifs

Sommaire. 1/ Grille. 2/ Specs globales. 3/ Specs HP. 4/ Specs Questions. 5/ Specs Offre. 6/ Specs Faq. 7/ Comportements interactifs Sommaire 1/ Grille 2/ Specs globales 3/ Specs HP 4/ Specs Questions 5/ Specs Offre 6/ Specs Faq 7/ Comportements interactifs 1/ Grille et breakpoints Desktop :

Plus en détail

LES TABLES. Exemple de table :
cellule 1 cellule 2
cellule 3 cellule 4

LES TABLES. Exemple de table : <table> <tr> <td>cellule 1</td> <td>cellule 2</td> </tr> <tr> <td>cellule 3</td> <td>cellule 4</td> </tr> </table> LES TABLES Les tables servent pour l'affichage de «données tabulaires», c'est-à-dire des informations présentées logiquement en rangées et en colonnes. Son intégration peut paraitre fastidieuse mais c'est

Plus en détail

Traitement et téléchargement de fichier de grande taille dans STAT-TAB

Traitement et téléchargement de fichier de grande taille dans STAT-TAB Département fédéral de l'intérieur DFI Office fédéral de la statistique OFS Publication et communication 18 février 2014 Traitement et téléchargement de fichier de grande taille dans STAT-TAB Ce document

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

Chapitre 7: Insertion portes et monte charges

Chapitre 7: Insertion portes et monte charges Chapitre 7: Insertion portes et monte charges Démarrez MasterChef de l icône sur votre bureau Note: Si vous utilisez une version de démonstration, une fois chargé, un message vous informerà sur les derniers

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

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

Manipulations avec le traitement de texte

Manipulations avec le traitement de texte Manipulations avec le traitement de texte Je vais aborder dans ce tutoriel de petites manipulations qui sont fréquentes dans le traitement de texte. Elles concernent la casse, les caractères spéciaux,

Plus en détail

SOMMAIRE. Présentation assistée sur ordinateur. Collège F.Rabelais 1/10

SOMMAIRE. Présentation assistée sur ordinateur. Collège F.Rabelais 1/10 /0 SOMMAIRE. Lancer le logiciel. Mettre un titre dans une diapositive et du texte. Ajouter une diapositive 4. Créer une diapositive avec une image 5. Créer une diapositive avec un graphique 6. Créer une

Plus en détail

Guide Brother Image Viewer pour Android

Guide Brother Image Viewer pour Android Guide Brother Image Viewer pour Android Version 0 FRE Définitions des remarques L'icône suivante est utilisée tout au long du présent Guide de l'utilisateur : REMARQUE Les remarques vous indiquent comment

Plus en détail

jquery Mobile (HTML5, CSS3, JavaScript) Développez vos applications Web mobiles

jquery Mobile (HTML5, CSS3, JavaScript) Développez vos applications Web mobiles Caractéristiques du Web mobile 1. Définition du Web mobile 13 2. Un marché en expansion 15 2.1 Multiples fabricants de smartphones et tablettes 15 2.2 Multiples OS 15 2.3 Multiples navigateurs 17 2.4 Évolutions

Plus en détail

Manuel. Portail de services. Version 1.2 Date : 10/10/12

Manuel. Portail de services. Version 1.2 Date : 10/10/12 Manuel Portail de services Version 1.2 Date : 10/10/12 Table des matières 1 Documents de transport... 3 1.1 Rechercher des documents... 3 1.2 Télécharger tous les documents liés à un numéro de facture...

Plus en détail

plus besoin de div pour le header footer les le reste de la page des balises existe en HTML5

plus besoin de div pour le header footer les le reste de la page des balises existe en HTML5 HTML5 : allege le code nouvelle balise: pour les lien vers des pages web pour du texte sur les coté pour rajouter un artcicle plus besoin de div pour

Plus en détail

Devoir XML / XSLT / Unicode

Devoir XML / XSLT / Unicode Devoir XML / XSLT / Unicode Frédérik Bilhaut Université de Caen Département d'informatique Les fichiers fournis pour réaliser le devoir sont à récupérer ici : http://www.info.unicaen.fr/~fbilhaut/ens/radi/devoir.tgz

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

Manuel d utilisation du module Liste de cadeaux PRO par Alize Web

Manuel d utilisation du module Liste de cadeaux PRO par Alize Web Manuel d utilisation du module Liste de cadeaux PRO par Alize Web INSTALLER ET CONFIGURER LE MODULE (BACK OFFICE) 2 Réglages des performances 2 Télécharger le module 3 Installer le module 4 Configurer

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

Afin de réaliser l exercice ci-dessus, suivre les étapes suivantes :

Afin de réaliser l exercice ci-dessus, suivre les étapes suivantes : - Appliquer un formatage conditionnel. Durée : une période pour les pages -3 - Ouvrir la Base de données «identification_produits» qui a été créée à la leçon précédente - Générer un rapport à partir de

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

Utiliser un modèle d état prédéfini

Utiliser un modèle d état prédéfini Chapitre 8 Etats rapides Certains boutons sont désactivés, en fonction du type de cellule sélectionné. 4 Répétez les étapes 2 et 3 pour chaque bordure à paramétrer. 5 Cliquez sur le bouton OK pour valider

Plus en détail

FORMATION CALC OpenOffice 3.2

FORMATION CALC OpenOffice 3.2 FORMATION CALC OpenOffice 3.2 Livret 2 Mettre en forme un tableau Niveau 1 Thierry TILLIER http://www.coursdinfo.fr Ce support de cours est réservé à un usage personnel. Toute utilisation et diffusion

Plus en détail

A.F.L.I.M. Formation HTML5 et CSS3 - Pour des sites Responsive Web Design

A.F.L.I.M. Formation HTML5 et CSS3 - Pour des sites Responsive Web Design A.F.L.I.M. Ateliers de Formations Linguistique Informatique Multimédia Formation HTML5 et CSS3 - Pour des sites Responsive Web Design Formation : Présentation du HTML5 Bref historique du HTML5 Lignes de

Plus en détail

CARTES DE VISITE, CARTE DE VŒUX, ETIQUETTES AVEC OPENOFFICE

CARTES DE VISITE, CARTE DE VŒUX, ETIQUETTES AVEC OPENOFFICE CARTES DE VISITE, CARTE DE VŒUX, ETIQUETTES AVEC OPENOFFICE 1- Créer une planche 2- Indiquer les mesures 3- Indiquer le format de la page 4- Ajouter une bordure 5- Ajouter du texte 6- Ajouter une image

Plus en détail

Commande d'annonces pour Windows : localisateur

Commande d'annonces pour Windows : localisateur Commande d'annonces pour Windows : localisateur Dernière mise à jour - March 03, 2015 Politique d'acceptation des créations publicitaires Toute création doit répondre aux exigences de Microsoft Advertising

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

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

LES TABLEAUX. Créer un tableau élémentaire

LES TABLEAUX. Créer un tableau élémentaire LES TABLEAUX Il y a deux façons de créer dans un article : directement dans SPIP pour des tableaux élémentaires avec un éditeur html pour des tableaux complexes. Créer un tableau élémentaire Les colonnes

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

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

Formation pour les rédacteurs du web dynamique Février 2006 TABLE DES MATIÈRES

Formation pour les rédacteurs du web dynamique Février 2006 TABLE DES MATIÈRES TABLE DES MATIÈRES Section 1 - Découvrir l espace privé... 1 1.1 L accès à l espace privé... 1 1.2 L'écran d'ouverture... 3 1.3 La barre des fonctions principales... 4 1.4 La barre de séparation et ses

Plus en détail

Sommaire. [page 4] Lancement Identification Multi Comptes. [page 5] Créer un nouveau projet. [page6] Editer un projet

Sommaire. [page 4] Lancement Identification Multi Comptes. [page 5] Créer un nouveau projet. [page6] Editer un projet Sommaire [page 4] Lancement Identification Multi Comptes [page 5] Créer un nouveau projet [page6] Editer un projet [page 7] Supprimer un projet Prévisualiser un projet Mettre un projet par défaut [page

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

NOTICE D INSTALLATION ET D UTILISATION DE LIVE BACKUP

NOTICE D INSTALLATION ET D UTILISATION DE LIVE BACKUP NOTICE D INSTALLATION ET D UTILISATION DE LIVE BACKUP I. Installation Live Backup en mode externalisé IMPORTANT 1 - Vous devez avoir les droits administrateur de votre poste de travail ou de votre serveur

Plus en détail

Création d un site web avec Nvu. Pensez à sauvegarder fréquemment dans votre espace de travail les documents que vous réalisez!

Création d un site web avec Nvu. Pensez à sauvegarder fréquemment dans votre espace de travail les documents que vous réalisez! Création d un site web avec Nvu Pensez à sauvegarder fréquemment dans votre espace de travail les documents que vous réalisez! Le but de ce TP est d utiliser le logiciel Nvu pour réaliser un site simple

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

Fiche n 4 Les galeries NextGen. Sommaire

Fiche n 4 Les galeries NextGen. Sommaire Fiche n 4 Les galeries NextGen Sommaire 1-Préparer les images avant de les «téléverser» sur le blog...1 1.1-Préparer le blog pour la gestion des images...3 1.2-Ajouter une galerie/des images...4 1.3-Gérer

Plus en détail

ESPACE MULTIMEDIA DU CANTON DE ROCHESERVIERE

ESPACE MULTIMEDIA DU CANTON DE ROCHESERVIERE ESPACE MULTIMEDIA DU CANTON DE ROCHESERVIERE Session découverte La Gestion des photos avec Windows Vista / Windows 7 et le traitements d images numériques 1 Généralités sur le jargon de l image numérique

Plus en détail

Développement Web pour mobiles

Développement Web pour mobiles Développement Web pour mobiles Les bases du HTML par Eric Sarrion Date de publication : 11/08/2010 Dernière mise à jour : Le langage HTML est le langage de base permettant de construire des pages web,

Plus en détail

Fiche N 04. Dans son navigateur comment bien utiliser ses favoris ou marques pages. 1. Les différentes fonctions que nous allons utiliser :

Fiche N 04. Dans son navigateur comment bien utiliser ses favoris ou marques pages. 1. Les différentes fonctions que nous allons utiliser : EXERCICE Utilisation des favoris Dans son navigateur comment bien utiliser ses favoris ou marques pages. Fiche N 04 1. Les différentes fonctions que nous allons utiliser : 1.1. Créer une barre personnelle.

Plus en détail

Annexes. 11, rue de Cambrai - 75917 PARIS Cedex 19 Tél. 01.55.26.33.00 - Fax. 01.55.26.40.33 Site internet : http://www.ciel.com

Annexes. 11, rue de Cambrai - 75917 PARIS Cedex 19 Tél. 01.55.26.33.00 - Fax. 01.55.26.40.33 Site internet : http://www.ciel.com Annexes 11, rue de Cambrai - 75917 PARIS Cedex 19 Tél. 01.55.26.33.00 - Fax. 01.55.26.40.33 Site internet : http://www.ciel.com Sommaire Annexe 1 : La barre de navigation...1 Introduction... 2 Utilisation...

Plus en détail

Manuel d'utilisation du module de saisie en ligne de l'enquête SPA2

Manuel d'utilisation du module de saisie en ligne de l'enquête SPA2 Manuel d'utilisation du module de saisie en ligne de l'enquête SPA2 Connectez vous à l'adresse: http://macymed.fr/spa2 Saisissez vos identifiants et cliquez sur [connexion] Vous arrivez sur le questionnaire

Plus en détail

ETAPE 8 (60 minutes)

ETAPE 8 (60 minutes) ETAPE 8 (60 minutes) La fonction Recherche Savoir-faire développés dans cette étape - Utiliser l Assistant fonction - Programmer une recherche automatique dans une table à l aide d une fonction Recherche

Plus en détail

Utilisation de Moodle. Table des matières

Utilisation de Moodle. Table des matières Utilisation de Moodle Table des matières 1-Interface...1 1.1-Connexion...1 1.2-Profil...2 1.3-Navigation...3 2-Activités...4 2.1-Devoirs...4 2.2-Dossier numérique B2i Lycée - Référentiel...5 2.3-Ressources...5

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

BONNES PRATIQUES AUDIENCE MOBILE

BONNES PRATIQUES AUDIENCE MOBILE BONNES PRATIQUES AUDIENCE MOBILE IDENTIFIEZ VOS MOBINAUTES Identifiez les mobinautes de votre base de contacts et leur équipement mobile. Combien de contacts consultent vos emails sur mobile? Quel(s) équipement(s)

Plus en détail

Projet de session - Ubeat

Projet de session - Ubeat Projet de session - Ubeat Le projet de session consiste à développer une application permettant de créer des listes de lectures musicales et de les partager entre amis. Le projet doit être fait en équipe

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

Worldsoft CMS Méga Menu. Avec le Méga Menu du Worldsoft CMS, vous pouvez créer des menus de navigation.

Worldsoft CMS Méga Menu. Avec le Méga Menu du Worldsoft CMS, vous pouvez créer des menus de navigation. 1 Mega Menu Avec le du Worldsoft CMS, vous pouvez créer des menus de navigation. Vous pouvez mettre en place autant de menus que vous le désirez et les adapter graphiquement. Avec votre propre contenu

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

Contenu Microsoft Access 2007

Contenu Microsoft Access 2007 Contenu Microsoft Access 2007 Module 1 Notions élémentaires de Windows XP Terminologie Souris et clavier Souris Termes utilisés avec la souris Clavier Menus Menus contextuels Fenêtres Boîtes de dialogue

Plus en détail

Parcours FOAD Formation ACCESS 2010

Parcours FOAD Formation ACCESS 2010 Parcours FOAD Formation ACCESS 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

Créer un diaporama avec Open Office. Sommaire

Créer un diaporama avec Open Office. Sommaire Créer un diaporama avec Open Office I. Création I.1. Paramétrer le diaporama I.2. Valider et enregistrer l'album II. Le traitement des données II.1. Saisir les données II.2. Agir sur les pages III. Améliorez

Plus en détail

Dreamweaver CS6 pour PC/Mac Pour des sites full CSS conformes aux standards du W3C

Dreamweaver CS6 pour PC/Mac Pour des sites full CSS conformes aux standards du W3C Introduction L'Internet aujourd'hui 7 Le World Wide Web Consortium et les standards 7 Les logiciels de conception de sites web 7 L'objectif du livre 8 Interface de conception L'environnement système 9

Plus en détail

Sommaire : tutorial Powerpoint 2003

Sommaire : tutorial Powerpoint 2003 Sommaire : tutorial Powerpoint 2003 Ouvrir le logiciel PowerPoint 2003...2 Affichage «mode normal» : mode de travail...3 Ajouter un modèle de conception existant...4 Insertion d une nouvelle diapositive

Plus en détail

Fiche logiciel LibreOffice Calc 3.x. LibreOffice Calc : introduction au tableur. Sommaire du document FL04009

Fiche logiciel LibreOffice Calc 3.x. LibreOffice Calc : introduction au tableur. Sommaire du document FL04009 Fiche logiciel LibreOffice Calc 3.x FL04009 Tableur Niveau 04/ LibreOffice Calc : introduction au tableur Le tableur est un logiciel permettant de créer des tableaux et des graphiques. Sa puissance réside

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

Utilitaires Ellipses / Analyse des Ventes Activités des Caisses

Utilitaires Ellipses / Analyse des Ventes Activités des Caisses Utilitaires Ellipses / Analyse des Ventes Activités des Caisses I Préambule Cet utilitaire est accessible dans Ellipses via le menu «Utilitaires» / «C Compléments» puis «Analyse des Ventes» Ce programme

Plus en détail

Utilisation du site Regio 21.ch

Utilisation du site Regio 21.ch Utilisation du site Regio 21.ch Introduction Ce document est un petit aide-mémoire qui vous permettra de réaliser des tâches simples avec l'outil TYPO3. La meilleure attitude en cas de doute est d'essayer

Plus en détail

Arbres Mathématiques Informatique et Navigateurs Internet

Arbres Mathématiques Informatique et Navigateurs Internet Arbres Mathématiques Informatique et Navigateurs Internet Jacques Duma http://math.et.info.free.fr/ http://ateliermathematique.free.fr/ Arbres Expressions Mathématiques Structure arborescente de l expression

Plus en détail

Créer un diaporama avec Windows Movie Maker

Créer un diaporama avec Windows Movie Maker Créer un diaporama avec Windows Movie Maker 1 Faites : «Démarrer Tous les programmes Windows Movie Maker» Importer les photos Dans la fenêtre «tâches de la vidéo» Sélectionnez : «Importer des photos» Sélectionnez

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

Comment développer et intégrer un module à PhpMyLab?

Comment développer et intégrer un module à PhpMyLab? Comment développer et intégrer un module à PhpMyLab? La structure du fichier Afin de conserver une homogénéité et une cohérence entre chaque module, une structure commune est utilisée pour chacun des modules

Plus en détail

TD 3 : Intégration HTML

TD 3 : Intégration HTML Programmation Web IMAC 2015-2016 TD 3 : Intégration HTML 14 octobre 2015 Objectif: Ce TD a pour but de se servir des concepts appris dans les TDs précédents pour intégrer entièrement une maquette de site

Plus en détail

Elaboration de mise en page HTML en utilisant le CSS et les DIV avec Dreamweaver

Elaboration de mise en page HTML en utilisant le CSS et les DIV avec Dreamweaver Elaboration de mise en page HTML en utilisant le CSS et les DIV avec Dreamweaver Les bonnes pratiques du concepteur web moderne requièrent l usage des CSS pour la réalisation des mises en page. Les mises

Plus en détail

HTML5, CSS3 et JavaScript Développez vos sites pour les terminaux mobiles

HTML5, CSS3 et JavaScript Développez vos sites pour les terminaux mobiles 46 HTML5, CSS3 et JavaScript Développez vos sites pour les terminaux mobiles enfin deux points importants pour les sites mobiles, les nouveautés sur les formulaires ainsi que le mode hors-ligne. 2. Bonnes

Plus en détail

Formation JavaScript : Perfectionnement. Programme. L approche AJAX. L objet XMLHttpRequest. Objectif(s):

Formation JavaScript : Perfectionnement. Programme. L approche AJAX. L objet XMLHttpRequest. Objectif(s): Formation JavaScript : Perfectionnement Objectif(s): Comprendre l'approche AJAX Comprendre l'objet XMLHttpRequest Durée : 2 jour(s) Pré-requis : Bonnes connaissances en (X)HTML, CSS et JavaScript Public

Plus en détail

Manuel utilisateur de la personnalisation avancée

Manuel utilisateur de la personnalisation avancée Manuel utilisateur de la personnalisation avancée Sommaire 1. HISTORIQUE DU DOCUMENT... 3 2. CONTACTER L'ASSISTANCE TECHNIQUE...4 3. PERSONNALISER VOS PAGES DE PAIEMENT ET VOS E-MAILS...5 3.1. Identifier

Plus en détail