TP JAVASCRIPT IntegWeb SERIE 4 MMI

Save this PDF as:
 WORD  PNG  TXT  JPG

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 :

introduction principes syntaxe CSS : introduction Université Lille 1 Technologies du Web CSS : introduction 1

introduction principes syntaxe CSS : introduction Université Lille 1 Technologies du Web CSS : introduction 1 CSS : introduction Université Lille 1 Technologies du Web CSS : introduction 1 au programme... 1 introduction 2 principes 3 syntaxe Université Lille 1 Technologies du Web CSS : introduction 2 au programme...

Plus en détail

introduction principes syntaxe CSS : introduction

introduction principes syntaxe CSS : introduction CSS : introduction Université Lille 1 Technologies du Web CSS : introduction 1 au programme... 1 introduction 2 principes 3 syntaxe Université Lille 1 Technologies du Web CSS : introduction 2 au programme...

Plus en détail

Développement. Web. Gaël Mahé. UFR math-info. automne 2005

Développement. Web. Gaël Mahé. UFR math-info. automne 2005 Développement Client Web Gaël Mahé UFR math-info automne 2005 Introduction 2 langages s'intégrant dans HTML, interprétés par le navigateur : CSS = langage de style JavaScript = langage de programmation

Plus en détail

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 :

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

M3206. multimedia web Flash? ;-)

M3206. multimedia web Flash? ;-) M3206 multimedia web Flash? ;-) FLASH AUJOURD HUI... pourquoi tant de haine? ;-) Les alternatives Où ne trouve t on plus de flash? Où trouve t on encore du flash? FLASH? où ne trouve t on plus de flash?

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

TD n 3 - Notion de langage CSS. Table des matières

TD n 3 - Notion de langage CSS. Table des matières TD n 3 - Notion de langage CSS Table des matières 1-Mettre en forme un page en utilisant la balise ...2 2-Mettre en forme un page en utilisant une feuille de style externe...4 3-Conseils pratiques

Plus en détail

Cascading Style sheets

Cascading Style sheets Cascading Style sheets height CSS3 : Bordures, marges et espacements Que l'élément soit de type bloc (div, p ou form, ou de type inline comme span, img, a, il se voit attribué sa propre boite suivant le

Plus en détail

TP07: barre de navigation

TP07: barre de navigation TP07: barre de navigation Ce tp poursuit les tps précédents. Pour commencer, dans votre dossier «php» (qui est dans «www»), recopiez vos fichiers du TP06 dans un nouveau dossier «TP07» (cp -r TP06 TP07).

Plus en détail

Mode d'emploi. 1- Comment ça fonctionne? Le principe

Mode d'emploi. 1- Comment ça fonctionne? Le principe Mode d'emploi 1- Comment ça fonctionne? Le principe Cet outil d'affichage d'information est en fait un site web réalisé sous Jimdo, dont on programme le chargement des pages après un délai paramétrable

Plus en détail

LOG4420 Conception de sites web dynam. et transact.

LOG4420 Conception de sites web dynam. et transact. LOG4420 Conception de sites web dynam. et transact. Travail pratique 2 Chargé de laboratoire: Antoine Béland Automne 2017 Département de génie informatique et de génie logiciel 1 Objectifs Le but de ce

Plus en détail

Les feuilles de style

Les feuilles de style 1 Les feuilles de style 1. introduction... 1 2. déclaration de style dans le document... 1 3. définitions de style dans les fichiers externes... 5 4. Les attributs de définitions de style... 6 1. introduction

Plus en détail

TP JAVASCRIPT Série N 4

TP JAVASCRIPT Série N 4 TP JAVASCRIPT Série N 4 GESTION D UN FORMULAIRE DE CONTACT Objectif : Nous souhaitons réaliser un formulaire de contact comprenant les champs suivants : NOM PRENOM ADRESSE MAIL MESSAGE Ci-dessous un exemple

Plus en détail

DAW Développement Applications Web. Ouadfel Salima Site du cours:

DAW Développement Applications Web. Ouadfel Salima Site du cours: DAW Développement Applications Web Ouadfel Salima Site du cours: http://salimaouadfel.e-monsite.com/ Conception de page web statique 2. CSS3 Validation CSS W3C Validator at http://jigsaw.w3.org/css-validator/

Plus en détail

Pour créer un tooltip, on utilise la balise <a>, 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

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

