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

Save this PDF as:
 WORD  PNG  TXT  JPG

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.

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

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

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

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

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

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

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

Programmation en environnement graphique Créer un design original pour le site CSS Zen Garden en utilisant une CSS (20% de la note finale)

Programmation en environnement graphique Créer un design original pour le site CSS Zen Garden en utilisant une CSS (20% de la note finale) CONCEPTION D UN DESIGN CSS ZEN GARDEN A2012 Programmation en environnement graphique Créer un design original pour le site CSS Zen Garden en utilisant une CSS (20% de la note finale) TABLE DES MATIÈRES

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

EXTENSION WORDPRESS. Contact Form 7. Proposé par :

EXTENSION WORDPRESS. Contact Form 7. Proposé par : Contact Form 7 Proposé par : Sommaire Sommaire... 2 Présentation... 3 I. Le Tutoriel... 3 1) Espace de travail... 3 2) Téléchargez les extensions nécessaires... 3 3) Configuration du Formulaire... 7 1)

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

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

Groupe Eyrolles, 2003, ISBN : 2-212-11317-X

Groupe Eyrolles, 2003, ISBN : 2-212-11317-X Groupe Eyrolles, 2003, ISBN : 2-212-11317-X 3 Création de pages dynamiques courantes Dans le chapitre précédent, nous avons installé et configuré tous les éléments indispensables à la mise en œuvre d une

Plus en détail

Manuel d utilisation de l Illustrateur de PPC

Manuel d utilisation de l Illustrateur de PPC Table des matières Configuration requise... 2 Langues prises en charge... 2 Compatibilité des navigateurs... 2 Pour commencer dans l Illustrateur... 2 Comment accéder à l Illustrateur... 2 L Illustrateur

Plus en détail

Portail des communes Guide Référent ville

Portail des communes Guide Référent ville Portail des communes Guide Référent ville Services aux communes Introduction Vous êtes Référent pour votre commune et venez de recevoir vos identifiants de connexion à l ENT école. Ce document va vous

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

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

Comment accéder à d Internet Explorer

Comment accéder à d Internet Explorer Comment accéder à d Pour ouvrir l application, vous n avez qu à doublecliquer sur l icône de celle-ci : ou vous pouvez encore allez le chercher par le raccourci dans la barre des tâches : Lorsque l application

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

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

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

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

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

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

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

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

Réalisation d une Interface Utilisateur

Réalisation d une Interface Utilisateur Réalisation d une Interface Utilisateur Pour manipuler facilement les données enregistrées dans une base de données, il est nécessaire de cacher leur implantation technique dans les tables et d offrir

Plus en détail

WebCT - Exercices. Préparé par. Edouard Staco Sylvain Lefebvre Dominic Villiard. École Polytechnique de Montréal. Page 1 sur 22

WebCT - Exercices. Préparé par. Edouard Staco Sylvain Lefebvre Dominic Villiard. École Polytechnique de Montréal. Page 1 sur 22 WebCT - Exercices Préparé par Edouard Staco Sylvain Lefebvre Dominic Villiard École Polytechnique de Montréal Page 1 sur 22 Configuration de votre fureteur Ajustement de la mémoire cache Netscape Navigator

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

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

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

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

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

GUIDE D UTILISATION DU BACKOFFICE

GUIDE D UTILISATION DU BACKOFFICE GUIDE D UTILISATION DU BACKOFFICE 1. Modifier les pages du site : - Aller dans l onglet «PAGE HTML», puis «Liste des pages HTML» - Pour visualiser votre page, cliquer sur le nom écrit en vert, dans la

Plus en détail

Création de page Web. Microsoft Publisher. 1. Ouvrez Microsoft Publisher. 2. Cliquez sur Sites Web. 3. Choisissez un modèle

Création de page Web. Microsoft Publisher. 1. Ouvrez Microsoft Publisher. 2. Cliquez sur Sites Web. 3. Choisissez un modèle Création de page Web Microsoft Publisher 1. Ouvrez Microsoft Publisher 2. Cliquez sur Sites Web 3. Choisissez un modèle 4. Personnalisez votre jeu de couleurs et les options 5. Cliquez sur «créer», lorsque

Plus en détail

GUIDE D UTILISATION DE JUSTIMÉMO...

GUIDE D UTILISATION DE JUSTIMÉMO... GUIDE D UTILISATION DE JUSTIMÉMO... I. SOMMAIRE... II. III. IV. A QUI S ADRESSE JUSTIMÉMO?...p.03 LA NAVIGATION...p.04 COMMENT TRANSMETTRE A MES ELEVES UNE SELECTION DE JUSTIMÉMOS?...p.07 V. COMMENT RELAYER

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

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

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

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

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

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

