TP JAVASCRIPT IntegWeb SERIE 4 MMI

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

Download "TP JAVASCRIPT IntegWeb SERIE 4 MMI"

Transcription

1 TP JAVASCRIPT IntegWeb SERIE 4 MMI Exemple d'intégration d'un plugin FANCYBOX Objectif : Découvrir comment exploiter le plugin FancyBox. Le plugin FancyBox et un outil très souvent utilisé sur le web. Il est facilement reconnaissable par le pictogramme de fermeture de la boite (voir ci-contre). La version disponible à ce jour offre beaucoup de possibilités de paramétrages. Il est donc possible d'adapter assez facilement à la charte graphique d'un site le plugin. L'objectif de ce document étant de donner la méthode d'intégration du plugin dans une page et quelques pistes pour modifier le comportement du plugin et ces paramètres graphiques. A) Première intégration du plugin Etape 1 : télécharger le plugin sur le site de FancyBox : Etape 2 : Vous devez obtenir le fichier : fancyapps-fancybox-v ge2248f4.zip

2 Etape 3 : Décompressez ce fichier dans vote dossier du travail. Vous devez obtenir un dossier contenant les éléments cicontre. Pour faire fonctionner la fancybox, vous devez copier les deux dossiers "lib" et "source" dans le répertoire contenant votre fichier html exploitant le plugin. Ajoutez également le fichier images contenant les images à afficher. Nous avons besoin pour chaque image de deux fichiers. Un fichier à la taille originale de l'image et un fichier à une taille réduite de l'image. Vous pouvez télécharger sur le blog un fichier zip contenant une série d'images au deux formats. La FancyBox à besoin de jquery pour fonctionner, vous devez donc ajouter jquery dans votre répertoire. Vous pouvez également télécharger sur le blog le fichier jquery.js. Après toutes ces opérations vous devez avoir dans votre dossier du TP les fichiers suivants: Etape 4 : Le fichier html. Un fichier trame pour ce TP est disponible sur le blog. Téléchargez le, et copier le dans votre répertoire de travail.

3 Ce fichier contient le code html permettant l'affichage d'une série d'images Un clic sur une image déclenche l'ouverture d'une boite de dialogue affichant l'image à sa taille maximale.

4 Etape 5 : Gestion du code JavaScript. Appel des fichiers externe du plugin à ajouter dans le <HEAD> 1) Ajout de jquery nécessaire à l'exécution du plugin <script src="jquery.js" ></script> <link 2) Ajout du plugin (source site fancybox) rel="stylesheet" href="fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" /> <script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js?v=2.1.5"> </script> 3) Ajout du plugin de gestion de la molette de la souris <script type="text/javascript" src="fancybox/lib/jquery.mousewheel pack.js"> </script> 4) Implantation du code JavaScript. Dans une balise <script> ajoutez le code nécessaire à la mise en place du plugin fancybox pour la première série d'images. Pour cette série d'image, on a les attributs suivant : class="fancybox" rel="group". Le code ci-dessous assure l'initialisation du plugin sur toutes les images ayant pour classe : fancybox. L'attribut rel="group" indique que les huit images appartiennent à un même groupe. Le plugin affichera alors l'ensemble des images dans la boite de dialogue, la molette ou les picto < et > permettrons avec le passage d'une image à l'autre.