Activation et personnalisation de votre site mobile

Activation et personnalisation de votre site mobile Activation et personnalisation de votre site mobile Table des matières 1. Activation de la version mobile 2. Apparence générale et page d'accueil 2.1. Les couleurs 2.2. Les blocs libres communs à l'ensemble

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

Exécution du. traitement (1 fois) Seconde exécution du traitement

Exécution du. traitement (1 fois) Seconde exécution du traitement MMI 2016/2017 - IntégWeb TD4 Le timer Le timer est un chronomètre qui permet d'exécuter des traitements à intervalle de temps régulier. Globalement, avec un timer, on peut : exécuter une seule fois une

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

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

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

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

INTRODUCTION AU LANGAGE HTML ET CSS

INTRODUCTION AU LANGAGE HTML ET CSS INTRODUCTION AU LANGAGE HTML ET CSS Sur le Web il est d usage de séparer structure et contenu d une page (html) de son style (css) Quelques liens : http://validator.w3.org/:pour vérifier que le est conforme

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

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

On peut également définir certains éléments pour tout le fichier html, comme les liens par

On peut également définir certains éléments pour tout le fichier html, comme les liens par WEB : CSS (CSS 3) : Le CSS permet de créer des feuilles de style dans des fichiers ''.css'' qui sont utilisés par des fichiers html. La syntaxe du CSS est très simple, elle est constituée de règles associées

Plus en détail

CSS. Karima Boudaoud IUT- R&T

CSS. Karima Boudaoud IUT- R&T CSS Karima Boudaoud IUT- R&T Plan Plan Références bibliographiques Introduction à CSS Sélecteurs Propriétés et valeurs Responsive design Conclusion Karima Boudaoud IUT R&T - Sophia Antipolis 3 Références

Plus en détail

INF2005 Programmation web CSS. Jacques Berger

INF2005 Programmation web CSS. Jacques Berger INF2005 Programmation web CSS Jacques Berger Objectifs L'utilité de CSS La syntaxe de CSS L'intégration à HTML Prérequis HTML CSS Cascading Style Sheets Version courante : CSS 3 Le problème initial Pollution

Plus en détail

Table des matières LES ÉLÉMENTS DE BASES DE LA PAGE LES BALISES DE SECTIONNAGE LES BALISES DE DISPOSITIONS LES BALISES - 3 -

Table des matières LES ÉLÉMENTS DE BASES DE LA PAGE LES BALISES DE SECTIONNAGE LES BALISES DE DISPOSITIONS LES BALISES - 3 - Table des matières LES ÉLÉMENTS DE BASES DE LA PAGE - 1 - LES BALISES DE SECTIONNAGE - 2 - LES BALISES DE DISPOSITIONS - 2 - LES BALISES - 3 - LES DIFFÉRENTS TYPES DE BALISES - 3 - LES TABLES - 5 - LES

Plus en détail

DAW Développement Applications Web. Ouadfel Salima Site du cours:

DAW Développement Applications Web. Ouadfel Salima Site du cours: DAW Développement Applications Web Ouadfel Salima Site du cours: http://salimaouadfel.e-monsite.com/ Conception de page web statique 2. CSS3 Validation CSS W3C Validator at http://jigsaw.w3.org/css-validator/

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

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

HTML & CSS. d e s i g n w e b. [ présentation ]

HTML & CSS. d e s i g n w e b. [ présentation ] d e s i g n w e b [ présentation ] Généralités Les feuilles de styles (CSS) existent depuis 1996. Elles ne sont vraiment correctement supportées par les navigateurs que depuis 2000-2001. C'est donc depuis

Plus en détail

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

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

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

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

Libfly Pro Web 2.0. Guide d intégration sur Aloès Versions 180+

Libfly Pro Web 2.0. Guide d intégration sur Aloès Versions 180+ Libfly Pro Web 2.0 Guide d intégration Aloès.docx Version 2.3 Libfly Pro Web 2.0 Guide d intégration sur Aloès Versions 180+ Groupe Archimed SA au capital de 1.000.000 - NAF 6202A Siret 1 39308811700071

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

Principe. 501_bouton.html. Classe.btn classe secondaire.btn-default : Un bouton peut servir à : Valider un formulaire