Prise en main ProConcept ERP. Version 11.1 Web

Prise en main ProConcept ERP. Version 11.1 Web Prise en main ProConcept ERP Version 11.1 Web Version du 08.10.2015 Table des matières 1. Lancement de ProConcept Web ERP 11.1... 4 1.1. Définir la page ProConcept ERP comme page de démarrage... 5 1.2.

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

-Le traitement de texte. -Le courrier électronique

-Le traitement de texte. -Le courrier électronique 1/17 SOMMAIRE : -Windows -Le traitement de texte -Internet -Le courrier électronique 2/17 WINDOWS PRISE EN MAIN DE WINDOWS Lorsque vous démarrez votre ordinateur vous devez voir arriver un écran qui ressemble

Plus en détail

OUTILS : Cliquez : Gestion + Cliquez : Editer catégories. Maxime MOLIMART UTM - Département de Sciences de l Education et de la Formation - 2006.

OUTILS : Cliquez : Gestion + Cliquez : Editer catégories. Maxime MOLIMART UTM - Département de Sciences de l Education et de la Formation - 2006. OUTILS : Durant la préparation de votre questionnaire ou à sa fin, il se peut que vous vous aperceviez que vous avez oublié et/ou commis des erreurs dans votre rentrée des données pour vos colonnes de

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

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

Créer un projet multimédia avec MCK3

Créer un projet multimédia avec MCK3 Créer un projet multimédia avec MCK3 MCK3 est un logiciel gratuit de création multimédia. Vous pouvez le télécharger sur le site de son auteur Frédéric Fouet : http://www.fredericfouet.com/ Il vous permet

Plus en détail

Créer une archive et la décompresser pour optimiser les échanges.

Créer une archive et la décompresser pour optimiser les échanges. Créer une archive et la décompresser pour optimiser les échanges. Auteur : Version 1.0 Décembre 2010 Doc. : Responsable TICE, ENT et C2i2e second degré ISFEC de décembre 2010 Page : 1/5 1. Introduction

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

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

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

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

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

TOUT SUR LES FENETRES

TOUT SUR LES FENETRES TOUT SUR LES FENETRES Windows, dont le nom veut dire «fenêtres» en français, est fait pour gérer plusieurs programmes à la fois. Alors ne vous en privez pas, vous pouvez ouvrir plusieurs programmes en

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

Publier dans la Base Documentaire

Publier dans la Base Documentaire Site Web de l association des ingénieurs INSA de Lyon Publier dans la Base Documentaire Remarque : la suppression des contributions n est pas possible depuis le Front-Office. lbuisset Page 1 18/09/2008

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

Prise en main de WordPress

Prise en main de WordPress Prise en main de WordPress 1 / Entrer dans l'espace d'administration Pour entrer dans l'espace d'administration, cliquez sur le lien nommé Administration ou Connexion en bas de page de votre site web.

Plus en détail

Publier une Actualité ou un Evenement

Publier une Actualité ou un Evenement Site Web de l association des ingénieurs INSA de Lyon Publier une Actualité ou un Evenement Remarque : la suppression des contributions n est pas possible depuis le Front-Office. lbuisset Page 1 18/09/2008

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

Gestion des profils. Table des matières. Guide d'utilisation de la gestion des profils... Page 2. Créer un item de bureau...page 3

Gestion des profils. Table des matières. Guide d'utilisation de la gestion des profils... Page 2. Créer un item de bureau...page 3 Gestion des profils Table des matières Guide d'utilisation de la gestion des profils... Page 2 Créer un item de bureau...page 3 Créer un onlget... Page 5 Items de bureau ou onglets?... Page 6 Attribuer

Plus en détail

Création du site dans Dreamweaver :

Création du site dans Dreamweaver : CHARGER, CREER et ENREGISTRER 1. Se connecter au RESEAU du COLLEGE avec tes 2 mots de passe 2. Charge le logiciel Au lancement du logiciel, l écran suivant s affiche : Palette des objets Lanceur Zone de

Plus en détail

Initiation à l informatique et à son matériel Médiathèque de Bussy Saint-Georges INITIATION A L INFORMATIQUE ET A SON MATERIEL

Initiation à l informatique et à son matériel Médiathèque de Bussy Saint-Georges INITIATION A L INFORMATIQUE ET A SON MATERIEL INITIATION A L INFORMATIQUE ET A SON MATERIEL Imprimer des pages web Créer des Imprimer des pages web et créer des PDF SOMMAIRE : I PERSONNALISER L IMPRESSION D UNE PAGE INTERNET.PAGES 3-16 1.1 - Avec

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

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