5 $(document).ready(function() { // Exécuté après chargement de la page $(".fancybox").fancybox({ openeffect : 'elastic', closeeffect : 'fade', padding : 5, helpers : { overlay : { css : { // Modification de la couleur d'arrière plan 'background' : 'rgba(1, 176, 240, 0.5)' ); ); Les paramètres : openeffect : définit l'effet d'ouverture : elastic, fade, none closeeffetc : définit l'effet à la fermeture : elastic, fade, none padding : définit la largeur de la bordure autour de l'image. helpers : { overlay : { css : { 'background' 'background' : 'rgba(1, 176, 240, 0.5)' Permet de définir la couleur de fond et son opacité de l'espace autour de la boite de dialogue. 5) Ouverture de la FancyBox sur une seule image Première image : Code JavaScript $("#Image1").fancybox({ padding : 5, helpers: { title : { type : 'float' );

6 Ce code permet l'affichage d'une boite avec un contour de 5px, et un titre centré sous l'image. Seconde image : Code JavaScript : $("#Image2").fancybox({ openeffect : 'elastic', closeeffect : 'elastic', padding : 2, helpers : { title : { type : 'inside' ); Ce code permet l'affichage d'une boite avec un contour de 2px, un effet 'élastic' à l'ouverture et à la fermeture et un titre dans un bandeau sous l'image.

7 Troisième image Code JavaScript $("#Image3").fancybox({ openeffect : 'none', closeeffect : 'none', padding : 0, helpers : { title : { type : 'outside' ); Ce code permet l'affichage d'une boite sans contour, sans effet à l'ouverture et à la fermeture avec le titre sous l'image à l'extérieur de la boite. Quatrième image Code JavaScript $("#Image4").fancybox({ helpers : { title : { type : 'over' );

8 Ce code permet l'affichage d'une boite avec le contour par défaut, sans effet à l'ouverture et à la fermeture avec le titre dans l'image. 6) Galerie avec bouton de navigation ou bandeau de petites images Ajouter à la page une nouvelle série d'image en copiant le code HTML de la première série à la fin de votre page HTML. Remplacer : ' class="fancybox" rel="group" ' par ' class="fancybox-button" rel="fancybox-button" ' Puis ajoutez le code JavaScript suivant dans la section <script>. Ce code présente les différentes options possibles sur une fancybox, avec l'affichage de module de navigation par boutons ou par un bandeau composé des vignettes des images présentes dans le groupe d'image.

9 $(".fancybox-button").fancybox({ ); nexteffect : 'elastic', // effet de transition pour l'apparition de l'image suivante preveffect : 'fade', // effet de transition pour la disparition de l'image courante nextspeed : 1000, // vitesse de la transition d'apparition prevspeed : 200, // vitesse de la transition de la disparition closebtn : true, // affichage du bouton de fermeture autoplay : false, // démarrage automatique du diaporama playspeed : 500, // vitesse de diaporama : durée d'une image loop : true, // validation du bouclage du diaporama helpers: { title : { type : 'inside', // ajoute un titre sous l'image buttons : {position : 'top', // Ajoute les boutons de navigation thumbs : { // Ajoute les images de navigation width: 50, // définition de la taille des images height: 35, position : 'bottom' // position des images top ou bottom, overlay : { // couleur d'arrière plan css : { 'background' : 'rgba(0,0,0, 0.8)'

10 7) Comment modifier la couleur de la bordure Pour modifier la couleur de la bordure il faut modifier le fichier jquery-fancybox.css. Ci-dessous l'extrait du code CSS à modifier.fancybox-skin { position: relative; background: #EEE; /* changement de la couleur de fond de la box*/ color: #FF0000; /* couleur du texte si texte en pied de box */ text-shadow: none; -webkit-border-radius: 14px; /* arrondi de la box */ -moz-border-radius: 14px; border-radius: 14px; Il est également possible de modifier la couleur du texte de légende et la valeur des rayons des angles. 8) Comment modifier les boutons de la fancybox Pour modifier les boutons il faut modifier le fichier fancybox_sprite.png. Attention il faut respecter les dimensions initiales de l'image. Exemple : Image classique Image modifiée

11 9) Comment modifier le format du titre Pour modifier le titre il faut ajouter dans le code d'initialisation de la fancybox le code ci-dessous Exemple de code qui affiche une légende contenant l'index de l'image dans le groupe et le nombre total d'images dans le groupe. afterload : function() { this.title = 'Image ' + (this.index + 1) + ' sur ' + this.group.length + (this.title? ' - ' + this.title : ''); Résultat : Autre exemple : afterload : function() { this.title = '<hr><span style="color:red;"><b>image </b>' + (this.index + 1) + ' sur ' + this.group.length + (this.title? ' - Légende = <b>' + this.title + ' </b>' : ' ') + '</span>'; Résultat :

Objectif : séparer le contenu de la présentation. Tout ce qui sera de la présentation sera géré par du CSS. Code dédié dans le de la page :

Objectif : séparer le contenu de la présentation. Tout ce qui sera de la présentation sera géré par du CSS. Code dédié dans le <head> de la page : CSS La présentation Objectif : séparer le contenu de la présentation. Tout ce qui sera de la présentation sera géré par du CSS. Code dédié dans le de la page : body { background: orange;

Plus en détail

Création d'un site Web avec KompoZer

Création d'un site Web avec KompoZer Création d'un site Web avec KompoZer Table des matières 1Rudiments sur le langage HTML.1 1.1Structure d'une page web :.1 1.2Le langage des pages Web.2 2Préparation du site web..2 3Utilisation d'une feuille

Plus en détail

Dossier ISN : Tracés de fonctions mathématiques :

Dossier ISN : Tracés de fonctions mathématiques : Dossier ISN : Tracés de fonctions mathématiques : Par Crosetti Pauline et Depoers Quentin. Lycée Colbert Tourcoing. Année scolaire 2012/2013. Sommaire : - Recherches et étude du projet - Html - Css - Javascript

Plus en détail

L1 - Informatique et internet

L1 - Informatique et internet L1 - Informatique et internet Hervé Le Crosnier laboratoire GREYC - Université de Caen! herve.lecrosnier@unicaen.fr http://ensweb.users.info.unicaen.fr HTML + CSS Listes, images et liens Page HTML

Plus en détail

Créer un bouton pour le Web

Créer un bouton pour le Web Lorsqu'un internaute place le pointeur de sa souris sur un dessin dans une page Web, ce pointeur entre physiquement dans la zone de l'écran occupée par le graphique. L'internaute peut alors soit cliquer

Plus en détail

TP 4 : IMAGES ET ARRIERE-PLANS

TP 4 : IMAGES ET ARRIERE-PLANS TP 4 : IMAGES ET ARRIERE-PLANS Les images dans le texte La balise img du langage Html permet d'insérer des images dans une page Html. Exemple : où fichier_image est le nom et

Plus en détail

CSS 3. Julien David. A101 - Julien David (A / 27

CSS 3. Julien David. A101 - Julien David (A / 27 CSS 3 Julien David A101 - david@lipn.univ-paris13.fr 2016 Julien David (A101 - david@lipn.univ-paris13.fr) 2016 1 / 27 Feuilles de styles Cascading Style Sheets CSS est un langage de feuilles de styles.

Plus en détail

Pour créer un tooltip, on utilise la balise , avec l attribut : data-toggle="tooltip".

Pour créer un tooltip, on utilise la balise <a>, avec l attribut : data-toggle=tooltip. Les info-bulles Tooltip - Principe Les tooltips sont les infobulles les plus basiques proposées par Bootstrap 3. Lorsque l utilisateur survole un élément HTML avec sa souris, une petite fenêtre noire contenant

Plus en détail

UTILISER MCK3. - Utilisez les boutons à gauche pour ajouter des objets sur la page. (Voir Chap. III)

UTILISER MCK3. - Utilisez les boutons à gauche pour ajouter des objets sur la page. (Voir Chap. III) UTILISER MCK3 1.C Pour bien commencer Après avoir installé et démarré MCK, vous pouvez créer un nouveau projet. 1 Cliquez sur " Créer un nouveau projet ". 2 Après avoir donné un nom à votre projet, vous

Plus en détail

Ajax, jquery et PHP. 42 ateliers pour concevoir des applications Web 2.0. Jean-Marie Defrance. 3 e édition

Ajax, jquery et PHP. 42 ateliers pour concevoir des applications Web 2.0. Jean-Marie Defrance. 3 e édition Ajax, jquery et PHP 42 ateliers pour concevoir des applications Web 2.0 3 e édition Jean-Marie Defrance Groupe Eyrolles, 2008, 2010, 2011, ISBN : 978-2-212-13271-7 15 Plug-ins jquery Ce dernier chapitre

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 Présentation de la structure d arbre sur des exemples qui montrent où elle intervient en mathématique et en informatique. Application

Plus en détail

HTML, CSS. Rapide Présentation Anthony Médassi Résumé OpenClassRoom

HTML, CSS. Rapide Présentation Anthony Médassi Résumé OpenClassRoom HTML, CSS Rapide Présentation Anthony Médassi Résumé OpenClassRoom HTML Pour le fond -> HTML Pour la forme -> CSS Les balises Les balises orphelines Attributs de balise LES BALISES PRINCIPALES HTML

Plus en détail

15. GERER LES IMAGES D ARRIERE-PLAN

15. GERER LES IMAGES D ARRIERE-PLAN 52 15. GERER LES IMAGES D ARRIERE-PLAN Il y a deux méthodes pour insérer les graphiques d une page web : Ajout du graphique dans l arrière-plan d un DIV à l aide des CSS (exemple : une texture pour créer

Plus en détail

STUDIO - TI6 TABLE DES MATIÈRES. NOUVELLE MATIÈRE (suite) 9. Intégration du logo. Sujet. HTML - CSS révisions - suite.

STUDIO - TI6 TABLE DES MATIÈRES. NOUVELLE MATIÈRE (suite) 9. Intégration du logo. Sujet. HTML - CSS révisions - suite. STUDIO - TI6 PASCAL PLACEMAN Sujet HTML - CSS révisions - suite TABLE DES MATIÈRES Nouvelle matière: 9. Intégration du logo 10. Un titre devant la vidéo 11. Utiliser des polices typographiques grâce à

Plus en détail

Programmation Web TD8- CSS

Programmation Web TD8- CSS ²Université de la Manouba Ecole Supérieure d'economie Numérique Programmation Web TD8- CSS Objectifs - Développer des pages Web HTML5 validées - Mettre en place des fichiers CSS pour une meilleure présentation

Plus en détail

TP JAVASCRIPT OMI4 jquery et ses Plungins

TP JAVASCRIPT OMI4 jquery et ses Plungins TP JAVASCRIPT OMI4 jquery et ses Plungins Objectifs de ce TP : découvrir quelques exemples d utilisation de la bibliothèque jquery et également quelques plugins. Exercice 1 : gestion d un bouton rollover

Plus en détail

Création d'une bannière animée

Création d'une bannière animée Création d'une bannière animée Pour réaliser la bannière insérée sur la page http://www.bricabracinfo.fr/details/photofv6.phpnous utiliserons deux images : anim2.gif et logo_pf.gif. CONSEIL : ENREGISTRER

Plus en détail

Mon Mondrian. Compétences visées. Les bases du HTML, du CSS, la balise

Mon Mondrian. Compétences visées. Les bases du HTML, du CSS, la balise <div>, le positionnement, les mesures. Description Mon Mondrian Compétences visées Les bases du HTML, du CSS, la balise , le positionnement, les mesures. Description Peindre, c'est salissant. Le code, c'est plus propre. À travers ce projet, recréez

Plus en détail

4. LES TRANSITIONS EN CSS3

4. LES TRANSITIONS EN CSS3 151 4. LES TRANSITIONS EN CSS3 Les CSS3 permettent, avec le module Transition de passer d une valeur CSS à une autre avec une transition spécifiée si un événement est détecté au niveau d un élément. Concrètement,

Plus en détail

PLUGINS (http://jqueryui.com) Stéphane Gimenez. Octobre 2012

PLUGINS (http://jqueryui.com) Stéphane Gimenez. Octobre 2012 PLUGINS (http://jqueryui.com) Stéphane Gimenez Octobre 202 plan Outils Vérification de formulaire Plugins TableSorter JQPlot Outils Vérification de formulaire

Plus en détail

Les CSS un menu vertical Nous allons créer un dossier menu_vertical. Comprenant les sous dossiers style, images, multi_niveaux, un niveau et _notes

Les CSS un menu vertical Nous allons créer un dossier menu_vertical. Comprenant les sous dossiers style, images, multi_niveaux, un niveau et _notes Les CSS un menu vertical Nous allons créer un dossier menu_vertical Comprenant les sous dossiers style, images, multi_niveaux, un niveau et _notes A l'intérieur du dossier un_niveau Nous créons les fichiers

Plus en détail

CSS CSS : Cascading Style Sheets (feuilles de styles en cascade ) Cas générale : La structure du code : Nom_balise { Propriété : valeur ;

CSS CSS : Cascading Style Sheets (feuilles de styles en cascade ) Cas générale : La structure du code : Nom_balise { Propriété : valeur ; CSS CSS : Cascading Style Sheets (feuilles de styles en cascade ) Cas générale : La structure du code : Nom_balise Pour les commentaires : /* un commentaire */ Classe : La construction d une classe :.ma_classe

Plus en détail

Prog. Web - TP4 Année universitaire COURS : PLUS BESOIN DE FLASH!

Prog. Web - TP4 Année universitaire COURS : PLUS BESOIN DE FLASH! Prog. Web - TP4 Année universitaire 2012 2013 1 COURS : PLUS BESOIN DE FLASH! Aucune balise HTML4 ne permettait jusqu'ici de gérer la vidéo ou le son. Il fallait à la place utiliser un 'plugin' comme flash

Plus en détail

Réussir son site web avec XHTML et CSS

Réussir son site web avec XHTML et CSS Leçon 06 Réussir son site web avec XHTML et CSS CSS, le langage de mise en page du Web 1. Insérer du code CSS...1 Dans un fichier.css...1 Dans l en-tête du fichier XHTML...3 2. Appliquer un style à des

Plus en détail

TD n 5 : Feuilles de styles

TD n 5 : Feuilles de styles TD n 5 : Feuilles de styles 1. Préparation du site a. Récupérez le site avec liens internes et tableaux du TD4 et assurez vous qu il soit dans un dossier aide-memoire sous D:\et-l2. 2. Joindre une feuille

Plus en détail

HTML5 et CSS3 Maîtrisez les standards de la création de sites Web (3e édition)

HTML5 et CSS3 Maîtrisez les standards de la création de sites Web (3e édition) Le HTML5 et les CSS 1. L'évolution de HTML 15 2. L'évolution des CSS 16 2.1 La notion de module 16 2.2 L'évolution des statuts 16 2.3 Les préfixes vendeurs 17 2.4 Utiliser les préfixes vendeurs 18 3. La

Plus en détail

HTML, CSS. Rapide Présentation Anthony Médassi Résumé OpenClassRoom

HTML, CSS. Rapide Présentation Anthony Médassi Résumé OpenClassRoom HTML, CSS Rapide Présentation Anthony Médassi Résumé OpenClassRoom HTML Pour le fond -> HTML Pour la forme ->CSS Les balises Les balises orphelines Attributs de balise LES BALISES PRINCIPALES HTML

Plus en détail

TP4 Feuille de style Class, ID, Pseudo-element &pseudo-class

TP4 Feuille de style Class, ID, Pseudo-element &pseudo-class TP4 Feuille de style Class, ID, Pseudo-element &pseudo-class Création et mise en forme d'une page Web avec une feuille de style Ouvrez la page index.htm qui envoyer par email. Insérez une feuille de style

Plus en détail

Table des matières. Introduction 1

Table des matières. Introduction 1 Table des matières Introduction 1 1 Les bases de JavaScript 5 Compréhension de JavaScript (et de son histoire) 5 Établissement d un système de test 8 Configuration de navigateurs Web 9 Inclusion du code

Plus en détail

PhotoFiltre en bref DETAILS

PhotoFiltre en bref DETAILS Fiche 2 PhotoFiltre en bref PhotoFiltre est un logiciel de retouche d images très complet. PhotoFiltre est gratuit pour une utilisation privée, non commerciale ou éducative (incluant les organisations

Plus en détail

Mémo CSS 3. Exemple : h1 concerne toutes les éléments titres de niveau 1

de la page.

Mémo CSS 3. Exemple : h1 concerne toutes les éléments titres de niveau 1 <h1> de la page. Mémo CSS 3 Les sélecteurs simples balise permet de viser tous les éléments d un certain type de balise. Exemple : h1 concerne toutes les éléments titres de niveau 1 de la page..maclasse permet de

Plus en détail

Les CSS un menu horizontal Nous créons deux dossiers un_niveau et multi_niveaux comprenant :

Les CSS un menu horizontal Nous créons deux dossiers un_niveau et multi_niveaux comprenant : Les CSS un menu horizontal Nous créons deux dossiers un_niveau et multi_niveaux comprenant : style_div.css : contiendra toutes les informations relatives au positionnement de nos différents blocs. positionnement.php

Plus en détail

Tour d'horizon de PhotoFiltre 6.3

Tour d'horizon de PhotoFiltre 6.3 Tour d'horizon de PhotoFiltre 6.3 PhotoFiltre est un logiciel de retouche d images qui permet d effectuer des réglages simples ou avancés sur une image et de lui appliquer un large éventail de filtres.

Plus en détail

Tutoriel Modification templates Rhuk_solarflare_ii

Tutoriel Modification templates Rhuk_solarflare_ii Description du tutoriel Solutions de modification du template Rhuk_solarflare est le template par défaut du pack Joomla!. C est donc le plus utilisé et par conséquence le plus vu, mais il existe des milliers

Plus en détail

OpenOffice 3.3 Module Texte 1

OpenOffice 3.3 Module Texte 1 OpenOffice 3.3 Module Texte 1 OpenOffice 3.3 Module Texte 2 Table des matières 1 Les tableaux...3 1.1 Créer un tableau...3 1.2 Mise en forme d'un tableau...4 1.3 Fusionner ou scinder des cellules...6 1.3.1

Plus en détail

Exercices JavaScript

Exercices JavaScript Exercices Javascript - page 1 Exercices JavaScript Auteur : E.Thirion - 07/12/2015 Ce document est extrait du site http://cours.thirion.free.fr/cours/javascript Les exercices suivants sont s fichiers à

Plus en détail

Cours CSS/JavaScript

Cours CSS/JavaScript Cours /JavaScript E.Coquery emmanuel.coquery@liris.cnrs.fr Cascading Style Sheets Principe : séparation du style et de la structure HTML Structure paragraphes, tableaux, liens,... Style polices de caractères,

Plus en détail

Université Paris Dauphine Outils de l Internet 2011-2012 TP 5 : LES CADRES

Université Paris Dauphine Outils de l Internet 2011-2012 TP 5 : LES CADRES TP 5 : LES CADRES Le contenu de la page d'accueil d'un site ne constitue que la subdivision en plusieurs frames. Les codes sources de chacune des frames seront contenus dans d'autres fichiers HTML. La

Plus en détail

PHOTO FILTRE Version 7 Objectif : Travailler les images

PHOTO FILTRE Version 7 Objectif : Travailler les images PHOTO FILTRE Version 7 Objectif : Travailler les images Nous supposons, à ce stade, que les notions basiques des outils sont acquises : Ex : ouvrir, sélectionner, copier, coller, enregistrer, enregistrer

Plus en détail

Responsable : F. CHAKER-KHARRAT Niveau : 3 ème ESSAI Notes du cours :

Responsable : F. CHAKER-KHARRAT Niveau : 3 ème ESSAI Notes du cours : COURS PROGRAMMATION WEB ASCADING STYLE SHEETS CSS CASCADING Responsable : F. CHAKER-KHARRAT Niveau : 3 ème ESSAI Notes du cours : http://essai.rnu.tn/enseignants/fatmachaker2.htm Année Universitaire :

Plus en détail

Il est possible de naviguer à travers les étapes de la construction d'une figure à l'aide du menu Affichage Protocole de construction.

Il est possible de naviguer à travers les étapes de la construction d'une figure à l'aide du menu Affichage Protocole de construction. Fiche technique 27 Le protocole de construction 1 Paramétrer l'affichage du protocole de construction 2 Naviguer dans le protocole de construction 3 Modifier la figure depuis le protocole de construction

Plus en détail

GUIDE ANIMATEUR DE SITE

GUIDE ANIMATEUR DE SITE GUIDE ANIMATEUR DE SITE Sommaire Guide Animateur 1 Premier pas avec ASPresso... 3 1.1 Accéder à votre site web... 3 1.2 Terminologie liée au site... 3 1.3 Accéder à l'interface d'administration... 3 1.4

Plus en détail

PhotoFiltre en bref DETAILS

PhotoFiltre en bref DETAILS Fiche 2 PhotoFiltre en bref PhotoFiltre est un logiciel de retouche d images très complet. PhotoFiltre est gratuit pour une utilisation privée, non commerciale ou éducative (incluant les organisations

Plus en détail

PSJDIAPORAMA DEFILEMENT D IMAGES POUR PRESTASHOP EDITÉ PAR ARETMIC S.A.

PSJDIAPORAMA DEFILEMENT D IMAGES POUR PRESTASHOP EDITÉ PAR ARETMIC S.A. PSJDIAPORAMA DEFILEMENT D IMAGES POUR PRESTASHOP EDITÉ PAR ARETMIC S.A. 1 PREAMBULE Les conditions générales d utilisation détaillant l ensemble des dispositions applicables aux Produits Virtuels proposés

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

Présentation Nous pouvons spécifier le style de l élément en trois endroits :

Présentation Nous pouvons spécifier le style de l élément en trois endroits : Javascript et CSS Présentation Nous pouvons spécifier le style de l élément en trois endroits : En attribut de l élément : c est le style dit inline. Dans une

Plus en détail

Réussir son site web avec XHTML et CSS

Réussir son site web avec XHTML et CSS Leçon 11 v2 Réussir son site web avec XHTML et CSS TD de révision : le design d un site web 1. La structure générale... 2 2. Primo, le XHTML... 3 Découpage des pages en blocks... 3 Création du modèle de

Plus en détail

Personnalisation de l'opac. Yves Tomic, SCD Université Paris Sud

Personnalisation de l'opac. Yves Tomic, SCD Université Paris Sud Personnalisation de l'opac Yves Tomic, SCD Université Paris Sud Koha : Personnalisation de l'opac Koha, un SIGB personnalisable sans modifier le code source de l'application. L'OPAC et l'interface professionnelle

Plus en détail

TP Informatique. Personnalisation de page web HTML avec le langage CSS. Objectifs :

TP Informatique. Personnalisation de page web HTML avec le langage CSS. Objectifs : TP Informatique Personnalisation de page web HTML avec le langage CSS Objectifs : - Approfondir ses connaissances au langage HTML - Changer le style et la présentation d une page HTML grâce au langage

Plus en détail

STUDIO - TI6 TABLE DES MATIÈRES NOUVELLE MATIÈRE. 1. Donner une «class» à une

<div></div> STUDIO - TI6 TABLE DES MATIÈRES NOUVELLE MATIÈRE. 1. Donner une «class» à une <div> Sujet STUDIO - TI6 PASCAL PLACEMAN Sujet HTML - CSS révisions TABLE DES MATIÈRES Nouvelle matière: 1. Donner une «class» à une 2. Créer une div en plein-écran 3. Gérer des colonnes 4. Mettre une video

Plus en détail

jquery 3 Créer des sites web dynamiques et interactifs

jquery 3 Créer des sites web dynamiques et interactifs Chapitre 1 : Introduction A. Introduction 9 B. À propos de cet ouvrage 9 Chapitre 2 : Installer et utiliser jquery A. Les objectifs 13 B. Télécharger les fichiers jquery 13 1. Les différentes versions

Plus en détail

Guide du rédacteur. La mise en page d un contenu sur Internet est une opération qui doit avoir une certaine discipline et une réflexion.

Guide du rédacteur. La mise en page d un contenu sur Internet est une opération qui doit avoir une certaine discipline et une réflexion. Guide du rédacteur A Mise en page : La mise en page d un contenu sur Internet est une opération qui doit avoir une certaine discipline et une réflexion. En effet, un internaute ne lit pas le contenu d

Plus en détail

POWERPOINT NIVEAU 2

POWERPOINT NIVEAU 2 POWERPOINT 2007-2010 NIVEAU 2 Sommaire LES BOUTONS D ACTION... 2 Créer un bouton... 2 Paramètres des actions... 3 LIENS HYPERTEXTE... 4 Créer un lien hypertexte... 4 Choisir la destination du lien... 4

Plus en détail

Créer un journal scolaire avec libre-office dessin 1- Introduction à l'interface graphique de Draw

Créer un journal scolaire avec libre-office dessin 1- Introduction à l'interface graphique de Draw Créer un journal scolaire avec libre-office dessin 1- Introduction à l'interface graphique de Draw Lorsque vous ouvrez un document Draw, (fichier nouveau - dessin) une fenêtre telle que celle ci-dessous

Plus en détail

Tutorial Powerpoint.

Tutorial Powerpoint. Tutorial Powerpoint Insérer une zone de texte. Choisissez Zone de texte dans le menu insertion. 2. Tracez un rectangle à l endroit où vous désirez insérer le texte 3. Tapez le texte dans cette zone. 4.

Plus en détail

WEB BALISES. Lorem Ipsum : texte en latin (qui ne veut même rien dire en latin) qui permet de mettre du texte quand il en faut.

WEB BALISES. Lorem Ipsum : texte en latin (qui ne veut même rien dire en latin) qui permet de mettre du texte quand il en faut. WEB 27/09 Chaque élément est une balise : HTML -> visible HEAD -> invisible BODY -> DOCTYPE: c est le type de document qu on va utiliser, XHTML 1.1=> le plus strict (qu on va bosser) N importe quel première

Plus en détail

1 ère étape : l'assistant de création d'une présentation

1 ère étape : l'assistant de création d'une présentation Réalisation d'un diaporama avec le module Impress d'openoffice (présentation) 1 ère étape : l'assistant de création d'une présentation Choisir Présentation à la demande de création d'un nouveau document

Plus en détail

Utilisation Des Widgets Gestprod ITEA

Utilisation Des Widgets Gestprod ITEA Utilisation Des Widgets Gestprod ITEA Sommaire 1 Introduction... 3 2 Intégration sur votre site web (Javascript)... 4 2.1 Inclusion du fichier javascript... 4 2.2 Appel de la fonction javascript... 4 2.3

Plus en détail

Carrefour de l information Université de Sherbrooke. Dreamweaver MX 2004 Deuxième partie Savoir améliorer ses sites Web

Carrefour de l information Université de Sherbrooke. Dreamweaver MX 2004 Deuxième partie Savoir améliorer ses sites Web Carrefour de l information Université de Sherbrooke Dreamweaver MX 2004 Deuxième partie Savoir améliorer ses sites Web Par : Josée Martin (hiver 2005) Édition revue et augmentée par : Marc-André Dulude

Plus en détail

HTML5 et CSS3 Complément vidéo : Découvrez les nouveaux effets et l'insertion native de l'audio et de la vidéo

HTML5 et CSS3 Complément vidéo : Découvrez les nouveaux effets et l'insertion native de l'audio et de la vidéo Introduction A. La création de sites web 18 B. Les langages 18 C. Le livre 18 1. Pour les designers web 18 2. Le contenu 18 Chapitre 1 : L évolution du HTML et des CSS A. Rapide historique de l Internet

Plus en détail

HTML5 et CSS3 Faites évoluer le design de vos sites web (3e édition)

HTML5 et CSS3 Faites évoluer le design de vos sites web (3e édition) Introduction A. La création de sites web 18 B. Les langages 18 C. Le livre 18 1. Pour les designers web 18 2. Le contenu 18 Chapitre 1 : L évolution du HTML et des CSS A. Rapide historique de l Internet

Plus en détail

Mini présentation de DELPHI

Mini présentation de DELPHI PROGRAMMATION EN LANGAGE PASCAL et DELPHI 5 Objectifs : Prendre connaissance d un langage évolué de programmation Acquis Préalables : Connaissance des organigrammes et algorithmes. Critères d évaluations

Plus en détail

Les calques. Exemple d'une image composée de trois calques. 1. Calque d'arrière-plan (fond) 2. Calque de type Bitmap 3. Calque de type Texte

Les calques. Exemple d'une image composée de trois calques. 1. Calque d'arrière-plan (fond) 2. Calque de type Bitmap 3. Calque de type Texte Les calques peuvent être comparés à des feuilles empilées les unes sur les autres. Lorsque le calque contient des zones transparentes, vous pouvez voir le calque d'en dessous à travers ces zones. En dessous

Plus en détail

IZISPOT. Lors de l ouverture du logiciel Izispot, vous pouvez voir deux boutons :

IZISPOT. Lors de l ouverture du logiciel Izispot, vous pouvez voir deux boutons : IZISPOT Lors de l ouverture du logiciel Izispot, vous pouvez voir deux boutons : Dans le cas de la création d un nouveau site, vous devez choisir «Nouveau» puis «Site vierge» Choisissez un nom de fichier

Plus en détail

INSA - ASI TechnoWeb : jquery 1/24. Technologies Web. jquery. Alexandre Pauchet. INSA Rouen - Département ASI. BO.B.RC.18,

INSA - ASI TechnoWeb : jquery 1/24. Technologies Web. jquery. Alexandre Pauchet. INSA Rouen - Département ASI. BO.B.RC.18, INSA - ASI TechnoWeb : jquery 1/24 Technologies Web jquery Alexandre Pauchet INSA Rouen - Département ASI BO.B.RC.18, pauchet@insa-rouen.fr INSA - ASI TechnoWeb : jquery 2/24 Plan 1 Introduction 2 Fonctionnalités

Plus en détail

Pour naviguer sur le Web, il faut : Naviguer: dialoguer avec un serveur web

Pour naviguer sur le Web, il faut : Naviguer: dialoguer avec un serveur web 1. 2. Pour naviguer sur le Web, il faut : Une connexion au réseau Réseau Connexion physique (câbles,sans fils, ) à des machines Protocoles de communication Plusieurs niveau (couche) : Internet, protocole

Plus en détail

Document ressources Réaliser un diaporama avec : Open Office IMPRESS

Document ressources Réaliser un diaporama avec : Open Office IMPRESS Document ressources Réaliser un diaporama avec : Open Office IMPRESS M. OLIVA Professeur de technologie Sommaire : 1. Introduction... 2 2. Création d'une présentation... 2 3. Le module de présentation...

Plus en détail

XnView 1.82 (2/2) On retrouve des fonctions standard : ouvrir, sauvegarder, acquérir (scanner)

XnView 1.82 (2/2) On retrouve des fonctions standard : ouvrir, sauvegarder, acquérir (scanner) Lancer l'impression Fermer cette fenêtre http://www.kachouri.com I. Introduction à XnView XnView 1.82 (2/2) Ceci est la deuxième partie du tutoriel sur XnView 1.82. Si vous ne l'avez pas encore fait, pensez

Plus en détail

Informatique Appliquée - DAO Mensura- T.D N 2 Déviation de la Romagne

Informatique Appliquée - DAO Mensura- T.D N 2 Déviation de la Romagne Informatique Appliquée - DAO Mensura- Déviation de la Romagne 1.Objet : L'objet du présent TD est de compléter vos connaissances dans l'utilisation du logiciel Mensura sur un projet d'infrastructure linéaire.

Plus en détail

Powerpoint 2003 : Création d'un diaporama. Mode d emploi, par l'exemple, pour réaliser un diaporama dans Powerpoint 2003

Powerpoint 2003 : Création d'un diaporama. Mode d emploi, par l'exemple, pour réaliser un diaporama dans Powerpoint 2003 Powerpoint 2003 : Création d'un diaporama A savoir : Powerpoint 2003, logiciel de Présentation Assistée par Ordinateur (PAO), appartient à la suite Office 2003 de Microsoft. Le mode d emploi décrit ci-dessous

Plus en détail

07. Personnaliser son espace de travail

07. Personnaliser son espace de travail 07. Personnaliser son espace de travail Wiki Pré-requis Connaitre l'environnement de Spiral Manne Connect Posséder des ressources. Modifier les paramètres de votre profil En cliquant sur l'icône vous pouvez

Plus en détail

Widget neige. Manuel d'utilisation

Widget neige. Manuel d'utilisation Widget neige Manuel d'utilisation I. Connexion au service L accès au service s opère en 3 étapes distinctes : La demande d inscription au service via le formulaire d inscription La réception de vos paramètres

Plus en détail

Les éléments se placent les uns en dessous des autres. Par défaut, ils utilisent toute la largeur. Propriétés :

Les éléments se placent les uns en dessous des autres. Par défaut, ils utilisent toute la largeur. Propriétés : CSS positionnement POSITIONNEMENT Rappel balises de type bloc Les éléments se placent les uns en dessous des autres. Par défaut, ils utilisent toute la largeur. Propriétés : width, height, min-width, ou

Plus en détail

Introduction. Principe général : distinction entre le contenu et la forme Rappel de quelques avantages découlant de cette distinction :

Introduction. Principe général : distinction entre le contenu et la forme Rappel de quelques avantages découlant de cette distinction : Introduction Principe général : distinction entre le contenu et la forme Rappel de quelques avantages découlant de cette distinction : Alléger les pages Web (une définition pouvant s'appliquer à plusieurs

Plus en détail

Les fonctions de base pour utiliser «Le pagicien»

Les fonctions de base pour utiliser «Le pagicien» Les fonctions de base pour utiliser «Le pagicien» Le Pagicien permet la création d hyperdocument diffusable sur cédérom ou sur Internet avec la version 3. Ce document se propose de vous proposer les fonctions

Plus en détail

Movie Maker vous permet de choisir les photos qui constitueront votre film. Vous pouvez facilement choisir leur ordre, leur durée d'affichage, etc.

Movie Maker vous permet de choisir les photos qui constitueront votre film. Vous pouvez facilement choisir leur ordre, leur durée d'affichage, etc. Pour créer des diaporamas vidéo à partir de vos photos, vous n'avez pas besoin d'investir dans un coûteux logiciel. En effet, avec le logiciel de montage vidéo gratuit Windows Live Movie Maker, vous pouvez

Plus en détail

CSS 3. Mai Jérôme GUY

CSS 3. Mai Jérôme GUY CSS 3 Mai 2013 Jérôme GUY CSS Contenu Introduction... 3 Où écrire le CSS?... 3 Inclure un fichier CSS... 3 Les commentaires... 4 Class et Id... 4 Les balises SPAN et DIV... 4 Les sélecteurs avancés...

Plus en détail

Balises obsolètes.

texte

p { font-size: 20px; color: red; text-transform: uppercase; }

Balises obsolètes. <p>texte</p> p { font-size: 20px; color: red; text-transform: uppercase; } Balises obsolètes De nombreuses balises et propriétés sont obsolètes : font, basefont, center, s, u, b, i, align, width, height, size, color, border, background, bgcolor, border, face, name, target, En

Plus en détail

Les CSS pour la mise en page

Les CSS pour la mise en page Les CSS pour la mise en page Nous allons créer deux fichier style_div.css contiendra toutes les informations relatives au positionnement de nos différents blocs. positionnement.htm contiendra tout notre

Plus en détail

COMMENT AMENAGER UN CONTENEUR? Modelisation graphique du logement à l'aide du logiciel SWEET HOME 3D

COMMENT AMENAGER UN CONTENEUR? Modelisation graphique du logement à l'aide du logiciel SWEET HOME 3D 5 ème RDL 67 5AC Ressource 2bis COMMENT AMENAGER UN CONTENEUR? Modelisation graphique du logement à l'aide du logiciel SWEET HOME 3D Situation problème : REPRÉSENTATION graphique DU LOGEMENT = MODELISATION

Plus en détail

On le retrouve dans plusieurs modules tels que le courrier, le forum, l agenda, les tâches, les communiqués et plus particulièrement dans Édu-Notes.

On le retrouve dans plusieurs modules tels que le courrier, le forum, l agenda, les tâches, les communiqués et plus particulièrement dans Édu-Notes. 154 L éditeur de texte L ÉDITEUR DE TEXTE L éditeur de texte du portail est une application destinée à créer et modifier des textes pour créer des documents HTML. L éditeur de texte possède certaines fonctions

Plus en détail

Créer un diaporama vidéo

Créer un diaporama vidéo Créer un diaporama vidéo Votre classe revient d'une sortie, d'une visite, les élèves ont photographié pendant l'année leurs activités, vous souhaitez faire découvrir ces images aux élèves, aux parents,

Plus en détail

Créer un diaporama avec impress

Créer un diaporama avec impress Créer un diaporama avec impress Un diaporama comporte plusieurs diapositives. Les diapositives peuvent s'enchaîner s selon un ordre prévu à l'avance (en général 1,2,3,4,5...) de façon automatique (on règle

Plus en détail

Créer une présentation (diaporama) avec NeoOffice Impress

Créer une présentation (diaporama) avec NeoOffice Impress Créer une présentation (diaporama) avec NeoOffice Impress Sommaire : I. Préparation du diaporama... page 2 I.1. La première diapositive 2... page 2 I.2. Interface du logiciel 3... page 3 I.3. Les diapositives

Plus en détail

3-3- intégration du framework Web Bootstrap

3-3- intégration du framework Web Bootstrap 3-3- intégration du framework Web Bootstrap Le but de cette itération est de rendre l'affichage de notre application plus conforme aux standards actuels. Introduction au design web adaptatif Commençons

Plus en détail

Rédacteurs - Typo3 v6.2

Rédacteurs - Typo3 v6.2 Rédacteurs - Typo3 v6.2 Insérer des images Objet et contexte Ce document présente l insertion d images dans les contenus de l environnement typo3 6.2 Les outils images Il y a deux types d outils qui permettent

Plus en détail

MODELE DE SITE RAINBOW

MODELE DE SITE RAINBOW MODELE DE SITE RAINBOW Rainbow-12SP0-v1 Fiche de fonctionnalités 1 Sommaire Présentation... 4 Pré-requis... 4 Site web 12SP0... 4 Les modèles de page... 5 Les modèles de bloc et leurs thèmes de couleurs...

Plus en détail

Xn View : visionneuse et traitement par lot. Table des matières

Xn View : visionneuse et traitement par lot. Table des matières Xn View : visionneuse et traitement par lot Table des matières Xn View : visionneuse et traitement par lot...1 1-Visionner des images...1 2-Utiliser la barre d'outils...2 3-Faire des diaporamas...4 4-Créer

Plus en détail

Test Test Test Test Test

Test Test Test Test Test Mise en forme d un document HTML Niveaux de titre Le langage HTML définit 6 niveaux de titre (en anglais heading), afin de définir une structuration hiérarchique des paragraphes dans un texte : Balise

Plus en détail

Foundation 6 Un framework CSS pour concevoir des sites web attractifs et adaptatifs

Foundation 6 Un framework CSS pour concevoir des sites web attractifs et adaptatifs Chapitre 1 : Introduction A. Le développement des sites web 9 B. Les fonctionnalités de Foundation 10 C. Télécharger les exemples 11 Chapitre 2 : Installer Foundation A. Les objectifs 15 B. Les différentes

Plus en détail

Exercice 1 : Structuration de document avec HTML

Exercice 1 : Structuration de document avec HTML Université Lumière Lyon 2 Université Nationale d Économie de Kharkiv Master 1 IDSM Année 2016-2017 Programmation Web Exercices pratiques (1) : HTML et CSS Jérôme Darmont (http://eric.univ-lyon2.fr/~jdarmont/),

Plus en détail

Ajouter dans l'opac la recherche 'Périodiques'

Ajouter dans l'opac la recherche 'Périodiques' Ajouter dans l'opac la recherche 'Périodiques' Fiche technique PMB n 10.10 Objectif : Proposer dans l'opac la recherche dans un périodique de la base à partir d'un onglet du 'module des Recherches' (en

Plus en détail

GUIDE DE MAINTENANCE DE VOTRE MINI-SITE

GUIDE DE MAINTENANCE DE VOTRE MINI-SITE GUIDE DE MAINTENANCE DE VOTRE MINI-SITE Pour toutes informations complémentaires, merci de contacter : Flora ARTERO - 01 60 87 92 38 f.artero@mb-diffusion.com ou Cyrielle ETCHEVERRY 01 60 87 91 96 c.etcheverry@mb-diffusion.com

Plus en détail

Le multimédia, Audio et Vidéo. Chapitre 09. Nathalie Vanassche

Le multimédia, Audio et Vidéo. Chapitre 09. Nathalie Vanassche Le multimédia, Audio et Vidéo Chapitre 09 179 Tout ce qui est contenu multimédia et interactif nécessite l ajout d un moteur d interprétation dans les navigateurs, pour qu ils puissent afficher ce qu ils

Plus en détail

Contenu Word 2003, Base et intermédiaire

Contenu Word 2003, Base et intermédiaire Contenu Word 2003, Base et intermédiaire Module 1 Notions élémentaires de Windows XP Découvrir Windows XP Copie de disquettes avec Windows XP Configuration de Windows XP Définir les paramètres régionaux

Plus en détail

PowerPoint Débutant module 1

PowerPoint Débutant module 1 PowerPoint Débutant module 1 Avoir suivi la formation ou connaître Windows Le participant sera capable de : - Créer une présentation simple Introduction - Présentation du logiciel - Différents mode de

Plus en détail

Réaliser un diaporama pour présenter un cours, un projet

Réaliser un diaporama pour présenter un cours, un projet Réaliser un diaporama pour présenter un cours, un projet Formateur : Christophe Rigal Novembre 2005 Documents de Franck Dubois (crdp) et Christophe Rigal lcrdp) SOMMAIRE CHAPITRE I. L'ECRAN D'ACCUEIL...

Plus en détail

N Action ou résultat obtenu Illustrations

N Action ou résultat obtenu Illustrations S21 - Dossier ressource : Conception (En cas de réalisation sur la version 2014 de SW, seules quelques fonctions diffèrent (couleur bleue ou outils sur onglets) Création d une pièce de tôlerie en 3D Le

Plus en détail

Dreamweaver 2.0. GUIDE D UTILISATION POUR Dreamweaver 2.0. Logiciel de création de pages HTML. Page 1

Dreamweaver 2.0. GUIDE D UTILISATION POUR Dreamweaver 2.0. Logiciel de création de pages HTML. Page 1 1 GUIDE D UTILISATION POUR Dreamweaver 2.0 Logiciel de création de pages HTML SOMMAIRE Sommaire 1 Démarrer avec Dreamweaver 2.0 2 Le texte avec Dreamweaver 2.0 4 Insérer un lien hypertexte 4 Choisir les

Plus en détail

Plan Généralités Syntaxe CSS Appliquer un style Ressources CSS : Définir les couleurs Texte Arrière plan Exercices

Plan Généralités Syntaxe CSS Appliquer un style Ressources CSS : Définir les couleurs Texte Arrière plan Exercices Dreamweaver CSS Plan Généralités Syntaxe CSS Appliquer un style Ressources CSS : Définir les couleurs Texte Arrière plan Exercices CSS CSS - Cascading Style Sheets Servent à mettre en forme les éléments

Plus en détail