Principe. 501_bouton.html. Classe.btn classe secondaire.btn-default : Un bouton peut servir à : Valider un formulaire Les boutons Principe Classe.btn classe secondaire.btn-default : Un bouton peut servir à : Valider un formulaire Lancer un script tajax Pointer vers un lien hypertexte Exemples :

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

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

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

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

Introduction aux technologies WEB. Pr. Hajar IGUER

Introduction aux technologies WEB. Pr. Hajar IGUER Introduction aux technologies WEB Pr. Hajar IGUER hajar.iguer@uic.ac.ma CSS : CASCADING STYLE SHEET I 2 Historique CSS a été introduit avec HTML 4, afin de fournir une meilleure façon de mettre en forme

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

DOSSIER D'ACTIVITES SUR LE HTML N 9 Appliquer des feuilles de style à du texte

DOSSIER D'ACTIVITES SUR LE HTML N 9 Appliquer des feuilles de style à du texte DOSSIER D'ACTIVITES SUR LE HTML N 9 Appliquer des feuilles de style à du texte Objectifs : Apprendre à l apprenant à se créer un espace de travail sous Linux Apprendre à l apprenant à ouvrir un éditeur

Plus en détail

Réussir son site web avec XHTML et CSS

Réussir son site web avec XHTML et CSS Leçon 10 Réussir son site web avec XHTML et CSS Positionnement et mise en page par le CSS 1. Les 3 modes d affichage pour les éléments HTML... 1 1- Bloc / block... 1 2- En-ligne / inline... 1 3- Invisible

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

CSS. Alexandre Benoit TS10. D après openclassrooms

CSS. Alexandre Benoit TS10. D après openclassrooms CSS D après openclassrooms Alexandre Benoit TS10 I Les bases du CSS 2 / 31 Introduction Où écrit t on le CSS? : 3 / 31 Introduction Où écrit t on le CSS? : Dans un nouveau fichier par exemple, nous l écrirons

Plus en détail

DOSSIER D'ACTIVITES SUR LE HTML N 12 Appliquer des feuilles de style aux formulaires

DOSSIER D'ACTIVITES SUR LE HTML N 12 Appliquer des feuilles de style aux formulaires DOSSIER D'ACTIVITES SUR LE HTML N 12 Appliquer des feuilles de style aux formulaires Objectifs : Apprendre à l apprenant à se créer un espace de travail sous Linux Apprendre à l apprenant à ouvrir un éditeur

Plus en détail

BDW1 - Programmation web - CSS

BDW1 - Programmation web - CSS BDW1 - Programmation web - CSS Fabien Duchateau fabien.duchateau [at] univ-lyon1.fr Université Claude Bernard Lyon 1 2016-2017 http://liris.cnrs.fr/fabien.duchateau/ens/bdw1/ Positionnement dans BDW1 BDW1

Plus en détail

Initiation à l'utilisation de PowerPoint

Initiation à l'utilisation de PowerPoint Initiation à l'utilisation de PowerPoint 1. démarche... p 2 2. lancement de l'application... p 2 3. les barres... p 2 4. l'arrière-plan a) création d'un arrière-plan... p 3 b) utilisation d'un modèle de

Plus en détail

Module Javascript - Présentation du langage - Exercices d application

Module Javascript - Présentation du langage - Exercices d application Module Javascript - Présentation du langage - Exercices d application February 15, 2011 Module Javascript - Présentation du langage - Exercices d application ii Contents 1 Exercice 1 1.1 Les premiers programmes

Plus en détail

Introduction aux CSS

Introduction aux CSS Introduction aux CSS CSS: Cascading Style Sheet = feuille de style en cascade CSS est en quelque sorte la peinture que l'on applique sur xhtml, avec nous allons pouvoir réaliser de la mise en page et de

Plus en détail

INSA - ASI TechnoWeb : CSS 1/23. Technologie Web CSS. Alexandre Pauchet. INSA Rouen - Département ASI. BO.B.RC.18,

INSA - ASI TechnoWeb : CSS 1/23. Technologie Web CSS. Alexandre Pauchet. INSA Rouen - Département ASI. BO.B.RC.18, INSA - ASI TechnoWeb : CSS 1/23 Technologie Web CSS Alexandre Pauchet INSA Rouen - Département ASI BO.B.RC.18, pauchet@insa-rouen.fr INSA - ASI TechnoWeb : CSS 2/23 Plan 1 Les CSS 2 XML et CSS INSA - ASI

Plus en détail

ISN S9: Les pages web