Mes premiers diaporamas avec Open Office Impress?

Mes premiers diaporamas avec Open Office Impress? Mes premiers diaporamas avec Open Office Impress? Courage! Tu vas y arriver 1 Sommaire I. Les bons gestes avant de lancer Open Office (page 3) II. Créer un dossier Open Office. (page 4) III. Les 5 zones

Plus en détail

Comment bien imprimer avec Firefox

Comment bien imprimer avec Firefox Comment bien imprimer avec Firefox Si vous imprimez régulièrement des pages web, vous savez que le résultat est parfois surprenant: marges rongées, police illisible ou formatage incomplet. Le navigateur

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

Aller dans l espace licenciés de la FFTA

Aller dans l espace licenciés de la FFTA Aller dans l espace licenciés de la FFTA... 1 Mettre à jour la photo d identité... 3 Télécharger la licence sur le site de la FFTA... 6 Aller dans l espace licenciés de la FFTA 1) Ouvrez votre «butineur

Plus en détail

Créer des étiquettes avec les adresses d'un tableau Calc

Créer des étiquettes avec les adresses d'un tableau Calc Créer des étiquettes avec les adresses d'un tableau Calc Il faudra au préalable avoir déjà créé le tableau contenant les adresses avec Calc. Il y a trois étapes différentes pour réaliser des étiquettes

Plus en détail

WinTask : Automatisation de sites Web

WinTask : Automatisation de sites Web WinTask : Automatisation de sites Web Introduction Ce document a pour but de vous faire découvrir WinTask, le logiciel d'automatisation de tâches pour Windows et sites Web. WinTask vous permet d'automatiser

Plus en détail

Objectif. Insérer un tableau. Saisir du texte (passer d une cellule à l autre) Ajouter bordures et trames. Sélectionner une ligne, une colonne

Objectif. Insérer un tableau. Saisir du texte (passer d une cellule à l autre) Ajouter bordures et trames. Sélectionner une ligne, une colonne Objectif Après avoir saisi quelques lignes de textes avec les coordonnées de l école et le nom de la classe concernée, nous allons insérer un tableau pour dresser la liste des élèves d une classe. insérer

Plus en détail

Version pour un ordinateur Macintosh

Version pour un ordinateur Macintosh Procédures à suivre pour accéder au site internet de l UQAM afin de poser votre candidature sur les cours à l affichage Étape n 1 : Version pour un ordinateur Macintosh N. B. : Cette étape s adresse aux

Plus en détail

Gestion des communautés Mode d emploi des outils animateurs

Gestion des communautés Mode d emploi des outils animateurs Gestion des communautés Mode d emploi des outils animateurs CONNEXION AU SITE http://www.neoma-alumni.com Utilisez vos identifiants personnels pour vous connecter à votre compte sur le site. En cas de

Plus en détail

Guide Ultra-book / 2012

Guide Ultra-book / 2012 Guide Ultra-book / 2012 Avant de commencer Le logiciel Ultra-book est optimisé pour les derniers navigateurs web standards : Firefox 10 ou 11 Chrome 18 Safari 5 Vous trouverez ces navigateurs en téléchargement

Plus en détail

Cinquième projet Scribus

Cinquième projet Scribus Sommaire 1. Présentation du projet... 2 1.1. Organiser son travail... 2 2. Réalisation... 2 2.1. Préparation des textes... 2 2.2. Création du document Scribus... 3 2.3. Importer des gabarits... 3 2.4.

Plus en détail

Firefox : un navigateur web libre

Firefox : un navigateur web libre Firefox : un navigateur web libre Niveau débutant Niveau intermédiaire Niveau confirmé Firefox est un navigateur Web libre et gratuit qui a connu un succès croissant. Créé par la fondation Mozilla Firefox,

Plus en détail

cbox VOS FICHIERS DEVIENNENT MOBILES! INTERFACE WEB MANUEL D UTILISATION

cbox VOS FICHIERS DEVIENNENT MOBILES! INTERFACE WEB MANUEL D UTILISATION cbox VOS FICHIERS DEVIENNENT MOBILES! INTERFACE WEB MANUEL D UTILISATION BV Introduction L application cbox peut-être installée facilement sur votre ordinateur. Une fois l installation terminée, le disque

Plus en détail

Créer des styles CSS simples