ISN S9: Les pages web Objectif : Mettre en forme une page HTML Lors de l'écriture de pages web, nous savons qu'il faut prendre l'habitude de toujours séparer : Le fond (le contenu) : c'est le rôle du fichier HTML. La décoration

Plus en détail

DFGSP - Diplôme de Formation Générale e Sciences Pharmaceutiques

DFGSP - Diplôme de Formation Générale e Sciences Pharmaceutiques DFGSP - Diplôme de Formation Générale e Sciences Pharmaceutiques Langue(s) d'enseignement : Français Lieu(x) de la formation : CLERMONT-FERRAND Pièce(s) jointe(s) à télécharger : Télécharger la plaquette

Plus en détail

Programmation Web IUT Villetaneuse 1. Bases de Javascript. Formation continue 2012

Programmation Web IUT Villetaneuse 1. Bases de Javascript. Formation continue 2012 Programmation Web IUT Villetaneuse 1 Bases de Javascript Formation continue 2012 Les sources associées à ce TD sont dans http://www-iutv.univ-paris13.fr/~khafif/progweb. 1 Exercices Démarrage 1. Prenez

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

CSS. Alexandre Benoit TS 2016/2017. D après openclassrooms

CSS. Alexandre Benoit TS 2016/2017. D après openclassrooms CSS D après openclassrooms Alexandre Benoit TS 2016/2017 I Les bases du CSS 2 / 29 Introduction Où écrit t on le CSS? : Dans un nouveau fichier par exemple, nous l écrirons dans le fichier style.css Dans

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

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

Anime m r un u texte Par JJ Pellé mai 2014

Anime m r un u texte Par JJ Pellé mai 2014 Animer un texte Par JJ Pellé mai 2014 Insertion d'un texte Ouvrir le bandeau "Insertion". Sélectionner la zone de texte en cliquant dessus Placer ensuite le curseur de la souris à l'emplacement du texte

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

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

Responsive Web Design, mises en page et grilles Les techniques modernes de conception web (2e édition)

Responsive Web Design, mises en page et grilles Les techniques modernes de conception web (2e édition) Chapitre 1 : Introduction A. Le design Web aujourd'hui 11 B. Le Responsive Web Design 11 C. Les approches dans la conception 12 D. Les objectifs du livre 13 E. Les outils de l intégrateur web 13 1. Les

Plus en détail

TABLE DES MATIERES. 1.6.Créer une animation 28

TABLE DES MATIERES. 1.6.Créer une animation 28 FLASH 5 RESUME Cet ouvrage se propose à l'appui d'exemples concrets de vous guider, de la simple réalisation de bannières jusqu'à la création d'animations complexes et variées de niveau professionnel pour

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

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

Développer pour tous les navigateurs

Développer pour tous les navigateurs Développer pour tous les navigateurs MS Tech Days 2013 Jérémie Patonnier @JeremiePat http://jpat.fr/mstd2013 Le problème L'image qu'on en a Le problème En fait c'est pire Les standards du Web Ils sont

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

Guide Utilisation HTML et Microsoft FrontPage

Guide Utilisation HTML et Microsoft FrontPage Guide Utilisation HTML et Microsoft FrontPage 4 4me Année Sciences Informatique Année scolaire : 2016-2017 I. Introduction au langage HTML HTML est un langage de description. Il permet d'enrichir un texte

Plus en détail

Dojo 2 Les ge g s e t s ionnaire ionnair s e de positionnement positionnemen

Dojo 2 Les ge g s e t s ionnaire ionnair s e de positionnement positionnemen Dojo 2 Les gestionnaires de positionnement dijit.layout.contentpane Conteneur simple similaire à une balise html div Propriétés href : null (lien qui définit le contenu div) preload : fl false refreshonshow:

Plus en détail

Mémo CSS 3. Exemple : h1 concerne toutes les éléments titres de niveau 1 <h1> 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

Logiciel PréAO Impress Epreuve C2I

Logiciel PréAO Impress Epreuve C2I Logiciel PréAO Impress Epreuve C2I 1) PREPARATION. Télécharger et décompresser ecole_primaire.zip 2) CREATION DE LA PRESENTATION Ouvrez une nouvelle présentation Impress à partir du menu des programmes

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

Réaliser un diaporama avec : Open Office Impress