Créer des styles CSS simples Créer des styles CSS simples Les styles CSS mémorisent les attributs de caractère et de paragraphe comme la police, la taille, la couleur, l alignement du texte, etc... Vous pouvez ensuite les appliquer

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

Mode d emploi SPIP 2.0 pour rédacteur

Mode d emploi SPIP 2.0 pour rédacteur Mode d emploi SPIP 2.0 pour rédacteur L objectif de ce document est d apprendre à utiliser le logiciel SPIP en tant que rédacteur. Ce cours ne requiert aucune connaissance informatique préalable à part

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

Fiche n 4 Utilisation de Kompozer Table des matières

Fiche n 4 Utilisation de Kompozer Table des matières Fiche n 4 Utilisation de Kompozer Table des matières 1-Travail préparatoire...1 1.1-Contraintes sur les noms de fichier...1 1.2-Préparation du dossier de stockage...1 1.3-Barre d'outils...1 1.4-Création

Plus en détail

Tout sur le dossier Windows.old

Tout sur le dossier Windows.old Tout sur le dossier Windows.old Par Clément JOATHON Dernière mise à jour : 02/09/2015 Lorsque vous mettez à jour Windows 7 ou Windows 8.1 vers Windows 10, ce dernier créé un dossier Windows.old dans lequel

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

Création de site Web à l aide de l outil SimpliSite

Création de site Web à l aide de l outil SimpliSite Centre de documentation sur l éducation des adultes et la condition féminine (CDÉACF) Création de site Web à l aide de l outil SimpliSite Par François Dallaire CDÉACF Décembre 2006 Création de site Web

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

Guide élève : Comment créer un livre numérique avec Didapages?

Guide élève : Comment créer un livre numérique avec Didapages? Guide élève : Comment créer un livre numérique avec Didapages? Les livres numériques encore appelés "e-books" sont des livres qui peuvent être lus sur différents supports électroniques : ordinateurs, tablettes

Plus en détail

FENESTELA V.1.2005. Manuel Utilisateur

FENESTELA V.1.2005. Manuel Utilisateur FENESTELA V.1.2005 Manuel Utilisateur 1 Lors de l installation de Fenestela un Profil Administrateur et un bureau type est fourni. Pour accéder à votre Fenestela, ouvrez votre navigateur Web (Internet

Plus en détail

ENT Espace de stockage

ENT Espace de stockage ENT Espace de stockage L'adresse : http://environnementnumeriquedetravail.fr Une fois identifié, cliquez "Espace de stockage" dans le menu "Services" L'espace de stockage permet de mettre en ligne des

Plus en détail

Pas-à-pas. Créer une newsletter avec Outlook

Pas-à-pas. Créer une newsletter avec Outlook Pas-à-pas Créer une newsletter avec Outlook Objectif : mettre en forme des messages électroniques afin de pouvoir avoir des images dans le corps du message et une mise en page agréable à l œil et efficace.

Plus en détail

Comment tester les DNS de Google

Comment tester les DNS de Google 1 sur 7 10/10/2012 20:40 Rechercher sur CNET News Produits Vidéos A lire : Windows 8 : tout ce que vous devez savoir Forum Télécharger Cartech Accueil Tutoriels Se connecter Forum Tutoriels et astuces

Plus en détail

MEMENTO. Interface d administration du site www.ville-joigny.fr. I. Identification :... 2. II. Présentation de l interface :... 3

MEMENTO. Interface d administration du site www.ville-joigny.fr. I. Identification :... 2. II. Présentation de l interface :... 3 MEMENTO Interface d administration du site www.ville-joigny.fr I. Identification :... 2 II. Présentation de l interface :... 3 III. Modification des pages du site :... 5 A. Chaque paragraphe comporte un

Plus en détail

Personnaliser une communauté. Ajouter un contenu audio et/ou vidéo et afficher des pages de réseaux sociaux

Personnaliser une communauté. Ajouter un contenu audio et/ou vidéo et afficher des pages de réseaux sociaux Personnaliser une communauté Ajouter un contenu audio et/ou vidéo et afficher des pages de réseaux sociaux Introduction Les communautés vous permettent de partager des documents, fichiers, billets de blog,

Plus en détail

TUTORIAL. www.benevolat.org TUTORIAL. Créez en quelques minutes votre site Internet!

TUTORIAL. www.benevolat.org TUTORIAL. Créez en quelques minutes votre site Internet! Créez en quelques minutes votre site Internet! SOMMAIRE : Choisir une interface graphique - Nommez votre site... page 03 5 étapes de création... page 04 Les outils de création graphique... page 05 Mise

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

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