Réaliser un diaporama avec : Open Office Impress Réaliser un diaporama avec : Open Office Impress Une présentation est un fichier destiné à être visionné directement sur un écran d'ordinateur ou projeté via un vidéo-projecteur. On dit généralement que

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

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

Mise en forme CSS3. Copyright Cédric Lefrancq - Tous droits réservés.

Mise en forme CSS3. Copyright Cédric Lefrancq - Tous droits réservés. Mise en forme CSS3 Copyright 2017 - Cédric Lefrancq - Tous droits réservés. 1 TABLE DES MATIERES Les bases de la feuille de style... 3 Les commentaires en CSS... 3 Intégrer la page CSS dans la page HTML...

Plus en détail

Web. Bruno BEAUFILS 2017/2018. Web 1 / 15

Web. Bruno BEAUFILS 2017/2018. Web 1 / 15 Web Bruno BEAUFILS 2017/2018 Web 1 / 15 1. World Wide Web HTML CSS Web World Wide Web 2 / 15 1. World Wide Web HTML CSS Web World Wide Web 3 / 15 Exercice Ecrivez un document vous décrivant à la forme

Plus en détail

CM3-2 : CSS3 Mickaël Martin Nevot

CM3-2 : CSS3 Mickaël Martin Nevot CM3-2 : CSS3 Mickaël Martin Nevot 01/10/2016 22:28 Cette œuvre de Mickaël Martin Nevot est mise à disposition selon les termes de la licence Creative Commons Attribution - Pas d'utilisation Commerciale

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

Introduction au Web. Bruno BEAUFILS 2017/2018. Introduction au Web 1 / 15

Introduction au Web. Bruno BEAUFILS 2017/2018. Introduction au Web 1 / 15 Introduction au Web Bruno BEAUFILS 2017/2018 Introduction au Web 1 / 15 1. Retours 2. CSS CSS Introduction au Web Retours 2 / 15 Retours Syntaxe Syntaxe HTML pas respectée indenter votre texte (pour voir

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

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

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

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

Introduction aux technologies WEB. Pr. Hajar IGUER

Introduction aux technologies WEB. Pr. Hajar IGUER Introduction aux technologies WEB Pr. Hajar IGUER hajar.iguer@uic.ac.ma LES BALISES Les attributs Les balises HTML peuvent avoir des attributs. Chaque balise accepte uniquement les attributs qui la concerne.

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

Technologies du Web Master COMASIC CSS

Technologies du Web Master COMASIC CSS Technologies du Web Master COMASIC CSS Antoine Amarilli 1 27 novembre 2014 1. Matériel de cours inspiré de notes par Pierre Senellart et de code par Pablo Rauzy. Merci à Pierre Senellart et Pablo Rauzy

Plus en détail

BOOTSTRAP 3. HTML, CSS & JS framework for RWD & mobile first projects. Bruxelles Formation CEPEGRA Olivier Céréssia webdesigner.cepegra-labs.

BOOTSTRAP 3. HTML, CSS & JS framework for RWD & mobile first projects. Bruxelles Formation CEPEGRA Olivier Céréssia webdesigner.cepegra-labs. BOOTSTRAP 3 HTML, CSS & JS framework for RWD & mobile first projects Bruxelles Formation CEPEGRA Olivier Céréssia 2016 webdesigner.cepegra-labs.be PRÉAMBULE Bootstrap est le plus populaire de tous les

Plus en détail

Voir le contenu des documents sur les pages suivantes.

Voir le contenu des documents sur les pages suivantes. Voir le contenu des documents sur les pages suivantes. INSERTION AUDIOS DANS UN SITE Ouvrir video.html avec bluefish Enregistrer une copie, la nommer audios.html Supprimer ce qui se trouve entre la balise

Plus en détail

Introduction à HTML: HyperText Markup Language

Introduction à HTML: HyperText Markup Language CREATION WEB HTML ET CSS Introduction à HTML: Le HTML, HyperText Markup Language, est un langage de balisage qui définit la structure logique d un document WWW diffusé sur le Web. La mise en forme de la

Plus en détail

La Capacité en Droit a une formation courte (2 ans) à double objectif :

La Capacité en Droit a une formation courte (2 ans) à double objectif : Capacité en Droit Langue(s) d'enseignement : Français Modalité(s) de la formation : Formation en présentiel formation initiale formation continue financée reprise d'études non financées Lieu(x) de la formation

Plus en détail